/* Sail to Success — content pages: How study works, About, Contact, 404.
   Builds on site.css tokens and primitives; no header, footer or button restyling.
   Prefixes: pg- shared page head · hs- how study works · ab- about · ct- contact · nf- not found. */

/* ---------- shared ---------- */
.pg-head{padding-bottom:clamp(40px,5vw,72px)}
.pg-head h1{max-width:15em}
.pg-head .rule{margin:clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px)}
.pg-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 16px}
.pg-index li{min-width:0}
.pg-index a{display:flex;flex-direction:column;gap:6px;padding:16px 0 10px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:500 14px/1.3 var(--sans);letter-spacing:.06em;transition:border-color .4s ease}
.pg-index a:hover{border-top-color:var(--brass);color:var(--ink)}
.pg-index .numeral{font-size:22px;line-height:1}

.stage-no{display:block;font:500 clamp(56px,7vw,96px)/.9 var(--serif);color:var(--brass);letter-spacing:.02em;margin:0 0 14px}
.band .stage-no{color:var(--brass-soft)}
.band :focus-visible,.nf-sea :focus-visible{outline-color:var(--brass-soft)}

.hs-next-in{text-align:center}
.hs-next-in .rule{margin-bottom:clamp(32px,4vw,56px)}
.hs-next-links{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
.hs-next-in .hs-next-links,.ab-where-in .hs-next-links{justify-content:center}

/* tick and cross lists (drawn marks, nothing for a screen reader to read out) */
.tick,.cross,.ab-list{list-style:none;margin:0;padding:0}
.tick li,.cross li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--line)}
.tick li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:6px;border-left:1.5px solid var(--sea);border-bottom:1.5px solid var(--sea);transform:rotate(-45deg)}
.cross li{color:var(--muted)}
.cross li::before,.cross li::after{content:"";position:absolute;left:3px;top:24px;width:14px;height:1.5px;background:var(--muted);transform:rotate(45deg)}
.cross li::after{transform:rotate(-45deg)}

/* ---------- How study works ---------- */
.hs-choose-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.hs-choose-in>*{min-width:0}
.stage-head{position:sticky;top:110px}
.ledger{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:120px minmax(0,1fr) 180px;gap:12px 28px;padding:28px 0;border-top:1px solid var(--line);align-items:baseline}
.ledger li>*{min-width:0}
.ledger h3{font-size:clamp(22px,2vw,27px);margin-bottom:.35em}
.ledger li p{margin:0}
.ledger-k{font:500 12.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.ledger-v{font:600 24px/1.2 var(--serif);color:var(--ink);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.ledger-v .link{display:table;margin:12px 0 0 auto;font:500 14px/1.3 var(--sans);letter-spacing:.04em}

.hs-pay-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;margin-bottom:clamp(40px,5vw,72px)}
.hs-pay-top>*{min-width:0}
.hs-pay-top .measure{color:var(--muted-d)}
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:leg}
.route li{position:relative;min-width:0;padding-top:30px;counter-increment:leg}
.route li::before{content:"";position:absolute;left:0;right:-32px;top:0;height:1px;background:var(--line-d)}
.route li:last-child::before{right:0}
.route li::after{content:counter(leg,upper-roman);position:absolute;left:0;top:-13px;padding-right:10px;background:var(--ink);font:500 18px/26px var(--serif);color:var(--brass-soft)}
.route b{display:block;font:600 22px/1.25 var(--serif);color:var(--paper);margin-bottom:10px}
.route p{margin:0;color:var(--muted-d);font-size:16px}
.hs-pay-note{max-width:44em;margin:clamp(40px,5vw,64px) 0 0;padding-top:24px;border-top:1px solid var(--line-d);color:var(--muted-d);font-size:15.5px}

.hs-access-in{align-items:center}
.hs-access-photo{margin:0}
.hs-access-photo img{aspect-ratio:4/5;height:auto}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;margin:32px 0 0}
.facts>div{min-width:0;padding-top:16px;border-top:1px solid var(--line)}
.facts dt{font:600 25px/1.2 var(--serif);color:var(--ink);margin-bottom:6px}
.facts dd{margin:0;color:var(--muted);font-size:16px}

