/* ============================================================================
   about-subscriptions.css — the page that explains what a membership is.
   Every selector is scoped under .as-* so nothing here can reach Home or any
   other route. Tokens, fonts, .wrap, the nav and the footer all come from
   base.css; this file only styles this page's sections.

   Sections alternate navy (the body colour) and cream so the page reads as
   blocks rather than one long column. The FAQ uses native <details>, so it opens
   with scripts blocked; the reveals are gated on html.as-anim, which the page
   script sets, so nothing is ever left invisible if that script fails to load.
   ============================================================================ */

/* section rhythm ---------------------------------------------------------- */
.as-sec{padding:clamp(24px,2.8vw,40px) 0}
.as-sec h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(1.85rem,3.5vw,2.9rem);margin:0;max-width:20ch;text-wrap:balance}
.as-sec-lead{margin:clamp(10px,1.2vw,14px) 0 0;max-width:68ch;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.62}

/* ------------------------------------------------------------------ HERO -- */
.as-hero{background:#071436;padding:clamp(120px,11vh,138px) 0 clamp(36px,4.4vw,56px);position:relative;overflow:hidden;
  min-height:clamp(480px,64vh,700px);display:flex;align-items:center}
/* The photograph is the hero's ground: it already fades to navy across its left
   third, which is where the copy sits. Bleeds to both edges, behind everything. */
.as-hero-media{position:absolute;inset:0;margin:0;z-index:0}
/* The photograph is 2.1:1 and the hero is wider than that, so cover crops it top
   and bottom — centred, that cut took the tops of both heads. Anchored high
   instead, and the zoom grows from the same point so it never creeps back down. */
.as-hero-media img{width:100%;height:100%;object-fit:cover;object-position:right 16%;display:block;
  transform-origin:78% 22%;transform:scale(1);
  animation:as-hero-zoom 38s ease-in-out infinite alternate;will-change:transform}
@keyframes as-hero-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
/* Narrower viewports crop that built-in fade out of frame, so the wash is drawn
   here too — enough to hold white text, not enough to flatten the picture. */
.as-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#071436 0%,rgba(7,20,54,.94) 30%,rgba(7,20,54,.55) 58%,rgba(7,20,54,0) 92%)}
.as-hero-wrap{position:relative;z-index:1;width:100%}
.as-eyebrow{margin-bottom:20px}
.as-hero .as-eyebrow .etrack span,.as-hero .as-eyebrow .etrack i{color:#fff}
.as-hero h1{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.6rem,6.4vw,5rem);margin:0;max-width:16ch;text-wrap:balance}
.as-hero h1 .r{color:var(--gold-hi)}
.as-lead{margin:clamp(18px,2.4vw,26px) 0 0;max-width:62ch;font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.6}
.as-sub{margin:14px 0 0;max-width:60ch;font-size:clamp(.95rem,1.2vw,1.02rem);line-height:1.6;color:var(--muted)}

/* eyebrow marquees ---------------------------------------------------------
   Red on the light fields, amber on the navy ones, as elsewhere on the site. */
.as-sec .as-eyebrow{margin-bottom:14px}
.as-what .etrack,.as-billing .etrack{color:var(--gold-hi)}
.as-how .etrack,.as-faq .etrack,.as-cta-card .etrack{color:var(--amber)}

/* scroll reveal ------------------------------------------------------------
   Only under html.as-anim, which assets/js/pages/about-subscriptions.js adds.
   Without the script — or with reduced motion — the content simply renders.
   Each element is watched on its own and loses .is-in once it is fully out of
   view, so a block plays again every time you come back to it. */
html.as-anim .as-rev{opacity:0;transform:translateY(22px);
  transition:opacity 1.1s var(--e),transform 1.1s var(--e);transition-delay:var(--d,0ms)}
html.as-anim .as-rev.is-in{opacity:1;transform:none}

/* The two plan cards slide in from off the edge of the screen, one just behind the other,
   matching the Home pricing block.

   The GRID is what the reveal watches, not the cards. A card parked off the screen never
   intersects the viewport, so watching the card means waiting for a signal that only the
   reveal itself could produce — on a phone, where the cards clear the screen completely,
   they simply never arrived. The grid never moves, so it always fires.

   180vw puts a card fully off the screen whichever way it goes, and clears the sideways
   scroll row on a phone, where a card can start beyond the visible strip. html and body
   carry overflow-x:clip, so neither direction can add a horizontal scrollbar.

   The .is-in rule is deliberately LAST in this block. It has the same specificity as the
   :nth-child starts above it, so source order is what lets "arrived" win over them —
   including over the ones inside the media query. */
