/* ============================================================================
   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}

/* 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}
}