/* THE GAP YEARS PLAN — landing page
   ────────────────────────────────────────────────────────────────────────
   Palette: Australian flag blue (#00247D) as the structural colour, flag
   red (#E4002B) reserved for calls to action only. Red is never used for
   decoration — if it is red, it is something to click. That keeps a
   two-colour scheme from turning into noise.

   Cards, panels and colour blocks are used deliberately here: this is a
   sales page, and the audience scans it before reading it.

   Type is 17px+ throughout and tap targets are 48px+, because the buyers
   are 55–67 and mostly on iPad — the same rule the workbook itself follows.

   NO WEB FONTS. The system stack is on every device this audience owns; it
   removes two render-blocking requests to Google and stops a page that
   talks about privacy handing visitors' IPs to a third party.

   ⚠️ NEVER put a clamp() inside a `font:` shorthand — the CSS parser
   rejects the whole declaration silently and the element falls back to
   body size. That bug shipped in the workbook for two days. Longhand only.
   ──────────────────────────────────────────────────────────────────────── */

:root{
  --navy:#00247D; --navy-d:#001A5C; --navy-t:#EDF2FB;
  --red:#E4002B;  --red-d:#B80023;  --red-t:#FDECF0;

  --ink:#0F1B2D; --ink2:#46536B; --ink3:#74809A;
  --line:#DCE3EF; --bg:#FFFFFF; --bg-alt:#F5F8FD;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sh:0 1px 2px rgba(15,27,45,.05),0 8px 24px rgba(15,27,45,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:0;top:0;z-index:99;background:var(--navy);color:#fff;padding:.8rem 1rem}

.wrap{max-width:70rem;margin:0 auto;padding:0 1.5rem}
.mid{text-align:center}

/* ── BUTTONS — red means "click me", and nothing else is red ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;letter-spacing:.01em;
  border:0;border-radius:9px;padding:1rem 1.9rem;min-height:52px;
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-d)}
.btn--sm{padding:.7rem 1.2rem;min-height:46px;font-size:.95rem}
.btn--lg{padding:1.15rem 2.4rem;min-height:60px;font-size:1.12rem}

.tag{
  display:inline-block;font-weight:700;font-size:.86rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);background:var(--navy-t);
  border-radius:999px;padding:.5rem 1rem;margin-bottom:1.4rem;
}
.tag--light{background:rgba(255,255,255,.14);color:#DCE7FA}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.logo__mark{
  width:38px;height:38px;flex:none;border-radius:9px;background:var(--navy);
  color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.logo__txt{display:flex;flex-direction:column;line-height:1.15}
.logo__txt strong{font-size:1.06rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em}
.logo__txt strong span{color:var(--navy)}
.logo__txt em{font-style:normal;font-size:.82rem;color:var(--ink3)}

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:3.6rem 0 3.4rem}
.hero__in{text-align:center}

h1{
  font-weight:800;
  font-size:clamp(2rem,1.3rem+2.8vw,3.3rem);
  line-height:1.14;letter-spacing:-.025em;
  margin:0 auto 1.2rem;max-width:28ch;
}
.hl{color:var(--navy)}

.lede{
  font-size:clamp(1.06rem,1rem+.4vw,1.22rem);line-height:1.6;
  color:var(--ink2);max-width:44rem;margin:0 auto 2rem;
}
.micro{font-size:.95rem;line-height:1.6;color:var(--ink3);margin-top:1rem}

/* ── PRODUCT SHOT ─────────────────────────────────────────────────────────
   The source image is 604x336. Capped at 46rem so it is not upscaled much
   beyond native — a bigger export would let this go wider. width/height are
   on the <img> so the space is reserved and the hero does not jump as it
   loads. */
/* ⚠️ CENTRING: use the PHYSICAL `margin` shorthand, not margin-inline.
   margin-inline is a logical property and did not take effect in the
   browser this was reported from, while max-width in the same rule did —
   the figure sat hard against the left edge of the container while every
   other element in the hero was centred. The physical shorthand is
   universally supported. Do not "modernise" this back to margin-inline.

   The parent .hero__in is text-align:center, so the belt-and-braces is
   already there for anything inline; this handles the block box. */
.shot{
  display:block;
  max-width:54rem;
  margin:.4rem auto 2.4rem;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--sh);background:#fff;
}
.shot img{display:block;width:100%;height:auto}

.trust{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem;
}
.trust li{font-size:.98rem;font-weight:600;color:var(--ink2);padding-left:1.6rem;position:relative}
.trust li::before{
  content:"✓";position:absolute;left:0;color:var(--navy);font-weight:800;
}

