/* caddie-sg (pay.caddie.sg) stylesheet. Tokens copied from the live caddie.sg plans page
   (Trials/caddie/dist/plans/index.html :root, which copies site/index.html; Caddie palette, JJ 2026-09-26).
   Fonts are self-hosted (OFL, see fonts/OFL.txt): no Google Fonts request from this store. */

@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root{
  --bg:#F2F2F7;
  --bg-2:#E5E5EA;
  --ink:#1C1C1E;
  --ink-2:#3A3A3C;
  --ink-3:#636366;
  --ink-raised:#2C2C2E;
  --line:#D1D1D6;
  --accent:#8ECFF5;
  --deep:#2A55C4;
  --warm:#FF6B9A;
  --on-dark:#FFFFFF;
  --plate:#FFFFFF;
  --sans:"Hanken Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(1.25rem,4vw,3rem);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --header-h:4rem;
  --dur:.24s;
  --grow-tint:#EEF6FD;  /* plans page token: the chosen card */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.55 var(--sans);
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
main{ flex:1 0 auto; }
h1,h2,h3{ margin:0; font-weight:600; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* Skip link: visible on focus only */
.skip{ position:absolute; left:.75rem; top:-4rem; z-index:10; padding:.6rem 1rem; min-height:44px; display:inline-flex; align-items:center;
  background:var(--ink); color:var(--on-dark); font-weight:600; text-decoration:none; border-radius:3px; }
.skip:focus{ top:.75rem; }

/* Preview note (settings row preview_bar), shown while the store is in Stripe TEST mode */
.preview-bar{ background:var(--ink); color:var(--on-dark); font:500 .75rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.02em;
  text-align:center; padding:.55rem var(--pad); }

/* Labels and buttons: same feel as the caddie.sg .label / .btn */
.label{ font:500 .75rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.02em; color:var(--ink-2); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.25rem;
  font:600 1rem/1.15 var(--sans); letter-spacing:-.01em; text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:3px; cursor:pointer;
  transition:background-color var(--dur) var(--ease-ui), color var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui);
}
.btn-primary{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.btn-primary:hover{ background:var(--ink-raised); border-color:var(--ink-raised); }
.btn-ghost{ background:var(--plate); color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--on-dark); }
.btn:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; }

/* Content: plain pages such as /terms and /done */
.page{ padding-block:clamp(2.5rem,7vw,5rem); }
.page h1{ font-size:clamp(2rem,1.4rem + 3vw,3.5rem); line-height:1.05; letter-spacing:-.03em; font-weight:700; max-width:20ch; margin-bottom:1rem; }
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem); letter-spacing:-.02em; margin:2rem 0 .6rem; }
.prose p, .prose ul, .prose ol{ margin:0 0 1rem; color:var(--ink-2); }
.prose ul{ list-style:disc; padding-left:1.25rem; }
.prose ol{ padding-left:1.25rem; }
.prose li + li{ margin-top:.35rem; }
.prose a{ color:var(--deep); text-underline-offset:.2em; }
.draft-note{ display:block; margin:0 0 1.5rem; padding:.9rem 1rem; background:var(--plate); border:1px solid var(--line); border-left:4px solid var(--warm);
  border-radius:4px; font:500 .8125rem/1.45 var(--mono); text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }

/* Header: look copied from caddie.sg (Header N2: bare logo, deep blue CTA) */
.site-head{ background:var(--bg); }
.head-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:var(--header-h); }
.wordmark{ display:flex; align-items:center; gap:.6rem; min-height:44px; text-decoration:none; color:var(--ink); white-space:nowrap; }
.wordmark-head{ height:2rem; width:auto; flex:none; margin-right:-.15rem; }
.wordmark b{ font:700 1.5rem/1 var(--sans); letter-spacing:-.055em; }
.pill-cta{ display:inline-flex; align-items:center; min-height:44px; gap:.5rem; padding:.4rem 0 .4rem 1.1rem; white-space:nowrap;
  font-weight:600; font-size:.95rem; color:var(--deep); text-decoration:none; }
.pill-cta .pc-arrow{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--deep); color:#fff; transition:transform .2s var(--ease); }
.pill-cta svg{ width:.9rem; height:.9rem; }
.pill-cta:hover{ text-decoration:underline; text-underline-offset:.25em; }
.pill-cta:hover .pc-arrow{ transform:translateX(2px); }
@media (max-width:479px){
  .wordmark{ gap:.45rem; }
  .wordmark b{ font-size:1.3rem; }
  .pill-cta{ padding-left:.55rem; gap:.3rem; }
  .pill-cta .pc-arrow{ width:1.7rem; height:1.7rem; }
}

/* Footer: look copied from caddie.sg (Footer v2, night ground) */
.site-foot{
  --ink:#F4F5F8; --ink-2:#B4B9C6; --line:rgba(255,255,255,.10);
  background:#111217; color:var(--ink-2); border-top:1px solid rgba(255,255,255,.08);
  padding-block:clamp(2.5rem,5vw,4rem) 1.5rem; font-size:.9rem; }
.foot-grid{ display:grid; gap:2rem; }
.foot-mark{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; color:var(--ink); text-decoration:none; }
.foot-mark img{ width:auto; height:40px; }
.foot-mark b{ font-size:1.6rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.foot-tag{ margin:.35rem 0 0; color:var(--ink-2); }
.foot-k{ margin:0 0 .75rem; font:500 .7rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }
.foot-col ul{ display:grid; gap:.3rem; }
.site-foot a{ color:var(--ink); }
.foot-col a, .foot-base a{ display:inline-flex; align-items:center; min-height:28px; text-decoration:none; }
.foot-col a:hover, .foot-base a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-foot :focus-visible{ outline-color:var(--ink); }
.foot-base{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 2rem;
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.1rem; border-top:1px solid var(--line); font-size:.82rem; }
.foot-base a{ color:var(--ink-2); }
@media (min-width:560px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){
  .foot-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:2rem; }
  .foot-brand{ grid-column:1 / span 6; }
  .foot-pages{ grid-column:7 / span 3; }
  .foot-contact{ grid-column:10 / span 3; }
}

