/* ============================================================
   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 ---------- */
/* The case lifecycle, as a rail.
   One rule runs across the top of all seven and each stage hangs from it, so
   the row reads as one process with seven marks on it rather than as seven
   cards that happen to be adjacent. The dividing lines are between the cells,
   not around them — a box per stage would make seven objects out of one. */
.lifecycle{
  list-style:none;counter-reset:none;max-width:none;
  display:grid;grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--fg-ink);
}
.lifecycle li{
  padding:18px 18px 4px;
  border-inline-start:1px solid var(--fg-hairline);
}
.lifecycle li:first-child{border-inline-start:0;padding-inline-start:0}
.lifecycle li:last-child{padding-inline-end:0}
/* The numeral was 40px display type. At a seventh of the width it would be
   the loudest thing in the row and the stage names — the part a dentist
   actually matches against his dashboard — would read as its caption. */
.lc__n{
  display:block;font-family:var(--font-mono);font-size:12.5px;line-height:1;
  letter-spacing:.08em;color:var(--fg-steel-500);
}
.lc__t{font-size:15.5px;line-height:1.3;margin:10px 0 0}
html[dir="rtl"] .lc__t{line-height:1.5}
.lc__d{font-size:13.5px;line-height:1.55;color:var(--fg-ink-muted);margin:7px 0 0}
html[dir="rtl"] .lc__d{line-height:1.8}

/* Seven does not fold onto a narrow screen, so the rail becomes rows of the
   same cells. The top rule then belongs to each row rather than to the list,
   or only the first four would sit under one. */
@media (max-width:1080px){
  .lifecycle{grid-template-columns:repeat(4,1fr);border-top:0}
  .lifecycle li{border-top:1px solid var(--fg-hairline);padding:16px 16px 14px}
  .lifecycle li:first-child{padding-inline-start:16px;border-inline-start:1px solid var(--fg-hairline)}
  .lifecycle li:nth-child(4n+1){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:620px){
  .lifecycle{grid-template-columns:repeat(2,1fr)}
  .lifecycle li:nth-child(4n+1){border-inline-start:1px solid var(--fg-hairline);padding-inline-start:16px}
  .lifecycle li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .lc__t{font-size:15px}
  .lc__d{font-size:13px}
}

/* ---------- Two-column layouts ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
/* A grid item's default `min-width:auto` means it cannot be narrower than its
   own min-content — the longest unbreakable run inside it. That is how the
   CBCT page came to be 144px wider than a 320px phone in Arabic and exactly
   right in English: the same track, sized by a longer Arabic word. Columns
   that hold running text must be allowed to shrink. */
.two-col > *{min-width:0}
@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 ---------- */
/* Same treatment as the subscription table: a zebra so the eye can cross a
   wide row without losing the line, and the answer heavier than the question.
   A row where the label and the value carry the same weight is a row that has
   to be read rather than scanned. */
.specs{border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden;background:#fff}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 24px;border-bottom:1px solid var(--fg-hairline);font-size:15.5px}
.specs div:nth-child(odd){background:var(--fg-mist-100)}
.specs div:last-child{border-bottom:0}
.specs > div > span{color:var(--fg-ink-muted)}
.specs b{font-weight:600;font-variant-numeric:tabular-nums;text-align:end;color:var(--fg-ink)}

.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 ---------- */
/* The four ways to reach us.
   They were four identical outlined boxes in a 2x2, which made the page say
   "here are four numbers, pick one". They are not equivalent: WhatsApp is the
   channel this company actually runs on and the one that answers fastest, and
   a dentist with a case at 9pm should be able to see that without reading.

   So the first card is the navy one — the same treatment the subscription
   card and the software panel use, because on this site navy means "this is
   the one" — and each card now carries a chip saying when it answers. The
   chip is the colour: green while the line is live, steel for a written reply
   that comes back within a day. That is information a visitor wants, not
   decoration, which is the only reason to spend colour on it. */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:760px){ .ccards{grid-template-columns:1fr;gap:12px} }
.ccard{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:26px 28px 24px;display:grid;gap:9px;align-content:start;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 34px -30px rgba(11,18,32,.45);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.ccard::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--fg-steel-200)}
.ccard:hover{border-color:var(--fg-steel-200);transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 22px 40px -28px rgba(11,18,32,.55)}

