/* ServiceProof consumer site — Listrak LIGHT look (white body + dark navy rhythm bands).
   Newsreader (display) + Manrope (body) + DM Mono (labels/code).
   Scheme: light tokens at :root; the dark navy zones (nav, #hero, .cred, .blk.cta,
   .blk.vprop, footer, .phone, .codebox) locally REMAP the same tokens, so every
   var() reference — rules here AND inline styles emitted by the page classes —
   resolves correctly in both zones. */
:root{
  --ink:#ffffff; --ink2:#eef2f7; --surface:#f7f9fc; --card:#ffffff; --card2:#f4f7fb;
  --line:#e3e8f0; --btn-line:#c9d2de; --muted:#9aa3b2; --soft:#6b7280; --body:#3b4252;
  --head:#111827; --white:#111827; /* --white = strongest text (was "brightest on dark") */
  --gold:#c08a17; --gold2:#b7791f; --teal:#2f8f8a; --teal2:#177d78; --blue:#2a8cff;
  --green:#1eea8f; --olive:#5f7434; --rust:#b0492f; --purple:#6d4fc1;
  --code-bg:#0b111d;
  --r:12px; --r2:20px; --tr:cubic-bezier(.25,.8,.25,1);
}
/* DARK NAVY ZONES — the Listrak light/dark page rhythm. Same tokens, remapped
   locally, so inline var() styles inside these zones render on navy correctly. */
nav,#hero,.cred,.blk.cta,.blk.vprop,footer,.phone,.codebox{
  --ink:#0e1523; --ink2:#111827; --surface:#16202f; --card:#1b2537; --card2:#202c42;
  --line:#2c3340; --btn-line:#2c3340; --muted:#5a6275; --soft:#8a92a6; --body:#c4cad8;
  --head:#f5f7ff; --white:#f5f7ff;
  --gold:#d9a62e; --gold2:#f7ac0b; --teal:#3eada8; --teal2:#52cdc8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}
body{background:var(--ink);color:var(--body);font-family:'Manrope',sans-serif;font-weight:400;line-height:1.7;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,serif;font-weight:600;color:var(--head);line-height:1.14;}
.mono{font-family:'DM Mono',monospace;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 2rem;}
.accent{color:var(--teal2);}
.gold{color:var(--gold2);}

/* NAV — stays dark navy over the light body (Listrak-style) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2.2rem;background:rgba(14,21,35,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);}
.nav-logo{font-family:'Newsreader',serif;font-size:1.25rem;font-weight:600;letter-spacing:.06em;color:var(--white);white-space:nowrap;}
.nav-logo b{color:var(--teal2);font-weight:600;}
.nav-logo span{color:var(--soft);font-weight:300;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-left:.5rem;}
.nav-links{display:flex;gap:1.25rem;align-items:center;}
.nav-links>a:not(.btn){font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:color .25s var(--tr);}
.nav-links>a:not(.btn):hover{color:var(--gold2);}
.nav-user{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--teal2);}
.btn{display:inline-block;font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--btn-line);color:var(--body);background:none;transition:all .25s var(--tr);cursor:pointer;white-space:nowrap;}
.btn:hover{border-color:var(--teal);color:var(--teal2);}
.btn-gold{background:#17d47f;color:#111827;border-color:transparent;font-weight:600;}
.btn-gold:hover{background:var(--green);color:#111827;}
.btn-teal{background:transparent;color:var(--head);border-color:var(--head);font-weight:500;}
.btn-teal:hover{background:var(--head);color:var(--ink);border-color:var(--head);}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem;margin-left:auto;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--body);border-radius:2px;transition:transform .25s var(--tr),opacity .25s var(--tr);}
nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
nav.open .nav-burger span:nth-child(2){opacity:0;}
nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1150px){
  .nav-burger{display:flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(14,21,35,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:0 1.6rem;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .32s var(--tr),padding .32s var(--tr),visibility 0s .32s;
  }
  nav.open .nav-links{max-height:85vh;overflow-y:auto;padding:.4rem 1.6rem 1.3rem;visibility:visible;transition:max-height .32s var(--tr),padding .32s var(--tr);}
  .nav-links>a:not(.btn){display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.82rem;}
  .nav-user{display:block;padding:.85rem 0;}
  .nav-links .btn{margin-top:.9rem;text-align:center;justify-content:center;}
  .nav-links form{display:block;margin-top:.5rem;}
  .nav-links form .btn{width:100%;}
}

/* HERO — dark navy band over the white body */
#hero{min-height:auto;display:grid;place-items:center;position:relative;overflow:hidden;padding:5.5rem 2rem 3.5rem;
  background:linear-gradient(180deg,#0e1523 0%,#111827 100%);}
#hero::before{content:'';position:absolute;width:720px;height:720px;top:-160px;right:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,173,168,.20) 0%,transparent 70%);animation:drift 15s ease-in-out infinite alternate;}
#hero::after{content:'';position:absolute;width:520px;height:520px;bottom:-80px;left:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,234,143,.10) 0%,transparent 70%);animation:drift 19s ease-in-out infinite alternate-reverse;}
@keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(40px,60px) scale(1.1);}}
/* The TEXT is what gets narrowed (see .hero-title / .hero-lede / .hero-sub below),
   not this container alone. It is now a NARROW column - close to the 720px measure
   the content pages use - so the hero reads as part of the same page; the row needs ~682px. So the
   container stays wide enough for the buttons and each text element sets its own
   measure, which is what makes the block read as a centered front page. */
