/* ============================================================
   ALL IN DENTAL LAB — precision-drawing world
   drafting-white ground · graphite ink · machined greys
   hairline dimension language · red = annotation/CTA ink only
   ============================================================ */
:root{
  --paper:#FAFAF7;
  --sheet:#FFFFFC;
  --recess:#F0F0EC;
  --ink:#161616;
  --ink-2:#3E3E3E;
  --ink-3:#666666;
  --line:#DEDEDA;
  --line-strong:#B7B7B2;
  --red:#AF1D1D;
  --red-deep:#8C1616;
  --red-wash:#F7EDEC;
  --dark:#0A0A0A;
  --dark-2:#171716;
  --dark-line:#2A2A28;
  --dark-text:#F5F5F2;
  --dark-mute:#A6A6A2;
  --dark-red:#F2665E;
  --ok:#1E7B4D;
  --warn:#B25E09;
  --sans:"Archivo","Liberation Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Spline Sans Mono","DejaVu Sans Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-1:0 1px 2px rgba(16,16,16,.06),0 4px 16px rgba(16,16,16,.07);
  --shadow-2:0 2px 4px rgba(16,16,16,.08),0 12px 32px rgba(16,16,16,.12);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:1px}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:#666666;opacity:1}
img,svg{display:block;max-width:100%}
:where(img[width][height]){height:auto}
a{color:inherit}
button{cursor:pointer;background:none;border:none}
[hidden]{display:none!important}

/* -- scrollbar themed to the world -- */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--paper);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- type scale ---------- */
.d1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02;font-weight:640;letter-spacing:-.022em;text-wrap:balance}
.d2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06;font-weight:620;letter-spacing:-.018em;text-wrap:balance}
.d3{font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;font-weight:600;letter-spacing:-.012em;text-wrap:balance}
.d4{font-size:1.17rem;line-height:1.3;font-weight:600;letter-spacing:-.008em}
.lede{font-size:1.14rem;line-height:1.6;color:var(--ink-2);max-width:56ch}
.body-m{font-size:.97rem;line-height:1.62;color:var(--ink-2)}
.mono{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mono-lg{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.view{display:block}

/* heading row: big heading left, drawing-ref right, hairline under */
.hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line-strong);margin-bottom:8px}
.hrow .ref{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;padding-bottom:.55em;text-transform:uppercase}
.dark .hrow{border-color:var(--dark-line)}
.dark .hrow .ref{color:var(--dark-mute)}
@media (max-width:700px){.hrow{flex-direction:column;align-items:flex-start;gap:10px}.hrow .ref{padding-bottom:0}}

/* dimension chip */
.dim{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line-strong);padding:4px 10px;border-radius:2px;background:var(--sheet);white-space:nowrap}
.dim i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}

