/* ============================================================
   EDITORIAL PAGES — the SAT vs ACT article and the Privacy Policy.
   ============================================================
   These two are LONG-FORM READING, which nothing else in this product is. They
   share PrepArcade's tokens, type and furniture so they read as part of the
   site, and they add exactly what long text needs: a measure, a scale, and
   quiet devices for notes, comparisons and timelines.

   ---- THE HARD RULE, set by the owner 2026-08-09 ----
   NO CAPSULES. No pills, no cylindrical labels, no tiny rounded badges, no
   decorative grey chips, and no tipped or coloured bars down the left edge of a
   card. If a thing needs to be marked out, it is marked out with TYPOGRAPHY,
   SPACING, a BORDER or DEPTH — never by putting it in a lozenge.

   That rule is why several obvious-looking treatments are absent here: the
   article's kicker badge, the coloured left rails on the note boxes, and the
   "(opens in a new tab)" chips have all been removed rather than restyled.

   The article's own spec, supplied with the copy, forbids arcade imagery,
   gradients, emojis and animated counters INSIDE the educational body. That is
   narrower than the rest of the site and it is honoured: the brand shows up in
   the furniture around the article and in the closing CTA, not in the prose.
   ============================================================ */

:root{
  --bg:#FAF8FE; --soft:#F2ECFC;
  --purple:#451A84; --purple-d:#2E1059; --purple-lite:#7B4FD6;
  --purple-ink:#3A1470;
  --p-300:#9050E0; --p-200:#C3A6F2; --p-100:#E9DEFB; --p-50:#F6F1FE;
  --yellow:#FFC42E; --yellow-d:#E09A00; --gold-ink:#6B4A00;
  /* the highlight colour the owner set for the blog template */
  --hl:#FBF719;
  --navy:#1B1233; --text2:#655C82; --card:#FFFFFF;
  --green-d:#0E8F63; --red:#E5484D;
  --r:20px; --r-lg:28px;
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--navy);
  font-family:var(--pa-body);font-weight:600;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--pa-display);font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- the bar at the top ---------- */
.ed-nav{
  position:sticky;top:0;z-index:60;background:rgba(250,248,254,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--p-100);
}
.ed-nav .wrap{display:flex;align-items:center;gap:16px;height:68px}
.ed-nav .logo img{height:36px;width:auto}
/* The way back. A real link to "/" and not history.back(), so it still works
   when the page was opened in a new tab. Squared off, not a capsule. */
.ed-back{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  /* The old one was cramped: 11px of vertical padding under 15px Fredoka with
     no line-height set, so the label sat tight against the top edge and the
     arrow floated. Explicit line-height and even padding fix the spacing. */
  padding:13px 22px;line-height:1;border-radius:14px;text-decoration:none;
  font-family:var(--pa-display);font-weight:600;font-size:15.5px;color:#fff;
  background:linear-gradient(180deg,var(--purple-lite),var(--purple));
  border:2px solid var(--purple-d);
  /* the 3D: a hard bottom edge that compresses when pressed */
  box-shadow:0 4px 0 var(--purple-d),0 10px 22px -12px rgba(46,16,89,.7);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.ed-back:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--purple-d),0 16px 26px -12px rgba(46,16,89,.75)}
.ed-back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--purple-d)}
.ed-back:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.ed-back svg{flex:none}
/* ONE flex item for the whole label. With `Back` as a bare text node and
   `to PrepArcade` in its own span, flex treated them as TWO items and put the
   10px gap between them, on top of the word space: the double gap he kept
   seeing. Nested inside one span they are ordinary inline text again. */
.ed-back .bk{white-space:nowrap}
@media(max-width:520px){
  .ed-back{padding:12px 16px;font-size:15px}
  .ed-back .bk-rest{display:none}
  .ed-nav .logo img{height:31px}
}

/* ---------- hero ---------- */
.ed-hero{padding:56px 0 34px;text-align:left}
/* The kicker is TYPE with a mark, not a badge. It used to be a rounded chip,
   which the no-capsules rule forbids, and then it was bare small caps, which
   the owner found too plain. So: a short gold rule and two arcade pips beside
   letter-spaced purple caps. Nothing here is a container. */
