/* Feature modules — Onur'un onayladığı 10 özellik (ozellik-lab). Her blok kendi önekiyle izole. */

/* ==== f06 · jurisdiction map ==== */
/* ============ FEATURE 06 — JURISDICTION MAP (module scope: .jmap-sec) ============ */
/* Requires site styles.css variables: --navy --gold --gold-soft --rule --muted --body --hd --bd --ease
   and site classes .container / .sec-head / .kicker for base layout & typography. */

/* --- section shell (dark band; background moved here from the demo's body) --- */
.jmap-sec{padding:clamp(3.6rem,7vw,6.2rem) 0 clamp(3rem,6vw,5rem);color:rgba(255,255,255,.8);background:#0a1e38}
.jmap-sec .kicker{color:rgba(255,255,255,.55)}
.jmap-sec .sec-head h2{color:#fff}
.jmap-sec .jmap-lede{max-width:62ch;font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.72)}

/* --- map frame --- */
.jmap-sec .jmap-frame{margin-top:2.6rem;border:1px solid rgba(255,255,255,.16);border-radius:2px;
  padding:clamp(10px,2.2vw,22px);position:relative;
  background:radial-gradient(120% 110% at 28% 0%,#0f2c50 0%,#0a1e38 62%)}
.jmap-sec .jmap-stage{position:relative}
.jmap-sec .jmap-svg{display:block;width:100%;height:auto}

/* --- cartographic svg type --- */
.jmap-sec .jmap-svg text{font-family:var(--bd)}
.jmap-sec .jm-sea{fill:rgba(255,255,255,.3);font-size:11px;letter-spacing:.45em;font-weight:500}
.jmap-sec .jm-deg{fill:rgba(255,255,255,.26);font-size:8px;letter-spacing:.1em}
.jmap-sec .jm-wm{fill:rgba(255,255,255,.07);font-size:36px;letter-spacing:.6em;font-weight:500}
.jmap-sec .jm-cart1{fill:#d8bc78;font-size:10px;letter-spacing:.32em;font-weight:600}
.jmap-sec .jm-cart2{fill:rgba(255,255,255,.5);font-size:7.5px;letter-spacing:.26em}
.jmap-sec .jm-grid line{stroke:rgba(255,255,255,.05)}
.jmap-sec .jm-sketch{fill:none;stroke:rgba(255,255,255,.12);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.jmap-sec .jm-land{fill:url(#jmLandfill);stroke:#d8bc78;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.jmap-sec .jm-isles path{fill:rgba(255,255,255,.06);stroke:rgba(216,188,120,.6);stroke-width:.8}
.jmap-sec .jm-lakes path{fill:#0a1e38;stroke:rgba(216,188,120,.4);stroke-width:.8}
.jmap-sec .jm-arcs path{fill:none;stroke:rgba(216,188,120,.5);stroke-width:1.5;stroke-dasharray:.4 7;stroke-linecap:round}
.jmap-sec .jm-compass path,.jmap-sec .jm-compass line,.jmap-sec .jm-scale line{stroke:rgba(255,255,255,.42);stroke-width:1;fill:none}

/* --- draw-in choreography --- */
.jmap-sec .jm-land,.jmap-sec .jm-sketch{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  transition:stroke-dashoffset 2s var(--ease),fill-opacity 1s var(--ease) 1.4s}
.jmap-sec .jm-d2{transition-delay:.3s,1.55s}
.jmap-sec.jm-in .jm-land,.jmap-sec.jm-in .jm-sketch{stroke-dashoffset:0;fill-opacity:1}
.jmap-sec .jm-isles,.jmap-sec .jm-lakes,.jmap-sec .jm-arcs,.jmap-sec .jm-deco{opacity:0;transition:opacity 1.1s var(--ease) 1.6s}
.jmap-sec.jm-in .jm-isles,.jmap-sec.jm-in .jm-lakes,.jmap-sec.jm-in .jm-arcs,.jmap-sec.jm-in .jm-deco{opacity:1}

/* --- pins --- */
.jmap-sec .jm-spot{position:absolute;left:var(--x);top:var(--y);z-index:3;opacity:0;
  transform:translate(-50%,-70%);transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(1.7s + var(--i)*.1s)}
.jmap-sec.jm-in .jm-spot{opacity:1;transform:translate(-50%,-50%)}
.jmap-sec .jm-pin{position:relative;display:block;width:38px;height:38px;background:none;border:0;padding:0;cursor:pointer}
.jmap-sec .jm-dot{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));transition:transform .3s var(--ease)}
.jmap-sec .jm-dot::before{content:"";position:absolute;inset:-7px;border:1px solid rgba(216,188,120,.75);border-radius:50%;
  transition:inset .3s var(--ease),border-color .3s var(--ease)}
.jmap-sec .jm-spot.jm-live .jm-dot,.jmap-sec .jm-pin:hover .jm-dot{transform:scale(1.35)}
.jmap-sec .jm-spot.jm-live .jm-dot::before,.jmap-sec .jm-pin:hover .jm-dot::before{inset:-10px;border-color:var(--gold-soft)}
.jmap-sec .jm-pin:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px;border-radius:50%}
/* İstanbul pulse */
.jmap-sec .jm-spot-ist .jm-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--gold-soft);animation:jmPulse 2.8s var(--ease) infinite}
@keyframes jmPulse{0%{transform:scale(.6);opacity:.85}70%{transform:scale(2.7);opacity:0}100%{transform:scale(2.7);opacity:0}}

/* --- cartographic pin labels --- */
.jmap-sec .jm-name{position:absolute;font:600 .62rem/1 var(--bd);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.78);white-space:nowrap;pointer-events:none;transition:color .3s var(--ease)}
.jmap-sec .jm-spot.jm-live .jm-name{color:var(--gold-soft)}
.jmap-sec .jm-lbl-t{bottom:calc(100% + 1px);left:50%;transform:translateX(-50%)}
.jmap-sec .jm-lbl-b{top:calc(100% + 1px);left:50%;transform:translateX(-50%)}
.jmap-sec .jm-lbl-r{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.jmap-sec .jm-lbl-l{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}

/* --- hover cards --- */
.jmap-sec .jm-card{position:absolute;left:var(--x);top:var(--y);z-index:5;width:272px;background:#fff;
  border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:2px;padding:.95rem 1.05rem 1.05rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.jmap-sec .jm-card.jm-live{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s,0s}
.jmap-sec .jm-card.jm-pos-r{transform:translate(22px,-50%)}
.jmap-sec .jm-card.jm-pos-r.jm-live{transform:translate(30px,-50%)}
.jmap-sec .jm-card.jm-pos-t{transform:translate(-50%,calc(-100% - 22px))}
.jmap-sec .jm-card.jm-pos-t.jm-live{transform:translate(-50%,calc(-100% - 30px))}
.jmap-sec .jm-card.jm-pos-b{transform:translate(-50%,22px)}
.jmap-sec .jm-card.jm-pos-b.jm-live{transform:translate(-50%,30px)}
.jmap-sec .jm-city{display:flex;align-items:baseline;gap:.55rem;font:600 .62rem var(--bd);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.jmap-sec .jm-city em{font-style:normal;font-size:.56rem;letter-spacing:.14em;color:var(--muted);
  border:1px solid var(--rule);padding:.12rem .38rem}
.jmap-sec .jm-card h3{font-family:var(--hd);font-weight:400;font-size:1.28rem;line-height:1.12;color:var(--navy);margin:.45rem 0 .35rem}
.jmap-sec .jm-card p{font:400 .8rem/1.55 var(--bd);color:var(--body);margin:0}

/* --- legend / note / contact --- */
.jmap-sec .jm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.7rem;margin-top:1.7rem;
  padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14)}
.jmap-sec .jm-leg{display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;padding:.35rem 0;cursor:pointer;
  font:600 .68rem var(--bd);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .25s var(--ease)}
.jmap-sec .jm-leg::before{content:"";width:7px;height:7px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));transform:rotate(45deg)}
.jmap-sec .jm-leg:hover,.jmap-sec .jm-leg:focus-visible{color:#fff}
.jmap-sec .jm-leg:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.jmap-sec .jm-hint{margin-left:auto;font:500 .64rem var(--bd);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.jmap-sec .jm-note{margin-top:1.5rem;font-size:.87rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:72ch}
.jmap-sec .jm-contact{display:flex;flex-wrap:wrap;gap:.9rem 2.2rem;align-items:center;margin-top:2.3rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.jmap-sec .jm-contact a{display:inline-flex;align-items:center;gap:.5rem;font:600 .8rem var(--bd);letter-spacing:.03em;
  color:rgba(255,255,255,.82);transition:color .25s var(--ease)}
.jmap-sec .jm-contact a:hover,.jmap-sec .jm-contact a:focus-visible{color:var(--gold-soft)}
.jmap-sec .jm-contact a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.jmap-sec .jm-contact svg{width:15px;height:15px;flex:none}
.jmap-sec .jm-addr{font:400 .78rem var(--bd);color:rgba(255,255,255,.45);margin-left:auto}

/* --- utilities --- */
.jmap-sec .jm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* --- responsive --- */
@media(max-width:680px){
  .jmap-sec .jmap-stage .jm-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;transform:none}
  .jmap-sec .jmap-stage .jm-card.jm-live{transform:none}
  .jmap-sec .jm-name{font-size:.5rem;letter-spacing:.18em}
  .jmap-sec .jm-hint{display:none}
  .jmap-sec .jm-addr{margin-left:0;flex-basis:100%}
}

/* --- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  .jmap-sec .jm-land,.jmap-sec .jm-sketch{stroke-dashoffset:0 !important;fill-opacity:1 !important;transition:none !important}
  .jmap-sec .jm-isles,.jmap-sec .jm-lakes,.jmap-sec .jm-arcs,.jmap-sec .jm-deco{opacity:1 !important;transition:none !important}
  .jmap-sec .jm-spot{opacity:1 !important;transform:translate(-50%,-50%) !important;transition:none !important}
  .jmap-sec .jm-spot-ist .jm-dot::after{animation:none;opacity:0}
  .jmap-sec .jm-card,.jmap-sec .jm-dot,.jmap-sec .jm-dot::before{transition:none !important}
}

/* ==== f01 ==== */
/* ============================================================
   Matter Navigator module (f01) — namespaced under .mn-page
   Extracted from MOCKUPS/ozellik-lab/feature-01-matter-navigator.html
   Depends on site fonts.css ("Archivo", "Instrument Serif").
   Site palette tokens (--navy, --gold, ...) are redefined locally
   on .mn-page as fallbacks; values match the site's styles.css.
   ============================================================ */

.mn-page{
  --navy:#0d2b4d;
  --navy-dark:#0a1e38;
  --ink:#14263a;
  --gold:#b08d3f;
  --gold-soft:#d8bc78;
  --rule:#d6dfe7;
  --teal:#33a9c4;
  --ease:cubic-bezier(.22,.61,.21,1);
  font-family:"Archivo",system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
}
.mn-page *{box-sizing:border-box;margin:0;padding:0}
.mn-page img{max-width:100%;display:block}

/* ---------- shell / intro ---------- */
.mn-shell{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.mn-intro{padding:clamp(48px,7vw,84px) 0 40px}
.mn-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
}
.mn-eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.mn-intro h2{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(34px,4.6vw,54px);line-height:1.08;
  color:var(--navy);margin-top:18px;max-width:640px;
}
.mn-intro h2 em{font-style:italic;color:var(--gold)}
.mn-intro p{
  margin-top:16px;max-width:560px;font-size:15.5px;line-height:1.65;color:#3f5670;
}

/* ---------- cards ---------- */
.mn-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:8px;
}
@media(max-width:880px){.mn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mn-grid{grid-template-columns:1fr}}

.mn-card{
  position:relative;appearance:none;background:#fff;
  border:1px solid var(--rule);border-radius:2px;
  padding:22px 20px 20px;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.mn-card::after{ /* gold corner tick */
  content:"";position:absolute;top:-1px;right:-1px;width:0;height:0;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);
  transition:width .32s var(--ease),height .32s var(--ease);
}
.mn-card:hover{border-color:#b9c8d6;transform:translateY(-2px)}
.mn-card:hover::after{width:22px;height:22px}
.mn-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mn-card[aria-selected="true"]{
  border-color:var(--navy);background:var(--navy);color:#fff;
  transform:translateY(-2px);
}
.mn-card[aria-selected="true"]::after{width:22px;height:22px}
.mn-card[aria-selected="true"] .mn-card-hint{color:var(--gold-soft)}
.mn-card[aria-selected="true"] .mn-ico{color:var(--gold-soft)}
.mn-ico{width:26px;height:26px;color:var(--gold);flex:none}
.mn-ico svg{width:100%;height:100%;display:block}
.mn-card-title{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:21px;line-height:1.15;
}
.mn-card-hint{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#8296ab;display:inline-flex;align-items:center;gap:8px;
  transition:color .3s var(--ease);
}
.mn-card-hint svg{width:12px;height:12px}

/* ---------- panel ---------- */
.mn-stage{
  margin:26px 0 clamp(64px,8vw,110px);
  border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;position:relative;
  transition:height .42s var(--ease);
}
.mn-panel{padding:clamp(28px,4vw,48px)}
.mn-panel[hidden]{display:none}
.mn-panel.mn-is-entering{opacity:0;transform:translateY(12px)}
.mn-panel.mn-is-live{
  opacity:1;transform:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.mn-panel.mn-is-leaving{
  opacity:0;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease;
}

.mn-panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.mn-panel-head h2{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(24px,3vw,32px);color:var(--navy);
}
.mn-statute{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:9px;
}
.mn-statute svg{width:14px;height:14px;flex:none}

.mn-cols{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);padding-top:28px;
}
@media(max-width:820px){.mn-cols{grid-template-columns:1fr}}

.mn-steps{list-style:none;display:flex;flex-direction:column}
.mn-step{
  display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.mn-step:last-child{border-bottom:none}
.mn-step-num{
  font-family:"Instrument Serif",serif;font-size:30px;line-height:1;
  color:var(--gold);padding-top:2px;
}
.mn-step h3{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:15px;
  color:var(--navy);letter-spacing:.01em;
}
.mn-step p{margin-top:6px;font-size:14px;line-height:1.6;color:#41566f}

.mn-side{display:flex;flex-direction:column;gap:16px}
.mn-statute-card{
  border:1px solid var(--rule);border-left:2px solid var(--gold);
  border-radius:2px;padding:20px 22px;
}
.mn-statute-card .mn-label{
  font-size:10.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:#8296ab;
}
.mn-statute-card strong{
  display:block;margin-top:8px;font-weight:600;font-size:15px;color:var(--navy);
}
.mn-statute-card p{margin-top:6px;font-size:13.5px;line-height:1.6;color:#41566f}

.mn-actions{display:flex;flex-direction:column;gap:10px}
.mn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:2px;padding:14px 20px;font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.mn-btn svg{width:16px;height:16px;flex:none}
.mn-btn-primary{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.mn-btn-primary:hover{background:var(--navy-dark)}
.mn-btn-wa{background:#fff;color:var(--navy);border:1px solid var(--rule)}
.mn-btn-wa:hover{border-color:var(--gold);color:var(--gold)}
.mn-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.mn-contactline{
  margin-top:4px;font-size:12.5px;line-height:1.7;color:#65788d;
}
.mn-contactline a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--rule)}
.mn-contactline a:hover{border-color:var(--gold)}

.mn-foot{
  padding:0 0 60px;font-size:12px;color:#8296ab;max-width:640px;line-height:1.7;
}

@media(prefers-reduced-motion:reduce){
  .mn-page *,.mn-page *::before,.mn-page *::after{
    transition-duration:.001s !important;animation-duration:.001s !important;
  }
  .mn-stage{transition:none}
}

/* ==== f02 ==== */
/* Mobil: kartların giriş animasyonu (translateX) sayfayı yatay kaydırmasın.
   overflow-x:clip kullanıldı — hidden, içerideki position:sticky noktayı bozardı. */
.pt-process{overflow-x:clip;}

/* ============================================================
   Feature 02 — Scroll process timeline (module)
   Module root: .pt-process
   Depends on site fonts.css ("Archivo", "Instrument Serif")
   ============================================================ */
.pt-process{
  --pt-navy:#0d2b4d;
  --pt-dark:#0a1e38;
  --pt-ink:#14263a;
  --pt-gold:#b08d3f;
  --pt-gold-soft:#d8bc78;
  --pt-rule:#d6dfe7;
  --pt-teal:#33a9c4;
  --pt-paper:#ffffff;
  --pt-mist:#f6f8fa;
  --pt-ease:cubic-bezier(0.22,1,0.36,1);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  color:var(--pt-ink);
  background:var(--pt-paper);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
.pt-process *,
.pt-process *::before,
.pt-process *::after{box-sizing:border-box;}
.pt-process img{max-width:100%;display:block;}
.pt-process a{color:inherit;}
.pt-process :focus-visible{
  outline:2px solid var(--pt-teal);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Stage nav ---------- */
.pt-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:26px 24px 10px;
  flex-wrap:wrap;
}
.pt-nav button{
  font-family:"Archivo",sans-serif;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#5c6f84;
  background:none;
  border:1px solid var(--pt-rule);
  border-radius:2px;
  padding:8px 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:border-color .35s var(--pt-ease), color .35s var(--pt-ease), background-color .35s var(--pt-ease);
}
.pt-nav button .pt-n{
  font-family:"Instrument Serif",serif;
  font-size:14px;
  color:var(--pt-gold);
  letter-spacing:0;
}
.pt-nav button:hover{border-color:var(--pt-gold-soft);color:var(--pt-navy);}
.pt-nav button.pt-is-active{
  border-color:var(--pt-gold);
  color:var(--pt-navy);
  background:#fbf7ee;
}

/* ---------- Timeline ---------- */
.pt-timeline{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  padding:56px 24px 40px;
}
.pt-line{
  position:absolute;
  top:56px;
  bottom:40px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
}
.pt-line__base{
  position:absolute;
  inset:0;
  background:var(--pt-rule);
}
.pt-line__fill{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--pt-gold-soft),var(--pt-gold));
  transform:scaleY(0);
  transform-origin:top center;
  will-change:transform;
}
.pt-dot{
  position:sticky;
  top:50vh;
  display:block;
  width:16px;
  height:16px;
  margin-left:-7px;
  border-radius:50%;
  background:var(--pt-paper);
  border:2px solid var(--pt-gold);
  z-index:3;
}
.pt-dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--pt-gold);
  transition:transform .4s var(--pt-ease);
}
.pt-stages{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.pt-stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr 96px 1fr;
  align-items:center;
  padding:44px 0;
}
.pt-marker{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--pt-paper);
  border:1px solid var(--pt-rule);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Instrument Serif",serif;
  font-size:17px;
  color:#8296aa;
  z-index:2;
  transition:border-color .5s var(--pt-ease), color .5s var(--pt-ease), background-color .5s var(--pt-ease);
}
.pt-stage.pt-is-passed .pt-marker{
  border-color:var(--pt-gold);
  color:var(--pt-paper);
  background:var(--pt-gold);
}
.pt-card{
  position:relative;
  border:1px solid var(--pt-rule);
  border-radius:2px;
  background:var(--pt-paper);
  padding:30px 32px 28px;
  opacity:0;
  transition:opacity .8s var(--pt-ease), transform .8s var(--pt-ease), border-color .5s var(--pt-ease);
}
.pt-stage:nth-child(odd) .pt-card{
  grid-column:1;
  grid-row:1;
  transform:translateX(-44px);
}
.pt-stage:nth-child(even) .pt-card{
  grid-column:3;
  grid-row:1;
  transform:translateX(44px);
}
.pt-stage.pt-is-in .pt-card{
  opacity:1;
  transform:translateX(0);
}
.pt-stage.pt-is-passed .pt-card{border-color:var(--pt-gold-soft);}
/* connector hairline from card to line */
.pt-card::before{
  content:"";
  position:absolute;
  top:50%;
  width:48px;
  height:1px;
  background:var(--pt-rule);
}
.pt-stage:nth-child(odd) .pt-card::before{left:100%;}
.pt-stage:nth-child(even) .pt-card::before{right:100%;}
/* ghost numeral */
.pt-card__num{
  position:absolute;
  top:-30px;
  font-family:"Instrument Serif",serif;
  font-size:110px;
  line-height:1;
  color:var(--pt-gold);
  opacity:0.13;
  pointer-events:none;
  user-select:none;
}
.pt-stage:nth-child(odd) .pt-card__num{right:18px;}
.pt-stage:nth-child(even) .pt-card__num{left:18px;}
.pt-card__kicker{
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--pt-gold);
  font-weight:600;
  margin:0 0 10px;
}
.pt-card h2{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:27px;
  line-height:1.15;
  color:var(--pt-navy);
  margin:0 0 12px;
}
.pt-card p{
  font-size:14.5px;
  line-height:1.7;
  color:#41556c;
  margin:0 0 16px;
}
.pt-card__meta{
  border-top:1px solid var(--pt-rule);
  padding-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:0;
}
.pt-card__meta dt{
  width:100%;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#7b8da0;
  margin:0 0 4px;
}
.pt-card__meta dd{
  margin:0;
  font-size:12px;
  color:var(--pt-navy);
  border:1px solid var(--pt-rule);
  border-radius:2px;
  padding:5px 10px;
  background:var(--pt-mist);
}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .pt-line{left:27px;transform:none;}
  .pt-dot{margin-left:-7px;}
  .pt-stage{
    grid-template-columns:56px 1fr;
    padding:30px 0;
  }
  .pt-marker{
    grid-column:1;
    grid-row:1;
    align-self:start;
    justify-self:start;
    margin-left:6px;
    width:42px;
    height:42px;
  }
  .pt-stage:nth-child(odd) .pt-card,
  .pt-stage:nth-child(even) .pt-card{
    grid-column:2;
    grid-row:1;
    transform:translateX(36px);
    padding:26px 22px 24px;
  }
  .pt-stage.pt-is-in .pt-card{transform:translateX(0);}
  .pt-stage:nth-child(odd) .pt-card::before,
  .pt-stage:nth-child(even) .pt-card::before{
    right:100%;
    left:auto;
    width:26px;
  }
  .pt-stage:nth-child(odd) .pt-card__num,
  .pt-stage:nth-child(even) .pt-card__num{
    left:auto;right:14px;font-size:78px;top:-22px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pt-process *{transition-duration:0.01ms !important;}
  .pt-card,
  .pt-stage:nth-child(odd) .pt-card,
  .pt-stage:nth-child(even) .pt-card{
    opacity:1 !important;
    transform:none !important;
  }
  .pt-line__fill{transform:scaleY(1) !important;}
  .pt-dot{display:none;}
}

/* ==== f03 ==== */
/* ============ Feature 03 — Bilingual Legal Glossary (scoped: .glx-glossary) ============ */
.glx-glossary{
  --navy:#0d2b4d;
  --navy-deep:#0a1e38;
  --ink:#14263a;
  --gold:#b08d3f;
  --gold-soft:#d8bc78;
  --rule:#d6dfe7;
  --teal:#33a9c4;
  --paper:#f7f9fb;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.glx-glossary *,
.glx-glossary *::before,
.glx-glossary *::after{box-sizing:border-box}

/* ---------- Section head ---------- */
.glx-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.glx-head{padding:72px 0 40px;max-width:720px}
.glx-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:600;letter-spacing:.28em;color:var(--gold);
  text-transform:uppercase;margin:0 0 18px;
}
.glx-eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.glx-title{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(34px,4.6vw,52px);line-height:1.08;color:var(--navy);margin:0 0 18px;
}
.glx-title em{font-style:italic;color:var(--gold)}
.glx-lede{font-size:15.5px;line-height:1.7;color:#42556b;margin:0;max-width:60ch}

/* ---------- Search ---------- */
.glx-searchrow{padding:6px 0 14px}
.glx-search{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--rule);border-radius:2px;
  padding:0 18px;height:58px;max-width:640px;
  transition:border-color .25s ease;
}
.glx-search:focus-within{border-color:var(--gold)}
.glx-search svg{flex:none;color:var(--navy);opacity:.55}
.glx-search input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:"Archivo",sans-serif;font-size:15px;color:var(--ink);
  height:100%;min-width:0;
}
.glx-search input::placeholder{color:#8ba0b5}
.glx-clear{
  flex:none;border:0;background:transparent;cursor:pointer;padding:6px;
  color:#8ba0b5;display:none;line-height:0;border-radius:2px;
  transition:color .2s ease;
}
.glx-clear:hover,.glx-clear:focus-visible{color:var(--navy)}
.glx-clear.is-on{display:block}
.glx-kbd{
  flex:none;font-size:11px;color:#8ba0b5;border:1px solid var(--rule);
  border-radius:2px;padding:3px 8px;letter-spacing:.05em;user-select:none;
}
.glx-meta{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:16px 2px 26px;
}
.glx-count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);opacity:.7}
.glx-hint{font-size:12px;color:#8ba0b5}

/* ---------- Card grid ---------- */
.glx-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  padding-bottom:26px;
}
.glx-card{
  display:block;width:100%;height:268px;
  perspective:1400px;
  background:transparent;border:0;padding:0;margin:0;
  text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;
  opacity:0;transform:translateY(14px);
  animation:glxIn .55s cubic-bezier(.22,.61,.24,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes glxIn{to{opacity:1;transform:translateY(0)}}
.glx-card:focus{outline:none}
.glx-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.glx-card.glx-hidden{display:none}

.glx-inner{display:block;
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.22,.61,.24,1);
}
.glx-card.is-flipped .glx-inner{transform:rotateY(180deg)}

.glx-face{
  position:absolute;inset:0;border-radius:2px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;padding:22px;
  overflow:hidden;
}
.glx-front{
  background:#fff;border:1px solid var(--rule);
  transition:border-color .3s ease;
}
.glx-card:hover .glx-front{border-color:#b9c8d6}
.glx-front-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.glx-cat{
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);
}
.glx-flipmark{color:#c3d0dc;line-height:0;transition:color .3s ease,transform .45s cubic-bezier(.22,.61,.24,1)}
.glx-card:hover .glx-flipmark{color:var(--gold);transform:rotate(180deg)}
.glx-term{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:30px;line-height:1.1;color:var(--navy);
  margin:auto 0 6px;
}
.glx-say{font-size:12px;color:#8ba0b5;letter-spacing:.04em;margin:0 0 18px}
.glx-front-foot{
  border-top:1px solid var(--rule);padding-top:13px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);opacity:.55;
}
.glx-front-foot svg{flex:none}

.glx-back{
  transform:rotateY(180deg);
  background:var(--navy);
  border:1px solid var(--navy);
  border-top:2px solid var(--gold);
}
.glx-en{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:19px;line-height:1.2;color:var(--gold-soft);margin:0 0 10px;
}
.glx-def{
  font-size:13px;line-height:1.55;color:#dbe4ee;margin:0;
  flex:1;
}
.glx-statute{
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(216,188,120,.28);
  display:flex;gap:9px;align-items:flex-start;
  font-size:11px;line-height:1.45;letter-spacing:.06em;color:var(--gold-soft);
}
.glx-statute svg{flex:none;margin-top:1px;color:var(--gold-soft)}

/* ---------- Empty state ---------- */
.glx-empty{
  display:none;border:1px solid var(--rule);border-radius:2px;background:#fff;
  padding:44px 28px;text-align:center;margin-bottom:26px;
}
.glx-empty.is-on{display:block}
.glx-empty h3{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:24px;color:var(--navy);margin:0 0 8px;
}
.glx-empty p{font-size:13.5px;color:#42556b;margin:0}
.glx-empty button{
  margin-top:16px;border:1px solid var(--gold);background:transparent;border-radius:2px;
  color:var(--navy);font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;padding:11px 22px;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.glx-empty button:hover,.glx-empty button:focus-visible{background:var(--gold);color:#fff}

/* ---------- Footnote / CTA ---------- */
.glx-cta{
  border:1px solid var(--rule);border-left:2px solid var(--gold);border-radius:2px;
  background:#fff;padding:26px 28px;margin:14px 0 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.glx-cta h3{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:22px;color:var(--navy);margin:0 0 4px;
}
.glx-cta p{margin:0;font-size:13px;color:#42556b;line-height:1.6;max-width:52ch}
.glx-cta-links{display:flex;gap:22px;flex-wrap:wrap}
.glx-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  border-bottom:1px solid var(--gold);padding-bottom:5px;
  transition:color .25s ease;
}
.glx-link:hover,.glx-link:focus-visible{color:var(--gold)}
.glx-link svg{transition:transform .3s cubic-bezier(.22,.61,.24,1)}
.glx-link:hover svg{transform:translateX(4px)}
.glx-disclaim{font-size:11.5px;color:#8ba0b5;line-height:1.6;margin:22px 2px 0;max-width:80ch;padding-bottom:56px}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .glx-glossary *{animation:none !important;transition:none !important}
  .glx-card{opacity:1;transform:none}
  .glx-inner{transform:none !important}
  .glx-face{backface-visibility:visible;-webkit-backface-visibility:visible}
  .glx-back{transform:none;opacity:0;pointer-events:none}
  .glx-card.is-flipped .glx-back{opacity:1;pointer-events:auto}
  .glx-card.is-flipped .glx-front{opacity:0}
}
@media (max-width:560px){
  .glx-head{padding-top:52px}
  .glx-kbd{display:none}
  .glx-card{height:256px}
}

/* ==== f04 ==== */
/* ============================================================
   FEATURE 04 — LIVING OFFICE PANE (module)
   Scoped under .f04 — root element is <section class="f04">
   Relies on site fonts.css for "Instrument Serif" / "Archivo".
   ============================================================ */
.f04{
  --f04-navy:#0d2b4d;
  --f04-dark:#0a1e38;
  --f04-ink:#14263a;
  --f04-gold:#b08d3f;
  --f04-gold-soft:#d8bc78;
  --f04-rule:#d6dfe7;
  --f04-teal:#33a9c4;
  --f04-ease:cubic-bezier(.22,.61,.36,1);
  font-family:"Archivo",system-ui,sans-serif;
  color:var(--f04-ink);
  position:relative;
  background:var(--f04-dark);
}
.f04 *,.f04 *::before,.f04 *::after{box-sizing:border-box;}

/* ---------- pane ---------- */
.f04 .f04-pane{
  position:relative;
  width:100%;
  min-height:clamp(540px,86vh,820px);
  overflow:hidden;
  isolation:isolate;
}

/* stacked photographs — dusk and night */
.f04 .f04-layer{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  will-change:opacity;
}
.f04 .f04-layer--dusk{
  filter:grayscale(.35) sepia(.24) saturate(.9) brightness(.82) contrast(1.04);
  animation:f04-dusk 48s var(--f04-ease) infinite;
}
.f04 .f04-layer--night{
  filter:grayscale(.55) saturate(.75) brightness(.42) contrast(1.12) hue-rotate(-12deg);
  opacity:0;
  animation:f04-night 48s var(--f04-ease) infinite;
}
@keyframes f04-dusk{
  0%{opacity:1} 38%{opacity:1} 50%{opacity:0}
  88%{opacity:0} 100%{opacity:1}
}
@keyframes f04-night{
  0%{opacity:0} 38%{opacity:0} 50%{opacity:1}
  88%{opacity:1} 100%{opacity:0}
}
.f04 .f04-pane.f04-is-paused .f04-layer{animation-play-state:paused;}

/* tonal veils for legibility */
.f04 .f04-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,30,56,.62) 0%, rgba(10,30,56,.18) 34%, rgba(10,30,56,.28) 62%, rgba(10,30,56,.86) 100%),
    linear-gradient(90deg, rgba(10,30,56,.35) 0%, rgba(10,30,56,0) 40%);
}
/* hairline inner frame */
.f04 .f04-frame{
  position:absolute;inset:clamp(14px,2.4vw,28px);z-index:2;pointer-events:none;
  border:1px solid rgba(216,188,120,.28);
  border-radius:2px;
}

/* ---------- content ---------- */
.f04 .f04-content{
  position:relative;z-index:3;
  min-height:inherit;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,6vw,4.5rem);
  min-height:clamp(540px,86vh,820px);
}

/* top row — kicker + coordinates */
.f04 .f04-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
}
.f04 .f04-kicker{
  display:flex;align-items:center;gap:.8rem;
  color:var(--f04-gold-soft);
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
}
.f04 .f04-kicker::before{
  content:"";display:block;width:34px;height:1px;background:var(--f04-gold);
}
.f04 .f04-coords{
  color:rgba(214,223,231,.55);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  text-align:right;line-height:1.7;
}

