/* ==========================================================================
   Solutions4sf · Agentforce readiness
   The page opens on an instrument. Drop your own exports and the instrument
   reads them; nothing is uploaded, the parsing happens in this tab.

   Palette   ground #080D10 · panel #10171C · ink #E7EEF3
             key #2DB8F5 · warn #F2A05B · pass #4FD39A · fail #E8756A
   Type      Archivo display · IBM Plex Sans prose · IBM Plex Mono data
   Layout    One 72rem column. Rules divide. Nothing is a tile.
   ========================================================================== */

:root{
  --ground:#080D10; --panel:#10171C; --panel-2:#161F26;
  --line:rgba(180,205,220,.13); --line-firm:rgba(180,205,220,.26);
  --ink:#E7EEF3; --ink-2:#A9BAC6; --ink-3:#71838F;
  --key:#2DB8F5; --key-dim:rgba(45,184,245,.11); --key-line:rgba(45,184,245,.36);
  --warn:#F2A05B; --warn-dim:rgba(242,160,91,.10);
  --pass:#4FD39A; --pass-dim:rgba(79,211,154,.10);
  --fail:#E8756A; --fail-dim:rgba(232,117,106,.10);
  --display:'Archivo',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shell:min(72rem,100% - 2.5rem);
  --read:44rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-2);font-family:var(--sans);
  font-size:1.0125rem;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance}
p{margin:0 0 1.1em;max-width:var(--read)}
a{color:var(--key);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--key);outline-offset:3px}
.shell{width:var(--shell);margin-inline:auto}
.band{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.label{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.4rem}
.label b{color:var(--key);font-weight:500}

/* ---- masthead ---------------------------------------------------------- */
.top{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:2rem;padding-block:.9rem}
.brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--display);
  font-weight:800;letter-spacing:-.03em;color:var(--ink);font-size:1.05rem}
.brand span{font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.top nav{margin-left:auto;display:flex;gap:1.9rem;font-size:.9rem}
.top nav a{color:var(--ink-2)} .top nav a:hover{color:var(--key)}
@media(max-width:56rem){.top nav{display:none}}

/* ---- hero -------------------------------------------------------------- */
.hero{padding-block:clamp(3.25rem,7vw,5.5rem) clamp(2rem,4vw,3rem)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.75rem);font-weight:800;line-height:1.02;
  letter-spacing:-.038em;margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--key)}
.lede{font-size:clamp(1.08rem,.6vw+1rem,1.28rem);color:var(--ink-2);max-width:40rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);
  font-size:.95rem;font-weight:600;padding:.9rem 1.6rem;border-radius:2px;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.btn--key{background:var(--key);color:#04121A}
.btn--key:hover{background:#57C8F8}
.btn--line{color:var(--ink);border-color:var(--line-firm);background:none}
.btn--line:hover{border-color:var(--key);color:var(--key)}
.btn--sm{padding:.55rem 1rem;font-size:.85rem}
.fine{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:1.35rem}

/* ---- the instrument ---------------------------------------------------- */
.panel{border:1px solid var(--line);background:var(--panel);
  margin-top:clamp(2.25rem,4vw,3.25rem);position:relative}
.panel.is-live{border-color:var(--key-line)}
.panel__top{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.panel__top b{color:var(--ink);font-weight:500}
.panel__top .right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.chip{border:1px solid var(--line-firm);padding:.18rem .5rem;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase}
.chip--sample{color:var(--warn);border-color:var(--warn)}
.chip--live{color:var(--pass);border-color:var(--pass)}

.meter{display:grid;grid-template-columns:repeat(4,1fr)}
.cell{padding:1.6rem 1.5rem;border-right:1px solid var(--line);transition:background .3s}
.cell:last-child{border-right:0}
.cell.flash{background:var(--key-dim)}
.cell__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.cell__v{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.35rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:.55rem 0 .3rem;
  font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cell.fail .cell__v{color:var(--fail)}
.cell.pass .cell__v{color:var(--pass)}
.cell__n{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);margin:0}
.bar{height:3px;background:var(--line);margin-top:.9rem;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);
  transition:width .7s cubic-bezier(.2,.7,.2,1),background .3s}
.cell.fail .bar i{background:var(--fail)}
.cell.pass .bar i{background:var(--pass)}

.verdict{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  padding:1.25rem 1.5rem;border-top:1px solid var(--line);background:var(--warn-dim)}
.verdict.a{background:var(--pass-dim)} .verdict.c{background:var(--fail-dim)}
.verdict__tag{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);padding:.3rem .6rem;
  white-space:nowrap}
.verdict.a .verdict__tag{color:var(--pass);border-color:var(--pass)}
.verdict.c .verdict__tag{color:var(--fail);border-color:var(--fail)}
.verdict p{margin:0;font-size:.95rem;color:var(--ink-2);max-width:52rem}
.verdict strong{color:var(--ink)}

/* ---- the drop area ----------------------------------------------------- */
.drop{border-top:1px solid var(--line);padding:1.25rem 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  transition:background .18s}
.drop.over{background:var(--key-dim)}
.drop__t{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin:0;flex:1 1 20rem}
.drop__t b{color:var(--ink);font-weight:500}
.files{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.files li{font-family:var(--mono);font-size:.68rem;color:var(--pass);
  border:1px solid var(--pass);padding:.16rem .45rem}
.files li.bad{color:var(--ink-3);border-color:var(--line-firm)}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

@media(max-width:56rem){
  .meter{grid-template-columns:1fr 1fr}
  .cell:nth-child(2){border-right:0}
  .cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:30rem){
  .meter{grid-template-columns:1fr}
  .cell{border-right:0;border-bottom:1px solid var(--line)}
}

/* ---- section heads, rows, proof, ladder, fit --------------------------- */
.head{max-width:42rem;margin-bottom:2.75rem}
.head h2{font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.032em;
  line-height:1.1;margin-bottom:.9rem}
.head p{color:var(--ink-2);margin:0}

.rows{border-top:1px solid var(--line)}
.rows__r{display:grid;grid-template-columns:3rem minmax(0,1fr) 15rem;gap:1.25rem 1.75rem;
  padding:1.6rem 0;border-bottom:1px solid var(--line);align-items:start}
.rows__n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);padding-top:.28rem}
.rows__r h3{font-size:1.08rem;font-weight:600;margin-bottom:.4rem;font-family:var(--sans)}
.rows__r p{margin:0;font-size:.94rem;max-width:none}
.rows__side{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:1.25rem}
.rows__side b{display:block;color:var(--pass);font-weight:500;margin-bottom:.2rem}
@media(max-width:56rem){
  .rows__r{grid-template-columns:2.25rem minmax(0,1fr);gap:.6rem 1rem}
  .rows__side{grid-column:2;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:.7rem}
}

