/* ============================================================================
   PAGE CSS — BLOG POST
   "Why Do Dental Implant Prices Vary So Much in Belgium? What Should a Quote Actually Include?"

   Site Assets Manager  ->  css/pages/blog-dental-implant-prices.css
   Loads ONLY on this post (bind the asset key to the EN, FR, NL and RO post IDs).
   Language-neutral: the same file serves all four languages.

   ---------------------------------------------------------------------------
   RELATIONSHIP TO global.css
   ---------------------------------------------------------------------------
   Consumes, never redefines: the --afn-* token set, .afn-scope, .afn-ambient,
   .afn-aurora, .afn-grain, .afn-progress, .afn-reveal (+ --scale, --d1),
   .afn-btn, .afn-arrow, .afn-faq (+ children).

   Everything below is namespaced .afn-post / .afn-lux (or scoped
   .afn-post .afn-*), so no selector can reach the homepage, a service page,
   an Elementor widget or the parent theme.

   ---------------------------------------------------------------------------
   SAME DESIGN LANGUAGE AS THE EARLIER BLOG POSTS
   ---------------------------------------------------------------------------
   Flat surfaces and hairlines, one 3px radius, a single measured reading
   column with breakout figures, a typographic hero, a sticky contents rail
   and reading-progress bar. Only what this post needs differently has changed:

     - NO IMAGE IS CROPPED. Every figure renders whole, at its own ratio.
     - Four before/after comparisons in two groups, built as one bespoke
       "luxury" component (.afn-lux) sized by its own images, because one of
       the four pairs is a 3.58:1 panorama and the others are 3:2. The case
       numerals (01-04) run through the whole article, not per group.
     - A fee schedule (.afn-post__price): a real <table> mirroring the Dental
       Implant pillar page - same rows, same figures, same qualifiers.
     - Section numerals are counted on the H2 itself, so an un-headed intro
       block can sit above section 01 without stealing the number.
     - The CTA is a statement + button (the source has no CTA heading).
   ========================================================================= */


/* ---------------------------------------------------------------- TOKENS -- */
/* Page-local only. Every name is --post-* so it cannot collide with the
   --afn-* set in global.css Parts 1/2 or the unprefixed set in Part 3. */
.afn-post{
  --post-r:3px;                       /* the ONE radius on this page      */
  --post-content:1100px;              /* full width of the content area   */
  --post-measure:min(100%, 760px);    /* the reading column               */
  --post-rail:220px;                  /* contents rail                    */
  --post-rail-gap:clamp(40px, 4vw, 72px);
  --post-ink:var(--afn-blue);         /* body copy                        */
  --post-ink-strong:var(--afn-white); /* emphasis                         */
  --post-hair:rgba(195,209,235,.13);  /* hairline rules                   */
  --post-hair-lit:rgba(195,209,235,.30);
  --post-tint:rgba(195,209,235,.045); /* flat fill, no blur               */
  --post-gap:clamp(56px, 7vw, 104px); /* space between H2 sections        */
}


/* ====================================================================== HERO
   Typographic. No image, no video, no glass. The H1 is the LCP element,
   which keeps the largest paint a text node rather than a network request. */

.afn-post__hero{
  padding:clamp(88px,12vw,170px) var(--afn-gutter) 0;
}
.afn-post__hero-inner{
  max-width:var(--post-content);
  margin-inline:auto;
}
.afn-post__title{
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(32px,4.7vw,62px);   /* sized for a long question-style H1 */
  line-height:1.07;
  letter-spacing:-.015em;
  color:var(--afn-white);
  max-width:30ch;
}
.afn-post__hero-rule{
  max-width:var(--post-content);
  margin:clamp(48px,6vw,84px) auto 0;
  height:1px;
  background:linear-gradient(90deg,var(--post-hair-lit),var(--post-hair) 45%,transparent);
}


/* ==================================================================== LAYOUT
   Contents rail + article. The rail is additive: it appears only when there
   is genuinely room for it, and its absence changes nothing about the prose. */

/* max-width is border-box here, so the gutters are added on top: the
   CONTENT area is exactly --post-content wide. */
.afn-post__layout{
  max-width:calc(var(--post-content) + 2 * var(--afn-gutter));
  margin-inline:auto;
  padding:clamp(52px,6vw,84px) var(--afn-gutter) clamp(90px,11vw,150px);
}


