/* ============================================================
   iClerk — Clinical Intelligence Platform
   Petite, elegant, compact, medical.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --azure:#005eb8; --azure-deep:#00397a; --azure-wash:#eef4fb; --azure-line:#bcd4ec;
  --ink:#0c1420; --ink-2:#26324a; --muted:#57657e; --faint:#8794a9;
  --paper:#fbfcfd; --panel:#ffffff; --panel-alt:#f5f7fa;
  --rule:#e2e7ee; --rule-2:#cdd6e1;
  --amber:#9a5b06; --amber-wash:#fdf5e6; --amber-line:#e8d5ac;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:54px; --bar-h:26px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ui); background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-top:calc(var(--nav-h) + var(--bar-h));
}
a{color:inherit;text-decoration:none}
::selection{background:var(--azure);color:#fff}
:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 26px}
h1,h2,h3{font-weight:600;letter-spacing:-0.02em;color:var(--ink);line-height:1.2}
.eyebrow{
  font-family:var(--mono);font-size:0.63rem;font-weight:600;
  letter-spacing:0.17em;text-transform:uppercase;color:var(--faint);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{max-width:1060px;margin:0 auto;padding:0 26px;height:var(--nav-h);display:flex;align-items:center;gap:18px}
.nav-logo{display:flex;align-items:center;gap:9px;margin-right:auto;flex-shrink:0}
.nav-logo-mark{
  width:23px;height:23px;background:var(--azure);color:#fff;
  font-family:var(--mono);font-size:0.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.nav-word{font-size:0.92rem;font-weight:600;letter-spacing:0.16em}
.nav-tag{
  font-family:var(--mono);font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--faint);border-left:1px solid var(--rule-2);padding-left:9px;
}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{font-size:0.8rem;color:var(--muted);transition:color .16s}
.nav-links a:hover{color:var(--azure)}
.nav-links a.nav-login{color:var(--ink);font-weight:500}
.nav-links a.is-active{color:var(--ink)}
.nav.scrolled{box-shadow:0 1px 3px rgba(12,20,32,.06)}
.nav-cta{
  border:1px solid var(--azure);background:var(--azure);color:#fff!important;
  padding:6px 13px;font-size:0.78rem;font-weight:500;border-radius:2px;transition:background .16s;
}
.nav-cta:hover{background:var(--azure-deep)}
.nav-burger{display:none;width:26px;height:20px;flex-direction:column;justify-content:center;gap:4px;cursor:pointer}
.nav-burger span{display:block;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.status-bar{
  min-height:var(--bar-h);background:var(--amber-wash);border-bottom:1px solid var(--amber-line);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 8px;padding:3px 12px;
  font-family:var(--mono);font-size:0.62rem;font-weight:600;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--amber);text-align:center;
}
.status-dot{width:5px;height:5px;background:var(--amber);border-radius:50%;flex-shrink:0;animation:dot 2.6s ease-in-out infinite}
@keyframes dot{0%,72%,100%{opacity:1;transform:scale(1)}80%{opacity:.35;transform:scale(.7)}88%{opacity:1;transform:scale(1.15)}}
.sb-sep{opacity:0.42}

/* ---------- hero ---------- */
.hero{padding:76px 0 60px;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,#fff,var(--paper))}
.hero h1{
  font-size:clamp(2.1rem,4.6vw,3.05rem);letter-spacing:-0.035em;line-height:1.08;
  margin:18px 0 22px;max-width:12em;
}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--azure)}
.hero-lede{font-size:1.06rem;color:var(--ink-2);line-height:1.68;max-width:33em}
.hero-aside{font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--muted);margin-top:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  font-size:0.83rem;font-weight:500;border-radius:2px;border:1px solid transparent;
  cursor:pointer;font-family:inherit;transition:background .16s,border-color .16s,color .16s;
}
.btn-solid{background:var(--azure);border-color:var(--azure);color:#fff}
.btn-solid:hover{background:var(--azure-deep);border-color:var(--azure-deep)}
.btn-ghost{background:#fff;border-color:var(--rule-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--azure);color:var(--azure)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.btn-solid .arw{transition:transform .2s ease}
.btn-solid:hover .arw{transform:translateX(3px)}

/* staggered load-in */
.ld{opacity:0;transform:translateY(12px);animation:ld .62s cubic-bezier(.2,.72,.3,1) forwards}
.ld:nth-child(1){animation-delay:.05s}
.ld:nth-child(2){animation-delay:.14s}
.ld:nth-child(3){animation-delay:.24s}
.ld:nth-child(4){animation-delay:.34s}
.ld:nth-child(5){animation-delay:.44s}
@keyframes ld{to{opacity:1;transform:none}}

/* ---------- sections ---------- */
section.band{padding:58px 0;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 10px)}
section.band.tint{background:var(--panel)}
.sec-head{margin-bottom:30px}
.sec-title{font-size:clamp(1.25rem,2.1vw,1.55rem);margin:8px 0 0}
.sec-note{font-size:0.9rem;color:var(--muted);margin-top:9px;max-width:36em}
.sec-head::after{
  content:"";display:block;width:0;height:1px;background:var(--azure);
  margin-top:16px;transition:width .85s cubic-bezier(.65,0,.35,1) .12s;
}
.sec-head.in::after{width:46px}

/* ---------- ruled list ---------- */
.list{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:34px 34px minmax(0,11em) minmax(0,1fr);
  gap:18px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--rule);
  transition:background .2s ease;
}
.row:hover{background:var(--panel)}
.row-n{font-family:var(--mono);font-size:0.66rem;color:var(--faint);letter-spacing:0.06em}
.row-ic{
  position:relative;width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--azure);align-self:center;
}
/* the glyph is solid in the brand colour — it is never the pale thing on the row */
.ic-glyph{position:relative;z-index:1;width:17px;height:17px;display:block}
.ic-glyph path{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* a ring forms around it, then unwinds — the motion lives here, not in the glyph */
.ic-ring{position:absolute;inset:0;width:34px;height:34px;transform:rotate(-90deg);overflow:visible}
.ic-disc{fill:var(--azure-wash);stroke:none;opacity:0}
.ic-arc{
  fill:none;stroke:var(--azure);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.row.in .ic-arc{animation:icRing 13s cubic-bezier(.55,0,.4,1) infinite both}
.row.in .ic-disc{animation:icDisc 13s ease infinite both}
.row.in:nth-child(1) .ic-arc,.row.in:nth-child(1) .ic-disc{animation-delay:0s}
.row.in:nth-child(2) .ic-arc,.row.in:nth-child(2) .ic-disc{animation-delay:.42s}
.row.in:nth-child(3) .ic-arc,.row.in:nth-child(3) .ic-disc{animation-delay:.84s}
.row.in:nth-child(4) .ic-arc,.row.in:nth-child(4) .ic-disc{animation-delay:1.26s}
.row.in:nth-child(5) .ic-arc,.row.in:nth-child(5) .ic-disc{animation-delay:1.68s}
.row.in:nth-child(6) .ic-arc,.row.in:nth-child(6) .ic-disc{animation-delay:2.10s}
@keyframes icRing{
  0%   {stroke-dashoffset:1}
  16%  {stroke-dashoffset:0}
  66%  {stroke-dashoffset:0}
  82%  {stroke-dashoffset:-1}
  100% {stroke-dashoffset:-1}
}
@keyframes icDisc{
  0%   {opacity:0}
  16%  {opacity:1}
  66%  {opacity:1}
  80%  {opacity:0}
  100% {opacity:0}
}
}
.row-name{font-size:0.98rem;font-weight:600;letter-spacing:-0.01em}
.row-txt{font-size:0.88rem;color:var(--muted);line-height:1.62}

/* ---------- flow diagram ---------- */
.flow{display:flex;align-items:stretch;margin-top:6px}
.fstage{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 10px;
}
/* the rail — each stage contributes its segment, together a continuous hairline */
.fstage::before{
  content:"";position:absolute;left:0;right:0;top:calc(74px + 5px);height:1px;
  background:var(--rule-2);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.55,0,.45,1);
}
.fstage:first-child::before{left:50%}
.fstage:last-child::before{right:50%}
.flow.in .fstage::before{transform:scaleX(1)}
.flow.in .fstage:nth-child(1)::before{transition-delay:.05s}
.flow.in .fstage:nth-child(2)::before{transition-delay:.30s}
.flow.in .fstage:nth-child(3)::before{transition-delay:.55s}
.flow.in .fstage:nth-child(4)::before{transition-delay:.80s}
.flow.in .fstage:nth-child(5)::before{transition-delay:1.05s}

