:root{
  --top:#171733; --bot:#3E2C5E; --acc:#B9A5FF;
  --ink:rgba(255,255,255,.96); --ink2:rgba(255,255,255,.62); --ink3:rgba(255,255,255,.55);
  --rule:rgba(255,255,255,.16); --key:rgba(255,255,255,.10);
  --display:"Outfit",-apple-system,system-ui,sans-serif;
  --body:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  font-family:var(--body); color:var(--ink); background:var(--top);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55;
}
/* The page carries the country's light, the way a page of the deck does. */
.sky{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,var(--top),var(--bot));transition:background 900ms cubic-bezier(.4,0,.2,1)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:3px 3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
a{color:inherit}

/* ── nav ───────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,0));border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.01em;text-decoration:none;font-size:15px}
.brand .m{width:28px;height:28px;border-radius:7px;display:block;object-fit:cover}
.nav nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav nav a{font-size:14px;color:var(--ink2);text-decoration:none;transition:color .2s}
.nav nav a:hover{color:var(--ink)}
@media(max-width:720px){.nav nav a.hide-s{display:none}}

/* ── hero ──────────────────────────────────────────────────────── */
/* The hero opens close under the nav. It used to start at 88px, which put a
   band of empty page between the wordmark and the first word of the headline
   — on a screen whose whole job is to get to the picture of the app. */
.hero{position:relative;padding:clamp(16px,2.4vw,30px) 0 clamp(56px,8vw,110px)}
/* minmax(0,1fr) rather than 1fr: a grid column's implicit min-width is
   min-content, so the 372px phone widened the column past the viewport and
   max-width:100% on the phone had nothing left to bite on. */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(32px,6vw,88px);align-items:center}
@media(max-width:940px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:44px}}
h1{font-family:var(--display);font-weight:200;font-size:clamp(46px,8.2vw,92px);line-height:.98;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--acc)}
.lede{margin-top:26px;font-size:clamp(16px,2vw,19px);color:var(--ink2);max-width:34em}
.lede strong{color:var(--ink);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:13px;text-decoration:none;
  font-weight:600;font-size:14.5px;background:var(--ink);color:#16162c;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--ink3);box-shadow:none}
.price-note{font-size:13.5px;color:var(--ink3)}

/* The hero's one control is the app icon itself, at a size that reads as the
   product rather than as a favicon. It replaced a pair of buttons and, above
   them, a working currency form — which was the wrong thing to lead with
   twice over: the app has no From/To picker and no Convert button, so the
   form quietly described a different app, and the screenshots beside it are
   the honest proof. The icon is the whole target; there is nothing to aim at
   inside it. */
.heroGet{display:inline-block;margin-top:clamp(28px,3.4vw,40px);line-height:0;border-radius:24.4%;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s}
/* The hairline ring is doing real work: the icon's own ground is the same
   dark violet as the page, so without it the squircle has no edge and the
   mark reads as loose type rather than as something to tap. */
.heroGet img{display:block;width:clamp(168px,20vw,272px);height:auto;border-radius:24.4%;
  box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.11)}
.heroGet:hover{transform:translateY(-4px)}
.heroGet:hover img{box-shadow:0 26px 62px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.18)}
.heroGet:focus-visible{outline:2px solid var(--acc);outline-offset:8px}
.heroDevices{margin-top:20px;font-size:14px;color:var(--ink2)}
.heroDevices + .price-note{margin-top:7px}

/* A hint that the page continues, not a control: it is aria-hidden and there
   is nothing to click. The global prefers-reduced-motion rule already stops
   the bob.

   It sits at the fold rather than at the foot of the hero. Anchored to the
   hero's bottom it was itself below the fold, which is the one place a
   "there is more below" mark cannot do its job. The hero begins directly
   under the 64px nav, so the bottom of the first screenful is `100svh` minus
   that — `svh` and not `vh` because on a phone `vh` is the tall viewport,
   measured as if the browser's own chrome were not there. It scrolls away
   with the page, which is what should happen to a hint once it has been
   taken. */