.hero-inner{position:relative;z-index:2;max-width:790px;margin:0 auto;text-align:center;}
/* A kicker line, NOT a button. The pill border read as something clickable
   sitting above the headline, which is the one thing it must not do. */
.eyebrow{display:inline-block;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal2);opacity:.8;margin-bottom:1.5rem;}
/* 2.9rem is deliberate, not taste: the H1 is pinned to its TALLEST rotating
   subject (see the pinHeight script on Home), so whichever word wraps worst sets
   the hero's height for everybody. At this measure a larger size pushes "field techs"
   onto a third line and costs 120px of hero. This keeps all eight to two lines. */
.hero-title{font-size:clamp(2.1rem,4.2vw,2.9rem);font-weight:300;line-height:1.1;letter-spacing:-.015em;color:var(--white);max-width:740px;margin:0 auto 1rem;}
.hero-title b{font-weight:600;}
/* The italic one-liner under the headline. Narrower than the headline so the three
   text blocks step inward - 740 / 700 / 650 - instead of all running the same width. */
.hero-lede{font-family:'Newsreader',serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--teal2);max-width:700px;margin:0 auto 1.2rem;}
.hero-sub{font-family:'Newsreader',serif;font-size:clamp(1rem,1.7vw,1.24rem);font-style:italic;line-height:1.55;color:var(--soft);max-width:650px;margin:0 auto .9rem;}
/* SUBPAGE HEADS get their own measure. .hero-title is capped at 740px for the
   HOME hero, which is a rotating line that wants to be narrow - but a page-head
   H1 is a single fixed sentence, and 740px broke one of them onto an extra line.
   The wrap gives 1116px, so 980 is safe and still short of full width. */
.page-head .hero-title{max-width:980px;}
.page-head .hero-sub{max-width:820px;}
.hero-tag{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--gold2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5rem;}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero-ctas .btn{font-size:.78rem;padding:.8rem 1.5rem;}

/* THESIS FLOW STRIP — light tint band */
.flow{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink2);}
.flow-inner{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;padding:2.2rem 2rem;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:180px;}
.flow-node .k{font-family:'Newsreader',serif;font-size:1.35rem;color:var(--head);}
.flow-node .d{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);}
.flow-arrow{color:var(--gold);font-size:1.4rem;}
.flow-node.n1 .k{color:var(--white);} .flow-node.n2 .k{color:var(--teal2);} .flow-node.n3 .k{color:var(--gold2);}

