:root{
  --ink:#0C1222;
  --ink-2:#4A5266;
  --ink-3:#7A8296;
  --line:#E4E7EE;
  --bg:#FFFFFF;
  --tint:#F6F7FB;
  --accent:#2F45FF;
  --accent-ink:#1E2FD6;
  --accent-soft:#EEF0FF;
  --green:#0E8A5F;
  --green-soft:#E3F6EE;
  --radius:14px;
  --shadow:0 1px 2px rgba(12,18,34,.06),0 12px 32px -12px rgba(12,18,34,.18);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(38px,6vw,68px);font-weight:800}
h2{font-size:clamp(28px,4vw,42px);font-weight:800}
h3{font-size:19px;font-weight:700}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:780px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.muted{color:var(--ink-3);font-size:15px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border-radius:999px;padding:14px 24px;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-block{width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600}
.nav-links a{text-decoration:none;color:var(--ink-2)}

/* hero */
.hero{padding:72px 0 88px;background:linear-gradient(180deg,var(--tint),#fff 70%)}
.hero-copy{text-align:center;max-width:820px;margin:0 auto}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);margin:22px auto 0;max-width:680px}
.hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.hero-demo{display:grid;grid-template-columns:minmax(0,320px) auto minmax(0,1fr);align-items:center;gap:22px;margin-top:64px}

.note{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 20px}
.note-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.note-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.note-date{font-size:13px;color:var(--ink-3)}
.note h3{font-size:20px;margin-bottom:14px}
.note ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.note li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.note li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.shipped{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);padding:5px 12px 5px 9px;border-radius:999px}
.shipped svg{width:15px;height:15px}