.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line)}
.proof > div{padding:clamp(1.75rem,3vw,2.5rem)}
.proof > div:first-child{border-right:1px solid var(--line)}
.proof h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin-bottom:.7rem}
.proof p{font-size:.94rem;margin-bottom:0}
.code{font-family:var(--mono);font-size:.775rem;line-height:1.7;color:var(--ink-2);
  background:var(--ground);border:1px solid var(--line);padding:1.1rem 1.25rem;
  margin-top:1.15rem;overflow-x:auto;white-space:pre}
.code .c{color:var(--ink-3)} .code .k{color:var(--key)}
@media(max-width:56rem){
  .proof{grid-template-columns:minmax(0,1fr)}
  .proof > div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}

/* four rungs since repair joined the ladder, and the count is not fixed:
   auto-fit keeps them on one row while each stays readable, then drops to two
   and to one on its own rather than at a width somebody guessed */
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border:1px solid var(--line)}
.ladder article{padding:clamp(1.75rem,3vw,2.4rem);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
/* the grid can wrap, so no single child is reliably the end of a row; the
   negative outer edges are what remove the doubled border instead */
.ladder{margin-right:-1px;margin-bottom:-1px;overflow:hidden}
.ladder .t{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.ladder .p{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:700;
  letter-spacing:-.03em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
  margin-bottom:.45rem}
.ladder .p small{font-family:var(--sans);font-size:.8rem;font-weight:400;letter-spacing:0}
.ladder .w{font-family:var(--mono);font-size:.74rem;color:var(--key);
  padding-bottom:1.15rem;margin-bottom:1.15rem;border-bottom:1px solid var(--line)}
.ladder p{font-size:.93rem;max-width:none}
.ladder .mid{background:var(--panel)}
@media(max-width:56rem){
  .ladder{grid-template-columns:1fr}
}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--line);
  font-size:.95rem;position:relative}
.fit li::before{position:absolute;left:0;top:.72rem;font-family:var(--mono);font-size:.85rem}
.fit .yes li::before{content:"+";color:var(--pass)}
.fit .no li::before{content:"\2013";color:var(--ink-3)}
.fit h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin-bottom:.9rem}
@media(max-width:48rem){.fit{grid-template-columns:1fr;gap:2rem}}

.close{border:1px solid var(--key-line);
  background:radial-gradient(120% 160% at 10% 0%,var(--key-dim),transparent 62%),var(--panel);
  padding:clamp(2.25rem,5vw,3.75rem)}
.close h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.1;margin-bottom:.9rem}

.foot{border-top:1px solid var(--line);padding-block:2.25rem;
  font-family:var(--mono);font-size:.74rem;color:var(--ink-3)}
.foot__in{display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.foot__in .right{margin-left:auto}

/* ---- the generated verdict document ------------------------------------
   Page one of the paid deliverable, produced from whatever was measured.
   Styled as paper on purpose: it has to read as a document, not a screen. */
.doc-wrap{display:none}
.doc-wrap.on{display:block}
.doc{
  --pw:#FBFAF7; --pi:#14140F; --pi2:#4E4E45; --pi3:#8A897E; --pl:#E2E0D6;
  background:var(--pw); color:var(--pi2); border:1px solid var(--pl);
  padding:clamp(1.75rem,4vw,3.25rem); font-size:.95rem; line-height:1.62;
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9);
}
.doc h2,.doc h3{color:var(--pi);letter-spacing:-.02em;font-family:var(--display)}
.doc h2{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:700;line-height:1.14;margin:0}
.doc h3{font-size:.95rem;font-weight:700;margin:0 0 .5rem;font-family:var(--sans)}
.doc p{color:var(--pi2);max-width:none}
.doc__top{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:flex-start;padding-bottom:1.3rem;border-bottom:2px solid var(--pi)}
.doc__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
  color:var(--pi3);text-align:right;line-height:1.75}
.doc__kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pi3);display:block;margin-bottom:.5rem}
.doc__r{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem 1.1rem;
  padding:1rem 0;border-bottom:1px solid var(--pl);align-items:baseline}
.doc__r:first-of-type{border-top:1px solid var(--pl)}
.doc__n{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--pi3)}
.doc__what{font-weight:600;color:var(--pi)}
.doc__sub{font-size:.8rem;color:var(--pi3);display:block;font-weight:400;margin-top:.15rem}
.doc__q{font-family:var(--mono);font-size:.68rem;color:var(--pi3);display:block;
  margin-top:.45rem;white-space:pre-wrap;word-break:break-word}
.doc__val{font-family:var(--mono);font-weight:700;font-size:1rem;
  white-space:nowrap;text-align:right}
