/* Tokens copied verbatim from themeselection/shadcn-studio `src/app/globals.css`
   (Tailwind v4 / oklch). Using the variables directly instead of Tailwind classes —
   same values, no build step, so a Next.js app on shadcn-studio will match exactly. */
:root{
  --radius:0.625rem;
  --background:oklch(1 0 0);
  --foreground:oklch(0.145 0 0);
  --card:oklch(1 0 0);
  --card-foreground:oklch(0.145 0 0);
  --popover:oklch(1 0 0);
  --popover-foreground:oklch(0.145 0 0);
  --primary:oklch(0.205 0 0);
  --primary-foreground:oklch(0.985 0 0);
  --secondary:oklch(0.97 0 0);
  --secondary-foreground:oklch(0.205 0 0);
  --muted:oklch(0.97 0 0);
  --muted-foreground:oklch(0.556 0 0);
  --accent:oklch(0.97 0 0);
  --accent-foreground:oklch(0.205 0 0);
  --destructive:oklch(0.577 0.245 27.325);
  --border:oklch(0.922 0 0);
  --input:oklch(0.922 0 0);
  --ring:oklch(0.708 0 0);
  --chart-1:oklch(0.646 0.222 41.116);
  --chart-2:oklch(0.6 0.118 184.704);
  --chart-4:oklch(0.828 0.189 84.429);
  --chart-5:oklch(0.769 0.188 70.08);
  --header-height:64px;
  --shadow-color:oklch(0.3 0.0891 19.6);
  --shadow-opacity:0.08;
  --shadow-blur:3px; --shadow-spread:0px; --shadow-offset-x:0; --shadow-offset-y:1px;
  --radius-sm:calc(var(--radius) - 4px);
  --radius-md:calc(var(--radius) - 2px);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) + 4px);
  --shadow:var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread)
           color-mix(in oklab, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-lg:0 10px 24px -12px color-mix(in oklab, var(--shadow-color) 22%, transparent);
  /* brand = shadcn-studio's own chart-4 amber, so the palette stays theirs */
  --brand:var(--chart-4);
  --brand-ink:oklch(0.35 0.09 84);
  --success:oklch(0.58 0.13 155);
  --warning:oklch(0.62 0.14 70);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --background:oklch(0.145 0 0);
    --foreground:oklch(0.985 0 0);
    --card:oklch(0.205 0 0);
    --card-foreground:oklch(0.985 0 0);
    --popover:oklch(0.205 0 0);
    --popover-foreground:oklch(0.985 0 0);
    --primary:oklch(0.922 0 0);
    --primary-foreground:oklch(0.205 0 0);
    --secondary:oklch(0.269 0 0);
    --secondary-foreground:oklch(0.985 0 0);
    --muted:oklch(0.269 0 0);
    --muted-foreground:oklch(0.708 0 0);
    --accent:oklch(0.269 0 0);
    --accent-foreground:oklch(0.985 0 0);
    --destructive:oklch(0.704 0.191 22.216);
    --border:oklch(1 0 0 / 10%);
    --input:oklch(1 0 0 / 15%);
    --ring:oklch(0.556 0 0);
    --chart-4:oklch(0.828 0.189 84.429);
    --brand-ink:oklch(0.9 0.16 90);
    --success:oklch(0.72 0.14 155);
    --warning:oklch(0.78 0.15 75);
    --shadow-lg:0 10px 26px -14px oklch(0 0 0 / 70%);
  }
}
:root[data-theme="dark"]{
  --background:oklch(0.145 0 0); --foreground:oklch(0.985 0 0); --card:oklch(0.205 0 0);
  --card-foreground:oklch(0.985 0 0); --popover:oklch(0.205 0 0); --primary:oklch(0.922 0 0);
  --primary-foreground:oklch(0.205 0 0); --secondary:oklch(0.269 0 0);
  --secondary-foreground:oklch(0.985 0 0); --muted:oklch(0.269 0 0);
  --muted-foreground:oklch(0.708 0 0); --accent:oklch(0.269 0 0);
  --accent-foreground:oklch(0.985 0 0); --destructive:oklch(0.704 0.191 22.216);
  --border:oklch(1 0 0 / 10%); --input:oklch(1 0 0 / 15%); --ring:oklch(0.556 0 0);
  --chart-4:oklch(0.828 0.189 84.429); --brand-ink:oklch(0.9 0.16 90);
  --success:oklch(0.72 0.14 155); --warning:oklch(0.78 0.15 75);
  --shadow-lg:0 10px 26px -14px oklch(0 0 0 / 70%);
}

