/* ══════════════════════════════════════════════════════════════
   AIDA PAGES REDESIGN (2026-10-31, Jill's notes: "a bunch of random boxes all over the screen").
   Used only by the AIDA collection: /academy/, /academy/curriculum/, /academy/ai/, /academy/support/,
   /academy/job-search/, /academy/find-the-time/, /aida-monthly/ and the AIDC page. Scoped to body.ar.
   Every rule carries :not(#_) ids so it wins over the older layout rules (text-layouts.css, aida.css) on these pages only.
   One pattern down every page:
     1. Every section opens with a centered head: H2 40px, one intro line 18.5px.
     2. The body is one of three shapes only: a card grid (equal columns, full rows), a split
        (two equal columns, vertically centered) or prose (760px, left-aligned text).
     3. One card style: white, 22px corners, the same hairline and shadow. Chips 14px, panels 32px.
     4. Sections are 140px apart on desktop, 96px on phones (S244, text-layouts.css).
   The AIDA tabs sit right under the hero and stay under the main menu as you scroll.
   REVERT: remove the <link> to this file (and the .js) from those pages.
   ══════════════════════════════════════════════════════════════ */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c){
  --ar-wide:1080px; --ar-narrow:760px;
  --ar-r-chip:14px; --ar-r-card:22px; --ar-r-panel:32px;
  --ar-line:rgba(31,58,77,.10);
  --ar-shadow:0 18px 40px -30px rgba(20,44,60,.55), 0 2px 6px -4px rgba(20,44,60,.12);
  --ar-copper:#8A4F2E;
}