.ccard--primary{
  background:linear-gradient(150deg,#0E1B33 0%,#16305A 62%,#1B3A6B 100%);
  border-color:rgba(150,180,225,.22);
  box-shadow:0 1px 2px rgba(4,10,24,.35),0 26px 50px -38px rgba(4,10,24,.75);
}
.ccard--primary::before{background:var(--fg-swiss-red)}
.ccard--primary .ccard__label{color:var(--fg-steel-400)}
.ccard--primary .ccard__val{color:#fff}
.ccard--primary .ccard__note{color:var(--fg-steel-400)}
.ccard--primary:hover{border-color:rgba(150,200,255,.42)}

.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)}

/* the answer-time chip */
.ccard__when{
  justify-self:start;display:inline-flex;align-items:center;gap:7px;margin-top:3px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;
  background:var(--fg-mist-100);color:var(--fg-steel-400-onlight);
}
html[dir="rtl"] .ccard__when{letter-spacing:0;text-transform:none;font-size:13px}
.ccard__when::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ccard__when--live{background:#E6F2EA;color:var(--fg-success)}
.ccard--primary .ccard__when{background:rgba(255,255,255,.10);color:#B9D3F2}
.ccard--primary .ccard__when--live{background:rgba(90,200,140,.14);color:#7FD3A4}

.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;align-items:baseline;
  padding:15px 22px;border-bottom:1px solid var(--fg-hairline);font-size:15px}
.regbox div:nth-child(odd){background:var(--fg-mist-100)}
.regbox div:last-child{border-bottom:0}
.regbox > div > span{color:var(--fg-ink-muted)}
/* These two numbers are the licence to operate — the reason a dentist in
   another country believes this is a company and not a website. They were set
   in the same weight as the label beside them. */
.regbox b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg-ink)}

/* ---------- 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}
/* The border tint stays; `outline:none` does not. A hairline colour change on
   one edge was the only focus indicator on the contact and case forms, which
   is where a keyboard user most needs to know where they are — and the site's
   own :focus-visible outline was being switched off to get it. Both now. */
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--fg-navy-600)}
.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}

/* Three separate cards, not one strip cut by hairlines.
   The strip said the three are one object; they are three parts of a system a
   dentist buys separately. Separating them, and putting each icon in a tinted
   chip, matches the plan cards on Subscription and the contact cards — the
   site now has one way of saying "here are some related things". */
.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;
  background:none;border:0;border-radius:0;overflow:visible}