*{box-sizing:border-box; border-color:var(--border)}
body{margin:0; background:var(--background); color:var(--foreground);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","cv11"}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-md)}
code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.85em;
  background:var(--muted); padding:.125rem .375rem; border-radius:var(--radius-sm)}

.container{max-width:1080px; margin:0 auto; padding:0 1.5rem}
section{padding:4rem 0; border-top:1px solid var(--border)}
.muted{color:var(--muted-foreground)}

h2{font-size:clamp(1.5rem,2.6vw,1.875rem); font-weight:700; letter-spacing:-.025em;
  margin:0 0 .5rem; text-wrap:balance}
.lead{color:var(--muted-foreground); margin:0; max-width:65ch; font-size:1.0625rem}

/* ---------- nav ---------- */
header.site{position:sticky; top:0; z-index:20; background:color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--header-height)}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.0625rem;
  letter-spacing:-.02em}
.brand .mark{width:1.5rem; height:1.5rem; display:block; color:var(--brand); flex:none}
.foot-brand .brand .mark{width:1.625rem; height:1.625rem}
.nav nav{display:flex; align-items:center; gap:.25rem}
.nav nav a{padding:.5rem .75rem; font-size:.875rem; font-weight:500; text-decoration:none;
  color:var(--muted-foreground); border-radius:var(--radius-md)}
.nav nav a:hover{color:var(--foreground); background:var(--accent)}
@media (max-width:640px){ .nav nav a:not(.btn){display:none} }

/* ---------- shadcn primitives ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.5rem; padding:0 1rem; border-radius:calc(var(--radius)); border:1px solid transparent;
  font-size:.875rem; font-weight:500; cursor:pointer; text-decoration:none;
  transition:background-color .15s, color .15s, border-color .15s; font-family:inherit}
.btn-primary{background:var(--primary); color:var(--primary-foreground)}
.btn-primary:hover{background:color-mix(in oklab, var(--primary) 90%, transparent)}
.btn-outline{background:var(--background); border-color:var(--border);
  color:var(--foreground)}
.btn-outline:hover{background:var(--accent)}
.btn-lg{height:2.75rem; padding:0 1.5rem; font-size:.9375rem; width:100%}

.card{background:var(--card); color:var(--card-foreground);
  border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:0 1px 2px 0 color-mix(in oklab, var(--foreground) 5%, transparent)}
.card-header{padding:1.5rem 1.5rem .75rem}
.card-content{padding:0 1.5rem 1.5rem}
.card-title{font-size:1.125rem; font-weight:600; letter-spacing:-.01em; margin:0}
.card-desc{font-size:.875rem; color:var(--muted-foreground); margin:.375rem 0 0}

.input,.select{display:flex; height:2.5rem; width:100%; border-radius:var(--radius);
  border:1px solid var(--input); background:var(--background);
  padding:0 .75rem; font-size:.875rem; color:var(--foreground); font-family:inherit}
.input::placeholder{color:var(--muted-foreground)}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted-foreground) 50%),
  linear-gradient(135deg,var(--muted-foreground) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.25rem}
.label{font-size:.875rem; font-weight:500; line-height:1; display:block; margin-bottom:.5rem}
.field{margin-bottom:1rem}

.badge{display:inline-flex; align-items:center; border-radius:9999px; padding:.125rem .625rem;
  font-size:.75rem; font-weight:600; border:1px solid transparent; white-space:nowrap}
.badge-default{background:var(--primary); color:var(--primary-foreground)}
.badge-secondary{background:var(--secondary); color:var(--secondary-foreground)}
.badge-outline{border-color:var(--border); color:var(--muted-foreground)}
.badge-success{background:color-mix(in oklab, var(--success) 12%, transparent); color:var(--success);
  border-color:color-mix(in oklab, var(--success) 30%, transparent)}
.badge-warning{background:color-mix(in oklab, var(--warning) 12%, transparent); color:var(--warning);
  border-color:color-mix(in oklab, var(--warning) 30%, transparent)}
.badge-brand{background:color-mix(in oklab, var(--brand) 18%, transparent); color:var(--brand-ink);
  border-color:color-mix(in oklab, var(--brand) 45%, transparent)}
.separator{height:1px; background:var(--border); border:0; margin:0}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
  padding:4.5rem 0 3.5rem}
@media (max-width:900px){ .hero{grid-template-columns:1fr; gap:2.25rem; padding:3rem 0 2rem} }
h1{font-size:clamp(2.25rem,5.2vw,3.5rem); font-weight:700; line-height:1.08;
  letter-spacing:-.04em; margin:1rem 0 1rem; text-wrap:balance}
.hero p.sub{font-size:.9375rem; line-height:1.55; color:var(--muted-foreground); margin:.25rem 0 0;
  max-width:46ch}
.hero p.sub strong{color:var(--foreground); font-weight:600}
.metrics{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.75rem}
.metric b{display:block; font-size:1.375rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.metric span{font-size:.8125rem; color:var(--muted-foreground)}


/* ---------- proof strip under hero ---------- */
.proof{display:flex; align-items:center; justify-content:center; gap:1.25rem; flex-wrap:wrap;
  padding:1.25rem 0 2.75rem; border-top:1px solid var(--border)}