/* middle — the clock */
.f04 .f04-clockblock{margin-top:auto;margin-bottom:auto;padding:2rem 0;}
.f04 .f04-city{
  font-family:"Instrument Serif",serif;font-weight:400;
  color:#f2ede2;
  font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:.02em;
  margin:0 0 .4rem;
}
.f04 .f04-city em{font-style:italic;color:var(--f04-gold-soft);}
.f04 .f04-clock{
  display:flex;align-items:baseline;gap:.4rem;
  color:#f6f2e8;
  font-family:"Instrument Serif",serif;font-weight:400;
  font-variant-numeric:tabular-nums;
  line-height:.95;
}
.f04 .f04-hm{
  font-size:clamp(4.4rem,12vw,9.5rem);
  letter-spacing:.01em;
}
.f04 .f04-colon{
  font-size:clamp(4.4rem,12vw,9.5rem);
  color:var(--f04-gold-soft);
  transform:translateY(-.06em);
  animation:f04-breathe 2s var(--f04-ease) infinite;
}
@keyframes f04-breathe{0%,100%{opacity:1}50%{opacity:.35}}
.f04 .f04-sec{
  font-size:clamp(1.3rem,3vw,2.2rem);
  color:rgba(216,188,120,.85);
  letter-spacing:.06em;
  margin-left:.45rem;
}
.f04 .f04-meta{
  margin-top:1rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  color:rgba(214,223,231,.72);
  font-family:"Archivo",sans-serif;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
}
.f04 .f04-meta .f04-sep{width:1px;height:12px;background:rgba(216,188,120,.4);}

