/* ALP Studios: Monthly Content (v3) — page-specific styles only.
   Shared header, footer, colours (--ink/--paper/--gold/--grey), fonts and base resets all come
   from alp.css; every rule here is scoped under ".v3" so it can never affect any other page. */
:root{ --header-h:84px; }

.v3{
  --mute:#93929C; --mute-ink:#5E5D66; --soft:#CFCFCB; --dim:#3a3a3d;
  --line:rgba(247,247,245,.16); --line-ink:rgba(10,10,10,.14);
  --ease:cubic-bezier(.22,.8,.2,1);
  --section:clamp(56px,8vw,120px);
  font-size:16px; line-height:1.6;
}
.v3 .faq-head p a,.v3 .success p a{border-bottom:1px solid currentColor;padding-bottom:1px}

html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px))}
.v3 button{font:inherit; color:inherit}
.v3 .paper :focus-visible{outline-color:var(--ink)}

/* padding-top/bottom:0 cancels alp.css's own .wrap section padding, which was stacking on top of
   .section's padding and doubling every gap between blocks. */
.v3 .wrap{max-width:1360px; margin:0 auto; padding-top:0; padding-bottom:0; padding-left:calc(var(--pad) + var(--rail)); padding-right:var(--pad)}
.v3 .section{padding:var(--section) 0}
.v3 .paper{background:var(--paper); color:var(--ink)}
.v3 .display{font-family:var(--display); font-weight:400; letter-spacing:-.025em; line-height:.93; text-transform:uppercase; overflow-wrap:break-word}
.v3 h2.display{font-size:clamp(1.95rem,5vw,4.4rem); margin:0}
.v3 .accent{color:var(--gold)}
.v3 .paper .accent{color:var(--violet)}
.v3 h3{margin:0}
.v3 p{margin:0}
.v3 .lead{font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.6; max-width:34em}
.v3 .muted{color:var(--mute)}
.v3 .paper .muted{color:var(--mute-ink)}
.v3 .label{font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:var(--grey)}
.v3 .paper .label{color:#5c5b66}

.v3 .head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-bottom:clamp(28px,4vw,56px)}
.v3 .head .label{grid-column:1 / span 3; padding-top:.6em}
.v3 .head .display{grid-column:4 / span 9}
.v3 .head .lead{grid-column:4 / span 7; margin-top:8px}
@media (max-width:860px){
  .v3 .head{grid-template-columns:1fr; gap:14px}
  .v3 .head .label, .v3 .head .display, .v3 .head .lead{grid-column:1}
}

.v3 .rule{height:1px; background:var(--line); transform-origin:left; transform:scaleX(0); transition:transform 1.2s var(--ease)}
.v3 .paper .rule{background:var(--line-ink)}
.v3 .rule.in{transform:scaleX(1)}

/* Buttons: the real site's .btn / .btn-ghost / .btn-sm / .arw (from alp.css) are used directly
   in this page's markup, unmodified, so every button matches the rest of the site exactly. */
.v3 .textlink{font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}

.v3 .frame{position:relative; overflow:hidden; background:#1a1a1a; margin:0}
.v3 .paper .frame{background:#E6E6E2}
.v3 .frame::before{content:attr(data-placeholder); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; font-size:.75rem; color:var(--mute); border:1px dashed rgba(147,146,156,.5)}
.v3 .frame img, .v3 .frame video{position:relative; width:100%; height:100%; object-fit:cover}
.v3 .frame.clip img{clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease)}
.v3 .frame.clip.in img{clip-path:inset(0 0 0 0)}

/* ============ HERO ============ */
.v3 .hero{position:relative; overflow:hidden; padding-top:calc(var(--header-h) + clamp(20px,3vw,44px)); padding-bottom:clamp(24px,4vw,56px)}
.v3 .hero .halo{position:absolute; right:-18vw; top:-24vh; width:70vw; height:70vw; max-width:900px; max-height:900px; border-radius:50%;
 background:radial-gradient(circle,rgba(95,81,153,.42),transparent 66%); filter:blur(28px)}
.v3 .hero-meta{display:flex; justify-content:space-between; gap:24px; font-size:.85rem; color:var(--mute); padding-bottom:22px}
.v3 .rec{display:inline-flex; align-items:center; gap:10px}
.v3 .rec::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold)}
.v3 .hero h1{margin:clamp(28px,4vw,56px) 0 0; font-weight:400}
.v3 .h1-kicker{display:block; font-family:var(--body); font-weight:600; font-size:clamp(.95rem,1.2vw,1.1rem); margin-bottom:clamp(14px,2vw,24px)}
.v3 .h1-main{display:block; font-family:var(--display); font-size:clamp(2.7rem,8.4vw,8.6rem); letter-spacing:-.035em; line-height:.92; max-width:100%}
.v3 .h1-main .ln{display:block; overflow:hidden; padding-bottom:.04em}
.v3 .h1-main .ln > span{display:block}
.v3 .hero-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-top:clamp(32px,4vw,56px); align-items:end}
.v3 .hero-grid .lead{grid-column:1 / span 6; color:var(--soft)}
.v3 .hero-ctas{grid-column:8 / span 5; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:900px){
  .v3 .hero-grid{grid-template-columns:1fr}
  .v3 .hero-grid .lead, .v3 .hero-ctas{grid-column:1; justify-content:flex-start}
}
@media (max-width:480px){ .v3 .hero-ctas .btn{width:100%} }