.stack{display:flex; align-items:center}
.stack img{width:2.25rem; height:2.25rem; border-radius:9999px; background:var(--card);
  border:2px solid var(--background); object-fit:contain; padding:.3rem; margin-left:-.625rem;
  box-shadow:var(--shadow)}
.stack img:first-child{margin-left:0}
.stack .more{width:2.25rem; height:2.25rem; border-radius:9999px; background:var(--muted);
  border:2px solid var(--background); margin-left:-.625rem; display:grid; place-items:center;
  font-size:.625rem; font-weight:700; color:var(--muted-foreground)}
.proof-text{font-size:.875rem; color:var(--muted-foreground); line-height:1.4}
.proof-text b{display:block; color:var(--foreground); font-weight:600; font-size:.9375rem}
@media (max-width:520px){ .proof{justify-content:flex-start} }


/* ---------- hero directory preview ---------- */
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem}
.hero-cta .btn{height:2.875rem; padding:0 1.5rem; font-size:.9375rem}
.dirlist{border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-lg)}
.dirlist-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--muted) 55%, transparent)}
.dirlist-head b{font-size:.8125rem; font-weight:600}
.dirlist-head span{font-family:"JetBrains Mono",monospace; font-size:.6875rem;
  color:var(--muted-foreground)}
.dirlist-body{max-height:392px; overflow:auto}
.dirrow{display:grid; grid-template-columns:1fr auto auto 2.5rem; gap:.625rem; align-items:center;
  padding:.5625rem 1rem; border-bottom:1px solid var(--border); font-size:.8125rem}
.dirrow:last-child{border-bottom:0}
.dirrow:hover{background:color-mix(in oklab, var(--muted) 45%, transparent)}
.dirname{display:flex; align-items:center; gap:.5rem; min-width:0}
.dirname img{width:1.125rem; height:1.125rem; border-radius:4px; flex:none; object-fit:contain}
.dirname b{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dirtype{font-size:.6875rem; padding:.0625rem .4375rem; border-radius:9999px;
  border:1px solid var(--border); color:var(--muted-foreground); white-space:nowrap}
.dirfree{font-size:.6875rem; color:var(--success); font-weight:600}
.dirdr{font-family:"JetBrains Mono",monospace; font-size:.75rem; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--muted-foreground)}
.dirlist-foot{padding:.625rem 1rem; font-size:.75rem; color:var(--muted-foreground);
  border-top:1px solid var(--border);
  background:color-mix(in oklab, var(--muted) 35%, transparent)}


/* ---------- X wall (empty until real reviews exist) ---------- */
.xwall{columns:3 260px; column-gap:1rem; margin-top:1.5rem}
.xcard{break-inside:avoid; margin-bottom:1rem; padding:1.125rem 1.25rem; border:1px dashed var(--border);
  border-radius:var(--radius-xl); background:transparent}
.xtop{display:flex; align-items:center; gap:.625rem; margin-bottom:.75rem}
.xav{width:2.25rem; height:2.25rem; border-radius:9999px; background:var(--muted); flex:none}
.xwho{flex:1; min-width:0}
.xwho b{display:block; height:.625rem; width:7rem; border-radius:3px; background:var(--muted);
  margin-bottom:.375rem}
.xwho span{display:block; height:.5rem; width:4.5rem; border-radius:3px;
  background:color-mix(in oklab, var(--muted) 70%, transparent)}
.xlogo{display:flex; align-items:center; gap:.375rem; font-size:.75rem;
  color:var(--muted-foreground); flex:none}
