/* ---------- Fonts (vendored, no network) ---------- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/anton-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/architects-daughter-latin-400-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --blue:#0F3D91;
  --blue-deep:#0A2B6B;
  --ink:#EAF0FF;
  --ink-dim:#9DB8E8;
  --ink-faint:rgba(234,240,255,.08);
  --stamp:#FF7A50;

  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --hand:"Architects Daughter","Segoe Print","Comic Sans MS",cursive;

  --frame:18px;              /* sheet border inset */
  --pad-x:clamp(20px,6vw,96px);
  --pad-top:clamp(56px,9vh,110px);
  --pad-bottom:clamp(120px,18vh,170px);   /* keeps content above title block + ruler */
  --tb-w:300px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--blue);color:var(--ink);-webkit-text-size-adjust:100%}
body{
  font-family:var(--mono);
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.5;
  overflow:hidden;
  height:100dvh;
  /* blueprint field: base blue + fine grid + major grid */
  background-color:var(--blue);
  background-image:
    repeating-linear-gradient(0deg,  var(--ink-faint) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(234,240,255,.13) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(234,240,255,.13) 0 1px, transparent 1px 120px);
  background-position:0 0;
}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* paper grain + vignette, fixed under everything interactive */
.paper{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.22;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10,43,107,.75) 100%)}

/* hand-drawn sheet frame around the viewport */
.frame{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:url(#pencil)}
.frame path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.9}

/* ---------- Deck ---------- */
.swiper{position:relative;z-index:3;width:100%;height:100dvh}
.swiper-slide{position:relative;height:100dvh;overflow:hidden}
.swiper-slide .ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:url(#pencil)}
.swiper-slide .ink path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.swiper-slide .ink text{font-family:var(--hand);fill:var(--ink-dim);font-size:15px}

.sheet{
  position:relative;
  height:100%;
  padding:var(--pad-top) calc(var(--pad-x) + var(--tb-w)) var(--pad-bottom) var(--pad-x);
  display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(18px,3vh,34px);
  max-width:1500px;
  overflow:auto;                       /* only kicks in on very short viewports */
  scrollbar-width:none;
}
.sheet::-webkit-scrollbar{display:none}
.sheet > :first-child{margin-top:auto}
.sheet > :last-child{margin-bottom:auto}
.tb-short{display:none}

/* ---------- Type ---------- */
.display{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,8.4vw,8.2rem);
  line-height:.92;letter-spacing:.005em;text-transform:none;
  margin:0;color:#fff;
  filter:url(#pencil);
}
.display-sm{font-size:clamp(2.4rem,5.6vw,5.4rem)}
.display[data-ink="dim"]{margin-bottom:46px}
.display[data-ink="underline"]{margin-bottom:14px}
.heading{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,3.8vw,3.6rem);line-height:1.02;letter-spacing:.005em;
  margin:0;color:#fff;filter:url(#pencil);
}
h3{font-family:var(--mono);font-weight:700;font-size:1.05em;line-height:1.35;margin:0 0 .5em}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.4;max-width:34em;color:var(--ink)}
.note{color:var(--ink-dim);max-width:40em}
.hand{font-family:var(--hand);font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.35;color:var(--ink-dim);max-width:36em}
.none{color:var(--ink-dim);font-family:var(--hand);font-size:1.05em}

/* ---------- A-02 figures ---------- */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin:.6em 0 .8em}
.figure{display:flex;flex-direction:column;gap:.35em;padding:6px 4px}
.figure .big{font-family:var(--display);font-size:clamp(3.2rem,6.5vw,6.4rem);line-height:.9;color:#fff;filter:url(#pencil)}
.figure .what{font-size:1.05em;line-height:1.35;max-width:16em}
.figure .who{font-family:var(--hand);color:var(--ink-dim);font-size:.95em;line-height:1.3}

/* ---------- A-03 schedule table ---------- */
.schedule{border-collapse:collapse;width:min(100%,920px);font-size:.98em}
.schedule caption{text-align:left;font-family:var(--hand);color:var(--ink-dim);padding:0 0 .6em;font-size:1.1em}
.schedule th,.schedule td{text-align:left;padding:.55em .9em .55em 0;border-bottom:1px solid rgba(234,240,255,.35);vertical-align:top}
.schedule th{font-weight:700;border-bottom:2px solid rgba(234,240,255,.7)}
.schedule tbody tr:last-child td{border-bottom:2px solid rgba(234,240,255,.7)}

/* ---------- Columns (A-04, A-06) ---------- */
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.5vw,56px)}
.columns-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px}
.col p{color:var(--ink);max-width:30em;line-height:1.5}