.scrollHint{position:absolute;left:50%;top:calc(100svh - 64px - 52px);translate:-50% 0;
  color:var(--ink3);opacity:.42;pointer-events:none}
.scrollHint svg{display:block;width:26px;height:26px;animation:hintBob 2.4s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateY(-4px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
@media(max-width:940px){.scrollHint{display:none}}

/* ── the phone ─────────────────────────────────────────────────── */
/* A real screenshot in a thin bezel. It used to be a reproduction built out
   of divs, which was quicker to animate and quietly undersold the app —
   people judge what a thing is by the picture of it. */
.phone{width:min(348px,100%);justify-self:end;border-radius:46px;padding:8px;
  background:rgba(255,255,255,.07);border:1px solid var(--rule);box-shadow:0 40px 90px rgba(0,0,0,.5)}
@media(max-width:940px){.phone{justify-self:center}}
.phoneCol{display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:end}
@media(max-width:940px){.phoneCol{justify-self:center}}
.deckWrap{position:relative;aspect-ratio:720/1564;border-radius:38px;overflow:hidden;
  touch-action:pan-y;cursor:grab}
.deckWrap:active{cursor:grabbing}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .6s ease;pointer-events:none;user-select:none}
.shot.on{opacity:1}
/* Every caption occupies the same grid cell, so the box is always as tall as
   the LONGEST one and nothing below it moves when the slide changes. A
   min-height would have been a guess that breaks at the first narrow screen. */
.capStack{display:grid;max-width:30em}
.capStack > *{grid-area:1/1;opacity:0;transition:opacity .3s ease;pointer-events:none}
.capStack > .on{opacity:1;pointer-events:auto}
.deckCap{font-size:15.5px;color:var(--ink2);text-align:center}

/* One pager, used by the hero and by the tipping card, so the two read as the
   same control rather than as two ideas that happen to look alike. */
.pager{display:flex;align-items:center;gap:14px}
.pagerArrow{width:30px;height:30px;padding:0;border:1px solid var(--rule);border-radius:50%;
  background:transparent;color:var(--ink2);font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s}
.pagerArrow:hover{color:var(--ink);border-color:var(--ink3);background:rgba(255,255,255,.07)}
.pagerArrow:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dots{display:flex;gap:9px}
.dots{gap:2px}
.dots button{width:24px;height:24px;padding:0;border:0;border-radius:50%;cursor:pointer;background:transparent;position:relative}
.dots button::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.26);transition:background .25s,transform .25s}
.dots button[aria-selected="true"]::before{background:var(--acc);transform:scale(1.3)}
.dots button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ── sections ──────────────────────────────────────────────────── */
section{padding:clamp(64px,10vw,132px) 0;position:relative}
.sec-rule{height:1px;background:var(--rule);max-width:1180px;margin:0 auto}
h2{font-family:var(--display);font-weight:200;font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.03em;max-width:16em}
.sec-lede{margin-top:20px;font-size:clamp(15.5px,1.8vw,18px);color:var(--ink2);max-width:38em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:860px){.two{grid-template-columns:minmax(0,1fr);gap:34px}}