/* SECTIONS */
section.blk{padding:6rem 0;position:relative;}
.section-label{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal2);margin-bottom:1rem;}
.section-title{font-size:clamp(2rem,4vw,2.9rem);font-weight:300;color:var(--head);margin-bottom:1.2rem;max-width:820px;}
.section-title b{font-weight:600;}
.section-body{font-size:1.06rem;color:var(--body);max-width:720px;}
.alt{background:var(--ink2);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:2.5rem;}}

/* phone / chat mock — stays a dark artifact on any section */
.phone{justify-self:center;width:320px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:34px;padding:1.1rem 1rem 1.4rem;box-shadow:0 24px 60px rgba(17,24,39,.28);}
.phone-top{display:flex;align-items:center;gap:.6rem;padding:.3rem .4rem 1rem;border-bottom:1px solid var(--line);margin-bottom:1rem;}
.phone-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));}
.phone-name{font-family:'Manrope';font-weight:500;color:var(--head);font-size:.9rem;}
.phone-name small{display:block;color:var(--green);font-size:.62rem;font-family:'DM Mono';letter-spacing:.1em;}
.bub{max-width:82%;padding:.6rem .85rem;border-radius:16px;font-size:.82rem;line-height:1.45;margin-bottom:.55rem;}
.bub.in{background:var(--surface);color:var(--body);border-bottom-left-radius:5px;}
.bub.out{background:#204a45;color:var(--white);margin-left:auto;border-bottom-right-radius:5px;}
.bub .q{color:var(--teal2);font-family:'DM Mono';font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.2rem;}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.1rem 0 .7rem;}
.chip{font-size:.68rem;font-family:'DM Mono';padding:.35rem .6rem;border:1px solid var(--teal);border-radius:999px;color:var(--teal2);}
.photo-card{background:var(--surface);border-radius:12px;overflow:hidden;margin-bottom:.55rem;max-width:82%;}
.photo-card .img{height:74px;background:linear-gradient(135deg,#2a3550,#1a2130);display:grid;place-items:center;color:var(--muted);font-size:.6rem;font-family:'DM Mono';letter-spacing:.1em;}
.photo-card .cap{padding:.4rem .6rem;font-size:.66rem;color:var(--soft);}

/* build + audience cards — white cards, soft shadow, colored top accents */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media(max-width:900px){.grid3{grid-template-columns:1fr;}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.6rem;box-shadow:0 8px 24px rgba(17,24,39,.06);transition:transform .3s var(--tr),border-color .3s var(--tr);position:relative;overflow:hidden;}
.card:hover{transform:translateY(-4px);border-color:var(--teal);}
.card .tag{font-family:'DM Mono';font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin-bottom:.7rem;}
.card h3{font-size:1.45rem;margin-bottom:.6rem;}
.card p{font-size:.92rem;color:var(--body);}
.card .top{position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--teal));}
.codebox{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;font-family:'DM Mono';font-size:.74rem;color:var(--body);line-height:1.7;overflow-x:auto;margin-top:1.4rem;}
.codebox .c{color:var(--muted);} .codebox .g{color:var(--teal2);} .codebox .y{color:var(--gold2);}
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
@media(max-width:900px){.aud{grid-template-columns:1fr;}}
.aud .card h3{font-size:1.35rem;color:var(--white);}
.aud .who{font-family:'DM Mono';font-size:.64rem;color:var(--soft);letter-spacing:.1em;margin-bottom:1rem;text-transform:uppercase;}
.aud ul{list-style:none;margin-top:.9rem;}
.aud li{font-size:.86rem;padding:.32rem 0 .32rem 1.1rem;position:relative;color:var(--body);}
.aud li::before{content:'>';position:absolute;left:0;color:var(--teal);font-family:'DM Mono';}

