/* Shared design system for the Ember study guides ("training center") section.
   Reuses the same tokens as the main site (index/pricing/app) for visual consistency.
   Every guide page links this one file instead of duplicating a full <style> block, since
   this section is meant to scale to many pages across multiple exams over time. */

:root{
  /* Ember always-dark — same palette as app.html, see brand standards. */
  color-scheme:dark;
  --bg:#201F1E; --bg-alt:#282726; --card:#282726; --ink:#F1EEE9; --ink-dim:#A29F9C; --ink-faint:#74726F;
  --line:#393836; --line-soft:#2D2C2C; --blue:#F4783C; --blue-hover:#FF9A5C; --blue-tint:rgba(244,120,60,0.14);
  --gold:#DDB566; --gold-tint:rgba(221,181,102,0.14); --green:#4CAF6B; --green-tint:rgba(76,175,107,0.14);
  --red:#E8604F; --red-tint:rgba(232,96,79,0.14); --radius:20px; --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); letter-spacing:-0.01em; line-height:1.6;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px; margin:0 auto; padding:0 22px;}
.wrap.narrow{max-width:720px;}

/* ---- Header (same brand mark as the main site) ---- */
header{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:80; background:var(--bg); box-shadow:0 1px 0 var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px; font-size:17px; text-decoration:none; color:var(--ink);}
.brand-logo{width:33px; height:31px; flex-shrink:0; display:block;}
@media(max-width:520px){.brand-logo{width:28px; height:26px;}}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-text .word{
  font-family:"Outfit", -apple-system, sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-0.01em; color:var(--ink);
}
.brand-text .word .dot{color:var(--blue);}
.brand-tag{font-size:10.5px; font-weight:600; color:var(--ink-faint); letter-spacing:0.01em;}
nav.top-nav{display:flex; align-items:center; gap:22px;}
nav.top-nav a{color:var(--ink-dim); text-decoration:none; font-size:14px; font-weight:600;}
nav.top-nav a.current{color:var(--ink);}
.cta{background:var(--blue); color:#fff; text-decoration:none; font-weight:600; padding:11px 22px; border-radius:100px; font-size:14px; transition:background .15s var(--ease); display:inline-block;}
nav.top-nav a.cta{color:#fff;}
.cta:hover{background:var(--blue-hover);}

/* ---- Back button + breadcrumb row ---- */
.page-nav{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:18px 0 22px;}
.back-btn{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--blue);
  text-decoration:none; padding:9px 16px 9px 13px; border:1px solid var(--line); border-radius:100px;
  background:var(--card); transition:background .15s var(--ease), border-color .15s var(--ease);
}
.back-btn:hover{background:var(--blue-tint); border-color:var(--blue);}
.back-btn .arrow{font-size:15px; line-height:1;}
.crumbs{font-size:13px; color:var(--ink-faint); margin:0;}
.crumbs a{color:var(--ink-faint); text-decoration:none;}
.crumbs a:hover{color:var(--ink-dim); text-decoration:underline;}

/* ---- Guide hero ---- */
.guide-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--blue); background:var(--blue-tint); padding:6px 13px; border-radius:100px; margin-bottom:16px;
}
.guide-hero h1{font-size:clamp(28px,5vw,44px); letter-spacing:-0.03em; line-height:1.14; margin:0 0 14px; font-weight:700;}
.guide-hero .dek{font-size:clamp(15px,2.2vw,18px); color:var(--ink-dim); max-width:640px; margin:0 0 18px;}
.guide-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-bottom:8px;}