.hs-week-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;margin-bottom:clamp(28px,4vw,48px)}
.hs-week-head>*{min-width:0}
.hs-week .rule{margin-bottom:0}
.week{list-style:none;margin:0 0 clamp(56px,7vw,96px);padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.week li{min-width:0;display:flex;flex-direction:column;gap:8px;padding:20px 14px 24px;border-left:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.5}
.week li:first-child{border-left:0;padding-left:0}
.week b{font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.week li.on{background:var(--white);color:var(--text);box-shadow:inset 0 2px 0 var(--brass)}
.week li.on:first-child{padding-left:14px}
.week .t{font:500 13px/1.35 var(--sans);letter-spacing:.04em;color:var(--brass-ink)}
.hs-need{max-width:860px}
.need{width:100%;border-collapse:collapse;font-size:16px}
.need th,.need td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--line)}
.need thead th{font:500 12.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);border-bottom-color:var(--brass)}
.need tbody th{width:34%;font:600 20px/1.3 var(--serif);color:var(--ink)}
.need td{color:var(--text)}

.hs-ask-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:end}
.hs-ask-in>*{min-width:0}
.hs-ask-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.hs-ask-cols>*{min-width:0}
.hs-ask-cols h3{font-size:24px}

.hs-after{position:relative;display:grid;min-height:clamp(520px,82vh,840px);overflow:hidden;background:var(--ink)}
.hs-after-img,.hs-after>.wrap{grid-area:1/1}
.hs-after-img{width:100%;height:100%;object-fit:cover}
.hs-after>.wrap{width:100%;align-self:end;padding-top:48px;padding-bottom:clamp(40px,6vw,88px)}
.hs-after-panel{max-width:560px;background:var(--paper);padding:clamp(28px,4vw,52px);border-top:1px solid var(--brass)}
.hs-after-panel .stage-no{font-size:clamp(48px,5vw,72px)}
.hs-after-panel p:last-child{margin-bottom:0}

/* ---------- About ---------- */
.ab-name-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.ab-name-in>*{min-width:0}
.ab-logo{margin:0;max-width:380px;justify-self:center}
.ab-logo img{width:100%;height:auto}
.ab-name-text{max-width:620px}

.ab-sea{position:relative;overflow:hidden;background:var(--ink)}
.ab-sea img{width:100%;height:clamp(340px,62vh,680px);object-fit:cover}
.ab-sea-line{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vw,64px);margin:0}
.ab-sea-line span{display:inline-block;max-width:100%;background:var(--ink);color:var(--paper);font:italic 500 clamp(22px,2.6vw,34px)/1.3 var(--serif);letter-spacing:.02em;padding:14px 22px;border-left:1px solid var(--brass-soft)}

.ab-who-photo{margin:0}
.ab-who-photo img{aspect-ratio:4/5;height:auto}
.ab-list{margin-top:28px}
.ab-list li{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--line)}
.ab-list li::before{content:"";position:absolute;left:0;top:27px;width:14px;height:1px;background:var(--brass)}

.ab-made-head{max-width:760px;margin-bottom:clamp(40px,5vw,72px)}
.ab-made-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.ab-made-list li{min-width:0;padding-top:20px;border-top:1px solid var(--brass)}
.ab-made-list .numeral{display:block;font-size:30px;line-height:1;margin-bottom:16px}
.ab-made-list h3{font-size:25px}
.ab-made-list p{margin:0;font-size:16px}

.ab-not-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.ab-not-in>*{min-width:0}
.ab-not-list{margin:0;border-bottom:1px solid var(--line)}
.ab-not-list>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:10px 32px;padding:26px 0;border-top:1px solid var(--line)}
.ab-not-list>div>*{min-width:0}
.ab-not-list dt{font:600 24px/1.25 var(--serif);color:var(--ink)}
.ab-not-list dd{margin:0}

.ab-where-in{text-align:center}
.ab-where-in .rule{margin-bottom:clamp(32px,4vw,56px)}
.ab-where-line{font:italic 500 clamp(22px,2.4vw,30px)/1.4 var(--serif);color:var(--ink-2)}

/* ---------- Contact ---------- */
.ct-letter-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.ct-letter-in>*{min-width:0}
.ct-intro .rule{margin:32px 0 8px}
.ct-ways{margin:0}
.ct-ways>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.ct-ways>div>*{min-width:0}
.ct-ways dt{font:500 12.5px/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.ct-ways dd{margin:0;overflow-wrap:anywhere}
.ct-desk{position:relative;background:var(--white);border:1px solid var(--line);padding:clamp(24px,4vw,52px)}
.ct-desk::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--brass)}
.ct-form{display:grid;gap:22px}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ct-row>*{min-width:0}
.ct-form textarea{min-height:180px;resize:vertical}
.ct-form .error-note{margin:0}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.ct-send p{margin:0;flex:1 1 220px;font-size:14px}
.ct-thanks{animation:moor .9s cubic-bezier(.2,.7,.2,1) both}
.ct-thanks:focus{outline:none}
.ct-thanks .numeral{display:inline-grid;place-items:center;width:52px;height:52px;border:1px solid var(--brass);font-size:26px;margin-bottom:22px;animation:mark .7s .35s cubic-bezier(.2,.7,.2,1) both}
.ct-thanks h2{font-size:clamp(30px,3.4vw,44px)}
.ct-thanks b{font-weight:500;overflow-wrap:anywhere}