/* placeholder marking — honest but tidy */
.ph{border-bottom:1px dashed var(--red);cursor:help;text-decoration:none}
.draft-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:5px 10px;border-radius:2px;background:var(--red-wash)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:.95rem;letter-spacing:.002em;padding:14px 26px;border-radius:2px;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);text-decoration:none;white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,16,16,.18)}
.btn-red:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--sheet)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.dark .btn-ghost{color:var(--dark-text);border-color:#3F3F3C}
.dark .btn-ghost:hover{border-color:var(--dark-text);background:rgba(255,255,255,.04)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-sm{padding:9px 16px;font-size:.85rem}

/* motion: content is visible by default; the hero drawing is the one authored moment.
   .rv adds only a whisper of settle on first view — no opacity hiding. */
.rv{transform:translateY(8px);transition:transform .8s var(--ease)}
.rv.in{transform:none}
.rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.rv-line.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-line{opacity:1!important;transform:none!important;transition:none!important}
  .draw path,.draw line,.draw circle,.draw ellipse,.draw rect,.draw polyline{stroke-dashoffset:0!important;animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============ MARKETING SHELL ============ */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mk{width:34px;height:34px;flex:none}
.logo-img{height:40px;width:auto;max-width:none;display:block}
.brand .wordmark{line-height:1}
.brand .wordmark b{display:block;font-weight:750;font-size:1.06rem;letter-spacing:.02em;font-variation-settings:"wdth" 112}
.brand .wordmark span{display:block;font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.34em;color:var(--ink-3);margin-top:2px;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a.nl{font-size:.92rem;font-weight:520;color:var(--ink-2);text-decoration:none;padding:9px 14px;border-radius:2px;transition:color .15s,background .15s}
.nav-links a.nl:hover{color:var(--ink);background:var(--recess)}
.nav-links a.nl[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:2px;background:var(--sheet)}
.menu-btn svg{width:18px;height:18px}
.m-nav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px clamp(20px,4vw,48px) 22px;flex-direction:column;gap:2px}
.m-nav a{padding:13px 6px;font-weight:560;text-decoration:none;border-bottom:1px solid var(--line);font-size:1.02rem}
.m-nav .btn{margin-top:14px}
@media (max-width:920px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .menu-btn{display:inline-flex}
  .m-nav.open{display:flex}
}

/* footer as drawing title block */
.site-foot{background:var(--dark);color:var(--dark-text);margin-top:0}
.tblock{border:1px solid var(--dark-line);border-radius:2px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;overflow:hidden}
.tcell{padding:22px 24px;border-right:1px solid var(--dark-line);min-width:0}
.tcell:last-child{border-right:0}
.tcell .lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-mute);margin-bottom:12px}
.tcell p,.tcell a{font-size:.92rem;color:var(--dark-text);line-height:1.7;text-decoration:none}
.tcell a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-base{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0 0;flex-wrap:wrap}
.foot-base .mono{color:var(--dark-mute)}
@media (max-width:920px){.tblock{grid-template-columns:1fr 1fr}.tcell{border-bottom:1px solid var(--dark-line)}}
@media (max-width:560px){.tblock{grid-template-columns:1fr}}

/* ============ HOME ============ */
.hero{position:relative;overflow:hidden;background:
  linear-gradient(var(--paper) 0 0) padding-box,
  var(--paper)}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.5;mask-image:radial-gradient(ellipse 90% 80% at 68% 40%,#000 0%,transparent 68%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(48px,7vh,84px);padding-bottom:clamp(40px,6vh,72px)}
.hero h1{margin:18px 0 20px}
.hero h1 .r{color:var(--red)}
.hero .lede{margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-fig{position:relative}
.hero-fig svg{width:100%;height:auto}
.spec-strip{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--sheet)}
.spec-strip .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:0;flex-wrap:wrap}
.spec{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;padding:20px 26px;border-right:1px solid var(--line)}
.spec:first-child{padding-left:0}
.spec:last-child{border-right:0}
.spec .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.spec .v{font-weight:640;font-size:1.06rem;letter-spacing:-.01em}
.spec .v small{font-weight:500;color:var(--ink-3);font-size:.8rem}
/* The compatibility cell is a summary of a list further down the page, so it
   behaves like one: the same cell, but it takes you there. */
a.spec-jump{text-decoration:none;color:inherit;cursor:pointer;transition:background .18s ease}
a.spec-jump:hover,a.spec-jump:focus-visible{background:var(--paper)}
a.spec-jump .jump{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
a.spec-jump .jump svg{width:13px;height:13px;flex:none;transform:rotate(90deg);transition:transform .18s ease}
a.spec-jump:hover .jump svg{transform:rotate(90deg) translateX(2px)}
/* the sticky header must not sit on top of what an in-page jump lands on */
#system,#systems{scroll-margin-top:92px}
/* Two-column sheets that pair copy with a figure. The class was on the markup
   with nothing behind it, so both stayed side by side at 375 and squeezed the
   guide-pair figure to 121px -- four caption lines at a quarter scale. 920px is
   the width every other two-up grid here collapses at. The column ratios differ
   per instance and live inline, so this has to outrank them. */
@media (max-width:920px){.backup-grid{grid-template-columns:1fr!important}}
/* A .dim chip is nowrap so its dot never orphans, but a 507px chip sets the
   min-content width of the grid column it sits in -- which is how one line of
   hero copy was holding the whole hero figure open past the viewport. Below the
   hero's own collapse point the chips have a full-width column to wrap into, and
   normal only permits wrapping: a chip that still fits still sits on one line. */
@media (max-width:980px){.dim{white-space:normal}}
/* The pair figure's captions are measured onto each guide's true axis (0.267 and
   0.732 of the width), which is exact at desktop and 4.8px tall at 375. Below the
   collapse the SVG shows the two guides alone -- its caption band trimmed by a
   negative margin, which resolves against width, so band and figure scale together
   -- and this legend carries the same words at a size a phone can read. */
.pair-fig svg{width:96%;height:auto;display:block;margin:0 auto}
.pair-legend{display:none;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:14px}
.pair-legend b{display:block;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.pair-legend span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--red);margin-top:3px}
@media (max-width:920px){
  .pair-cap{display:none}
  .pair-fig svg{margin-bottom:-9.2%}
  .pair-legend{display:grid}
}
/* mobile legend replaces in-figure annotations when they'd be too small */
.hero-legend{display:none;grid-template-columns:1fr 1fr;gap:8px 22px;margin-top:18px;border-top:1px solid var(--line-strong);padding-top:16px}
.hero-legend span{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--ink-2);text-transform:uppercase}
.hero-legend span b{color:var(--red);font-weight:600;margin-right:7px}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero-fig{max-width:560px;margin:0 auto}
  .spec{padding:16px 18px}
  .spec:first-child{padding-left:18px}
  #heroKit .lbl{display:none}
  .hero-legend{display:grid}
}

/* the sheet: what arrives */
.sec{padding:clamp(64px,9vh,110px) 0}
.sheet{background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;box-shadow:var(--shadow-1);position:relative}
.corner{position:absolute;width:14px;height:14px;pointer-events:none}
.corner::before,.corner::after{content:"";position:absolute;background:var(--ink)}
.corner::before{width:14px;height:1px}
.corner::after{width:1px;height:14px}
.c-tl{top:-1px;left:-1px}.c-tr{top:-1px;right:-1px;transform:scaleX(-1)}
.c-bl{bottom:-1px;left:-1px;transform:scaleY(-1)}.c-br{bottom:-1px;right:-1px;transform:scale(-1)}
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.kit-item{padding:clamp(26px,3.4vw,44px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:0;position:relative;transition:background .25s var(--ease)}
.kit-item:hover{background:#FDFDFD}
.kit-item:nth-child(2n){border-right:0}
.kit-item:nth-child(n+3){border-bottom:0}
.kit-item .fig{height:190px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.kit-item .fig svg{max-height:100%;width:auto;max-width:100%}
.kit-item .fig img{max-height:100%;width:auto;max-width:88%;object-fit:contain}
.kit-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.kit-head .no{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.08em}
.kit-item h3{font-size:1.22rem;font-weight:640;letter-spacing:-.01em}
.kit-item .why{color:var(--ink-2);font-size:.95rem;line-height:1.6;margin-bottom:16px;max-width:44ch}
.kit-price{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.kit-price .p{font-weight:680;font-size:1.15rem;white-space:nowrap}
.kit-price .p sup{font-size:.6em;color:var(--red);font-weight:600}
.kit-price .mono{color:var(--ink-3)}
/* the bought-in components: same card, cool grey + the dashed "not ours" hatch */
.kit-oem{background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--recess) 10px 11px)}
.kit-oem:hover{background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--recess) 10px 11px)}
.kit-oem .fig{gap:clamp(10px,2vw,26px)}
.kit-oem .fig img{max-width:26%;max-height:88%}
.kit-oem .kit-head .no{color:var(--red)}
.kit-oem .kit-price{border-top-color:var(--line)}
.kit-oem .kit-price .mono{font-size:.74rem;line-height:1.5;max-width:40ch}
.you-slot{grid-column:1 / -1;border-top:1px solid var(--line);padding:clamp(24px,3vw,36px) clamp(26px,3.4vw,44px);display:flex;align-items:center;gap:clamp(20px,3vw,40px);background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--recess) 10px 11px)}
.you-slot .slot-fig{flex:none;width:120px;height:84px;border:1.5px dashed var(--line-strong);border-radius:2px;display:flex;align-items:center;justify-content:center;background:var(--sheet)}
.you-slot h3{font-size:1.1rem;font-weight:640;margin-bottom:4px}
.you-slot p{color:var(--ink-2);font-size:.94rem;max-width:60ch}
@media (max-width:760px){
  .kit-grid{grid-template-columns:1fr}
  .kit-item{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .you-slot{flex-direction:column;align-items:flex-start}
}

/* dark materials section */
.dark{background:var(--dark);color:var(--dark-text)}
.dark .lede,.dark .body-m{color:var(--dark-mute)}
.mat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(36px,5vh,56px)}
.mat-fig svg{width:100%;height:auto}
/* The height study is a wide technical drawing: its annotation gutter sits at
   x=604 of a 702 viewBox, so at 375 the whole thing renders at 0.53 and every
   callout lands at 4.8px. SVG text is in user units, so it scales with the
   figure and no font-size can hold a constant size across the range -- the text
   has to leave the drawing. Below the collapse the SVG keeps only what is
   graphic (the two parts and the three datum lines, which still read), its now
   empty title and gutter bands trimmed by width-relative margins, and this
   legend carries every number in real HTML type. The swatches match the lines
   they name, which is what keeps the three datums identifiable without labels. */