.doc .bad{color:#A3372A} .doc .good{color:#12674F}
.doc__stamp{display:flex;flex-wrap:wrap;gap:.9rem 1.25rem;align-items:center;margin-top:1.75rem;
  padding:1.1rem 1.25rem;border:2px solid #A8480F;background:#FDF3EA}
.doc__stamp b{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:#A8480F;border:1px solid #A8480F;padding:.2rem .5rem}
.doc__stamp p{color:#5A3A22;font-size:.92rem;margin:0}
.doc ol{list-style:none;counter-reset:t;padding:0;margin:.85rem 0 0;
  display:flex;flex-direction:column;gap:.7rem}
.doc ol li{counter-increment:t;position:relative;padding-left:2rem;font-size:.91rem}
.doc ol li::before{content:counter(t);position:absolute;left:0;top:.05rem;
  font-family:var(--mono);font-size:.66rem;font-weight:700;color:#A8480F;
  border:1px solid #A8480F;width:1.2rem;height:1.2rem;display:grid;place-items:center}
.doc ol li b{color:var(--pi)}
.doc__foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--pl);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;color:var(--pi3)}

.deal{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;
  padding:1.1rem 1.5rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;color:var(--ink-3)}
.deal label{display:flex;align-items:center;gap:.6rem}
.deal input{font-family:var(--mono);font-size:.8rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--line-firm);padding:.42rem .6rem;
  width:8rem;border-radius:2px}
.deal input:focus{outline:none;border-color:var(--key)}

.gate{display:grid;grid-template-columns:1fr auto;gap:.75rem;margin-top:1.75rem;
  max-width:34rem}
.gate input{font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--line-firm);padding:.85rem 1rem;border-radius:2px}
.gate input:focus{outline:none;border-color:var(--key)}
@media(max-width:34rem){.gate{grid-template-columns:1fr}}

/* ---- the remediation planner -------------------------------------------
   The visitor assembles their own scope. What they leave with is a budget
   request, not a brochure: weeks, price band, and the verdict it buys. */
.plan{border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.plan__hd{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.plan__hd b{color:var(--ink);font-weight:500}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.15rem;
  padding:1.15rem 1.5rem;border-bottom:1px solid var(--line);align-items:start;
  cursor:pointer;transition:background .16s}
.opt:hover{background:var(--panel-2)}
.opt input{appearance:none;width:1.05rem;height:1.05rem;margin:.32rem 0 0;
  border:1px solid var(--line-firm);background:var(--ground);cursor:pointer;
  display:grid;place-items:center;transition:border-color .16s,background .16s}
.opt input:checked{border-color:var(--key);background:var(--key)}
.opt input:checked::after{content:"";width:.42rem;height:.72rem;margin-top:-.18rem;
  border:solid #04121A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt__t{font-weight:600;color:var(--ink);font-size:.98rem}
.opt__s{display:block;font-weight:400;color:var(--ink-3);font-size:.86rem;margin-top:.2rem}
.opt__w{font-family:var(--mono);font-size:.74rem;color:var(--key);white-space:nowrap;
  padding-top:.2rem}
.opt.off .opt__t,.opt.off .opt__s{color:var(--ink-3)}
.plan__out{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.out{padding:1.4rem 1.5rem;border-right:1px solid var(--line)}
.out:last-child{border-right:0}
.out__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.out__v{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:.5rem 0 0;color:var(--ink);
  font-variant-numeric:tabular-nums}
.out__v.key{color:var(--key)} .out__v.good{color:var(--pass)}
.plan__note{padding:1.15rem 1.5rem;font-size:.92rem;color:var(--ink-2)}
.plan__note b{color:var(--ink)}
@media(max-width:56rem){
  .plan__out{grid-template-columns:1fr 1fr}
  .out:nth-child(2){border-right:0}
  .out:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .opt{grid-template-columns:auto 1fr;gap:.3rem .9rem}
  .opt__w{grid-column:2}
}

@media print{
  body{background:#fff}
  .top,.hero,.band,.foot,.deal,.gate,.drop,#doc-actions{display:none!important}
  .doc-wrap.on{display:block!important}
  .doc{box-shadow:none;border:0;padding:0}
  .shell{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================================
   Scoping estimator
   Used on the implementation pages, where there is nothing to measure yet.
   The visitor describes the shape of the project and the panel prices it.
   ========================================================================== */
.est{border:1px solid var(--line);background:var(--panel);
  margin-top:clamp(2.25rem,4vw,3.25rem)}
.est__hd{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.est__hd b{color:var(--ink);font-weight:500}
.est__hd .right{margin-left:auto}

.q{display:grid;grid-template-columns:15rem 1fr;gap:.6rem 1.75rem;
  padding:1.15rem 1.5rem;border-bottom:1px solid var(--line);align-items:center}
.q__l{font-size:.94rem;color:var(--ink)}
.q__l small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:.15rem}
.q__c{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-firm)}
.seg button{font-family:var(--mono);font-size:.76rem;color:var(--ink-2);
  background:none;border:0;border-right:1px solid var(--line-firm);
  padding:.5rem .85rem;cursor:pointer;transition:background .14s,color .14s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--key);color:#04121A;font-weight:600}

.rng{display:flex;align-items:center;gap:1rem;width:100%}
.rng input[type=range]{flex:1 1 12rem;appearance:none;height:2px;background:var(--line-firm);
  outline:none;cursor:pointer}
.rng input[type=range]::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;
  background:var(--key);border-radius:50%;cursor:pointer}
.rng input[type=range]::-moz-range-thumb{width:1rem;height:1rem;background:var(--key);
  border:0;border-radius:50%;cursor:pointer}
.rng output{font-family:var(--mono);font-size:.86rem;color:var(--key);
  min-width:5.5rem;text-align:right;font-variant-numeric:tabular-nums}

.chk{display:flex;flex-wrap:wrap;gap:.4rem}
.chk label{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);
  border:1px solid var(--line-firm);padding:.42rem .7rem;cursor:pointer;
  transition:border-color .14s,color .14s,background .14s}
.chk label:hover{color:var(--ink)}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk input:checked + span{color:#04121A}
.chk label:has(input:checked){background:var(--key);border-color:var(--key);color:#04121A;font-weight:600}
.chk label:has(input:focus-visible){outline:2px solid var(--key);outline-offset:2px}

.est__out{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.est__out .out{padding:1.5rem}
.phase{padding:1.35rem 1.5rem;border-bottom:1px solid var(--line)}
.phase__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.gantt{display:flex;height:2.1rem;border:1px solid var(--line);overflow:hidden}
.gantt div{display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;
  color:#04121A;border-right:1px solid var(--ground);overflow:hidden;white-space:nowrap;
  transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)}
.gantt div:last-child{border-right:0}
.gantt .g1{background:#2DB8F5} .gantt .g2{background:#4FD39A}
.gantt .g3{background:#F2A05B} .gantt .g4{background:#B9A6F5} .gantt .g5{background:#7E96A6}
.legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.7rem;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.legend i{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem}
.flags{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.flag{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:.92rem;
  color:var(--ink-2);align-items:start}
.flag i{font-family:var(--mono);font-size:.68rem;font-weight:700;padding:.1rem .4rem;
  border:1px solid currentColor;white-space:nowrap;margin-top:.15rem}
.flag.warn i{color:var(--warn)} .flag.info i{color:var(--key)} .flag.good i{color:var(--pass)}
.flag b{color:var(--ink)}

@media(max-width:56rem){
  .q{grid-template-columns:1fr;gap:.7rem}
  .est__out{grid-template-columns:1fr 1fr}
  .est__out .out:nth-child(2){border-right:0}
  .est__out .out:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gantt div{font-size:0}
}

/* ==========================================================================
   Taking the calculation away
   Print, save, mail or copy. The document below is what leaves the site.
   ========================================================================== */
.take{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.75rem}
.take .mailfield{display:flex;gap:.5rem;flex:1 1 20rem;min-width:0}
.take input[type=email]{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:.92rem;
  color:var(--ink);background:var(--panel);border:1px solid var(--line-firm);
  padding:.8rem 1rem;border-radius:2px}
.take input[type=email]:focus{outline:none;border-color:var(--key)}
#x-note{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:.9rem}

/* the estimate rendered as a document, in the same paper language as the
   readiness verdict, so both deliverables look like they came from one desk */
.doc-est{margin-top:clamp(2rem,4vw,3rem)}
.doc table{width:100%;border-collapse:collapse;margin:.9rem 0 0}
.doc th{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pi3,#8A897E);text-align:left;padding:.5rem 0;border-bottom:1px solid var(--pl,#E2E0D6)}
.doc td{padding:.55rem 0;border-bottom:1px solid var(--pl,#E2E0D6);font-size:.9rem}
.doc td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.doc .risk-l{margin:.9rem 0 0;padding:0;list-style:none;counter-reset:none}
.doc .risk-l li{padding-left:0;font-size:.9rem;margin-bottom:.55rem}
.doc .risk-l li::before{content:none}
.doc .risk-l li b{color:var(--pi,#14140F)}

@media print{
  .top,.band,.foot,.est,.take,#x-note,.hero .lede,.hero h1,.hero .label,.fine{display:none!important}
  .doc-wrap,.doc-est{display:block!important;margin:0}
  .doc{box-shadow:none;border:0;padding:0}
  .shell{width:100%}
  body{background:#fff}
}

/* ==========================================================================
   Reserving a start date
   A deposit buys a date and a written scope. The block states exactly what
   it buys and what happens if the scope is not agreed, because that is the
   only way asking for money before a signature is fair.
   ========================================================================== */
.res{border:1px solid var(--key-line);background:var(--panel);margin-top:clamp(2rem,4vw,3rem)}
.res__hd{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.res__hd b{color:var(--key);font-weight:500}
.res__hd .right{margin-left:auto}
.res__body{padding:0}
.res__sums{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.res__sums > div{padding:1.4rem 1.5rem;border-right:1px solid var(--line)}
.res__sums > div:last-child{border-right:0}
.res__v{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:.5rem 0 0;color:var(--ink);
  font-variant-numeric:tabular-nums}
.res__v.key{color:var(--key)}
.res__v.strike{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.res__terms{padding:1.5rem}
.res__terms h3{font-family:var(--sans);font-size:.98rem;font-weight:600;margin:0 0 .9rem}
.res__terms ol{counter-reset:r;list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.65rem}
.res__terms li{counter-increment:r;position:relative;padding-left:2rem;font-size:.94rem}
.res__terms li::before{content:counter(r);position:absolute;left:0;top:.12rem;
  font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--key);
  border:1px solid var(--key-line);width:1.25rem;height:1.25rem;display:grid;place-items:center}
.res__terms li b{color:var(--ink)}
.res__pay{padding:0 1.5rem 1.5rem;border-top:1px solid var(--line);padding-top:1.5rem}
.res__pay h3{font-family:var(--sans);font-size:.98rem;font-weight:600;margin:0 0 .9rem}
.res__tbl{width:100%;border-collapse:collapse}
.res__tbl td{padding:.7rem 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem}
.res__tbl td:first-child{width:11rem;color:var(--ink-3);font-family:var(--mono);font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;padding-top:.85rem}
.res__tbl code{font-family:var(--mono);font-size:.9rem;color:var(--key);display:block}
.res__tbl small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.2rem}
.res__fine{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:1rem 0 0}
.res__act{padding:0 1.5rem 1.5rem;margin-top:0}
@media(max-width:56rem){
  .res__sums{grid-template-columns:1fr 1fr}
  .res__sums > div:nth-child(2){border-right:0}
  .res__sums > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .res__tbl td:first-child{width:7rem}
}
@media print{.res{display:none!important}}

/* ---- the itemised quote -------------------------------------------------
   The visitor watches the number being built, line by line, rather than
   being handed a range and asked to trust it. */
.lines{border-bottom:1px solid var(--line)}
.lines table{width:100%;border-collapse:collapse}
.lines td{padding:.8rem 1.5rem;border-bottom:1px solid var(--line);font-size:.94rem;
  color:var(--ink-2);vertical-align:top}
.lines tr:last-child td{border-bottom:0}
.lines td:last-child{text-align:right;font-family:var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;width:8rem}
.lines tr.is-base td{color:var(--ink);font-weight:600}
.lines small{display:block;color:var(--ink-3);font-size:.81rem;font-weight:400;margin-top:.2rem}
/* a divider inside the list, for when one table carries two kinds of price.
   colspan makes the cell both first and last, so the money column's rules
   have to be undone by hand or the label lands right-aligned in 8rem */
.lines tr.lines__sec td,
.lines tr.lines__sec td:last-child{width:auto;text-align:left;white-space:normal;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;background:var(--ground);
  padding:1.5rem 1.5rem .55rem;border-top:1px solid var(--line)}
.lines__hd{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:1.1rem 1.5rem .2rem}

/* ---- invoice and act ----------------------------------------------------
   Same paper language as the verdict, so every document this practice
   produces looks like it came from the same desk. */
.res-docs{margin-top:clamp(2rem,4vw,3rem)}
.inv-party{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
.inv-party h3{margin-bottom:.4rem}
.inv-party p{font-size:.88rem;line-height:1.6}
.inv-fill{color:var(--pi3,#8A897E);border-left:2px solid var(--pl,#E2E0D6);padding-left:.9rem}
.inv-sign{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.25rem}
.inv-sign p{font-size:.82rem;color:var(--pi3,#8A897E);margin:0}
.inv-line{height:1px;background:var(--pi,#14140F);margin:2.25rem 0 .4rem}
@media(max-width:48rem){.inv-party,.inv-sign{grid-template-columns:1fr;gap:1.25rem}}
@media print{
  .res-docs[hidden]{display:none!important}
  .res-docs{display:block!important}
  #inv-doc,#act-doc{page-break-after:always}
}

/* ==========================================================================
   Navigation
   One bar on every page. Below the tablet breakpoint it becomes a drawer,
   because the previous version simply hid itself and left no way through.
   ========================================================================== */
.top nav a{position:relative;padding-block:.35rem}
.top nav a[aria-current="page"]{color:var(--key)}
.top nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;
  height:1px;background:var(--key)}
.top__cta{margin-left:1.5rem}
.top .btn{padding:.6rem 1.1rem;font-size:.88rem}

.burger{display:none;margin-left:auto;width:2.6rem;height:2.6rem;padding:0;
  background:none;border:1px solid var(--line-firm);border-radius:2px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:.28rem}
.burger span{display:block;width:1.1rem;height:1px;background:var(--ink);
  transition:transform .22s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.29rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.29rem) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:60;background:var(--ground);
  display:flex;flex-direction:column;padding:1.5rem;
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer__top{display:flex;align-items:center;gap:2rem;margin-bottom:2.5rem}
.drawer a{color:var(--ink);text-decoration:none}
.drawer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.drawer li{border-bottom:1px solid var(--line)}
.drawer li:first-child{border-top:1px solid var(--line)}
.drawer li a{display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 0;font-family:var(--display);font-size:1.35rem;font-weight:700;
  letter-spacing:-.025em}
.drawer li a::after{content:"\2192";color:var(--ink-3);font-family:var(--sans);font-weight:400}
.drawer li a[aria-current="page"]{color:var(--key)}
.drawer li a[aria-current="page"]::after{color:var(--key)}
.drawer__foot{margin-top:auto;padding-top:2rem}
.drawer__foot .btn{width:100%;justify-content:center}
.drawer__note{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:1rem 0 0;text-align:center}

@media(max-width:62rem){
  .top nav,.top__cta{display:none}
  .burger{display:flex}
}
@media(min-width:62.0625rem){.drawer{display:none}}
body.no-scroll{overflow:hidden}

.drawer__x{margin-left:auto;width:2.6rem;height:2.6rem;font-size:1.6rem;line-height:1;
  color:var(--ink);background:none;border:1px solid var(--line-firm);border-radius:2px;
  cursor:pointer;display:grid;place-items:center}
.drawer__x:hover{border-color:var(--key);color:var(--key)}

/* ---- phone and tablet, across every page -------------------------------- */
@media(max-width:62rem){
  :root{--shell:min(72rem,100% - 2rem)}
  .est__hd,.res__hd,.panel__top{font-size:.68rem;gap:.5rem 1rem}
  .est__hd .right,.res__hd .right,.panel__top .right{margin-left:0}
  .lines td{padding:.75rem 1rem}
  .lines td:last-child{width:6rem}
  .res__act{padding:0 1rem 1rem}
  .res__terms,.res__pay{padding-inline:1rem}
  .q{padding:1rem}
  .flags{padding:1rem}
  .gantt{height:auto;flex-wrap:wrap}
  .gantt div{min-width:33%;height:1.9rem;font-size:.62rem}
}
@media(max-width:48rem){
  .hero{padding-block:2.25rem 1.5rem}
  .band{padding-block:2.75rem}
  .take{flex-direction:column;align-items:stretch}
  .take .btn{width:100%;justify-content:center}
  .take .mailfield{flex-direction:column}
  .take .mailfield .btn{width:100%}
  .doc{padding:1.35rem}
  .doc__top{flex-direction:column;gap:.75rem}
  .doc__meta{text-align:left}
  .doc__r{grid-template-columns:1.6rem 1fr}
  .doc__val{grid-column:2;text-align:left;margin-top:.35rem}
  .doc table td,.doc table th{font-size:.85rem}
  .res__sums > div{padding:1.1rem}
  .res__tbl td{display:block;width:auto!important;padding:.3rem 0}
  .res__tbl tr{display:block;padding:.6rem 0;border-bottom:1px solid var(--line)}
  .gantt div{min-width:50%}
  .legend{font-size:.64rem}
}
@media(max-width:30rem){
  .out__v,.res__v{font-size:1.35rem}
  .gantt div{min-width:100%}
  .seg{width:100%}
  .seg button{flex:1 1 auto;text-align:center}
}

/* ---- grouped menu -------------------------------------------------------
   Three groups rather than eight flat links: what you measure, what you buy,
   and what you read before deciding. */
.menu{position:relative}
.menu__t{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.9rem;
  color:var(--ink-2);background:none;border:0;padding:.35rem 0;cursor:pointer}
.menu__t span{font-size:.8em;transition:transform .18s ease}
.menu.show .menu__t,.menu__t:hover{color:var(--key)}
.menu.show .menu__t span{transform:rotate(180deg)}
.menu.on > .menu__t{color:var(--key)}
.menu__p{position:absolute;top:calc(100% + .9rem);left:-1rem;min-width:19rem;
  background:var(--panel);border:1px solid var(--line);padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:50}
.menu.show .menu__p{opacity:1;visibility:visible;transform:none}
.menu__p a{display:block;padding:.7rem .85rem;text-decoration:none}
.menu__p a:hover{background:var(--panel-2)}
.menu__p b{display:block;color:var(--ink);font-size:.93rem;font-weight:600}
.menu__p a:hover b,.menu__p a[aria-current="page"] b{color:var(--key)}
.menu__p small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:.1rem}

.drawer__g{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:1.75rem 0 .5rem}
.drawer__g:first-of-type{margin-top:0}
.drawer li a small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:400;
  color:var(--ink-3);letter-spacing:0;margin-top:.15rem}
.drawer li a{align-items:flex-start}

/* ---- contact cards ------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.card{display:block;background:var(--panel);padding:1.6rem 1.5rem;text-decoration:none;
  transition:background .16s ease}
a.card:hover{background:var(--panel-2)}
.card__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.card__v{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:.6rem 0 .5rem;word-break:break-word}
a.card:hover .card__v{color:var(--key)}
.card__s{font-size:.86rem;color:var(--ink-3);margin:0;max-width:none}

/* ---- the router on the home page ---------------------------------------
   Four doors, each phrased as the question the visitor arrived with. */
.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.pick__i{display:flex;flex-direction:column;background:var(--panel);
  padding:1.85rem 1.75rem;text-decoration:none;transition:background .18s ease}
.pick__i:hover{background:var(--panel-2)}
.pick__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--key);margin:0 0 .9rem}
.pick__i h2{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:700;letter-spacing:-.022em;
  line-height:1.2;margin:0 0 .7rem;color:var(--ink)}
.pick__i:hover h2{color:var(--key)}
.pick__i p{font-size:.92rem;color:var(--ink-2);margin:0;max-width:none}
.pick__go{margin-top:auto!important;padding-top:1.1rem;font-family:var(--mono);
  font-size:.72rem;color:var(--ink-3)}
.pick__i:hover .pick__go{color:var(--key)}
.pick__go::after{content:" \2192"}

ul.s4-figures.shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:0;list-style:none;padding:1.9rem 0;margin:clamp(2.5rem,5vw,4rem) auto 0;
  border-block:1px solid var(--line);width:var(--shell)}
.s4-figures li{padding:0 1.75rem;border-left:1px solid var(--line)}
.s4-figures li:first-child{border-left:0;padding-left:0}
.s4-figures b{display:block;font-family:var(--display);
  font-size:clamp(1.85rem,3vw,2.5rem);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--key);font-variant-numeric:tabular-nums}
.s4-figures span{display:block;margin-top:.5rem;font-size:.82rem;line-height:1.45;color:var(--ink-3)}
.s4-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--key);
  text-decoration:none;font-size:.9rem;font-weight:600;border-bottom:1px solid transparent}
.s4-more::after{content:"\2192";transition:translate .16s ease}
.s4-more:hover{border-bottom-color:var(--key)}
.s4-more:hover::after{translate:.18rem 0}
@media(max-width:48rem){
  ul.s4-figures.shell{grid-template-columns:1fr 1fr;gap:1.5rem 0;padding:1.5rem 0}
  .s4-figures li{border-left:0;padding:0 1rem 0 0}
}

@media(max-width:56rem){ .pick{grid-template-columns:1fr} }

/* ---- ten second triage --------------------------------------------------
   The home page asks three questions and answers with a destination and a
   number, then hands the answers to whichever tool it recommended. */
.tri{border:1px solid var(--key-line);background:var(--panel);margin-top:clamp(2rem,4vw,3rem)}
.tri__hd{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;padding:1.05rem 1.5rem;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--ink-3)}
.tri__hd .right{margin-left:auto}
.tri__out{border-top:1px solid var(--line);background:
  radial-gradient(120% 200% at 8% 0%,var(--key-dim),transparent 62%),var(--panel-2)}
.tri__r{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.tri__r > div{padding:1.4rem 1.5rem;border-right:1px solid var(--line)}
.tri__r > div:last-child{border-right:0}
.tri__v{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink);margin:.5rem 0 0;
  font-variant-numeric:tabular-nums}
.tri__v.key{color:var(--key)}
.tri__why{padding:1.5rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.tri__why p{margin:0;flex:1 1 24rem;font-size:.95rem;color:var(--ink-2);max-width:44rem}
.q.carried{background:var(--key-dim)}
.q.carried .q__c span{font-family:var(--mono);font-size:.76rem;color:var(--key)}
@media(max-width:56rem){
  .tri__r{grid-template-columns:1fr 1fr}
  .tri__r > div:nth-child(2){border-right:0}
  .tri__r > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tri__r > div:last-child{grid-column:1 / -1}
}

/* ---- every destination visible, nothing behind a toggle ----------------
   Seven links plus the action fit down to about 1150px; below that the
   whole bar becomes the drawer, which lists the same seven. */
.top__in{gap:1.5rem}
.top nav{gap:1.15rem;font-size:.86rem;flex-wrap:nowrap;white-space:nowrap}
.top nav a{white-space:nowrap}
.top__cta{margin-left:.5rem;flex:none}
.top .btn{padding:.55rem 1rem;font-size:.85rem;white-space:nowrap}
/* the row shrinks in two steps before it gives up, so a 1200px laptop
   window still shows every destination instead of a hamburger */
@media(max-width:82rem){
  .top__in{gap:1.1rem}
  .top nav{gap:.9rem;font-size:.83rem}
  .brand span{display:none}
}
@media(max-width:68rem){
  .top__in{gap:.8rem}
  .top nav{gap:.7rem;font-size:.78rem}
  .top .btn{padding:.5rem .8rem;font-size:.8rem}
  .brand{font-size:.95rem}
}
@media(max-width:60rem){
  .top nav,.top__cta{display:none}
  .burger{display:flex}
}

/* ---- the Account Engagement form ---------------------------------------
   The one place on this site that transmits anything, so it says so. */
.pdform{border:1px solid var(--line);background:var(--panel);
  margin-top:clamp(1.5rem,3vw,2.25rem);overflow:hidden}
.pdform iframe{display:block;border:0;width:100%;background:transparent;
  color-scheme:light}
@media(max-width:48rem){ .pdform iframe{height:720px} }

/* ---- the single contact block on the home page --------------------------
   Text on the left, form on the right, so the page does not grow by another
   full screen just to carry an iframe. */
.contact2{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:start}
.contact2__t h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.1;margin-bottom:.9rem}
.contact2__t p{color:var(--ink-2)}
.contact2 .pdform{margin-top:0}
.contact2 .fine{margin-top:.9rem}
@media(max-width:64rem){
  .contact2{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:48rem){
  .contact2 .pdform iframe{height:620px}
}

/* ---- the services panel -------------------------------------------------
   Six destinations with their prices, so the menu answers "what does this
   cost" before the click rather than after it. */
.menu__p{min-width:26rem}
.menu__p a{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:baseline}
.menu__p b{grid-column:1}
.menu__p small{grid-column:1}
.menu__p i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-family:var(--mono);
  font-size:.7rem;color:var(--ink-3);white-space:nowrap;align-self:center}
.menu__p a:hover i,.menu__p a[aria-current="page"] i{color:var(--key)}
.menu__p a[aria-current="page"]{background:var(--key-dim)}
.menu__p a:first-child{border-bottom:1px solid var(--line);margin-bottom:.25rem;
  padding-bottom:.85rem}
@media(max-width:82rem){ .menu__p{min-width:23rem} }

/* ---- three decisions ----------------------------------------------------
   Research says three tiers and a marked middle one. The marker here says
   where engagements actually start rather than inventing popularity. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:1.5rem}
.tier{background:var(--panel);padding:1.9rem 1.75rem;position:relative;
  display:flex;flex-direction:column}
.tier.is-common{background:#121b24;border-top:2px solid var(--key)}
.tier__flag{position:absolute;top:0;left:1.75rem;transform:translateY(-50%);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:#04121A;background:var(--key);padding:.28rem .6rem;margin:0}
.tier__who{font-size:.88rem;color:var(--ink-3);margin:0 0 1.1rem;min-height:2.6rem}
.tier.is-common .tier__who{margin-top:.5rem}
.tier__p{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--ink);margin:0 0 .5rem;
  font-variant-numeric:tabular-nums}
.tier__p small{font-family:var(--sans);font-size:.82rem;font-weight:400;letter-spacing:0;
  color:var(--ink-3)}
.tier__w{font-family:var(--mono);font-size:.74rem;color:var(--key);
  padding-bottom:1.15rem;margin-bottom:1.15rem;border-bottom:1px solid var(--line)}
.tier p{font-size:.93rem;color:var(--ink-2);max-width:none}
.tier__note{font-size:.86rem!important;color:var(--ink-3)!important}
.tier > p:last-child{margin-top:auto;margin-bottom:0;padding-top:1rem}
@media(max-width:60rem){
  .tiers{grid-template-columns:1fr}
  .tier__who{min-height:0}
  .tier.is-common{margin-top:1rem}
}

/* ---- the lead form ------------------------------------------------------
   Posts to Salesforce Web-to-Lead. The only thing on this site that
   transmits, and it says so under the button. */
.lead{display:flex;flex-direction:column;gap:1rem}
.lead__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lead__f{display:flex;flex-direction:column;gap:.4rem}
.lead__f span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:.5rem;align-items:baseline}
.lead__f i{font-style:normal;font-size:.62rem;color:var(--key);letter-spacing:.08em}
.lead input,.lead textarea{font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--line-firm);padding:.8rem .95rem;
  border-radius:2px;width:100%;resize:vertical}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--key)}
.lead input::placeholder,.lead textarea::placeholder{color:var(--ink-3)}
.lead input:invalid:not(:placeholder-shown){border-color:var(--warn)}
.lead__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.5rem}
.lead__foot .btn{flex:none}
.lead__note{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:0;
  flex:1 1 16rem;line-height:1.5}
@media(max-width:48rem){
  .lead__row{grid-template-columns:1fr}
  .lead__foot .btn{width:100%;justify-content:center}
}

#x-note a{color:var(--key);border-bottom:1px solid var(--key-line)}
#x-note a:hover{border-bottom-color:var(--key)}

/* ---- what happens after a number appears --------------------------------
   One panel, three tabs, one visible at a time. Replaces four stacked
   blocks that gave the visitor no way to tell which one mattered. */
.next{border:1px solid var(--line);background:var(--panel);
  margin-top:clamp(2rem,4vw,3rem)}
.next__hd{padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2rem) 0}
.next__hd .label{margin-bottom:.7rem}
.next__hd h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.1;margin:0 0 1.5rem}
.next__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next__tabs button{background:var(--panel);border:0;padding:1.05rem 1.25rem;
  text-align:left;cursor:pointer;font-family:inherit;position:relative;
  transition:background .16s ease}
.next__tabs button:hover{background:var(--panel-2)}
.next__tabs button b{display:block;color:var(--ink-3);font-size:.96rem;font-weight:600;
  letter-spacing:-.01em}
.next__tabs button small{display:block;color:var(--ink-3);font-size:.79rem;margin-top:.15rem;
  opacity:.75}
.next__tabs button[aria-selected="true"]{background:var(--panel-2)}
.next__tabs button[aria-selected="true"] b{color:var(--key)}
.next__tabs button[aria-selected="true"]::after{content:"";position:absolute;
  left:0;right:0;bottom:-1px;height:2px;background:var(--key)}
.next__p{padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2rem)}
.next__p[hidden]{display:none}
.next__hint{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  margin:0 0 1.5rem;max-width:46rem;line-height:1.6}
.next .doc{margin-bottom:1.5rem}
.next .take{margin-top:0}
.next .res{margin-top:0}
.next #x-note{margin-top:1rem}
@media(max-width:56rem){
  .next__tabs{grid-template-columns:1fr}
  .next__tabs button{padding:.9rem 1.15rem}
  .next__tabs button[aria-selected="true"]::after{top:0;bottom:0;left:0;right:auto;
    width:2px;height:auto}
}

/* ---- the services panel, grouped ---------------------------------------
   Seven flat links read as a sitemap. Grouped by intent they read as a menu. */
.menu__p--wide{min-width:44rem;padding:0}
.menu__all{display:block;padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.menu__all b{color:var(--ink);font-size:.95rem}
.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1px;background:var(--line)}
.menu__col{background:var(--panel);padding:.85rem .6rem 1rem}
.menu__g{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .35rem;padding:0 .55rem}
.menu__cols a{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;
  padding:.55rem;align-items:baseline}
.menu__cols b{grid-column:1;font-size:.9rem}
.menu__cols small{grid-column:1;font-size:.75rem}
.menu__cols i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-3);white-space:nowrap}
.menu__cols a:hover i,.menu__cols a[aria-current="page"] i{color:var(--key)}
.drawer__g--sub{margin-top:1.1rem;opacity:.7;font-size:.6rem}
@media(max-width:82rem){ .menu__p--wide{min-width:38rem} }

/* the wide panel sits near the right of the bar, so anchor it to the right
   edge; anchored left it ran off the viewport and cut the prices off */
.menu__p--wide{left:auto;right:-1rem}
@media(max-width:88rem){ .menu__p--wide{min-width:36rem} }
@media(max-width:74rem){
  .menu__p--wide{min-width:26rem}
  .menu__cols{grid-template-columns:1fr}
}

/* ---- symptom picker -----------------------------------------------------
   For the visitor who has a problem rather than a purchase. Pick what you
   see, get the cause, a way to confirm it yourself, then the price. */
.sym{border:1px solid var(--line);background:var(--panel);margin-top:clamp(2rem,4vw,3rem)}
.sym__hd{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;padding:1.05rem 1.5rem;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--ink-3)}
.sym__hd .right{margin-left:auto}
.sym__list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sym__i{display:flex;align-items:flex-start;gap:.85rem;padding:1.15rem 1.5rem;
  background:var(--panel);cursor:pointer;transition:background .16s ease}
.sym__i:hover{background:var(--panel-2)}
.sym__i.on{background:var(--key-dim)}
.sym__i input{appearance:none;width:1.05rem;height:1.05rem;margin:.22rem 0 0;flex:none;
  border:1px solid var(--line-firm);background:var(--ground);cursor:pointer;
  display:grid;place-items:center;transition:border-color .16s,background .16s}
.sym__i input:checked{border-color:var(--key);background:var(--key)}
.sym__i input:checked::after{content:"";width:.4rem;height:.7rem;margin-top:-.16rem;
  border:solid #04121A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sym__i span{font-size:.98rem;color:var(--ink-2);line-height:1.45}
.sym__i.on span{color:var(--ink)}

.sym__out{border-top:1px solid var(--line)}
.sym__sums{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.sym__sums > div{padding:1.4rem 1.5rem;border-right:1px solid var(--line)}
.sym__sums > div:last-child{border-right:0}
.sym__v{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;margin:.5rem 0 0;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sym__v.key{color:var(--key)} .sym__v.good{color:var(--pass)}

.sym__d{display:grid;grid-template-columns:3rem 1fr;gap:0 1.25rem;padding:1.6rem 1.5rem;
  border-bottom:1px solid var(--line)}
.sym__n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:.3rem 0 0}
.sym__d h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:0 0 .5rem}
.sym__d p{font-size:.94rem;max-width:52rem}
.sym__c{color:var(--ink-3)!important;margin-bottom:.7rem!important}
.sym__c b{color:var(--key);font-weight:600}
.sym__check{border-left:2px solid var(--pass);padding-left:1rem;margin:1rem 0 .8rem!important;
  color:var(--ink-2)!important}
.sym__check b{color:var(--pass)}
.sym__fix{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin:0!important}
.sym__note{padding:1.35rem 1.5rem;font-size:.92rem;color:var(--ink-2);margin:0;max-width:52rem}
@media(max-width:56rem){
  .sym__list{grid-template-columns:1fr}
  .sym__sums{grid-template-columns:1fr 1fr}
  .sym__sums > div:nth-child(2){border-right:0}
  .sym__sums > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sym__d{grid-template-columns:2.25rem 1fr;gap:0 .9rem;padding:1.35rem 1.15rem}
}

.sym__next{padding:1.5rem;border-top:1px solid var(--line)}
.sym__next p{font-size:.94rem;color:var(--ink-2);max-width:52rem}
.sym__act{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.sym__step{border-left:2px solid var(--key);padding-left:1.15rem;margin:0!important}
.sym__step b{color:var(--ink)}
@media(max-width:48rem){ .sym__act .btn{width:100%;justify-content:center} }


/* ---- long-form legal documents ------------------------------------------
   A different reading problem from the rest of the site: nobody scans these,
   they look for one clause. So the numbers sit in the margin as anchors, the
   measure stays near sixty-five characters, and the vertical rhythm is wider
   than the marketing pages because the sentences are longer.               */
.hero--doc{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.doc__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-3);margin-top:1.25rem}
.legal{max-width:46rem}
.legal h2{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.3;
  margin:clamp(2.5rem,4vw,3.4rem) 0 .9rem;position:relative;scroll-margin-top:5rem}
.legal h2:first-child{margin-top:0}
.legal__n{font-family:var(--mono);font-size:.74rem;color:var(--key);
  display:inline-block;min-width:2.1rem;font-weight:500}
.legal h3{font-size:.98rem;font-weight:600;color:var(--ink);
  margin:1.9rem 0 .55rem}
.legal p{font-size:.95rem;line-height:1.72;color:var(--ink-2);margin:0 0 1rem;
  max-width:none}
.legal ul{list-style:none;padding:0;margin:0 0 1.2rem}
.legal li{font-size:.93rem;line-height:1.66;color:var(--ink-2);
  padding:0 0 .55rem 1.35rem;position:relative}
.legal li::before{content:"";position:absolute;left:.15rem;top:.72rem;
  width:.3rem;height:.3rem;background:var(--ink-3);border-radius:50%}
.legal ul.yes li::before,.legal ul.no li::before{border-radius:0;
  width:.42rem;height:.42rem;top:.6rem}
.legal ul.yes li::before{background:var(--pass)}
.legal ul.no li::before{background:var(--fail)}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--key)}
.legal__note{border-left:2px solid var(--key);background:var(--panel);
  padding:1rem 1.25rem;margin:1.5rem 0 1.6rem !important;font-size:.91rem !important}
.legal__t{overflow-x:auto;margin:0 0 1.6rem;border:1px solid var(--line)}
.legal__t table{width:100%;border-collapse:collapse;min-width:34rem}
.legal__t th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:400;
  padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}
