/* dark-sections.css — per-section styles for the plate home page. */

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.6rem,5vw,4.5rem)}
/* the mandated H1 is long; sized so it holds in 4-5 lines, not 7 */
.hero .h-display{font-size:clamp(26px,3.7vw,45px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
.hero-slogan{margin-top:18px;font-size:15px;font-style:italic;font-weight:500;color:var(--muted)}
.hero-support{margin-top:10px;font-size:15px;font-weight:600;color:var(--text);max-width:40ch}
.hero-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.hero-foot{margin-top:clamp(2.4rem,5vw,3.6rem);display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;border-top:1px solid var(--soft);padding-top:18px}
.hero-stat{display:flex;align-items:baseline;gap:10px}
.hero-stat .bignum{font-size:34px}
.devices{position:relative;min-width:0}
.dev-laptop{position:relative;z-index:1}
.dev-screen{border:1px solid var(--soft);border-radius:14px;overflow:hidden;
  background:var(--plate-3);
  box-shadow:0 2px 4px rgba(15,26,36,.05), 0 24px 50px -28px rgba(15,26,36,.28)}
.dev-screen img{width:100%}
.dev-base{height:12px;margin:0 -4%;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#E4E9EF,#CBD5E0);border:1px solid var(--soft);border-top:0}
.dev-phone{position:absolute;z-index:2;left:-6%;bottom:-9%;width:27%;
  border:1px solid var(--soft);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 3px 8px rgba(15,26,36,.08), 0 22px 44px -24px rgba(15,26,36,.35)}
.dev-phone img{width:100%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .devices{margin-top:.6rem}
  .dev-phone{left:auto;right:-2%;bottom:-12%;width:30%}
  .hero-foot{flex-direction:column;align-items:flex-start}
}

/* ---------- what we do ---------- */
.wwd-card{display:block;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s}
.wwd-card:hover{transform:translateY(-3px)}
.wwd-ic{width:30px;height:30px;color:var(--blue);margin:12px 0 12px}
.wwd-card .ptitle{font-size:15.5px}
.wwd-card .psub{margin-bottom:14px}
.wwd-go{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue)}

/* ---------- social ---------- */
.social-grid{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:start}
@media(max-width:560px){.social-grid{grid-template-columns:1fr}}
.phone{position:relative;border:1px solid var(--soft);border-radius:26px;padding:16px 11px 12px;
  background:var(--plate-3);
  box-shadow:none}
.phone::after{content:'';position:absolute;right:-4px;top:74px;width:2.5px;height:34px;
  border-radius:2px;background:var(--soft)}
.phone .notch{width:44px;height:6px;border-radius:3px;background:rgba(15,26,36,.18);margin:0 auto 13px}
.feed{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.slot{aspect-ratio:1;border-radius:5px;opacity:0;transform:scale(.6);
  transition:opacity .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1)}
.slot.mine{background:var(--grad-blue)}
.slot.other{background:var(--slate)}
.in .slot,html.motion-off .slot{opacity:1;transform:none}
.fh{font-size:17px;font-weight:700;margin:2px 0 4px;line-height:1.35}
.fs{font-size:14px;font-weight:500;color:var(--muted);margin-bottom:18px}
.stat{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.stat .bignum{font-size:34px}
.stat .one{font-size:22px;font-weight:800;color:var(--muted)}
.label.wide{margin-top:20px;line-height:1.7}
.losslbl{color:var(--text);margin:0 0 8px}
.badge.big{font-size:12px;padding:7px 14px}

/* ---------- ads ---------- */
.ads-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,34px);align-items:center}
@media(max-width:860px){.ads-grid{grid-template-columns:1fr}}
.campaign-list{display:grid;gap:10px}
/* 2-up on desktop: same content at half the height (Philip: trim the
   stat-heavy blocks) */
@media(min-width:700px){.campaign-list{grid-template-columns:1fr 1fr}}
.campaign{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;
  padding:13px 16px;border:1px solid var(--soft);border-radius:var(--r);
  background:var(--plate-2);cursor:default;
  transition:border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.34,1.56,.64,1)}