.xlogo svg{width:1rem; height:1rem; fill:currentColor}
.xbody{margin:0; font-size:.875rem; color:var(--muted-foreground)}
.xline{height:.5rem; border-radius:3px; background:var(--muted); margin:.5rem 0}
.xcta{display:flex; justify-content:center; margin-top:.5rem}


.xcard.filled{border-style:solid; background:var(--card); box-shadow:var(--shadow);
  text-decoration:none; color:inherit; display:block}
.xcard.filled:hover{border-color:color-mix(in oklab, var(--foreground) 22%, var(--border))}
.xcard.filled .xwho b{height:auto; width:auto; background:none; font-size:.875rem; font-weight:600;
  display:flex; align-items:center; gap:.25rem; margin-bottom:.0625rem; color:var(--foreground)}
.xcard.filled .xwho span{height:auto; width:auto; background:none; font-size:.75rem;
  color:var(--muted-foreground)}
.xcard.filled .xbody{color:var(--foreground)}
img.xav{object-fit:cover}
.vcheck{width:.875rem; height:.875rem; fill:oklch(0.62 0.16 250); flex:none}

/* ---------- pricing, rebuilt ---------- */
.plan{padding:0; overflow:hidden}
.plan-head{padding:1.5rem 1.5rem 1.25rem; border-bottom:1px solid var(--border)}
.plan-name{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:1rem}
.plan-name h3{font-size:1.0625rem; font-weight:600; margin:0}
.plan-price{display:flex; align-items:baseline; gap:.5rem}
.plan-price b{font-size:1.75rem; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.plan-price span{font-size:.8125rem; color:var(--muted-foreground)}
.plan-deliver{margin-top:1.125rem; padding-top:1.125rem; border-top:1px solid var(--border)}
.plan-deliver .k{font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted-foreground); display:block; margin-bottom:.375rem}
.plan-deliver b{display:block; font-size:2.75rem; font-weight:700; letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums}
.plan-deliver span.u{display:block; font-size:.9375rem; font-weight:600; margin-top:.25rem}
.plan-deliver span.n{display:block; font-size:.75rem; color:var(--muted-foreground);
  margin-top:.25rem}
.plan-rows{list-style:none; margin:0; padding:.5rem 0; flex:1}
.plan-rows li{display:grid; grid-template-columns:1.125rem 1fr; gap:.625rem; align-items:start;
  padding:.5rem 1.5rem; font-size:.8125rem; color:var(--muted-foreground)}
.plan-rows li svg{width:1rem; height:1rem; margin-top:.125rem; stroke:var(--foreground);
  fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.plan-rows li.off{color:color-mix(in oklab, var(--muted-foreground) 65%, transparent)}
.plan-rows li.off svg{stroke:var(--border)}
.plan-rows b{color:var(--foreground); font-weight:500}
.plan-foot{padding:1.25rem 1.5rem 1.5rem; margin-top:auto}

/* ---------- steps ---------- */
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;
  margin-top:2rem}
.step-num{font-family:"JetBrains Mono",monospace; font-size:.75rem;
  color:var(--muted-foreground)}
.step h3{font-size:1rem; font-weight:600; margin:.5rem 0 .375rem}
.step p{margin:0; font-size:.875rem; color:var(--muted-foreground)}


/* Step cards: the mockup leads, the words follow — and it never gets clipped. */
.step{display:flex; flex-direction:column; overflow:hidden; padding:0}
.step .card-header{padding:1.25rem 1.5rem 0}
.step .card-content{padding:.5rem 1.5rem 1.5rem}
.step-visual{order:-1; height:132px; display:grid; place-items:center; padding:1rem 1.25rem;
  background:color-mix(in oklab, var(--muted) 55%, transparent);
  border-bottom:1px solid var(--border); margin:0}
.step-visual svg{display:block; width:100%; height:100%; max-height:100px; overflow:visible}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.875rem; min-width:580px}
thead th{text-align:left; font-weight:500; color:var(--muted-foreground);
  padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap;
  font-size:.8125rem}
tbody td{padding:.75rem 1rem; border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in oklab, var(--muted) 50%, transparent)}
.mono{font-family:"JetBrains Mono",monospace; font-size:.75rem;
  color:var(--muted-foreground); display:block}
.right{text-align:right; font-variant-numeric:tabular-nums}
.browser-bar{display:flex; align-items:center; gap:.375rem; padding:.625rem 1rem;
  border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--muted) 40%, transparent)}