.ct-faq{list-style:none;margin:clamp(28px,4vw,48px) 0 32px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.ct-faq li{min-width:0;padding-top:18px;border-top:1px solid var(--line)}
.ct-faq .numeral{display:block;font-size:26px;line-height:1;margin-bottom:12px}
.ct-faq h3{font-size:24px}
.ct-faq p{margin:0;font-size:16px}
.ct-ropes{background:var(--ink)}
.ct-ropes img{width:100%;height:clamp(240px,42vh,460px);object-fit:cover}

/* ---------- 404 ---------- */
.nf-sea{position:relative;display:grid;min-height:clamp(520px,78vh,780px);overflow:hidden;background:var(--ink)}
.nf-sea>img,.nf-sea::after,.nf-sea-in{grid-area:1/1}
.nf-sea>img{width:100%;height:100%;object-fit:cover}
.nf-sea::after{content:"";background:linear-gradient(90deg,rgba(14,35,64,.9) 0%,rgba(14,35,64,.74) 55%,rgba(14,35,64,.45) 100%)}
.nf-sea-in{position:relative;z-index:1;width:100%;align-self:center;padding-top:64px;padding-bottom:64px}
.nf-sea-in>*{max-width:640px}
.nf-sea .eyebrow{color:var(--brass-soft)}
.nf-sea h1{color:var(--paper)}
.nf-sea .lead{color:var(--paper)}
.nf-ghost{color:var(--paper);border-color:var(--paper)}
.nf-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.nf-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.nf-list a{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:500 clamp(22px,2.4vw,28px)/1.3 var(--serif);transition:padding-left .4s ease,color .3s ease}
.nf-list a:hover{padding-left:10px;color:var(--sea-deep)}
.nf-list .numeral{min-width:44px;font-size:20px}

/* ---------- motion of this file ---------- */
@keyframes moor{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mark{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .route li:nth-child(2n)::before{right:0}
  .ab-made-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week{grid-template-columns:1fr}
  .week li,.week li:first-child,.week li.on:first-child{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;padding:14px 16px;border-left:0;border-top:1px solid var(--line)}
  .week li:first-child{border-top:0}
  .week li.on{box-shadow:inset 2px 0 0 var(--brass)}
  .week b{padding-top:3px}
  .week li>span{grid-column:2}
  .week li.on .t{grid-row:1}
}
@media (max-width:860px){
  .hs-choose-in,.hs-ask-in,.ab-name-in,.ab-not-in,.ct-letter-in{grid-template-columns:1fr}
  .stage-head{position:static}
  .ab-logo{max-width:260px;justify-self:start}
  .ct-faq{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ledger li{grid-template-columns:1fr;gap:8px}
  .ledger-v{text-align:left}
  .ledger-v .link{margin-left:0}
  .facts{grid-template-columns:1fr}
  .ab-not-list>div{grid-template-columns:1fr}
  .hs-pay-top,.hs-week-head{grid-template-columns:1fr;gap:0}
}
@media (max-width:640px){
  .hs-after{display:block;min-height:0}
  .hs-after-img{height:auto;aspect-ratio:4/3}
  .hs-after>.wrap{padding-top:0;padding-bottom:0}
  .hs-after-panel{margin:-40px 0 0;position:relative;max-width:none}
  .hs-after{padding-bottom:48px;background:var(--paper)}
  .nf-sea::after{background:rgba(14,35,64,.8)}
}
@media (max-width:560px){
  .route,.ab-made-list,.hs-ask-cols,.ct-row{grid-template-columns:1fr}
  .route li::before{right:0}
  .ct-ways>div{grid-template-columns:1fr}
  .need tbody th{width:40%;font-size:18px}
  .need th,.need td{padding-right:12px}
  .ab-sea-line span{padding:12px 16px}
}

@media (prefers-reduced-motion:reduce){
  .ct-thanks,.ct-thanks .numeral{animation:none}
  .pg-index a,.nf-list a{transition:none}
  .nf-list a:hover{padding-left:0}
}