.legal__t td{font-size:.87rem;color:var(--ink-2);padding:.75rem 1rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.legal__t tr:last-child td{border-bottom:0}

/* ---- consent -------------------------------------------------------------
   Fixed to the bottom rather than covering the page, and the two answers are
   the same size, because a banner that makes refusing harder is not consent. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);
  border-top:1px solid var(--line);box-shadow:0 -18px 40px rgba(0,0,0,.45)}
.cbar__in{width:var(--shell);margin-inline:auto;padding:1.1rem 0;
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cbar__t{font-size:.86rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:52rem}
.cbar__t a{color:var(--key)}
.cbar__b{display:flex;gap:.6rem;flex-shrink:0}
.cbar__b .btn{padding:.6rem 1.1rem;font-size:.82rem}
@media(max-width:44rem){
  .cbar__in{gap:.9rem}
  .cbar__b{width:100%}
  .cbar__b .btn{flex:1;text-align:center}
}
.cpanel{border:1px solid var(--line);background:var(--panel);
  padding:1.35rem 1.5rem;margin:1.5rem 0 1.8rem}
.cpanel__s{margin:0 0 1rem !important;font-size:.93rem !important}
.cpanel .row{margin-bottom:.9rem}
.cpanel .fine{margin:0}

/* ---- the legal row under the footer ------------------------------------ */
.foot__legal{display:flex;gap:1.4rem;flex-wrap:wrap;padding-bottom:1.6rem;margin-top:-.4rem}
.foot__legal a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--ink-3);text-decoration:none}
.foot__legal a:hover{color:var(--key)}