.reveal{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
.shipped.reveal{transform:scale(.85)}
.shipped.reveal.in{transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}

.demo-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;white-space:nowrap}
.demo-arrow svg{width:44px;height:14px;color:var(--accent)}
.hero-video{margin:0}
.hero-video figcaption,.case figcaption,.loc-video figcaption{margin-top:12px;font-size:14px;color:var(--ink-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* device frames */
.browser{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F3F4F8;border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#D7DAE3}
.browser-bar .url{margin-left:14px;height:18px;flex:0 1 40%;border-radius:6px;background:#fff;border:1px solid var(--line)}
.phone{background:var(--ink);border-radius:34px;padding:9px;box-shadow:var(--shadow);max-width:290px;margin:0 auto}
.phone .screen{border-radius:26px;overflow:hidden}
.screen{position:relative;background:#E9ECF3;overflow:hidden}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.browser .screen video{object-fit:contain;background:#fff}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;border:0;background:rgba(12,18,34,.78);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .15s}
.play svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.player.playing .play{display:none}

.tag{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--tint);border:1px solid var(--line);padding:4px 10px;border-radius:999px;white-space:nowrap}
.tag-client{color:var(--green);background:var(--green-soft);border-color:transparent}

/* sections */
.section{padding:96px 0}
.section-tint{background:var(--tint)}
.section-head{max-width:680px;margin-bottom:48px}
.section-head p:not(.eyebrow){color:var(--ink-2);margin-top:14px;font-size:18px}

/* cases */
.case{padding:36px 0;border-top:1px solid var(--line)}
.case:first-of-type{border-top:0;padding-top:0}
.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.case-head p{color:var(--ink-3);font-size:15px;margin-top:4px}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center}
.case-grid figure{margin:0}
.case-ad .phone{max-width:250px}
.case-grid-phones{grid-template-columns:repeat(2,250px);justify-content:center;gap:96px;align-items:end}
.case-grid-phones .phone{max-width:250px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;margin-bottom:16px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--ink-2);font-size:15px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff}
.tier-top{border:2px solid var(--accent);box-shadow:var(--shadow)}
.tier-badge{position:absolute;top:-13px;left:22px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.price{font-size:38px;font-weight:800;letter-spacing:-.03em;margin:10px 0 18px}
.price span{font-size:15px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--ink-2)}
.tier li{position:relative;padding-left:24px}
.tier li::before{content:"";position:absolute;left:2px;top:.35em;width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tier .btn{margin-top:auto;font-size:15px;padding:12px 18px}
.tier-top ul{margin-bottom:24px}
.included{margin-top:24px;color:var(--ink-2);font-size:15px;max-width:820px}
.bundles{margin-top:48px;display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--tint)}
.bundles-head p{color:var(--ink-3);font-size:15px;margin-top:6px}
.bundle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bundle{display:grid;grid-template-columns:1fr auto;gap:2px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:15px}
.bundle b{font-size:20px;font-weight:800;text-align:right}
.bundle em{grid-column:2;font-style:normal;font-size:13px;color:var(--green);font-weight:600;text-align:right}
.bundle span{color:var(--ink-2);align-self:center;grid-row:span 2}
.fine{margin-top:28px;display:grid;gap:8px;font-size:15px;color:var(--ink-2);max-width:860px}

/* localization */
.loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center}
.loc-copy h2{margin-bottom:16px}
.loc-copy>p{color:var(--ink-2)}
.langs{list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:8px}
.langs li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:14px;font-weight:600}
.loc-cards{display:grid;gap:12px;margin:0 0 18px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.loc-card h3{font-size:16px;margin-bottom:6px}
.loc-card p{font-size:15px;color:var(--ink-2)}
.loc-note{font-size:15px;color:var(--ink-2);margin-bottom:16px}
.loc-quote{display:flex;align-items:center;gap:14px;font-weight:700;flex-wrap:wrap}
.product-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.product-switch button{font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.product-switch button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.loc-video{margin:0}
.lang-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:14px}
.lang-toggle button{font:inherit;font-size:14px;font-weight:700;border:0;background:none;color:var(--ink-2);padding:7px 16px;border-radius:999px;cursor:pointer}
.lang-toggle button.on{background:var(--ink);color:#fff}

/* faq */
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;padding:18px 36px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{color:var(--ink-2);padding:0 0 20px;max-width:680px}

/* contact */
.contact{background:var(--ink);color:#fff}
.contact .eyebrow{color:#9DA8FF}
.contact-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:center}
.contact-copy p{color:#C5CAD8;margin-top:16px;font-size:18px}
.contact-copy .muted{color:#8D94A8;font-size:15px}
.contact-copy .me{margin-top:32px;color:#fff;font-weight:600;font-size:16px}
.contact-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px}
.contact-card form{display:grid;gap:14px}
.contact-card label{display:grid;gap:6px;font-size:14px;font-weight:700}
.contact-card input,.contact-card textarea{font:inherit;font-size:16px;font-weight:400;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);resize:vertical;width:100%}
.contact-card input:focus,.contact-card textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.contact-card .invalid{border-color:#D43C3C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{font-size:14px;min-height:0}
.form-msg.err{color:#C42F2F}
.form-msg.ok{color:var(--green);font-weight:600}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.icons{display:flex;justify-content:center;gap:12px;margin-top:20px}
.icon{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;padding:0}
.icon svg{width:19px;height:19px;fill:currentColor}
.icon::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.icon:focus-visible::after{opacity:1;transform:translateX(-50%)}

.footer{border-top:1px solid #1D2436;background:var(--ink);color:#8D94A8;font-size:14px}
.footer-inner{display:flex;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:15px;font-weight:600;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%)}

::cue{font-family:var(--font);font-size:15px;background:rgba(12,18,34,.82);color:#fff}

/* responsive */
@media (max-width:1020px){
  .tiers{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero-demo{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto;gap:16px}
  .note{max-width:420px;width:100%;margin:0 auto}
  .demo-arrow{flex-direction:row;transform:none}
  .demo-arrow svg{transform:rotate(90deg);width:28px}
  .bundles{grid-template-columns:1fr}
  .loc{grid-template-columns:1fr;gap:36px}
  .contact-inner{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .nav-links{display:none}
  .nav .btn-sm{margin-left:auto}
  .hero{padding:48px 0 64px}
  .hero-demo{margin-top:44px}
  .section{padding:72px 0}
  .case-grid,.case-grid-phones{grid-template-columns:1fr;gap:32px}
  .case-ad .phone,.case-grid-phones .phone{max-width:240px}
  .case-ad figcaption,.case-grid-phones figcaption{justify-content:center}
  .tiers,.steps,.bundle-list{grid-template-columns:1fr}
  .contact-card{padding:22px}
  ::cue{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
}

/* ===== Restyle 2026-11-08: cream, borderless (Wonderlust layout), Crimson Pro + Plus Jakarta Sans (Bradley Ziffer), Bricolage wordmark ===== */
:root{
  --ink:#1A1A18;--ink-2:#5C5A52;--ink-3:#8A8574;
  --line:#EEE9D6;--bg:#FFFDF4;--tint:#F7F2E0;
  --accent:#1A1A18;--accent-ink:#000;--accent-soft:#F3E9B8;
  --green:#3F6B3A;--green-soft:#EAF0DC;
  --radius:22px;--shadow:none;
  --serif:"Crimson Pro",Georgia,serif;
  --wordmark:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;
}
body{background:var(--bg);font-weight:400}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(42px,6.4vw,76px)}
h2{font-size:clamp(32px,4.4vw,50px)}
h1 em,h2 em{font-style:italic}
h3{font-weight:600}
.eyebrow{color:var(--ink-3);font-weight:500}
.brand{font-family:var(--wordmark);font-weight:800;font-size:21px;letter-spacing:-.03em}
.nav{background:rgba(255,253,244,.9);border-bottom:0}
.nav-links a{font-weight:500}
.btn{font-weight:500}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-ghost{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:5px}
.hero{background:var(--bg);padding-top:96px}
.lede{font-weight:300}
.note{border:0;background:var(--tint)}
.note-label{color:var(--ink);background:var(--accent-soft)}
.note li::before{background:var(--ink-3)}
.demo-arrow svg{color:var(--ink-3)}
/* borderless video blocks */
.browser{border:0;border-radius:var(--radius);background:var(--tint)}
.browser-bar{display:none}
.browser .screen video{background:var(--tint)}
.phone{background:transparent;padding:0;border-radius:var(--radius)}
.phone .screen{border-radius:var(--radius)}
.screen{background:var(--tint)}
.play{background:rgba(26,26,24,.75)}
.tag{background:var(--tint);border-color:transparent}
.section-tint{background:var(--tint)}
.case{border-top:0}
.steps li,.tier,.loc-card,.bundle,.langs li{border:0;background:var(--tint)}
.section-tint .steps li,.section-tint .tier,.section-tint .loc-card,.section-tint .bundle,.section-tint .langs li{background:var(--bg)}
.tier-top{border:0;background:var(--ink);color:var(--bg)}
.tier-top ul,.tier-top .price span{color:#D9D4C2}
.tier-top li::before{border-color:var(--accent-soft)}
.tier-top .btn-primary{background:var(--bg);color:var(--ink)}
.tier-badge{background:var(--accent-soft);color:var(--ink)}
.price{font-family:var(--serif);font-weight:400}
.bundles{border:0}
.bundle b{font-family:var(--serif);font-weight:400;font-size:24px}
.step-n{background:var(--accent-soft);color:var(--ink)}
.product-switch button{border-color:transparent;background:var(--tint)}
.product-switch button.on{border-color:transparent;background:var(--ink);color:var(--bg)}
.lang-toggle{border:0;background:var(--tint)}
details{border-bottom:1px solid var(--line)}
summary{font-weight:500}
.contact,.footer{background:var(--tint);color:var(--ink)}
.contact .eyebrow{color:var(--ink-3)}
.contact-copy p{color:var(--ink-2)}
.contact-copy .muted{color:var(--ink-3)}
.contact-copy .me{color:var(--ink)}
.contact-card{background:var(--bg)}
.contact-card input,.contact-card textarea{border-color:var(--line);background:#fff}
.contact-card input:focus,.contact-card textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.icon{border-color:transparent;background:var(--bg)}
.footer{border-top:0;color:var(--ink-3)}
::cue{font-family:"Plus Jakarta Sans",sans-serif}
.price span{font-family:var(--font);font-size:14px}

/* ===== Hero release note: help-centre page screenshot that scrolls (2026-11-08) ===== */
.rn{position:relative;height:350px;background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;font-family:"Plus Jakarta Sans",Arial,sans-serif;color:#2B2B2B;box-shadow:0 0 0 1px var(--line)}
.rn-head{flex:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-bottom:1px solid #ECECEC;font-size:9px;background:#fff;position:relative;z-index:1}
.rn-head b{font-weight:700;font-size:9.5px}
.rn-logo{width:13px;height:13px;border-radius:4px;background:#C9C9C9}
.rn-search{margin-left:auto;width:96px;height:18px;line-height:18px;padding:0 8px;border-radius:9px;background:#F2F2F2;color:#9A9A9A;font-size:8px}
.rn-link{color:#777;font-size:8px}
.rn-view{position:relative;flex:1;overflow:hidden}
.rn-page{padding:12px 18px 24px 16px;font-size:7.6px;line-height:1.55;will-change:transform}
.rn-page p{margin:0 0 7px;color:#4A4A4A}
.rn-page h4{font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;margin:4px 0 4px;color:#1E1E1E;line-height:1.2}
.rn-page h5{font-family:Arial,sans-serif;font-size:10px;font-weight:700;margin:12px 0 4px;color:#1E1E1E}
.rn-page ul{margin:0 0 7px;padding-left:12px;color:#4A4A4A}
.rn-page li{margin:0 0 2px}
.rn-crumbs{color:#9A9A9A!important;font-size:7px}
.rn-meta{display:flex;align-items:center;gap:5px;color:#8C8C8C!important;font-size:7px;margin-bottom:10px!important}
.rn-av{width:12px;height:12px;border-radius:50%;background:#DADADA}
.rn-shot{height:62px;border-radius:5px;margin:6px 0 4px;background:linear-gradient(90deg,#E9E9E9 0 22%,#F4F4F4 22% 100%);border:1px solid #E6E6E6}
.rn-shot-sm{height:44px;margin-bottom:8px}
.rn-cap{font-size:6.6px;color:#9A9A9A!important;font-style:italic}
.rn-page table{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:7px;color:#4A4A4A}
.rn-page th,.rn-page td{border:1px solid #E3E3E3;padding:2px 4px;text-align:left}
.rn-page th{background:#F5F5F5;font-weight:700}
.rn-bar{position:absolute;top:4px;right:3px;bottom:4px;width:4px;border-radius:2px;background:#F1F1F1}
.rn-bar i{position:absolute;left:0;right:0;top:0;height:22%;border-radius:2px;background:#C4C4C4;will-change:transform}
.rn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
@media (max-width:1020px){.rn{max-width:420px;width:100%;margin:0 auto}}
@media (max-width:760px){.rn{height:320px}}

/* ===== Design fixes 2026-11-09 (critique: contrast, phone layout, proof, pricing switch, motion control) ===== */
:root{--ink-3:#6B6759}

/* hero proof line */
.proof{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:15px;color:var(--ink-2)}
.proof svg{width:16px;height:16px;flex:none;color:var(--green)}

/* pause control on the hero video */
.motion-btn{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:#fff;background:rgba(26,26,24,.72);border:0;border-radius:999px;padding:6px 11px 6px 9px;cursor:pointer;z-index:2}
.motion-btn svg{width:13px;height:13px}
.motion-btn .i-pause{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.motion-btn .i-play{fill:#fff;display:none}
.motion-btn[aria-pressed="true"] .i-pause{display:none}
.motion-btn[aria-pressed="true"] .i-play{display:inline}

/* pricing: single / bundle switch */
.plan-switch{display:inline-flex;background:var(--tint);border-radius:999px;padding:4px;margin:-16px 0 14px}
.plan-switch button{font:inherit;font-size:15px;font-weight:600;border:0;background:none;color:var(--ink-2);padding:10px 20px;border-radius:999px;cursor:pointer;min-height:44px}
.plan-switch button.on{background:var(--ink);color:var(--bg)}
.plan-note{font-size:15px;color:var(--ink-2);margin:0 0 24px}
.plan-switch + .plan-note[hidden] + .tiers{margin-top:26px}
.price{margin-bottom:4px}
.price b{font-weight:inherit}
.save{min-height:20px;margin:0 0 14px;font-size:13px;font-weight:600;color:var(--green)}
.tier-top .save{color:var(--accent-soft)}
.tier-link{margin-top:auto;padding-top:20px;font-size:15px;font-weight:600;color:var(--ink);text-underline-offset:5px}

/* touch targets */
.lang-toggle button,.product-switch button{min-height:44px}
.icon{width:44px;height:44px}

/* phone menu */
.menu-btn{display:none}
@media (max-width:760px){
  .menu-btn{display:grid;align-content:center;gap:6px;width:44px;height:44px;margin-left:4px;border:0;border-radius:50%;background:var(--tint);cursor:pointer;padding:0 13px}
  .menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s}
  .nav.open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav.open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-inner{position:relative}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;margin:0;background:var(--bg);padding:6px 16px 14px;box-shadow:0 12px 24px -12px rgba(26,26,24,.25)}
  .nav.open .nav-links a{padding:13px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav.open .nav-links a:last-child{border-bottom:0}
  .nav .btn-sm{padding:9px 14px}

  /* shorter work section: walkthrough full width, ad beside its caption */
  .case{padding:28px 0}
  .case-head{margin-bottom:16px}
  .case-grid{gap:18px}
  .case-ad{display:grid;grid-template-columns:46% 1fr;gap:16px;align-items:end}
  .case-ad .phone{max-width:none;margin:0}
  .case-ad figcaption{justify-content:flex-start!important;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 6px}
  .case-grid-phones{grid-template-columns:1fr 1fr;gap:14px;align-items:end}
  .case-grid-phones .phone{max-width:none}
  .case-grid-phones .case-ad{display:block}
  .case-grid-phones figcaption{font-size:13px}
  .play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .proof{font-size:14px;text-align:left;align-items:flex-start}
  .proof svg{margin-top:3px}
  .plan-switch{display:flex;margin-top:-20px}
  .plan-switch button{flex:1;padding:10px 8px;font-size:14px}
}
@media (max-width:760px){
  .nav-inner{gap:10px}
  .brand{font-size:19px}
  .nav .btn-sm{white-space:nowrap;font-size:13px;padding:9px 12px}
  .case-ad figcaption,.case-grid-phones figcaption{display:block!important;text-align:left}
}

/* Work split into client work and spec work (2026-11-09) */
.work-group{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:14px;margin:8px 0 22px;border-bottom:1px solid var(--line)}
.work-group-spec{margin-top:56px}
.group-title{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em}
.group-note{font-size:15px;color:var(--ink-3);max-width:560px}
.work-group + .case{padding-top:8px}
@media (max-width:760px){
  .group-title{font-size:26px}
  .work-group{gap:6px;margin-bottom:12px}
  .work-group-spec{margin-top:40px}
}

/* Localization block order: product tabs > language > video > caption (2026-11-09) */
.loc-video .product-switch{display:flex;gap:26px;margin:0 0 18px;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto}
.loc-video .product-switch button{background:none!important;border:0;border-radius:0;padding:10px 0 12px;margin-bottom:-1px;font-size:16px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;min-height:44px;white-space:nowrap}
.loc-video .product-switch button.on{color:var(--ink)!important;border-bottom-color:var(--ink)}
.lang-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.lang-label{font-size:14px;font-weight:600;color:var(--ink-3)}
.lang-row .lang-toggle{margin:0}
.loc-video figcaption{gap:8px}
.loc-video figcaption b{color:var(--ink);font-weight:600}
.loc-video .product-switch{overflow:visible}

/* ===== Polish pass (Emil Kowalski skills: emil-design-eng, mobile-native, ui-cheatsheet) 2026-11-10 ===== */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* Phone feel: no grey tap flash, no 300ms tap delay, no text selection on long-pressed controls */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,a,summary,[role="button"]{touch-action:manipulation}
button,.btn,.tab,.play,.icon,.menu-btn,.motion-btn,summary{-webkit-user-select:none;user-select:none}

/* Press feedback on everything pressable: scale down, ease-out, fast */
.btn,.play,.icon,.menu-btn,.motion-btn,.plan-switch button,.lang-toggle button,.product-switch button,.tier-link{
  transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.btn:active,.icon:active,.menu-btn:active,.motion-btn:active,.plan-switch button:active,.lang-toggle button:active{transform:scale(0.97)}
.play:active{transform:scale(0.94)}
.tier-link:active,.loc-video .product-switch button:active{opacity:.7}

/* Hover only where a mouse can hover (taps leave hover stuck on phones) */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#000}
  .btn-ghost:hover{color:#000}
  .nav-links a:hover{color:var(--ink)}
  .play:hover{background:var(--ink);transform:scale(1.04)}
  .play:hover:active{transform:scale(0.94)}
  .loc-video .product-switch button:hover{color:var(--ink)}
  .icon:hover{color:var(--ink);border-color:var(--ink)}
  .icon:hover::after{opacity:1;transform:translateX(-50%)}
  .motion-btn:hover{background:var(--ink)}
  .tier-link:hover{text-decoration-thickness:2px}
}

/* Stronger curves for the small transitions that already exist */
summary::after{transition:transform 200ms var(--ease-out)}
.icon::after{transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
.toast{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.menu-btn span{transition:transform 200ms var(--ease-out)}

/* Phone menu: fade and drop in instead of popping in (it shows rarely, so a short entrance is fine) */
@media (max-width:760px){
  .nav .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;margin:0;background:var(--bg);padding:6px 16px 14px;box-shadow:0 12px 24px -12px rgba(26,26,24,.25);
    opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top center;
    transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s linear 180ms}
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s}
  .nav .nav-links a{padding:13px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav .nav-links a:last-child{border-bottom:0}
}

/* Prices change when switching single/bundle: keep digits steady, blur the swap so it reads as one change */
.price,.save,.bundle b{font-variant-numeric:tabular-nums}
.price,.save{transition:filter 160ms ease,opacity 160ms ease}
.price.swapping,.save.swapping{filter:blur(2px);opacity:.5}

/* Large serif headings: slightly tighter tracking */
h1{letter-spacing:-0.02em}

/* Release-note card: soft semi-transparent edge instead of a solid hairline */
.rn{box-shadow:0 0 0 1px rgba(26,26,24,.07),0 1px 2px rgba(26,26,24,.04),0 8px 24px -12px rgba(26,26,24,.12)}
.rn-page,.rn-bar i{will-change:auto}

/* Readable line length for longer paragraphs */
.section-head p:not(.eyebrow),.loc-card p,details p,.contact-copy p{max-width:65ch}

@media (prefers-reduced-motion:reduce){
  .btn,.play,.icon,.menu-btn,.motion-btn,.plan-switch button,.lang-toggle button{transition:background-color 160ms ease,color 160ms ease}
  .btn:active,.play:active,.icon:active,.menu-btn:active,.motion-btn:active,.plan-switch button:active,.lang-toggle button:active{transform:none}
  .nav .nav-links{transform:none!important}
}

/* Hero lede: one sentence per line (2026-11-11) */
.lede{max-width:820px;text-wrap:balance}
.lede span{display:block}

/* How it works: two-video timing note (2026-11-11) */
.steps-note{margin:28px 0 0;max-width:65ch;font-size:15px;line-height:1.6;color:var(--ink-3)}
.steps-note strong{color:var(--ink);font-weight:600}

/* ===== Buttons and controls, ported from Astryx (github.com/meta/astryx) 2026-11-11 =====
   Taken from Astryx's Button, SegmentedControl and theme tokens, kept in FeatureFrame's
   cream palette and fonts:
   - fixed heights per size instead of padding-driven height
   - hover and press shown as a tint layered over the fill (background-image), not a colour swap
   - 0.98 press scale for a mouse only; touch and reduced motion show the tint alone
   - 2px focus ring, 3px gap
   - 175ms with Astryx's standard ease
   - secondary button = neutral fill; segmented control = neutral track with a lifted white marker
   --btn-radius is the one place to change button shape (Astryx default 8px; pill = 999px). */
:root{
  --size-sm:40px;--size-md:44px;--size-lg:48px;
  --btn-radius:999px;
  --neutral:rgba(26,26,24,.07);
  --overlay-hover:rgba(26,26,24,.05);--overlay-pressed:rgba(26,26,24,.10);
  --overlay-hover-inv:rgba(255,253,244,.12);--overlay-pressed-inv:rgba(255,253,244,.22);
  --duration-fast:175ms;--ease-standard:cubic-bezier(0.24,1,0.4,1);
  --shadow-low:0 1px 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08);
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.btn{height:var(--size-lg);padding:0 22px;border:0;border-radius:var(--btn-radius);font-size:16px;font-weight:500;line-height:1;white-space:nowrap;min-width:0;max-width:100%;text-decoration:none;background-image:none;
  transition-property:background-image,background-color,color,opacity,transform;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-standard)}
.btn-sm{height:var(--size-sm);padding:0 16px;font-size:14px}
.tier .btn{height:var(--size-md);padding:0 18px;font-size:15px;margin-top:auto}
.btn-primary{background-color:var(--ink);color:var(--bg)}
.tier-top .btn-primary{background-color:var(--bg);color:var(--ink)}
.btn-secondary{background-color:var(--neutral);color:var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;background-image:none;transform:none}

/* Icon-only controls share the button shape and states */
.menu-btn{border-radius:var(--btn-radius);background-color:var(--neutral)}
.icon{border-radius:var(--btn-radius)}

/* Segmented controls: pricing plan and video language */
.plan-switch,.lang-toggle{position:relative;isolation:isolate;gap:2px;padding:3px;background:var(--neutral);border-radius:var(--btn-radius)}
.plan-switch button,.lang-toggle button{position:relative;background:transparent;color:var(--ink-2);font-weight:500;border-radius:var(--btn-radius);min-height:var(--size-md);
  transition-property:color,background-image,transform;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-standard)}
.plan-switch button.on,.lang-toggle button.on{background:transparent;color:var(--ink);font-weight:600}
.plan-switch:not(.seg-ready) button.on,.lang-toggle:not(.seg-ready) button.on{background:#fff;box-shadow:var(--shadow-low)}
.seg-ready::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--seg-w);transform:translateX(var(--seg-x));background:#fff;border-radius:var(--btn-radius);box-shadow:var(--shadow-low);
  transition:transform 300ms var(--ease-standard),width 300ms var(--ease-standard)}
.seg-still::before{transition:none}

/* Press: tint for everyone, scale for a mouse */
.btn-secondary:active,.menu-btn:active,.plan-switch button:not(.on):active,.lang-toggle button:not(.on):active{background-image:linear-gradient(var(--overlay-pressed),var(--overlay-pressed))}
.btn-primary:active{background-image:linear-gradient(var(--overlay-pressed-inv),var(--overlay-pressed-inv))}
.tier-top .btn-primary:active{background-image:linear-gradient(var(--overlay-pressed),var(--overlay-pressed))}
.btn:active,.icon:active,.menu-btn:active,.motion-btn:active,.plan-switch button:active,.lang-toggle button:active{transform:scale(.98)}
@media (pointer:coarse){
  .btn:active,.icon:active,.menu-btn:active,.motion-btn:active,.plan-switch button:active,.lang-toggle button:active{transform:none}
}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background-color:var(--ink);background-image:linear-gradient(var(--overlay-hover-inv),var(--overlay-hover-inv))}
  .tier-top .btn-primary:hover{background-color:var(--bg);background-image:linear-gradient(var(--overlay-hover),var(--overlay-hover))}
  .btn-secondary:hover,.menu-btn:hover,.plan-switch button:not(.on):hover,.lang-toggle button:not(.on):hover{background-image:linear-gradient(var(--overlay-hover),var(--overlay-hover))}
  .plan-switch button:not(.on):hover,.lang-toggle button:not(.on):hover{color:var(--ink)}
  .icon:hover{background-image:linear-gradient(var(--overlay-hover),var(--overlay-hover));color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  .btn,.plan-switch button,.lang-toggle button{transition-duration:0s}
  .seg-ready::before{transition:none}
  .btn:active,.icon:active,.menu-btn:active,.motion-btn:active,.plan-switch button:active,.lang-toggle button:active{transform:none}
}
@media (forced-colors:active){
  .btn-secondary,.plan-switch,.lang-toggle{border:1px solid CanvasText}
  .seg-ready::before{background:Highlight}
  .plan-switch button.on,.lang-toggle button.on{color:HighlightText;forced-color-adjust:none}
}

/* Localization: language switch as a chip on the video, so the product tabs lead (2026-11-11) */
.loc-video .product-switch{margin-bottom:16px}
.loc-video .product-switch button{font-size:17px}
.lang-chip{position:absolute;top:10px;right:10px;z-index:3;margin:0;padding:2px;gap:2px;background:rgba(26,26,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px}
.lang-chip button{min-height:0;height:28px;padding:0 11px;font-size:12px;font-weight:600;letter-spacing:.05em;color:rgba(255,253,244,.8);border-radius:999px}
.lang-chip button.on{color:var(--ink);font-weight:600}
.lang-chip button::after{content:"";position:absolute;inset:-8px -1px}
.lang-chip:not(.seg-ready) button.on{background:var(--bg);box-shadow:none}
.lang-chip.seg-ready::before{top:2px;bottom:2px;background:var(--bg);box-shadow:none;border-radius:999px}
.lang-chip button:not(.on):active{background-image:linear-gradient(var(--overlay-pressed-inv),var(--overlay-pressed-inv))}
.lang-chip button:focus-visible{outline:2px solid var(--bg);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .lang-chip button:not(.on):hover{color:var(--bg);background-image:linear-gradient(var(--overlay-hover-inv),var(--overlay-hover-inv))}
}
@media (max-width:560px){.lang-chip{top:8px;right:8px}}
@media (max-width:560px){.loc-video figcaption{display:block;line-height:1.7}.loc-video figcaption .tag{display:inline-block;margin-left:6px}}

/* ===== Full Astryx look 2026-11-11: 8px buttons, 12px white cards with a hairline;
   the $500 card is butter-filled, lifted and shadowed (no outline); other tiers dimmed ===== */
:root{--btn-radius:8px;--radius:12px;--hairline:0 0 0 1px rgba(26,26,24,.10)}
.plan-switch button,.lang-toggle button{border-radius:6px}
.seg-ready::before{border-radius:6px}
.steps li,.tier,.loc-card,.note,.section-tint .steps li,.section-tint .tier,.section-tint .loc-card{background:#fff;border:0;box-shadow:var(--hairline)}
.tier-badge{border-radius:6px}
.tiers{align-items:stretch}
.tier{transition:opacity 300ms var(--ease-standard),transform 300ms var(--ease-standard)}
.tier:not(.tier-top){opacity:.82}
.tier-top{background:#FBF4D3;color:var(--ink);box-shadow:0 12px 28px rgba(26,26,24,.12);transform:translateY(-8px)}
.tier-top ul,.tier-top .price span{color:var(--ink-2)}
.tier-top li::before{border-color:var(--ink)}
.tier-top .save{color:#3B6D11}
.tier-top .btn-primary{background-color:var(--ink);color:var(--bg)}
.tier-top .btn-primary:active{background-image:linear-gradient(var(--overlay-pressed-inv),var(--overlay-pressed-inv))}
@media (hover:hover) and (pointer:fine){
  .tier-top .btn-primary:hover{background-color:var(--ink);background-image:linear-gradient(var(--overlay-hover-inv),var(--overlay-hover-inv))}
  .tier:not(.tier-top):hover{opacity:1}
}
@media (max-width:900px){.tier-top{transform:none}}
@media (prefers-reduced-motion:reduce){.tier{transition:none}}

/* Hero: curved orange arrow between release note and video, no labels (2026-11-14) */
.demo-arrow svg{width:72px;height:auto;overflow:visible}
@media (max-width:1020px){.demo-arrow{height:56px;justify-content:center}.demo-arrow svg{width:52px}}

/* Wider layout (2026-11-14): header runs to the window edges; content column widens to 1440px
   with the same side gutter, so logo, menu, videos and pricing cards share one left/right edge
   on every screen up to ~1520px wide. */
.wrap{max-width:1440px;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
.nav-inner{max-width:none}
@media (min-width:1021px){
  .hero-demo{grid-template-columns:minmax(0,360px) auto minmax(0,1fr);gap:28px}
  .loc{gap:72px}
}
@media (min-width:761px){
  .case-grid{grid-template-columns:minmax(0,1fr) 280px;gap:56px}
  .case-ad .phone{max-width:280px}
  .case-grid-phones{grid-template-columns:repeat(2,280px);gap:120px}
  .case-grid-phones .phone{max-width:280px}
  .tiers{gap:20px}
}

/* Hero arrow in the site's ink; hero entrance sequence (2026-11-14):
   note alone for 3 s -> arrow -> video, once. Hidden only when JS runs and motion is allowed. */
.demo-arrow{color:var(--ink)}
.demo-arrow svg{color:inherit;width:75px}
@media (max-width:1020px){.demo-arrow svg{width:55px}}
@media (prefers-reduced-motion:no-preference){
  .js .hero-demo .demo-arrow,.js .hero-demo .hero-video{opacity:0;visibility:hidden}
  .js .hero-demo .demo-arrow{transform:translateX(-10px)}
  .js .hero-demo .hero-video{transform:translateY(12px) scale(.985)}
  .js .hero-demo.arrow-in .demo-arrow{opacity:1;visibility:visible;transform:none;
    transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s}
  .js .hero-demo.video-in .hero-video{opacity:1;visibility:visible;transform:none;
    transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out),visibility 0s}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1020px){
  .js .hero-demo .demo-arrow{transform:translateY(-8px)}
}

/* Tighter gap between hero and Examples (2026-11-14): was 88 + 96 px, now 32 + 64 px */
.hero{padding-bottom:32px}
#examples{padding-top:64px}
@media (max-width:760px){.hero{padding-bottom:24px}#examples{padding-top:48px}}

/* Examples hierarchy (2026-11-14): group titles open a section (heavy rule, large serif);
   project titles step down to a small sans label; the spec note sits on its own line. */
.work-group{display:block;border-bottom:0;border-top:2px solid var(--ink);padding:22px 0 0;margin:0 0 32px}
.work-group-spec{margin-top:72px}
.group-title{font-size:clamp(32px,3.4vw,44px);line-height:1.1;font-weight:400;letter-spacing:-.015em}
.group-note{max-width:none;margin-top:10px;font-size:15px;color:var(--ink-3)}
.work-group + .case{padding-top:0}
.case-head{margin-bottom:16px}
.case-head h3{font-family:inherit;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:0}
.case-head p{margin-top:2px;font-size:14px;color:var(--ink-3)}
.case + .case{border-top:1px solid var(--line);margin-top:8px}
@media (max-width:760px){
  .work-group{margin-bottom:22px;padding-top:16px}
  .work-group-spec{margin-top:48px}
  .group-title{font-size:30px}
  .group-note{font-size:14px}
}

/* Video captions: no dot separators; space separates the parts (2026-11-14) */
.hero-video figcaption,.case figcaption,.loc-video figcaption{column-gap:20px;row-gap:2px}
.case figcaption b,.loc-video figcaption b{color:var(--ink);font-weight:600}
@media (max-width:1020px){.case-ad figcaption{flex-direction:row!important;flex-wrap:wrap;align-items:baseline!important}}
@media (max-width:760px){
  .case-ad figcaption,.case-grid-phones figcaption{display:flex!important;flex-wrap:wrap;column-gap:14px}
  .case figcaption{column-gap:14px}
}
@media (max-width:560px){.loc-video figcaption{display:flex;column-gap:14px}.loc-video figcaption .tag{margin-left:0}}

/* Examples option B (2026-11-14): each group's title sits in a left column beside its projects,
   so it reads as a label for them and the section title stays the only full-width heading. */
.group{border-top:1px solid var(--line);padding-top:28px}
.group + .group{margin-top:56px}
.work-group,.work-group-spec{border-top:0;padding:0;margin:0}
.group-title{font-size:28px;line-height:1.15;font-weight:400;letter-spacing:-.01em}
.group-note{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-3)}
.group-items > .case:first-child{padding-top:0;border-top:0;margin-top:0}
@media (min-width:1021px){
  .group{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:48px;align-items:start}
  .work-group{position:sticky;top:96px}
}
@media (max-width:1020px){
  .group-title{font-size:26px}
  .work-group{margin-bottom:20px}
  .group-note{max-width:60ch}
}
@media (max-width:760px){
  .group{padding-top:20px}
  .group + .group{margin-top:40px}
  .group-title{font-size:24px}
}

/* ===== How it works step cards (2026-11-14) =====
   Hover (mouse only), keyboard focus, or .is-active (phones: set briefly by main.js as each card
   scrolls into view) lifts the card, fills the big number and tints the two pills.
   Reduced motion: colour change only, no lift.
   ACCENT: change the variables on #how below, or pick a preset with data-accent on <ol class="steps">:
     "butter"     option B (in use): the active card fills butter, the number takes the grainy black fill
     ""           honey → ember gradient number on a white card
     "terracotta" terracotta → plum gradient number on a white card */
#how{
  --step-accent-a:#C98A12;      /* gradient start; also the active card's border tint */
  --step-accent-b:#B8461B;      /* gradient end; also pill text (darker = readable) */
  --step-accent-soft:#FBF4D3;   /* pale pill fill */
  --step-num-fill:linear-gradient(110deg,var(--step-accent-a) 10%,var(--step-accent-b) 90%);
  --step-num-gradient:1;        /* 1 = number takes --step-num-fill when active; 0 = number stays ink */
  --step-active-fill:#fff;      /* card fill when active */
  --step-active-ring:color-mix(in srgb,var(--step-accent-a) 45%,transparent);
  --step-pill-active-bg:var(--step-accent-soft);
  --step-pill-active-fg:var(--step-accent-b);   /* pill text when active */
  --step-pill-active-image:none;                /* optional texture layered on the active pills */
  --step-num-font:var(--font);  /* Plus Jakarta 700: closest to the reference's bold geometric digits */
  --step-num-weight:700;
}
#how .steps[data-accent="butter"]{
  --step-accent-a:#1A1A18;--step-accent-b:#1A1A18;--step-accent-soft:#FBF4D3;
  --step-num-fill:url("step-num-grain.svg");
  --step-active-fill:#FBF4D3;--step-active-ring:rgba(26,26,24,.14);--step-pill-active-bg:#1A1A18;
  --step-pill-active-image:url("step-num-grain.svg");--step-pill-active-fg:var(--bg); /* grainy black pills, text in the page background colour */
}
#how .steps[data-accent="terracotta"]{
  --step-accent-a:#C4553A;--step-accent-b:#7B3D6E;--step-accent-soft:#F7EAE6;
}

#how .step-card{
  /* resting state; the active rules below only change these variables */
  --pad:22px;
  --pill-fg:var(--ink-3);--pill-bg:transparent;--pill-line:rgba(26,26,24,.14);
  --pill-img-on:0;--num-on:0;--lift:0px;
  --fill:#fff;--ring:rgba(26,26,24,.10);--drop:0 0 0 rgba(26,26,24,0);
  --t:260ms var(--ease-standard);
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  min-height:340px;padding:var(--pad) var(--pad) 0;border:0;border-radius:var(--radius);
  background:var(--fill);box-shadow:0 0 0 1px var(--ring),var(--drop);
  transform:translateY(calc(-1 * var(--lift)));
  transition:transform var(--t),box-shadow var(--t),background-color var(--t);
  outline:none;
}
#how .step-top{display:flex;align-items:center;gap:12px;margin-bottom:44px}
#how .step-pill,#how .step-action{
  display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:6px;
  font-size:12px;line-height:1;white-space:nowrap;color:var(--pill-fg);background:var(--pill-bg);
  box-shadow:inset 0 0 0 1px var(--pill-line);
  transition:color var(--t),background-color var(--t),box-shadow var(--t);
  position:relative;isolation:isolate;overflow:hidden;
}
#how .step-pill::before,#how .step-action::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--step-pill-active-image) center/200px auto;
  opacity:var(--pill-img-on);transition:opacity var(--t);
}
#how .step-pill{font-weight:500;letter-spacing:.08em;text-transform:uppercase}
#how .step-action{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:var(--pad)}
#how .step-card h3{margin:0 0 8px;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
#how .step-card p{font-size:14px;line-height:1.55;color:var(--ink-3)}
#how .step-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:28px}
#how .step-num{
  position:relative;display:block;font-family:var(--step-num-font);font-weight:var(--step-num-weight);
  font-size:104px;line-height:1;letter-spacing:-.04em;color:var(--ink);
  margin:0 0 -.14em -.04em; /* the card edge crops the bottom of the digits */
  font-variant-numeric:lining-nums tabular-nums;
}
#how .step-num::after{
  content:attr(data-n);position:absolute;inset:0;
  background-image:var(--step-num-fill);background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  opacity:calc(var(--num-on) * var(--step-num-gradient));transition:opacity var(--t);
}

/* active state: hover (real mouse only), keyboard focus, or set by main.js on touch screens */
#how .step-card:focus-visible,
#how .step-card.is-active{
  --pill-fg:var(--step-pill-active-fg);--pill-bg:var(--step-pill-active-bg);--pill-img-on:1;
  --pill-line:color-mix(in srgb,var(--step-accent-b) 28%,transparent);
  --num-on:1;--lift:4px;
  --fill:var(--step-active-fill);--ring:var(--step-active-ring);
  --drop:0 16px 32px -14px rgba(26,26,24,.22);
}
@media (hover:hover) and (pointer:fine){
  #how .step-card:hover{
    --pill-fg:var(--step-pill-active-fg);--pill-bg:var(--step-pill-active-bg);--pill-img-on:1;
    --pill-line:color-mix(in srgb,var(--step-accent-b) 28%,transparent);
    --num-on:1;--lift:4px;
    --fill:var(--step-active-fill);--ring:var(--step-active-ring);
    --drop:0 16px 32px -14px rgba(26,26,24,.22);
  }
}
#how .step-card:focus-visible .step-action,
#how .step-card.is-active .step-action{color:var(--pill-fg)}
@media (hover:hover) and (pointer:fine){#how .step-card:hover .step-action{color:var(--pill-fg)}}
/* keyboard users also get a ring outside the card */
#how .step-card:focus-visible{outline:2px solid var(--step-accent-b);outline-offset:3px;border-radius:var(--radius)}

@media (prefers-reduced-motion:reduce){#how .step-card{transform:none}}
@media (max-width:1020px){#how .step-card{min-height:300px}#how .step-top{margin-bottom:32px}}
@media (max-width:760px){
  #how .step-card{min-height:0}
  #how .step-top{margin-bottom:28px}
  #how .step-num{font-size:88px}
}

/* Localization tabs at phone width (2026-11-14): the longer tab name pushed the page wider than
   the screen. Keep the grid column within the screen and let long tab labels wrap. */
@media (max-width:1020px){.loc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .loc-video .product-switch{gap:18px}
  .loc-video .product-switch button{flex:1 1 0;white-space:normal;text-align:left;line-height:1.25;font-size:15px}
}

/* ===== Pricing: featured look follows the pointer, tag swings (2026-11-14) =====
   Adapted from a reference recording. The look of the $500 card (butter fill, 8px lift, shadow,
   full opacity, ink button) moves to whichever tier is hovered or holds keyboard focus; the $500
   card drops back to plain meanwhile, and gets the look back when the pointer leaves the row.
   The "Most complete" tag stays on the $500 card: a tilted ink pill centred on its top edge
   that swings once (main.js adds .swing) each time the featured look leaves or returns.
   Hover changes are gated to fine pointers, so phones keep the static look. */
.tier-top{z-index:1}
.tier-badge{top:-12px;left:50%;right:auto;translate:-50% 0 /* centred on top edge; `translate` composes with the swing's `transform` */;background:var(--ink);color:var(--bg);border-radius:999px;
  padding:4px 12px;box-shadow:0 4px 10px rgba(26,26,24,.18);transform:rotate(8deg);transform-origin:50% 0;pointer-events:none}
.tier-badge.swing{animation:badge-swing 560ms var(--ease-standard)}
@keyframes badge-swing{
  0%{transform:translateY(0) rotate(8deg)}
  22%{transform:translateY(-4px) rotate(-3deg)}
  48%{transform:translateY(-2px) rotate(13deg)}
  70%{transform:translateY(-1px) rotate(5.5deg)}
  86%{transform:translateY(0) rotate(9deg)}
  100%{transform:translateY(0) rotate(8deg)}
}
@media (hover:hover) and (pointer:fine){
  .tier{transition:opacity 250ms var(--ease-standard),transform 250ms var(--ease-standard),
    background-color 250ms var(--ease-standard),box-shadow 250ms var(--ease-standard)}
  .tier li::before{transition:border-color 250ms var(--ease-standard)}
  .tier .save{transition:color 250ms var(--ease-standard)}

  /* lit = hovered tier; or, while nothing is hovered, the tier holding keyboard focus */
  .tiers .tier:not(.tier-top):hover,
  .tiers:not(:has(.tier:hover)) .tier:not(.tier-top):has(:focus-visible){
    background:#FBF4D3;box-shadow:0 12px 28px rgba(26,26,24,.12);opacity:1}
  .tiers .tier:not(.tier-top):hover .btn-secondary,
  .tiers:not(:has(.tier:hover)) .tier:not(.tier-top):has(:focus-visible) .btn-secondary{
    background-color:var(--ink);color:var(--bg)}
  .tiers .tier:not(.tier-top):hover .btn-secondary:hover{background-image:linear-gradient(var(--overlay-hover-inv),var(--overlay-hover-inv))}
  .tiers .tier:not(.tier-top):hover .save,
  .tiers:not(:has(.tier:hover)) .tier:not(.tier-top):has(:focus-visible) .save{color:#3B6D11}

  /* $500 card goes plain while another tier is lit */
  .tiers:has(.tier:not(.tier-top):hover) .tier-top,
  .tiers:not(:has(.tier:hover)):has(.tier:not(.tier-top) :focus-visible) .tier-top{
    background:#fff;box-shadow:var(--hairline);transform:none;opacity:.82}
  .tiers:has(.tier:not(.tier-top):hover) .tier-top .btn-primary,
  .tiers:not(:has(.tier:hover)):has(.tier:not(.tier-top) :focus-visible) .tier-top .btn-primary{
    background-color:var(--neutral);color:var(--ink);background-image:none}
  .tiers:has(.tier:not(.tier-top):hover) .tier-top .save,
  .tiers:not(:has(.tier:hover)):has(.tier:not(.tier-top) :focus-visible) .tier-top .save{color:var(--green)}
}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .tiers .tier:not(.tier-top):hover,
  .tiers:not(:has(.tier:hover)) .tier:not(.tier-top):has(:focus-visible){transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
  .tier-badge.swing{animation:none}
  .tier-top,.tier:hover,.tier:has(:focus-visible){transform:none!important}
  .tier{transition:background-color 250ms ease,box-shadow 250ms ease,opacity 250ms ease!important}
}

/* ===== Localization section rebuild (2026-11-14): single column, language row drives the video ===== */
#localization .loc{display:block}
#localization .section-head{margin-bottom:28px}
.loc-langs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0 0 22px}
.loc-radios{display:flex;flex-wrap:wrap;gap:8px}
.loc-radios button{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  font:inherit;font-size:14px;font-weight:500;line-height:1;color:var(--ink);background-color:var(--bg);
  border:0;border-radius:6px;box-shadow:0 0 0 1px rgba(26,26,24,.16);cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform 160ms var(--ease-out)}
.loc-radios button svg{flex:none;display:block}
.loc-radios button::after{content:"";position:absolute;inset:-6px -2px} /* 44px tap area */
.loc-radios button[aria-checked="true"]{background-color:var(--ink);color:var(--bg);box-shadow:none}
.loc-radios button:active{transform:scale(.98)}
.loc-radios button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .loc-radios button[aria-checked="false"]:hover{background-color:#fff;box-shadow:0 0 0 1px rgba(26,26,24,.28)}
}
.loc-also{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;font-weight:500;line-height:32px;color:var(--ink-3)}
#localization .loc-video{max-width:1000px;margin:0}
.loc-cases{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;max-width:1000px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(26,26,24,.14)}
.loc-cases h3{font-size:17px;margin-bottom:8px}
.loc-cases p{font-size:15px;color:var(--ink-2);max-width:60ch}
#localization .loc-quote{display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px;margin-top:32px}
#localization .loc-quote span{font-size:16px;font-weight:400;color:var(--ink-2)}
@media (max-width:760px){
  .loc-also{flex-basis:100%}
  .loc-cases{grid-template-columns:1fr;gap:24px;margin-top:32px}
}
@media (max-width:400px){
  .loc-radios{gap:6px}
  .loc-radios button{padding:0 10px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .loc-radios button{transition-duration:0s}
  .loc-radios button:active{transform:none}
}

/* ===== Try it free: dark grainy closing section (2026-11-14) =====
   Layout after the user's reference: big title and offer on the left (centred against the card,
   since there are no contact details to list), form card on the right with two fields side by side.
   Background: near-black with the same sheen colours as step-num-grain.svg plus a fine grain tile. */
.contact{--on-dark:#FFFDF4;--on-dark-2:rgba(255,253,244,.72);--on-dark-3:rgba(255,253,244,.52);
  color:var(--on-dark);background-color:#0E0E0D;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    linear-gradient(131deg,hsl(194,2%,19%) 0%,rgba(0,0,0,0) 55%),
    linear-gradient(-131deg,hsl(227,5%,11%) 0%,rgba(0,0,0,0) 60%);
  padding:112px 0}
.contact-inner{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(40px,6vw,96px);align-items:center}
.contact .eyebrow{color:var(--on-dark-3)}
.contact h2{color:var(--on-dark);font-size:clamp(40px,5vw,64px);line-height:1.05}
.contact-copy p{color:var(--on-dark-2);font-size:18px;margin-top:20px;max-width:46ch}
.terms{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--on-dark-2)}
.terms li{position:relative;padding-left:26px}
.terms li::before{content:"";position:absolute;left:3px;top:.42em;width:11px;height:6px;border-left:1.6px solid var(--on-dark);border-bottom:1.6px solid var(--on-dark);transform:rotate(-45deg)}
.contact-card{background:var(--bg);color:var(--ink);border-radius:var(--radius);padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.card-title{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:0 0 20px}
.contact-card form{gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-card label{font-size:14px;font-weight:600;gap:8px}
.contact-card input,.contact-card textarea{border:1px solid transparent;border-radius:var(--btn-radius);background:rgba(26,26,24,.055);padding:12px 14px;min-height:48px}
.contact-card input::placeholder,.contact-card textarea::placeholder{color:var(--ink-3);opacity:.75}
.contact-card input:focus,.contact-card textarea:focus{background:#fff;border-color:var(--ink);box-shadow:none;outline:0}
.contact-card .invalid{border-color:#C42F2F}
.contact-card .btn-primary{height:52px;margin-top:4px}
.card-alt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.card-alt a{color:var(--ink);font-weight:600;text-underline-offset:4px}
.card-alt .icon{background:rgba(26,26,24,.055);flex:none}
.footer{background:#0E0E0D;color:rgba(255,253,244,.52);border-top:1px solid rgba(255,253,244,.10)}
@media (max-width:1020px){.contact{padding:80px 0}.contact-inner{grid-template-columns:minmax(0,1fr);gap:40px}.contact-card{max-width:560px}}
@media (max-width:560px){.contact{padding:64px 0}.contact-card{padding:22px}.field-row{grid-template-columns:1fr}.card-title{font-size:23px}}
@media (forced-colors:active){.contact-card input,.contact-card textarea{border-color:CanvasText}}

/* Localization quote row as a call-to-action band (2026-11-14): butter fill like the featured
   pricing card, price in the serif used for prices, primary button. */
#localization .loc-quote{justify-content:space-between;gap:20px 32px;max-width:1000px;margin-top:40px;padding:28px 32px;background:#FBF4D3;border-radius:var(--radius);box-shadow:0 12px 28px rgba(26,26,24,.10)}
.loc-quote-label{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.loc-quote-price{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,38px);line-height:1.1;color:var(--ink);margin-top:6px}
.loc-quote-sub{font-size:15px;font-weight:400;color:var(--ink-2);margin-top:8px}
@media (max-width:560px){#localization .loc-quote{padding:22px}#localization .loc-quote .btn{width:100%}}

/* Localization title on one line (2026-11-14): the 680px heading cap made it wrap at full size. */
#localization .section-head{max-width:none}
@media (min-width:761px){#localization .section-head h2{white-space:nowrap}}

/* ===== Pricing: Localization option + level "Most complete" tag (2026-11-15) ===== */
/* Tag: sits level (0deg) on the top edge of the $500 card, half above and half below (26px tall -> top:-13px);
   `translate` centres it so the animated `transform` never fights it. Swing overshoots both ways and settles at 0deg. */
.tier-badge{top:-13px;line-height:18px;transform:none;transform-origin:50% 50%}
@keyframes badge-swing{
  0%{transform:translateY(0) rotate(0deg)}
  22%{transform:translateY(-3px) rotate(-9deg)}
  48%{transform:translateY(-1px) rotate(7deg)}
  72%{transform:translateY(0) rotate(-3deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
/* Room for the tag (it reaches ~21px above the row once the $500 card is lifted) */
#pricing .tiers{margin-top:40px}
/* Localization card: full width under the four tiers; not a .tier, so the hover hand-off ignores it */
.tier-loc{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) auto;align-items:center;gap:20px 40px;
  background:#fff;box-shadow:var(--hairline);border-radius:var(--radius);padding:26px 28px}
.tier-loc h3{margin:0}
.tier-loc .price{font-size:28px;margin:6px 0 0;white-space:nowrap}
.tier-loc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--ink-2)}
.tier-loc li{position:relative;padding-left:24px}
.tier-loc li::before{content:"";position:absolute;left:2px;top:.35em;width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tier-loc .btn{height:var(--size-md);padding:0 18px;font-size:15px;white-space:nowrap}
@media (max-width:760px){
  .tier-loc{grid-template-columns:minmax(0,1fr);padding:22px}
  .tier-loc .price{white-space:normal}
  .tier-loc .btn{width:100%}
}

/* Localization 2026-11-15: video and the two cases span the full content width; the on-video
   language chip only shows when German or Vietnamese is picked. */
#localization .loc-video{max-width:1000px;margin-inline:auto} /* 2026-11-16: back to 1000px, centred */
#localization .loc-cases{max-width:none}
.lang-chip[hidden]{display:none}

/* 2026-11-15: Examples and Localization share the cream background, so their paddings stacked
   into a 192px gap. Localization drops its top padding; Examples' bottom padding alone separates them. */
#localization{padding-top:0}

/* 2026-11-15: hero "Get a free walkthrough" button: bubble burst on hover (adapted from Uiverse.io by zjssun).
   Same button look; ink bubbles burst out above and below once per hover. Mouse only, off for reduced motion.
   .hero-ctas is isolated so the bubbles sit behind the button but in front of the page. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-ctas{isolation:isolate}
  .hero-ctas .btn-primary{position:relative}
  .hero-ctas .btn-primary::before,
  .hero-ctas .btn-primary::after{content:"";position:absolute;left:50%;width:150%;height:100%;translate:-50% 0;z-index:-1;background-repeat:no-repeat;pointer-events:none}
  .hero-ctas .btn-primary:hover::before{
    top:-70%;
    background-image:
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,transparent 20%,var(--ink) 20%,transparent 30%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,transparent 10%,var(--ink) 15%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%);
    background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;
    background-position:50% 120%;
    animation:ff-bubbles-top .6s ease forwards}
  .hero-ctas .btn-primary:hover::after{
    bottom:-70%;
    background-image:
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,transparent 10%,var(--ink) 15%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%),
      radial-gradient(circle,var(--ink) 20%,transparent 20%);
    background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,20% 20%,18% 18%;
    background-position:50% 0%;
    animation:ff-bubbles-bottom .6s ease forwards}
}
@keyframes ff-bubbles-top{
  0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}
  50%{background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
  100%{background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;
       background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}
}
@keyframes ff-bubbles-bottom{
  0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%}
  50%{background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%}
  100%{background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
       background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}
}

/* 2026-11-16: Localization pricing card lights up like the other tiers on hover/focus: butter fill,
   shadow, lift, and its "Ask for a quote" button turns ink; the $500 card goes plain meanwhile. */
@media (hover:hover) and (pointer:fine){
  .tier-loc{transition:transform 250ms var(--ease-standard),background-color 250ms var(--ease-standard),box-shadow 250ms var(--ease-standard)}
  .tier-loc .btn{transition:background-color 250ms var(--ease-standard),color 250ms var(--ease-standard)}
  .tiers .tier-loc:hover,
  .tiers:not(:has(.tier:hover)) .tier-loc:has(:focus-visible){background:#FBF4D3;box-shadow:0 12px 28px rgba(26,26,24,.12)}
  .tiers .tier-loc:hover .btn-secondary,
  .tiers:not(:has(.tier:hover)) .tier-loc:has(:focus-visible) .btn-secondary{background-color:var(--ink);color:var(--bg)}
  .tiers .tier-loc:hover .btn-secondary:hover{background-image:linear-gradient(var(--overlay-hover-inv),var(--overlay-hover-inv))}
  .tiers:has(.tier-loc:hover) .tier-top,
  .tiers:not(:has(.tier:hover)):has(.tier-loc :focus-visible) .tier-top{background:#fff;box-shadow:var(--hairline);transform:none;opacity:.82}
  .tiers:has(.tier-loc:hover) .tier-top .btn-primary,
  .tiers:not(:has(.tier:hover)):has(.tier-loc :focus-visible) .tier-top .btn-primary{background-color:var(--neutral);color:var(--ink);background-image:none}
  .tiers:has(.tier-loc:hover) .tier-top .save,
  .tiers:not(:has(.tier:hover)):has(.tier-loc :focus-visible) .tier-top .save{color:var(--green)}
}
@media (hover:hover) and (pointer:fine) and (min-width:901px) and (prefers-reduced-motion:no-preference){
  .tiers .tier-loc:hover,
  .tiers:not(:has(.tier:hover)) .tier-loc:has(:focus-visible){transform:translateY(-8px)}
}

/* 2026-11-16: keep a phrase on one line ("You own the files.") */
.nowrap{white-space:nowrap}

/* 2026-11-16: Pricing and FAQ share the cream background; drop FAQ's top padding so the gap isn't doubled. */
#faq{padding-top:0}

/* 2026-11-16: Try it free: the offer sits in the lede in bold italic with an asterisk;
   the terms moved to a small footnote under it (replaces the checklist). */
.contact-copy .free-hl{color:var(--on-dark);font-weight:600;white-space:nowrap}
.contact-copy .free-hl em{font-style:italic}
.contact-copy .ast{font-style:normal;margin-left:1px}
.contact-copy p.terms-note{margin-top:28px;font-size:14px;line-height:1.6;color:var(--on-dark-2);opacity:.85;max-width:62ch}
.contact-copy p.terms-note .ast{margin:0 2px 0 0}

/* 2026-11-16: buttons rise 3px on hover (adapted from Uiverse.io by McHaXYT): hero "See examples",
   pricing "Start with this", and the contact card's submit and email buttons.
   Uses `translate` so the press-down scale (`transform`) still works. Mouse only, off for reduced motion. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-ctas .btn-secondary,.tier .btn-secondary,.tier-top .btn-primary,.tier-loc .btn,.contact-card .btn-primary,.contact-card .icon{
    transition:background-color var(--duration-fast) var(--ease-standard),background-image var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),translate .25s ease-out}
  .hero-ctas .btn-secondary:hover,.tier .btn-secondary:hover,.tier-top .btn-primary:hover,.tier-loc .btn:hover,
  .contact-card .btn-primary:hover,.contact-card .icon:hover{translate:0 -3px}
}