/* ============================================================ CONTENTS RAIL
   Plain anchor links — they work with JavaScript disabled. Page JS only adds
   the .is-active highlight. */

.afn-post__rail{display:none}

/* The rail column must STRETCH to the full row height (see the grid rule in
   the >=1280 block). A sticky child can only travel inside its parent's box,
   so an aside sized to its own content gives it zero range and it scrolls
   away — which is exactly what happened before this was fixed. */
.afn-post__toc{
  position:sticky;
  top:104px;
  counter-reset:afn-toc;
  border-left:1px solid var(--post-hair);
  /* Stays usable on short laptop viewports. */
  max-height:calc(100vh - 128px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--afn-char) transparent;
}
.afn-post__toc li{counter-increment:afn-toc}
.afn-post__toc a{
  position:relative;
  display:block;
  padding:11px 10px 11px 22px;
  font-size:13px;
  line-height:1.45;
  color:var(--afn-slate);
  transition:color .35s var(--afn-ease);
}
.afn-post__toc a::before{
  content:counter(afn-toc,decimal-leading-zero);
  display:block;
  margin-bottom:4px;
  font-family:var(--afn-font-mono);
  font-size:9.5px;
  letter-spacing:.22em;
  color:var(--afn-char);
  transition:color .35s var(--afn-ease);
}
/* The moving indicator. Transform-only: never reflows, so it cannot cause CLS. */
.afn-post__toc a::after{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:1.5px;
  background:var(--afn-ice);
  box-shadow:0 0 10px rgba(195,209,235,.6);
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform .45s var(--afn-ease);
}
.afn-post__toc a:hover,
.afn-post__toc a:focus-visible{color:var(--afn-ice)}
.afn-post__toc a:hover::before,
.afn-post__toc a:focus-visible::before{color:var(--afn-slate)}

.afn-post__toc a.is-active{color:var(--afn-white)}
.afn-post__toc a.is-active::before{color:var(--afn-ice)}
.afn-post__toc a.is-active::after{transform:scaleY(1)}


/* ============================================================ READING COLUMN
   Breakout grid. The centre track is the measure; figures span the full track.
   Because the outer tracks are minmax(0,1fr) they collapse to zero on narrow
   viewports, so a "breakout" figure can never produce horizontal overflow. */

.afn-post__body{min-width:0}

.afn-post__sec{
  display:grid;
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [prose-start] var(--post-measure) [prose-end]
    minmax(0,1fr) [full-end];
}
.afn-post__body{counter-reset:afn-sec afn-case}

.afn-post__sec > *{grid-column:prose}
.afn-post__sec > .afn-post__fig--break{grid-column:full}

.afn-post__sec + .afn-post__sec{
  margin-top:var(--post-gap);
  padding-top:var(--post-gap);
  border-top:1px solid var(--post-hair);
}
/* The article opens with a Quick Summary and no H2 above it. */
.afn-post__sec--intro > .afn-post__key:first-child{margin-top:0}


/* ------------------------------------------------------------ TYPE SYSTEM -- */

.afn-post__h2{
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--afn-white);
  max-width:35ch;
  scroll-margin-top:96px;
  counter-increment:afn-sec;   /* counted here so the un-headed intro takes no number */
}
/* Section numeral, generated by CSS — presentation only, never page text. */
.afn-post__h2::before{
  content:counter(afn-sec,decimal-leading-zero);
  display:block;
  margin-bottom:16px;
  font-family:var(--afn-font-mono);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.32em;
  color:var(--afn-slate);
}

.afn-post__h3{
  margin-top:clamp(40px,4.6vw,62px);
  font-family:var(--afn-font-body);
  font-weight:500;
  font-size:clamp(19px,1.9vw,24px);
  line-height:1.35;
  letter-spacing:-.005em;
  color:var(--afn-ice);
  max-width:34ch;
  scroll-margin-top:96px;
}
/* Hairline tick beside every H3 — the blog's quiet signature mark. */
.afn-post__h3::before{
  content:"";
  display:block;
  width:26px;
  height:1px;
  margin-bottom:18px;
  background:var(--post-hair-lit);
}

.afn-post__sec p{
  margin-top:20px;
  font-size:clamp(16.5px,1.15vw,18px);
  line-height:1.78;
  color:var(--post-ink);
}
.afn-post__sec p strong{color:var(--post-ink-strong);font-weight:500}