.lead__gdpr{font-size:.76rem;line-height:1.55;color:var(--ink-3);
  margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line)}
.lead__gdpr a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.lead__gdpr a:hover{color:var(--key)}


/* ---- a grid track will not shrink below its content -------------------
   A 1fr track is minmax(auto, 1fr), and auto means min-content. Put a
   preformatted SQL block inside one and the track grows to the longest
   line, which is how a 360px phone ended up with a 405px page. Every grid
   in this system gets minmax(0, …) tracks and children that may be narrower
   than what they hold, so the scroll containers inside can do their job. */
.proof,.rows__r,.pick,.tiers,.ladder,.fit,.contact2,.next__p,.lines{min-width:0}
.proof > *,.rows__r > *,.pick > *,.tiers > *,.ladder > *,.fit > *,
.contact2 > *,.legal > *{min-width:0}

/* ---- targets you can hit ----------------------------------------------
   WCAG 2.2 AA asks 24 CSS px on every control. These were 15 to 19 tall,
   which is a coin flip with a thumb. The growth is padding around the same
   text, so nothing looks different; it applies at every width rather than
   behind (pointer: coarse), because a rule that cannot be measured in a
   test is a rule that quietly stops being true. */
.foot__legal{gap:.4rem 1.4rem}
.foot__legal a{padding:.55rem 0;display:inline-block;min-height:1.5rem}
.s4-more{padding:.5rem 0;display:inline-block;min-height:1.5rem}
/* the pull-out beside a row holds standalone links, not links inside a
   sentence, so the inline-prose exception in WCAG 2.5.8 does not cover them */