/* ---- Article body typography ---- */
.article{max-width:720px; margin:0 auto; padding:8px 0 60px;}
.article h2{font-size:clamp(20px,3.2vw,26px); letter-spacing:-0.02em; margin:44px 0 14px; text-align:left;}
.article h2:first-child{margin-top:0;}
.article h3{font-size:16px; letter-spacing:-0.01em; margin:26px 0 10px;}
.article p{font-size:16.5px; color:var(--ink); line-height:1.7; margin:0 0 16px;}
.article ul, .article ol{font-size:16.5px; color:var(--ink); line-height:1.7; padding-left:22px; margin:0 0 16px;}
.article li{margin-bottom:8px;}
.article li strong{color:var(--ink);}
.article a{color:var(--blue); font-weight:600;}
.article strong{font-weight:700;}

/* ---- Callout boxes: tip / did-you-know / gotcha ---- */
.callout{border-radius:16px; padding:18px 20px; margin:22px 0; display:flex; gap:13px;}
.callout .ico{flex-shrink:0; line-height:0; padding-top:2px;}
.callout .ico svg{width:21px; height:21px; display:block;}
.callout .body{flex:1; min-width:0;}
.callout .label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px;}
.callout p{margin:0; font-size:15.5px; line-height:1.65;}
.callout p + p{margin-top:8px;}
.callout.tip{background:var(--blue-tint);}
.callout.tip .label{color:var(--blue);}
.callout.fact{background:var(--gold-tint);}
.callout.fact .label{color:var(--gold);}
.callout.gotcha{background:var(--red-tint);}
.callout.gotcha .label{color:var(--red);}

/* ---- Subtopic blocks (TL;DR layer, sits above each Learn More) ---- */
.subtopic{margin:28px 0;}
.subtopic h3{font-size:17px; margin:0 0 8px;}
.subtopic > p{margin:0 0 10px;}

/* ---- Learn More: expandable deep-dive, native <details>/<summary> ---- */
.learn-more{background:var(--card); border:1px solid var(--line-soft); border-radius:14px; margin:0 0 8px; overflow:hidden;}
.learn-more summary{
  list-style:none; cursor:pointer; padding:13px 18px; font-weight:700; font-size:13.5px;
  color:var(--blue); display:flex; align-items:center; gap:9px; user-select:none;
}
.learn-more summary::-webkit-details-marker{display:none;}
.learn-more summary::before{
  content:"+"; font-size:16px; font-weight:700; width:16px; text-align:center; flex-shrink:0; color:var(--blue);
}
.learn-more[open] summary::before{content:"\2212";}
.learn-more[open] summary{border-bottom:1px solid var(--line-soft);}
.learn-more .content{padding:14px 20px 18px 43px;}
.learn-more .content p{font-size:15.5px; color:var(--ink-dim); line-height:1.65; margin:0 0 12px;}
.learn-more .content ul{font-size:15.5px; color:var(--ink-dim); line-height:1.65; padding-left:18px; margin:0 0 12px;}
.learn-more .content li{margin-bottom:9px;}
.learn-more .content li:last-child{margin-bottom:0;}
.learn-more .content strong{color:var(--ink);}
.learn-more .content p:last-child, .learn-more .content ul:last-child{margin-bottom:0;}

/* ---- Two-column bring / don't-bring style checklist ---- */
.checklist-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0 24px;}
.checklist-cols .col{background:var(--card); border:1px solid var(--line-soft); border-radius:14px; padding:18px 20px;}
.checklist-cols .col.no{border-color:var(--red-tint); background:var(--red-tint);}
.checklist-cols h4{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 12px; color:var(--green);}
.checklist-cols .col.no h4{color:var(--red);}
.checklist-cols ul{list-style:none; padding:0; margin:0; font-size:14px; color:var(--ink-dim); line-height:1.6;}
.checklist-cols li{padding-left:20px; position:relative; margin-bottom:9px;}
.checklist-cols li:last-child{margin-bottom:0;}
.checklist-cols .col:not(.no) li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700;}
.checklist-cols .col.no li::before{content:"✕"; position:absolute; left:0; color:var(--red); font-weight:700;}
@media (max-width:600px){ .checklist-cols{grid-template-columns:1fr;} }

