/* PrepHooks — Refined, learning from phweb: system font stack, bold headings */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --ink:#0B0B0B;
  --muted:#52525B;
  --faint:#71717A;
  --line:#E4E4E7;
  --paper:#FFFFFF;
  --soft:#FAFAF9;
  --cream:#FFF7F7;
  --accent:#FF203B;
  --max:1120px;
  --text:640px;
  --gutter:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:#3f3f46}

/* Buttons — phweb style: lighter weight, flat */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;
  border-radius:999px;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight:500;
  font-size:16px;
  letter-spacing:-0.01em;
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .2s, border .2s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#1e1e1e}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--soft)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:#E11D34}

/* Header — Brilliant: airy, 72px tall, centered max */
header{
  max-width:var(--max);
  margin:0 auto;
  padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.header-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-size:22px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
}
.logo img{ width:28px; height:28px; border-radius:8px; object-fit:cover; display:block; border:1px solid var(--line); }
.top-nav{display:flex;align-items:center;gap:32px}
.top-nav a{font-size:15px;font-weight:450;color:#52525B;text-decoration:none}
.top-nav a:hover,.top-nav a.active{color:var(--ink)}
.top-nav .nav-cta{background:var(--ink);color:#fff;padding:8px 22px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none}
.top-nav .nav-cta:hover{background:#1e1e1e;color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:999px}

/* Hero — Brilliant: huge, centered, stacked, 64-72px, breathing room */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:64px var(--gutter) 48px;
  text-align:center;
}
.hero .eyebrow{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}
.hero h1{
  font-size:clamp(38px,6vw,58px);
  max-width:14ch;margin:0 auto;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:700;
}
.hero h1 span{display:block}
.hero p{
  margin:22px auto 0;
  max-width:56ch;
  font-size:19px;
  color:#666;
  line-height:1.7;
  font-weight:400;
}
.hero .exam-tags{margin-top:4px;font-size:15px;font-weight:400;letter-spacing:0.02em;color:var(--faint)}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}

/* Hero inside split (index first block) — left on desktop, centered when stacked */
.block .inner.split .split-text .hero{ text-align:left; padding:0; max-width:none; margin:0; }
.block .inner.split .split-text .hero h1{ margin:0; max-width:none; text-align:left; }
.block .inner.split .split-text .hero p{ margin-left:0; margin-right:0; text-align:left; }
.block .inner.split .split-text .hero .exam-tags{ text-align:left; }
.block .inner.split .split-text .hero .cta-row{ justify-content:flex-start; }

/* Hero stats — old fake counts (kept for compatibility) */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;max-width:720px;margin:36px auto 0;
  padding-top:28px;border-top:1px solid var(--line);
}
.hero-stats div{padding:0 12px;text-align:center}
.hero-stats div + div{border-left:1px solid var(--line)}
.hero-stats b{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;display:block;font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1}
.hero-stats span{font-size:11px;letter-spacing:0.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
@media(max-width:640px){.hero-stats{grid-template-columns:repeat(2,1fr);gap:16px}.hero-stats div + div{border-left:none}}
/* Exam hosts — real logos, replaces fake counts */
.exam-hosts{max-width:720px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.hosts-label{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:14px}
.hosts-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.hosts-row img{width:88px;height:88px;border-radius:20px;object-fit:contain;padding:8px;border:1px solid var(--line);background:#fff;flex-shrink:0}
.hosts-note{display:block;margin-top:10px;font-size:11px;color:var(--faint)}

/* Hooky intro — centered flying icon with soft tail, balanced rhythm */
.hooky-block{ padding:96px var(--gutter) 96px; background:var(--paper); text-align:center; overflow:visible; position:relative; }
.hooky-block .inner{ max-width:820px; margin:0 auto; position:relative; z-index:1; }
.hooky-icon-wrap{ position:relative; display:flex; justify-content:center; align-items:center; margin:0 auto 28px; width:150px; height:150px; }
.hooky-icon{ width:150px; height:150px; object-fit:contain; border-radius:28px; display:block; position:relative; z-index:1; }
.hooky-icon-wrap::after{ content:""; position:absolute; top:62%; left:50%; transform:translateX(-50%); width:110px; height:280px; background:linear-gradient(to bottom, rgba(255,32,59,0.09) 0%, rgba(255,32,59,0.04) 30%, rgba(255,32,59,0.015) 50%, transparent 78%); pointer-events:none; z-index:0; }
.hooky-block h2{ font-size:clamp(30px,4.5vw,40px); font-weight:700; letter-spacing:-0.03em; line-height:1.05; color:var(--ink); }
.hooky-sub{ margin:16px auto 0; max-width:560px; font-size:17px; color:#4b4b4b; line-height:1.7; font-weight:400; }
@media(max-width:720px){
  .hooky-block{ padding:72px 20px 72px; }
  .hooky-icon-wrap{ width:150px; height:150px; }
  .hooky-icon{ width:150px; height:150px; border-radius:24px; }
  .hooky-block h2{ font-size:clamp(28px,8vw,38px); }
}

/* Fullbleed — Brilliant: large rounded image, 24px radius, not edge-to-edge harsh */
.fullbleed{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.fullbleed .hero-media{
  width:100%;
  aspect-ratio:16/7.6;
  max-height:520px;
  border-radius:24px;
  overflow:hidden;
  background:#111;
  position:relative;
}
.fullbleed .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.fullbleed .hero-media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(520px 280px at 85% 18%, rgba(255,32,59,0.08), transparent 62%);
  pointer-events:none;
}

/* Blocks — Brilliant rhythm: 96-128px vertical, centered text 640, left/right alternates have 56px gap */
.block{padding:96px var(--gutter);max-width:var(--max);margin:0 auto}
.block .inner{max-width:var(--text);margin:0 auto;text-align:center}
.block h2{font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px}
.block p{font-size:19px;line-height:1.7;color:#4b4b4b;max-width:34em;margin:0 auto}
.block p + p{margin-top:14px}

.block .inner.split{
  max-width:var(--max);
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:56px;align-items:center;text-align:left;
}
.block .inner.split .split-text h2,
.block .inner.split .split-text p{text-align:left;margin-left:0}
.block .inner.split.reverse{grid-template-columns:0.95fr 1.05fr}
.block .inner.split.reverse .split-text{order:2}
.block .inner.split.reverse .phone-mock{order:1}

/* Split blocks balanced to Hooky — floating card with glow */
.split-block{ padding:96px var(--gutter); }
.media-wrap{ position:relative; }
.media-wrap::before{ display:none; }
.media-card{
  overflow:hidden;
  background:#F4F4F5;
  border:1px solid var(--line);
  position:relative;
  z-index:1;
  border-radius:24px;
}
.media-card img{width:100%;height:100%;object-fit:cover;display:block}
.block .inner.split .media-card{height:auto; aspect-ratio: 4 / 3; max-height:520px}
/* Centered media — option 2: image on top like Hooky icon */
.media-centered .centered-media{
  max-width:640px;
  margin:0 auto 28px;
}
.media-centered .centered-media .media-card{
  aspect-ratio: 4 / 3;
  max-height:460px;
}
.media-centered h2{ margin-bottom:12px; }
.media-centered .hooky-sub{ margin-top:0; }

/* Chips — 3 equal rounded cards, image on top */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.chip{text-align:center}
.chip .media-card{height:180px;margin-bottom:14px;border-radius:16px}
.chip b{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;display:block;font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-bottom:4px}
.chip small{color:var(--muted);font-size:14px;line-height:1.4}

/* Phone mock — keep device but slightly softer, centered */
.phone-mock{
  width:280px;height:590px;
  border:10px solid var(--ink);
  border-radius:40px;
  margin:0 auto;
  background:#fff;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:20px;background:var(--ink);border-radius:0 0 16px 16px;z-index:3}
.phone-mock img{width:100%;height:100%;object-fit:cover;display:block}
.phone-label{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);background:rgba(255,255,255,0.94);padding:6px 10px;border-radius:999px;white-space:nowrap;z-index:2}

/* Exam grid — Brilliant cards: rounded 20px, 1px border, hover lift */
.exam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;text-align:left}
.exam-card{border:1px solid var(--line);padding:22px 20px;background:#fff;border-radius:20px;display:flex;flex-direction:column;transition:transform .15s}
.exam-card:hover{transform:translateY(-2px);}
.exam-card h3{font-size:18px;font-weight:700;margin-bottom:4px}
.exam-card .meta{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.exam-card p{font-size:14px;line-height:1.6;color:#52525B;margin:0;text-align:left}
.exam-card a{font-size:13px;font-weight:500;margin-top:14px}
.exam-card.featured{border-color:var(--ink);background:var(--ink);color:#fff}
.exam-card.featured .meta{color:#A1A1AA}
.exam-card.featured p{color:#D4D4D8}
.exam-card.featured a{color:#fff}

/* Pricing — Brilliant simple 3 cards rounded */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;text-align:left}
.price-card{border:1px solid var(--line);padding:28px 24px;background:#fff;border-radius:20px}
.price-card.featured{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-4px);}
.price-card h3{font-size:18px;font-weight:700}
.price-card .price{font-size:32px;font-weight:700;letter-spacing:-0.02em;margin:12px 0 16px}
.price-card .price small{font-size:13px;font-weight:600;color:var(--faint)}
.price-card.featured .price small{color:#A1A1AA}
.price-card ul{list-style:none;margin:0;padding:0}
.price-card li{font-size:14px;padding:8px 0;border-bottom:1px solid var(--line);color:#52525B}
.price-card.featured li{border-color:#27272A;color:#D4D4D8}
.price-card li:last-child{border:none}

/* Accordion / quotes / download / footer — kept but with Brilliant spacing */
.accordion{max-width:720px;margin:36px auto 0;text-align:left;border-top:1px solid var(--line)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-question{width:100%;background:none;border:none;padding:20px 0;font-size:17px;font-weight:500;text-align:left;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit}
.accordion-question .icon{font-size:20px;color:var(--faint);transition:transform .2s}
.accordion-item.open .accordion-question .icon{transform:rotate(45deg)}
.accordion-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-item.open .accordion-answer{max-height:480px;padding-bottom:18px}
.accordion-answer p{font-size:16px;color:#3f3f46;line-height:1.7;text-align:left;margin:0}

.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;text-align:left}
.quote-card{background:var(--soft);padding:24px;border-radius:16px;border:1px solid var(--line)}
.quote-card p{font-size:15px;color:var(--ink);font-style:italic;text-align:left;margin:0;line-height:1.6}
.quote-card .who{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--faint);font-style:normal}

.download{background:var(--soft);padding:96px var(--gutter);text-align:center;border-top:1px solid var(--line)}
.download .inner{max-width:640px;margin:0 auto}
.download h2{font-size:clamp(34px,4.5vw,44px);font-weight:700;letter-spacing:-0.03em;margin-bottom:12px}
.download p{font-size:19px;color:#4b4b4b;max-width:34em;margin:0 auto 28px;line-height:1.7}
.download .cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

footer{background:var(--soft);padding:48px var(--gutter) 40px;border-top:1px solid var(--line)}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px}
.footer-nav{display:flex;gap:28px;font-size:13px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#52525B}
.footer-nav a{color:#52525B;text-decoration:none}
.footer-nav a:hover{color:var(--ink)}
.footer-meta{font-size:12px;color:var(--faint);width:100%;margin-top:8px;text-align:center}

.doc u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600}

/* Pocket — flat, before footer */
.pocket-block{ padding:72px var(--gutter); background:var(--paper); text-align:center; border-top:1px solid var(--line); }
.pocket-block .inner{ max-width:820px; margin:0 auto; }
.pocket-block h2{ font-size:clamp(28px,4vw,44px); font-weight:700; margin-bottom:24px; letter-spacing:-0.03em; }
.pocket-badges{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pocket-badges a{ display:inline-block; text-decoration:none; }
.pocket-badges img{ height:64px; width:auto; display:block; border-radius:10px; }

@media(max-width:900px){
  .exam-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .quote-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  header{padding:14px 16px}
  .top-nav{display:none;flex-direction:column;gap:18px;background:#fff;padding:24px 20px;position:absolute;top:64px;left:12px;right:12px;border:1px solid var(--line);border-radius:16px;z-index:50}
  .top-nav.open{display:flex}
  .nav-toggle{display:flex}
  .hero{padding:48px 20px 32px}
  .block{padding:72px 20px}
  .block .inner.split,.block .inner.split.reverse{grid-template-columns:1fr;gap:32px;text-align:center}
  .block .inner.split .split-text h2,.block .inner.split .split-text p{text-align:center}
  .block .inner.split.reverse .split-text,.block .inner.split.reverse .phone-mock{order:initial}
  /* hero inside split: centered when stacked (mobile) */
  .block .inner.split .split-text .hero{ text-align:center; padding:0; }
  .block .inner.split .split-text .hero h1{ margin:0 auto; text-align:center; }
  .block .inner.split .split-text .hero p{ margin-left:auto; margin-right:auto; text-align:center; }
  .block .inner.split .split-text .hero .exam-tags{ text-align:center; }
  .block .inner.split .split-text .hero .cta-row{ justify-content:center; }
  /* hosts logos: smaller on mobile */
  .hosts-row{ gap:10px; }
  .hosts-row img{ width:64px; height:64px; border-radius:14px; padding:6px; }
  .chips{grid-template-columns:1fr}
  .chip .media-card{height:220px}
  .fullbleed .hero-media{aspect-ratio:16/10;max-height:380px;border-radius:16px}
  .exam-grid{grid-template-columns:1fr}
  .phone-mock{width:260px;height:550px}
  .download{padding:72px 20px}
  .footer-inner{flex-direction:column;align-items:center;text-align:center}
}

/* Embed mode — ?origin=app inside the app WebView: hide chrome, remove borders */
html.embed-mode header,
html.embed-mode footer,
html.embed-mode .subnav,
html.embed-mode .subnav-spacer{ display:none !important; }
html.embed-mode .block,
html.embed-mode .hooky-block,
html.embed-mode .pocket-block,
html.embed-mode .download,
html.embed-mode section[style]{ border-top:none !important; border-bottom:none !important; }
html.embed-mode{ background:var(--paper); }