/* ============================================================
   INNER PAGES — Services · How It Works · Contact · Distributor
   ============================================================ */
[hidden]{display:none !important}
.nav a.active{color:var(--fg-ink);font-weight:500}

/* Page hero — navy, compact.
   v1.57: every inner page opens on the same ground the home page opens on: the
   identical 168deg ramp and the same dotted texture, referenced from the same
   tokens rather than a second navy invented here. It was a mist-to-white
   gradient, which made each inner page read as a different site from the one
   the visitor arrived on.
   The markup pairs this with `on-navy` — the background lives here, but the
   text colours come from the shared .on-navy rules, so a heading never has to
   be recoloured hero by hero. */
.page-hero{
  position:relative;overflow:hidden;padding-block:72px 64px;border-bottom:0;
  background:linear-gradient(168deg,var(--fg-navy-900) 0%,var(--fg-navy-800) 52%,var(--fg-navy-700) 100%);
  color:#fff;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:34px 34px;opacity:.45;pointer-events:none;
}
.page-hero > .wrap{position:relative}
/* The two pale-red notices that live inside a hero were drawn for white paper:
   #FFF8F8 on navy is a bright rectangle and #B42318 text on it is unreadable.
   On navy they become a translucent red wash with light text. */
.page-hero .illus-note,
.page-hero .draft-tag{
  background:rgba(225,18,28,.16);border-color:rgba(255,160,155,.45);color:#FFDFDC;
}
@media (max-width:900px){ .page-hero{padding-block:48px 44px} }
.page-hero h1{font-size:clamp(32px,4.4vw,52px)}
.page-hero .lead{margin-top:18px}

/* ---------- Services: deep blocks ---------- */
/* ---------- the two services, side by side ----------
   Each keeps its own ground — navy and white — so the pair still reads as a
   choice rather than one long page. Inside a half-width card the .svc-deep
   two-column split has nowhere to go, so it stacks. */