/* source zone above the rail — fixed height so every marker lines up */
.fsrc-zone{height:74px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%}
.fsrc{
  border:1px solid var(--azure-line);background:var(--azure-wash);border-radius:2px;
  padding:7px 11px;width:100%;
  opacity:0;transform:translateY(-6px);transition:opacity .45s ease,transform .45s ease;
}
.flow.in .fsrc{opacity:1;transform:none}
.fsrc-name{font-family:var(--mono);font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--azure-deep)}
.fsrc-sub{font-size:0.68rem;color:var(--muted);line-height:1.35;margin-top:2px}
.fstem{
  width:1px;height:14px;background:var(--azure-line);margin-top:5px;
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease;
}
.flow.in .fstem{transform:scaleY(1)}

/* marker sitting on the rail */
.fmk{
  position:relative;z-index:1;width:11px;height:11px;
  border:1px solid var(--azure);background:var(--panel);
  transform:scale(0);transition:transform .4s cubic-bezier(.34,1.4,.5,1);
}
.flow.in .fmk{transform:scale(1)}
.fstage:last-child .fmk{background:var(--azure)}

.ftext{opacity:0;transform:translateY(7px);transition:opacity .45s ease,transform .45s ease;margin-top:13px}
.flow.in .ftext{opacity:1;transform:none}
.fname{font-size:0.85rem;font-weight:600;letter-spacing:-0.01em}
.fsub{font-size:0.73rem;color:var(--muted);line-height:1.45;margin-top:3px}

