/* ============================================================
   METABOB PRIVATE LIMITED — shared stylesheet
   White ground · saffron signal
   Display: Bricolage Grotesque · Body: Instrument Sans · Data: JetBrains Mono
   ============================================================ */
:root{
  --paper:#FFFFFF; --paper-2:#FDFAF6; --paper-3:#FAF4EC;
  --ink:#14100C; --ink-2:#5C5349; --ink-3:#786D61;   /* 5.05:1 on white; the old #8E8579 was 3.63:1 */
  --line:#EDE6DC; --line-2:#F5EFE7;
  --saf:#F1731F; --saf-d:#C9560F; --saf-l:#FF9A4D; --saf-50:#FFF3E9; --saf-100:#FFE3CC;
  --saf-band:#FA8B39;   /* the full-bleed section fill — ink on it measures 7.95:1 */
  --signal:#0F766E; --signal-50:#E6F2F0;

  --f-dis:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --f-bod:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --f-mon:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh:0 1px 2px rgba(20,16,12,.04), 0 4px 16px -8px rgba(20,16,12,.06);
  --sh-md:0 2px 4px rgba(20,16,12,.03), 0 18px 44px -22px rgba(20,16,12,.16);
  --sh-lg:0 30px 80px -40px rgba(20,16,12,.24);

  --pad:clamp(20px,5vw,72px);
  --maxw:1200px;
  --hdr-h:69px;          /* .hdr-in: 13px padding-block ×2 + 43px content row */
  --ease:cubic-bezier(.22,.75,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-bod); font-size:16px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:2px solid var(--saf); outline-offset:3px; border-radius:4px}
