/* postlikeyou. static site.
   Direction: warm ivory canvas, soft orange light behind frosted "liquid glass"
   panels, heavy Space Grotesk display type, one accent. Glass is used where
   something sits in front of light (header, hero device, pricing, band), not
   on every box. Fallbacks for no backdrop-filter and reduced transparency. */

:root {
  /* Theme: two mild colors (canvas + ink) and one pop. Swap these to re-theme. */
  --pop: #d9ff3a;           /* lime */
  --pop-hi: #eaff7a;
  --pop-mid: #e3ff5c;
  --pop-dark: #7f9c00;      /* only for small marks on light backgrounds */
  --pop-deep: #a7cc10;
  --pop-soft: #f1ffbf;
  --pop-glow: rgba(217, 255, 58, .45);
  --pop-rgb: 217, 255, 58;
  --pop-text: #0f1526;      /* text on solid pop: navy */
  --light-1: #e4e9fb;       /* ambient light fields on cream */
  --light-2: #eef0f8;
  --light-3: #e9edf7;
  --light-4: #f1f4fb;
  --orange: var(--pop);
  --orange-dark: var(--pop-dark);
  --orange-soft: var(--pop-soft);
  --orange-glow: var(--pop-glow);
  --ink: #141b2d;           /* midnight navy */
  --ink-soft: #2b3247;
  --ivory: #f6f4ee;         /* cream */
  --ivory-dark: #ebe8df;
  --paper: #fffefb;
  --muted: #6b7084;
  --line: #e2e0d7;
  --line-strong: #cbc8bd;
  --navy: #0f1526;
  --navy-2: #1b2340;
  --navy-glow: #1d2a52;
  --on-navy: #f6f4ee;
  --success: #1f7a3f;
  --success-soft: #e3f3e8;
  --warning: #9a6700;
  --warning-soft: #fff4d6;
  --danger: #b42318;
  --danger-soft: #fde8e6;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(24,24,24,.04), 0 10px 30px -18px rgba(24,24,24,.22);
  --section: clamp(72px, 9vw, 120px);
  --max: 1160px;
  /* glass tokens */
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 100%);
  --glass-bg-strong: linear-gradient(135deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.52) 100%);
  --glass-border: rgba(255,255,255,.75);
  --glass-edge: rgba(24,24,24,.08);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(24,24,24,.03) inset, 0 24px 60px -28px rgba(24,24,24,.28);
  --glass-blur: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-up, .float, .float-slow { animation: none !important; } }
body {
  margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh; position: relative; overflow-x: clip;
}
main { flex: 1; position: relative; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 4px; }
::selection { background: var(--orange-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

/* Ambient light: three soft orange fields behind everything. Glass refracts these. */
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.ambient .a1 { width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; right: -14vw; top: -12vw; background: radial-gradient(closest-side, var(--light-1) 0%, transparent 72%); }
.ambient .a2 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; left: -16vw; top: 30%; background: radial-gradient(closest-side, var(--light-2) 0%, transparent 72%); opacity: .5; }
.ambient .a4 { width: 44vw; height: 44vw; max-width: 600px; max-height: 600px; right: -12vw; top: 58%; background: radial-gradient(closest-side, var(--light-4) 0%, transparent 72%); opacity: .45; }
.ambient .a3 { width: 48vw; height: 48vw; max-width: 640px; max-height: 640px; left: -8vw; bottom: 4%; background: radial-gradient(closest-side, var(--light-3) 0%, transparent 72%); opacity: .4; }
@media (max-width: 640px) { .ambient i { filter: blur(48px); } .ambient .a1 { width: 110vw; height: 110vw; right: -40vw; top: -20vw; } }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--ink); text-wrap: balance; line-height: 1.06; }
h1 { font-size: clamp(2.75rem, 6.6vw, 4.9rem); line-height: .98; letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.35rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
h4 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--pop); border-radius: 2px; box-shadow: 0 0 0 1px rgba(22,22,22,.08); }
.card .eyebrow::before, .card-flat .eyebrow::before, .card-ivory .eyebrow::before, .footer-nav .eyebrow::before, .post .eyebrow::before, .sample-card .eyebrow::before { display: none; }
.card .eyebrow, .card-flat .eyebrow, .card-ivory .eyebrow, .footer-nav .eyebrow { color: var(--muted); }
.orange { color: var(--orange); }
/* The signature: a highlighter stroke, ink text on acid yellow. */
h1 .orange, h2 .orange, .hl { color: var(--ink); background: linear-gradient(transparent 56%, var(--pop) 56%, var(--pop) 95%, transparent 95%); padding: 0 .06em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
section { width: 100%; }
.deliver > *, .two > *, .pair > *, .grid-3 > *, .price-grid > *, .faq-grid > *, .stat-grid > *, .pillars > *, .row > *, .hero-grid > * { min-width: 0; }
.section { padding: var(--section) 0; }
.section-alt { position: relative; background: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.8); border-bottom: 1px solid rgba(227,225,218,.6); }
.head { max-width: 680px; }
.head p { margin-top: 16px; }

