/* =========================================================================== GotRegulars — shared design system for the marketing feature pages. Extracted from index.html so every page matches the homepage exactly (amethyst + porcelain, OKLCH, Cormorant/Inter/JetBrains). Fonts are linked in each page . Ships as a static file (cacheable). site.js pairs with it. =========================================================================== */ :root{ --substrate:oklch(96.5% .008 95); --substrate-deep:oklch(94% .01 92); --paper:oklch(98.6% .005 95); --inset:oklch(94.6% .008 92); --ink:oklch(22% .015 300); --ink-62:oklch(22% .015 300 / .62); --ink-40:oklch(22% .015 300 / .40); --ink-18:oklch(22% .015 300 / .18); --hair:oklch(22% .02 300 / .08); --hair-hot:oklch(22% .02 300 / .16); --amethyst:oklch(52% .11 305); --amethyst-deep:oklch(42% .12 305); --amethyst-soft:oklch(52% .11 305 / .14); --amethyst-halo:oklch(52% .11 305 / .28); --amethyst-light:oklch(74% .08 305); --gold:oklch(74% .09 85); --gold-deep:oklch(54% .1 80); --green:oklch(58% .1 165); --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:104px} body{ font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden; background: radial-gradient(1200px 600px at 78% -5%, var(--amethyst-soft), transparent 62%), radial-gradient(900px 500px at -8% 30%, oklch(74% .09 85 / .12), transparent 58%), radial-gradient(700px 600px at 90% 85%, oklch(58% .1 165 / .07), transparent 60%), linear-gradient(180deg, var(--substrate), var(--substrate-deep)); } ::selection{background:var(--amethyst);color:#fff} img{max-width:100%;display:block;height:auto} a{color:inherit} .wrap{width:min(1160px,92vw);margin-inline:auto} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amethyst);font-weight:500;display:inline-flex;gap:10px;align-items:center} .eyebrow::before{content:"";width:22px;height:1px;background:var(--amethyst);opacity:.6} .eyebrow.center{justify-content:center} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;text-wrap:balance} h1{font-size:clamp(40px,5.2vw,62px);letter-spacing:-.015em;line-height:1.03} h2{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em} h3{font-size:clamp(21px,2.4vw,27px)} h4{font-size:19px} p{max-width:66ch} .lede{color:var(--ink-62);font-size:clamp(17px,2vw,19px);max-width:60ch;line-height:1.6} em.a,em{font-style:italic;color:var(--amethyst)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .muted{color:var(--ink-62)} .faint{color:var(--ink-40)} .grain::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:80;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* surfaces */ .glass{background:linear-gradient(168deg,oklch(98.6% .005 95/.78),oklch(98.6% .005 95/.52));backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);border:1px solid oklch(52% .11 305/.13);box-shadow:inset 0 1px 0 oklch(100% 0 0/.6),0 24px 60px -32px oklch(22% .02 300/.5)} .porcelain{background:var(--paper);border:1px solid var(--hair);border-radius:20px;box-shadow:0 1px 0 oklch(100% 0 0/.7) inset,0 18px 44px -30px oklch(22% .02 300/.35)} /* ── nav (with product dropdown + working mobile menu) ── */ nav.site{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;width:min(1120px,94vw);border-radius:18px;padding:11px 14px 11px 18px;display:flex;align-items:center;gap:20px; background:linear-gradient(168deg,oklch(98.6% .005 95/.82),oklch(98.6% .005 95/.6));backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);border:1px solid oklch(52% .11 305/.13);box-shadow:inset 0 1px 0 oklch(100% 0 0/.6),0 24px 60px -32px oklch(22% .02 300/.5)} nav.site .logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:21px;font-weight:600;text-decoration:none;color:var(--ink)} .orbdot{width:26px;height:26px;background:url("gotregulars-mark.svg") center/contain no-repeat;flex:none;animation:breathe 4.5s var(--ease) infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} nav.site .links{display:flex;gap:20px;font-size:13.5px;font-weight:500;color:var(--ink-62);align-items:center;margin-left:6px} nav.site .links > a,nav.site .links > .drop > button{text-decoration:none;transition:color .2s;color:var(--ink-62);background:none;border:0;font:inherit;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px} nav.site .links > a:hover,nav.site .links > .drop > button:hover,nav.site .links > a[aria-current="page"]{color:var(--ink)} nav.site .links > a[aria-current="page"]{color:var(--amethyst)} .drop{position:relative} .drop > button .chev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s} .drop[data-open="true"] > button .chev{transform:rotate(-135deg)} .drop-panel{position:absolute;top:calc(100% + 14px);left:-14px;width:340px;padding:10px;border-radius:16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease); background:var(--paper);border:1px solid var(--hair);box-shadow:0 30px 70px -34px oklch(22% .02 300/.55)} .drop[data-open="true"] .drop-panel{opacity:1;visibility:visible;transform:none} .drop-panel a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:11px;text-decoration:none;transition:background .16s} .drop-panel a:hover{background:var(--amethyst-soft)} .drop-panel .di{font-size:18px;line-height:1;margin-top:2px} .drop-panel .dt{display:block;font-weight:600;font-size:14px;color:var(--ink)} .drop-panel .dd{display:block;font-size:12.5px;color:var(--ink-62);line-height:1.4;margin-top:1px} .cta{display:inline-flex;align-items:center;gap:8px;background:var(--amethyst);color:#fff;font-weight:600;font-size:14px;border:0;border-radius:14px;padding:11px 20px;text-decoration:none;cursor:pointer;box-shadow:0 14px 34px -12px var(--amethyst-halo),0 2px 0 oklch(100% 0 0/.15) inset;transition:transform .18s var(--ease),background .18s} .cta:hover{background:var(--amethyst-deep);transform:translateY(-1px)} .cta.ghost{background:transparent;color:var(--amethyst);border:1px solid var(--amethyst-halo);box-shadow:none} .cta.ghost:hover{background:var(--amethyst-soft)} .cta.lg{padding:15px 28px;font-size:15px;border-radius:15px} nav.site .nav-cta{margin-left:auto} .burger{display:none;margin-left:auto;background:var(--paper);border:1px solid var(--hair);border-radius:11px;width:42px;height:42px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center} .burger span{width:18px;height:1.8px;background:var(--ink);border-radius:2px;transition:.2s} /* mobile sheet */ .msheet{position:fixed;inset:0;z-index:70;background:var(--substrate);opacity:0;visibility:hidden;transition:.28s var(--ease);padding:84px 24px 40px;overflow-y:auto} .msheet[data-open="true"]{opacity:1;visibility:visible} .msheet .mclose{position:absolute;top:22px;right:22px;background:var(--paper);border:1px solid var(--hair);border-radius:11px;width:42px;height:42px;font-size:20px;cursor:pointer} .msheet a{display:block;font-family:var(--serif);font-size:26px;padding:12px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--hair)} .msheet .mlabel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amethyst);margin:22px 0 4px} .msheet .mrow{display:block} @media(max-width:900px){nav.site .links{display:none}nav.site .nav-cta{display:none}.burger{display:flex}} /* ── layout sections ── */ section{position:relative} .sec{padding:clamp(60px,9vh,110px) 0} .sec.tight{padding:clamp(40px,6vh,72px) 0} .sec.hero{padding:clamp(120px,15vh,168px) 0 clamp(50px,7vh,84px)} .center{text-align:center} .center .lede,.center p{margin-inline:auto} .maxw{max-width:760px} .maxw.center{margin-inline:auto} .stack>*+*{margin-top:18px} .hair-top{border-top:1px solid var(--hair)} .tint{background:oklch(98.6% .005 95/.5);border-block:1px solid var(--hair)} .tint-amethyst{background:var(--amethyst-soft)} /* breadcrumb */ .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-40);display:flex;gap:8px;align-items:center;text-transform:uppercase} .crumb a{text-decoration:none;color:var(--ink-62)} .crumb a:hover{color:var(--amethyst)} .crumb .sep{opacity:.5} /* pills / chips */ .pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:7px 13px;border-radius:20px;background:var(--paper);border:1px solid var(--hair);color:var(--ink-62)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)} .pill.amethyst{background:var(--amethyst-soft);border-color:var(--amethyst-halo);color:var(--amethyst-deep)} .pillrow{display:flex;flex-wrap:wrap;gap:9px} /* feature grid + cards */ .grid{display:grid;gap:22px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}} @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:var(--paper);border:1px solid var(--hair);border-radius:18px;padding:26px 24px;box-shadow:0 1px 0 oklch(100% 0 0/.7) inset,0 18px 44px -30px oklch(22% .02 300/.35);transition:transform .2s var(--ease),box-shadow .2s} .card:hover{transform:translateY(-3px);box-shadow:0 1px 0 oklch(100% 0 0/.7) inset,0 30px 60px -34px oklch(22% .02 300/.45)} .card .ic{width:44px;height:44px;border-radius:12px;background:var(--amethyst-soft);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;color:var(--amethyst-deep)} /* monochrome amethyst icon set — replaces all emoji card icons */ .ic svg,.di svg,.ico svg{width:23px;height:23px;stroke:var(--amethyst-deep);fill:none;display:block} .di svg{width:19px;height:19px} .ico{display:inline-flex;vertical-align:-3px;color:var(--amethyst-deep)}.ico svg{width:18px;height:18px} .drop-panel .di,.npi{color:var(--amethyst-deep)} .card h3{margin-bottom:8px} .card p{color:var(--ink-62);font-size:15px} /* split (text + visual) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .split.rev .visual{order:-1} @media(max-width:900px){.split{grid-template-columns:1fr}.split.rev .visual{order:0}} /* phone device frame */ .device{width:290px;max-width:78vw;margin-inline:auto;border-radius:46px;background:linear-gradient(160deg,#2b2026,#171015);padding:11px;box-shadow:0 40px 90px -30px oklch(22% .05 300/.5),inset 0 0 0 2px oklch(100% 0 0/.06)} .device .scr{border-radius:36px;overflow:hidden;background:#0c0a0b;position:relative} .device img{display:block;width:100%} /* browser frame */ .browser{background:#1b1622;border-radius:16px 16px 12px 12px;padding:12px 12px 0;box-shadow:0 40px 90px -34px oklch(22% .05 300/.5);overflow:hidden} .browser .bar{display:flex;align-items:center;gap:7px;padding:2px 4px 12px} .browser .dots{display:flex;gap:6px}.browser .dots i{width:11px;height:11px;border-radius:50%;background:#3a3546;display:block} .browser .addr{margin-left:12px;flex:1;background:#2a2536;color:#9a93a8;font-size:12px;padding:6px 12px;border-radius:7px;font-family:var(--mono);max-width:340px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .browser img{display:block;width:100%;border-radius:6px 6px 0 0} /* numbered steps */ .steps{counter-reset:s;display:grid;gap:20px} .step{display:flex;gap:18px;align-items:flex-start} .step .n{counter-increment:s;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--amethyst-halo);color:var(--amethyst-deep);font-family:var(--mono);font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:600} .step .n::before{content:counter(s,decimal-leading-zero)} /* stat */ .stat{font-family:var(--serif);font-size:clamp(34px,5vw,52px);color:var(--amethyst-deep);line-height:1} .stat + .sl{font-size:14px;color:var(--ink-62);margin-top:6px} /* pull-quote */ .quote{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-style:italic;line-height:1.35;color:var(--ink);max-width:22ch} .quote + .qby{font-size:13px;color:var(--ink-40);margin-top:14px;font-family:var(--mono);letter-spacing:.05em} /* FAQ */ .faq{max-width:800px;margin-inline:auto;border-top:1px solid var(--hair)} .faq details{border-bottom:1px solid var(--hair)} .faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--serif);font-size:20px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:24px;color:var(--amethyst);transition:transform .2s;font-family:var(--sans)} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{padding:0 0 22px;color:var(--ink-62);font-size:15.5px;max-width:70ch} /* honest note (brand candour) */ .honest{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-40);max-width:64ch;line-height:1.6} .honest .d{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;margin-top:6px} /* CTA band */ .ctaband{text-align:center;border-radius:26px;padding:clamp(40px,6vw,64px) 24px;background:linear-gradient(150deg,var(--amethyst),var(--amethyst-deep));color:#fff;box-shadow:0 40px 90px -40px var(--amethyst-halo);position:relative;overflow:hidden} .ctaband h2{color:#fff} .ctaband p{color:oklch(100% 0 0/.82);margin-inline:auto} .ctaband .cta{background:#fff;color:var(--amethyst-deep)} .ctaband .cta:hover{background:oklch(98% .01 305);transform:translateY(-1px)} /* footer */ footer.site{border-top:1px solid var(--hair);background:oklch(98.6% .005 95/.7);padding:56px 0 42px;font-size:13.5px;margin-top:40px} footer.site .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} @media(max-width:760px){footer.site .foot-grid{grid-template-columns:1fr 1fr}} footer.site .col b{display:block;margin-bottom:12px;font-weight:600} footer.site a{display:block;color:var(--ink-62);text-decoration:none;padding:3px 0;transition:color .2s} footer.site a:hover{color:var(--ink)} /* reveal-on-scroll (fail-visible: hides only after JS opts in) */ .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv-on .rv{opacity:0;transform:translateY(26px)} .rv-on .rv.in{opacity:1;transform:none} /* Above-the-fold hero never waits for the observer — it paints immediately, so a tall hero visual can never push the headline below the fold into the hidden state. */ .rv-on .sec.hero .rv{opacity:1!important;transform:none!important} @media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}html{scroll-behavior:auto}.orbdot{animation:none}}