::selection{background:var(--saf-100); color:var(--ink)}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.wrap-n{max-width:900px; margin:0 auto; padding-inline:var(--pad)}
.sec{padding-block:clamp(64px,8vw,120px); position:relative}
.sec-tight{padding-block:clamp(40px,5vw,72px)}
.band{background:var(--paper-2); border-block:1px solid var(--line-2)}
.dark{background:var(--ink); color:#fff}

/* ------------------------------------------------------------
   Full-bleed saffron band — one even fill, edge to edge.
   Text is near-black rather than white: at this brightness white
   copy would sit near 2:1, whereas ink on the fill measures 7.95:1.
   That is what lets the orange stay light instead of going dark.
   ------------------------------------------------------------ */
.band-saf{
  position:relative; background:var(--saf-band); color:var(--ink);
  border-block:1px solid rgba(122,46,4,.16);
}
.band-saf .kicker{color:#4A1A02}
.band-saf .kicker::before{background:#4A1A02}
.band-saf h2,.band-saf h3,.band-saf .h2,.band-saf .h3{color:var(--ink)}
.band-saf .lead{color:rgba(20,16,12,.78)}
.band-saf .body-s{color:rgba(20,16,12,.74)}
.band-saf .note{color:rgba(20,16,12,.66)}
/* cards go borderless on colour — a hairline reads as a seam here */
.band-saf .card{border-color:transparent; box-shadow:0 20px 48px -28px rgba(96,38,2,.44)}
.band-saf .card:hover{border-color:transparent; box-shadow:0 30px 64px -30px rgba(96,38,2,.54)}
.band-saf .tag{background:var(--saf-50); color:#4A1A02}
.band-saf .btn-o{border-color:rgba(20,16,12,.28)}
.band-saf .btn-o:hover{border-color:var(--ink); background:var(--ink); color:#fff}

/* ------------------------------------------------------------
   PRICING — a ruled ledger block, not floating cards.
   One container, three columns split by hairlines, the recommended
   plan inverted to solid ink. The dark column IS the background
   moment; no tinted wash needed behind the section.
   ------------------------------------------------------------ */
.plans{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper); box-shadow:var(--sh);
}
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(26px,2.9vw,40px) clamp(22px,2.2vw,32px);
  border-left:1px solid var(--line);
}
.plan:first-child{border-left:0}
.plan.hi{background:var(--ink); color:#fff; border-left-color:var(--ink)}
.plan.hi + .plan{border-left-color:var(--ink)}

.plan-name{
  font-family:var(--f-mon); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.plan.hi .plan-name{color:var(--saf-l)}
.plan-rec{
  position:absolute; top:clamp(26px,2.9vw,40px); right:clamp(22px,2.2vw,32px);
  font-family:var(--f-mon); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.plan-amt{display:flex; align-items:baseline; gap:6px; margin-top:20px}
.plan-amt b{
  font-family:var(--f-dis); font-size:clamp(34px,4vw,46px); font-weight:800;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.plan-amt span{font-size:14px; color:var(--ink-3)}
.plan.hi .plan-amt span{color:rgba(255,255,255,.6)}
.plan-who{margin-top:12px; font-size:14px; line-height:1.55; color:var(--ink-2); min-height:3.4em}
.plan.hi .plan-who{color:rgba(255,255,255,.72)}

.plan ul{
  list-style:none; margin:22px 0 26px; padding:22px 0 0;
  border-top:1px solid var(--line); display:grid; gap:12px;
  font-size:14.2px; line-height:1.5; color:var(--ink-2);
}
.plan.hi ul{border-top-color:rgba(255,255,255,.18); color:rgba(255,255,255,.86)}
.plan li{display:flex; gap:10px; align-items:flex-start}
.plan li svg{color:var(--saf-d); flex:none; margin-top:4px}
.plan.hi li svg{color:var(--saf-l)}
.plan .btn{margin-top:auto; width:100%}

/* the block collapses to stacked rows, hairlines switching axis */
@media (max-width:900px){
  .plans{grid-template-columns:1fr}
  .plan{border-left:0; border-top:1px solid var(--line)}
  .plan:first-child{border-top:0}
  .plan.hi,.plan.hi + .plan{border-left:0}
  .plan.hi{border-top-color:var(--ink)}
  .plan-who{min-height:0}
}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{margin:0; font-family:var(--f-dis); font-weight:700; letter-spacing:-.03em; line-height:1.08; text-wrap:balance}
.h1{font-size:clamp(38px,6.2vw,74px); font-weight:800; letter-spacing:-.042em}
.h2{font-size:clamp(29px,4vw,52px); letter-spacing:-.035em}
.h3{font-size:clamp(21px,2.2vw,28px); letter-spacing:-.028em}
.h4{font-size:18px; letter-spacing:-.022em}
.lead{font-size:clamp(16.5px,1.5vw,19px); color:var(--ink-2); line-height:1.6; max-width:60ch}
p{margin:0}
.body-s{font-size:14.5px; color:var(--ink-2); line-height:1.6}
.prose p{font-size:16px; color:var(--ink-2); line-height:1.72; max-width:68ch}
.prose p + p{margin-top:18px}
.prose b,.prose strong{color:var(--ink); font-weight:600}
.prose h3{margin:38px 0 12px; font-size:22px}
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mon);
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--saf-d);
}
.kicker::before{content:""; width:16px; height:1.5px; background:var(--saf); flex:none}
.kicker.plain::before{display:none}
.dim{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mon)}
.sec-hd{display:flex; flex-direction:column; gap:16px; max-width:64ch; margin-bottom:clamp(36px,4.4vw,60px)}
.sec-hd.center{align-items:center; text-align:center; margin-inline:auto}
.sec-hd .lead{max-width:56ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-bod); font-weight:600; font-size:15px; letter-spacing:-.005em;
  white-space:nowrap; padding:13px 22px; border-radius:var(--r);
  transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s;
}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-p{background:var(--ink); color:#fff}
.btn-p:hover{background:#241d16; transform:translateY(-2px); box-shadow:var(--sh-md)}
.btn-s{background:var(--saf); color:#fff}
.btn-s:hover{background:var(--saf-d); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(241,115,31,.7)}
.btn-o{border:1px solid var(--line); color:var(--ink); background:var(--paper)}
.btn-o:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-w{background:#fff; color:var(--ink)}
.btn-w:hover{background:var(--saf-l); transform:translateY(-2px)}
.btn-t{border:1px solid rgba(255,255,255,.24); color:#fff}
.btn-t:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-lg{padding:16px 28px; font-size:16px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important}

/* ============================================================
   ANIMATION SYSTEM — [data-animate] + stepped [data-delay]
   ============================================================ */
/* Tuned down deliberately: the distances were 22px/14px with a 12px blur over
   .85s, which reads as a slide rather than a settle. Text now travels about
   half as far and lands faster, and the scale came off the headline variant —
   scaling type is the part that looks like an effect rather than a arrival. */
[data-animate]{
  opacity:0; will-change:opacity,transform,filter;
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-animate="fade"]{transform:translateY(11px)}
[data-animate="blur"]{transform:translateY(8px); filter:blur(6px)}
[data-animate="left"]{transform:translateX(15px)}
[data-animate="right"]{transform:translateX(-15px)}
[data-animate="scale"]{transform:scale(.975)}
[data-animate].is-in{opacity:1; transform:none; filter:none}

/* Images open from a shallow crop as their card arrives. This sits on the
   FIGURE, not the <img>, so the hover zoom on the image keeps working —
   animating both on the same element made the two fight. */
.card.who .who-img,.zz-art{
  clip-path:inset(0 0 14% 0);
  transition:clip-path .9s var(--ease); transition-delay:var(--d,0ms);
}
.card.who.is-in .who-img,.zz-row.is-in .zz-art{clip-path:inset(0 0 0 0)}

/* ============================================================
   ARTWORK SYSTEM
   Mesh gradient + grain + a subject silhouette, so a tile reads
   as a specific picture rather than an abstract wash.
   ============================================================ */
.tile{position:relative; overflow:hidden; background:var(--paper-3); border-radius:var(--r)}
.tile .px{
  position:absolute; inset:0; background-image:var(--mesh); background-size:cover;
  filter:blur(26px) saturate(1.5) contrast(1.1); transform:scale(1.14);
  transition:filter 1.5s var(--ease), transform 1.5s var(--ease);
}
.tile.is-in .px{filter:blur(0) saturate(1.05) contrast(1); transform:scale(1)}
.tile img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  filter:blur(24px) saturate(1.35); transform:scale(1.12);
  transition:filter 1.5s var(--ease), transform 1.5s var(--ease);
}
.tile.is-in img{filter:none; transform:none}
.tile:hover img{transform:scale(1.05)}
.tile.flat img{filter:none; transform:none}
/* a real photograph needs neither the stand-in gradient nor the silhouette */
.tile.has-img .px,.tile.has-img .subj,.tile.has-img .grain{display:none}
.tile .grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
/* the subject: a silhouette layer that gives the tile a readable form */
.tile .subj{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease) .25s;
}
.tile.is-in .subj{opacity:1}
.tile .subj .sh{fill:rgba(12,8,5,.30)}
.tile .subj .hl{fill:rgba(255,255,255,.26)}
.tile .subj .ln{fill:none; stroke:rgba(255,255,255,.34); stroke-width:1.1}
.tile .cap{
  position:absolute; inset:auto 0 0 0; z-index:4; padding:26px 12px 11px;
  font-family:var(--f-mon); font-size:11px; line-height:1.45; color:rgba(255,255,255,.95);
  background:linear-gradient(180deg,transparent,rgba(10,7,4,.78));
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s;
}
.tile:hover .cap{opacity:1; transform:none}
.tile:hover .px{transform:scale(1.05)}
.tile.flat .px{filter:none; transform:none}
.tile.flat .subj{opacity:1}

.m1 {--mesh:radial-gradient(58% 66% at 24% 18%,#FFC46B 0%,transparent 60%),radial-gradient(62% 70% at 82% 28%,#F1731F 0%,transparent 58%),radial-gradient(80% 86% at 50% 110%,#5B1A12 0%,transparent 66%),linear-gradient(168deg,#FFE2B8 0%,#E0561B 52%,#3D1009 100%)}
.m2 {--mesh:radial-gradient(60% 68% at 76% 20%,#EAF4F1 0%,transparent 60%),radial-gradient(70% 76% at 18% 76%,#0F766E 0%,transparent 62%),linear-gradient(150deg,#CFE8E1 0%,#12796F 48%,#06322C 100%)}
.m3 {--mesh:radial-gradient(56% 64% at 26% 24%,#FFD1E4 0%,transparent 58%),radial-gradient(66% 72% at 84% 80%,#6B32B4 0%,transparent 60%),linear-gradient(160deg,#FFE6D6 0%,#B93FA6 50%,#2E1052 100%)}
.m4 {--mesh:radial-gradient(62% 68% at 20% 78%,#FFE083 0%,transparent 60%),radial-gradient(58% 64% at 78% 20%,#F1731F 0%,transparent 56%),linear-gradient(172deg,#FFF3CF 0%,#B0781A 54%,#40290A 100%)}
.m5 {--mesh:radial-gradient(60% 66% at 74% 26%,#FFB07A 0%,transparent 58%),radial-gradient(72% 78% at 24% 84%,#A6263C 0%,transparent 62%),linear-gradient(158deg,#FFDCC8 0%,#C22E42 52%,#3F0A14 100%)}
.m6 {--mesh:radial-gradient(58% 66% at 30% 20%,#DCEEFA 0%,transparent 58%),radial-gradient(68% 74% at 80% 84%,#1F4E8C 0%,transparent 62%),linear-gradient(164deg,#E9F2F9 0%,#3A78B8 50%,#0C2444 100%)}
.m7 {--mesh:radial-gradient(54% 60% at 50% 16%,#FFE49A 0%,transparent 56%),radial-gradient(78% 82% at 50% 108%,#14100C 0%,transparent 62%),linear-gradient(180deg,#F7CE72 0%,#8A5410 48%,#1A1208 100%)}
.m8 {--mesh:radial-gradient(58% 64% at 22% 26%,#EDF7DA 0%,transparent 58%),radial-gradient(70% 76% at 78% 82%,#2F7A38 0%,transparent 60%),linear-gradient(156deg,#F4F7E4 0%,#4F8C3E 52%,#122E16 100%)}
.m9 {--mesh:radial-gradient(56% 62% at 76% 22%,#FFA24F 0%,transparent 56%),radial-gradient(66% 72% at 22% 78%,#C41E68 0%,transparent 60%),linear-gradient(150deg,#FFDDB8 0%,#E2356F 50%,#4E0A2C 100%)}
.m10{--mesh:radial-gradient(52% 58% at 68% 24%,#FFC46B 0%,transparent 54%),radial-gradient(76% 82% at 30% 88%,#1B2470 0%,transparent 62%),linear-gradient(166deg,#C8CBEC 0%,#2F3785 50%,#0B0E28 100%)}
.m11{--mesh:radial-gradient(56% 62% at 30% 22%,#FFF0D2 0%,transparent 56%),radial-gradient(70% 76% at 76% 80%,#7A4A12 0%,transparent 60%),linear-gradient(162deg,#FFF6E6 0%,#C08A38 52%,#33200A 100%)}
.m12{--mesh:radial-gradient(54% 60% at 72% 20%,#D7F0EA 0%,transparent 56%),radial-gradient(72% 78% at 26% 82%,#0B3A4A 0%,transparent 62%),linear-gradient(154deg,#E4F3F1 0%,#15697F 50%,#04212B 100%)}

/* ============================================================
   HEADER / PROGRESS / FOOTER
   ============================================================ */
.prog{position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none}
.prog i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--saf),var(--saf-l)); transition:width .1s linear}

/* ------------------------------------------------------------
   Header: a plain full-width bar at rest, condensing into a
   floating pill once you scroll.

   The pill lives on .hdr-in, not on .hdr — .hdr stays a
   full-width sticky band of constant height, so nothing below it
   shifts when the state flips.  The float comes from `top` on the
   sticky element, which moves where it pins WITHOUT touching flow,
   and the gap above the pill simply shows the page scrolling
   under it.  --hdr-h stays 69px in both states, so the hero's
   negative top margin keeps lining up.
   ------------------------------------------------------------ */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:top .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
/* the full-width band hands its surface over to the pill — otherwise you get
   a bar behind a bar.  Backdrop-filter has to go too, or the strip either
   side of the pill stays visibly blurred. */
.hdr.stuck{
  top:10px; background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hdr-in{
  display:flex; align-items:center; gap:20px; padding-block:13px;
  border:1px solid transparent; border-radius:0; background:transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), max-width .4s var(--ease),
             padding .4s var(--ease), border-radius .4s var(--ease);
}
.hdr.stuck .hdr-in{
  max-width:calc(var(--maxw) - 56px);
  padding-block:10px; padding-inline:clamp(16px,2.2vw,28px);
  background:rgba(255,255,255,.86); border-color:var(--line-2); border-radius:999px;
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 18px 40px -24px rgba(20,16,12,.34), 0 2px 6px -3px rgba(20,16,12,.08);
}
/* the mobile sheet drops out of the pill, so it needs its own rounded
   surface rather than the square band it used to hang off */
.hdr.stuck .sheet{
  margin:8px auto 0; max-width:calc(var(--maxw) - 56px);
  border:1px solid var(--line-2); border-top-color:var(--line-2); border-radius:20px;
  box-shadow:0 18px 40px -24px rgba(20,16,12,.34);
}
.logo{display:flex; align-items:center; gap:10px; margin-right:auto}
.logo-ico{width:34px; height:34px; flex:none}
.logo-tx{font-family:var(--f-dis); font-size:19px; font-weight:800; letter-spacing:-.04em; line-height:1}
.logo-tx span{color:var(--saf)}
.nav{display:flex; gap:2px}
.nav a{position:relative; padding:8px 12px; font-size:14.5px; font-weight:500; color:var(--ink-2); border-radius:8px; transition:color .25s}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:1.5px; background:var(--saf);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink); font-weight:600}
.nav a.on::after,.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{display:flex; align-items:center; gap:8px}
.burger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); align-items:center; justify-content:center}
.sheet{display:none; border-top:1px solid var(--line-2); background:var(--paper); padding:10px var(--pad) 20px}
.sheet.open{display:block}
.sheet a{display:block; padding:12px 2px; font-size:16px; font-weight:500; border-bottom:1px solid var(--line-2)}
.sheet .btn{width:100%; margin-top:12px; border-bottom:0}

.ftr{border-top:1px solid var(--line-2); padding-block:clamp(44px,5vw,68px) 24px; font-size:14.5px; color:var(--ink-2)}
.ftr-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(24px,3.4vw,52px)}
.ftr h5{font-family:var(--f-dis); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ftr a:hover{color:var(--saf-d)}
.ftr .about{margin-top:16px; max-width:36ch; font-size:14px; line-height:1.6}
.ftr-ct{display:grid; gap:8px; margin-top:18px; font-size:14px}
.ftr-ct a{display:inline-flex; align-items:center; gap:9px}
.ftr-ct svg{color:var(--ink-3); flex:none}
.socials{display:flex; gap:8px; margin-top:20px}
/* marks, not links — they carry no href, so no hover-lift and no pointer */
.socials a,.socials span{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); transition:.3s}
.socials a:hover{background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-2px)}
.socials span{color:var(--ink-3)}
/* Registered-entity line. Mono, quiet, and set apart from the nav — this is
   reference material someone verifies the company against, not navigation.
   Items are separated by a rule so CIN / office / phone stay readable as
   discrete facts however many of them are filled in. */
.ftr-id{
  margin-top:clamp(30px,3.6vw,48px); padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:6px 0; font-family:var(--f-mon);
  font-size:11.6px; line-height:1.6; color:var(--ink-3);
}
.ftr-id span{padding-right:14px; margin-right:14px; border-right:1px solid var(--line)}
.ftr-id span:last-child{padding-right:0; margin-right:0; border-right:0}
.ftr-id b{color:var(--ink-2); font-weight:500}
.ftr-id a:hover{color:var(--saf-d)}
.ftr-base{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:12.8px; color:var(--ink-3);
}
.ftr-base nav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-left:auto}
.ftr-base nav a:hover{color:var(--saf-d)}
@media (max-width:640px){
  /* the vertical rules collapse badly once each fact wraps to its own line */
  .ftr-id{display:block}
  .ftr-id span{display:block; padding:0; margin:0 0 4px; border-right:0}
}

/* ------------------------------------------------------------
   Centred page hero. Two glows sit behind it rather than one so
   the block reads as lit from both sides — a single centred wash
   just looks like a smudge behind the type.
   ------------------------------------------------------------ */
.phero.mid{
  text-align:center; padding-block:clamp(42px,5.2vw,78px) clamp(56px,6vw,92px);
  /* the hairline was the other half of the hard edge — with the fade strip
     doing the separating, a border on top of it just reinstates the seam */
  border-bottom:0;
}
.phero-fade{
  position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  height:clamp(90px,15vh,170px);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--paper) 82%, var(--paper) 100%);
}
.phero.mid .phero-in{max-width:880px; margin-inline:auto}
.phero.mid .crumb,.phero.mid .kicker,.phero.mid .phero-btns{justify-content:center}
.phero.mid .lead{margin-inline:auto}

/* ============================================================
   COOKIE CONSENT BAR
   Bottom-left card rather than a full-width curtain: it has to be
   noticeable without burying the first screen of a site whose
   whole job is showing pictures.
   ============================================================ */
.ckbar{
  position:fixed; left:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px);
  z-index:200; width:min(420px, calc(100vw - 28px));
  background:rgba(255,255,255,.94); backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 26px 60px -28px rgba(20,16,12,.42), 0 2px 8px -4px rgba(20,16,12,.1);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.ckbar.show{opacity:1; transform:none}
.ckbar-in{padding:clamp(16px,2vw,20px)}
.ckbar p{font-size:13.6px; line-height:1.6; color:var(--ink-2)}
.ckbar p b{color:var(--ink); font-weight:600}
.ckbar p a{color:var(--saf-d); text-decoration:underline; text-underline-offset:2px}
.ckbar-btns{display:flex; gap:9px; margin-top:15px}
.ckbar-btns .btn{flex:1 1 auto; justify-content:center}
@media (max-width:520px){ .ckbar-btns{flex-direction:column} }

/* ------------------------------------------------------------
   Flat CTA — no card, no form. A dark full-bleed band, centred,
   saffron primary and a ghost secondary.
   ------------------------------------------------------------ */
.cta-flat{
  position:relative; overflow:hidden; background:var(--paper);
  border-top:1px solid var(--line-2);
  padding-block:clamp(66px,8vw,120px);
}
/* No frame and the same ground as the section above, so the block needs some
   other way to register. A single wide saffron bloom low-left does it without
   drawing a box — the eye reads warmth before it reads an edge. */
.cta-flat .wrap{position:relative; z-index:2}
.cta-flat h2{
  max-width:15ch; color:var(--ink);
  font-family:var(--f-dis); font-weight:800; letter-spacing:-.045em;
  font-size:clamp(34px,5.8vw,70px); line-height:1.01;
}
/* the rule takes whatever the links leave, so the actions always sit hard
   right however long the labels are */
.cta-line{display:flex; align-items:center; gap:18px; margin-top:clamp(34px,4.4vw,58px); flex-wrap:wrap}
.cta-rule{flex:1 1 120px; height:1px;
  /* fades out to the left so it reads as drawn from the actions back
     toward the heading, rather than as a divider cutting the block */
  background:linear-gradient(90deg,rgba(241,115,31,.18),var(--saf) 88%)}
.cta-alt{
  font-family:var(--f-mon); font-size:14px; letter-spacing:.04em;
  color:var(--ink-3); transition:color .3s;
}
.cta-alt:hover{color:var(--ink)}
.cta-sep{color:var(--line)}
.cta-go{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mon); font-size:14.5px; letter-spacing:.04em;
  color:var(--saf-d); transition:color .3s;
}
.cta-go .ar{transition:transform .35s var(--ease)}
.cta-go:hover{color:var(--ink)}
.cta-go:hover .ar{transform:translateX(5px)}
@media (max-width:640px){
  .cta-flat h2{max-width:none}
  .cta-line{gap:12px}
  .cta-rule{flex-basis:100%; margin-bottom:4px}
}

/* ============================================================
   PAGE-HERO ART (generator / platform / prompts / about)
   Inline SVG so it recolours with the theme and adds no requests.
   ============================================================ */
.ph-art{position:relative}
/* direct child only — this used to match every descendant svg, which blew
   the 14px lock icon in the code note up to 449px */
.ph-art > svg{width:100%; height:auto; display:block; max-width:460px; margin-left:auto}

/* --- code sample living in a hero (api page) ------------------------------
   The samples are different lengths, so a height that follows content would
   jump the whole hero every time you switch language tab. A fixed viewport
   with its own scroll keeps the layout still — sized to fit the longest
   sample (JavaScript, 15 lines) so in practice it never scrolls. */
.ph-art .code-block{max-width:540px; margin-left:auto}
.ph-art .code{
  height:clamp(230px, 30vh, 336px); overflow:auto;
  font-size:12.6px; line-height:1.7; padding:16px 18px;
}
.ph-art .code-note{
  display:flex; align-items:flex-start; gap:9px; max-width:540px; margin:14px 0 0 auto;
  font-size:12.6px; line-height:1.55; color:var(--ink-3);
}
.ph-art .code-note svg{color:var(--saf-d); flex:none; margin-top:2px}
/* the copy column is shorter than the code — top-align so the h1 and the
   tab bar start on the same line rather than the text floating mid-block */
.phero-split:has(.code-block){align-items:start}
@media (max-width:900px){
  .ph-art .code-block,.ph-art .code-note{max-width:none; margin-inline:0}
  .ph-art .code{height:auto; max-height:340px}
}
.ph-art .pf{fill:var(--paper); stroke:var(--line); stroke-width:1.5}
.ph-art .pl{fill:#EBE3D9}
.ph-art .pc{fill:var(--saf-50); stroke:var(--saf-100); stroke-width:1.4}
.ph-art .ps{fill:var(--saf)}
.ph-art .pdash{stroke:var(--saf); stroke-width:1.8; fill:none; stroke-dasharray:5 6; stroke-linecap:round; opacity:.65}
.ph-art .parrow{stroke:var(--saf); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
/* generator */
.ph-art .pswatch rect{fill:var(--paper-3); stroke:var(--line-2); stroke-width:1.4}
.ph-art .pswatch rect.on{fill:var(--saf-50); stroke:var(--saf); stroke-width:2}
.ph-art .pslider .trk{fill:var(--paper-3)}
.ph-art .pslider .knb{fill:var(--saf); stroke:var(--paper); stroke-width:3}
/* platform */
.ph-art .pcore{fill:var(--ink)}
.ph-art .pspark{fill:var(--saf-l)}
/* about */
.ph-art .pidea{fill:var(--ink)}
.ph-art .psky{fill:var(--saf-50)}
.ph-art .psun{fill:var(--saf-l)}
.ph-art .phill{fill:var(--saf-d); opacity:.9}

/* motion, only once the hero has arrived */
.ph-art .pdash{stroke-dashoffset:0; animation:phDash 2.6s linear infinite}
@keyframes phDash{to{stroke-dashoffset:-22}}
.ph-art.is-in .pslider .knb{animation:phKnob 3.6s var(--ease) infinite alternate}
.ph-art.is-in .pslider .knb:nth-of-type(2){animation-delay:-1.2s}
.ph-art.is-in .pslider .knb:nth-of-type(3){animation-delay:-2.4s}
@keyframes phKnob{from{transform:translateX(-14px)} to{transform:translateX(14px)}}
.ph-art.is-in .pswatch rect.on{animation:phPulse 3s var(--ease) infinite}
@keyframes phPulse{0%,100%{opacity:1} 50%{opacity:.72}}
@media (max-width:900px){
  /* the copy is the point on a narrow screen — the graphic follows it */
  .ph-art svg{max-width:420px; margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .ph-art .pdash,.ph-art .pslider .knb,.ph-art .pswatch rect.on{animation:none}
}

/* ============================================================
   ARCHITECTURE LIST (platform)
   Deliberately not a card grid. Six boxes said "component
   library"; a numbered list with rules says someone wrote it
   down in order — and it breaks the heading/lead/3-up cadence
   that every other section on the site was repeating.
   ============================================================ */
.arch{list-style:none; counter-reset:arch; margin:0; padding:0; border-top:1px solid var(--line-2)}
.arch li{
  counter-increment:arch; position:relative;
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:8px clamp(24px,4vw,64px);
  padding:clamp(20px,2.4vw,30px) 0 clamp(20px,2.4vw,30px) clamp(38px,4vw,58px);
  border-bottom:1px solid var(--line-2);
}
.arch li::before{
  content:counter(arch,decimal-leading-zero);
  position:absolute; left:0; top:clamp(22px,2.5vw,32px);
  font-family:var(--f-mon); font-size:12px; letter-spacing:.1em; color:var(--saf-d);
}
.arch h3{
  font-family:var(--f-dis); font-size:clamp(17px,1.8vw,21px); font-weight:700;
  letter-spacing:-.028em; color:var(--ink);
}
.arch p{font-size:14.8px; line-height:1.65; color:var(--ink-2); max-width:62ch}
@media (max-width:760px){
  .arch li{grid-template-columns:minmax(0,1fr); gap:7px; padding-left:34px}
}

/* ============================================================
   AUTH  (login / signup)
   ============================================================ */
.auth{
  position:relative; overflow:hidden;
  min-height:calc(100vh - var(--hdr-h) - 90px);
  display:grid; place-items:center;
  padding:clamp(36px,6vw,80px) var(--pad);
}
.auth-card{
  position:relative; z-index:2; width:100%; max-width:432px;
  padding:clamp(26px,3vw,40px); border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--paper); box-shadow:0 30px 70px -40px rgba(20,16,12,.3), 0 1px 2px rgba(20,16,12,.03);
}
.auth-card h1{font-family:var(--f-dis); font-size:clamp(27px,3vw,34px); font-weight:800; letter-spacing:-.038em}
.auth-sub{margin-top:9px; font-size:14.6px; line-height:1.6; color:var(--ink-2)}
.auth-card form{margin-top:26px}
.af-field{margin-bottom:17px}
.af-field label{display:block; font-size:13.4px; font-weight:600; color:var(--ink); margin-bottom:7px}
.af-field input{
  width:100%; padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  font-family:inherit; font-size:15px; transition:border-color .25s, background .25s;
}
.af-field input::placeholder{color:var(--ink-3)}
.af-field input:focus{outline:none; border-color:var(--saf); background:var(--paper)}
.af-field input.bad{border-color:#C0392B; background:#FFF7F6}
/* room for the toggle so the eye never sits on top of the text */
.af-pw{position:relative}
.af-pw input{padding-right:48px}
.af-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  color:var(--ink-3); transition:.25s;
}
.af-eye:hover{color:var(--ink); background:var(--paper-3)}
.af-eye.on{color:var(--saf-d)}
.af-hint{display:block; margin-top:6px; font-size:12.4px; color:var(--ink-3)}
.af-err{display:block; margin-top:6px; font-size:12.6px; color:#C0392B; min-height:0}
.af-err:empty{display:none}
.af-submit{width:100%; justify-content:center; margin-top:6px}
.af-msg{margin-top:13px; font-size:13.4px; line-height:1.55; color:var(--ink-2); min-height:0}
.af-msg:empty{display:none}
.af-msg.ok{color:var(--saf-d)}
.af-forgot{
  display:block; margin-top:15px; text-align:center;
  font-size:13.4px; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px;
}
.af-forgot:hover{color:var(--saf-d)}
.af-legal{margin-top:15px; font-size:12.6px; line-height:1.55; color:var(--ink-3)}
.af-legal a{color:var(--saf-d); text-decoration:underline; text-underline-offset:2px}
.auth-alt{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2);
  text-align:center; font-size:14px; color:var(--ink-2);
}
.auth-alt a{color:var(--saf-d); font-weight:600}
/* Account chip — replaces the old standalone "Log in" link. Only rendered
   once site.js confirms a local session, so signed-out visitors see the
   single primary CTA and nothing else competing with it. */
.hdr-acct{position:relative}
.hdr-acct > button{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px;
  border:1px solid var(--line); border-radius:22px; transition:.22s;
}
.hdr-acct > button:hover{border-color:var(--saf); background:var(--saf-50)}
.acct-in{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--saf); color:#fff; font-family:var(--f-dis); font-size:13px; font-weight:700;
}
.acct-nm{font-size:14px; font-weight:600; color:var(--ink); max-width:11ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.acct-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:40; min-width:206px;
  display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 50px -26px rgba(20,16,12,.4);
}
/* display:flex above would otherwise beat the UA stylesheet's [hidden]
   {display:none}, leaving the menu permanently open. */
.acct-menu[hidden]{display:none}
.acct-mail{
  font-family:var(--f-mon); font-size:11px; color:var(--ink-3); padding:6px 10px 9px;
  border-bottom:1px solid var(--line); margin-bottom:5px; overflow:hidden; text-overflow:ellipsis;
}
.acct-menu a, .acct-menu button{
  text-align:left; font-size:14px; color:var(--ink-2); padding:8px 10px; border-radius:8px; transition:.18s;
}
.acct-menu a:hover, .acct-menu button:hover{background:var(--paper-2); color:var(--ink)}
.af-alt{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-size:14.5px; font-weight:600; color:var(--ink); transition:.2s;
}
.af-alt:hover{border-color:var(--saf); background:var(--saf-50); color:var(--saf-d)}
.af-alt:disabled{opacity:.55; cursor:default}
.af-alt svg{color:var(--saf-d)}
.af-alt-note{margin-top:9px; text-align:center; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.af-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-size:14.5px; font-weight:600; color:var(--ink); transition:.2s; margin-top:22px;
}
.af-google:hover{border-color:var(--ink-3); background:var(--paper-2)}
.af-google:disabled{opacity:.55; cursor:default}
.af-or{
  display:flex; align-items:center; gap:14px; margin:20px 0 4px;
  font-family:var(--f-mon); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.af-or::before, .af-or::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-note{
  margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--paper-2);
  border:1px solid var(--line); font-size:12.4px; line-height:1.55; color:var(--ink-3);
}

/* Studio dashboard bar — what replaces the marketing hero once you are in. */
.dash{border-bottom:1px solid var(--line); background:var(--paper-2)}
.dash-who p{margin-top:9px; font-size:14.5px; color:var(--ink-2); max-width:56ch; line-height:1.55}
.dash-who p a{color:var(--saf-d); font-weight:600; text-decoration:underline; text-underline-offset:2px}
#dashSubIn b{color:var(--ink); font-weight:600}
#dashSubOut[hidden], #dashSubIn[hidden], #dashStats[hidden], #dashCta[hidden]{display:none}
#work[hidden]{display:none}
.dash-who h1{
  font-family:var(--f-dis); font-size:clamp(30px,4.4vw,50px); font-weight:800;
  letter-spacing:-.042em; line-height:1;
}
.dash-bar{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px);
  flex-wrap:wrap; padding-block:clamp(24px,3.2vw,38px);
}
.dash-eyebrow{
  display:block; font-family:var(--f-mon); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--saf-d); margin-bottom:8px;
}
.dash-eyebrow[hidden]{display:none}

/* upgrade prompt — the only thing on the right of the bar */
.dash-up{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:var(--paper);
  box-shadow:0 1px 2px rgba(20,16,12,.04); transition:.24s var(--ease);
}
.dash-up:hover{border-color:var(--saf); background:var(--saf-50); transform:translateY(-1px)}
.dash-up[hidden]{display:none}
/* title and subtitle stack; only the text block and the arrow are flex
   items, or all three sit on one line */
.dash-up-tx{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.dash-up-t{font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.012em}
.dash-up-s{font-family:var(--f-mon); font-size:10.5px; color:var(--ink-3)}
.dash-up-a{flex:none; color:var(--saf-d); font-size:17px; transition:transform .24s var(--ease)}
.dash-up:hover .dash-up-a{transform:translateX(3px)}
@media (max-width:640px){ .dash-up{width:100%} }
.dash-cta{display:flex; gap:9px; flex-wrap:wrap}
@media (max-width:640px){ .dash-cta{width:100%} .dash-cta .btn{flex:1} }

.dash-mail{font-family:var(--f-mon); font-size:11.5px; color:var(--ink-3); margin-left:8px}
.dash-stats{display:flex; align-items:center; gap:clamp(16px,2.4vw,30px)}
.dash-stat{display:flex; flex-direction:column; gap:3px}
.dash-stat span{font-family:var(--f-mon); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.dash-stat b{font-family:var(--f-dis); font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--ink)}
@media (max-width:640px){
  .hdr-acct .acct-nm{display:none}
  .dash-bar{align-items:flex-start; gap:20px}
  .dash-stats{width:100%; justify-content:space-between; gap:12px}
}

/* ============================================================
   CODE BLOCKS (api page)
   Dark, because that is what a developer expects a terminal to
   look like — and it is the one place on a white site where the
   inversion carries meaning rather than being decoration.
   ============================================================ */
.code-block{border-radius:var(--r-lg); overflow:hidden; box-shadow:0 26px 60px -34px rgba(20,16,12,.45)}
.code-tabs{display:flex; gap:2px; padding:7px 7px 0; background:#0E0B08}
.code-tabs button{
  padding:9px 15px; border-radius:9px 9px 0 0; font-family:var(--f-mon); font-size:12.4px;
  color:rgba(255,255,255,.5); transition:.25s;
}
.code-tabs button:hover{color:rgba(255,255,255,.85)}
.code-tabs button.on{background:#17120D; color:var(--saf-l)}
.code-bar{
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  background:#17120D; border-bottom:1px solid rgba(255,255,255,.07);
}
.code-dot{width:9px; height:9px; border-radius:50%; background:var(--saf); flex:none}
.code-file{font-family:var(--f-mon); font-size:11.5px; letter-spacing:.06em; color:rgba(255,255,255,.45)}
.code{
  margin:0; padding:clamp(16px,2vw,24px); background:#17120D; overflow-x:auto;
  font-family:var(--f-mon); font-size:13.2px; line-height:1.72; color:#E7DED4;
  white-space:pre; tab-size:2;
}
/* the caret only exists while typing — a permanent one reads as an input */
.code::after{
  content:""; display:inline-block; width:7px; height:1.05em; margin-left:2px;
  vertical-align:-.18em; background:var(--saf); animation:blink 1s steps(1) infinite;
}
.code.done::after{display:none}
.tk-s{color:#9BD1A8}   /* string      */
.tk-c{color:#6F6459}   /* comment     */
.tk-n{color:#F0B36B}   /* number      */
.tk-k{color:var(--saf-l); font-weight:500}
.tk-f{color:#8FC8E8}   /* call        */
.tk-p{color:#A2968A}   /* punctuation */
@media (prefers-reduced-motion:reduce){ .code::after{display:none} }

/* ============================================================
   COMPANY REGISTER (about page)
   A definition list, not prose — label left, value right, so a
   reviewer can scan for "CIN" instead of reading a paragraph.
   ============================================================ */
.reg{
  margin:0; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); overflow:hidden; box-shadow:var(--sh);
}
.reg > div{
  display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:4px 22px; padding:13px clamp(16px,2vw,24px); border-top:1px solid var(--line-2);
}
.reg > div:first-child{border-top:0}
.reg dt{
  font-family:var(--f-mon); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding-top:3px;
}
.reg dd{margin:0; font-size:14.6px; line-height:1.55; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.reg dd.mono{font-family:var(--f-mon); font-size:13.4px; letter-spacing:.02em}
.reg dd a{color:var(--saf-d); text-decoration:underline; text-underline-offset:2px}
.reg dd a:hover{color:var(--ink)}
@media (max-width:640px){
  .reg > div{grid-template-columns:minmax(0,1fr); gap:3px; padding:12px 15px}
}

/* ============================================================
   PIPELINE ZIG-ZAG (generator page)
   Art and copy swap sides each row.  Order is flipped rather than
   the columns redefined, so the DOM keeps art-then-copy on every
   row and the mobile stack needs no special casing.
   ============================================================ */
.zz{display:grid; gap:clamp(26px,3.4vw,52px)}
.zz-row{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,3.4vw,54px); align-items:center;
  padding-bottom:clamp(26px,3.4vw,48px); border-bottom:1px solid var(--line-2);
}
.zz-row:last-child{border-bottom:0; padding-bottom:0}
.zz-row:nth-child(even) .zz-art{order:2}
.zz-art{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(10px,1.2vw,16px); box-shadow:var(--sh); overflow:hidden;
}
.zz-art svg{width:100%; height:auto; display:block}
.zz-n{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mon);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--saf-d);
}
.zz-tx h3{margin:12px 0 10px; font-family:var(--f-dis); font-size:clamp(21px,2.3vw,28px); font-weight:700; letter-spacing:-.03em}
.zz-tx > p{font-size:15px; line-height:1.65; color:var(--ink-2); max-width:56ch}
.zz-ctls{display:grid; gap:8px; margin-top:20px}
.zz-ctl{
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--paper); transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.zz-ctl:hover{border-color:var(--saf-100); transform:translateX(3px)}
.zz-ctl b{display:block; font-size:13.6px; color:var(--ink); font-weight:600}
.zz-ctl span{display:block; margin-top:3px; font-size:13.2px; line-height:1.55; color:var(--ink-2)}
.zz-ctl em{display:block; margin-top:5px; font-style:normal; font-size:12.4px; line-height:1.5; color:var(--ink-3)}
.zz-ctl em::before{content:"Reach for it when "; color:var(--saf-d)}
.zz-note{
  display:flex; align-items:flex-start; gap:9px; margin-top:18px; padding:11px 13px;
  border-radius:var(--r); background:var(--signal-50); border:1px solid rgba(15,118,110,.2);
  font-size:13px; line-height:1.55; color:var(--ink-2);
}
.zz-note svg{color:var(--signal); flex:none; margin-top:2px}
.zz-note a{color:var(--signal); text-decoration:underline; text-underline-offset:2px}

/* --- stage art ------------------------------------------------------- */
.zz-art .zf{fill:var(--paper-2); stroke:var(--line); stroke-width:1.5}
.zz-art .zl{fill:#E9E0D5}
.zz-art .zc{fill:var(--saf-50); stroke:var(--saf-100); stroke-width:1.4}
.zz-art .zarr{stroke:var(--saf); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.zz-art .zbars rect{fill:var(--saf)}
.zz-art .zgrid rect{fill:var(--saf); opacity:.16}
.zz-art .zsoft circle,.zz-art .zsoft path{fill:var(--saf-l); opacity:.5; filter:blur(5px)}
.zz-art .zsharp circle{fill:var(--saf)}
.zz-art .zsharp path{fill:var(--saf-d); opacity:.85}
.zz-art .zsplit{stroke:var(--saf); stroke-width:2; stroke-dasharray:5 5}
.zz-art .zshield{fill:var(--signal-50); stroke:var(--signal); stroke-width:2}
.zz-art .ztick{stroke:var(--signal); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.zz-art .zstream{fill:var(--saf-100)}

/* Animation runs only once the row has been revealed, so nothing loops
   unseen above the fold and burns frames on a long page. */
.zz-row.is-in .zchips rect{animation:zPop .5s var(--ease) backwards}
.zz-row.is-in .zchips rect:nth-child(2){animation-delay:.08s}
.zz-row.is-in .zchips rect:nth-child(3){animation-delay:.16s}
.zz-row.is-in .zchips rect:nth-child(4){animation-delay:.24s}
.zz-row.is-in .zchips rect:nth-child(5){animation-delay:.32s}
.zz-row.is-in .zbars rect{animation:zGrow 1.9s var(--ease) infinite alternate; transform-origin:50% 100%}
.zz-row.is-in .zbars rect:nth-child(2){animation-delay:.18s}
.zz-row.is-in .zbars rect:nth-child(3){animation-delay:.36s}
.zz-row.is-in .zbars rect:nth-child(4){animation-delay:.54s}
/* the noise field settling: opacity sweeps left to right off --i */
.zz-row.is-in .zgrid rect{animation:zSettle 3.4s var(--ease) infinite; animation-delay:calc(var(--i) * .09s)}
.zz-row.is-in .zsplit{animation:zWipe 2.6s var(--ease) infinite alternate}
.zz-row.is-in .ztick{stroke-dasharray:44; stroke-dashoffset:44; animation:zDraw .7s var(--ease) .2s forwards}
.zz-row.is-in .zstream{animation:zFlow 2.2s var(--ease) infinite; transform-origin:0 50%}
.zz-row.is-in .zstream.zs2{animation-duration:3.6s}
@keyframes zPop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes zGrow{from{transform:scaleY(.55)} to{transform:scaleY(1)}}
@keyframes zSettle{0%,100%{opacity:.1} 50%{opacity:.55}}
@keyframes zWipe{from{transform:translateX(-14px)} to{transform:translateX(14px)}}
@keyframes zDraw{to{stroke-dashoffset:0}}
@keyframes zFlow{0%{transform:scaleX(.12)} 70%,100%{transform:scaleX(1)}}
@media (max-width:860px){
  .zz-row{grid-template-columns:minmax(0,1fr); gap:20px}
  .zz-row:nth-child(even) .zz-art{order:0}   /* stacked: art always leads */
}
@media (prefers-reduced-motion:reduce){
  .zz-row.is-in .zbars rect,.zz-row.is-in .zgrid rect,.zz-row.is-in .zsplit,
  .zz-row.is-in .zstream,.zz-row.is-in .zchips rect{animation:none}
  .zz-row.is-in .ztick{stroke-dashoffset:0; animation:none}
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero{position:relative; overflow:hidden; padding-block:clamp(30px,3.6vw,52px) clamp(34px,4vw,58px); border-bottom:1px solid var(--line-2)}
.phero-in{position:relative; z-index:2}
.crumb{display:flex; align-items:center; gap:8px; font-family:var(--f-mon); font-size:11.5px; color:var(--ink-3); letter-spacing:.06em}
.crumb a:hover{color:var(--saf-d)}
.phero h1{margin-top:0; font-size:clamp(34px,5.4vw,64px); font-weight:800; letter-spacing:-.042em}
.phero .lead{margin-top:18px}
.phero-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.phero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); align-items:center}

/* ============================================================
   SHARED BLOCKS
   ============================================================ */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px)}
.fact{padding-top:18px; border-top:1px solid var(--line)}
.fact:first-child{border-top-color:var(--saf)}
.fact b{display:block; font-family:var(--f-dis); font-size:clamp(30px,4vw,48px); font-weight:800; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.fact b i{font-style:normal; color:var(--saf)}
.fact span{display:block; margin-top:9px; font-size:13.5px; color:var(--ink-2); line-height:1.45}

.g2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px)}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px)}

.card{
  padding:clamp(22px,2.4vw,30px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--saf-100)}
.card-hd{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--saf-50); color:var(--saf-d)}
.ico-d{background:var(--ink); color:var(--saf-l)}
.tag{margin-left:auto; font-family:var(--f-mon); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:6px; background:var(--paper-3); color:var(--ink-3)}
/* --saf-d on --saf-50 is only 3.99:1, and this label is 10.5px caps */
.tag.new{background:var(--saf-50); color:#9A3D07}
.tag.live{background:var(--signal-50); color:var(--signal)}
.card p{font-size:14.5px; color:var(--ink-2); line-height:1.6}
/* "Who it's for" variant — the render bleeds to the card edge, so the
   padding moves off .card and onto the body block underneath it. */
.card.who{padding:0; overflow:hidden; display:flex; flex-direction:column}
.who-img{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); border-bottom:1px solid var(--line-2)}
.who-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.card.who:hover .who-img img{transform:scale(1.045)}
.who-b{padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; flex:1 1 auto}
.who-b .ico{margin-bottom:13px}
.who-b b{display:block; margin-bottom:6px}
@media (prefers-reduced-motion:reduce){ .card.who:hover .who-img img{transform:none} }
.feat{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2)}
.feat span{font-family:var(--f-mon); font-size:11px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line-2); padding:5px 9px; border-radius:6px}

.tcard{padding-top:18px; border-top:1px solid var(--line)}
.tcard .ti{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--ink); color:var(--saf-l); margin-bottom:14px}
.tcard b{display:block; font-family:var(--f-dis); font-size:17px; font-weight:700; letter-spacing:-.026em}
.tcard p{margin-top:7px; font-size:14px; color:var(--ink-2); line-height:1.58}

.stack{display:flex; flex-wrap:wrap; gap:7px}
.stack span{font-family:var(--f-mon); font-size:11.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:7px; padding:6px 11px; background:var(--paper); transition:.25s}
.stack span:hover{border-color:var(--saf); color:var(--saf-d)}
.stack .aws,.stack .core{background:var(--saf-50); border-color:var(--saf-100); color:var(--saf-d)}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  font-family:var(--f-mon); font-size:11px; letter-spacing:.04em; padding:6px 10px; border-radius:7px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--paper); transition:.25s; cursor:pointer;
}
.chip:hover{border-color:var(--saf)}
.chip.on{background:var(--saf-50); border-color:var(--saf-100); color:var(--saf-d); font-weight:500}

/* data table */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper)}
table.tbl{width:100%; border-collapse:collapse; font-size:14.2px; min-width:620px}
table.tbl th,table.tbl td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-2)}
table.tbl thead th{
  font-family:var(--f-mon); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--paper-2);
}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--paper-2)}
table.tbl td b{font-weight:600}
table.tbl .c{text-align:center}
table.tbl .yes{color:var(--signal)}
table.tbl .no{color:var(--ink-3)}
table.tbl code{font-family:var(--f-mon); font-size:12.5px; color:var(--saf-d); background:var(--saf-50); padding:3px 7px; border-radius:5px}

/* accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; padding:22px 0;
  list-style:none; font-family:var(--f-dis); font-size:clamp(16.5px,1.7vw,19px); font-weight:600;
  letter-spacing:-.022em; transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--saf-d)}
.faq summary .pm{position:relative; width:18px; height:18px; flex:none}
.faq summary .pm::before,.faq summary .pm::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--ink-2);
  transition:transform .35s var(--ease);
}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .ans{padding:0 40px 24px 0; font-size:15px; color:var(--ink-2); line-height:1.68; max-width:66ch}

/* gallery grids */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px)}
.gal .tile{aspect-ratio:4/5}
.gal .g-wide{grid-column:span 2; aspect-ratio:8/5}
.gal-tx{position:absolute; inset:auto 0 0 0; z-index:5; padding:20px 16px 16px; background:linear-gradient(180deg,transparent,rgba(10,7,4,.74))}
.gal-tx b{display:block; font-family:var(--f-dis); font-size:17px; font-weight:700; color:#fff; letter-spacing:-.024em}
.gal-tx span{display:block; margin-top:4px; font-size:12.8px; color:rgba(255,255,255,.74); line-height:1.45}

/* CTA band */
.cta{position:relative; overflow:hidden; border-radius:var(--r-xl); color:#fff; padding:clamp(34px,4.6vw,68px); background:var(--ink)}
.cta-in{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,3.8vw,60px); align-items:center}
.cta .kicker{color:var(--saf-l)}
.cta .kicker::before{background:var(--saf-l)}
.cta h2{margin-top:14px; color:#fff}
.cta h2 em{font-style:normal; color:var(--saf-l)}
.cta p{margin-top:16px; font-size:16px; color:rgba(255,255,255,.66); line-height:1.6; max-width:46ch}
.cta-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.acc{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); backdrop-filter:blur(8px)}
.acc h3{font-family:var(--f-dis); font-size:19px; color:#fff; letter-spacing:-.026em}
.acc p{margin-top:8px; font-size:13.6px; color:rgba(255,255,255,.6); max-width:none}
.acc form{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.acc input{
  flex:1 1 180px; min-width:0; padding:12px 15px; border-radius:10px; font:inherit; font-size:14px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; transition:.25s;
}
.acc input::placeholder{color:rgba(255,255,255,.4)}
.acc input:focus{outline:none; border-color:var(--saf-l); background:rgba(255,255,255,.12)}
.acc button{padding:12px 20px; border-radius:10px; background:var(--saf); color:#fff; font-weight:600; font-size:14px; transition:.25s}
.acc button:hover{background:var(--saf-l); color:var(--ink)}
.acc .msg{margin-top:12px; font-family:var(--f-mon); font-size:12px; color:var(--saf-l); min-height:1.2em}

/* note / callout */
.note{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-3); line-height:1.55}
.note svg{flex:none; margin-top:3px}
.callout{
  display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:var(--r);
  background:var(--saf-50); border:1px solid var(--saf-100); font-size:14.5px; color:var(--ink-2); line-height:1.6;
}
.callout svg{flex:none; margin-top:3px; color:var(--saf-d)}
.callout b{color:var(--ink)}

/* ============================================================
   PROMPT LIBRARY (prompts page)
   ============================================================ */
.pl-filter{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:clamp(24px,3vw,38px)}
/* Masonry, not grid. The library carries 4:3, 1:1 and 4:5 renders now, so a
   fixed grid would either stretch cards to the tallest in the row or leave a
   ragged edge under every short one. CSS columns packs them by height and
   needs no JS; the trade is that reading order runs down a column rather than
   across a row, which for a filterable library is the right way round anyway. */
/* Masonry, packed in JS rather than by CSS columns. `columns` balances by
   content flow, and with cards this uneven — a 16:9 render with three lines
   of prose next to a 4:5 render with eight — it left the three columns
   ending as much as 200px apart. site.js walks the cards in order and drops
   each into whichever column is currently shortest, which is the greedy
   packing CSS cannot express, and re-runs it whenever the filter changes. */
.pl-grid{display:flex; align-items:flex-start; gap:clamp(14px,1.8vw,22px)}
.pl-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px)}
.pcard2{
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s, opacity .35s;
}
.pcard2:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--saf-100)}
.pcard2.hide{display:none}
/* Each card wears the ratio its render was made at — the same four Studio
   offers on the generator page. */
.pcard2 .tile{border-radius:0; aspect-ratio:4/3}
.pcard2.r11  .tile{aspect-ratio:1}
.pcard2.r45  .tile{aspect-ratio:4/5}
.pcard2.r169 .tile{aspect-ratio:16/9}
.pc-body{padding:18px; display:flex; flex-direction:column; flex:1}
.pc-cat{font-family:var(--f-mon); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--saf-d)}
.pc-prompt{
  margin-top:10px; font-family:var(--f-mon); font-size:12.8px; line-height:1.6; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:10px; padding:12px 13px;
}
.pc-why{margin-top:12px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.pc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2)}
.pc-meta{font-family:var(--f-mon); font-size:11px; color:var(--ink-3)}
.copy{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:7px 12px; transition:.25s;
}
.copy:hover{border-color:var(--saf); color:var(--saf-d)}
.copy.done{background:var(--signal-50); border-color:var(--signal); color:var(--signal)}

