:root{--bg:#fefefe;--surface:#fff;--muted:#f1f1f0;--raised:#f7f7f6;--ink:#111;--secondary:#6f6f6f;--tertiary:#a0a0a0;--line:rgba(17,17,17,.09);--radius:24px;--shadow:0 24px 70px rgba(0,0,0,.11);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;color:#111;background:var(--bg);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.nav{height:84px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em}.brand img{width:36px;height:36px;border-radius:11px;object-fit:contain}.nav nav,.footer div{display:flex;align-items:center;gap:26px;font-size:14px}.nav nav>a:not(.pill),.footer a{color:var(--secondary)}.nav nav>a:hover,.footer a:hover{color:var(--ink)}.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--muted);font-size:14px;font-weight:700;transition:transform .2s,background .2s}.pill:hover{transform:translateY(-2px)}.pill--dark{background:#111;color:#fff}.pill--light{background:#fff;color:#111}.menu{display:none;border:0;background:var(--muted);border-radius:999px;padding:10px 15px;font-weight:700}.hero{padding-top:82px;text-align:center;overflow:visible}.eyebrow{display:inline-flex;gap:9px;align-items:center;color:var(--secondary);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.eyebrow span{width:7px;height:7px;border-radius:50%;background:#34c759}.hero h1{margin:24px auto 28px;font-size:clamp(54px,8.6vw,112px);line-height:.92;letter-spacing:-.07em;font-weight:900;max-width:1060px}.hero>p{max-width:640px;margin:0 auto;color:var(--secondary);font-size:clamp(17px,2vw,21px);line-height:1.6}.hero__actions{display:flex;gap:10px;justify-content:center;margin-top:34px}.product-stage{height:690px;margin-top:78px;position:relative;text-align:left}.browser-card{position:absolute;left:0;top:0;width:90%;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-1deg)}.browser-top{height:46px;background:var(--raised);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 16px;color:var(--tertiary);font-size:11px}.browser-top i{width:9px;height:9px;border-radius:50%;background:#d4d4d4}.browser-top span{margin-left:12px}.browser-body{padding:42px 48px 52px;text-align:center}.browser-body>img{width:68px;height:68px;border-radius:18px}.browser-body h2{font-size:25px;margin:13px 0 23px}.search{margin:auto;max-width:520px;border:1px solid var(--line);border-radius:999px;padding:13px 16px;color:var(--tertiary);font-size:13px;text-align:left}.search b{float:right;color:var(--secondary)}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px;text-align:left}.columns article,.phone-screen article{padding:18px;background:var(--muted);border-radius:18px;display:flex;flex-direction:column;gap:25px;min-height:150px}.columns small,.phone-screen small{color:var(--secondary);font-size:11px}.columns strong{font-size:17px;line-height:1.15}.columns span{font-size:11px;color:var(--tertiary);margin-top:auto}.phone-card{position:absolute;right:2%;bottom:0;width:270px;height:550px;padding:10px;border-radius:48px;background:#101010;box-shadow:0 32px 80px rgba(0,0,0,.25);transform:rotate(4deg)}.phone-screen{height:100%;border-radius:39px;background:#fff;padding:24px 18px;overflow:hidden}.status{font-size:10px;font-weight:700}.phone-screen h3{font-size:34px;letter-spacing:-.06em;margin:34px 0 15px}.tabs{font-size:12px;font-weight:700;margin-bottom:13px}.tabs span{color:var(--tertiary)}.phone-screen article{min-height:100px;margin-bottom:10px;gap:15px;padding:14px}.phone-screen article b{font-size:13px}.dock{position:absolute;bottom:28px;left:34px;right:34px;background:rgba(17,17,17,.91);color:#fff;border-radius:999px;text-align:center;padding:12px;font-size:15px}.section{padding:130px 0}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:30px;margin-bottom:54px}.section-head>span{font-size:12px;color:var(--secondary);font-weight:700;letter-spacing:.08em}.section h2,.cta h2{margin:0;font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.065em}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.feature{min-height:310px;background:var(--muted);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}.feature--wide{grid-column:span 2;min-height:390px}.feature--dark{background:#111;color:#fff}.feature .icon{width:46px;height:46px;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:22px}.feature--dark .icon{background:#2c2c2e}.feature h3{font-size:26px;margin:auto 0 10px;letter-spacing:-.04em}.feature p{max-width:460px;color:var(--secondary);line-height:1.6;margin:0}.feature--dark p{color:#a1a1a6}.mini-share{align-self:flex-end;width:min(480px,100%);background:#fff;border-radius:22px;padding:16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 50px rgba(0,0,0,.08);margin-top:25px;font-size:13px}.mini-share span{color:var(--secondary)}.security{border-top:1px solid var(--line)}.security-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}.security-copy p{font-size:20px;line-height:1.6;color:var(--secondary);margin-top:0}.text-link{display:inline-block;margin-top:15px;font-weight:700}.security-list{border-top:1px solid var(--line)}.security-list article{display:grid;grid-template-columns:1fr 1.5fr;gap:25px;padding:24px 0;border-bottom:1px solid var(--line)}.security-list span{color:var(--secondary);font-size:14px;line-height:1.55}.cta{background:#111;color:#fff;border-radius:36px;padding:90px 70px;text-align:center;margin-bottom:90px}.cta img{width:82px;height:82px;border-radius:22px}.cta h2{margin:24px 0}.cta p{color:#a1a1a6;margin-bottom:28px}.footer{border-top:1px solid var(--line);min-height:150px;display:flex;align-items:center;justify-content:space-between}.footer small{color:var(--tertiary)}.legal{padding:80px 0 120px}.legal__head{max-width:820px}.legal__head h1{font-size:clamp(52px,8vw,92px);line-height:.95;letter-spacing:-.065em;margin:20px 0}.legal__head p{color:var(--secondary);font-size:18px;line-height:1.6}.legal__body{display:grid;grid-template-columns:240px minmax(0,720px);gap:70px;margin-top:80px}.legal__toc{position:sticky;top:30px;align-self:start;display:flex;flex-direction:column;gap:14px;font-size:13px;color:var(--secondary)}.legal__content section{padding:0 0 45px;margin-bottom:45px;border-bottom:1px solid var(--line)}.legal__content h2{font-size:28px;letter-spacing:-.04em;margin:0 0 18px}.legal__content h3{font-size:17px;margin:25px 0 8px}.legal__content p,.legal__content li{color:var(--secondary);line-height:1.75;font-size:15px}.legal__content li+li{margin-top:8px}.notice{padding:18px;background:var(--muted);border-radius:16px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:10}
@media(max-width:760px){.shell{width:min(100% - 28px,1180px)}.nav{height:70px}.nav nav{display:none;position:absolute;top:64px;left:14px;right:14px;background:#fff;box-shadow:var(--shadow);padding:18px;border-radius:20px;flex-direction:column;z-index:20}.nav nav.open{display:flex}.menu{display:block}.hero{padding-top:55px}.hero h1{font-size:55px}.hero__actions{flex-direction:column}.product-stage{height:600px;margin-top:55px}.browser-card{width:108%;left:-25%;top:30px}.browser-body{padding:25px 24px 38px}.columns{grid-template-columns:repeat(3,180px)}.browser-card{overflow:hidden}.phone-card{width:225px;height:455px;right:-1%;z-index:2}.phone-screen h3{font-size:29px;margin-top:25px}.phone-screen article{min-height:82px}.section{padding:90px 0}.section-head{grid-template-columns:1fr;gap:18px}.feature-grid{grid-template-columns:1fr}.feature,.feature--wide{grid-column:auto;min-height:280px}.security-grid{grid-template-columns:1fr;gap:50px}.security-list article{grid-template-columns:1fr;gap:8px}.cta{padding:70px 22px;border-radius:28px}.footer{padding:40px 0;flex-direction:column;gap:28px}.footer div{flex-wrap:wrap;justify-content:center}.legal{padding-top:50px}.legal__body{grid-template-columns:1fr;margin-top:55px}.legal__toc{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pill{transition:none}}

/* Real product screenshots */
.product-stage{height:720px}
.product-stage figure{margin:0}
.browser-shot{position:absolute;left:0;top:0;width:91%;padding:10px;border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-1deg)}
.browser-shot img{display:block;width:100%;height:auto;border-radius:21px}
.app-shot{position:absolute;right:1%;bottom:0;width:250px;padding:8px;border-radius:48px;background:#111;box-shadow:0 32px 80px rgba(0,0,0,.28);transform:rotate(4deg);overflow:hidden}
.app-shot img{display:block;width:100%;height:auto;border-radius:40px}

/* Product mockups: frame the supplied screenshots without altering their artwork. */
.product-stage {
  height: 680px;
  margin-top: 58px;
}

.browser-shot {
  left: 0;
  top: 18px;
  z-index: 1;
  width: 84%;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 24px;
  background: #f7f7f6;
  box-shadow: 0 34px 70px rgba(17, 17, 17, 0.15), 0 2px 0 rgba(255, 255, 255, 0.9) inset;
  transform: rotate(-1.1deg);
}

.browser-shot__chrome {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  color: #929292;
  font-size: 11px;
  letter-spacing: 0.01em;
}

.browser-shot__traffic {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.browser-shot__traffic i {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: #d0d0cf;
}

.browser-shot__traffic i:first-child { background: #ff6259; }
.browser-shot__traffic i:nth-child(2) { background: #ffbd2e; }
.browser-shot__traffic i:last-child { background: #28c840; }

.browser-shot__address {
  min-width: 0;
  flex: 1;
  padding: 8px 18px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #9b9b9b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-shot__controls {
  flex: 0 0 auto;
  color: #777;
  font-size: 14px;
}

.browser-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 23px 23px;
}

.app-shot {
  right: 7%;
  bottom: -2px;
  z-index: 3;
  width: 294px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 48px;
  background: linear-gradient(145deg, #2a2a2a 0%, #050505 42%, #191919 100%);
  box-shadow: 0 38px 76px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(17, 17, 17, 0.18);
  transform: rotate(3.2deg);
}

.app-shot::before {
  position: absolute;
  inset: 8px;
  z-index: 2;
  content: '';
  border-radius: 41px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  pointer-events: none;
}

.app-shot__reflection {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 2;
  width: 44%;
  height: 25%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.23), transparent 68%);
  opacity: 0.5;
  transform: rotate(18deg);
  pointer-events: none;
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 39px;
}

@media (max-width: 760px) {
  .product-stage {
    height: 520px;
    margin-top: 44px;
  }

  .browser-shot {
    left: -18%;
    top: 18px;
    width: 116%;
    border-radius: 18px;
  }

  .browser-shot__chrome {
    height: 34px;
    gap: 10px;
    padding: 0 10px;
    font-size: 9px;
  }

  .browser-shot__traffic { gap: 4px; }
  .browser-shot__traffic i { width: 6px; height: 6px; }
  .browser-shot__address { padding: 5px 10px; }
  .browser-shot__controls { display: none; }

  .app-shot {
    right: 0;
    bottom: -4px;
    width: 190px;
    padding: 7px;
    border-radius: 34px;
  }

  .app-shot::before { inset: 6px; border-radius: 29px; }
  .app-shot img { border-radius: 27px; }
}

/* Computer mockup shell around the Chrome page. */
.browser-shot {
  display: block;
  padding: 12px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(145deg, #282828 0%, #090909 48%, #1b1b1b 100%);
  box-shadow: 0 34px 74px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(17, 17, 17, 0.2);
  overflow: hidden;
}

.computer-shell__bezel {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  height: 12px;
  align-items: center;
  justify-content: center;
}

.computer-shell__bezel i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3d3d3d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.025);
}

.computer-shell__screen {
  display: block;
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.computer-shell__screen .browser-shot__chrome {
  border-radius: 15px 15px 0 0;
}

.computer-shell__screen img {
  border-radius: 0 0 15px 15px;
}

.computer-shell__base {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  display: block;
  height: 12px;
}

.computer-shell__base i {
  display: block;
  width: 18%;
  height: 3px;
  margin: 4px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 760px) {
  .browser-shot {
    padding: 6px;
    border-radius: 18px;
  }

  .computer-shell__bezel {
    inset-inline: 0;
    top: 0;
    height: 6px;
  }

  .computer-shell__bezel i {
    width: 4px;
    height: 4px;
  }

  .computer-shell__screen {
    border-radius: 9px;
  }

  .computer-shell__screen .browser-shot__chrome {
    border-radius: 9px 9px 0 0;
  }

  .computer-shell__screen img {
    border-radius: 0 0 9px 9px;
  }

  .computer-shell__base {
    right: 6px;
    bottom: 0;
    left: 6px;
    height: 6px;
  }

  .computer-shell__base i {
    height: 2px;
    margin-top: 2px;
  }
}

@media(max-width:760px){
  .product-stage{height:480px}
  .browser-shot{width:112%;left:-31%;top:28px;padding:6px;border-radius:20px}
  .browser-shot img{border-radius:14px}
  .app-shot{width:180px;right:-1%;z-index:2;border-radius:34px;padding:6px}
  .app-shot img{border-radius:28px}
}

/* Compact hero and faithful light-mode presentation of the code-derived product previews. */
.hero{padding-top:32px}

@media(max-width:760px){
  .hero{padding-top:24px}
}

/* Chinese typography: keep hierarchy readable without cramped glyphs or orphan lines. */
.hero h1,
.section h2,
.cta h2,
.legal__head h1 {
  text-wrap: balance;
  letter-spacing: -0.045em;
}

.hero h1 {
  max-width: 920px;
  line-height: 1.06;
}

.hero > p {
  max-width: 620px;
  line-height: 1.72;
  text-wrap: balance;
}

.section h2,
.cta h2 {
  line-height: 1.06;
}

.feature h3 {
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.feature p,
.security-copy p,
.security-list span,
.legal__content p,
.legal__content li {
  line-height: 1.78;
  text-wrap: pretty;
}

.legal__head h1 {
  line-height: 1.04;
}

@media (max-width: 760px) {
  .hero h1 {
    max-width: 14em;
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .hero > p {
    max-width: 31em;
    line-height: 1.75;
  }

  .section h2,
  .cta h2 {
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
}

/* Design tokens: keep the marketing page aligned with the app and extension. */
:root {
  --bg: #fefefe;
  --page-gray: #f7f7f5;
  --surface: #ffffff;
  --muted: #f1f1f0;
  --raised: #f7f7f6;
  --ink: #111111;
  --secondary: #6f6f6f;
  --tertiary: #a0a0a0;
  --action: #111111;
  --on-action: #ffffff;
  --line: rgba(17, 17, 17, 0.08);
  --action-muted: rgba(17, 17, 17, 0.08);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-emphasized: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.shell {
  width: min(1180px, calc(100% - (var(--space-5) * 2)));
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

.pill {
  min-height: 50px;
  gap: var(--space-1);
  padding-inline: var(--space-6);
  border-radius: 999px;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surfaceMuted, var(--muted));
}

.language-toggle button {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--secondary);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.language-toggle button:hover,
.language-toggle button:focus-visible {
  color: var(--ink);
  outline: none;
}

.language-toggle button[aria-pressed='true'] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.inline-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  vertical-align: -0.18em;
}

.feature-grid {
  gap: var(--space-4);
}

.feature {
  min-height: 310px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.feature--wide {
  min-height: 390px;
}

.feature .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--action-muted);
}

.feature .icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.feature--dark .icon {
  background: rgba(255, 255, 255, 0.12);
}

.feature--dark .icon img {
  filter: invert(1);
}

.mini-share {
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.mini-share span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mini-share__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cta {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-emphasized);
}

/* Section labels sit on the left; the headline resolves against the right edge. */
.section-head h2 {
  max-width: 760px;
  justify-self: end;
  text-align: right;
}

/* Keep text blocks and controls away from the section edges on narrow screens. */
.section-head,
.feature-grid,
.security-grid,
.footer {
  padding-inline: clamp(4px, 1vw, 12px);
}

.section-head h2,
.feature p,
.security-copy,
.security-list,
.cta h2,
.cta p {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .language-toggle {
    margin-left: auto;
    margin-right: 8px;
  }

  .section-head h2 {
    justify-self: start;
    text-align: left;
  }

  .section-head,
  .feature-grid,
  .security-grid,
  .footer {
    padding-inline: 4px;
  }
}

/* Feature card motion: each card reveals a quiet, functional visual on hover. */
.feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 600ms ease;
}

.feature::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.82), transparent 34%);
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.feature--dark::before {
  background: radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.16), transparent 34%);
}

.feature > .icon,
.feature > h3,
.feature > p,
.feature > .mini-share {
  position: relative;
  z-index: 2;
}

.feature > .icon {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 400ms ease, box-shadow 400ms ease;
}

.feature-art {
  position: absolute;
  z-index: 0;
  top: 7%;
  right: 7%;
  width: min(42%, 230px);
  height: min(60%, 210px);
  opacity: 0;
  transform: translate3d(22px, -18px, 0) scale(0.82) rotate(5deg);
  filter: blur(5px);
  pointer-events: none;
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms ease;
}

.feature--wide .feature-art {
  width: min(42%, 330px);
  height: 72%;
  top: 4%;
  right: 8%;
}

.feature:hover,
.feature:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.13);
}