.afn-post__h2 + p,
.afn-post__h3 + p{margin-top:22px}

.afn-post__sec p.afn-post__lead{
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.68;
  color:var(--afn-ice);
}


/* ------------------------------------------------------------------ LINKS -- */

.afn-post__a{
  color:var(--afn-ice);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .4s var(--afn-ease), color .3s var(--afn-ease);
}
.afn-post__a:hover,
.afn-post__a:focus-visible{
  color:var(--afn-white);
  background-size:100% 1.5px;
}


/* ------------------------------------------------------------------ LISTS -- */
/* Square ice marker + hairline separator. Deliberately not the em-dash rule
   used by .afn-dlist on the service pages. */

.afn-post__list{margin-top:26px}
.afn-post__list li{
  position:relative;
  padding:15px 0 15px 26px;
  border-bottom:1px solid var(--post-hair);
  font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.7;
  color:var(--post-ink);
}
.afn-post__list li:first-child{border-top:1px solid var(--post-hair)}
.afn-post__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:calc(15px + .72em);
  width:6px;
  height:6px;
  background:var(--afn-ice);
  box-shadow:0 0 9px rgba(195,209,235,.45);
}
.afn-post__list strong{color:var(--post-ink-strong);font-weight:500}


/* --------------------------------------------------------- QUICK SUMMARY -- */
/* The article's takeaway card. Flat fill + accent rail, no backdrop blur —
   cheap to paint and visually unlike the service pages' glass panels. */

.afn-post__key{
  margin-top:clamp(34px,4vw,48px);
  padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px);
  border:1px solid var(--post-hair);
  border-left:2px solid var(--afn-ice);
  border-radius:0 var(--post-r) var(--post-r) 0;
  background:linear-gradient(100deg,var(--post-tint),transparent 62%);
}
.afn-post__key-title{
  font-family:var(--afn-font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--afn-ice);
}
.afn-post__key-list{margin-top:22px}
.afn-post__key-list li{
  padding:14px 0;
  border-top:1px solid var(--post-hair);
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.7;
  color:var(--post-ink);
}
.afn-post__key-list li:first-child{border-top:0;padding-top:0}
.afn-post__key-list li:last-child{padding-bottom:0}
.afn-post__key-list strong{color:var(--post-ink-strong);font-weight:500}


/* ------------------------------------------------------------------ INTRO -- */
/* The article opens with the Quick Summary card and no H2. Give the lead
   paragraph a little more air beneath the card than a normal paragraph gets. */
.afn-post__sec .afn-post__key + p{margin-top:clamp(28px,3.4vw,40px)}

/* ---------------------------------------------------------------- FIGURES -- */
/* Every figure shows its WHOLE image. width + height attributes reserve the
   box (no CLS); height:auto lets each image keep its own ratio. There is no
   aspect-ratio, no object-fit:cover, no scale() and no clip anywhere on a
   still figure. No colour grading either: tissue colour is diagnostic. */

.afn-post__fig{
  position:relative;
  margin-top:clamp(40px,5vw,66px);
  border:1px solid var(--post-hair);
  border-radius:var(--post-r);
  overflow:hidden;
  background:#000;
  transition:border-color .6s var(--afn-ease);
}
.afn-post__fig img{
  display:block;
  width:100%;
  height:auto;
}
@media (hover:hover){
  .afn-post__fig:hover{border-color:var(--post-hair-lit)}
}

/* The three 3D renders are small subjects on pure black. They stay whole;
   a barely-there radial lift behind the subject makes the black read as a
   lit stage instead of an empty rectangle. It only affects near-black pixels
   (screen blend) and is never applied to clinical photographs. */
.afn-post__fig--stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(58% 68% at 50% 50%, rgba(195,209,235,.075), transparent 72%);
  mix-blend-mode:screen;
}


/* ================================================= LUXURY BEFORE / AFTER ====
   .afn-lux — one figure per pair, stacked inside .afn-post__cases.

   The figure is its own stage. Its height comes from the AFTER image in
   normal flow (width/height attributes), so a 3:2 pair and a 3.58:1 panorama
   each get exactly their own frame. The BEFORE layer is an absolutely
   positioned copy clipped to the left of the divider; both images use
   object-fit:contain so that even a one-pixel ratio mismatch could only ever
   letterbox, never crop.

   --p is the divider position as a unitless 0-100 number. page JS sets it;
   with no JS it stays at 50, which renders a perfectly good static split.

   Nothing is hidden by default. The entrance state only exists after
   page JS has set data-lux="armed" on a figure that is still below the fold,
   so a script that never runs can never leave a figure invisible. */