/* bottom row — attended line + actions */
.f04 .f04-bottom{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem;
  border-top:1px solid rgba(214,223,231,.18);
  padding-top:1.4rem;
}
.f04 .f04-attended{
  display:flex;align-items:center;gap:.7rem;
  color:#e9e4d8;
  font-size:.86rem;letter-spacing:.04em;
}
.f04 .f04-dot{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:var(--f04-gold-soft);flex:none;
}
.f04 .f04-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(216,188,120,.55);
  animation:f04-pulse 3.2s var(--f04-ease) infinite;
}
@keyframes f04-pulse{
  0%{transform:scale(.55);opacity:.9}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
.f04 .f04-attended-sub{
  display:block;margin-top:.3rem;
  color:rgba(214,223,231,.55);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
}
.f04 .f04-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.f04 .f04-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"Archivo",sans-serif;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;
  color:#0a1e38;background:var(--f04-gold-soft);
  border:1px solid var(--f04-gold-soft);
  padding:.85rem 1.4rem;border-radius:2px;
  transition:background .35s var(--f04-ease),color .35s var(--f04-ease);
}
.f04 .f04-btn:hover,.f04 .f04-btn:focus-visible{background:transparent;color:var(--f04-gold-soft);}
.f04 .f04-btn svg{width:14px;height:14px;flex:none;}
.f04 .f04-btn--ghost{
  background:transparent;color:rgba(242,237,226,.85);
  border:1px solid rgba(214,223,231,.35);
}
.f04 .f04-btn--ghost:hover,.f04 .f04-btn--ghost:focus-visible{
  border-color:var(--f04-gold-soft);color:var(--f04-gold-soft);background:transparent;
}
.f04 a:focus-visible,.f04 button:focus-visible{
  outline:2px solid var(--f04-teal);outline-offset:3px;border-radius:2px;
}

