/* =====================================================================
   Suzhe UI · Design tokens and base styles (tokens.css)
   Usage: paste the whole file into your project (or reference it with <link>), then build components from components.md.
   Values come from the live suzhe.ai pages; breakpoints match apple.com:
   ≥1069 desktop / 735–1068 tablet / ≤734 phone.
   ===================================================================== */

:root{
  /* Fonts: Apple devices use the system SF + PingFang (zero download); other platforms fall back to Inter → Chinese system fonts */
  --f-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

  /* Backgrounds: three only (white / light grey / black), plus one darker grey for buttons and tracks */
  --bg:#fff; --bg-2:#f5f5f7; --bg-3:#e8e8ed; --bg-black:#000;

  /* Text: greyscale only, never pure black */
  --ink:#1d1d1f;   /* primary text */
  --ink-2:#6e6e73; /* secondary */
  --ink-3:#86868b; /* captions, placeholders */
  --ink-4:#424245; /* footer links, long descriptions */
  --line:#d2d2d7; --line-2:#e8e8ed;

  /* The only accent: blue. For primary buttons, links and focus only */
  --blue:#0071e3; --blue-h:#0077ed;
  --link:#0066cc; --link-d:#2997ff;          /* light ground / dark ground */
  --eyebrow:#b64400; --eyebrow-d:#ff9f0a;    /* warm eyebrow colour: light ground / dark ground */

  /* Status colours: state only, never decoration */
  --ok:#1d7d38; --warn:#b64400; --err:#d70015;
  --ok-bg:#eaf6ed; --warn-bg:#fff4e5; --err-bg:#fff0f1; --info-bg:#eef5fe;

  /* Three text levels for dark sections */
  --d-ink:#f5f5f7; --d-ink-2:#a1a1a6; --d-ink-3:#86868b;

  /* Radii */
  --r-xl:28px; --r-lg:18px; --r-md:12px; --r-sm:9px; --pill:980px;

  /* Shadows: for white cards on grey; cards on white use a grey fill and no shadow */
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.05);
  --sh-card-h:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1);
  --sh-modal:0 40px 100px rgba(0,0,0,.32);
  --sh-float-dark:0 18px 44px rgba(0,0,0,.42),inset 0 0 0 .5px rgba(255,255,255,.12); /* dark floating layer + hairline highlight edge */

  /* Easing: five curves, one job each */
  --ease:cubic-bezier(.28,.11,.32,1);        /* default: colour, hover, reveal */
  --ease-out:cubic-bezier(0,0,.5,1);         /* small-element entrances */
  --spring:cubic-bezier(.2,.9,.25,1.02);     /* a touch of spring: modals, image hover, hero headline */
  --ease-apple:cubic-bezier(.32,.72,0,1);    /* size morphs: button growing into a card, bottom sheet */
  --ease-glide:cubic-bezier(.16,1,.3,1);     /* indicator slides, step transitions */

  /* Dimensions */
  --nav-h:48px; --wrap:1120px; --gut:22px;
}
@media (max-width:1068px){ :root{ --wrap:100% } }
@media (max-width:734px){ :root{ --gut:20px } }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-2);scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);
  font:400 17px/1.47 var(--f-text);letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html[lang^="zh"] body{letter-spacing:0}     /* negative tracking is for Latin text only; CJK stays at 0 */
@media (max-width:734px){ body{font-size:16px} }

/* Inter renders "5x5" as "5×5", which corrupts emails and codes. The font shorthand resets this feature, hence the universal selector + !important */
html *,html *::before,html *::after{font-feature-settings:"calt" 0!important}

:where(a){color:var(--link);text-decoration:none}
:where(a:hover){text-decoration:underline}
:where(button){font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}
:where(img,svg,video){display:block;max-width:100%}
[hidden]{display:none!important}
sup{font-size:.6em;line-height:0;vertical-align:.7em}
.num{font-variant-numeric:tabular-nums}     /* for prices, counts, countdowns and percentages */