/* ---- Practice CTA card (end of guide) ---- */
.guide-cta{
  background:var(--blue); color:#fff; border-radius:calc(var(--radius) + 4px);
  padding:clamp(28px,5vw,40px); text-align:center; margin:44px 0 12px;
}
.guide-cta h3{font-size:clamp(19px,3vw,24px); margin:0 0 10px; letter-spacing:-0.02em;}
.guide-cta p{color:rgba(255,255,255,0.75); font-size:15.5px; margin:0 0 22px; max-width:480px; margin-left:auto; margin-right:auto;}
.guide-cta .cta{background:#fff; color:var(--blue); font-size:16.5px; padding:14px 30px;}
.guide-cta .cta:hover{background:var(--bg-alt);}

/* ---- Guide index / hub cards ---- */
.guide-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:28px 0;}
.guide-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px;
  text-decoration:none; color:var(--ink); display:block; transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.guide-card:hover{border-color:var(--blue); transform:translateY(-2px);}
.guide-card .tag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:10px; display:block;}
.guide-card h3{font-size:16.5px; margin:0 0 6px; letter-spacing:-0.01em;}
.guide-card p{font-size:13.5px; color:var(--ink-dim); margin:0; line-height:1.55;}

/* ---- Section intro (used on hub page) ---- */
.section-title{font-size:clamp(22px,3.6vw,30px); letter-spacing:-0.02em; margin:0 0 10px;}
.section-sub{color:var(--ink-dim); max-width:600px; font-size:15px; margin:0 0 8px;}

footer.site-footer{
  text-align:center; padding:40px 0 60px; font-size:12.5px; color:var(--ink-faint);
  border-top:1px solid var(--line-soft); margin-top:40px;
}
footer.site-footer a{color:var(--ink-faint);}

@media (max-width:640px){
  nav.top-nav{gap:14px;}
  nav.top-nav a{font-size:13px;}
}

/* ---- Contact modal (Netlify Forms, no backend needed) ---- shared here so it's available on the
   hub and all 9 guide detail pages from one place, they already link this one stylesheet instead
   of duplicating a <style> block. */
.contact-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
.contact-backdrop.show{display:flex;}
.contact-modal{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); max-width:420px; width:100%; padding:30px 28px; position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.35);}
.contact-modal h3{margin:0 0 8px; font-size:19px; color:var(--ink);}
.contact-modal p{color:var(--ink-dim); font-size:13.5px; margin:0 0 18px; line-height:1.5;}
.contact-close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:none; background:var(--bg-alt); color:var(--ink-dim); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.contact-close:hover{background:var(--line-soft); color:var(--ink);}
.contact-modal input, .contact-modal textarea{width:100%; font-family:inherit; font-size:15px; padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg-alt); color:var(--ink); margin-bottom:10px; resize:vertical;}
.contact-modal input:focus, .contact-modal textarea:focus{outline:2px solid var(--blue); outline-offset:1px;}
.contact-modal button.cta{width:100%; text-align:center; border:none; cursor:pointer; font-family:inherit;}
.contact-honey{position:absolute !important; left:-9999px !important; width:1px; height:1px;}
.contact-success{font-size:14px; color:var(--green); text-align:center; padding:10px 0;}
.contact-err{font-size:12.5px; color:var(--red); margin-top:8px; text-align:center;}
.hidden{display:none !important;}

/* ---- Comparison tables (added for the SAT vs ACT guide, reusable by any guide) ----
   Wrapped in .table-scroll so a wide table scrolls inside its own container on narrow
   screens instead of forcing the whole page to scroll sideways. */
