/* Stage 7 of the 25 Oct 2026 uplift: the title band, cards and colours for the remaining pages.
   .ocg-band  the navy title band (PHP pages: shop, basket, account, courses details; static pages: About, Contact,
              Privacy, Terms, 404). PHP pages get it from oc_page_band() in oc-backend/lib.php, which lifts the page's
              own back link, kicker, h1 and lead out of the card; nothing else on those pages moves.
   .ocg       the static pages' content (built by scratch/stage7/build_pages.mjs).
   Colours follow the site: navy #001a4e, cyan accents; dark mode from :root[data-theme="dark"]. */
:root{--ocg-surface:#fff;--ocg-surface-2:#eef2f8;--ocg-ink:#001a4e;--ocg-text:#24304a;--ocg-muted:#4f5b75;--ocg-line:#d9e0ec;
  --ocg-accent:#0b6b85;--ocg-accent-soft:#e2f4f8;--ocg-hero:#001a4e;--ocg-hero-2:#000d2b;--ocg-cyan:#22d3ee;--ocg-shadow:0 22px 50px -32px rgba(0,26,78,.45)}
:root[data-theme="dark"]{--ocg-surface:#333;--ocg-surface-2:#2a2a2a;--ocg-ink:#fff;--ocg-text:#e5e7eb;--ocg-muted:#c4c9d4;--ocg-line:#555b66;
  --ocg-accent:#67e8f9;--ocg-accent-soft:#16424d;--ocg-hero:#020821;--ocg-hero-2:#000412;--ocg-shadow:0 22px 50px -30px rgba(0,0,0,.8)}

/* ---------- the title band ---------- */
.ocg-band{position:relative;z-index:1;overflow:hidden;color:#fff;font-family:var(--ocx-font);
  background:radial-gradient(70% 120% at 88% 10%,#0b3a8a 0%,var(--ocg-hero) 55%,var(--ocg-hero-2) 100%);padding-block:44px 40px}
.ocg-wrap{position:relative;max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:640px){.ocg-wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}}
.ocg-band .ocg-wrap{z-index:1}
.ocg-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a5f3fc!important;text-decoration:none}
.ocg-back:hover{text-decoration:underline}
.ocg-eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a5f3fc}
.ocg-band h1{margin:8px 0 0;color:#fff!important;font-family:var(--ocx-display);font-weight:800;font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance;max-width:22ch}
.ocg-lead{margin:14px 0 0;max-width:640px;font-size:18px;line-height:1.55;color:#cdd7ea}
.ocg-lead a{color:#a5f3fc}
.ocg-band :focus-visible{outline:3px solid var(--ocg-cyan);outline-offset:3px;border-radius:6px}

/* PHP pages (shop, basket, account, course details): the card sits just under the band */
.ocg-band + #ocTop{margin-top:-18px}
.ocg-band + #ocTop #ocCaseCard{border-radius:24px!important;box-shadow:var(--ocg-shadow)!important}
.ocg-band + #ocTop .st-head{align-items:flex-end}

/* ---------- static pages ---------- */
.ocg{width:100%;font-family:var(--ocx-font);color:var(--ocg-text);line-height:1.55;padding-bottom:72px}
.ocg *,.ocg *::before,.ocg *::after{box-sizing:border-box}
.ocg h2,.ocg h3,.ocg p,.ocg ul,.ocg ol{margin:0}
.ocg h2,.ocg h3{font-family:var(--ocx-display);color:var(--ocg-ink);letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.ocg a{color:var(--ocg-accent)}
.ocg :focus-visible{outline:3px solid var(--ocg-accent);outline-offset:3px;border-radius:6px}
.ocg-body{display:grid;gap:20px;margin-top:28px}
.ocg-card{background:var(--ocg-surface);border:1px solid var(--ocg-line);border-radius:22px;box-shadow:var(--ocg-shadow);padding:28px}
@media (max-width:640px){.ocg-card{padding:22px 18px;border-radius:18px}}
.ocg-label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ocg-accent);margin-bottom:10px}
.ocg-card p + p{margin-top:12px}
.ocg-big{font-size:19px;line-height:1.6;color:var(--ocg-text);max-width:68ch}
.ocg-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ocg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.ocg-grid3,.ocg-grid2{grid-template-columns:1fr}}
.ocg-feat{display:flex;flex-direction:column;gap:10px}
.ocg-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ocg-accent-soft);color:var(--ocg-accent)}
.ocg-feat h2,.ocg-feat h3{font-size:20px}
.ocg-feat p{color:var(--ocg-muted)}
.ocg-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,var(--ocg-hero),#0b3a8a);color:#fff;border:0}
.ocg-cta h2,.ocg-cta h3{color:#fff;font-size:22px}
.ocg-cta p{color:#cdd7ea;margin-top:4px}
.ocg-btns{display:flex;flex-wrap:wrap;gap:10px}
.ocg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:inherit;font-weight:800;font-size:15px;text-decoration:none!important;cursor:pointer;border:2px solid transparent}
.ocg-btn.primary{background:var(--ocg-cyan);color:#001a4e!important}
.ocg-btn.ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.55)}
.ocg-btn.ink{background:var(--ocg-ink);color:var(--ocg-surface)!important}
.ocg-btn:hover{filter:brightness(1.06)}
.ocg-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:12px;color:var(--ocg-muted);font-size:15px}
.ocg-facts strong{color:var(--ocg-ink)}