.svcpair{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
@media (max-width:960px){ .svcpair{grid-template-columns:1fr} }
.svcpair__i{border:1px solid var(--fg-hairline);border-radius:var(--r-lg);
  padding:44px 40px;background:#fff}
@media (max-width:600px){ .svcpair__i{padding:30px 22px} }
.svcpair__i--navy{border-color:transparent;color:#fff;
  background:linear-gradient(168deg,var(--fg-navy-900) 0%,var(--fg-navy-800) 52%,var(--fg-navy-700) 100%)}
.svcpair .svc-deep{grid-template-columns:1fr;gap:30px}
.svcpair .svc-deep__head h2{font-size:clamp(22px,2.4vw,30px)}
.svcpair .svc-deep__head .lead{font-size:16.5px}
.svcpair .deep-block--facts{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px) and (min-width:961px){ .svcpair .deep-block--facts{grid-template-columns:1fr} }

.svc-deep{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
@media (max-width:980px){ .svc-deep{grid-template-columns:1fr;gap:40px} }
.svc-deep__head h2{margin-top:14px}
.svc-deep__head .lead{font-size:18px}
.svc-deep__body{display:grid;gap:34px}
.deep-block h4,.deep-block h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-steel-500);margin-bottom:12px;font-weight:500}
html[dir="rtl"] .deep-block h4,html[dir="rtl"] .deep-block h3{letter-spacing:.02em;text-transform:none;font-size:15px}
.deep-block p{font-size:16.5px;color:var(--fg-ink-muted);line-height:1.65}
html[dir="rtl"] .deep-block p{line-height:1.9}
/* The accepted formats used to be one grey sentence, which is exactly where a
   dentist's eye slides off — and it is the line that decides whether the case
   arrives usable. It is now a bordered strip: a label, then one chip per
   format. Chips carry .ltr because a filename extension is Latin text and must
   not be reordered inside an Arabic paragraph. */
.fmt{margin-top:18px;font-size:14px;color:var(--fg-ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 16px;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  background:var(--fg-mist-100)}
.fmt__label{font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-navy-700);
  margin-inline-end:4px}
html[dir="rtl"] .fmt__label{font-family:var(--font-ar);letter-spacing:0;
  text-transform:none;font-size:13.5px}
.fmt__chip{font-family:var(--font-mono);font-size:12.5px;line-height:1;
  padding:7px 11px;border-radius:999px;background:var(--fg-white);
  border:1px solid var(--fg-steel-200);color:var(--fg-ink)}
.fmt__chip--max{background:transparent;border-style:dashed;color:var(--fg-ink-muted);
  font-family:inherit;font-size:13px;padding:6px 11px}
/* On navy the strip is a pane of light on a dark ground, not a white card —
   a solid white block here would punch a hole in the band. */
.on-navy .fmt{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  color:#fff}
.on-navy .fmt__label{color:var(--fg-steel-400)}
.on-navy .fmt__chip{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);
  color:#fff}
.on-navy .fmt__chip--max{background:transparent;border-color:rgba(255,255,255,.30);
  color:var(--fg-steel-400)}
.deep-block--facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fg-hairline);
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden}
@media (max-width:560px){ .deep-block--facts{grid-template-columns:1fr} }
.fact{background:#fff;padding:20px 22px;display:grid;gap:6px}
.section--mist .fact{background:#fff}
/* The fact chips keep their light panels on navy — they are the numbers a
   dentist is looking for and they should read as a printed strip laid on the
   band. Only the gutter between them changes, because the hairline token is
   invisible against navy. */
.on-navy .deep-block--facts{background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.20)}
.on-navy .fact{background:#fff;color:var(--fg-ink)}
.on-navy .fact > span{color:var(--fg-steel-500)}
.on-navy .fact b{color:var(--fg-ink)}
.fact > span{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-steel-500)}
html[dir="rtl"] .fact > span{letter-spacing:0;text-transform:none;font-size:14px}
.fact b{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- Tick lists ---------- */
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{position:relative;padding-inline-start:26px;font-size:16px;color:var(--fg-ink-muted);line-height:1.6}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:1px;top:6px;width:6px;height:11px;
  border-right:1.5px solid var(--fg-navy-800);border-bottom:1.5px solid var(--fg-navy-800);
  transform:rotate(45deg);
}
html[dir="rtl"] .ticks li::before{transform:rotate(45deg)}
.ticks--lg li{font-size:17px;margin-bottom:2px}

/* ticks--cards: the deliverables list on the Services page.
   A bare chevron in front of grey text is the same weight as body copy, and
   this list is the actual product — what the dentist gets for his money. Each
   item becomes its own panel with a filled navy check, so the list reads as a
   set of things received rather than as a paragraph.
   The check is two pseudo-elements: ::before is the disc, ::after the tick.
   Every property the base .ticks li::before sets has to be undone explicitly
   here — it ships a 6×11 rotated chevron, and a half-overridden rule leaves a
   rotated disc. */
.ticks--cards{gap:10px}
.ticks--cards li{
  position:relative;padding-block:14px;padding-inline:48px 18px;
  background:var(--fg-mist-100);border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);color:var(--fg-ink);font-size:16px;line-height:1.5;
}
.ticks--cards li::before{
  content:"";position:absolute;inset-inline-start:16px;top:50%;
  width:20px;height:20px;margin-top:-10px;border:0;border-radius:50%;
  background:var(--fg-navy-800);transform:none;
}
.ticks--cards li::after{
  content:"";position:absolute;inset-inline-start:23.5px;top:50%;
  width:5px;height:9px;margin-top:-6px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
/* Same on navy as the formats strip: a pane of light, not a white block. The
   navy check disc would vanish on it, so the disc goes white and the tick
   inside it goes navy. */
.on-navy .ticks--cards li{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);color:#fff}
.on-navy .ticks--cards li::before{background:#fff;border:0}
.on-navy .ticks--cards li::after{border-right-color:var(--fg-navy-900);
  border-bottom-color:var(--fg-navy-900)}
.on-navy .ticks li{color:var(--fg-steel-400)}
.on-navy .ticks li::before{border-right-color:var(--fg-platinum);border-bottom-color:var(--fg-platinum)}

/* ---------- Lifecycle ---------- */
.lifecycle{list-style:none;counter-reset:none;max-width:900px}
.lifecycle li{
  display:grid;grid-template-columns:90px 1fr;gap:28px;
  padding:30px 0;border-top:1px solid var(--fg-hairline);
}
.lifecycle li:last-child{border-bottom:1px solid var(--fg-hairline)}
@media (max-width:600px){ .lifecycle li{grid-template-columns:56px 1fr;gap:16px} }
.lc__n{font-family:var(--font-mono);font-size:40px;line-height:1;color:var(--fg-numeral);letter-spacing:-.03em}
@media (max-width:600px){ .lc__n{font-size:26px} }
.lifecycle h4,.lifecycle h3{font-size:19px;margin-bottom:8px}
.lifecycle p{font-size:16px;color:var(--fg-ink-muted);line-height:1.65}
html[dir="rtl"] .lifecycle p{line-height:1.9}

/* ---------- Two-column layouts ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;gap:44px} }
.two-col--form{grid-template-columns:.9fr 1.1fr}
/* on the home page the two columns sit under a section heading rather than
   under a page hero, so they need the rhythm the other sections use */
.signup-cols{margin-top:44px}
.signup-cols .steps-mini{margin-top:16px}

/* v1.42 — the account block sits inside the final navy section, above "Get
   started". Two things follow. .final centres its wrap, which suits a call to
   action and ruins a two-column form, so this half opts out. And everything in
   the left column was written for ink on white and has to be re-stated for
   white on navy; the form itself stays a white card, which is what separates
   the thing you fill in from the thing you read. */
.final .signup-wrap{text-align:start;display:block;align-items:stretch}
/* .final narrows its h2 to 16ch and its lead to 52ch so a centred call to
   action breaks on the right words. Left on, they broke "Create your account"
   across two lines against a left edge. */
.final .signup-wrap h2{max-width:none}
.final .signup-wrap .lead{max-width:none}
html[dir="rtl"] .final .signup-wrap{text-align:start}
.signup-wrap{padding-bottom:calc(var(--section-y) * .72);margin-bottom:calc(var(--section-y) * .72);
  border-bottom:1px solid rgba(255,255,255,.14)}
/* The account block sits on navy, but the cards inside it are white. The
   .on-navy colour rules are written for text sitting directly on the navy and
   the cascade carries them straight into those cards: the code screen's
   heading came out #fff on #fff — invisible — its eyebrow at 2.2:1, and the
   six-digit input was white text in a white field. Anything on a white card
   gets the light-background colours back. */
.on-navy .cform,
.on-navy .pending-card{color:var(--fg-ink)}
.on-navy .cform h1,.on-navy .cform h2,.on-navy .cform h3,
.on-navy .pending-card h1,.on-navy .pending-card h2,.on-navy .pending-card h3{color:var(--fg-ink)}
.on-navy .cform .eyebrow,
.on-navy .pending-card .eyebrow{color:var(--fg-steel-500)}
.on-navy .cform .lead,.on-navy .cform p,
.on-navy .pending-card p{color:var(--fg-ink-muted)}
.on-navy .cform input,.on-navy .cform select,.on-navy .cform textarea{color:var(--fg-ink)}
.on-navy .steps-mini b{color:#fff}
.on-navy .steps-mini span{color:var(--fg-steel-400)}
.on-navy .steps-mini li::before{border-color:rgba(255,255,255,.30);color:var(--fg-steel-400)}
.on-navy .disclaimer{background:rgba(255,255,255,.06);color:var(--fg-steel-400);
  border-inline-start-color:rgba(255,255,255,.34)}
@media (max-width:900px){ .two-col--form{grid-template-columns:1fr} }
.mini-h{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-steel-500);margin-bottom:18px;font-weight:500}
html[dir="rtl"] .mini-h{letter-spacing:.02em;text-transform:none;font-size:15px}

/* ---------- Spec table ---------- */
.specs{border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;background:#fff}
.specs div{display:flex;justify-content:space-between;gap:20px;padding:17px 24px;border-bottom:1px solid var(--fg-hairline);font-size:15.5px}
.specs div:last-child{border-bottom:0}
.specs > div > span{color:var(--fg-ink-muted)}
.specs b{font-weight:500;font-variant-numeric:tabular-nums;text-align:end}

.disclaimer{
  margin-top:26px;padding:18px 22px;background:var(--fg-mist-100);border-radius:var(--r-sm);
  font-size:14.5px;color:var(--fg-ink-muted);border-inline-start:2px solid var(--fg-platinum);
}
.section--mist .disclaimer{background:#fff}

/* ---------- Contact cards ---------- */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:760px){ .ccards{grid-template-columns:1fr} }
.ccard{
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:32px 34px;
  display:grid;gap:10px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ccard:hover{border-color:var(--fg-steel-200);box-shadow:var(--shadow-1)}
.ccard__label{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-steel-500)}
html[dir="rtl"] .ccard__label{letter-spacing:0;text-transform:none;font-size:14px}
.ccard__val{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--fg-ink)}
html[dir="rtl"] .ccard__val{letter-spacing:0}
.ccard__note{font-size:14px;color:var(--fg-ink-muted)}

.regbox{margin-top:32px;border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;background:#fff}
.regbox div{display:flex;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--fg-hairline);font-size:15px}
.regbox div:last-child{border-bottom:0}
.regbox > div > span{color:var(--fg-ink-muted)}
.regbox b{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- Forms ---------- */
.cform{display:grid;gap:20px;background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:36px}
@media (max-width:600px){ .cform{padding:26px 20px} }
.cform label{display:grid;gap:8px}
.cform label > span{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-steel-500)}
html[dir="rtl"] .cform label > span{letter-spacing:0;text-transform:none;font-size:14.5px}
.cform input,.cform select,.cform textarea{
  width:100%;padding:13px 15px;border:1px solid var(--fg-hairline);border-radius:var(--r-sm);
  font-size:16px;background:#fff;transition:border-color .15s var(--ease);font-family:inherit;
}
.cform textarea{resize:vertical;line-height:1.6}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--fg-navy-600);outline:none}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:600px){ .cform__row{grid-template-columns:1fr} }
.cform button{justify-content:center;margin-top:6px}
.cform__note{font-size:13.5px;color:var(--fg-steel-500);margin-top:-4px}