.origins{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:13px;margin-top:44px}
.origin{background:rgba(255,255,255,.06);border:1px solid var(--rule);border-radius:16px;padding:20px}
.origin .ok{font-family:var(--display);font-weight:300;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.origin p{font-size:14px;color:var(--ink2)}
.origin.acc{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.origin.acc .ok{color:var(--acc)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin-top:44px}
.card{background:rgba(255,255,255,.06);border:1px solid var(--rule);border-radius:17px;padding:22px}
.card h3{font-family:var(--display);font-weight:300;font-size:20px;letter-spacing:-.02em;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--ink2)}

/* The magnitude demo. It types, and readings that stop being possible collapse
   out of the list rather than blinking away — the height is the point, because
   the board really does close up when a tile goes. */
.mag{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:18px}
.magPane{width:min(430px,100%);background:rgba(0,0,0,.26);border:1px solid var(--rule);
  border-radius:20px;padding:22px 22px 14px}
.magHead{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.magTyped{font-family:var(--display);font-weight:100;font-size:clamp(42px,7vw,58px);
  line-height:1.12;letter-spacing:-.04em;margin-top:6px;display:flex;align-items:center;min-height:1.2em}
.magCaret{display:inline-block;width:2px;height:.72em;background:var(--acc);margin-left:5px;
  animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.magRule{height:1px;background:var(--rule);margin:12px 0 6px}
/* grid-template-rows 1fr → 0fr is what lets the height animate to nothing. */
.mrow{display:grid;grid-template-rows:1fr;margin-bottom:7px;opacity:1;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1),opacity .34s ease,margin-bottom .55s cubic-bezier(.4,0,.2,1)}
.mrow>div{overflow:hidden;min-height:0}
.mrow.gone{grid-template-rows:0fr;opacity:0;margin-bottom:0}
.mcell{display:flex;align-items:baseline;gap:12px;padding:9px 13px;border-radius:11px;
  background:rgba(255,255,255,.05)}
.mcell .k{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink2);width:102px;flex:0 0 auto}
.mcell .v{font-family:var(--display);font-weight:200;font-size:21px;color:var(--acc);white-space:nowrap}
.mcell .v small{font-size:12px;color:var(--ink2);margin-left:3px}
/* Currency leads and is never dropped — the magnitude rule only ever touches
   the unit rows, exactly as in the app. */
.mrow.money .mcell{background:rgba(255,255,255,.10);padding:13px}
.mrow.money .v{font-size:28px}
.magNote{font-size:14.5px;color:var(--ink2);min-height:3em;max-width:430px;text-align:center}
.tipbox{touch-action:pan-y;cursor:grab}
.tipbox:active{cursor:grabbing}
.tipbody{transition:opacity .35s ease}
.tipPlace{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.tipPlace span:first-child{font-size:17px;letter-spacing:0}
.tipbox{background:rgba(0,0,0,.22);border:1px solid var(--rule);border-radius:18px;padding:24px;margin-top:8px}
.tipbox .th{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:-.02em}
.tipbox .tn{margin-top:9px;font-size:15px;color:var(--ink2)}
.tipbox .tf{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink3)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-top:44px}
.stat .n{font-family:var(--display);font-weight:100;font-size:clamp(40px,6vw,62px);letter-spacing:-.04em;line-height:1}
.stat .l{margin-top:7px;font-size:13px;color:var(--ink2)}

.price{text-align:center;padding:clamp(64px,10vw,120px) 0}
.price .amt{font-family:var(--display);font-weight:100;font-size:clamp(66px,13vw,140px);letter-spacing:-.05em;line-height:1}
.price .sub{margin-top:14px;color:var(--ink2);font-size:17px}
.price .fine{margin-top:10px;color:var(--ink3);font-size:13.5px}

/* ── footer ────────────────────────────────────────────────────── */
/* Two regions rather than one bag of links: a plate carrying the sentence
   the product is about, with the index of pages set against it, and a band
   below carrying the other eleven languages.

   It used to be a single wrapping flex row in which `margin-left:auto`
   pushed the sentence to the right — which right-aligns it only while the
   row fits on one line, and with a byline and seven links beside it the row
   never does. What it produced instead was the best line on the site
   stranded on a line of its own with the width of the page empty beside
   it, at a point on the page that moved with the viewport. */
footer{border-top:1px solid var(--rule);padding:clamp(44px,6vw,68px) 0 60px;font-size:14px;color:var(--ink3)}
footer a{color:var(--ink2);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--ink)}

.footPlate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,5vw,80px);align-items:start}
.footSay{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vw,26px)}

/* The address sits with the company mark rather than under Terms, because it
   is who to write to and not another page of the site — and because in a
   right-aligned stack of three short words it was the one item twice their
   width, which read as a mistake rather than as an address. The two are
   set close: given the column's own gap the address drifted off on its own
   and stopped reading as part of the signature. */
