/* ============================================================
   WHAT WE DO — six ways in
   ============================================================ */
.qsec{position:relative;border-block:1px solid var(--fg-hairline);
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(120,160,220,.13), transparent 62%),
    radial-gradient(700px 460px at 8% 88%, rgba(120,160,220,.09), transparent 60%),
    linear-gradient(180deg,#F7F9FC 0%,#EFF3F8 100%)}
.qsec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(90,120,170,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,120,170,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 8%,transparent 70%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 8%,transparent 70%)}
.qsec > .wrap{position:relative}

/* ---------- the free scan check, moved out of the hero ---------- */
.scanband{
  position:relative;overflow:hidden;text-decoration:none;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;gap:12px;
  border-radius:var(--r-md);padding:30px 32px 30px 30px;min-height:262px;
  background:linear-gradient(146deg,var(--fg-navy-900) 0%,var(--fg-navy-800) 54%,var(--fg-navy-700) 100%);
  box-shadow:0 20px 44px -26px rgba(10,20,40,.62);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.scanband__note{display:block;margin-top:14px;font-size:12px;line-height:1.6;
  color:var(--fg-steel-400);max-width:44ch}
.qsec .scanband__tag{white-space:nowrap}
@media (max-width:420px){ .qsec .scanband__tag{white-space:normal} }

/* It spans the whole hero, both columns. Inside the text column it was capped
   at the 32.5rem measure, which forced a wide band into a tall near-square —
   the words stacked four deep and the picture had nowhere to sit. As a full
   row it goes back to being what it is: a wide strip, text one end, guide the
   other. */
/* The band leads the six-blocks section now. It used to close the hero, with
   a white rule above it dividing the two; the rule went with the move, because
   a divider needs something on both sides of it and the change of section
   background already separates them here. */
.qsec .scanband{
  margin:0;min-height:0;
  /* the picture takes what it needs, the words take the rest — a fixed
     fr split left a lake of empty navy between them at this width */
  grid-template-columns:minmax(0,1fr) auto;
  padding:30px 36px;gap:44px;align-items:center;
}
.qsec .scanband__txt{max-width:none}
.qsec .scanband__p{max-width:66ch}
/* The CBCT unit is a tall subject where the old guide render was a wide one,
   so at the same width it made the band a third taller and the strip stopped
   being a strip. Narrower here, and the band keeps its proportions. */
.qsec .scanband__art img{max-width:330px}
.qsec .scanband__claims{max-width:400px}
@media (max-width:1200px){ .qsec .scanband__art img{max-width:290px} }
@media (max-width:900px){
  .qsec .scanband{grid-template-columns:1fr;padding:26px 24px;gap:20px}
  .qsec .scanband__art img{max-width:240px;margin-inline:auto}
}

/* a blueprint grid, the same idea as the drawing in the hero */
.scanband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(168,174,184,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(168,174,184,.10) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 15%,#000 15%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 78% 15%,#000 15%,transparent 72%);
}
.scanband::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--fg-swiss-red)}
.scanband:hover{box-shadow:0 26px 52px -24px rgba(10,20,40,.7)}
.scanband__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

.scanband__txt{position:relative;z-index:1;display:block}
.scanband__tag{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;
  letter-spacing:.02em;color:var(--fg-steel-400);
  border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:6px 13px;
}
.scanband__dot{width:7px;height:7px;border-radius:50%;background:#3FD9A4;flex:none;
  box-shadow:0 0 0 4px rgba(63,217,164,.16);animation:scanbandpulse 2.4s var(--ease) infinite}
@keyframes scanbandpulse{0%,100%{box-shadow:0 0 0 3px rgba(63,217,164,.10)}
                         50%{box-shadow:0 0 0 7px rgba(63,217,164,.20)}}
.scanband__p{display:block;margin-top:11px;font-size:14.5px;line-height:1.6;
  color:var(--fg-steel-400);max-width:32ch}
/* two actions, wrapping on a narrow card. The first is what the section is
   for; the second is the free check to run before doing it. */
.scanband__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px}
.scanband__cta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#fff;color:var(--fg-navy-800);font-size:14.5px;font-weight:500;
  padding:12px 20px;border-radius:var(--r-sm);
  transition:background .15s var(--ease);
}
.scanband__cta:hover{background:var(--fg-mist-100)}
.scanband__cta:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .scanband__cta:hover .arrow{transform:scaleX(-1) translateX(3px)}
/* after the base rule, not before it: same specificity, so the one written
   later wins, and the first cut put this above and rendered two white pills */
.scanband__cta--ghost{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.30);font-weight:400}
.scanband__cta--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.52)}