/* ---------- A-05 steps ---------- */
.steps{list-style:none;margin:.5em 0 .3em;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.step{position:relative;padding:14px 10px 10px}
.step .num{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;color:#fff;display:block;margin-bottom:.35em;filter:url(#pencil)}
.step p{line-height:1.5}

/* ---------- A-06 flow ---------- */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(30px,4vw,64px);align-items:stretch;margin:.5em 0 1em}
.node{padding:14px 12px;display:flex;flex-direction:column;gap:.3em;min-height:5.2em}
.node strong{font-weight:700}
.node span{font-family:var(--hand);color:var(--ink-dim);line-height:1.25;font-size:.95em}

/* ---------- A-07 tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin:.4em 0 .8em}
.tier{padding:16px 14px 12px;display:flex;flex-direction:column;gap:.4em}
.tier h3{margin:0}
.tier .price{font-family:var(--display);font-size:clamp(1.9rem,3.2vw,3rem);line-height:1;color:#fff;filter:url(#pencil)}
.tier .price small{font-family:var(--mono);font-size:.38em;color:var(--ink-dim);margin-left:.4em;vertical-align:middle}
.tier .span{font-family:var(--hand);color:var(--ink-dim);font-size:1.05em}
.tier ul{margin:.5em 0 0;padding:0 0 0 1.1em;line-height:1.55}
.tier ul li{padding-left:.15em}
.tier .tag{font-family:var(--hand);color:var(--ink-dim);margin-top:-.3em}

/* ---------- A-08 guarantee ---------- */
.terms{margin:.6em 0 0;display:grid;gap:1em;max-width:760px}
.terms div{display:grid;grid-template-columns:11em 1fr;gap:1.2em;align-items:baseline;padding-bottom:.8em;border-bottom:1px solid rgba(234,240,255,.35)}
.terms dt{font-weight:700}
.terms dd{margin:0;line-height:1.5}
.stamp{
  position:absolute;right:calc(var(--pad-x) + var(--tb-w));top:10%;z-index:2;
  width:clamp(160px,18vw,260px);aspect-ratio:1;
  border:5px double var(--stamp);border-radius:50%;
  display:grid;place-items:center;
  transform:rotate(-14deg);
  color:var(--stamp);font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:.06em;text-transform:uppercase;
  opacity:.95;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.6 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.6 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size:100% 100%;-webkit-mask-size:100% 100%;
}
.stamp span{padding:0 .5em;text-align:center;line-height:1}
.stamp::before{content:"";position:absolute;inset:10px;border:2px solid var(--stamp);border-radius:50%}

/* ---------- A-09 actions ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4em 2.2em;margin:.6em 0 .6em}
.button{
  display:inline-block;padding:.9em 1.6em;color:#fff;text-decoration:none;font-weight:700;font-size:1.05em;
  background:transparent;border-radius:2px;
}
.button:hover{background:rgba(234,240,255,.08)}
.textlink{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--ink-dim)}
.textlink:hover{text-decoration-color:var(--ink)}

/* ---------- Chrome: ruler, arrows, title block ---------- */
.ruler{
  position:fixed;left:var(--pad-x);bottom:calc(var(--frame) + 26px);z-index:4;
  display:flex;align-items:flex-end;gap:0;
  height:34px;
}
.ruler button{
  appearance:none;background:none;border:0;padding:0 0 0 0;margin:0;cursor:pointer;
  width:clamp(28px,3vw,46px);height:34px;position:relative;color:var(--ink-dim);
  font-family:var(--mono);font-size:10px;
}
.ruler button::before{content:"";position:absolute;left:0;bottom:0;width:1.5px;height:12px;background:var(--ink);opacity:.7}
.ruler button::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:6px;background:var(--ink);opacity:.45}
.ruler button span{position:absolute;left:3px;bottom:14px;white-space:nowrap;opacity:.7;transition:opacity .2s}
.ruler button[aria-current="true"]{color:#fff}
.ruler button[aria-current="true"]::before{height:22px;opacity:1;width:2px}
.ruler button[aria-current="true"] span{opacity:1;font-weight:700}
.ruler-end{width:1.5px;height:12px;background:var(--ink);opacity:.7}

.arrows{position:fixed;right:calc(var(--pad-x) + var(--tb-w) + 8px);bottom:calc(var(--frame) + 20px);z-index:4;display:flex;gap:10px}
.arrow{appearance:none;background:transparent;border:1.5px solid var(--ink);border-radius:50%;width:44px;height:44px;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:background .15s,opacity .15s}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{background:rgba(234,240,255,.1)}
.arrow[disabled]{opacity:.3;cursor:default}
.arrow[disabled]:hover{background:transparent}

.titleblock{
  position:fixed;right:var(--frame);bottom:var(--frame);z-index:4;
  width:var(--tb-w);
  border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);
  font-size:11.5px;line-height:1.35;background:rgba(15,61,145,.6);backdrop-filter:blur(2px);
}
.tb-row{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid rgba(234,240,255,.35)}
.tb-row:last-child{border-bottom:0}
.tb-k{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;width:76px;flex:0 0 auto;padding-top:2px}
.tb-v{color:#fff}
.tb-split{gap:0;padding:0}
.tb-split > span{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-right:1px solid rgba(234,240,255,.35);flex:1}
.tb-split > span:last-child{border-right:0}
.tb-split .tb-k{width:auto}

/* ---------- Reveal state (JS animates .reveal in) ---------- */
.js .reveal{opacity:0}
.js .stamp{opacity:0}
.js .swiper-slide-active .reveal.is-in{opacity:1}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  :root{--tb-w:0px}
  .sheet{padding-right:var(--pad-x)}
  .titleblock{width:auto;left:var(--frame);right:var(--frame);border-top:1.5px solid var(--ink);border-left:0;display:flex;font-size:10.5px;height:44px}
  .titleblock .tb-row{border-bottom:0;border-right:1px solid rgba(234,240,255,.35);padding:0 10px;align-items:center;white-space:nowrap}
  .titleblock .tb-row:nth-child(2),.titleblock .tb-row:nth-child(4),.tb-split > span:nth-child(3){display:none}
  .tb-split > span:nth-child(2){border-right:0}
  .titleblock .tb-row:last-child{border-right:0}
  .tb-long{display:none}.tb-short{display:inline}
  .tb-k{width:auto;padding-top:0}
  .tb-split{flex:1;padding:0}
  .tb-split > span{flex-direction:row;align-items:center;gap:6px;padding:0 10px;height:100%;justify-content:center}
  .arrows{right:var(--pad-x);bottom:calc(var(--frame) + 44px + 16px)}
  .ruler{bottom:calc(var(--frame) + 44px + 22px)}
  .stamp{right:var(--pad-x);top:auto;bottom:calc(var(--pad-bottom) - 10px);width:140px;font-size:1.2rem}
  :root{--pad-bottom:150px}
}
@media (max-width:820px){
  :root{--pad-top:34px;--pad-bottom:128px}
  body{font-size:13px}
  h3{font-size:1em}
  .lede{font-size:1.05rem}
  .hand{font-size:1.05rem}
  .col p{line-height:1.45}
  .tier{padding:8px 10px 6px;gap:.15em}
  .tier .price{font-size:1.6rem}
  .tier ul{line-height:1.25;margin-top:.15em}
  .tiers{margin:.2em 0 .3em}
  .tier .tag{display:none}
  .node{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.2em .6em;padding:7px 10px}
  .node span::before{content:"— "}
  .flow{gap:14px;margin:0 0 .4em}
  .step{padding:8px 10px 6px}
  .step .num{font-size:1.8rem;margin-bottom:.1em}
  .steps{gap:18px}
  .tiers{gap:14px}
  .tiers h3{margin-bottom:.15em}
  .tiers .span{font-size:.95em}
  .columns,.columns-2{gap:14px}
  .terms{gap:.6em}
  .sheet{gap:18px}
  .figures,.columns,.columns-2,.steps,.tiers{grid-template-columns:1fr;gap:16px}
  .flow{grid-template-columns:1fr;gap:18px;max-width:420px}
  .node{min-height:0;padding:10px 12px}
  .figure .big{font-size:2.6rem}
  .figure{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.4em .8em}
  .figure .what{max-width:none;flex:1 1 100%}
  .schedule{font-size:.85em}
  .schedule th:nth-child(4),.schedule td:nth-child(4){display:none}
  .terms div{grid-template-columns:1fr;gap:.2em}
  .ruler button span{display:none}
  .ruler button[aria-current="true"] span{display:block}
  .display{font-size:clamp(2.4rem,12vw,4rem)}
  .display-sm{font-size:clamp(2rem,9vw,3rem)}
  .heading{font-size:clamp(1.6rem,7vw,2.4rem)}
  .stamp{width:104px;font-size:.95rem;bottom:calc(var(--pad-bottom) + 44px);right:calc(var(--pad-x) + 14px)}
}
@media (max-height:780px) and (min-width:821px){
  :root{--pad-top:40px;--pad-bottom:130px}
  .display{font-size:clamp(2.6rem,6.8vw,5.6rem)}
  .display[data-ink="dim"]{margin-bottom:40px}
  .sheet{gap:clamp(12px,2vh,22px)}
}
@media (max-height:640px){
  :root{--pad-top:36px}
  .sheet{gap:12px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1}
  .js .stamp{opacity:.95}
  .frame,.swiper-slide .ink,.display,.heading,.figure .big,.step .num,.tier .price{filter:none}
  *{transition:none!important}
}