.afn-post__cases{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3vw,40px);
  margin-top:clamp(44px,5.5vw,72px);
}

.afn-lux{
  --p:50;
  --mx:50%;
  --my:50%;
  position:relative;
  margin:0;
  counter-increment:afn-case;
  border:1px solid var(--post-hair);
  border-radius:var(--post-r);
  background:#000;
  overflow:hidden;
  isolation:isolate;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  /* Vertical swipes keep scrolling the page; only horizontal drags are ours.
     (The site's older compare slider sets touch-action:none, which traps a
     thumb on the image. This must not.) */
  touch-action:pan-y;
  transition:border-color .7s var(--afn-ease);
}

.afn-lux__img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* BEFORE layer: the left part of the frame, up to the divider. */
.afn-lux__before{
  position:absolute;
  inset:0;
  z-index:1;
  clip-path:inset(0 calc(100% - var(--p) * 1%) 0 0);
}
.afn-lux__before .afn-lux__img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Entrance veil: two solid halves that slide apart from the centre line.
   Base state is zero width, so with no JS (or reduced motion) it does not
   exist visually. It is a separate element, NOT a clip-path on the figure:
   a clipped figure reports intersectionRatio 0 to IntersectionObserver and
   is skipped by hit-testing, so the entrance would never start and hover
   would be dead until it did. */
.afn-lux__veil{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(#000,#000) left  top / 0 100% no-repeat,
    linear-gradient(#000,#000) right top / 0 100% no-repeat;
}

/* Spotlight that follows the pointer (fine pointers only, set by page JS). */
.afn-lux__glow{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(195,209,235,.10), transparent 68%);
  mix-blend-mode:screen;
  transition:opacity .6s var(--afn-ease);
}

/* Four hairline corner ticks: one element, eight gradients, no images. */
.afn-lux__ticks{
  --c:rgba(195,209,235,.62);
  position:absolute;
  inset:9px;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(var(--c),var(--c)) left  top    / 16px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left  top    / 1px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) right top    / 16px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right top    / 1px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) left  bottom / 16px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left  bottom / 1px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / 1px 16px no-repeat;
  opacity:.75;
  transition:inset .8s var(--afn-ease), opacity .6s var(--afn-ease);
}

/* Case number, generated by CSS from a counter: presentation, not copy.
   A real (empty) element, not a pseudo-element, so page JS can measure it and
   fade it out of the knob's way on a short panorama. */
.afn-lux__no{
  position:absolute;
  top:18px;
  left:20px;
  z-index:6;
  padding:5px 9px 5px 11px;
  border:1px solid var(--post-hair-lit);
  border-radius:var(--post-r);
  background:rgba(24,27,33,.62);
  font-family:var(--afn-font-mono);
  font-size:10px;
  letter-spacing:.3em;
  color:var(--afn-ice);
  pointer-events:none;
  transition:opacity .45s var(--afn-ease);
}
.afn-lux__no::before{content:counter(afn-case,decimal-leading-zero)}
.afn-lux.is-hide-n .afn-lux__no{opacity:0}

/* Divider + knob */
.afn-lux__line{
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--p) * 1%);
  z-index:4;
  width:1px;
  margin-left:-.5px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0,var(--afn-ice) 14%,var(--afn-ice) 86%,transparent 100%);
  box-shadow:0 0 22px rgba(195,209,235,.5);
  transform-origin:50% 0;
  transition:box-shadow .6s var(--afn-ease), background .6s var(--afn-ease);
}
.afn-lux__knob{
  position:absolute;
  top:50%;
  left:calc(var(--p) * 1%);
  z-index:5;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--afn-ice);
  border-radius:46px;
  background:rgba(24,27,33,.6);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  color:var(--afn-ice);
  pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 1px 0 rgba(195,209,235,.16), 0 8px 24px rgba(0,0,0,.4);
  transition:width .55s var(--afn-ease), border-color .5s var(--afn-ease),
             color .5s var(--afn-ease), background .5s var(--afn-ease),
             box-shadow .6s var(--afn-ease);
}
.afn-lux__knob svg{display:block;transition:transform .55s var(--afn-ease)}