/* Focus: outline only, never change the radius (changing it turns rounded inputs square on focus) */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:fixed;top:-60px;left:12px;z-index:100;padding:8px 16px;border-radius:var(--pill);background:var(--blue);color:#fff}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typography ---------- */
.eyebrow{font:600 12px/1.33 var(--f-text);color:var(--eyebrow);margin:0 0 8px}
.h-hero{font:600 clamp(48px,6vw,80px)/1.05 var(--f-display);letter-spacing:-.02em;margin:0}
.h-promo{font:600 clamp(36px,5vw,64px)/1.06 var(--f-display);letter-spacing:-.022em;margin:0}
.h-sec{font:600 clamp(28px,3.3vw,40px)/1.1 var(--f-display);letter-spacing:-.015em;margin:0}
.h-card{font:600 21px/1.2 var(--f-display);letter-spacing:-.012em;margin:0}
.sub{font:400 clamp(17px,1.6vw,21px)/1.38 var(--f-text);color:var(--ink-2);margin:0}
.small{font:400 14px/1.43 var(--f-text)}
.caption{font:400 12px/1.4 var(--f-text);color:var(--ink-2)}
@media (max-width:734px){ .h-hero{font-size:clamp(40px,12vw,56px)} }
html[lang^="zh"] :is(.h-hero,.h-promo,.h-sec,.h-card){letter-spacing:0}
/* Headline orphan control: CJK breaks only at punctuation or spaces, so a lone "。" never drops to the next line */
:is(.h-hero,.h-promo,.h-sec,.h-card,h1,h2,h3){word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
p{text-wrap:pretty}
/* Two-tone headline: one clause says what, the other says why */
.t-soft{color:var(--ink-2)}

/* ---------- Sections and layout ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin:0 auto}
.sec{padding:96px 0 104px}
.sec-head{margin-bottom:36px}
@media (max-width:734px){ .sec{padding:64px 0 72px} .sec-head{margin-bottom:26px} }
.sec-white{background:var(--bg)}
.sec-gray{background:var(--bg-2)}
.sec-black,.is-dark{background:var(--bg-black);color:var(--d-ink)}
/* Text in dark sections (applies to both .sec-black and .is-dark; the link rule excludes buttons, or it would override button text colour) */
:is(.sec-black,.is-dark) :is(.sub,.t-soft){color:var(--d-ink-2)}
:is(.sec-black,.is-dark) .caption{color:var(--d-ink-3)}
:is(.sec-black,.is-dark) .eyebrow{color:var(--eyebrow-d)}
:is(.sec-black,.is-dark) a:not(.btn){color:var(--link-d)}
/* Glows live on pseudo-elements with an isolated parent, so they never slip under other sections */
.glow-host{position:relative;isolation:isolate;overflow:hidden}
/* 12px white seam between coloured banners */
.seam{border-top:12px solid var(--bg)}
@media (max-width:1068px){ .seam{border-top-width:10px} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 16px;
  border:0;border-radius:var(--pill);font:400 14px/1.2 var(--f-text);text-decoration:none!important;white-space:nowrap;
  transition:background-color .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease),transform .14s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:48px;padding:12px 24px;font-size:17px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-h)}