/* per-stage stagger */
.flow.in .fstage:nth-child(1) .fsrc,.flow.in .fstage:nth-child(1) .fstem,
.flow.in .fstage:nth-child(1) .fmk,.flow.in .fstage:nth-child(1) .ftext{transition-delay:.10s}
.flow.in .fstage:nth-child(2) .fsrc,.flow.in .fstage:nth-child(2) .fstem,
.flow.in .fstage:nth-child(2) .fmk,.flow.in .fstage:nth-child(2) .ftext{transition-delay:.35s}
.flow.in .fstage:nth-child(3) .fsrc,.flow.in .fstage:nth-child(3) .fstem,
.flow.in .fstage:nth-child(3) .fmk,.flow.in .fstage:nth-child(3) .ftext{transition-delay:.60s}
.flow.in .fstage:nth-child(4) .fsrc,.flow.in .fstage:nth-child(4) .fstem,
.flow.in .fstage:nth-child(4) .fmk,.flow.in .fstage:nth-child(4) .ftext{transition-delay:.85s}
.flow.in .fstage:nth-child(5) .fsrc,.flow.in .fstage:nth-child(5) .fstem,
.flow.in .fstage:nth-child(5) .fmk,.flow.in .fstage:nth-child(5) .ftext{transition-delay:1.10s}

.band-foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule)}
.band-foot span{display:block;max-width:48em;font-size:0.79rem;color:var(--faint);line-height:1.62}
.band-foot b{color:var(--muted);font-weight:600}

/* vertical on narrow screens */
@media (max-width:760px){
  .flow{flex-direction:column;align-items:stretch;margin-top:2px}
  .fstage{
    flex:none;display:grid;grid-template-columns:12px minmax(0,1fr);
    column-gap:16px;align-items:start;text-align:left;padding:0 0 22px;
  }
  .fstage:last-child{padding-bottom:0}
  .fstage::before{
    left:5px;right:auto;top:6px;bottom:-6px;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top;
  }
  .fstage:first-child::before{left:5px;top:6px}
  .fstage:last-child::before{display:none}
  .flow.in .fstage::before{transform:scaleY(1)}
  .fsrc-zone{height:auto;grid-column:2;align-items:flex-start;margin-bottom:9px;order:1}
  .fsrc{padding:6px 10px;width:auto;display:inline-block}
  .fstem{display:none}
  .fmk{grid-column:1;grid-row:1;margin-top:1px}
  .ftext{grid-column:2;grid-row:1;margin-top:0}
  /* stages that carry a source: chip sits above the label, marker beside the label */
  .fstage.has-src .fsrc-zone{grid-row:1}
  .fstage.has-src .ftext{grid-row:2}
  .fstage.has-src .fmk{grid-row:2}
}