.ed-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:12.5px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--purple);margin-bottom:18px;
}
.ed-eyebrow::before{
  content:'';width:34px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-d));
  box-shadow:0 2px 0 rgba(224,154,0,.35);
}
.ed-eyebrow::after{
  content:'';width:7px;height:7px;border-radius:2px;
  background:var(--purple-lite);transform:rotate(45deg);
}
.ed-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.05;max-width:20ch}
.ed-lede{margin:18px 0 0;font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--text2);max-width:62ch}
.ed-meta{margin-top:22px;font-size:13.5px;color:var(--text2);font-weight:700}

/* ---------- THE ARTICLE CARD ----------
   The 3D treatment, used HERE and on the closing CTA and nowhere else. The
   owner's rule: depth is for the important components, not for everything. A
   long read cannot be tilted, so its depth comes from a thick edge and stacked
   layers rather than from rotation. */
.ed-card{
  position:relative;background:var(--card);
  border:3px solid var(--p-100);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,56px);
  margin-bottom:46px;
  box-shadow:
    14px 16px 0 -3px var(--p-50),
    24px 28px 0 -6px rgba(69,26,132,.07),
    0 40px 70px -34px rgba(24,38,58,.4);
}
@media(max-width:760px){
  .ed-card{box-shadow:0 18px 40px -26px rgba(24,38,58,.35);border-width:2px}
}

