/* ============================================================================= Slide Practice - design system (slide.css) Hand-authored token + component layer. No framework, no UI kit. Brand DNA: forest ink #0E2419, paper #F7F1E6, amber #E1991C. Type: Fraunces (display, headings only) + Hanken Grotesk (body + UI). Scale: modular 1.25 (--step-*). Spacing: 8pt (--s-*). Radii max 12px. One elevation per element (a defined edge OR a soft shadow, never both). Light cream surface by default; forest sections punctuate the rhythm. ============================================================================= */ /* ---- fonts (self-hosted, font-display swap, metric-matched fallbacks) ------- */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:380 720;font-display:swap; src:url(/fonts/fraunces.latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fraunces-fb';src:local('Georgia');size-adjust:99%;ascent-override:96%;descent-override:24%;line-gap-override:0%} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap; src:url(/fonts/hankengrotesk.latin.woff2) format('woff2')} @font-face{font-family:'Hanken-fb';src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');size-adjust:100%;ascent-override:94%;descent-override:24%;line-gap-override:0%} @font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/caveat.latin.woff2) format('woff2')} /* ---- tokens (canonical values live in ./tokens.css — kept byte-synced here, inlined for perf so there is no render-blocking @import) --------------------- */ :root{ /* forest / ink */ --ink:#0E2419; /* primary ink, deep forest */ --forest:#143527; /* section green */ --forest-2:#1C4332; /* raised green */ --forest-deep:#0A1C14; /* footer / deepest */ --forest-grad:radial-gradient(125% 90% at 50% -10%,#1C4332 0%,#143527 42%,#0E2419 100%); /* paper */ --paper:#F7F1E6; /* default page surface */ --paper-2:#FCF8EF; /* raised paper, cards */ --paper-3:#EFE5D1; /* sunken / band */ --white:#fff; /* amber - the single action colour */ --amber:#E1991C; --amber-press:#C0820F; --amber-soft:#F6E6C8; --amber-on-dark:#F0B557; /* legible amber on forest */ --honey:#8A4710; /* amber-family text on paper (AA on cream) */ /* text on paper */ --text:#2B2A21; --text-strong:#15140E; --text-muted:#5E5848; --text-faint:#635C4B; /* tertiary text; darkened for WCAG AA on cream (was #857C68, 3.3:1) */ /* text on forest */ --on-dark:#F4EEE0; --on-dark-mut:#CBD7CC; --on-dark-faint:#9DB3A3; /* lines */ --line:#E2D7BF; --line-2:#D4C6A6; --line-dark:rgba(244,238,224,.15); --line-dark-2:rgba(244,238,224,.28); /* modular type scale, ratio ~1.25, fluid 360 -> 1240 */ --step--2:clamp(0.72rem,0.70rem + 0.10vw,0.78rem); --step--1:clamp(0.84rem,0.80rem + 0.16vw,0.93rem); --step-0: clamp(1.00rem,0.96rem + 0.20vw,1.10rem); --step-1: clamp(1.20rem,1.11rem + 0.42vw,1.46rem); --step-2: clamp(1.44rem,1.28rem + 0.74vw,1.94rem); --step-3: clamp(1.73rem,1.46rem + 1.20vw,2.58rem); --step-4: clamp(2.07rem,1.66rem + 1.85vw,3.43rem); --step-5: clamp(2.49rem,1.88rem + 2.75vw,4.56rem); --step-6: clamp(2.99rem,2.05rem + 4.20vw,6.05rem); /* 8pt spacing */ --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px; /* radii (max 12) */ --r-sm:8px; --r:10px; --r-md:10px; --r-lg:12px; --r-pill:999px; /* one-elevation shadows */ --shadow:0 18px 44px -28px rgba(20,40,28,.32); --shadow-lg:0 40px 90px -46px rgba(12,28,18,.42); --shadow-dark:0 30px 70px -40px rgba(0,0,0,.7); /* fonts */ --font-display:'Fraunces','Fraunces-fb',Georgia,'Times New Roman',serif; --font-sans:'Hanken Grotesk','Hanken-fb',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --maxw:1200px; --narrow:760px; --ease:cubic-bezier(.22,.61,.36,1); --section-y:clamp(56px,8vw,120px); --nav-h:66px; /* legacy aliases: unify older hand-built pages onto the new font system (this :root loads last, so it overrides the per-page tokens) */ --sans:var(--font-sans); --serif:var(--font-display); --display:var(--font-display); } /* ---- reset / base ----------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth; background:var(--paper);color:var(--text)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* base bg + colour live on (not body) so older hand-built pages, whose own body{background;color} sit on a green canvas, keep their light-on-green treatment, while new pages inherit the cream surface + dark ink. */ body{margin:0; font-family:var(--font-sans);font-size:var(--step-0);font-weight:400;line-height:1.62; letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img,svg,video{display:block;max-width:100%} img{height:auto} h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);color:var(--text-strong); font-weight:560;line-height:1.06;letter-spacing:-.018em;text-wrap:balance} h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2);letter-spacing:-.014em;line-height:1.14} h4{font-size:var(--step-1);letter-spacing:-.01em;line-height:1.2} p{margin:0 0 var(--s-2)} a{color:var(--honey);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} strong,b{font-weight:650;color:var(--text-strong)} ul,ol{margin:0 0 var(--s-2);padding-left:1.2em} li{margin:0 0 .35em} small{font-size:var(--step--1)} hr{border:0;height:1px;background:var(--line);margin:var(--s-5) 0} ::selection{background:rgba(225,153,28,.28);color:var(--text-strong)} /* visible focus for keyboard users, AA contrast, >=2px */ :focus-visible{outline:2.5px solid var(--honey);outline-offset:2px;border-radius:3px} .on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--amber-on-dark)} /* skip link */ .skip{position:absolute;left:-9999px;top:0;z-index:200} .skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);text-decoration:none} /* ---- layout ----------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)} .wrap-narrow{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)} .section{padding-block:var(--section-y);position:relative} .section-sm{padding-block:clamp(40px,5vw,72px)} section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)} /* surfaces - vary section backgrounds, never two greens in a row by hand */ .s-paper{background:var(--paper);color:var(--text)} .s-paper-2{background:var(--paper-2);color:var(--text)} .s-band{background:var(--paper-3);color:var(--text)} .s-forest{background:var(--forest);color:var(--on-dark)} .s-forest-grad{background:var(--ink);background-image:var(--forest-grad);color:var(--on-dark)} /* on a forest surface, retype headings + helpers */ .on-dark,.s-forest,.s-forest-grad,.site-footer{color:var(--on-dark)} .s-forest h1,.s-forest h2,.s-forest h3,.s-forest h4,.s-forest h5, .s-forest-grad h1,.s-forest-grad h2,.s-forest-grad h3,.s-forest-grad h4,.s-forest-grad h5, .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5{color:var(--on-dark)} .s-forest p,.s-forest-grad p,.on-dark p{color:var(--on-dark-mut)} .s-forest a,.s-forest-grad a,.on-dark a{color:var(--amber-on-dark)} .s-forest strong,.s-forest-grad strong,.on-dark strong{color:#fff} .s-forest .lede,.s-forest-grad .lede,.on-dark .lede{color:var(--on-dark-mut)} .s-forest hr,.s-forest-grad hr,.on-dark hr{background:var(--line-dark)} /* ---- type helpers ----------------------------------------------------------- */ .lede{font-family:var(--font-sans);font-size:var(--step-1);line-height:1.5;color:var(--text-muted);font-weight:380;letter-spacing:-.008em;max-width:60ch} .eyebrow{display:block;font-family:var(--font-sans);font-size:var(--step--2);font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--honey);margin:0 0 var(--s-2)} .on-dark .eyebrow,.s-forest .eyebrow,.s-forest-grad .eyebrow{color:var(--amber-on-dark)} .muted{color:var(--text-muted)} .measure{max-width:62ch} .measure-sm{max-width:46ch} .balance{text-wrap:balance} .center{text-align:center} .center .lede{margin-inline:auto} /* amber highlighter sweep - the brand emphasis device (no italics, ever) */ .mark{font-style:normal;font-weight:650;color:inherit; background-image:linear-gradient(transparent 58%,rgba(225,153,28,.34) 58%); background-repeat:no-repeat;background-size:100% 100%; padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .on-dark .mark,.s-forest .mark,.s-forest-grad .mark{color:#fff;background-image:linear-gradient(transparent 60%,rgba(240,181,87,.30) 60%)} /* animated sweep when revealed (enh only, reduced-motion safe) */ .mark.sweep{background-size:0% 100%;transition:background-size .6s var(--ease) .15s} .reveal.in .mark.sweep,.in .mark.sweep{background-size:100% 100%} /* ---- buttons ---------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-sans);font-size:var(--step-0);font-weight:600;letter-spacing:-.01em; min-height:48px;padding:0 22px;border-radius:var(--r);border:1.5px solid transparent; cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap; transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)} .btn:hover{text-decoration:none} /* Primary CTA is forest green on light surfaces: crisp, high-contrast, and matched to the app's sign-in button so site and app read as one product. */ .btn-primary{background:var(--forest);color:#F7F1E6;border-color:var(--forest); box-shadow:0 12px 28px -16px rgba(14,36,25,.55)} .btn-primary:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(14,36,25,.6)} .btn-primary:active{transform:translateY(0)} /* On forest/dark sections green would vanish, so the primary CTA flips to amber to pop off the green. */ .on-dark .btn-primary,.s-forest .btn-primary,.s-forest-grad .btn-primary{background:var(--amber);color:#27190A;border-color:var(--amber);box-shadow:0 12px 28px -14px rgba(225,153,28,.5)} .on-dark .btn-primary:hover,.s-forest .btn-primary:hover,.s-forest-grad .btn-primary:hover{background:var(--amber-press);border-color:var(--amber-press)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .on-dark .btn-ghost,.s-forest .btn-ghost,.s-forest-grad .btn-ghost{color:var(--on-dark);border-color:var(--line-dark-2)} .on-dark .btn-ghost:hover,.s-forest .btn-ghost:hover,.s-forest-grad .btn-ghost:hover{border-color:var(--on-dark)} .btn-sm{min-height:40px;padding:0 16px;font-size:var(--step--1)} .btn-lg{min-height:54px;padding:0 28px;font-size:var(--step-1)} .btn-block{width:100%} @media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}} /* ---- header / nav ----------------------------------------------------------- */ /* RUN-26. The header is sticky, so a backdrop-filter on it forces the browser to re-sample and re-blur a full-width strip on EVERY scroll frame. That is the most expensive thing you can put in a mobile scroll path, and it was running on all 107 pages on every device. The app repo already calls a sticky backdrop-filter "the single worst mobile-scroll cost" (PLAN/app/globals.css); the marketing site never got the fix. Gated on a media query rather than the html.enh class on purpose: only index.html ships the pre-paint capability detect, so 105 of the 106 pages are permanently .lite and an .enh gate would have silently stripped the blur from the whole site. The default is the cheap opaque header; a pointer-precise viewport at >=768px that has not asked for reduced motion opts back into the blur. */ .site-header{position:sticky;top:0;z-index:100;background:var(--paper); border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s} @media (min-width:768px) and (prefers-reduced-motion:no-preference){ .site-header{background:rgba(247,241,230,.86); -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)} } .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(20,40,28,.04),0 10px 30px -24px rgba(20,40,28,.4)} .navrow{display:flex;align-items:center;gap:var(--s-3);height:var(--nav-h); max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)} .brand{display:inline-flex;align-items:center;text-decoration:none;flex:none} .brand .wm{font-family:var(--font-display);font-weight:600;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink)} .brand .wm .dot{color:var(--amber)} .navlinks{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);margin-left:auto} .navlinks a.nl{color:var(--text-strong);text-decoration:none;font-size:var(--step--1);font-weight:550; letter-spacing:-.006em;position:relative;padding:6px 0;white-space:nowrap} .navlinks a.nl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)} .navlinks a.nl:hover::after,.navlinks a.nl[aria-current=page]::after{transform:scaleX(1)} .navlinks a.nl[aria-current=page]{color:var(--ink)} .navtoggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer; flex-direction:column;justify-content:center;align-items:center;gap:5px} .navtoggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s} .navtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle[aria-expanded=true] span:nth-child(2){opacity:0} .navtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* one-line promise summary lives inside the mobile sheet only (JS-injected) */ .nav-promise{display:none} /* scroll-lock while the mobile menu is open (set by slide.js) */ html.sp-navlock,html.sp-navlock body{overflow:hidden!important;touch-action:none} @media(max-width:860px){ .navtoggle{display:flex} /* The menu is anchored to the header (its containing block via backdrop-filter), so it always drops just below the nav row and the close X stays visible. A full-screen scrim (injected by slide.js) sits behind it to hide the page, so the sheet reads full-screen without any bleed-through. */ .navlinks{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--paper-2);border-bottom:1px solid var(--line); padding:8px clamp(20px,5vw,44px) calc(24px + env(safe-area-inset-bottom,0px)); transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .25s; box-shadow:var(--shadow);max-height:calc(100dvh - var(--nav-h));overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:101} .navlinks.open{transform:none;opacity:1;pointer-events:auto} /* full-screen scrim behind the sheet, driven by the same lock class both nav scripts (shared slide.js and the inline nav on generated pages) set on . Anchored on html::before (not body::before) so it never collides with the background-gradient body::before some generated pages already use. */ html.sp-navlock::before{content:"";position:fixed;inset:0;z-index:95;background:var(--paper-2)} .navlinks a.nl{padding:15px 2px;border-bottom:1px solid var(--line);min-height:52px;display:flex;align-items:center} .navlinks a.nl::after{display:none} .navlinks .btn{margin-top:16px;width:100%;min-height:50px} .nav-promise{display:block;margin:18px 2px 0;padding-top:14px;border-top:1px solid var(--line); font-size:.78rem;line-height:1.6;color:var(--text-faint,#8a8574)} } /* ---- announcement bar ------------------------------------------------------- */ .annbar{background:var(--ink);color:var(--on-dark);text-align:center;font-size:var(--step--1); line-height:1.4;padding:9px 16px} .annbar a{color:var(--on-dark);text-decoration:none;display:inline-flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap} .annbar a:hover{text-decoration:underline;text-decoration-color:var(--amber-on-dark)} .annbar b{color:#fff;font-weight:650} .annbar .dot{width:7px;height:7px;border-radius:50%;background:var(--amber-on-dark);flex:none} /* ---- cards ------------------------------------------------------------------ */ .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px)} .card h3{font-size:var(--step-1);margin:0 0 8px} .card p:last-child{margin-bottom:0} .card-dark{background:rgba(247,238,224,.035);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px)} .card-dark h3{color:var(--on-dark)}.card-dark p{color:var(--on-dark-mut)} /* hover lift (one elevation: card keeps its border, gains a shadow on hover only) */ .lift{transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .lift:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .card-dark.lift:hover{box-shadow:var(--shadow-dark)} @media (prefers-reduced-motion:reduce){.lift,.lift:hover{transform:none}} /* feature item with custom-stroke icon (brand weight, not a default icon set) */ .feat{display:flex;gap:14px;align-items:flex-start} .feat .ic{flex:none;width:26px;height:26px;color:var(--honey);stroke-width:1.7} .on-dark .feat .ic,.s-forest .feat .ic{color:var(--amber-on-dark)} .feat h4{margin:0 0 4px} .feat p{margin:0;font-size:var(--step--1);color:var(--text-muted)} .on-dark .feat p,.s-forest .feat p{color:var(--on-dark-mut)} /* grids */ .grid{display:grid;gap:clamp(18px,2.4vw,28px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}} /* asymmetric editorial split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center} .split.wide-left{grid-template-columns:1.25fr .75fr} .split.wide-right{grid-template-columns:.8fr 1.2fr} @media(max-width:880px){.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:var(--s-4)}} /* ---- the signature recap-paper motif ---------------------------------------- */ .paper-doc{position:relative;background:linear-gradient(178deg,#FFFDF8,#F8F1E2); border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text); box-shadow:var(--shadow-lg);overflow:hidden} .paper-doc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:repeating-linear-gradient(transparent 0 27px,rgba(20,40,28,.05) 27px 28px)} .paper-doc>*{position:relative} .paper-edge{position:relative} /* deckle / torn bottom edge as the recurring craft device */ .paper-edge::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:10px; background:var(--paper-2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0 4 Q5 0 10 4 T20 4 T30 4 T40 4 T50 4 T60 4 T70 4 T80 4 L80 10 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/80px 10px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0 4 Q5 0 10 4 T20 4 T30 4 T40 4 T50 4 T60 4 T70 4 T80 4 L80 10 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/80px 10px} .mnote{font-family:'Caveat','Fraunces',Georgia,serif;font-size:1.05rem;color:var(--honey); transform:rotate(-2deg);display:inline-block} /* tiny factual chip (no fake proof; real features / labelled-sample numbers only) */ .chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--step--2);font-weight:650; padding:6px 12px;border-radius:var(--r-pill);background:var(--amber-soft);color:var(--honey)} .chip .cd{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none} .on-dark .chip,.s-forest .chip{background:rgba(240,181,87,.16);color:var(--amber-on-dark)} /* pill tag */ .tag{display:inline-flex;align-items:center;gap:7px;font-size:var(--step--2);font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill); background:var(--amber);color:#27190A} /* trust strip - cream-safe by default; dark variant on forest sections */ .trust-strip{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:var(--step--1);color:var(--text-muted)} .trust-strip .ti{display:inline-flex;align-items:center;gap:8px} .trust-strip .ti svg{width:16px;height:16px;color:var(--honey);flex:none} .trust-strip a.ti{text-decoration:none;border-radius:4px;transition:color .18s var(--ease)} .trust-strip a.ti:hover{color:var(--text-strong)} .s-forest .trust-strip,.s-forest-grad .trust-strip,.on-dark .trust-strip{color:var(--on-dark-mut)} .s-forest .trust-strip .ti svg,.s-forest-grad .trust-strip .ti svg,.on-dark .trust-strip .ti svg{color:var(--amber-on-dark)} .s-forest .trust-strip a.ti:hover,.s-forest-grad .trust-strip a.ti:hover,.on-dark .trust-strip a.ti:hover{color:#fff} /* ---- forms ------------------------------------------------------------------ */ .form{display:flex;gap:10px;flex-wrap:wrap;max-width:480px} .form .field{flex:1;min-width:200px} .field{width:100%;height:48px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--line-2); background:var(--white);color:var(--text-strong);font:inherit;font-size:var(--step-0)} .on-dark .field,.s-forest .field,.s-forest-grad .field{background:rgba(255,255,255,.06);border-color:var(--line-dark-2);color:#fff} .on-dark .field::placeholder{color:var(--on-dark-faint)} .field:focus{outline:2.5px solid var(--honey);outline-offset:1px;border-color:var(--honey)} .on-dark .field:focus,.s-forest .field:focus{outline-color:var(--amber-on-dark);border-color:var(--amber-on-dark)} /* honeypot - visually hidden offscreen, NOT display:none (so bots fill it) */ .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden} .form-note{font-size:var(--step--1);color:var(--text-muted);margin-top:12px} .on-dark .form-note,.s-forest .form-note{color:var(--on-dark-faint)} .form-status{font-size:var(--step--1);margin-top:12px;min-height:1.2em} .form-status.ok{color:var(--honey);font-weight:600;display:inline-flex;align-items:center;gap:9px} .on-dark .form-status.ok,.s-forest .form-status.ok{color:var(--amber-on-dark)} .form-status.ok::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327190A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat} .form-status.err{color:var(--honey);font-weight:600} /* ---- FAQ accordion ---------------------------------------------------------- */ .faq{display:grid;gap:12px;max-width:820px} .qa{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);overflow:hidden} .on-dark .qa,.s-forest .qa{background:rgba(247,238,224,.04);border-color:var(--line-dark)} .qa>summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center; gap:16px;font-family:var(--font-display);font-weight:560;font-size:var(--step-1);color:var(--text-strong);line-height:1.25} .on-dark .qa>summary,.s-forest .qa>summary{color:var(--on-dark)} .qa>summary::-webkit-details-marker{display:none} .qa>summary::after{content:"";margin-left:auto;flex:none;width:13px;height:13px; border-right:2px solid var(--honey);border-bottom:2px solid var(--honey);transform:rotate(45deg);transition:transform .25s var(--ease)} .on-dark .qa>summary::after,.s-forest .qa>summary::after{border-color:var(--amber-on-dark)} .qa[open]>summary::after{transform:rotate(225deg)} .qa .qa-a{padding:0 22px 20px;color:var(--text-muted)} .on-dark .qa .qa-a,.s-forest .qa .qa-a{color:var(--on-dark-mut)} .qa .qa-a p:last-child{margin-bottom:0} /* ---- comparison table ------------------------------------------------------- */ .cmp{width:100%;border-collapse:collapse;font-size:var(--step--1)} .cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .cmp thead th{font-family:var(--font-display);font-weight:560;font-size:var(--step-0);color:var(--text-strong)} .cmp .ok{color:var(--honey);font-weight:650} .cmp .no{color:var(--text-faint)} .cmp .col-us{background:var(--amber-soft)} .on-dark .cmp th,.on-dark .cmp td,.s-forest .cmp th,.s-forest .cmp td{border-bottom-color:var(--line-dark)} /* ---- footer ----------------------------------------------------------------- */ .site-footer{background:var(--forest-deep);color:var(--on-dark-mut);padding:clamp(52px,6vw,80px) 0 36px} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px)} @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fbrand{grid-column:1/-1}} @media(max-width:560px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}} .fcol h4{color:var(--on-dark);font-family:var(--font-sans);font-size:var(--step--2);font-weight:700; letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px} .fcol a{display:block;color:var(--on-dark-mut);text-decoration:none;font-size:var(--step--1); padding:6px 0;min-height:34px} .fcol a:hover{color:var(--amber-on-dark)} .fbrand .wm{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--on-dark)} .fbrand .wm .dot{color:var(--amber-on-dark)} .ftag{color:var(--on-dark-faint);font-size:var(--step--1);max-width:34ch;margin:14px 0 16px} .fsocial{display:flex;gap:12px} .fsocial a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-dark-2);border-radius:var(--r-sm);color:var(--on-dark-mut)} .fsocial a:hover{color:var(--amber-on-dark);border-color:var(--amber-on-dark)} .fsocial svg{width:18px;height:18px} .fbar{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;align-items:center; margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line-dark);font-size:var(--step--2);color:var(--on-dark-faint)} .fbar a{color:var(--on-dark-faint);text-decoration:none} .fbar a:hover{color:var(--amber-on-dark)} .fbar .fbar-links{display:flex;flex-wrap:wrap;gap:10px 16px} /* ---- reveal-on-scroll (purposeful, reduced-motion safe) --------------------- */ .reveal{opacity:0;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[style*="--d"]{transition-delay:var(--d)} html.no-js .reveal{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}} /* ---- back to top ------------------------------------------------------------ */ .totop{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;background:var(--amber);color:#27190A;border:0;cursor:pointer; box-shadow:0 12px 28px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease)} .totop.on{opacity:1;transform:none;pointer-events:auto} .totop:hover{background:var(--amber-press)} @media(max-width:560px){.totop{right:14px;bottom:14px}} @media (prefers-reduced-motion:reduce){.totop{transition:none}} /* ---- consent (Meta Pixel gate) ---------------------------------------------- */ .consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:140;max-width:440px;margin-left:auto; background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg); padding:18px 20px;font-size:var(--step--1);color:var(--text-muted); transform:translateY(20px);opacity:0;transition:transform .3s var(--ease),opacity .3s;pointer-events:none} .consent.on{transform:none;opacity:1;pointer-events:auto} .consent p{margin:0 0 12px} .consent a{color:var(--honey)} .consent .crow{display:flex;gap:10px;flex-wrap:wrap} .consent .btn{min-height:40px;font-size:var(--step--1);flex:1} @media (prefers-reduced-motion:reduce){.consent{transition:none}} /* ---- prose (legal / blog body) ---------------------------------------------- */ .prose{max-width:74ch} .prose h2{font-size:var(--step-2);margin:var(--s-6) 0 var(--s-2)} .prose h3{font-size:var(--step-1);margin:var(--s-5) 0 var(--s-1)} .prose p,.prose li{font-size:var(--step-0);line-height:1.7;color:var(--text)} .prose a{color:var(--honey);font-weight:550} .prose ul,.prose ol{margin:0 0 var(--s-3)} .prose>*:first-child{margin-top:0} .prose .updated{font-size:var(--step--1);color:var(--text-faint);margin-bottom:var(--s-4)} /* ---- misc helpers ----------------------------------------------------------- */ .stack-1>*+*{margin-top:var(--s-1)} .stack-2>*+*{margin-top:var(--s-2)} .stack-3>*+*{margin-top:var(--s-3)} .stack-4>*+*{margin-top:var(--s-4)} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:var(--s-3)} .tabular{font-variant-numeric:tabular-nums} .hidden{display:none!important} .nowrap{white-space:nowrap} .divider{height:1px;background:var(--line);border:0} .on-dark .divider{background:var(--line-dark)} /* page hero (generic, for sub-pages) */ .page-hero{padding-block:clamp(64px,9vw,128px) clamp(40px,5vw,72px)} .page-hero h1{font-size:var(--step-5);max-width:18ch} .page-hero .lede{margin-top:var(--s-3)} .breadcrumb{font-size:var(--step--1);color:var(--text-faint);margin-bottom:var(--s-2)} .breadcrumb a{color:var(--text-muted);text-decoration:none} .breadcrumb a:hover{color:var(--honey)} .on-dark .breadcrumb{color:var(--on-dark-faint)} .on-dark .breadcrumb a{color:var(--on-dark-mut)} /* fine print */ .fineprint{font-size:var(--step--2);color:var(--text-faint);line-height:1.5} .on-dark .fineprint{color:var(--on-dark-faint)} /* ============================================================================= LEGACY v6 PAGES -> LIGHT CREAM (site-wide coherence override) The ~45 long-tail / SEO / legal pages carry an older inline design system (dark forest --canvas, light-on-dark text, a grain overlay, and green .dark/.gctx/.ink-band islands). They also link THIS stylesheet after their inline :root and use the new .site-header / .site-footer chrome. Remapping the v6-only token VALUES plus the green islands flips them to the same warm cream surface, so the whole site reads as one light, editorial system. New-system pages never reference these tokens or classes, so they are untouched. A few rules use raised specificity + !important to beat the pages' trailing inline perf-hotfix blocks (which load after this file). ============================================================================= */ :root{ --canvas:#F7F1E6; --canvas-2:#FCF8EF; --canvas-3:#EFE5D1; --canvas-grad:none; --photo-bg:#EFE5D1; --on-h:#15140E; --on-green:#2B2A21; --on-2:#5E5848; --on-cap:#857C68; --accent-on-dark:#8A4710; --accent-ink:#8A4710; --green-tint:#F6E6C8; --line-on:rgba(20,40,28,.12); --line-on-2:rgba(20,40,28,.20); --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.68); --glass-hi:rgba(255,255,255,.72); --glass-line:rgba(20,40,28,.12); --glass-line-2:rgba(20,40,28,.20); --sh-green:0 18px 44px -28px rgba(20,40,28,.20),0 8px 20px -16px rgba(20,40,28,.12); --sh-paper:0 30px 70px -42px rgba(20,40,28,.28),0 10px 26px -20px rgba(20,40,28,.16); --grain:0; } /* kill the grain + dark canvas gradient even past the trailing perf-hotfix !important */ html body::after{opacity:0!important;background:none!important} body::before{background:none!important} /* nav: match the cream .site-header (beat perf-hotfix2's forced dark navrow) */ .site-header .navrow{background:transparent!important;margin:0 auto!important;border-radius:0!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .site-header .navlinks{background:transparent!important} @media(max-width:860px){.site-header .navlinks{background:var(--paper-2)!important}} /* green section islands -> cream */ .dark{background:var(--paper)!important;color:var(--text)!important} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--text-strong)!important} .dark .lede,.dark .sec-lede,.dark p{color:var(--text-muted)!important} .dark strong{color:var(--text-strong)!important} .dark a{color:var(--honey)!important} .dark .rule{background:var(--line)!important} .ink-band{background:var(--paper-3)!important;color:var(--text)!important} .ink-band h1,.ink-band h2,.ink-band h3{color:var(--text-strong)!important} .ink-band p{color:var(--text-muted)!important} /* eyebrow/kick: drop the decorative dash (owner reads it as vibe-coded) */ .eyebrow::before,.kick::before,.kick:not(.center)::before{display:none!important} /* gctx (content that sat on the dark canvas) -> cream-legible */ .gctx h1,.gctx h2,.gctx h3,.gctx h4{color:var(--text-strong)} .gctx p,.gctx li,.gctx .crumbs,.gctx .crumb{color:var(--text)} .gctx .lede,.gctx .sec-lede{color:var(--text-muted)} .gctx a,.gctx .eyebrow,.gctx .kick{color:var(--honey)} .gctx .card{background:var(--paper-2);border-color:var(--line)} .gctx .card h3{color:var(--text-strong)} .gctx .ctable{background:var(--paper-2);border-color:var(--line)} .gctx .ctable th,.gctx .ctable td{border-bottom-color:var(--line);color:var(--text)} .gctx .ctable thead th{background:var(--paper-3);color:var(--honey)} .gctx .ctable td.s{background:var(--amber-soft);color:var(--text-strong)} .gctx code{background:var(--paper-3);border-color:var(--line);color:var(--text)} .gctx .callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--amber)} .gctx .callout h3{color:var(--text-strong)}.gctx .callout p{color:var(--text)}.gctx .callout a{color:var(--honey)} .gctx .faq details{border-top-color:var(--line)}.gctx .faq details:last-child{border-bottom-color:var(--line)} .gctx .faq summary{color:var(--text-strong)}.gctx .faq summary::after{color:var(--honey)}.gctx .faq details p{color:var(--text-muted)} .gctx .related{border-top-color:var(--line)} .gctx .related-list a{background:var(--paper-2);border-color:var(--line);color:var(--honey)} .gctx .related-list a:hover{border-color:var(--honey);background:var(--amber-soft)} .gctx .fcta{background:var(--paper-2);border-color:var(--line)} .gctx .beats li{background:var(--paper-2)!important;border-color:var(--line)!important} .gctx .beats h3{color:var(--text-strong)!important}.gctx .beats p{color:var(--text-muted)!important} /* shared light cards/callouts/glass/photo frames on cream */ .callout{background:var(--paper-2);color:var(--text);border:1px solid var(--line);border-left:3px solid var(--amber)} .callout h3{color:var(--text-strong)}.callout p{color:var(--text)}.callout a{color:var(--honey)} .glass{background:var(--paper-2);border-color:var(--line);box-shadow:var(--sh-green);backdrop-filter:none;-webkit-backdrop-filter:none} .glass h3,.glass h4{color:var(--text-strong)} .photo,.shotframe{background:var(--paper-3);border-color:var(--line)} .photo .ph-mid .ph-kind,.photo .ph-mid .ph-sub{color:var(--text-muted)} .photo .ph-tick{border-color:var(--honey)} /* seam triangle -> match the deep-forest footer for a clean cream->green transition */ .seam svg polygon{fill:var(--forest-deep)} .seam .edge{stroke:var(--amber)} /* outline button -> ink on cream; status text readable */ .btn-outline{color:var(--ink);border-color:var(--line-2)} .btn-outline:hover{background:var(--ink);color:#FCF8EF;border-color:var(--ink)} .status.ok{color:var(--honey)} /* ---- exit nudge (homepage, one quiet bottom bar) --------------------------- */ .exitnudge{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--forest-deep,#0E2419);color:var(--on-dark,#F7F1E6);transform:translateY(100%);transition:transform .32s var(--ease,cubic-bezier(.4,0,.2,1));box-shadow:0 -6px 24px rgba(0,0,0,.18)} .exitnudge.on{transform:translateY(0)} .exitnudge .en-in{max-width:1100px;margin:0 auto;padding:13px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:var(--step--1)} .exitnudge .en-cta{display:flex;gap:12px;align-items:center;flex:none} .exitnudge .en-x{background:none;border:0;color:var(--on-dark-mut,#cdbfa6);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px} .exitnudge .en-x:hover{color:var(--on-dark,#F7F1E6)} @media(prefers-reduced-motion:reduce){.exitnudge{transition:none}} /* ---------- sample recap generator (homepage + /recap-sample) ---------- */ .rd{margin-top:clamp(20px,3vw,34px)} .rd-chips{display:flex;flex-wrap:wrap;gap:10px} .rd-chip{font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;color:var(--text-strong); background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease} .rd-chip:hover{border-color:var(--honey);transform:translateY(-1px)} .rd-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px} .rd-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .rd-status{min-height:1.4em;margin:14px 0 0;font-family:var(--font-sans);font-size:var(--step--1);color:var(--text-muted)} .rd.is-busy .rd-status{padding-left:20px;position:relative} .rd.is-busy .rd-status::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px; border-radius:50%;background:var(--amber);animation:rd-pulse 1s ease-in-out infinite} @keyframes rd-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}} .rd-panel{margin-top:12px;min-height:440px;background:var(--paper-2);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-paper);padding:clamp(22px,3vw,40px);overflow:hidden} .rd-empty{height:100%;min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:var(--text-muted);gap:6px} .rd-empty p{margin:0;max-width:44ch} .rd-empty p:first-child{font-family:var(--font-display);font-size:var(--step-1);color:var(--text-strong)} .rd-empty-sub{font-size:var(--step--1)} .rd-skel{display:flex;flex-direction:column;gap:16px;padding-top:8px} .rd-skel span{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--paper-3) 25%,var(--amber-soft) 37%,var(--paper-3) 63%); background-size:400% 100%;animation:rd-shim 1.3s ease infinite} .rd-skel span:nth-child(1){width:52%;height:22px} .rd-skel span:nth-child(2){width:100%} .rd-skel span:nth-child(3){width:92%} .rd-skel span:nth-child(4){width:70%} @keyframes rd-shim{0%{background-position:100% 0}100%{background-position:0 0}} .rd-doc{font-family:var(--font-sans);color:var(--text)} .rd-hd,.rd-sec,.rd-foot{opacity:0;transform:translateY(7px);transition:opacity .42s ease,transform .42s ease} .rd-hd.rd-in,.rd-sec.rd-in,.rd-foot.rd-in{opacity:1;transform:none} .rd-hd{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:6px} .rd-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--honey);background:var(--amber-soft);border-radius:6px;padding:3px 9px;margin-bottom:10px} .rd-meta{display:block;font-size:var(--step--1);color:var(--text-muted);margin-bottom:6px} .rd-title{font-family:var(--font-display);font-size:var(--step-2);color:var(--text-strong);margin:0 0 4px;line-height:1.15} .rd-sub{font-size:var(--step--1);color:var(--text-muted);margin:0} .rd-sec{margin-top:22px} .rd-h{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--honey);margin:0 0 10px} .rd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .rd-li{position:relative;padding-left:20px;line-height:1.5} .rd-li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--amber)} .rd-commit,.rd-action{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-left:20px} .rd-due{font-size:12px;font-weight:600;color:var(--honey);background:var(--amber-soft);border-radius:5px;padding:2px 7px;white-space:nowrap} .rd-action{padding-left:0} .rd-action::before{display:none} .rd-check{flex:none;width:16px;height:16px;border:1.6px solid var(--line-2);border-radius:5px;margin-top:3px} .rd-action-text{flex:1 1 auto} .rd-goal{margin-top:14px} .rd-goal:first-of-type{margin-top:0} .rd-goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .rd-goal-title{font-weight:600;color:var(--text-strong)} .rd-goal-pct{font-size:var(--step--1);font-weight:700;color:var(--honey)} .rd-goal-detail{margin:3px 0 8px;font-size:var(--step--1);color:var(--text-muted)} .rd-bar{height:8px;background:var(--paper-3);border-radius:999px;overflow:hidden} .rd-bar-fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--honey));transition:width .9s cubic-bezier(.2,.7,.2,1)} .rd-next{margin:0;font-size:var(--step-0);color:var(--text-strong);line-height:1.5} .rd-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between; margin-top:26px;padding-top:16px;border-top:1px solid var(--line)} .rd-src{font-size:var(--step--1);color:var(--text-muted)} .rd-cta{font-weight:600;color:var(--honey);text-decoration:underline;text-underline-offset:3px} .rd-err{padding:40px 8px;text-align:center;color:var(--text-muted)} .rd-err a{color:var(--honey);text-decoration:underline} @media(prefers-reduced-motion:reduce){ .rd-hd,.rd-sec,.rd-foot{opacity:1;transform:none;transition:none} .rd-bar-fill{transition:none} .rd-skel span,.rd.is-busy .rd-status::before{animation:none} } @media(max-width:560px){.rd-panel{min-height:520px;border-radius:var(--r-lg)}} /* ── Promise strip (RUN-18 S4) ────────────────────────────────────────────── The five core promises, one canonical order, each linking to its proof page. Rendered from api/_claims.js on server pages; a byte-identical copy is inlined on static pages (audited by scripts/audit-claims.mjs). Self-contained pills so the strip reads on paper or forest sections. Use .promise-strip.on-dark (or place inside .s-forest) for the light-on-dark variant. */ .promise-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:center} .pstrip-i{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:.86rem;font-weight:600;line-height:1;color:var(--ink,#0E2419);text-decoration:none;background:rgba(14,36,25,.05);border:1px solid rgba(14,36,25,.16);border-radius:999px;padding:8px 13px;transition:background .15s ease,border-color .15s ease} .pstrip-i svg{color:var(--honey,#8A4710);flex:none} .pstrip-i:hover{background:rgba(14,36,25,.09);border-color:rgba(14,36,25,.3)} .pstrip-i:focus-visible{outline:2px solid var(--amber,#E1991C);outline-offset:2px} .s-forest .promise-strip .pstrip-i,.promise-strip.on-dark .pstrip-i{color:#EAF1EA;background:rgba(247,241,230,.06);border-color:rgba(247,241,230,.22)} .s-forest .promise-strip .pstrip-i svg,.promise-strip.on-dark .pstrip-i svg{color:#F4B45A} .s-forest .promise-strip .pstrip-i:hover,.promise-strip.on-dark .pstrip-i:hover{background:rgba(247,241,230,.11);border-color:rgba(247,241,230,.36)} .pstrip-compact{gap:6px} .pstrip-compact .pstrip-i{font-size:.78rem;padding:6px 10px} @media(max-width:520px){.promise-strip{gap:6px 8px}.pstrip-i{font-size:.8rem;padding:7px 11px}} /* ============================================================================= RUN 20 - the mobile hard pass. Everything below is phone-first polish: 44px tap targets, no iOS input zoom, a slim homepage trial bar, a tap-to-load demo poster, the compact /grow budget widget, and safe-area / touch niceties. ============================================================================= */ /* --- 44px tap targets for discrete controls on phones ----------------------- */ @media(max-width:820px){ .btn-sm{min-height:44px} .consent .btn{min-height:46px} .chip{min-height:40px} .pchip{min-height:44px} .pstrip-i{min-height:44px} .fcol a{min-height:44px;display:flex;align-items:center;padding:7px 0} .flegal a,.site-footer .legal a,.fbar-links a,.fbar a{min-height:44px;display:inline-flex;align-items:center} } /* --- no iOS auto-zoom: form controls render at >=16px on phones ------------- */ @media(max-width:820px){ input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=submit]), select,textarea{font-size:16px} } /* --- kinder touch defaults (RUN 20 discovery) ------------------------------- */ .btn,.chip,.pchip,.pstrip-i,.navtoggle,.gb-dur,summary{-webkit-tap-highlight-color:transparent} .btn,.navtoggle,.gb-dur,.tb-main{-webkit-user-select:none;user-select:none} @media(max-width:560px){ .site-footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))} .totop{bottom:calc(14px + env(safe-area-inset-bottom,0px))} } /* --- 3.2 homepage sticky trial bar (mobile-only, dismissible, JS-driven) ---- */ .trialbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none} @media(max-width:820px){ .trialbar{display:flex;align-items:center;gap:10px; background:var(--forest-deep,#0E2419);color:var(--on-dark,#F7F1E6); padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 22px rgba(0,0,0,.24);transform:translateY(115%); transition:transform .34s var(--ease,cubic-bezier(.4,0,.2,1))} .trialbar.on{transform:none} .trialbar .tb-main{flex:1;min-height:46px;font-size:.92rem; background:var(--amber,#E1991C);color:#27190A;border-color:var(--amber,#E1991C)} .trialbar .tb-main:hover{background:var(--amber-press,#c9831a);border-color:var(--amber-press,#c9831a)} .trialbar .tb-x{background:none;border:0;color:var(--on-dark-mut,#cdbfa6);font-size:24px; line-height:1;cursor:pointer;padding:4px 8px;min-height:44px;flex:none} .trialbar .tb-x:hover{color:var(--on-dark,#F7F1E6)} body.has-trialbar .totop{bottom:calc(76px + env(safe-area-inset-bottom,0px))} } @media(prefers-reduced-motion:reduce){.trialbar{transition:none}} /* --- profession chips (homepage hero + /demo) ------------------------------ Lifted out of index.html's inline