/* verticals */
.tier{margin-bottom:2.4rem;}
.tier-h{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem;flex-wrap:wrap;}
.tier-h .t{font-family:'DM Mono';font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);}
.tier-h .s{font-size:.82rem;color:var(--soft);}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;}
.vcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;box-shadow:0 6px 18px rgba(17,24,39,.05);transition:border-color .25s var(--tr),transform .25s var(--tr);}
.vcard:hover{border-color:var(--teal);transform:translateY(-2px);}
a.vcard:hover .n{color:var(--teal2);}
.vcard .n{font-family:'Newsreader',serif;font-size:1.15rem;color:var(--head);margin-bottom:.2rem;}
.vcard .e{font-size:.78rem;color:var(--soft);line-height:1.5;}

/* diff grid */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
@media(max-width:900px){.dgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.dgrid{grid-template-columns:1fr;}}
.diff{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent,var(--teal));border-radius:8px;padding:1.1rem 1.2rem;box-shadow:0 6px 18px rgba(17,24,39,.05);}
.diff h4{font-size:1.05rem;font-family:'Manrope';font-weight:600;color:var(--head);margin-bottom:.35rem;}
.diff p{font-size:.82rem;color:var(--soft);line-height:1.5;}

/* CTA band — dark navy rhythm block */
.cta{text-align:center;background:linear-gradient(145deg,#0e1523,#16213a);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--white);margin-bottom:1rem;}
.cta h2 b{font-weight:600;color:var(--teal2);}
.cta .section-body{margin-left:auto;margin-right:auto;}

/* footer — dark navy block over the white body */
footer{padding:3rem 0 4rem;background:var(--ink2);color:var(--muted);font-size:.8rem;}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:center;}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap;}
.foot-links a{color:var(--soft);font-size:.76rem;letter-spacing:.08em;}
.foot-links a:hover{color:var(--teal2);}