.hs-legend{display:none;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:12px}
.hs-legend>div b{display:block;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.hs-legend>div>span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fig-acc,var(--red));margin-top:3px}
.hs-datums{grid-column:1/-1;display:grid;gap:6px;margin-top:6px;border-top:1px solid var(--dark-line,var(--line));padding-top:10px}
.hs-datums>div{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fig-mut,var(--ink-2))}
.hs-datums em{margin-left:auto;font-style:normal;color:var(--fig-ink,var(--ink))}
.hs-datums i{width:22px;height:0;flex:none;border-top:1.5px solid currentColor}
.hs-datums .l-ging{color:var(--fig-acc,var(--red));border-top-style:dashed}
.hs-datums .l-shoulder{color:var(--fig-ink,var(--ink))}
.hs-datums .l-platform{color:var(--fig-ink,var(--ink));opacity:.38}
.hs-datums .l-clear{padding-left:31px}
@media (max-width:920px){
  .hs-cap{display:none}
  .mat-fig{overflow:hidden}
  /* 702/590: push the (now empty) annotation gutter out of frame so the two
     parts use the full column, then trim the title and caption bands. */
  /* the reset caps every svg at max-width:100%, which would swallow this */
  .mat-fig svg{width:118.98%;max-width:none;margin:-4.07% 0 -6.44%}
  .hs-legend{display:grid}
}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th{text-align:left;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dark-mute);padding:0 0 14px;border-bottom:1px solid var(--dark-line)}
.spec-table td{padding:15px 18px 15px 0;border-bottom:1px solid var(--dark-line);font-size:.94rem;vertical-align:top}
.spec-table td:first-child{font-weight:620;white-space:nowrap}
.spec-table td:last-child{color:var(--dark-mute);padding-right:0}
.spec-table tr:last-child td{border-bottom:0}
.mat-note{margin-top:22px;display:flex;gap:12px;align-items:flex-start;color:var(--dark-mute);font-size:.86rem;line-height:1.6}
.mat-note svg{width:16px;height:16px;flex:none;margin-top:2px}
@media (max-width:920px){.mat-grid{grid-template-columns:1fr}}

/* process rail */
.rail{position:relative;margin-top:clamp(40px,6vh,64px)}
.rail-line{position:absolute;left:0;right:0;top:29px;height:1px;background:var(--line-strong)}
.rail-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px);position:relative}
.rstep{display:flex;flex-direction:column;gap:14px}
.rstep .node{width:58px;height:58px;border-radius:50%;background:var(--sheet);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:.86rem;position:relative;z-index:1;transition:border-color .2s,box-shadow .2s}
.rstep:hover .node{border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
.rstep .day{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--red);font-weight:600}
.rstep h3{font-size:1.04rem;font-weight:640;letter-spacing:-.008em}
.rstep p{font-size:.88rem;color:var(--ink-2);line-height:1.58;max-width:30ch}
@media (max-width:920px){
  .rail-line{left:29px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .rail-steps{grid-template-columns:1fr;gap:34px}
  .rstep{flex-direction:row;gap:22px}
  .rstep .node{flex:none}
}

/* systems row */
.sys-row{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-strong);border-radius:2px;background:var(--sheet);overflow:hidden;margin-top:clamp(32px,4vh,48px)}
.sys{padding:26px 28px;border-right:1px solid var(--line);position:relative}
.sys:last-child{border-right:0}
.sys .nm{font-weight:660;font-size:1.05rem;letter-spacing:-.008em;margin-bottom:4px}
.sys .pl{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-3)}
.sys.fav{background:linear-gradient(180deg,var(--red-wash),transparent 70%)}
.sys .fav-tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.sys:nth-child(n+6){border-top:1px solid var(--line)}.sys:nth-child(5n){border-right:0}
@media (max-width:920px){.sys-row{grid-template-columns:1fr 1fr}.sys{border-right:1px solid var(--line)!important;border-top:0!important;border-bottom:1px solid var(--line)}.sys:nth-child(2n){border-right:0!important}}
@media (max-width:560px){.sys-row{grid-template-columns:1fr}.sys{border-bottom:1px solid var(--line)!important}.sys:last-child{border-bottom:0!important}}