/* ---------- status ---------- */
.status-body{max-width:40em}
.status-body p{font-size:0.95rem;color:var(--muted);line-height:1.75}
.status-body p+p{margin-top:12px}
.status-body b{color:var(--ink-2);font-weight:600}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule-2);border-radius:2px;background:var(--panel)}
.price-card{padding:22px 22px 24px;display:flex;flex-direction:column}
.price-card+.price-card{border-left:1px solid var(--rule)}
.price-name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.price-name h3{font-size:0.95rem}
.price-fig{font-size:1.45rem;font-weight:600;letter-spacing:-0.02em}
.price-fig span{font-size:0.8rem;font-weight:400;color:var(--faint)}
.price-vol{font-family:var(--mono);font-size:0.7rem;color:var(--muted);margin:6px 0 3px}
.price-unit{font-size:0.72rem;color:var(--faint);margin-bottom:16px}
.price-btn{
  display:block;text-align:center;height:34px;line-height:32px;border-radius:2px;margin-top:auto;
  border:1px solid var(--rule-2);background:var(--panel);color:var(--ink);
  font-size:0.79rem;font-weight:500;cursor:pointer;font-family:inherit;transition:border-color .16s,color .16s,background .16s;
}
.price-btn:hover{border-color:var(--azure);color:var(--azure)}
.price-note{margin-top:16px;font-size:0.79rem;color:var(--faint);line-height:1.62;max-width:42em}
.price-note b{color:var(--muted);font-weight:600}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:#fff;padding:58px 0;scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 10px)}
.cta .eyebrow{color:rgba(255,255,255,0.4)}
.cta h2{color:#fff;font-size:clamp(1.35rem,2.5vw,1.75rem);margin:12px 0 14px}
.cta h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:#8fc0f0}
.cta p{font-size:0.94rem;color:rgba(255,255,255,0.66);line-height:1.7;max-width:36em}
.cta-btn{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;height:40px;padding:0 18px;
  background:#fff;color:var(--ink);border:1px solid #fff;border-radius:2px;
  font-size:0.85rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .16s;
}
.cta-btn:hover{background:#dfe9f5}
.cta-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.cta-fine{margin-top:18px;font-size:0.76rem;color:rgba(255,255,255,0.4);line-height:1.6;max-width:36em}
.cta-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12)}
.cta-trust span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.48)}
.cta-trust svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- footer ---------- */
.footer{background:var(--panel);padding:32px 0 40px}
.footer-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{font-size:0.8rem;color:var(--muted);transition:color .15s}
.footer-links a:hover{color:var(--azure)}
.footer-copy{font-size:0.76rem;color:var(--faint)}
.footer-status{margin-top:14px;font-size:0.74rem;color:var(--faint);line-height:1.62}
.footer-status b{color:var(--muted);font-weight:600}