.rows__side a{display:inline-block;padding:.45rem 0;min-height:1.5rem}
.sym__i input[type="checkbox"]{width:1.5rem;height:1.5rem;flex:none}
.sym__i{min-height:3rem;align-items:center}
.drawer a{min-height:2.75rem;display:flex;align-items:center}
.menu__t{min-height:2.75rem}


/* ---- the slider was two pixels tall -----------------------------------
   The track is a hairline on purpose, and the element inherited that, so
   the thing a thumb has to catch was 2px of screen. The box grows to a
   comfortable height with the hairline painted inside it, which changes
   nothing visually and makes the control catchable. The thumb itself goes
   to 1.6rem, comfortably past the 24px WCAG 2.2 asks for. */
.rng input[type=range]{height:2.75rem;background:transparent;cursor:pointer}
.rng input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--line-firm);border-radius:2px}
.rng input[type=range]::-moz-range-track{
  height:2px;background:var(--line-firm);border-radius:2px}
.rng input[type=range]::-webkit-slider-thumb{
  width:1.6rem;height:1.6rem;margin-top:-.7rem}
.rng input[type=range]::-moz-range-thumb{width:1.6rem;height:1.6rem}
.rng input[type=range]:focus-visible{outline:2px solid var(--key);outline-offset:4px}