.campaign:hover,.campaign:focus-visible{border-color:var(--blue);transform:translateY(-2px);
  background:var(--blue-wash);box-shadow:0 0 0 1px var(--blue);outline:none}
.campaign .cl{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:3px}
.campaign .cn{font-size:16px;font-weight:700}
.chips{display:flex;gap:5px}
.chip{width:24px;height:14px;border-radius:4px;background:#8FB6E2;
  transition:background .3s, transform .3s cubic-bezier(.34,1.56,.64,1)}
.campaign:hover .chip,.campaign:focus-visible .chip{background:var(--blue);
  transform:translateY(-1px)}
.total{display:flex;align-items:center;gap:16px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--soft)}
.total .bignum{font-size:62px}
.total .tl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.6}
.ads-side .total{border-top:0;padding-top:0}

/* ---------- tracking ---------- */
.linkhead{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:10px}
.linkrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--soft)}
.linkrow:last-of-type{border-bottom:0}
.linkrow>*,.linkhead>*{min-width:0}
.linkrow .base{font-size:14px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.code{font-size:14px;font-weight:800;background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.linkrow .src{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);margin-left:10px}
.bluel{color:var(--blue)}
.label.gap{margin-top:22px}
.payoff{margin-top:18px;padding:18px;border:1px solid var(--soft);border-radius:var(--r);
  background:var(--blue-wash);font-size:15px;font-weight:600}
.payoff .dim{color:var(--muted);display:block;margin-top:5px;font-weight:500}
.tbar{display:flex;height:58px;border-radius:12px;overflow:hidden;margin-top:10px;
  border:1px solid var(--soft)}
.tseg{display:flex;flex-direction:column;justify-content:center;padding:0 14px;
  white-space:nowrap;overflow:hidden;min-width:0;
  transition:flex-grow 1s cubic-bezier(.34,1.1,.5,1)}
/* one hue means the segment edges have to be drawn, not implied */
.tseg + .tseg{box-shadow:inset 1px 0 0 rgba(255,255,255,.45)}
.tseg .n{font-size:16px;font-weight:800;color:#FFFFFF}
.tseg .l{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#FFFFFF}
.tseg.unknown{background:#DDE3EA}
/* --muted-2 on this fill measures 4.21:1 — one step darker to clear 4.5 */
.tseg.unknown .n{color:var(--text)} .tseg.unknown .l{color:var(--muted)}
/* Every segment's TOP stop now clears 4.5:1 against white text — the labels sit
   at the top of each segment, so the top stop is the one that has to hold.
   Was: s1 4.15, s3 2.77, s4 2.20. */
/* Four channels of OUR work, so all four are blue — a single-hue ramp, deepest
   first, which also happens to be largest first. Orange used to sit at s2 and
   marked bookings he WON, i.e. the one colour reserved for pain spent on a good
   number. Every top stop clears 4.5:1 for the white labels: 8.6 / 6.4 / 5.0 / 4.7 */
.s1{background:linear-gradient(180deg,#0E4C93,#0A3B75)}
.s2{background:linear-gradient(180deg,#145FAE,#0E4C93)}
.s3{background:linear-gradient(180deg,#1A6FCB,#145FAE)}
.s4{background:linear-gradient(180deg,#2276C4,#1A6FCB)}
.s4 .n{color:#FFFFFF} .s4 .l{color:#FFFFFF}
.tclose{font-size:15px;font-weight:600;margin-top:18px}
.tclose .dim{color:var(--muted);font-weight:500}
@media(max-width:480px){
  .linkhead{grid-template-columns:1fr}
  .linkhead .label:first-child{display:none}
  .linkrow{grid-template-columns:1fr;gap:3px;padding:12px 0}
}

/* ---------- journey + onboarding ---------- */
.jrail{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:860px){.jrail{grid-template-columns:1fr}}
.jstep{position:relative;padding-top:14px;border-top:2px solid var(--blue)}
.jstep::before{content:'';position:absolute;top:-5px;left:0;width:8px;height:8px;
  border-radius:50%;background:var(--grad-blue)}
.jtime{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--blue);margin-bottom:6px}
.jt{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:4px}
.js{font-size:12px;font-weight:500;color:var(--muted-2)}
.onum{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.ostep .ptitle{font-size:15px}

/* ---------- reserve ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,38px);align-items:start}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr}
  .calc-grid .calc-out{order:-1}}
.crow{padding:14px 0;border-bottom:1px solid var(--soft)}
.crow:last-of-type{border-bottom:0}
.clab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cval{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.chint{font-size:11px;font-weight:600;color:var(--muted-2);margin-top:8px}
.chint.dim2{margin-top:16px;line-height:1.6}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;--fill:35%}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue) var(--fill),#C3CDD8 var(--fill))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--blue);margin-top:-7px;border:2px solid #fff;
  box-shadow:0 0 0 1px var(--edge);cursor:pointer}
input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:#C3CDD8}
input[type="range"]::-moz-range-progress{height:6px;border-radius:3px;background:var(--blue)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:2px solid #fff;border-radius:50%;
  background:var(--blue);cursor:pointer}
/* neutral well = the without-us state; the ink figure carries the weight */
.calc-out{background:var(--plate-3);
  border:1px solid var(--soft);border-radius:var(--r);padding:clamp(18px,2.6vw,26px)}
.lostnum .bignum{font-size:clamp(44px,5.4vw,64px)}
.losty{font-size:14px;font-weight:600;color:var(--muted);margin:6px 0 16px}
.losty span{font-weight:800;color:var(--text)}
.cchart-shell{background:#FFFFFF;border:1px solid var(--soft);border-radius:10px;
  padding:14px}
.cchart{display:flex;flex-wrap:wrap;gap:4px}
.cblock{width:16px;height:22px;border-radius:4px;background:var(--grad-blue)}
/* a blue bar with a slate bite taken out of it — absence reads as loss more
   honestly than a second hue does */
.cblock.miss{background:var(--slate)}
.ckey{display:flex;gap:18px;margin-top:10px}
.ckey .k{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);display:flex;align-items:center;gap:6px}
.ckey .k::before{content:'';width:9px;height:9px;border-radius:3px}
.ckey .k.b::before{background:var(--grad-blue)}
.ckey .k.miss::before{background:var(--slate)}
.rate{margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)}
.rate b{color:var(--text);font-weight:800}
.picks-h{margin:clamp(2.2rem,4vw,3rem) 0 18px;font-size:clamp(18px,2.2vw,23px)}
.pkg{display:block;width:100%;text-align:left;font-family:var(--ff);color:var(--text);
  cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s,
  border-color .3s}
.pkg:hover{transform:translateY(-3px)}
.pkg[aria-pressed="true"]{border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(22,104,196,.35), 0 14px 32px -20px rgba(14,76,147,.35)}
.pkg .ptitle{font-size:15px}
.pkgo{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue)}
.pkg-all{margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pkg-all .ptitle,.pkg-all .psub{margin:0}
.pkg-all .pkgo{margin-left:auto}
.resform,.resdone{margin-top:22px}
.formh{margin:10px 0 16px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}
.field input{width:100%;margin-top:7px;padding:13px 14px;font-family:var(--ff);font-size:15px;
  font-weight:600;color:var(--text);background:#FFFFFF;
  border:1.5px solid var(--edge);border-radius:10px}
/* .16 blue on white is too faint to register as focus. Full-strength ring. */
.field input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue)}
.ferr{display:none;font-size:11px;font-weight:700;color:var(--text);margin-top:6px}
.field.bad input{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.field.bad .ferr{display:block}
.consent{font-size:12px;font-weight:500;color:var(--muted-2);margin:16px 0 18px;max-width:52ch}
.consent a{color:var(--muted)}

/* ---------- close band + faq ---------- */
.half{text-align:center;padding:clamp(30px,5vw,52px)}
.halfline{font-size:clamp(22px,3.4vw,36px);font-weight:800;letter-spacing:-.015em;
  text-transform:uppercase;line-height:1.15}
.halfsub{margin:14px auto 0;max-width:52ch}
.faqlist{display:grid;gap:12px;max-width:760px}
.fitem{padding:0}
.fitem summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:14.5px;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.fitem summary::-webkit-details-marker{display:none}
.fitem summary::after{content:'+';font-size:19px;font-weight:600;color:var(--blue);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fitem[open] summary::after{transform:rotate(45deg)}
.fitem p{padding:0 22px 18px;font-size:14px;font-weight:500;color:var(--muted);max-width:60ch}
.finale{margin-top:clamp(3rem,6vw,4.5rem);text-align:left}
.finale .h-display{font-size:clamp(26px,4vw,44px);max-width:20ch}
.finale .hero-cta{margin-top:24px}
.foot-todo{margin-left:auto;opacity:.65}

/* ---------- "you get all four" block (replaced the package picker) ---------- */
.getall{margin-top:20px}
.getall-head{margin-bottom:18px}
.alllist{list-style:none;display:grid;gap:14px}
@media(min-width:820px){.alllist{grid-template-columns:1fr 1fr;gap:16px 30px}}
/* tick in column 1, both lines of text stacked in column 2 — without pinning the
   column the <span> fell into the 22px track and wrapped one word per line */
.alllist li{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;align-items:start;
  font-size:14.5px;line-height:1.5}
.alllist .tick{grid-column:1;grid-row:1;margin-top:1px}
.alllist b{grid-column:2;grid-row:1;font-weight:700;color:var(--text)}
.alllist span:last-child{grid-column:2;grid-row:2;color:var(--muted);font-weight:500}
.tick{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--grad-blue);color:#FFFFFF}
.tick svg{width:13px;height:13px}
.allfoot{margin-top:20px;padding-top:14px;border-top:1px solid var(--soft);
  font-size:13.5px;font-weight:700;color:var(--text)}
.resform{margin-top:20px}


/* honeypot: off-screen, never focusable, invisible to a real visitor */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* :not([hidden]) matters — .formerr shares .ferr's display:none, so it needs to
   set display back, but a bare display:block beats the hidden attribute and the
   send-failed line then shows to every visitor on load. */
.formerr:not([hidden]){display:block}
.formerr{margin:0 0 14px;font-size:13px}
.formerr a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---------- Philip pass (4 Aug) ---------- */
.exclusive{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.exdot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.term{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--soft);font-size:14px;font-weight:600;
  color:var(--muted)}
.calc-go{margin-top:18px}
/* the phone was squished: raise the small-type floor on small screens */
@media (max-width:560px){
  body{font-size:16px}
  .label{font-size:11.5px;letter-spacing:.1em}
  .psub,.secnote{font-size:15px}
  .campaign .cl{font-size:10.5px}
  .tseg .l{font-size:10.5px}
  .pfoot{font-size:13.5px}
  .chint{font-size:12.5px}
}

/* ---------- proof: 4 large distinct builds (was 20 thumbnails) ---------- */
.wall4{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.wall4{grid-template-columns:1fr;gap:18px}}
.wall-big{margin:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.wall-big:hover{transform:translateY(-3px)}
.wall-big img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--soft);border-radius:var(--r)}
.wall-big figcaption{display:flex;align-items:baseline;gap:10px;padding:12px 4px 0}
.wall-big figcaption b{font-size:14.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.01em}
.wall-big figcaption span{font-size:12px;font-weight:600;color:var(--muted-2)}
.wall-youbar{margin-top:22px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:20px 24px;text-decoration:none;border-radius:var(--r);
  border:1.5px dashed var(--blue);background:var(--blue-wash);
  transition:background .25s, border-color .25s}
.wall-youbar:hover{background:#DCEAFA;border-style:solid}
.wall-youbar b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--text)}

/* ---------- board: the real CRM screenshot ---------- */
.board-shot{margin:0}
.board-shot img{display:block;width:100%;height:auto;border:1px solid var(--soft);
  border-radius:var(--r-lg)}
.board-shot figcaption{padding:12px 4px 0;font-size:12.5px;font-weight:600;
  color:var(--muted-2)}