/* ---------- Map ---------- */
.mapwrap{
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;
  height:420px;background:var(--fg-mist-100);
}
.mapload{width:100%;height:100%;border:0;background:var(--fg-mist-100);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;color:var(--fg-navy-800);
  background-image:radial-gradient(circle at 1px 1px, var(--fg-steel-200) 1px, transparent 0);
  background-size:22px 22px}
.mapload:hover{background-color:#EBEFF5}
.mapload__t{font-size:16px;font-weight:600}
.mapload__s{font-size:13.5px;color:var(--fg-steel-500)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.02)}
@media (max-width:600px){ .mapwrap{height:320px} }


/* ============================================================
   PRODUCTS & DISTRIBUTION
   ============================================================ */
.brandsec{border-bottom:1px solid var(--fg-hairline)}
.brandsec:nth-of-type(even){background:var(--fg-mist-100)}
.brand-head{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start}
@media (max-width:900px){ .brand-head{grid-template-columns:1fr;gap:28px} }
.brand-logo{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:28px 24px;display:grid;place-items:center;min-height:120px}
.brand-logo img{max-width:150px;width:100%}
.brand-origin{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--fg-steel-500);
  border:1px solid var(--fg-hairline);border-radius:var(--r-sm);padding:5px 11px;background:#fff;margin-bottom:16px}
.brand-origin svg{width:18px;height:12px;flex:none;border-radius:1px}
.brand-kind{display:inline-flex;align-items:center;font-size:13px;color:var(--fg-navy-800);
  border:1px solid var(--fg-platinum);border-radius:var(--r-sm);padding:5px 11px;
  background:#fff;margin-bottom:16px;margin-inline-start:8px}
.brand-head h2{margin-bottom:16px}
.brand-head p{font-size:16.5px;color:var(--fg-ink-muted);line-height:1.65;max-width:62ch}
html[dir="rtl"] .brand-head p{line-height:1.9}

.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fg-hairline);
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;margin-top:44px}
@media (max-width:820px){ .fam{grid-template-columns:1fr} }
.fam__i{background:#fff;padding:30px 28px;display:grid;gap:10px;align-content:start}
.brandsec:nth-of-type(even) .fam__i{background:#fff}
.fam__i svg{width:24px;height:24px;stroke:var(--fg-navy-800);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.fam__i h4,.fam__i h3{font-size:16.5px}
.fam__i p{font-size:14.5px;color:var(--fg-ink-muted);line-height:1.55}
.fam__i ul{list-style:none;display:grid;gap:7px;margin-top:4px}
.fam__i li{font-size:14px;color:var(--fg-ink-muted);padding-inline-start:14px;position:relative}
.fam__i li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:6px;height:1.5px;background:var(--fg-steel-400)}
/* ---------- the zygomatic band ----------
   Picture first on a phone, picture left on a desk. It gets a band because it
   is the one case type where the guide is the procedure rather than an aid. */
.zygo{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){ .zygo{grid-template-columns:1fr;gap:32px} }
/* flipped: words first, picture second — used above the grid so the two bands
   do not both lead with a picture on the same edge */
@media (min-width:901px){ .zygo--flip{grid-template-columns:.95fr 1.05fr} }
@media (max-width:900px){ .zygo--flip .zygo__art{order:-1} }
/* Both figures came with their own light backgrounds and neither keys cleanly
   (see tools/fgsupplied.py), so each sits in a white card. On the navy band
   that is what a printed figure does anyway; on the white band the border is
   what stops it bleeding into the page. */
.zygo__art{margin:0;background:var(--fg-mist-100);border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);overflow:hidden}
.zygo__art img{width:100%;height:auto;display:block}
.on-navy .zygo__art{border-color:rgba(255,255,255,.14)}
/* nothing here is dark any more: every picture is composited onto --fg-mist-100
   by tools/fgsupplied.py and the card is painted the same value, so picture and
   card meet without a seam on the white bands and on the navy one alike. */
.zygo__body h2{margin-top:14px}
.zygo__body .lead{max-width:52ch}
.zygo__body .ticks{margin-top:26px}
.zygo__acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:30px}

/* ---------- three case types, side by side ----------
   Three full-width bands for three related cases made the page feel like the
   list would never end, and a dentist looking for the one that matches his
   case had to scroll past two he did not want. In a row he compares them.

   The pictures come in three different aspect ratios and are letterboxed into
   one 4:3 frame with object-fit:contain — which is normally visible and ugly,
   and is invisible here only because every picture was composited onto
   --fg-mist-100 and the frame is painted the same value. */
/* stretch, not start: cards of different text lengths must still be one
   height, or the row of "Submit a case" buttons staircases down the page */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;
  align-items:stretch}
@media (max-width:1000px){ .trio{grid-template-columns:1fr;gap:22px;max-width:560px} }
.trio__c{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:18px 20px 24px}
.trio__art{margin:0 0 20px;aspect-ratio:4/3;background:var(--fg-mist-100);
  border-radius:var(--r-sm);overflow:hidden}