/* featured work carousel */
.v3 .work{margin-top:clamp(48px,6vw,80px)}
.v3 .work-track{--gap:12px; --per:3.35; display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; contain:paint; cursor:grab}
.v3 .work-track::-webkit-scrollbar{display:none}
.v3 .work-track.dragging{cursor:grabbing; scroll-snap-type:none}
.v3 .work-card{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align:start; min-width:0}
.v3 .work-link{display:block; text-decoration:none; color:inherit}
.v3 .work .frame{aspect-ratio:4 / 5}
.v3 .work .frame img{transition:transform 1.2s var(--ease); user-select:none; -webkit-user-drag:none}
.v3 .work-link:hover .frame img, .v3 .work-link:focus-visible .frame img{transform:scale(1.035)}
.v3 .work-meta{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-top:14px}
.v3 .work-month{font-size:.95rem; line-height:1.35}
.v3 .work-brand{font-size:.8rem; color:var(--mute)}
.v3 .work-cta{flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line); border-radius:2px; font-size:.8rem; font-weight:600; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.v3 .work-link:hover .work-cta, .v3 .work-link:focus-visible .work-cta{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.v3 .work-bar{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap}
.v3 .work-note{font-size:.95rem}
.v3 .work-note b{font-weight:500}
.v3 .work-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.v3 .work-count{font-size:.82rem; color:var(--mute); min-width:52px}
.v3 .work-count b{color:var(--paper); font-weight:600}
.v3 .work-progress{position:relative; width:72px; height:1px; background:var(--line); margin-right:6px; overflow:hidden}
.v3 .work-progress i{position:absolute; inset:0; background:var(--paper); transform-origin:left; transform:scaleX(0)}
.v3 .work-progress i.run{animation:workprog var(--dur,4000ms) linear forwards}
@keyframes workprog{to{transform:scaleX(1)}}
.v3 .work-btn{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer; transition:border-color .2s}
.v3 .work-btn:hover{border-color:var(--paper)}
.v3 .work-btn svg{width:16px; height:16px; fill:none; stroke:var(--paper); stroke-width:1.5}
.v3 .work-btn .i-play{display:none; fill:var(--paper); stroke:none}
.v3 .work-btn[aria-pressed="true"] .i-play{display:block}
.v3 .work-btn[aria-pressed="true"] .i-pause{display:none}
.v3 .work-more{min-height:42px; padding:0 18px; font-size:.85rem; margin-left:6px}
@media (max-width:1100px){ .v3 .work-track{--per:2.35} }
@media (max-width:640px){
  .v3 .work-track{--per:1.22; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); padding:0 var(--pad); scroll-padding-left:var(--pad)}
  .v3 .work-bar{flex-direction:column; align-items:flex-start}
  .v3 .work-controls{width:100%}
  .v3 .work-more{margin-left:auto}
  .v3 .work-progress{display:none}
}

html.js .v3 .hero .ln > span{transform:translateY(105%); transition:transform 1.1s var(--ease)}
html.js .v3 .hero .fade{opacity:0; transition:opacity 1s var(--ease)}
html.js.loaded .v3 .hero .ln > span{transform:none}
html.js.loaded .v3 .hero .ln:nth-child(2) > span{transition-delay:.08s}
html.js.loaded .v3 .hero .ln:nth-child(3) > span{transition-delay:.16s}
html.js.loaded .v3 .hero .fade{opacity:1; transition-delay:.45s}