/* credibility strip (Listrak authority) — dark navy band */
.cred{background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cred-inner{display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:center;align-items:flex-start;padding:2.4rem 2rem 1rem;}
.cred-stat{text-align:center;min-width:140px;}
.cred-stat .n{font-family:'Newsreader',serif;font-size:2.2rem;color:var(--gold2);line-height:1;}
.cred-stat .l{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-top:.45rem;line-height:1.5;}
.cred-line{text-align:center;color:var(--soft);font-family:'Newsreader',serif;font-style:italic;font-size:1.2rem;padding:.5rem 2rem 2.4rem;max-width:880px;margin:0 auto;}

/* the arc — the method, 4 steps */
.arc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.5rem;}
@media(max-width:900px){.arc{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.arc{grid-template-columns:1fr;}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;position:relative;box-shadow:0 8px 24px rgba(17,24,39,.06);}
.step-num{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--teal2);letter-spacing:.15em;margin-bottom:.7rem;}
.step h3{font-size:1.35rem;margin-bottom:.5rem;}
.step p{font-size:.85rem;color:var(--body);line-height:1.6;}
.step .em{color:var(--teal2);font-style:normal;}
.step.payoff{border-color:var(--gold);background:linear-gradient(160deg,#fdf3dd,#ffffff);}
.step.payoff .step-num{color:var(--gold2);}
.step.payoff h3{color:var(--gold2);}
.step.payoff .em{color:var(--gold2);}

/* value-prop band (the money line) — dark navy rhythm block */
.vprop{text-align:center;background:linear-gradient(145deg,#0e1523,#16213a);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.vprop .section-label{color:var(--gold2);}
.vprop h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:300;color:var(--white);max-width:940px;margin:0 auto 1.1rem;}
.vprop h2 b{font-weight:600;color:var(--gold2);}
.vprop p{font-size:1.08rem;color:var(--body);max-width:700px;margin:0 auto;}

/* channels */
.chan-chips{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem;}
.chan-chips .cc{font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.08em;padding:.7rem 1.3rem;border:1px solid var(--teal);border-radius:999px;color:var(--teal2);}
.ex-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;margin-top:.5rem;}

/* 2-up card grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem;}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}

/* real product screenshots — dark app shots framed to sit on white */
.shot{display:block;max-width:min(820px,100%);height:auto;border:1px solid var(--line);border-radius:14px;margin:2rem auto 1rem;box-shadow:0 12px 36px rgba(17,24,39,.14);}
.shot-phone{max-width:400px;}

/* pricing plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem;align-items:stretch;}
@media(max-width:900px){.plans{grid-template-columns:1fr;}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:2rem 1.9rem;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(17,24,39,.06);}
.plan.feature{border-color:var(--gold);box-shadow:0 16px 44px rgba(183,121,31,.16);}
.plan .plan-for{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal2);margin-bottom:.6rem;}
.plan.feature .plan-for{color:var(--gold2);}
.plan h3{font-size:1.7rem;color:var(--head);margin-bottom:.3rem;}
.plan .price{font-family:'Newsreader',serif;font-size:3rem;line-height:1;color:var(--head);margin:.5rem 0 .1rem;}
.plan .price small{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--soft);}
.plan .price-sub{font-size:.84rem;color:var(--soft);margin-bottom:1.2rem;line-height:1.5;}
.plan ul{list-style:none;margin:0 0 1.5rem;padding:0;}
.plan li{font-size:.86rem;color:var(--body);padding:.42rem 0 .42rem 1.4rem;position:relative;border-bottom:1px solid var(--line);line-height:1.5;}
.plan li::before{content:'\2713';position:absolute;left:0;color:var(--teal2);}
.plan.feature li::before{color:var(--gold2);}
.plan .plan-cta{margin-top:auto;}
.plan .plan-cta .btn{width:100%;text-align:center;justify-content:center;}

/* showcase — video players + image galleries + placeholders */
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem;}
@media(max-width:760px){.vidgrid{grid-template-columns:1fr;}}
.vidcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(17,24,39,.10);}
.vidcard video{display:block;width:100%;background:#000;max-height:520px;}
.vidcard .vcap{padding:.8rem 1.1rem;}
.vidcard .vcap h4{font-size:1rem;font-family:'Manrope';font-weight:600;color:var(--head);}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.8rem;}
.gallery a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 4px 14px rgba(17,24,39,.05);transition:border-color .2s var(--tr),transform .2s var(--tr);}
.gallery a:hover{border-color:var(--teal);transform:translateY(-3px);}
.gallery img{display:block;width:100%;height:180px;object-fit:cover;object-position:top center;background:#0e1523;}
.gallery .cap{padding:.5rem .7rem;font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.02em;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.8rem;}
.ph{border:1px dashed var(--line);border-radius:12px;padding:2rem 1.2rem;text-align:center;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;background:rgba(17,24,39,.02);}
.ph .ph-ic{font-size:1.7rem;opacity:.45;color:var(--soft);}
.ph .ph-t{font-family:'Manrope';font-weight:600;color:var(--soft);font-size:.95rem;}
.ph .ph-s{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* interior page head */
.page-head{padding-top:8rem;text-align:center;}
.page-head .section-label{justify-content:center;}
.page-head .hero-sub{margin-left:auto;margin-right:auto;}

/* framed diagrams (reused DevPortal SVGs — authored on dark, keep the navy frame) */
.diagram{display:block;max-width:100%;width:100%;border:1px solid var(--line);border-radius:14px;background:#0e1523;padding:1.2rem;margin:2.4rem auto 1rem;box-shadow:0 12px 36px rgba(17,24,39,.12);}
.diagram-cap{text-align:center;font-family:'DM Mono',monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 auto 2rem;}

/* action-pack cards */
.packgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem;}
@media(max-width:900px){.packgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.packgrid{grid-template-columns:1fr;}}
.pack{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem;box-shadow:0 6px 18px rgba(17,24,39,.05);transition:border-color .25s,transform .25s;}
.pack:hover{border-color:var(--teal);transform:translateY(-3px);}
.pack.ai{border-color:rgba(183,121,31,.45);background:linear-gradient(160deg,#fdf6e6,#ffffff);}
.pack.ai:hover{border-color:var(--gold);}
.pack h4{font-size:1.12rem;font-family:'Manrope';font-weight:600;color:var(--head);margin-bottom:.45rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.pack p{font-size:.85rem;color:var(--body);line-height:1.55;}
.pack .badge{font-family:'DM Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;padding:.14rem .5rem;border-radius:999px;border:1px solid var(--teal);color:var(--teal2);}
.pack .badge.aib{border-color:var(--gold);color:var(--gold2);}

/* ── LOGIN (gated-content sign-in) ── */
.login-section{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:6rem 1.5rem 4rem;position:relative;overflow:hidden;}
.login-section::before{content:'';position:absolute;width:600px;height:600px;top:-100px;right:-200px;border-radius:50%;background:radial-gradient(circle,rgba(47,143,138,.10) 0%,transparent 70%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none;}
.login-section::after{content:'';position:absolute;width:400px;height:400px;bottom:-100px;left:-100px;border-radius:50%;background:radial-gradient(circle,rgba(192,138,23,.07) 0%,transparent 70%);animation:drift 18s ease-in-out infinite alternate-reverse;pointer-events:none;}
.login-card{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:2.5rem 2.5rem 2rem;box-shadow:0 20px 60px rgba(17,24,39,.10);}
.login-emblem{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;}
.login-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(192,138,23,.5);}
.login-emblem-label{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);}
.login-card h1{font-family:'Newsreader',serif;font-weight:600;font-size:2rem;color:var(--head);line-height:1.15;margin-bottom:.75rem;}
.login-sub{color:var(--soft);font-size:.9rem;line-height:1.6;margin-bottom:1.75rem;}
.login-field{display:block;margin-bottom:1.1rem;}
.login-field span{display:block;font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.4rem;}
.login-field input{width:100%;padding:.7rem .9rem;background:var(--ink2);border:1px solid var(--line);border-radius:8px;color:var(--head);font-family:'DM Mono',monospace;font-size:.92rem;transition:border-color .2s var(--tr);}
.login-field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,143,138,.15);}
.login-btn{width:100%;margin-top:.5rem;padding:.9rem 1.4rem;justify-content:center;font-size:.82rem;text-align:center;}
.login-error{background:rgba(176,73,47,.08);color:var(--rust);border:1px solid rgba(176,73,47,.35);padding:.65rem .9rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem;}
.login-hint{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);line-height:1.6;}
.login-divider{display:flex;align-items:center;gap:.85rem;margin:1.75rem 0 1.1rem;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.login-request-cta{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:1rem 1.25rem;background:rgba(47,143,138,.05);border:1px solid rgba(47,143,138,.30);border-radius:12px;text-decoration:none;transition:all .25s var(--tr);}
.login-request-cta:hover{background:rgba(47,143,138,.10);border-color:var(--teal);transform:translateY(-1px);box-shadow:0 10px 24px rgba(47,143,138,.15);}
.login-request-cta svg{color:var(--teal2);margin-bottom:.25rem;}
.login-request-cta:hover svg{color:var(--gold2);}
.login-request-label{font-family:'Newsreader',serif;font-size:1.15rem;font-style:italic;color:var(--head);line-height:1;}
.login-request-sub{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.12em;color:var(--soft);margin-top:.15rem;}

/* ── Listrak footer legal bar ─────────────────────────────── */
.foot-legalbar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line);}
.foot-brandline{display:flex;align-items:center;gap:1.4rem;}
.foot-lklogo{height:20px;width:auto;display:block;opacity:.92;}
.foot-socials{display:inline-flex;gap:1rem;align-items:center;}
.foot-socials a{color:var(--soft);display:inline-flex;}
.foot-socials a:hover{color:var(--head);}
.foot-socials svg{width:16px;height:16px;}
.foot-legal{display:flex;gap:1.4rem;flex-wrap:wrap;}
.foot-legal a{color:var(--soft);text-decoration:none;font-size:.78rem;}
.foot-legal a:hover{color:var(--head);}
@media (max-width:760px){.foot-legalbar{flex-direction:column;align-items:flex-start;}}

/* ── Mobile fit hardening (Kirk 07-28: pages ran wider than the phone) ── */
html,body{max-width:100%;overflow-x:hidden;}
.two>*,.grid2>*,.grid3>*,.aud>*,.dgrid>*,.vgrid>*,.plans>*,.arc>*{min-width:0;}
img,video{max-width:100%;height:auto;}
.hero-title,.section-title,h1,h2,h3{overflow-wrap:break-word;}
.codebox{max-width:100%;}

/* Mid-size nav: drop the "by Listrak" tag before the bar crowds (Kirk 07-28) */
@media(max-width:1180px){ .nav-logo span{display:none;} }

/* Active-page nav highlight (Kirk 07-28) */
.nav-links>a.nav-active:not(.btn){color:var(--gold2);}

/* ── LISTRAK CONVERSE hero (2026-08-26) ─────────────────────────────────────
   The Converse home page leads with the product NAME and a live thread beside
   it, per the Converse deck. ADDITIVE ONLY: ServiceProof uses none of these
   classes, so nothing here can reach the field site. Colours come from the
   dark-zone token remap at the top of this file, not from raw hex, so the
   block renders correctly inside #hero. */
.hero-split{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem;align-items:center;text-align:left;}
/* A grid child defaults to min-width:auto and REFUSES to shrink below its own
   content, so on a phone the headline and the thread pushed the page sideways
   instead of wrapping. Same fix the .two/.dgrid rows already carry. */
.hero-split>*{min-width:0;}
.hero-name{overflow-wrap:break-word;}
/* The product name IS the headline here, so it is set large and tight - and it
   is deliberately NOT .hero-title, which the rotator script owns and overwrites. */
.hero-name{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.8rem,6.2vw,4.6rem);color:var(--white);margin:0 0 1.4rem;}
/* The deck sets this line in clean sans, not the site's serif italic - it is a
   definition of the product, and the italic read as a pull-quote instead. */