/* Glass -------------------------------------------------------------- */
.glass, .glass-strong {
  position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-radius: var(--r-lg);
}
.glass-strong { background: var(--glass-bg-strong); }
.glass::before, .glass-strong::before {
  /* specular streak along the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; mask: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.8) 100%); -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.8) 100%);
}
.glass > *, .glass-strong > * { position: relative; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,.86); }
  .glass-strong, .site-header .bar { background: rgba(255,255,255,.95); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong, .site-header .bar { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ambient { display: none; }
}

/* Buttons ------------------------------------------------------------ */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .15s, border-color .15s, color .15s; font-family: inherit; position: relative; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--pop-mid) 0%, var(--pop) 55%, var(--pop-deep) 100%); color: var(--pop-text); border-color: rgba(22,22,22,.12); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.06) inset, 0 10px 24px -10px var(--orange-glow); }
.btn-primary:hover { background: linear-gradient(180deg, var(--pop) 0%, var(--pop-deep) 60%, #c4de00 100%); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.12) inset, 0 14px 30px -10px var(--orange-glow); }
.btn-secondary { background: rgba(255,255,255,.55); color: var(--ink); border-color: rgba(24,24,24,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
.btn-secondary:hover { border-color: var(--ink); background: rgba(255,255,255,.8); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--ink-soft); }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Header: floating glass bar ------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 40; padding: 12px 0; }
.site-header .wrap { display: flex; }
.site-header .bar { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 10px 8px 16px; border-radius: var(--r-pill); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.045em; line-height: 1; color: var(--ink); }
.logo .dot { color: var(--ink); }
.logo svg { flex: none; }
.nav { display: none; gap: 4px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-soft); padding: 8px 12px; border-radius: var(--r-pill); transition: background .15s, color .15s; }
.nav a:hover { color: var(--ink); background: rgba(24,24,24,.06); }
@media (min-width: 900px) { .nav { display: flex; } }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-actions .ghost { display: none; }
@media (min-width: 640px) { .header-actions .ghost { display: inline-flex; } }

/* Hero ---------------------------------------------------------------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); overflow: visible; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } }
.hero h1 { max-width: 12ch; }
.hero .lead { max-width: 560px; margin-top: 26px; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; align-items: center; gap: 20px; } }
.hero-note { margin-top: 22px; font-size: .9rem; color: var(--muted); }
.works { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.works span { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; color: var(--ink-soft); padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--glass-edge); }
.works svg { width: 16px; height: 16px; }

/* Hero visual: a tilted orange slab with a frosted device in front */
.hero-visual { position: relative; min-height: 460px; }
@media (min-width: 960px) { .hero-visual { min-height: 580px; } }
.slab { position: absolute; inset: 8% 4% 10% 10%; border-radius: 36px; background: linear-gradient(145deg, var(--pop-hi) 0%, var(--pop) 45%, var(--pop-dark) 100%); transform: rotate(-7deg); box-shadow: 0 40px 80px -30px rgba(var(--pop-rgb),.5); }
.slab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%); }
.device { position: absolute; left: 0; right: 10%; top: 4%; bottom: auto; border-radius: 22px; padding: 18px 18px 20px; overflow: hidden; transform: rotate(-2deg); animation: float 7s ease-in-out infinite; }
@media (min-width: 960px) { .device { left: -4%; right: 14%; } }
.device .bar-dots { display: flex; gap: 6px; }
.device .bar-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(24,24,24,.12); }
.device .bar-dots i:first-child { background: var(--pop); box-shadow: 0 0 0 1px rgba(22,22,22,.15); }
.device h3 { margin-top: 14px; font-size: 1.15rem; }
.device .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.files { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.files li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset; }
.files li svg { width: 14px; height: 14px; flex: none; color: var(--ink); }
.files li .st { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 99px; }
.files li .st.soon { color: var(--muted); background: var(--ivory-dark); }
.chatline { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--ivory); font-family: var(--mono); font-size: 12.5px; }
.chatline .cursor { width: 7px; height: 14px; background: var(--pop); animation: blink 1.1s steps(2) infinite; }
.note { position: absolute; right: -2%; bottom: -1%; width: min(240px, 70%); padding: 16px 18px; border-radius: 16px; transform: rotate(4deg); animation: float-slow 9s ease-in-out infinite; }
.note .eyebrow { margin-bottom: 8px; color: var(--muted); }
.note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; font-weight: 500; }
.note li { display: flex; align-items: center; gap: 8px; }
.note li i { width: 16px; height: 16px; border-radius: 5px; background: var(--ink); flex: none; position: relative; }
.note li i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--pop); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pill-float { position: absolute; left: 2%; top: -4%; padding: 10px 14px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; animation: float-slow 8s ease-in-out 1s infinite; }
.pill-float i { width: 8px; height: 8px; border-radius: 50%; background: var(--pop-deep); box-shadow: 0 0 0 4px rgba(214,240,0,.3); }
@keyframes float { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes float-slow { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
.pill-float { animation-name: float-pill; }
@keyframes float-pill { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { to { visibility: hidden; } }
.chatline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.files li .st { white-space: nowrap; }
@media (max-width: 959px) {
  .hero-visual { min-height: 0; padding: 36px 0 8px; }
  .slab { inset: 14% 0 0 12%; border-radius: 28px; }
  .hero-visual { overflow: visible; }
  .hero { overflow: hidden; }
  .device { position: relative; left: 0; right: 0; margin: 0 8% 0 0; transform: rotate(-1.5deg); }
  .note { display: none; }
  .pill-float { top: 0; left: 4%; }
  .files li { font-size: 11.5px; padding: 8px 10px; }
}

.stat-grid { display: grid; gap: 16px; margin-top: 64px; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.card-flat { background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--glass-edge); }
.card-ivory { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card .eyebrow, .card-flat .eyebrow, .card-ivory .eyebrow { margin-bottom: 8px; }

/* Steps ---------------------------------------------------------------- */
.steps { display: grid; gap: 20px; margin-top: 48px; list-style: none; padding: 0; margin-left: 0; }
@media (min-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
.steps li { display: flex; gap: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.steps .n { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--pop); box-shadow: 0 10px 20px -12px rgba(22,22,22,.5); }
.steps .n svg { width: 22px; height: 22px; }
.steps .k { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .12em; }
.steps h3 { font-size: 1.2rem; margin-top: 2px; }
.steps p { margin-top: 8px; color: var(--ink-soft); font-size: .97rem; }

/* Before / after ---------------------------------------------------- */
.pair { display: grid; gap: 20px; margin-top: 40px; position: relative; }
@media (min-width: 960px) { .pair { grid-template-columns: 1fr 1fr; gap: 28px; } }
.post { border-radius: var(--r-lg); padding: 24px; border: 1px solid var(--line); background: rgba(238,236,230,.55); position: relative; }
.post.voice { border: 1px solid rgba(22,22,22,.5); background: var(--glass-bg-strong); box-shadow: var(--glass-shadow), 0 0 0 4px rgba(var(--pop-rgb),.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.post.voice::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%); }
.post.voice > * { position: relative; z-index: 1; }
.post-top { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--muted); }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--ivory-dark); color: var(--ink-soft); }
.badge-orange { background: var(--pop); color: var(--ink); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-dark { background: var(--ink); color: var(--ivory); }
.post-body { display: flex; gap: 12px; margin-top: 20px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--line-strong); flex: none; }
.post.voice .avatar { background: var(--ink); box-shadow: 0 0 0 3px var(--pop); }
.post-text { white-space: pre-line; line-height: 1.6; }
.handle { font-size: .9rem; } .handle span { color: var(--muted); }
.verdict { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.verdict i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; flex: none; position: relative; }
.post.voice .verdict { color: var(--ink); font-weight: 600; }
.post.voice .verdict i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.post:not(.voice) .verdict i::before, .post:not(.voice) .verdict i::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: currentColor; transform: rotate(45deg); }
.post:not(.voice) .verdict i::after { transform: rotate(-45deg); }

/* Deliverables -------------------------------------------------------- */
.deliver { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 960px) { .deliver { grid-template-columns: 5fr 6fr; } }
.file-groups h4 { margin-top: 24px; font-family: var(--sans); font-weight: 600; font-size: .95rem; }
.file-groups h4:first-child { margin-top: 0; }
.file-groups ul { list-style: none; padding: 0; margin: 10px 0 0; }
.file-groups li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .95rem; display: flex; gap: 10px; }
.file-groups li code { font-family: var(--mono); font-size: .8rem; color: var(--ink); background: var(--pop-soft); padding: 1px 6px; border-radius: 4px; min-width: 3.2ch; align-self: flex-start; }
.excerpt { background: var(--ink); color: var(--ivory); border-radius: var(--r-lg); padding: 20px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; overflow: auto; white-space: pre; margin: 0; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 50px -30px rgba(24,24,24,.5); }
.excerpt + .excerpt { margin-top: 16px; }
.excerpt .fn { color: var(--pop); }

