/* The Pew Estate Digital: marketing layer (V3).
   Loaded after site.css on the public marketing pages only (body.mk). Client pages and the admin never load it.
   Direction: the estate at night. Deep charcoal bands with brass light, stone daylight sections between them.
   Component patterns are ported to plain CSS/JS from 21st.dev community designs:
   Background Paths, Container Scroll, Spotlight Card, Shimmer Text, Text Rotate, Marquee, Us vs Them,
   Stats Bento, Processing Timeline, Border Beam, Sonar Grid, Interactive Hover Button, Oversized 404 Numeral. */

body.mk{
  --night:#0C0C0B; --night-2:#141412; --night-3:#1C1B18; --night-line:rgba(234,214,163,.12);
  --night-ink:#F1EEE4; --night-dim:#B3AE9C; --night-faint:#8A8574;
  --gold:#D6B878; --gold-2:#F0DDAE; --gold-deep:#9C7D42;
  --brass-2:#735D30;               /* darker brass for small text on stone: 5:1 or better */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:160ms; --t-med:320ms; --t-slow:700ms;
  --z-bar:50; --z-progress:60;
  background:var(--surface);
  overflow-x:clip;
}
@media (prefers-color-scheme: dark){ body.mk{ --brass-2:#EAD6A3 } }

body.mk :focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:1rem; top:-3rem; z-index:100; background:var(--gold); color:#141412; padding:.6rem 1rem;
  border-radius:999px; font-weight:700; text-decoration:none; transition:top var(--t-fast)}
.skip:focus{top:1rem}

/* ---------------------------------------------------------------- nav: floating glass pill */
.m-progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:var(--z-progress); pointer-events:none;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2)); transform-origin:0 50%; transform:scaleX(var(--sp,0))}
body.mk .sitebar{position:fixed; top:.9rem; left:50%; transform:translateX(-50%); width:min(1180px,calc(100% - 1.6rem));
  padding:.55rem .6rem .55rem 1.1rem; border-radius:999px; z-index:var(--z-bar);
  background:rgba(12,12,11,.42); border:1px solid rgba(240,221,174,.14);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.6); transition:background var(--t-med), border-color var(--t-med), top var(--t-med) var(--ease-out)}
body.mk .sitebar.scrolled{top:.6rem; background:color-mix(in srgb, var(--surface-raised) 80%, transparent); border-color:var(--line)}
body.mk .sitebar .brand{color:var(--night-ink); transition:color var(--t-med)}
body.mk .sitebar .brand em{color:var(--gold)}
body.mk .sitebar.scrolled .brand{color:var(--charcoal)}
body.mk .sitebar.scrolled .brand em{color:var(--brass-2)}
body.mk .sitebar nav{gap:.3rem}
body.mk .sitebar nav a{color:var(--night-dim); padding:.5rem .85rem; border-radius:999px; font-size:.9rem;
  transition:color var(--t-fast), background var(--t-fast)}