.table-scroll{overflow-x:auto; margin:22px 0; -webkit-overflow-scrolling:touch;}
.cmp{
  width:100%; border-collapse:collapse; font-size:15px; min-width:520px;
  background:var(--card); border-radius:14px; overflow:hidden;
}
.cmp th, .cmp td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top;}
.cmp thead th{
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint);
  font-weight:700; background:var(--bg-alt); border-bottom:1px solid var(--line);
}
.cmp tbody tr:last-child td{border-bottom:none;}
.cmp td:first-child, .cmp th:first-child{font-weight:600;}
.cmp .num{font-variant-numeric:tabular-nums; white-space:nowrap;}
.cmp caption{
  caption-side:bottom; font-size:13px; color:var(--ink-dim); text-align:left;
  padding:10px 2px 0; line-height:1.55;
}
@media (max-width:640px){ .cmp{font-size:14px;} .cmp th, .cmp td{padding:10px 11px;} }

/* Key-takeaway block: the short, quotable answer an AI summarizer or featured snippet
   should be able to lift cleanly. Visually distinct from .callout so it reads as the
   page's headline answer rather than an aside. */
.key-answer{
  background:var(--blue-tint); border-left:3px solid var(--blue); border-radius:0 14px 14px 0;
  padding:18px 20px; margin:24px 0;
}
.key-answer p{margin:0; font-size:16.5px; line-height:1.7;}
.key-answer p + p{margin-top:10px;}

/* ---- Interactive tool widget (score converter) ----
   Vanilla CSS/JS to match the rest of the site: no dependencies, works offline,
   nothing to load before the page is usable. */
.tool{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:24px 22px; margin:26px 0;
}
.tool h3{margin:0 0 4px; font-size:18px; letter-spacing:-0.01em;}
.tool .tool-hint{font-size:13.5px; color:var(--ink-dim); margin:0 0 18px;}
.tool-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
.tool-field{flex:1 1 180px; min-width:0;}
.tool-field label{
  display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-faint); font-weight:700; margin-bottom:6px;
}
.tool-field select, .tool-field input{
  width:100%; font-family:inherit; font-size:16px; font-weight:600; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-alt); color:var(--ink);
}
.tool-field input:focus, .tool-field select:focus{outline:2px solid var(--blue); outline-offset:1px;}
.tool-out{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px;
}
.tool-stat .n{font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--blue); font-variant-numeric:tabular-nums;}
.tool-stat .l{font-size:12px; color:var(--ink-dim); margin-top:2px;}
.tool-note{font-size:13.5px; color:var(--ink-dim); margin:16px 0 0; line-height:1.6;}

/* ---- Example question (Quick trick / Compare guides): a single static, non-interactive
   question with the correct choice pre-highlighted, unlike the homepage's clickable demo. ---- */
.example-q{background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:20px 22px; margin:26px 0;}
.example-q .eq-label{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; font-weight:700;}
.example-q .eq-passage{font-size:14.5px; color:var(--ink-dim); font-style:italic; margin:0 0 12px; line-height:1.6; white-space:pre-line;}
.example-q .eq-stem{font-size:15.5px; color:var(--ink); margin:0 0 12px; font-weight:600;}
.example-q .eq-choice{font-size:14px; color:var(--ink-dim); padding:9px 12px; border:1px solid var(--line-soft); border-radius:8px; margin-bottom:7px;}
.example-q .eq-choice.correct{background:var(--green-tint); border-color:var(--green); color:var(--ink); font-weight:600;}
.example-q .eq-choice.eliminated{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line);}
.example-q .eq-reasoning{border-top:1px solid var(--line-soft); padding-top:12px; margin-top:6px;}
.example-q .eq-reasoning p{font-size:14px; color:var(--ink-dim); margin:0; line-height:1.6;}

/* ---- Related-guides mini grid: lighter than .guide-card, just a link label, no tag/description ---- */
.related-links{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 26px;}
.related-links a{background:var(--card); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--ink-dim); text-decoration:none; display:block; line-height:1.4; font-weight:500;}
.related-links a:hover{border-color:var(--blue); color:var(--ink);}
@media(max-width:640px){.related-links{grid-template-columns:1fr;}}