.browser-bar i{width:.5rem; height:.5rem; border-radius:9999px; background:var(--border)}
.browser-bar span{margin-left:.5rem; font-family:"JetBrains Mono",monospace; font-size:.75rem;
  color:var(--muted-foreground)}


/* ---------- proof panels: inbox, submission, report ---------- */
.window{border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-lg); margin-top:1.5rem}
.window-bar{display:flex; align-items:center; gap:.375rem; padding:.625rem 1rem;
  border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--muted) 55%, transparent)}
.window-bar i{width:.5rem; height:.5rem; border-radius:9999px; background:var(--border)}
.window-bar span{margin-left:.5rem; font-family:"JetBrains Mono",monospace; font-size:.75rem;
  color:var(--muted-foreground)}

/* Gmail-shaped inbox: sidebar, search, tabs, checkbox/star rows, unread emphasis. */
.gmail{display:grid; grid-template-columns:170px 1fr; min-height:340px}
@media (max-width:760px){ .gmail{grid-template-columns:1fr} .gmail .gsidebar{display:none} }
.gsidebar{border-right:1px solid var(--border); padding:.875rem .75rem;
  background:color-mix(in oklab, var(--muted) 35%, transparent)}
.gcompose{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .875rem;
  border-radius:9999px; background:var(--card); border:1px solid var(--border);
  box-shadow:var(--shadow); font-size:.8125rem; font-weight:500; margin-bottom:.875rem}
.gnav{display:flex; flex-direction:column; gap:.125rem; font-size:.8125rem}
.gnav a{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.375rem .75rem; border-radius:9999px; text-decoration:none;
  color:var(--muted-foreground)}
.gnav a.active{background:color-mix(in oklab, var(--brand) 22%, transparent);
  color:var(--foreground); font-weight:600}
.gnav .count{font-size:.6875rem; font-variant-numeric:tabular-nums}
.gmain{min-width:0}
.gsearch{display:flex; align-items:center; gap:.5rem; margin:.75rem 1rem;
  background:color-mix(in oklab, var(--muted) 60%, transparent); border-radius:9999px;
  padding:.5rem .875rem; font-size:.8125rem; color:var(--muted-foreground)}
.gtabs{display:flex; gap:0; border-bottom:1px solid var(--border); padding:0 1rem}
.gtab{padding:.5rem .875rem; font-size:.8125rem; color:var(--muted-foreground);
  border-bottom:2px solid transparent}
.gtab.active{color:var(--foreground); font-weight:600;
  border-bottom-color:var(--brand)}
.grow{display:grid; grid-template-columns:auto auto auto minmax(110px,150px) 1fr auto;
  gap:.625rem; align-items:center; padding:.625rem 1rem; border-bottom:1px solid var(--border);
  font-size:.8125rem; background:color-mix(in oklab, var(--muted) 40%, transparent)}
.grow:last-child{border-bottom:0}
.grow:hover{box-shadow:var(--shadow); position:relative; z-index:1;
  background:var(--card)}
.grow.unread{background:var(--card)}
.grow.unread .gfrom,.grow.unread .gsubj b{font-weight:700; color:var(--foreground)}
.gbox{width:.875rem; height:.875rem; border:1.5px solid var(--muted-foreground); border-radius:3px;
  opacity:.55}
.gstar{color:var(--muted-foreground); opacity:.5; line-height:1}
.grow.unread .gstar.on{color:var(--brand); opacity:1}
.gav{width:1.5rem; height:1.5rem; border-radius:9999px; display:grid; place-items:center;
  font-size:.6875rem; font-weight:700; color:oklch(1 0 0); flex:none}
.gfrom{color:var(--muted-foreground); font-weight:500; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.gsubj{color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0}
.gsubj b{font-weight:500; color:var(--foreground)}
.gwhen{font-size:.6875rem; color:var(--muted-foreground); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.grow.unread .gwhen{color:var(--foreground); font-weight:600}
.gchip{display:inline-block; font-size:.625rem; padding:.0625rem .375rem; border-radius:.25rem;
  border:1px solid var(--border); color:var(--muted-foreground); margin-right:.375rem;
  vertical-align:1px}
@media (max-width:640px){
  .grow{grid-template-columns:auto auto minmax(90px,120px) 1fr auto}
  .grow .gbox{display:none}
}

.sub-grid{display:grid; grid-template-columns:1fr 1fr; gap:0}
@media (max-width:760px){ .sub-grid{grid-template-columns:1fr} }
.sub-col{padding:1.25rem 1.5rem}
.sub-col + .sub-col{border-left:1px solid var(--border)}
@media (max-width:760px){ .sub-col + .sub-col{border-left:0; border-top:1px solid var(--border)} }
.sub-col h4{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-foreground); margin:0 0 .875rem; font-weight:500}
.kv{display:grid; grid-template-columns:132px 1fr; gap:.5rem 1rem; font-size:.8125rem;
  align-items:start}
.kv dt{font-family:"JetBrains Mono",monospace; color:var(--muted-foreground); font-size:.75rem}
.kv dd{margin:0; color:var(--foreground)}
.kv dd em{font-style:normal; color:var(--muted-foreground)}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.875rem}
.timeline li{display:grid; grid-template-columns:auto 1fr; gap:.75rem; font-size:.8125rem;
  position:relative}