body.mk .sitebar nav a:hover{color:var(--night-ink); background:rgba(240,221,174,.08)}
body.mk .sitebar nav a.on{color:var(--night-ink); background:rgba(240,221,174,.12)}
body.mk .sitebar.scrolled nav a{color:var(--ink-dim)}
body.mk .sitebar.scrolled nav a:hover, body.mk .sitebar.scrolled nav a.on{color:var(--ink); background:var(--stone-2)}
body.mk .sitebar nav a.cta{margin-left:.4rem; padding:.62rem 1.15rem; color:#15140F; font-weight:700;
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px -8px rgba(214,184,120,.7)}
body.mk .sitebar nav a.cta:hover{background:linear-gradient(180deg,#F7E9C6,var(--gold-2)); color:#15140F}
body.mk .navtoggle{border-color:rgba(240,221,174,.25); border-radius:999px; width:42px; height:42px}
body.mk .navtoggle span, body.mk .navtoggle span::before, body.mk .navtoggle span::after{background:var(--night-ink); transition:transform var(--t-med) var(--ease-out), opacity var(--t-fast)}
body.mk .sitebar.scrolled .navtoggle{border-color:var(--line)}
body.mk .sitebar.scrolled .navtoggle span, body.mk .sitebar.scrolled .navtoggle span::before, body.mk .sitebar.scrolled .navtoggle span::after{background:var(--ink)}
body.mk .navtoggle[aria-expanded=true] span{background:transparent!important}
body.mk .navtoggle[aria-expanded=true] span::before{transform:translateY(0) rotate(45deg)}
body.mk .navtoggle[aria-expanded=true] span::after{transform:translateY(-2px) rotate(-45deg)}
@media (max-width:760px){
  body.mk .sitebar{padding:.45rem .45rem .45rem 1rem}
  body.mk .sitebar nav{top:calc(100% + .5rem); left:0; right:0; border-radius:22px; padding:.6rem; gap:.15rem;
    background:var(--night-2); border:1px solid var(--night-line); box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
  body.mk .sitebar nav.open{display:flex; animation:m-drop var(--t-med) var(--ease-out)}
  body.mk .sitebar nav a, body.mk .sitebar.scrolled nav a{color:var(--night-dim); padding:.85rem 1rem; min-height:48px}
  body.mk .sitebar nav a.on, body.mk .sitebar.scrolled nav a.on{color:var(--night-ink); background:rgba(240,221,174,.1)}
  body.mk .sitebar nav a.cta{margin:.4rem 0 0; text-align:center; justify-content:center}
}
@keyframes m-drop{from{opacity:0; transform:translateY(-8px) scale(.98)} to{opacity:1; transform:none}}

/* ---------------------------------------------------------------- type + shared */
body.mk h1, body.mk h2, body.mk h3{letter-spacing:-.015em}
.m-eyebrow{display:inline-flex; align-items:center; gap:.6rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--brass-2)}
/* No line before the eyebrow label (the owner asked for no dashes anywhere). */
.m-night .m-eyebrow{color:var(--gold)}
.m-h2{font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.05; max-width:20ch; margin:.9rem 0 1.1rem}
.m-h2 em, .m-h1 em{font-style:italic; font-weight:500; color:var(--brass-2)}
.m-night .m-h2 em, .m-night .m-h1 em{color:var(--gold)}
.m-lede{font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-dim); max-width:58ch; line-height:1.65}
.m-night .m-lede{color:var(--night-dim)}
.m-center{text-align:center}
.m-center .m-h2, .m-center .m-lede{margin-left:auto; margin-right:auto}
.m-sec{padding:clamp(4.5rem,10vw,8.5rem) 0; position:relative}
.m-sec.stone{background:var(--stone)}
.m-head{margin-bottom:clamp(2.2rem,5vw,3.6rem)}

.m-night{background:var(--night); color:var(--night-ink); position:relative; isolation:isolate; overflow:hidden}
.m-night h1, .m-night h2, .m-night h3{color:var(--night-ink)}
.m-night a:not(.btn){color:var(--gold-2)}
.m-night .muted{color:var(--night-dim)}

/* Shimmer Text (21st.dev): a slow brass light passing across the words */
.m-shimmer{background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 30%,#FFF4D6 48%,var(--gold) 62%,var(--gold-deep) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:m-shimmer 6s linear infinite}
@keyframes m-shimmer{from{background-position:120% 0} to{background-position:-130% 0}}
body.mk .m-sec:not(.m-night) .m-shimmer{background-image:linear-gradient(100deg,var(--brass-2) 0%,var(--brass) 35%,#C9A968 50%,var(--brass) 65%,var(--brass-2) 100%)}

/* Buttons: shiny primary + Interactive Hover Button ghost */
body.mk .btn{min-height:48px; padding:.9rem 1.6rem; font-size:.97rem; position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--t-fast) var(--ease-out), background var(--t-med), color var(--t-med), border-color var(--t-med), box-shadow var(--t-med)}
body.mk .btn:active{transform:scale(.97)}
body.mk .btn svg{width:18px; height:18px; flex:none; transition:transform var(--t-med) var(--ease-out)}
body.mk .btn:hover svg{transform:translateX(3px)}
.btn.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,#C6A55F); color:#15140F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px -14px rgba(214,184,120,.75)}
.btn.gold::after{content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transition:transform 900ms var(--ease-out)}
.btn.gold:hover::after{transform:translateX(120%) skewX(-20deg)}
.btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 44px -14px rgba(214,184,120,.95)}
.btn.line{border:1px solid rgba(240,221,174,.28); color:var(--night-ink); background:rgba(240,221,174,.04)}
.btn.line::before{content:""; position:absolute; left:1.1rem; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--gold); z-index:-1; transition:transform 480ms var(--ease-out)}
body.mk .btn.line{padding-left:2.4rem}
.btn.line:hover{color:#15140F; border-color:var(--gold)}
.btn.line:hover::before{transform:scale(60)}
body.mk .m-sec .btn.line, body.mk .m-day .btn.line{color:var(--ink); border-color:var(--line); background:var(--surface-raised)}
body.mk .m-sec .btn.line::before, body.mk .m-day .btn.line::before{background:var(--charcoal)}
body.mk .m-sec .btn.line:hover, body.mk .m-day .btn.line:hover{color:var(--surface)}
body.mk .m-night .btn.line{color:var(--night-ink); border-color:rgba(240,221,174,.28); background:rgba(240,221,174,.04)}
body.mk .m-night .btn.line::before{background:var(--gold)}
body.mk .m-night .btn.line:hover{color:#15140F}
body.mk .btn.primary{background:var(--charcoal); color:var(--surface)}
body.mk .btn.primary:hover{background:var(--brass-2); color:var(--surface)}
@media (prefers-color-scheme: dark){ body.mk .btn.primary{color:#15140F; background:var(--gold)} body.mk .btn.primary:hover{background:var(--gold-2); color:#15140F} }
body.mk .btn[disabled]{opacity:.55; cursor:progress}
.m-actions{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}

/* Reveal on scroll */
.rv{opacity:0; transform:translateY(22px); transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1; transform:none}
.no-js .rv{opacity:1; transform:none}

/* ---------------------------------------------------------------- hero (Background Paths + Container Scroll) */
.m-hero{padding:clamp(8.5rem,17vw,11.5rem) 0 0; min-height:100svh}
.m-hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(60% 50% at 50% 0%, rgba(214,184,120,.18), transparent 70%),
             radial-gradient(40% 35% at 85% 30%, rgba(156,125,66,.14), transparent 70%),
             radial-gradient(35% 30% at 10% 60%, rgba(51,66,47,.35), transparent 70%)}
.m-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(240,221,174,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(240,221,174,.05) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%)}
.m-paths{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9}
.m-paths svg{width:100%; height:100%}
.m-paths path{fill:none; stroke:var(--gold); stroke-linecap:round; stroke-dasharray:var(--len) var(--len);
  animation:m-path var(--d,24s) linear infinite; animation-delay:var(--dl,0s)}
@keyframes m-path{from{stroke-dashoffset:calc(var(--len) * 2)} to{stroke-dashoffset:0}}

.m-hero-copy{text-align:center; max-width:980px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem)}
.m-pill{display:inline-flex; align-items:center; gap:.6rem; padding:.42rem .9rem .42rem .55rem; border-radius:999px;
  border:1px solid var(--night-line); background:rgba(240,221,174,.05); color:var(--night-dim); font-size:.84rem; font-weight:500;
  text-decoration:none!important}
.m-pill b{color:var(--night-ink); font-weight:600}
.m-dot{position:relative; width:8px; height:8px; border-radius:50%; background:#7FB069; flex:none}
.m-dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid #7FB069; animation:m-ping 2.4s var(--ease-out) infinite}
@keyframes m-ping{0%{transform:scale(.4); opacity:1} 100%{transform:scale(1.6); opacity:0}}
.m-h1{font-size:clamp(2.7rem,7.4vw,6rem); line-height:.98; letter-spacing:-.03em; margin:1.5rem auto 1.4rem; max-width:14ch}
.m-hero .m-lede{margin:0 auto; text-align:center; font-size:clamp(1.05rem,1.6vw,1.25rem)}
.m-rotate{display:inline-grid; vertical-align:bottom; color:var(--night-ink); font-weight:600}
.m-rotate > span{grid-area:1/1; transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out), filter 500ms}
.m-rotate > span:not(.on){opacity:0; transform:translateY(.6em); filter:blur(4px)}
.m-rotate > span.out{transform:translateY(-.6em)}
.m-hero .m-actions{justify-content:center; margin-top:2.2rem}
.m-proof{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; margin-top:1.9rem; color:var(--night-faint); font-size:.86rem}
.m-proof span{display:inline-flex; align-items:center; gap:.45rem}
.m-proof svg{width:16px; height:16px; color:var(--gold)}

/* Container Scroll: the admin screen tilts up to face you as you scroll */
.m-stage{perspective:1400px; padding:clamp(3rem,7vw,5rem) clamp(.8rem,3vw,2rem) 0; margin-top:1rem}
.m-device{--p:0; max-width:1120px; margin:0 auto; transform-origin:50% 0;
  transform:rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(1.04 - var(--p) * .04)) translateY(calc((1 - var(--p)) * -10px));
  border-radius:26px; padding:10px; background:linear-gradient(180deg,#34322B,#1A1916);
  border:1px solid rgba(240,221,174,.18);
  box-shadow:0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a,
             0 0 120px -30px rgba(214,184,120,.35)}
.m-cap{margin:1rem auto 0; text-align:center; font-size:.78rem; color:var(--night-faint)}
.m-hero-tail{height:clamp(3rem,7vw,5rem)}

/* The sample admin screen (HTML, not an image, so it is sharp at every size) */
.dash{border-radius:18px; overflow:hidden; background:#FBFAF6; color:#1D1D1B; display:grid; grid-template-columns:200px 1fr;
  font-family:"Public Sans",sans-serif; text-align:left; min-height:520px}
.dash *{box-sizing:border-box}
.dash-side{background:#141412; color:#B3AE9C; padding:1rem .8rem; display:flex; flex-direction:column; gap:.2rem; font-size:.8rem}
.dash-side .db{display:flex; align-items:center; gap:.5rem; color:#F1EEE4; font-family:"Fraunces",serif; font-weight:600; font-size:.9rem; padding:.2rem .4rem .9rem}
.dash-side .db i{width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#F0DDAE,#9C7D42); display:block}
.dash-side span{display:flex; align-items:center; gap:.55rem; padding:.48rem .55rem; border-radius:8px}
.dash-side span.on{background:rgba(240,221,174,.1); color:#F1EEE4}
.dash-side svg{width:15px; height:15px; opacity:.85}
.dash-side .who{margin-top:auto; border-top:1px solid rgba(240,221,174,.1); padding-top:.8rem; font-size:.74rem}
.dash-side .who b{color:#F1EEE4; display:block; font-weight:600}
.dash-main{padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:1rem; min-width:0}
.dash-top{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.dash-top h4{margin:0; font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600}
.dash-top .chip{font-size:.7rem; font-weight:600; color:#33422F; background:#DCE3D5; padding:.3rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem}
.dash-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem}
.dash-kpi{border:1px solid #E4E1D6; border-radius:12px; padding:.75rem .85rem; background:#fff}
.dash-kpi .l{font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#8B876F}
.dash-kpi .v{font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:.2rem}
.dash-kpi .s{font-size:.68rem; color:#33422F; font-weight:600}
.dash-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:.7rem; min-height:0}
.dash-card{border:1px solid #E4E1D6; border-radius:12px; background:#fff; padding:.85rem .95rem; min-width:0}
.dash-card h5{margin:0 0 .6rem; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:#8B876F; display:flex; justify-content:space-between}
.dash-bars{display:flex; align-items:flex-end; gap:6px; height:120px}
.dash-bars i{flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#D6B878,#B99A5B); height:var(--h); transform-origin:bottom;
  transform:scaleY(var(--grow,1)); transition:transform 900ms var(--ease-out); transition-delay:calc(var(--i) * 50ms)}
.dash-bars i:nth-child(odd){opacity:.75}
.dash-x{display:flex; justify-content:space-between; font-size:.62rem; color:#8B876F; margin-top:.35rem}
.dash-log{list-style:none; margin:0; padding:0; font-size:.74rem; display:flex; flex-direction:column; gap:.1rem; height:150px; overflow:hidden; position:relative}
.dash-log li{display:grid; grid-template-columns:16px 1fr auto; gap:.5rem; align-items:center; padding:.42rem 0; border-bottom:1px solid #F0EEE7;
  animation:m-logIn 600ms var(--ease-out)}
.dash-log li b{font-weight:600}
.dash-log li time{color:#8B876F; font-family:"IBM Plex Mono",monospace; font-size:.66rem}
.dash-log li i{width:8px; height:8px; border-radius:50%; background:#B99A5B}
.dash-log li i.g{background:#5E7D55} .dash-log li i.k{background:#1D1D1B}
@keyframes m-logIn{from{opacity:0; transform:translateY(-8px); background:#F6EFD9} to{opacity:1; transform:none; background:transparent}}
@media (max-width:860px){
  .dash{grid-template-columns:1fr; min-height:0}
  .dash-side{display:none}
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .m-device{border-radius:18px; padding:6px}
  .dash{border-radius:13px}
}

/* ---------------------------------------------------------------- Live now (homepage, under the hero): expanding panels */
.m-live{padding:clamp(1.5rem,3vw,2.2rem) 0 clamp(3rem,6vw,4.5rem)}
.live-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem; margin-bottom:1.2rem}
.live-head h2{margin:0; font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.15rem,2vw,1.45rem); color:var(--night-ink)}
.live-head h2 .m-eyebrow{margin-right:.7rem; vertical-align:.15em}
.live-row{list-style:none; margin:0; padding:0; display:flex; gap:.6rem; height:clamp(300px,36vw,440px)}
.live-card{flex:1 1 0; min-width:54px; position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--night-line);
  background:var(--night-2); transition:flex var(--t-slow) var(--ease-out), border-color var(--t-med)}
.live-card.on{flex:7 1 0; border-color:rgba(214,184,120,.45)}
.live-card a{position:absolute; inset:0; display:block; color:var(--night-ink); text-decoration:none}
.live-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left;
  filter:grayscale(.85) brightness(.5); transform:scale(1.04); transition:filter var(--t-slow), transform var(--t-slow) var(--ease-out)}
.live-card.on img{filter:none; transform:none}
.live-card a::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(12,12,11,.72) 64%,rgba(12,12,11,.97))}
.live-tab{position:absolute; left:50%; bottom:1.1rem; z-index:1; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg);
  font-family:"Fraunces",serif; font-size:.98rem; white-space:nowrap; color:var(--night-ink); transition:opacity var(--t-med)}
.live-card.on .live-tab{opacity:0}
.live-meta{position:absolute; left:1.3rem; right:1.3rem; bottom:1.2rem; z-index:1; display:grid; gap:.2rem; opacity:0; transform:translateY(8px);
  transition:opacity var(--t-med) .12s, transform var(--t-med) var(--ease-out) .12s}
.live-card.on .live-meta{opacity:1; transform:none}
.live-meta small{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700}
.live-meta b{font-family:"Fraunces",serif; font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:600; line-height:1.15}
.live-meta em{font-style:normal; font-size:.88rem; color:var(--gold-2); display:inline-flex; align-items:center; gap:.35rem}
.live-meta em svg{width:14px; height:14px}
.live-card a:focus-visible{outline:2px solid var(--gold); outline-offset:-4px; border-radius:18px}
@media (max-width:720px){
  .live-row{height:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem; -webkit-overflow-scrolling:touch}
  .live-card, .live-card.on{flex:0 0 82%; height:300px; scroll-snap-align:start}
  .live-card img{filter:none; transform:none}
  .live-tab{display:none}
  .live-meta{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .live-card, .live-card img, .live-meta, .live-tab{transition:none} }

/* ---------------------------------------------------------------- Us vs Them (21st.dev) */
.vs{display:grid; grid-template-columns:1fr 1.08fr; gap:1.2rem; align-items:stretch}
.vs-card{border-radius:24px; padding:clamp(1.5rem,3vw,2.3rem); border:1px solid var(--line); background:var(--surface-raised)}
.vs-card h3{font-size:1.35rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.vs-card > p{color:var(--ink-dim); font-size:.95rem; margin:.5rem 0 1.4rem}
.vs-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem}
.vs-card li{display:flex; gap:.8rem; align-items:flex-start; padding:.72rem 0; border-top:1px solid var(--line-soft); font-size:.96rem}
.vs-card li svg{width:20px; height:20px; flex:none; margin-top:.12rem}
.vs-them li{color:var(--ink-dim)}
.vs-them li svg{color:var(--ink-faint)}
.vs-us{background:var(--night); border-color:rgba(214,184,120,.35); color:var(--night-ink); position:relative; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.vs-us h3{color:var(--night-ink)}
.vs-us > p{color:var(--night-dim)}
.vs-us li{border-color:rgba(240,221,174,.1)}
.vs-us li svg{color:var(--gold)}
.vs-us .btn{margin-top:1.6rem}
.m-badge{font-family:"Public Sans",sans-serif; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:.3rem .6rem; border-radius:999px; background:rgba(214,184,120,.16); color:var(--gold-2); border:1px solid rgba(214,184,120,.35)}
.m-badge.plain{background:var(--stone-2); color:var(--ink-dim); border-color:var(--line)}
@media (max-width:860px){ .vs{grid-template-columns:1fr} }

/* Border Beam (21st.dev): a point of brass light travelling round the edge */
.beam{position:relative}
.beam::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--a,0deg), transparent 0 75%, var(--gold) 85%, #FFF4D6 88%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:m-beam 5s linear infinite}
@property --a{syntax:"<angle>"; inherits:false; initial-value:0deg}
@keyframes m-beam{to{--a:360deg}}

/* ---------------------------------------------------------------- Bento + Spotlight Card (21st.dev) */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.bento > *:nth-child(1){grid-column:span 3}
.bento > *:nth-child(2){grid-column:span 3}
.bento > *:nth-child(3), .bento > *:nth-child(4), .bento > *:nth-child(5){grid-column:span 2}
.bento > *:nth-child(6){grid-column:span 6}
@media (max-width:980px){ .bento{grid-template-columns:1fr 1fr} .bento > *{grid-column:span 1!important} .bento > *:nth-child(6){grid-column:span 2!important} }
@media (max-width:640px){ .bento{grid-template-columns:1fr} .bento > *, .bento > *:nth-child(6){grid-column:span 1!important} }
.spot{--mx:50%; --my:50%; position:relative; border-radius:22px; background:var(--surface-raised); border:1px solid var(--line);
  padding:1.5rem 1.5rem 1.6rem; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:.4rem;
  transition:border-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med)}
.spot::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity var(--t-med);
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(214,184,120,.16), transparent 45%)}
.spot::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity var(--t-med);
  background:radial-gradient(260px circle at var(--mx) var(--my), var(--gold), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.spot:hover::before, .spot:hover::after{opacity:1}
.spot:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.spot h3{font-size:1.2rem; margin-top:.4rem}
.spot p{color:var(--ink-dim); font-size:.93rem; margin:0}
.spot .viz{height:150px; margin:-.2rem -.2rem .9rem; border-radius:14px; background:var(--stone); border:1px solid var(--line-soft);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.m-night .spot{background:var(--night-2); border-color:var(--night-line)}
.m-night .spot p{color:var(--night-dim)}
.m-night .spot .viz{background:var(--night); border-color:var(--night-line)}

/* viz: two-factor code */
.v-otp{display:flex; gap:.4rem; align-items:center}
.v-otp b{width:34px; height:44px; border-radius:9px; background:var(--surface-raised); border:1px solid var(--line); display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:1.2rem; font-weight:600; color:var(--charcoal); transition:transform 300ms var(--ease-spring)}
.v-otp b.flip{transform:rotateX(90deg)}
.v-otp .gap{width:6px}
.v-ring{position:absolute; right:14px; top:14px; width:26px; height:26px}
.v-ring circle{fill:none; stroke-width:3}
.v-ring .t{stroke:var(--line)} .v-ring .f{stroke:var(--brass); stroke-linecap:round; transform:rotate(-90deg); transform-origin:center;
  stroke-dasharray:69; animation:m-ring 30s linear infinite}
@keyframes m-ring{from{stroke-dashoffset:0} to{stroke-dashoffset:69}}
/* viz: audit feed */
.v-feed{list-style:none; margin:0; padding:.7rem .9rem; width:100%; height:100%; display:flex; flex-direction:column; gap:.35rem; font-size:.74rem; overflow:hidden}
.v-feed li{display:flex; justify-content:space-between; gap:.6rem; padding:.4rem .55rem; border-radius:8px; background:var(--surface-raised); border:1px solid var(--line-soft);
  animation:m-logIn 600ms var(--ease-out)}
.v-feed li span{color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v-feed li b{font-weight:600; color:var(--ink)}
.v-feed time{font-family:"IBM Plex Mono",monospace; color:var(--ink-faint); font-size:.66rem; flex:none}
/* viz: backups week */
.v-week{display:grid; grid-template-columns:repeat(7,1fr); gap:.45rem; width:calc(100% - 2rem)}
.v-week div{display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.66rem; color:var(--ink-faint); font-weight:600}
.v-week i{width:100%; aspect-ratio:1; max-width:34px; border-radius:9px; background:var(--forest-soft); color:var(--forest); display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--forest) 25%, transparent)}
.v-week i svg{width:16px; height:16px}
.v-week div.now i{background:var(--surface-raised); border-style:dashed; color:var(--brass-2); animation:m-pulse 2s ease-in-out infinite}
@keyframes m-pulse{50%{opacity:.45}}
/* viz: rate limit */
.v-rate{display:flex; flex-direction:column; align-items:center; gap:.7rem; font-size:.74rem; color:var(--ink-dim)}
.v-rate .dots{display:flex; gap:.45rem}
.v-rate .dots i{width:14px; height:14px; border-radius:50%; background:var(--line); transition:background 250ms}
.v-rate .dots i.x{background:#B5533C}
.v-rate .lock{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; font-weight:700;
  background:var(--charcoal); color:var(--surface); opacity:0; transform:scale(.9); transition:opacity 300ms, transform 300ms var(--ease-spring)}
.v-rate .lock.on{opacity:1; transform:none}
.v-rate .lock svg{width:14px; height:14px}
@media (prefers-color-scheme: dark){ .v-rate .lock{color:#141412; background:var(--gold)} }
/* viz: hash */
.v-hash{font-family:"IBM Plex Mono",monospace; font-size:.8rem; text-align:center; padding:0 1rem; width:100%}
.v-hash .in{color:var(--ink-dim); margin-bottom:.5rem}
.v-hash .out{color:var(--charcoal); font-weight:600; word-break:break-all; line-height:1.5; min-height:3em}
/* viz: search chart */
.v-chart{width:100%; height:100%}
.v-chart .area{fill:url(#m-grad)}
.v-chart .ln{fill:none; stroke:var(--brass-2); stroke-width:2.2; stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 2.2s var(--ease-out)}
.in .v-chart .ln{stroke-dashoffset:0}
.spot.wide{flex-direction:row; align-items:center; gap:2rem}
.spot.wide .viz{flex:1.2; margin:0; height:170px}
.spot.wide .txt{flex:1}
@media (max-width:640px){ .spot.wide{flex-direction:column; align-items:stretch; gap:.4rem} .spot.wide .viz{flex:none} }

/* ---------------------------------------------------------------- Work showcase */
.case{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.6rem,5vw,4.5rem); align-items:center; padding:clamp(2rem,5vw,3.5rem) 0}
.case + .case{border-top:1px solid var(--line)}
.case.flip .shot{order:2}
@media (max-width:900px){ .case, .case.flip{grid-template-columns:1fr} .case.flip .shot{order:0} }
.shot{position:relative; padding:0 0 2.2rem 0}
.browser{border-radius:14px; overflow:hidden; background:#1A1916; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(20,20,18,.55);
  transition:transform var(--t-slow) var(--ease-out)}
.browser .bar{display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; background:#232220}
.browser .bar i{width:10px; height:10px; border-radius:50%; background:#4A4740}
.browser .bar span{margin-left:.6rem; flex:1; max-width:260px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:#A9A594;
  background:#171614; border-radius:6px; padding:.25rem .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.browser img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
.phone{position:absolute; right:-4%; bottom:0; width:24%; min-width:110px; border-radius:22px; padding:5px; background:#1A1916;
  border:1px solid rgba(240,221,174,.2); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); transition:transform var(--t-slow) var(--ease-out)}
.phone img{border-radius:17px; width:100%; height:auto; aspect-ratio:1/2; object-fit:cover; object-position:top}
.case.flip .phone{right:auto; left:-4%}
.case:hover .browser{transform:translateY(-6px)}
.case:hover .phone{transform:translateY(-14px) rotate(-2deg)}
.case .tier-tag{display:inline-flex; gap:.5rem; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--forest)}
.case h3{font-size:clamp(1.7rem,3vw,2.3rem); margin:.6rem 0 .7rem}
.case p{color:var(--ink-dim)}
.ticks{list-style:none; margin:1.1rem 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:.55rem}
.ticks li{display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem}
.ticks svg{width:18px; height:18px; flex:none; margin-top:.2rem; color:var(--forest)}
.m-link{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--brass-2); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}
.m-link svg{width:16px; height:16px; transition:transform var(--t-med) var(--ease-out)}
.m-link:hover svg{transform:translate(2px,-2px)}
@media (max-width:560px){ .phone{width:30%; right:-2%} .case.flip .phone{left:-2%} }

/* ---------------------------------------------------------------- Processing Timeline (21st.dev) */
.steps{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:st}
.steps::before{content:""; position:absolute; left:0; right:0; top:27px; height:2px; background:var(--night-line)}
.steps::after{content:""; position:absolute; left:0; right:0; top:27px; height:2px; background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transform-origin:0 50%; transform:scaleX(var(--fill,0)); transition:transform 1.6s var(--ease-out)}
.steps.in{--fill:1}
.step{position:relative; z-index:1}
.step .n{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--night-2); border:1px solid rgba(214,184,120,.4);
  color:var(--gold); margin-bottom:1.2rem; box-shadow:0 0 0 6px var(--night)}
.step .n svg{width:22px; height:22px}
.step h3{font-size:1.1rem; margin-bottom:.45rem}
.step p{font-size:.9rem; color:var(--night-dim); margin:0}
.step small{display:block; margin-top:.6rem; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold)}
@media (max-width:980px){
  .steps{grid-template-columns:1fr; gap:1.6rem; padding-left:0}
  .steps::before, .steps::after{left:27px; right:auto; top:0; bottom:0; width:2px; height:auto}
  .steps::after{transform:scaleY(var(--fill,0)); transform-origin:50% 0}
  .step{display:grid; grid-template-columns:56px 1fr; gap:0 1.1rem}
  .step .n{margin:0; grid-row:span 3}
}

/* ---------------------------------------------------------------- Stats (Number ticker) */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--line); gap:1px}
.stat{background:var(--surface-raised); padding:clamp(1.3rem,3vw,2rem)}
.stat .num{font-family:"Fraunces",serif; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--charcoal); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat .num small{font-size:.4em; color:var(--ink-faint); margin-left:.2rem; letter-spacing:0}
.stat .lbl{margin-top:.7rem; color:var(--ink-dim); font-size:.9rem; max-width:24ch}
@media (max-width:800px){ .stats{grid-template-columns:1fr 1fr} }

/* ---------------------------------------------------------------- Pricing preview / tiers */
.tiers3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch}
@media (max-width:960px){ .tiers3{grid-template-columns:1fr} }
.pt{border-radius:24px; padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:.2rem}
.pt .name{font-family:"Fraunces",serif; font-size:1.4rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.pt .for{color:var(--ink-dim); font-size:.92rem; min-height:3em; margin:.35rem 0 1.2rem}
.pt .price{font-family:"Fraunces",serif; font-size:clamp(2.6rem,4.4vw,3.2rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--charcoal)}
.pt .price sup{font-size:.45em; vertical-align:top; position:relative; top:.25em; color:var(--ink-faint)}
.pt .from{font-size:.78rem; color:var(--ink-faint); margin:.5rem 0 1.3rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600}
.pt ul{list-style:none; margin:0 0 1.4rem; padding:1.2rem 0 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:.65rem; flex:1}
.pt li{display:flex; gap:.6rem; font-size:.93rem; color:var(--ink-dim)}
.pt li svg{width:18px; height:18px; flex:none; color:var(--forest); margin-top:.15rem}
.pt .time{display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--ink-faint); padding-top:1rem; border-top:1px solid var(--line-soft); margin-bottom:1.1rem}
.pt .time svg{width:16px; height:16px}
.pt .btn{justify-content:center; width:100%}
.pt.sig{background:var(--night); border-color:rgba(214,184,120,.4); color:var(--night-ink); box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.pt.sig .name, .pt.sig .price{color:var(--night-ink)}
.pt.sig .for, .pt.sig li{color:var(--night-dim)}
.pt.sig li svg{color:var(--gold)}
.pt.sig .from, .pt.sig .time, .pt.sig .price sup{color:var(--night-faint)}
.pt.sig ul, .pt.sig .time{border-color:var(--night-line)}
.pt.sig::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.6; background:radial-gradient(80% 50% at 50% 0%, rgba(214,184,120,.18), transparent 70%)}
.pt.sig .spot-hover{display:none}
.m-night .pt:not(.sig){background:var(--night-2)}

/* Feature comparison table */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:var(--surface-raised)}
table.cmp{width:100%; border-collapse:collapse; min-width:640px; font-size:.93rem}
table.cmp th, table.cmp td{padding:.95rem 1.1rem; text-align:center; border-bottom:1px solid var(--line-soft)}
table.cmp th:first-child, table.cmp td:first-child{text-align:left; color:var(--ink)}
table.cmp thead th{font-family:"Fraunces",serif; font-size:1.05rem; font-weight:600; color:var(--charcoal); position:sticky; top:0; background:var(--surface-raised)}
table.cmp thead th span{display:block; font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--ink-faint); font-weight:500; margin-top:.2rem}
table.cmp tbody tr:hover td{background:color-mix(in srgb,var(--stone) 55%,transparent)}
table.cmp td.sig, table.cmp th.sig{background:color-mix(in srgb,var(--brass-soft) 45%,transparent)}
table.cmp .grp td{background:var(--stone)!important; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--brass-2); text-align:left}
table.cmp svg{width:20px; height:20px; vertical-align:middle}
table.cmp .y{color:var(--forest)} table.cmp .no{color:var(--line)}
table.cmp td.t{font-family:"IBM Plex Mono",monospace; font-size:.84rem; color:var(--ink-dim)}
table.cmp tr:last-child td{border-bottom:0}

/* Add-ons, care, seo */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:1.1fr auto 1.5fr; gap:1.4rem; padding:1.25rem 0; border-bottom:1px solid var(--line); align-items:baseline}
.row b{font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600; color:var(--charcoal)}
.row .p{font-family:"IBM Plex Mono",monospace; color:var(--charcoal); white-space:nowrap; font-weight:600}
.row span:last-child{color:var(--ink-dim); font-size:.93rem}
@media (max-width:760px){ .row{grid-template-columns:1fr; gap:.3rem} }
.plans{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:760px){ .plans{grid-template-columns:1fr} }
.plan{border-radius:22px; padding:1.8rem}
.plan .k{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.plan .k b{font-family:"Fraunces",serif; font-size:1.25rem; color:var(--charcoal)}
.plan .amt{font-family:"Fraunces",serif; font-size:2.4rem; letter-spacing:-.02em; margin:.6rem 0 1.1rem; color:var(--charcoal); font-variant-numeric:tabular-nums}
.plan .amt span{font-size:.4em; color:var(--ink-faint); font-family:"Public Sans",sans-serif; letter-spacing:0}
.plan ul{list-style:none; margin:0; padding:1.1rem 0 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:.6rem}
.plan li{display:flex; gap:.6rem; color:var(--ink-dim); font-size:.93rem}
.plan li svg{width:18px; height:18px; flex:none; margin-top:.15rem; color:var(--forest)}
.plan.forest{border-top:3px solid var(--forest)}
.m-note{font-size:.88rem; color:var(--ink-faint); margin-top:1.3rem}
.m-note > svg{width:1.05em; height:1.05em; vertical-align:-.18em; margin-right:.35rem; color:var(--brass-2)}
.seo-one{display:flex; gap:1.4rem; align-items:center; justify-content:space-between; flex-wrap:wrap; border-radius:22px; padding:1.6rem 1.8rem; margin-bottom:1.1rem;
  background:linear-gradient(135deg,var(--brass-soft),transparent 70%); border:1px solid var(--brass)}
.seo-one b{font-family:"Fraunces",serif; font-size:1.3rem; color:var(--charcoal)}
.seo-one p{margin:.3rem 0 0; color:var(--ink-dim); font-size:.93rem; max-width:62ch}
.seo-one .amt{font-family:"Fraunces",serif; font-size:2.2rem; color:var(--charcoal)}
.seo-one .amt span{font-family:"Public Sans",sans-serif; font-size:.8rem; color:var(--ink-faint); display:block; text-align:right}

/* ---------------------------------------------------------------- Quote */
.m-quote{max-width:900px; margin:0 auto; text-align:center}
.m-quote svg.qm{width:44px; height:44px; color:var(--brass); margin:0 auto 1.4rem; display:block}
.m-quote blockquote{margin:0; font-family:"Fraunces",serif; font-size:clamp(1.5rem,3.2vw,2.35rem); line-height:1.3; color:var(--charcoal); letter-spacing:-.015em}
.m-quote cite{display:block; margin-top:1.4rem; font-style:normal; color:var(--ink-faint); font-size:.9rem}

/* ---------------------------------------------------------------- FAQ accordion */
.faq{max-width:860px; margin:0 auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding:1.35rem .2rem;
  font-family:"Fraunces",serif; font-size:clamp(1.08rem,1.8vw,1.28rem); font-weight:600; color:var(--charcoal); min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); position:relative; transition:transform var(--t-med) var(--ease-out), background var(--t-med)}
.faq summary i::before, .faq summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform var(--t-med) var(--ease-out)}
.faq details[open] summary i{background:var(--charcoal); border-color:var(--charcoal)}
.faq details[open] summary i::before, .faq details[open] summary i::after{background:var(--surface)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq summary:hover{color:var(--brass-2)}
.faq .a{padding:0 3.5rem 1.5rem .2rem; color:var(--ink-dim); animation:m-fade 400ms var(--ease-out)}
.faq .a p{margin:0 0 .7rem}
@keyframes m-fade{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------------------------------------------------------------- Final CTA (Sonar Grid) */
.m-cta{text-align:center; padding:clamp(5rem,12vw,9rem) 0}
.m-sonar{position:absolute; left:50%; top:50%; width:0; height:0; z-index:-1; pointer-events:none}
.m-sonar i{position:absolute; left:50%; top:50%; width:900px; height:900px; margin:-450px 0 0 -450px; border-radius:50%;
  border:1px solid rgba(214,184,120,.35); transform:scale(.1); opacity:0; animation:m-sonar 7s var(--ease-out) infinite}
.m-sonar i:nth-child(2){animation-delay:1.75s} .m-sonar i:nth-child(3){animation-delay:3.5s} .m-sonar i:nth-child(4){animation-delay:5.25s}
@keyframes m-sonar{0%{transform:scale(.1); opacity:0} 15%{opacity:1} 100%{transform:scale(1); opacity:0}}
.m-cta .seal{width:74px; height:74px; margin:0 auto 1.6rem; filter:drop-shadow(0 10px 30px rgba(214,184,120,.35))}
.m-cta .m-h2{margin-left:auto; margin-right:auto; max-width:18ch}
.m-cta .m-lede{margin:0 auto 2.2rem}
.m-cta .m-actions{justify-content:center}

/* ---------------------------------------------------------------- Page header for inner pages */
.m-pagehead{padding:clamp(8.5rem,16vw,11rem) 0 clamp(3.5rem,8vw,6rem)}
.m-pagehead .m-h1{margin:1.1rem 0 1.2rem; font-size:clamp(2.5rem,6vw,4.6rem); max-width:17ch}
.m-pagehead .m-lede{font-size:clamp(1.05rem,1.5vw,1.2rem)}
.m-pagehead.center{text-align:center}
.m-pagehead.center .m-h1, .m-pagehead.center .m-lede{margin-left:auto; margin-right:auto}
.m-pagehead .m-paths{opacity:.55}

/* ---------------------------------------------------------------- About: the stack diagram */
.stack-d{display:flex; flex-direction:column; gap:.7rem; max-width:560px; margin-left:auto}
.stack-d .top{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.stack-d .top div{border-radius:16px; padding:1rem; background:var(--surface-raised); border:1px solid var(--line); font-size:.82rem; color:var(--ink-dim)}
.stack-d .top b{display:block; font-family:"Fraunces",serif; font-size:1rem; color:var(--charcoal); margin-bottom:.2rem}
.stack-d .core{border-radius:18px; padding:1.3rem 1.4rem; background:var(--night); color:var(--night-ink); border:1px solid rgba(214,184,120,.35)}
.stack-d .core b{font-family:"Fraunces",serif; font-size:1.15rem; display:block; margin-bottom:.6rem}
.stack-d .core .taglist{margin:0}
.stack-d .core .taglist span{background:rgba(240,221,174,.07); border-color:var(--night-line); color:var(--night-dim)}
.stack-d .arrow{display:flex; justify-content:space-around; color:var(--brass)}
.stack-d .arrow svg{width:20px; height:20px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center}
@media (max-width:900px){ .split{grid-template-columns:1fr} .stack-d{margin:0} }
.story{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:760px){ .story{grid-template-columns:1fr} .stack-d .top{grid-template-columns:1fr} }
.story .spot h2{font-size:1.4rem}
.story .spot p{font-size:.98rem; line-height:1.7}

/* ---------------------------------------------------------------- Forms */
.formgrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:980px){ .formgrid{grid-template-columns:1fr} }
.fcard{border-radius:24px; background:var(--surface-raised); border:1px solid var(--line); padding:clamp(1.3rem,3.5vw,2.4rem); box-shadow:var(--shadow)}
body.mk form.stack{max-width:none; gap:1.2rem}
body.mk .field label{font-size:.86rem; color:var(--ink)}
body.mk .field .hint{font-size:.82rem}
body.mk input:not([type=checkbox]):not([type=radio]), body.mk select, body.mk textarea{min-height:50px; border-radius:12px; padding:.8rem 1rem; font-size:1rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast)}
body.mk input:hover, body.mk select:hover, body.mk textarea:hover{border-color:var(--stone-3)}
body.mk input:focus, body.mk select:focus, body.mk textarea:focus{border-color:var(--brass); box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 22%,transparent)}
body.mk .chk{min-height:44px; padding:.55rem 1rem; transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast)}
body.mk .chk:hover{border-color:var(--brass)}
body.mk .chk:has(input:checked){border-color:var(--brass); background:color-mix(in srgb,var(--brass-soft) 60%,var(--surface-raised)); color:var(--ink)}
body.mk .hp{position:absolute; left:-9999px}
.fsec{border-top:1px solid var(--line-soft); padding-top:1.5rem; margin-top:.4rem; display:flex; flex-direction:column; gap:1.1rem; scroll-margin-top:110px}
.fsec:first-of-type{border-top:0; padding-top:0; margin-top:0}
.fsec h2{display:flex; align-items:center; gap:.8rem; font-size:1.35rem}
.fsec h2 span{font-family:"IBM Plex Mono",monospace; font-size:.74rem; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--brass); color:var(--brass-2); flex:none; transition:background var(--t-med), color var(--t-med)}
.fsec.done h2 span{background:var(--forest); border-color:var(--forest); color:#fff}
body.mk #formmsg{border-radius:16px; padding:1.1rem 1.3rem; font-size:.98rem}
body.mk #formmsg.ok{border-color:var(--forest); background:var(--forest-soft); color:var(--forest-2)}
.aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:1rem}
.aside .spot{padding:1.4rem}
.aside h3{font-size:1.1rem}
.aside ol{margin:.6rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.8rem; counter-reset:a}
.aside ol li{display:grid; grid-template-columns:26px 1fr; gap:.7rem; font-size:.9rem; color:var(--ink-dim); counter-increment:a}
.aside ol li::before{content:counter(a); width:26px; height:26px; border-radius:50%; background:var(--stone-2); display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600; color:var(--ink)}
.aside ol li b{color:var(--ink); display:block}
.fprog{display:flex; flex-direction:column; gap:.2rem; margin-top:.6rem}
.fprog a{display:flex; align-items:center; gap:.65rem; padding:.55rem .6rem; border-radius:10px; color:var(--ink-dim); text-decoration:none; font-size:.92rem; min-height:44px}
.fprog a:hover{background:var(--stone)}
.fprog a i{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--stone-3); flex:none; transition:all var(--t-med)}
.fprog a.on{color:var(--ink); font-weight:600}
.fprog a.on i{border-color:var(--brass); background:var(--brass)}
.fprog a.done i{border-color:var(--forest); background:var(--forest)}
.m-spin{width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:m-rot .7s linear infinite; display:none}
.btn.busy .m-spin{display:inline-block}
.btn.busy svg{display:none}
@keyframes m-rot{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- Legal pages */
.prose{max-width:760px}
.prose h3{font-size:1.3rem; margin:2.2rem 0 .7rem}
.prose p, .prose li{color:var(--ink-dim); font-size:1.02rem; line-height:1.75}
.prose .taglist span a{text-decoration:none}

/* ---------------------------------------------------------------- 404 (Oversized Numeral) */
.m-404{min-height:100svh; display:grid; place-items:center; text-align:center; padding:8rem 1.2rem 4rem}
.m-404 .num{font-family:"Fraunces",serif; font-weight:700; font-size:clamp(9rem,34vw,24rem); line-height:.8; letter-spacing:-.06em;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep) 70%,transparent); -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none}
.m-404 h1{font-size:clamp(1.8rem,4vw,2.8rem); margin:.4rem 0 .8rem}
.m-404 .m-actions{justify-content:center; margin-top:1.8rem}