/* ============ PAIN ============ */
.v3 .pains{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.v3 .pains li{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:baseline; padding:clamp(18px,2.4vw,28px) 0; border-bottom:1px solid var(--line)}
.v3 .pains .q{grid-column:1 / span 7; font-family:var(--display); font-size:clamp(1.6rem,3.4vw,3.2rem); letter-spacing:-.02em; line-height:1.05; color:var(--paper)}
.v3 .pains .a{grid-column:8 / span 5; color:var(--mute); font-size:clamp(1rem,1.3vw,1.15rem)}
@media (max-width:760px){
  .v3 .pains li{grid-template-columns:1fr; gap:6px}
  .v3 .pains .q, .v3 .pains .a{grid-column:1}
}
.v3 .better{margin-top:clamp(64px,8vw,112px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end}
.v3 .better p{grid-column:1 / span 8; font-family:var(--display); font-size:clamp(2rem,4.6vw,4.4rem); letter-spacing:-.02em; line-height:1; color:var(--dim)}
.v3 .better p span{color:var(--paper)}
.v3 .better a{grid-column:10 / span 3; justify-self:end}
@media (max-width:860px){ .v3 .better p, .v3 .better a{grid-column:1 / -1; justify-self:start} }

/* ============ POSITIONING ============ */
.v3 .position-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px}
.v3 .answer-lines{grid-column:1 / span 5; list-style:none; margin:0; padding:0}
.v3 .answer-lines li{font-family:var(--display); font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.1; padding:18px 0; border-top:1px solid var(--ink)}
.v3 .isnot{grid-column:7 / span 6}
.v3 .isnot h3{font-size:.85rem; font-weight:600; color:var(--mute-ink); margin-bottom:12px}
.v3 .isnot ul{list-style:none; margin:0; padding:0}
.v3 .isnot li{padding:16px 0; border-top:1px solid var(--line-ink); display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.v3 .isnot li s{font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--mute-ink); text-decoration-thickness:1px}
.v3 .isnot li small{font-size:.82rem; color:var(--mute-ink); text-align:right}
.v3 .isnot .is{margin-top:24px; padding:24px; background:var(--ink); color:var(--paper)}
.v3 .isnot .is b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.1; margin-bottom:8px}
.v3 .isnot .is span{color:var(--soft); font-size:.95rem}
@media (max-width:900px){ .v3 .answer-lines, .v3 .isnot{grid-column:1 / -1} .v3 .isnot{margin-top:40px} }

/* ============ HOW IT WORKS ============ */
.v3 .cycle ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.v3 .cycle li{padding:28px 28px 0 0}
.v3 .cycle li + li{padding-left:28px; border-left:1px solid var(--line)}
.v3 .cycle .n{font-size:.8rem; color:var(--mute)}
.v3 .cycle h3{font-family:var(--display); font-weight:400; font-size:clamp(2rem,3.4vw,3.4rem); letter-spacing:-.02em; margin:10px 0 14px}
.v3 .cycle p{font-size:.95rem; color:var(--soft); max-width:22em}
.v3 .cycle li.repeat h3::after{content:""; display:inline-block; width:.5em; height:.5em; margin-left:.25em; border-radius:50%; background:var(--gold); vertical-align:.12em}
.v3 .loop{margin-top:40px; display:flex; align-items:center; gap:16px; color:var(--mute); font-size:.92rem}
.v3 .loop svg{flex:1; height:28px; min-width:60px}
.v3 .loop path{stroke:var(--mute); stroke-width:1; fill:none}
@media (max-width:900px){
  .v3 .cycle ol{grid-template-columns:1fr}
  .v3 .cycle li, .v3 .cycle li + li{padding:22px 0; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:48px 1fr; gap:0 12px}
  .v3 .cycle li .n{padding-top:10px}
  .v3 .cycle h3{margin:0 0 6px}
  .v3 .loop span:first-child{display:none}
}