/* recipe rows — anatomy of a prompt */
.anat{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper)}
.anat-row{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:16px 20px; border-bottom:1px solid var(--line-2); align-items:start}
.anat-row:last-child{border-bottom:0}
.anat-row .k{font-family:var(--f-mon); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--saf-d); padding-top:3px}
.anat-row .v{font-family:var(--f-mon); font-size:13.2px; color:var(--ink); line-height:1.6}
.anat-row .v em{font-style:normal; color:var(--ink-3)}

/* ============================================================
   GENERATOR / GENERATE-IMAGE UI
   ============================================================ */
.gen{display:grid; grid-template-columns:340px 1fr; gap:clamp(18px,2.4vw,32px); align-items:start}
.gen-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;
  position:sticky; top:88px; box-shadow:var(--sh);
}
.gen-lbl{display:block; font-family:var(--f-mon); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.gen-lbl + .gen-lbl{margin-top:0}
.gen-field{margin-bottom:20px}
.gen-field:last-child{margin-bottom:0}
.gen textarea{
  width:100%; min-height:104px; resize:vertical; padding:13px 14px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  font-family:var(--f-mon); font-size:13.2px; line-height:1.6; transition:.25s;
}
.gen textarea:focus{outline:none; border-color:var(--saf); background:var(--paper)}
.gen textarea::placeholder{color:var(--ink-3)}
.gen-lbl-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px}
.gen-lbl-row .gen-lbl{margin:0}
.gen-swap{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mon); font-size:10.5px;
  letter-spacing:.05em; color:var(--ink-3); border:1px solid var(--line); border-radius:20px;
  padding:3px 9px 3px 7px; transition:.2s;
}
.gen-swap:hover{color:var(--saf-d); border-color:var(--saf); background:var(--saf-50)}
.gen-swap:active svg{transform:rotate(180deg); transition:transform .3s}
.gen-lock{
  display:flex; gap:7px; margin-top:9px; font-size:11.5px; line-height:1.5; color:var(--ink-3);
}
.gen-lock svg{flex:none; margin-top:2px; color:var(--saf-d)}
.gen-lock a{color:var(--saf-d); font-weight:600; text-decoration:underline; text-underline-offset:2px}
/* readonly is a state, not damage — keep it legible, just not invitingly editable */
.gen textarea[readonly]{background:var(--paper-2); cursor:default}
.gen textarea[readonly]:focus{border-color:var(--line); background:var(--paper-2)}
.gen-swap.spin svg{animation:swapSpin .45s var(--ease)}
@keyframes swapSpin{to{transform:rotate(360deg)}}
.gen-src{margin-top:16px; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.gen-src b{color:var(--ink-2); font-weight:600}
.gen-src a{color:var(--saf-d); text-decoration:underline; text-underline-offset:2px}

/* A library frame standing in for an unavailable render. It is labelled
   before it is shown, and the label is part of the same box so the image
   cannot be screenshotted free of its caption. */
.ref-wrap{border:1px solid var(--saf-100); border-radius:var(--r-lg); overflow:hidden; background:var(--saf-50)}
.ref-tag{padding:13px 16px; display:flex; flex-direction:column; gap:3px}
.ref-tag b{font-size:13px; color:var(--saf-d); letter-spacing:-.01em}
.ref-tag span{font-size:12px; line-height:1.5; color:var(--ink-2)}
.ref-tag a{color:var(--saf-d); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.ref-wrap .out{border-radius:0; cursor:default}
.gen-count{margin-top:7px; font-family:var(--f-mon); font-size:10.5px; color:var(--ink-3); text-align:right}
.gen-count[hidden]{display:none}
.gen-count.low{color:#b3261e}
/* --- style family: plain text, no chrome ------------------------------
   The rail already carries a bordered textarea, six bordered tiles and a
   bordered segment bar. One more box made it a sheet of boxes, so this is
   set as text with a chevron and nothing else. */
.sel{position:relative}
.sel-btn{
  display:inline-flex; align-items:center; gap:7px; padding:2px 0;
  font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.012em;
  border-bottom:1px solid transparent; transition:.2s;
}
.sel-btn:hover{color:var(--saf-d); border-bottom-color:var(--saf-100)}
.sel-chev{flex:none; color:var(--ink-3); transition:transform .22s}
.sel-btn[aria-expanded=true] .sel-chev{transform:rotate(180deg)}
.sel-menu{
  position:absolute; top:calc(100% + 8px); left:-10px; z-index:30; min-width:190px;
  display:flex; flex-direction:column; gap:1px; padding:6px; max-height:290px; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 50px -26px rgba(20,16,12,.42);
}
.sel-menu[hidden]{display:none}
.sel-opt{
  text-align:left; padding:8px 11px; border-radius:8px; font-size:14px;
  color:var(--ink-2); transition:.16s;
}
.sel-opt:hover{background:var(--paper-2); color:var(--ink)}
.sel-opt.on{color:var(--saf-d); font-weight:600; background:var(--saf-50)}

/* --- image dimensions: the tile IS the shape -------------------------- */
.dims{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.dim{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px;
  height:74px; padding:8px 4px 9px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); transition:.2s;
}
.dim i{
  display:block; margin-top:auto; border:1.6px solid var(--ink-3); border-radius:3px; transition:.25s;
}
.dim b{font-family:var(--f-mon); font-size:10px; font-weight:500; color:var(--ink-3); transition:.2s}
.dim:hover{border-color:var(--ink-3)}
.dim.on{border-color:var(--saf); background:var(--saf-50)}
.dim.on i{border-color:var(--saf-d); background:var(--saf-100)}
.dim.on b{color:var(--saf-d)}
.dim-px{
  margin-top:9px; display:inline-block; font-family:var(--f-mon); font-size:11px; color:var(--saf-d);
  background:var(--saf-50); border:1px solid var(--saf-100); border-radius:7px; padding:4px 9px;
}

/* --- frames: segmented ------------------------------------------------ */
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.seg-b{
  flex:1; padding:9px 0; font-family:var(--f-mon); font-size:12.5px; color:var(--ink-3);
  border-right:1px solid var(--line); transition:.18s;
}
.seg-b:last-child{border-right:0}
.seg-b:hover{background:var(--paper-2); color:var(--ink)}
.seg-b.on{background:var(--saf); color:#fff}
/* Locked options stay legible and clickable — clicking is how you find out
   why. Greying them into near-invisibility would just look broken. */
.seg-b.lk{color:var(--ink-3); background:repeating-linear-gradient(135deg,
  transparent 0 5px, rgba(10,7,4,.035) 5px 10px)}
.seg-b.lk:hover{color:var(--saf-d)}
.seg-b.lk.nudge{animation:segNudge .32s}
@keyframes segNudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.seg-note{
  margin-top:9px; font-size:11.5px; line-height:1.5; color:var(--ink-3); transition:color .25s;
}
.seg-note a{color:var(--saf-d); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.seg-note.hot{color:var(--ink-2)}

.gen-run{width:100%; margin-top:4px}
.gen-hint{margin-top:12px; font-family:var(--f-mon); font-size:10.5px; color:var(--ink-3); line-height:1.5; text-align:center}

.gen-stage{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(16px,2vw,24px); min-height:420px}
.stage-bar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.stage-bar .st-lbl{font-family:var(--f-mon); font-size:11.5px; color:var(--ink-2)}
.stage-bar .track{flex:1; min-width:120px; height:3px; border-radius:3px; background:var(--line); overflow:hidden}
.stage-bar .track i{display:block; height:100%; width:0; background:var(--saf); transition:width .3s linear}
.stage-bar .pct{font-family:var(--f-mon); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.out-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,16px)}
.out{position:relative; border-radius:var(--r); overflow:hidden; background:var(--paper-3)}
.out.r11{aspect-ratio:1} .out.r43{aspect-ratio:4/3} .out.r169{aspect-ratio:16/9}
.out.r45{aspect-ratio:4/5} .out.r23{aspect-ratio:2/3} .out.r916{aspect-ratio:9/16}
.out-tools{
  position:absolute; inset:auto 0 0 0; z-index:6; display:flex; gap:6px; justify-content:flex-end;
  padding:24px 10px 10px; background:linear-gradient(180deg,transparent,rgba(10,7,4,.7));
  opacity:0; transition:opacity .3s;
}
.out:hover .out-tools{opacity:1}
.out-tools button{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink); transition:.2s;
}
.out-tools button:hover{background:var(--saf); color:#fff}
.gen-empty{display:grid; place-items:center; min-height:320px; text-align:center; color:var(--ink-3)}
.gen-empty svg{margin:0 auto 14px; color:var(--line)}
.gen-empty b{display:block; font-family:var(--f-dis); font-size:19px; color:var(--ink-2); letter-spacing:-.026em}
.gen-empty p{margin-top:7px; font-size:13.5px; max-width:34ch}
.gen-log{
  margin-top:16px; font-family:var(--f-mon); font-size:11px; color:var(--ink-3); line-height:1.7;
  border-top:1px solid var(--line); padding-top:12px; max-height:110px; overflow-y:auto;
}
.gen-log div{display:flex; gap:10px}
.gen-log .t{color:var(--saf-d); flex:none}

/* --- frame selection ---------------------------------------------------
   A returned frame is pickable: the choice drives the seed field, so the
   act of choosing a frame and the act of locking its seed are visibly the
   same gesture.  The ring is drawn with an inset shadow rather than a
   border so it does not shift the tile inside the grid. */
.out{cursor:pointer}
/* a frame that has been asked for but has not arrived */
.out.pend{background:var(--paper-3); position:relative; overflow:hidden}
.out.pend::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(232,114,44,.10) 50%,transparent 80%);
  animation:pendSweep 1.5s linear infinite;
}
@keyframes pendSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.out-dl{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink); transition:.2s;
}
.out-dl:hover{background:var(--saf); color:#fff}
.out::after{
  content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--saf); transition:box-shadow .22s;
}
.out.picked::after{box-shadow:inset 0 0 0 3px var(--saf)}
.out-tick{
  position:absolute; top:9px; right:9px; z-index:7; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--saf); color:#fff;
  transform:scale(.4); opacity:0; transition:transform .22s cubic-bezier(.2,.9,.3,1.4), opacity .18s;
}
.out.picked .out-tick{transform:scale(1); opacity:1}