/* motion toggle — discreet, bottom-right of pane */
.f04 .f04-motion{
  position:absolute;z-index:4;
  right:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);
  display:none;
  align-items:center;gap:.5rem;
  background:rgba(10,30,56,.55);
  border:1px solid rgba(214,223,231,.3);
  color:rgba(242,237,226,.8);
  font-family:"Archivo",sans-serif;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  padding:.55rem .9rem;border-radius:2px;cursor:pointer;
  transition:border-color .3s var(--f04-ease),color .3s var(--f04-ease);
}
.f04 .f04-motion:hover{border-color:var(--f04-gold-soft);color:var(--f04-gold-soft);}
.f04 .f04-motion svg{width:11px;height:11px;}
@media (min-width:760px){ .f04 .f04-motion{display:inline-flex;} }

/* caption strip under the pane */
.f04 .f04-caption{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  border-top:1px solid var(--f04-rule);
  background:#fbfaf7;
  font-size:.7rem;letter-spacing:.14em;color:#6d7f92;
}
.f04 .f04-caption a{color:var(--f04-navy);text-decoration:none;border-bottom:1px solid var(--f04-gold);padding-bottom:2px;}
.f04 .f04-caption a:hover{color:var(--f04-gold);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .f04 .f04-layer--dusk,.f04 .f04-layer--night,
  .f04 .f04-colon,.f04 .f04-dot::after{animation:none;}
  .f04 .f04-layer--night{opacity:0;}
  .f04 .f04-motion{display:none !important;}
}

@media (max-width:560px){
  .f04 .f04-coords{display:none;}
  .f04 .f04-bottom{flex-direction:column;align-items:flex-start;}
}

/* ==== f05 ==== */
/* Interactive Document Checklist module (namespace: dcl)
   Relies on site fonts.css ("Archivo", "Instrument Serif"); design tokens
   (--navy, --gold, ...) are declared locally on .dcl to match site styles.css. */

.dcl{
  --navy:#0d2b4d;
  --navy-dark:#0a1e38;
  --ink:#14263a;
  --gold:#b08d3f;
  --gold-soft:#d8bc78;
  --rule:#d6dfe7;
  --teal:#33a9c4;
  --paper:#ffffff;
  --ease:cubic-bezier(.22,.61,.21,1);
  font-family:"Archivo",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
.dcl *{box-sizing:border-box;margin:0;padding:0}
.dcl a{color:inherit;text-decoration:none}
.dcl :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- intro ---------- */
.dcl-wrap{max-width:920px;margin:0 auto;padding:0 clamp(20px,5vw,40px) 96px}
.dcl-intro{padding:clamp(48px,8vw,84px) 0 40px;text-align:center}
.dcl-eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:14px;margin-bottom:20px;
}
.dcl-eyebrow::before,.dcl-eyebrow::after{content:"";width:28px;height:1px;background:var(--gold-soft)}
.dcl-intro .dcl-title{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(34px,5.4vw,52px);line-height:1.12;color:var(--navy);
}
.dcl-intro .dcl-title em{font-style:italic;color:var(--gold)}
.dcl-intro p{
  max-width:560px;margin:18px auto 0;font-size:15.5px;line-height:1.7;color:#44576b;
}