/* the guide itself — generated art, not a patient's case */
.scanband__art{position:relative;z-index:1;display:block;align-self:center;justify-self:end}
/* What the picture is selling, under the picture. This was a parts key —
   01 X-ray tube, 02 Sensor — which told a dentist the name of a chin rest he
   already knows and sold him nothing. The numbered callouts came off the
   render with it: numbers with no legend are noise, not detail. */
/* one tight row, not a stack. Three stacked claims added about 90px to the
   right column and the band stopped being a strip — band_test measures that
   ratio precisely because this card has drifted back into a box twice. */
.scanband__claims{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;
  margin:14px 0 0;padding:0;max-width:322px;margin-inline-start:auto}
html[dir="rtl"] .scanband__claims{margin-inline:0 auto}
.scanband__claims li{position:relative;padding-inline-start:17px;font-size:12px;
  line-height:1.45;color:var(--fg-steel-400)}
/* a tick drawn in CSS — an image for four checkmarks is four requests */
.scanband__claims li::before{content:"";position:absolute;inset-inline-start:1px;top:4px;
  width:4.5px;height:8px;border-inline-end:1.5px solid #3FD9A4;
  border-bottom:1.5px solid #3FD9A4;transform:rotate(45deg)}
html[dir="rtl"] .scanband__claims li::before{transform:scaleX(-1) rotate(-45deg)}
@media (max-width:900px){ .scanband__claims{margin-inline:auto} }
html[dir="rtl"] .scanband__art{justify-self:start}
.scanband__art img{display:block;width:100%;max-width:322px;height:auto;margin-inline-end:-14px;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.42));
  /* no rotation. The old art was a guide lying on a surface and a tilt suited
     it; this one is a diagram of a coordinate volume, and a tilted axis reads
     as an error rather than as styling. */
  transform:translateY(-2px);
  transition:transform .35s var(--ease)}
html[dir="rtl"] .scanband__art img{transform:translateY(-2px);margin-inline-end:-14px}
.scanband:hover .scanband__art img{transform:translateY(-4px) scale(1.02)}
html[dir="rtl"] .scanband:hover .scanband__art img{transform:translateY(-4px) scale(1.02)}

@media (max-width:1080px){
  .scanband{grid-template-columns:1fr;gap:20px;min-height:0;padding:28px 26px}
  .scanband__art{justify-self:center}
  html[dir="rtl"] .scanband__art{justify-self:center}
  .scanband__art img{max-width:250px}
  .scanband__p{max-width:none}
}
@media (max-width:600px){
  .scanband{padding:24px 22px}
  .scanband__art img{max-width:210px}
}
@media (prefers-reduced-motion:reduce){
  .scanband,.scanband__art img,.scanband__dot{transition:none;animation:none}
  .scanband:hover{transform:none}
  .scanband:hover .scanband__art img{transform:rotate(-7deg) translateY(-2px)}
}
@media print{
  .scanband{background:#fff !important;color:var(--fg-ink) !important;
    border:1px solid var(--fg-hairline);box-shadow:none}
  .scanband::before,.scanband::after{display:none}
  .scanband__p,.scanband__tag{color:var(--fg-ink-muted) !important}
}

/* Not six identical boxes: the two entry points a visitor is most likely to
   want get twice the width, and the other four sit under them in a quieter row.
   The rhythm is what stops the block reading as a dashboard. */
/* Six equal cards, one row. This replaced an asymmetric two-wide-over-four
   arrangement: the rhythm was nicer but it made two of the six look like the
   answer and the other four like footnotes, and all six are entry points of
   equal standing. At six across each card is around 190px, so they run
   portrait — the title sits under a tall picture rather than beside a wide
   one. */
.qgrid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
/* On the light section they read by being dark. In the hero they sit on navy,
   so they need an edge of their own or they dissolve into the background. */
.hero .qgrid .qcard{border-color:rgba(150,180,225,.20);
  box-shadow:0 1px 2px rgba(4,10,24,.4),0 18px 34px -26px rgba(4,10,24,.7)}
.hero .qgrid .qcard:hover{border-color:rgba(150,200,255,.42)}
/* square, not portrait. aspect-ratio rather than a min-height, so they stay
   square at every column count instead of only at the width the number was
   picked for. */
/* The square moved: it is now the FRAME that is 1:1, because the card is the
   frame plus the caption underneath it. Leaving the ratio here forced the
   whole card to a square, the frame filled it, and the caption was laid out
   below the card's own box — present in the DOM, correct colour, and painted
   nowhere anyone would look. */
.qcard{min-height:0}
@media (max-width:1200px){ .qgrid{grid-template-columns:repeat(3,1fr);gap:12px} }
@media (max-width:760px){ .qgrid{grid-template-columns:repeat(2,1fr);gap:10px} }
@media (max-width:460px){
  .qgrid{grid-template-columns:1fr;gap:10px}
  /* one per row, a square would be enormous — the frame becomes a band */
  .qcard{min-height:0}
  .qcard__frame{aspect-ratio:16/10}
}