@media (max-width:820px){ .fam{grid-template-columns:1fr;gap:12px} }
.fam__i{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:26px 24px 24px;display:grid;gap:10px;align-content:start;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 34px -30px rgba(11,18,32,.45);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.fam__i:hover{border-color:var(--fg-steel-200);transform:translateY(-2px)}
.brandsec:nth-of-type(even) .fam__i{background:#fff}
/* The icon was a 24px grey line drawing floating in the corner. In a chip it
   is an object on the card rather than a smudge on it. */
.fam__i svg{width:22px;height:22px;stroke:var(--fg-navy-600);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  box-sizing:content-box;padding:9px;border-radius:11px;
  background:var(--fg-navy-soft, #E7EDF7);margin-bottom:6px;justify-self:start}
.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}
/* Single unit and immediate placement sit above the other six, two across
   rather than three: eight cards in a three-column grid leaves a hole in the
   last row, and these two are the pair a reader meets first. On a phone the
   whole scope is one column anyway and the modifier stops mattering. */
.trio--pair{grid-template-columns:repeat(2,1fr);margin-bottom:26px}
@media (max-width:1000px){ .trio--pair{grid-template-columns:1fr} }
/* A drawing, not a photograph: it wants the page's own ground under it and no
   letterboxing, because it was made to this frame rather than cropped into it */
.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;
}
/* The three sample cases share one page. The switcher is a tab bar, not a
   set of links: the cases are the same document at the same address, so a
   click must not cost a page load. The hash is written so a dentist can be
   sent straight to the case that matches his own. */
.studypick{
  display:flex;flex-wrap:wrap;gap:8px;
  border:1px solid var(--fg-hairline);border-radius:var(--r-sm);
  padding:6px;background:#fff;width:fit-content;max-width:100%;
}
.studypick button{
  font:inherit;font-size:15px;font-weight:600;color:var(--fg-steel-500);
  background:transparent;border:0;border-radius:calc(var(--r-sm) - 4px);
  /* 11px, not 10: at 10 the button measured 43px and a 44px fingertip aimed
     at its centre fell off the bottom edge. The three case names on the
     sample page are the main control on that page, on a phone, and they were
     one pixel short of the floor the rest of the site keeps. */
  padding:11px 20px;cursor:pointer;white-space:nowrap;
  min-height:44px;
  transition:background .18s ease,color .18s ease;
}
.studypick button:hover{color:var(--fg-ink);background:var(--fg-mist-100)}
.studypick button.on{background:var(--fg-navy-800);color:#fff}
.studypick button:focus-visible{outline:2px solid var(--fg-navy-800);outline-offset:2px}
@media (max-width:520px){ .studypick{width:100%} .studypick button{flex:1 1 auto;padding:10px 12px;font-size:14px} }
.study[hidden]{display:none}

.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}
/* Same frame, but holding a photograph of a screen rather than a drawing.
   The screenshot has its own dark ground already, so the frame's padding is
   dropped on three sides and the picture goes edge to edge — padding around
   it would read as a second, paler border inside the first. */
/* A row of screenshots from the planning software. Two up on a desk, one up
   on a phone — four across would make each one a thumbnail, and the point of
   these is that you can see the screw positions in them. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:38px}
@media (max-width:820px){ .shots{grid-template-columns:1fr;gap:16px} }
.shot{margin:0;background:#2D2D30;border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{background:#fff;padding:14px 16px;font-size:14px;line-height:1.55;
  color:var(--fg-ink-muted);border-top:1px solid var(--fg-hairline)}
.shot figcaption b{color:var(--fg-steel-500);font-family:var(--font-mono);
  font-size:12.5px;font-weight:400;margin-inline-end:8px}
.shots__note{margin-top:22px;font-size:14px;color:var(--fg-steel-500);max-width:70ch}

.draw--shot{padding:0;margin-top:26px;overflow:hidden}
.draw--shot img{width:100%;height:auto;display:block}
.draw--shot figcaption{margin-top:0;padding:16px 18px 18px}

.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}



/* ============================================================
   ACADEMY — the private course, moved to the top of the page
   ------------------------------------------------------------
   This block used to be the last section on the academy page, under the
   speakers, the diploma and the video host: a dentist had to scroll past
   everything the company wanted to say before reaching the one field that
   asks him what HE wants. It is also the only offer on the site priced per
   clinic rather than per case, so it now sits directly under the hero.

   Pitch and form sit side by side rather than stacked, so the form is inside
   the first screen on a laptop instead of below it. On the mist ground the
   white card separates from the navy hero without extra ornament; the red
   hairline along its top edge is the only thing added, and it is the same red
   the site already uses to mark what matters.
   ============================================================ */
.pcourse{padding-block:60px}
@media (max-width:600px){ .pcourse{padding-block:40px} }
.pcourse__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:48px;align-items:start}
@media (max-width:900px){ .pcourse__grid{grid-template-columns:1fr;gap:30px} }

/* 13px, not the 12.5 this arrived with: below 13 the badge failed the phone
   readability floor mobile_test enforces, and it is the first thing on the
   page a dentist sees. Uppercase with letter-spacing reads smaller than its
   nominal size, which is why this one is measured rather than eyeballed. */
.pcourse__badge{display:inline-block;margin-bottom:16px;padding:6px 14px;border-radius:999px;
  background:var(--fg-swiss-red);color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase}
html[dir="rtl"] .pcourse__badge{letter-spacing:0;text-transform:none;font-size:14px}

.pcourse__lead{margin-top:18px;font-size:17px;line-height:1.72;
  color:var(--fg-ink-muted);max-width:48ch}
.pcourse__note{margin-top:18px;padding-inline-start:13px;
  border-inline-start:3px solid var(--fg-steel-200);
  font-size:14px;line-height:1.6;color:var(--fg-steel-500)}

/* the form keeps .cform entirely — this only lifts it off the mist */
.pcourse__form{border-top:3px solid var(--fg-swiss-red);
  box-shadow:0 20px 44px -30px rgba(11,26,51,.5)}

/* ============================================================
   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}
/* Same rule, one level down: a flex item also defaults to min-width:auto, so
   the label text could not wrap below its longest word and pushed the whole
   card wide. The row is nowrap on purpose — the checkbox must stay beside its
   text — so the shrinking has to be allowed explicitly. */
.chk-line > span:last-child{min-width: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)}
}
/* The photograph sits BESIDE the name, not above it.
   Stacked, a 132px square left the whole right half of the card's top empty
   on every one of the four cards — a column of void down the middle of the
   section. Beside the name it fills that space and puts the two things a
   reader matches together, a face and a name, on one line.

   The grid is `auto 1fr` with the bio spanning both, so the bio still gets
   the full width and long ones do not run as a narrow gutter beside a photo. */