/* Sample tabs ---------------------------------------------------------- */
.tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px var(--glass-edge); }
.tab { background: none; border: 1px solid transparent; border-radius: 99px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--ink-soft); font-family: inherit; transition: background .15s, color .15s; }
.tab:hover { background: rgba(24,24,24,.05); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--ivory); }
.panel { display: none; padding-top: 24px; }
.panel[data-active] { display: block; }
.two { display: grid; gap: 20px; }
@media (min-width: 820px) { .two { grid-template-columns: 1fr 1fr; } }
.list { padding-left: 20px; margin: 10px 0 0; }
.list li { margin: 6px 0; }
.rule-list { list-style: none; padding: 0; margin: 10px 0 0; }
.rule-list li { padding: 8px 0 8px 18px; position: relative; border-bottom: 1px solid var(--line); font-size: .95rem; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.rule-list.dont li::before { background: var(--line-strong); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 16px; }
.table th { text-align: left; font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap { overflow-x: auto; }

/* Pillars ---------------------------------------------------------------- */
.pillars { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 820px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar h4 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pillar p { margin-top: 8px; font-size: .95rem; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: rgba(255,255,255,.5); }

/* Use cases ------------------------------------------------------------- */
.grid-3 { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-3 h3 { font-size: 1.15rem; }
.grid-3 p { margin-top: 8px; font-size: .95rem; color: var(--ink-soft); }

/* Pricing ------------------------------------------------------------- */
.price-grid { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.price-card { position: relative; border-radius: var(--r-xl); padding: 32px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge), 0 30px 70px -40px var(--orange-glow); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.price-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(var(--pop-rgb),.7), rgba(var(--pop-rgb),0) 40%, rgba(var(--pop-rgb),0) 70%, rgba(var(--pop-rgb),.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (min-width: 640px) { .price-card { padding: 44px; } }
.price-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.price { font-family: var(--display); font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; margin-top: 20px; line-height: 1; }
.price span { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.check { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: .97rem; color: var(--ink-soft); }
.check li { display: flex; gap: 10px; }
.check li::before { content: "✓"; color: var(--ink); background: var(--pop); border-radius: 4px; padding: 0 4px; line-height: 1.3; font-size: .85em; font-weight: 700; flex: none; align-self: flex-start; margin-top: 3px; }
.not-card { border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.5); border-radius: var(--r-xl); padding: 32px; box-shadow: 0 0 0 1px var(--glass-edge); }
.not-card ul { padding-left: 18px; margin: 16px 0 0; color: var(--ink-soft); font-size: .97rem; }
.not-card li { margin: 10px 0; }

/* FAQ ---------------------------------------------------------------------- */
.faq-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: 1fr 2fr; } }
.faq { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--glass-edge); }
.faq details { padding: 16px 20px; border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq details[open] { background: rgba(247,246,242,.7); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink); font-weight: 400; transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--ink-soft); }

/* CTA band -------------------------------------------------------------- */
.band { position: relative; overflow: hidden; background: var(--ink); color: var(--ivory); border-radius: var(--r-xl); padding: 44px 28px; box-shadow: 0 40px 80px -40px rgba(24,24,24,.6); }
.band::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pop-rgb),.55), rgba(var(--pop-rgb),0) 70%); filter: blur(24px); }
.band::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.band > * { position: relative; }
@media (min-width: 640px) { .band { padding: 60px 52px; } }
.band-inner { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) { .band-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.band h2 { color: var(--ivory); max-width: 560px; }
.band p { color: rgba(247,246,242,.72); margin-top: 12px; }
.band .fine { font-size: .75rem; color: rgba(247,246,242,.5); margin-top: 24px; }

/* Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid rgba(24,24,24,.08); margin-top: auto; background: rgba(255,255,255,.4); }
.footer-main { display: flex; flex-direction: column; gap: 32px; padding: 52px 0; }
@media (min-width: 820px) { .footer-main { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-main .about { max-width: 360px; }
.footer-main .about p { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; font-size: .9rem; }
@media (min-width: 640px) { .footer-nav { grid-template-columns: repeat(3, auto); } }
.footer-nav div { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { text-decoration: none; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--ink); }
.footer-nav .eyebrow { margin-bottom: 4px; }
.footer-bottom { border-top: 1px solid rgba(24,24,24,.08); }
.footer-bottom .wrap { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px; font-size: .78rem; color: var(--muted); }
@media (min-width: 640px) { .footer-bottom .wrap { flex-direction: row; justify-content: space-between; padding: 20px 32px; } }
.footer-bottom a { color: var(--ink-soft); }

/* Prose pages -------------------------------------------------------- */
.prose { max-width: 720px; }
.prose h1 { margin-bottom: 8px; }
.prose h2 { font-size: 1.6rem; margin-top: 44px; margin-bottom: 10px; }
.prose h3 { font-size: 1.2rem; margin-top: 28px; margin-bottom: 6px; }
.prose p, .prose ul, .prose ol { color: var(--ink-soft); margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose code { background: rgba(24,24,24,.06); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: .88em; }
.prose pre { background: var(--ink); color: var(--ivory); padding: 16px; border-radius: var(--r-md); overflow: auto; font-size: 13px; line-height: 1.5; margin-top: 14px; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose .table { margin-top: 20px; }
.notice { border-radius: var(--r-md); padding: 12px 16px; font-size: .92rem; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.6); color: var(--ink-soft); margin-top: 16px; box-shadow: 0 0 0 1px var(--glass-edge); }
.notice.warn { border-color: rgba(154,103,0,.3); background: var(--warning-soft); color: var(--warning); }
.notice.ok { border-color: rgba(31,122,63,.3); background: var(--success-soft); color: var(--success); }
.notice strong { display: block; margin-bottom: 2px; }
.page-head { padding: clamp(40px, 6vw, 72px) 0 32px; }
.page-head .lead { margin-top: 16px; max-width: 640px; }

/* Guide rows ---------------------------------------------------------- */
.rows { display: grid; gap: 16px; margin-top: 32px; }
.row { display: grid; gap: 14px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (min-width: 820px) { .row { grid-template-columns: 56px 1fr; } }
.row .num { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--pop); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; box-shadow: 0 10px 20px -12px rgba(22,22,22,.5); }
.row h3 { font-size: 1.2rem; }
.row p { margin-top: 8px; color: var(--ink-soft); font-size: .97rem; }
.copyblock { position: relative; margin-top: 12px; background: rgba(247,246,242,.9); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 110px 14px 14px; font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.copyblock .copy { position: absolute; right: 8px; top: 8px; }
.copy { font: 600 12px/1 var(--sans); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 99px; padding: 8px 12px; cursor: pointer; color: var(--ink); }
.copy:hover { border-color: var(--ink); }
.copy[data-done] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.toggle { margin-top: 10px; }
.toggle summary { cursor: pointer; font-size: .9rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--pop-deep); text-decoration-thickness: 2px; list-style: none; font-weight: 500; }
.toggle summary::-webkit-details-marker { display: none; }
.toggle summary::before { content: "▸ "; }
.toggle[open] summary::before { content: "▾ "; }

/* Platform switch --------------------------------------------------- */
.switch { display: inline-flex; background: rgba(24,24,24,.06); border-radius: var(--r-pill); padding: 4px; gap: 4px; margin-top: 20px; }
.switch button { background: none; border: 0; border-radius: 99px; padding: 10px 20px; font: 600 15px var(--sans); cursor: pointer; color: var(--muted); }
.switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
[data-platform-panel] { display: none; }
[data-platform-panel][data-active] { display: block; }

/* Download card ---------------------------------------------------- */
.download { position: relative; display: grid; gap: 20px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge), 0 30px 70px -40px var(--orange-glow); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
@media (min-width: 820px) { .download { grid-template-columns: 1fr auto; align-items: center; } }
.download p { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; }

/* Forms --------------------------------------------------------------------- */
.field { margin-top: 16px; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.8); border-radius: var(--r-md); padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--orange); outline: 0; box-shadow: 0 0 0 3px rgba(var(--pop-rgb),.15); }
.hp { position: absolute; left: -9999px; }

