/* ============================================================
   GUIDED SURGERY — the section under the six blocks
   The only place on the home page where the service itself is
   explained. Three parts: an opener that states the promise, five
   clinical steps, and the case TYPES a dentist can find himself in.

   Everything reuses the tokens already in this file — navy, the
   steel greys, 18px radii, hairline borders, the same lift on
   hover. No new colour and no new shape enter the site here.
   ============================================================ */
.gsec{position:relative;border-block:1px solid var(--fg-hairline);
  background:linear-gradient(180deg,#FBFCFE 0%,#F3F6FA 100%)}
.gsec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,160,215,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,160,215,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 80%)}
.gsec > .wrap{position:relative}

/* ---- the opener ---- */
.gopen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:40px 56px;align-items:center;
  background:var(--fg-navy-900);color:#fff;border-radius:20px;overflow:hidden;
  padding:44px 0 44px 48px;
  box-shadow:0 2px 4px rgba(16,28,54,.06),0 40px 70px -40px rgba(16,28,54,.5)}
html[dir="rtl"] .gopen{padding:44px 48px 44px 0}
.gopen__lead{font-size:17.5px;line-height:1.62;color:#C8CEDA;margin-top:0;max-width:44ch}
.gopen__note{font-size:14px;line-height:1.6;color:var(--fg-steel-400);margin-top:16px;max-width:46ch}
.gopen__art{position:relative;align-self:stretch;min-height:300px}
.gopen__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:900px){
  .gopen{grid-template-columns:1fr;padding:34px 26px;gap:28px}
  html[dir="rtl"] .gopen{padding:34px 26px}
  .gopen__art{min-height:240px;border-radius:14px;overflow:hidden}
  .gopen__art img{position:static}
}

/* ---- the five steps ---- */
.gsteps{list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1080px){ .gsteps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .gsteps{grid-template-columns:1fr;gap:10px} }
.gstep{position:relative;background:#fff;border:1px solid var(--fg-hairline);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,28,54,.05);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.gstep:hover{transform:translateY(-3px);border-color:rgba(34,56,106,.28);
  box-shadow:0 2px 4px rgba(16,28,54,.05),0 20px 34px -22px rgba(16,28,54,.34)}
/* the picture is the card's head — a navy plate against the white body, which
   is the only way a thumbnail this size reads at all */
.gstep__img{display:block;background:var(--fg-navy-900);
  border-bottom:1px solid var(--fg-hairline)}
.gstep__img img{display:block;width:100%;height:auto;aspect-ratio:9/5;object-fit:cover;
  transition:transform .5s var(--ease)}
.gstep:hover .gstep__img img{transform:scale(1.045)}
.gstep__b{display:block;position:relative;padding:20px 20px 22px}
/* 11.5px is not large text, so --fg-numeral's 3.2:1 exemption does not cover
   it — steel-500 clears AA at this size */
.gstep__n{position:absolute;top:20px;right:20px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--fg-steel-500)}
html[dir="rtl"] .gstep__n{right:auto;left:20px}
.gstep h3{font-size:16.5px;margin-top:0;padding-inline-end:34px;letter-spacing:-.01em}
html[dir="rtl"] .gstep h3{padding-inline-end:34px}
html[dir="rtl"] .gstep h3{letter-spacing:0}
.gstep p{font-size:14px;line-height:1.6;color:var(--fg-ink-muted);margin-top:7px}

/* The section heading sits on the page, not on the card. It was inside the
   navy block with the sentence and the buttons, which made a heading of that
   weight look like a caption for the picture beside it. */
.ghead{margin-bottom:26px;max-width:46ch}
.ghead h2{text-wrap:balance}
.ghead h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08;margin-top:6px}
html[dir="rtl"] .ghead h2{letter-spacing:0;line-height:1.28}

/* the planning software, credited on the face of the page */
.gsoft{margin:22px 0 0;padding:0;border-radius:20px;overflow:hidden;
  background:var(--fg-navy-900);border:1px solid rgba(150,180,225,.16)}
.gsoft img{display:block;width:100%;height:auto}
.gsoft figcaption{display:grid;gap:8px;padding:18px 26px 20px}
/* the line naming the software leads the picture rather than trailing it */
/* the separator this block was missing, and the room to breathe with it */
.gsoft__head{margin-top:56px;padding-top:38px;border-top:1px solid var(--fg-hairline);
  max-width:58ch}
.gsoft__t{display:block;margin-top:8px;font-size:clamp(20px,2.1vw,25px);font-weight:600;
  letter-spacing:-.022em;line-height:1.25;color:var(--fg-ink)}
.gsoft__lead{margin-top:10px;font-size:15px;line-height:1.6;color:var(--fg-ink-muted)}
html[dir="rtl"] .gsoft__t{line-height:1.4}
html[dir="rtl"] .gsoft__t{letter-spacing:0}
.gsoft__c{font-size:12.5px;line-height:1.6;color:var(--fg-steel-400)}
.gopen__credit{position:absolute;bottom:14px;inset-inline-start:18px;
  font-size:11.5px;color:rgba(255,255,255,.62);
  background:rgba(8,16,34,.55);border-radius:999px;padding:5px 11px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media (max-width:900px){
  .gopen__credit{position:static;display:block;margin-top:10px;background:transparent;
    padding:0;color:var(--fg-steel-400)}
}
@media print{ .gsoft{background:#fff !important} .gsoft__t{color:var(--fg-ink) !important}
  .gsoft__c{color:var(--fg-steel-500) !important} }

/* the free check and the guided-surgery block are one idea followed by its
   explanation; the full section rhythm between them read as a gap */
/* The band's own section led with a full section's padding under a navy block
   that had already ended in air, so the two stacked into a very large gap.
   Top comes down to 58%; the bottom is unchanged because the six blocks below
   still need their own separation. */
.qsec{padding-block:calc(var(--section-y) * .58) calc(var(--section-y) * .52)}
.gsec{padding-block:calc(var(--section-y) * .58) var(--section-y)}
.shead{margin-bottom:24px;max-width:40ch}
.shead h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.028em;line-height:1.1;margin-top:6px}
html[dir="rtl"] .shead h2{letter-spacing:0;line-height:1.3}

/* ---- the case types ---- */

/* The .gcase card rules used to live here. When the cards were removed in
   v2.62 the SELECTOR LINES went and the declaration bodies stayed, leaving
   two empty media blocks and about twenty orphaned declarations ending in a
   stray `}` each. CSS has no way to report that: the browser resynchronises
   at the next brace it can make sense of and silently drops everything in
   between — which in this file meant every rule after the corpse, and in
   05-pages.css meant one live rule after a similar leftover. Both were found
   by counting braces per stylesheet, which is now a test. */

@media (prefers-reduced-motion:reduce){
  .gstep:hover .gstep__img img{transform:none}
}
@media print{
  .gopen{background:#fff !important;color:var(--fg-ink) !important;box-shadow:none;
    border:1px solid var(--fg-hairline)}
  .gopen h2{color:var(--fg-ink) !important}
  .gopen__lead,.gopen__note{color:var(--fg-ink-muted) !important}
}