/* --- parameter strip ---------------------------------------------------
   Sits under the canvas, full width of the workspace, so a knob and the
   frame it changed stay in the same eyeline. */
.gen-params{margin-top:clamp(18px,2.2vw,26px); border-top:1px solid var(--line); padding-top:20px}
.gp-hd{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.gp-hd .gen-lbl{margin:0}
.gp-reset{
  font-family:var(--f-mon); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3);
  border-bottom:1px solid transparent; transition:.2s;
}
.gp-reset:hover{color:var(--saf-d); border-bottom-color:var(--saf)}
.gp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px) clamp(18px,2.6vw,34px)}
.gp-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.gp-top label{font-size:13px; font-weight:600; color:var(--ink)}
.gp-val{
  font-family:var(--f-mon); font-size:11.5px; color:var(--saf-d); font-variant-numeric:tabular-nums;
  background:var(--saf-50); border-radius:5px; padding:2px 7px;
}
.gp-hint{margin-top:8px; font-size:11.5px; line-height:1.5; color:var(--ink-3)}

/* Range inputs are styled per-engine; -webkit- covers Chrome/Safari/Edge and
   -moz- covers Firefox.  They cannot be combined into one rule — an unknown
   pseudo-element invalidates the whole selector list. */
.gp input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer;
}
.gp input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--saf) calc(var(--p,50) * 1%),var(--line) 0);
}
.gp input[type=range]::-moz-range-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--saf) calc(var(--p,50) * 1%),var(--line) 0);
}
.gp input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; margin-top:-6px; border-radius:50%;
  background:var(--saf); border:2px solid var(--paper); box-shadow:0 1px 4px rgba(10,7,4,.25); transition:transform .16s;
}
.gp input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--saf); border:2px solid var(--paper);
  box-shadow:0 1px 4px rgba(10,7,4,.25);
}
.gp input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
.gp input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--saf-100)}
.gp input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--saf-100)}