/* Each block: a square picture, then its name underneath it. */
.qcard{
  /* align-content:start is load-bearing. The grid stretches every card in the
     row to the height of the tallest, and with two `auto` rows the leftover
     was being shared out between them — so a card with a two-line description
     put its caption 35px under the frame and a card with three put it 14px
     under, and the six titles sat on three different baselines. Anchoring the
     rows to the top makes the gap exactly the gap, and the captions line up
     because the frames do. */
  position:relative;display:grid;grid-template-rows:auto auto;gap:14px;
  align-content:start;
  padding:0;background:none;border:0;box-shadow:none;overflow:visible;
  color:#fff;text-decoration:none;isolation:isolate;
  transition:transform .3s var(--ease);
}
.qcard:hover{transform:translateY(-3px)}

/* ---- the square ---- */
.qcard__frame{
  position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:var(--fg-navy-900);border:1px solid rgba(150,180,225,.16);
  box-shadow:0 1px 2px rgba(16,28,54,.06),0 18px 34px -26px rgba(16,28,54,.30);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.qcard:hover .qcard__frame{
  border-color:rgba(140,200,255,.34);
  box-shadow:0 2px 4px rgba(16,28,54,.08),0 30px 54px -28px rgba(16,28,54,.45);
}
.qcard__bg{
  position:absolute;inset:0;display:block;
  background-size:cover;background-position:50% 42%;background-repeat:no-repeat;
}
/* the still picture is the whole square for the rendered block, and the plate
   under the mark for the five that carry one */
.qcard__mark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:clamp(16px,2.4vw,34px);
}
.qcard__mark img{width:100%;height:100%;object-fit:contain;display:block}
.qcard__n{
  position:absolute;z-index:2;top:16px;inset-inline-end:18px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;
  color:rgba(255,255,255,.62);
}
/* on a white plate a white number is not a number */
.qcard--brand .qcard__n{color:var(--fg-steel-500)}
html[dir="rtl"] .qcard__n{inset-inline-end:18px}
.qcard__gl{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;pointer-events:none;z-index:1}

/* ---- the caption, on the page rather than on the picture ---- */
.qcard__body{display:grid;gap:6px;padding-inline:2px}
/* The caption sits on the navy band the row is laid across, not on a white
   page — so it is light text on dark, the reverse of what a caption under a
   picture usually is. Written as explicit values rather than inherited, since
   the block above it is now white and inheritance would have walked the
   wrong way. */
.qcard__t{
  display:block;font-size:clamp(15.5px,1.15vw,18px);font-weight:600;
  letter-spacing:-.018em;line-height:1.25;color:#fff;
}
html[dir="rtl"] .qcard__t{letter-spacing:0;line-height:1.45}
.qcard__d{
  display:block;font-size:13.5px;line-height:1.6;color:var(--fg-steel-400);
  max-width:34ch;
}
.qcard__go{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:#fff;margin-top:2px;
  opacity:0;transform:translateY(-3px);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
/* the link is the only thing that changes on hover, and it changes in place —
   nothing reflows, so no picture ever moves */
.qcard:hover .qcard__go,.qcard:focus-visible .qcard__go{opacity:1;transform:none}
html[dir="rtl"] .qcard__go .arrow{transform:scaleX(-1)}
.qcard .arrow{transition:transform .24s var(--ease)}
.qcard:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .qcard:hover .arrow{transform:scaleX(-1) translateX(3px)}

/* A phone has no pointer to hover with, so nothing may hide behind one.
   The description is always visible now — it lives under the picture, not on
   it — so the only thing this still has to do is show the link. The old
   max-height rules went with the scrim they were written for. */
@media (hover:none){
  .qcard__go{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .qcard__bg,.qcard::after,.qcard::before,.qcard__t,.qcard__d,.qcard__go{transition:none}
  .qcard:hover .qcard__bg{transform:scale(1.03)}
}
/* on paper there is no image and no hover — show everything, in ink */
@media print{
  .qcard{min-height:0;background:#fff !important;color:var(--fg-ink) !important;
    border:1px solid var(--fg-hairline)}
  .qcard__bg,.qcard::after,.qcard::before,.qcard__gl{display:none}
  .qcard__i,.qcard__t{color:var(--fg-ink) !important}
  .qcard__n{color:var(--fg-steel-500) !important}
  .qcard__d{max-height:none;opacity:1;transform:none;margin-top:10px;color:var(--fg-ink-muted) !important}
  .qcard__go{display:none}
}