/* ---------- modals ---------- */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(12,20,32,0.42);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s}
.modal-overlay.open{display:flex;opacity:1}
.modal{background:var(--panel);border:1px solid var(--rule-2);border-radius:2px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 12px 34px rgba(12,20,32,.22)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--rule);background:var(--panel-alt)}
.modal-header h3{font-size:0.98rem}
.modal-close{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--faint);cursor:pointer;padding:0 4px}
.modal-close:hover{color:var(--ink)}
.modal-body{padding:18px 22px}
.modal-body p{font-size:0.85rem;color:var(--muted);line-height:1.68;margin-bottom:12px}
.modal-body ul{padding-left:18px;margin-bottom:14px}
.modal-body li{font-size:0.82rem;color:var(--muted);line-height:1.6;margin-bottom:6px}
.disclaimer-box{background:var(--amber-wash);border:1px solid var(--amber-line);border-radius:2px;padding:13px 15px;margin-bottom:14px;font-size:0.82rem;color:var(--amber);line-height:1.62}
.disclaimer-box strong{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.11em}
.modal-footer{display:flex;gap:9px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--rule);background:var(--panel-alt)}
.modal-btn-cancel,.modal-btn-accept{height:34px;padding:0 16px;border-radius:2px;font-size:0.81rem;font-weight:500;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center}
.modal-btn-cancel{background:var(--panel);border:1px solid var(--rule-2);color:var(--ink)}
.modal-btn-cancel:hover{border-color:var(--muted)}
.modal-btn-accept{background:var(--azure);border:1px solid var(--azure);color:#fff}
.modal-btn-accept:hover{background:var(--azure-deep)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.72,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.ld{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .fsrc,.ftext{opacity:1!important;transform:none!important;transition:none!important}
  .fmk{transform:scale(1)!important;transition:none!important}
  .fstage::before,.fstem{transform:none!important;transition:none!important}
  .ic-arc,.ic-disc{animation:none!important}
  .ic-arc{stroke-dashoffset:0}
  .ic-disc{opacity:1}
  .status-dot{animation:none!important}
  .sec-head::after{width:46px;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;background:var(--panel);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:6px 0;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 26px;font-size:0.86rem;border-bottom:1px solid var(--rule)}
  .nav-links a:last-child{border-bottom:0}
  .nav-cta{margin:8px 26px 6px;text-align:center;justify-content:center}
  .nav-burger{display:flex;margin-left:auto}
  .nav-tag{display:none}
  .row{grid-template-columns:34px minmax(0,1fr);gap:6px 12px;row-gap:6px}
  .row-n{display:none}
  .row-ic{grid-row:1;align-self:center}
  .row-name{grid-row:1}
  .row-txt{grid-column:2;grid-row:2}
  .price-grid{grid-template-columns:1fr}
  .price-card+.price-card{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:520px){
  body{font-size:14.5px;padding-top:calc(var(--nav-h) + var(--bar-h) + 4px)}
  .wrap{padding:0 18px}
  .nav-inner{padding:0 18px}
  section.band{padding:42px 0}
  .hero{padding:48px 0 42px}
  .status-bar{font-size:0.55rem;letter-spacing:0.05em;gap:0 6px}
  .status-bar .sb-mid{display:none}
}

/* ---------- shared additions (same tokens, no new colours) ---------- */
section.band-alt{background:var(--panel-alt)}
/* about.php ledger rows carry three children (number, name, text) and no icon,
   so they cannot use the shared .row template — that reserves an icon track and
   squeezed the title into it, stacking one word per line (34px wide, 76px tall
   at 390px). They get their own grid, and their own stacked form on mobile. */
.about-row{grid-template-columns:34px minmax(0,16em) minmax(0,1fr)}
.prose{max-width:38em}
.prose p{font-size:0.94rem;color:var(--ink-2);line-height:1.75;margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.pull{border-left:2px solid var(--azure);background:var(--azure-wash);padding:15px 20px;margin:22px 0;font-size:0.94rem;color:var(--ink-2);line-height:1.7}
.footer-mark{font-size:0.78rem;color:var(--faint);line-height:1.6;padding-top:14px;margin-top:14px;border-top:1px solid var(--rule);max-width:46em}

/* ---------- legal / long-form document pages ---------- */
.doc{padding:52px 0 64px}
.doc h1{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 6px}
.doc .doc-sub{font-size:0.88rem;color:var(--muted);margin:0 0 30px}
.doc-body{max-width:44em}
.doc-body h2{font-size:1.02rem;margin:32px 0 10px;letter-spacing:-0.01em}
.doc-body h2:first-of-type{margin-top:0}
.doc-body p,.doc-body li{font-size:0.93rem;color:var(--ink-2);line-height:1.75}
.doc-body p{margin:0 0 13px}
.doc-body ul,.doc-body ol{margin:0 0 13px;padding-left:20px}
.doc-body li{margin-bottom:7px}
.doc-body a{color:var(--azure);text-decoration:none;border-bottom:1px solid var(--azure-line)}
.doc-body a:hover{border-bottom-color:var(--azure)}
.doc-body strong{color:var(--ink);font-weight:600}
.status-note{border:1px solid var(--amber-line);background:var(--amber-wash);color:var(--amber);padding:16px 20px;font-size:0.88rem;line-height:1.7;margin:0 0 28px}
.status-note strong{color:var(--amber)}
.contact{border-left:2px solid var(--azure);background:var(--azure-wash);padding:14px 20px;font-size:0.93rem;color:var(--ink-2);margin:18px 0}

/* ---------- forms (contact) ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:38px}}
.info-line{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:0.92rem}
.info-line:first-of-type{border-top:1px solid var(--rule)}
.info-k{font-family:var(--mono);font-size:0.63rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.info-v{color:var(--ink-2);line-height:1.6}
.info-v a{color:var(--azure);text-decoration:none;border-bottom:1px solid var(--azure-line)}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:0.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.req{color:var(--azure)}
.form-input,.form-select,.form-textarea{
  width:100%;font-family:var(--ui);font-size:0.92rem;color:var(--ink);background:var(--panel);
  border:1px solid var(--rule-2);border-radius:2px;padding:10px 12px;transition:border-color .15s ease;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--azure)}
.form-textarea{min-height:130px;resize:vertical;line-height:1.6}
.form-submit{
  height:40px;padding:0 20px;border:0;border-radius:2px;background:var(--azure);color:#fff;
  font-family:var(--ui);font-size:0.88rem;font-weight:600;cursor:pointer;transition:background .15s ease;
}
.form-submit:hover{background:var(--azure-deep)}
.form-success,.form-error{border-radius:2px;padding:16px 18px;font-size:0.9rem;line-height:1.6;margin-bottom:16px}
.form-success{border:1px solid var(--azure-line);background:var(--azure-wash);color:var(--ink-2)}
.form-error{border:1px solid var(--amber-line);background:var(--amber-wash);color:var(--amber)}
.form-success h3{font-size:1rem;margin:0 0 6px}
.doc-tail{font-size:0.78rem;color:var(--faint);margin-top:26px}

/* ============================================================
   how-it-works.php — the worked consultation.
   This page arrived with its own 234-line design system (Inter,
   10px radii, gradients, drop shadows, an NHS-blue header bar).
   Re-skinned onto the site theme: hairline rules, 2px radii,
   restrained type, no gradients, no shadows. Same class names,
   so the page markup is untouched.
   ============================================================ */
.page{max-width:1060px;margin:0 auto;padding:0 26px}

.lead{border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);padding:18px 20px;margin-bottom:16px}
.lead p{margin:0 0 9px;color:var(--muted);font-size:0.88rem;line-height:1.68}
.lead p:last-child{margin-bottom:0}
.lead strong{color:var(--ink);font-weight:600}

.truth-banner{
  border:1px solid var(--amber-line);border-left:2px solid var(--amber);border-radius:2px;
  background:var(--amber-wash);padding:12px 16px;margin-bottom:22px;
  font-size:0.83rem;color:var(--amber);line-height:1.6;
}

.scenario{border:1px solid var(--rule-2);border-radius:2px;background:var(--panel-alt);padding:18px 20px;margin-bottom:22px}
.scenario p{font-size:0.87rem;color:var(--muted);line-height:1.68;margin:0 0 9px}
.scenario p:last-child{margin-bottom:0}
.scenario strong{color:var(--ink);font-weight:600}

/* numbered steps — the ruled-index pattern used on the landing page */
.step{border-top:1px solid var(--rule);padding:20px 0}
.step:last-of-type{border-bottom:1px solid var(--rule)}
/* the must-not-miss step: a left rule needs padding, or the text sits on it */
.step-alert{
  border-left:2px solid #a32020;background:#fbeeee;
  padding:20px 22px 20px 20px;margin:0 0 2px;
}
.step-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.step-num{font-family:var(--mono);font-size:0.66rem;color:var(--faint);letter-spacing:0.06em;flex-shrink:0}
.step-title{font-size:0.98rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin:0}
.step-tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.step-body{font-size:0.87rem;color:var(--muted);line-height:1.7}
.step-body p{margin:0 0 10px}
.step-body p:last-child{margin-bottom:0}
.step-body strong{color:var(--ink-2);font-weight:600}
.step-body ul,.step-body ol{margin:0 0 10px 18px}
.step-body li{margin-bottom:4px}

/* chips */
.tag{
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.1em;text-transform:uppercase;padding:2.5px 7px;border-radius:2px;
  border:1px solid var(--rule-2);background:var(--panel-alt);color:var(--muted);white-space:nowrap;
}
.tag-safeguard{border-color:#bcdccd;background:#ecf5f1;color:#0f6b45}
.tag-ai,.tag-always{border-color:var(--azure-line);background:var(--azure-wash);color:var(--azure-deep)}
.tag-noai{border-color:var(--rule-2);background:var(--panel);color:var(--ink-2)}
.tag-optional,.tag-mode{border-color:var(--rule-2);background:var(--panel-alt);color:var(--faint)}
.ds-tag{border-color:var(--amber-line);background:var(--amber-wash);color:var(--amber)}

/* transcript / example panels */
.convo{border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);margin:12px 0;overflow:hidden}
.convo-head{
  padding:8px 13px;border-bottom:1px solid var(--rule);background:var(--panel-alt);
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.convo-body{padding:13px;font-size:0.8rem;color:var(--muted);line-height:1.72}

.ex-line{display:block;padding:7px 0;border-bottom:1px solid var(--rule);font-size:0.84rem;color:var(--ink-2);line-height:1.6}
.ex-line:last-child{border-bottom:0}
.src{
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.05em;padding:2px 6px;border-radius:2px;margin-left:6px;
  border:1px solid var(--azure-line);background:var(--azure-wash);color:var(--azure-deep);
}
.good{color:#0f6b45}
.bad{color:#a32020}
.arrow{color:var(--faint);font-family:var(--mono);padding:0 6px}

/* the "what this means for Mrs Patel" aside */
.for-mrs-patel{
  border-left:2px solid var(--azure);background:var(--azure-wash);
  padding:12px 16px;margin:12px 0;font-size:0.85rem;color:var(--ink-2);line-height:1.62;
}
.for-mrs-patel-label{
  display:block;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--azure-deep);font-weight:700;margin-bottom:4px;
}

/* the one-line pitch each step ends on */
.pitch-line{
  border-left:2px solid var(--rule-2);padding:2px 0 2px 16px;margin:12px 0 0;
  font-family:var(--serif);font-style:italic;font-size:0.95rem;color:var(--ink-2);line-height:1.5;
}
.pitch-label{
  display:block;font-family:var(--mono);font-style:normal;font-size:0.56rem;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--faint);margin-bottom:4px;
}

/* knowledge-base documents */
.kb-doc{padding:11px 0;border-bottom:1px solid var(--rule)}
.kb-doc:last-child{border-bottom:0}
.kb-doc-title{font-size:0.86rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.kb-doc-desc{font-size:0.79rem;color:var(--muted);line-height:1.55}

/* cost tiles */
.cost-tile{padding:16px 18px;border-right:1px solid var(--rule)}
.cost-tile:last-child{border-right:0}
.cost-tile-num{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--azure);letter-spacing:-0.01em}
.cost-tile-label{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--faint);margin:5px 0 4px}
.cost-tile-desc{font-size:0.78rem;color:var(--muted);line-height:1.55}

@media (max-width:760px){
  .page{padding:0 18px}
  .step-tags{margin-left:0;width:100%}
  .cost-tile{border-right:0;border-bottom:1px solid var(--rule)}
  .cost-tile:last-child{border-bottom:0}
}

/* how-it-works — remaining blocks */
.scenario-label{
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:6px;
}
.raw-transcript,.struct-note{
  border:1px solid var(--rule);border-radius:2px;background:var(--panel-alt);
  padding:13px 15px;margin:10px 0;font-size:0.8rem;color:var(--muted);line-height:1.72;
}
.struct-note{background:var(--panel)}
.struct-note strong{color:var(--ink);font-weight:600}

.kb-list{border-top:1px solid var(--rule);margin:10px 0}
.kb-card{border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);padding:14px 16px;margin:10px 0}

.pearl-block{
  border:1px solid var(--amber-line);border-radius:2px;background:var(--amber-wash);
  padding:13px 16px;margin:12px 0;
}
.pearl-block p{margin:0 0 6px;font-size:0.85rem;color:var(--ink-2);line-height:1.6}
.pearl-block p:last-child{margin-bottom:0}
.pearl-author{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber)}
.pearl-tag{
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.1em;text-transform:uppercase;padding:2.5px 7px;border-radius:2px;
  border:1px solid var(--amber-line);background:var(--panel);color:var(--amber);
}
.tag-feature{border-color:var(--rule-2);background:var(--panel-alt);color:var(--muted)}
.ds-on{color:#0f6b45;font-weight:600}

.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);margin:14px 0}
.cost-summary{font-size:0.82rem;color:var(--muted);line-height:1.62;margin-top:10px}
.ceo-close{
  border-top:1px solid var(--rule);margin-top:30px;padding-top:18px;
  font-size:0.88rem;color:var(--muted);line-height:1.7;
}
.ceo-close strong{color:var(--ink);font-weight:600}
@media (max-width:760px){ .cost-grid{grid-template-columns:1fr} }