/* ---------- segmented control ---------- */
.dcl-seg{
  position:relative;display:flex;
  border:1px solid var(--rule);border-radius:2px;
  margin:36px auto 0;max-width:640px;background:#fbfcfd;
}
.dcl-seg-ind{
  position:absolute;top:-1px;bottom:-1px;left:0;width:0;
  background:var(--navy);border-radius:2px;
  transition:left .42s var(--ease),width .42s var(--ease);
  pointer-events:none;
}
.dcl-seg button{
  position:relative;z-index:1;flex:1;
  font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:15px 8px;background:none;border:0;cursor:pointer;
  color:#54677b;transition:color .32s var(--ease);
}
.dcl-seg button[aria-checked="true"]{color:#fff}
.dcl-seg button:not([aria-checked="true"]):hover{color:var(--navy)}
@media (max-width:560px){
  .dcl-seg{flex-wrap:wrap}
  .dcl-seg button{flex:1 1 50%;padding:13px 6px}
}

/* ---------- list head ---------- */
.dcl-board{margin-top:52px;border:1px solid var(--rule);border-radius:2px;background:#fff}
.dcl-board-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:26px 28px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.dcl-matter{min-width:0}
.dcl-matter-name{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(22px,3.4vw,28px);color:var(--navy);line-height:1.2;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.dcl-matter.dcl-is-fading .dcl-matter-name,.dcl-matter.dcl-is-fading .dcl-matter-note{opacity:0;transform:translateY(5px)}
.dcl-matter-note{
  margin-top:6px;font-size:13px;color:#5c6f83;letter-spacing:.02em;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.dcl-head-tools{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dcl-progress-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5c6f83}
.dcl-progress-label b{color:var(--navy);font-weight:600}
.dcl-progress-track{width:180px;height:2px;background:var(--rule)}
.dcl-progress-fill{height:100%;width:0;background:var(--gold);transition:width .5s var(--ease)}
.dcl-copy{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);background:none;border:1px solid var(--navy);
  border-radius:2px;padding:10px 16px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.dcl-copy svg{width:14px;height:14px;display:block}
.dcl-copy:hover{background:var(--navy);color:#fff}
.dcl-copy.dcl-is-copied{border-color:var(--gold);color:var(--gold)}
.dcl-copy.dcl-is-copied:hover{background:none}
@media (max-width:640px){
  .dcl-head-tools{align-items:flex-start;width:100%}
}

/* ---------- checklist items ---------- */
.dcl-list{list-style:none;padding:0}
.dcl-doc{border-bottom:1px solid var(--rule);background:#fff;will-change:transform}
.dcl-doc:last-child{border-bottom:0}
.dcl-row{display:flex;align-items:stretch}
.dcl-check{
  flex:0 0 auto;width:58px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-right:1px solid var(--rule);cursor:pointer;
}
.dcl-check-box{
  width:20px;height:20px;border:1px solid #9fb0c1;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .28s var(--ease),background .28s var(--ease);
}
.dcl-check-box svg{width:11px;height:11px;opacity:0;transform:scale(.5);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.dcl-check:hover .dcl-check-box{border-color:var(--gold)}
.dcl-check[aria-checked="true"] .dcl-check-box{background:var(--gold);border-color:var(--gold)}
.dcl-check[aria-checked="true"] .dcl-check-box svg{opacity:1;transform:scale(1)}
.dcl-toggle{
  flex:1;display:flex;align-items:center;gap:16px;min-width:0;
  text-align:left;background:none;border:0;cursor:pointer;
  padding:19px 24px 19px 20px;font-family:"Archivo",sans-serif;
}
.dcl-num{
  flex:0 0 auto;font-size:11px;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.dcl-doc-title{
  flex:1;min-width:0;font-size:15.5px;font-weight:500;color:var(--ink);
  line-height:1.35;transition:color .3s var(--ease);
}
.dcl-doc[data-done="1"] .dcl-doc-title{color:#7a8a9b}
.dcl-chip{
  flex:0 0 auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#5c6f83;border:1px solid var(--rule);border-radius:2px;padding:4px 8px;
  white-space:nowrap;
}
@media (max-width:560px){.dcl-chip{display:none}}
.dcl-chev{flex:0 0 auto;width:14px;height:14px;transition:transform .34s var(--ease);color:#8ba0b4}
.dcl-toggle:hover .dcl-doc-title{color:var(--navy)}
.dcl-toggle:hover .dcl-chev{color:var(--gold)}
.dcl-toggle[aria-expanded="true"] .dcl-chev{transform:rotate(180deg);color:var(--gold)}
.dcl-panel{height:0;overflow:hidden;transition:height .36s var(--ease)}
.dcl-panel-inner{
  border-top:1px solid var(--rule);
  padding:20px 28px 24px 78px;
  background:#fbfcfd;
}
.dcl-panel-inner p{font-size:14px;line-height:1.72;color:#44576b;max-width:640px}
.dcl-where{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);
  display:flex;gap:10px;align-items:baseline;
}
.dcl-where b{
  flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
@media (max-width:560px){
  .dcl-panel-inner{padding-left:24px}
  .dcl-where{flex-direction:column;gap:4px}
}

/* ---------- footer cta ---------- */
.dcl-cta{
  margin-top:44px;border-top:1px solid var(--rule);padding-top:32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.dcl-cta-text h3{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:22px;color:var(--navy);
}
.dcl-cta-text p{margin-top:6px;font-size:13.5px;color:#5c6f83;line-height:1.6}
.dcl-cta-links{display:flex;gap:12px;flex-wrap:wrap}
.dcl-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border-radius:2px;padding:13px 20px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.dcl-btn svg{width:14px;height:14px}
.dcl a.dcl-btn-solid{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.dcl a.dcl-btn-solid:hover{background:var(--navy-dark);color:#fff}
.dcl a.dcl-btn-line{border:1px solid var(--rule);color:var(--navy)}
.dcl a.dcl-btn-line:hover{border-color:var(--gold);color:var(--gold)}
.dcl-foot{
  margin-top:40px;font-size:12px;color:#7a8a9b;line-height:1.7;
  border-top:1px solid var(--rule);padding-top:18px;
}
.dcl-foot a:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .dcl *,.dcl *::before,.dcl *::after{transition-duration:0s !important;animation:none !important}
}

/* ==== f07 ==== */
/* ================= THE READING ROOM — feature module (scoped to .rr-page) ================= */
.rr-page{--rr-ease:cubic-bezier(.22,.75,.2,1);background:var(--bg);}

/* --- section head --- */
.rr-page .rr-head{padding:clamp(3rem,6vw,5rem) 0 clamp(1.8rem,3vw,2.6rem);}
.rr-page .rr-kicker{font-family:var(--bd);font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;}
.rr-page .rr-kicker::after{content:"";width:56px;height:1px;background:var(--gold-soft);}
.rr-page .rr-head h1{font-family:var(--hd);font-weight:400;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02;color:var(--ink);max-width:14ch;}
.rr-page .rr-head h1 em{font-style:italic;color:var(--navy);}
.rr-page .rr-lede{margin-top:1.15rem;max-width:52ch;color:var(--body);font-size:1.02rem;}
.rr-page .rr-cue{margin-top:1.4rem;font-family:var(--bd);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem;}
.rr-page .rr-cue svg{width:14px;height:14px;stroke:var(--gold);flex:none;}

/* --- layout --- */
.rr-page .rr{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-bottom:clamp(3.5rem,7vw,6rem);}

/* --- ruled list --- */
.rr-page .rr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.rr-page .rr-item{border-bottom:1px solid var(--rule);}
.rr-page .rr-link{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:1.45rem .35rem 1.5rem;position:relative;outline-offset:-2px;}
.rr-page .rr-link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--rr-ease);}
.rr-page .rr-num{font-family:var(--bd);font-weight:600;font-size:.68rem;letter-spacing:.2em;color:var(--muted);transition:color .3s var(--rr-ease);align-self:start;padding-top:.55em;}
.rr-page .rr-title{font-family:var(--hd);font-weight:400;font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.08;color:var(--ink);transition:color .35s var(--rr-ease),transform .45s var(--rr-ease);}
.rr-page .rr-arrow{align-self:center;width:26px;height:26px;flex:none;opacity:0;transform:translateX(-8px);transition:opacity .35s var(--rr-ease),transform .45s var(--rr-ease);}
.rr-page .rr-arrow svg{width:100%;height:100%;stroke:var(--gold);}
.rr-page .rr-meta{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:.45rem .55rem;margin-top:.7rem;}
.rr-page .rr-tag{font-family:var(--bd);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:var(--r);padding:.32rem .55rem;line-height:1;transition:color .3s,border-color .3s;}
.rr-page .rr-tag--statute{color:var(--gold);border-color:var(--gold-soft);}
.rr-page .rr-item.rr-is-active .rr-link::before,
.rr-page .rr-link:hover::before,
.rr-page .rr-link:focus-visible::before{transform:scaleY(1);}
.rr-page .rr-item.rr-is-active .rr-title,
.rr-page .rr-link:hover .rr-title,
.rr-page .rr-link:focus-visible .rr-title{color:var(--navy);transform:translateX(10px);}
.rr-page .rr-item.rr-is-active .rr-num,
.rr-page .rr-link:hover .rr-num,
.rr-page .rr-link:focus-visible .rr-num{color:var(--gold);}
.rr-page .rr-item.rr-is-active .rr-arrow,
.rr-page .rr-link:hover .rr-arrow,
.rr-page .rr-link:focus-visible .rr-arrow{opacity:1;transform:translateX(0);}

/* --- preview pane --- */
.rr-page .rr-pane{position:sticky;top:96px;border:1px solid var(--rule);border-radius:var(--r);background:#fff;overflow:hidden;}
.rr-page .rr-pane-top{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.1rem;border-bottom:1px solid var(--rule);}
.rr-page .rr-pane-label{font-family:var(--bd);font-weight:600;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.rr-page .rr-count{font-family:var(--hd);font-style:italic;font-size:.95rem;color:var(--gold);}
.rr-page .rr-visual{position:relative;aspect-ratio:4/3;background:var(--navy);overflow:hidden;}
.rr-page .rr-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);transform:scale(1.04);transition:opacity .6s var(--rr-ease),filter .8s var(--rr-ease),transform 1.1s var(--rr-ease);}
.rr-page .rr-visual img.rr-is-front{opacity:1;filter:grayscale(0);transform:scale(1);}
.rr-page .rr-copy{padding:1.2rem 1.2rem 1.35rem;transition:opacity .24s var(--rr-ease),transform .24s var(--rr-ease);}
.rr-page .rr-copy.rr-is-swapping{opacity:0;transform:translateY(9px);}
.rr-page .rr-copy h2{font-family:var(--hd);font-weight:400;font-size:1.32rem;line-height:1.14;color:var(--ink);margin-bottom:.55rem;}
.rr-page .rr-excerpt{font-size:.9rem;line-height:1.62;color:var(--body);}
.rr-page .rr-copy .rr-meta{display:flex;flex-wrap:wrap;gap:.45rem .55rem;margin-top:.95rem;}
.rr-page .rr-pane-foot{border-top:1px solid var(--rule);padding:.85rem 1.2rem;}
.rr-page .rr-open{font-family:var(--bd);font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:.55rem;transition:color .3s;}
.rr-page .rr-open svg{width:15px;height:15px;stroke:var(--gold);transition:transform .35s var(--rr-ease);}
.rr-page .rr-open:hover{color:var(--gold);}
.rr-page .rr-open:hover svg{transform:translateX(4px);}

/* --- closing strip --- */
.rr-page .rr-foot{border-top:1px solid var(--rule);padding:1.6rem 0 3rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;}
.rr-page .rr-foot p{font-size:.86rem;color:var(--muted);max-width:52ch;}
.rr-page .rr-foot a.rr-all{font-family:var(--bd);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem 1.4rem;transition:border-color .3s,color .3s;}
.rr-page .rr-foot a.rr-all:hover{border-color:var(--gold);color:var(--gold);}

/* --- responsive --- */
@media(max-width:960px){
  .rr-page .rr{grid-template-columns:1fr;}
  .rr-page .rr-pane{display:none;}
  .rr-page .rr-link{grid-template-columns:2.4rem minmax(0,1fr) auto;}
}

/* --- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  .rr-page *{transition:none !important;animation:none !important;}
  .rr-page .rr-item.rr-is-active .rr-title,
  .rr-page .rr-link:hover .rr-title{transform:none;}
}

/* ==== f08 ==== */
/* ============ Feature 08 — How engagement works (module: section.ft-fee) ============ */
/* Relies on site styles.css for: .container, .btn, .btn-primary and the vars
   --navy --gold --ink --body --muted --rule --hd --ease --r */

.ft-fee{--fee-rail:76px;padding:clamp(1.4rem,3vw,2.6rem) 0 clamp(3.6rem,6vw,5.6rem)}

.ft-fee .fee-list{position:relative;max-width:840px}
.ft-fee .fee-svg{position:absolute;top:0;left:0;width:var(--fee-rail);height:100%;pointer-events:none;overflow:visible}
.ft-fee .fee-svg .ft-base{stroke:var(--rule);stroke-width:1;fill:none}
.ft-fee .fee-svg .ft-ink{stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round}

.ft-fee .fee-step{position:relative;padding-left:var(--fee-rail);border-bottom:1px solid var(--rule)}
.ft-fee .fee-step:first-child{border-top:1px solid var(--rule)}
.ft-fee .fee-dot{position:absolute;left:calc(var(--fee-rail)/2 - 8px);top:2.05rem;width:16px;height:16px;border-radius:50%;
  background:#fff;border:1px solid rgba(13,43,77,.35);transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.ft-fee .fee-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold);
  transform:scale(0);transition:transform .45s var(--ease)}
.ft-fee .fee-step.reached .fee-dot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(176,141,63,.12)}
.ft-fee .fee-step.reached .fee-dot::after{transform:scale(1)}

.ft-fee .fee-head{display:flex;align-items:baseline;gap:1.1rem;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:1.55rem 0 1.45rem;font-family:inherit}
.ft-fee .fee-num{font-family:var(--hd);font-size:.95rem;color:var(--gold);letter-spacing:.08em;flex:none;min-width:2.2ch}
.ft-fee .fee-title{font-family:var(--hd);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--ink);
  line-height:1.12;transition:color .3s var(--ease)}
.ft-fee .fee-when{margin-left:auto;flex:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  align-self:center;padding-right:1.1rem}
.ft-fee .fee-plus{flex:none;align-self:center;width:30px;height:30px;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center;transition:border-color .3s var(--ease),background .3s var(--ease)}
.ft-fee .fee-plus svg{transition:transform .35s var(--ease)}
.ft-fee .fee-plus line{stroke:var(--navy);stroke-width:1.5;transition:stroke .3s}
.ft-fee .fee-head:hover .fee-title{color:var(--gold)}
.ft-fee .fee-head:hover .fee-plus{border-color:var(--gold)}
.ft-fee .fee-head[aria-expanded="true"] .fee-plus{background:var(--navy);border-color:var(--navy)}
.ft-fee .fee-head[aria-expanded="true"] .fee-plus svg{transform:rotate(45deg)}
.ft-fee .fee-head[aria-expanded="true"] .fee-plus line{stroke:#fff}

.ft-fee .fee-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.ft-fee .fee-panel > div{overflow:hidden}
.ft-fee .fee-panel p{max-width:58ch;color:var(--body);padding:0 0 1.7rem;margin-left:calc(2.2ch + 1.1rem)}
.ft-fee .fee-step.open .fee-panel{grid-template-rows:1fr}

.ft-fee .fee-close{margin-top:clamp(2.6rem,5vw,4rem);max-width:840px;border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.6rem,3.4vw,2.4rem);display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:space-between}
.ft-fee .fee-close h2{font-weight:400;font-size:clamp(1.35rem,2.6vw,1.7rem);max-width:24ch}
.ft-fee .fee-close p{font-size:.9rem;color:var(--muted);margin-top:.35rem;max-width:46ch}
.ft-fee .fee-close .fee-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.ft-fee .fee-tel{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--hd);font-size:.95rem;color:var(--navy);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;align-self:center}
.ft-fee .fee-tel:hover{color:var(--gold);border-color:var(--gold)}

@media (max-width:640px){
  .ft-fee{--fee-rail:52px}
  .ft-fee .fee-when{display:none}
  .ft-fee .fee-dot{top:1.85rem}
  .ft-fee .fee-head{padding:1.35rem 0 1.25rem;gap:.8rem}
  .ft-fee .fee-panel p{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .ft-fee *{transition:none !important;animation:none !important}
}


/* ==== f10 ==== */
/* ============================================================
   Feature 10 — Night Desk band (extracted module)
   Root: <section class="ndx nd-band">
   Uses site fonts (Archivo, Instrument Serif) from css/fonts.css.
   ============================================================ */
.ndx{
  --nd-navy:#0d2b4d;
  --nd-deep:#0a1e38;
  --nd-deeper:#081831;
  --nd-ink:#14263a;
  --nd-gold:#b08d3f;
  --nd-gold-soft:#d8bc78;
  --nd-rule:#d6dfe7;
  --nd-rule-dark:rgba(216,188,120,.16);
  --nd-line-dark:rgba(255,255,255,.10);
  --nd-cream:#f6f2ea;
  --nd-mist:rgba(255,255,255,.55);
  --nd-ease:cubic-bezier(.22,1,.36,1);
  font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ndx,.ndx *{box-sizing:border-box}
.ndx .nd-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ============================================================
   THE BAND
   ============================================================ */
.ndx.nd-band{
  background:linear-gradient(180deg,var(--nd-deep) 0%,var(--nd-deeper) 100%);
  color:var(--nd-cream);
  border-top:1px solid var(--nd-gold);
  border-bottom:1px solid var(--nd-gold);
  position:relative;
  overflow:hidden;
}
/* faint emblem watermark, right side */
.ndx .nd-emblem{
  position:absolute;right:-60px;top:50%;
  transform:translateY(-50%);
  width:380px;height:380px;opacity:.05;
  pointer-events:none;user-select:none;
}
.ndx .nd-band-in{
  position:relative;
  padding:72px 0 0;
}

/* -- top row: status + clock -- */
.ndx .nd-status-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  padding-bottom:56px;
}
.ndx .nd-status{max-width:560px}
.ndx .nd-eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--nd-gold-soft);margin:0 0 22px;font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.ndx .nd-eyebrow::after{
  content:"";height:1px;width:56px;background:var(--nd-rule-dark);
}
.ndx .nd-status-line{
  display:flex;align-items:center;gap:18px;
}
.ndx .nd-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--nd-gold);
  position:relative;flex:none;
  box-shadow:0 0 0 0 rgba(176,141,63,.45);
  animation:nd-breathe 5s var(--nd-ease) infinite;
}
.ndx .nd-dot::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(216,188,120,.35);
  animation:nd-halo 5s var(--nd-ease) infinite;
}
@keyframes nd-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(176,141,63,.40)}
  50%{box-shadow:0 0 0 9px rgba(176,141,63,0)}
}
@keyframes nd-halo{
  0%,100%{opacity:.9;transform:scale(1)}
  50%{opacity:.25;transform:scale(1.28)}
}
.ndx .nd-status-line h2{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(28px,3.8vw,40px);margin:0;color:var(--nd-cream);
  letter-spacing:.01em;
}
.ndx .nd-status-sub{
  margin:16px 0 0 30px;font-size:14px;line-height:1.75;
  color:var(--nd-mist);max-width:46ch;
}

/* -- clock -- */
.ndx .nd-clock{
  text-align:right;min-width:230px;
}
@media(max-width:700px){.ndx .nd-clock{text-align:left;margin-left:30px}}
.ndx .nd-clock-time{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(44px,6vw,64px);line-height:1;
  color:var(--nd-cream);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.ndx .nd-clock-time .nd-sec{
  font-size:.42em;color:var(--nd-gold-soft);
  margin-left:6px;letter-spacing:.06em;
}
.ndx .nd-clock-meta{
  margin-top:10px;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--nd-mist);
}
.ndx .nd-clock-meta b{color:var(--nd-gold-soft);font-weight:500}

/* ============================================================
   THREE QUIET ROWS
   ============================================================ */
.ndx .nd-rows{
  border-top:1px solid var(--nd-line-dark);
}
.ndx .nd-row{
  display:grid;
  grid-template-columns:56px 200px 1fr auto;
  align-items:center;gap:20px;
  padding:26px 4px;
  border-bottom:1px solid var(--nd-line-dark);
  text-decoration:none;color:inherit;
  transition:background .5s var(--nd-ease);
  position:relative;
}
.ndx .nd-rows>.nd-row:last-of-type,.ndx .nd-rows>.nd-row-disc:last-child .nd-row{border-bottom:0}
@media(max-width:820px){
  .ndx .nd-row{grid-template-columns:44px 1fr auto;grid-auto-rows:auto}
  .ndx .nd-row .nd-row-detail{grid-column:2/-1}
}
.ndx a.nd-row:hover,.ndx button.nd-row:hover{background:rgba(255,255,255,.03)}
.ndx .nd-row:focus-visible{
  outline:1px solid var(--nd-gold-soft);outline-offset:-1px;
  background:rgba(255,255,255,.03);
}
.ndx .nd-row-icon{
  width:38px;height:38px;border:1px solid var(--nd-rule-dark);
  border-radius:2px;display:grid;place-items:center;flex:none;
  transition:border-color .5s var(--nd-ease);
}
.ndx a.nd-row:hover .nd-row-icon,.ndx button.nd-row:hover .nd-row-icon{border-color:var(--nd-gold)}
.ndx .nd-row-icon svg{width:17px;height:17px;stroke:var(--nd-gold-soft);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ndx .nd-row-label{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--nd-mist);font-weight:500;
}
.ndx .nd-row-detail{
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(18px,2.2vw,22px);color:var(--nd-cream);
  letter-spacing:.015em;
}
.ndx .nd-row-cue{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nd-gold-soft);display:flex;align-items:center;gap:10px;
  white-space:nowrap;
}
.ndx .nd-row-cue svg{width:14px;height:14px;stroke:var(--nd-gold-soft);fill:none;stroke-width:1.4;stroke-linecap:round;transition:transform .5s var(--nd-ease)}
.ndx a.nd-row:hover .nd-row-cue svg{transform:translateX(4px)}
@media(max-width:560px){.ndx .nd-row-cue span{display:none}}

/* -- disclosure row: what to send us -- */
.ndx button.nd-row{
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--nd-line-dark);
  font:inherit;cursor:pointer;
}
.ndx .nd-row-disc .nd-chev svg{transition:transform .55s var(--nd-ease)}
.ndx .nd-row-disc.nd-open .nd-chev svg{transform:rotate(180deg)}
.ndx .nd-disc-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .65s var(--nd-ease);
}
.ndx .nd-disc-inner{
  padding:8px 4px 34px 76px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 40px;
}
@media(max-width:820px){.ndx .nd-disc-inner{padding-left:4px}}
.ndx .nd-disc-item{
  padding:16px 0;border-top:1px solid var(--nd-line-dark);
}
.ndx .nd-disc-item i{
  font-style:normal;display:block;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--nd-gold-soft);margin-bottom:8px;
}
.ndx .nd-disc-item p{
  margin:0;font-size:13.5px;line-height:1.65;color:var(--nd-mist);
}