.hero-split .hero-sub{font-family:'Manrope',sans-serif;font-style:normal;
  font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.55;color:var(--soft);}
.hero-split .hero-sub b{font-weight:700;}
.hero-split .hero-lede,.hero-split .hero-sub{margin-left:0;margin-right:0;max-width:34em;}
/* Three buttons have to make one row at the column width the split gives them;
   at the default .btn size the third wrapped onto a line of its own. */
.hero-split .hero-ctas .btn{padding:.75rem 1.1rem;font-size:.71rem;}
.hero-split .hero-ctas{justify-content:flex-start;margin-top:2rem;}
.hero-split .eyebrow{margin-bottom:1.1rem;color:var(--green);opacity:1;}
/* "Marketing earns the moment. Converse has the conversation." - the promise
   line. Heavier than the lede above it because it is the sentence to remember. */
.hero-claim{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.05rem,2vw,1.4rem);
  line-height:1.35;color:var(--white);margin:1.4rem 0 0;max-width:32em;}
.hero-claim b{color:var(--green);font-weight:700;}
/* Verified-sender block: a shield, a mono label, then the rails. */
.hero-verified{margin-top:2rem;}
.hero-verified .vh{display:flex;align-items:center;gap:.55rem;font-family:'DM Mono',monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.hero-verified .vh svg{width:1.05rem;height:1.05rem;flex:0 0 auto;fill:var(--green);}
.hero-verified .rails{margin-top:.55rem;color:var(--body);font-size:.95rem;}
.hero-verified .rails span{color:var(--muted);margin:0 .45rem;}
.hero-note{margin-top:1rem;font-family:'Newsreader',serif;font-style:italic;color:var(--soft);font-size:.95rem;}
/* The thread beside the headline. .phone already remaps to the dark palette. */
.hero-thread{justify-self:center;width:100%;max-width:340px;}
.hero-thread .phone{width:100%;}
.bub .cap{display:block;margin-top:.45rem;font-family:'DM Mono',monospace;font-size:.58rem;
  letter-spacing:.08em;color:var(--muted);text-transform:none;}
.bub img{width:100%;border-radius:10px;display:block;}
/* Tappable replies - what a form field looks like on this channel. */
.reps{display:flex;gap:.45rem;flex-wrap:wrap;margin:.15rem 0 .7rem;}
.reps .rep{font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600;padding:.4rem .8rem;
  border-radius:999px;border:1px solid var(--line);color:var(--body);background:var(--card2);}
.reps .rep.pick{background:var(--green);border-color:var(--green);color:#0e1523;}

/* This block lives HERE, after every hero base rule, and that placement is
   load bearing: a media query carries no extra specificity, so when it sat
   above .hero-thread{justify-self:center} the base rule won on source order
   and the thread kept centring itself on wider phones. Mobile overrides go
   last. */
/* ── MOBILE PORTRAIT: left-aligned, thread in the middle ───────────────────
   Centred copy on a phone reads as a greeting card; the desktop hero makes a
   statement precisely because it is ranged left, and the phone should make the
   same one. So everything here is a LEFT alignment, not a narrower centre.

   The thread also MOVES. Stacked at the bottom it was three scrolls below the
   headline and most people never reached it, which wastes the one element that
   shows rather than tells. On a phone it belongs between the definition line
   and the promise line: here is what it is -> here is what it looks like ->
   here is what to remember.

   display:contents dissolves .hero-copy so its children become grid items and
   can be ordered around .hero-thread. Gap drops to 0 in the same breath: with
   the wrapper gone, a 2.8rem grid gap would apply between EVERY line instead of
   once between the two columns, and these elements already carry their own
   vertical margins. Desktop is untouched - none of this exists above 980px. */
@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:0;text-align:left;}
  .hero-copy{display:contents;}
  .hero-split .eyebrow{order:1;}
  .hero-name{order:2;}
  .hero-split .hero-sub{order:3;}
  .hero-thread{order:4;justify-self:start;margin:.6rem 0 1.8rem;}
  .hero-claim{order:5;}
  .hero-split .hero-lede{order:6;}
  .hero-verified{order:7;}
  .hero-note{order:8;}
  .hero-split .hero-ctas{order:9;justify-content:flex-start;}
  /* The italic channel line is centred by its base rule via margin:0 auto. */
  .hero-split .hero-lede,.hero-split .hero-sub,.hero-claim,.hero-note{margin-left:0;margin-right:0;}
}