/* ============ EVERY PLAN INCLUDES ============ */
.v3 .includes{margin-top:clamp(48px,6vw,90px)}
.v3 .inc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line)}
.v3 .inc-grid div{padding:30px 30px 34px 0; border-bottom:1px solid var(--line)}
.v3 .inc-grid div:not(:nth-child(3n+1)){padding-left:30px; border-left:1px solid var(--line)}
.v3 .inc-grid h3{font-family:var(--display); font-weight:400; font-size:clamp(1.25rem,1.7vw,1.6rem); line-height:1.1; margin-bottom:12px}
.v3 .inc-grid p{font-size:.95rem; color:var(--mute); max-width:24em}
@media (max-width:900px){
  .v3 .inc-grid{grid-template-columns:1fr}
  .v3 .inc-grid div, .v3 .inc-grid div:not(:nth-child(3n+1)){padding:22px 0; border-left:0}
}

/* ============ LEVELS ============ */
.v3 .levels-intro{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-bottom:36px; align-items:end}
.v3 .matcher{grid-column:1 / span 8}
.v3 .matcher fieldset{border:0; margin:0; padding:0}
.v3 .matcher legend{font-weight:600; font-size:.95rem; margin-bottom:14px; padding:0}
.v3 .chips{display:flex; flex-wrap:wrap; gap:8px}
.v3 .chip{position:relative}
.v3 .chip input{position:absolute; opacity:0; inset:0; cursor:pointer}
.v3 .chip span{display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:0 16px; border:1px solid var(--line-ink); border-radius:2px; font-size:.88rem; transition:background .2s,color .2s,border-color .2s}
.v3 .chip span::before{content:""; width:10px; height:10px; border:1px solid currentColor}
.v3 .chip input:checked + span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.v3 .chip input:checked + span::before{background:var(--gold); border-color:var(--gold)}
.v3 .chip input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.v3 .match-out{grid-column:9 / span 4; font-size:.95rem; min-height:1.6em; text-align:right}
.v3 .match-out strong{font-family:var(--display); font-weight:400; font-size:1.3rem}
@media (max-width:860px){ .v3 .matcher, .v3 .match-out{grid-column:1 / -1; text-align:left} }

.v3 .level-index{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink)}
.v3 .level-index button{background:none; border:0; padding:14px 0; text-align:left; cursor:pointer; font-size:.85rem; color:var(--mute-ink); display:flex; gap:10px; align-items:baseline; border-top:3px solid transparent; margin-top:-2px; transition:color .2s,border-color .3s}
.v3 .level-index button b{font-weight:600; color:var(--ink)}
.v3 .level-index button[aria-current="true"]{border-top-color:var(--ink); color:var(--ink)}

