/* ============================================================
   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){
  /* Two across, not one — the same decision as when these tiles carried
     pictures. A single column made the row six screens tall and the reader
     scrolled past the whole offer one item at a time. */
  .qgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .qcard{padding:18px 15px 16px;min-height:0}
  .qcard__t{font-size:15px}
  .qcard__d{font-size:12.5px}
}

/* Six hundred lines of WebGL went with this change (v2.70).
   ------------------------------------------------------------
   A small 3D library and a renderer lived in the JavaScript to draw a live
   guide into whichever tile the pointer was over. It selected
   `.qcard[data-scene]`, and no tile had carried `data-scene` for some time —
   so it parsed on every visit, matched nothing, and returned. It shipped to
   every reader and did nothing for any of them. With no picture left in these
   tiles there is nothing for it to animate even in principle, so it was
   deleted rather than kept commented out; the repository still has it. */

/* ============================================================
   CONSENT BAR — shown only when there is something to consent to
   ------------------------------------------------------------
   Nothing about this bar is decorative. Until v2.70 the privacy
   policy said this site used no advertising trackers and no
   social-media pixels, and that "if that changes, this section
   changes first" — so §5b was rewritten before a single tag went
   in, and this bar is what makes the new wording true: no
   measurement tag is fetched, and no cookie is written, until a
   reader says yes. Declining is one click, not a menu, and it is
   what silence means: the bar can be closed and nothing loads.
   ============================================================ */