.gp-seedrow{display:flex; gap:8px; align-items:center}
.gp-seedrow input{
  flex:1; min-width:0; font-family:var(--f-mon); font-size:12.5px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:7px 10px;
}
.gp-seedrow input:focus{outline:none; border-color:var(--saf); background:var(--paper)}
.gp-dice{
  flex:none; width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-2); transition:.2s;
}
.gp-dice:hover{border-color:var(--saf); color:var(--saf-d); background:var(--saf-50)}
.gp-dice:active svg{transform:rotate(180deg); transition:transform .3s}
.gp-lock{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mon); font-size:10.5px;
  letter-spacing:.05em; color:var(--ink-3); border:1px solid var(--line); border-radius:20px;
  padding:3px 9px 3px 7px; transition:.2s;
}
.gp-lock:hover{color:var(--ink-2); border-color:var(--ink-3)}
.gp-lock[aria-pressed=true]{background:var(--saf-50); border-color:var(--saf); color:var(--saf-d)}
.gp-seed.is-locked .gp-seedrow input{color:var(--saf-d); border-color:var(--saf); background:var(--saf-50)}

/* ============================================================
   DASHBOARD (dashboard.html)
   ============================================================ */
.db-top{
  border-bottom:1px solid var(--line); background:var(--paper-2);
  padding:clamp(34px,5vw,64px) 0 clamp(28px,3.6vw,44px);
}
.db-top h1{
  font-family:var(--f-dis); font-size:clamp(28px,4.2vw,46px); font-weight:800;
  letter-spacing:-.042em; line-height:1.05;
}
.db-top h1 b{font-weight:800; color:var(--saf-d)}
.db-sub{margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-2)}
.db-plan{
  font-family:var(--f-mon); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--saf-d); background:var(--saf-50); border:1px solid var(--saf-100);
  border-radius:20px; padding:3px 10px;
}
.db-dot{color:var(--ink-3)}