/* ── 1. Section heads: always centered, same sizes ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head,
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head.left{
  text-align:center !important; max-width:760px !important; margin:0 auto 48px !important; padding:0 !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head h2{
  font-size:40px !important; line-height:1.15 !important; margin:0 auto !important; max-width:760px; text-wrap:balance;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head p{
  font-size:18.5px !important; line-height:1.65 !important; margin:16px auto 0 !important; max-width:720px !important;
  text-align:center !important; text-wrap:pretty;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head p + p{margin-top:12px !important}
@media (max-width:720px){
  /* phones: the head goes left, heading and line together (same as heroes on phones, S246) */
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head,html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head.left{margin-bottom:34px !important; text-align:left !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head :is(h2,p){text-align:left !important; margin-left:0 !important; margin-right:0 !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-howto{text-align:left !important; margin-top:-12px !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head h2{font-size:30px !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head p{font-size:17px !important}
}

/* ── 2. Widths: grids and splits run 1080px, prose runs 760px ── */
html body.ar:not(.aida-cert):not(#_):not(#_a):not(#_b):not(#_c) section.sec:not(.cs-block) > .container{max-width:var(--ar-wide) !important}
/* narrow pieces sit centered in the wider row */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-story,.tsal-wrap,.ac-scrub,.lbtp,.ac-ess){margin-left:auto !important; margin-right:auto !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.ac-review,.res-grid,.ac-mentors,.ac-shelf,.cert-row,.ac-assets,.ac-moves,.ac-teasers,.doors,.ac-flips,.ac-method,.honest,.ac-deal,.ac-split,.ar-split,.ac-wants,.statband,.ac60-list){
  max-width:var(--ar-wide) !important; margin-left:auto !important; margin-right:auto !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-narrow,.ac-lonefaq,.faq-list,.ar-prose,.ac-ess){
  max-width:var(--ar-narrow);
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-narrow,.ac-lonefaq,.faq-list,.ar-prose){margin-left:auto !important; margin-right:auto !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > p:not(.ac-note):not(.reveal[style*="text-align:center"]){max-width:var(--ar-narrow); margin-left:auto; margin-right:auto}

/* ── 3. Text sizes: 18.5 body, 16.5 secondary, 15 small ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-lede,.ar-prose p,.ac-narrow > p){font-size:18.5px !important; line-height:1.75 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call p,.ac-move,.ac-teaser p,.res-card p,.ac-mentor p,.ac-review > div,.ac-stage p,.hcol p,.ac-shelf p,.ac-assets p,.cert-row p,.studio-list li,.ac-want p){font-size:16.5px !important; line-height:1.65 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call small,.ac-review small,.r-tag,.h-kicker,.ac-stage .ai,.ac-mentor small,.ac-note){font-size:15px !important; letter-spacing:0 !important; text-transform:none !important}
@media (max-width:720px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-lede,.ar-prose p,.ac-narrow > p){font-size:17px !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call p,.ac-move,.ac-teaser p,.res-card p,.ac-mentor p,.ac-review > div,.ac-stage p,.hcol p,.ac-shelf p,.ac-assets p,.cert-row p,.studio-list li){font-size:16px !important}
}

/* ── 4. One card style ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call,.ac-move,.ac-teaser,.res-card,.ac-mentor,.ac-stage,.hcol.give,.cert-row > *,.ac-piece,.door.plain,.door){
  border-radius:var(--ar-r-card) !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call,.ac-move,.ac-teaser,.res-card,.ac-mentor,.hcol.give,.cert-row > *,.ac-piece):not([style*="navy"]){
  background:#fff !important; border:1px solid var(--ar-line) !important; box-shadow:var(--ar-shadow) !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call,.ac-move,.res-card,.ac-piece){padding:28px 28px 26px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-call b,.ac-move b,.res-card h3,.ac-teaser h3,.ac-piece b,.cert-row h3){
  font-family:var(--font-display) !important; font-size:22px !important; line-height:1.25 !important; font-weight:600 !important; color:var(--navy) !important; margin-bottom:10px !important; display:block;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .hcol h3{font-size:28px !important; line-height:1.2 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.pg-chip,.ac-chip,.chips span,.ac-teaser .chips > *){border-radius:var(--ar-r-chip) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.price-wrap,.ac-bonus,.lbtp){border-radius:var(--ar-r-panel) !important}

/* Card grids: equal columns, cards in a row share one height, rows are always full */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-teasers,.ac-mentors,.ac-shelf,.cert-row){display:grid !important; gap:24px !important; align-items:stretch !important; margin-top:0 !important; margin-bottom:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-mentors){grid-template-columns:repeat(3,minmax(0,1fr)) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-moves.ar-2,.ac-teasers,.cert-row,.ar-grid-2){grid-template-columns:repeat(2,minmax(0,1fr)) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-shelf{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-teasers,.ac-mentors,.ac-shelf,.cert-row) > *{height:100%; margin:0 !important}
@media (max-width:980px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-mentors,.ac-shelf){grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:720px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-mentors,.ac-shelf,.ac-teasers,.cert-row,.ar-grid-2,.ac-moves.ar-2){grid-template-columns:minmax(0,1fr) !important; grid-auto-flow:row !important; gap:16px !important; padding:0 !important; overflow:visible !important; scroll-snap-type:none !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-calls,.res-grid,.ac-moves,.ac-mentors,.ac-shelf,.ac-teasers,.cert-row) > *{width:auto !important; min-width:0 !important; max-width:none !important}
}

/* ── 5. Splits: two equal columns, vertically centered, never a lone box with empty space beside it ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split){
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:64px !important; align-items:center !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split) > *{min-width:0; max-width:none !important; margin:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split) h3{font-size:28px !important; line-height:1.2 !important; margin:0 0 16px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split) .ac-lede{font-size:18.5px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split) > .hired-quote,
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split) > div > .hired-quote{
  background:#fff !important; border:1px solid var(--ar-line) !important; border-radius:var(--ar-r-card) !important;
  box-shadow:var(--ar-shadow) !important; padding:36px 36px 32px !important; margin:0 !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .hired-quote .qt{font-size:22px !important; line-height:1.45 !important}
@media (max-width:860px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) :is(.ac-split,.ar-split){grid-template-columns:minmax(0,1fr) !important; gap:32px !important}
}
/* the second block under a grid or a split gets the same 56px every time */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > :is(.ac-split,.ar-split,.ac-narrow,.honest,.mini-jill,.ac-lonefaq,.cta-band,.ar-after){margin-top:56px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .head + :is(.ac-split,.ar-split,.ac-narrow,.honest,.ac-lonefaq){margin-top:0 !important}

/* ── 6. Pairs (.honest): two equal panels, same height ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px !important; align-items:stretch !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest > .hcol{padding:40px 40px 36px !important; border-radius:var(--ar-r-card) !important; height:100%}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest > .hcol p{font-size:16.5px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest > .hcol .h-kicker{display:block; margin-bottom:8px; font-weight:600}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest.ar-same > .hcol{background:#fff !important; border:1px solid var(--ar-line) !important; box-shadow:var(--ar-shadow) !important; color:var(--ink) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest.ar-same > .hcol :is(h3){color:var(--navy) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest.ar-same > .hcol p{color:var(--ink-soft) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest.ar-same > .hcol p:last-child{color:var(--ink) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest.ar-same > .hcol .h-kicker{color:var(--ar-copper) !important}
@media (max-width:720px){html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest{grid-template-columns:minmax(0,1fr) !important}html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .honest > .hcol{padding:28px 24px !important}}

/* ── 7. Pull lines and the note from Jill ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-pull{max-width:var(--ar-narrow); margin:40px auto !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .mini-jill{max-width:var(--ar-narrow) !important; margin-left:auto !important; margin-right:auto !important; border-radius:var(--ar-r-card) !important}

/* ── 8. AIDA in 60 seconds: a spec sheet, one row per answer ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-list{max-width:880px !important; margin:0 auto !important; border-top:1px solid rgba(255,255,255,.22)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row{display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.16); align-items:baseline}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row h3{margin:0; font:600 22px/1.3 var(--font-display); color:var(--sky,#8FE8ED); letter-spacing:0}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row p{margin:0; font-size:18.5px; line-height:1.7; color:rgba(255,255,255,.88)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row a{color:var(--sky,#8FE8ED)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-more{margin-top:96px !important}
@media (max-width:720px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row{grid-template-columns:minmax(0,1fr); gap:8px; padding:20px 0}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-row p{font-size:17px}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac60-more{margin-top:64px !important}
}

/* ── 9. The AIDA tabs: under the hero, then under the main menu as you scroll ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub{
  position:sticky !important; top:var(--ar-navb,64px) !important; z-index:60;
  background:rgba(255,255,255,.97) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:0 !important; border-bottom:1px solid var(--ar-line) !important; box-shadow:0 12px 24px -22px rgba(20,44,60,.6) !important;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .container{display:flex !important; align-items:stretch !important; gap:28px !important; min-height:64px; max-width:1180px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-name{display:flex !important; align-items:center; font:600 17px/1 var(--font-display) !important; letter-spacing:.04em !important; color:var(--navy) !important; padding-right:24px !important; border-right:1px solid var(--ar-line) !important; white-space:nowrap}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links{display:flex !important; align-items:stretch !important; gap:4px !important; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; -webkit-mask-image:none !important; mask-image:none !important; padding:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links::-webkit-scrollbar{display:none}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a{
  position:relative; display:flex !important; align-items:center; padding:0 16px !important; height:auto !important;
  font:600 15px/1 var(--font-body) !important; color:var(--ink-soft) !important; background:none !important; border-radius:0 !important;
  white-space:nowrap; text-decoration:none;
}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a::after{content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:transparent; transition:background-color .2s ease}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a:hover{color:var(--navy) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a:hover::after{background:rgba(31,195,204,.35)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a[aria-current="page"]{color:var(--navy) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a[aria-current="page"]::after{background:var(--teal,#1FC3CC)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a:focus-visible{outline:2px solid var(--teal,#1FC3CC); outline-offset:-4px}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-call{display:flex !important; align-items:center; font:600 14px/1 var(--font-body) !important; color:var(--navy) !important; white-space:nowrap; text-decoration:underline; text-underline-offset:3px}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-ctas{display:flex !important; align-items:center}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-ctas .btn{padding:11px 22px !important; font-size:12.5px !important}
@media (max-width:900px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .container{gap:12px !important; min-height:54px}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-name{font-size:15px !important; padding-right:12px !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-call{display:none !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a{padding:0 11px !important; font-size:14px !important}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a::after{left:11px; right:11px}
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent) !important; mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent) !important}
}
@media (max-width:760px){html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-ctas{display:none !important}}
/* jumps land below the main menu and the tabs */
html:has(body.ar .ar-sub){scroll-padding-top:calc(var(--ar-navb,64px) + 64px + 16px)}

/* ── 10. Stage cards in the method (/academy/, /aida-monthly/) ── */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-method{gap:20px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-method .ac-stage{background:#fff !important; border:1px solid var(--ar-line) !important; box-shadow:var(--ar-shadow) !important; padding:28px 24px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-method .ac-stage h3{font-size:22px !important}

/* ── 11. Find the Time inside the AIDA collection ── */
html body.ar.hub-ftt:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub{margin:0}


/* ── 12. Small pieces used across the AIDA pages ── */
/* an instruction sits right above the thing you act on (S243) */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-howto{max-width:760px; margin:-20px auto 28px !important; text-align:center; font-size:15px !important; line-height:1.6; color:var(--ink-faint,#5E707E)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) section.sec .container > .ar-howto + *{margin-top:0 !important}
/* LEAD: the framework art and the four steps share the row equally */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead .tl-fig{margin:0 !important; max-width:none !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead .tl-fig img{width:100%; height:auto; border-radius:var(--ar-r-panel); display:block}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead .lead-steps h3{font-size:22px !important; margin:0 0 6px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead .lead-steps p{font-size:16.5px !important; line-height:1.65 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead .lead-protect{border-radius:var(--ar-r-chip) !important; font-size:16.5px !important}
/* prose blocks under a grid or split: left-aligned text in a centered 760px column */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-prose{max-width:var(--ar-narrow); margin-left:auto !important; margin-right:auto !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-prose > .hired-quote{margin-top:32px !important; background:#fff; border:1px solid var(--ar-line); border-radius:var(--ar-r-card); box-shadow:var(--ar-shadow); padding:32px 32px 28px}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-prose > :last-child{margin-bottom:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-lead-in{margin-bottom:48px !important}
/* two quotes side by side: same height, quote centered in its card */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-quotes{align-items:stretch !important; gap:24px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-quotes > .hired-quote{display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:4px}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-quotes > .hired-quote .qm{margin:0 !important; line-height:1}
/* the tap-through ladders sit centered in the row */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-ladder{max-width:900px !important; margin-left:auto !important; margin-right:auto !important}
/* Find the Time: the trade-ends note and the episode card as two matching cards */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; max-width:var(--ar-wide); margin-left:auto; margin-right:auto}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-pair > *{background:#fff; border:1px solid var(--ar-line); border-radius:var(--ar-r-card); box-shadow:var(--ar-shadow); padding:32px; margin:0}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-trade h3{font:600 22px/1.25 var(--font-display); color:var(--navy); margin:0 0 10px}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-trade p{margin:0; font-size:16.5px; line-height:1.7; color:var(--ink-soft)}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-ep{display:flex; align-items:center}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-ep .ep-card{width:100%; margin:0 !important; box-shadow:none !important; border:0 !important; background:none !important; padding:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-ep .ep-t{font-size:22px !important; line-height:1.3 !important}
@media (max-width:720px){html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-pair{grid-template-columns:minmax(0,1fr); gap:16px} html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-pair > *{padding:24px}}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-cards{max-width:var(--ar-wide); margin-left:auto; margin-right:auto}
/* hero: the line under a left-aligned headline stays left (S246 centers lines only under centered headlines) */
@media (min-width:721px){
  html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .pg-hero:is(.le-cardhero,.ac-hero):not(#_):not(#_a):not(#_b):not(#_c):not(#_d) :is(p.pg-sub,p.reveal){margin-left:0 !important; margin-right:0 !important; text-align:left !important}
  html body.ar.aida-cert:not(#_):not(#_a):not(#_b):not(#_c) .pg-hero:not(#_):not(#_a):not(#_b):not(#_c):not(#_d) :is(p.pg-sub,p.aidc-hero-cta){margin-left:0 !important; margin-right:0 !important; text-align:left !important}
}

/* Find the Time: the tool starts below the tabs with its own room (the old -56px tuck under the hero overlapped the intro on phones) */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-tool{padding-top:72px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-tool .ftt-grid{margin-top:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-tool .ftt-intro{margin-bottom:32px !important}
@media (max-width:720px){html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ftt-tool{padding-top:40px !important; padding-bottom:48px !important}}

/* Myth or fact: both faces of a flip card share one grid cell, so the card is as tall as its longer side and the
   answer never spills out of the card when it flips (it overflowed by up to 150px before) */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips{align-items:stretch !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-flip{height:100%; min-height:0 !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-flip-in{display:grid !important; height:100%; min-height:230px !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-face{position:relative !important; inset:auto !important; grid-area:1 / 1; height:auto !important; min-height:100%}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-front, html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-back{border-radius:var(--ar-r-card) !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-front q{margin-top:auto !important; margin-bottom:auto !important}
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ac-flips .ac-front .tap{margin-top:0 !important}

/* card lists stack on phones, so the swipe dots have nothing to page through */
html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ds-dots{display:none !important}

@media (prefers-reduced-motion:reduce){html body.ar:not(#_):not(#_a):not(#_b):not(#_c) .ar-sub .ac-sub-links a::after{transition:none}}
/* END aida-redesign-2026-10-31 */