/* ---- the four controls a thumb actually aims at -----------------------
   WCAG 2.2 AA is satisfied at 24px and everything here already clears it.
   These four go to 44, which is what Apple and Google both ask for, because
   they are the ones a person hits while walking: the menu button, the three
   triage answers, the consent choice and the drawer close. Secondary links
   stay at 24 rather than turning every page into a list of slabs. */
.burger{min-width:2.75rem;min-height:2.75rem}
.seg button{min-height:2.75rem}
.cbar__b .btn{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}
.drawer__x{min-width:2.75rem;min-height:2.75rem;display:flex;
  align-items:center;justify-content:center}


/* ---- the author page ---------------------------------------------------
   A photograph on a light ground is a bright rectangle on a dark page, so it
   is framed rather than dropped in: a panel, a hairline, and a caption that
   explains why the picture is the same one as on LinkedIn. The badges carry
   their own transparency, so they need room rather than treatment. */
.who{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:clamp(2rem,4vw,3.5rem);
  align-items:start}
.who__p{margin:0;border:1px solid var(--line);background:var(--panel);padding:.75rem}
.who__p img{width:100%;height:auto;display:block}
.who__p figcaption{font-size:.76rem;line-height:1.5;color:var(--ink-3);
  padding:.85rem .35rem .15rem}