.footMark{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.footMail{font-size:13px}

/* The sentence, in the display face at the weight the headlines are set in:
   it is the last thing read on every one of the site's pages, so it closes
   the page rather than captioning it. The measure is in `em`, so it holds
   across readings that run from 17 characters (Chinese, one line) to 79
   (French and German, two) instead of being tuned to the English one. */
.saying{font-family:var(--display);font-weight:200;font-size:clamp(19px,2.5vw,31px);
  line-height:1.24;letter-spacing:-.02em;color:var(--ink);max-width:19em;
  text-wrap:balance;line-break:strict}

/* The two columns are one thing — the index of the site — so they are nested
   and hold to a gap of their own. Sharing the plate's grid gap put as much
   space between the columns as between the index and the sentence, which
   made them read as three unrelated blocks instead of a statement and an
   index. Right-aligned, so they close on one clean edge facing the
   flush-left sentence. Deliberately unheaded: three product pages and the
   formal set need no naming to be told apart, and a heading over three
   obvious links is decoration rather than structure. */
.footIndex{display:flex;gap:clamp(30px,4vw,58px)}
.footCol{display:flex;flex-direction:column;gap:12px;text-align:right}

/* Statement over links, then links two-up, then everything flush left with
   each column folded back into a wrapping row — which is the right shape
   for a phone, where a stacked list of seven would be most of a screen. */
@media(max-width:860px){
  .footPlate{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,40px)}
  .footIndex{gap:clamp(36px,8vw,72px)}
  .footCol{text-align:left}
}
@media(max-width:640px){
  .footIndex{flex-wrap:wrap;gap:12px 24px}
  .footCol{flex-direction:row;flex-wrap:wrap;gap:12px 22px}
}

/* Visible by default. The hiding is added only once JS is running, so a page
   with scripts blocked is a plain page rather than an empty one. */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none}


/* ── skip link, screen-reader-only ─────────────────────────────────── */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#16162c;padding:8px 14px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── CJK and non-Latin type: the display face has no glyphs for them, so the
   system's own faces take over, at a slightly larger size for legibility. */
html[lang^="ja"]{--display:"Outfit","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,system-ui,sans-serif;--body:"Instrument Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,system-ui,sans-serif}
html[lang^="ko"]{--display:"Outfit","Apple SD Gothic Neo","Malgun Gothic",-apple-system,system-ui,sans-serif;--body:"Instrument Sans","Apple SD Gothic Neo","Malgun Gothic",-apple-system,system-ui,sans-serif}
html[lang^="zh"]{--display:"Outfit","PingFang SC","PingFang TC","Hiragino Sans GB","Microsoft YaHei","Microsoft JhengHei",-apple-system,system-ui,sans-serif;--body:"Instrument Sans","PingFang SC","PingFang TC","Hiragino Sans GB","Microsoft YaHei","Microsoft JhengHei",-apple-system,system-ui,sans-serif}
html[lang^="ja"] h1,html[lang^="ko"] h1,html[lang^="zh"] h1{font-weight:300;letter-spacing:0;line-height:1.15;font-size:clamp(36px,6.4vw,72px)}
html[lang^="ja"] h2,html[lang^="ko"] h2,html[lang^="zh"] h2{font-weight:300;letter-spacing:0;line-height:1.25}
html[lang^="ja"] body,html[lang^="ko"] body,html[lang^="zh"] body{line-height:1.75}
html[lang^="ja"] .eyebrow,html[lang^="ko"] .eyebrow,html[lang^="zh"] .eyebrow{letter-spacing:.1em}