.db-make{display:flex; gap:10px; margin-top:clamp(22px,2.8vw,32px); max-width:760px}
.db-make input{
  flex:1; min-width:0; padding:14px 18px; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px; transition:.2s;
}
.db-make input:focus{outline:none; border-color:var(--saf); box-shadow:0 0 0 4px var(--saf-50)}
.db-make input::placeholder{color:var(--ink-3)}
.db-make .btn{flex:none}

.db-sugg{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px}
.db-sugg > span{
  font-family:var(--f-mon); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.db-chip{
  font-family:var(--f-mon); font-size:11.5px; color:var(--ink-2); padding:6px 11px;
  border:1px solid var(--line); border-radius:20px; background:var(--paper); transition:.2s;
}
.db-chip:hover{border-color:var(--saf); color:var(--saf-d); background:var(--saf-50)}

.db-grid{display:grid; grid-template-columns:1fr 320px; gap:clamp(24px,3.4vw,48px); align-items:start}
.db-hd{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px}
.db-clear{
  font-family:var(--f-mon); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); transition:.2s;
}
.db-clear:hover{color:var(--saf-d)}

.db-list{list-style:none; display:flex; flex-direction:column; gap:2px}
.db-row{border-bottom:1px solid var(--line-2)}
.db-rerun{
  width:100%; text-align:left; padding:13px 4px; display:flex; flex-direction:column; gap:5px;
  border-radius:8px; transition:.18s;
}
.db-rerun:hover{background:var(--paper-2); padding-inline:10px}
.db-rp{font-size:14px; color:var(--ink); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.db-rm{font-family:var(--f-mon); font-size:10.5px; color:var(--ink-3)}

.db-side{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,26px); position:sticky; top:90px;
}
.db-meta{margin-top:14px; display:flex; flex-direction:column; gap:11px}
.db-meta > div{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.db-meta dt{
  font-family:var(--f-mon); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; flex:none;
}
.db-meta dd{font-size:13.5px; font-weight:600; color:var(--ink); text-align:right;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the address is the one value worth wrapping rather than clipping */
.db-meta dd.mono{font-family:var(--f-mon); font-size:11px; font-weight:500;
  white-space:normal; overflow-wrap:anywhere; text-overflow:clip}
.db-note{
  display:flex; gap:9px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.55; color:var(--ink-3);
}
.db-note svg{flex:none; margin-top:2px; color:var(--saf-d)}
.db-actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.db-actions .btn{flex:1}

.db-empty{
  display:grid; place-items:center; text-align:center; gap:4px; padding:clamp(30px,4vw,52px) 20px;
  border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--ink-3);
}
/* display:grid above beats the UA stylesheet's [hidden]{display:none}, so the
   empty state would sit there under a populated list. Same trap as .acct-menu. */
.db-empty[hidden]{display:none}
.db-empty svg{color:var(--line)}
.db-empty b{font-family:var(--f-dis); font-size:17px; color:var(--ink-2); letter-spacing:-.026em; margin-top:6px}
.db-empty p{font-size:13.5px; max-width:44ch; line-height:1.55}
.db-empty .btn{margin-top:12px}

.db-saved{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px)}
.db-saved:empty{display:none}
.db-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.db-card img, .db-noimg{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--paper-3)}
.db-cb{padding:13px; display:flex; flex-direction:column; gap:9px; flex:1}
.db-cb p{
  font-family:var(--f-mon); font-size:11.5px; line-height:1.5; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.db-cm{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto}
.db-cm .mono{font-size:10px; color:var(--ink-3)}
.db-del{font-size:11px; color:var(--ink-3); transition:.2s}
.db-del:hover{color:#b3261e}
.out-save.done{background:var(--saf) !important; color:#fff !important}

@media (max-width:1024px){
  .db-grid{grid-template-columns:1fr}
  .db-side{position:static}
  .db-saved{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .db-make{flex-direction:column}
  .db-make .btn{width:100%}
  .db-saved{grid-template-columns:1fr}
}

/* ============================================================
   ABOUT / TIMELINE / TEAM
   ============================================================ */
/* About: the story and the founder card.
   This was an inline style, which meant no media query could reach it — on a
   phone both columns kept their share and the prose ended up four words wide.
   As a class it can stack. */
.story-grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,4.4vw,68px); align-items:start;
}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:clamp(26px,4vw,38px)}
  /* the card is a sidebar on desktop and a footnote on mobile — it should not
     pin itself to the top of a viewport it no longer sits beside */
  .story-grid .fcard{position:static}
}