/* pricing summary table */
.price-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(36px,5vh,56px)}
.fee-table{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--line-strong)}
.fee-table th{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:16px 22px;border-bottom:1px solid var(--line-strong);background:var(--recess)}
.fee-table th:last-child,.fee-table td.pr{text-align:right}
.fee-table td{padding:16px 22px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.fee-table tr:last-child td{border-bottom:0}
.fee-table td .sub{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.fee-table td.pr{font-weight:640;white-space:nowrap}
.fee-table td.pr .add{display:block;font-weight:500;font-size:.76rem;color:var(--ink-3);margin-top:2px}
.bundle-card{background:var(--dark);color:var(--dark-text);border-radius:2px;padding:clamp(26px,3vw,36px);position:relative;overflow:hidden}
.bundle-card .bg-mark{position:absolute;right:-40px;bottom:-52px;width:220px;opacity:.08}
.bundle-card h3{font-size:1.32rem;font-weight:650;letter-spacing:-.012em;margin-bottom:6px}
.bundle-card .sub{color:var(--dark-mute);font-size:.92rem;margin-bottom:24px;line-height:1.6}
.bundle-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.bundle-price .big{font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.bundle-price .big sup{font-size:.34em;color:var(--dark-red);font-weight:600;top:-1.6em}
.bundle-price .per{color:var(--dark-mute);font-size:.9rem}
.bundle-vs{font-family:var(--mono);font-size:.74rem;color:var(--dark-mute);margin-bottom:24px}
.bundle-vs s{color:#A6A6A2}
.bundle-list{list-style:none;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.bundle-list li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5}
.bundle-list svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--dark-red)}
@media (max-width:920px){.price-wrap{grid-template-columns:1fr}}

/* testimonial as sign-off block */
.signoff{background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;padding:clamp(30px,4.5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(24px,4vw,56px);align-items:end;box-shadow:var(--shadow-1)}
.signoff blockquote{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.42;font-weight:520;letter-spacing:-.012em;text-wrap:balance}
.signoff blockquote em{font-style:normal;box-shadow:inset 0 -0.34em var(--red-wash)}
.sig-block{border-top:1px solid var(--ink);padding-top:12px}
.sig-block .who{font-weight:640;font-size:.96rem}
.sig-block .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
@media (max-width:760px){.signoff{grid-template-columns:1fr}}

/* portal teaser */
.teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(36px,5vh,56px)}
.browser{background:var(--sheet);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow-2);overflow:hidden;transform:rotate(-.4deg)}
.browser .b-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--recess)}
.browser .b-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.browser .b-url{margin-left:8px;flex:1;font-family:var(--mono);font-size:.66rem;color:var(--ink-3);background:var(--sheet);border:1px solid var(--line);border-radius:3px;padding:4px 10px;letter-spacing:.03em}
.teaser-feats{list-style:none;display:flex;flex-direction:column;gap:0;margin:26px 0 32px}
.teaser-feats li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.teaser-feats li:first-child{border-top:1px solid var(--line)}
.teaser-feats svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--red)}
.teaser-feats b{display:block;font-weight:630;font-size:.98rem;margin-bottom:2px}
.teaser-feats span{font-size:.88rem;color:var(--ink-2);line-height:1.55}
@media (max-width:920px){.teaser{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:clamp(44px,6vh,64px);padding-bottom:clamp(44px,6vh,64px);position:relative;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:650;letter-spacing:-.016em;line-height:1.1;text-wrap:balance;max-width:22ch}
.cta-band p{margin-top:10px;color:#F7EDEC;font-size:1rem;max-width:52ch}
.cta-band .btn-white{background:#fff;color:var(--red)}
.cta-band .btn-white:hover{background:#FFE9EC;transform:translateY(-1px)}
.cta-band .cross{position:absolute;right:8%;top:-30px;width:190px;opacity:.14;pointer-events:none}

/* ============ INNER MARKETING PAGES ============ */
.page-head{padding:clamp(48px,7vh,80px) 0 clamp(28px,4vh,44px)}
.page-head .lede{margin-top:16px}

/* system page: component dossiers */
.dossier{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);padding:clamp(40px,6vh,72px) 0;border-bottom:1px solid var(--line);align-items:center}
.dossier:last-of-type{border-bottom:0}
.dossier:nth-child(even){direction:rtl}
.dossier>*{direction:ltr}
.dossier .fig{background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;padding:clamp(24px,3vw,44px);display:flex;align-items:center;justify-content:center;min-height:300px;position:relative}
.dossier .fig svg{max-height:280px;width:auto;max-width:100%}
.dossier .fig .fig-ref{position:absolute;bottom:12px;right:16px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.dossier h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:640;letter-spacing:-.014em;margin-bottom:12px;text-wrap:balance}
.dossier .body-m{margin-bottom:20px;max-width:56ch}
.facts{width:100%;border-collapse:collapse;margin-bottom:22px}
.facts td{padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.facts td:first-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:180px;padding-right:20px;padding-top:13px}
.facts tr:last-child td{border-bottom:0}
@media (max-width:920px){.dossier{grid-template-columns:1fr}.dossier:nth-child(even){direction:ltr}}

/* guide types */
.gt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong);background:var(--sheet);border-radius:2px;overflow:hidden}
.gt{padding:clamp(24px,2.6vw,36px);border-right:1px solid var(--line)}
.gt:last-child{border-right:0}
.gt .fig{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.gt h3{font-size:1.08rem;font-weight:640;margin-bottom:6px}
.gt p{font-size:.88rem;color:var(--ink-2);line-height:1.6}
.gt .use{margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--red);text-transform:uppercase}
@media (max-width:860px){.gt-row{grid-template-columns:1fr}.gt{border-right:0;border-bottom:1px solid var(--line)}.gt:last-child{border-bottom:0}}

/* records spec: sheet rows */
.req-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.req-list li{font-size:.87rem;color:var(--ink-2);display:flex;gap:9px;line-height:1.5}
.req-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);flex:none;margin-top:8px}
.req-list li.no::before{background:var(--red)}
.fmt{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.fmt span{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;border:1px solid var(--line-strong);padding:3px 8px;border-radius:2px;color:var(--ink-2)}

/* pricing page: policies as spec-sheet rows */
.policy-sheet{border:1px solid var(--line-strong);background:var(--sheet);border-radius:2px;margin-top:clamp(28px,4vh,40px)}
.policy-row{display:grid;grid-template-columns:240px 1fr;gap:clamp(16px,3vw,48px);padding:22px clamp(20px,2.6vw,32px);border-bottom:1px solid var(--line)}
.policy-row:last-child{border-bottom:0}
.policy-row .pk{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--red);padding-top:3px}
.policy-row h3,.policy-row h2.ph2{font-size:1rem;font-weight:640;margin-bottom:4px}
.policy-row p{font-size:.89rem;color:var(--ink-2);line-height:1.62;max-width:70ch}
@media (max-width:700px){.policy-row{grid-template-columns:1fr;gap:8px}}