/* ── language + home menu ──────────────────────────────────────────── */
.langMenu{position:relative;margin-left:8px}
.langMenu summary{list-style:none;cursor:pointer;font-size:13px;color:var(--ink2);padding:7px 11px;border:1px solid var(--rule);border-radius:10px;white-space:nowrap}
.langMenu summary::-webkit-details-marker{display:none}
.langMenu summary:hover,.langMenu[open] summary{color:var(--ink);border-color:var(--ink3)}
.langMenu summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.langPanel{position:absolute;right:0;top:calc(100% + 8px);width:min(340px,92vw);background:#1b1a2e;border:1px solid var(--rule);border-radius:16px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:40}
.langHead{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:6px 0 8px}
.langHelp{font-size:12.5px;color:var(--ink3);margin-bottom:8px}
.langList{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-bottom:14px}
.langList a{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;font-size:14px;color:var(--ink2)}
.langList a:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.langList a[aria-current="true"]{color:var(--acc);font-weight:600}
.homePick select,.conv select,.conv input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
.homePick select:focus-visible,.conv select:focus-visible,.conv input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.homePick{display:block}
@media(max-width:720px){.nav nav{display:none}.nav .wrap{gap:10px}}

/* ── the converter ─────────────────────────────────────────────────── */
.conv{margin-top:28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px;align-items:end;
  background:rgba(0,0,0,.24);border:1px solid var(--rule);border-radius:20px;padding:18px}
@media(max-width:640px){.conv{grid-template-columns:1fr 1fr}.conv .convField:first-child{grid-column:1/-1}.conv .swap{display:none}.conv .convGo{grid-column:1/-1}}
.convField{display:flex;flex-direction:column;gap:6px;min-width:0}
.convField>span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.conv input{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.swap{width:42px;height:44px;border:1px solid var(--rule);border-radius:10px;background:transparent;color:var(--ink2);font-size:18px;cursor:pointer}
.swap:hover{color:var(--ink);border-color:var(--ink3)}
.swap:focus-visible{outline:2px solid var(--acc)}
.convGo{padding:12px 18px}
.convHelp{grid-column:1/-1;font-size:12.5px;color:var(--ink3);margin-top:-2px}
.convResult{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--rule)}
.convResult .big{font-family:var(--display);font-weight:200;font-size:clamp(28px,4.5vw,44px);letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums;line-height:1.1}
.convResult .rateLine{font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}
.convResult .stamp,.convResult .liveNote{font-size:12px;color:var(--ink3)}
.convResult .liveNote{color:#9EE6A8}
.convError{grid-column:1/-1;font-size:13px;color:#FFC48A}
.convApp{grid-column:1/-1;font-size:13px;color:var(--ink2)}
.convApp a{color:var(--ink2)}
.convApp a:hover{color:var(--ink)}

/* ── inner pages ──────────────────────────────────────────────────── */
.pageHead{padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,32px)}
.pageHead h1{font-size:clamp(36px,6vw,66px)}
.pageHead .lede{max-width:44em}
.crumbs{font-size:13px;color:var(--ink3);margin-bottom:22px}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.stampLine{margin-top:12px;font-size:13px;color:var(--ink3)}
section+section{padding-top:0}
section .wrap>h2{margin-bottom:18px}
.more{margin-top:22px}
.more a{color:var(--acc);text-decoration:none;font-weight:500}
.pairList,.curList,.countryGrid{list-style:none;display:grid;gap:6px 18px}
.pairList{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.curList{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.countryGrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pairList a,.curList a,.countryGrid a{color:var(--ink);text-decoration:none;font-size:15px;display:inline-block;padding:7px 0}
.pairList a:hover,.curList a:hover,.countryGrid a:hover{color:var(--acc)}
.curList strong{display:inline-block;width:44px;color:var(--acc);font-weight:600}
.countryGrid .dim,.denoms .dim{color:var(--ink3);font-size:13px;margin-left:6px}
table.rates{width:100%;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
table.rates th,table.rates td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);font-size:15px}
table.rates th{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
table.rates td:last-child,table.rates th:last-child{text-align:right}
table.rates td a{color:var(--ink);text-decoration:none}
table.rates td a:hover{color:var(--acc)}
.denoms{list-style:none;font-family:var(--display);font-weight:300;font-size:19px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.denoms li{padding:6px 0;border-bottom:1px solid var(--rule)}
.features{margin-top:22px;padding-left:20px;max-width:40em}
.features li{margin-bottom:8px;color:var(--ink2)}
.fine{font-size:13.5px;color:var(--ink3);margin-top:12px}
h3{font-family:var(--display);font-weight:300;font-size:20px;letter-spacing:-.02em;margin:22px 0 8px}
section .wrap>div>h2,section .two>div>h2{margin-bottom:12px}
section p+p{margin-top:10px}
section .two p{color:var(--ink2);font-size:15.5px}
section .two p a,section .two li a{color:var(--acc)}

/* ── articles (privacy, terms, help) ──────────────────────────────── */
.prose{padding:56px 0 88px}
.prose .wrap{max-width:760px}
.prose h1{font-size:clamp(38px,7vw,58px)}
.prose .updated{margin-top:14px;color:var(--ink3);font-size:13.5px}
.prose .summary{margin:32px 0 0;padding:22px 24px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.05)}
.prose .summary p{color:var(--ink);font-size:16.5px}
.prose h2{font-size:24px;margin:40px 0 12px;max-width:none}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:var(--ink2);margin-bottom:13px;font-size:16px}
.prose strong{color:var(--ink);font-weight:500}
.prose ul{padding-left:20px}
.prose a{color:var(--acc)}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px;color:var(--ink)}
.prose .lede{margin-top:18px;font-size:17px;color:var(--ink2)}

/* The price section's call to action is the app icon and nothing else — the
   same move as the hero's. It used to be a small icon beside a white "Get it
   for iPhone" button, with the icon decorative and out of the tab order
   because the button said the same thing. With the button gone the icon is
   the real link, so it takes the accessible name the button was carrying.
   The hairline ring is what gives the squircle an edge against a page of the
   same colour. */
.getRow{margin-top:36px;display:flex;justify-content:center}
.appIcon{display:inline-block;line-height:0;border-radius:24.4%;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s}
.appIcon img{display:block;width:clamp(152px,17vw,232px);height:auto;border-radius:24.4%;
  box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.11)}
.appIcon:hover{transform:translateY(-4px)}
.appIcon:hover img{box-shadow:0 26px 62px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.18)}
.appIcon:focus-visible{outline:2px solid var(--acc);outline-offset:8px}