/* ── SECTIONS ────────────────────────────────────────────────────────── */
.sec{padding:4.5rem 0}
.sec--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--navy{background:var(--navy);color:#E6EDFA}
.sec--navy h2{color:#fff}
.sec--navy .head p{color:#C3D2EE}

.head{margin-bottom:2.6rem}
.head--mid{text-align:center}
.head--mid .rule{margin-left:auto;margin-right:auto}
.head--mid p{margin-left:auto;margin-right:auto}
h2{font-weight:800;font-size:clamp(1.6rem,1.3rem+1.2vw,2.2rem);line-height:1.2;letter-spacing:-.022em;margin-bottom:.8rem}
.head .rule{display:block;width:64px;height:5px;border-radius:3px;background:var(--red);margin-bottom:1rem}
.rule--light{background:#fff;opacity:.85}
.head p{font-size:1.06rem;color:var(--ink2);max-width:44rem}
h3{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.45rem}
p+p{margin-top:1rem}
.big{font-size:1.16rem;line-height:1.6}

/* ── THE GAP + PHASES ────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.two p{color:var(--ink2)}
.two .big{color:var(--ink)}

.phases{list-style:none;display:grid;gap:.5rem}
.phases li{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:10px;padding:.85rem 1.1rem;
}
.phases b{font-size:.9rem;font-weight:800;color:var(--ink3);min-width:4rem;flex:none}
.phases span{font-weight:700;color:var(--ink)}
.phases i{
  font-style:normal;font-size:.84rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--red);margin-left:auto;
}
.phases .on{background:var(--navy);border-color:var(--navy);border-left-color:var(--red)}
.phases .on b{color:#9FB8E4}
.phases .on span{color:#fff}
.phases .on i{color:#FF9DB1}

/* ── CARDS ───────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:1.7rem 1.6rem;box-shadow:var(--sh);
}
.card p{font-size:1rem;color:var(--ink2)}
.card__ic{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:12px;font-size:1.35rem;margin-bottom:1rem;
}
.ic--blue{background:var(--navy-t)}
.ic--red{background:var(--red-t)}

/* ── QUOTES — real YouTube comments ──────────────────────────────────── */
.quotes{columns:3;column-gap:1.3rem}
.quotes blockquote{
  break-inside:avoid;background:#fff;color:var(--ink);
  border-radius:13px;padding:1.5rem 1.5rem 1.3rem;margin-bottom:1.3rem;
  border-top:4px solid var(--red);
}
.quotes p{font-size:1rem;line-height:1.6;color:var(--ink2);margin-bottom:1rem}
.quotes cite{font-style:normal;font-weight:800;font-size:.95rem;color:var(--navy)}
.quotes cite span{font-weight:400;color:var(--ink3)}

/* ── INDEXATION DATES ────────────────────────────────────────────────── */
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem}
.date{background:#fff;border:1px solid var(--line);border-radius:13px;padding:1.5rem;box-shadow:var(--sh)}
.date b{display:block;font-size:1.06rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.date span{font-size:1rem;color:var(--ink2)}
.date--on{border-color:var(--red);border-width:2px}
.date--on b{color:var(--red)}
.date em{font-style:normal;font-weight:700}
.dates__note{max-width:48rem;margin:0 auto 2rem;text-align:center;color:var(--ink2)}

/* ── SOURCES ─────────────────────────────────────────────────────────── */
.method{
  max-width:48rem;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:2.2rem;box-shadow:var(--sh);
}
.method p{color:var(--ink2)}
.srcs{margin:1.8rem 0 1.4rem}
.srcs > div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.srcs > div:last-child{border-bottom:0}
.srcs dt{font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:.25rem}
.srcs dd{font-size:1.02rem;color:var(--ink)}
/* ASFA is an industry body — qualified inline so a stacked list cannot read
   as several endorsements sitting side by side. */
.srcs dd span{color:var(--ink3);font-size:.94rem}

/* ── FINAL CTA ───────────────────────────────────────────────────────── */
.final{
  max-width:44rem;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:3.2rem 2rem;
  box-shadow:var(--sh);
}
.final > p{color:var(--ink2);max-width:32rem;margin:0 auto}
.price{font-size:3.6rem;font-weight:800;letter-spacing:-.035em;line-height:1;margin:1.6rem 0!important;color:var(--navy)}
.price span{font-size:1.4rem;vertical-align:super;color:var(--ink2);margin-right:.1rem}
.ticks{list-style:none;display:inline-grid;gap:.6rem;text-align:left;margin-top:2rem}
.ticks li{font-size:1rem;color:var(--ink2);padding-left:1.7rem;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot{background:#fff;border-top:1px solid var(--line);padding:2.4rem 0 4rem}
.foot__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;padding-bottom:1.6rem}
.foot__top p{font-size:.98rem}
.foot__top nav{display:flex;gap:1.6rem}
.foot__top a{font-size:.95rem}

/* The disclaimer must be readable — this is the audience most likely to
   need it — but must not compete with the page. Never 12px. */
.legal{max-width:46rem;border-top:1px solid var(--line);padding-top:1.8rem}
.legal h2{font-size:.86rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:1.7rem 0 .7rem}
.legal h2:first-child{margin-top:0}
.legal p{font-size:.95rem;line-height:1.7;color:var(--ink2);margin-top:.8rem}
.legal p:first-of-type{margin-top:0}
.foot__c{margin-top:1.8rem!important;color:var(--ink3)}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .quotes{columns:2}
}

@media (max-width:820px){
  .two{grid-template-columns:1fr;gap:2.2rem}
  .dates{grid-template-columns:1fr}
}

@media (max-width:640px){
  .sec{padding:3.2rem 0}
  .hero{padding:2.6rem 0 2.8rem}
  .cards,.quotes{grid-template-columns:1fr;columns:1}
  .trust{flex-direction:column;align-items:flex-start;text-align:left;gap:.6rem}
  .final{padding:2.2rem 1.3rem}
  .method{padding:1.5rem}
  .foot__top{flex-direction:column;align-items:flex-start;gap:.6rem}
  /* The nav CTA STAYS on phones — it is the only persistent buy button on
     the longest scroll. Shrink it, never hide it. */
  .btn--sm{padding:.6rem .9rem;font-size:.88rem;min-height:44px}
  .logo__txt strong{font-size:.98rem}
  .phases i{margin-left:0;flex-basis:100%;margin-top:.2rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media print{
  .nav,.btn{display:none!important}
  body{font-size:11pt}
  .sec--navy{background:#fff;color:#000}
}