/* legal pages — the emphasised status box */
.highlight{
  border:1px solid var(--amber-line);border-left:2px solid var(--amber);border-radius:2px;
  background:var(--amber-wash);padding:14px 17px;margin:14px 0;
  font-size:0.85rem;color:var(--amber);line-height:1.68;
}
.highlight strong{color:var(--amber);font-weight:700}

/* hero masthead — the brand has to be the first thing read, not a nav afterthought */
.brandline{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:20px}
.brand{
  font-size:1.22rem;font-weight:600;letter-spacing:0.19em;color:var(--ink);
  line-height:1;white-space:nowrap;
}
.brand sup{font-size:0.44em;font-weight:500;letter-spacing:0;color:var(--faint);vertical-align:super}
.brand-rule{width:28px;height:1px;background:var(--rule-2);flex-shrink:0}
.brand-desc{
  font-family:var(--mono);font-size:0.63rem;font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--faint);
}
@media (max-width:520px){
  .brandline{gap:10px}
  .brand{font-size:1.08rem;letter-spacing:0.16em}
  .brand-rule{width:18px}
  .brand-desc{font-size:0.58rem;letter-spacing:0.13em}
}

/* must sit after .about-row so it wins inside the 820px breakpoint */
@media (max-width:820px){
  .about-row{grid-template-columns:minmax(0,1fr);gap:5px 0;row-gap:5px}
  .about-row .row-n{display:none}
  .about-row .row-name{grid-column:1;grid-row:1}
  .about-row .row-txt{grid-column:1;grid-row:2}
}