.timeline .dot{width:.75rem; height:.75rem; border-radius:9999px; border:2px solid var(--border);
  background:var(--card); margin-top:.25rem}
.timeline li.done .dot{background:var(--success); border-color:var(--success)}
.timeline li.now .dot{background:var(--brand); border-color:var(--brand)}
.timeline b{display:block; font-weight:500}
.timeline span{color:var(--muted-foreground); font-size:.75rem}



.tags{display:flex; flex-wrap:wrap; gap:.3125rem; align-items:center}
.tagchip{font-size:.6875rem; padding:.125rem .5rem; border-radius:9999px; white-space:nowrap;
  background:var(--secondary); color:var(--secondary-foreground); border:1px solid var(--border);
  font-weight:500}
.tagchip.on{background:color-mix(in oklab, var(--brand) 22%, transparent);
  border-color:color-mix(in oklab, var(--brand) 45%, transparent); color:var(--brand-ink)}
.tags .note{font-size:.6875rem; color:var(--muted-foreground); margin-left:.125rem}

/* ---------- assets: logo + screenshot gallery ---------- */
.assets{margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border)}
.assets h5{font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted-foreground); margin:0 0 .875rem; font-weight:500}
.applogo{display:flex; align-items:center; gap:.75rem; margin-bottom:1rem}
.applogo .mark{width:3rem; height:3rem; border-radius:.875rem; flex:none; display:grid;
  place-items:center; position:relative; overflow:hidden;
  background:linear-gradient(145deg, oklch(0.86 0.17 88), oklch(0.72 0.19 55));
  box-shadow:0 1px 2px oklch(0 0 0 / 18%), inset 0 1px 0 oklch(1 0 0 / 45%)}
.applogo .mark span{font-size:1.5rem; font-weight:800; color:oklch(0.99 0 0);
  text-shadow:0 1px 2px oklch(0 0 0 / 22%); line-height:1}
.applogo .meta b{display:block; font-size:.875rem; font-weight:600}
.applogo .meta span{font-size:.75rem; color:var(--muted-foreground);
  font-family:"JetBrains Mono",monospace}
.shots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.shot{display:block; margin:0}
.shot .frame{aspect-ratio:16/10; border:1px solid var(--border); border-radius:.5rem;
  overflow:hidden; background:var(--background)}
.shot svg{display:block; width:100%; height:100%}
.shot figcaption{font-family:"JetBrains Mono",monospace; font-size:.625rem;
  color:var(--muted-foreground); margin-top:.375rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}


.chart-card{margin-top:1.5rem; overflow:hidden}
.chart-head{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:flex-start; padding:1.5rem 1.5rem 1rem}
.chart-legend{display:flex; flex-wrap:wrap; gap:.25rem 1rem; font-size:.8125rem;
  color:var(--muted-foreground)}
.chart-legend span{display:inline-flex; align-items:center; gap:.4rem}
.chart-legend i{width:.625rem; height:.1875rem; border-radius:2px; display:inline-block}
.chart-legend b{color:var(--foreground); font-variant-numeric:tabular-nums}
.chart-body{padding:0 1rem}
.chart-body svg{display:block; width:100%; height:auto}
.chart-foot{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; padding:1rem 1.5rem 1.5rem;
  border-top:1px solid var(--border); margin-top:1rem; font-size:.8125rem;
  color:var(--muted-foreground)}
.chart-foot b{color:var(--foreground); font-variant-numeric:tabular-nums}


/* ---------- link types ---------- */
.types{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem;
  margin-top:2rem}