.cbar{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  /* the extra bottom padding is the iPhone home indicator: without it the
     buttons sit under the bar the system draws over the foot of the screen */
  padding:16px clamp(16px,4vw,34px);
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  background:var(--fg-navy-900);color:#fff;
  border-top:1px solid rgba(150,180,225,.22);
  box-shadow:0 -18px 40px -30px rgba(0,0,0,.9);
  transform:translateY(100%);transition:transform .34s var(--ease);
}
.cbar.is-in{transform:none}
.cbar__t{flex:1 1 320px;font-size:13.5px;line-height:1.6;color:#C3CEE2;margin:0;max-width:74ch}
.cbar__t a{color:#9FC4F5;text-decoration:underline;text-underline-offset:2px}
.cbar__acts{display:flex;gap:10px;flex-wrap:wrap}
.cbar button{
  font:inherit;font-size:13.5px;font-weight:500;padding:10px 20px;
  border-radius:var(--r-sm);cursor:pointer;min-height:44px;
  border:1px solid rgba(150,180,225,.34);background:transparent;color:#C3CEE2;
}
.cbar button:hover{border-color:rgba(140,200,255,.55);color:#fff}
.cbar button.is-yes{background:#fff;color:var(--fg-navy-900);border-color:#fff;font-weight:600}
.cbar button:focus-visible{outline:2px solid #9FC4F5;outline-offset:2px}
/* A bar pinned to the foot of the screen covers whatever was there — on a
   phone that is the WhatsApp button and the last row of every page, and four
   separate tests failed on exactly that: a fingertip aimed at a control near
   the bottom landed on the bar instead. So while the bar is up the page ends
   higher and the dock rides above it. The height is measured rather than
   guessed, because the sentence wraps to two lines in Arabic and to three on
   a narrow phone. */
html.has-cbar body{padding-bottom:var(--cbar-h,0px)}
/* The page's own scrolling has to know the bar is there too. Padding lets a
   reader scroll clear of it; scroll-padding is what stops the BROWSER from
   parking something under it — an in-page anchor, a focused field, a "next"
   button scrolled into view. Without it the case wizard's Next button landed
   exactly under the bar every time it was reached by keyboard. */
html.has-cbar{scroll-padding-bottom:calc(var(--cbar-h,0px) + 12px)}
/* The three floating things ride UP by the bar's height — they are not
   repositioned to it. Overriding their `inset-block-end` was the first
   attempt and it flattened them onto each other: the assistant sits 84px
   above the dock on a phone, and giving both the same offset put one on top
   of the other. An offset preserves whatever each of them had.

   `translate`, not `transform`: the dock hides itself with
   `transform: translateY(150%)`, and a transform here would erase that. The
   two properties compose, so the dock can be hidden and lifted at once. */
html.has-cbar .casedock,
html.has-cbar .bot,
html.has-cbar .botpanel{translate:0 calc(-1 * var(--cbar-h, 0px))}
.casedock,.bot,.botpanel{transition:translate .34s var(--ease)}

/* the footer link that reopens the choice, so a yes is never final */
.cundo{background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:560px){
  .cbar{gap:12px;padding:14px 16px}
  .cbar__acts{width:100%}
  .cbar__acts button{flex:1}
}
@media (prefers-reduced-motion:reduce){ .cbar{transition:none} }

/* ---- one plate, and the words are on it ----
   The tile used to be a square picture with a caption underneath. It is now
   a single surface carrying the whole thing, which is why the caption colours
   below are written out rather than inherited: they used to sit on the navy
   band and now sit on this plate, and those are not the same background. */
.qcard{
  position:relative;display:flex;flex-direction:column;
  padding:24px 20px 20px;min-height:214px;border-radius:16px;overflow:hidden;
  text-decoration:none;color:#fff;isolation:isolate;
  background:linear-gradient(168deg,#14264A 0%,#0E1A34 100%);
  border:1px solid rgba(150,180,225,.20);
  box-shadow:0 1px 2px rgba(4,10,26,.30),0 18px 34px -28px rgba(4,10,26,.75);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease),background .3s var(--ease);
}
/* The one ornament: a single lit pixel across the top edge, brightest in the
   middle and gone at both corners. It is the whole reason the plate reads as
   a surface catching light rather than a flat navy rectangle, and it costs
   one pseudo-element and no request. */
.qcard::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(180,212,255,0),rgba(180,212,255,.55),rgba(180,212,255,0));
}
.qcard:hover,.qcard:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(140,200,255,.44);
  background:linear-gradient(168deg,#173059 0%,#101F3E 100%);
  box-shadow:0 2px 4px rgba(4,10,26,.34),0 30px 54px -30px rgba(4,10,26,.90);
}

/* The index leads, because six tiles in a row need an order and the eye
   should not have to find it in the title. Mono, so 01 and 06 are the same
   width and the six of them line up down the row. */
.qcard__n{
  display:block;margin-bottom:18px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;
  /* #7E97C6 on this plate measures 5.2:1 at the light end of the gradient and
     4.9:1 at the dark end — above the 4.5 that 12.5px text needs at both. */
  color:#7E97C6;
}
html[dir="rtl"] .qcard__n{letter-spacing:0}

.qcard__t{
  display:block;font-size:clamp(15.5px,1.1vw,17px);font-weight:600;
  letter-spacing:-.018em;line-height:1.28;color:#fff;margin-bottom:9px;
}
html[dir="rtl"] .qcard__t{letter-spacing:0;line-height:1.5}
.qcard__d{
  display:block;font-size:13px;line-height:1.55;color:#93A4C2;
  margin-bottom:18px;max-width:34ch;
}
/* The link sits at the bottom of the plate whatever the description's length,
   so the six of them line up across the row even though the six descriptions
   do not. margin-top:auto is what does that — not a fixed height, which would
   break the moment a translation ran one line longer. */
.qcard__go{
  display:flex;align-items:center;gap:8px;margin-top:auto;
  font-size:13px;font-weight:500;color:#9FC4F5;
}
.qcard .arrow{transition:transform .24s var(--ease)}
.qcard:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .qcard__go .arrow{transform:scaleX(-1)}
html[dir="rtl"] .qcard:hover .arrow{transform:scaleX(-1) translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .qcard,.qcard .arrow{transition:none}
  .qcard:hover,.qcard:focus-visible{transform:none}
}
/* on paper there is no plate 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);box-shadow:none}
  .qcard::before{display:none}
  .qcard__t{color:var(--fg-ink) !important}
  .qcard__n{color:var(--fg-steel-500) !important}
  .qcard__d{color:var(--fg-ink-muted) !important}
  .qcard__go{display:none}
}