.v3 .levels-track{display:flex; height:780px; border-top:1px solid var(--line-ink); border-bottom:1px solid var(--line-ink)}
.v3 .level{position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:var(--paper); color:var(--ink); border-left:1px solid var(--line-ink); transition:flex-grow .75s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.v3 .level:first-child{border-left:0}
.v3 .level.is-open{flex-grow:5.4; background:var(--ink); color:var(--paper)}
.v3 .level h3{font-weight:400; margin:0}
.v3 .level-toggle{position:absolute; inset:0 0 72px 0; width:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:12px; padding:28px 24px; background:none; border:0; text-align:left; cursor:pointer}
.v3 .level-num{font-size:.85rem; font-weight:600}
.v3 .level-name{font-family:var(--display); font-size:clamp(2.4rem,3.6vw,3.8rem); letter-spacing:-.02em; line-height:1; writing-mode:vertical-rl; transform:rotate(180deg); transition:transform .4s var(--ease); animation:nameA .6s var(--ease) both}
.v3 .level:not(.is-open) .level-toggle:hover .level-name{transform:rotate(180deg) translateY(6px)}
.v3 .level-formula{font-size:.85rem; color:var(--mute-ink); line-height:1.35}
.v3 .level-tag{display:none}
.v3 .level.is-open .level-toggle{inset:0 0 auto 0; flex-direction:row; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; gap:8px 22px; padding:30px 36px 0; cursor:default}
.v3 .level.is-open .level-name{writing-mode:horizontal-tb; transform:none; animation:nameB .6s .2s var(--ease) both}
.v3 .level.is-open .level-formula{color:var(--mute); margin-left:auto}
.v3 .level.is-open .level-tag{display:inline-block; align-self:center; font-size:.72rem; font-weight:600; padding:3px 9px; border:1px solid var(--gold); color:var(--gold)}
@keyframes nameA{from{opacity:0}to{opacity:1}}
@keyframes nameB{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.v3 .level-body{position:absolute; top:116px; left:0; right:0; bottom:72px; padding:0 36px 28px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:36px; opacity:0; visibility:hidden; transition:opacity .3s,visibility 0s .3s}
.v3 .level.is-open .level-body{opacity:1; visibility:visible; transition:opacity .6s .38s var(--ease),visibility 0s}
.v3 .level-copy{display:flex; flex-direction:column; min-height:0}
.v3 .level-tagline{font-family:var(--display); font-size:clamp(1.3rem,1.8vw,1.7rem); line-height:1.1; max-width:18em}
.v3 .level-for{margin-top:12px; font-size:.93rem; color:var(--soft); max-width:30em}
.v3 .level-scope{margin-top:20px}
.v3 .level-scope h4{margin:0 0 6px; font-size:.8rem; font-weight:600; color:var(--mute)}
.v3 .level-scope ul{list-style:none; margin:0; padding:0; columns:2; column-gap:28px}
.v3 .level-scope li{font-size:.9rem; padding:7px 0; border-top:1px solid var(--line); display:flex; gap:10px; break-inside:avoid}
.v3 .level-scope li::before{content:""; flex:0 0 6px; height:6px; margin-top:.6em; background:currentColor}
.v3 .level-note{margin-top:14px; font-size:.85rem; color:var(--mute)}
.v3 .level-diff{margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between}
.v3 .level-diff p{font-size:.9rem; color:var(--soft); max-width:22em; padding-left:14px; border-left:2px solid var(--gold)}
.v3 .level-body .frame{height:100%}
.v3 .level-body .frame figcaption{position:absolute; left:14px; bottom:12px; font-size:.75rem; color:var(--paper); background:rgba(10,10,10,.6); padding:4px 8px}

.v3 .layers{position:absolute; left:0; right:0; bottom:0; height:72px; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; align-items:center}
.v3 .level.is-open .layers{padding:0 36px}
.v3 .layers span{display:block; height:4px; background:var(--line-ink); position:relative}
.v3 .layers span.on{background:var(--ink)}
.v3 .level.is-open .layers span{background:#2a2a2c}
.v3 .level.is-open .layers span.on{background:var(--gold)}
.v3 .layers em{position:absolute; top:10px; left:0; font-style:normal; font-size:.72rem; color:var(--mute); white-space:nowrap; opacity:0; transition:opacity .4s}
.v3 .level.is-open .layers em{opacity:1; transition-delay:.5s}
.v3 .levels-note{margin-top:20px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:.88rem; color:var(--mute-ink)}

@media (max-width:1199px) and (min-width:960px){
  .v3 .level-body{grid-template-columns:1fr}
  .v3 .level-body .frame{display:none}
}
@media (max-width:959px){
  .v3 .level-index{position:sticky; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); z-index:5; background:var(--paper)}
  .v3 .level-index button{flex-direction:column; gap:0; font-size:.78rem; padding:10px 0}
  .v3 .level-index .fx{display:none}
  .v3 .levels-track{height:auto; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; border:0; padding:16px var(--pad) 8px; margin:0 calc(var(--pad) * -1); scroll-padding-left:var(--pad); scrollbar-width:none}
  .v3 .levels-track::-webkit-scrollbar{display:none}
  .v3 .level, .v3 .level.is-open{flex:0 0 86%; scroll-snap-align:start; border:1px solid var(--line-ink); background:var(--paper); color:var(--ink); display:flex; flex-direction:column}
  .v3 .level[data-level="2"]{border-color:var(--ink); border-width:2px}
  .v3 .level:first-child{border-left:1px solid var(--line-ink)}
  .v3 .level-toggle, .v3 .level.is-open .level-toggle{position:static; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:6px 14px; padding:22px 20px 14px; cursor:default}
  .v3 .level-name, .v3 .level.is-open .level-name{writing-mode:horizontal-tb; transform:none; font-size:2.2rem; animation:none}
  .v3 .level-formula, .v3 .level.is-open .level-formula{margin-left:0; flex-basis:100%; color:var(--mute-ink); font-size:.82rem}
  .v3 .level-tag, .v3 .level.is-open .level-tag{display:inline-block; font-size:.7rem; font-weight:600; padding:2px 8px; border:1px solid var(--ink); color:var(--ink)}
  .v3 .level-body, .v3 .level.is-open .level-body{position:static; opacity:1; visibility:visible; display:flex; flex-direction:column; gap:0; padding:0 20px 20px; transition:none}
  .v3 .level-body .frame{order:-1; height:auto; aspect-ratio:16 / 10; margin-bottom:18px; display:block}
  .v3 .level-for, .v3 .level-note{color:var(--mute-ink)}
  .v3 .level-diff p{color:var(--mute-ink)}
  .v3 .level-scope ul{columns:1}
  .v3 .level-scope li{border-color:var(--line-ink)}
  .v3 .level-diff{margin-top:20px}
  .v3 .level-diff .btn{width:100%}
  .v3 .layers, .v3 .level.is-open .layers{position:static; height:auto; padding:0 20px 34px; margin-top:auto}
  .v3 .level.is-open .layers span{background:var(--line-ink)}
  .v3 .level.is-open .layers span.on, .v3 .layers span.on{background:var(--ink)}
  .v3 .layers em, .v3 .level.is-open .layers em{opacity:1; color:var(--mute-ink)}
}

/* ============ MATRIX ============ */
.v3 .matrix-wrap{margin-top:clamp(48px,6vw,90px)}
.v3 .matrix-tabs{display:none}
.v3 .matrix{width:100%; border-collapse:collapse; font-size:.93rem}
.v3 .matrix th, .v3 .matrix td{padding:13px 12px; text-align:left; border-top:1px solid var(--line-ink); vertical-align:middle}
.v3 .matrix thead th{border-top:0; border-bottom:1px solid var(--ink); font-weight:600; vertical-align:bottom; padding-bottom:14px}
.v3 .matrix thead th span{display:block; font-family:var(--display); font-weight:400; font-size:1.5rem; line-height:1}
.v3 .matrix thead th small{display:block; font-weight:500; color:var(--mute-ink); font-size:.75rem; margin-top:6px}
.v3 .matrix tbody th{font-weight:400}
.v3 .matrix tr.group th{font-family:var(--display); font-weight:400; font-size:1.05rem; padding-top:30px; border-top:0}
.v3 .matrix td{text-align:center; width:15%}
.v3 .matrix thead th:not(:first-child){text-align:center}
.v3 .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--ink)}
.v3 .dot.add{background:none; border:1px solid var(--mute-ink)}
.v3 .matrix[data-show="1"] tr > :nth-child(2), .v3 .matrix[data-show="2"] tr > :nth-child(3), .v3 .matrix[data-show="3"] tr > :nth-child(4), .v3 .matrix[data-show="4"] tr > :nth-child(5){background:rgba(10,10,10,.045)}
.v3 .matrix tr.group > th{background:none !important}
.v3 .legend{display:flex; gap:24px; margin-top:18px; font-size:.85rem; color:var(--mute-ink); flex-wrap:wrap}
.v3 .legend span{display:inline-flex; align-items:center; gap:8px}
@media (max-width:760px){
  .v3 .matrix-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:12px}
  .v3 .matrix-tabs button{background:none; border:1px solid var(--line-ink); padding:10px 4px; font-size:.8rem; cursor:pointer; border-radius:2px}
  .v3 .matrix-tabs button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .v3 .matrix tr > :nth-child(n+2){display:none}
  .v3 .matrix[data-show="1"] tr > :nth-child(2), .v3 .matrix[data-show="2"] tr > :nth-child(3), .v3 .matrix[data-show="3"] tr > :nth-child(4), .v3 .matrix[data-show="4"] tr > :nth-child(5){display:table-cell; background:none}
  .v3 .matrix tr.group > th{display:table-cell}
  .v3 .matrix td{width:30%}
}