/* Idle hint ring, until the reader has touched the slider once. */
.afn-lux__knob::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(195,209,235,.38);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
}
.afn-lux.is-hint .afn-lux__knob::after{animation:afn-lux-ring 2.6s var(--afn-ease) infinite}
@keyframes afn-lux-ring{
  0%  {opacity:.7;transform:scale(.86)}
  70% {opacity:0; transform:scale(1.32)}
  100%{opacity:0; transform:scale(1.32)}
}

/* Before / After tags. Page JS toggles .is-hide-b / .is-hide-a when the knob
   would collide with one, which matters on a narrow panorama. */
.afn-lux__tag{
  position:absolute;
  bottom:18px;
  z-index:6;
  padding:7px 13px;
  border:1px solid var(--post-hair-lit);
  border-radius:var(--post-r);
  background:rgba(24,27,33,.62);
  font-family:var(--afn-font-mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--afn-white);
  pointer-events:none;
  transition:opacity .45s var(--afn-ease), transform .9s var(--afn-ease), filter .9s var(--afn-ease);
}
.afn-lux__tag--before{left:20px}
.afn-lux__tag--after{right:20px;color:var(--afn-ice)}
.afn-lux.is-hide-b .afn-lux__tag--before,
.afn-lux.is-hide-a .afn-lux__tag--after{opacity:0}

/* Native range = keyboard and assistive-tech control. It is invisible and
   ignores the pointer; the figure itself handles mouse, pen and touch. */
.afn-lux__range{
  position:absolute;
  inset:0;
  z-index:7;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
}
.afn-lux:has(.afn-lux__range:focus-visible){outline:1.5px solid var(--afn-ice);outline-offset:3px}

/* ---- Hover (mouse and trackpad only) ----------------------------------- */
@media (hover:hover) and (pointer:fine){
  .afn-lux:hover{border-color:var(--post-hair-lit)}
  .afn-lux:hover .afn-lux__glow{opacity:1}
  .afn-lux:hover .afn-lux__ticks{inset:6px;opacity:1}
  .afn-lux:hover .afn-lux__line{
    background:linear-gradient(180deg,transparent 0,var(--afn-white) 14%,var(--afn-white) 86%,transparent 100%);
    box-shadow:0 0 30px rgba(195,209,235,.85), 0 0 64px rgba(195,209,235,.32);
  }
  .afn-lux:hover .afn-lux__knob{
    width:92px;
    border-color:var(--afn-white);
    color:var(--afn-white);
    background:rgba(195,209,235,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 7px rgba(195,209,235,.09), 0 0 38px rgba(195,209,235,.5);
  }
  .afn-lux:hover .afn-lux__knob svg{transform:scaleX(1.55)}
}
.afn-lux.is-drag .afn-lux__knob{background:rgba(195,209,235,.22);border-color:var(--afn-white);color:var(--afn-white)}

/* ---- Entrance --------------------------------------------------------------
   Only after JS has armed a below-the-fold figure. The veil opens outward
   from the centre line (which is where the divider starts), the photographs
   "develop" (dim and soft to sharp), the divider draws downward, the knob
   springs in and the tags rise.

   NOTHING IS EVER CROPPED, not even mid-entrance. The photographs start a
   touch SMALLER than their frame (scale .97) and grow to exactly 1; they are
   never scaled up, so no edge of a before/after photograph is lost at any
   moment. */
.afn-lux[data-lux="armed"] .afn-lux__img{transform:scale(.97);filter:brightness(.55) blur(6px)}
.afn-lux[data-lux="armed"] .afn-lux__line{transform:scaleY(0)}
.afn-lux[data-lux="armed"] .afn-lux__knob{transform:translate(-50%,-50%) scale(.3);opacity:0}
.afn-lux[data-lux="armed"] .afn-lux__tag{transform:translateY(10px);filter:blur(6px)}
.afn-lux[data-lux="armed"] .afn-lux__ticks{inset:26px;opacity:0}
.afn-lux[data-lux="armed"] .afn-lux__no{opacity:0}

.afn-lux[data-lux="armed"] .afn-lux__veil{background-size:50.6% 100%,50.6% 100%}
.afn-lux[data-lux="armed"].is-in .afn-lux__veil{
  background-size:0 100%,0 100%;
  transition:background-size 1.35s cubic-bezier(.77,0,.18,1);
}
.afn-lux[data-lux="armed"].is-in .afn-lux__img{
  transform:none;
  filter:none;
  transition:transform 2.2s var(--afn-ease), filter 1.9s var(--afn-ease);
}
.afn-lux[data-lux="armed"].is-in .afn-lux__line{transform:none;transition:transform 1.1s var(--afn-ease) .55s, box-shadow .6s var(--afn-ease), background .6s var(--afn-ease)}
.afn-lux[data-lux="armed"].is-in .afn-lux__knob{
  transform:translate(-50%,-50%);opacity:1;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1) 1s, opacity .5s ease 1s, width .55s var(--afn-ease),
             border-color .5s var(--afn-ease), color .5s var(--afn-ease), background .5s var(--afn-ease), box-shadow .6s var(--afn-ease);
}
.afn-lux[data-lux="armed"].is-in .afn-lux__tag{transform:none;filter:none;transition-delay:1.1s}
.afn-lux[data-lux="armed"].is-in .afn-lux__ticks{inset:9px;opacity:.75;transition:inset 1.1s var(--afn-ease) .4s, opacity .9s var(--afn-ease) .4s}
.afn-lux[data-lux="armed"].is-in .afn-lux__no{opacity:1;transition:opacity .8s ease .9s}
.afn-lux[data-lux].is-settled .afn-lux__no{transition-delay:0s}