.spk{background:#fff;border:1px solid var(--fg-hairline);border-radius:var(--r-md);
  padding:26px 26px 28px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:20px;row-gap:0;
  box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 34px -30px rgba(11,18,32,.45);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.spk:hover{border-color:var(--fg-steel-200);transform:translateY(-2px)}
/* 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{grid-column:1;grid-row:1 / span 2;margin:0;
  width:104px;height:104px;border-radius:16px;overflow:hidden;
  border:1px solid var(--fg-hairline);background:#1E222C}
.spk__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The name ends row 1 and the role starts row 2, so the pair sits centred on
   the photograph's midline without a gap opening between them. */
.spk h3{grid-column:2;grid-row:1;align-self:end;font-size:18px;margin:0 0 3px;line-height:1.3}
.spk__role{grid-column:2;grid-row:2;align-self:start;display:block;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg-navy-600);margin:0}
.spk p{grid-column:1 / -1;grid-row:3;margin:18px 0 0}

/* One speaker per row on a phone.
   Two abreast was tried, and measured worse than it sounds: at half a phone
   the card grew to 857px — taller than the screen — so a reader still saw one
   card at a time, the section got 160px longer, and the biography became a
   13-character column. Full width keeps the card at 334px and the text at a
   readable measure.

   This block sits AFTER the .spk rules on purpose. Written above them, none
   of it applied: a media query carries no extra specificity, so at equal
   specificity the later rule wins and the desktop layout kept overriding the
   phone one. */
@media (max-width:900px){
  .spk-grid{grid-template-columns:1fr;gap:16px}
}
/* Below this the card is narrow enough that a photograph beside the name
   leaves the name a few characters, so the card stacks. grid-template-rows
   has to be cleared with it: the desktop card declares three explicit rows
   for the photo/name/role arrangement, and leaving them while the items
   auto-place into four opens a gap between the role and the biography. */
@media (max-width:480px){
  .spk{grid-template-columns:1fr;grid-template-rows:none;align-content:start;
       row-gap:0;min-width:0}
  .spk__photo{grid-column:1;grid-row:auto;width:88px;height:88px;margin-bottom:14px}
  .spk h3,.spk__role,.spk p{grid-column:1;grid-row:auto;align-self:auto}
  .spk h3{overflow-wrap:anywhere}
  .spk p{margin-top: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)}