/* Startex Test Lab — marketing site
   Palette: ink #0A1B3F · royal #1B5CF5 · sky #19A7F2 · mist #EEF4FF · line #DCE6F5 · white
   Type: Bricolage Grotesque (display) + Instrument Sans (text) */
:root{
  --ink:#0A1B3F; --ink-2:#2A3B5E; --muted:#56668A;
  --royal:#1B5CF5; --royal-d:#1446C4; --sky:#19A7F2;
  --mist:#EEF4FF; --mist-2:#F6F9FF; --line:#DCE6F5; --white:#fff;
  --ok:#0F9D6B; --warn:#B7791F;
  --r-lg:28px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --shadow:0 1px 2px rgba(10,27,63,.05),0 12px 32px -12px rgba(10,27,63,.14);
  --shadow-lg:0 30px 80px -30px rgba(20,70,196,.35);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px; --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.6;color:var(--ink-2);background:var(--white);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.5rem,5.2vw,4rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
h4{font-size:1.05rem}
p{margin:0 0 1em}
ul,ol.flow,ol.steps{margin:0;padding:0}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-family:var(--text);font-weight:600;font-size:.98rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--royal);color:#fff}
.btn-primary:hover{background:var(--royal-d)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--royal);color:var(--royal)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--mist)}
.btn-ghost-light{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost-light:hover{border-color:#fff}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand img{height:46px;width:auto}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none;display:flex;gap:4px}
.main-nav a{display:block;white-space:nowrap;padding:8px 10px;border-radius:10px;color:var(--ink-2);font-size:.93rem;font-weight:500}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--ink);background:var(--mist);text-decoration:none}
.header-actions{display:flex;align-items:center;gap:8px}
.link-quiet{white-space:nowrap;color:var(--ink-2);font-size:.92rem;font-weight:500;padding:8px 10px}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .2s}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-open .menu-toggle span{background:transparent}
.menu-open .menu-toggle span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1440px){ .link-quiet.tester-login{display:none} }
@media (max-width:1240px){
  .menu-toggle{display:inline-flex}
  .main-nav,.header-actions{display:none}
  .menu-open .main-nav{display:block;position:fixed;inset:var(--header-h) 0 0 0;background:#fff;padding:12px 20px 140px;overflow-y:auto;margin:0}
  .menu-open .main-nav ul{flex-direction:column;gap:2px}
  .menu-open .main-nav a{padding:14px 12px;font-size:1.08rem;border-bottom:1px solid var(--mist)}
  .menu-open .header-actions{display:flex;flex-direction:column;align-items:stretch;position:fixed;left:0;right:0;bottom:0;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);z-index:60}
  .menu-open .header-actions .link-quiet{display:block;text-align:center}
  .menu-open{overflow:hidden}
}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section-tight{padding:64px 0}
.bg-mist{background:var(--mist-2);border-block:1px solid var(--line)}
.bg-ink{background:var(--ink);color:#C9D5EE}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}
.head{max-width:720px;margin-bottom:48px}
.head.center{margin-inline:auto;text-align:center}
.head p{font-size:1.1rem;color:var(--muted)}
.bg-ink .head p{color:#AFC0E3}
.kicker{display:inline-block;font-weight:600;font-size:.92rem;color:var(--royal);margin-bottom:12px}
.bg-ink .kicker{color:var(--sky)}
.lead{font-size:1.18rem;color:var(--muted);max-width:640px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto 35%;height:760px;background:radial-gradient(closest-side,rgba(25,167,242,.20),transparent 70%),radial-gradient(closest-side at 30% 60%,rgba(27,92,245,.16),transparent 70%);pointer-events:none;z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .line2{display:block;color:var(--royal)}
@media (min-width:641px){.hero h1 .line2{white-space:nowrap}}
.hero .lead{margin-bottom:32px}
.hero-note{margin-top:22px;font-size:.92rem;color:var(--muted)}

/* Campaign console (hero visual) */
.console{position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(220,230,245,.9);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.console-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.console-title{display:flex;gap:12px;align-items:center}
.app-badge{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--royal),var(--sky));display:grid;place-items:center;color:#fff;flex:none}
.console-title b{display:block;color:var(--ink);font-size:.98rem;line-height:1.3}
.console-title small{color:var(--muted);font-size:.82rem}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);background:#E7F7F0;color:var(--ok)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.review{background:#FFF5E3;color:var(--warn)}
.status.muted{background:var(--mist);color:var(--muted)}
.console-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.metric{background:var(--mist-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.metric small{display:block;color:var(--muted);font-size:.76rem}
.metric b{font-family:var(--display);font-size:1.22rem;color:var(--ink);white-space:nowrap;display:block}
.progress{height:8px;border-radius:8px;background:var(--mist);overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;width:var(--p,60%);background:linear-gradient(90deg,var(--royal),var(--sky));border-radius:8px}
.subs{list-style:none;display:grid;gap:8px}
.subs li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:.86rem}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78rem;color:var(--royal);background:var(--mist)}
.subs b{color:var(--ink);font-weight:600;display:block;line-height:1.3}
.subs small{color:var(--muted);font-size:.78rem}
.feedback{margin-top:12px;padding:14px;border-radius:var(--r-sm);background:var(--ink);color:#D7E2F7;font-size:.86rem;line-height:1.5}
.feedback b{color:#fff;display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:6px}
.feedback b span{color:var(--sky);font-weight:600}
.reward-chip{position:absolute;left:-26px;top:-24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:10px 14px;font-size:.8rem;color:var(--muted);animation:float 6s ease-in-out infinite}
.reward-chip b{display:block;font-family:var(--display);color:var(--ink);font-size:1.1rem}
@keyframes float{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.reward-chip{animation:none}html{scroll-behavior:auto}}

/* ---------- Audience split ---------- */
.split{display:grid;grid-template-columns:7fr 5fr;gap:20px}
.door{border-radius:var(--r-lg);padding:40px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.door h2,.door h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:12px}
.door p{max-width:460px}
.door .ticks{margin:20px 0 30px}
.door .btn{align-self:flex-start;margin-top:auto}
.door-biz{background:var(--ink);color:#C9D5EE}
.door-biz::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(25,167,242,.35),transparent)}
.door-biz h2,.door-biz h3{color:#fff}
.door-biz .kicker{color:var(--sky)}
.door-test{background:linear-gradient(160deg,#fff,var(--mist));border:1px solid var(--line)}
.door .ticks{columns:2;column-gap:24px}
.door-test .ticks{columns:1}

/* ---------- Lists ---------- */
.ticks{list-style:none;display:block}
.ticks li{position:relative;padding-left:28px;margin-bottom:10px;break-inside:avoid}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:17px;height:17px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%231B5CF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.door-biz .ticks li::before,.bg-ink .ticks li::before{background-color:rgba(255,255,255,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%2319A7F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.crosses li::before{background:#FDECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23C53030' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- Grids & tiles ---------- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px;display:flex;flex-direction:column}
.tile p{color:var(--muted);font-size:.97rem}
.tile .ico{width:44px;height:44px;border-radius:12px;background:var(--mist);color:var(--royal);display:grid;place-items:center;margin-bottom:18px}
.tile .ico svg{width:22px;height:22px}
.tile .mini{list-style:none;margin:4px 0 20px;font-size:.9rem;color:var(--ink-2)}
.tile .mini li{padding:5px 0;border-top:1px dashed var(--line)}
.tile-actions{margin-top:auto;display:flex;gap:16px;align-items:center;font-weight:600;font-size:.93rem}
.tile-actions .go{color:var(--ink)}
.tile.flat{background:transparent;border:0;padding:0}
.tile.flat .ico{background:#fff;border:1px solid var(--line)}
.bg-ink .tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.bg-ink .tile p{color:#AFC0E3}
.bg-ink .tile.flat{background:transparent;border:0}
.bg-ink .panel h4{color:var(--ink)}
.bg-ink .tile .ico{background:rgba(25,167,242,.12);color:var(--sky)}
.chip-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chip-list li{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-weight:500;color:var(--ink);font-size:.95rem}

/* ---------- Two-lane workflow ---------- */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.lane{padding:32px}
.lane + .lane{border-left:1px solid var(--line)}
.lane-head{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.1rem}
.lane-head i{width:12px;height:12px;border-radius:4px;background:var(--ink)}
.lane.tester .lane-head i{background:var(--sky)}
.flow{list-style:none;counter-reset:f;position:relative}
.flow li{position:relative;padding:0 0 22px 54px;counter-increment:f}
.flow li::before{content:attr(data-step);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:.88rem;font-family:var(--display)}
.lane.tester .flow li::before{background:var(--sky)}
.flow li::after{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px;background:var(--line)}
.flow li:last-child{padding-bottom:0}.flow li:last-child::after{display:none}
.flow b{display:block;color:var(--ink);line-height:1.35}
.flow span{font-size:.92rem;color:var(--muted)}
.lanes-join{grid-column:1/-1;border-top:1px solid var(--line);background:var(--mist-2);padding:22px 32px;margin:0}
.lanes-join b{color:var(--ink)}

/* ---------- Feature band ---------- */
.band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.panel h4{margin-bottom:14px}
.timeline-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0 18px}
.timeline-days span{height:38px;border-radius:8px;background:var(--mist);display:grid;place-items:center;font-size:.75rem;color:var(--muted);font-weight:600}
.timeline-days span.on{background:linear-gradient(135deg,var(--royal),var(--sky));color:#fff}
.kv{display:grid;grid-template-columns:1fr auto;gap:10px 16px;font-size:.92rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;color:var(--ink);font-weight:600;text-align:right}

/* ---------- Example tasks ---------- */
.task{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;position:relative}
.task .tag{font-size:.78rem;color:var(--muted);font-weight:600}
.task h3{font-size:1.08rem;margin:8px 0 14px}
.task .reward{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--ink)}
.task .reward small{font-family:var(--text);font-size:.8rem;color:var(--muted);font-weight:500;margin-left:4px}
.task .meta{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.82rem;color:var(--muted)}
.example-flag{display:inline-flex;align-items:center;gap:8px;background:#FFF5E3;color:#8A5A12;border-radius:var(--r-pill);padding:6px 14px;font-size:.88rem;font-weight:600;margin-bottom:20px}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq.center{margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--royal);border-bottom:2px solid var(--royal);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 0 22px;color:var(--muted);max-width:740px}
.faq-group + .faq-group{margin-top:48px}

/* ---------- CTA pair ---------- */
.cta-pair{display:grid;grid-template-columns:7fr 5fr;gap:20px}
.cta-box{border-radius:var(--r-lg);padding:44px}
.cta-box h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.cta-box.biz{background:linear-gradient(135deg,var(--royal),#1739A6);color:#DCE7FF}
.cta-box.biz h2,.cta-box.biz .kicker{color:#fff}
.cta-box.test{background:var(--mist);border:1px solid var(--line)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:56px 0 64px;background:linear-gradient(180deg,var(--mist-2),#fff);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:860px}
.page-hero .lead{margin-bottom:28px}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted)}
.prose{max-width:760px}
.prose h2{font-size:1.7rem;margin-top:1.8em}
.prose h3{margin-top:1.6em}
.prose ul{padding-left:1.2em;margin-bottom:1em}
.prose li{margin-bottom:.4em}
.note{border-left:4px solid var(--royal);background:var(--mist);padding:18px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);font-size:.97rem}
.note.warn{border-color:var(--warn);background:#FFF8EB}

/* Deliverable mock */
.report{display:grid;gap:10px}
.report-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.9rem}
.sev{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:6px}
.sev.h{background:#FDECEC;color:#C53030}.sev.m{background:#FFF5E3;color:#8A5A12}.sev.l{background:var(--mist);color:var(--royal)}

/* Steps (horizontal) */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.steps li{counter-increment:s;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-family:var(--display);margin-bottom:14px;font-size:.9rem}
.steps b{display:block;color:var(--ink);margin-bottom:4px;line-height:1.3}
.steps span{font-size:.92rem;color:var(--muted)}

/* Forms */
.form{display:grid;gap:16px}
.field label{display:block;font-weight:600;color:var(--ink);font-size:.94rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 4px rgba(27,92,245,.12)}
.field textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-msg{font-size:.92rem;color:#C53030;min-height:1.2em}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#AFC0E3;padding:72px 0 32px;font-size:.94rem}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.footer-brand img{height:52px;width:auto;background:#fff;border-radius:12px;padding:6px 10px}
.footer-brand p{margin-top:18px;max-width:320px}
.site-footer h4{color:#fff;font-family:var(--text);font-size:.95rem;font-weight:600;margin-bottom:14px;letter-spacing:0}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#AFC0E3}
.site-footer a:hover{color:#fff}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center}
.wa-float svg{width:28px;height:28px}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .hero-grid,.band{grid-template-columns:1fr;gap:44px}
  .console{max-width:560px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .split,.cta-pair{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr}
  .lane + .lane{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:68px 0}
  .g2,.g3,.g4,.steps,.form-row{grid-template-columns:1fr}
  .door,.cta-box{padding:28px}
  .door .ticks{columns:1}
  .console{padding:16px}
  .console-metrics{grid-template-columns:repeat(2,1fr);gap:6px}
  .metric{padding:9px}.metric b{font-size:1.1rem}
  .reward-chip{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .btn-row .btn{flex:1 1 100%}
  .lane{padding:24px}
}
@media print{.site-header,.site-footer,.wa-float{display:none}}

/* Wide closing tile for custom campaigns */
.tile-wide{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:8px 28px;align-items:center;background:linear-gradient(120deg,var(--mist),#fff);}
.tile-wide .ico{margin:0;grid-row:span 2}
.tile-wide h3{margin:0}.tile-wide p{margin:0}
.tile-wide .mini{display:none}
.tile-wide .tile-actions{grid-column:3;grid-row:1/span 2;margin:0}
@media (max-width:640px){.tile-wide{grid-template-columns:1fr}.tile-wide .ico{grid-row:auto}.tile-wide .tile-actions{grid-column:1;grid-row:auto}}

/* ================= v2: patterns adapted from large marketplaces ================= */
.btn-lg{min-height:56px;padding:0 30px;font-size:1.05rem}

/* Dark full-bleed hero */
.hero-dark{background:radial-gradient(900px 520px at 85% 20%,rgba(25,167,242,.28),transparent 60%),radial-gradient(700px 500px at 10% 110%,rgba(27,92,245,.35),transparent 60%),var(--ink);color:#C9D5EE;padding:88px 0 96px}
.hero-dark::before{display:none}
.hero-dark h1{color:#fff}
.hero-dark h1 .line2{color:var(--sky)}
.hero-dark .lead{color:#C9D5EE}
.hero-points{list-style:none;display:grid;gap:10px;margin:0 0 34px}
.hero-points li{position:relative;padding-left:30px;color:#fff;font-weight:500}
.hero-points li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:rgba(25,167,242,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%2319A7F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.hero-dark .console{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.4);box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}

/* Mega menu */
.has-mega{position:static}
.mega-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:0;background:none;font:inherit;font-size:.93rem;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.mega-btn:hover,.mega-btn[aria-expanded="true"],.mega-btn[aria-current="page"]{color:var(--ink);background:var(--mist)}
.mega-btn svg{transition:transform .2s}
.mega-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(10,27,63,.3)}
.mega.open{display:block}
.mega-inner{width:min(var(--wrap),100% - 40px);margin:auto;display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:28px;padding:28px 0 32px}
.mega-h{font-weight:600;font-size:.85rem;color:var(--muted);margin:0 0 10px}
.mega-col ul{list-style:none;display:grid;gap:2px}
.mega-col a{display:block;padding:9px 10px;margin-left:-10px;border-radius:10px;color:var(--ink);text-decoration:none}
.mega-col a:hover{background:var(--mist)}
.mega-col b{display:block;font-weight:600;font-size:.95rem}
.mega-col small{display:block;color:var(--muted);font-size:.83rem}
.mega-promo{background:var(--mist);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mega-promo b{font-family:var(--display);color:var(--ink);font-size:1.1rem}
.mega-promo p{margin:0;color:var(--muted);font-size:.92rem}
.mega-all{font-weight:600;font-size:.9rem;margin-top:4px}
.header-inner{position:relative}
.site-header .wrap.header-inner{position:static}
.site-header{position:sticky}
@media (max-width:1240px){
  .menu-open .mega-btn{width:100%;justify-content:space-between;padding:14px 12px;font-size:1.08rem;border-bottom:1px solid var(--mist);border-radius:0}
  .mega{position:static;box-shadow:none;border:0}
  .mega-inner{grid-template-columns:1fr;gap:6px;padding:4px 0 12px;width:100%}
  .mega-promo{display:none}
  .mega-h{margin:10px 0 4px 12px}
  .mega-col a{margin-left:0;padding:10px 12px}
  .mega-col small{display:none}
}

/* Campaign showcase cards */
.show{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.show-art{height:140px;display:grid;place-items:center;color:#fff;position:relative}
.show-art svg{width:40px;height:40px;position:relative;z-index:1}
.show-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 14px)}
.sg1{background:linear-gradient(135deg,#1B5CF5,#19A7F2)}
.sg2{background:linear-gradient(135deg,#0A1B3F,#1B5CF5)}
.sg3{background:linear-gradient(135deg,#1446C4,#5B8CFF)}
.sg4{background:linear-gradient(135deg,#0E7FB8,#19A7F2)}
.show-body{padding:20px;display:flex;flex-direction:column;flex:1}
.show .tag{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.12rem}
.show p{color:var(--muted);font-size:.93rem;margin:8px 0 12px}
.show-meta{font-size:.85rem;color:var(--ink-2);background:var(--mist-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:16px}
.show .tile-actions{flex-direction:column;align-items:flex-start;gap:6px}

/* Category link grid */
.cat-grid{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cat-grid a{display:block;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:500;font-size:.95rem;text-decoration:none;height:100%}
.cat-grid a:hover{border-color:var(--royal);color:var(--royal)}
@media (max-width:1060px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr)}.hero-dark{padding:56px 0 64px}}

/* Upsell trio */
.upsell{border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:28px;background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:flex-start}
.upsell .ico{width:44px;height:44px;border-radius:12px;background:rgba(25,167,242,.14);color:var(--sky);display:grid;place-items:center;margin-bottom:18px}
.upsell p{color:#AFC0E3;flex:1}
.main-nav .mega-promo .btn-primary{color:#fff;background:var(--royal);padding:0 16px;border-radius:var(--r-pill)}
.main-nav .mega-promo .btn-primary:hover{background:var(--royal-d)}
.main-nav .mega-all{padding:4px 0;background:none;color:var(--royal)}
/* backdrop-filter traps position:fixed children — drop it while the mobile menu is open */
.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}

/* Task catalogue */
.cat-ico{width:36px;height:36px;border-radius:10px;background:var(--mist);color:var(--royal);display:grid;place-items:center;flex:none}
.cat-ico svg{width:19px;height:19px}
.task-cat{list-style:none;margin-top:14px}
.task-cat li{padding:10px 0;border-top:1px dashed var(--line)}
.task-cat b{display:block;color:var(--ink);font-weight:600;font-size:.96rem}
.task-cat span{color:var(--muted);font-size:.88rem}

.mega-inner{grid-template-columns:repeat(var(--cols,3),1fr) 1fr}
@media (max-width:1240px){.mega-inner{grid-template-columns:1fr}}
.creator-band{display:grid;grid-template-columns:1.6fr auto;gap:28px;align-items:center}
@media (max-width:760px){.creator-band{grid-template-columns:1fr}}
.mega-inner{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) minmax(0,.9fr);gap:22px}
@media (max-width:1240px){.mega-inner{grid-template-columns:1fr}}

/* ---------- AEO answer blocks, articles, glossary ---------- */
.answer-sec{padding:40px 0 0}
.answer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:stretch}
.answer-box{background:#fff;border:1px solid var(--line);border-left:5px solid var(--royal);border-radius:var(--r-md);padding:26px 28px}
.answer-box h2{font-size:1.35rem;margin-bottom:10px}
.answer-text{font-size:1.07rem;color:var(--ink-2);margin:0}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts div{background:var(--mist-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.facts dt{font-size:.8rem;color:var(--muted);font-weight:600}
.facts dd{margin:2px 0 0;color:var(--ink);font-weight:600;font-size:.93rem;line-height:1.35}
.meta-line{color:var(--muted);font-size:.92rem;margin:0}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.article-side{display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 20px)}
.side-links{list-style:none}.side-links li{padding:7px 0;border-top:1px dashed var(--line);font-size:.93rem}
.toc{background:var(--mist-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;margin:28px 0}
.toc ol{margin:8px 0 0;padding-left:1.2em}
.table-wrap{overflow-x:auto;margin:0 0 1.2em}
.prose table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose thead th{background:var(--mist);color:var(--ink)}
.prose tbody th{color:var(--ink);font-weight:600;background:var(--mist-2)}
.az{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.az a{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.88rem;color:var(--ink)}
.glossary{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.term{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.term dt{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.1rem}
.term dd{margin:6px 0 0;color:var(--muted)}
.term:target{border-color:var(--royal);box-shadow:0 0 0 4px rgba(27,92,245,.12)}
@media (max-width:900px){.answer-grid,.article-grid{grid-template-columns:1fr}.article-side{position:static}}
@media (max-width:640px){.facts,.glossary{grid-template-columns:1fr}}
/* TestLancer wordmark */
.brand img{height:34px;width:auto}
.footer-brand img{height:52px;width:auto;padding:10px 14px}
@media (max-width:640px){.brand img{height:28px}}
.brand{flex:none;display:block}
@media (max-width:1320px) and (min-width:1241px){.header-actions .link-quiet{display:none}}
@media (max-width:1440px) and (min-width:1241px){.main-nav a,.main-nav .mega-btn{padding:8px 7px}.header-inner{gap:16px}}
.header-inner{width:min(1320px,100% - 40px)}
@media (min-width:1241px){.link-quiet.tester-login{display:none}}
@media (max-width:1360px) and (min-width:1241px){.header-actions .link-quiet{display:none}}
@media (min-width:1441px){.main-nav a,.main-nav .mega-btn{padding:8px 8px}.header-inner{gap:18px}}
/* SVG wordmark (TestLancer primary logo) */
.brand img{height:34px;width:auto}
.footer-brand img{height:36px;width:auto;background:none;padding:0;border-radius:0}
.footer-brand::after{content:"App Testing · Freelance";display:block;margin-top:10px;font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#7F8FB3}
.footer-brand p{margin-top:14px}
.footer-brand::after{content:none}
.footer-brand .tagline{display:block;margin-top:12px;font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#7F8FB3}

/* ---------- Hero campaign slider ---------- */
.cs{position:relative}
.cs-stage{position:relative}
.cs-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.99);transition:opacity .55s ease,transform .55s ease;visibility:hidden}
.cs-slide[hidden]{display:block}
.cs-slide.is-active{position:relative;opacity:1;transform:none;visibility:visible}
.cs-slide.is-active .subs li{animation:csRow .5s both;animation-delay:calc(.15s + var(--d) * .12s)}
.cs-slide.is-active .feedback{animation:csRow .5s .6s both}
.cs-slide.is-active .progress i{animation:csFill 1.1s .2s both}
.cs-slide.is-active .console-metrics .metric{animation:csRow .45s both}
.cs-slide.is-active .console-metrics .metric:nth-child(2){animation-delay:.05s}
.cs-slide.is-active .console-metrics .metric:nth-child(3){animation-delay:.1s}
.cs-slide.is-active .console-metrics .metric:nth-child(4){animation-delay:.15s}
.cs-slide.is-active .status:not(.review)::before{animation:csPulse 1.6s ease-in-out infinite}
@keyframes csRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes csFill{from{width:0}}
@keyframes csPulse{50%{opacity:.35}}
.cs-bar{display:flex;align-items:center;gap:10px;margin-top:16px}
.cs-tabs{display:flex;gap:6px;flex-wrap:wrap}
.cs-tab{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#C9D5EE;font:inherit;font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer}
.cs-tab:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.cs-tab.is-active{background:#fff;color:var(--ink);border-color:#fff}
.cs-timer{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#06B6D4,#2563EB,#7C3AED)}
.cs-tab.is-active .cs-timer{animation:csTimer var(--cs-dur,5.5s) linear forwards}
.cs.is-paused .cs-tab.is-active .cs-timer{animation-play-state:paused}
@keyframes csTimer{to{width:100%}}
.cs-pause{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.cs-pause .i-play{display:none}
.cs.is-paused .cs-pause .i-play{display:block}.cs.is-paused .cs-pause .i-pause{display:none}
.cs-note{margin:10px 0 0;font-size:.78rem;color:#8FA3CC}
@media (prefers-reduced-motion:reduce){.cs-slide,.cs-slide *{transition:none!important;animation:none!important}.cs-timer{display:none}}
@media (max-width:640px){.cs-tab{font-size:.76rem;padding:6px 10px}}