/* Once the entrance has finished (page JS adds .is-settled), reset the
   entrance-only transition delays. Without this the tags' delay (1.1s) and
   the ticks' delay (.4s) would outlive the entrance and make the collision
   fade and the hover expansion lag behind the pointer. */
.afn-lux[data-lux].is-settled .afn-lux__tag{transition-delay:0s}
.afn-lux[data-lux].is-settled .afn-lux__ticks{
  transition:inset .8s var(--afn-ease), opacity .6s var(--afn-ease);
}


/* ------------------------------------------------------------------ PRICES -- */
/* The fee schedule, mirrored from the Dental Implant pillar page (same rows,
   same figures, same "case-dependent" qualifiers). Blog language: flat tint,
   hairlines, the one 3px radius, tabular figures, no card shadows. A real
   <table> so screen readers announce row and column. */

.afn-post__price{
  margin-top:clamp(36px,4.4vw,56px);
  padding:clamp(26px,3.2vw,42px) clamp(20px,3.2vw,42px) clamp(10px,1.4vw,16px);
  border:1px solid var(--post-hair);
  border-radius:var(--post-r);
  background:linear-gradient(100deg,var(--post-tint),transparent 62%);
}
.afn-post__price-title{
  margin:0;
  font-family:var(--afn-font-display);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--afn-white);
}
.afn-post__sec p.afn-post__price-unit{
  margin-top:14px;
  font-family:var(--afn-font-mono);
  font-size:11px;
  font-weight:300;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--afn-slate);
}
.afn-post__sec p.afn-post__price-note{
  margin-top:18px;
  max-width:62ch;
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.7;
  color:var(--post-ink);
}

.afn-post__price-table{
  width:100%;
  margin-top:clamp(24px,2.8vw,34px);
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.afn-post__price-table th,
.afn-post__price-table td{
  padding:17px 0;
  border-top:1px solid var(--post-hair);
  font-size:clamp(15.5px,1.05vw,17px);
  font-weight:400;
  line-height:1.45;
  text-align:left;
  vertical-align:baseline;
  color:var(--post-ink);
}
.afn-post__price-table thead th{
  padding:0 0 13px;
  border-top:0;
  border-bottom:1px solid var(--post-hair-lit);
  font-family:var(--afn-font-mono);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--afn-slate);
}
.afn-post__price-table thead th:last-child,
.afn-post__price-table td{
  padding-left:22px;
  text-align:right;
  white-space:nowrap;
}
.afn-post__price-table td{
  font-weight:500;
  color:var(--afn-white);
}
.afn-post__price-table tbody tr:first-child th,
.afn-post__price-table tbody tr:first-child td{border-top:0}
.afn-post__price-table small{
  display:block;
  margin-top:5px;
  font-family:var(--afn-font-mono);
  font-size:10px;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--afn-slate);
}
@media (hover:hover){
  .afn-post__price-table tbody tr{transition:background-color .35s var(--afn-ease)}
  .afn-post__price-table tbody tr:hover{background:var(--post-tint)}
}
@media (max-width:480px){
  .afn-post__price{padding-left:16px;padding-right:16px}
  .afn-post__price-table th,
  .afn-post__price-table td{padding-top:14px;padding-bottom:14px}
  .afn-post__price-table thead th:last-child,
  .afn-post__price-table td{padding-left:14px}
}