/* ============ A MONTH ============ */
.v3 .months{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line)}
.v3 .month{padding:30px 28px 8px 0; display:flex; flex-direction:column}
.v3 .month + .month{padding-left:28px; border-left:1px solid var(--line)}
.v3 .month .when{font-size:.82rem; color:var(--mute)}
.v3 .month h3{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.1vw,2.1rem); letter-spacing:-.02em; line-height:1.02; margin:10px 0 14px}
.v3 .month .formula{font-size:.95rem; color:var(--soft); min-height:4.8em}
.v3 .mix{display:flex; height:8px; gap:3px; margin:22px 0 10px}
.v3 .mix i{display:block; height:100%; width:0; transition:width 1.2s var(--ease)}
.v3 .mix.in i{width:var(--w)}
.v3 .mix i:nth-child(1){background:var(--paper)}
.v3 .mix i:nth-child(2){background:var(--mute)}
.v3 .mix i:nth-child(3){background:#4a4a50}
.v3 .mix-cap{font-size:.75rem; color:var(--mute)}
.v3 .month dl{margin:22px 0 0}
.v3 .month dt{font-size:.78rem; color:var(--mute); padding-top:12px; border-top:1px solid var(--line)}
.v3 .month dd{margin:4px 0 12px; font-size:.95rem}
.v3 .months-foot{margin-top:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.v3 .months-foot p{font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2.2rem); letter-spacing:-.01em; line-height:1.1; max-width:20em}
.v3 .mix-legend{display:flex; gap:20px; flex-wrap:wrap; font-size:.82rem; color:var(--mute); margin-top:24px}
.v3 .mix-legend span{display:inline-flex; align-items:center; gap:8px}
.v3 .mix-legend span::before{content:""; width:14px; height:6px; background:var(--c)}
@media (max-width:1100px){
  .v3 .months{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1); padding:0 var(--pad); border-top:0; scrollbar-width:none; gap:12px}
  .v3 .months::-webkit-scrollbar{display:none}
  .v3 .month, .v3 .month + .month{flex:0 0 min(80%,360px); scroll-snap-align:start; padding:24px; border:1px solid var(--line)}
}