/* ---------- article typography ---------- */
.ed-body{max-width:70ch;margin:0 auto;font-size:17px;line-height:1.75;color:#2C2447}
.ed-body.wide{max-width:none}
.ed-body p{margin:0 0 20px}
.ed-body h2{
  font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:52px 0 16px;color:var(--navy);
  padding-top:30px;border-top:2px solid var(--p-100);
}
.ed-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.ed-body h3{font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin:34px 0 10px;color:var(--purple-ink)}
.ed-body h4{font-size:17px;margin:24px 0 8px;color:var(--navy)}
.ed-body strong,.ed-body b{font-weight:900;color:var(--navy)}
.ed-body ul,.ed-body ol{margin:0 0 20px;padding-left:24px}
.ed-body li{margin:0 0 10px}
.ed-body a{color:var(--purple);font-weight:800}

/* ---- THE HIGHLIGHT ----
   It must cover the WHOLE phrase, not slice through the letters. The old rule
   was `linear-gradient(180deg,transparent 52%,var(--hl) 52%)`, which paints the
   bottom half of the line box only: on tall words it cut the letters in half
   and it never reached the ascenders. That is the bug he reported.

   A flat background over the real line box fixes it. The two properties doing
   the work:
     · padding in `em` extends it above the cap height and below the baseline,
       so descenders (g, y, p) are covered too;
     · box-decoration-break:clone repeats the padding and the radius on EVERY
       line a highlight wraps onto — without it a two-line highlight loses its
       end caps and looks torn.
   The text keeps its own colour and sits above the fill, so it stays readable. */
.ed-body mark{
  background:var(--hl);
  color:var(--navy);
  padding:.14em .2em;
  border-radius:5px;
  font-weight:800;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* an underline that must not read as a link */
.ed-body .ul{
  text-decoration:underline;text-decoration-color:var(--p-200);
  text-decoration-thickness:3px;text-underline-offset:5px;font-weight:800;
}

/* ---------- note box / quick take ----------
   No coloured rail down the left edge: that was the "tipped element" the owner
   asked to be removed everywhere. These were then too flat, so they now carry
   real depth (a thick edge and a stacked offset layer) and the large quotation
   mark he asked for on the left, with the text indented past it. The quote is a
   ::before, so it is decoration a screen reader never reads aloud. */
.ed-note,.ed-take{
  position:relative;margin:30px 0;padding:24px 26px 24px 74px;
  border-radius:20px;font-size:16px;line-height:1.7;
}
.ed-note::before,.ed-take::before{
  content:'\201C';                     /* a left double quotation mark */
  position:absolute;left:22px;top:14px;
  font-family:var(--pa-display);font-weight:700;font-size:62px;line-height:1;
  color:var(--p-200);pointer-events:none;
}
.ed-note{
  background:#fff;border:2.5px solid var(--p-100);color:#2C2447;
  box-shadow:8px 9px 0 -2px var(--p-50),0 20px 34px -26px rgba(24,38,58,.55);
}
.ed-take{
  background:linear-gradient(160deg,var(--p-50),#fff);border:2.5px solid var(--p-200);
  box-shadow:8px 9px 0 -2px rgba(69,26,132,.10),0 22px 38px -26px rgba(69,26,132,.5);
}
.ed-take::before{color:var(--purple-lite)}
.ed-note .lbl,.ed-take .lbl{
  display:block;font-size:11.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);margin-bottom:8px;
}
.ed-note p:last-child,.ed-take p:last-child{margin-bottom:0}
@media(max-width:560px){
  .ed-note,.ed-take{padding:22px 20px 22px 58px}
  .ed-note::before,.ed-take::before{left:16px;font-size:50px}
  .ed-note,.ed-take{box-shadow:0 14px 28px -22px rgba(24,38,58,.5)}
}

/* ============================================================
   THE COMPARISON — a designed component, not a spreadsheet.
   ============================================================
   It is still a real <table>, because that is what the content is and what a
   screen reader should meet. Everything visible about it is rebuilt: one card
   with a heavy edge, a purple header band that names the two exams, a hard rule
   between the SAT and the ACT column so the eye never has to guess which is
   which, and a tinted feature rail down the left.

   No cell is put in a capsule. Separation comes from the grid itself. */
.ed-cmp{margin:30px 0}
.ed-cmp figcaption{
  font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);margin-bottom:12px;
}
.ed-cmp .shell{
  border:2.5px solid var(--p-200);border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:0 22px 44px -30px rgba(69,26,132,.45);
}
.ed-cmp table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6}
.ed-cmp thead th{
  font-family:var(--pa-display);font-weight:600;font-size:16px;color:#fff;
  background:linear-gradient(180deg,var(--purple-lite),var(--purple));
  padding:15px 18px;text-align:left;vertical-align:middle;
  border-right:1px solid rgba(255,255,255,.18);
}
.ed-cmp thead th:last-child{border-right:0}
.ed-cmp thead th:first-child{background:linear-gradient(180deg,var(--purple),var(--purple-d))}
.ed-cmp td{
  padding:15px 18px;text-align:left;vertical-align:top;
  border-top:1px solid var(--p-100);border-right:1px solid var(--p-100);
}
.ed-cmp td:last-child{border-right:0}
/* the feature rail: the row's subject, set apart by ground and weight */
.ed-cmp td:first-child{background:var(--p-50);font-weight:900;color:var(--navy)}
.ed-cmp tbody tr:hover td{background:#FCFAFF}
.ed-cmp tbody tr:hover td:first-child{background:var(--p-100)}

@media(max-width:860px){
  /* On a phone every row becomes one labelled card — his spec states twice that
     a comparison must never scroll sideways or shrink into unreadable text.
     The labels come from the data-h attribute on each cell, and they are typed
     small caps, not badges. */
  .ed-cmp .shell{border:0;border-radius:0;box-shadow:none;background:none}
  .ed-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ed-cmp table,.ed-cmp tbody,.ed-cmp tr,.ed-cmp td{display:block;width:100%}
  .ed-cmp tr{
    background:#fff;border:2px solid var(--p-100);border-radius:20px;
    margin-bottom:16px;overflow:hidden;
    box-shadow:0 12px 26px -22px rgba(24,38,58,.5);
  }
  .ed-cmp td{border:0;border-top:1px solid var(--p-100);padding:14px 18px}
  .ed-cmp tr td:first-child{
    border-top:0;background:linear-gradient(180deg,var(--purple-lite),var(--purple));
    color:#fff;font-family:var(--pa-display);font-weight:600;font-size:16px;
  }
  /* `.ed-body strong` paints navy, so the row's own subject came out BLACK on
     the purple band: "stamina, it's like in black text and the cover is
     purple". Everything in that cell is white. */
  .ed-cmp tr td:first-child strong,
  .ed-cmp tr td:first-child b{color:#fff}
  .ed-cmp td:not(:first-child)::before{
    content:attr(data-h);display:block;
    font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
    color:var(--purple);margin-bottom:5px;
  }
}

/* ---------- the two test-day timelines ---------- */
.ed-lines{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0}
@media(max-width:860px){.ed-lines{grid-template-columns:1fr}}
.ed-line{background:#fff;border:2px solid var(--p-100);border-radius:20px;padding:0 0 22px;overflow:hidden}
.ed-line h4{
  margin:0 0 16px;padding:14px 22px;font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--purple-lite),var(--purple));
}
.ed-line ol{margin:0;padding:0 22px 0 42px}
.ed-line li{margin-bottom:11px;font-size:15.5px;line-height:1.55}
.ed-line .chal{margin:16px 22px 0;padding-top:14px;border-top:1px solid var(--p-100);
  font-size:14.5px;line-height:1.6;color:var(--text2)}

/* ---------- MYTH vs REALITY ----------
   "Make this section significantly more prominent... these should feel like
   major feature cards, not small content blocks." So they are two-up instead of
   three-up, the whole card has real depth, MYTH gets an unmistakable red
   treatment on its own tinted ground, and REALITY keeps the house style but is
   set larger and heavier so it is the half of the card that dominates. */
.ed-myths{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:22px;margin:34px 0}
.ed-myth{
  background:#fff;border:2.5px solid var(--p-100);border-radius:24px;overflow:hidden;
  box-shadow:10px 12px 0 -3px var(--p-50),0 26px 44px -30px rgba(24,38,58,.6);
}
.ed-myth .lbl{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;
}
/* MYTH: red ground, red rule under it, and a crossed mark. Never colour alone,
   the word MYTH is always present, per the article's accessibility note. */
.ed-myth .m{
  background:linear-gradient(180deg,#FFF3F3,#FFECEC);
  border-bottom:2.5px solid rgba(229,72,77,.35);
  padding:22px 26px;
}
.ed-myth .m .lbl{color:#B3252A}
/* THE MARK IS DRAWN, NOT TYPED. A glyph in a box is centred on its own font
   baseline, not on the box, which is why the cross and the tick sat low and
   slightly left however the box was aligned. An SVG centred as a background is
   exact by construction, and it scales cleanly at any size. */
.ed-myth .lbl::before{
  content:'';flex:none;width:28px;height:28px;border-radius:9px;
  background-repeat:no-repeat;background-position:center;background-size:15px 15px;
}
.ed-myth .m .lbl::before{
  background-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  box-shadow:0 2px 0 rgba(179,37,42,.5);
}
.ed-myth .m p{font-size:16px;line-height:1.6;color:#7A1F23;font-weight:800}
/* REALITY: the dominant half. Bigger type, more room, a check mark. */
.ed-myth .r{padding:24px 26px 26px}
.ed-myth .r .lbl{color:var(--green-d)}
.ed-myth .r .lbl::before{
  background-color:var(--green-d);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E");
  box-shadow:0 2px 0 rgba(14,143,99,.5);
}
.ed-myth .r p{font-size:17px;line-height:1.7;color:var(--navy);font-weight:700}
.ed-myth p{margin:0}
@media(max-width:620px){
  /* One per row well before 360px: at two-up the minmax(360px) track was wider
     than the screen, so the cards ran off the side. */
  .ed-myths{grid-template-columns:1fr;gap:16px}
  .ed-myth{box-shadow:0 16px 30px -26px rgba(24,38,58,.55)}
  .ed-myth .m,.ed-myth .r{padding:20px}
  .ed-myth .m p{font-size:15.5px}
  .ed-myth .r p{font-size:16px}
}

/* ---------- accordion ---------- */
.ed-faq{display:flex;flex-direction:column;gap:12px;margin:28px 0}
.ed-qa{background:#fff;border:2px solid var(--p-100);border-radius:18px;overflow:hidden;transition:border-color .2s var(--ease)}
.ed-qa[open]{border-color:var(--p-200)}
.ed-qa summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;gap:16px;align-items:center;
  font-family:var(--pa-display);font-weight:600;font-size:17px;color:var(--navy);
}
.ed-qa summary::-webkit-details-marker{display:none}
.ed-qa summary::after{
  content:'';margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--purple);border-bottom:2.5px solid var(--purple);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.ed-qa[open] summary::after{transform:rotate(-135deg)}
.ed-qa summary:focus-visible{outline:3px solid var(--purple-lite);outline-offset:-3px}
.ed-qa .a{padding:0 22px 20px;font-size:16px;line-height:1.7;color:#2C2447}

/* ---------- buttons ---------- */
.ed-btns{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.ed-btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:14px;
  font-family:var(--pa-display);font-weight:600;font-size:16px;text-decoration:none;
  border:2px solid var(--p-100);background:#fff;color:var(--navy);
  transition:transform .16s var(--ease),border-color .2s,background .2s,box-shadow .2s;
}
.ed-btn:hover{transform:translateY(-2px);border-color:var(--p-200)}
.ed-btn.primary{
  background:linear-gradient(180deg,var(--purple-lite),var(--purple));
  border-color:var(--purple-d);color:#fff;box-shadow:0 4px 0 var(--purple-d);
}
.ed-btn.primary:hover{box-shadow:0 6px 0 var(--purple-d)}
.ed-btn.gold{
  background:linear-gradient(180deg,#FFD75E,var(--yellow));
  border-color:var(--yellow-d);color:var(--gold-ink);box-shadow:0 4px 0 var(--yellow-d);
}
.ed-btn.gold:hover{box-shadow:0 6px 0 var(--yellow-d)}
.ed-btn:focus-visible{outline:3px solid var(--purple-lite);outline-offset:3px}

/* ============================================================
   THE CLOSING CTA — the one place on this page that sells.
   ============================================================
   The owner: "this card effectively sells PrepArcade... make it one of the
   coolest cards on the entire page. Highly polished, 3D, branded, purple/gold,
   strong depth, clearly interactive." So it is the only element here that gets
   the full treatment: a purple ground, gold as the reward colour, real stacked
   depth, and the mascot standing in it.

   It is deliberately OUTSIDE the article card. The article's own spec allows no
   platform promotion before this point. */
.ed-cta{
  --cta-pad:clamp(28px,4.4vw,48px);
  position:relative;margin:8px 0 46px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(520px 260px at 88% 8%, rgba(255,196,46,.22), transparent 62%),
    linear-gradient(160deg, var(--purple-lite) 0%, var(--purple) 46%, var(--purple-d) 100%);
  border:3px solid var(--purple-d);
  box-shadow:
    16px 18px 0 -4px rgba(69,26,132,.22),
    0 44px 80px -36px rgba(46,16,89,.85);
  overflow:hidden;color:#fff;
}
.ed-cta-in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(260px,46%,500px);gap:clamp(20px,4vw,44px);
  align-items:center;padding:var(--cta-pad);
}
.ed-cta h2{border:0;padding:0;margin:0 0 14px;color:#fff;font-size:clamp(24px,3.4vw,36px);line-height:1.1}
.ed-cta p{margin:0 0 8px;color:#EFE7FB;font-size:17px;line-height:1.65;max-width:52ch}
.ed-cta .lead{
  display:block;font-family:var(--pa-display);font-weight:600;font-size:clamp(18px,2.2vw,22px);
  color:var(--yellow);margin:0 0 14px;
}
.ed-cta .ed-btns{margin:24px 0 0}
/* one gold action, because gold is the reward colour in this brand and this is
   the reward */
.ed-cta .ed-btn{border-width:2px}
.ed-cta .ed-btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);color:#fff}
.ed-cta .ed-btn.ghost:hover{background:rgba(255,255,255,.16)}
/* THE CLOSE-UP MASCOT.
   The art stays a normal in-flow grid item, which is what keeps it off the
   copy: the column reserves its width, so the picture can only ever grow into
   the card's own right padding, never leftwards across the gap into the text.
   The two negative margins are what make it feel like it is coming out of the
   card — right, so it runs to the card's border instead of stopping a padding's
   width short of it; bottom, so the torso runs off the bottom edge. The extra
   10px past the border is not for show: the artwork's ink touches its own
   bottom row, and a scaled-down PNG ends in a half-transparent line, so the
   seam is pushed under the border rather than left on it. */
.ed-cta-art{
  position:relative;align-self:end;justify-self:stretch;
  margin-right:calc(-1 * var(--cta-pad));
  margin-bottom:calc(-1 * var(--cta-pad) - 10px);
}
.ed-cta-art picture{display:block}
.ed-cta-art img{
  width:100%;max-width:none;height:auto;
  filter:drop-shadow(0 22px 30px rgba(20,8,44,.5)) drop-shadow(0 0 34px rgba(255,196,46,.26));
}
/* three quiet arcade marks, not decorative blobs */
.ed-cta-spark{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5}
.ed-cta-spark i{position:absolute;color:var(--yellow);font-style:normal;font-size:14px;font-weight:900}
.ed-cta-spark i:nth-child(1){left:8%;top:22%}
.ed-cta-spark i:nth-child(2){left:47%;top:9%;font-size:11px}
.ed-cta-spark i:nth-child(3){left:30%;bottom:14%;font-size:12px}
/* The narrow two-column band, 821px to 1023px. The card is still side by side
   here but there is far less of it to share, and at 46% the headline broke onto
   a third line and the paragraph ran to six. The mascot gives the width back
   rather than squeezing the copy; it is still nearly half again the size of the
   one it replaced. */
@media(min-width:821px) and (max-width:1023px){
  .ed-cta-in{grid-template-columns:minmax(0,1fr) 38%}
}
@media(max-width:820px){
  /* EVERYTHING CENTRED, AND THE PARAGRAPH GONE. His instruction 2026-08-09:
     "delete this whole paragraph because it's too big on the phone... just make
     everything in this card centered." The headline, the gold line, the mascot
     and the button all centre; the supporting paragraph is not rendered at all
     rather than hidden, so it is not read aloud either. */
  .ed-cta-in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .ed-cta p{display:none}
  .ed-cta .lead{margin-inline:auto}
  /* Same idea one column down: with nothing beside it the mascot takes the
     whole width of the card and still runs off the bottom edge, so the phone
     gets the close-up rather than a shrunken version of it. It bleeds into both
     paddings, never past the left or right border, because the flags are the
     first thing a side bleed would cut. */
  .ed-cta-art{
    justify-self:stretch;margin-top:2px;
    margin-inline:calc(-1 * var(--cta-pad));
  }
  /* Capped, because the card is narrow but it is not always a phone: at 820px
     an uncapped mascot came out 766px wide and swallowed the card. Below about
     570px the cap stops binding and it goes edge to edge again. */
  .ed-cta-art img{max-width:520px;margin-inline:auto}
  .ed-cta .ed-btns{justify-content:center}
  .ed-cta .ed-btn{width:100%;justify-content:center}
}

/* ============================================================
   THE DECISION PATH
   ============================================================
   One question at a time, with Back, Restart and a recap. Rebuilt visually: the
   question is the loudest thing in it, the options are real cards you press,
   and the result is a verdict rather than a wall of prose. */
.ed-path{
  background:#fff;border:2.5px solid var(--p-200);border-radius:24px;
  padding:clamp(22px,3.4vw,34px);margin:30px 0;
  box-shadow:0 22px 44px -32px rgba(69,26,132,.5);
}
.ed-path .step-of{
  margin:0;font-size:11.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);
}
.ed-path h4{margin:12px 0 20px;font-size:clamp(19px,2.4vw,23px);line-height:1.3;color:var(--navy)}
/* The answer cards. Dimensional and pressable: a hard bottom edge that
   compresses on click, and a purple marker that fills as you hover, so it reads
   as a control rather than a paragraph in a box. */
.ed-path .opts{display:flex;flex-direction:column;gap:12px}
.ed-path .opt{
  display:flex;align-items:flex-start;gap:14px;
  text-align:left;padding:17px 22px;border-radius:16px;cursor:pointer;
  border:2px solid var(--p-100);background:#fff;color:var(--navy);
  font:inherit;font-size:16px;line-height:1.5;font-weight:700;
  box-shadow:0 3px 0 var(--p-100);
  transition:border-color .18s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.ed-path .opt::before{
  content:'';flex:none;width:20px;height:20px;margin-top:2px;border-radius:7px;
  border:2.5px solid var(--p-200);background:#fff;
  transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s;
}
.ed-path .opt:hover{
  border-color:var(--purple-lite);transform:translateY(-2px);
  box-shadow:0 6px 0 var(--p-200),0 14px 26px -18px rgba(69,26,132,.7);
}
.ed-path .opt:hover::before{background:var(--purple-lite);border-color:var(--purple);box-shadow:inset 0 0 0 3px #fff}
.ed-path .opt:active{transform:translateY(1px);box-shadow:0 1px 0 var(--p-200)}
.ed-path .opt:focus-visible{outline:3px solid var(--purple-lite);outline-offset:2px}
.ed-path .ctrls{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ed-path .ctrl{
  padding:11px 18px;border-radius:12px;border:2px solid var(--p-100);background:#fff;
  font:inherit;font-weight:800;font-size:14px;color:var(--text2);cursor:pointer;
}
.ed-path .ctrl:hover{color:var(--navy);border-color:var(--p-200)}
.ed-path .ctrl:focus-visible{outline:3px solid var(--purple-lite);outline-offset:2px}

/* THE VERDICT. It is the point of the whole tool, so it is the loudest thing
   in it: raised off the panel on its own purple ground with real depth, and set
   in the display face at headline size. */
.ed-path .verdict{
  position:relative;margin:-6px 0 4px;padding:30px 32px;
  border-radius:22px;color:#fff;
  background:
    radial-gradient(420px 200px at 90% 0%, rgba(255,196,46,.20), transparent 60%),
    linear-gradient(160deg,var(--purple-lite),var(--purple) 52%,var(--purple-d));
  border:2.5px solid var(--purple-d);
  box-shadow:
    12px 14px 0 -4px rgba(69,26,132,.18),
    0 30px 54px -28px rgba(46,16,89,.9);
}
.ed-path .verdict .step-of{color:var(--yellow);margin:0 0 10px}
.ed-path .verdict h4{
  margin:0 0 12px;color:#fff;font-size:clamp(24px,3.4vw,34px);line-height:1.1;
}
/* The verdict heading is focused PROGRAMMATICALLY so a screen reader lands on
   the answer. It is not a keyboard stop, so it must not draw a focus ring:
   sighted users were seeing a box around the headline for no reason. */
.ed-path .verdict h4:focus{outline:none}
.ed-path .verdict p{margin:0;font-size:16.5px;line-height:1.7;color:#EFE7FB}

/* THE PULL QUOTE. His instruction: this line should not sit inside anything,
   it should be "a big quote". So: no box, no border, no ground. Just the
   quotation mark and the sentence, at size, closing the tool. */
.ed-quote{
  position:relative;margin:34px 0 0;padding:0 0 0 58px;
  font-family:var(--pa-display);font-weight:600;
  font-size:clamp(19px,2.4vw,24px);line-height:1.4;color:var(--navy);
}
.ed-quote::before{
  content:'\201C';position:absolute;left:0;top:-14px;
  font-family:var(--pa-display);font-weight:700;font-size:74px;line-height:1;
  color:var(--p-200);
}
@media(max-width:560px){
  .ed-quote{padding-left:44px}
  .ed-quote::before{font-size:58px;top:-10px}
  .ed-path .verdict{padding:24px 22px}
}
.ed-path .recap{margin-top:22px;padding-top:18px;border-top:1px solid var(--p-100)}
.ed-path .recap b{display:block;font-size:11.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--purple);margin-bottom:12px}
.ed-path .recap ol{margin:0;padding-left:20px}
.ed-path .recap li{margin-bottom:10px;font-size:15px;line-height:1.6;color:var(--text2)}
.ed-path .recap li b{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--navy);margin:0}
.ed-path .recap li span{display:block;font-size:14px;color:var(--text2)}
/* the free-account action, shown with the result */
.ed-path .ed-btns{margin:22px 0 0}

/* ---------- footer ---------- */
.ed-foot{padding:34px 0 54px;color:var(--text2);font-size:13.5px}
.ed-foot .wrap{display:flex;flex-wrap:wrap;gap:18px 34px;justify-content:space-between;
  border-top:1px solid var(--p-100);padding-top:24px}
.ed-foot nav{display:flex;gap:26px;flex-wrap:wrap}
.ed-foot a{color:var(--purple);font-weight:800;text-decoration:none}
.ed-foot a:hover{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.05s!important;scroll-behavior:auto}
}