/* about: case photo placeholders */
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(26px,4vh,40px)}
.case-ph{aspect-ratio:4/3;border:1.5px dashed var(--line-strong);border-radius:2px;background:repeating-linear-gradient(-45deg,transparent 0 12px,var(--recess) 12px 13px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
@media (max-width:860px){.case-grid{grid-template-columns:1fr 1fr}}
/* start page */
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:clamp(56px,8vh,96px)}
.steps-list{counter-reset:st;display:flex;flex-direction:column}
.step-item{display:flex;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.step-item:first-child{border-top:1px solid var(--line-strong)}
.step-item .n{counter-increment:st;flex:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;font-weight:600;background:var(--sheet)}
.step-item .n::before{content:counter(st,decimal-leading-zero)}
.step-item h3,.step-item h2.sh{font-size:1.06rem;font-weight:640;margin-bottom:4px}
.step-item p{font-size:.9rem;color:var(--ink-2);line-height:1.6;max-width:48ch}
.form-card{background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-1)}
.form-card h3,.form-card h2.fh{font-size:1.24rem;font-weight:650;letter-spacing:-.01em;margin-bottom:6px}
.form-card .sub{font-size:.9rem;color:var(--ink-2);margin-bottom:26px}
.f-field{margin-bottom:18px}
.f-field label{display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.f-field input,.f-field select,.f-field textarea{width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);font-size:.95rem;transition:border-color .15s,box-shadow .15s}
.f-field input:hover,.f-field select:hover,.f-field textarea:hover{border-color:var(--ink-3)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-ok{display:flex;gap:14px;align-items:flex-start;background:#EDF7F1;border:1px solid #BBDECA;border-radius:2px;padding:18px;margin-top:8px}
.form-ok svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:1px}
.form-ok b{display:block;font-size:.95rem;margin-bottom:2px}
.form-ok span{font-size:.86rem;color:var(--ink-2)}
@media (max-width:860px){.start-grid{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}
.contact-block{margin-top:34px;border-top:1px solid var(--line-strong);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.contact-block a{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:.96rem;font-weight:540}
.contact-block a:hover{color:var(--red)}
.contact-block svg{width:16px;height:16px;color:var(--ink-3)}

/* ============ PORTAL (Operate mode) ============ */
.portal{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr);background:var(--recess)}
.p-side{background:var(--dark);color:var(--dark-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.p-side .brand{padding:20px 20px 18px;border-bottom:1px solid var(--dark-line)}
.p-side .brand .wordmark span{color:var(--dark-mute)}
.p-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.p-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:3px;text-decoration:none;font-size:.92rem;font-weight:540;color:var(--dark-mute);transition:background .15s,color .15s}
.p-nav a svg{width:17px;height:17px;flex:none}
.p-nav a:hover{color:var(--dark-text);background:rgba(255,255,255,.05)}
.p-nav a.on{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 var(--red)}
.p-side .p-user{padding:16px 20px;border-top:1px solid var(--dark-line);display:flex;gap:12px;align-items:center}
.p-user .av{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:.8rem;flex:none}
.p-user b{display:block;font-size:.84rem;font-weight:620;line-height:1.2}
.p-user span{font-size:.72rem;color:var(--dark-mute)}
.p-main{padding:0 clamp(20px,3vw,40px) 56px;min-width:0}
.p-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.p-top h1{font-size:1.5rem;font-weight:650;letter-spacing:-.014em}
.p-top .demo-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);border:1px solid #E3C7A2;background:#FBF3E7;border-radius:2px;padding:4px 9px}
.p-top .right{display:flex;gap:10px;align-items:center}
.p-back{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:560;color:var(--ink-2);text-decoration:none;padding:8px 12px;border:1px solid var(--line-strong);border-radius:2px;background:var(--sheet)}
.p-back:hover{border-color:var(--ink)}
.p-back svg{width:14px;height:14px}

/* attention strip */
.attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:30px}
.attn-card{background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;padding:18px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;transition:box-shadow .2s}
.attn-card:hover{box-shadow:var(--shadow-1)}
.attn-card .txt b{display:block;font-size:.95rem;font-weight:640;margin-bottom:2px}
.attn-card .txt b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:2px}
.attn-card.warn .txt b::before{background:var(--warn)}
.attn-card.info .txt b::before{background:var(--ink)}
.attn-card .txt span{font-size:.82rem;color:var(--ink-2)}
.attn-card .btn-sm{flex:none}

/* case table */
.p-card{background:var(--sheet);border:1px solid var(--line-strong);border-radius:3px;overflow:hidden}
.p-card .p-card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.p-card .p-card-h h2{font-size:1.02rem;font-weight:650}
.case-table{width:100%;border-collapse:collapse}
.case-table th{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--recess)}
.case-table td{padding:15px 22px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:middle}
.case-table tr:last-child td{border-bottom:0}
.case-table tbody tr{cursor:pointer;transition:background .12s}
.case-table tbody tr:hover{background:#FBFBFC}
.case-table .cid{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.case-table .pt b{display:block;font-weight:620}
.case-table .pt span{font-size:.78rem;color:var(--ink-3)}
.case-table .cnt{font-family:var(--mono);font-size:.78rem;white-space:nowrap}
.case-table .cnt.hot{color:var(--red);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;padding:4px 11px;border-radius:99px;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.s-plan{background:#F7EDEC;color:var(--red-deep)}
.pill.s-mfg{background:#EEF1F8;color:#2C4A9A}
.pill.s-ship{background:#EDF7F1;color:var(--ok)}
.pill.s-rev{background:#F4F1EA;color:var(--warn)}
.pill.s-sub{background:var(--recess);color:var(--ink-2)}
.pill.s-del{background:var(--ink);color:#fff}
.prog{display:flex;gap:4px;margin-top:6px}
.prog i{width:16px;height:3px;border-radius:2px;background:var(--line)}
.prog i.on{background:var(--red)}
/* phone: case table recomposes into stacked case rows */
@media (max-width:700px){
  .case-table thead{display:none}
  .case-table,.case-table tbody,.case-table tr,.case-table td{display:block;width:100%}
  .case-table tr{padding:16px 18px;border-bottom:1px solid var(--line)}
  .case-table tr:last-child{border-bottom:0}
  .case-table td{padding:3px 0;border:0}
  .case-table td.cid{padding:0 0 5px;color:var(--ink-3);font-size:.7rem}
  .case-table .pt b{font-size:1rem}
  .case-table td:nth-child(4){display:flex;align-items:center;gap:12px;padding-top:8px}
  .case-table td:nth-child(4) .prog{margin-top:0}
  .case-table td:nth-child(5){padding-top:6px}
}

/* wizard */
.wiz{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.wiz-steps{position:sticky;top:24px;display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line-strong);border-radius:3px;overflow:hidden}
.wiz-steps button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.86rem;font-weight:560;color:var(--ink-3);text-align:left;transition:background .15s,color .15s}
.wiz-steps button:last-child{border-bottom:0}
.wiz-steps button .wn{width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.66rem;flex:none;transition:all .15s}
.wiz-steps button.on{color:var(--ink);background:var(--recess)}
.wiz-steps button.on .wn{border-color:var(--red);color:var(--red);font-weight:600}
.wiz-steps button.done{color:var(--ink-2)}
.wiz-steps button.done .wn{background:var(--ink);border-color:var(--ink);color:#fff}
.wiz-steps button.done .wn::before{content:"✓";font-size:.7rem}
.wiz-steps button.done .wn span{display:none}
.wiz-steps button:disabled{cursor:default}
.wiz-panel{background:var(--sheet);border:1px solid var(--line-strong);border-radius:3px;padding:clamp(24px,3vw,40px)}
.wiz-panel h2{font-size:1.35rem;font-weight:650;letter-spacing:-.012em;margin-bottom:6px}
.wiz-panel .sub{font-size:.92rem;color:var(--ink-2);margin-bottom:28px;max-width:64ch}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.wiz-foot .mono{color:var(--ink-3)}
@media (max-width:920px){.wiz{grid-template-columns:1fr}.wiz-steps{position:static;flex-direction:row;overflow-x:auto}.wiz-steps button{border-bottom:0;border-right:1px solid var(--line);flex:none}}

/* odontogram */
.odo-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start}
.odo{background:var(--paper);border:1px solid var(--line-strong);border-radius:3px;padding:22px 10px 14px}
.odo svg{width:100%;height:auto}
.tooth{cursor:pointer}
.tooth .shp{fill:var(--sheet);stroke:var(--line-strong);stroke-width:1.1;transition:fill .15s,stroke .15s}
.tooth text{font-family:var(--mono);font-size:8.5px;fill:var(--ink-3);text-anchor:middle;pointer-events:none}
.tooth:hover .shp{stroke:var(--ink)}
.tooth.missing .shp{fill:var(--recess);stroke-dasharray:2.5 2;stroke:var(--ink-3)}
.tooth.extract .shp{fill:#F4F1EA;stroke:var(--warn)}
.tooth.implant .shp{fill:var(--red);stroke:var(--red-deep)}
.tooth.implant text{fill:#fff;font-weight:600}
.odo-key{display:flex;flex-direction:column;gap:14px}
.odo-key .k{display:flex;gap:12px;align-items:flex-start}
.odo-key .sw{width:22px;height:22px;border-radius:3px;border:1px solid var(--line-strong);flex:none;background:var(--sheet)}
.odo-key .sw.missing{background:var(--recess);border-style:dashed}
.odo-key .sw.extract{background:#F4F1EA;border-color:var(--warn)}
.odo-key .sw.implant{background:var(--red);border-color:var(--red-deep)}
.odo-key b{font-size:.84rem;font-weight:620;display:block}
.odo-key span{font-size:.76rem;color:var(--ink-3);line-height:1.45}
.odo-note{margin-top:10px;font-size:.8rem;color:var(--ink-2);background:var(--recess);border-radius:3px;padding:12px 14px;line-height:1.5}
@media (max-width:860px){.odo-wrap{grid-template-columns:1fr}}

/* implant plan rows */
.site-row{border:1px solid var(--line-strong);border-radius:3px;padding:20px;margin-bottom:16px;background:var(--paper)}
.site-row .site-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.site-row .site-h b{font-size:1rem;font-weight:650}
.site-row .site-h .mono{color:var(--red)}
.sel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.empty-sites{border:1.5px dashed var(--line-strong);border-radius:3px;padding:34px;text-align:center;color:var(--ink-3);font-size:.92rem}

/* upload zone */
.up-zone{border:1.5px dashed var(--line-strong);border-radius:3px;background:var(--paper);padding:34px 24px;text-align:center;transition:border-color .15s,background .15s;cursor:pointer;margin-bottom:14px}
.up-zone:hover,.up-zone.hot{border-color:var(--red);background:var(--red-wash)}
.up-zone svg{width:26px;height:26px;margin:0 auto 12px;color:var(--ink-3)}
.up-zone b{display:block;font-size:.95rem;font-weight:630;margin-bottom:3px}
.up-zone span{font-size:.82rem;color:var(--ink-3)}
.up-file{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:3px;padding:12px 16px;margin-bottom:10px;background:var(--sheet)}
.up-file .fic{width:34px;height:34px;border-radius:3px;background:var(--recess);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);flex:none}
.up-file .fi{flex:1;min-width:0}
.up-file .fi b{display:block;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-file .fi span{font-size:.72rem;color:var(--ink-3);font-family:var(--mono)}
.up-file .bar{height:3px;background:var(--recess);border-radius:2px;margin-top:7px;overflow:hidden}
.up-file .bar i{display:block;height:100%;width:100%;background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s linear}
.up-file .st{font-family:var(--mono);font-size:.66rem;color:var(--ok);white-space:nowrap}
.up-file .st.up{color:var(--ink-3)}
.up-ok{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ok);font-weight:600}
.up-ok svg{width:15px;height:15px}
.up-vald{display:flex;gap:10px;align-items:flex-start;background:#EDF7F1;border:1px solid #BBDECA;border-radius:3px;padding:13px 15px;margin-top:6px;font-size:.84rem;color:#175F3C;line-height:1.5}
.up-vald svg{width:16px;height:16px;flex:none;margin-top:1px}

/* toggle chips */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:var(--paper);border-radius:2px;padding:10px 16px;font-size:.88rem;font-weight:560;transition:all .15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on.red{background:var(--red);border-color:var(--red)}

/* review summary */
.sum-block{border:1px solid var(--line);border-radius:3px;margin-bottom:14px;overflow:hidden}
.sum-block .sb-h{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;background:var(--recess);border-bottom:1px solid var(--line)}
.sum-block .sb-h b{font-size:.88rem;font-weight:650}
.sum-block .sb-h button{font-size:.76rem;font-weight:600;color:var(--red);letter-spacing:.02em}
.sum-block .sb-h button:hover{text-decoration:underline;text-underline-offset:3px}
.sum-block dl{display:grid;grid-template-columns:170px 1fr;gap:0;padding:6px 18px}
.sum-block dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:9px 0;align-self:center}
.sum-block dd{font-size:.88rem;padding:9px 0;border-bottom:1px dotted var(--line)}
.sum-block dl > dd:last-of-type,.sum-block dl > dt:last-of-type{border-bottom:0}
.est-line{display:flex;justify-content:space-between;padding:12px 18px;font-size:.9rem;border-top:1px solid var(--line)}
.est-line.total{font-weight:700;font-size:1.02rem;background:var(--recess)}
.est-line .num{font-weight:620}

/* case detail */
.cd-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:18px;position:relative;padding-bottom:26px}
.tl-item::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:1px;background:var(--line-strong)}
.tl-item:last-child::before{display:none}
.tl-item .dot{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--sheet);flex:none;display:flex;align-items:center;justify-content:center;z-index:1}
.tl-item.done .dot{background:var(--ink);border-color:var(--ink)}
.tl-item.done .dot::before{content:"✓";color:#fff;font-size:.62rem;font-weight:700}
.tl-item.now .dot{border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
.tl-item.now .dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.tl-item b{display:block;font-size:.92rem;font-weight:640;line-height:1.3}
.tl-item span{font-size:.78rem;color:var(--ink-3);font-family:var(--mono)}
.tl-item p{font-size:.84rem;color:var(--ink-2);margin-top:5px;line-height:1.55;max-width:52ch}
.tl-item .tl-act{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* plan viewer */
.viewer{background:var(--dark);border-radius:3px;overflow:hidden;position:relative}
.viewer svg{width:100%;height:auto;display:block}
.viewer .v-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--dark-2);border-top:1px solid var(--dark-line)}
.viewer .v-bar .mono{color:var(--dark-mute)}
.viewer .v-tools{display:flex;gap:6px}
.viewer .v-tools button{width:30px;height:30px;border:1px solid var(--dark-line);border-radius:3px;color:var(--dark-mute);display:flex;align-items:center;justify-content:center;transition:all .15s}
.viewer .v-tools button:hover{color:#fff;border-color:#666666}
.viewer .v-tools svg{width:14px;height:14px}
.approve-bar{display:flex;gap:12px;padding:16px 0 0;flex-wrap:wrap}
.msg-list{display:flex;flex-direction:column;gap:14px;padding:20px 22px;max-height:340px;overflow-y:auto}
.msg{display:flex;gap:12px;max-width:88%}
.msg .m-av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;background:var(--recess);color:var(--ink-2)}
.msg.lab .m-av{background:var(--ink);color:#fff}
.msg .m-body{background:var(--recess);border-radius:3px;padding:11px 15px;font-size:.87rem;line-height:1.55}
.msg.lab .m-body{background:#F6EFF0}
.msg .m-meta{font-family:var(--mono);font-size:.62rem;color:var(--ink-3);margin-top:5px}
.msg-input{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}
.msg-input input{flex:1;padding:11px 14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--paper)}
.msg-input input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.file-row{display:flex;align-items:center;gap:13px;padding:13px 22px;border-bottom:1px solid var(--line);font-size:.87rem}
.file-row:last-child{border-bottom:0}
.file-row .fic{width:30px;height:30px;border-radius:3px;background:var(--recess);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.52rem;font-weight:600;color:var(--ink-2);flex:none}
.file-row span{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--ink-3);white-space:nowrap}
.cd-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.cd-meta>div{padding:14px 22px;border-right:1px solid var(--line)}
.cd-meta>div:last-child{border-right:0}
.cd-meta .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.cd-meta .v{font-weight:640;font-size:.95rem}
.countdown-hero{background:var(--dark);color:var(--dark-text);border-radius:3px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.countdown-hero .v{white-space:nowrap}
@media (max-width:700px){.countdown-hero{flex-direction:column;align-items:flex-start;gap:14px}.countdown-hero>div{text-align:left!important}}
.countdown-hero .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-mute);margin-bottom:6px}
.countdown-hero .v{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.countdown-hero .v small{font-size:.85rem;font-weight:500;color:var(--dark-mute);margin-left:6px}
@media (max-width:1060px){.cd-grid{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;border-radius:3px;padding:14px 22px;font-size:.9rem;font-weight:560;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-2);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);z-index:100;max-width:min(92vw,480px)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast svg{width:17px;height:17px;color:#7BD8A5;flex:none}

@media (max-width:820px){
  .portal{grid-template-columns:1fr}
  .p-side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}
  .p-side .brand{border-bottom:0;border-right:1px solid var(--dark-line);padding:14px 18px}
  .p-nav{flex-direction:row;padding:10px}
  .p-nav a span{display:none}
  .p-side .p-user{display:none}
}.fk{fill:none;stroke:var(--fig-ink,#161616);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fk2{fill:none;stroke:var(--fig-ink,#161616);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.fd{fill:none;stroke:var(--fig-ink,#161616);stroke-width:1;stroke-dasharray:4 4;stroke-linecap:round;opacity:.6}
.fa{fill:none;stroke:var(--fig-acc,#AF1D1D);stroke-width:1;stroke-linecap:round}
.fat{font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.06em;fill:var(--fig-acc,#AF1D1D)}
.fnt{font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.08em;fill:var(--fig-mut,#666666)}
.ffill{fill:var(--fig-ink,#161616);opacity:.06;stroke:none}
g.tg path{vector-effect:non-scaling-stroke}

/* ---- the hero's three finishes -------------------------------------------
 * Each part in #heroKit carries the same geometry three times, generated by
 * scripts/hero_kit.py at one camera and one fit so the layers register to the
 * pixel: the traced drawing, the flat CAD shading, and the studio render.
 *
 * The DEFAULT state is the finished object. That is deliberate -- with no JS,
 * or with reduced motion, the hero has to be the part, not an unfinished
 * drawing. The script adds .anim before the first paint to wind it back and
 * then steps it forward. */
#heroKit .hl{transition:opacity 1.05s cubic-bezier(.4,0,.2,1)}
#heroKit.anim .hl-cad,#heroKit.anim .hl-real{opacity:0}
#heroKit.anim.st-cad .hl-cad{opacity:1}
#heroKit.anim.st-real .hl-cad,#heroKit.anim.st-real .hl-real{opacity:1}
/* once the render is up the line work would only double the silhouette */
#heroKit.anim.st-real .hl-line{opacity:.32;transition:opacity 1.05s ease}
#heroKit .hg image{image-rendering:auto}
@media (prefers-reduced-motion:reduce){#heroKit .hl{transition:none}}
/* ---------- skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;font-weight:600;font-size:.9rem;border-radius:0 0 3px 0}
.skip-link:focus{left:0}

/* ---------- seminar / evidence cards (system page) ---------- */
.vid-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,28px);margin-top:clamp(30px,4vh,44px)}
.vid-card{display:block;text-decoration:none;background:var(--sheet);border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;position:relative;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.vid-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.vid-card .thumb{position:relative;aspect-ratio:16/9;background:var(--dark);overflow:hidden}
.vid-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .2s}
.vid-card:hover .thumb img{opacity:1}
.vid-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-card .play i{width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--dark) 62%,transparent);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.vid-card:hover .play i{background:var(--red);border-color:var(--red)}
.vid-card .play svg{width:18px;height:18px;color:#fff;margin-left:3px}
.vid-card .vc-body{padding:18px 20px 20px}
.vid-card .vc-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.vid-card h3{font-size:1.06rem;font-weight:640;letter-spacing:-.008em;margin-bottom:4px;color:var(--ink)}
.vid-card p{font-size:.86rem;color:var(--ink-2);line-height:1.55}
.vid-card .vc-ext{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:#fff;background:color-mix(in srgb,var(--dark) 55%,transparent);padding:4px 8px;border-radius:2px}
@media (max-width:760px){.vid-row{grid-template-columns:1fr}}
.partner-line{margin-top:22px;display:flex;gap:10px 28px;flex-wrap:wrap;align-items:baseline}
.partner-line .pl-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.partner-line a{font-size:.92rem;font-weight:560;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.partner-line a:hover{color:var(--red);border-color:var(--red)}

/* ============ SYSTEM DECONSTRUCTION (scroll-driven) ============ */
.decon{background:var(--dark);color:var(--dark-text);height:420vh;position:relative}
.decon-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);align-items:center;gap:clamp(20px,3vw,48px);padding:0 clamp(20px,4vw,48px)}
.decon-copy{max-width:44ch;position:relative;z-index:2}
.decon-copy .mono{color:var(--dark-red);margin-bottom:14px}
.decon-copy h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;font-weight:650;letter-spacing:-.018em;margin-bottom:18px;text-wrap:balance}
.decon-copy p.cap{color:var(--dark-mute);font-size:1.02rem;line-height:1.62;min-height:5.2em}
.decon-copy p.cap b{color:var(--dark-text);font-weight:620}
.decon-stage{position:relative;height:min(78vh,760px);display:flex;align-items:center;justify-content:center}
.decon-stage img{position:absolute;max-height:100%;max-width:100%;width:auto;will-change:transform,opacity}
.decon-dots{position:absolute;left:clamp(20px,4vw,48px);bottom:34px;display:flex;gap:10px;align-items:center}
.decon-dots i{width:7px;height:7px;border-radius:50%;background:var(--dark-line);transition:background .2s}
.decon-dots i.on{background:var(--red)}
.decon-dots .mono{color:var(--dark-mute);margin-left:10px}
.decon-scroll-hint{position:absolute;right:clamp(20px,4vw,48px);bottom:34px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--dark-mute);text-transform:uppercase}
@media (max-width:920px){
  .decon{height:460vh}
  .decon-sticky{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding-top:86px;align-items:start}
  .decon-copy p.cap{min-height:6.4em;font-size:.92rem}
  .decon-stage{height:auto;min-height:0;align-self:stretch;margin-bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .decon{height:auto}
  .decon-sticky{position:static;height:auto;padding-top:64px;padding-bottom:64px}
  .decon-stage img{position:static}
  .decon-stage img:not(.rm-keep){display:none}
}