/* design tokens: change a color or font here and it updates everywhere */
:root{
  /* colors taken from the brand banner (images/banner-thin.png) */
  --ink:#0b1b2e;          /* deep navy: main text + dark sections (darkened for sharper contrast) */
  --ink-soft:#34485c;     /* secondary text */
  --brand:#0a6cd6;        /* vivid blue: buttons, links */
  --brand-dark:#0853a8;   /* button hover */
  --accent:#ff8a00;       /* banner orange highlight, used sparingly */
  --bg:#ffffff;
  --bg-tint:#f4f9fd;      /* bright, clean tint for alternating sections */
  --line:#c6d8e4;
  --horizon:linear-gradient(90deg,#0a7be6,#00a896);                 /* "Brighter Horizons" headline */
  --stripe:linear-gradient(90deg,#00b3a1,#0a90d6 50%,#ff8a00);       /* bottom stripe */
  --sky:linear-gradient(100deg,#fff6ea 0%,#f1f7fc 50%,#dff3f2 100%); /* banner background */
  --font-head:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;  /* one typeface everywhere, matching cdocclinicalresearchassociates.com */
  --radius:10px;
  --max-width:1040px;

  /* aliases used throughout the page, mapped onto the tokens above */
  --soft:var(--bg-tint); --soft2:#e8f2fa; --line2:#a8c2d2;
  --text:var(--ink); --muted:var(--ink-soft); --dim:#4f6072;
  --blue:var(--brand); --blue-d:var(--brand-dark); --teal:#0d7a6f; --green:#2e8a3b; --sun:var(--accent); --ember:#d9542a;
  --display:var(--font-head); --body:var(--font-body); --mono:var(--font-head);
  --shadow:0 1px 2px rgba(11,27,46,.08),0 8px 24px rgba(11,27,46,.10);
  --shadow-lg:0 2px 4px rgba(11,27,46,.08),0 18px 40px rgba(11,27,46,.14);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* page size follows the device. Phones (screens under 768px wide, also a phone held sideways: touch screen under
   500px tall) run at 50%; tablets, laptops and desktops at 100%; large monitors and TVs scale up so text isn't tiny
   (media queries see the real screen width, so the steps don't feed back) */
html{zoom:1}
@media (max-width:767px){html{zoom:.5}}
@media (pointer:coarse) and (max-height:499px) and (max-width:999px){html{zoom:.5}}
@media (min-width:1900px){html{zoom:1.12}}
@media (min-width:2300px){html{zoom:1.3}}
@media (min-width:3000px){html{zoom:1.6}}
body{background:var(--bg);color:var(--text);font:1rem/1.7 var(--body);margin:0;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--max-width);margin:0 auto;padding-inline:28px}
@media (max-width:520px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance;color:var(--ink);letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.tag{font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--sun)}
.scan{display:none}
.notice{background:var(--ink);color:#fff;font:600 12.5px/1.4 var(--body);text-align:center;padding:8px 16px;letter-spacing:.04em}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:68px;padding-block:10px}
nav .links{grid-column:2}
nav .nav-r{grid-column:3;justify-self:end}
.nav-login{grid-column:1;justify-self:start;position:relative}
.nav-login summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;border:2px solid var(--line);border-radius:var(--radius);padding:9px 16px;color:var(--ink);background:#fff;font:600 .95rem var(--display);white-space:nowrap}
.nav-login summary::-webkit-details-marker{display:none}
.nav-login summary:hover,.nav-login[open] summary{border-color:var(--blue);color:var(--blue)}
.nav-login summary span{transition:transform .15s}
.nav-login[open] summary span{transform:rotate(180deg)}
.login-options{position:absolute;top:calc(100% + 12px);left:0;width:280px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.login-options a{display:grid;gap:4px;padding:14px;text-decoration:none;border-radius:8px;color:var(--ink);font:600 15px/1.4 var(--display)}
.login-options a:hover,.login-options a:focus-visible{background:var(--bg);color:var(--blue)}
.login-options a+a{border-top:1px solid var(--line)}
.login-options a span{font:400 13px/1.5 var(--body);color:var(--muted)}
header.small nav{padding-block:6px}
/* logo row above the sticky menu, 3x the old 46px header logo */
.brand-row{display:flex;justify-content:center;padding:18px 20px 12px;background:#fff}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:138px;width:auto;max-width:100%;object-fit:contain;display:block}
@media (max-width:440px){.brand img{height:102px}}
.links{display:flex;gap:24px;font:600 15px var(--display)}
.links a{text-decoration:none;color:var(--ink);position:relative;padding-block:6px}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);transition:right .25s}
.links a:hover{color:var(--blue)} .links a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 1rem var(--display);text-decoration:none;border-radius:var(--radius);padding:14px 26px;border:2px solid transparent;cursor:pointer;transition:transform .15s, box-shadow .2s, background .2s}
.btn-sun{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-sun:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn .arr{transition:transform .2s} .btn:hover .arr{transform:translateX(3px)}
.nav-cta{padding:9px 18px;font-size:.95rem}
.nav-r{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:46px;height:46px;border-radius:var(--radius);border:2px solid var(--ink);background:#fff;cursor:pointer;place-items:center;padding:0}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);position:relative;transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
/* collapsed menu on narrow screens and on every touch device (phones, tablets in any orientation) */
@media (max-width:1200px),(hover:none) and (pointer:coarse){
  nav{grid-template-columns:auto 1fr}
  .links{display:none}
  nav .nav-r{grid-column:2;justify-self:end}
  .menu-btn{display:grid}
  .mnav{display:grid;gap:2px;padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;border-top:1px solid transparent}
  .mnav.open{max-height:520px;padding:10px 20px 18px;border-top-color:var(--line)}
  .mnav a{font:600 17px var(--display);text-decoration:none;color:var(--ink);padding:12px 6px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
  .mnav a::after{content:"→";color:var(--dim)}
  .mnav a.on{color:var(--blue)} .mnav a.on::after{color:var(--blue)}
}
@media (max-width:440px){.nav-cta .long{display:none}}

/* banner */
.banner-sec{padding-block:0}
.banner-wrap{max-width:1920px;margin:0 auto}
.banner{margin:0;overflow:hidden}
.banner img{display:block;width:100%;height:auto}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);border-bottom:1px solid var(--line)}
#mesh{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}
.grid-floor{position:absolute;left:-20%;right:-20%;bottom:-2px;height:44%;pointer-events:none;
  background-image:linear-gradient(rgba(10,108,214,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(10,108,214,.22) 1px,transparent 1px);background-size:60px 60px;
  transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
  mask-image:linear-gradient(to top,#000 5%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 85%);animation:floor 6s linear infinite}
@keyframes floor{to{background-position:0 60px,0 0}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-block:40px 48px}
/* AI core around the centered logo */
.core{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:7% 8%}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.r1{width:118%;aspect-ratio:1;border:1.5px dashed rgba(10,108,214,.28);animation:spinc 50s linear infinite}
.r2{width:104%;aspect-ratio:1;border:2.5px solid transparent;border-top-color:var(--blue);border-right-color:rgba(10,108,214,.25);filter:drop-shadow(0 0 6px rgba(10,108,214,.6));animation:spinc 10s linear infinite}
.r3{width:90%;aspect-ratio:1;border:2.5px solid transparent;border-bottom-color:var(--sun);border-left-color:rgba(255,138,0,.25);filter:drop-shadow(0 0 6px rgba(255,138,0,.6));animation:spinc 15s linear infinite reverse}
.orbit{position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;transform:translate(-50%,-50%);animation:spinc 10s linear infinite;pointer-events:none}
.orbit i{position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px 3px rgba(10,108,214,.6)}
.orbit.o2{width:90%;animation:spinc 15s linear infinite reverse}
.orbit.o2 i{top:auto;bottom:-6px;background:var(--sun);box-shadow:0 0 14px 3px rgba(255,138,0,.6)}
@keyframes spinc{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sunglow{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,138,0,.28),rgba(10,108,214,.10) 50%,transparent 70%);filter:blur(8px);animation:pulse 4s ease-in-out infinite;pointer-events:none}
@keyframes pulse{50%{opacity:.6}}
.core-logo{position:relative;width:78%;z-index:1;animation:float 6s ease-in-out infinite}
.core-logo img{width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(16,42,67,.12))}
@keyframes float{50%{transform:translateY(-8px)}}
.h-tl{top:0;left:0}.h-br{bottom:0;right:0}
@media (max-width:520px){.core{padding:14% 2%}}
.hero h1,.hero .h1{font-size:clamp(2.3rem,4.4vw,3.4rem);font-weight:800;line-height:1.1}
.hero .brandname{display:block;font:600 14px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.hl{color:var(--blue);background:var(--horizon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{color:var(--muted);max-width:52ch;margin:16px 0 28px;font-size:1.125rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font:14px var(--body);color:var(--dim);margin-top:14px}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr;padding-block:52px 64px;gap:36px}}


section{padding-block:96px;position:relative}
.alt{background:var(--soft);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:14px;max-width:720px;margin-bottom:48px}
.sec-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700}
.sec-head h2 em{font-style:normal;color:var(--blue)}
.sec-head h2 em.sun{color:var(--blue)}
.sec-head p{color:var(--muted);margin:0;max-width:62ch}


/* problem / solution */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ps-col{border-radius:16px;padding:32px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.ps-col h3{font-size:21px;margin-bottom:20px}
.ps-col ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ps-col li{display:grid;grid-template-columns:28px 1fr;gap:12px;color:var(--muted)}
.ps-col li b{color:var(--ink);display:block;font-weight:700}
.ps-col .mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--display)}
.prob{border-top:4px solid var(--ember)}
.prob .mk{background:#fdebe5;color:var(--ember)}
.sol{border-top:4px solid var(--green)}
.sol .mk{background:#e5f4e8;color:var(--green)}
@media (max-width:820px){.ps{grid-template-columns:1fr}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border-radius:var(--radius);background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-in{height:100%;padding:30px 28px;display:grid;gap:12px;align-content:start}
.card-top{display:flex;justify-content:space-between;align-items:center}
.ic{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:var(--soft2)}
.ic svg{stroke:var(--blue)}
.card h3{font-size:21px;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:16px}
.card ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15.5px;color:var(--text)}
.card li{display:flex;gap:10px}
.card li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sun);margin-top:.65em}
.k{font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:600 13px var(--body);color:var(--blue-d);background:var(--soft2);border-radius:999px;padding:5px 12px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* packages */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;gap:18px;border-radius:16px;padding:32px 28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.tier.feat{border:2px solid var(--blue);box-shadow:var(--shadow-lg)}
.flag{position:absolute;top:-14px;left:28px;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:#fff;padding:6px 12px;border-radius:999px}
.tier .lvl{font:600 12.5px var(--display);letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.tier h3{font-size:24px}
.tier .best{color:var(--muted);font-size:16px;margin:0;min-height:3.2em}
.tier .best b{display:block;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.tier ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;flex:1}
.tier li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:16px}
.tier li svg{margin-top:5px}
.tier li svg path{stroke:var(--green)}
.tier .price{font:14px var(--body);color:var(--dim)}
.tier .price b{display:block;font:700 20px var(--display);color:var(--ink)}
.tier .tq{display:inline-block;font:600 14px var(--display);color:var(--blue);text-decoration:none;border-bottom:2px solid transparent}
.tier .tq:hover{border-bottom-color:var(--blue)}
@media (max-width:980px){.tiers{grid-template-columns:1fr;max-width:560px}}

/* portfolio */
.soon{font:700 12.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}

/* contact */
.contact-sec{background:var(--soft);border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.cinfo{display:grid;gap:12px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.crow small{display:block;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.crow div{min-width:0}
.crow strong{font:700 17px var(--body);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.copy{flex:none;font:600 13px var(--display);color:var(--blue);background:#fff;border:1.5px solid var(--blue);border-radius:8px;padding:7px 14px;cursor:pointer}
.copy:hover{background:var(--soft2)}
.expect{margin-top:10px;padding:22px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.expect h3{font-size:17px;margin-bottom:10px}
.expect ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:16px}
.expect li::before{content:"✓  ";color:var(--green);font-weight:700}
form{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.fbody{display:grid;gap:16px;padding:26px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
label,.lbl{display:grid;gap:7px;font:600 14px var(--display);color:var(--ink)}
input,select,textarea{font:16px var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--line2);border-radius:8px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,108,214,.15)}
textarea{min-height:96px;resize:vertical}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slots input{position:absolute;opacity:0;width:1px;height:1px}
.slots label{display:inline-flex;cursor:pointer;font:600 14px var(--body);color:var(--text);border:1.5px solid var(--line2);border-radius:999px;padding:8px 14px;background:#fff}
.slots input:checked + label{background:var(--brand);border-color:var(--blue);color:#fff}
.slots input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}
.formnote{font:600 14px var(--body);color:var(--ember);min-height:1.2em;margin:0}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

footer{background:var(--ink);color:#e1e8ef;font:14px var(--body)}
footer .glow{height:4px;background:var(--stripe)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* pages */
.links a.on{color:var(--blue)} .links a.on::after{right:0}
.home-svc{padding-block:64px}
/* CTA strip: rounded teal gradient card */
.cta-strip{padding:56px 28px;background:transparent;color:#fff}
.cta-strip .cta-in{max-width:calc(var(--max-width) - 56px);margin-inline:auto;padding:22px 26px;border-radius:18px;
  background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.18),transparent 50%),linear-gradient(135deg,var(--brand) 0%,var(--teal) 100%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px -10px rgba(20,40,63,.5);position:relative;overflow:hidden}
.cta-strip .cta-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--stripe)}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta-in h2{color:#fff;font-size:clamp(22px,2.6vw,32px)}
.cta-in p{margin:6px 0 0;color:#dcecef}
.cta-strip .btn-sun{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px);transition:background .2s ease,transform .2s ease}
.cta-strip .btn-sun:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
@media (max-width:520px){.cta-strip{padding-inline:16px}}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font:600 14px var(--display);text-decoration:none}
.skip:focus{top:12px}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font:600 15px var(--display);color:var(--blue);text-decoration:none}
.more:hover .arr{transform:translateX(3px)} .more .arr{transition:transform .2s}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js .reveal.in{opacity:1;transform:none}

/* add-ons */
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.addon{padding:22px;border-radius:14px;border:1px solid var(--line);background:#fff}
.addon b{display:block;font:600 17px var(--display);color:var(--ink);margin-bottom:6px}
.addon span{color:var(--muted);font-size:15px}
.addons-h{margin-top:64px;font-size:22px}
@media (max-width:900px){.addons{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.addons{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;transition:box-shadow .2s,border-color .2s}
.faq details[open]{box-shadow:var(--shadow);border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font:600 17px var(--display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{margin:0;padding:0 24px 22px;color:var(--muted)}


/* form states */
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--ember);box-shadow:0 0 0 3px rgba(232,86,42,.12)}
.ferr{font:600 13px var(--body);color:var(--ember);min-height:0}
.ferr:empty{display:none}
.formnote.ok{color:var(--green)}
.fsuccess{display:none;padding:48px 30px;text-align:center}
.fsuccess .tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#e5f4e8}
.fsuccess h3{font-size:24px;margin-bottom:8px}
.fsuccess p{margin:0 auto 22px;color:var(--muted);max-width:42ch}
form.sent .fbody{display:none} form.sent .fsuccess{display:block}
.btn[disabled]{opacity:.7;cursor:progress}

/* custom sign intake */
.sign-grid{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
.sign-side{display:grid;gap:16px;position:sticky;top:96px}
.sign-side .expect{margin-top:0}
.pdfcard{display:grid;gap:12px;justify-items:start;padding:24px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.pdfcard h3{font-size:19px}
.pdfcard p{margin:0;color:var(--muted);font-size:15.5px}
.pdfcard small{font:500 12.5px var(--body);color:var(--dim)}
.pdfic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(255,138,0,.12);color:var(--sun)}
.fs{border:0;margin:0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:16px;min-width:0}
.fs:first-of-type{border-top:0;padding-top:0}
.fs legend{float:left;width:100%;display:flex;align-items:center;gap:12px;font:700 18px var(--display);color:var(--ink);margin-bottom:2px}
.fs legend b{font:700 12px var(--mono);color:#fff;background:var(--blue);border-radius:6px;padding:4px 7px}
.fs legend + *{clear:both}
.lbl small,.opts small{font-weight:500;color:var(--dim)}
.opts label{font-size:14px}
.opts input:checked + label small{color:rgba(255,255,255,.8)}
.row3{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px}
.half{max-width:calc(50% - 7px)}
@media (max-width:980px){.sign-grid{grid-template-columns:1fr}.sign-side{position:static;grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sign-side{grid-template-columns:1fr}.row3{grid-template-columns:1fr}.half{max-width:none}}
/* website packages */
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.wp{position:relative;display:flex;flex-direction:column;gap:16px;border-radius:16px;padding:30px 26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.wp.feat{border:2px solid var(--blue);box-shadow:var(--shadow-lg)}
.wp .flag{top:-14px;left:26px;font-size:11px;padding:5px 10px}
.wp h3{font-size:21px}
.wp ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}
.wp li{display:grid;grid-template-columns:18px 1fr;gap:9px}
.wp li::before{content:"✓";font:700 14px var(--display);color:var(--green)}
.wp .btn{margin-top:auto}
@media (max-width:980px){.wp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wp-grid{grid-template-columns:1fr}}
/* web & search services */
.cards.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.cards.four{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards.four{grid-template-columns:1fr}}
.svc-list{margin-top:28px}
/* quote request + cross-links */
.quote-sec{border-top:1px solid var(--line)}
#qform{max-width:920px}
.crow a{text-decoration:none}
.crow a:hover{color:var(--blue)}

/* AI section (from v2) */
/* AI section: same sky gradient, grid lines and stripe as the brand banner */
.ai-sec{background:linear-gradient(rgba(20,40,63,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(20,40,63,.04) 1px,transparent 1px) 0 0/48px 48px,var(--sky);border-block:1px solid var(--line);overflow:hidden}
.ai-sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--stripe)}
.ai-sec .sec-head h2 em{background:var(--horizon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ai-motto{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:600 13px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ai-motto i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ai-card{position:relative;padding:26px 24px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border:1.5px solid rgba(47,127,154,.35);box-shadow:0 10px 30px -14px rgba(20,40,63,.35);transition:transform .2s ease,box-shadow .2s ease}
.ai-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(20,40,63,.4)}
.ai-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--horizon);color:#fff;font:700 15px var(--display);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(255,138,0,.55);margin-bottom:16px}
.ai-card h3{font-size:19px;margin-bottom:8px}
.ai-card p{margin:0;color:var(--muted);font-size:16px}
.ask{margin-top:36px;padding:28px;border-radius:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1.5px solid rgba(47,127,154,.35);box-shadow:0 10px 30px -14px rgba(20,40,63,.35);display:grid;gap:16px;max-width:820px}
.ask-head h3{font-size:22px;margin-bottom:6px}
.ask-head p{margin:0;color:var(--muted)}
.ask-log{display:grid;gap:12px;max-height:420px;overflow-y:auto;padding:4px 2px}
.ask-msg{max-width:88%;padding:12px 16px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.55}
.ask-msg.user{justify-self:end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.ask-msg.assistant{justify-self:start;background:var(--soft2);color:var(--ink);border-bottom-left-radius:4px}
.ask-msg code{font:.92em ui-monospace,monospace;background:rgba(11,27,46,.08);padding:1px 5px;border-radius:4px}
.ask-msg.pending{color:var(--dim);font-style:italic}
.ask-form{display:flex;gap:12px;align-items:flex-end}
.ask-form textarea{min-height:52px;flex:1}
@media (max-width:560px){.ask{padding:20px}.ask-form{flex-direction:column;align-items:stretch}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr}}

/* founder */
.founder-sec{background:var(--soft);border-block:1px solid var(--line)}
.founder{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center}
.fphoto{width:240px;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--sun),var(--shadow-lg);max-width:100%}
.fphoto img{width:100%;height:100%;object-fit:cover;display:block}
.founder h2{font-size:clamp(28px,3.4vw,40px);margin-top:12px}
.ftitle{color:var(--teal);font:600 16px var(--display);margin:8px 0 16px}
.fstory{color:var(--muted);max-width:62ch;margin:0 0 14px}
.ftag{font:700 15px var(--display);color:var(--teal);margin:12px 0 8px}
.fpoints{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;max-width:62ch}
.fpoints li{display:grid;grid-template-columns:26px 1fr;align-items:start;color:var(--ink);font-weight:500}
.fpoints a{color:var(--blue);font-weight:600}
.fcore{color:var(--muted);font-size:15px;max-width:62ch;margin:0 0 18px}
.fcore b{color:var(--ink)}
.fcta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.alogo{width:240px;max-width:100%;background:#fff;border-radius:16px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.alogo img{display:block;width:100%;height:auto}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.fchips span{font:600 13px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:6px 13px}
@media (max-width:720px){.founder{grid-template-columns:1fr;justify-items:start;gap:28px}.fphoto{width:170px}.alogo{width:220px}}

/* social */
.social{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}
.social:empty{display:none}
.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft2);color:var(--blue);transition:background .2s,color .2s,transform .2s}
.social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
footer .social{margin-top:18px}
footer .social a{background:rgba(255,255,255,.1);color:#fff}
footer .social a:hover{background:var(--blue)}
.crow.soc{justify-content:flex-start;gap:18px}

/* legal + fine print */
.legal{max-width:760px}
.legal h2{font-size:clamp(28px,3.6vw,40px);margin:12px 0 4px}
.legal h3{font-size:19px;margin:28px 0 8px}
.legal p,.legal li{color:var(--muted)}
.legal .upd{color:var(--dim);font-size:14px}
.fine{font-size:13.5px;color:var(--dim);margin:0}
.fine a{color:var(--blue)}

/* tech page: four practices in a 2x2 grid */
.cards.four{grid-template-columns:repeat(2,1fr)}
.card.hc{border-top-color:var(--accent)}
@media (max-width:900px){.cards.four{grid-template-columns:1fr}}

/* work / case studies */
.work{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wcard{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.wlink{display:block}
.wthumb{aspect-ratio:1100/420;display:grid;place-items:center;overflow:hidden}
.wthumb img{display:block;transition:transform .5s}
.wcard:hover .wthumb img{transform:scale(1.04)}
.wthumb.dark{background:#2a2f36}.wthumb.dark img{width:100%;height:100%;object-fit:cover}
.wthumb.light{background:radial-gradient(circle at 50% 40%,#fff 0%,var(--bg-tint) 70%);border-bottom:1px solid var(--line)}.wthumb.light img{width:auto;height:72%}
.wbody{padding:24px 26px 26px;display:grid;gap:10px;align-content:start;flex:1}
.wkind{display:flex;align-items:center;gap:8px;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.wkind i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(46,138,59,.15)}
.wbody h3{font-size:22px}
.wbody p{margin:0;color:var(--muted);font-size:16px}
.wbody h4{margin:6px 0 0;font:600 12.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wbody ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:15.5px}
.wbody li{display:flex;gap:10px}
.wbody li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sun);margin-top:.65em}
.wvisit{margin-top:6px;justify-self:start;font:600 15px var(--display);color:var(--blue);text-decoration:none;border-bottom:2px solid transparent}
.wvisit:hover{border-bottom-color:var(--blue)}
@media (max-width:860px){.work{grid-template-columns:1fr}}

/* compact rhythm: less scrolling */
section{padding-block:52px}
.sec-head{margin-bottom:26px;gap:10px}
.home-svc,.home-work{padding-block:44px}
.cta-strip{padding-block:28px}
.hero-grid{padding-block:28px 32px}
.card-in{padding:22px 22px;gap:10px}
.ps-col,.tier{padding:24px 22px}
.tier{gap:14px}
.tier .best{min-height:0}
.ps-col h3{margin-bottom:14px}
.ps-col ul{gap:12px}
.addons-h{margin-top:36px}
.addons{margin-top:18px}
.fbody{padding:22px;gap:14px}
.foot{padding-block:40px 28px!important}
.banner-sec{background:var(--sky)}
.banner-wrap{max-width:1920px}
@media (max-width:700px){section{padding-block:44px}.home-svc,.home-work{padding-block:44px}.sec-head{margin-bottom:22px}.hero-grid{padding-block:30px 34px}}

/* footer */
.foot{display:grid!important;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px!important;padding-block:56px 36px!important}
.foot img{height:52px;width:auto;background:#fff;border-radius:10px;padding:6px 10px;display:block;margin-bottom:16px}
.foot p{margin:0;max-width:38ch;line-height:1.6}
.foot h4{font:600 12.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:#e1e8ef;text-decoration:none} .foot a:hover{color:var(--accent)}
.foot-base{border-top:1px solid rgba(255,255,255,.1)}
.foot-base .wrap{padding-block:20px!important;font-size:13px;color:#b4c2cf}
.foot-links{display:inline-flex;flex-wrap:wrap;gap:18px}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}
/* ---------- multi-page layout ---------- */
/* anchored sections clear the sticky header */
section[id]{scroll-margin-top:76px}
/* the banner's text is unreadable at phone width, so the header logo carries the brand there */
@media (max-width:700px){.banner-sec{display:none}}

/* sub-page intro */
.page-intro{background:var(--sky);padding-block:44px 36px}
.page-intro h1{font-size:clamp(30px,4.4vw,46px);margin:12px 0 10px}
.page-intro h1 em,.sec-head h1 em{font-style:normal;background:var(--horizon);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-intro p{color:var(--muted);max-width:62ch;margin:0}
.page-intro .jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.page-intro .jump a{font:600 14px var(--display);color:var(--blue);text-decoration:none;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:#fff}
.page-intro .jump a:hover{border-color:var(--blue)}
.sec-head h1{font-size:clamp(30px,4.4vw,46px)}
.legal h1{margin-top:10px}

/* website packages: quote-only */
.wp .best{margin:-6px 0 0;color:var(--muted);font-size:15.5px}
.wp .best b{display:block;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.wp .price{font:14px var(--body);color:var(--dim);padding-top:14px;border-top:1px solid var(--line)}
.wp .price b{display:block;font:700 20px var(--display);color:var(--ink)}

/* pricing FAQ sits under the tiers */
.faq-h{font-size:22px;margin:40px 0 16px}

/* proof: Reels and testimonials, filled from SITE.proof */
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.reel{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.reel b{font:600 16px var(--display)}
.reel span{color:var(--blue);font:600 14px var(--display)}
.tsts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:18px}
.tst{margin:0;padding:24px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.tst blockquote{margin:0 0 14px;color:var(--ink);font-size:16px}
.tst figcaption{font:600 14px var(--display);color:var(--muted)}

/* one-line pointer to the other offerings, under the core services */
.also{margin:22px 0 0;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:15.5px;max-width:none}
.also a{color:var(--blue);font-weight:600}

/* shorter home scroll */
section{padding-block:44px}
.sec-head{margin-bottom:22px}
.faq-h{margin-top:28px}
.faq summary{padding:15px 20px}
.wbody{padding:20px 22px 22px}
/* on phones and tablets the funnel graphic would stack under the hero text, so it is left out there */
@media (max-width:900px){.hero .core{display:none}.hero-grid{padding-block:28px 32px}}
@media (max-width:700px){section,.home-svc{padding-block:44px}.sec-head{margin-bottom:22px}}

/* radio: members-only player + account panel */
.radio{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
@media (max-width:860px){.radio{grid-template-columns:1fr}}
.onair{position:relative;overflow:hidden;border-radius:18px;padding:28px;color:#fff;display:grid;gap:16px;
  background:radial-gradient(120% 90% at 85% 0%,rgba(255,138,0,.28),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(0,168,150,.30),transparent 60%),var(--ink);box-shadow:var(--shadow-lg)}
.onair::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--stripe)}
.onair h2{color:#fff;font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.01em}
.onair-top{display:flex;justify-content:space-between;align-items:center;font:600 12.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.onair .freq{color:#9fb3c6}
.live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.live i{width:9px;height:9px;border-radius:50%;background:#7d8b99}
.onair[data-state="playing"] .live i{background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:pulse 1.6s infinite}
.onair[data-state="ready"] .live i,.onair[data-state="loading"] .live i{background:var(--accent)}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.onair-msg{margin:0;color:#c9d6e2;min-height:1.7em}
.bars{display:flex;align-items:flex-end;gap:5px;height:64px}
.bars span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#ff8a00,#00b3a1);opacity:.35;height:18%;transform-origin:bottom}
.onair[data-state="playing"] .bars span{opacity:1;animation:eq 1s ease-in-out infinite alternate}
.bars span:nth-child(3n){animation-duration:.7s}.bars span:nth-child(4n+1){animation-duration:1.3s}.bars span:nth-child(5n+2){animation-duration:.9s}
.bars span:nth-child(odd){height:30%}.bars span:nth-child(4n){height:45%}
@keyframes eq{from{transform:scaleY(.4)}to{transform:scaleY(2.1)}}
@media (prefers-reduced-motion:reduce){.onair .bars span,.onair .live i{animation:none!important}}
.controls{display:flex;align-items:center;gap:18px}
.play{flex:none;width:68px;height:68px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--accent);color:var(--ink);transition:transform .15s,background .2s}
.play:hover:not([disabled]){transform:scale(1.06)}
.play[disabled]{cursor:not-allowed;background:rgba(255,255,255,.14);color:#c9d6e2}
.play svg{display:none}
.onair[data-state="locked"] .i-lock,.onair[data-state="offair"] .i-lock,.onair[data-state="ready"] .i-play,.onair[data-state="loading"] .i-play,.onair[data-state="playing"] .i-pause{display:block}
.vol{flex:1;display:block}
.vol input{padding:0;border:0;background:transparent;accent-color:var(--accent);box-shadow:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rpanel{border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:22px;display:grid;gap:12px}
.rpanel form{border:0;box-shadow:none;border-radius:0}
.rpanel .fbody{padding:0}
.rpanel h3{font-size:21px;font-weight:700;margin-bottom:6px}
.rpanel [data-view="account"]{display:grid;gap:12px}
.rpanel [data-view="account"][hidden]{display:none}
.rmuted{margin:0;color:var(--muted)}
.rprice{margin:0 0 8px;font:800 30px/1.1 var(--display);color:var(--ink)}
.rlist{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px;color:var(--text)}
.rlist li::before{content:"✓  ";color:var(--green);font-weight:700}
.rtabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:10px;background:var(--soft2);margin-bottom:16px}
.rtabs button{border:0;border-radius:8px;padding:10px;font:600 15px var(--display);color:var(--muted);background:transparent;cursor:pointer}
.rtabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.linkbtn{justify-self:start;border:0;background:none;padding:0;font:600 14px var(--display);color:var(--blue);cursor:pointer;text-decoration:underline}

/* platform thank-you page */
.lickey{display:grid;gap:12px;margin:18px 0 8px}
.lickey textarea{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;word-break:break-all;min-height:110px}
.lickey .ctas{display:flex;flex-wrap:wrap;gap:12px}
.legal .steps{color:var(--muted);padding-left:22px;display:grid;gap:6px}
.legal a{color:var(--blue)}

/* radio streaming platform: the home page opens with it */
.plat{position:relative;overflow:hidden;color:#e6edf5;padding-block:56px 40px;
  background:radial-gradient(70% 90% at 90% 10%,rgba(255,138,0,.22),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(0,168,150,.25),transparent 60%),var(--ink)}
.plat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--stripe)}
.plat-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.plat-grid{grid-template-columns:1fr;gap:28px}}
.plat h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;line-height:1.08}
.plat .hl{background:linear-gradient(90deg,#ffb04a,#ff8a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plat .lead{color:#c3d0dd;max-width:54ch;margin:16px 0 26px;font-size:1.125rem}
.plat .ctas{display:flex;flex-wrap:wrap;gap:12px}
.plat .btn-sun{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.plat .btn-sun:hover{background:#ffa133;border-color:#ffa133}
.btn-line{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.plat .cta-note{margin-top:14px;font-size:14px;color:#9fb3c6}
.plat .cta-note a{color:#fff;font-weight:600}
.plat-kicker{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#7fd8cc;margin-bottom:18px}
.plat-kicker .dot{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:pulse 1.6s infinite}
.app-shot{justify-self:center;display:block;width:min(100%,340px);border-radius:18px;overflow:hidden;border:1px solid #2a3a52;box-shadow:0 24px 60px rgba(0,0,0,.35);transition:transform .2s}
.app-shot:hover{transform:translateY(-3px)}
.app-shot img{display:block;width:100%;height:auto}
@media (max-width:900px){.app-shot{width:min(100%,380px)}}
ul.feat{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){ul.feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){ul.feat{grid-template-columns:1fr}}
ul.feat li{padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#b6c4d2;font-size:15px}
ul.feat b{display:block;color:#fff;font:700 16px var(--display);margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.plat *{animation:none!important}}
/* plans */
.pplans .card-in{gap:14px}
.pplans .btn{margin-top:6px}
.pplans .card.best{border-top-color:var(--accent);box-shadow:var(--shadow-lg)}
.pplans .badge{justify-self:start;font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--ink);padding:6px 10px;border-radius:999px}
.pprice{font:800 36px/1 var(--display);color:var(--ink)}
.pprice small{font:600 15px var(--body);color:var(--dim);margin-left:4px}
@media (max-width:900px){.cards.pplans{grid-template-columns:1fr}}
.soon-note{display:none;margin:0 0 18px;padding:14px 18px;border-radius:12px;background:#fff4e5;border:1px solid #ffc680;color:var(--ink)}
.soon-note:target{display:block}
.soon-note a{color:var(--blue);font-weight:600}

/* compact animated banner at the very top of the home page */
.hero-top .hero-grid{grid-template-columns:1fr minmax(170px,240px);gap:32px;padding-block:18px 20px}
.hero-top h1,.hero-top .h1{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.hero-top .brandname{font-size:12px;margin-bottom:10px}
.hero-top p.lead{font-size:1rem;margin:10px 0 16px}
.hero-top .btn{padding:11px 20px;font-size:.95rem}
.hero-top .cta-note{font-size:13px}
.hero-top .core{padding:10%}
.hero-top .orbit i{width:8px;height:8px;top:-4px;left:calc(50% - 4px)}
.hero-top .orbit.o2 i{top:auto;bottom:-4px}
.hero-top .core-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:none}
.hero-top .core-logo img{display:block}
/* a soft backing so the mesh lines and dots don't show through (and seem to overlap) the logo lettering */
.hero-top .core-logo{border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.96) 62%,rgba(255,255,255,.7) 80%,rgba(255,255,255,0));padding:6% 4%}
@media (max-width:900px){.hero-top .hero-grid{grid-template-columns:1fr;padding-block:16px 18px}}
@media (max-width:900px){.hero-top .core{display:grid;order:-1;justify-self:center;width:150px;padding:8%}}
/* user manual (/manual/) */
.manual{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.toc{display:block;min-height:0;position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:18px 20px}
.toc h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--blue);text-decoration:underline}
.msecs{display:grid;gap:22px;min-width:0}
.msec{border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:26px 28px;scroll-margin-top:86px;min-width:0}
.msec h2{display:flex;align-items:center;gap:12px;font-size:clamp(21px,2.4vw,26px);margin-bottom:14px}
.msec .num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 15px var(--display);letter-spacing:0}
.msec h3{font-size:17px;margin-bottom:6px}
.msec p,.msec li{color:var(--muted)}
.msec b,.msec th[scope=row]{color:var(--ink)}
.msec p{margin:0 0 12px}
.msec ul,.msec ol{margin:0 0 12px;padding-left:22px;display:grid;gap:6px}
.msec li ul{margin:8px 0 0}
.msec a{color:var(--blue)}
.msec .note{background:var(--soft);border-left:4px solid var(--sun);border-radius:6px;padding:12px 16px;font-size:15px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mgrid>div{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--soft)}
.mgrid p{margin:0;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:5px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--soft);font:600 14px var(--display);color:var(--ink)}
.mtable-wrap{overflow-x:auto;margin:0 0 14px}
.mtable{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.mtable th,.mtable td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.mtable thead th{font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:var(--soft)}
.mtable th[scope=row]{font-weight:600;white-space:nowrap}
.mtable td{color:var(--muted)}
kbd{display:inline-block;min-width:1.7em;padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:#fff;font:600 13px/1.5 var(--mono);text-align:center;color:var(--ink)}
@media (max-width:900px){.manual{grid-template-columns:1fr;gap:24px}.toc{position:static}.mgrid{grid-template-columns:1fr}}
@media (max-width:520px){.msec{padding:20px 18px}.mtable{min-width:0;font-size:14px}.mtable th,.mtable td{padding:9px 8px}.mtable th[scope=row]{white-space:normal;width:38%}}
/* admin dashboard (/admin/) */
.adm-sec{padding-block:36px 64px}
.adm{display:grid;gap:18px}
.adm [hidden]{display:none!important}
.adm-muted{color:var(--dim);font-size:14px;font-weight:400}
.adm-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:20px 22px;min-width:0}
.adm-auth{max-width:420px;display:grid;gap:12px}
.adm-auth h2{font-size:24px}
.adm-auth label{display:grid;gap:6px;font:600 14px var(--display);color:var(--ink)}
.adm-auth input{font:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--line2);border-radius:8px}
.adm-auth code{background:var(--soft);padding:1px 6px;border-radius:4px}
.adm-google{display:flex;align-items:center;justify-content:center;gap:8px}
.adm-google svg{width:18px;height:18px;flex:none}
.adm-setup{font-size:14px;color:var(--dim)}
.adm-setup summary{cursor:pointer;font-weight:600;color:var(--ink)}
.adm-setup p{margin-top:10px}
.adm [data-view="dash"]{display:grid;gap:18px}
.adm-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.adm-actions{display:flex;flex-wrap:wrap;gap:10px}
.adm-actions .btn{padding:9px 18px;font-size:15px}
.adm-h{font-size:20px;margin-top:10px}
.adm-key-maker{display:block;width:100%;height:1050px;border:1px solid var(--line);border-radius:12px;margin-top:16px;background:var(--soft)}
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.adm-tile{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;display:grid;gap:4px;align-content:start}
.adm-tile small{font:600 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.adm-tile b{font:800 30px/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.adm-tile span{font-size:13.5px;color:var(--muted)}
.adm-tile.hero{background:var(--ink);border-color:var(--ink)}
.adm-tile.hero small,.adm-tile.hero span{color:#b6c4d2}
.adm-tile.hero b{color:#fff}
.adm-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.adm-filter button{font:600 14px var(--display);padding:7px 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer}
.adm-filter button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.adm-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1000px){.adm-charts{grid-template-columns:1fr}}
.adm-chart{margin:0;display:grid;gap:10px}
.adm-chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:700 16px var(--display);color:var(--ink)}
.adm-legend{display:flex;flex-wrap:wrap;gap:4px 14px;line-height:1.5;font-size:13.5px;color:var(--muted)}
.adm-legend span{display:inline-flex;align-items:center;gap:6px}
.adm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;flex:none}
.adm-legend .adm-dot{margin-right:0}
.adm-plot{position:relative}
.adm-plot svg{display:block;width:100%;height:auto;overflow:visible}
.adm-plot text{font:500 11px var(--body);fill:var(--dim)}
.adm-plot .grid{stroke:#e6edf3;stroke-width:1}
.adm-plot .base{stroke:#9fb2c2;stroke-width:1}
.adm-plot .hit{fill:transparent;cursor:default;outline:none}
.adm-plot .hit.on{fill:rgba(11,27,46,.05)}
.adm-tip{position:absolute;top:0;transform:translate(-50%,-6px);min-width:170px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:10px 12px;display:grid;gap:4px;font-size:13px;color:var(--muted);pointer-events:none;z-index:2}
.adm-tip b{color:var(--ink);font:700 13px var(--display)}
.adm-tip span{display:flex;align-items:center}
.adm-tip em{margin-left:auto;padding-left:12px;font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.adm-tip .tot{border-top:1px solid var(--line);padding-top:4px;margin-top:2px;color:var(--ink);font-weight:600}
.adm-chart summary{cursor:pointer;font:600 14px var(--display);color:var(--blue)}
.adm-scroll{overflow-x:auto}
.adm .mtable{min-width:0;margin-top:8px}
.adm .mtable td,.adm .mtable th{font-variant-numeric:tabular-nums}
.adm-list h3{font-size:17px;margin-bottom:4px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.adm-people{min-width:640px!important}
.adm-people th[scope=row]{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.adm-tier{display:inline-block;padding:1px 9px;border-radius:999px;font:600 12.5px var(--display);background:var(--soft);color:var(--ink);border:1px solid var(--line2)}
.adm-tier.paid{background:var(--ink);color:#fff;border-color:var(--ink)}
.adm-foot{margin:0}
.adm-search,.adm-block input{font:inherit;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;width:100%;max-width:420px;margin-top:10px}
.adm-block input{max-width:none;margin-top:0;font-weight:400}
.adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end;margin-top:8px}
.adm-logfilter{align-items:center;margin-bottom:4px}.adm-logfilter .adm-search{margin-top:0}
.adm-row label{display:grid;gap:6px;font:600 14px var(--display);color:var(--ink)}
.adm-row .btn{padding:10px 20px;font-size:15px;justify-self:start}
.adm-act{font:600 13px var(--display);padding:5px 12px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.adm-act:hover{border-color:var(--ink)}
.adm-act.block{border-color:#e7b4a6;color:#b23a17}
.adm-act:disabled{opacity:.5;cursor:wait}
.adm-tier.blocked{background:#fdecea;color:#b23a17;border-color:#e7b4a6}
.adm-account-create{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--soft);box-shadow:none}
.adm-account-create h4{font:700 16px var(--display);margin:0 0 6px}
.adm-account-create input,.adm-account-create select,.adm-account-tools select{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:#fff;width:100%}
.adm-voice-key{margin:10px 0;padding:14px 16px;border:2px solid var(--green);border-radius:10px;background:#eef7ef;font-size:14.5px}
.adm-voice-key code{word-break:break-all;background:#fff;padding:2px 6px;border-radius:4px;border:1px solid var(--line)}
.adm-account-tools{grid-template-columns:minmax(0,1fr) minmax(180px,240px);align-items:end;margin-bottom:12px}
.adm-account-tools .adm-search{max-width:none;margin:0}
.adm-account-table{min-width:1050px!important}
.adm-account-id{display:block;max-width:150px;overflow-wrap:anywhere;font-size:12px}
.adm-account-actions{display:flex;flex-wrap:wrap;gap:6px;max-width:210px}
@media(max-width:600px){.adm-account-tools{grid-template-columns:1fr}}
.adm-code{display:flex;gap:6px;align-items:center}
.adm-code code{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;background:var(--soft);padding:2px 6px;border-radius:4px}

/* hide the "Powered by Netlify" badge the host adds to published pages */
#nl-badge-frame{display:none !important}
/* admin: inquiries */
.adm-inq{display:grid;gap:10px;margin-top:10px}
.adm-inq-item{border:1px solid var(--line);border-radius:10px;background:#fff}
.adm-inq-item[open]{border-color:var(--line2);box-shadow:var(--shadow)}
.adm-inq-item>summary{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.adm-inq-item>summary::-webkit-details-marker{display:none}
.adm-inq-main{display:grid;min-width:0}
.adm-inq-main b{font:600 15px var(--display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-inq-main .adm-muted{font-size:13px}
.adm-pri{font:700 11.5px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--dim);border:1px solid var(--line2)}
.adm-pri.p-high{background:#fff4e5;color:#a35400;border-color:#ffc680}
.adm-pri.p-urgent{background:#fdecea;color:#b23a17;border-color:#e7b4a6}
.adm-inq-body{padding:0 16px 16px;border-top:1px solid var(--line);display:grid;gap:10px}
.adm-inq-body>p{margin:12px 0 0}
.adm-inq-body a{color:var(--blue);font-weight:600}
.adm-inq-desc{white-space:pre-wrap;color:var(--ink);background:var(--soft);border-radius:8px;padding:10px 12px}
.adm-inq-fields summary{cursor:pointer;font:600 14px var(--display);color:var(--blue)}
.adm-inq-fields th{text-transform:capitalize;white-space:nowrap}
.adm-inq-form{border:0 !important;box-shadow:none !important;background:none !important;padding:0 !important;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
.adm-inq-form label{display:grid;gap:5px;font:600 13.5px var(--display);color:var(--ink)}
.adm-inq-form .wide{grid-column:1/-1}
.adm-inq-form select,.adm-inq-form textarea{font:inherit;font-weight:400;padding:9px 10px;border:1px solid var(--line2);border-radius:8px;background:#fff}
.adm-inq-form .btn{justify-self:start;padding:9px 20px;font-size:15px}
.adm-reply-tools{display:flex;flex-wrap:wrap;gap:8px}
.adm-reply-tools .btn-ghost{padding:5px 12px;font-size:13px;cursor:pointer}
.adm-replies li{border-left-color:var(--sun)}
.adm-inq-body h4{margin:6px 0 0;font:700 14px var(--display)}
.adm-inq-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.adm-inq-log li{display:grid;gap:2px;border-left:3px solid var(--line2);padding-left:10px}
@media (max-width:600px){.adm-inq-item>summary{grid-template-columns:1fr auto}.adm-inq-item>summary .adm-pri{grid-column:1/-1;justify-self:start}}
/* platform checkout page (Stripe's embedded form) */
.pco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px;align-items:start}
.pco h1{font-size:clamp(26px,2.6vw,34px);margin:12px 0 18px}
.pco-plan{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.pco-plan b{font:700 18px var(--display);color:var(--ink)}
.pco-plan .pprice{margin:8px 0 4px}
.pco-points{margin:0 0 16px;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
.pco-points a,.pco-muted a{color:var(--blue);font-weight:600}
.pco-muted{color:var(--dim);font-size:15px}
.pco-form{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-lg);padding:16px;min-height:420px}
@media (max-width:860px){.pco{grid-template-columns:1fr;gap:24px}.pco-form{padding:8px}}

/* ---------- tight layout: smaller frame, tighter rhythm, less scrolling (applies to every page) ---------- */
body{line-height:1.6}
.brand-row{padding:12px 20px 8px}
.brand img{height:100px}
@media (max-width:440px){.brand img{height:78px}}
nav{min-height:56px;padding-block:6px}
header.small nav{padding-block:4px}
/* Rhythm, third setting. History, so nobody walks it again by accident:
   96 -> 52 -> 44 -> 34 by successive appended overrides (too tight; the page
   read as compressed), -> 72 (right for the short page), -> 46 here.

   46 is not a return to the 34 that was wrong. It is the density the lead-gen
   landing format actually runs: once the page carries a trust bar, industries,
   engagement models and a process strip, 72px of air between every band pushed
   it past 6,200px and buried the pricing. Tight bands, generous cards. */
section{padding-block:46px}
.sec-head{margin-bottom:16px;gap:8px}
.home-svc,.home-work{padding-block:46px}
.nav-home{grid-column:1;justify-self:start;font:700 14px var(--display);text-decoration:none;color:var(--ink);max-width:150px;line-height:1.3}
.product-aside h2{font-size:clamp(24px,3vw,34px);margin:12px 0}
.product-aside p{max-width:65ch;color:var(--muted)}
.product-aside .ctas{align-items:center}
.service-area{color:var(--muted);font-size:15px;line-height:1.6}
.page-intro{padding-block:30px 24px}
.page-intro .jump{margin-top:14px}
.card-in{padding:18px}
.ps-col,.tier{padding:20px 18px}
.tier ul{padding-top:14px;gap:9px}
.fbody{padding:18px;gap:12px}
.faq-h{margin:22px 0 12px}
.faq summary{padding:12px 16px}
.also{margin-top:16px;padding:12px 16px}
.cta-strip{padding-block:22px}
.foot{padding-block:32px 22px!important;gap:28px!important}
.foot-base .wrap{padding-block:14px!important}
@media (max-width:700px){section,.home-svc,.home-work{padding-block:32px}.sec-head{margin-bottom:16px}.page-intro{padding-block:26px 22px}}

/* home Results: smaller case-study frames and type */
#results .work{gap:14px;max-width:860px}
#results .wcard{border-radius:12px}
#results .wthumb{aspect-ratio:1100/320}
#results .wbody{padding:14px 16px 16px;gap:6px}
#results .wkind{font-size:10.5px;gap:6px}
#results .wkind i{width:6px;height:6px;box-shadow:0 0 0 3px rgba(46,138,59,.15)}
#results .wbody h3{font-size:16.5px}
#results .wbody p{font-size:13.5px;line-height:1.5}
#results .chips{gap:5px}
#results .chips span{font-size:11.5px;padding:3px 8px}
#results .wvisit{font-size:13px;margin-top:2px}

/* home Plans: much smaller cards, set close together */
#plans .cards.pplans{gap:10px;max-width:760px;margin-inline:auto}
#plans .pplans .card{border-top-width:3px}
#plans .pplans .card-in{padding:14px 14px 16px;gap:7px}
#plans .pplans h3{font-size:16px}
#plans .pprice{font-size:24px}
#plans .pprice small{font-size:12px}
#plans .pplans ul{gap:4px;font-size:13px;margin:0}
#plans .pplans li{gap:7px}
#plans .pplans li::before{width:5px;height:5px}
#plans .pplans .badge{font-size:9.5px;padding:4px 8px}
#plans .pplans .btn{margin-top:4px;padding:8px 14px;font-size:.88rem}
#plans .sec-head{margin-bottom:12px}
#plans .also{font-size:13px;max-width:720px;margin-inline:auto}
@media (max-width:900px){#plans .cards.pplans{max-width:420px}}

/* home Plans, Results and Pricing: one horizontal row each, smaller frames. On phones too narrow for the row, it
   stays one line and scrolls sideways (snap) instead of stacking */
#plans .cards.pplans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px;gap:8px}
#results .work{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;gap:10px}
#pricing .tiers{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;gap:10px;align-items:stretch}
#pricing .tier{padding:14px 14px 16px;gap:8px;border-radius:12px}
#pricing .tier .lvl{font-size:10.5px}
#pricing .tier h3{font-size:16px}
#pricing .tier .best{font-size:12.5px;line-height:1.45}
#pricing .tier .best b{font-size:10px;margin-bottom:2px}
#pricing .tier ul{padding-top:9px;gap:5px}
#pricing .tier li{grid-template-columns:14px 1fr;gap:6px;font-size:12.5px;line-height:1.4}
#pricing .tier li svg{width:13px;height:13px;margin-top:2px}
#pricing .tier .price{font-size:11.5px}
#pricing .tier .price b{font-size:15px}
#pricing .tier .tq{font-size:12px}
#pricing .tier .flag{font-size:9.5px;padding:4px 8px;top:-10px;left:14px}
#pricing .tier .btn{padding:8px 12px;font-size:.85rem}
@media (max-width:900px){#plans .cards.pplans{max-width:720px}}
@media (max-width:980px){#pricing .tiers{max-width:860px}}
@media (max-width:640px){
  #plans .cards.pplans,#results .work,#pricing .tiers{display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:minmax(205px,72%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:6px 2px 10px;margin-inline:0;max-width:none;scrollbar-width:thin}
  #results .work{grid-auto-columns:minmax(230px,82%)}
  #pricing .tiers{padding-top:14px}
  #plans .pplans .card,#results .wcard,#pricing .tier{scroll-snap-align:start}
}

/* home: the remaining sections laid out side by side too, so the page fits the screen with less scrolling */
/* platform: pitch and screenshot stay side by side, the six features run three to a row */
@media (max-width:900px) and (min-width:641px){.plat-grid{grid-template-columns:1.3fr 1fr;gap:20px}}
ul.feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
ul.feat li{padding:10px 12px;font-size:13px;line-height:1.45}
@media (max-width:900px){ul.feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* services: three cards in one row */
#services .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:860px}
#services .card-in{padding:14px;gap:6px}
#services .card h3{font-size:16px}
#services .card p{font-size:13px;line-height:1.5}
#services .card .ic svg{width:20px;height:20px}
/* FAQ: the three questions side by side */
#pricing .faq{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start;max-width:none}
#pricing .faq summary{padding:10px 12px;font-size:13.5px;gap:8px}
#pricing .faq summary::after{width:8px;height:8px}
#pricing .faq details p{padding:0 12px 12px;font-size:12.5px;line-height:1.5}
#pricing .faq-h{font-size:17px;margin:18px 0 10px}
/* about: logo and story side by side, the four points two to a row */
.founder{grid-template-columns:150px 1fr;gap:24px}
.founder .alogo{width:150px;padding:10px}
.founder h2{font-size:clamp(22px,2.6vw,30px)}
.founder .fpoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.founder .fstory,.founder .fpoints li,.founder .fcore{font-size:14px;line-height:1.5}
.founder .fcta{display:flex;flex-wrap:wrap;gap:8px}
.founder .fcta .btn{padding:9px 14px;font-size:.88rem}
@media (max-width:720px){.founder{grid-template-columns:96px 1fr;justify-items:stretch;gap:14px}.founder .alogo{width:96px}}
/* contact: details and form side by side */
.contact{grid-template-columns:1fr 1.3fr;gap:20px}
@media (max-width:900px){.contact{grid-template-columns:1fr 1.3fr}}

/* phones: rows too narrow for three cards scroll sideways on one line instead of stacking */
@media (max-width:640px){
  ul.feat,#services .cards,#pricing .faq{display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:minmax(200px,70%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:4px 2px 10px;max-width:none;scrollbar-width:thin}
  ul.feat li,#services .card,#pricing .faq details{scroll-snap-align:start}
  .founder .fpoints{grid-template-columns:1fr}
}
@media (max-width:560px){.contact{grid-template-columns:1fr}}

/* home hero: the logo inside the circle runs about 3x its former size; the circle, rings and orbits grow with it */
.hero-top .hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:24px}
.hero-top .core{padding:3%}
.hero-top .core-logo{width:96%;padding:3% 2%}
.hero-top .orbit i{width:10px;height:10px;top:-5px;left:calc(50% - 5px)}
.hero-top .orbit.o2 i{top:auto;bottom:-5px}
@media (max-width:900px){.hero-top .core{width:100%;max-width:340px;padding:3%}}

/* home: About and Contact stacked vertically (wrapped in .trio), each a full-width card with its own content.
   Wider screens: the logo sits beside the story and the contact details beside the form */
@media all{
  .trio{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:1040px;margin:0 auto;padding:28px 16px;
    background:var(--soft);border-top:1px solid var(--line)}
  .trio > section{padding:20px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow);min-width:0}
  .trio > section > .wrap{max-width:none;padding-inline:0}
  .trio .sec-head{margin-bottom:10px;gap:6px}
  .trio .sec-head h2,.trio .founder h2{font-size:clamp(18px,1.8vw,22px);margin-top:6px}
  .trio .sec-head p,.trio .fstory,.trio .fpoints li,.trio .fcore{font-size:13px;line-height:1.5}
  .trio .tag{font-size:11px}
  /* about: logo above the story on small screens */
  .trio .founder{grid-template-columns:1fr;gap:10px;justify-items:start}
  .trio .founder .alogo{width:110px;padding:8px}
  .trio .founder .fpoints{grid-template-columns:1fr;gap:4px}
  .trio .ftag{font-size:12.5px;margin:4px 0}
  .trio .founder .fcta .btn{padding:8px 12px;font-size:.82rem}
  .trio .contact{grid-template-columns:1fr;gap:14px}
}
@media (min-width:768px){
  .trio .founder{grid-template-columns:160px minmax(0,1fr);gap:22px;align-items:start}
  .trio .founder .alogo{width:160px}
  .trio .founder .fpoints{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
  .trio .contact{grid-template-columns:1fr 1.4fr;gap:18px}
}
.trio form{box-shadow:none}
.form-stage{display:grid;gap:16px;min-width:0}
.form-stage h3{margin:0 0 4px;color:var(--ink);font:700 22px var(--display)}
.staged-form [hidden]{display:none!important}
.form-progress{margin-bottom:20px}
.form-progress p{margin:0 0 8px;color:var(--ink);font-weight:700;line-height:1.5}
.form-progress progress{display:block;width:100%;height:8px;accent-color:var(--sun);border:none;border-radius:999px;overflow:hidden}
.form-progress progress::-webkit-progress-bar{background:var(--line)}
.form-progress progress::-webkit-progress-value{background:var(--sun)}
.form-progress progress::-moz-progress-bar{background:var(--sun)}
.form-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 12px}
.form-navigation .btn{min-height:44px}
.form-navigation .btn:disabled{opacity:.5;cursor:not-allowed}
.form-navigation .btn:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.form-stage:focus,.form-stage h3:focus{outline:none}
/* phones (zoom .5, see the top of this file): About and Contact text sized for the zoom so it still reads;
   text-size-adjust stops iOS from re-inflating it */
@media (max-width:767px),(pointer:coarse) and (max-height:499px) and (max-width:999px){
  .trio{-webkit-text-size-adjust:100%;text-size-adjust:100%;gap:14px;padding:24px 14px}
  .trio > section{padding:20px 16px}
  .trio .tag{font-size:17px}
  .trio .sec-head h2,.trio .founder h2{font-size:28px;line-height:1.2}
  .trio .sec-head p,.trio .fstory,.trio .fpoints li,.trio .fcore{font-size:16px;line-height:1.45}
  .trio .ftag{font-size:16px}
  .trio .founder .alogo{width:150px}
  .trio .founder .fpoints li{grid-template-columns:24px 1fr}
  .trio .founder .fcta{flex-direction:column;align-items:stretch;gap:10px}
  .trio .founder .fcta .btn{font-size:16px;min-height:64px;padding:10px 14px;justify-content:center;text-align:center;white-space:normal}
  .trio .contact{grid-template-columns:1fr;gap:14px}
}

/* home: interactive feature and service cards (.ifx). A spotlight follows the pointer, the card tilts slightly
   (site.js sets --mx/--my/--rx/--ry), the icon pops, and the action links slide in on hover or keyboard focus.
   Touch screens show the actions all the time */
.ifx{position:relative;isolation:isolate;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift,0));
  transition:transform .25s ease,border-color .2s,box-shadow .25s,background .2s}
.ifx::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(220px circle at var(--mx) var(--my),var(--spot,rgba(255,138,0,.18)),transparent 65%)}
.ifx:hover,.ifx:focus-within{--lift:-3px}
.ifx:hover::before,.ifx:focus-within::before{opacity:1}
.card.ifx:hover{transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px)}

ul.feat li.ifx{display:flex;flex-direction:column;gap:3px;padding-right:44px}
ul.feat li.ifx:hover,ul.feat li.ifx:focus-within{border-color:rgba(255,138,0,.55);background:rgba(255,255,255,.08);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
ul.feat .fi{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:#ffb057;background:rgba(255,138,0,.12);transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s,color .2s}
ul.feat li.ifx:hover .fi,ul.feat li.ifx:focus-within .fi{transform:scale(1.15) rotate(-8deg);background:var(--sun);color:var(--ink)}
ul.feat b{margin-bottom:0}
.fplan{align-self:flex-start;font:700 9.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#5fe0cf;
  background:rgba(0,168,150,.14);border:1px solid rgba(0,168,150,.3);padding:3px 6px;border-radius:999px;margin:1px 0 3px}

.fgo,.sgo{display:flex;flex-wrap:wrap;gap:6px 12px;max-height:0;opacity:0;overflow:hidden;transform:translateY(4px);
  transition:max-height .3s ease,opacity .2s,transform .25s,margin .25s}
.ifx:hover .fgo,.ifx:focus-within .fgo,.ifx:hover .sgo,.ifx:focus-within .sgo{max-height:60px;opacity:1;transform:none;margin-top:6px}
.fgo a,.sgo a{font:700 12px var(--display);text-decoration:none;border-bottom:1.5px solid transparent;padding:2px 0}
.fgo a{color:#ffc27a}.fgo a:hover{border-bottom-color:#ffc27a}
.sgo a{color:var(--blue)}.sgo a:hover{border-bottom-color:var(--blue)}
.fgo a:focus-visible,.sgo a:focus-visible{outline-offset:2px}

#services .card.ifx{--spot:rgba(10,108,214,.12)}
#services .card.ifx:hover,#services .card.ifx:focus-within{border-top-color:var(--sun);box-shadow:var(--shadow-lg)}
#services .card.ifx .ic{transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
#services .card.ifx:hover .ic,#services .card.ifx:focus-within .ic{transform:scale(1.12) rotate(-6deg);background:#fff3e2}

@media (hover:none){
  .fgo,.sgo{max-height:none;opacity:1;transform:none;margin-top:6px}
  .ifx:hover,.ifx:focus-within{--lift:0px}
}
@media (prefers-reduced-motion:reduce){
  .ifx,.ifx .fi,.ifx .ic,.fgo,.sgo{transition:none}
  .ifx:hover .fi,.ifx:focus-within .fi,#services .card.ifx:hover .ic{transform:none}
}
/* the contact form's "Interested in" field flashes when a service card fills it in */
@keyframes pick{0%{box-shadow:0 0 0 0 rgba(255,138,0,.6)}100%{box-shadow:0 0 0 10px rgba(255,138,0,0)}}
.picked{animation:pick .9s ease-out 2}

/* Exit button on documentation pages opened outside the app (manual): phones only, where the logo and menu are
   scaled down; sizes are doubled because phones run at zoom .5 */
.exit-home{display:none}
@media (max-width:767px),(pointer:coarse) and (max-height:499px) and (max-width:999px){
  .exit-home{display:inline-flex;align-items:center;position:fixed;z-index:60;right:24px;bottom:calc(24px + env(safe-area-inset-bottom)*2);
    min-height:88px;padding:16px 36px;border-radius:999px;background:#f5b301;color:#111;font-size:30px;font-weight:700;
    text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.28)}
  .exit-home:focus-visible{outline:4px solid #111;outline-offset:4px}
}

/* home: the radio panel stacks three rows of three — two rows of features, then the plans (#plans) */
#plans,#results{scroll-margin-top:76px}
.plat #plans .cards.pplans{max-width:none;gap:8px;margin-top:8px}
.plat .plans-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:#9fb3c6}
.plat .plans-note b{margin-right:8px;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7fd8cc}
.plat #plans .also{max-width:none;margin-top:8px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#9fb3c6}
.plat #plans .also a{color:#fff}
/* home: Results and Pricing share one section; side by side from 1100px, Results above Pricing below that */
.rp{display:grid;gap:22px}
.rp-col{min-width:0}
@media (min-width:1100px){
  .rp{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;align-items:start}
  #results .work{grid-template-columns:1fr;max-width:none}
  #pricing .rp .tiers{max-width:none}
}
/* home: each radio feature card opens the app */
ul.feat li.ifx[data-href]{cursor:pointer}
ul.feat li.ifx[data-href]:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* Guides (/guides/) and the social media growth page (/growth/) */
.legal.guide h2{font-size:clamp(20px,2.4vw,26px);margin:30px 0 8px}
.legal.guide ul{display:grid;gap:6px;padding-left:22px}
.guide-cta{margin:32px 0 18px;padding:18px 20px;border-radius:12px;background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.guide-cta a{font-weight:600}
.guide-t{font-size:20px;font-weight:600}
.guide-t a{text-decoration:none;color:var(--ink)}
.guide-t a:hover,.guide-more:hover{color:var(--blue)}
.guide-more{font:600 14px var(--display);color:var(--blue);text-decoration:none}
#how .steps b{color:var(--ink)}
#faq h2.faq-h{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:14px}

@media (max-width:767px),(pointer:coarse) and (max-height:499px) and (max-width:999px){
  #pricing,.trio,footer{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .form-stage{gap:28px}
  .form-stage h3,.form-progress p{font-size:28px;line-height:1.4}
  .form-navigation .btn{min-height:88px;padding:20px 24px;font-size:28px;white-space:normal}
  #pricing{padding-block:48px}
  #pricing > .wrap{padding-inline:32px}
  #pricing .rp{gap:48px}
  #pricing .sec-head{margin-bottom:28px}
  #pricing .tag,.trio .tag{font-size:24px}
  #pricing .sec-head h2,.trio .sec-head h2,.trio .founder h2{font-size:44px;line-height:1.2}
  #pricing .sec-head p,.trio .sec-head p{font-size:28px;line-height:1.5}
  #results .work,#pricing .tiers,#pricing .faq{
    grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;
    gap:28px;overflow:visible;max-width:none;padding:0;scroll-snap-type:none
  }
  #results .wcard,#pricing .tier{min-width:0}
  #results .wthumb{height:220px}
  #results .wbody{padding:28px}
  #results .wkind{font-size:22px}
  #results .wbody h3,#pricing .tier h3{font-size:34px}
  #results .wbody p{font-size:28px;line-height:1.5}
  #results .chips{gap:12px}
  #results .chips span{font-size:22px;padding:8px 16px}
  #results .wvisit{font-size:24px;overflow-wrap:anywhere}
  #pricing .tier{padding:32px;gap:24px;border-radius:20px}
  #pricing .tier .lvl,#pricing .tier .best b{font-size:22px}
  #pricing .tier .best{font-size:28px;line-height:1.5}
  #pricing .tier .best b{margin-bottom:8px}
  #pricing .tier ul{padding-top:24px;gap:16px}
  #pricing .tier li{grid-template-columns:28px minmax(0,1fr);gap:14px;font-size:28px;line-height:1.5}
  #pricing .tier li svg{width:26px;height:26px;margin-top:8px}
  #pricing .tier .price{font-size:24px;line-height:1.5}
  #pricing .tier .price b{font-size:32px;margin-bottom:6px}
  #pricing .tier .tq{font-size:22px}
  #pricing .tier.feat{margin-top:12px}
  #pricing .tier .flag{font-size:20px;padding:8px 16px;top:-20px;left:28px}
  #pricing .tier .btn,.trio .btn{width:100%;min-height:88px;padding:20px 24px;font-size:28px;white-space:normal;text-align:center}
  #pricing .faq-h{font-size:34px;margin:40px 0 24px}
  #pricing .faq summary{padding:24px;font-size:28px;line-height:1.4;gap:24px}
  #pricing .faq summary::after{width:16px;height:16px}
  #pricing .faq details p{padding:0 24px 28px;font-size:28px;line-height:1.5}
  .trio{padding:32px;gap:32px}
  .trio > section{padding:32px;min-width:0}
  .trio .sec-head{margin-bottom:28px}
  .trio .founder{gap:28px}
  .trio .founder .alogo{width:260px;padding:16px}
  .trio .ftag,.trio .fstory,.trio .fpoints li,.trio .fcore{font-size:28px;line-height:1.5}
  .trio .founder .fpoints{gap:16px}
  .trio .founder .fpoints li{grid-template-columns:40px minmax(0,1fr)}
  .trio .founder .fcta .btn{font-size:28px;min-height:88px;padding:20px 24px}
  .trio .social{gap:20px}
  .trio .social a{width:88px;height:88px}
  .trio .social svg{width:36px;height:36px}
  .trio .contact{gap:28px}
  .trio .cinfo{gap:20px;min-width:0}
  .trio .crow{padding:24px;gap:16px}
  .trio .crow small{font-size:22px;margin-bottom:8px}
  .trio .crow strong{font-size:30px}
  .trio .copy{min-height:88px;padding:16px 20px;font-size:24px}
  .trio .expect{padding:28px}
  .trio .expect h3{font-size:30px;margin-bottom:20px}
  .trio .expect ul{font-size:28px;line-height:1.5;gap:14px}
  .trio form{min-width:0}
  .trio .fbody{padding:28px;gap:28px}
  .trio .row2{grid-template-columns:minmax(0,1fr);gap:28px}
  .trio label,.trio .lbl{min-width:0;gap:12px;font-size:28px;line-height:1.4}
  .trio input,.trio select,.trio textarea{min-width:0;min-height:88px;padding:20px 24px;font-size:32px;line-height:1.4;border-radius:14px}
  .trio textarea{min-height:220px}
  .trio .slots{gap:16px}
  .trio .slots input{min-height:0;padding:0}
  .trio .slots label{min-height:88px;align-items:center;padding:16px 24px;font-size:28px}
  .trio .fine,.trio .ferr,.trio .formnote{font-size:24px;line-height:1.5}
  footer .foot{grid-template-columns:minmax(0,1fr);gap:40px!important;padding:48px 32px!important;font-size:28px}
  footer .foot > div:first-child{grid-column:auto}
  footer .foot img{height:104px;max-width:100%;object-fit:contain}
  footer .foot h4{font-size:24px;margin-bottom:20px}
  footer .foot ul{gap:12px}
  footer .foot a{overflow-wrap:anywhere}
  footer .foot li a{display:inline-flex;align-items:center;min-height:88px;line-height:1.4}
  footer .social{gap:20px}
  footer .social a{width:88px;height:88px}
  footer .social svg{width:36px;height:36px}
  footer .foot-base .wrap{padding:28px 32px!important;font-size:24px;line-height:1.5;gap:24px}
  footer .foot-links a{display:inline-flex;align-items:center;min-height:88px}
}

/* ---------------------------------------------------------------------------
   RESULTS + SOCIAL TIERS: stacked, not columned.  2026-10-25

   Owner: "there is a open blank area on the right side of the Cdoc medical
   group, need it filling there."

   The cause was structural rather than decorative. `.rp` laid the two blocks
   out as `minmax(0,1fr) minmax(0,1.6fr)` with `align-items:start`, so Real
   Projects and Social Tiers were side-by-side columns of independent height.
   Three tall project cards stacked in the narrower column while the three tier
   cards finished far higher up, leaving roughly 1150x1000px of white to the
   right of the C Doc Telehealth and Frequency X cards. Nothing could be put in
   that space while it belonged to a column that had run out of content.

   So the two blocks each take the full width and sit one after the other, and
   the project cards run three across instead of stacking. The void is not
   filled with something new — it stops existing, and both blocks get the room
   they were being denied.

   `.work` had been overridden to a single column and capped by later rules;
   both are lifted here so the row can actually use the width.

   The ID selector below is not overreach: `#results .work` already owns this
   grid (with max-width:780px), and a class rule cannot beat an ID however late
   it appears. Matching its specificity is the only way to win without
   !important.
   --------------------------------------------------------------------------- */
.rp{grid-template-columns:1fr;gap:44px;align-items:stretch}
#results .work{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px}

/* Two across on tablets, one on phones: three cards at 900px would be narrower
   than the screenshots inside them. */
@media (max-width:1040px){#results .work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){#results .work{grid-template-columns:1fr;gap:14px}.rp{gap:28px}}

/* ---------------------------------------------------------------------------
   LANDING-PAGE RESTRUCTURE — 2026-10-25
   Hero lead capture, trust bar, industries, engagement models, process.

   Appended at the end on purpose: everything here is new, so nothing above is
   being overridden and the cascade stays readable. Where a rule has to beat an
   existing ID selector it says so.
   --------------------------------------------------------------------------- */

/* --- hero lead form ------------------------------------------------------ */
/* styles.css:227 styles the bare `form` element as a white card with
   overflow:hidden. On the hero that clipped the first label and sliced the
   buttons off at the card edge. The fields carry their own white, so the form
   itself is transparent here. Same reset `.rpanel form` already does. */
.herolead{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;padding:0}
.herolead{margin:22px 0 0;max-width:560px}
.herolead .hl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hl-f{display:block;margin-bottom:12px}
.hl-f>span{display:block;font:700 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.hl-f input{
  width:100%;padding:12px 14px;font:400 15px var(--body);color:var(--ink);
  background:rgba(255,255,255,.92);border:1px solid var(--line2);border-radius:11px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hl-f input::placeholder{color:#8296a8}
.hl-f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,108,214,.16)}
.hl-f input:user-invalid{border-color:#c0392b}
.herolead .ctas{margin-top:4px}
.herolead button.btn{font:700 15px var(--display);cursor:pointer}
.hl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- trust bar ----------------------------------------------------------- */
.trustbar{background:#fff;border-bottom:1px solid var(--soft2);padding-block:26px}
.tb-lead{margin:0 0 14px;font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tb-list a{display:flex;flex-direction:column;gap:3px;text-decoration:none;font:700 16px var(--display);color:var(--ink);padding:12px 16px;border:1px solid var(--soft2);border-radius:12px;background:var(--bg-tint);transition:border-color .2s ease,transform .2s ease}
.tb-list a:hover{border-color:var(--blue);transform:translateY(-2px)}
.tb-k{font:600 12px var(--body);color:var(--dim);letter-spacing:.02em}
.tb-note{margin:14px 0 0;font-size:13px;color:var(--dim)}

/* --- industries ---------------------------------------------------------- */
.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.who{border:1px solid var(--soft2);border-radius:14px;padding:22px 20px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.who h3{font-size:18px;margin:0 0 10px;line-height:1.25}
.who p{font-size:14px;color:var(--ink-soft);margin:0}
.who-proof{margin-top:auto!important;padding-top:14px;font:700 12px var(--display)!important;color:var(--teal)!important;letter-spacing:.02em}

/* --- engagement models --------------------------------------------------- */
.eng-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.eng{border:1px solid var(--soft2);border-radius:14px;padding:24px 22px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.eng.feat{border-color:var(--blue);box-shadow:var(--shadow-lg)}
.eng-k{font:700 11px var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.eng h3{font-size:19px;margin:0 0 10px}
.eng p{font-size:14.5px;color:var(--ink-soft);margin:0}
.eng-from{margin-top:auto!important;padding-top:16px;font:800 18px var(--display)!important;color:var(--ink)!important}

/* --- process ------------------------------------------------------------- */
.proc{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:none}
.proc li{display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:#fff;border:1px solid var(--soft2);border-radius:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.proc b{font:700 15px var(--display);color:var(--ink)}
.proc-n{font:800 12px var(--display);letter-spacing:.12em;color:var(--accent)}

@media (max-width:1040px){
  .who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .eng-grid{grid-template-columns:1fr}
  .tb-list{grid-template-columns:1fr}
}
@media (max-width:700px){
  .who-grid,.proc{grid-template-columns:1fr}
  .herolead .hl-row{grid-template-columns:1fr}
  .herolead{max-width:none}
}

/* --- density pass, 2026-10-25 -------------------------------------------
   "Make everything more compact — too much space or gaps, I want them closer,
   use their format and frame setup."

   The reference format is a dense B2B landing page: bands sit close together,
   cards stay comfortable inside. So this tightens the SPACE BETWEEN things
   and leaves reading comfort alone — line-height, font sizes and the padding
   inside each card are untouched on purpose. Squeezing those is what makes a
   page feel cheap rather than dense.
   ------------------------------------------------------------------------ */
.trustbar{padding-block:18px}
.trustbar .tb-lead{margin-bottom:10px}
.trustbar .tb-note{margin-top:10px}
.trustbar .tb-list{gap:12px}
.trustbar .tb-list a{padding:10px 14px}

.who-grid,.eng-grid{gap:14px}
.who{padding:18px 16px}
.eng{padding:20px 18px}
.who h3{margin-bottom:8px}
.eng h3{margin-bottom:8px}
.who-proof{padding-top:10px}
.eng-from{padding-top:12px}

.proc{margin-top:26px;gap:12px}
.proc li{padding:14px 13px}

/* hero: the form made this the tallest band on the page */
.hero-grid{padding-block:30px 34px}
.herolead{margin-top:16px}
.herolead .hl-row{gap:10px}
.hl-f{margin-bottom:10px}
.hl-f input{padding:10px 13px}

/* the gap under a section heading, everywhere */
.sec-head{margin-bottom:18px}
.sec-head p{margin-top:8px}

@media (max-width:700px){
  .trustbar{padding-block:14px}
  .proc{margin-top:18px}
  .hero-grid{padding-block:22px 26px}
}

/* --- density pass 2: the two tallest blocks ------------------------------
   Measured, not guessed. At 1440px the page was 5,897px and #pricing (1,608)
   plus .trio (1,372) were half of it. Trimming bands elsewhere could never
   have moved the number much; this is where the height actually was.

   Again: the space BETWEEN things, not the room inside them. -------------- */

/* #pricing stacks four blocks — tiers, projects, social tiers, FAQ */
.rp{gap:26px}
#results .work{gap:16px}
.rp-sec .sec-head{margin-bottom:14px}
.rp .tiers{gap:12px}
.faq{margin-top:14px}

/* .trio — about and contact, side by side cards */
.trio{gap:16px}
.trio > section{padding:16px 18px}
.trio .sec-head{margin-bottom:12px}

@media (max-width:700px){
  .rp{gap:22px}
  .trio{gap:12px}
  .trio > section{padding:14px 15px}
}

/* --- density pass 3: "much tighter" --------------------------------------
   Pass 2 moved 6%. This goes after the three things that were still holding
   the page open, in the order they actually cost height:

     1. band padding        46px -> 34px
     2. heading block       the h2 + its margin above the cards
     3. card padding        .wp was 30/26, .tier 32 at this breakpoint

   The floor I will not cross without being told: body line-height stays at
   1.6+, body copy stays at its current size, and tap targets stay >= 44px.
   Past that a dense page stops being dense and becomes unreadable, and the
   phone becomes unusable. ------------------------------------------------- */
section{padding-block:34px}
.home-svc,.home-work{padding-block:34px}
.trustbar{padding-block:14px}

.sec-head{margin-bottom:12px}
.sec-head h2{font-size:clamp(23px,2.6vw,31px);line-height:1.18}
.sec-head p{margin-top:6px}

.wp{padding:20px 18px;gap:12px}
.tier{padding:18px 16px;gap:12px}
.who{padding:15px 14px}
.eng{padding:16px 15px}
.proc li{padding:12px 11px}
.proc{margin-top:18px;gap:10px}

.rp{gap:18px}
.trio{gap:12px}
.trio > section{padding:14px 16px}

.hero-grid{padding-block:22px 26px}
.herolead{margin-top:12px}

@media (max-width:700px){
  section,.home-svc,.home-work{padding-block:24px}
  .sec-head{margin-bottom:10px}
  .rp{gap:16px}
  .hero-grid{padding-block:16px 20px}
  /* the floor: nothing below here gets smaller */
  .btn,button.btn{min-height:44px}
}

/* --- density pass 4: "tighter!" ------------------------------------------
   What was still open, measured at 1440px before this pass:
     #pricing 1483 · .trio 1322 · footer 595 · #how 546 · #services 498

   The footer had not been touched at all in any earlier pass — 595px of
   link list is a tenth of the page. The contact card (822px on its own) is
   the single tallest thing in .trio, and almost all of it is the wizard's
   own padding rather than its fields.

   Still holding the floor: line-height 1.6+, body copy size unchanged, and
   every tap target >= 44px. Those are not negotiable for a page people open
   on a phone. ------------------------------------------------------------ */

/* footer */
.foot{padding-block:22px 14px!important;gap:20px!important}
.foot h4{margin-bottom:8px}
.foot ul,.foot-links{gap:6px!important}
.foot li{line-height:1.45}
.foot-base .wrap{padding-block:10px!important}

/* the contact wizard — padding, not fields */
.fbody{padding:14px;gap:10px}
.form-stage{gap:10px}
.form-stage h3{margin:0 0 2px;font-size:19px}

/* about / founder */
.founder-sec .founder{gap:14px}

/* pricing + work cards */
.wp{padding:16px 15px;gap:10px}
.wp ul{gap:7px}
.work .wbody{padding:14px 15px 15px}
.tier{padding:15px 14px;gap:10px}
.faq{margin-top:10px}

/* bands, once more */
section{padding-block:28px}
.home-svc,.home-work{padding-block:28px}
.sec-head{margin-bottom:10px}

@media (max-width:700px){
  section,.home-svc,.home-work{padding-block:20px}
  .foot{padding-block:18px 12px!important;gap:16px!important}
  .fbody{padding:12px}
  /* the floor, restated so a later rule cannot quietly undercut it */
  .btn,button.btn,.copy{min-height:44px}
}

/* --- starfield canvas (shared with /app/) -------------------------------- */
.obn-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero.hero-top{position:relative}
/* The hero's own content must stay above the field.
   #mesh is deliberately NOT listed here: it is an absolutely-positioned
   overlay, and giving it position:relative drops it into normal flow, which
   stacked it above .wrap and took the hero from 499px to 1219px. It already
   paints above the starfield because it comes later in the DOM. */
.hero.hero-top > .wrap{position:relative;z-index:1}