/* THE IDEA band - the four pillars beside the proof tiles. */
.idea-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:3rem;align-items:start;margin-top:2.4rem;}
@media(max-width:980px){.idea-grid{grid-template-columns:1fr;gap:2.2rem;}}
.pillar{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.7rem;}
.pillar .tick{flex:0 0 auto;width:1.35rem;height:1.35rem;margin-top:.15rem;border-radius:50%;
  background:var(--green);display:grid;place-items:center;}
.pillar .tick svg{width:.8rem;height:.8rem;fill:#0e1523;}
.pillar h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.02rem;color:var(--head);margin-bottom:.25rem;}
.pillar p{color:var(--soft);font-size:.95rem;line-height:1.55;}
.stat{border-left:3px solid var(--green);background:var(--card2);border-radius:0 10px 10px 0;padding:1.1rem 1.3rem;margin-bottom:1rem;}
.stat .n{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1;color:var(--green);letter-spacing:-.02em;}
.stat .l{font-weight:700;color:var(--head);margin-top:.4rem;font-size:.95rem;}
.stat .s{color:var(--soft);font-size:.8rem;margin-top:.15rem;}
.stat-src{font-family:'Newsreader',serif;font-style:italic;color:var(--muted);font-size:.78rem;margin-top:.4rem;}

/* The eight plays on the Converse /build page. Four across like the deck,
   halving twice on the way down. .pack supplies the card; this adds the row
   count and the little accent dot that stands in for the deck's icons -
   inline SVG per play would be eight more paths to maintain for decoration
   that carries no meaning a screen reader needs. */
.playgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem;}
@media(max-width:1100px){.playgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.playgrid{grid-template-columns:1fr;}}
.playgrid>*{min-width:0;}
.pack .pi{color:var(--pi,var(--green));font-size:.7rem;line-height:1;flex:0 0 auto;}