/* Cambiora website. Design: design/prototype/Website.dc.html, WebsitePrivacy.dc.html.
   Tokens match the app (docs/design.md). */
/* Latin subsets, plus Latin Extended (Turkish, Polish …) declared after them: the browser tries the -ext face first
   for characters in its unicode-range and loads it only when a page uses such characters. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url(fonts/sora-700.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url(fonts/sora-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Vietnamese tone letters, on every page ("Tiếng Việt" in the language menu). Sora has no Vietnamese, so the
   headings of Vietnamese pages use IBM Plex Sans Bold under its own name (no download for <strong> elsewhere). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-vi-400.woff2) format("woff2");unicode-range:U+0300-0301,U+0303,U+0309,U+0323,U+1EA0-1EF1}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-vi-500.woff2) format("woff2");unicode-range:U+0300-0301,U+0303,U+0309,U+0323,U+1EA0-1EF1}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-vi-600.woff2) format("woff2");unicode-range:U+0300-0301,U+0303,U+0309,U+0323,U+1EA0-1EF1}
@font-face{font-family:"IBM Plex Sans Display";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-vi-display-700.woff2) format("woff2")}
/* Ukrainian, Russian and Bulgarian: Cyrillic subsets of the characters their pages use (tool/website/subset_fonts.py), under their
   own family name so that only these pages load them; other pages draw the menu names with "Cambiora Names". Sora has
   no Cyrillic, so headings use weight 700, which holds every character of these pages (like Vietnamese). */
@font-face{font-family:"IBM Plex Sans Cyrillic";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-cyrl-400.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Sans Cyrillic";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-cyrl-500.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Sans Cyrillic";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-cyrl-600.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"IBM Plex Sans Cyrillic";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-cyrl-700.woff2) format("woff2")}
/* Greek: the same pattern as Cyrillic. The subsets hold every monotonic capital, because eyebrows are upper-cased. */
@font-face{font-family:"IBM Plex Sans Greek";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-grek-400.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"IBM Plex Sans Greek";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-grek-500.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"IBM Plex Sans Greek";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-grek-600.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"IBM Plex Sans Greek";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-grek-700.woff2) format("woff2")}
/* Thai, Japanese, Korean and Chinese: only the characters the pages of that language use
   (tool/website/subset_fonts.py); only pages in that language name these families (html:lang below). */
@font-face{font-family:"IBM Plex Sans Thai";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-thai-400.woff2) format("woff2");unicode-range:U+0E01-0E5B}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-thai-600.woff2) format("woff2");unicode-range:U+0E01-0E5B}
@font-face{font-family:"IBM Plex Sans Thai";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-thai-700.woff2) format("woff2");unicode-range:U+0E01-0E5B}
@font-face{font-family:"IBM Plex Sans JP";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-jp-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans JP";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-jp-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans JP";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-jp-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-kr-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-kr-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-kr-700.woff2) format("woff2")}
@font-face{font-family:"Noto Sans TC";font-weight:400;font-display:swap;src:url(fonts/noto-sans-tc-400.woff2) format("woff2")}
@font-face{font-family:"Noto Sans TC";font-weight:600;font-display:swap;src:url(fonts/noto-sans-tc-600.woff2) format("woff2")}
@font-face{font-family:"Noto Sans TC";font-weight:700;font-display:swap;src:url(fonts/noto-sans-tc-700.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:400;font-display:swap;src:url(fonts/noto-sans-sc-400.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:600;font-display:swap;src:url(fonts/noto-sans-sc-600.woff2) format("woff2")}
@font-face{font-family:"Noto Sans SC";font-weight:700;font-display:swap;src:url(fonts/noto-sans-sc-700.woff2) format("woff2")}
/* Arabic and Persian (one subset), Hebrew: same pattern, four weights (Medium for the menu and the Mono amounts). */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arab-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200D}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arab-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200D}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arab-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200D}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arab-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200D}
@font-face{font-family:"IBM Plex Sans Hebrew";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-hebr-400.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"IBM Plex Sans Hebrew";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-hebr-500.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"IBM Plex Sans Hebrew";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-hebr-600.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"IBM Plex Sans Hebrew";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-hebr-700.woff2) format("woff2");unicode-range:U+0590-05FF,U+FB1D-FB4F}
/* Hindi (Devanagari): same pattern, four weights. Conjuncts and half forms stay in the subset (GSUB closure). */
@font-face{font-family:"IBM Plex Sans Devanagari";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-deva-400.woff2) format("woff2");unicode-range:U+0900-097F,U+200C-200D,U+A8E0-A8FF}
@font-face{font-family:"IBM Plex Sans Devanagari";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-deva-500.woff2) format("woff2");unicode-range:U+0900-097F,U+200C-200D,U+A8E0-A8FF}
@font-face{font-family:"IBM Plex Sans Devanagari";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-deva-600.woff2) format("woff2");unicode-range:U+0900-097F,U+200C-200D,U+A8E0-A8FF}
@font-face{font-family:"IBM Plex Sans Devanagari";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-deva-700.woff2) format("woff2");unicode-range:U+0900-097F,U+200C-200D,U+A8E0-A8FF}
/* Native names in the language menu, on every page (Medium, like the menu). */
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-cyrl.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-grek.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-thai.woff2) format("woff2");unicode-range:U+0E01-0E5B}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-jp.woff2) format("woff2");unicode-range:U+65E5,U+672C,U+8A9E}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-kr.woff2) format("woff2");unicode-range:U+AC00-D7AF}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-tc.woff2) format("woff2");unicode-range:U+4E2D,U+6587,U+7E41,U+9AD4}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-sc.woff2) format("woff2");unicode-range:U+4E2D,U+4F53,U+6587,U+7B80}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-arab.woff2) format("woff2");unicode-range:U+0600-06FF}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-hebr.woff2) format("woff2");unicode-range:U+0590-05FF}
@font-face{font-family:"Cambiora Names";font-weight:500;font-display:swap;src:url(fonts/names-deva.woff2) format("woff2");unicode-range:U+0900-097F}