/* contact */
.ocg-contact{display:flex;flex-direction:column;gap:10px}
.ocg-contact .ocg-big{font-family:var(--ocx-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--ocg-ink);overflow-wrap:anywhere}
.ocg-contact p{color:var(--ocg-muted)}
.ocg-contact .ocg-btns{margin-top:auto;padding-top:12px}
.ocg-contact .ocg-small{font-size:14px;font-weight:700}
.ocg-said{font-size:14px;font-weight:700;color:var(--ocg-accent)}

/* privacy and terms: a reading column with an "On this page" list */
.ocg-read{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:960px){.ocg-read{grid-template-columns:1fr}}
.ocg-toc{position:sticky;top:96px;font-size:14.5px}
.ocg-toc ol{list-style:none;padding:0;display:grid;gap:2px;max-height:calc(100vh - 140px);overflow:auto}
.ocg-toc a{display:block;padding:6px 10px;border-radius:10px;color:var(--ocg-muted);text-decoration:none;line-height:1.35}
.ocg-toc a:hover,.ocg-toc a[aria-current="true"]{background:var(--ocg-accent-soft);color:var(--ocg-ink)}
@media (max-width:960px){.ocg-toc{position:static}.ocg-toc ol{max-height:none;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.ocg-prose{max-width:72ch;font-size:17px;line-height:1.7}
.ocg-prose > * + *{margin-top:16px}
.ocg-prose section + section,.ocg-prose > div + div{margin-top:28px}
.ocg-prose h2{font-size:22px;scroll-margin-top:96px;margin-bottom:8px}
.ocg-prose h3{font-size:18px;margin:18px 0 6px}
.ocg-prose p,.ocg-prose li{color:var(--ocg-text)}
.ocg-prose p + p{margin-top:12px}
.ocg-prose ul,.ocg-prose ol{padding-left:1.3em;display:grid;gap:6px;margin-top:8px}
.ocg-prose ul{list-style:disc}.ocg-prose ol{list-style:decimal}
.ocg-prose strong{color:var(--ocg-ink)}
.ocg-note{border-left:4px solid #f59e0b;background:color-mix(in srgb,#f59e0b 10%,var(--ocg-surface));border-radius:14px;padding:18px 20px}
.ocg-note h2{font-size:18px;text-transform:none}

/* 404 */
.ocg-404{display:grid;gap:22px;justify-items:start}
.ocg-404 form{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;background:#fff;border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.ocg-404 input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#001a4e;min-height:44px}
.ocg-404 input::placeholder{color:#5b6680}
.ocg-404 button{min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--ocg-cyan);color:#001a4e;font:inherit;font-weight:800;cursor:pointer}
.ocg-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.ocg-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ocg-links{grid-template-columns:1fr}}
.ocg-links a{display:block;background:var(--ocg-surface);border:1px solid var(--ocg-line);border-radius:18px;padding:18px;text-decoration:none;box-shadow:var(--ocg-shadow);transition:transform .2s,border-color .2s}
.ocg-links a:hover{transform:translateY(-3px);border-color:var(--ocg-accent)}
.ocg-links b{display:block;font-family:var(--ocx-display);font-size:18px;color:var(--ocg-ink)}
.ocg-links span{display:block;margin-top:4px;font-size:14.5px;color:var(--ocg-muted)}
html.ocg-404-on main > div:has(> div > .next-error-h1){display:none!important}

@media (prefers-reduced-motion:reduce){.ocg-links a{transition:none}.ocg-links a:hover{transform:none}}
@media (forced-colors:active){.ocg-band{background:Canvas;color:CanvasText;border-bottom:1px solid CanvasText}.ocg-band h1{color:CanvasText!important}.ocg-card,.ocg-links a{border:1px solid CanvasText}}
@media print{.ocg-band{background:none!important;color:#000;padding-block:0 12px}.ocg-band h1,.ocg-lead,.ocg-eyebrow{color:#000!important}.ocg-toc{display:none}.ocg-read{display:block}.ocg-card{box-shadow:none;border:0;padding:0}}

/* the courses page: its hero (words, picture, sign-in) is the band */
.ocg-hero{padding-block:40px 48px}
.ocg-hero .sh-hero{margin:0}
.ocg-hero .oc-kicker{color:#a5f3fc!important}
.ocg-hero h1{color:#fff!important;font-family:var(--ocx-display);font-size:clamp(32px,4.6vw,52px)!important;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.ocg-hero .oc-lead{color:#cdd7ea!important;margin-top:14px}
.ocg-hero .sh-points li{color:#e0f2fe}
.ocg-hero .sh-points .ic{background:rgba(255,255,255,.12);color:#a5f3fc}
.ocg-hero .oc-row .oc-btn.primary{background:#22d3ee;color:#001a4e;border-color:#22d3ee}
.ocg-hero .sh-photo{box-shadow:0 22px 50px -24px rgba(0,0,0,.7)}
.ocg-hero .sh-panel{color:var(--ink)}
.ocg-hero .sh-panel a{color:var(--hl,#0b6b85)}
.ocg-prose a{text-decoration:underline;text-underline-offset:2px}