.type{padding:1.25rem 1.375rem; display:flex; flex-direction:column; gap:.5rem}
.type-top{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem}
.type h3{font-size:1rem; font-weight:600; margin:0}
.type .count{font-family:"JetBrains Mono",monospace; font-size:.8125rem;
  color:var(--muted-foreground); font-variant-numeric:tabular-nums}
.type p{margin:0; font-size:.8125rem; color:var(--muted-foreground)}
.type .eg{font-size:.75rem; color:var(--muted-foreground); margin-top:auto; padding-top:.5rem}
.type .eg b{color:var(--foreground); font-weight:500}
.type.excluded{border-color:color-mix(in oklab, var(--destructive) 40%, var(--border));
  background:color-mix(in oklab, var(--destructive) 4%, var(--card))}
.type.excluded h3{color:var(--destructive)}
.strike{text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in oklab, var(--destructive) 70%, transparent)}


/* ---------- glossary ---------- */
.gloss{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-xl);
  overflow:hidden; margin-top:2rem}
.term{background:var(--card); padding:1.125rem 1.25rem}
.term dt{display:flex; align-items:center; gap:.5rem; margin-bottom:.375rem}
.term dt b{font-size:.9375rem; font-weight:600}
.term dt .tag{font-family:"JetBrains Mono",monospace; font-size:.625rem; padding:.0625rem .375rem;
  border-radius:.25rem; border:1px solid var(--border); color:var(--muted-foreground)}
.term dd{margin:0; font-size:.8125rem; color:var(--muted-foreground)}
.term dd + dd{margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--border)}
.term dd b{color:var(--foreground); font-weight:500}
.term .us{color:var(--foreground)}
.term .us::before{content:"In your report: "; color:var(--muted-foreground)}


.dest{display:flex; align-items:center; gap:.625rem; min-width:0}
.dest img{width:1.25rem; height:1.25rem; border-radius:4px; flex:none;
  background:var(--card); object-fit:contain}
.dest .txt{min-width:0}


.type-icon{width:2.25rem; height:2.25rem; border-radius:var(--radius-md); display:grid;
  place-items:center; background:var(--muted); color:var(--foreground); margin-bottom:.25rem}
.type-icon svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.type.excluded .type-icon{background:color-mix(in oklab, var(--destructive) 12%, transparent);
  color:var(--destructive)}


/* ---------- guarantees ---------- */
.guards{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1rem;
  margin-top:2rem}
.guard{padding:1.25rem 1.375rem; display:flex; flex-direction:column; gap:.5rem}
.guard-icon{width:2.25rem; height:2.25rem; border-radius:var(--radius-md); display:grid;
  place-items:center; margin-bottom:.25rem;
  background:color-mix(in oklab, var(--success) 14%, transparent); color:var(--success)}
.guard-icon svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.guard h3{font-size:1rem; font-weight:600; margin:0}
.guard p{margin:0; font-size:.8125rem; color:var(--muted-foreground)}
.guard .terms{margin-top:auto; padding-top:.625rem; font-size:.75rem;
  color:var(--muted-foreground); border-top:1px dashed var(--border)}
.guard .terms b{color:var(--foreground); font-weight:500}


/* ---------- bento glossary ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; margin-top:2rem}
.bento .cell{background:var(--card); padding:1.5rem; display:flex; flex-direction:column; gap:.5rem;
  min-width:0}
.bento .cell.wide{grid-column:span 4}
.bento .cell.half{grid-column:span 3}
.bento .cell.third{grid-column:span 2}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .cell.wide,.bento .cell.half,.bento .cell.third{grid-column:span 2}
}
.cell h3{font-size:1.0625rem; font-weight:600; margin:0; display:flex; align-items:center;
  gap:.5rem; flex-wrap:wrap}
.cell .tag{font-family:"JetBrains Mono",monospace; font-size:.625rem; padding:.0625rem .375rem;
  border-radius:.25rem; border:1px solid var(--border); color:var(--muted-foreground);
  font-weight:400}
.cell p{margin:0; font-size:.875rem; color:var(--muted-foreground); max-width:52ch}
.cell .ours{font-size:.8125rem; color:var(--muted-foreground); margin-top:auto; padding-top:.75rem}
.cell .ours b{color:var(--foreground); font-weight:500}
.cell figure{margin:.5rem 0 0}
.cell svg{display:block; width:100%; height:auto; overflow:visible}
.split{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center}
@media (max-width:760px){ .split{grid-template-columns:1fr} }


/* ---------- wall ---------- */
.wall-head{text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem}
.wall-eyebrow{font-size:.8125rem; font-weight:500; color:var(--muted-foreground);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--border)}
.wall-head h2{margin:0}
.wall-head h2 u{text-decoration-thickness:2px; text-underline-offset:5px;
  text-decoration-color:var(--brand)}