/* 404 */
.center { text-align: center; padding: 120px 0; }

@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up .5s ease-out both; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Logo follows the theme */
.logo .lg1 { stop-color: var(--pop-hi); } .logo .lg2 { stop-color: var(--pop); } .logo .lg3 { stop-color: var(--pop-dark); }
.logo .lg-check { stroke: var(--ink); }


/* ======================================================================
   Theme N1: midnight navy surfaces with a lime pop, on a cream page.
   Dark surfaces: header, hero, before/after, pricing, closing band.
   ====================================================================== */
.site-header { background: var(--navy); padding: 12px 0 0; margin-bottom: -1px; }
.site-header .bar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
.site-header .logo, .site-header .nav a { color: var(--on-navy); }
.site-header .nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-header .btn-secondary { background: rgba(255,255,255,.08); color: var(--on-navy); border-color: rgba(255,255,255,.22); }
.site-header .btn-secondary:hover { border-color: var(--on-navy); background: rgba(255,255,255,.14); }
.logo .lg-check { stroke: var(--navy); }
.site-header .logo .dot, .site-footer .logo .dot { color: var(--pop); }
.site-footer .logo .dot { color: var(--ink); }

/* Shared dark surface: grid texture + aurora glow */
.hero, .section-dark { position: relative; overflow: hidden; color: var(--on-navy);
  background: radial-gradient(1200px 600px at 75% 10%, var(--navy-glow) 0%, var(--navy) 60%); border: 0; }
