:root{
/* softened palette */
--yellow:#FFE58A; --pink:#FFB9CF; --focus:#C2185B; --cyan:#AEE6FF; --lime:#CDEFA8;
--purple:#DBCFFF; --orange:#FFD3A3; --bronze:#F0C9A6; --silver:#EDF0F5; --diamond:#CDEFFF;
--ink:#3D3D4A; /* softer than black */
--ink-strong:#2E2E3A;
--line:#DCE8F5; /* notebook rule color */
--paper:#FFFFFF;
--bw:2px; /* thinner borders */
--shadow:4px 4px 0 rgba(61,61,74,.18);
--shadow-sm:3px 3px 0 rgba(61,61,74,.18);
--border:2px solid var(--ink);
--border-sm:1.5px solid var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Nunito',sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;
/* notebook ruled lines */
background-image:
linear-gradient(to bottom, transparent 33px, var(--line) 33px, var(--line) 34px, transparent 34px);
background-size:100% 34px;
position:relative;
}
/* red margin line like a real notebook */
body::before{
content:"";position:fixed;top:0;bottom:0;left:58px;width:1.5px;
background:rgba(255,138,168,.4);z-index:0;pointer-events:none;
}
.display{font-family:'Bangers',cursive;letter-spacing:.035em;font-weight:400;color:var(--ink-strong)}
.hand{font-family:'Kalam',cursive}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:900;text-decoration:none;color:var(--ink-strong);
border:var(--border);box-shadow:var(--shadow-sm);padding:10px 22px;border-radius:14px;
background:var(--pink);cursor:pointer;transition:transform .12s, box-shadow .12s;font-size:1rem;
font-family:'Nunito',sans-serif}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(61,61,74,.18)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(61,61,74,.18)}
.btn.yellow{background:var(--yellow)}.btn.cyan{background:var(--cyan)}
.btn.lime{background:var(--lime)}.btn.white{background:#fff}
.btn.big{font-size:1.2rem;padding:15px 34px;border-radius:16px;box-shadow:var(--shadow)}
.section{max-width:1150px;margin:0 auto;padding:85px 28px;position:relative;z-index:1}
.kicker{display:inline-block;background:var(--cyan);border:var(--border);box-shadow:var(--shadow-sm);
padding:6px 18px;border-radius:999px;font-weight:900;font-size:.83rem;
transform:rotate(-1.5deg);margin-bottom:18px;text-transform:uppercase;letter-spacing:.05em}
.section h2{font-family:'Bangers',cursive;font-weight:400;font-size:clamp(2.4rem,5.5vw,3.8rem);
line-height:1;margin-bottom:14px;color:var(--ink-strong)}
.section .lead{font-size:1.12rem;font-weight:700;max-width:600px;margin-bottom:46px}
/* NAV */
/* NAV/FOOTER CHROME. These rules are kept character-for-character in step with
the same block in /sf-pages.css. The header markup is now identical on every
page, so the styling behind it has to be too — the drift this replaces was
half markup and half a 1.87rem logo here against 1.7rem there. */
nav.topnav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
border-bottom:var(--border);display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:13px 28px}
.logo{font-family:'Bangers',cursive;font-size:1.7rem;text-decoration:none;color:var(--ink-strong);
background:var(--yellow);border:var(--border);box-shadow:var(--shadow-sm);
padding:2px 14px;transform:rotate(-2deg);display:inline-block;transition:transform .15s;white-space:nowrap}
.logo:hover{transform:rotate(1.5deg) scale(1.04)}
/* The ![]()
carries its intrinsic 268x297 as width/height attributes so the
browser reserves the right box before the PNG arrives; CSS then sizes it.
It used to be an inline style — 60px on the landing page, 32px on every
other one. */
.logo img{height:34px;width:auto;object-fit:contain;vertical-align:middle;margin-right:4px}
.nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem;
padding:8px 14px;border:2px solid transparent;border-radius:999px;transition:.15s}
.nav-links a:hover{border-color:var(--ink);background:var(--cyan)}
.nav-links a.here{border-color:var(--ink);background:var(--yellow)}
/* Hamburger. Hidden on desktop and whenever JS has not run — see the 920px
block: without JS the links wrap instead, so a dead button never shows. */
.nav-toggle{display:none;align-items:center;gap:8px;font-family:inherit;font-weight:900;
font-size:.9rem;color:var(--ink-strong);background:var(--yellow);border:var(--border);
box-shadow:var(--shadow-sm);border-radius:999px;padding:7px 14px;cursor:pointer}
.nav-toggle .bars{display:inline-block;width:16px;height:2px;background:var(--ink-strong);
position:relative;transition:.15s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;
width:16px;height:2px;background:var(--ink-strong);transition:.15s}
.nav-toggle .bars::before{top:-5px}.nav-toggle .bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{top:0;rotate:45deg}
.nav-toggle[aria-expanded="true"] .bars::after{top:0;rotate:-45deg}
/* HERO */
.hero{max-width:1180px;margin:0 auto;padding:68px 28px 85px;
display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;position:relative;z-index:1}
.hero h1{font-family:'Bangers',cursive;font-weight:400;font-size:clamp(3rem,6.5vw,5rem);
line-height:.97;color:var(--ink-strong)}
.hero h1 .hl{color:#C2185B;text-shadow:3px 3px 0 rgba(61,61,74,.2)}
.hero h1 .hl2{color:#1683B8;text-shadow:3px 3px 0 rgba(61,61,74,.2)}
.hero p.sub{font-size:1.13rem;font-weight:700;margin:20px 0 28px;max-width:460px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.sticker{position:absolute;font-weight:900;font-size:.83rem;border:var(--border);
box-shadow:var(--shadow-sm);padding:7px 14px;border-radius:999px;background:#fff;
animation:bob 3.5s ease-in-out infinite;z-index:5}
.sticker.s1{top:22px;right:5%;background:var(--lime);transform:rotate(4deg)}
.sticker.s2{bottom:32px;left:0;background:var(--purple);transform:rotate(-4deg);animation-delay:.9s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* browser mockup */
.browser{background:#fff;border:var(--border);box-shadow:6px 6px 0 rgba(61,61,74,.18);
border-radius:18px;overflow:hidden;transform:rotate(.8deg)}
.browser-bar{background:var(--cyan);border-bottom:var(--border);padding:9px 14px;
display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border:1.5px solid var(--ink);border-radius:50%}
.dot.r{background:var(--pink)}.dot.y{background:var(--yellow)}.dot.g{background:var(--lime)}
.urlbar{flex:1;background:#fff;border:var(--border-sm);border-radius:999px;
padding:4px 14px;font-weight:800;font-size:.76rem}
.browser-body{display:grid;grid-template-columns:1.35fr 1fr;min-height:320px}
.page-fake{padding:18px;border-right:var(--border);position:relative;background:#fff}
.fake-line{height:8px;background:#EDF1F7;border-radius:6px;margin-bottom:9px}
.w60{width:60%}.w80{width:80%}.w40{width:40%}
.fake-el{position:relative;border:1.5px dashed #F786AB;border-radius:9px;padding:8px 10px;
margin:11px 0;font-weight:800;font-size:.77rem;background:#FFF6F9;color:var(--ink)}
.fake-el.c{border-color:#5FC8F5;background:#F2FAFF}
.fake-el.l{border-color:#8CC46A;background:#F6FBEF}
.numbox{position:absolute;top:-11px;left:-9px;background:var(--yellow);border:1.5px solid var(--ink);
border-radius:8px;min-width:22px;height:22px;display:grid;place-items:center;
font-family:'Bangers',cursive;font-size:.9rem;box-shadow:2px 2px 0 rgba(61,61,74,.18);padding:0 4px}
.part-pill{position:absolute;bottom:12px;right:12px;background:var(--ink);color:var(--yellow);
border-radius:999px;padding:4px 13px;font-weight:900;font-size:.7rem}
.sidepanel-fake{padding:12px;background:#FBFCFE;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.sp-title{font-family:'Bangers',cursive;font-size:1rem;display:flex;justify-content:space-between;align-items:center;color:var(--ink-strong)}
.working{font-size:.62rem;font-weight:900;background:var(--lime);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px}
.tool-card{border:var(--border-sm);border-radius:12px;padding:7px 11px;font-size:.74rem;
font-weight:800;box-shadow:2px 2px 0 rgba(61,61,74,.14);background:#fff;display:flex;gap:8px;align-items:center}
.tool-card .ic{width:23px;height:23px;border:1.5px solid var(--ink);border-radius:8px;
display:grid;place-items:center;flex-shrink:0;font-size:.78rem}
.tool-card.obs .ic{background:var(--cyan)}
.tool-card.clk .ic{background:var(--yellow)}
.tool-card.typ .ic{background:var(--lime)}
.chat-msg{border:var(--border-sm);border-radius:12px;padding:7px 11px;font-size:.75rem;
font-weight:700;box-shadow:2px 2px 0 rgba(61,61,74,.14);line-height:1.35;background:#fff}
.chat-msg.me{background:var(--cyan);align-self:flex-end;max-width:88%;border-bottom-right-radius:3px}
.chat-msg.ai{border-bottom-left-radius:3px}
.sp-composer{margin-top:auto;display:flex;gap:7px}
.sp-composer input{flex:1;border:var(--border-sm);border-radius:999px;padding:7px 12px;
font-family:'Nunito',sans-serif;font-weight:700;font-size:.72rem;background:#fff;color:#A6A9B8}
.sp-composer .stop{border:var(--border-sm);background:var(--pink);border-radius:50%;
width:31px;height:31px;font-weight:900;font-size:.68rem;box-shadow:2px 2px 0 rgba(61,61,74,.14);cursor:pointer}
/* MARQUEE — softened to navy */
.marquee{background:#4A4A5E;color:var(--yellow);border-top:var(--border);border-bottom:var(--border);
overflow:hidden;white-space:nowrap;padding:11px 0;position:relative;z-index:1}
.marquee-track{display:inline-block;animation:scroll 28s linear infinite;
font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:.06em}
.marquee-track span{margin:0 18px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* HOW IT HELPS — 3 simple cards */
.help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.help{background:#fff;border:var(--border);box-shadow:var(--shadow);border-radius:20px;
padding:30px;transition:transform .15s}
.help:hover{transform:translate(-2px,-3px) rotate(-.4deg)}
.help .icon{width:56px;height:56px;border:var(--border);border-radius:16px;box-shadow:var(--shadow-sm);
display:grid;place-items:center;font-size:1.6rem;margin-bottom:16px}
.help:nth-child(1) .icon{background:var(--yellow)}
.help:nth-child(2) .icon{background:var(--pink)}
.help:nth-child(3) .icon{background:var(--cyan)}
.help h3{font-family:'Bangers',cursive;font-weight:400;font-size:1.6rem;margin-bottom:8px;color:var(--ink-strong)}
.help p{font-weight:600;font-size:.98rem}
/* STICKY NOTES — softened */
.notes-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:28px}
.note{background:var(--yellow);border:var(--border);box-shadow:var(--shadow);
padding:25px 21px 20px;min-height:165px;position:relative;font-family:'Kalam',cursive;
transform:rotate(-1.2deg);transition:transform .15s}
.note:nth-child(2){background:var(--pink);transform:rotate(1.2deg)}
.note:nth-child(3){background:var(--cyan);transform:rotate(-.8deg)}
.note:nth-child(4){background:var(--lime);transform:rotate(1.6deg)}
.note:nth-child(5){background:var(--purple);transform:rotate(-1.6deg)}
.note:nth-child(6){background:var(--orange);transform:rotate(.8deg)}
.note:hover{transform:rotate(0) scale(1.03);z-index:2}
.note::before{content:"";position:absolute;top:-13px;left:50%;translate:-50% 0;
width:76px;height:22px;background:rgba(255,255,255,.65);border:1.5px solid var(--ink);transform:rotate(-2deg)}
.note h3{font-weight:700;font-size:1.15rem;margin-bottom:7px;color:var(--ink-strong)}
.note p{font-weight:400;font-size:.96rem;line-height:1.42}
/* PROJECT MOCK — soft */
.project-mock{background:#fff;border:var(--border);box-shadow:var(--shadow);border-radius:20px;
overflow:hidden;max-width:800px;margin:0 auto;transform:rotate(-.4deg)}
.pm-head{background:var(--yellow);border-bottom:var(--border);padding:12px 18px;
display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:900;color:var(--ink-strong)}
.pm-head .em{font-size:1.35rem}
.pm-head .meta{font-size:.78rem;opacity:.7;font-weight:800}
.pm-head .spacer{flex:1}
.pm-head .btn{padding:6px 13px;font-size:.78rem;border-radius:10px}
.chat-tabs-strip{display:flex;background:#F6F8FB;border-bottom:var(--border);overflow-x:auto}
.ct{padding:8px 17px;font-weight:800;font-size:.8rem;border-right:var(--border-sm);
white-space:nowrap;display:flex;gap:8px;align-items:center}
.ct.on{background:#fff;font-weight:900}
.ct .x{opacity:.45;font-weight:900}
.ct.plus{background:var(--lime);cursor:pointer}
.pm-tabbar{display:flex;border-bottom:var(--border);background:#fff;overflow-x:auto}
.pm-tab{padding:10px 15px;font-weight:900;font-size:.8rem;border-right:var(--border-sm);
white-space:nowrap;cursor:pointer;background:#fff}
.pm-tab.on{background:var(--cyan)}
.pm-tab:hover{background:var(--yellow)}
.pm-body{padding:20px;background:#FBFCFE;min-height:130px;display:flex;gap:11px;flex-wrap:wrap;align-items:flex-start}
.todo-line{display:flex;gap:10px;align-items:center;font-weight:800;font-size:.88rem;
background:#fff;border:var(--border-sm);border-radius:12px;padding:9px 14px;
box-shadow:2px 2px 0 rgba(61,61,74,.12);width:100%}
.todo-line .box{width:21px;height:21px;border:1.5px solid var(--ink);border-radius:7px;
display:grid;place-items:center;flex-shrink:0;background:#fff;font-size:.75rem}
.todo-line.done .box{background:var(--lime)}
.todo-line.done span{text-decoration:line-through;opacity:.55}
/* SYNC */
.sync-row{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;max-width:880px;margin:0 auto}
.sync-card{background:#fff;border:var(--border);box-shadow:var(--shadow);border-radius:20px;
padding:28px;text-align:center}
.sync-card .big{font-size:2.4rem;display:block;margin-bottom:8px}
.sync-card h3{font-family:'Bangers',cursive;font-weight:400;font-size:1.5rem;margin-bottom:6px;color:var(--ink-strong)}
.sync-card p{font-weight:700;font-size:.92rem}
.sync-arrows{font-family:'Bangers',cursive;font-size:2.2rem;text-align:center;
background:var(--pink);border:var(--border);border-radius:50%;width:68px;height:68px;
display:grid;place-items:center;box-shadow:var(--shadow-sm);transform:rotate(-5deg);color:var(--ink-strong)}
/* PRICING
*
* WHAT WAS WRONG: four cards in an auto-fit grid with a 235px minimum, each
* holding up to eight bullets of full prose. At 1150px that is four ~250px
* columns of dense 700-weight text — every bullet wrapped to three or four
* lines, the cards ran to wildly different heights, and Gold's scale(1.04)
* tilt made a tall card overlap its neighbours. It read as broken because
* structurally it was.
*
* THE FIX IS ROOM, NOT SHORTER WORDS. The copy is translated into six
* languages (633 keys); rewriting it would mean re-translating all of it. So
* the grid gives each card a real column instead: two-up on a laptop, four-up
* only when there is genuinely space, and the bullets get typography that can
* survive being long — lighter weight, tighter leading, a hanging check mark.
*/
.pricing{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:22px;
align-items:stretch;
}
/* Four across only above 1500px — below that, two roomy columns beat four
cramped ones. The section is allowed to outgrow the page's 1150px measure,
because a price table is the one block that genuinely needs the width. */
@media (min-width:1500px){ .pricing{grid-template-columns:repeat(4,1fr)} }
#pricing .wrap, .section#pricing{max-width:1320px;margin-inline:auto}
.price-card{position:relative;border:var(--border);box-shadow:var(--shadow);
border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;gap:4px;background:#fff}
.price-card .medal{font-size:2.1rem;line-height:1}
.price-card h3{font-family:'Bangers',cursive;font-weight:400;font-size:1.8rem;color:var(--ink-strong)}
.price-card .price{font-family:'Bangers',cursive;font-size:2.9rem;line-height:1;color:var(--ink-strong)}
.price-card .price small{font-size:1.05rem}
.price-card .per{font-weight:800;opacity:.85;font-size:.86rem;margin-bottom:14px}
/* A hairline under the price separates "what it costs" from "what you get" —
without it the bullets read as a continuation of the price block. */
.price-card .per{padding-bottom:14px;border-bottom:2px dashed rgba(61,61,74,.18)}
/* align-content:start — a grid with flex:1 stretches its auto rows to fill the
leftover height, which is why Bronze's four bullets floated apart down the
card while Silver's eight sat tight. The bullets belong at the top; the slack
belongs above the button (margin-top:auto on .btn). */
.price-card ul{list-style:none;display:grid;gap:11px;margin:14px 0 20px;flex:1;padding:0;align-content:start}
/* 600 not 700, 1.45 leading: these are SENTENCES, several lines long. Bold
prose at tight leading is what made the column look like a wall. */
/* THE BULLET IS A PLAIN BLOCK, NOT A FLEX/GRID CONTAINER — and this is the
bug that made the whole table look broken.
A flex or grid turns EVERY CHILD into its own item, so a bullet like
"Smarter priority queue — Gold is where it starts…" was
split at the : the tag became one item and each following text run
another, and the column rendered one word per line. The old rule had
`display:flex` for the same reason, which is why Gold and Diamond looked
shredded while the short bullets looked fine.
A relative block with an absolutely-positioned marker keeps the content
INLINE, so , and plain text flow as one sentence. */
.price-card li{
font-weight:600;font-size:.875rem;line-height:1.45;
position:relative;padding-left:24px;
}
/* A hanging check, aligned to the first line rather than floating mid-bullet.
⭐ on every line was visual noise at this density. */
.price-card li::before{
content:"✓";position:absolute;left:0;top:0;
font-weight:900;color:var(--ink-strong);opacity:.55;line-height:1.45;
}
/* The lead phrase of a bullet is often wrapped in / — let it act as
a mini-heading so a long bullet can be skimmed instead of read. */
.price-card li strong,.price-card li b{font-weight:900;color:var(--ink-strong)}
.price-card .btn{justify-content:center;margin-top:auto}
.price-card.bronze{background:var(--bronze)}
.price-card.silver{background:var(--silver)}
/* NO SCALE/ROTATE ON GOLD. It lifted a card that is already the tallest and
pushed it over its neighbours' borders. A ring and a shadow say "this one"
without moving it out of the grid. */
.price-card.gold{background:var(--yellow);box-shadow:0 0 0 3px var(--ink-strong),var(--shadow);z-index:2}
.price-card.diamond{background:var(--diamond)}
.price-card .tag{position:absolute;top:-14px;right:16px;background:var(--pink);border:var(--border);
box-shadow:var(--shadow-sm);border-radius:999px;padding:4px 14px;font-weight:900;
font-size:.76rem;transform:rotate(3deg);white-space:nowrap}
.price-card .tag.d{background:var(--purple)}
/* ANCHOR JUMPS MUST CLEAR THE STICKY NAV. Without this, /#pricing scrolls the
heading exactly under the bar and the first thing you see is the middle of
the section. */
:target,[id]{scroll-margin-top:96px}
/* FAQ / CTA / FOOTER */
.faq{display:grid;gap:15px;max-width:740px}
.faq details{background:#fff;border:var(--border);box-shadow:var(--shadow-sm);border-radius:16px;padding:17px 21px}
.faq details[open]{background:var(--cyan)}
.faq summary{cursor:pointer;font-weight:900;font-size:1.02rem;list-style:none;
display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"＋";font-family:'Bangers',cursive;font-size:1.4rem}
.faq details[open] summary::after{content:"－"}
.faq details p{margin-top:11px;font-weight:600}
.cta-banner{max-width:1050px;margin:0 auto 85px;padding:56px 40px;text-align:center;
background:var(--purple);border:var(--border);box-shadow:6px 6px 0 rgba(61,61,74,.18);
border-radius:28px;transform:rotate(-.4deg);position:relative;z-index:1}
.cta-banner h2{font-family:'Bangers',cursive;font-weight:400;font-size:clamp(2.2rem,4.5vw,3.4rem);
margin-bottom:12px;color:var(--ink-strong)}
.cta-banner p{font-weight:800;font-size:1.08rem;margin-bottom:26px}
footer{background:#4A4A5E;color:#F4F5FA;padding:46px 28px 34px;text-align:center;position:relative;z-index:1}
footer .flinks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:18px 0}
footer .flinks a{color:#F4F5FA;font-weight:800;text-decoration:none}
footer .flinks a:hover{color:var(--yellow)}
footer small{opacity:.75;font-weight:700}
/* ── LANGUAGE PICKER ────────────────────────────────────────────────────────
One component, two homes: the header and the footer. Anchored to its own
.lang-pick rather than to the nav, so the footer copy inherits nothing it
should not. */
/* Read by a screen reader, invisible on screen. Carries the "Language:" prefix
so the button's accessible name is "Language: English" and still comes from
real text. This rule was in /sf-pages.css but NOT here, and this page does not
load that sheet — so the landing page, and only the landing page, drew a
literal "Language: Français" in its header. Kept character-for-character in
step with the copy in /sf-pages.css. */
.sf-vh{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
.lang-pick{position:relative;display:inline-flex;align-items:center}
.lang-btn{
display:inline-flex;align-items:center;gap:6px;
font:inherit;font-size:.85rem;font-weight:700;
padding:7px 11px;border:2px solid currentColor;border-radius:999px;
background:transparent;color:inherit;cursor:pointer;line-height:1;
}
.lang-btn:hover{background:rgba(0,0,0,.06)}
.lang-btn:focus-visible{outline:3px solid #00B8D4;outline-offset:2px}
.lang-menu{
position:absolute;top:calc(100% + 6px);right:0;z-index:60;margin:0;padding:6px;
list-style:none;min-width:170px;
background:#fff;color:#222;border:2px solid #222;border-radius:12px;
box-shadow:4px 4px 0 rgba(0,0,0,.18);
}
/* The FOOTER menu opens UPWARD — dropping it below the last element on the page
puts it past the bottom of the document, where it either clips or extends the
scroll height for no reason. */
.foot-lang .lang-menu{top:auto;bottom:calc(100% + 6px)}
.lang-menu li{margin:0}
.lang-menu a{
display:block;padding:8px 12px;border-radius:8px;
text-decoration:none;color:inherit;font-size:.9rem;white-space:nowrap;
}
.lang-menu a:hover,.lang-menu a:focus-visible{background:#FFE58A}
.lang-menu a.on{font-weight:800}
.lang-menu a.on::after{content:" ✓"}
@media (max-width:520px){
/* On a phone the header menu would otherwise run off the right edge, because
the picker sits at the end of a wrapped nav row. */
.lang-menu{right:auto;left:0}
.foot-lang{margin-top:10px}
/* Same two shrinks as /sf-pages.css. They were only in the sub-page sheet, so
below 520px the logo was 1.35rem on every page except this one. */
.nav-links a:not(.btn){padding:5px 8px;font-size:.8rem}
.logo{font-size:1.35rem}
}
@media (max-width:920px){
body::before{display:none}
.hero{grid-template-columns:1fr}
.sync-row{grid-template-columns:1fr}
.sync-arrows{transform:rotate(85deg);margin:0 auto}
.price-card.gold{transform:none}
/* Baseline (no JS): the links WRAP onto their own full-width row. They used
to be display:none here, which silently removed every text link — "What's
new" included — from the nav on every phone. Wrapping is never invisible. */
/* Wrapped, the bar is ~3 rows tall; pinning that to the top of a phone
screen would cost more than it gives, so the baseline scrolls away. The
enhanced path below is one row tall and stays sticky. */
nav.topnav{position:static;flex-wrap:wrap;row-gap:10px;padding:13px 18px}
body[data-nav="js"] nav.topnav{position:sticky}
.nav-links{flex-wrap:wrap;justify-content:flex-start;width:100%;order:3;gap:6px 4px}
.nav-links a{padding:7px 11px;font-size:.85rem}
.nav-links a.btn{margin-right:0!important}
/* Enhanced (JS ran): collapse the same links into a real toggle menu, so the
sticky bar stays one row tall. Keyed off body[data-nav="js"] so the
baseline above is what ships if the script never executes. */
body[data-nav="js"] .nav-toggle{display:inline-flex}
body[data-nav="js"] .nav-links{display:none;flex-direction:column;align-items:stretch;
padding-top:4px;border-top:2px dashed rgba(61,61,74,.25);margin-top:2px}
body[data-nav="js"] .nav-links.open{display:flex}
body[data-nav="js"] .nav-links a{text-align:center;font-size:.95rem;padding:10px 12px}
}
@media (max-width:640px){
.browser-body{grid-template-columns:1fr}
.sidepanel-fake{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px dashed var(--focus);outline-offset:3px}
/* ── CJK DISPLAY TEXT ────────────────────────────────────────────────────────
*
* Bangers carries NO Chinese or Japanese glyphs. Every display heading asked
* for it anyway, so on zh-CN and ja the browser silently fell through to a
* default system face — thin, light-weight, and still wearing the
* letter-spacing that only makes sense for Latin capitals. The result was a
* hero headline that looked weaker than the body text beneath it, in exactly
* the two languages where the brand voice had to carry itself without the
* comic lettering.
*
* So CJK gets its own display stack: the heaviest system face each platform
* actually ships, at a real bold weight, with the Latin tracking removed.
* Scoped by :lang(), which already carries and lang.js already
* stamps on every switch — so this follows the picker with no extra wiring.
*/
:lang(ja) .display, :lang(ja) .hero h1, :lang(ja) .section h2,
:lang(ja) .card h2, :lang(ja) .card h3, :lang(ja) .postcard h2, :lang(ja) .post h2,
:lang(zh-CN) .display, :lang(zh-CN) .hero h1, :lang(zh-CN) .section h2,
:lang(zh-CN) .card h2, :lang(zh-CN) .card h3, :lang(zh-CN) .postcard h2, :lang(zh-CN) .post h2 {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
"Noto Sans JP", "Noto Sans SC", "Source Han Sans SC",
"Microsoft YaHei", "PingFang SC", sans-serif;
font-weight: 800;
/* Latin tracking on CJK reads as broken spacing, not as style. */
letter-spacing: 0;
/* NO font-size HERE. The headings size themselves with clamp(); an `em` on
top of that multiplies against the clamped value and collapsed the hero to
body size. A CJK face does read heavier than Bangers at the same size, but
that is paid for with line-height, not by shrinking the headline. */
line-height: 1.4;
}
/* The kicker/eyebrow uppercases and tracks out — both are Latin-only ideas. */
:lang(ja) .kicker, :lang(zh-CN) .kicker {
text-transform: none; letter-spacing: 0;
}
/* ── NAV DROPDOWN ─────────────────────────────────────────────────────────
Opens on click, not hover: a hover menu is unusable on touch and fires by
accident on the way to the button beside it. */
.navdrop{position:relative;display:inline-block}
.navdrop-btn{
font:inherit;font-weight:800;font-size:.92rem;color:var(--ink);
background:none;border:2px solid transparent;border-radius:999px;
padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.navdrop-btn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6}
.navdrop-btn:hover{border-color:var(--ink);background:var(--cyan)}
.navdrop-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--cyan)}
.navdrop-menu{
position:absolute;top:calc(100% + 8px);left:0;z-index:60;
list-style:none;margin:0;padding:6px;min-width:196px;
background:#fff;border:var(--border);box-shadow:var(--shadow);border-radius:14px;
}
.navdrop-menu[hidden]{display:none}
.navdrop-menu li{margin:0}
.navdrop-menu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
color:var(--ink);font-weight:800;font-size:.9rem}
.navdrop-menu a:hover,.navdrop-menu a:focus-visible{background:var(--yellow)}
/* The extension CTA reads as its own thing, not a second copy of the app one. */
.btn.ext{background:var(--lime)}
.btn.big.lime{background:var(--lime)}
/* Footer: the CTA pair and the support address. */
.foot-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.foot-mail{margin:8px 0 0}
.foot-mail a{color:#F4F5FA;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(244,245,250,.4)}
.foot-mail a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
/* Below the nav's collapse point the dropdown is a plain block — a floating
menu inside an already-open hamburger panel is a menu inside a menu. */
@media (max-width:920px){
.navdrop{display:block;width:100%}
.navdrop-btn{width:100%;justify-content:space-between;text-align:left}
.navdrop-menu{position:static;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0;background:transparent}
}
/* [hidden] IS NOT ENOUGH ON ITS OWN. The UA stylesheet gives it display:none,
but ANY author rule that sets `display` wins — and .btn sets inline-flex, so
a hidden button stayed on screen. This is the fix for the extension CTA
showing before its store link exists. */
[hidden]{display:none!important}