.feature--dark:hover,
.feature--dark:focus-within {
  background-color: #171717;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
}

.feature:hover::before,
.feature:focus-within::before,
.feature:hover .feature-art,
.feature:focus-within .feature-art {
  opacity: 1;
}

.feature:hover::before,
.feature:focus-within::before {
  opacity: 0.72;
}

.feature:hover > .icon,
.feature:focus-within > .icon {
  transform: translateY(-3px) rotate(-5deg) scale(1.06);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.12);
}

.feature--dark:hover > .icon,
.feature--dark:focus-within > .icon {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.feature:hover .feature-art,
.feature:focus-within .feature-art {
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  filter: blur(0);
}

.feature-art i {
  position: absolute;
  display: block;
}

/* Save: a stack of reading cards with a bookmark mark. */
.feature-art--save {
  color: rgba(17, 17, 17, 0.16);
}

.art-card {
  width: 56%;
  height: 68%;
  border: 1px solid currentColor;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.05);
}

.art-card::before,
.art-card::after {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 1px;
  content: '';
  background: currentColor;
}

.art-card::before { top: 34%; }
.art-card::after { top: 46%; right: 30%; }

.art-card--back {
  top: 16%;
  left: 14%;
  transform: rotate(-13deg);
}

.art-card--front {
  top: 23%;
  left: 30%;
  transform: rotate(8deg);
  background: rgba(255, 255, 255, 0.72);
}