.trio__art img{width:100%;height:100%;object-fit:contain;display:block}
/* two lines reserved for the eyebrow whether or not it needs them, so the
   three titles sit on one line across the row — one of them wraps at most
   widths and the other two do not, and unaligned headings read as sloppy */
.trio__c .eyebrow{display:block;min-height:2.7em}
.trio__c h3{font-size:clamp(19px,1.7vw,22px);margin-top:10px}
.trio__c > p{margin-top:12px;color:var(--fg-ink-muted);font-size:15.5px}
.trio__c .ticks{margin-top:18px}
.trio__c .ticks li{font-size:14.5px}
/* the link sits on the floor of the card, so three cards of different text
   lengths still line their actions up */
.trio__c .tlink{margin-top:auto;padding-top:22px;align-self:flex-start}

/* The three main case types use the same card as the three smaller ones, so
   the page has one kind of case card rather than two. --lead only gives them
   a slightly taller picture and a real button, because these are the three a
   dentist is most likely to have come for. */
.trio--lead .trio__art{aspect-ratio:5/4}
.trio__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:auto;padding-top:22px}
.trio__acts .btn{padding:10px 20px;font-size:14.5px}
.trio__acts .tlink{margin-top:0;padding-top:0}

/* "See a sample case" sits above "Ask about…" on every card, and the pair
   wrap together under the button rather than stringing out beside it. */
.trio__acts{flex-direction:column;align-items:flex-start;gap:12px}
.trio__acts .btn{align-self:flex-start;margin-bottom:2px}

/* the published cases: the client's own text, and the figures from the book */
.pubcase__t{margin-top:30px;max-width:26ch}
@media (min-width:900px){ .pubcase__t{max-width:none} }
.pubtext{max-width:78ch;margin-top:18px}
.pubtext p{margin-top:16px;font-size:16.5px;line-height:1.75;color:var(--fg-ink-muted)}
.on-navy .pubtext p{color:rgba(255,255,255,.82)}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media (max-width:900px){ .figs{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (max-width:560px){ .figs{grid-template-columns:1fr} }
.fig{margin:0}
/* one frame for all of them. The figures come off the page of a book at
   whatever shape they were printed, and a grid of ragged heights makes the
   captions staircase. contain, never cover: a cropped clinical photograph is
   a different photograph. */
.fig img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;
  border-radius:var(--r-sm);border:1px solid var(--fg-hairline);
  background:var(--fg-mist-100)}
.on-navy .fig img{border-color:rgba(255,255,255,.14)}
.on-navy .fig figcaption{color:rgba(255,255,255,.66)}
.fig figcaption{margin-top:8px;font-size:12.5px;color:var(--fg-steel-500);
  font-family:var(--font-mono);letter-spacing:.04em}

/* ---------- a published case, by somebody else ----------
   The credit block is not a footnote. It is the first thing under the hero,
   because the one thing a reader must not walk away believing is that this
   case is ours. */
.credit{max-width:70ch;border-inline-start:3px solid var(--fg-navy-600);
  padding-inline-start:22px}
.credit__who{font-size:19px;font-weight:700;margin-top:8px}
.credit p{color:var(--fg-ink-muted);margin-top:10px}
.pubcase{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:44px}
@media (max-width:820px){ .pubcase{grid-template-columns:1fr} }
.pubcase__b{background:var(--fg-mist-100);border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);padding:26px 28px}
.pubcase__b h2{font-size:clamp(18px,1.6vw,21px)}
.pubcase__b p{margin-top:12px;color:var(--fg-ink-muted)}

/* ---------- who receives the case ----------
   Photo left, words right, and no card around it: this is one person
   introducing himself, not another product tile. */
.handler{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:center;
  max-width:900px}
@media (max-width:700px){ .handler{grid-template-columns:1fr;gap:24px;justify-items:start} }
.handler__photo{margin:0;width:180px;height:180px;border-radius:22px;overflow:hidden;
  border:1px solid var(--fg-hairline);background:#1E222C}
.handler__photo img{width:100%;height:100%;object-fit:cover;display:block}
.handler__body h2{font-size:clamp(22px,2.6vw,30px);margin-top:12px}
.handler__role{font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg-steel-500);margin-top:8px}
html[dir="rtl"] .handler__role{letter-spacing:0;text-transform:none;font-size:15px}
.handler .lead{font-size:17px;margin-top:16px;max-width:60ch}
.handler__acts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px}

/* ---------- the guided assistant ----------
   Buttons, not a language model. Every answer it can give is a fact already
   printed somewhere on this site, written out here so the two cannot drift
   apart silently; there is no server, no key and no bill. Two answers exist
   only to REFUSE: a clinical question goes to the consultant, and a price is
   not published yet, so it says so instead of guessing.

   It sits above the WhatsApp button in the same corner, so a dentist chooses
   between an instant answer and a human without hunting for either. */
/* It is the only floating thing on the page now — the WhatsApp button was
   removed because the assistant carries WhatsApp in every one of its menus,
   and two round buttons in one corner asking for the same conversation is a
   choice nobody wants to make. Being the only one, it can afford to say what
   it is instead of relying on a glyph: a pill with a word in it on a desktop,
   a circle on a phone where there is no room for the word. */
.bot{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:70}
.bot__btn{display:inline-flex;align-items:center;gap:10px;height:54px;
  padding:0 20px 0 16px;border-radius:999px;background:var(--fg-navy-800);
  color:#fff;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;
  box-shadow:0 14px 34px rgba(11,18,32,.34);transition:background .2s var(--ease),transform .2s var(--ease)}
