/* =====================================================================
   White Rock Digital · "Next" design
   Ink-black stage, electric lime for action, a sunset-over-the-lake gradient
   (gold → coral → pink → violet) for color, expanded display type, sharp edges.
   Performance rules: no backdrop blur, no full-screen blend layers, the fluid
   shape is drawn by the GPU, and every animation is transform-only.
   ===================================================================== */
:root[data-palette]{
  --bg:#100d1b; --bg-rgb:16,13,27; --bg-2:#14101f; --bg-deep:#0a0812; --deep-rgb:16,18,25;
  --surface:#171327; --surface-hover:#1d182f; --panel:#1a1530; --panel-2:#201a37; --chrome:#14101f;
  --chip-a:#232634; --chip-b:#171a23;
  --fg:#f2f3f6; --fg-2:#a9adbb; --fg-3:#9aa0b4; --fg-soft:#d8dae2; --fg-strong:#ffffff;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.2); --hair:rgba(255,255,255,.09);
  --lime:#ff8a6a; --lime-2:#ff7360; --violet:#7c4dff; --coral:#ff7360; --pink:#e8508f; --gold:#ffc27a;
  --c1:#ff7360; --c2:#e8508f; --c3:#7c4dff; --blue:#7c4dff; --cyan:#ffc27a;
  --grad:linear-gradient(100deg,#ffc27a 0%,#ff7360 28%,#e8508f 58%,#8b5cff 100%);
  --panel-rgb:22,25,34; --ln-rgb:255,255,255; --a1-rgb:139,92,255; --a2-rgb:255,138,106; --dot-rgb:255,150,130;
  --acc-txt:#ffb59a; --acc2-txt:#ffb59a; --inv-bg1:#ffc27a; --inv-bg2:#e8508f; --inv-fg:#100d1b; --dot-ui:#2a2d3a; --sh-rgb:0,0,0;
  --r-xl:10px; --r-lg:8px; --r-md:6px;
  --font-display:"Archivo","Geist",ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;
}
body::after{display:none}

/* ---------- type ---------- */
h1,h2,h3,.g-title,.proj-title,.price-val,.h3-lg{font-family:var(--font-display);font-stretch:118%}
h1{font-weight:600;letter-spacing:-.035em;line-height:.98}
h2{font-weight:600;letter-spacing:-.035em;line-height:1.02}
h3{font-weight:600;letter-spacing:-.02em}
.page-hero h1{font-size:clamp(2.3rem,1.2rem + 4vw,4.4rem)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-lime{background:linear-gradient(90deg,var(--lime) 0%,#ffd9b0 55%,#f2f3f6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:#c4c7d2}
.eyebrow{font:500 12.5px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:none;color:var(--fg-2)}
.eyebrow::before{content:"//";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--lime);font-weight:600}
.eyebrow.plain::before{display:inline}
.k-accent,.tag-accent{color:var(--lime)}
.tag-accent{border-color:rgba(255,138,106,.35);background:rgba(255,138,106,.06)}

/* ---------- buttons: sharp blocks with a lit corner ---------- */
.btn{border-radius:3px;font-family:var(--font-display);font-stretch:108%;font-weight:600;letter-spacing:-.005em}
.btn-primary{color:#100d1b;background:linear-gradient(135deg,rgba(255,255,255,.55) 0 14px,transparent 14px),linear-gradient(120deg,rgba(90,20,60,.22) 0 26px,transparent 26px),var(--lime);border:0;box-shadow:0 0 0 1px rgba(255,138,106,.4),0 14px 34px -14px rgba(255,138,106,.55)}
.btn-primary:hover{box-shadow:0 0 0 1px var(--lime),0 18px 40px -12px rgba(255,138,106,.7)}
.btn-primary::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--fg)}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--lime);color:var(--lime)}
.link-arrow{color:var(--lime)}
.link-arrow:hover{color:#ffd9b0}

/* ---------- header (solid: no blur to recompute while scrolling) ---------- */
.site-header,.subnav{background:rgba(16,13,27,.95);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.07)}
.brand-name{font-family:var(--font-display);font-stretch:112%;font-weight:600}
@media (min-width:900px){
  .nav,.nav.is-open{position:static;transform:none;margin-left:auto;margin-right:18px}
  .nav ul,.nav.is-open ul{border:0;background:none;padding:0;gap:4px}
  .nav a,.nav.is-open a{font-family:var(--font-mono);font-size:14px;padding:6px 8px;color:var(--fg-2);background:none!important;box-shadow:none!important}
  .nav a::before{content:"<";color:var(--fg-3);transition:color .15s}
  .nav a::after{content:">";color:var(--fg-3);transition:color .15s}
  .nav a:hover,.nav a[aria-current="page"],.nav.is-open a[aria-current="page"]{color:var(--lime)}
  .nav a:hover::before,.nav a:hover::after,.nav a[aria-current="page"]::before,.nav a[aria-current="page"]::after{color:var(--lime)}
  .brand{margin-right:14px}
}
.nav.is-open a[aria-current="page"]{border-color:rgba(255,138,106,.5);background:rgba(255,138,106,.06)}
.subnav a.is-active{color:var(--lime);background:rgba(255,138,106,.06);border-color:rgba(255,138,106,.45)}