html.as-anim .as-rev.sc-stage{opacity:1;transform:none;transition:none}
/* On a WIDE screen the pair converges: the first card from the left edge, the second from
   the right, both at once, as on Home. Neither carries a delay — they come from opposite
   directions and meet in the middle, so they never cross and there is nothing to queue. */
html.as-anim .sc-stage .subcard{opacity:0;transform:translateX(-180vw);
  transition:opacity 1.4s var(--e),transform 1.4s var(--e);transition-delay:var(--d,0ms)}
html.as-anim .sc-stage .subcard:nth-child(2){transform:translateX(180vw)}

/* On a phone both cards come from the LEFT: the pair becomes a sideways scroll row here,
   and a card starting off to its right would widen that row. Travelling the same way, they
   would slide over each other if they moved together, so here they go one at a time — the
   SECOND card in the markup, the red one, first, which is why the delay sits on the first.
   They also cover a much shorter distance, so at the desktop timing one was home almost as
   soon as it appeared: a little longer here.

   The two moves are not equals here. The strip the visitor is looking at is where the FIRST
   card — the blue one — belongs, so the red one only PASSES THROUGH it on its way to its
   own place off to the right, where all that shows of it is an edge. Red is therefore
   quicker, a pass rather than an arrival, and blue is the slower, later move that lands in
   the strip and stays. Giving them the same move made red the performance and left the eye
   on it, when the card the visitor should end on is blue.

   Blue's 700ms delay against red's 1000ms travel is not an overlap: the easing puts a card
   visually in place at about 80% of its run, and blue then spends the first third of its
   own run still off the screen, because it starts 1.8 screens out. So blue does not become
   visible until red has parked, and the still moment between them is about a third of a
   second. Timing the wait from the end of the travel instead, as this once did, read as a
   pause three times as long as asked for. Matches PASS and STEP in assets/js/pages/home.js.

   translate3d rather than translateX so the card travels on its own compositing layer: a
   phone repainting a full-width card and its shadow on every frame of a 180vw slide is
   what a stutter is made of. */
@media(max-width:900px){
  html.as-anim .sc-stage .subcard{will-change:transform}
  html.as-anim .sc-stage .subcard:nth-child(2){transform:translate3d(-180vw,0,0);
    transition-duration:1s,1s}
  html.as-anim .sc-stage .subcard:nth-child(1){transform:translate3d(-180vw,0,0);
    transition-duration:1.5s,1.5s;--d:700ms}
}

/* The pale placeholder slots, on only while there is an entrance to wait for — base.css
   keeps them hidden otherwise, and hides them altogether below 981px, where the row is one
   column or a sideways scroller. The delay lets them hold the space until the cards are
   nearly home, so they are gone by the time the cards settle on them. */
html.as-anim .sc-stage .sub-ghost{opacity:1}
html.as-anim .sc-stage.is-in .sub-ghost{opacity:0;transition-delay:1s}

/* arrived — must stay after every start position above */
html.as-anim .sc-stage.is-in .subcard{opacity:1;transform:none}

/* Inside a staggered block the children arrive one after another rather than
   the whole grid at once. The delay is per position, so the markup carries no
   inline timing and the order survives any reflow to one column.

   The gap shrinks as it goes — 150ms, then 130, 110, 90 and down — instead of a
   fixed step. A fixed step read as the tail lagging, and on a long block it
   genuinely was: every item is watched on its own, so an eighth row already
   arrives later because it scrolls in later, and a flat delay then made it wait
   another second on top of that. Decaying keeps the first few clearly in
   sequence and lets the rest land together. */
.as-stagger>.as-rev:nth-child(1){--d:0ms}
.as-stagger>.as-rev:nth-child(2){--d:150ms}
.as-stagger>.as-rev:nth-child(3){--d:280ms}
.as-stagger>.as-rev:nth-child(4){--d:390ms}
.as-stagger>.as-rev:nth-child(5){--d:480ms}
.as-stagger>.as-rev:nth-child(6){--d:550ms}
.as-stagger>.as-rev:nth-child(7){--d:600ms}
.as-stagger>.as-rev:nth-child(n+8){--d:630ms}
/* cards lift in from a touch further down than a heading does */
html.as-anim .as-grid>.as-rev,html.as-anim .as-steps>.as-rev,html.as-anim .as-faq-list>.as-rev{transform:translateY(26px)}
html.as-anim .as-grid>.as-rev.is-in,html.as-anim .as-steps>.as-rev.is-in,html.as-anim .as-faq-list>.as-rev.is-in{transform:none}
/* the billing rows sit in one clipped panel, so they slide from the side instead */
html.as-anim .as-rows>.as-rev{transform:translateX(-18px)}
html.as-anim .as-rows>.as-rev.is-in{transform:none}