/* ---------------------------------------------------------------- Footer */
body.mk .sitefoot{background:var(--night); color:var(--night-dim); border-top:0; padding-top:clamp(4rem,8vw,6rem); overflow:hidden; position:relative}
body.mk .sitefoot .brand{color:var(--night-ink)}
body.mk .sitefoot .brand em{color:var(--gold)}
body.mk .sitefoot .muted, body.mk .sitefoot p{color:var(--night-dim)}
body.mk .sitefoot .h{color:var(--night-faint)}
body.mk .sitefoot .cols a{color:var(--night-dim); display:inline-flex; min-height:32px; align-items:center; margin-bottom:.15rem}
body.mk .sitefoot .cols > div:not(:first-child){display:flex; flex-direction:column; align-items:flex-start}
body.mk .sitefoot .cols a:hover{color:var(--gold-2)}
body.mk .sitefoot .legal{border-color:var(--night-line); color:var(--night-faint)}
.foot-cta{max-width:1180px; margin:0 auto 3.5rem; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;
  padding-bottom:3rem; border-bottom:1px solid var(--night-line)}
.foot-cta h2{color:var(--night-ink); font-size:clamp(1.8rem,4vw,3rem); max-width:16ch; line-height:1.05}
.foot-cta h2 em{color:var(--gold); font-weight:500}
.foot-word{max-width:1180px; margin:2.5rem auto -1.2rem; font-family:"Fraunces",serif; font-weight:700; letter-spacing:-.04em; line-height:.8;
  font-size:clamp(2.6rem,10.4vw,8.6rem); white-space:nowrap; overflow:hidden; text-align:center; user-select:none;
  background:linear-gradient(180deg,rgba(214,184,120,.28),rgba(214,184,120,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------------------------------------------------------------- Reduced motion: everything lands in its final state */
@media (prefers-reduced-motion: reduce){
  body.mk *, body.mk *::before, body.mk *::after{animation:none!important; transition-duration:1ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .m-device{transform:none}
  .m-shimmer{color:var(--gold); background:none}
  .m-sonar{display:none}
  .v-chart .ln{stroke-dashoffset:0}
  .steps{--fill:1}
}

/* Four packages (V3): Landing Page joins the three build tiers */
.tiers4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:stretch}
.tiers4 .pt{padding:1.7rem 1.4rem}
.tiers4 .pt .name{font-size:1.25rem; flex-wrap:wrap}
.tiers4 .pt .price{font-size:clamp(2.2rem,3.2vw,2.7rem)}
.tiers4 .pt li{font-size:.9rem}
@media (max-width:1180px){ .tiers4{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .tiers4{grid-template-columns:1fr} }
body.mk .allin{border-radius:22px; padding:1.6rem 1.8rem}
.m-mini{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-top:1rem;
  border:1px dashed var(--stone-3); border-radius:18px; padding:1.1rem 1.4rem; background:var(--surface-raised)}
.m-mini b{font-family:"Fraunces",serif; font-size:1.1rem; color:var(--charcoal)}
.m-mini span{color:var(--ink-dim); font-size:.93rem}
.m-pill svg{width:15px; height:15px; color:var(--gold); flex:none}
.m-link svg, .case svg, .spot h3 svg{flex:none}
.dash svg{width:14px; height:14px; flex:none}
.dash-top .chip svg{width:13px; height:13px}
.v-feed{justify-content:flex-start}
.v-feed li{flex:none}
body.mk .sitefoot .btn{margin:0; display:inline-flex}
.spot h3 svg{width:20px; height:20px; color:var(--brass-2); vertical-align:-3px; margin-right:.35rem}
.aside ol li span{display:block}
.aside p{color:var(--ink-dim); font-size:.93rem; margin:0}
.m-404 > div{position:relative; z-index:1}
.m-404 .m-lede{text-align:center}
.prose .muted{color:var(--ink-dim)}
.tiers4 .pt .btn{padding-left:1.1rem; padding-right:1.1rem; font-size:.92rem} .tiers4 .pt .btn.line{padding-left:2.1rem}

/* "See it work" on the pricing page: real screens in order, one row per package, swipe sideways on a phone. */
.walk{margin-top:clamp(2rem,5vw,3rem)}
.walk-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin-bottom:1rem}
.walk-h h3{margin:0; font-size:clamp(1.15rem,2vw,1.4rem); flex:1 1 20rem}
.walk-site{color:var(--night-faint); font-size:.88rem}
.wc{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:center}
.wc-stage{position:relative; min-width:0}
.wc-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-radius:16px}
.wc-track::-webkit-scrollbar{display:none}
.wc-track:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.wc-slide{flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always}
.wc-slide .browser{border-color:var(--night-line); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); text-decoration:none}
.wc-slide .browser img{display:block; width:100%; height:auto; aspect-ratio:16/10}
.wc-arrow{position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(240,221,174,.3); background:rgba(12,12,11,.72); color:var(--gold-2); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity var(--t-med), background var(--t-fast), transform var(--t-fast)}
.wc-arrow svg{width:18px; height:18px}
.wc-arrow.prev{left:12px} .wc-arrow.prev svg{transform:rotate(180deg)}
.wc-arrow.next{right:12px}
.wc-arrow:hover:not(:disabled){background:var(--gold); color:#15140F}
.wc-arrow:disabled{opacity:0; pointer-events:none}
.wc-steps{list-style:none; margin:0; padding:0; display:grid; gap:.25rem; counter-reset:none}
.wc-steps button{all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:1.9rem 1fr; gap:.7rem; align-items:start; cursor:pointer;
  padding:.75rem .9rem; border-radius:12px; border-left:2px solid transparent; color:var(--night-faint); transition:color var(--t-med), background var(--t-med), border-color var(--t-med)}
.wc-steps button:hover{color:var(--night-dim); background:rgba(240,221,174,.04)}
.wc-steps button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.wc-steps b{display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; font-size:.78rem; border:1px solid var(--night-line); color:var(--night-dim); transition:all var(--t-med)}
.wc-steps span{font-size:.95rem; line-height:1.5}
.wc-steps li.on button{color:var(--night-ink); background:rgba(240,221,174,.06); border-left-color:var(--gold)}
.wc-steps li.on b{background:var(--gold); border-color:var(--gold); color:#15140F}
.wc-count{display:none}
@media (max-width:900px){
  .wc{grid-template-columns:1fr; gap:.9rem}
  .wc-steps li{display:none} .wc-steps li.on{display:block}
  .wc-steps button{padding:.2rem 0; border-left:0; background:none!important; cursor:default}
  .wc-count{display:block; color:var(--night-faint); font-size:.85rem}
  .wc-arrow{width:40px; height:40px; margin-top:-20px}
}
a.browser{display:block; cursor:zoom-in; transition:transform var(--t-med) var(--ease-out)}
a.browser:hover{transform:translateY(-4px)}
/* The comparison table opens short (main features only); the button shows every row. Without script, every row shows. */
.cmp.short tr.more{display:none}

/* ---------------------------------------------------------------- Work: featured cards, the compact list and one filter for both */
.wk-filter{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.wk-filter button{font:inherit; font-size:.9rem; font-weight:600; color:var(--ink-dim); background:var(--surface-raised); border:1px solid var(--line);
  border-radius:999px; padding:.5rem .95rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast)}
.wk-filter button span{font-size:.78rem; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.wk-filter button:hover{border-color:var(--ink-faint); color:var(--ink)}
.wk-filter button[aria-pressed="true"]{background:var(--charcoal); border-color:var(--charcoal); color:var(--surface)}
.wk-filter button[aria-pressed="true"] span{color:inherit; opacity:.75}
.wk-h{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.35rem,2.4vw,1.75rem); margin:0 0 1.3rem}
.wk-h#more{margin-top:clamp(2.8rem,6vw,4.2rem)}
.wk-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,3vw,2.2rem)}
@media (max-width:1060px){ .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.wk-card{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.wk-card[hidden], .wk-list li[hidden], .wk-h[hidden], .wk-grid[hidden], .wk-list[hidden]{display:none}
.wk-shot{position:relative; display:block; width:100%; padding:0 0 1.5rem; margin-bottom:.9rem}
.wk-shot .phone{width:22%; min-width:70px; right:-2%; border-radius:15px; padding:3px}
.wk-shot .phone img{border-radius:12px}
.wk-card:hover .browser{transform:translateY(-4px)}
.wk-card:hover .phone{transform:translateY(-10px) rotate(-2deg)}
.wk-card .tier-tag{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--forest)}
.wk-card h3{font-size:clamp(1.25rem,1.8vw,1.45rem); margin:.35rem 0 .45rem}
.wk-card p{color:var(--ink-dim); font-size:.95rem; line-height:1.55; margin:0 0 .8rem}
.wk-more{width:100%; margin:0 0 1rem; border-top:1px solid var(--line-soft)}
.wk-more summary{cursor:pointer; list-style:none; padding:.65rem 0 0; font-size:.88rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.4rem}
.wk-more summary::-webkit-details-marker{display:none}
.wk-more summary::after{content:"+"; margin-left:auto; color:var(--ink-faint); font-weight:400; font-size:1.15rem; line-height:1}
.wk-more[open] summary::after{content:"\2212"}
.wk-more .ticks{margin:.7rem 0 .1rem}
.wk-more .ticks li{font-size:.9rem}
.wk-card .m-link{margin-top:auto}
.wk-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:.7rem}
.wk-list a, .wk-soon{display:flex; align-items:center; gap:.85rem; height:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px;
  background:var(--surface-raised); color:var(--ink); text-decoration:none; transition:border-color var(--t-fast), transform var(--t-med) var(--ease-out)}
.wk-list a:hover{border-color:var(--gold); transform:translateY(-2px)}
.wk-soon{border-style:dashed}
.wk-mono{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600;
  background:var(--stone-2); color:var(--brass-2)}
.wk-txt{display:grid; gap:.1rem; min-width:0; flex:1}
.wk-txt b{font-size:.98rem; font-weight:600}
.wk-txt span{font-size:.85rem; color:var(--ink-dim); line-height:1.4}
.wk-txt em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wk-list a > svg{flex:none; width:15px; height:15px; color:var(--ink-faint)}
.wk-none{color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){ .wk-list a, .wk-card .browser, .wk-card .phone{transition:none} }
/* On a phone the featured builds are one swipe row and the filter one scrolling line, so the page stays short. */
@media (max-width:640px){
  .wk-filter{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem}
  .wk-filter::-webkit-scrollbar{display:none}
  .wk-filter button{flex:none}
  .wk-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:.8rem; scrollbar-width:thin}
  .wk-card{scroll-snap-align:start}
  .wk-list{gap:.5rem}
  .wk-list a, .wk-soon{padding:.65rem .85rem}
  .wk-txt span{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
  .wk-mono{width:34px; height:34px; font-size:1rem}
}