.hero::before, .section-dark::before { content: ""; position: absolute; width: 1100px; height: 1100px; right: -380px; top: -520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,255,58,.40), rgba(120,140,255,.18) 45%, rgba(217,255,58,0) 72%); filter: blur(30px); pointer-events: none; }
.hero::after, .section-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask: radial-gradient(ellipse 55% 70% at 72% 30%, #000 0%, transparent 75%); mask: radial-gradient(ellipse 55% 70% at 72% 30%, #000 0%, transparent 75%); }
.section-dark::before { right: auto; left: -420px; top: -600px; opacity: .8; }
.section-dark::after { -webkit-mask: radial-gradient(ellipse 60% 70% at 20% 20%, #000 0%, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 20% 20%, #000 0%, transparent 75%); }
.hero > .wrap, .section-dark > .wrap { position: relative; z-index: 1; }
.hero { padding-top: 56px; padding-bottom: 80px; }
.hero h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--on-navy); }
.hero .lead, .section-dark .lead { color: rgba(246,244,238,.82); }
.hero .eyebrow, .section-dark .eyebrow { color: rgba(246,244,238,.72); }
.hero .eyebrow::before, .section-dark .eyebrow::before { background: var(--pop); box-shadow: none; }
.hero .small.muted, .hero-note, .section-dark .small.muted, .section-dark .muted { color: rgba(246,244,238,.62); }
.hero-note a, .section-dark a:not(.btn) { color: var(--on-navy); }
.ambient { display: none; }

/* Hero details */
h1 .orange { color: var(--on-navy); background: none; padding: 0; position: relative; display: inline-block; }
h1 .orange::after { content: ""; position: absolute; left: .02em; right: .1em; bottom: .06em; height: .16em; background: var(--pop); border-radius: 3px; z-index: -1; }
.works span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--on-navy); box-shadow: none; }
.slab { background: linear-gradient(145deg, var(--pop-hi) 0%, var(--pop) 45%, var(--pop-deep) 100%); box-shadow: 0 40px 90px -30px rgba(217,255,58,.4); }
.device { background: linear-gradient(135deg, var(--navy-2), var(--navy)); border-color: rgba(255,255,255,.14); color: var(--on-navy);
  box-shadow: 0 0 0 1px rgba(217,255,58,.25), 0 0 60px -10px rgba(217,255,58,.35), 0 30px 60px -30px rgba(0,0,0,.6); }