/* ---------- Subscriptions module pages (engine 1.2.0 class contract: sec, page, wrap, narrow, prose, h2, btn,
   btn-primary, note, lead, co-err and the sub-* names; markup in the engine's src/modules/subscriptions/pages.js).
   Look follows the live plans page cards: white plate, 1px line, 6px radius, Grow-tint and deep-blue ring when chosen.
   Only the monthly price is ever in this markup; no list or struck price is shown. ---------- */
.wrap.narrow{ max-width:calc(40rem + 2 * var(--pad)); }
.lead{ margin:-.25rem 0 1.5rem; max-width:60ch; color:var(--ink-2); }
.note{ margin:1rem 0; font-size:.9rem; line-height:1.45; color:var(--ink-2); }
.note a, .sub-plan-page > .wrap > p > a, .sub-msg a{ color:var(--deep); text-underline-offset:.2em; display:inline-flex; align-items:center; min-height:24px; }
.h2{ font-size:1.375rem; font-weight:700; letter-spacing:-.02em; }

/* Plan index: one card per plan */
.sub-plans{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.5rem; }
@media (min-width:40rem){ .sub-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:60rem; } }
.sub-plan{ display:flex; flex-direction:column; gap:1rem; padding:1.25rem; background:var(--plate); border:1px solid var(--line); border-radius:6px; }
.sub-terms{ display:grid; gap:0; border-top:1px solid var(--bg-2); }
.sub-terms li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--bg-2); }
.sub-plan .sub-term{ font-weight:500; color:var(--ink-2); }
.sub-plan .sub-price{ font-weight:700; letter-spacing:-.02em; text-align:right; }
.sub-plan p:last-child{ margin-top:auto; }
.sub-plan .btn{ width:100%; }
/* One primary action per page: on the index each plan's link takes the outline style (live .btn-ghost) */
.sub-index .btn-primary{ background:var(--plate); color:var(--ink); border-color:var(--ink); }
.sub-index .btn-primary:hover{ background:var(--ink); color:var(--on-dark); }
.sub-terms-link{ margin-top:1.5rem; }

/* Plan page: the sign-up form */
.sub-form{ display:grid; gap:1.5rem; margin-top:1.5rem; }
.sub-fs{ margin:0; padding:0; border:0; min-width:0; display:grid; gap:.6rem; }
.sub-fs legend{ padding:0; margin-bottom:.6rem; font:500 .75rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.02em; color:var(--ink-2); }
/* Each option is a card; the label's ::after stretches over the whole card, so any tap on it selects the radio */
.sub-opt{ position:relative; display:grid; gap:.2rem; padding:1rem 1rem 1rem 3.25rem; min-height:4rem;
  background:var(--plate); border:1px solid var(--line); border-radius:6px; cursor:pointer;
  transition:border-color var(--dur) var(--ease-ui), background-color var(--dur) var(--ease-ui), box-shadow var(--dur) var(--ease-ui); }
.sub-opt:hover{ border-color:var(--ink-3); }
.sub-opt label{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; cursor:pointer;
  font-size:0; /* hides the bare ", " text node between term and price; the spans set their own size */ }
.sub-opt label::after{ content:""; position:absolute; inset:0; border-radius:6px; }
.sub-opt label > span{ font-size:1.0625rem; line-height:1.3; }
.sub-opt .sub-term{ font-weight:600; color:var(--ink); }
.sub-opt .sub-price{ font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.sub-billed{ font-size:.875rem; line-height:1.35; color:var(--ink-2); text-wrap:pretty; }
.sub-opt input[type=radio]{ position:absolute; left:1rem; top:1.05rem; width:1.5rem; height:1.5rem; margin:0; accent-color:var(--deep); cursor:pointer; }
.sub-opt:has(input:checked){ background:var(--grow-tint); border-color:var(--deep); box-shadow:inset 0 0 0 1px var(--deep); }
.sub-opt:has(input:focus-visible){ outline:2px solid var(--deep); outline-offset:3px; }
.sub-opt input:focus-visible{ outline:none; }
.sub-fs[aria-invalid=true] .sub-opt{ border-color:var(--warm); }

.sub-field{ display:grid; gap:.4rem; }
.sub-lbl{ font-weight:600; font-size:.95rem; }
.sub-field input{ width:100%; min-height:48px; padding:.7rem .85rem; font:400 1rem/1.3 var(--sans); color:var(--ink);
  background:var(--plate); border:1px solid var(--ink-3); border-radius:3px; }
.sub-field input:focus-visible{ outline:2px solid var(--deep); outline-offset:2px; border-color:var(--deep); }
.sub-field input[aria-invalid=true]{ border-color:var(--warm); box-shadow:inset 3px 0 0 var(--warm); }

.co-err{ margin:0; padding:.6rem .8rem; background:var(--plate); border-left:4px solid var(--warm); border-radius:3px;
  font-size:.9rem; font-weight:600; color:var(--ink); }
.sub-form .note{ margin:0; }
.sub-form .btn-primary{ width:100%; }
.sub-plan-page .sub-form + p{ margin-top:1.25rem; }
@media (min-width:40rem){ .sub-form .btn-primary{ width:auto; min-width:18rem; } }

@media (prefers-reduced-motion:reduce){
  .btn, .pill-cta .pc-arrow, .sub-opt{ transition:none; }
}