/* -------------------------------------------------------------------- CTA -- */
/* The source has no CTA heading, only the closing sentence and a CTA slot.
   That sentence is the statement; the button label is supplied per language
   (the same four labels used on the previous post). */

.afn-post__cta{
  margin-top:clamp(48px,6vw,76px);
  padding:clamp(30px,4vw,54px);
  border:1px solid var(--post-hair-lit);
  border-radius:var(--post-r);
  background:
    linear-gradient(150deg,rgba(195,209,235,.07),transparent 58%),
    rgba(24,27,33,.5);
}
.afn-post__sec p.afn-post__cta-p{
  margin:0;
  max-width:30ch;
  font-family:var(--afn-font-display);
  font-size:clamp(24px,2.8vw,36px);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--afn-white);
}
.afn-post__cta-btn{
  margin-top:clamp(26px,3vw,36px);
  border-radius:var(--post-r);
  text-align:left;
}


/* -------------------------------------------------------------------- FAQ -- */
/* Native <details>: every answer opens and closes without JavaScript.
   [data-afn-faq] in global.js only enforces one-open-at-a-time.
   Reskinned from the service pages' glass cards to flat hairline rows. */

.afn-post__sec--faq > .afn-post__faq{grid-column:prose}

.afn-post .afn-post__faq{max-width:none;margin-top:clamp(30px,3.5vw,44px)}

