/* AERTHEIX · The System · the sections after the film.
   Same method as What it answers: a light spine, then five wide scenes that alternate dark and light,
   one closing call to action. L1 is always visible; L2 is a native <details>.
   Loaded after /assets/answers-v8/scenes.css, which supplies every ah- rule. Only what the System page needs differently is here. */

:root{--ans-display:clamp(42px,5.5vw,80px)}

/* ---------- the spine: light, so the film's dark ground ends cleanly ---------- */
.ah-spine--light{color:var(--ink);background:linear-gradient(180deg,#FAF8F4,#F2EEE9);border-top:1px solid rgba(15,42,33,.1)}
.ah-spine--light .ah-eyebrow{color:#735818}
.ah-spine--light h2{color:var(--forest-deep)}
.ah-spine--light h2 em{color:#735818}
.ah-spine--light .ah-spine-lead{color:var(--ink)}
.ah-spine--light .ah-pair{border-top-color:rgba(15,42,33,.2)}
.ah-spine--light .ah-pair>div{position:relative;padding:22px 22px 24px;border:1px solid rgba(15,42,33,.12);border-top:2px solid var(--gold);border-radius:6px;background:#fff;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.ah-spine--light .ah-pair b{color:#735818}
.ah-spine--light .ah-pair h3{margin:0 0 8px;color:var(--forest-deep);font:500 var(--fs-h4)/1.25 var(--sans);letter-spacing:-.02em}
.ah-spine--light .ah-pair p{color:var(--fine)}
.ah-spine-limit{max-width:60ch;margin:clamp(26px,3vw,40px) 0 0;padding-left:16px;border-left:2px solid var(--gold);color:var(--fine);font:400 var(--fs-fine)/1.55 var(--sans)}
body[data-page="the-system"] .ah-spine .ah-eyebrow{margin:0 0 20px}
body[data-page="the-system"] .ah-spine .ah-spine-lead{margin:28px 0 0}
body[data-page="the-system"] .ah-spine h2{max-width:18ch;margin:0}
body[data-page="the-system"] .ah-spine .ah-pair{max-width:none;margin-top:clamp(36px,5vw,60px);padding-top:28px}
body[data-page="the-system"] .ah-spine .ah-pair p{margin:0}
body[data-page="the-system"] .ah-spine .ah-spine-limit{margin:clamp(26px,3vw,40px) 0 0}

/* ---------- the scenes: one wide column, the picture under the words ---------- */
.ah-scene--wide{overflow:clip;padding:clamp(76px,10vh,124px) 0 clamp(36px,5vh,60px)}
.ah-scene--wide .ah-scene-in{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(30px,4vw,56px)}
.ah-scene--wide:nth-child(even) .ah-art{order:0}
.ah-scene--wide .ah-copy{max-width:920px}
.ah-scene--wide .ah-art{width:100%}
.ah-scenes{background:#0A1F18}
.ah-scene.field{background:linear-gradient(180deg,#0F2A21 0%,#0A1F18 16%,#0D261F 60%,#0A1F18 100%);color:var(--on-dark-body)}
.ah-scene.field.ah-scene--light{background:linear-gradient(180deg,#FAF8F4,#F2EEE9)}

body[data-page="the-system"] .ah-scene .ah-no{margin:0 0 clamp(26px,3.6vh,40px)}
body[data-page="the-system"] .ah-scene .ah-fuzzy{margin:0 0 clamp(14px,2vh,22px)}
body[data-page="the-system"] .ah-scene .ah-promise{margin:clamp(22px,3.2vh,32px) 0 0}
body[data-page="the-system"] .ah-scene .ah-limit{margin:clamp(18px,2.6vh,28px) 0 0}
body[data-page="the-system"] .ah-scene h2{max-width:none;margin:0;font-size:var(--fs-h1);letter-spacing:-.045em}
body[data-page="the-system"] .ah-scene--light h2{color:var(--forest-deep);text-shadow:none}
body[data-page="the-system"] .ah-more-body p,body[data-page="the-system"] .ah-more-body li{margin-top:0}
body[data-page="the-system"] .ah-more summary::after,body[data-page="the-system"] .ah-more[open] summary::after{content:none!important;display:none!important}
body[data-page="the-system"] .ah-more{margin-top:clamp(8px,2vh,24px)}
.ah-scene--light .ah-fuzzy-label{color:var(--fine)}

/* ---------- 01 · the three readings ---------- */
#what-it-reads .axis-stage{margin:0;padding:clamp(16px,2.2vw,30px);border:1px solid rgba(212,188,132,.28);border-radius:10px;background:linear-gradient(180deg,rgba(244,239,228,.07),rgba(244,239,228,.025));box-shadow:0 44px 70px -44px rgba(0,0,0,.85)}
#what-it-reads .axis-step{min-height:clamp(180px,24vh,260px)}
#what-it-reads .axis-step h3{margin-top:6px}

/* ---------- metrics inside scenes ---------- */
.ah-scene .metrics{margin-top:clamp(18px,2.4vw,30px)}
.ah-scene .metric{min-height:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s,box-shadow .3s}
.ah-scene--light .metric{background:#fff;border:1px solid rgba(15,42,33,.14);border-top:2px solid var(--gold);color:var(--ink);box-shadow:0 22px 40px -32px rgba(15,42,33,.4)}
.ah-scene--light .metric::before,.ah-scene--light .metric::after{display:none}
.ah-scene--light .metric .metric-value{color:var(--forest-deep)}
.ah-scene--light .metric .metric-unit{color:#735818}
.ah-scene--light .metric .metric-label{color:var(--fine)}
.ah-scene--light .metric em{color:var(--forest-deep)}

/* ---------- 02 · tailoring (light) ---------- */
.ah-demo-intro{max-width:62ch;margin:clamp(26px,3vw,40px) 0 18px;color:var(--ink);font:400 var(--fs-body)/1.6 var(--sans)}
body[data-page="the-system"] .ah-scene .tailor-contrast{margin:0}
.ah-scene--light .tailor-constant,.ah-scene--light .tailor-role{background:#fff;border:1px solid rgba(15,42,33,.14);border-top:2px solid var(--gold);box-shadow:0 22px 40px -32px rgba(15,42,33,.4);color:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.ah-scene--light .tailor-role{border-top-color:#6F9477}
.ah-scene--light .tailor-contrast h3{color:var(--forest-deep)}
.ah-scene--light .tailor-contrast p{color:var(--fine)}
.ah-scene--light .tailor-marker{color:#735818}
.ah-scene--light .tl{background:#fff;border:1px solid rgba(15,42,33,.14);border-radius:10px;box-shadow:0 30px 60px -38px rgba(15,42,33,.4)}
.ah-scene--light .tl-cap{color:var(--fine)}
.ah-scene--light .tl-row{transition:background .25s,transform .25s}

/* ---------- 03 · the loop ---------- */
.ah-loop-wrap{max-width:720px;margin-inline:auto}
#how-it-operates .lp{margin-inline:auto}

/* ---------- 04 · deeper analyses (light) ---------- */
.ah-scene--light .grid-2x2{margin:0}
.ah-scene--light .tile,.ah-scene--light .tile--analysis{background:#fff;border:1px solid rgba(15,42,33,.14);border-top:2px solid var(--gold);color:var(--ink);box-shadow:0 22px 40px -32px rgba(15,42,33,.4);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.ah-scene--light .tile h3,.ah-scene--light .tile .h3,.ah-scene--light .tile strong{color:var(--forest-deep)}
.ah-scene--light .tile p{color:var(--ink)}
.ah-scene--light .tile .tile-boundary{margin:12px 0 0;padding-top:10px;border-top:1px dashed rgba(15,42,33,.22);color:var(--fine);font:400 var(--fs-fine)/1.5 var(--sans)}
.ah-scene--light .tile .tile-boundary b{display:block;margin-bottom:3px;color:#735818;font:600 var(--fs-micro)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ah-link{color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.ah-link:hover{color:var(--forest-deep)}

/* ---------- 05 · the evidence boundary (dark) ---------- */
#evidence-boundary .metrics{margin-top:0}

/* ---------- the list of five steps inside L2 ---------- */
.ah-list--num{list-style:decimal}

/* ---------- closing call to action (light, centred) ---------- */
.ah-cta--sy{padding:clamp(72px,9vw,120px) 0 clamp(80px,10vw,128px);background:linear-gradient(180deg,#F2EEE9,#FAF8F4);color:var(--ink);text-align:center;border-top:1px solid rgba(15,42,33,.1)}
.ah-cta--sy .ah-cta-in{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.ah-cta--sy .ah-eyebrow{display:table;margin:0 auto 20px;color:#735818}
.ah-cta--sy h2{max-width:18ch;margin:0 auto;font:500 var(--fs-h1)/1.06 var(--sans);letter-spacing:-.045em;color:var(--forest-deep)}
.ah-cta--sy h2 em{font:italic 400 1em/1.06 var(--display);letter-spacing:-.03em;color:#735818}
.ah-cta--sy .ah-cta-actions{display:flex;justify-content:center;margin-top:30px}
body[data-page="the-system"] .ah-cta--sy .ah-eyebrow{margin:0 auto 20px}
body[data-page="the-system"] .ah-cta--sy h2{margin:0 auto}

/* ---------- hover: the same few gestures as What it answers ---------- */
@media(hover:hover){
  .ah-spine--light .ah-pair>div:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 26px 40px -28px rgba(15,42,33,.45)}
  .ah-scene--light .metric:hover,.ah-scene--light .tile:hover,.ah-scene--light .tailor-constant:hover,.ah-scene--light .tailor-role:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 28px 44px -28px rgba(15,42,33,.5)}
  .ah-scene.field .metric:hover{transform:translateY(-4px);border-color:var(--gold-light);background:rgba(10,31,24,.82);box-shadow:0 20px 30px -18px rgba(0,0,0,.7)}
  .ah-scene--light .tl-row:hover{background:rgba(184,152,90,.12)}
  .ah-list--num li{transition:transform .25s,color .25s}
  .ah-list--num li:hover{transform:translateX(4px)}
}

/* ---------- small screens ---------- */
@media(max-width:700px){
  .ah-spine--light .ah-pair{grid-template-columns:minmax(0,1fr)}
  #what-it-reads .axis-step{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  .ah-scene .metric,.ah-spine--light .ah-pair>div,.ah-scene--light .tile,.ah-scene--light .tailor-constant,.ah-scene--light .tailor-role,.ah-list--num li{transition:none!important;transform:none!important}
}
@media print{.ah-spine--light,.ah-cta--sy{background:#fff}}

/* ---------- round 2: the legacy metric and figure rules are stronger than mine, so restate ---------- */
body[data-page="the-system"] .ah-scene .metrics{gap:0}
body[data-page="the-system"] .ah-scene .metric,body[data-page="the-system"] .ah-scene .metrics--dense .metric{min-height:0;justify-content:flex-start;gap:0;padding:clamp(22px,2.4vw,34px) clamp(18px,2.2vw,32px)}
body[data-page="the-system"] .ah-scene .metric-label,body[data-page="the-system"] .ah-scene .metrics--dense .metric-label{margin-top:clamp(12px,1.4vw,18px)}
body[data-page="the-system"] .ah-scene--light .metrics{gap:16px;border:0}
body[data-page="the-system"] .ah-scene--light .metric{border-radius:6px;border-left:1px solid rgba(15,42,33,.14)}
body[data-page="the-system"] .ah-scene--light .tl-cap{display:block;margin:0;padding:14px 22px 18px;border-top:1px solid rgba(15,42,33,.1);color:var(--fine);font:400 var(--fs-fine)/1.5 var(--sans)}
body[data-page="the-system"] .ah-scene--light .tl-card{margin:0}
body[data-page="the-system"] .ah-scene--light .tl{overflow:hidden;padding-bottom:0}

/* =====================================================================
   Round 3 · 04 Four deeper analyses as four layered cards.
   A dark window sits inside a white card, a coloured header band on top, two sheets behind.
   No glow. Depth comes from stacking, shadow and a small pointer tilt.
   ===================================================================== */
#deeper-analyses .an-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3vw,44px) clamp(26px,2.4vw,36px);margin:0;perspective:1600px}
#deeper-analyses .an-card{--rx:0deg;--ry:0deg;--lift:0px;position:relative;display:flex;flex-direction:column;padding:0;border:0;border-radius:14px;background:transparent;color:var(--ink);box-shadow:none;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#deeper-analyses .an-card:hover{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift))}
#deeper-analyses .an-card::before,#deeper-analyses .an-card::after{content:"";display:block;position:absolute;inset:0;border-radius:14px;background:#fff;border:1px solid rgba(15,42,33,.14);pointer-events:none}
#deeper-analyses .an-card::before{transform:translate3d(7px,10px,-18px);opacity:.82;box-shadow:0 20px 34px -22px rgba(15,42,33,.5)}
#deeper-analyses .an-card::after{transform:translate3d(14px,20px,-36px);opacity:.6;box-shadow:0 24px 40px -24px rgba(15,42,33,.45)}

#deeper-analyses .an-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-radius:14px 14px 0 0;background:var(--an);color:#fff;transform:translateZ(0)}
#deeper-analyses .an-head .tile-index{color:#fff;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
#deeper-analyses .an-count{color:rgba(255,255,255,.78);font:italic 400 var(--fs-body)/1 var(--display);letter-spacing:.02em}
#deeper-analyses .an-body{position:relative;z-index:1;flex:1;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding:18px 18px 22px;border:1px solid rgba(15,42,33,.14);border-top:0;border-radius:0 0 14px 14px;background:#fff;box-shadow:0 40px 60px -38px rgba(15,42,33,.55)}

/* the window: recessed, dark, with the scene floating above a faint floor */
#deeper-analyses .an-stage{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:170px;padding:14px;border-radius:10px;background:radial-gradient(120% 90% at 50% 0%,#1C4A39 0%,#0F2A21 60%,#0A1F18 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset 0 -30px 40px -30px rgba(0,0,0,.6),0 22px 30px -18px rgba(15,42,33,.7);transform:translateZ(34px);overflow:hidden}
#deeper-analyses .an-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(212,188,132,.07) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(212,188,132,.07) 1px,transparent 1px) 0 0/28px 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70%);mask-image:linear-gradient(180deg,transparent 0,#000 70%);pointer-events:none}
#deeper-analyses .an-ghost{position:absolute;right:10px;bottom:-14px;color:rgba(212,188,132,.09);font:italic 400 clamp(84px,7vw,110px)/1 var(--display);letter-spacing:-.04em;pointer-events:none;user-select:none}
#deeper-analyses .an-stage .an-scene{position:relative;width:100%;max-width:340px;margin:0;opacity:1}

/* the scenes, recoloured for the dark window (shapes and motion are unchanged) */
#deeper-analyses .an-stage .an-scene *{stroke:#E8DFC8}
#deeper-analyses .an-stage .an-base,#deeper-analyses .an-stage .an-grid{stroke:rgba(212,188,132,.35)}
#deeper-analyses .an-stage .an-box{stroke:rgba(232,223,200,.55)}
#deeper-analyses .an-stage .an-bar{fill:var(--gold-light);stroke:none}
#deeper-analyses .an-stage .an-lid{fill:#F1EADA;stroke:none}
#deeper-analyses .an-stage .an-cap{stroke:var(--gold-light)}
#deeper-analyses .an-stage .an-pulse-base{stroke:rgba(232,223,200,.25)}
#deeper-analyses .an-stage .an-pulse{stroke:var(--gold-light)}
#deeper-analyses .an-stage .an-bracket{stroke:#E8DFC8}
#deeper-analyses .an-stage .an-trend{stroke:rgba(232,223,200,.4)}
#deeper-analyses .an-stage .an-mover{fill:var(--gold-light);stroke:none}
#deeper-analyses .an-stage .an-up path{stroke:var(--olive)}
#deeper-analyses .an-stage .an-down path{stroke:var(--plum)}
#deeper-analyses .an-stage .an-flag{stroke:rgba(232,223,200,.55)}
#deeper-analyses .an-stage .an-shield{stroke:var(--gold-light)}

/* words */
#deeper-analyses .an-text{min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:0;transform:translateZ(14px)}
#deeper-analyses .an-text h3{margin:0;color:#735818;font:600 var(--fs-micro)/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase}
#deeper-analyses .an-text .tile-q{max-width:none;margin:12px 0 0;color:var(--forest-deep);font:500 clamp(20px,1.55vw,24px)/1.24 var(--display);letter-spacing:-.02em}
#deeper-analyses .an-text .analysis-benefit{max-width:none;margin:12px 0 16px;color:var(--ink);font:400 var(--fs-label)/1.6 var(--sans)}
#deeper-analyses .an-text .tile-boundary{max-width:none;margin:auto 0 0;padding:12px 14px;border:0;border-left:3px solid var(--an);border-radius:0 6px 6px 0;background:#F4F0E6;color:var(--ink);font:400 var(--fs-fine)/1.55 var(--sans)}
#deeper-analyses .an-text .tile-boundary b{display:block;margin:0 0 4px;color:var(--an);font:600 var(--fs-micro)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* entrance: the four cards are dealt, one after another */
html.ah-armed #deeper-analyses:not(.is-in) .an-card{opacity:0}
html.ah-armed #deeper-analyses.is-in .an-card{animation:an-deal .85s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--k,0) * 140ms + .55s)}
@keyframes an-deal{from{opacity:0;transform:translateY(46px) rotateX(10deg) rotate(-1.6deg) scale(.96)}to{opacity:1;transform:none}}

/* a card under the pointer comes forward; its neighbours stay put */
@media(hover:hover) and (pointer:fine){
  #deeper-analyses .an-card.is-tilt{--lift:-6px;transition:transform .12s linear}
  #deeper-analyses .an-card.is-tilt .an-body{box-shadow:0 52px 70px -36px rgba(15,42,33,.65)}
  #deeper-analyses .an-card.is-tilt .an-stage{transform:translateZ(52px)}
  #deeper-analyses .an-card.is-tilt .an-text{transform:translateZ(26px)}
  #deeper-analyses .an-stage{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
}

@media(max-width:1180px){
  #deeper-analyses .an-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  #deeper-analyses .an-stage{min-height:200px}
}
@media(max-width:700px){
  #deeper-analyses .an-deck{grid-template-columns:minmax(0,1fr)}
  #deeper-analyses .an-stage{min-height:180px}
  #deeper-analyses .an-card::before{transform:translate3d(6px,8px,-18px)}
  #deeper-analyses .an-card::after{transform:translate3d(12px,16px,-36px)}
}
@media(prefers-reduced-motion:reduce){
  #deeper-analyses .an-card,#deeper-analyses .an-stage{transition:none!important;transform:none!important;animation:none!important}
  #deeper-analyses .an-card::before{transform:translate(8px,10px)}
  #deeper-analyses .an-card::after{transform:translate(16px,20px)}
  html.ah-armed #deeper-analyses:not(.is-in) .an-card{opacity:1}
}
@media print{#deeper-analyses .an-card::before,#deeper-analyses .an-card::after{display:none}}

/* ---------- hero: a second quiet link ---------- */
.confluence-cta .jump--sub{margin-left:clamp(18px,2.4vw,34px);opacity:.85}
@media(max-width:560px){.confluence-cta .jump--sub{display:block;margin:14px 0 0}}

/* =====================================================================
   Method precedents: the three disciplines, one click from the page.
   ===================================================================== */
.ah-prec{padding:clamp(64px,8vw,108px) 0;background:#EEE7D9;color:var(--ink);border-top:1px solid rgba(15,42,33,.1)}
.ah-prec-in{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.ah-prec .ah-eyebrow{color:#735818}
body[data-page="the-system"] .ah-prec h2{max-width:20ch;margin:0;font:500 var(--fs-h1)/1.06 var(--sans);letter-spacing:-.045em;color:var(--forest-deep)}
.ah-prec h2 em{font:italic 400 1em/1.06 var(--display);letter-spacing:-.03em;color:#735818}
body[data-page="the-system"] .ah-prec .ah-prec-lead{max-width:60ch;margin:22px 0 0;color:var(--forest);font:500 var(--fs-lead)/1.45 var(--sans)}
.ah-prec-list{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ah-prec-card{position:relative;display:flex;flex-direction:column;min-height:clamp(250px,22vw,310px);height:100%;padding:clamp(22px,2.2vw,30px);border-radius:12px;border:1px solid rgba(212,188,132,.3);background:radial-gradient(120% 90% at 50% 0%,#1C4A39 0%,#0F2A21 62%,#0A1F18 100%);color:#F7F4EE;text-decoration:none;overflow:hidden;box-shadow:0 34px 50px -34px rgba(15,42,33,.7);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
.ah-prec-no{position:absolute;right:16px;top:-6px;color:rgba(212,188,132,.16);font:italic 400 clamp(96px,9vw,132px)/1 var(--display);letter-spacing:-.04em;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.ah-prec-card small{position:relative;display:block;max-width:26ch;color:var(--gold-light);font:600 var(--fs-micro)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ah-prec-card strong{position:relative;display:block;margin:auto 0 0;padding-top:34px;color:#fff;font:500 clamp(24px,2.1vw,32px)/1.12 var(--sans);letter-spacing:-.035em}
.ah-prec-card strong em{font:italic 400 1em/1.12 var(--display);letter-spacing:-.02em;color:var(--gold-light)}
.ah-prec-go{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid rgba(212,188,132,.28);color:var(--on-dark-body);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.ah-prec-go i{font-style:normal;color:var(--gold-light);transition:transform .25s}
.ah-prec-card:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
@media(hover:hover){.ah-prec-card:hover{transform:translateY(-6px);border-color:var(--gold-light);box-shadow:0 44px 60px -34px rgba(15,42,33,.8)}.ah-prec-card:hover .ah-prec-no{transform:translateY(8px) scale(1.05);color:rgba(212,188,132,.26)}.ah-prec-card:hover .ah-prec-go i{transform:translateX(5px)}}
.ah-prec-limit{max-width:60ch;margin:clamp(24px,3vw,36px) 0 0;padding-left:16px;border-left:2px solid var(--gold);color:var(--fine);font:400 var(--fs-fine)/1.55 var(--sans)}
body[data-page="the-system"] .ah-prec .ah-eyebrow{margin:0 0 20px}
@media(max-width:900px){.ah-prec-list{grid-template-columns:minmax(0,1fr)}.ah-prec-card{min-height:200px}}
@media(prefers-reduced-motion:reduce){.ah-prec-card,.ah-prec-no,.ah-prec-go i{transition:none!important;transform:none!important}}

/* ---------- tailoring demo (V12): full-width intro, one frame, seven roles ---------- */
body[data-page="the-system"] .ah-scene--light .ah-demo-intro{max-width:none;margin:clamp(26px,3vw,40px) 0 20px}
#tailoring .tl{border-radius:12px}
#tailoring .tl-tabs{flex-wrap:nowrap;gap:16px;margin:0;padding:16px clamp(16px,2vw,24px);border-bottom:1px solid rgba(15,42,33,.1);background:#fff}
#tailoring .tl-roles{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:8px}
#tailoring .tl-pause{flex:none}
#tailoring .tl-card{border:0;border-radius:0;box-shadow:none}
#tailoring .tl-photo{height:clamp(210px,19vw,280px)}
#tailoring .tl[data-active="3"] .tl-photo img[data-role="3"],#tailoring .tl[data-active="4"] .tl-photo img[data-role="4"],#tailoring .tl[data-active="5"] .tl-photo img[data-role="5"],#tailoring .tl[data-active="6"] .tl-photo img[data-role="6"]{opacity:1;transform:none}
#tailoring .tl[data-active="3"] .tl-fill[data-role="3"],#tailoring .tl[data-active="4"] .tl-fill[data-role="4"],#tailoring .tl[data-active="5"] .tl-fill[data-role="5"],#tailoring .tl[data-active="6"] .tl-fill[data-role="6"]{display:block}
@media (max-width:760px){
  #tailoring .tl-tabs{gap:10px;padding:12px 14px}
  #tailoring .tl-roles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  #tailoring .tl-roles::-webkit-scrollbar{display:none}
  #tailoring .tl-roles button{flex:none;white-space:nowrap}
}