/* ============ SCALE UP ============ */
.v3 .addons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px}
.v3 .addon-group h3{font-family:var(--display); font-weight:400; font-size:1.3rem; padding-bottom:16px; border-bottom:1px solid var(--ink)}
.v3 .addon-group ul{list-style:none; margin:0; padding:0}
.v3 .addon-group li{padding:16px 0; border-bottom:1px solid var(--line-ink)}
.v3 .addon-group li strong{display:block; font-weight:600; font-size:1rem}
.v3 .addon-group li span{font-size:.88rem; color:var(--mute-ink)}
.v3 .addons-foot{margin-top:48px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
@media (max-width:900px){ .v3 .addons{grid-template-columns:1fr; gap:40px} }

/* ============ WHY MONTHLY ============ */
.v3 .why{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line)}
.v3 .why div{padding:clamp(28px,4vw,48px) clamp(24px,4vw,48px) clamp(28px,4vw,48px) 0; border-bottom:1px solid var(--line)}
.v3 .why div:nth-child(even){padding-left:clamp(24px,4vw,48px); border-left:1px solid var(--line)}
.v3 .why h3{font-family:var(--display); font-weight:400; font-size:clamp(2rem,4vw,3.6rem); letter-spacing:-.02em; line-height:1; margin-bottom:16px}
.v3 .why p{color:var(--mute); max-width:24em}
@media (max-width:760px){
  .v3 .why{grid-template-columns:1fr}
  .v3 .why div, .v3 .why div:nth-child(even){padding:26px 0; border-left:0}
}

/* ============ FAQ ============ */
.v3 .faq{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px}
.v3 .faq-head{grid-column:1 / span 4; position:sticky; top:calc(var(--header-h) + 32px); align-self:start}
.v3 .faq-head p{margin-top:20px; color:var(--mute-ink); max-width:22em}
.v3 .faq-list{grid-column:6 / span 7; border-top:1px solid var(--ink)}
.v3 .faq details{border-bottom:1px solid var(--line-ink)}
.v3 .faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-weight:600; font-size:1.05rem}
.v3 .faq summary::-webkit-details-marker{display:none}
.v3 .faq summary::after{content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px; background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat; transition:transform .35s var(--ease)}
.v3 .faq details[open] summary::after{transform:rotate(45deg)}
.v3 .faq .answer{padding:0 0 24px; max-width:40em; color:#333338}
.v3 .faq .answer p + p{margin-top:10px}
@media (max-width:900px){ .v3 .faq{grid-template-columns:1fr} .v3 .faq-head, .v3 .faq-list{grid-column:1; position:static} }

/* ============ FINAL CTA + FORM ============ */
.v3 #plan{position:relative; overflow:hidden}
.v3 #plan .halo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120vw; height:70vh;
 background:radial-gradient(closest-side,rgba(95,81,153,.4),transparent 72%); filter:blur(24px)}