/* ============================================================
   Emphasis in running text is carried by tone, not weight.
   A bolded phrase mid-sentence reads as a shout; at normal weight
   in a darker ink it still reads as emphasis, quietly.

   Deliberately NOT included: the consent modal (.modal-body), the
   legal pages (.doc-body), .highlight, .status-note and the
   .disclaimer-box label. De-emphasising "must be independently
   verified" in a clinical consent notice would be a safety
   regression, not a design improvement.
   ============================================================ */
.hero-lede b,.hero-lede strong,
.sec-note b,.sec-note strong,
.row-txt b,.row-txt strong,
.band-foot b,.band-foot strong,
.status-body b,.status-body strong,
.price-note b,.price-note strong,
.footer-status b,.footer-status strong,
.footer-mark b,.footer-mark strong,
.prose b,.prose strong,
.pull b,.pull strong,
.doc-sub b,.doc-sub strong,
.lead b,.lead strong,
.scenario b,.scenario strong,
.step-body b,.step-body strong,
.convo-body b,.convo-body strong,
.struct-note b,.struct-note strong,
.raw-transcript b,.raw-transcript strong,
.kb-doc-desc b,.kb-doc-desc strong,
.cost-tile-desc b,.cost-tile-desc strong,
.cost-summary b,.cost-summary strong,
.ceo-close b,.ceo-close strong,
.ex-line b,.ex-line strong,
.kb-card b,.kb-card strong,
.kb-list b,.kb-list strong,
.cta p b,.cta p strong,
.cta-fine b,.cta-fine strong{
  font-weight:400;
  color:var(--ink-2);
}
/* coloured callouts keep their own ink, just lose the weight */
.truth-banner b,.truth-banner strong,
.for-mrs-patel b,.for-mrs-patel strong,
.pearl-block b,.pearl-block strong{
  font-weight:400;
  color:inherit;
}