/* Full-width photograph between two text sections. It runs slightly wider
   than .wrap so it reads as a breath rather than another card. */
.wide-img{max-width:calc(var(--maxw) + 120px); margin:0 auto; padding:clamp(6px,1.4vw,20px) var(--pad) clamp(10px,2vw,26px)}
.wide-img img{
  width:100%; height:auto; display:block; border-radius:var(--r-lg);
  box-shadow:0 24px 60px -30px rgba(10,7,4,.4);
}
.wide-img figcaption{
  margin:16px auto 0; max-width:58ch; text-align:center; font-size:13.5px; line-height:1.6; color:var(--ink-3);
}
@media (max-width:640px){ .wide-img figcaption{text-align:left} }
.road{display:grid}
.rd{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line-2); align-items:start}
.rd:last-child{border-bottom:1px solid var(--line-2)}
.rd .yr{font-family:var(--f-mon); font-size:12px; letter-spacing:.06em; color:var(--saf-d); padding-top:2px}
.rd.next .yr{color:var(--ink-3)}
.rd b{display:block; font-size:15.5px; font-weight:600; letter-spacing:-.015em}
.rd p{margin-top:5px; font-size:14px; color:var(--ink-2); line-height:1.58; max-width:62ch}
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mon); font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; margin-left:8px; vertical-align:1.5px;
  padding:3px 7px; border-radius:5px;
}
.badge.done{background:var(--signal-50); color:var(--signal)}
.badge.now{background:var(--saf-50); color:var(--saf-d)}
.badge.plan{background:var(--paper-3); color:var(--ink-3)}

/* Sticky: the prose beside it runs far longer, so a static card left a tall
   column of empty page. Pinning it below the header keeps it in view for the
   whole read instead. `align-self:start` on the grid item is what lets sticky
   work here — a stretched item has no room to travel. */
.fcard{
  position:sticky; top:calc(var(--hdr-h) + 22px); align-self:start;
  padding:clamp(26px,2.8vw,36px); border-radius:var(--r-xl);
  border:1px solid var(--saf-100);
  background:linear-gradient(168deg,#FFF6EE 0%,var(--saf-50) 62%,#FFEFE0 100%);
  box-shadow:0 22px 50px -34px rgba(241,115,31,.5), 0 1px 2px rgba(20,16,12,.03);
}
/* the initials disc is gone — the name is the thing worth reading, so it
   takes the space the avatar was using */
.fc-top b{
  display:block; font-family:var(--f-dis); font-weight:800; letter-spacing:-.038em;
  font-size:clamp(27px,2.6vw,34px); line-height:1.06; color:var(--ink);
}
.fc-top span{display:block; margin-top:7px; font-size:13.6px; color:#9A3D07; font-weight:500}
.fc-q{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--saf-100);
  font-size:15.4px; line-height:1.68; color:var(--ink-2);
}
.fc-meta{
  display:grid; gap:10px; margin-top:22px; padding-top:20px;
  border-top:1px solid var(--saf-100); font-size:13.8px;
}
.fc-meta div{display:flex; align-items:center; gap:10px; color:var(--ink-2)}
.fc-meta svg{color:var(--saf-d); flex:none}
.fc-meta a:hover{color:var(--saf-d)}
@media (max-width:900px){
  /* stacked, so there is no adjacent column to keep pace with */
  .fcard{position:static}
}

.vals{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px)}
.val{padding-top:20px; border-top:2px solid var(--ink)}
.val:nth-child(2){border-top-color:var(--saf)}
.val:nth-child(3){border-top-color:var(--signal)}
.val b{display:block; font-family:var(--f-dis); font-size:19px; letter-spacing:-.028em}
.val p{margin-top:9px; font-size:14.2px; color:var(--ink-2); line-height:1.6}

/* ============================================================
   CONTACT
   ============================================================ */