/* -- band footnote -- */
.ndx .nd-band-note{
  padding:26px 0 30px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.ndx .nd-band-note a{color:rgba(255,255,255,.55);text-decoration:none;border-bottom:1px solid var(--nd-rule-dark);padding-bottom:2px;transition:color .4s var(--nd-ease)}
.ndx .nd-band-note a:hover,.ndx .nd-band-note a:focus-visible{color:var(--nd-gold-soft);outline:none}

/* ---------- entrance motion ---------- */
.ndx [data-nd-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--nd-ease),transform .9s var(--nd-ease);
}
.ndx [data-nd-reveal].nd-in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .ndx .nd-dot,.ndx .nd-dot::after{animation:none}
  .ndx .nd-dot::after{opacity:.6}
  .ndx [data-nd-reveal]{opacity:1;transform:none;transition:none}
  .ndx .nd-disc-panel{transition:none}
  .ndx .nd-row,.ndx .nd-row-icon,.ndx .nd-row-cue svg,.ndx .nd-row-disc .nd-chev svg{transition:none}
}
/* ---- para sayfalarında ilgili rehberler (iç link) ---- */
.ml-guides{background:var(--bg-soft,#eef2f6)}
.ml-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.ml-card{display:flex;flex-direction:column;gap:.4rem;padding:1.3rem 1.25rem;background:#fff;
  border:1px solid var(--rule,#d6dfe7);border-radius:var(--r,2px);text-decoration:none;
  transition:border-color .2s,transform .2s}
.ml-card:hover{border-color:var(--gold,#b08d3f);transform:translateY(-2px)}
.ml-tag{font-family:var(--bd);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold,#b08d3f)}
.ml-card h3{font-family:var(--hd);font-weight:400;font-size:1.12rem;line-height:1.25;
  color:var(--navy,#0d2b4d);margin:0}
.ml-card p{font-size:.86rem;line-height:1.55;color:var(--muted,#6b7c8f);margin:0}
.ml-foot{margin:1.6rem 0 0}
.ml-more{font-family:var(--bd);font-weight:600;font-size:.92rem;color:var(--navy,#0d2b4d);text-decoration:none;
  border-bottom:1px solid var(--gold,#b08d3f);padding-bottom:2px}
.ml-more:hover{color:var(--gold,#b08d3f)}
@media(max-width:1000px){.ml-grid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.ml-grid{grid-template-columns:1fr}}
.bl-h2{font-family:var(--hd);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.2;color:var(--navy,#0d2b4d);margin:0 0 .5rem}

/* iletişim formu — gönderim sonrası seçenek kutusu */
.cf-sent{margin-top:1.2rem;padding:1.1rem 1.2rem;border:1px solid var(--gold,#b08d3f);
  border-radius:var(--r,2px);background:rgba(176,141,63,.06)}
.cf-sent p{margin:0 0 .8rem;font-size:.95rem;line-height:1.6}
.cf-sent .cf-actions{margin:0;display:flex;gap:.6rem;flex-wrap:wrap}

/* iletişim sayfası — mesai/aciliyet notu */
.contact-hours{margin:.2rem 0 1.6rem;padding:.9rem 1.1rem;border-left:2px solid var(--gold,#b08d3f);
  background:rgba(176,141,63,.05);font-size:.94rem;line-height:1.65;color:var(--body,#2c3e50);max-width:70ch}

/* ============================================================
   DÖNÜŞÜM KATMANI
   İlke: korku üretmek yok. Sürtünmeyi kaldır, itirazı önden cevapla,
   ilk adımı küçült. Sahte sayaç/kıtlık yok.
   ============================================================ */

/* butonun altındaki itiraz giderici satır */
.cta-micro{margin:.9rem 0 0;font-family:var(--bd);font-size:.82rem;letter-spacing:.02em;
  color:rgba(231,237,244,.72);line-height:1.6}
.cta-band .cta-trust{margin-top:1.1rem}

/* mobil yapışkan aksiyon çubuğu — masaüstünde gizli */
.sticky-act{position:fixed;left:0;right:0;width:100%;max-width:100vw;box-sizing:border-box;overflow:hidden;z-index:60;display:none;gap:.5rem;
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px));
  background:rgba(10,30,56,.97);backdrop-filter:saturate(1.2) blur(8px);
  border-top:1px solid rgba(216,188,120,.3);
  bottom:-120px;opacity:0;visibility:hidden;
  transition:bottom .3s var(--ease,cubic-bezier(.22,.61,.24,1)),opacity .3s,visibility .3s}
.sticky-act.sa-in{bottom:0;opacity:1;visibility:visible}
.sticky-act a{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:2px;text-decoration:none;font-family:var(--bd);font-weight:700;
  min-height:48px;transition:filter .2s}
.sticky-act a:active{filter:brightness(.94)}
.sa-wa{flex:1 1 0;min-width:0;background:linear-gradient(180deg,var(--gold-soft,#d8bc78),var(--gold,#b08d3f));
  color:#1d1503;font-size:.9rem;padding:0 .9rem;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.55)}
.sa-wa svg{flex:none}
.sa-wa span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-call{flex:0 0 52px;background:transparent;color:#e7edf4;border:1px solid rgba(231,237,244,.32)}
@media(max-width:860px){
  .sticky-act{display:flex}
  /* çubuk açıkken WhatsApp balonu yukarı kaçsın, üst üste binmesin */
  body.sa-open .wa-float{bottom:5.2rem}
}
@media(prefers-reduced-motion:reduce){.sticky-act{transition:none}}

/* yazı içi bağlamsal istek bloğu */
.inline-ask{margin:2.6rem 0;padding:1.5rem 1.6rem;border:1px solid var(--rule,#d6dfe7);
  border-left:3px solid var(--gold,#b08d3f);border-radius:var(--r,2px);background:var(--bg-soft,#eef2f6)}
.inline-ask p{margin:0 0 1rem;font-size:1rem;line-height:1.65;color:var(--navy,#0d2b4d);max-width:60ch}
.inline-ask .ia-micro{margin:.75rem 0 0;font-size:.8rem;color:var(--muted,#6b7c8f)}
.inline-ask .btn{margin:0}

/* yazı sonundaki iletişim satırı — çıplak URL yerine düzgün bağlantılar */
.post-body .post-contact{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.6rem 0;
  padding:1rem 1.1rem;background:var(--bg-soft,#eef2f6);border-radius:var(--r,2px);max-width:none}
.post-body .post-contact a{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--bd);font-size:.9rem;font-weight:600;border-bottom:0;color:var(--navy,#0d2b4d)}
.post-body .post-contact a:hover{color:var(--gold,#b08d3f)}
/* uzun dizeler mobili taşırmasın */
.post-body{overflow-wrap:anywhere}

/* ---- sözlük ipucu ---- */
.gl-term{border-bottom:1px dotted var(--gold,#b08d3f);cursor:help;color:inherit;
  text-underline-offset:3px;transition:background .18s,color .18s;border-radius:1px}
.gl-term:hover,.gl-term:focus-visible{background:rgba(176,141,63,.12);color:var(--navy,#0d2b4d);outline:none}
.gl-term:focus-visible{box-shadow:0 0 0 2px rgba(176,141,63,.45)}
.gl-tip{position:absolute;z-index:80;max-width:min(340px,calc(100vw - 24px));
  background:var(--navy-900,#0a1e38);color:#e7edf4;border:1px solid rgba(216,188,120,.35);
  border-radius:var(--r,2px);padding:.85rem .95rem;box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
  opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;pointer-events:auto}
.gl-tip.gl-in{opacity:1;transform:translateY(0)}
.gl-tip::after{content:"";position:absolute;left:50%;margin-left:-6px;border:6px solid transparent}
.gl-tip:not(.gl-below)::after{top:100%;border-top-color:var(--navy-900,#0a1e38)}
.gl-tip.gl-below::after{bottom:100%;border-bottom-color:var(--navy-900,#0a1e38)}
.gl-tip-en{display:block;font-family:var(--bd);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft,#d8bc78);margin-bottom:.4rem}
.gl-tip-def{margin:0;font-family:var(--bd);font-size:.88rem;line-height:1.6;color:rgba(231,237,244,.92)}
.gl-tip-law{display:block;margin-top:.6rem;padding-top:.55rem;border-top:1px solid rgba(231,237,244,.14);
  font-family:var(--bd);font-size:.72rem;color:rgba(231,237,244,.6)}
@media(prefers-reduced-motion:reduce){.gl-tip{transition:none}}


/* ============================================================
   ACTION HIERARCHY — "One Lit Door"
   APPEND to css/features.css (loads after css/styles.css on every page).
   Prefix: ax-   (verified free: no .ax- class exists in css/ js/ *.html post/)

   LAW: gold is a currency. ONE gold object visible at a time — never two,
   never a run of more than three viewports with none reachable (the chrome
   ask counts). Max 3 tier-1 per static page, 1 per guide.
   Rank is carried by MASS + SILHOUETTE first, colour second:
     tier 1  FILLED  58px in flow / 62px in the closing band   WITH icon
     tier 2  RULED   48px                                       NO icon
     tier 3  PLAIN   ~41px box, 61px hit area                    NO icon
   The 10px gap between tier 1 and tier 2 is the rank cue, and the icon
   is a rank marker rather than decoration. Both survive greyscale, 200%
   zoom and colour blindness. Gold only accelerates what mass already says.

   NOTE ON LOAD ORDER: on blog.html and post/*.html, css/post.css loads
   AFTER css/features.css. Blog-index rules below are therefore scoped
   with the existing #blGrid / #blFilters ids so they win the cascade.
   ============================================================ */

:root{
  --rule-strong:#7d93a8;  /* 3.18:1 on #fff — WCAG 1.4.11 control boundary.
                             --rule #d6dfe7 measures 1.30:1 and fails.
                             SCOPE: .ax-2 and .bl-filter ONLY. Must not leak
                             into card/divider hairlines or it coarsens the
                             whole hairline aesthetic. */
  --gold-ink:#7d6224;     /* 5.76:1 on #fff — gold as TEXT on light surfaces.
                             --gold #b08d3f is 3.12:1 and fails AA today in
                             ~14 live places. Borders/icons keep --gold (3:1 ok). */
  --gold-rim:#8f7331;     /* 1px edge on the gold face — replaces the drop shadow */
  --ax-ease:cubic-bezier(.22,.61,.21,1);
}

/* ============================================================
   0 · EXTINGUISH THE SECOND LIGHT SOURCE   (ship this first)
   .wa-float (css/styles.css:175) is a 56px #25d366 disc with
   box-shadow 0 14px 30px -8px rgba(37,211,102,.6) on all 103 pages.
   A saturated green disc with a coloured halo is a stronger
   pre-attentive singleton than any gold rectangle, and the halo
   breaks the brand's own "hairlines, not shadows" rule.
   Without this block every claim below is decorative.
   ============================================================ */
.wa-float{
  width:52px;height:52px;
  background:#0a1e38;color:#e7edf4;        /* glyph 14.9:1 on face; face 17.7:1 on white */
  border:1px solid rgba(216,188,120,.45);
  box-shadow:none;
}
.wa-float:hover{background:#123458;border-color:var(--gold-soft);transform:translateY(-2px) scale(1)}
.wa-float:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold-soft)}
@media(max-width:860px){
  /* the sticky bar already carries this exact action; the float was a duplicate
     that features.css:1698 was only nudging out of the way */
  .wa-float{display:none}
}

/* ============================================================
   TIER 1 — "the decision".  NOT a new class.
   .btn.btn-whatsapp already renders as tier 1: css/styles.css:358
   overrides the dead green rule at :48, giving gold gradient,
   2px radius, Archivo 700 and a one-pass hover sheen. Nothing is
   renamed and no instance is restyled by accident. .ax-1 is an
   alias for NEW markup only.
   ============================================================ */
.ax-1{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  position:relative;overflow:hidden;border-radius:2px;text-decoration:none;cursor:pointer;
  font-family:var(--bd);font-weight:700;letter-spacing:.015em;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1d1503;
  transition:background .22s var(--ax-ease),color .22s var(--ax-ease),transform .22s var(--ax-ease);
}
.ax-1:hover{background:linear-gradient(180deg,#e6cd93,#c19b48);color:#160f02;transform:translateY(-1px)}

.btn-whatsapp,.ax-1{
  min-height:58px;padding:1rem 2rem;font-size:1.02rem;
  border:1px solid var(--gold-rim);        /* hairline edge instead of elevation */
  box-shadow:none;                          /* was 0 10px 24px -14px rgba(176,141,63,.85) */
}
.btn-whatsapp:hover,.ax-1:hover{box-shadow:none}
.btn-whatsapp:active,.ax-1:active{transform:translateY(0);filter:brightness(.965)}
.btn-lg.btn-whatsapp,.btn-lg.ax-1{min-height:62px;padding:1.15rem 2.2rem;font-size:1.06rem}
.btn-sm.btn-whatsapp,.btn-sm.ax-1{min-height:58px;padding:1rem 1.6rem;font-size:1rem}
.btn-whatsapp svg,.ax-1 svg{flex:none;width:20px;height:20px}

/* ---- ignition: the RULE moves, never the button ---------------------
   One shot, on first entry, per page load. The tap target must never
   shift under a finger already travelling toward it.                  */
.btn-whatsapp::before,.ax-1::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-soft);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .42s var(--ax-ease);
}
.btn-whatsapp.ax-lit::before,.ax-1.ax-lit::before{transform:scaleX(1)}

/* ---- optional: one-shot sheen on ignition. OFF by default.
   Enable with <body class="ax-sheen">. Deliberately separated from
   .btn::after (the shipped HOVER sweep) so the hover sweep is never
   parked at left:130% and killed.                                     */
body.ax-sheen .btn-whatsapp.ax-lit::after,
body.ax-sheen .ax-1.ax-lit::after{animation:axSheen .62s var(--ax-ease) .12s 1 forwards}
@keyframes axSheen{0%{left:-120%}99%{left:130%}100%{left:-120%}}

/* ============================================================
   TIER 2 — "the considered move".  48px. Ruled, not filled. No icon.
   Never moves: transform is a tier-1 privilege.
   ============================================================ */
.ax-2{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  position:relative;overflow:hidden;border-radius:2px;text-decoration:none;cursor:pointer;
  min-height:48px;padding:.78rem 1.35rem;
  font-family:var(--bd);font-weight:600;font-size:.92rem;letter-spacing:.015em;
  background:#fff;color:var(--navy);border:1px solid var(--rule-strong);
  box-shadow:none;
  transition:background .22s var(--ax-ease),border-color .22s var(--ax-ease),color .22s var(--ax-ease);
}
.ax-2:hover{background:var(--bg-soft);border-color:var(--navy);transform:none}
.ax-2:active{background:#e9f0f5}
.ax-2::after{display:none}                 /* no sheen below tier 1 */
.ax-2 svg,.ax-3 svg{display:none}          /* the icon is a rank cue, not decoration */

/* on navy / photographic / dark surfaces */
.cta-band .ax-2,.page-banner .ax-2,.section-dark .ax-2,.why .ax-2,.aside-card .ax-2,.stats .ax-2{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta-band .ax-2:hover,.page-banner .ax-2:hover,.section-dark .ax-2:hover,
.why .ax-2:hover,.aside-card .ax-2:hover,.stats .ax-2:hover{
  background:rgba(255,255,255,.08);border-color:#fff}
.aside-card .ax-2,.inline-ask .ax-2,.pa-box .ax-2{width:100%}
/* NOTE: practice pages use .aside-card (navy gradient → dark variant above);
   the 87 guides use .post-aside > .pa-box, which is #fff (css/post.css:81)
   → the light variant is correct there. Both are covered. */
.ax-2.ax-sm{min-height:44px;padding:.55rem 1rem;font-size:.86rem}   /* header nav chrome only */

/* ============================================================
   TIER 3 — "the read-on". No box. 61px hit area via inset expander.
   ============================================================ */
.ax-3{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 0;font-family:var(--bd);font-weight:600;font-size:.92rem;
  color:var(--navy);background:none;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;text-decoration:none;cursor:pointer;
  transition:color .22s var(--ax-ease),border-color .22s var(--ax-ease);
}
.ax-3::after{content:"";position:absolute;inset:-10px -6px}   /* 61px hit area, zero layout cost */
.ax-3:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.ax-arrow{display:inline-block;transition:transform .22s var(--ax-ease)}
.ax-3:hover .ax-arrow{transform:translateX(3px)}
.cta-band .ax-3,.page-banner .ax-3,.section-dark .ax-3,.why .ax-3,.aside-card .ax-3{
  color:rgba(255,255,255,.86);border-bottom-color:rgba(255,255,255,.4)}
.cta-band .ax-3:hover,.page-banner .ax-3:hover,.section-dark .ax-3:hover,
.why .ax-3:hover,.aside-card .ax-3:hover{color:#fff;border-bottom-color:var(--gold-soft)}

/* ---- focus: the shipped .btn:focus-visible outline (2px --gold-soft)
   is invisible against the gold face. Two rings read on both grounds. */
.btn:focus-visible,.ax-1:focus-visible,.ax-2:focus-visible,.ax-3:focus-visible{
  outline:0;outline-offset:0;box-shadow:0 0 0 2px #0a1e38,0 0 0 4px var(--gold-soft)}
.cta-band .btn:focus-visible,.page-banner .btn:focus-visible,.aside-card .btn:focus-visible,
.cta-band .ax-1:focus-visible,.cta-band .ax-2:focus-visible,.cta-band .ax-3:focus-visible,
.page-banner .ax-1:focus-visible,.page-banner .ax-2:focus-visible,.page-banner .ax-3:focus-visible{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)}

/* ============================================================
   GOLD-AS-TEXT REPAIR — ships regardless of direction.
   --gold #b08d3f on white = 3.12:1, fails AA 1.4.3.
   Text-only, light-surface uses. Borders / icons / dark-surface text
   keep --gold and --gold-soft; those are 3:1 graphical objects and pass.
   ============================================================ */
.mn-eyebrow,.mn-statute,.mn-step-num,
.glx-eyebrow,.rr-page .rr-kicker,.rr-page .rr-count,.rr-page .rr-tag--statute,
.dcl-where b,.dcl-label,.ml-tag,.bl-tag,.step-n,.tc-role,.ft-fee .fee-num{
  color:var(--gold-ink)}
.mn-intro h2 em,.glx-title em,.dcl-intro .dcl-title em{color:var(--gold-ink)}
.mn-btn-wa:hover,.rr-page .rr-open:hover,.glx-link:hover,.dcl-foot a:hover{color:var(--gold-ink)}

/* ============================================================
   1 · MATTER NAVIGATOR  (index.html, practice-areas.html)
   The defect is INVERTED RANK, not repetition: inside each visible
   .mn-actions the navy-solid read-more outranks the white WhatsApp
   button that carries the actual decision and the situation prefill.
   One panel is visible at a time (.mn-panel[hidden]{display:none}),
   so nobody ever sees twelve buttons — no JS hoist is warranted.
   ============================================================ */
.mn-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.mn-actions .ax-1{width:100%;max-width:22rem;text-transform:none;letter-spacing:.015em}
.mn-actions .ax-3{font-size:.86rem}
.mn-card-hint{display:none}                 /* six fake CTAs in one viewport — retired */
.mn-card[aria-selected="true"]{box-shadow:inset 0 3px 0 0 var(--gold-soft)}
@media(hover:none){
  /* no hover on touch, so the affordance tick must be permanent */
  .mn-card::after{width:22px;height:22px}
}

/* ============================================================
   2 · BLOG INDEX  (blog.html)
   Correction to the brief: blog.html ALREADY has a full .cta-band
   with .cta-micro and .cta-trust inside <main> (blog.html:554).
   The defect is REACHABILITY — the only ask sits at line 554 of 565,
   below 87 cards, ~95% scroll depth on the highest-traffic page type.
   ============================================================ */
.ax-triage{
  margin:0 0 1.6rem;padding:1rem 1.15rem;background:#fff;
  border:1px solid var(--rule);border-left:2px solid var(--gold);border-radius:2px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.4rem}
.ax-triage > span{
  flex:0 0 100%;font-family:var(--bd);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* in-grid interjection. Filter JS (js/features.js:1166) iterates
   grid.querySelectorAll('.bl-card') only, so a non-.bl-card child is
   never hidden — no data-cluster attribute is required. */
#blGrid .ax-dispatch{
  grid-column:1/-1;margin:.4rem 0;padding:1.6rem 1.7rem;
  background:var(--bg-soft);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:2px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 28px}
#blGrid .ax-dispatch p{margin:0;font-size:1rem;line-height:1.6;color:var(--navy);max-width:52ch}
#blGrid .ax-dispatch .ax-note{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--muted)}

/* 15 category links in one unstyled <p> read as ~9 lines of spam on mobile.
   <details> keeps them in the DOM, crawlable and in the a11y tree. */
.ax-cats > summary{
  font-family:var(--bd);font-size:.86rem;font-weight:600;color:var(--navy);
  cursor:pointer;padding:.6rem 0;border-bottom:1px solid var(--rule);list-style:none}
.ax-cats > summary::-webkit-details-marker{display:none}
.ax-cats > summary::after{content:"+";margin-left:.5rem;color:var(--gold-ink)}
.ax-cats[open] > summary::after{content:"\2212"}
@media(min-width:861px){.ax-cats > summary{display:none}}

/* ============================================================
   3 · PAGE BANNER — two actions become one action + one line
   (13 pages carrying .pb-cta). Two equal rectangles side by side at
   the most decisive moment produce a comparison task, not a decision.
   ============================================================ */
.pb-cta{margin-top:1.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.pb-cta .btn-whatsapp,.pb-cta .ax-1{max-width:min(100%,30rem)}
.ax-micro{
  margin:0;font-family:var(--bd);font-size:.84rem;line-height:1.6;
  color:rgba(255,255,255,.74);
  max-width:46ch}   /* 46ch is a CONTRAST constraint: it keeps the line inside the
                       banner's dark left third (scrim rgba(8,26,50,.92)) where it
                       measures 9.95:1, instead of drifting over the .35 scrim. */

/* ============================================================
   4 · DECISION MOMENT — the closing band stack
   h2 → 1rem → lede → 2rem → button → .85rem → micro → .7rem → tel
      → 1.1rem → alt → 2rem → trust
   NOTE: css/styles.css:475 sets `.cta-band p{color:rgba(255,255,255,.76);
   margin:1rem auto 2rem}` at specificity (0,1,1). Every rule below is
   therefore written scoped so it wins on specificity, not on file order.
   ============================================================ */
.cta-inner h2{margin:0}
.cta-band .btn-whatsapp,.cta-band .ax-1{margin:0}
.cta-band .cta-micro{
  margin:.85rem auto 0;max-width:60ch;
  font-size:.82rem;line-height:1.6;color:rgba(231,237,244,.72)}
  /* SHIPPED DEFECT: css/styles.css:168 `.cta-inner p{font-size:1.1rem}` (0,1,1)
     out-specifies css/features.css:1673 `.cta-micro` (0,1,0), so on all 102
     pages carrying .cta-band the objection line currently renders at 1.1rem —
     the same size as the lede — instead of .82rem. Scoping fixes it. */
.ax-tel,.cta-band .ax-tel,.page-banner .ax-tel,.inline-ask .ax-tel{
  margin:.7rem auto 0;font-family:var(--bd);font-size:.78rem;line-height:1.6;
  color:rgba(231,237,244,.72);max-width:52ch}   /* 7.87:1 on #0a1e38 */
.inline-ask .ax-tel{color:var(--muted);margin-left:0}
.ax-tel a,.cta-band .ax-tel a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
.inline-ask .ax-tel a{color:var(--navy);border-bottom-color:var(--rule-strong)}
.ax-tel a:hover,.cta-band .ax-tel a:hover{border-bottom-color:var(--gold-soft)}
.ax-alt,.cta-band .ax-alt,.page-banner .ax-alt{margin:1.1rem 0 0}
.cta-band .ax-alt{margin-inline:auto}
.cta-band .cta-trust{margin-top:2rem}

/* ============================================================
   5 · GUIDE LADDER (post/*.html) — same ask, three step sizes
   ============================================================ */
.inline-ask .ax-2{margin:0}
.inline-ask .ia-micro{margin:.75rem 0 0}
.aside-card .ax-2,.pa-box .ax-2{justify-content:center}

/* ============================================================
   6 · MOBILE < 860px — the sticky bar owns the gold slot.
   body.sa-open is set by js/features.js:1246. While it is set, every
   in-flow tier 1 EXCEPT the closing band steps down to tier 2, so at
   every scroll position exactly one gold object exists and it hands
   off cleanly between the bar and the band.
   ============================================================ */
@media(max-width:860px){
  body.sa-open .btn-whatsapp,body.sa-open .ax-1{
    background:#fff;color:var(--navy);border-color:var(--rule-strong);
    min-height:52px;padding:.8rem 1.4rem;font-size:.92rem;font-weight:600}
  body.sa-open .btn-whatsapp::before,body.sa-open .ax-1::before{display:none}
  body.sa-open .btn-whatsapp svg,body.sa-open .ax-1 svg{display:none}
  body.sa-open .cta-band .btn-whatsapp,body.sa-open .cta-band .ax-1{
    background:linear-gradient(180deg,var(--gold-soft),var(--gold));
    color:#1d1503;border-color:var(--gold-rim);
    min-height:56px;padding:1.05rem 1.6rem;font-size:1rem;font-weight:700}
  body.sa-open .cta-band .btn-whatsapp svg,body.sa-open .cta-band .ax-1 svg{display:inline-block}

  .btn-whatsapp,.ax-1{font-size:1rem}          /* 1rem floor: dominance + no iOS zoom */
  .ax-2{font-size:.9rem}
  .page-banner .btn-whatsapp,.page-banner .ax-1{width:100%;max-width:26rem;min-height:56px}
  #blGrid .ax-dispatch{grid-template-columns:1fr}
  #blGrid .ax-dispatch .btn-whatsapp,#blGrid .ax-dispatch .ax-1{width:100%}
  .mn-actions .ax-1{max-width:none}
}

@media(max-width:640px){
  /* six full-width slabs and ~3 screens before the panel appears becomes
     a snap rail: 1.3 cards visible turns a simultaneous 6-way comparison
     into a sequential one. Tab semantics and arrow keys are untouched. */
  .mn-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(74%,1fr);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;
    padding-inline:clamp(20px,5vw,64px);margin-inline:calc(-1 * clamp(20px,5vw,64px))}
  .mn-grid::-webkit-scrollbar{display:none}
  .mn-card{scroll-snap-align:start}
  /* #blFilters beats post.css:112 (.bl-filters) which loads after features.css */
  #blFilters{display:flex;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;gap:.5rem}
  #blFilters::-webkit-scrollbar{display:none}
  #blFilters .bl-filter{flex:none;scroll-snap-align:start;min-height:44px;
    border-color:var(--rule-strong)}
}

/* ============================================================
   7 · REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .ax-1,.ax-2,.ax-3,.ax-arrow,.btn-whatsapp::before,.ax-1::before{transition:none}
  .btn-whatsapp::before,.ax-1::before,
  .btn-whatsapp.ax-lit::before,.ax-1.ax-lit::before{transform:scaleX(1)}
  body.ax-sheen .btn-whatsapp.ax-lit::after,
  body.ax-sheen .ax-1.ax-lit::after{animation:none}
}

/* ============================================================
   8 · DEBUG LINT — dev only, never in production.
   Add class="ui-audit" to <body> to outline any container that
   holds two tier-1 objects, or a matter-navigator panel that still
   carries a demoted button.
   ============================================================ */
body.ui-audit section:has(.btn-whatsapp ~ .btn-whatsapp),
body.ui-audit .pb-cta:has(.btn-whatsapp ~ .btn-whatsapp),
body.ui-audit .pb-cta:has(.btn-ghost-light),
body.ui-audit .mn-actions:has(.mn-btn-primary),
body.ui-audit .mn-card-hint,
body.ui-audit .wa-float[style*="25d366"]{outline:3px dashed #c0392b;outline-offset:4px}