/* Outline via inset box-shadow, not border: the size doesn't jump when switching between outline and fill */
.btn-secondary{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.btn-secondary:hover{background:var(--blue);color:#fff}
.btn-ghost-dark{background:transparent;color:var(--link-d);box-shadow:inset 0 0 0 1px var(--link-d)}
.btn-ghost-dark:hover{background:var(--link-d);color:#000}
.btn-gray{background:var(--bg-3);color:var(--ink)}
.btn-gray:hover{background:#dedee3}
.btn-ink{background:var(--ink);color:#fff}   /* primary button for flow pages (sign-in, redeem) */
.btn-ink:hover{background:#000}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}
/* Text link + a › drawn with borders */
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:17px;color:var(--link)}
.tlink::after{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
:is(.sec-black,.is-dark) .tlink{color:var(--link-d)}

/* ---------- Cards ---------- */
.card{position:relative;border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--sh-card);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-card-h)}
.sec-white .card{background:var(--bg-2);box-shadow:none}   /* grey cards on white sections, no shadow */
.sec-white .card:hover{transform:scale(1.015)}
.card .media img{transition:transform .8s var(--spring)}
.card:hover .media img{transform:translateY(-4px) scale(1.04)}
@media (hover:none){ .card:hover{transform:none} }

/* ---------- Top navigation (frosted glass only for things floating above content) ---------- */
.gnav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:#e8e8ed;
  background:rgba(22,22,23,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  font:400 12.5px/1 var(--f-text);letter-spacing:-.01em}
.gnav-in{width:min(1200px,100% - 2*var(--gut));height:100%;margin:0 auto;display:flex;align-items:center;gap:8px}
.gnav a:not(.btn){color:rgba(255,255,255,.8);text-decoration:none}
.gnav a:not(.btn):hover{color:#fff}

/* ---------- Forms ---------- */
.field{display:block;width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg);color:var(--ink);font:400 17px/1.35 var(--f-text);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field:hover{border-color:#b9b9be}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}   /* reads as a single 2px blue border, no outer glow */
.field::placeholder{color:#a1a1a6;opacity:1}
.field:disabled{background:var(--bg-2);color:var(--ink-3)}
.field[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err);animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
.field-err{display:flex;gap:6px;margin-top:8px;font:400 13px/1.45 var(--f-text);color:var(--err)}
.label{display:block;margin-bottom:8px;font:600 14px/1.3 var(--f-text)}
.hint{font:400 13px/1.3 var(--f-text);color:var(--ink-3)}
/* Phones and touch screens: inputs must be ≥16px or iOS auto-zooms; don't use maximum-scale=1, it blocks pinch-zoom */
@media (hover:none) and (pointer:coarse),(max-width:734px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]),textarea,select{font-size:16px!important}
  html{touch-action:manipulation}
}

/* ---------- Feedback ---------- */
.alert{padding:13px 16px;border-radius:14px;font:400 14px/1.55 var(--f-text);background:var(--bg-2);animation:rise-s .3s var(--ease-out)}
.alert-err{background:var(--err-bg)} .alert-ok{background:var(--ok-bg)} .alert-info{background:var(--info-bg)}
.toast{position:fixed;left:50%;top:calc(var(--nav-h) + 14px);z-index:90;max-width:calc(100vw - 32px);padding:10px 18px;
  border-radius:var(--pill);background:rgba(29,29,31,.88);color:#f5f5f7;font:500 14px/1.35 var(--f-text);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;transform:translate(-50%,-8px);pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Editorial register (identity moments: sign-in/sign-up, about, share cards, brand statements) ----------
   Add class="editorial" to the page root. Warm black by default; switches to warm paper when the system is light.
   The primary button is ink (the text colour, inverted), not blue; display type is serif, body text stays in the system sans. */
.editorial{
  --bg:#141413; --surface:#262624; --surface-h:#30302d; --field:#1c1c1a;
  --ink:#f5f4ef; --ink-2:#c3bfb6; --ink-3:#8f8b83;
  --line:rgba(245,244,239,.14); --line-2:rgba(245,244,239,.08);
  --primary:#f5f4ef; --primary-ink:#141413;
  --link:#86adff; --focus:#4a8cff;
  --ok:#5fd07a; --warn:#f0a65a; --err:#ff6b6b;
  --accent:#d97757;                 /* the only warm accent; at most once per page */
  --r-card:24px; --r-ctl:10px;
  --f-serif:"Source Serif 4","Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
  color-scheme:dark light;
  background:var(--bg); color:var(--ink);
}
@media (prefers-color-scheme:light){
  .editorial{
    --bg:#faf9f5; --surface:#f0eee6; --surface-h:#e8e5db; --field:#fff;
    --ink:#1f1e1d; --ink-2:#5c5850; --ink-3:#6f6a62;
    --line:rgba(31,30,29,.16); --line-2:rgba(31,30,29,.09);
    --primary:#1f1e1d; --primary-ink:#faf9f5;
    --link:#2b62d9; --focus:#2b6fe3;
    --ok:#1d7d38; --warn:#a35200; --err:#c4111f;
  }
}
.editorial .display{font:500 clamp(40px,4.2vw,62px)/1.14 var(--f-serif);letter-spacing:-.01em;text-wrap:balance;margin:0}
.editorial .lede{font:400 17px/1.55 var(--f-text);color:var(--ink-2);margin:0}
.editorial .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;padding:28px}
.editorial .card:hover{transform:none}
.editorial .btn-ink{min-height:44px;padding:0 18px;border-radius:var(--r-ctl);background:var(--primary);color:var(--primary-ink);font:500 15px/1.2 var(--f-text)}
.editorial .btn-ink:active{transform:scale(.985)}
.editorial .field{min-height:44px;padding:0 14px;border-radius:var(--r-ctl);background:var(--field);border-color:var(--line);color:var(--ink);font-size:15px}
.editorial .field:focus{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.editorial :focus-visible{outline-color:var(--focus)}
@media (max-width:600px){ .editorial .display{font-size:36px} }

/* ---------- Motion ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rise-s{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.86)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .spin{animation:spin 1.4s linear infinite!important}   /* the loading spinner conveys state, so it stays */
}