html[dir="rtl"] .bot__btn{padding:0 16px 0 20px}
.bot__btn:hover{background:var(--fg-navy-700);transform:translateY(-2px)}
.bot__btn svg{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the three dots sit inside the bubble and pulse, which is the one piece of
   motion that reads as "someone is there" rather than as decoration */
.bot__btn .d{fill:currentColor;stroke:none;opacity:.55;
  animation:botdot 1.6s ease-in-out infinite}
.bot__btn .d:nth-child(3){animation-delay:.2s}
.bot__btn .d:nth-child(4){animation-delay:.4s}
@keyframes botdot{0%,60%,100%{opacity:.45}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .bot__btn .d{animation:none;opacity:.8} }
@media (max-width:600px){
  .bot{inset-block-end:16px;inset-inline-end:16px}
  .bot__btn{width:54px;padding:0;justify-content:center;gap:0}
  .bot__btn b{display:none}
}
.botpanel{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:80;
  width:min(380px,calc(100vw - 32px));max-height:min(72vh,620px);
  display:none;flex-direction:column;overflow:hidden;
  background:var(--fg-white);border:1px solid var(--fg-steel-200);
  border-radius:20px;box-shadow:0 26px 60px rgba(11,18,32,.26)}
.botpanel.is-open{display:flex}
.botpanel__h{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;background:var(--fg-navy-900);color:#fff}
.botpanel__h b{font-size:15px}
.botpanel__h span{display:block;font-size:12px;color:rgba(255,255,255,.62);margin-top:2px}
.botpanel__x{border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer;
  font-size:20px;line-height:1;width:28px;height:28px;border-radius:50%}
.botpanel__x:hover{color:#fff;background:rgba(255,255,255,.12)}
/* the conversation keeps its own floor. With ten topic chips the chip tray
   grew until it pushed the thread off the panel entirely — the answer the
   reader had just asked for was above the fold and gone. */
.botlog{flex:1 1 auto;min-height:150px;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.botmsg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14.5px;
  line-height:1.6;white-space:pre-line}
.botmsg--bot{align-self:flex-start;background:var(--fg-mist-100);
  border:1px solid var(--fg-hairline);color:var(--fg-ink)}
.botmsg--me{align-self:flex-end;background:var(--fg-navy-800);color:#fff}
.botmsg a{color:inherit;font-weight:700}
.botchips{flex:0 0 auto;max-height:34vh;overflow-y:auto;display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.botchip{font:inherit;font-size:13.5px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--fg-steel-200);background:var(--fg-white);
  color:var(--fg-ink);cursor:pointer;text-align:start}
.botchip:hover{border-color:var(--fg-navy-600);background:var(--fg-mist-100)}
.botchip--wa{border-color:#25D366;background:#25D366;color:var(--fg-ink);font-weight:700}
.botask{display:flex;gap:8px;padding:12px 14px;border-block-start:1px solid var(--fg-hairline)}
.botask input{flex:1;min-width:0;font:inherit;font-size:14px;padding:9px 12px;
  border:1px solid var(--fg-steel-200);border-radius:10px;background:var(--fg-white);
  color:var(--fg-ink)}
.botask button{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;
  border:0;border-radius:10px;background:var(--fg-navy-800);color:#fff;cursor:pointer}
@media (max-width:700px){
  .botpanel{inset-inline:12px;inset-block-end:12px;width:auto;max-height:76vh}
  .bot{inset-block-end:84px;inset-inline-end:16px}
}

/* ---------- the case dock ----------
   The band above introduces the person who receives cases, and it sits near
   the bottom of the page — which is the wrong moment. A dentist decides who
   he is handing a patient's imaging to WHILE he is reading the case types,
   not after he has finished. So the same face rides along in a small dock
   from the point he passes the two services until the full band arrives.

   Two rules keep it from becoming the thing everybody hates:
     · it is never on screen at the same time as the band it is a shortcut
       to — the observer hides it the moment the band appears, so nobody is
       shown the same man twice in one glance;
     · it closes, and stays closed for the rest of the visit.
   It is bottom-INLINE-START, so it does not fight the floating WhatsApp
   button in the opposite corner, and the pair swap sides together in RTL. */
.casedock{position:fixed;z-index:75;inset-block-end:24px;inset-inline-start:24px;
  display:flex;align-items:center;gap:14px;
  max-width:min(400px,calc(100vw - 48px));
  padding:10px 14px 10px 10px;background:var(--fg-white);color:var(--fg-ink);
  border:1px solid var(--fg-steel-200);border-radius:20px;
  /* a light card needs a real shadow to lift off a light page — the navy one
     could rely on its own contrast, this one cannot */
  box-shadow:0 16px 40px rgba(11,18,32,.16),0 2px 6px rgba(11,18,32,.06);
  transform:translateY(150%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
html[dir="rtl"] .casedock{padding:12px 12px 12px 16px}
.casedock.is-in{transform:none;opacity:1;pointer-events:auto}
/* the gate, in CSS rather than in the script: it holds even if the observers
   never run, and it is one line instead of a cleanup path */
html:not([data-route="services"]) .casedock{display:none}
.casedock__photo{width:56px;height:56px;flex:0 0 56px;border-radius:14px;
  object-fit:cover;display:block;background:var(--fg-mist-100)}
.casedock__body{min-width:0}
.casedock__eyebrow{display:block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-steel-500)}
html[dir="rtl"] .casedock__eyebrow{letter-spacing:0;text-transform:none;font-size:13px}
.casedock__name{display:block;font-size:15px;font-weight:700;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* WhatsApp green with INK on it, not white. White on the brand green is
   2.0:1 — it fails AA outright, and it only ever looked fine because the card
   behind it was navy. Ink on the same green is 9.4:1, and every darker green
   that carries white text stops looking like WhatsApp. */
.casedock__wa{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:9px 15px;border-radius:999px;background:#25D366;color:var(--fg-ink);
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.casedock__wa svg{width:17px;height:17px;fill:currentColor}
.casedock__wa:hover{background:#1FBE5A}
.casedock__x{position:absolute;inset-block-start:5px;inset-inline-end:7px;
  width:22px;height:22px;line-height:1;border:0;background:none;cursor:pointer;
  color:var(--fg-steel-500);font-size:17px;border-radius:50%}
.casedock__x:hover{color:var(--fg-ink);background:var(--fg-mist-100)}
@media (max-width:700px){
  .casedock{inset-inline:12px;inset-block-end:12px;max-width:none;gap:12px}
  .casedock__photo{width:48px;height:48px;flex-basis:48px}
}
@media (prefers-reduced-motion:reduce){
  .casedock{transition:opacity .2s ease}
  .casedock:not(.is-in){transform:none}
}

/* ---------- the catalogue shelf ----------
   Two PDFs, shown as what they are: a cover you can see and a size you know
   before you tap. The cover is the manufacturer's own first page, rendered by
   tools/fgdocs.py, because a generic PDF glyph tells a dentist nothing about
   which of the two catalogues he wants. */
.shelf{margin-top:40px;border:1px solid var(--fg-hairline);border-radius:var(--r-lg);
  background:var(--fg-mist-100);padding:36px 38px}
@media (max-width:600px){ .shelf{padding:26px 20px} }
.shelf__head h3{font-size:21px;margin-bottom:8px}
.shelf__head p{font-size:15.5px;color:var(--fg-ink-muted);line-height:1.6;max-width:64ch}
html[dir="rtl"] .shelf__head p{line-height:1.85}
.shelf__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media (max-width:820px){ .shelf__grid{grid-template-columns:1fr} }
.cat{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:20px}
@media (max-width:480px){ .cat{grid-template-columns:1fr} }
/* The frame has a fixed WIDTH and takes its height from the picture, so there
   is never a letterbox to fill and never a reason to crop. Three shapes share
   it now: two portrait pages from the IML catalogues, padded to one aspect by
   tools/fgdocs.py so they line up beside each other, and Implant 3D's square
   brochure cover, which is alone on its shelf and keeps its own shape.
   Earlier cuts tried the two obvious alternatives and both were worse:
   object-fit:cover sliced the word CATALOGUE off the Jupiter cover, and a
   fixed-height frame filled with mist put two pale blue bars down either side
   of the plate. */
.cat__cover{display:block;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--fg-hairline);background:#fff;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cat__cover img{display:block;width:100%;height:auto}
.cat__cover:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,18,32,.13)}
.cat__cover:focus-visible{outline:2px solid var(--fg-navy-600);outline-offset:3px}
.cat__body h4{font-size:17px;margin-bottom:2px}
.cat__sub{display:block;font-size:13px;color:var(--fg-steel-500);margin-bottom:10px}
.cat__body p{font-size:14.5px;color:var(--fg-ink-muted);line-height:1.6}
html[dir="rtl"] .cat__body p{line-height:1.85}
/* Not .ltr and not mono in Arabic. Forcing this line left-to-right reversed
   the Arabic around the figures, and the mono face has no Arabic glyphs, so
   "ميغابايت" came apart mid-word. Latin runs inside an Arabic sentence are
   what the bidi algorithm is for; it only needs to be left alone. */
.cat__meta{display:block;margin-top:12px;font-family:var(--font-mono);font-size:12.5px;
  color:var(--fg-steel-500)}
html[dir="rtl"] .cat__meta{font-family:var(--font-ar);font-size:13.5px}
.cat__acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.cat__acts .btn{padding:10px 18px;font-size:14.5px}
.shelf__fine{margin-top:22px;font-size:13px;color:var(--fg-steel-500);line-height:1.6;max-width:80ch}
.shelf__omitted{display:flex;gap:10px;align-items:flex-start;margin-top:22px;
  border:1px dashed #F0C9C5;background:#FFF8F8;border-radius:var(--r-sm);
  padding:12px 16px;font-size:14px;color:var(--fg-ink);max-width:70ch;line-height:1.55}

/* ---------- the free-month panel on the Implant 3D block ----------
   Implant 3D is the software every plan on this site is built in, so its
   block is the one that gets the navy treatment: the same 168deg ramp and
   dotted texture as the hero, which is how this site says "this is the
   important one" without saying it. The other two brands are boxes of parts;
   this one is the thing the service runs on. */
.offer{position:relative;overflow:hidden;margin-top:40px;border-radius:var(--r-lg);
  padding:44px 48px;color:#fff;
  background:linear-gradient(168deg,var(--fg-navy-900) 0%,var(--fg-navy-800) 52%,var(--fg-navy-700) 100%)}
@media (max-width:600px){ .offer{padding:32px 24px} }
.offer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:34px 34px;opacity:.45}
.offer > *{position:relative}
.offer__tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:#fff;
  background:var(--fg-swiss-red);border-radius:100px;padding:6px 14px}
html[dir="rtl"] .offer__tag{letter-spacing:0;text-transform:none;font-size:14px}
.offer h3{font-size:clamp(24px,3vw,34px);color:#fff;margin-top:18px;line-height:1.2}
.offer__lead{font-size:17px;color:var(--fg-steel-400);line-height:1.7;margin-top:14px;max-width:68ch}
html[dir="rtl"] .offer__lead{line-height:1.9}
.offer__tips{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:32px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
@media (max-width:820px){ .offer__tips{grid-template-columns:1fr;gap:22px} }
.offer__tip b{display:block;font-size:15.5px;font-weight:500;color:#fff;margin-bottom:7px}
.offer__tip p{font-size:14.5px;color:var(--fg-steel-400);line-height:1.6}
html[dir="rtl"] .offer__tip p{line-height:1.85}
.offer__acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px}
.offer__alt{font-size:14px;color:var(--fg-steel-400)}
.offer__fine{margin-top:22px;font-size:13.5px;color:var(--fg-steel-400);line-height:1.6;
  max-width:78ch;opacity:.85}
.brand-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.brand-cta .is-pending{cursor:default;color:var(--fg-steel-500);border-color:var(--fg-hairline);
  background:var(--fg-mist-100)}
.brand-cta .is-pending:hover{background:var(--fg-mist-100);border-color:var(--fg-hairline)}
.tbd{font-size:13px;color:var(--fg-steel-500);border:1px dashed var(--fg-steel-200);border-radius:var(--r-sm);padding:6px 12px}

.countries{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
@media (max-width:820px){ .countries{grid-template-columns:repeat(2,1fr)} }
.ctry{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:20px 22px;display:grid;gap:6px}
.ctry b{font-size:16px;font-weight:500}
.ctry span{font-size:13px;color:var(--fg-steel-500)}
.ctry.soon{border-style:dashed;background:transparent}
.ctry.soon b{color:var(--fg-ink-muted)}
.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:32px;padding-top:26px;border-top:1px solid var(--fg-hairline);font-size:15px;color:var(--fg-ink-muted)}

/* ============================================================
   ABOUT + LEGAL
   ============================================================ */
.draft-tag{
  display:inline-block;margin-top:22px;font-size:12.5px;color:var(--fg-danger);
  border:1px dashed #F0C9C5;background:#FFF8F8;border-radius:var(--r-sm);padding:7px 13px;
}
.people{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
@media (max-width:900px){ .people{grid-template-columns:1fr} }
.person{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:30px 32px;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start}
@media (max-width:520px){ .person{grid-template-columns:1fr;gap:16px} }
.person__photo{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--fg-hairline);background:var(--fg-mist-100)}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block}
.person__init{width:56px;height:56px;border-radius:50%;background:var(--fg-navy-800);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:500;letter-spacing:.02em}
.person b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.person__role{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--fg-steel-500);margin:7px 0 14px}
html[dir="rtl"] .person__role{letter-spacing:0;text-transform:none;font-size:14px}
.person p{font-size:15px;color:var(--fg-ink-muted);line-height:1.6}

/* legal document layout */
.legal-hero{padding-block:64px 48px;border-bottom:1px solid var(--fg-hairline);
  background:linear-gradient(180deg,var(--fg-mist-100),#fff)}
.legal-hero h1{font-size:clamp(30px,4vw,46px)}
.legal-meta{display:flex;gap:0 10px;flex-wrap:wrap;align-items:center;margin-top:20px;
  font-size:13.5px;color:var(--fg-steel-500)}
.legal-grid{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start;padding-block:64px 96px}
@media (max-width:900px){ .legal-grid{grid-template-columns:1fr;gap:32px;padding-block:44px 72px} }
.legal-toc{position:sticky;top:100px;border-inline-start:1px solid var(--fg-hairline);padding-inline-start:20px}
@media (max-width:900px){ .legal-toc{position:static;border-inline-start:0;padding-inline-start:0;
  border-bottom:1px solid var(--fg-hairline);padding-bottom:24px} }
.legal-toc a{display:block;font-size:14px;color:var(--fg-ink-muted);padding:7px 0;line-height:1.4}
.legal-toc a:hover{color:var(--fg-ink)}
.legal-body{max-width:70ch}
.legal-body section{margin-bottom:44px;scroll-margin-top:110px}
.legal-body h2{font-size:20px;margin-bottom:16px;letter-spacing:-.01em}
html[dir="rtl"] .legal-body h2{letter-spacing:0}
.legal-body p{font-size:16px;color:var(--fg-ink-muted);line-height:1.7;margin-bottom:14px}
html[dir="rtl"] .legal-body p{line-height:1.95}
.legal-body ul{list-style:none;display:grid;gap:10px;margin:6px 0 16px}
.legal-body li{position:relative;padding-inline-start:20px;font-size:16px;color:var(--fg-ink-muted);line-height:1.65}
.legal-body li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:7px;height:1.5px;background:var(--fg-steel-400)}
.legal-body b{color:var(--fg-ink);font-weight:500}
.legal-note{background:var(--fg-mist-100);border-inline-start:2px solid var(--fg-platinum);
  border-radius:var(--r-sm);padding:18px 22px;font-size:15px;color:var(--fg-ink-muted);line-height:1.6}
.legal-warn{background:#FFF8F8;border:1px solid #F0C9C5;border-radius:var(--r-md);padding:20px 24px;
  display:flex;gap:12px;align-items:flex-start;margin-bottom:40px}
.legal-warn b{display:block;font-weight:500;color:var(--fg-ink);margin-bottom:5px;font-size:15px}
.legal-warn span{font-size:14.5px;color:var(--fg-ink-muted);line-height:1.55}
.legal-foot{margin-top:56px;padding-top:26px;border-top:1px solid var(--fg-hairline);
  font-size:14.5px;color:var(--fg-ink-muted);line-height:1.6}


/* ============================================================
   SAMPLE CASE WALKTHROUGH
   ============================================================ */
.illus-note{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  border:1px dashed #F0C9C5;background:#FFF8F8;border-radius:var(--r-sm);
  padding:11px 16px;font-size:14px;color:var(--fg-ink);max-width:70ch;line-height:1.5;
}
.study-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.study-grid--wide{grid-template-columns:1fr 1.2fr}
@media (max-width:980px){ .study-grid,.study-grid--wide{grid-template-columns:1fr;gap:36px} }
@media (max-width:980px){ .study-grid--flip > .rise:first-child{order:2} }
.study-n{
  font-family:var(--font-mono);font-size:14px;color:var(--fg-steel-500);
  letter-spacing:.1em;display:block;margin-bottom:14px;
}
.study-n--light{color:var(--fg-steel-400-onlight)}
.study-head h2{font-size:clamp(24px,2.8vw,34px)}
.study-head .lead{font-size:17.5px}

.quote-note{
  margin-top:20px;border:1px solid var(--fg-hairline);border-inline-start:3px solid var(--fg-navy-800);
  border-radius:var(--r-md);padding:22px 26px;background:#fff;
}
.quote-note__label{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-steel-500);
  display:block;margin-bottom:10px;
}
html[dir="rtl"] .quote-note__label{letter-spacing:0;text-transform:none;font-size:13.5px}
.quote-note p{font-size:16.5px;line-height:1.7;color:var(--fg-ink)}
html[dir="rtl"] .quote-note p{line-height:1.95}

.draw{margin:0;background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:18px 18px 0}
.draw svg{width:100%;height:auto;display:block;direction:ltr}
.draw figcaption{
  font-size:14px;color:var(--fg-ink-muted);line-height:1.55;
  padding:16px 4px 18px;border-top:1px solid var(--fg-hairline);margin-top:14px;
}
.draw--dark{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14)}
.draw--dark figcaption{color:var(--fg-steel-400);border-top-color:rgba(255,255,255,.14)}
.section--mist .draw{background:#fff}

.guide-specs{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);overflow:hidden;margin-top:28px}
.guide-specs > div{background:var(--fg-navy-800);display:flex;justify-content:space-between;gap:16px;
  padding:15px 20px;font-size:15px}
.guide-specs span{color:var(--fg-steel-400)}
.guide-specs b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}

/* the sample-case invitation strip on the home page */
.offerband{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:24px;padding:24px 30px;background:var(--fg-mist-100);
  border:1px solid var(--fg-hairline);border-inline-start:3px solid var(--fg-swiss-red);
  border-radius:var(--r-md);
}
.offerband__left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.offerband__code{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--fg-navy-800);
  background:#fff;border:1px solid var(--fg-platinum);border-radius:var(--r-sm);padding:8px 14px;white-space:nowrap;
}
.offerband b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}
.offerband span{font-size:14.5px;color:var(--fg-ink-muted);line-height:1.5}
.offerband__code{display:inline-block}
@media (max-width:600px){ .offerband{padding:22px 20px} }

.peek{background:var(--fg-navy-800);color:#fff;border-radius:var(--r-lg);padding:40px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:64px}
@media (max-width:700px){ .peek{padding:30px 24px} }
.peek h3{color:#fff;font-size:clamp(20px,2.4vw,26px);margin-bottom:10px}
.peek p{color:var(--fg-steel-400);font-size:16px;max-width:52ch;line-height:1.6}


/* ============================================================
   CBCT CAPTURE GUIDE
   ============================================================ */
.cbct-list{display:grid;gap:1px;background:var(--fg-hairline);border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);overflow:hidden;margin-top:52px}
.cbct-item{background:#fff;display:grid;grid-template-columns:74px 1fr;gap:0 24px;padding:38px 40px}
@media (max-width:700px){ .cbct-item{grid-template-columns:1fr;gap:14px;padding:28px 22px} }
.cbct-n{font-family:var(--font-mono);font-size:36px;line-height:1;color:var(--fg-numeral);letter-spacing:-.03em}
@media (max-width:700px){ .cbct-n{font-size:26px} }
.cbct-item h3{font-size:20px;margin-bottom:12px}
.cbct-item > div > p{font-size:16.5px;color:var(--fg-ink-muted);line-height:1.7;margin-bottom:20px;max-width:66ch}
html[dir="rtl"] .cbct-item > div > p{line-height:1.95}

.checkcard{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:12px 8px;margin-top:28px}
.chk-line{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;cursor:pointer;
  border-bottom:1px solid var(--fg-hairline);font-size:15.5px;line-height:1.55}
.chk-line:last-child{border-bottom:0}
.chk-line input{position:absolute;opacity:0;width:0;height:0}
.chk-line .cbx{margin-top:1px}
.chk-line input:checked ~ span:last-child{color:var(--fg-ink-muted);text-decoration:line-through}

.magnet{background:var(--fg-navy-800);color:#fff;border-radius:var(--r-lg);padding:40px 42px}
@media (max-width:600px){ .magnet{padding:30px 24px} }
.magnet__tag{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--fg-steel-400);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);
  padding:5px 11px;margin-bottom:20px}
html[dir="rtl"] .magnet__tag{letter-spacing:0;text-transform:none;font-size:13.5px}
.magnet h3{color:#fff;font-size:clamp(21px,2.4vw,27px);margin-bottom:12px}
.magnet p{color:var(--fg-steel-400);font-size:16px;line-height:1.6;margin-bottom:26px}
.magnet .waitlist input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.magnet .waitlist input::placeholder{color:var(--fg-steel-400)}
.magnet .waitlist input:focus{border-color:#fff}
.magnet .waitlist .btn--primary{background:#fff;color:var(--fg-navy-800)}
.magnet .waitlist .btn--primary:hover{background:var(--fg-mist-100)}
.magnet__note{font-size:13px;color:var(--fg-steel-500);margin-top:16px;margin-bottom:0}

/* ============================================================
   ACADEMY
   ============================================================ */
/* ---------- the three speakers ----------
   A row of equal cards rather than one big portrait and a column of text: the
   course has three names on it and giving one of them a 320px photograph and
   the other two nothing would say something about them that is not true. */
.spk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
/* Four speakers in a three-wide grid leaves one alone on a second row, which
   reads as an afterthought rather than a fourth speaker. When there are
   exactly four, go two-by-two. Browsers without :has fall back to 3 + 1,
   which is untidy but not broken. */
@media (min-width:901px){
  .spk-grid:has(> .spk:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){ .spk-grid{grid-template-columns:1fr;gap:22px} }
.spk{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:28px 26px 30px}
/* Dark, like the three pictures inside it — see tools/fgspeakers.py for why
   they all ended up on Dr. Maysara's studio ground rather than on white. */
.spk__photo{margin:0 0 20px;width:132px;height:132px;border-radius:18px;overflow:hidden;
  border:1px solid var(--fg-hairline);background:#1E222C}
.spk__photo img{width:100%;height:100%;object-fit:cover;display:block}
.spk h3{font-size:18px;margin-bottom:4px;line-height:1.3}
.spk__role{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg-steel-500);margin-bottom:14px}
html[dir="rtl"] .spk__role{letter-spacing:0;text-transform:none;font-size:14px}
.spk p{font-size:14.5px;color:var(--fg-ink-muted);line-height:1.65}
html[dir="rtl"] .spk p{line-height:1.9}
.empty-state{background:#fff;border:1.5px dashed var(--fg-steel-200);border-radius:var(--r-lg);
  padding:56px 40px;text-align:center;display:grid;justify-items:center;margin-top:48px}
@media (max-width:600px){ .empty-state{padding:36px 22px} }
.empty-mark{display:flex;gap:8px;margin-bottom:26px}
.empty-mark span{width:34px;height:44px;border:1.5px solid var(--fg-steel-200);border-radius:4px;display:block}
.empty-mark span:nth-child(2){opacity:.66}
.empty-mark span:nth-child(3){opacity:.33}
.empty-state h3{margin-bottom:14px}
.empty-state p{font-size:16px;color:var(--fg-ink-muted);max-width:52ch;line-height:1.6;margin-bottom:28px}
.empty-state .waitlist{justify-content:center;max-width:460px;width:100%}

.host-pick{display:inline-flex;border:1px solid var(--fg-hairline);border-radius:var(--r-sm);overflow:hidden;margin-top:26px}
.host-pick button{background:#fff;border:0;border-inline-end:1px solid var(--fg-hairline);padding:10px 18px;
  font-size:14px;color:var(--fg-ink-muted);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.host-pick button:last-child{border-inline-end:0}
.host-pick button.on{background:var(--fg-navy-800);color:#fff}
.host-pick button:hover:not(.on){background:var(--fg-mist-100)}

.player{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:14px}
.player__frame{aspect-ratio:16/9;background:linear-gradient(168deg,var(--fg-navy-900),var(--fg-navy-700));
  border-radius:var(--r-sm);display:grid;place-items:center;gap:14px;align-content:center}
.player__frame svg{width:46px;height:46px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:1.3;stroke-linejoin:round}
.player__frame span{font-size:13px;color:var(--fg-steel-400);font-family:var(--font-mono)}
.player__bar{height:4px;background:var(--fg-mist-100);border-radius:2px;margin-top:12px;overflow:hidden}
.player__bar span{display:block;height:100%;width:34%;background:var(--fg-navy-700);border-radius:2px}


/* ---------- the Italian diploma ---------- */
.dip-cert{margin:0;border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;
  background:var(--fg-mist-100)}
.dip-cert img{display:block;width:100%;height:auto}
.dip-campus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.dip-campus img{display:block;width:100%;height:110px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--fg-hairline)}