:root{
  --bg:#F3F2EE;--surface:#FFFFFF;--surface-alt:#EAE8E2;--ink:#16181D;--muted:#5E6168;--line:#E2DFD7;--outline:#C9C6BD;
  --accent:#C8401A;--accent-ink:#9A2F10;--on-accent:#FFFFFF;--tint:#F6DED4;--band:#16181D;
  /* phone mockup */
  --p-pad:#E6E4DE;--p-key:#FFFFFF;--p-fn:#F5F4F0;--p-fn-ink:#3D4047;--p-op:#F6DED4;--p-op-ink:#9A2F10;
  --sans:"IBM Plex Sans","Cambiora Names","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Sora","Cambiora Names","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light dark;
}
/* Latin text keeps IBM Plex and Sora; the language's font draws its own script. Sora has no CJK, Thai, Arabic,
   Hebrew or Devanagari, so headings fall back to the language's font at weight 700. Persian amounts use Persian digits in Mono. */
html:lang(vi) .display{font-family:"IBM Plex Sans Display","IBM Plex Sans",sans-serif}
html:lang(uk),html:lang(ru),html:lang(bg){--sans:"IBM Plex Sans","IBM Plex Sans Cyrillic","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Cyrillic","Cambiora Names",sans-serif}
html:lang(uk) .display,html:lang(ru) .display,html:lang(bg) .display{font-family:"IBM Plex Sans Cyrillic","IBM Plex Sans",sans-serif}
html:lang(el){--sans:"IBM Plex Sans","IBM Plex Sans Greek","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Greek","Cambiora Names",sans-serif}
html:lang(el) .display{font-family:"IBM Plex Sans Greek","IBM Plex Sans",sans-serif}
html:lang(th){--sans:"IBM Plex Sans","IBM Plex Sans Thai","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Thai","Cambiora Names",sans-serif}
html:lang(ja){--sans:"IBM Plex Sans","IBM Plex Sans JP","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans JP","Cambiora Names",sans-serif}
html:lang(ko){--sans:"IBM Plex Sans","IBM Plex Sans KR","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans KR","Cambiora Names",sans-serif}
html:lang(zh-Hant){--sans:"IBM Plex Sans","Noto Sans TC","Cambiora Names",sans-serif;--display:"Sora","Noto Sans TC","Cambiora Names",sans-serif}
html:lang(zh-Hans){--sans:"IBM Plex Sans","Noto Sans SC","Cambiora Names",sans-serif;--display:"Sora","Noto Sans SC","Cambiora Names",sans-serif}
html:lang(ar),html:lang(fa){--sans:"IBM Plex Sans","IBM Plex Sans Arabic","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Arabic","Cambiora Names",sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,SFMono-Regular,Menlo,monospace}
html:lang(he){--sans:"IBM Plex Sans","IBM Plex Sans Hebrew","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Hebrew","Cambiora Names",sans-serif}
html:lang(hi){--sans:"IBM Plex Sans","IBM Plex Sans Devanagari","Cambiora Names",sans-serif;--display:"Sora","IBM Plex Sans Devanagari","Cambiora Names",sans-serif}
@media (prefers-color-scheme:dark){:root{
  --bg:#121316;--surface:#1C1E22;--surface-alt:#17181B;--ink:#F2F1ED;--muted:#A3A6AD;--line:#2A2D33;--outline:#3A3D44;
  --accent:#FF7A4D;--accent-ink:#FF9A76;--on-accent:#121316;--tint:#3A231B;--band:#1A1B1F;
  --p-pad:#1A1B1F;--p-key:#26282D;--p-fn:#202226;--p-fn-ink:#C9CBD0;--p-op:#3A231B;--p-op-ink:#FF9A76;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
@media (max-width:480px){.wrap{padding-inline:16px}}
.display{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.muted{color:var(--muted)}
.check{flex-shrink:0;color:var(--accent)}

/* header & footer */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.brand img{display:block}
.brand span{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--accent)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:15px;font-weight:500;margin:0 -12px}
.nav a{padding:10px 12px;text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.lang-menu{position:relative}
.lang-menu summary{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;list-style:none;cursor:pointer;color:var(--muted)}
.lang-menu summary::-webkit-details-marker{display:none}
/* Down chevron: physical borders, it looks the same in both directions. */
.lang-menu summary::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--ink)}
.lang-menu ul{position:absolute;inset-inline-end:0;top:100%;z-index:10;min-width:160px;margin:4px 0 0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.lang-menu ul a{display:block;padding:10px 12px;white-space:nowrap;border-radius:10px;color:var(--ink)}
.lang-menu ul a:hover{background:var(--tint)}
.lang-menu ul a[aria-current]{color:var(--accent-ink);font-weight:600}
/* Two columns on narrow screens, filled top to bottom; --rows comes from build_website.py. The menu hangs from the
   header's end edge: with long navigation labels (th, vi) the button wraps to the start and the menu would leave the screen. */
@media (max-width:480px){
  .lang-menu ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);column-gap:2px}
  .site-header{position:relative}
  .lang-menu{position:static}
  .lang-menu ul{inset-inline-end:16px;top:calc(100% - 16px)}
}
.site-footer{border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:32px;padding-bottom:40px;font-size:15px;color:var(--muted)}
.site-footer .brand-small{display:flex;align-items:center;gap:10px}
.site-footer .brand-small b{font-family:var(--display);color:var(--ink)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-footer nav a{padding:10px 0}
.site-footer nav a:hover{color:var(--ink)}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:56px 48px;padding-top:40px;padding-bottom:96px}
.hero-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.pill{display:inline-flex;align-items:center;gap:8px;padding-block:6px;padding-inline:10px 14px;border-radius:999px;background:var(--tint);color:var(--accent-ink);font-size:14px;font-weight:600}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero h1{margin:0;font-size:clamp(40px,5.6vw,68px);line-height:1.04;letter-spacing:-.035em}
.lead{margin:0;max-width:34em;font-size:20px;line-height:1.5;color:var(--muted)}
.stores{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
.store{min-height:56px;padding-block:8px;padding-inline:16px 20px;border-radius:16px;display:flex;align-items:center;gap:12px;line-height:1.2}
.store small{display:block;font-size:12px}
.store b{display:block;font-size:16px;font-weight:600}
.store-dark{background:var(--ink);color:var(--bg)}
a.store{text-decoration:none}
a.store-dark:hover{background:var(--accent-ink)}
.store-dark small{opacity:.75}
.store-light{box-shadow:inset 0 0 0 1.5px var(--outline)}
.store-light small{color:var(--muted)}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.ticks li{display:flex;align-items:center;gap:6px}

.hero-visual{flex:1 1 332px;display:flex;justify-content:center;position:relative}
.hero-visual::before{content:"";position:absolute;width:420px;max-width:100%;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--tint)}
.phone{position:relative;width:332px;height:695px;padding:10px;border-radius:46px;background:#16181D;box-shadow:0 30px 60px -20px rgba(22,24,29,.35)}
.phone-screen{width:312px;height:675px;border-radius:36px;overflow:hidden}
.app{width:390px;height:844px;transform:scale(.8);transform-origin:0 0;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;font-family:var(--sans)}
@media (max-width:370px){.phone{transform:scale(.88);transform-origin:top center;margin-bottom:-83px}}

/* phone mockup = Main.dc.html */
.app-bar{padding-block:10px 6px;padding-inline:16px 4px;display:flex;align-items:center;justify-content:space-between}
.app-title{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.app-status{height:26px;padding:0 9px;display:flex;align-items:center;gap:5px;font:400 12px var(--mono);color:var(--muted)}
.app-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E8B57}
.app-icons{display:flex}
.app-icons span{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.app-rows{display:flex;flex-direction:column;gap:6px;padding:0 16px}
.app-row{height:58px;display:flex;align-items:center;gap:12px;padding-block:0;padding-inline:10px 16px;border-radius:16px;border:2px solid transparent;background:var(--surface)}
.app-row.active{border-color:var(--accent)}
.app-flag{width:42px;height:42px;border-radius:50%;border:2px solid transparent;padding:2px;flex-shrink:0;display:flex}
.app-row.active .app-flag{border-color:var(--accent)}
.app-flag svg{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.app-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.app-name b{font-size:15px;font-weight:600}
.app-name b span{margin-inline-start:6px;font-size:13px;font-weight:400;color:var(--muted)}
.app-name small{font-size:12px;color:var(--muted)}
.app-amount{font:500 21px var(--mono)}
.app-row.active .app-amount{color:var(--accent)}
.app-add{height:52px;border-radius:16px;border:1.5px dashed var(--outline);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;font-weight:500}
.app-status-row{margin-top:auto;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 6px 12px}
.app-pair{height:44px;padding-block:0;padding-inline:12px 14px;border-radius:22px;display:flex;align-items:center;gap:8px;background:var(--surface);font:500 13px var(--mono)}
.app-pair svg{color:var(--accent)}
.app-pad{background:var(--p-pad);padding:12px 12px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-radius:24px 24px 0 0}
.app-pad span{height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:500 22px var(--mono);background:var(--p-key)}
.app-pad .fn{background:var(--p-fn);color:var(--p-fn-ink)}
.app-pad .op{background:var(--p-op);color:var(--p-op-ink)}
.app-pad .eq{background:var(--accent);color:var(--on-accent)}

/* features */
.features{background:var(--surface-alt);padding:88px 0 96px}
.features .wrap{display:flex;flex-direction:column;gap:40px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.section-head{display:flex;flex-direction:column;gap:10px;max-width:640px}
h2.display{margin:0;font-size:clamp(30px,3.6vw,42px);line-height:1.12}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
@media (max-width:340px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:20px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px}
.card .icon{width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.card h3{margin:8px 0 0;font-size:19px;font-weight:600;line-height:1.3}
.tag{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--tint);color:var(--accent-ink);font-size:12px;font-weight:600;letter-spacing:.02em;vertical-align:3px}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.soon{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;color:var(--muted)}
.soon b{font-weight:600;color:var(--ink)}
.soon span{padding:4px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--outline)}

/* calculator band */
.band{background:var(--band);color:#F2F1ED;padding:88px 0}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px}
.band-text{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.band-text p{margin:0;font-size:18px;line-height:1.55;color:#C3C5CB}
.examples{flex:999 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.example{border-radius:18px;padding:18px 20px 20px;background:#24262B;box-shadow:inset 0 0 0 2px #FF7A4D;display:flex;flex-direction:column;gap:4px}
.example span{font-size:13px;font-weight:500;color:#C3C5CB}
/* Right-aligned like a calculator display, on right-to-left pages too. */
.example code{padding-top:10px;text-align:right;font:15px var(--mono);color:#A3A6AD}
.example output{text-align:right;font:500 30px var(--mono);letter-spacing:-.02em;color:#FF9A76}

/* privacy teaser */
.pro-section{padding-top:96px}
.pro-card{background:var(--surface);border-radius:28px;padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;gap:32px 56px}
.pro-text{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.pro-text h2{font-size:clamp(28px,3.2vw,38px);line-height:1.15}
.pro-text p{margin:0;font-size:18px;line-height:1.55;color:var(--muted)}
.plans{flex:999 1 480px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.plan{border-radius:18px;padding:20px 20px 22px;background:var(--bg)}
.plan h3{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.4}
.plan li .check{margin-top:2px;color:var(--muted)}
.plan-pro{background:var(--tint)}
.plan-pro h3{color:var(--accent-ink)}
.plan-pro li .check{color:var(--accent)}
.privacy{padding-top:96px;padding-bottom:96px}
.privacy-card{background:var(--surface);border-radius:28px;padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:32px 56px}
.privacy-card > div{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.privacy-card h2{font-size:clamp(28px,3.2vw,38px);line-height:1.15}
.privacy-card p{margin:0;font-size:18px;line-height:1.55;color:var(--muted)}
.more{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.more:hover{text-decoration:underline}
.privacy-card ul{flex:1 1 260px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.privacy-card li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--bg);font-weight:500}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:40px 24px 96px;display:flex;flex-direction:column;gap:32px;line-height:1.65}
@media (max-width:480px){.legal{padding-inline:16px}}
.legal h1{margin:0;font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.035em;hyphens:auto;overflow-wrap:break-word}
.legal .meta{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:15px;color:var(--muted)}
.legal .meta a{color:var(--accent-ink);font-weight:500}
.summary{background:var(--tint);border-radius:22px;padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.summary h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.summary p{margin:0;font-size:19px;line-height:1.55;font-weight:500}
.questions{margin:0;padding-inline-start:24px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.45;font-weight:500}
.questions a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.questions a:hover{color:var(--accent-ink)}
.legal section[id]{scroll-margin-top:24px}
.legal article{background:var(--surface);border-radius:22px;padding:clamp(22px,4vw,40px)}
.legal section{padding:28px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.legal section:first-child{padding-top:0;border-top:0}
.legal section:last-child{padding-bottom:0}
.legal section h2{margin:0;font-size:20px;font-weight:600;line-height:1.3}
.legal section p,.legal section ul{margin:0}
.legal section ul{padding-inline-start:22px;display:flex;flex-direction:column;gap:4px}
.legal section a{color:var(--accent-ink);overflow-wrap:anywhere}
.host{font:15px var(--mono)}
@media (prefers-color-scheme:dark){.phone{box-shadow:0 0 0 1px #3A3D44,0 30px 60px -20px rgba(0,0,0,.6)}}

/* 404 */
.not-found{padding-top:48px;padding-bottom:120px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.not-found > *{max-width:760px}
.not-found .code{margin:0;font:500 clamp(72px,14vw,140px)/1 var(--mono);letter-spacing:-.04em;color:var(--accent)}
.not-found h1{margin:0;font-size:clamp(32px,4.6vw,48px);line-height:1.1}
.actions{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.button{min-height:48px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.button:hover{filter:brightness(1.08)}

/* Thai, CJK: line breaking and typography. Browsers break between CJK characters and find Thai word
   boundaries themselves; strict avoids small kana and closing punctuation at a line start. Korean breaks at spaces.
   No case and no tracking in these scripts; Thai needs room for stacked vowel and tone marks. */
html:lang(ja),html:lang(zh){line-break:strict;word-break:normal;overflow-wrap:anywhere}
html:lang(ja){word-break:auto-phrase} /* Chromium: break between phrases (bunsetsu), not inside words */
html:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
html:lang(th){overflow-wrap:anywhere}
html:lang(th) body{line-height:1.75}
html:lang(th) .display,html:lang(ja) .display,html:lang(ko) .display,html:lang(zh) .display,
html:lang(th) .eyebrow,html:lang(ja) .eyebrow,html:lang(ko) .eyebrow,html:lang(zh) .eyebrow,
html:lang(th) .plan h3,html:lang(ja) .plan h3,html:lang(ko) .plan h3,html:lang(zh) .plan h3,
html:lang(th) .summary h2,html:lang(ja) .summary h2,html:lang(ko) .summary h2,html:lang(zh) .summary h2{letter-spacing:0;text-transform:none}
html:lang(th) .hero h1,html:lang(th) .legal h1,html:lang(th) .og h1{line-height:1.35}
html:lang(th) h2.display,html:lang(th) .pro-text h2,html:lang(th) .privacy-card h2{line-height:1.4}
html:lang(ja) .hero h1,html:lang(ko) .hero h1,html:lang(zh) .hero h1{font-size:clamp(34px,5vw,60px);line-height:1.2}
html:lang(ja) .legal h1,html:lang(ko) .legal h1,html:lang(zh) .legal h1,
html:lang(ja) .og h1,html:lang(ko) .og h1,html:lang(zh) .og h1{line-height:1.2}

/* Right-to-left pages (ar, he, fa): the layout mirrors through dir="rtl" and the logical properties above.
   Amounts, the calculator, the keypad, the pair and addresses stay left to right; links and code are isolated so
   punctuation around them stays in place. The scaled app is anchored at its start edge. Arabic letters are joined,
   so no tracking anywhere; neither script has case. Arabic script needs more line height for its marks. */
html[dir=rtl] .app{transform-origin:100% 0}
html[dir=rtl] .app-amount,html[dir=rtl] .app-status,html[dir=rtl] .app-pair,html[dir=rtl] .app-pad,
html[dir=rtl] .example code,html[dir=rtl] .example output,html[dir=rtl] .host,html[dir=rtl] a[href^="mailto:"],
html[dir=rtl] a[href^="http"]{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] a,html[dir=rtl] code{unicode-bidi:isolate}
html[dir=rtl] .more svg{transform:scaleX(-1)}
/* The symbol is an LTR island left of the code: its gap sits on its right (physical, the span itself is LTR). */
html[dir=rtl] .app-name b span{direction:ltr;unicode-bidi:isolate;margin:0 6px 0 0}
html:lang(ar) .display,html:lang(he) .display,html:lang(fa) .display,
html:lang(ar) .eyebrow,html:lang(he) .eyebrow,html:lang(fa) .eyebrow,
html:lang(ar) .plan h3,html:lang(he) .plan h3,html:lang(fa) .plan h3,
html:lang(ar) .summary h2,html:lang(he) .summary h2,html:lang(fa) .summary h2,
html:lang(ar) .tag,html:lang(he) .tag,html:lang(fa) .tag{letter-spacing:0;text-transform:none}
html:lang(ar) body,html:lang(fa) body{line-height:1.75}
html:lang(ar) .hero h1,html:lang(fa) .hero h1,html:lang(ar) .legal h1,html:lang(fa) .legal h1,
html:lang(ar) .og h1,html:lang(fa) .og h1{line-height:1.3}
html:lang(ar) h2.display,html:lang(fa) h2.display,html:lang(ar) .pro-text h2,html:lang(fa) .pro-text h2,
html:lang(ar) .privacy-card h2,html:lang(fa) .privacy-card h2{line-height:1.35}
html:lang(he) .hero h1,html:lang(he) .legal h1,html:lang(he) .og h1{line-height:1.15}

/* Hindi (Devanagari): no case, and tracking would break the headline (shirorekha) that joins the letters and
   separate vowel signs from their cluster. Vowel signs above and below the line need more line height. */
html:lang(hi) .display,html:lang(hi) .eyebrow,html:lang(hi) .plan h3,html:lang(hi) .summary h2,
html:lang(hi) .tag{letter-spacing:0;text-transform:none}
html:lang(hi) body{line-height:1.75}
html:lang(hi) .hero h1,html:lang(hi) .legal h1,html:lang(hi) .og h1{line-height:1.3}
html:lang(hi) h2.display,html:lang(hi) .pro-text h2,html:lang(hi) .privacy-card h2{line-height:1.35}

/* link preview image, rendered by render_og_images.py */
.og{width:1200px;height:630px;overflow:hidden;display:flex;align-items:center;gap:40px;padding-inline-start:80px;background:var(--bg)}
.og-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.og .brand span{font-size:34px}
.og h1{margin:0;font-size:76px;line-height:1.02;letter-spacing:-.035em}
.og p{margin:0;font-size:28px;line-height:1.4;color:var(--muted)}
.og .hero-visual{flex:0 0 470px;align-self:flex-start;padding-top:70px}
.og .hero-visual::before{top:290px;width:520px;max-width:none}