/* ── the footer's two marks ───────────────────────────────────────── */
/* The Zobot signature, the same lockup every site in the portfolio carries.
   The robot is decorative — the line beside it already names the company, so
   an alt would only make a screen reader say it twice — and only the NAME is
   a link, which is what the other sites do. */
.byline{display:inline-flex;align-items:center;gap:9px;color:var(--ink3);font-size:13px}
.byline img{display:block;opacity:.85}
.byline a{color:var(--ink2)}

/* A row of language names needs no heading — it is self-evidently a row of
   language names — and once the heading goes the dots between them go too:
   what separates them now is space. The translated heading survives as the
   region's accessible NAME, because eleven unlabelled links in a row is the
   one reading of this that genuinely is ambiguous.

   Its hairline is lighter than the rule above the footer and stops at the
   content column rather than running the full width, so the two lines read
   as a division and a subdivision instead of as two equal rules. */
.otherLangs{margin-top:clamp(34px,4vw,50px);padding-top:24px;
  border-top:1px solid color-mix(in srgb,var(--rule) 55%,transparent);
  font-size:12.5px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:9px 26px}
.otherLangs a{color:var(--ink3)}
.otherLangs a:hover{color:var(--ink)}

/* ── the root chooser ─────────────────────────────────────────────── */
.rootPage main{min-height:100vh;display:flex;align-items:center}
.rootWrap{max-width:760px;padding:64px var(--gut)}
.rootWrap h1{font-size:clamp(34px,6vw,58px);margin:26px 0 22px}
.rootWrap .brand{font-size:16px}
.recommended{margin:0 0 26px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.recommended a{color:var(--acc);font-weight:600;text-decoration:none;font-size:18px}
.rootLangs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:10px}
.rootLangs a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--rule);border-radius:14px;text-decoration:none;background:rgba(255,255,255,.05)}
.rootLangs a:hover{border-color:var(--ink3);background:rgba(255,255,255,.09)}
.rootLangs .ln{font-size:16px;font-weight:600;color:var(--ink)}
.rootLangs .lt{font-size:12.5px;color:var(--ink3)}