/* Brand fonts (OFL, self-hosted in /fonts/) */
@font-face { font-family: "Crimson Pro"; src: url(/fonts/CrimsonPro-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* SEO Backlinks — network landing page (home host). Buildless; edit tokens to rebrand. */
:root {
  color-scheme: light;
  /* Brand palette (docs/BRAND.md): Forest, Evergreen, Mint, Ivory, Ink */
  --forest: #123D32;
  --evergreen: #347C64;
  --mint-brand: #BDE7D2;
  --ivory: #F7F6F0;
  --green: var(--evergreen);
  --green-dark: var(--forest);
  --green-soft: #DCEFE4;
  --ink: #17251F;
  --muted: #4F5F58;
  --mint: #EAF4EE;
  --paper: var(--ivory);
  --line: #D9E3DD;
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --container: 1240px;
  --shadow-sm: 0 1px 2px #12362a0d, 0 4px 12px #12362a0a;
  --shadow-md: 0 2px 4px #12362a0d, 0 14px 30px #12362a14;
  --shadow-lg: 0 6px 12px #12362a10, 0 28px 60px #12362a24;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.i { width: 18px; height: 18px; }
.container { width: min(calc(100% - 96px), var(--container)); margin-inline: auto; }
.section { padding-block: 76px; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 50; padding: 12px 20px; background: var(--green); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--green); font-size: 11.5px; line-height: 1.4; letter-spacing: .19em; font-weight: 750; text-transform: uppercase; }
.status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
h2 { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 50px); font-weight: 400; color: var(--forest); line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.section-head { margin-bottom: 32px; }
.section-head.split { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.section-head.split .section-description { max-width: 420px; margin: 0 0 6px; }
.section-description { color: var(--muted); margin-top: 12px; font-size: 19px; line-height: 1.55; }
.empty { padding: 32px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 12px; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 22px; border: 1px solid transparent; border-radius: 9px; font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
.button .icon { width: 17px; height: 17px; transition: transform .18s; }
.button:hover .icon { transform: translateX(2px); }
.button-primary { color: #fff; background: linear-gradient(180deg, #3C8A70, var(--green)); border-color: var(--green-dark); box-shadow: 0 1px 0 #ffffff40 inset, 0 8px 18px #347C6433; }
.button-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff30 inset, 0 12px 24px #347C6440; }
.button-outline { color: var(--green); background: #fff; border-color: #BDE7D2; }
.button-outline:hover { background: var(--green-soft); border-color: var(--green); }

/* Brand */
.brand { display: inline-flex; align-items: center; white-space: nowrap; }
.brand img { width: 228px; height: auto; display: block; transition: transform .3s, opacity .3s; }
.footer-brand img { width: 210px; }
@media (max-width: 640px) { .brand img { width: 176px; } }
.brand:hover img { opacity: .85; }
.brand b { color: var(--green); font-weight: 700; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: #F7F6F0cc; backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px #12362a0d; }
.header-inner { display: flex; align-items: center; gap: 40px; min-height: 76px; }
.main-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.main-nav a { position: relative; color: #384351; font-size: 14px; padding-block: 12px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transition: transform .2s; }
.main-nav a:hover { color: var(--green); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-cta { min-height: 40px; border-radius: 24px; padding: 8px 18px; font-size: 13px; }
.header-cta .icon { width: 15px; height: 15px; }

/* Hero */
.hero { position: relative; padding-block: 56px 64px; overflow: hidden; }
.hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; background: radial-gradient(closest-side, #BDE7D2 0%, #EAF4EEaa 45%, transparent 75%); pointer-events: none; }
.hero-glow::before { content: ""; position: absolute; left: -60%; top: 40%; width: 60%; height: 50%; background: radial-gradient(closest-side, #f1ead2aa, transparent); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: 24px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-family: var(--serif); font-size: clamp(50px, 5.2vw, 76px); font-weight: 400; line-height: .98; letter-spacing: -.03em; color: var(--forest); }
.hero h1 span { display: block; }
.hero h1 em { display: block; margin-top: 4px; font-weight: 400; font-style: italic; letter-spacing: -.035em; white-space: nowrap; background: linear-gradient(100deg, #123D32 10%, #347C64 55%, #1F5C49 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.hero-description { color: #3f4b59; font-size: 20px; line-height: 1.6; margin-top: 24px; max-width: 34em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.hero-actions .button { min-height: 54px; padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.preview-link { display: inline-flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 650; min-height: 44px; }
.preview-link:hover { color: var(--green); }
.play-circle { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--green); border-radius: 50%; color: var(--green); background: #fff; box-shadow: 0 0 0 6px #347C6412; transition: box-shadow .25s, transform .25s; }
.preview-link:hover .play-circle { box-shadow: 0 0 0 9px #347C641a; transform: scale(1.05); }
.play-circle svg { width: 17px; height: 17px; fill: currentColor; stroke: none; margin-left: 2px; }
.trust-list { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; list-style: none; margin: 40px 0 0; padding: 0; font-size: 13px; color: #3b4852; }
.trust-list li { display: flex; align-items: center; gap: 8px; }
.check-circle { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--green-soft); color: var(--green); flex: 0 0 auto; }
.check-circle .icon { width: 14px; height: 14px; stroke-width: 2.4; }

/* Sculpted brand emblem (3D emerald) floating over the hero visual */
.hero-emblem { position: absolute; left: -118px; bottom: -14px; width: 224px; height: 224px; object-fit: contain; transform: translateZ(160px) rotate(-5deg); filter: drop-shadow(0 30px 34px #0A2C2445); pointer-events: none; }
@media (max-width: 1200px) { .hero-emblem { width: 180px; height: 180px; left: -60px; bottom: -20px; } }
@media (max-width: 760px) { .hero-emblem { width: 140px; height: 140px; left: auto; right: -10px; top: -30px; bottom: auto; } }
/* Hero illustration with real depth */
.hero-visual { height: 540px; min-width: 0; position: relative; perspective: 1400px; }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.visual-canvas { position: relative; width: 600px; height: 530px; left: 50%; margin-left: -300px; transform-style: preserve-3d; }
.depth-1 { --z: 30px; } .depth-2 { --z: 80px; } .depth-3 { --z: 130px; }
.mint-backdrop { position: absolute; inset: 13px -10px 4px 25px; border-radius: 44px; background: linear-gradient(150deg, #DCEFE4, #EAF4EE 60%, #F3EFDF); transform: rotate(2deg) translateZ(-40px); box-shadow: inset 0 0 0 1px #ffffff80; }
.ring { position: absolute; border-radius: 50%; border: 1px dashed #A9D9C3; transform: translateZ(-20px); }
.ring.r1 { width: 420px; height: 420px; left: 90px; top: 50px; animation: spin 80s linear infinite; }
.ring.r2 { width: 300px; height: 300px; left: 150px; top: 110px; border-style: solid; border-color: #c8ead7; }
@keyframes spin { to { transform: translateZ(-20px) rotate(360deg); } }
.browser-card { position: absolute; background: #fff; border: 1px solid #e3ebe6; border-radius: 13px; box-shadow: var(--shadow-lg); overflow: hidden; }
.bookmark-browser { width: 297px; height: 385px; left: -17px; top: 73px; transform: rotate(-4deg) translateZ(var(--z)); }
.browser-chrome { display: flex; align-items: center; gap: 4px; height: 25px; padding-inline: 11px; border-bottom: 1px solid #e4ebe6; background: #fafcfb; }
.browser-chrome > span { width: 6px; height: 6px; border-radius: 50%; background: #fa9a8d; }
.browser-chrome > span:nth-child(2) { background: #eac56b; }
.browser-chrome > span:nth-child(3) { background: #50bf98; }
.browser-chrome i { margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: #eff4f1; color: #77858a; font: 7px/1.5 var(--sans); font-style: normal; }
.bookmark-masthead { display: flex; align-items: center; gap: 9px; background: #347C64; color: #fff; padding: 16px 13px; font-weight: 650; font-size: 15px; }
.bookmark-masthead .icon { width: 17px; height: 17px; }
.mini-tabs { display: flex; gap: 13px; padding: 11px 12px; font-size: 8px; color: #536064; border-bottom: 1px solid #e5ece7; white-space: nowrap; overflow: hidden; }
.mini-tabs b { color: var(--green); }
.mini-story { margin: 0 13px; padding-block: 15px; border-bottom: 1px solid #e7eee9; }
.mini-story strong { display: block; width: 190px; font-size: 13px; line-height: 1.3; letter-spacing: -.02em; }
.mini-story p { margin-top: 6px; font-size: 10px; line-height: 1.5; color: #69757c; width: 180px; }
.mini-tag { display: inline-block; background: #ddf4e5; color: #066044; font-size: 8px; padding: 2px 8px; border-radius: 8px; margin-top: 8px; }
.mini-tag.lilac { color: #704184; background: #f3eafa; }
.journal-browser { width: 232px; height: 363px; right: -15px; top: 94px; transform: rotate(4deg) translateZ(var(--z)); background: #fcfaf5; }
.journal-masthead { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 16px; font-weight: bold; padding: 17px 16px 13px; white-space: nowrap; }
.journal-masthead span { font-family: var(--sans); font-size: 10px; }
.journal-browser .mini-tabs { padding-inline: 16px; gap: 16px; }
.journal-story { padding: 20px 17px; }
.journal-story strong { font-family: var(--serif); display: block; font-size: 23px; letter-spacing: -.05em; line-height: 1.06; }
.journal-story p { font-family: var(--serif); font-size: 13px; line-height: 1.45; color: #687079; margin-top: 14px; }
.journal-rule { height: 1px; width: 32px; margin: 18px 0 8px; background: #cddace; }
.journal-story > span { font-size: 8px; color: #71786c; text-transform: uppercase; letter-spacing: .12em; }

.phone { position: relative; width: 238px; padding: 7px; border: 3px solid #404842; border-radius: 38px; background: #111613; box-shadow: 0 30px 50px #13312438, 0 10px 18px #1331242b, inset 0 0 0 1px #b7bfb9; color: #162020; }
.hero-phone { position: absolute; z-index: 3; height: 517px; left: 151px; top: 0; transform: rotate(-2deg) translateZ(var(--z)); }
.phone-camera { position: absolute; z-index: 3; width: 50px; height: 12px; border-radius: 8px; background: #151917; left: 50%; top: 12px; transform: translateX(-50%); }
.phone-screen { position: relative; height: 100%; background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.phone-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, #ffffff00 40%, #ffffff55 50%, #ffffff00 60%); pointer-events: none; }
.phone-status { display: flex; justify-content: space-between; align-items: center; height: 35px; padding: 12px 16px 5px; font-size: 8px; }
.phone-status > span { display: inline-flex; align-items: center; gap: 4px; font-size: 6px; }
.battery { display: inline-block; width: 11px; height: 6px; border: 1px solid #19271e; border-radius: 2px; background: #19271e; }
.phone-heading { padding: 15px 13px 11px; }
.phone-heading strong { display: block; font-size: 14px; font-weight: 750; letter-spacing: -.035em; }
.phone-heading > span { font-size: 8px; color: #697279; display: block; margin-top: 4px; }
.phone-sites { margin: 0 10px; }
.phone-site { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #eef2ef; min-height: 58px; }
.phone-site:first-child { background: #f1faf5; border-radius: 8px; padding-inline: 6px; }
.phone-site > div { flex: 1; min-width: 0; }
.phone-site b { display: block; font-size: 8.5px; letter-spacing: -.02em; line-height: 1.3; }
.phone-site small { display: block; color: #6f797d; margin-top: 3px; font-size: 7px; line-height: 1.35; }
.app-tile { width: 31px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: var(--sa, #0b9974); background: color-mix(in srgb, var(--sa, #0b9974) 14%, white); }
.app-tile .icon { width: 17px; height: 17px; }
.radio { width: 11px; height: 11px; border: 1px solid #c7d5cc; border-radius: 50%; flex: 0 0 auto; }
.radio.checked { background: var(--green); color: #fff; border-color: var(--green); font-size: 7px; line-height: 9px; text-align: center; }
.phone-action { margin: 10px 11px 6px; background: var(--green); color: #fff; text-align: center; border-radius: 6px; padding: 10px; font-size: 9px; font-weight: 600; }
.phone-navigation { display: flex; justify-content: space-around; gap: 8px; margin-top: auto; padding: 11px 9px 12px; border-top: 1px solid #eef2ee; }
.phone-navigation > span { display: flex; align-items: center; flex-direction: column; gap: 4px; color: #637079; font-size: 6px; white-space: nowrap; }
.phone-navigation .icon { width: 13px; height: 13px; }
.phone-navigation .active { color: var(--green); font-weight: 600; }
.review-badge { display: inline-flex; gap: 8px; align-items: center; position: absolute; right: -4px; bottom: 14px; border-radius: 22px; padding: 9px 14px 9px 9px; background: #fff; box-shadow: var(--shadow-md); font-size: 11px; font-weight: 600; color: #104b3a; z-index: 4; transform: translateZ(var(--z)); }
.review-badge .check-circle { background: var(--green); color: #fff; width: 24px; height: 24px; }
.count-badge { position: absolute; left: 10px; top: 20px; z-index: 4; display: grid; padding: 10px 16px; border-radius: 14px; background: #102e23; color: #fff; box-shadow: var(--shadow-md); transform: rotate(-3deg) translateZ(var(--z)); }
.count-badge strong { font-family: var(--serif); font-size: 24px; line-height: 1; }
.count-badge span { font-size: 9px; color: #b6ecd1; margin-top: 3px; letter-spacing: .04em; }
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out -2s infinite; }
@keyframes float { 50% { translate: 0 -8px; } }

/* Proof bar */
.proof { padding-block: 0 12px; }
.proof-list { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.proof-list li { display: grid; gap: 2px; padding: 20px 24px; text-align: center; }
.proof-list li + li { border-left: 1px solid var(--line); }
.proof-list strong { font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: var(--green); }
.proof-list span { color: var(--muted); font-size: 13px; }

/* Network: website rows — each row is a raised, tinted 3D slab in its own colour */
.network { position: relative; background: linear-gradient(180deg, var(--paper), var(--mint) 120px); margin-top: 52px; overflow: hidden; }
.network::before, .network::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.network::before { width: 420px; height: 420px; left: -160px; top: 260px; background: #c7f0dc; }
.network::after { width: 380px; height: 380px; right: -140px; bottom: 120px; background: #e0e3ff; }
.network .container { position: relative; z-index: 1; }
.website-list { display: grid; gap: 20px; perspective: 1400px; }
.website-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 60px minmax(0, 1fr) 176px 140px; align-items: center; gap: 24px; padding: 22px 26px 22px 30px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--sa) 10%, white) 0%, #fff 38%, #fff 66%, color-mix(in srgb, var(--sb) 13%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--sa) 20%, white);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 color-mix(in srgb, var(--sa) 20%, white), 0 14px 26px color-mix(in srgb, var(--sa) 12%, transparent);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.website-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--sb), var(--sa)); }
.website-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--sb) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.website-row:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: color-mix(in srgb, var(--sa) 45%, white);
  box-shadow: inset 0 1px 0 #fff, 0 9px 0 color-mix(in srgb, var(--sa) 30%, white), 0 30px 46px color-mix(in srgb, var(--sa) 24%, transparent); }
.website-row:hover::after { opacity: 1; }
/* Light sweep: drifts across each row in turn, and on hover. */
.row-shine { position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 35%; background: linear-gradient(100deg, transparent, #ffffffd0 50%, transparent); transform: skewX(-20deg); animation: sweep 9s ease-in-out calc(var(--i, 0) * 1.4s + 1s) infinite; pointer-events: none; }
@keyframes sweep { 0%, 78% { left: -45%; } 100% { left: 130%; } }
/* Big faint icon watermark behind the row. */
.row-mark { position: absolute; z-index: -1; right: 360px; top: 50%; width: 150px; height: 150px; margin-top: -75px; color: var(--sa); opacity: .07; stroke-width: 1.2; transform: rotate(-14deg); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; pointer-events: none; }
.website-row:hover .row-mark { transform: rotate(-4deg) scale(1.12); opacity: .12; }
/* 3D icon "key": glossy face, extruded edge, gentle bob. */
.website-icon { display: block; width: 58px; height: 58px; border-radius: 17px; color: #fff; background: linear-gradient(150deg, var(--sb), var(--sa) 70%);
  box-shadow: inset 0 1px 0 #ffffff90, inset 0 -3px 0 #00000022, 0 5px 0 color-mix(in srgb, var(--sa) 72%, black), 0 12px 20px color-mix(in srgb, var(--sa) 40%, transparent);
  animation: bob 5s ease-in-out calc(var(--i, 0) * -.9s) infinite; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes bob { 50% { translate: 0 -4px; } }
.cube-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.cube-face::before { content: ""; position: absolute; inset: 0 0 50%; background: linear-gradient(180deg, #ffffff55, #ffffff00); }
.website-icon .icon { position: relative; width: 27px; height: 27px; stroke-width: 2; filter: drop-shadow(0 1px 1px #00000030); }
.website-row:hover .website-icon { transform: rotate(-9deg) scale(1.1); }
.website-copy h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.03em; }
.website-copy h3 a { transition: color .2s; }
.website-row:hover h3 a { color: color-mix(in srgb, var(--sa) 85%, black); }
.website-copy h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.website-copy p { color: var(--muted); font-size: 15.5px; line-height: 1.45; margin-top: 3px; }
.website-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 9px 0 0; padding: 0; list-style: none; color: #6f7c84; font-size: 12.5px; }
.website-meta li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px 2px 0; border-radius: 50%; background: color-mix(in srgb, var(--sa) 45%, white); }
.website-meta li:first-child { padding: 1px 9px; border-radius: 8px; background: color-mix(in srgb, var(--sa) 10%, white); color: color-mix(in srgb, var(--sa) 85%, black); font-weight: 650; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.badge.new { background: linear-gradient(135deg, #fff4cc, #ffe39a); color: #7c5600; box-shadow: 0 2px 6px #f5b80033; }
.badge.paused { background: #eceff1; color: #525d66; }
.format-tag { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 20px; background: color-mix(in srgb, var(--sa, #347C64) 10%, white); color: color-mix(in srgb, var(--sa, #347C64) 80%, black); min-width: 156px; padding: 7px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--sa, #347C64) 22%, white); }
.website-row .format-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa) 20%, white); }
.explore-button { position: relative; z-index: 2; min-height: 46px; padding-inline: 20px; font-size: 15px; font-weight: 650; }
.website-row .explore-button { color: color-mix(in srgb, var(--sa) 88%, black); border-color: color-mix(in srgb, var(--sa) 35%, white); background: #ffffffd9; box-shadow: 0 3px 0 color-mix(in srgb, var(--sa) 18%, white); }
.website-row:hover .explore-button { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sb), var(--sa)); box-shadow: 0 4px 0 color-mix(in srgb, var(--sa) 70%, black), 0 10px 18px color-mix(in srgb, var(--sa) 35%, transparent); }
.website-row:hover .explore-button .icon { transform: translate(2px, -2px); }
.topics { margin-top: 34px; }
.network-note { color: var(--muted); font-size: 15px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.topic-list li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: #fff; border: 1px solid var(--line); border-radius: 22px; font-size: 13.5px; color: #34434a; transition: transform .2s, border-color .2s; }
.topic-list li:hover { transform: translateY(-2px); border-color: #a9d8bf; }
.topic-list .icon { width: 16px; height: 16px; color: var(--green); }

/* Fresh posts */
.fresh { background: var(--mint); padding-top: 24px; }
.fresh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; background: #fff; border: 1px solid #deebe4; border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; overflow: hidden; }
.post-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sa); }
.post-card:hover { transform: translateY(-5px) rotateX(2deg); box-shadow: var(--shadow-lg); }
.post-site { display: inline-flex; align-items: center; gap: 8px; color: var(--sa); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.site-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa) 18%, white); }
.post-card strong { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.post-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.post-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 1px solid #edf2ef; color: #77838b; font-size: 12.5px; }
.post-cat { padding: 2px 9px; border-radius: 10px; background: #f0f5f2; color: #435660; }
.post-foot .icon { width: 17px; height: 17px; margin-left: auto; color: var(--green); transition: transform .2s; }
.post-card:hover .post-foot .icon { transform: translateX(4px); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 0; margin: 0; list-style: none; }
.step-marker { display: flex; align-items: center; gap: 15px; }
.step-marker::after { content: ""; height: 2px; flex: 1; background: linear-gradient(90deg, #bfe3cf, transparent); }
.steps li:last-child .step-marker::after { display: none; }
.step-copy { margin-top: 16px; padding-right: 10px; }
.step-copy h3 { font-size: 17px; line-height: 1.35; font-weight: 650; letter-spacing: -.02em; }
.step-copy p { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.rule-card { display: flex; gap: 16px; padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.rule-card.yes { background: linear-gradient(160deg, #f2fbf6, #fff 70%); }
.rule-card.no { background: linear-gradient(160deg, #fdf5f3, #fff 70%); border-color: #f0dfda; }
.rule-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; background: var(--green); color: #fff; }
.rule-card.no .rule-icon { background: #c4553b; }
.rule-icon .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.rule-card h3 { font-size: 17px; font-weight: 650; margin-top: 8px; }
.rule-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }

/* App section */
.app-section { position: relative; background: radial-gradient(120% 120% at 80% 10%, #1A4F40 0%, #123D32 55%, #0E2A22 100%); color: #fff; overflow: hidden; }
.app-glow { position: absolute; right: 8%; top: 20%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, #2cd39a40, transparent); pointer-events: none; }
.app-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; align-items: center; }
.app-copy { padding-block: 68px; position: relative; z-index: 2; }
.app-copy .eyebrow { color: #a8ebcb; }
.app-copy h2 { font-size: clamp(30px, 2.9vw, 42px); }
.app-description { color: #d4e2d9; font-size: 17px; margin-top: 12px; max-width: 34em; }
.app-features { display: grid; gap: 10px; margin: 28px 0 26px; padding: 0; list-style: none; max-width: 620px; }
.app-features li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid #ffffff1f; border-radius: 12px; background: #ffffff08; transition: background .2s, border-color .2s, transform .2s; }
.app-features li:hover { background: #ffffff10; border-color: #ffffff36; transform: translateX(4px); }
.feature-icon { width: 26px; height: 26px; color: #b6ecd1; flex: 0 0 auto; stroke-width: 1.5; }
.app-features h3 { font-size: 15.5px; line-height: 1.35; font-weight: 600; }
.app-features p { font-size: 13.5px; color: #c5d5ca; margin-top: 3px; line-height: 1.5; }
.app-availability { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.platforms { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c0eed680; border-radius: 24px; padding: 8px 16px; }
.platforms .icon { width: 17px; height: 17px; }
.coming-soon { display: inline-block; background: #baf4cf; color: #103e29; border-radius: 24px; padding: 9px 22px; font-size: 12.5px; font-weight: 650; }
.store-link { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #103e29; border-radius: 24px; padding: 9px 18px; font-weight: 650; }
.store-link .icon { width: 15px; height: 15px; }
.app-visual { position: relative; height: 470px; align-self: end; min-width: 0; }
.app-visual-canvas { width: 465px; height: 460px; position: absolute; bottom: -30px; left: 50%; margin-left: -232px; }
.submissions-phone { position: absolute; width: 258px; height: 455px; left: 47px; top: 14px; transform: rotate(9deg); box-shadow: 0 30px 60px #00170e80; }
.submissions-phone .phone-heading { padding-block: 18px; }
.submissions-phone .phone-heading strong { font-size: 17px; }
.submission-list { display: grid; gap: 9px; padding: 5px 10px; }
.submission-card { position: relative; padding: 15px 10px 34px; border: 1px solid #e9eeea; border-radius: 9px; }
.submission-card b { display: block; font-size: 9px; line-height: 1.4; }
.submission-card small { display: block; font-size: 8px; color: #758078; margin-top: 8px; }
.submission-card small span { margin-left: 4px; }
.post-status { display: inline-block; position: absolute; bottom: 9px; right: 10px; padding: 3px 7px; border-radius: 5px; font-size: 8px; font-weight: 650; }
.published { color: #07553e; background: #dbf8e5; }
.pending { color: #7c5600; background: #fff1c5; }
.draft { color: #525d66; background: #eceff1; }
.published-note { position: absolute; z-index: 4; right: 2px; top: 135px; width: 150px; padding: 18px 15px 22px; color: #18362b; background: #e0fae9; border-radius: 16px; box-shadow: 0 20px 34px #051e2860; transform: rotate(5deg); }
.published-note .check-circle { width: 38px; height: 38px; background: #347C64; color: #fff; margin-bottom: 10px; box-shadow: 0 0 0 5px #BDE7D2; }
.published-note .check-circle .icon { width: 20px; height: 20px; }
.published-note strong { display: block; font-size: 16px; }
.published-note p { font-size: 12px; margin-top: 6px; line-height: 1.6; color: #527063; }
.note-spark { position: absolute; width: 51px; height: 48px; right: -24px; top: -35px; color: #c1f3d6; stroke-width: 3px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.3fr; gap: 64px; }
.faq-heading > p:not(.eyebrow) { color: var(--muted); margin-top: 12px; font-size: 16px; }
.help-card { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; max-width: 340px; }
.help-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.help-card .icon { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.help-card span { display: grid; font-size: 14px; color: var(--green); }
.help-card b { color: var(--ink); font-weight: 650; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 4px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; transition: color .15s; }
.faq-list summary:hover { color: var(--green); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-indicator { width: 28px; height: 28px; position: relative; flex-shrink: 0; border-radius: 50%; background: #f0f6f2; transition: background .2s, transform .3s; }
.faq-indicator::before, .faq-indicator::after { content: ""; width: 12px; height: 2px; border-radius: 2px; position: absolute; top: 13px; left: 8px; background: #516769; transition: transform .3s; }
.faq-indicator::after { transform: rotate(90deg); }
.faq-list details[open] .faq-indicator { background: var(--green); }
.faq-list details[open] .faq-indicator::before { background: #fff; }
.faq-list details[open] .faq-indicator::after { transform: rotate(0); background: #fff; }
.faq-list details > p { color: var(--muted); font-size: 15px; line-height: 1.7; padding: 0 48px 20px 4px; }
.faq-list details a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* Closing call to action */
.closing { padding-bottom: 72px; }
.closing-card { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; padding: 44px 48px; border-radius: 26px; background: linear-gradient(135deg, #e3f6ea, #f6f3e2); border: 1px solid #d7ebdf; overflow: hidden; box-shadow: var(--shadow-md); }
.closing-card::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; border: 1px dashed #A9D9C3; }
.closing-card h2 { font-size: clamp(28px, 2.6vw, 38px); }
.closing-card p { color: var(--muted); margin-top: 10px; font-size: 16px; }
.closing-sites { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; justify-content: flex-end; }
.closing-sites a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, color .2s; }
.closing-sites a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--sa); }
.closing-sites .icon { width: 17px; height: 17px; color: var(--sa); }

/* Local developer panel (APP_ENV=local only) */
.dev { padding-bottom: 48px; }
.dev-card { padding: 22px 26px; border: 1px dashed #b9c9c0; border-radius: 16px; background: #f6f8f7; font-size: 14px; }
.dev-card h2 { font-family: var(--sans); font-size: 16px; letter-spacing: 0; font-weight: 700; }
.dev-card h2 span { margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: #fff1c5; color: #7c5600; font-size: 11px; font-weight: 600; }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.dev-grid ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.9; }
.dev-grid a { color: var(--green); text-decoration: underline; }
.dev-grid .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* Footer */
.site-footer { padding-bottom: 28px; }
.footer-inner { display: flex; align-items: center; gap: 22px; min-height: 92px; border-top: 1px solid var(--line); }
.footer-brand { font-size: 21px; }
.footer-brand img { width: 34px; height: 34px; border-radius: 9px; }
.footer-tagline { color: var(--muted); font-size: 12.5px; padding-right: 24px; border-right: 1px solid var(--line); }
.footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; color: var(--muted); font-size: 13px; }
.footer-nav a { padding: 8px 0; }
.footer-nav a:hover { color: var(--green); }
.copyright { color: var(--muted); font-size: 12px; white-space: nowrap; padding-left: 20px; border-left: 1px solid var(--line); }

/* Scroll reveal (only when JS runs; content is always visible without it) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .website-row.reveal { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.js .website-row.reveal.in { animation: row-in .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .12s) backwards; }
.js .website-row.reveal.in:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@keyframes row-in { from { opacity: 0; transform: translateY(40px) rotateX(-24deg) scale(.97); } }
.js .post-card.reveal.in:hover { transform: translateY(-5px) rotateX(2deg); }
.js .steps li:nth-child(2), .js .fresh-grid > :nth-child(3n+2) { transition-delay: .08s; }
.js .steps li:nth-child(3), .js .fresh-grid > :nth-child(3n) { transition-delay: .16s; }
.js .steps li:nth-child(4) { transition-delay: .24s; }

/* Tablet: illustrations scale as a whole, not as tiny fluid text. */
@media (max-width: 1199px) {
  .container { width: calc(100% - 64px); }
  .header-inner { gap: 24px; }
  .main-nav { gap: 24px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(46px, 5.1vw, 62px); }
  .hero-description { font-size: 18px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { padding-inline: 20px; font-size: 15px; }
  .trust-list { gap: 14px; font-size: 12px; margin-top: 32px; }
  .hero-visual { height: 460px; }
  .visual-canvas { transform: scale(.84); transform-origin: 50% 0; }
  .website-row { grid-template-columns: 54px minmax(0, 1fr) 150px 128px; gap: 18px; }
  .website-icon { width: 54px; height: 54px; }
  .row-mark { right: 250px; }
  .format-tag { min-width: 0; }
  .proof-list li { padding: 18px 12px; }
  .proof-list strong { font-size: 26px; }
  .app-visual-canvas { transform: scale(.87); transform-origin: 50% 100%; }
  .footer-inner { flex-wrap: wrap; gap: 12px 22px; padding-top: 24px; }
  .footer-nav { order: 3; width: 100%; margin-left: 0; }
  .copyright { margin-left: auto; border: none; padding-left: 0; }
  .footer-tagline { border: none; padding: 0; }
}
@media (max-width: 959px) {
  .section { padding-block: 60px; }
  .header-cta { display: none; }
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 13.5px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: 680px; }
  .hero h1 { font-size: 66px; }
  .hero-description { font-size: 19px; }
  .hero-visual { height: 530px; }
  .visual-canvas { transform: none; }
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .proof-list li:nth-child(4) { border-left: none; }
  .proof-list li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .website-row { grid-template-columns: 54px minmax(0, 1fr) auto; row-gap: 10px; }
  .row-mark { right: 130px; }
  .website-icon { grid-row: 1 / 3; align-self: start; }
  .website-copy { grid-column: 2; }
  .website-row .format-tag { grid-column: 2; grid-row: 2; }
  .explore-button { grid-column: 3; grid-row: 1 / 3; }
  .fresh-grid { grid-template-columns: 1fr 1fr; }
  .section-head.split { display: block; }
  .section-head.split .section-description { margin-top: 12px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .steps li:nth-child(2) .step-marker::after { display: none; }
  .app-grid { grid-template-columns: 1.2fr .85fr; gap: 10px; }
  .app-visual-canvas { transform: scale(.75); left: 44%; bottom: 0; }
  .faq-grid { gap: 36px; grid-template-columns: .85fr 1.2fr; }
  .closing-card { grid-template-columns: 1fr; padding: 36px; }
  .closing-sites { justify-content: flex-start; }
}
@media (max-width: 639px) {
  html { scroll-padding-top: 112px; }
  .container { width: calc(100% - 32px); }
  .section { padding-block: 48px; }
  .header-inner { flex-wrap: wrap; gap: 0; padding-top: 12px; min-height: 0; }
  .brand img { width: 168px; height: auto; }
  .main-nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; }
  .main-nav a { padding: 10px 0 12px; font-size: 13.5px; }
  .hero { padding-block: 28px 24px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .16em; }
  .hero h1 { font-size: clamp(42px, 11.3vw, 64px); }
  .hero h1 em { white-space: normal; }
  .hero-description { font-size: 16.5px; margin-top: 18px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 16px; margin-top: 24px; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .trust-list { gap: 10px 16px; margin-top: 24px; font-size: 12px; }
  .hero-visual { height: 330px; perspective: none; }
  .visual-canvas { transform: scale(.6); transform-origin: 50% 0; }
  .count-badge { left: 40px; }
  h2 { font-size: 33px; }
  .section-description { font-size: 16px; }
  .proof { padding-top: 8px; }
  .proof-list { grid-template-columns: 1fr 1fr; }
  .proof-list li { padding: 14px 10px; }
  .proof-list li:nth-child(n) { border-left: none; border-top: 1px solid var(--line); }
  .proof-list li:nth-child(-n+2) { border-top: none; }
  .proof-list li:nth-child(even) { border-left: 1px solid var(--line); }
  .proof-list li:last-child { grid-column: 1 / -1; border-left: none; }
  .proof-list strong { font-size: 24px; }
  .network { margin-top: 32px; }
  .website-row { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 14px; padding: 20px 16px 20px 20px; }
  .website-icon { width: 48px; height: 48px; grid-row: 1; border-radius: 14px; }
  .website-icon .icon { width: 23px; height: 23px; }
  .row-mark { right: -24px; top: auto; bottom: -30px; margin-top: 0; width: 130px; height: 130px; }
  .website-copy h3 { font-size: 18px; }
  .website-copy p { font-size: 14.5px; }
  .website-meta { gap: 2px 12px; }
  .website-meta li + li::before { display: none; }
  .website-row .format-tag { grid-column: 2; grid-row: 2; justify-self: start; font-size: 12px; padding: 4px 12px; }
  .explore-button { grid-column: 2; grid-row: 3; justify-self: start; min-height: 42px; font-size: 14px; }
  .fresh-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps li { display: grid; grid-template-columns: 50px 1fr; gap: 16px; }
  .step-marker::after { display: none; }
  .step-copy { margin-top: 2px; }
  .rules { grid-template-columns: 1fr; margin-top: 32px; }
  .app-grid { grid-template-columns: 1fr; gap: 0; }
  .app-copy { padding-block: 48px 8px; }
  .app-copy h2 { font-size: 34px; }
  .app-description { font-size: 16px; }
  .app-features li { padding: 13px 12px; }
  .app-visual { height: 360px; }
  .app-visual-canvas { left: 50%; bottom: -24px; transform: scale(.8); }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-list summary { font-size: 15px; }
  .faq-list details > p { font-size: 14.5px; padding-right: 8px; }
  .closing-card { padding: 28px 22px; border-radius: 20px; }
  .closing-sites a { font-size: 13px; padding: 9px 13px; }
  .dev-grid { grid-template-columns: 1fr; }
  .footer-nav { gap: 4px 16px; }
  .copyright { margin-left: 0; width: 100%; order: 4; }
}
@media (max-width: 374px) {
  .visual-canvas { transform: scale(.51); }
  .hero-visual { height: 284px; }
  .app-visual-canvas { transform: scale(.68); }
  .app-visual { height: 306px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header { position: static; }
  .hero-visual, .app-visual, .skip-link, .dev, .hero-glow, .app-glow { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .app-section { background: #fff; color: var(--ink); }
  .app-description, .app-features p, .app-copy .eyebrow { color: var(--muted); }
}

/* =====================================================================
   Section rhythm v2: light hero → dark stats band → mint network →
   dark "fresh" → warm cream steps → dark green app → lavender FAQ →
   gradient call to action → dark footer. Each colour (--sa/--sb) is a
   landing-only tone shared with the website rows.
   ===================================================================== */

/* Hero: soft mesh, dot grid and a pastel blob */
.hero { background: linear-gradient(180deg, #F7F6F0 0%, #EEF4EF 100%); }
.hero-dots { position: absolute; inset: 0; background-image: radial-gradient(#347C6426 1.1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 55% 60% at 72% 45%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 60% at 72% 45%, #000 10%, transparent 70%); pointer-events: none; }
.hero-blob { position: absolute; left: -140px; bottom: -160px; width: 520px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, #e8e4ff, #fdeedd88 60%, transparent); filter: blur(10px); pointer-events: none; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { translate: 60px -30px; } }

/* Dark stats band with glowing tiles */
.proof { position: relative; padding-block: 34px; background: linear-gradient(120deg, #0b1f19 0%, #0f2b23 50%, #14213a 100%); overflow: hidden; }
.proof-glow { position: absolute; inset: 0; background: radial-gradient(300px 120px at 15% 50%, #347C6433, transparent), radial-gradient(300px 120px at 85% 50%, #6366f133, transparent); pointer-events: none; }
.proof .container { position: relative; }
.proof-list { grid-template-columns: repeat(5, 1fr); gap: 14px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.proof-list li, .proof-list li + li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; border: 1px solid #ffffff14; border-radius: 16px; background: linear-gradient(160deg, #ffffff0f, #ffffff05); transition: transform .3s, border-color .3s, background .3s; }
.proof-list li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sb) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--sa) 22%, transparent), #ffffff05); }
.proof-list .proof-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; color: #fff; background: linear-gradient(150deg, var(--sb), var(--sa) 75%); box-shadow: inset 0 1px 0 #ffffff80, 0 4px 0 color-mix(in srgb, var(--sa) 65%, black), 0 10px 22px color-mix(in srgb, var(--sa) 45%, transparent); }
.proof-icon .icon { width: 21px; height: 21px; stroke-width: 2; }
.proof-list li > div { display: grid; }
.proof-list strong { font-size: 28px; color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--sb) 55%, transparent); }
.proof-list span { color: #a9b9b2; font-size: 12.5px; }
.network { margin-top: 0; }

/* Topic chips pick up the same palette in turn */
.topic-list li:nth-child(5n+1) { --sa: #347C64; } .topic-list li:nth-child(5n+2) { --sa: #d97706; } .topic-list li:nth-child(5n+3) { --sa: #4f46e5; }
.topic-list li:nth-child(5n+4) { --sa: #0284c7; } .topic-list li:nth-child(5n+5) { --sa: #db2777; }
.topic-list li { box-shadow: 0 2px 0 color-mix(in srgb, var(--sa) 14%, white); border-color: color-mix(in srgb, var(--sa) 18%, white); }
.topic-list li:hover { background: color-mix(in srgb, var(--sa) 8%, white); border-color: color-mix(in srgb, var(--sa) 40%, white); color: color-mix(in srgb, var(--sa) 80%, black); }
.topic-list .icon { color: var(--sa); }

/* Dark sections share these text colours */
.dark { color: #e6ecf5; }
.dark h2 { color: #fff; }
.dark .eyebrow { color: #6ee7b7; }
.dark .section-description { color: #a3afc2; }

/* "Fresh" posts: deep ink section, glowing orbs, glass cards */
.fresh { position: relative; overflow: hidden; padding-top: 76px; background: linear-gradient(160deg, #0b1220 0%, #111a33 55%, #0d1f24 100%); }
.orbs { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: drift 16s ease-in-out infinite alternate; }
.orb.o1 { width: 380px; height: 380px; left: -100px; top: -80px; background: #347C64; }
.orb.o2 { width: 340px; height: 340px; right: -80px; top: 30%; background: #6366f1; animation-duration: 20s; }
.orb.o3 { width: 300px; height: 300px; left: 40%; bottom: -160px; background: #ec4899; opacity: .3; animation-duration: 24s; }
.fresh .container { position: relative; }
.fresh-grid { perspective: 1200px; }
.post-card { background: linear-gradient(165deg, #ffffff12, #ffffff06); border: 1px solid #ffffff1a; box-shadow: 0 10px 30px #00000040; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; isolation: isolate; }
.post-card::before { height: 3px; background: linear-gradient(90deg, var(--sa), var(--sb)); }
.post-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--sb) 24%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; }
.post-card:hover::after { opacity: 1; }
.post-card:hover, .js .post-card.reveal.in:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: color-mix(in srgb, var(--sb) 50%, transparent); box-shadow: 0 24px 50px #00000066, 0 0 0 1px color-mix(in srgb, var(--sb) 25%, transparent); }
.post-site { color: var(--sb); letter-spacing: .05em; }
.post-site-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(150deg, var(--sb), var(--sa)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sa) 60%, black); }
.post-site-icon .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.post-card strong { color: #fff; }
.post-card p { color: #b3bdcc; }
.post-foot { border-top-color: #ffffff14; color: #8f9bb0; }
.post-cat { background: color-mix(in srgb, var(--sa) 25%, transparent); color: #e7edf6; }
.post-foot .icon { color: var(--sb); }

/* How it works: warm cream with colourful step cards */
.how-it-works { background: linear-gradient(180deg, #fbf6ea 0%, #fdfaf2 100%); position: relative; }
.how-it-works::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#d97a0614 1.1px, transparent 1.6px); background-size: 24px 24px; pointer-events: none; }
.how-it-works .container { position: relative; }
.how-it-works .eyebrow { color: #b45309; }
.steps { gap: 20px; counter-reset: none; }
.step { position: relative; padding: 24px 22px 26px; border-radius: 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--sa) 18%, white); box-shadow: 0 5px 0 color-mix(in srgb, var(--sa) 22%, white), 0 16px 30px color-mix(in srgb, var(--sa) 12%, transparent); transition: transform .3s, box-shadow .3s; overflow: hidden; }
.step::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sb) 25%, transparent), transparent); }
.js .step.reveal.in:hover, .step:hover { transform: translateY(-6px); box-shadow: 0 9px 0 color-mix(in srgb, var(--sa) 30%, white), 0 26px 40px color-mix(in srgb, var(--sa) 20%, transparent); }
.step-marker { justify-content: space-between; }
.step-marker::after, .steps li:last-child .step-marker::after { display: none; }
.step-marker > .step-key { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: linear-gradient(150deg, var(--sb), var(--sa) 75%); box-shadow: inset 0 1px 0 #ffffff80, 0 5px 0 color-mix(in srgb, var(--sa) 65%, black), 0 12px 22px color-mix(in srgb, var(--sa) 40%, transparent); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.step:hover .step-key { transform: rotate(-8deg) scale(1.08); }
.step-key .icon { width: 25px; height: 25px; stroke-width: 2; }
.step-marker em { font-family: var(--serif); font-style: normal; font-size: 46px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--sa) 22%, white); position: relative; z-index: 1; }
.step-copy { margin-top: 18px; padding: 0; }
.step-copy h3 { font-size: 18px; }
.rule-card.yes { box-shadow: 0 5px 0 #c4ebd5, 0 16px 30px #347C6414; border-color: #cfeedd; }
.rule-card.no { box-shadow: 0 5px 0 #f4d3ca, 0 16px 30px #c4553b12; }
.rule-card { transition: transform .3s; }
.rule-card:hover { transform: translateY(-4px); }
.rule-icon { background: linear-gradient(150deg, #8FCBB0, #347C64); box-shadow: 0 4px 0 #0A2C24; }
.rule-card.no .rule-icon { background: linear-gradient(150deg, #fb7185, #c4553b); box-shadow: 0 4px 0 #8f3626; }

/* App: dark green with a faint grid and coloured feature keys */
.app-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 75%); pointer-events: none; }
.feature-key { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(150deg, var(--sb), var(--sa) 75%); box-shadow: inset 0 1px 0 #ffffff70, 0 4px 0 color-mix(in srgb, var(--sa) 60%, black); }
.feature-key .feature-icon { width: 22px; height: 22px; color: #fff; stroke-width: 2; }
.app-features li:hover { border-color: color-mix(in srgb, var(--sb) 45%, transparent); }

/* FAQ: light lavender, answers as cards */
.faq-section { background: linear-gradient(180deg, #f5f3ff 0%, #f1f6fb 100%); }
.faq-section .eyebrow { color: #4f46e5; }
.faq-list details, .faq-list details:last-child { margin-bottom: 10px; padding: 0 18px; border: 1px solid #e3e1f5; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #e7e4fb; transition: box-shadow .25s, border-color .25s; }
.faq-list details:hover { border-color: #c7c2f3; }
.faq-list details[open] { border-color: #a5b4fc; box-shadow: inset 4px 0 0 #6366f1, 0 4px 0 #dcd8fb, 0 14px 30px #4f46e514; }
.faq-list summary:hover { color: #4338ca; }
.faq-list details[open] .faq-indicator { background: linear-gradient(150deg, #818cf8, #4f46e5); }
.faq-list details > p { padding-left: 4px; }
.faq-list details a { color: #4338ca; }
.help-card { border: 0; color: #fff; background: linear-gradient(135deg, #347C64, #0d9488 50%, #4f46e5); box-shadow: 0 5px 0 #0b5d55, 0 16px 30px #0d948830; }
.help-card .icon { background: #ffffff26; color: #fff; }
.help-card span, .help-card b { color: #fff; }

/* Closing: vivid gradient card with glass chips */
.closing { background: #f1f6fb; padding-top: 8px; }
.closing-card { color: #fff; border: 0; background: linear-gradient(120deg, #064e3b 0%, #047857 30%, #0d9488 55%, #4338ca 100%); box-shadow: 0 8px 0 #0b3b4e, 0 30px 60px #0d3b4e40; }
.closing-card::after { border-color: #ffffff30; }
.closing-card h2 { color: #fff; }
.closing-card p { color: #d1f5e8; }
.closing-card .eyebrow { color: #a7f3d0; }
.closing-shape { position: absolute; border-radius: 50%; pointer-events: none; }
.closing-shape.s1 { width: 180px; height: 180px; left: -60px; top: -70px; background: #ffffff14; animation: drift 14s ease-in-out infinite alternate; }
.closing-shape.s2 { width: 90px; height: 90px; right: 30%; top: -30px; border: 2px solid #ffffff26; animation: drift 10s ease-in-out infinite alternate-reverse; }
.closing-shape.s3 { width: 240px; height: 240px; right: -70px; top: -90px; background: radial-gradient(closest-side, #f472b655, transparent); }
.closing-sites a { color: #fff; background: #ffffff1a; border: 1px solid #ffffff33; box-shadow: 0 4px 0 #00000026; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 8px 14px 8px 8px; }
.closing-sites a:hover { color: color-mix(in srgb, var(--sa) 85%, black); background: #fff; }
.chip-key { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--sb), var(--sa)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sa) 60%, black); }
.chip-key .icon, .closing-sites .chip-key .icon { width: 16px; height: 16px; color: #fff; stroke-width: 2.2; }
.closing-sites .go { width: 15px; height: 15px; color: currentColor; opacity: .7; transition: transform .2s; }
.closing-sites a:hover .go { transform: translateX(3px); }
.dev { background: #f1f6fb; padding-top: 0; }

/* Dark footer with columns */
.site-footer { position: relative; padding: 0; background: #08130f; color: #a6b5ad; }
.site-footer::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #347C64, #d97706, #4f46e5, #0284c7, #db2777); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; }
.footer-brand { color: #fff; font-size: 22px; }
.footer-brand b { color: #BDE7D2; }
.footer-brand img { width: 38px; height: 38px; }
.footer-tagline, .footer-tagline:where(*) { margin: 14px 0 0; padding: 0; border: 0; max-width: 330px; color: #a6b5ad; font-size: 14px; line-height: 1.65; }
.footer-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 9px 14px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff17; color: #d9f5e8; font-size: 13.5px; transition: background .2s; }
.footer-mail:hover { background: #ffffff1a; }
.footer-mail .icon { width: 17px; height: 17px; color: #BDE7D2; }
.footer-col { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.footer-col h3 { margin-bottom: 4px; color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.footer-col a { display: inline-flex; align-items: center; gap: 9px; width: fit-content; transition: color .2s, transform .2s; }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-col .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sa); box-shadow: 0 0 10px var(--sa); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-block: 20px 26px; border-top: 1px solid #ffffff12; color: #7d8d85; font-size: 12.5px; }

@media (max-width: 1199px) {
  .proof-list strong { font-size: 24px; }
  .proof-list li, .proof-list li + li { padding: 14px; gap: 12px; }
  .proof-icon { width: 40px; height: 40px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
}
@media (max-width: 959px) {
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .proof-list li:nth-child(n) { border: 1px solid #ffffff14; }
  .steps { gap: 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .proof { padding-block: 22px; }
  .proof-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .proof-list li:nth-child(n) { border: 1px solid #ffffff14; padding: 12px; }
  .proof-list li:last-child { grid-column: 1 / -1; }
  .fresh { padding-top: 52px; }
  .steps li.step { display: block; }
  .step-marker em { font-size: 38px; }
  .closing-sites a { padding: 7px 12px 7px 7px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 28px; }
  .footer-col:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .footer-col:last-child h3 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .hero-blob, .closing-shape { animation: none !important; }
}
@media print {
  .site-footer, .proof, .fresh { background: #fff; color: var(--ink); }
}

/* ===== App download: 3D store badges in the hero and the app section ===== */
.hero-app { margin-top: 28px; }
.hero-app-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.hero-app-kicker .icon { width: 18px; height: 18px; }
.hero-app-kicker span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.store-badges { position: relative; display: flex; flex-wrap: wrap; gap: 14px; perspective: 900px; }
.store-badges::before { content: ""; position: absolute; inset: -18px -10px; border-radius: 30px; background: radial-gradient(60% 80% at 30% 50%, #347C6433, transparent 70%); filter: blur(10px); pointer-events: none; opacity: .9; transition: opacity .3s; }
.store-badge { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 20px 9px 12px; border-radius: 14px; color: #fff; text-decoration: none; isolation: isolate; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #2b3340, #0b0f17 60%, #05070b); border: 1px solid #ffffff22;
  box-shadow: inset 0 1px 0 #ffffff33, 0 6px 0 #000000, 0 14px 26px -8px #0b0f1780, 0 0 0 1px #00000040;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; animation: badge-float 6s ease-in-out infinite; }
.store-badge:nth-child(2) { animation-delay: -3s; }
@keyframes badge-float { 50% { translate: 0 -5px; } }
.store-badge::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, #ffffff26 50%, transparent); transform: skewX(-20deg); animation: badge-sweep 6s ease-in-out infinite; pointer-events: none; }
.store-badge:nth-child(2)::after { animation-delay: 2s; }
@keyframes badge-sweep { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.store-badge:hover { transform: translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: inset 0 1px 0 #ffffff40, 0 9px 0 #000000, 0 24px 40px -10px #0b0f17a0, 0 0 0 1px #00000040, 0 0 40px #347C6455; animation-play-state: paused; }
.store-badge:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff33, 0 2px 0 #000, 0 6px 12px -6px #0b0f1780; }
.store-badges:hover::before { opacity: 1; }
.store-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: #ffffff14; box-shadow: inset 0 1px 0 #ffffff22; }
.store-icon svg { width: 26px; height: 26px; stroke: none; fill: #fff; }
.store-text { display: grid; line-height: 1.1; }
.store-text small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #cbd5e1; }
.store-text strong { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.store-badges-lg .store-badge { min-height: 64px; padding: 10px 24px 10px 14px; border-radius: 16px; }
.store-badges-lg .store-icon { width: 44px; height: 44px; }
.store-badges-lg .store-icon svg { width: 28px; height: 28px; }
.store-badges-lg .store-text strong { font-size: 21px; }
.store-badge.is-soon { cursor: default; }
.store-badge.is-soon .store-text strong, .store-badge.is-soon .store-icon { opacity: .85; }
.store-ribbon { position: absolute; top: 9px; right: -26px; width: 92px; padding: 2px 0; transform: rotate(38deg); background: linear-gradient(90deg, #8FCBB0, var(--green)); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; box-shadow: 0 2px 6px #00000066; }
.app-section .store-badges::before { background: radial-gradient(60% 80% at 30% 50%, #ffffff1f, transparent 70%); }
.app-section .store-badge { border-color: #ffffff30; }
.hero .hero-actions { margin-top: 22px; }
.hero .hero-actions .button { min-height: 48px; padding: 10px 20px; font-size: 15px; }
@media (max-width: 639px) {
  .store-badges { gap: 10px; }
  .store-badge, .store-badges-lg .store-badge { width: 100%; min-height: 58px; animation: none; }
  .hero-app-kicker span { display: block; margin-top: 2px; }
  .hero .hero-actions .button { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .store-badge, .store-badge::after { animation: none !important; }
}