.wall{columns:3 260px; column-gap:1rem; margin-top:2rem}
.wall .card{break-inside:avoid; margin-bottom:1rem; padding:1.125rem 1.25rem; display:block}
.wall-top{display:flex; align-items:center; gap:.625rem; margin-bottom:.75rem}
.wall-top img{width:2rem; height:2rem; border-radius:9999px; background:var(--card);
  border:1px solid var(--border); object-fit:contain; padding:.2rem; flex:none}
.wall-who{min-width:0; flex:1}
.wall-who b{display:block; font-size:.875rem; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.wall-who span{font-size:.75rem; color:var(--muted-foreground)}
.wall-badge{font-size:.6875rem; padding:.125rem .5rem; border-radius:9999px; white-space:nowrap;
  background:color-mix(in oklab, var(--success) 14%, transparent); color:var(--success);
  border:1px solid color-mix(in oklab, var(--success) 30%, transparent); font-weight:600}
.wall .body{font-size:.875rem; color:var(--foreground); margin:0}
.wall .meta{font-family:"JetBrains Mono",monospace; font-size:.6875rem;
  color:var(--muted-foreground); margin:.75rem 0 0; display:flex; gap:.5rem; flex-wrap:wrap}
.wall .card.empty{border-style:dashed; background:transparent}
.wall .card.empty .body{color:var(--muted-foreground)}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem;
  margin-top:2rem; align-items:start}
.plan{display:flex; flex-direction:column; height:100%}
.plan.popular{border-color:color-mix(in oklab, var(--foreground) 35%, transparent); box-shadow:var(--shadow-lg)}
.price{font-size:2.25rem; font-weight:700; letter-spacing:-.03em; line-height:1; margin:.75rem 0 .25rem}
.price-note{font-size:.8125rem; color:var(--muted-foreground)}
.features{list-style:none; margin:1.25rem 0 1.5rem; padding:0; display:flex;
  flex-direction:column; gap:.625rem; font-size:.875rem}
.features li{display:flex; gap:.625rem; align-items:flex-start;
  color:var(--muted-foreground)}
.features svg{flex:none; margin-top:.2rem; color:var(--foreground)}

/* ---------- alert / faq ---------- */
.alert{border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:1.25rem 1.5rem; background:color-mix(in oklab, var(--muted) 40%, transparent); margin-top:1.5rem}
.alert h3{font-size:.9375rem; font-weight:600; margin:0 0 .625rem}
.alert ul{margin:0; padding-left:1.125rem; font-size:.875rem;
  color:var(--muted-foreground); display:flex; flex-direction:column; gap:.5rem}
details{border-bottom:1px solid var(--border)}
summary{cursor:pointer; font-weight:500; font-size:.9375rem; padding:1rem 0; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:""; width:.5rem; height:.5rem; flex:none; border-right:1.5px solid var(--muted-foreground);
  border-bottom:1.5px solid var(--muted-foreground); transform:rotate(45deg); margin-right:.25rem;
  transition:transform .15s}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 1rem; font-size:.875rem; color:var(--muted-foreground); max-width:72ch}

footer{border-top:1px solid var(--border); padding:2.5rem 0 3rem; font-size:.8125rem;
  color:var(--muted-foreground); display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem}
@media (max-width:760px){ footer{grid-template-columns:1fr 1fr; gap:1.75rem} }
.foot-brand{display:flex; flex-direction:column; gap:.625rem}
@media (max-width:760px){ .foot-brand{grid-column:1/-1} }
.foot-brand .brand{font-size:1rem}
.foot-brand p{margin:0; max-width:34ch; font-size:.8125rem}
.foot-col h4{font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--foreground); margin:0 0 .75rem; font-weight:600}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.foot-col a{text-decoration:none; color:var(--muted-foreground)}
.foot-col a:hover{color:var(--foreground); text-decoration:underline; text-underline-offset:3px}
.foot-bottom{grid-column:1/-1; border-top:1px solid var(--border); padding-top:1.25rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem}
.foot-bottom nav{display:flex; gap:1.25rem; flex-wrap:wrap}
.foot-bottom a{text-decoration:none; color:var(--muted-foreground)}
.foot-bottom a:hover{color:var(--foreground)}