/* ---------- surfaces ---------- */
.card,.hl,.live-rev,.cta-band,.plan,.faq details,.price-card,.form-card,.side .card,.t-card{border-radius:8px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 120px),var(--surface);border-color:var(--hair);box-shadow:none}
.hl{background:rgba(255,255,255,.09)}
.hl > *{background:var(--surface)}
.hl > *:hover{background:var(--surface-hover)}
.spot::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(255,138,106,.9),rgba(139,92,255,.5) 35%,transparent 60%)}
.spot::after{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(139,92,255,.08),transparent 50%)}
.section::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.section-alt{background:radial-gradient(70% 60% at 85% 0%,rgba(124,77,255,.12),transparent 70%),linear-gradient(180deg,#110f1c,var(--bg) 85%)}
.ic,.svc-icon{border-radius:6px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--lime);box-shadow:none}
.tag{border-radius:3px}
.ticks li::before{background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%230c0e13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--lime)}
.ph{color:#ffe3d6;background:rgba(255,138,106,.08);border-color:rgba(255,138,106,.45)}
.hero-pill{border-radius:999px;border-color:rgba(255,138,106,.4);background:rgba(16,13,27,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-pill b{background:var(--lime);color:#100d1b}
.hero-meta svg{color:var(--lime)}
.float{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(19,21,28,.96)}
.float{border-radius:8px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],textarea{border-radius:4px;background:rgba(255,255,255,.03)}
input:focus,textarea:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(255,138,106,.12)}
.chip{border-radius:4px}
.chip input:checked{border-color:var(--lime);background:var(--lime)}
.chip:has(input:checked){background:rgba(255,138,106,.08);border-color:rgba(255,138,106,.6)}
.req{color:var(--lime)}
input.switch{border-radius:4px}
input.switch::after{border-radius:3px}
input.switch:checked{background:var(--lime)}
input.switch:checked::after{background:#100d1b}
.plan[aria-checked="true"]{border-color:var(--lime);background:radial-gradient(100% 70% at 50% 0%,rgba(255,138,106,.08),transparent 70%),var(--surface);box-shadow:0 0 0 1px rgba(255,138,106,.4),0 30px 60px -30px rgba(255,138,106,.25)}
.filter[aria-pressed="true"]{background:var(--lime);color:#100d1b}
.chip-i{border-radius:3px}
.chip-i svg{color:var(--lime)}
.faq summary::after{border-radius:4px}
.transcript .t-ai p{background:linear-gradient(135deg,rgba(139,92,255,.22),rgba(232,80,143,.1));border-color:rgba(139,92,255,.35)}
.transcript .t-ai .who{color:#c6b3ff}
.done .check{background:var(--lime);box-shadow:0 0 40px -6px rgba(255,138,106,.6)}
input[type=range]{accent-color:var(--lime)}

/* big thin numerals, like a magazine spread */
.process .num::before,.steps li::before,.g-num,.proj-num span{font-family:var(--font-display)}
.process .num::before{width:auto;height:auto;border:0;background:none;box-shadow:none;font-stretch:62%;font-weight:250;font-size:3rem;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);display:block}
.process::before{display:none}
.steps li::before{font-stretch:62%;font-weight:300;font-size:2rem;color:var(--lime);letter-spacing:0}
.proj-num span{border-radius:4px;border-color:rgba(255,138,106,.5);color:var(--lime)}

/* ---------- the fluid shape (GPU) ---------- */
canvas.nx-fluid{position:absolute;display:block;pointer-events:none}
canvas.nx-nogl{background:radial-gradient(closest-side,#ff7360,#e8508f 45%,rgba(124,77,255,.6) 70%,transparent);border-radius:50%;opacity:.8}

/* ---------- hero (home) ---------- */
.nx-hero{position:relative;padding-block:clamp(40px,6vw,72px) clamp(24px,4vw,48px);background:radial-gradient(60% 70% at 78% 30%,rgba(124,77,255,.16),transparent 70%),var(--bg);overflow:hidden;isolation:isolate}
.nx-hero-grid{position:relative;display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:1000px){.nx-hero-grid{grid-template-columns:48px minmax(0,1.05fr) minmax(0,1fr)}}
.nx-hero h1{font-size:clamp(2.6rem,1.4rem + 4vw,4.7rem)}
.nx-hero .hero-copy{position:relative;z-index:3;gap:24px}
.nx-stage{position:relative;min-height:clamp(340px,52vw,560px);display:grid;place-items:center}
.nx-fluid-lg{inset:-20% -12% -14% -8%;width:120%;height:134%}
.nx-desk{position:relative;z-index:2;display:block;width:80%;justify-self:end;margin-top:4%;border-radius:8px;text-decoration:none;transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.nx-desk:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.nx-desk .browser-body{aspect-ratio:16/10.5}
.nx-phone{position:absolute;z-index:3;left:2%;bottom:-2%;width:clamp(120px,24%,200px);padding:6px;border-radius:26px;background:#0b0c10;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 70px -30px rgba(0,0,0,.95);transform:rotate(-5deg)}
.nx-phone .scr{position:relative;container-type:inline-size;aspect-ratio:9/18.5;border-radius:21px;overflow:hidden;background:#fff}
.nx-phone .new{font-size:5.4cqw}
@media (max-width:719px){.nx-phone{width:30%}.nx-desk{width:90%;transform:none}}

/* floating 3D shapes (transform-only animations) */
.nx-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.nx-cross{position:absolute;width:clamp(70px,9vw,120px);filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));will-change:transform}
.nx-cross-sm{width:clamp(44px,5vw,70px);left:42%;top:8%;opacity:.9;animation:drift 11s ease-in-out infinite}
.capsule{position:absolute;width:clamp(56px,7vw,92px);aspect-ratio:1;will-change:transform}
.capsule i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9fff0 0,#4ff0c0 18%,#16b98c 50%,#075c46 85%);box-shadow:0 18px 30px -10px rgba(0,0,0,.6)}
.capsule i + i{inset:auto -26% -18% auto;width:72%;height:72%;filter:brightness(.85)}
.capsule-sm{width:clamp(34px,3.6vw,52px);left:3%;bottom:10%;animation:drift 9s ease-in-out infinite reverse}
.ring{position:absolute;right:46%;bottom:6%;width:clamp(40px,4vw,60px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 46%,#ffc27a 48%,#ff7360 62%,#b8406e 72%,transparent 74%);filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));animation:drift 13s ease-in-out infinite;will-change:transform}
@keyframes drift{50%{transform:translate3d(0,-14px,0) rotate(8deg)}}
@media (max-width:999px){.nx-cross-sm{left:auto;right:6%;top:2%}.capsule-sm,.ring{display:none}}

/* ---------- services: cards floating in the beam, no bar ---------- */
.nx-beam{position:relative;isolation:isolate;padding-block:clamp(60px,9vw,120px) clamp(20px,3vw,32px);background:var(--bg);overflow:hidden}
.nx-beam-art{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 92%,transparent 100%);mask-composite:intersect}
.nx-beam .beam{position:absolute;inset:0;background:linear-gradient(195deg,var(--lime) 0%,rgba(255,138,106,.55) 22%,rgba(255,138,106,.08) 58%,transparent 80%);clip-path:polygon(46% 0,72% 0,72% 100%,6% 100%);opacity:.85}
.nx-beam .col{position:absolute;top:0;bottom:0}
.col-violet{left:72%;width:15%;background:linear-gradient(180deg,rgba(124,77,255,.15),#5b2fd6 55%,#7c4dff)}
.col-teal{left:87%;right:0;background:linear-gradient(180deg,rgba(30,180,140,.05),#0f6b55 45%,#1fa883)}
.col .nx-cross{left:50%;top:16%;transform:translateX(-50%) rotate(-8deg);animation:spinbob 9s ease-in-out infinite}
@keyframes spinbob{50%{transform:translateX(-50%) translateY(-12px) rotate(6deg)}}
.col .capsule{left:38%;top:24%;transform:translateX(-50%);animation:bob 7s ease-in-out infinite}
.nx-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:960px){.nx-svc{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-bottom:30px}}
.nx-svc a{display:grid;gap:6px;align-content:start;padding:clamp(18px,2.2vw,26px);border-radius:8px;text-decoration:none;color:var(--fg);background:linear-gradient(180deg,rgba(28,30,40,.97),rgba(16,18,25,.97));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 50px -26px rgba(0,0,0,.95);transition:border-color .25s,translate .25s}
.nx-svc a:hover{border-color:rgba(255,138,106,.55);translate:0 -4px}
.nx-svc b{font:250 clamp(2.4rem,1.6rem + 2vw,3.4rem)/1 var(--font-display);font-stretch:62%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75);transition:color .25s,-webkit-text-stroke-color .25s}
.nx-svc a:hover b{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.nx-svc span{font-family:var(--font-display);font-stretch:115%;font-weight:600;font-size:1.15rem}
.nx-svc small{color:var(--fg-2);font-size:13.5px;line-height:1.45}
@media (min-width:960px){
  .nx-svc a{animation:svcfloat 7s ease-in-out infinite;will-change:transform}
  .nx-svc a:nth-child(2){margin-top:34px;animation-delay:-1.8s}
  .nx-svc a:nth-child(3){margin-top:12px;animation-delay:-3.6s}
  .nx-svc a:nth-child(4){margin-top:44px;animation-delay:-5.2s}
  .nx-svc a:hover{animation-play-state:paused}
}
@keyframes svcfloat{50%{transform:translate3d(0,-10px,0)}}
@media (max-width:420px){.nx-svc{grid-template-columns:1fr}}
.nx-beam .marquee{margin-top:clamp(24px,4vw,40px);border-top:0;background:none}

/* ---------- page heroes ---------- */
.nx-bg{background:radial-gradient(60% 80% at 85% 20%,rgba(124,77,255,.14),transparent 70%)}
.nx-fluid-sm{right:-8%;top:-14%;width:min(540px,62vw);height:min(540px,62vw);opacity:.9}
@media (max-width:899px){.nx-fluid-sm{right:-30%;top:-10%;opacity:.5}}
.page-hero .hero-copy{position:relative;z-index:1}

/* ---------- other sections ---------- */
.cta-band{background:linear-gradient(195deg,rgba(255,138,106,0) 30%,rgba(255,138,106,.12) 100%),radial-gradient(60% 120% at 100% 0%,rgba(124,77,255,.55),transparent 60%),#1a1430;border-color:rgba(124,77,255,.45)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(255,138,106,.35),transparent 55%);clip-path:polygon(60% 0,82% 0,82% 100%,28% 100%);pointer-events:none}
.live-rev{background:radial-gradient(70% 120% at 0% 0%,rgba(124,77,255,.16),transparent 60%),radial-gradient(60% 100% at 100% 100%,rgba(255,115,96,.08),transparent 60%),var(--surface);border-color:var(--hair)}
.promises.hl li{background:rgba(16,13,27,.9)}
.price-teaser .pt-featured{background:radial-gradient(100% 70% at 50% 0%,rgba(255,138,106,.07),transparent 70%),var(--surface)!important}
.g-shot{background:radial-gradient(80% 90% at 50% 0%,rgba(232,80,143,.25),transparent 70%),radial-gradient(60% 70% at 100% 100%,rgba(124,77,255,.25),transparent 70%),#130f20}
.g-frame,.browser{border-radius:8px}
.site-footer{background:linear-gradient(180deg,var(--bg-2),var(--bg-deep))}
.foot-h{color:var(--lime)}
.mark{border-radius:8px;box-shadow:0 8px 20px -8px rgba(232,80,143,.7)}

@media (prefers-reduced-motion:reduce){.nx-desk{transform:none}.nx-svc a,.nx-cross,.capsule,.ring{animation:none!important}}
/* shapes: no filters on anything that moves (filters force a redraw every frame) */
.nx-cross,.ring{filter:none}
.capsule i + i{filter:none;background:radial-gradient(circle at 35% 30%,#a8f5dc 0,#3ad6a8 18%,#119a75 50%,#064a3a 85%)}

/* moving shapes live outside the masked beam, so the mask is painted once */
.nx-beam-shapes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nx-beam-shapes .nx-cross{left:79.5%;top:12%;transform:translateX(-50%) rotate(-8deg);animation:spinbob 9s ease-in-out infinite}
.nx-beam-shapes .capsule{left:91%;top:20%;transform:translateX(-50%);animation:bob 7s ease-in-out infinite}
@media (max-width:719px){.nx-beam-shapes .capsule{left:93%}}
/* soften the column edges so nothing reads as a hard block */
.nx-beam .col{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.capsule-sm{left:38%;bottom:3%}

/* =====================================================================
   Clarity pass
   ===================================================================== */
/* header melts into the page: no line, no strip; a soft shade appears once you scroll */
.site-header{border-bottom:0;background:transparent;box-shadow:none;transition:background-color .3s ease,box-shadow .3s ease}
.site-header.is-scrolled{background:rgba(16,13,27,.92);box-shadow:0 18px 30px -22px rgba(0,0,0,.9)}
body::before{background:transparent}
.subnav{border-bottom:0;box-shadow:0 18px 30px -24px rgba(0,0,0,.9)}
/* the first section slides up under the header so there's no seam */
main > section:first-child{margin-top:calc(-1 * var(--header-h))}
.nx-hero{padding-top:calc(var(--header-h) + clamp(32px,5vw,64px))}
.page-hero{padding-top:calc(var(--header-h) + clamp(48px,7vw,96px))}
/* no divider lines between sections */
.section::before{display:none}

/* menu: the <code> style links only where they fit; the menu button below that */
@media (min-width:900px) and (max-width:1179px){
  .menu-btn{display:inline-grid}
  .nav,.nav ul{display:none}
  .nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;transform:none;margin:0;background:rgba(16,13,27,.98);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);padding-block:14px 18px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .nav.is-open ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:none;border:0;background:none;padding:0}
  .nav.is-open a{padding:12px 14px;font-size:15px;border:1px solid var(--line);border-radius:6px;text-align:center}
  .nav a::before,.nav a::after{content:none}
  .header-cta{margin-left:auto}
}
.brand{flex:none}

/* hero: two clear columns, nothing competing with the message */
@media (min-width:1000px){.nx-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.nx-hero{padding-bottom:clamp(16px,3vw,32px)}
.nx-hero h1{font-size:clamp(2.6rem,1.3rem + 3.8vw,4.6rem)}
.nx-cross-sm{left:44%;top:10%}
.ring{right:auto;left:46%;bottom:4%}
.capsule-sm{left:auto;right:44%;bottom:auto;top:62%}
@media (max-width:999px){.nx-cross-sm{left:auto;right:6%;top:4%}}

/* services: a clear heading, then cards that float */
.nx-beam{padding-top:clamp(40px,6vw,72px)}
.nx-svc-head{margin-bottom:clamp(28px,4vw,44px)}
.nx-svc a em{margin-top:8px;font-style:normal;font-weight:600;font-size:14px;color:var(--lime)}
.nx-svc a:hover em{text-decoration:underline;text-underline-offset:3px}
.site-header.is-scrolled{background:#100d1b}
.is-offscreen .nx-cross,.is-offscreen .capsule,.is-offscreen .ring,.is-offscreen .nx-svc a,.mq-wrap.is-offscreen .marquee-track,.foot-ripple.is-offscreen .rp i{animation-play-state:paused}
.site-header,.site-header.is-scrolled{box-shadow:none;transition:none}
.subnav{box-shadow:none}
/* a soft fade under the header instead of a line (static, so it costs nothing) */
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(#100d1b,rgba(16,13,27,0));opacity:0;pointer-events:none}
.site-header.is-scrolled::after{opacity:1}

/* portfolio screenshots of live builds */
.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

/* portfolio showcase: phone mockups over a scenic stage */
.sc-list{display:grid;gap:clamp(72px,10vw,140px)}
.show{display:grid;gap:clamp(22px,3vw,36px);scroll-margin-top:96px}
.sc-stage{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;isolation:isolate;background:#100d1b;border:1px solid var(--line);text-decoration:none;color:#fff}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sc-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,13,27,.22),rgba(16,13,27,0) 26%,rgba(16,13,27,0) 74%,rgba(16,13,27,.3))}
a.sc-stage:hover .stage-bg{transform:scale(1.04)}
.stage-label{position:absolute;top:clamp(14px,3.2vw,40px);font:400 clamp(10px,.55rem + .9vw,22px)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#fff;z-index:2}
.stage-label span{display:block;color:rgba(255,255,255,.88)}
.stage-label,.stage-foot{text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.55)}
.stage-label.l{left:clamp(14px,3.6vw,44px)}
.stage-label.r{right:clamp(14px,3.6vw,44px);text-align:right}
.stage-foot{position:absolute;left:clamp(14px,3.6vw,44px);bottom:clamp(12px,2.6vw,32px);font:500 clamp(9.5px,.5rem + .4vw,12.5px)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92);z-index:2;display:flex;align-items:center;gap:10px}
.stage-foot::before{content:"//";color:var(--lime)}
.phones{position:absolute;left:0;right:0;top:19%;display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2.4vw,34px);padding:0 5%}
.sc-phone{flex:0 0 auto;width:17%;max-width:230px;aspect-ratio:390/844;border-radius:clamp(5px,.9vw,12px);overflow:hidden;background:#100d1b;transform:translateY(var(--y,0));box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(255,255,255,.1),0 40px 70px -24px rgba(0,0,0,.75);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sc-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phones-5{top:21%}
.phones-5 .sc-phone{width:14.5%}
.stage-reel .sc-phone:hover,.stage-reel .sc-phone:focus-visible{transform:translateY(calc(var(--y,0) - 3%))}
.show-copy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:start}
.show-main{display:grid;gap:16px;justify-items:start;min-width:0}
.show-side{display:grid;gap:18px;justify-items:start;min-width:0}
@media (max-width:860px){.show-copy{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .sc-stage{aspect-ratio:1/.94}
  .sc-stage.stage-reel{aspect-ratio:1/.78}
  .phones{top:22%;gap:10px;padding:0 4%}
  .sc-phone{width:29%}
  .phones-5{top:24%;gap:6px;flex-wrap:nowrap}
  .phones-5 .sc-phone{width:18.4%}
}
@media (prefers-reduced-motion:reduce){.stage-bg,.sc-phone{transition:none}}

/* accents use the brand gradient (amber > coral > pink > violet) instead of lime */
.nx-lime{background:linear-gradient(90deg,#ffc27a 0%,#ffd9b0 50%,#f2f3f6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{color:#100d1b;background:linear-gradient(135deg,rgba(255,255,255,.45) 0 14px,transparent 14px),var(--grad);box-shadow:0 0 0 1px rgba(255,194,122,.3),0 14px 34px -14px rgba(232,80,143,.6)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,194,122,.65),0 18px 40px -12px rgba(232,80,143,.75)}
.link-arrow,.k-accent,.foot-h,.req,.nx-svc a em,.proj-num span,.eyebrow::before,.stage-foot::before,.steps li::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.link-arrow{display:inline-flex}
.proj-num span{border-color:rgba(255,138,106,.5)}
.tag-accent{color:#ffb59a}
.ticks li::before{background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%230c0e13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--grad);background-repeat:no-repeat;background-position:center;background-size:10px,100%}
.filter[aria-pressed="true"],.hero-pill b,.done .check,.chip input:checked,input.switch:checked{background:var(--grad)}
@media (min-width:0px){.nav a:hover,.nav a[aria-current="page"]{color:#ffb59a}}

/* WRD reflection logo mark */
.mark,.brand:hover .mark{width:40px;height:36px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.mark img{display:block;width:40px;height:36px}

/* ===== polish pass: readable controls (WCAG AA) ===== */
:root[data-palette]{--grad-ui:linear-gradient(100deg,#ffc27a 0%,#ff9a7a 32%,#f585b0 64%,#b9a2ff 100%);--focus:#ffb59a}
/* primary buttons: lighter end stops keep dark text above 6:1 everywhere */
.btn-primary{color:#0b0c10;font-weight:700;letter-spacing:-.005em;background:linear-gradient(135deg,rgba(255,255,255,.45) 0 14px,transparent 14px),linear-gradient(100deg,#ffc27a 0%,#ff8a6a 34%,#f2709f 68%,#b79cff 100%)}
.btn-primary .arr{transition:transform .2s ease}
.btn-primary:hover .arr{transform:translateX(3px)}
/* secondary buttons: solid outline and white text */
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.btn-ghost:hover{color:#fff;border-color:#ffb59a;background:rgba(255,138,106,.1)}
/* small gradient text uses the lighter ramp */
.link-arrow,.k-accent,.foot-h,.req,.nx-svc a em,.proj-num span,.eyebrow::before,.stage-foot::before,.steps li::before{background-image:var(--grad-ui)}
.link-arrow{font-weight:600}
/* form fields: 3:1 borders and readable placeholders */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],textarea{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.035)}
input:hover,textarea:hover{border-color:rgba(255,255,255,.5)}
input:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 4px rgba(255,138,106,.18)}
input::placeholder,textarea::placeholder{color:#9aa0b4}
.chip{border-color:rgba(255,255,255,.3);color:#e9ecf3}
.chip input{border-color:#a3abbf}
.chip:has(input:checked){border-color:#ffb59a;background:rgba(255,138,106,.12);color:#fff}
.opt{color:#a7adbf}
input.switch{border-color:rgba(255,255,255,.35)}
input.switch::after{background:#b3b9ca}
/* one clear focus style for keyboard users */
:where(a,button,summary,input,select,textarea,[role=radio],[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.chip:has(input:focus-visible),input.switch:focus-visible{outline-color:var(--focus)}
/* nav + FAQ */
.nav a{color:#cfd5e2}
details summary{color:#fff}
.hero-pill b{background:var(--grad-ui)}

/* ===== round 2: laptop + phone showcases ===== */
.sc-devices{position:absolute;inset:0;pointer-events:none}
.sc-laptop{position:absolute;left:14%;top:17%;width:60%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sc-laptop .lid{display:block;aspect-ratio:16/10.4;padding:1.6% 1.6% 0;border-radius:clamp(6px,1vw,14px) clamp(6px,1vw,14px) 0 0;background:#0b0c10;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 50px 80px -30px rgba(0,0,0,.8)}
.sc-laptop .lid img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:2px 2px 0 0}
.sc-laptop .base{display:block;position:relative;left:-8%;width:116%;height:clamp(6px,1.1vw,15px);border-radius:0 0 clamp(6px,1vw,14px) clamp(6px,1vw,14px);background:linear-gradient(180deg,#d4d7de,#868a95);box-shadow:0 20px 30px -12px rgba(0,0,0,.7)}
.sc-laptop .base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:35%;border-radius:0 0 6px 6px;background:rgba(0,0,0,.18)}
.sc-mobile{position:absolute;right:13%;top:31%;width:15.5%;aspect-ratio:390/844;border-radius:clamp(6px,1.2vw,16px);overflow:hidden;background:#0b0c10;border:clamp(2px,.35vw,5px) solid #0b0c10;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 40px 70px -24px rgba(0,0,0,.85);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sc-mobile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:clamp(4px,.9vw,12px)}
a.sc-stage:hover .sc-laptop{transform:translateY(-2%)}
a.sc-stage:hover .sc-mobile{transform:translateY(-4%)}
@media (max-width:640px){
  .sc-laptop{left:5%;top:20%;width:78%}
  .sc-mobile{right:5%;top:33%;width:24%}
}
@media (prefers-reduced-motion:reduce){.sc-laptop,.sc-mobile{transition:none}}

/* home portfolio cards: a phone tucked beside the laptop screen */
.g-shot .g-phone{position:absolute;right:5%;bottom:-4%;width:21%;aspect-ratio:390/844;border-radius:12px;overflow:hidden;background:#0b0c10;border:3px solid #0b0c10;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 50px -18px rgba(0,0,0,.9);z-index:2;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.g-shot .g-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:9px}
.home-work .g-frame{right:22%}
.g-item:hover .g-phone{transform:translateY(-12px)}

/* ===== round 2: easier reading ===== */
:root[data-palette]{--fg-2:#c6cad6; --fg-3:#a9aebf; --bg-2:#18132a}
body{font-size:17px;line-height:1.65}
.lede{color:#dde0e8;line-height:1.6}
h1,h2,h3,.g-title,.proj-title,.price-val,.h3-lg{font-stretch:110%}
h2{letter-spacing:-.028em}
.eyebrow{font-size:13.5px;color:#d3d6df}
.hl p,.g-body p,.process p,.steps p,.ticks li,.faq .a p,.proj-facts dd{color:#cfd3dd}
.section-head .lede{max-width:62ch}
.section-alt{background:linear-gradient(180deg,#1b1630,var(--bg) 85%)}
.why h3{font-size:clamp(1.12rem,1rem + .35vw,1.3rem)}

/* ===== round 3 ===== */
.browser-body .hero-shot,.nx-phone .scr .hero-shot{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.nx-phone .scr{background:#0b0c10}
@media (min-width:860px){.home-work-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* typical site vs ours */
.vs{display:grid;gap:clamp(14px,2vw,22px)}
@media (min-width:760px){.vs{grid-template-columns:1fr 1fr}}
.vs-card{position:relative;padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--surface)}
.vs-k{margin:0 0 18px;font:600 13.5px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#d3d6df}
.vs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs-card li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.45}
.vs-card li::before{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 13px/1 var(--font-sans);margin-top:1px}
.vs-old li{color:#a9aebf}
.vs-old li::before{content:"✕";color:#a9aebf;background:rgba(255,255,255,.07)}
.vs-new{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 40px 80px -40px rgba(232,80,143,.45)}
.vs-new .vs-k{background:var(--grad-ui);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-new li{color:#fff;font-weight:500}
.vs-new li::before{content:"✓";color:#0b0c10;background:linear-gradient(135deg,#ffc27a,#ff8a6a)}

/* chatbot demo */
.chat-demo{max-width:860px;margin-inline:auto}
.chat-dot{width:10px;height:10px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18)}

/* ===== palette B: Midnight Plum ===== */
:root[data-palette]{
  --bg:#100d1b; --bg-rgb:16,13,27; --bg-2:#18132a; --bg-deep:#0a0812; --deep-rgb:20,16,33;
  --surface:#171327; --surface-hover:#1d182f; --panel:#1a1530; --panel-2:#201a37; --chrome:#14101f;
  --chip-a:#2a2440; --chip-b:#1a1529;
  --fg:#f5f1fc; --fg-2:#cdc5df; --fg-3:#b0a8c4; --fg-soft:#e2dcef;
  --line:rgba(214,196,255,.1); --line-2:rgba(214,196,255,.24); --hair:rgba(214,196,255,.11); --ln-rgb:214,196,255;
  --panel-rgb:26,21,48; --dot-ui:#2e2745;
}
.lede{color:#e2dcef}
.eyebrow{color:#ddd6ea}
.hl p,.g-body p,.process p,.steps p,.ticks li,.faq .a p,.proj-facts dd{color:#d6cfe5}
.btn-ghost{border-color:rgba(224,210,255,.5)}

/* footer: the logo over a widening ripple, like the mark's reflection on the lake */
.foot-ripple{margin:clamp(44px,6vw,76px) 0 0;display:grid;justify-items:center;gap:clamp(14px,2vw,22px)}
.foot-ripple img{width:clamp(96px,12vw,150px);height:auto;filter:drop-shadow(0 18px 40px rgba(139,92,255,.35))}
.foot-ripple .rp{display:grid;justify-items:center;gap:clamp(7px,1vw,11px);width:100%}
.foot-ripple .rp i{display:block;height:2px;border-radius:2px;background:var(--grad);transform-origin:center;animation:ripple 6s ease-in-out infinite}
.foot-ripple .rp i:nth-child(1){width:min(420px,60%);height:3px;opacity:.9}
.foot-ripple .rp i:nth-child(2){width:min(620px,74%);opacity:.65;animation-delay:-1.2s}
.foot-ripple .rp i:nth-child(3){width:min(820px,86%);opacity:.45;animation-delay:-2.4s}
.foot-ripple .rp i:nth-child(4){width:min(1020px,94%);height:1.5px;opacity:.28;animation-delay:-3.6s}
.foot-ripple .rp i:nth-child(5){width:100%;height:1px;opacity:.16;animation-delay:-4.8s}
@keyframes ripple{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}
@media (prefers-reduced-motion:reduce){.foot-ripple .rp i{animation:none}}
.svc-more{margin:clamp(18px,2vw,26px) 0 0}

/* ===== round 5: wider layout and larger controls ===== */
@media (min-width:1280px){
  .wrap{max-width:1440px;padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}
  .bar{max-width:1520px}
}
@media (min-width:1700px){
  .wrap{max-width:1760px;padding-left:72px;padding-right:72px}
  .bar{max-width:1760px}
}
.btn{min-height:52px;padding:0 26px;font-size:16px}
.btn-sm{min-height:44px;padding:0 20px;font-size:14.5px}
@media (min-width:900px){
  .nav a,.nav.is-open a{padding:8px 16px;font-size:15px}
  .brand{font-size:17.5px}
}
.per.setup{opacity:.85;font-size:.72em;white-space:nowrap}
@media (max-width:599px){.header-cta{min-height:44px;font-size:14.5px;padding:0 18px}}

/* =====================================================================
   THEME: "Lake Dawn" (light). Turn on with theme: "dawn" in settings.js.
   White Rock Lake at sunrise: misty paper background, deep ink type,
   a peach → rose → periwinkle → lake-teal gradient. Same layout and effects.
   ===================================================================== */
:root[data-theme="dawn"]{
  --bg:#f7f4ef; --bg-rgb:247,244,239; --bg-2:#efebe4; --bg-deep:#e6e1d8; --deep-rgb:230,225,216;
  --surface:#ffffff; --surface-hover:#fdfbf8; --panel:#ffffff; --panel-2:#f7f3ee; --chrome:#fbf9f6;
  --chip-a:#ffffff; --chip-b:#f3efe9;
  --fg:#1a1630; --fg-2:#4b4663; --fg-3:#5f5a77; --fg-soft:#2b2742; --fg-strong:#0e0b1d;
  --line:rgba(26,22,48,.1); --line-2:rgba(26,22,48,.22); --hair:rgba(26,22,48,.1); --ln-rgb:26,22,48;
  --lime:#e2552f; --lime-2:#cf4524; --violet:#5b4bff; --coral:#e2552f; --pink:#e04a7c; --gold:#f39a3d;
  --c1:#e2552f; --c2:#e04a7c; --c3:#5b4bff; --blue:#5b4bff; --cyan:#13a2c0;
  --grad:linear-gradient(100deg,#ee7d2c 0%,#e2552f 24%,#d9437a 50%,#5b4bff 78%,#1196b6 100%);
  --panel-rgb:255,255,255; --a1-rgb:91,75,255; --a2-rgb:226,85,47; --dot-rgb:226,85,47;
  --acc-txt:#b8401f; --acc2-txt:#b8401f; --inv-bg1:#f39a3d; --inv-bg2:#e04a7c; --inv-fg:#ffffff; --dot-ui:#e3ddd3; --sh-rgb:60,40,30;
  color-scheme:light;
}
[data-theme="dawn"] body{background:var(--bg);color:var(--fg)}
[data-theme="dawn"] .lede{color:#3d3855}
[data-theme="dawn"] .eyebrow{color:#4b4663}
[data-theme="dawn"] .hl p,[data-theme="dawn"] .g-body p,[data-theme="dawn"] .process p,[data-theme="dawn"] .steps p,[data-theme="dawn"] .ticks li,[data-theme="dawn"] .faq .a p,[data-theme="dawn"] .proj-facts dd{color:#423d5a}
[data-theme="dawn"] .nx-lime{background:linear-gradient(90deg,#e2552f 0%,#d9437a 60%,#5b4bff 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="dawn"] .tag-accent{border-color:rgba(226,85,47,.35);background:rgba(226,85,47,.07)}

/* buttons */
[data-theme="dawn"] .btn-primary{color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.35) 0 14px,transparent 14px),linear-gradient(120deg,rgba(60,10,40,.18) 0 26px,transparent 26px),linear-gradient(100deg,#e2552f,#d9437a 55%,#6a4bf0);box-shadow:0 0 0 1px rgba(226,85,47,.25),0 14px 34px -14px rgba(217,67,122,.55)}
[data-theme="dawn"] .btn-primary:hover{box-shadow:0 0 0 1px #d9437a,0 18px 40px -12px rgba(217,67,122,.6)}
[data-theme="dawn"] .btn-ghost{border-color:rgba(26,22,48,.35);color:var(--fg);background:rgba(255,255,255,.6)}
[data-theme="dawn"] .btn-ghost:hover{background:#fff;border-color:var(--lime);color:var(--lime)}
[data-theme="dawn"] .link-arrow:hover{color:#8a2d14}

/* header and nav */
[data-theme="dawn"] .site-header,[data-theme="dawn"] .subnav{border-bottom-color:rgba(26,22,48,.08)}
[data-theme="dawn"] .site-header.is-scrolled{background:rgba(247,244,239,.97)}
[data-theme="dawn"] .site-header::after{background:linear-gradient(rgba(247,244,239,1),rgba(247,244,239,0))}
[data-theme="dawn"] .nav.is-open{background:var(--bg)}
[data-theme="dawn"] .menu-btn span,[data-theme="dawn"] .menu-btn span::before,[data-theme="dawn"] .menu-btn span::after{background:var(--fg)}

/* surfaces */
[data-theme="dawn"] .card{background:#fff;border-color:var(--hair);box-shadow:0 1px 0 rgba(26,22,48,.03),0 18px 40px -28px rgba(60,40,30,.35)}
[data-theme="dawn"] .hl{background:rgba(26,22,48,.08)}
[data-theme="dawn"] .spot::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(226,85,47,.75),rgba(91,75,255,.45) 35%,transparent 60%)}
[data-theme="dawn"] .spot::after{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(91,75,255,.06),transparent 50%)}
[data-theme="dawn"] .section::before{background:linear-gradient(90deg,transparent,rgba(26,22,48,.12),transparent)}
[data-theme="dawn"] .section-alt{background:radial-gradient(70% 60% at 85% 0%,rgba(91,75,255,.08),transparent 70%),linear-gradient(180deg,#efeae2,var(--bg) 85%)}
[data-theme="dawn"] .ic,[data-theme="dawn"] .svc-icon{background:rgba(226,85,47,.06);border-color:rgba(226,85,47,.25)}
[data-theme="dawn"] .ticks li::before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme="dawn"] .ph{color:#8a2d14;background:rgba(226,85,47,.07);border-color:rgba(226,85,47,.4)}
[data-theme="dawn"] .hero-pill{background:rgba(255,255,255,.75);border-color:rgba(226,85,47,.35)}
[data-theme="dawn"] .hero-pill b{color:#fff}
[data-theme="dawn"] .float{background:rgba(255,255,255,.97);box-shadow:0 10px 30px -12px rgba(60,40,30,.35)}
[data-theme="dawn"] input[type=text],[data-theme="dawn"] input[type=email],[data-theme="dawn"] input[type=tel],[data-theme="dawn"] input[type=number],[data-theme="dawn"] input[type=url],[data-theme="dawn"] textarea{background:#fff;color:var(--fg);border-color:rgba(26,22,48,.28)}
[data-theme="dawn"] input::placeholder,[data-theme="dawn"] textarea::placeholder{color:#7a7590}
[data-theme="dawn"] .chip{background:#fff;border-color:rgba(26,22,48,.22);color:var(--fg)}
[data-theme="dawn"] .chip:has(input:checked){background:rgba(226,85,47,.07)}
[data-theme="dawn"] input.switch{background:#e3ddd3}
[data-theme="dawn"] input.switch:checked::after{background:#fff}
[data-theme="dawn"] .plan[aria-checked="true"]{background:radial-gradient(100% 70% at 50% 0%,rgba(226,85,47,.06),transparent 70%),#fff}
[data-theme="dawn"] .filter[aria-pressed="true"]{color:#fff}
[data-theme="dawn"] .transcript .t-ai .who{color:#4a3bd6}
[data-theme="dawn"] .process .num::before{-webkit-text-stroke:1px rgba(26,22,48,.45)}
[data-theme="dawn"] .faq details{background:#fff}

/* hero, blob fallback and floating shapes */
[data-theme="dawn"] .nx-hero{background:radial-gradient(60% 70% at 78% 30%,rgba(19,162,192,.12),transparent 70%),radial-gradient(40% 50% at 95% 0%,rgba(243,154,61,.16),transparent 70%),var(--bg)}
[data-theme="dawn"] canvas.nx-nogl{background:radial-gradient(closest-side,#f39a3d,#e04a7c 45%,rgba(19,162,192,.55) 70%,transparent)}
[data-theme="dawn"] .nx-cross stop:nth-child(1){stop-color:#9fe3ef}
[data-theme="dawn"] .nx-cross stop:nth-child(2){stop-color:#2bb3cf}
[data-theme="dawn"] .nx-cross path[fill*="pl"] {fill:#1592ad}
[data-theme="dawn"] .nx-cross path[fill*="pr"] {fill:#0e6f86}
[data-theme="dawn"] .nx-cross path[fill*="pt"] {fill:#7fd6e6}
[data-theme="dawn"] .capsule i{background:radial-gradient(circle at 35% 30%,#fff3e0 0,#ffc58a 18%,#f39a3d 50%,#b4561a 85%);box-shadow:0 18px 30px -12px rgba(120,60,20,.35)}
[data-theme="dawn"] .capsule i + i{background:radial-gradient(circle at 35% 30%,#ffe6f0 0,#ff9cc0 18%,#e04a7c 50%,#8e1f49 85%)}
[data-theme="dawn"] .ring{background:radial-gradient(circle,transparent 46%,#9fe3ef 48%,#2bb3cf 62%,#5b4bff 72%,transparent 74%);filter:drop-shadow(0 10px 16px rgba(30,60,90,.25))}

/* "What do you need?" beam */
[data-theme="dawn"] .nx-beam .beam{background:linear-gradient(195deg,#f39a3d 0%,rgba(226,85,47,.4) 22%,rgba(226,85,47,.06) 58%,transparent 80%)}
[data-theme="dawn"] .col-violet{background:linear-gradient(180deg,rgba(91,75,255,.08),#8f84ff 55%,#5b4bff)}
[data-theme="dawn"] .col-teal{background:linear-gradient(180deg,rgba(19,162,192,.05),#4cc4dc 45%,#13a2c0)}

/* call to action band and footer */
[data-theme="dawn"] .cta-band{background:linear-gradient(195deg,rgba(243,154,61,0) 30%,rgba(243,154,61,.16) 100%),radial-gradient(60% 120% at 100% 0%,rgba(91,75,255,.18),transparent 60%),#fff;border-color:rgba(91,75,255,.25)}
[data-theme="dawn"] .cta-band::after{background:linear-gradient(200deg,rgba(243,154,61,.25),transparent 55%)}
[data-theme="dawn"] .site-footer{background:linear-gradient(180deg,#efeae2,#e6e0d6)}
[data-theme="dawn"] .foot-ripple img{filter:drop-shadow(0 18px 40px rgba(91,75,255,.2))}
/* Lake Dawn: readable text and controls on light */
:root[data-theme="dawn"]{--grad-ui:linear-gradient(100deg,#c2410c 0%,#c42d5e 50%,#4a3bd6 100%);--focus:#c2410c}
[data-theme="dawn"] .nav a{color:#3d3855}
[data-theme="dawn"] .nav a::before,[data-theme="dawn"] .nav a::after{color:#8a84a0}
@media (min-width:0px){[data-theme="dawn"] .nav a:hover,[data-theme="dawn"] .nav a[aria-current="page"]{color:#c2410c}}
[data-theme="dawn"] details summary{color:var(--fg)}
[data-theme="dawn"] .tag-accent{color:#b8401f}
[data-theme="dawn"] .tag{background:#fff;color:#4b4663;border-color:rgba(26,22,48,.16)}
[data-theme="dawn"] .chip{border-color:rgba(26,22,48,.28);color:var(--fg)}
[data-theme="dawn"] .chip input{border-color:#8a84a0}
[data-theme="dawn"] .chip:has(input:checked){border-color:#c2410c;color:var(--fg)}
[data-theme="dawn"] .opt{color:#5f5a77}
[data-theme="dawn"] input:hover,[data-theme="dawn"] textarea:hover{border-color:rgba(26,22,48,.45)}
[data-theme="dawn"] input.switch{border-color:rgba(26,22,48,.3)}
[data-theme="dawn"] input.switch::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
[data-theme="dawn"] .eyebrow{color:#4b4663}
[data-theme="dawn"] .lede{color:#3d3855}
[data-theme="dawn"] .hl p,[data-theme="dawn"] .g-body p,[data-theme="dawn"] .process p,[data-theme="dawn"] .steps p,[data-theme="dawn"] .ticks li,[data-theme="dawn"] .faq .a p,[data-theme="dawn"] .proj-facts dd{color:#423d5a}
/* service cards in the beam */
[data-theme="dawn"] .nx-svc a{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,247,242,.98));border-color:rgba(26,22,48,.1);box-shadow:0 24px 50px -28px rgba(60,40,30,.45)}
[data-theme="dawn"] .nx-svc a:hover{border-color:rgba(226,85,47,.5)}
[data-theme="dawn"] .nx-svc b{-webkit-text-stroke:1px rgba(26,22,48,.55)}
[data-theme="dawn"] .nx-svc small{color:#4b4663}
/* before / after comparison */
[data-theme="dawn"] .vs-k{color:#5f5a77}
[data-theme="dawn"] .vs-old li,[data-theme="dawn"] .vs-old li::before{color:#6b6683}
[data-theme="dawn"] .vs-old li::before{background:rgba(26,22,48,.06)}
[data-theme="dawn"] .vs-new li{color:var(--fg)}
[data-theme="dawn"] .vs-new li::before{color:#fff;background:linear-gradient(135deg,#ee7d2c,#d9437a)}
[data-theme="dawn"] .vs-new{box-shadow:0 40px 80px -40px rgba(217,67,122,.3)}
/* portfolio stages keep a soft tinted backdrop */
[data-theme="dawn"] .g-shot{background:radial-gradient(80% 90% at 50% 0%,rgba(243,154,61,.22),transparent 70%),radial-gradient(60% 70% at 100% 100%,rgba(19,162,192,.2),transparent 70%),#efe9e1}
[data-theme="dawn"] .g-frame{box-shadow:0 30px 60px -30px rgba(60,40,30,.5)}
[data-theme="dawn"] .g-shot .g-phone{box-shadow:0 0 0 1px rgba(26,22,48,.15),0 24px 40px -18px rgba(60,40,30,.6)}
[data-theme="dawn"] .foot-ripple img{filter:none}
/* Lake Dawn: last dark leftovers */
[data-theme="dawn"] .subnav{background:rgba(247,244,239,.96);box-shadow:0 12px 24px -20px rgba(26,22,48,.35)}
[data-theme="dawn"] .subnav a{color:#4a4566}
[data-theme="dawn"] .subnav a:hover{color:var(--fg)}
[data-theme="dawn"] .subnav a.is-active{color:#b23a0b;background:rgba(226,85,47,.08);border-color:rgba(226,85,47,.4)}
[data-theme="dawn"] .promises.hl li{background:#fff}
[data-theme="dawn"] .promises.hl li strong{color:var(--fg)}
[data-theme="dawn"] .promises.hl li span:not(.ic){color:#423d5a}
[data-theme="dawn"] .sc-stage::after{background:none}
/* Light/dark switch: sun on the dark theme, crescent moon on the light theme. Pure CSS transforms, so it's smooth and cheap. */
.theme-btn{flex:none;position:relative;display:inline-grid;place-items:center;width:42px;height:42px;margin-left:auto;border-radius:12px;border:1px solid rgba(255,190,110,.35);background:radial-gradient(circle at 50% 50%,rgba(255,183,77,.16),rgba(255,255,255,.03) 70%);color:#ffc261;cursor:pointer;padding:0;overflow:hidden;transition:background .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease}
.theme-btn:hover{box-shadow:0 0 0 4px rgba(255,183,77,.14),0 0 22px rgba(255,183,77,.35)}
.theme-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.theme-btn svg{width:22px;height:22px;overflow:visible;transform:rotate(90deg);transition:transform .6s cubic-bezier(.5,1.6,.4,1)}
.theme-btn .tb-core{fill:currentColor;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:transform .5s cubic-bezier(.5,1.6,.4,1)}
.theme-btn .tb-cut{transform-box:view-box;transform-origin:center;transform:translate(10px,-10px);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.theme-btn .tb-rays{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transform-box:view-box;transform-origin:12px 12px;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.theme-btn:hover .tb-rays{transform:rotate(45deg)}
[data-theme="dawn"] .theme-btn{color:#4a3bd6;border-color:rgba(74,59,214,.28);background:radial-gradient(circle at 50% 50%,rgba(91,75,255,.12),#fff 72%)}
[data-theme="dawn"] .theme-btn:hover{box-shadow:0 0 0 4px rgba(91,75,255,.1),0 0 22px rgba(91,75,255,.28)}
[data-theme="dawn"] .theme-btn svg{transform:rotate(0deg)}
[data-theme="dawn"] .theme-btn .tb-core{transform:scale(1)}
[data-theme="dawn"] .theme-btn .tb-cut{transform:translate(0,0)}
[data-theme="dawn"] .theme-btn .tb-rays{transform:rotate(-90deg) scale(.3);opacity:0}
@media (prefers-reduced-motion:reduce){.theme-btn svg,.theme-btn .tb-core,.theme-btn .tb-cut,.theme-btn .tb-rays{transition:none}}
.site-header .bar .theme-btn + .header-cta{margin-left:0}
@media (max-width:599px){.theme-btn{width:40px;height:40px}}
@media (max-width:429px){.site-header .bar{gap:8px}.theme-btn{width:38px;height:38px;border-radius:11px}.theme-btn svg{width:17px;height:17px}.header-cta{font-size:13px;padding:0 12px;min-height:40px}.menu-btn{width:40px;height:40px}}
@media (max-width:374px){.header-cta{font-size:12px;padding:0 10px}.brand .mark img{width:34px;height:auto}}
/* Lake Dawn polish: prices pop, light cards everywhere, readable controls */
[data-theme="dawn"] .price-card{background:#fff;border-color:rgba(226,85,47,.22);box-shadow:0 18px 40px -26px rgba(196,45,94,.35)}
[data-theme="dawn"] .price-val{font-size:32px;font-weight:700;color:#1a1630}
[data-theme="dawn"] .price-val .per{color:#5f5a77}
[data-theme="dawn"] .plan-price span{font-size:22px;font-weight:700;color:#1a1630}
[data-theme="dawn"] .plan-price span .per,[data-theme="dawn"] .pt-price .per{color:#5f5a77;font-weight:500}
[data-theme="dawn"] .pt-price span{font-weight:700;color:#1a1630}
[data-theme="dawn"] .switch{background:#e9e4dc;border-color:rgba(26,22,48,.18)}
[data-theme="dawn"] .switch::after{background:#fff;box-shadow:0 1px 3px rgba(26,22,48,.3)}
[data-theme="dawn"] .switch:checked{background:linear-gradient(120deg,#e2552f,#d9437a 60%,#5b4bff);border-color:transparent}
[data-theme="dawn"] .switch:focus-visible{outline-color:#4a3bd6}
[data-theme="dawn"] .faq summary::after{border-color:rgba(26,22,48,.2);background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23c2410c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-theme="dawn"] .faq details[open] summary{color:#c2410c}
[data-theme="dawn"] .owner{background:linear-gradient(135deg,#eafaf6,#f2fbff);border-color:rgba(17,150,182,.3);box-shadow:0 20px 40px -28px rgba(17,150,182,.6)}
[data-theme="dawn"] .owner-top{color:#0d6f87}
[data-theme="dawn"] .owner p{color:#1a1630}
[data-theme="dawn"] .facts{background:none;gap:10px;padding:0}
[data-theme="dawn"] .facts > *{background:#fff;border:1px solid rgba(26,22,48,.1);border-radius:12px}
[data-theme="dawn"] .facts dd{color:#1a1630;font-weight:600}
[data-theme="dawn"] .eyebrow{color:#5f5a77}
[data-theme="dawn"] .card,[data-theme="dawn"] .plan{box-shadow:0 18px 40px -30px rgba(26,22,48,.35)}
[data-theme="dawn"] .plan[aria-checked="true"]{border-color:#e2552f;box-shadow:0 0 0 1px #e2552f,0 22px 44px -28px rgba(226,85,47,.6)}
[data-theme="dawn"] ::selection{background:rgba(91,75,255,.18)}
/* Lake Dawn colors, round 2: sunrise terracotta for headlines and accents, deep lake teal for buttons. Both sit well on the cream. */
:root[data-theme="dawn"]{
  --lime:#c8471b; --lime-2:#a93a12; --acc-txt:#b23d13; --acc2-txt:#b23d13; --focus:#0f6f82;
  --grad:linear-gradient(100deg,#bf3f10 0%,#e0532a 48%,#d9691a 100%);
  --grad-ui:linear-gradient(100deg,#bf3f10 0%,#e0532a 48%,#d9691a 100%);
  --lake:#0f6f82; --lake-2:#0b5868;
}
[data-theme="dawn"] .nx-lime{background:linear-gradient(100deg,#bf3f10 0%,#e0532a 48%,#d9691a 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="dawn"] .btn-primary{color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.28) 0 14px,transparent 14px),linear-gradient(120deg,rgba(0,30,40,.2) 0 26px,transparent 26px),linear-gradient(115deg,#0b5868,#0f7489 60%,#12859b);box-shadow:0 0 0 1px rgba(11,88,104,.5),0 14px 30px -14px rgba(11,88,104,.7)}
[data-theme="dawn"] .btn-primary:hover{box-shadow:0 0 0 1px #0b5868,0 18px 38px -12px rgba(11,88,104,.75)}
[data-theme="dawn"] .btn-ghost{border-color:rgba(11,88,104,.45);color:#0b4f5e;background:rgba(255,255,255,.75)}
[data-theme="dawn"] .btn-ghost:hover{background:#fff;border-color:#0f6f82;color:#0f6f82}
[data-theme="dawn"] .nav a[aria-current],[data-theme="dawn"] .nav a.is-active{color:#bf3f10}
[data-theme="dawn"] .nav a:hover{color:#0f6f82}
[data-theme="dawn"] .theme-btn{color:#0f6f82;border-color:rgba(15,111,130,.3);background:radial-gradient(circle at 50% 50%,rgba(15,111,130,.12),#fff 72%)}
[data-theme="dawn"] .theme-btn:hover{box-shadow:0 0 0 4px rgba(15,111,130,.1),0 0 22px rgba(15,111,130,.28)}
[data-theme="dawn"] .switch:checked{background:linear-gradient(120deg,#0b5868,#12859b)}
[data-theme="dawn"] .spot::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(224,83,42,.65),rgba(15,111,130,.4) 35%,transparent 60%)}
[data-theme="dawn"] .spot::after{background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(15,111,130,.05),transparent 50%)}
[data-theme="dawn"] .section-alt{background:radial-gradient(70% 60% at 85% 0%,rgba(15,111,130,.07),transparent 70%),linear-gradient(180deg,#efeae2,var(--bg) 85%)}
[data-theme="dawn"] .cta-band{background:linear-gradient(195deg,rgba(243,154,61,0) 30%,rgba(243,154,61,.16) 100%),radial-gradient(60% 120% at 100% 0%,rgba(15,111,130,.14),transparent 60%),#fff;border-color:rgba(15,111,130,.22)}
[data-theme="dawn"] .vs-new li::before{background:linear-gradient(135deg,#e0532a,#bf3f10)}
[data-theme="dawn"] .hero-pill b{background:linear-gradient(115deg,#0b5868,#12859b)}
[data-theme="dawn"] .owner{border-color:rgba(15,111,130,.3)}
/* Bigger logo and name in the header */
.mark,.brand:hover .mark{width:50px;height:45px}
.mark img{width:50px;height:45px}
.brand{gap:12px}
@media (min-width:520px){.brand-name{font-size:21px;letter-spacing:-.025em}}
@media (max-width:429px){.mark,.brand:hover .mark,.mark img{width:42px;height:38px}}
@media (max-width:374px){.mark,.brand:hover .mark,.brand .mark img{width:36px;height:32px}}
/* Lake Dawn: price totals in solid ink so they're always readable */

/* accessibility: skip link, marquee pause */
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 16px;border-radius:3px;background:var(--fg-strong,#fff);color:var(--bg,#100d1b);font-size:14px;font-weight:600;text-decoration:none;transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:none}
main:focus{outline:none}
.mq-wrap{position:relative}
.mq-pause{position:absolute;right:clamp(16px,3vw,32px);bottom:22px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;background:rgba(var(--bg-rgb),.85);color:var(--fg-2);cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.mq-pause:hover,.mq-pause:focus-visible{opacity:1;border-color:rgba(var(--a1-rgb),.6)}
.mq-pause svg{width:12px;height:12px;fill:currentColor}
.mq-pause .i-play,.mq-wrap.is-paused .mq-pause .i-pause{display:none}
.mq-wrap.is-paused .mq-pause .i-play{display:block}
.mq-wrap.is-paused .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq-pause{display:none}}

/* launch polish: About page fills its row, single review demo, six-link menu */
#me{padding-top:clamp(8px,2vw,24px)}
@media (min-width:960px){
  #me .about-copy{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:clamp(40px,6vw,88px)}
  #me .about-copy > *{grid-column:1}
  #me .about-copy > .facts{grid-column:2;grid-row:1 / span 7;align-self:center;grid-template-columns:1fr;margin:0}
}
@media (min-width:600px) and (max-width:959px){#me .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.demo-grid.demo-solo{grid-template-columns:1fr}
@media (min-width:900px) and (max-width:1179px){.nav.is-open ul{grid-template-columns:repeat(6,minmax(0,1fr))}}
.is-scrolling .nx-cross,.is-scrolling .capsule,.is-scrolling .ring,.is-scrolling .nx-svc a,.is-scrolling .marquee-track,.is-scrolling .foot-ripple .rp i{animation-play-state:paused}
@media (min-width:1180px) and (max-width:1399px){.nav a,.nav.is-open a{padding:6px 5px}.nav,.nav.is-open{margin-right:12px}}
@media (max-width:999px){.header-cta .hc-long{display:none}}
@media (max-width:420px){#cf-submit{white-space:normal;max-width:100%;text-align:center;line-height:1.25;padding-block:12px}}

/* pricing: website, monthly and add-on cards */
.plan-group + .plan-group{margin-top:clamp(36px,5vw,56px)}
.plan-group-head{display:grid;gap:6px;margin-bottom:16px}
.plan-group-head p{margin:0;color:var(--fg-2)}
.plan-static{cursor:default;user-select:auto;-webkit-user-select:auto}
.plan-static .btn{justify-self:start}
@media (min-width:900px){.plan-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.plan-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plan-terms{margin:-2px 0 0;font-size:12.5px;color:var(--fg-2)}
.plan-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.plan-terms a:hover{color:var(--fg)}
.plan-yearly{margin:16px 0 0;text-align:center;color:var(--fg)}
.addons .addon-price{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.addons .addon-price .per{color:var(--fg-2);font-weight:500}
.plan.plan-featured{border-color:var(--lime);background:radial-gradient(100% 70% at 50% 0%,rgba(255,138,106,.08),transparent 70%),var(--surface);box-shadow:0 0 0 1px rgba(255,138,106,.4),0 30px 60px -30px rgba(255,138,106,.25)}
[data-theme="dawn"] .plan.plan-featured{border-color:#e2552f;background:radial-gradient(100% 70% at 50% 0%,rgba(226,85,47,.06),transparent 70%),#fff;box-shadow:0 0 0 1px #e2552f,0 22px 44px -28px rgba(226,85,47,.6)}
.plan-featured .eyebrow{color:var(--acc-txt,inherit)}
[data-theme="dawn"] .addons .addon-price{color:#1a1630}
.price-val{flex-wrap:wrap;row-gap:2px}.price-val .setup{font-size:15px}
.plan-price .setup,.pt-price .setup{display:block;font-size:14px!important;font-weight:500!important;letter-spacing:0;margin-top:2px}

/* About facts: open list on a gradient rule instead of grey boxes */
#me .facts{position:relative;background:none;border:0;border-radius:0;overflow:visible;gap:0;padding:0}
#me .facts > *,#me .facts > *:hover{background:none;border:0;border-radius:0;box-shadow:none}
#me .facts > *{position:relative;gap:6px;padding:16px 0 16px 22px}
#me .facts > *::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--grad-ui,var(--grad));opacity:.9}
#me .facts dt{color:var(--fg-3);letter-spacing:.08em}
#me .facts dd{font-size:clamp(16px,15px + .3vw,18.5px);font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--fg-strong,var(--fg))}
@media (min-width:960px){
  #me .facts{padding-left:26px}
  #me .facts::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--grad-ui,var(--grad))}
  #me .facts > *{padding:20px 0}
  #me .facts > *::before{display:none}
  #me .facts > * + *{border-top:1px solid var(--hair)}
  #me .facts > *:first-child{padding-top:6px}
  #me .facts > *:last-child{padding-bottom:6px}
}
@media (min-width:600px) and (max-width:959px){#me .facts{column-gap:28px}}
/* Back to top: a bare floating chevron in the right-hand margin. site.js hides it whenever it would sit on top of text, links, buttons or images. */
.to-top{position:fixed;right:max(4px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:900;display:grid;place-items:center;width:40px;height:44px;padding:0;border:0;border-radius:8px;background:none;color:var(--fg);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(var(--sh-rgb,0,0,0),.45));opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease,visibility .25s,color .15s}
.to-top.is-shown{opacity:.85;visibility:visible;transform:none}
.to-top:hover{opacity:1;color:var(--focus)}
.to-top:focus-visible{opacity:1;outline:3px solid var(--focus);outline-offset:0}
.to-top svg{width:28px;height:28px}
.wcb-open .to-top{display:none}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
@media print{.to-top{display:none}}

/* Portfolio: "not real companies" notice under the intro */
.demo-disclaimer{max-width:760px;margin:18px 0 0;padding:12px 16px;border-left:3px solid var(--focus);border-radius:4px;background:var(--surface);color:var(--fg-2,inherit);font-size:14.5px;line-height:1.55}
.demo-disclaimer strong{color:var(--fg)}
.sc-stage img,.g-shot img,.nx-stage img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}