.who__p figcaption a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.who__p figcaption a:hover{color:var(--key)}
@media(max-width:56rem){
  .who{grid-template-columns:1fr}
  .who__p{max-width:15rem}
}

.certs{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1px;
  border:1px solid var(--line);background:var(--line)}
.certs li{background:var(--ground);padding:1.6rem 1rem 1.35rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;min-width:0}
.certs img{width:5.25rem;height:auto;display:block}
.certs span{font-family:var(--mono);font-size:.7rem;line-height:1.45;
  letter-spacing:.03em;color:var(--ink-2)}

/* ---- the readiness gate -------------------------------------------------
   Named s4gate, not gate. A .gate class already existed at line 274 with
   display:grid and two columns, so the panel inherited it and the copy came
   out one word per line. Two rules with the same name in one stylesheet is
   how a component silently becomes something else. */
.s4gate{margin:1.75rem 0;padding:clamp(1.15rem,3vw,1.7rem);
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--key);border-radius:10px;max-width:44rem}
.s4gate .label{margin:0 0 .35rem}
.s4gate h3{margin:0 0 .5rem;max-width:30ch}
.s4gate > p{margin:0;max-width:60ch}
.s4gate .lead{max-width:26rem;margin-top:1.1rem}
.s4gate .lead__gdpr{margin-top:1rem;max-width:60ch}