.art-bookmark {
  top: 31%;
  left: 58%;
  width: 18%;
  height: 28%;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  transform: rotate(8deg);
}

.art-bookmark::after {
  position: absolute;
  right: -2px;
  bottom: -9px;
  width: 13px;
  height: 13px;
  content: '';
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: inherit;
  transform: rotate(45deg);
}

.feature:hover .art-card--back,
.feature:focus-within .art-card--back {
  animation: feature-save-back 5s ease-in-out infinite;
}

.feature:hover .art-card--front,
.feature:focus-within .art-card--front {
  animation: feature-save-front 4.5s ease-in-out infinite;
}

/* Organize: four tiles settle into a precise grid. */
.feature-art--organize {
  width: min(42%, 150px);
  height: min(42%, 150px);
  top: 14%;
  right: 11%;
  color: rgba(17, 17, 17, 0.16);
}

.art-tile {
  width: 34%;
  height: 34%;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.05);
}

.art-tile--1 { top: 8%; left: 8%; }
.art-tile--2 { top: 8%; right: 8%; }
.art-tile--3 { bottom: 8%; left: 8%; }
.art-tile--4 { right: 8%; bottom: 8%; }

.feature:hover .art-tile,
.feature:focus-within .art-tile {
  animation: feature-organize-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.feature:hover .art-tile--2,
.feature:focus-within .art-tile--2 { animation-delay: 70ms; }
.feature:hover .art-tile--3,
.feature:focus-within .art-tile--3 { animation-delay: 140ms; }
.feature:hover .art-tile--4,
.feature:focus-within .art-tile--4 { animation-delay: 210ms; }

/* Sync: two orbits move in opposite directions around a shared center. */
.feature-art--sync {
  width: min(48%, 175px);
  height: min(48%, 175px);
  top: 12%;
  right: 9%;
  color: rgba(17, 17, 17, 0.17);
}

.art-orbit {
  inset: 12%;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.art-orbit::after {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  content: '';
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.art-orbit--inner {
  inset: 28%;
  transform: rotate(180deg);
}

.art-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

.art-dot--a { top: 4%; left: 49%; }
.art-dot--b { right: 12%; bottom: 18%; }

.feature:hover .art-orbit--outer,
.feature:focus-within .art-orbit--outer {
  animation: feature-orbit 9s linear infinite;
}

.feature:hover .art-orbit--inner,
.feature:focus-within .art-orbit--inner {
  animation: feature-orbit-reverse 6s linear infinite;
}

.feature:hover .art-dot,
.feature:focus-within .art-dot {
  animation: feature-dot-pulse 2.4s ease-in-out infinite;
}

/* New tab: a minimal browser window floats into view. */
.feature-art--browser {
  width: min(58%, 205px);
  height: min(54%, 165px);
  top: 10%;
  right: 8%;
  color: rgba(255, 255, 255, 0.22);
}

.art-window {
  inset: 8% 5%;
  border: 1px solid currentColor;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
  transform: perspective(500px) rotateY(-12deg) rotateX(4deg);
}

.art-window__bar {
  top: 16%;
  left: 9%;
  width: 18%;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 12px 0 0 -1px currentColor, 24px 0 0 -1px currentColor;
}

.art-window__line {
  left: 12%;
  height: 1px;
  background: currentColor;
}

.art-window__line--1 { top: 50%; right: 20%; }
.art-window__line--2 { top: 63%; right: 38%; }

.feature:hover .art-window,
.feature:focus-within .art-window {
  animation: feature-window-float 5s ease-in-out infinite;
}

@keyframes feature-save-back {
  0%, 100% { transform: rotate(-13deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-10deg) translate3d(-6px, 5px, 0); }
}

@keyframes feature-save-front {
  0%, 100% { transform: rotate(8deg) translate3d(0, 0, 0); }
  50% { transform: rotate(5deg) translate3d(6px, -6px, 0); }
}

@keyframes feature-organize-in {
  from { opacity: 0; transform: scale(0.65) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes feature-orbit {
  to { transform: rotate(360deg); }
}

@keyframes feature-orbit-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes feature-dot-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.55; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes feature-window-float {
  0%, 100% { transform: perspective(500px) rotateY(-12deg) rotateX(4deg) translate3d(0, 0, 0); }
  50% { transform: perspective(500px) rotateY(-8deg) rotateX(2deg) translate3d(-4px, 6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .feature,
  .feature > .icon,
  .feature-art,
  .feature-art * {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .feature:hover,
  .feature:focus-within {
    transform: none;
  }
}

/* Compact callout for legal and security notes. */
.notice {
  display: block;
  min-height: 0;
  height: auto;
  align-self: start;
  margin: 0 0 48px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--muted), var(--raised));
  box-shadow: var(--shadow-card);
}

.notice__label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7;
  white-space: nowrap;
}

.notice p {
  max-width: none;
  margin: 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .notice {
    margin-bottom: 36px;
    padding: 16px 18px;
  }
}

/* Legal callouts contain one paragraph; keep them fluid instead of forcing a max-content grid column. */
.legal__content section.notice {
  display: block;
  min-width: 0;
  height: auto;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--muted), var(--raised));
  overflow: hidden;
}

.legal__content section.notice p {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--secondary);
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .legal__content section.notice {
    padding: 16px 18px;
  }
}

/* Final scale tuning: keep the hero to its intended two-line rhythm. */
.hero h1 {
  max-width: 1100px;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

@media (min-width: 761px) {
  .hero h1 {
    white-space: nowrap;
  }
}

.hero > p {
  font-size: clamp(16px, 1.4vw, 18px);
}

.section h2,
.cta h2 {
  font-size: clamp(38px, 4.6vw, 60px);
}

.feature h3 {
  font-size: 22px;
}

.security-copy p {
  font-size: 18px;
}

.legal__head h1 {
  font-size: clamp(44px, 6vw, 72px);
}

.legal__content h2 {
  font-size: 24px;
}

@media (max-width: 760px) {
  .hero h1 {
    max-width: 100%;
    font-size: clamp(34px, 9vw, 54px);
    line-height: 1.12;
    white-space: normal;
  }

  .section h2,
  .cta h2 {
    font-size: clamp(34px, 9vw, 48px);
  }
}

/* Feature cards: one calm, even row on desktop; step down before the cards get tight. */
.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.feature,
.feature--wide {
  grid-column: auto;
  min-height: 350px;
}

@media (max-width: 1060px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature--wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature,
  .feature--wide {
    grid-column: auto;
    min-height: 280px;
  }
}

/* Keep legal-page lead descriptions balanced instead of leaving a short orphan line. */
.legal__head p {
  max-width: 760px;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .legal__head p {
    max-width: 100%;
    text-wrap: pretty;
  }
}

/* Shared copy rules: keep every supporting description readable across all portal pages. */
.hero > p,
.feature p,
.security-copy p,
.security-list span,
.cta p,
.legal__head p,
.legal__content p,
.legal__content li,
.notice,
.notice p {
  overflow-wrap: break-word;
  word-break: normal;
}

.legal__head p {
  text-wrap: balance;
}

@media (max-width: 760px) {
  .legal__head p {
    text-wrap: pretty;
  }
}

/* Single-file policy portal: a familiar left directory with one readable content column. */
.legal--tabs {
  max-width: 1180px;
}

.nav--policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
}

.nav--policy nav {
  justify-self: center;
}

.nav--policy > .language-toggle {
  justify-self: end;
}

.legal-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(42px, 7vw, 88px);
  align-items: start;
  margin-top: 64px;
}

.legal-sidebar {
  position: sticky;
  top: 28px;
  align-self: start;
}

.legal-sidebar__label {
  display: block;
  margin-bottom: 14px;
  color: var(--tertiary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legal-tabs button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.legal-tabs button:hover,
.legal-tabs button:focus-visible {
  border-color: var(--line);
  background: var(--muted);
  color: var(--ink);
  outline: none;
}

.legal-tabs button[aria-selected='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-action);
}

.legal-tabs__panels {
  min-width: 0;
}

.legal-tabs__panel {
  display: none;
  padding: 34px 40px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.legal-tabs__panel.is-active {
  display: block;
}

.legal-tabs__panel[hidden] {
  display: none;
}

.legal-tabs__panel h3 {
  margin-top: 30px;
}

@media (max-width: 760px) {
  .nav--policy {
    display: flex;
    gap: 8px;
  }

  .nav--policy > .language-toggle {
    margin-left: auto;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .legal-sidebar {
    position: static;
  }

  .legal-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
  }

  .legal-tabs__panels {
    margin-top: 0;
  }

  .legal-tabs__panel {
    padding: 26px 20px 32px;
  }
}

/* Feature cards share one light theme and use dark only as a deliberate hover state. */
.feature,
.feature--dark {
  background: var(--muted);
  color: var(--ink);
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease,
    box-shadow 220ms ease;
}

.feature::before,
.feature-art {
  display: none !important;
}

.feature > .icon {
  transform: none;
  box-shadow: none;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.feature > .icon img {
  transition: filter 220ms ease;
}

.feature:hover,
.feature:focus-within,
.feature--dark:hover,
.feature--dark:focus-within {
  background: var(--ink);
  color: var(--on-action);
  transform: translateY(-4px);
  box-shadow: var(--shadow-emphasized);
}

.feature:hover > .icon,
.feature:focus-within > .icon,
.feature--dark:hover > .icon,
.feature--dark:focus-within > .icon {
  background: rgba(255, 255, 255, 0.12);
  transform: none;
  box-shadow: none;
}

.feature:hover > .icon img,
.feature:focus-within > .icon img,
.feature--dark:hover > .icon img,
.feature--dark:focus-within > .icon img {
  filter: invert(1);
}

.feature:hover p,
.feature:focus-within p,
.feature--dark:hover p,
.feature--dark:focus-within p {
  color: rgba(255, 255, 255, 0.72);
}

/* Final mobile mockup tuning: keep the phone close without hiding the browser frame. */
@media (max-width: 760px) {
  .product-stage {
    height: 520px;
    margin-top: 44px;
  }

  .browser-shot {
    left: -18%;
    top: 18px;
    width: 116%;
    padding: 6px;
    border-radius: 18px;
  }

  .browser-shot__chrome {
    height: 34px;
    gap: 10px;
    padding: 0 10px;
    font-size: 9px;
  }

  .browser-shot__traffic { gap: 4px; }
  .browser-shot__traffic i { width: 6px; height: 6px; }
  .browser-shot__address { padding: 5px 10px; }
  .browser-shot__controls { display: none; }
  .browser-shot img { border-radius: 0 0 9px 9px; }
  .computer-shell__bezel { inset-inline: 0; top: 0; height: 6px; }
  .computer-shell__screen { border-radius: 9px; }
  .computer-shell__screen .browser-shot__chrome { border-radius: 9px 9px 0 0; }
  .computer-shell__screen img { border-radius: 0 0 9px 9px; }
  .computer-shell__base { right: 6px; bottom: 0; left: 6px; height: 6px; }
  .computer-shell__base i { height: 2px; margin-top: 2px; }

  .app-shot {
    right: 0;
    bottom: -4px;
    width: 190px;
    padding: 7px;
    border-radius: 34px;
  }

  .app-shot::before { inset: 6px; border-radius: 29px; }
  .app-shot img { border-radius: 27px; }
}