.afn-post .afn-post__faq .afn-faq__item{
  margin-bottom:0;
  border:0;
  border-top:1px solid var(--post-hair);
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  transition:background .4s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item:last-child{border-bottom:1px solid var(--post-hair)}
.afn-post .afn-post__faq .afn-faq__item[open]{background:linear-gradient(180deg,var(--post-tint),transparent 70%)}
@media (hover:hover){
  .afn-post .afn-post__faq .afn-faq__item:hover{background:linear-gradient(180deg,var(--post-tint),transparent 80%)}
}

.afn-post .afn-post__faq .afn-faq__item > summary{
  gap:20px;
  padding:24px 4px;
  align-items:flex-start;
}
.afn-post .afn-post__faq .afn-faq__item > summary h3{
  font-size:clamp(16px,1.35vw,18.5px);
  font-weight:500;
  line-height:1.5;
  color:var(--afn-ice);
  transition:color .35s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item[open] > summary h3,
.afn-post .afn-post__faq .afn-faq__item > summary:hover h3{color:var(--afn-white)}

/* Square toggle. The service pages rotate a round + into an x; a square
   rotated 45deg would read as a stray diamond (and its diagonal overhangs
   the column), so this one stays square and swaps the glyph instead. */
.afn-post .afn-post__faq .afn-faq__tog{
  top:2px;
  width:26px;
  height:26px;
  border-radius:var(--post-r);
  border-color:var(--post-hair);
  background:none;
  font-size:15px;
  line-height:1;
  color:var(--afn-slate);
  transform:none;
  transition:border-color .4s var(--afn-ease), color .4s var(--afn-ease);
}
.afn-post .afn-post__faq .afn-faq__item[open] .afn-faq__tog{
  background:none;
  border-color:var(--afn-ice);
  color:var(--afn-ice);
  transform:none;
}
.afn-post .afn-post__faq .afn-faq__item[open] .afn-faq__tog::before{content:"\2013"}

.afn-post .afn-post__faq .afn-faq__body{padding:0 4px 28px}
/* The section-level paragraph rhythm must not leak into an answer: the
   summary's own padding already sets the distance. */
.afn-post .afn-post__faq .afn-faq__body p{margin-top:0}
.afn-post .afn-post__faq .afn-faq__body p + p{margin-top:16px}
.afn-post .afn-post__faq .afn-faq__body p{
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.78;
  color:var(--post-ink);
  max-width:74ch;
}

/* An answer can hold a list (FAQ 7). Same marker language as the article. */
.afn-post .afn-post__faq .afn-faq__body .afn-post__list + p{margin-top:22px}
.afn-post .afn-post__faq .afn-faq__body > * + *{margin-top:16px}
.afn-post .afn-post__faq .afn-faq__body .afn-post__list{margin-top:18px}
.afn-post .afn-post__faq .afn-faq__body .afn-post__list li{
  font-size:clamp(15.5px,1.05vw,16.5px);
  line-height:1.72;
  max-width:74ch;
}


/* ============================================================== RESPONSIVE
   Five bands, each with a real layout decision — not a shrunk desktop. */

/* ---- Large desktop: rail appears, figures break out furthest ------------ */
@media (min-width:1280px){
  .afn-post__layout{
    display:grid;
    grid-template-columns:var(--post-rail) minmax(0,1fr);
    gap:var(--post-rail-gap);
    align-items:stretch;      /* gives the sticky contents list its travel */
  }
  .afn-post__rail{display:block}
}

/* ---- Very large desktop: hold the measure, let the margins grow --------- */
@media (min-width:1600px){
  .afn-post{--post-rail:240px}
  .afn-post__toc a{font-size:13.5px}
}

/* ---- Medium desktop: no rail. The measure is unchanged, so the reading
        line length is identical with and without the rail; only the breakout
        room for figures grows. ------------------------------------------- */

/* ---- Small desktop / large tablet --------------------------------------- */
@media (max-width:992px){
  .afn-post__toc{top:88px}
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width:820px){
  .afn-post__hero{padding-top:clamp(72px,11vw,120px)}
  .afn-post__h2{max-width:100%}
  .afn-post__h3{max-width:100%}
  /* Room for the global .afn-mcta sticky bar, which appears below 820px. */
  .afn-post__layout{padding-bottom:clamp(120px,16vw,170px)}
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:640px){
  .afn-post{
    --post-gap:clamp(44px,11vw,64px);
    --post-r:2px;
  }
  .afn-post__title{font-size:clamp(27px,7.4vw,38px);max-width:100%}
  .afn-post__sec p{font-size:16.5px;line-height:1.75}
  .afn-post__sec p.afn-post__lead{font-size:17.5px}

  /* Figures go edge-to-edge: the gutter is the frame on a phone. */
  .afn-post__fig--break{
    margin-inline:calc(var(--afn-gutter) * -1);
  }
  .afn-post__fig.afn-post__fig--break,
  .afn-lux{
    border-inline:0;
    border-radius:0;
  }

  .afn-post__key{padding:24px 20px;margin-inline:0}
  .afn-post__cta{padding:26px 20px}
  .afn-post__cta-btn{width:100%;justify-content:space-between}

  .afn-post .afn-post__faq .afn-faq__item > summary{padding:20px 0;gap:14px}
  .afn-post .afn-post__faq .afn-faq__body{padding:0 0 24px}

  /* Comparison: smaller furniture, but the knob stays a real touch target. */
  .afn-lux__no{top:12px;left:12px;padding:4px 7px 4px 9px;font-size:9px}
  .afn-lux__ticks{inset:7px;--c:rgba(195,209,235,.55)}
  .afn-lux[data-lux="armed"].is-in .afn-lux__ticks{inset:7px}
  .afn-lux__knob{width:44px;height:44px;border-radius:44px}
  .afn-lux__tag{bottom:12px;padding:5px 9px;font-size:9px;letter-spacing:.18em}
  .afn-lux__tag--before{left:12px}
  .afn-lux__tag--after{right:12px}
}

/* ---- Small mobile -------------------------------------------------------- */
@media (max-width:400px){
  .afn-post__title{font-size:26px}
}

/* ------------------------------------------------------------ PRINT-SAFE -- */
@media print{
  .afn-post__rail,
  .afn-post .afn-progress,
  .afn-post__cta-btn,
  .afn-lux__glow,
  .afn-lux__knob,
  .afn-lux__line{display:none}
  .afn-lux__veil{display:none}
  .afn-post .afn-faq__body{display:block}
}

/* --------------------------------------------------------- REDUCED MOTION -- */
/* global.css already flattens transitions site-wide under this query, and page
   JS never arms an entrance or plays the idle sweep. These rules cover the
   page-local affordances global.css cannot know about. */
@media (prefers-reduced-motion:reduce){
  .afn-post__toc a::after{transition:none}
  .afn-lux__knob::after{animation:none}
  .afn-lux__veil{display:none}
}