.device::before { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.device h3 { color: var(--on-navy); } .device .mono { color: rgba(246,244,238,.55); }
.device .bar-dots i { background: rgba(255,255,255,.18); } .device .bar-dots i:first-child { background: var(--pop); box-shadow: none; }
.files li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: var(--on-navy); box-shadow: none; }
.files li svg { color: var(--pop); }
.files li .st { background: rgba(217,255,58,.16); color: var(--pop); } .files li .st.soon { background: rgba(255,255,255,.08); color: rgba(246,244,238,.7); }
.chatline { background: var(--pop); color: var(--navy); } .chatline .cursor { background: var(--navy); }
.note { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.84)); color: var(--ink); }
.note .eyebrow { color: var(--muted); } .note li i { background: var(--ink); } .note li i::after { border-color: var(--pop); }
.pill-float { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--on-navy); box-shadow: none; }
.pill-float i { background: var(--pop); box-shadow: 0 0 0 4px rgba(217,255,58,.2); }
.stat-grid { margin-top: 56px; }
.stat-grid .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--on-navy); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stat-grid .card .eyebrow { color: rgba(246,244,238,.55); }

/* Before / after on navy */
.section-dark .post { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(246,244,238,.7); }
.section-dark .post .badge { background: rgba(255,255,255,.1); color: rgba(246,244,238,.8); }
.section-dark .post .avatar { background: rgba(255,255,255,.18); }
.section-dark .post .handle strong { color: var(--on-navy); }
.section-dark .post-top, .section-dark .handle span, .section-dark .verdict { color: rgba(246,244,238,.5); }
.section-dark .post.voice { background: var(--paper); color: var(--ink); border: 0; box-shadow: 0 0 0 2px var(--pop), 0 30px 60px -24px rgba(0,0,0,.55), 0 0 70px -20px rgba(217,255,58,.35); }
.section-dark .post.voice .badge { background: var(--pop); color: var(--navy); }
.section-dark .post.voice .handle strong { color: var(--ink); }
.section-dark .post.voice .post-top, .section-dark .post.voice .handle span { color: var(--muted); }
.section-dark .post.voice .verdict { color: var(--ink); }
.section-dark .post.voice .avatar { background: var(--ink); box-shadow: 0 0 0 3px var(--pop); }

/* Pricing on navy */
.section-dark .price-card { background: linear-gradient(135deg, rgba(255,254,251,.97), rgba(255,254,251,.9)); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(217,255,58,.35), 0 0 80px -20px rgba(217,255,58,.35), 0 30px 70px -30px rgba(0,0,0,.6); }
.section-dark .price-card::before { display: none; }
.section-dark .price-card h3 { color: var(--ink); }
.section-dark .price-card .small.muted, .section-dark .price-card .muted { color: var(--muted); }
.section-dark .not-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; color: var(--on-navy); }
.section-dark .not-card ul { color: rgba(246,244,238,.78); }
.section-dark .not-card h3 { color: var(--on-navy); }

/* Light-surface details */
.steps .n, .row .num { background: var(--ink); color: var(--pop); }
.check li::before { background: var(--pop); color: var(--navy); }
.file-groups li code { background: var(--pop-soft); color: var(--ink); }
.badge-orange { background: var(--pop); color: var(--navy); }
.btn-primary { color: var(--navy); }
.band { background: radial-gradient(900px 500px at 80% 0%, var(--navy-glow) 0%, var(--navy) 65%); }