.v3 .enquire-grid{position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px}
.v3 .enquire-copy{grid-column:1 / span 5}
.v3 .enquire-copy h2{font-size:clamp(2.4rem,5vw,5rem)}
.v3 .enquire-copy .lead{margin-top:24px; color:var(--soft)}
.v3 .direct{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:.95rem; color:var(--mute)}
.v3 .direct a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
.v3 .direct a:hover{border-color:var(--paper)}
.v3 .form{grid-column:7 / span 6}
.v3 .form fieldset{border:0; margin:0 0 30px; padding:0}
.v3 .form legend{font-weight:600; font-size:.95rem; margin-bottom:14px; padding:0}
.v3 .fields{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.v3 .field{display:flex; flex-direction:column; margin-bottom:20px}
.v3 .field.full{grid-column:1 / -1}
.v3 .field label{font-size:.82rem; color:var(--mute); margin-bottom:6px}
.v3 .field input, .v3 .field select, .v3 .field textarea{font:inherit; font-size:1rem; color:var(--paper); background:transparent; border:0; border-bottom:1px solid var(--line); padding:10px 0; border-radius:0}
.v3 .field select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%); background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:28px}
.v3 .field select option{background:var(--ink); color:var(--paper)}
.v3 .field textarea{min-height:110px; resize:vertical}
.v3 .field input:focus, .v3 .field select:focus, .v3 .field textarea:focus{outline:none; border-bottom-color:var(--gold)}
.v3 .field .opt{color:#6d6c74}
.v3 .checks{display:flex; flex-wrap:wrap; gap:8px}
.v3 .checks label{position:relative}
.v3 .checks input{position:absolute; opacity:0; inset:0; cursor:pointer}
.v3 .checks span{display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:2px; font-size:.88rem; transition:background .2s,color .2s,border-color .2s}
.v3 .checks span::before{content:""; width:9px; height:9px; border:1px solid currentColor}
.v3 .checks input[type=radio] + span::before{border-radius:50%}
.v3 .checks input:checked + span{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.v3 .checks input:checked + span::before{background:var(--ink)}
.v3 .checks input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}
.v3 .form-error{color:var(--gold); font-size:.85rem; min-height:1.2em; margin-top:8px}
.v3 .form-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.v3 .form-foot p{font-size:.8rem; color:var(--mute); max-width:24em}
.v3 .success{display:none; border:1px solid var(--line); padding:40px}
.v3 .success h3{font-family:var(--display); font-weight:400; font-size:2rem; margin-bottom:12px}
.v3 .success p{color:var(--soft)}
.v3 .form.sent .form-inner{display:none}
.v3 .form.sent .success{display:block}
@media (max-width:980px){ .v3 .enquire-grid{grid-template-columns:1fr; gap:56px} .v3 .enquire-copy, .v3 .form{grid-column:1} }
@media (max-width:560px){ .v3 .fields{grid-template-columns:1fr} .v3 .form-foot .btn{width:100%} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .v3 *, .v3 *::before, .v3 *::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important}
  .v3 .rule{transform:none}
  .v3 .frame.clip img{clip-path:none}
  .v3 .work-progress{display:none}
  .v3 .mix i{width:var(--w)}
  html.js .v3 .hero .ln > span{transform:none}
  html.js .v3 .hero .fade{opacity:1}
}

/* ============ MATCH THE SITE'S TYPE + FIXES ============ */
/* Same uppercase display treatment the rest of the site uses for its headings. */
.v3 .h1-main,.v3 .better p,.v3 .pains .q,.v3 .cycle h3,.v3 .why h3,.v3 .month h3,.v3 .inc-grid h3,
.v3 .addon-group h3,.v3 .answer-lines li,.v3 .level-name,.v3 .level-tagline,.v3 .isnot .is b,.v3 .months-foot p{text-transform:uppercase; letter-spacing:-.025em}
.v3 .better{margin-top:clamp(36px,5vw,64px)}
/* alp.css styles .chip as a white-text button for the dark quote form; this page's level matcher
   uses label chips on a light section, so reset that and give them readable dark text. */
.v3 .chip{color:var(--ink); border:0; padding:0; background:none; font-size:inherit; cursor:pointer}
.v3 .chip span{color:var(--ink); border-color:rgba(10,10,10,.28); font-weight:500}