/* Good Friction: hero options. Shared base. Colours, fonts and sizes come from brand/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
:root { --pad: clamp(20px, 4vw, 56px); --ease: cubic-bezier(.2, .7, .2, 1); --rv: 64px; } /* --rv: room for the review switcher */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gf-paper); color: var(--gf-ink); font: 400 17px/1.6 var(--gf-font-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gf-heat); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 var(--pad); color: var(--gf-ink); }
.hdr .logo img { height: 18px; width: auto; }
.hdr .lg-paper { display: none; }
.hdr nav { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.hdr nav a { text-decoration: none; transition: opacity .15s; }
.hdr nav a:hover { opacity: .65; }
.hdr nav .cta { padding: 11px 18px; border-radius: 999px; background: var(--gf-ink); color: var(--gf-paper); }
.hdr nav .cta:hover { opacity: 1; background: var(--gf-soot); }
.hdr.dark { color: var(--gf-paper); }
.hdr.dark .lg-ink { display: none; }
.hdr.dark .lg-paper { display: block; }
.hdr.dark nav .cta { background: var(--gf-paper); color: var(--gf-ink); }
.hdr.dark nav .cta:hover { background: var(--gf-bone); }
.menu { display: none; background: none; border: 0; padding: 12px 0; font: inherit; font-size: 15px; color: inherit; cursor: pointer; }
@media (max-width: 820px) { .hdr nav { display: none; } .menu { display: block; } .hdr { height: 64px; } }

/* type */
.display { font-family: var(--gf-font-display); font-weight: 400; letter-spacing: -.015em; line-height: .96; font-synthesis: none; text-wrap: balance; }
.label { font: 500 12px/1.4 var(--gf-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gf-ink); color: var(--gf-paper); text-decoration: none; font-weight: 500; font-size: 16px; transition: background .15s, transform .1s; }
.btn:hover { background: var(--gf-soot); }
.btn:active { transform: translateY(1px); }
.link { font-size: 16px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.acts { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* what comes after the hero, so the scroll can be judged */
.next { position: relative; z-index: 1; min-height: 70vh; padding: 16vh var(--pad); background: var(--gf-paper); border-top: 1px solid var(--gf-sand); color: var(--gf-graphite); }
.next p { max-width: 40ch; }

/* option switcher, for review only */
.optbar { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--gf-ink); border: 1px solid #3A3A37; font: 500 12px/1 var(--gf-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.optbar a { color: var(--gf-stone); text-decoration: none; padding: 11px 12px; border-radius: 999px; }
.optbar a:hover { color: var(--gf-paper); }
/* optbar on narrow screens: when there are many options it scrolls sideways instead of running off the edge */
@media (max-width: 600px) { .optbar { left: 16px; overflow-x: auto; scrollbar-width: none; } .optbar::-webkit-scrollbar { display: none; } .optbar a { flex: none; } }
.optbar a[aria-current="page"] { background: var(--gf-paper); color: var(--gf-ink); }