.ct-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,3.6vw,56px); align-items:start}
.form{display:grid; gap:16px}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-family:var(--f-mon); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font:inherit; font-size:15px; transition:.25s;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--saf); box-shadow:0 0 0 3px var(--saf-50)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field .err{font-size:12.5px; color:#B4231C; min-height:1em}
.form-ok{
  display:none; gap:12px; align-items:flex-start; padding:18px 20px; border-radius:var(--r);
  background:var(--signal-50); border:1px solid var(--signal); font-size:14.5px; color:var(--ink-2); line-height:1.6;
}
.form-ok.show{display:flex}
.form-ok svg{flex:none; margin-top:3px; color:var(--signal)}
.ct-cards{display:grid; gap:14px}
.ct-card{padding:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); transition:.35s var(--ease)}
.ct-card:hover{border-color:var(--saf-100); transform:translateY(-2px); box-shadow:var(--sh)}
.ct-card .ico{margin-bottom:14px}
.ct-card b{display:block; font-family:var(--f-dis); font-size:16.5px; letter-spacing:-.026em}
.ct-card p{margin-top:6px; font-size:14px; color:var(--ink-2); line-height:1.55}
.ct-card a.lnk{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:14px; font-weight:600; color:var(--saf-d)}
.ct-card a.lnk:hover{text-decoration:underline}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:flex}
  .phero-split{grid-template-columns:1fr; gap:34px}
  .facts{grid-template-columns:1fr 1fr; gap:24px}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}

  .gen{grid-template-columns:1fr}
  .gen-panel{position:static}
  .gp-grid{grid-template-columns:1fr 1fr}
  .vals{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr; gap:34px}
  .cta-in{grid-template-columns:1fr; gap:30px}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hdr-cta .btn-o{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal .g-wide{grid-column:span 1}

  .out-grid{grid-template-columns:1fr}
  .gp-grid{grid-template-columns:1fr; gap:16px}
  .f-row{grid-template-columns:1fr}
  .anat-row{grid-template-columns:1fr; gap:6px}
  .rd{grid-template-columns:1fr; gap:6px}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-base nav{margin-left:0}
}
/* ============================================================
   HOME — hero console
   ============================================================ */
/* ------------------------------------------------------------
   Hero atmosphere.  Two flat circular glows became a layered
   field: elliptical gradients pinned to named positions, a
   blurred duplicate of the same stack, and three slow-drifting
   blobs.  The blurred layer is what stops it reading as two
   discrete blobs on white and makes it read as light in a room.

   Alphas are far lower than the same technique wants on a dark
   ground — .16 saffron over white goes muddy and eats headline
   contrast, so the blur does the work instead of opacity.  The
   teal is --signal, already the site's accent-only second hue;
   it keeps the field from being one flat wash of orange.
   ------------------------------------------------------------ */
/* Pulled up behind the sticky header so the field runs underneath it.  The
   header is rgba(255,255,255,.82) with a backdrop blur, so without this the
   top 69px stayed flat white and left a hard seam across the page where the
   wash began.  --hdr-h matches .hdr-in's 13px padding-block plus its 43px
   content row; the padding-top adds it back so the copy does not move. */
.hero{
  position:relative; overflow:hidden;
  margin-top:calc(var(--hdr-h) * -1);
  padding-block:calc(var(--hdr-h) + clamp(44px,6vw,88px)) clamp(48px,6vw,92px);
  background:
    radial-gradient(78% 56% at 50% -8%,  rgba(241,115,31,.10), transparent 62%),
    radial-gradient(52% 48% at  8% 14%,  rgba(255,154,77,.13), transparent 64%),
    radial-gradient(48% 46% at 94% 8%,   rgba(15,118,110,.06), transparent 64%),
    radial-gradient(62% 52% at 76% 92%,  rgba(241,115,31,.08), transparent 66%);
}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,4.5vw,68px); align-items:center}
.hero h1{margin-top:18px}
/* "In seconds." is the payoff of the headline — it used to be --ink-3, the
   dimmest thing on the screen. Now it carries the saffron, with a slow sheen
   and a rule that draws itself under the phrase once on load. */
.hero h1 .fade-w{
  position:relative; display:inline-block; color:transparent;
  background-image:linear-gradient(96deg,var(--saf-d) 0%,var(--saf) 34%,var(--saf-l) 52%,var(--saf) 68%,var(--saf-d) 100%);
  background-size:230% 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text;
  animation:heroSheen 8s var(--ease) infinite;
}
.hero h1 .fade-w::after{
  content:""; position:absolute; left:.03em; right:.10em; bottom:-.03em; height:.072em;
  border-radius:99px; background:linear-gradient(90deg,var(--saf-d),var(--saf-l));
  opacity:.34; transform:scaleX(0); transform-origin:left;
  animation:heroRule 1.05s var(--ease) .7s forwards;
}
@keyframes heroSheen{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@keyframes heroRule{to{transform:scaleX(1)}}
.hero .lead{margin-top:20px; max-width:46ch}
.hero-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.hero-tr{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:26px; font-size:13px; color:var(--ink-3)}
.hero-tr b{display:inline-flex; align-items:center; gap:7px; font-weight:500; color:var(--ink-2)}
.hero-tr svg{color:var(--signal); flex:none}

.console{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden}
.con-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-2); background:var(--paper-2)}
.con-dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.con-dot.live{background:var(--signal); position:relative}
.con-dot.live::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--signal); opacity:.5; animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.6);opacity:0}}
.con-ttl{font-family:var(--f-mon); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); margin-left:4px}
.con-ttl b{color:var(--ink-2); font-weight:500}
.con-body{padding:16px}
.con-input{display:flex; align-items:flex-start; gap:10px; padding:14px 15px; background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--r)}
.con-input .cq{font-family:var(--f-mon); color:var(--saf); font-size:13.5px; line-height:1.6; flex:none}
.con-input .ct{font-family:var(--f-mon); font-size:13.5px; line-height:1.6; color:var(--ink); min-height:2.9em; word-break:break-word}
.caret{display:inline-block; width:7.5px; height:1.05em; margin-left:1px; vertical-align:-.18em; background:var(--saf); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.con-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; flex-wrap:wrap}
.con-go{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--ink); color:#fff; font-size:13.5px; font-weight:600; transition:.3s var(--ease)}
.con-go:hover{background:var(--saf); transform:translateY(-1px)}
/* --- hero card: a single square frame, one render at a time --- */
.hero-card{overflow:hidden}
.hc-count{margin-left:auto; font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.hc-frame{position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-3)}
.hc-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .35s var(--ease), filter .55s var(--ease), transform .55s var(--ease);
}
.hc-frame img.on{opacity:1}
/* mid-generation the frame sits blurred, then resolves — the product's own behaviour */
.hc-frame img.gen{filter:blur(20px) saturate(1.35); transform:scale(1.06)}
.hc-pill{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  display:flex; align-items:center; gap:9px; padding:7px 7px 7px 14px; border-radius:999px;
  background:rgba(20,16,12,.62); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
}
.hc-spark{color:var(--saf-l); flex:none; display:grid; place-items:center}
.hc-tx{
  flex:1; min-width:0; font-family:var(--f-mon); font-size:12px; line-height:1.4; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hc-tx .caret{
  display:inline-block; width:6px; height:1em; margin-left:2px; vertical-align:-.14em;
  background:var(--saf-l); animation:blink 1s steps(1) infinite;
}
.hc-go{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:var(--saf); color:#fff; font-size:12.5px; font-weight:600; transition:.25s var(--ease);
}
.hc-go:hover{background:var(--saf-l); color:var(--ink); transform:translateY(-1px)}
.hc-go .ar{transition:transform .3s var(--ease)}
.hc-go:hover .ar{transform:translateX(3px)}
.con-meter{display:flex; align-items:center; gap:10px; padding:13px 16px 15px; font-family:var(--f-mon); font-size:11px; color:var(--ink-3)}
.con-meter .track{flex:1; height:3px; border-radius:3px; background:var(--line-2); overflow:hidden}
.con-meter .track i{display:block; height:100%; width:0; background:var(--saf); transition:width .35s linear}

/* ============================================================
   HOME — pinned scroll scene
   ============================================================ */
.scene-track{height:400vh}
.scene-pin{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; border-block:1px solid var(--line-2); background:var(--paper-2)}
.scene-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:center; width:100%}
.scene-steps{display:flex; flex-direction:column; gap:4px; position:relative; padding-left:26px}
.scene-rail{position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:2px; overflow:hidden}
.scene-rail i{display:block; width:100%; height:0; background:var(--saf); transition:height .5s var(--ease)}
.st{padding:13px 0; opacity:.34; transition:opacity .5s var(--ease)}
.st.on{opacity:1}
.st-n{font-family:var(--f-mon); font-size:11px; letter-spacing:.14em; color:var(--saf-d)}
.st b{display:block; font-family:var(--f-dis); font-size:clamp(19px,2.1vw,26px); font-weight:700; letter-spacing:-.03em; margin-top:5px}
.st p{margin-top:0; font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:44ch; height:0; opacity:0; overflow:hidden; transition:opacity .4s var(--ease)}
.st.on p{margin-top:7px; height:auto; opacity:1}
.scene-vis{position:relative; aspect-ratio:16/11; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh-md)}
.sv{position:absolute; inset:0; opacity:0; transform:scale(1.03); transition:opacity .6s var(--ease), transform .6s var(--ease); display:grid; place-items:center; padding:clamp(16px,2.4vw,32px)}
.sv.on{opacity:1; transform:none}
.sv-inner{width:100%}
.sv .tile .px{filter:none; transform:none}
.sv1 .line{height:9px; border-radius:5px; background:var(--line-2); margin-bottom:9px}
.sv1 .line.a{width:78%} .sv1 .line.b{width:92%; background:var(--saf-100)} .sv1 .line.c{width:54%}
.sv1 .tag2{display:inline-flex; gap:6px; margin-top:14px}
.sv2 .row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.sv2 .sq{aspect-ratio:1; border-radius:10px; border:1px solid var(--line)}
.sv2 .sq.pick{outline:2px solid var(--saf); outline-offset:2px}
.sv2 .lbl{margin-top:12px; font-family:var(--f-mon); font-size:11px; color:var(--ink-3); text-align:center}
.sv3 .grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sv3 .cell{aspect-ratio:4/3; border-radius:10px; position:relative; overflow:hidden}
.sv3 .cell .px{position:absolute; inset:0; background-image:var(--mesh); background-size:cover}
.sv3 .bar{margin-top:14px; height:3px; border-radius:3px; background:var(--line-2); overflow:hidden}
.sv3 .bar i{display:block; height:100%; background:var(--saf); animation:fill 2.4s var(--ease) infinite}
@keyframes fill{0%{width:4%} 70%{width:96%} 100%{width:100%}}
.sv4 .big{aspect-ratio:16/10; border-radius:12px; overflow:hidden; position:relative}
.sv4 .big .px{position:absolute; inset:0; background-image:var(--mesh); background-size:cover}
.sv4 .outs{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; justify-content:center}

@media (max-width:1024px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .scene-in{grid-template-columns:1fr; gap:26px}
  .scene-vis{display:none}
  .scene-track{height:340vh}
}
@media (max-width:640px){
  .scene-pin{height:auto; min-height:100vh; padding-block:80px}
  .con-grid{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-animate]{opacity:1 !important; transform:none !important; filter:none !important}
  .tile .px{filter:none !important; transform:none !important}
  .tile .subj{opacity:1 !important}
  .scene-track{height:auto}
  .scene-pin{position:static; height:auto; padding-block:70px}
  .st{opacity:1}
  .st p{height:auto; opacity:1; margin-top:7px}
}