/* buttons ----------------------------------------------------------------- */
.as-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
.as-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;
  padding:14px 26px;font-weight:800;font-size:.98rem;letter-spacing:-.01em;
  transition:transform .3s var(--e),background .3s var(--e),color .3s var(--e),box-shadow .3s var(--e)}
.as-btn:hover,.as-btn:focus-visible{transform:translateY(-2px)}
.as-btn-primary{background:var(--gold);color:#fff;box-shadow:0 16px 30px -16px rgba(200,16,46,.8)}
.as-btn-primary:hover,.as-btn-primary:focus-visible{background:var(--gold-hi)}
.as-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
.as-btn-ghost:hover,.as-btn-ghost:focus-visible{box-shadow:inset 0 0 0 2px #fff}

/* ------------------------------------------------------- WHAT YOU GET (cream) */
.as-what{background:var(--cream);color:var(--ink)}
/* Explicit column counts rather than auto-fit, because the note below has to know
   how many there are: at three columns the four cards leave one on its own with
   two empty cells beside it, and the note fills them instead of starting a row of
   its own under a gap. */
.as-grid{display:grid;gap:clamp(12px,1.5vw,20px);margin-top:clamp(18px,2.2vw,28px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.as-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.as-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.as-grid{grid-template-columns:minmax(0,1fr)}}
.as-card{background:#fff;border-radius:18px;padding:clamp(20px,2.2vw,28px);position:relative;
  box-shadow:0 18px 34px -26px rgba(10,31,77,.45);border:1px solid rgba(10,31,77,.07)}
.as-card-n,.as-note-n{font-family:'PlexMono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.2em;color:var(--gold);font-weight:700}
.as-card h3{margin:10px 0 8px;font-size:clamp(1.08rem,1.5vw,1.22rem);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.as-card p{margin:0;font-size:.97rem;line-height:1.6;color:rgba(10,31,77,.8)}

/* The one block that says what a membership is NOT. Laid out as label + copy,
   the same geometry as the billing rows further down, so the card is filled
   rather than leaving the right half of a full-width panel empty. */
.as-note{grid-column:1/-1;border-radius:18px;padding:clamp(20px,2.2vw,28px);
  background:#fff;border-left:5px solid var(--amber);box-shadow:0 18px 34px -28px rgba(10,31,77,.4);
  display:grid;grid-template-columns:minmax(150px,20%) 1fr;gap:10px clamp(14px,2.4vw,34px);align-items:start}
/* Where a card has its number, this has an exclamation mark: the same marker in
   the same place, so the heading below it lands on the cards' heading line
   instead of sitting a row higher. It only earns that place at three columns,
   where the note sits beside the fourth card — on its own full-width row there
   is no heading to line up with and the mark is just a stray line. */
.as-note-n{display:none}
/* three columns: the fourth card sits alone, so the note takes the two cells beside
   it — and only here does the marker have a heading to align with */
@media (min-width:901px) and (max-width:1180px){
  .as-note{grid-column:2/-1}
  .as-note-n{display:block;grid-column:1/-1}
}
.as-note h3{margin:0;font-size:1.08rem;font-weight:800;letter-spacing:-.015em;line-height:1.3}
.as-note p{margin:0;font-size:.99rem;line-height:1.62;color:rgba(10,31,77,.84)}

/* ------------------------------------------------------- HOW IT WORKS (navy) */
.as-steps{list-style:none;counter-reset:as-step;margin:clamp(18px,2.2vw,28px) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.as-steps li{counter-increment:as-step;position:relative;padding:clamp(20px,2.2vw,26px);border-radius:18px;
  background:rgba(255,255,255,.045);border:1px solid var(--line)}
.as-steps li::before{content:counter(as-step,decimal-leading-zero);display:block;
  font-family:'PlexMono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.2em;color:var(--amber);font-weight:700}
.as-steps h3{margin:10px 0 8px;font-size:clamp(1.08rem,1.5vw,1.22rem);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.as-steps p{margin:0;font-size:.97rem;line-height:1.62;color:var(--muted)}
.as-steps strong{color:#fff}

/* ---------------------------------------------------------- BILLING (cream) */
.as-billing{background:var(--cream);color:var(--ink)}
.as-rows{margin:clamp(18px,2.2vw,28px) 0 0;display:grid;gap:0;border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 20px 40px -30px rgba(10,31,77,.5)}
.as-row{display:grid;grid-template-columns:minmax(180px,26%) 1fr;gap:clamp(12px,2vw,28px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px);border-top:1px solid rgba(10,31,77,.09)}
.as-row:first-child{border-top:0}
.as-row dt{font-weight:800;font-size:1rem;letter-spacing:-.012em;line-height:1.35}
.as-row dd{margin:0;font-size:.99rem;line-height:1.62;color:rgba(10,31,77,.82)}
.as-row strong{color:var(--ink)}
/* the money-back row is the one people are looking for — give it the green tint */
.as-row-good{background:#eef7f0;border-top-color:rgba(23,110,60,.16)}
.as-row-good dt{color:#146c3a}

.as-legal{margin:clamp(16px,2vw,22px) 0 0;font-size:.93rem;line-height:1.6;color:rgba(10,31,77,.68)}
.as-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.as-legal a:hover{color:var(--gold-hi)}

/* --------------------------------------------------------------- FAQ (navy) */
/* Two columns. Grid rows align the pair by definition, and the default stretch
   gives both cards a row's full height — so with every answer open the two
   questions facing each other still sit on the same line. */
.as-faq-list{margin-top:clamp(18px,2.2vw,28px);display:grid;gap:clamp(10px,1.1vw,14px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.as-faq-list{grid-template-columns:minmax(0,1fr)}}
.as-q{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:14px;
  padding:0 clamp(16px,2vw,22px);transition:background .3s var(--e),border-color .3s var(--e)}
.as-q:hover{border-color:rgba(255,255,255,.30)}
.as-q[open]{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.28)}
.as-q summary{list-style:none;cursor:pointer;padding:clamp(15px,1.7vw,19px) 34px clamp(15px,1.7vw,19px) 0;
  position:relative;font-weight:700;font-size:clamp(1rem,1.3vw,1.08rem);letter-spacing:-.012em;line-height:1.4}
.as-q summary::-webkit-details-marker{display:none}
/* chevron, rotated when open */
.as-q summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e)}
.as-q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.as-q summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.as-q p{margin:0;padding:0 0 clamp(16px,1.9vw,21px);max-width:74ch;font-size:.98rem;line-height:1.64;color:var(--muted)}
.as-q a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.as-q a:hover{color:var(--amber)}

/* --------------------------------------------------------------- CTA (cream) */
.as-cta{background:var(--cream);color:var(--ink);padding:clamp(24px,2.8vw,40px) 0 clamp(20px,2.4vw,32px)}
/* The closing card the service pages use — copy on the left, the two buttons
   stacked and equal width on the right — in a lighter navy than theirs. */
.as-cta-card{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,48px);color:#fff;
  background:linear-gradient(150deg,#123a76 0%,#0b2755 72%);
  border:1px solid rgba(236,184,76,.3);border-radius:28px;
  padding:clamp(32px,4.6vw,58px) clamp(28px,4vw,56px);
  /* tight and short: the old 80px halo spread across the cream and made this
     section read as a different shade from the accreditation strip below it */
  box-shadow:0 20px 44px -26px rgba(6,15,42,.55)}
.as-cta-copy{flex:1 1 420px;max-width:640px}
.as-cta-card h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(2rem,4.2vw,3.2rem);margin:0;max-width:18ch;text-wrap:balance;color:#fff}
.as-cta-card p{margin:14px 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--muted)}
.as-cta-actions{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:14px}

/* ------------------------------------------------- ACCREDITATIONS (cream) -- */
/* Sits on the same cream as the CTA above it, so the two read as one closing
   band rather than a strip bolted on. .acmarq/.actrack come from base.css. */
.as-accred{background:var(--cream);padding:0 0 clamp(30px,4vw,52px)}
.as-accred .acmarq{margin-top:0}

/* --------------------------------------------------------------- narrow --- */
/* Phones: the picture is 2.1:1, so a tall hero crops hard to the right. Hold the
   two figures in frame and switch the wash to vertical, under the copy. */
@media (max-width:820px){
  .as-hero-media img{object-position:72% 14%}
  .as-hero-media::after{background:linear-gradient(180deg,rgba(7,20,54,.52) 0%,rgba(7,20,54,.90) 16%,rgba(7,20,54,.93) 58%,#071436 100%)}
}

@media (max-width:720px){
  /* label above value: at this width a 26% column leaves the text in a gutter */
  .as-row,.as-note{grid-template-columns:1fr;gap:8px}
  .as-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .as-hero-media img{animation:none;transform:none}
  .as-btn,.as-q,.as-q summary::after{transition:none}
  .as-btn:hover,.as-btn:focus-visible{transform:none}
}