/*
 * Model Maker Systems - 2026 theme
 * Design system, carried over verbatim from the approved concepts.
 * Do not hand-edit colours here; the variables at the top are the single source.
 */

:root{--gold:#ffcc33;--gold-d:#f1ac05;--grad:linear-gradient(135deg,#ffd34d,#f1ac05);
 --ink:#1d2330;--ink2:#39414f;--muted:#6b7480;--bg:#f0eade;--bg2:#e6dfd0;--line:#d9d0be;
 --shadow:0 10px 30px rgba(20,25,35,.08);--shadow-s:0 4px 14px rgba(20,25,35,.07);--r:14px}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink2);background:var(--bg);line-height:1.6}
h1,h2,h3,h4{font-family:Poppins,sans-serif;color:var(--ink);line-height:1.2;margin:0 0 .5em}
a{color:inherit;text-decoration:none}

/*
 * 2026-09-08: images keep their proportions.
 *
 * The <img> tags carry width and height attributes - correctly, because that
 * lets the browser reserve the right space before the file arrives and stops
 * the page jumping about as it loads. But those attributes also act as CSS, at
 * the lowest priority. So a rule that sets only the width, like
 * .heroimg img{width:100%}, leaves the HEIGHT pinned at the attribute value.
 *
 * That is what stretched the product boxes on the home page: they rendered
 * 535px wide by the attribute's 533px tall, instead of 535 x 285 - vertically
 * by 1.87. The image file itself was always correct.
 *
 * height:auto restores the natural ratio wherever CSS drives the width. Rules
 * that drive the HEIGHT instead - the accreditation badges, the footer logo -
 * need width:auto for the same reason, and carry it where they sit.
 */
img{max-width:100%;height:auto}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:Poppins;font-weight:600;font-size:15px;
 border-radius:10px;padding:13px 22px;cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--grad);color:#231c00;box-shadow:0 8px 20px rgba(241,172,5,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--gold-d);color:var(--gold-d)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.eyebrow{font-family:Poppins;font-weight:700;font-size:14px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-d);margin-bottom:6px}
.section{padding:72px 0} .section h2{font-size:clamp(24px,2.6vw,32px);font-weight:700}
.lead{font-size:16.5px;color:var(--muted)} .center{text-align:center;margin-inline:auto}
/* header */
.topstrip{background:#000;color:#cfd6e2;font-size:13px}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topstrip a{color:#cfd6e2;margin-left:18px} .topstrip a:hover{color:var(--gold)} .topstrip b{color:var(--gold)}
header.nav{position:sticky;top:0;z-index:50;background:#0e1218;border-bottom:1px solid #232a36}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:86px;flex-wrap:nowrap;gap:18px}
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto} .logo img{height:62px;display:block}
.wordmark{display:flex;flex-direction:column;line-height:1.04}
.wordmark b{font-family:Poppins;font-weight:800;font-size:19px;color:#fff}
.wordmark i{font-family:Poppins;font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.145em;text-transform:uppercase;color:var(--gold)}
nav.main{display:flex;gap:20px;flex-wrap:nowrap;white-space:nowrap}
nav.main a{font-family:Poppins;font-weight:500;font-size:14.5px;color:#cdd4e0} nav.main a:hover{color:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap}
.nav-cta .login{font-family:Poppins;font-weight:600;font-size:15px;color:#cdd4e0}
.burger{display:none;font-size:26px;background:none;border:0;color:#fff;cursor:pointer}
.lbl-short{display:none}
/* breadcrumb */
.crumb{background:var(--bg2);border-bottom:1px solid var(--line);font-size:13.5px}
.crumb .wrap{padding:11px 22px} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--gold-d)} .crumb span{color:var(--ink)}
/* hero */
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:52px 22px 56px}
.phero h1{font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.phero .purpose{font-size:18.5px;color:var(--ink2);max-width:540px;margin-bottom:22px}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 24px}
.fact b{display:block;font-family:Poppins;font-weight:800;font-size:22px;color:var(--ink)}
.fact span{font-size:13.5px;color:var(--muted)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.boxshot{text-align:center;position:relative}
.boxshot .glow{position:absolute;inset:8% 0 0 0;background:radial-gradient(closest-side,rgba(255,204,51,.32),transparent 70%);filter:blur(8px)}
.boxshot img{position:relative;width:100%;max-width:330px;filter:drop-shadow(0 26px 40px rgba(20,25,35,.3))}
/* generic surfaces */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
.alt{background:var(--bg2)}
.prose h3{font-size:19px;margin-top:26px} .prose p{margin:0 0 14px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:34px}
/* capacity tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;box-shadow:var(--shadow-s)}
.tier.pick{border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(241,172,5,.16),var(--shadow)}
.tier b{display:block;font-family:Poppins;font-size:26px;color:var(--ink)}
.tier .u{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tier p{font-size:14.5px;color:var(--muted);margin:12px 0 0}
.tier .tag{display:inline-block;margin-top:12px;font-family:Poppins;font-weight:600;font-size:12px;color:var(--gold-d);
 background:#fff7e2;border:1px solid #f3dca0;border-radius:999px;padding:4px 10px}
/* modules */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.mod{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.mod summary{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none;font-family:Poppins;font-weight:600;font-size:14.5px;color:var(--ink)}
.mod summary::-webkit-details-marker{display:none}
.mod .num{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--grad);color:#231c00;
 display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.mod .mt{flex:1} .mod .chev{color:var(--gold-d);font-size:18px;font-weight:700}
.mod[open] .chev{transform:rotate(45deg)}
.mod .md{padding:0 16px 15px 54px;font-size:14.5px;color:var(--muted)}
.mod .todo{color:#b08900;background:#fff8e6;padding:2px 7px;border-radius:6px;font-size:13px}
/* acquisition options */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.opt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
/* 1 Sept, team review: icon and title centred. Asked for on the pricing page,
   applied to the component so the products page matches rather than drifting.
   The paragraph stays left-aligned - these run to three lines on the pricing
   page, and centred prose of that length is harder to read. */
.opt .ic{width:44px;height:44px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 14px}
.opt h3{font-size:18.5px;margin-bottom:8px;text-align:center} .opt p{font-size:14.5px;color:var(--muted);flex:1;line-height:1.65}
.opt .btn{margin-top:16px;width:100%}
/* disciplines */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px}
.formats{font-size:14.5px;color:var(--muted);margin-top:14px;line-height:1.9}
.formats code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:12.5px;margin-right:5px;display:inline-block}
/* other programs */
.ogrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}
.ocard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.2s;display:block}
.ocard:hover{transform:translateY(-3px);border-color:#f0d894;box-shadow:var(--shadow)}
.obox{height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f4f2ec,#fff);padding:12px}
.obox img{max-height:100px;max-width:88%;object-fit:contain}
.ob{padding:14px} .ob h4{font-size:15px;margin:0 0 4px} .ob p{font-size:12.8px;color:var(--muted);margin:0}
/* final */
.final{background:radial-gradient(800px 400px at 80% 20%,rgba(255,204,51,.16),transparent),#11151d;color:#fff}
.final h2{color:#fff} .final p{color:#aeb8c8;font-size:17px}
footer{background:#11151d;color:#9aa4b4;font-size:14.5px;padding:56px 0 26px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer img.flogo{height:54px;width:auto;margin-bottom:14px}
footer h5{font-family:Poppins;color:#fff;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
footer a{display:block;color:#9aa4b4;padding:5px 0} footer a:hover{color:var(--gold)}
.fbadges{display:flex;gap:16px;margin-top:16px} .fbadges img{height:46px;background:#fff;border-radius:8px;padding:5px}
.fbar{border-top:1px solid #232a36;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#71798a}
.note{background:#fffbe9;border:1px dashed #e9c75a;color:#7a5b00;font-size:13px;border-radius:10px;padding:10px 14px;max-width:1180px;margin:0 auto}
/* responsive */
@media(max-width:1400px){.wordmark i{display:none}}
/* Tighten the nav before hiding it, so there is a band where all eight items
   still fit rather than jumping straight to the burger. */
@media(max-width:1280px){nav.main{gap:14px} nav.main a{font-size:13.5px} .ogrid{grid-template-columns:repeat(3,1fr)}}
/* 1150: measured in a real viewport. With eight nav items and the tightened
   gap above, the header stops fitting below 1106px, so 1150 leaves 44px of
   headroom and keeps the full menu visible as long as possible. */
@media(max-width:1150px){nav.main{display:none} .nav-cta .login{display:none} .burger{display:block} .wordmark i{display:block}
 nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#0e1218;
  border-bottom:1px solid #232a36;padding:10px 22px 16px;white-space:normal}
 nav.main.open a{padding:13px 4px;border-bottom:1px solid #232a36;font-size:16px}}
@media(max-width:1000px){.phero .wrap{grid-template-columns:1fr;gap:30px;padding:40px 22px 46px} .boxshot{order:-1}
 .tiers,.opts{grid-template-columns:1fr} .twocol{grid-template-columns:1fr;gap:20px} .section{padding:56px 0}}
@media(max-width:820px){.mods{grid-template-columns:1fr} .ogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.btn{white-space:normal} .cta{flex-direction:column;align-items:stretch} .cta .btn{width:100%}
 .lbl-full{display:none} .lbl-short{display:inline} header.nav .wrap{gap:10px} .nav-cta .btn{padding:10px 15px;font-size:14px;white-space:nowrap}
 .facts{gap:18px} footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){header.nav .wrap{height:70px}.logo img{height:44px}.wordmark b{font-size:15px}.wordmark i{font-size:8.5px;letter-spacing:.1em}}
@media(max-width:400px){.wordmark{display:none} .logo img{height:40px} .ogrid{grid-template-columns:1fr} footer .cols{grid-template-columns:1fr}}

.fbar .flegal{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.fbar .flegal a{color:inherit;text-decoration:none}
.fbar .flegal a:hover{color:var(--gold)}
@media(max-width:700px){.fbar .flegal{gap:12px}}

/* --- temporary: styling for pages not yet ported (see inc/cornerstone-fallback.php) --- */
.mms-admin-note{background:#fff6e5;border:1px solid #f0d9a0;border-left:4px solid var(--gold-d);
  border-radius:10px;padding:14px 18px;font-size:14px;color:#7a5a00;margin:0 0 26px}
.mms-admin-note b{color:#5c4400}
.mms-placeholder{color:var(--muted);font-style:italic}
.prose h2{font-size:22px;margin:28px 0 10px}
.prose p{font-size:16px;line-height:1.75;margin:0 0 14px}
.prose h1{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px}

/* ---------- contact page ---------- */
.chero{background:var(--bg2);border-bottom:1px solid var(--line);padding:52px 0 46px}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:var(--shadow-s);display:flex;gap:14px;align-items:flex-start}
.ccard .ic{width:38px;height:38px;border-radius:10px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-size:17px;flex:0 0 38px}
.ccard h3{font-size:14px;margin:0 0 3px;color:var(--muted);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.ccard p{margin:0;font-size:15px;color:var(--ink2);line-height:1.5}
.ccard a{color:var(--ink2);font-weight:600}
.ccard a:hover{color:var(--gold-d)}
.ccard .alt{font-size:13px;color:var(--muted);display:block;margin-top:3px}

.cform{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.fbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow-s)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px}
.fld label{display:block;font-family:Poppins;font-weight:600;font-size:13.5px;color:var(--ink);
  margin-bottom:5px}
.fld label i{font-style:normal;color:var(--gold-d)}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font-family:Inter;font-size:14.5px;background:#fff;color:var(--ink2)}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--gold-d);
  box-shadow:0 0 0 3px rgba(241,172,5,.15)}
.mapbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-s)}
.mapbox .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#e6dfd0,#d9d0be);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#8a7f6a;
  font-family:Poppins;font-weight:600;font-size:14px}
.mapbox .det{padding:20px 22px}
/* the registered address is not a walk-in office, so the note has to be seen */
.mapbox .visit{background:#fff8e6;border:1px solid #f0d9a0;border-radius:9px;padding:12px 14px;
  font-size:13.5px;color:#6b5520;line-height:1.6;margin:0 0 12px}
.mapbox .visit b{color:#5c4400}
.mapbox h3{font-size:16px;margin:0 0 8px}
.mapbox p{margin:0 0 10px;font-size:14.5px;color:var(--muted);line-height:1.65}

.agents{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.agent{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--shadow-s);transition:.18s}
.agent:hover{border-color:var(--gold-d);box-shadow:var(--shadow)}
.agent .rg{font-family:Poppins;font-weight:700;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:6px;line-height:1.35}
.agent h3{font-size:17px;margin:0 0 2px;line-height:1.25}
.agent .who{font-size:14px;color:var(--muted);margin:0 0 14px}
.agent ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.5}
.agent li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;color:var(--ink2)}
.agent li .i{flex:0 0 16px;color:var(--gold-d);font-size:13px;line-height:1.6;text-align:center}
.agent li a{color:var(--ink2);font-weight:600;word-break:break-word}
.agent li a:hover{color:var(--gold-d)}
.agent .was{display:block;font-size:12px;font-family:Inter;font-weight:400;color:var(--muted);
  margin-top:2px}
.agent .chk{display:inline-block;font-size:11px;font-family:Poppins;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 9px;margin-top:10px}
.agent .chk.ok{background:#e8f5e9;color:#2e6b33}
.agent .chk.wait{background:var(--bg2);color:var(--muted)}
.flag{background:#fff6e5;border:1px solid #f0d9a0;border-radius:10px;padding:15px 18px;
  font-size:14px;color:#7a5a00;margin-top:26px}
.flag b{color:#5c4400}
/* ---------- Contact Form 7 ----------
   The form is rendered by CF7, so it emits its own wrappers around every
   field. These rules make that markup wear the design above instead of the
   plugin's defaults. Field NAMES are never touched, so the mail templates
   and the existing Flamingo records keep matching. */
.fbox .wpcf7-form-control-wrap{display:block}
.fbox input[type=text],.fbox input[type=email],.fbox input[type=tel],
.fbox input[type=url],.fbox input[type=number],.fbox select,.fbox textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font-family:Inter;font-size:14.5px;background:#fff;color:var(--ink2)}
.fbox textarea{min-height:130px;resize:vertical;display:block}
.fbox input:focus,.fbox select:focus,.fbox textarea:focus{outline:0;border-color:var(--gold-d);
  box-shadow:0 0 0 3px rgba(241,172,5,.15)}
.fbox .wpcf7-submit{width:auto;box-sizing:border-box}
.fbox .fact{margin-top:4px}
.fbox .fnote{font-size:13px;color:var(--muted);margin:14px 0 0}
.fbox .fnote i{font-style:normal;color:var(--gold-d)}
/* CF7 runs the body through wpautop, so every field ends up inside a <p>.
   Those carry a default 1em margin that would double the gap between rows. */
.fbox .fld>p,.fbox .fact>p{margin:0}
.fbox .wpcf7-form>p:empty{display:none;margin:0}
.fbox .wpcf7-form br{display:none}
.fbox .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* validation and status messages */
.fbox .wpcf7-not-valid-tip{color:#b3261e;font-size:13px;margin-top:5px;font-weight:600}
.fbox .wpcf7-not-valid{border-color:#b3261e}
.fbox .wpcf7-response-output{margin:18px 0 0;padding:12px 15px;border-radius:10px;
  border:1px solid var(--line);font-size:14px;background:var(--bg2);color:var(--ink2)}
.fbox form.invalid .wpcf7-response-output,
.fbox form.failed .wpcf7-response-output{border-color:#f0b4ae;background:#fdeceb;color:#8c1d18}
.fbox form.sent .wpcf7-response-output{border-color:#a8d5ab;background:#eaf6eb;color:#2e6b33}
.fbox .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

@media(max-width:1100px){.agents{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:1000px){.ccards{grid-template-columns:1fr}.cform{grid-template-columns:1fr}}
@media(max-width:560px){.agents{grid-template-columns:1fr}}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
/* grid children default to min-width:auto, so a wide child stretches the
   column and pushes the whole page sideways on small screens */
.cform>*,.ccards>*,.agents>*,.frow>*{min-width:0}
@media(max-width:480px){.fbox{padding:20px 16px}}

/* ---------- About, FAQ and Training ----------
   Taken verbatim from the approved concepts so the built pages match
   what the team signed off on. */
.phero2{background:var(--bg2);border-bottom:1px solid var(--line);padding:54px 0 48px}
.phero2 h1{font-size:clamp(28px,3.4vw,42px);margin-bottom:10px}
.twocol2{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.pull{background:var(--ink);color:#fff;border-radius:var(--r);padding:34px 38px;margin:34px 0}
.pull .who{font-family:Poppins;font-weight:700;color:var(--gold);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.pull p{font-size:16.5px;line-height:1.75;color:#dfe4ec;margin:0 0 14px}
.pull p:last-child{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.stat b{display:block;font-family:Poppins;font-size:26px;color:var(--ink);line-height:1.1}
.stat span{font-size:13.5px;color:var(--muted)}
.faqnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.faqnav button{font-family:Poppins;font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;transition:.15s}
.faqnav button:hover{border-color:var(--gold-d);color:var(--gold-d)}
.faqnav button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.qwrap{max-width:860px}
.qgroup h3{font-size:19px;margin:30px 0 12px}
details.q{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;
  overflow:hidden;transition:.15s}
details.q[open]{border-color:var(--gold-d);box-shadow:var(--shadow-s)}
details.q summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:Poppins;
  font-weight:600;font-size:15.5px;color:var(--ink);display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px}
details.q summary::-webkit-details-marker{display:none}
details.q summary .cv{color:var(--gold-d);font-size:20px;line-height:1;flex:0 0 auto;
  transition:.2s;font-weight:400}
details.q[open] summary .cv{transform:rotate(45deg)}
details.q .ans{padding:0 20px 18px;font-size:15px;line-height:1.72;color:var(--ink2);
  white-space:pre-line;border-top:1px solid #f0ece3;padding-top:14px;margin-top:-2px}
.srch2{width:100%;max-width:380px;padding:12px 15px;border:1px solid var(--line);border-radius:10px;
  font-family:Inter;font-size:15px;margin-bottom:20px;background:#fff;color:var(--ink2)}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px}
.tbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--shadow-s)}
.tbox h3{font-size:17px;margin:0 0 10px}
.tbox ul{margin:0;padding-left:19px;font-size:15px;color:var(--ink2);line-height:1.7}
.price-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid #f0ece3;font-size:15px}
.price-line:last-child{border:0}
.price-line b{font-family:Poppins;font-size:17px;color:var(--ink);white-space:nowrap}
.course{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;
  overflow:hidden;box-shadow:var(--shadow-s)}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:22px 26px;flex-wrap:wrap}
.chead h3{font-size:19px;margin:0 0 5px}
.chead .meta{font-size:14px;color:var(--muted)}
.chead .pr{text-align:right;flex:0 0 auto}
.chead .pr b{font-family:Poppins;font-size:22px;color:var(--ink);display:block;line-height:1.1}
.chead .pr span{font-size:12.5px;color:var(--muted)}
.cbody{padding:0 26px 22px}
.cbody>p{font-size:15px;color:var(--ink2);margin:0 0 16px}
.prereq{background:#fff6e5;border:1px solid #f0d9a0;border-radius:9px;padding:11px 15px;
  font-size:13.5px;color:#7a5a00;margin:0 0 16px}
.dates{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.dates .d{font-family:Poppins;font-weight:600;font-size:14px;padding:9px 15px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.dates .d.past{opacity:.45;text-decoration:line-through;font-weight:500}
.dates .d.next{background:var(--grad);border-color:transparent;color:#231c00}
details.outline{margin-top:14px;border-top:1px solid #f0ece3;padding-top:12px}
details.outline summary{cursor:pointer;list-style:none;font-family:Poppins;font-weight:600;
  font-size:14px;color:var(--gold-d)}
details.outline summary::-webkit-details-marker{display:none}
details.outline dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 0;font-size:14.5px}
details.outline dt{font-family:Poppins;font-weight:600;color:var(--ink);white-space:nowrap}
details.outline dd{margin:0;color:var(--muted)}
.steps{counter-reset:s;margin:26px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:16px;font-size:15px;
  line-height:1.7}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--grad);color:#231c00;font-family:Poppins;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px}

@media(max-width:900px){.twocol2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)} .tgrid{grid-template-columns:1fr}}
@media(max-width:440px){.stats{grid-template-columns:1fr}.stat b{font-size:23px} .pull{padding:26px 22px}}
@media(max-width:900px){.twocol2{grid-template-columns:1fr}}
@media(max-width:640px){details.outline dl{grid-template-columns:1fr;gap:2px 0} details.outline dd{margin-bottom:9px}}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}

/* ---------- products overview ---------- */
.plist{display:grid;gap:18px}
.pcard{display:grid;grid-template-columns:220px 1fr;gap:22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px;box-shadow:var(--shadow-s);transition:.18s;align-items:center}
.pcard:hover{border-color:var(--gold-d);box-shadow:var(--shadow)}
.pshot{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f4f2ec,#fff);
  border:1px solid var(--line);border-radius:12px;padding:14px;min-height:150px}
.pshot img{max-width:100%;max-height:130px;object-fit:contain}
.pbody h3{font-size:21px;margin:0 0 6px}
.pbody h3 a:hover{color:var(--gold-d)}
.ppurpose{font-size:15px;color:var(--muted);margin:0 0 12px;line-height:1.6}
.pmeta{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 0 16px;padding:0}
.pmeta li{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:13px;color:var(--ink2)}
.pmeta li b{font-family:Poppins;font-weight:600}
.pcta{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.pcard{grid-template-columns:1fr}.pshot{min-height:0}}

/* the trial/terms notice, carried over from the concepts */
.tcnote{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.55}
.tcnote a{color:var(--gold-d);font-weight:600;text-decoration:underline}
.final .tcnote{color:#9aa5b4}
.final .tcnote a{color:var(--gold)}

/* system requirements call-out on the product pages */
.sysreq-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold-d);
  border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-s)}
.sysreq-cta .ic{width:40px;height:40px;border-radius:10px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.sysreq-cta b{display:block;font-family:Poppins;font-size:15.5px;color:var(--ink);margin-bottom:2px}
.sysreq-cta span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.sysreq-cta>div:nth-child(2){flex:1;min-width:200px}
.sysreq-cta .btn{flex:0 0 auto}

/* ---------- home page ----------
   From the approved concept. The background/header colour picker that
   the concept carried for review is deliberately not included. */
h1,h2,h3,h4,h5{font-family:Poppins,system-ui,sans-serif;color:var(--ink);line-height:1.18;margin:0 0 .5em}
.btn-light:hover{background:rgba(255,255,255,.2)}
.hero{background:radial-gradient(1100px 520px at 80% -10%,rgba(255,204,51,.20),transparent 60%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;padding:70px 22px 80px}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.5px}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:19px;color:var(--ink2);max-width:520px;margin:18px 0 26px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .micro{margin-top:16px;font-size:14px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-family:Poppins;font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow-s)}
.chip b{color:var(--gold-d)}
.heroimg{position:relative;text-align:center}
.heroimg .glow{position:absolute;inset:6% 0 0 0;background:radial-gradient(closest-side,rgba(255,204,51,.30),transparent 70%);filter:blur(8px)}
.heroimg img{position:relative;width:100%;max-width:560px;filter:drop-shadow(0 28px 44px rgba(20,25,35,.28))}
.trust{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 22px;flex-wrap:wrap}
.trust .label{font-family:Poppins;font-weight:600;color:var(--muted);font-size:14px}
.trust .badges{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.trust .badges img{height:52px;width:auto;filter:grayscale(1);opacity:.7;transition:.2s}
.trust .badges img:hover{filter:none;opacity:1}
.kpis{display:flex;gap:30px;flex-wrap:wrap}
.kpi b{font-family:Poppins;font-weight:800;font-size:26px;color:var(--ink);display:block}
.kpi span{font-size:13.5px;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:.22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#f0d894}
.card .boxwrap{height:172px;background:linear-gradient(180deg,#f4f5f8,#fff);display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--line)}
.card .boxwrap img{max-height:140px;max-width:88%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.20))}
.card .body{padding:22px 24px 26px}
.card h3{font-size:19px;margin-bottom:7px}
.card p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.card .more{font-family:Poppins;font-weight:600;font-size:14px;color:var(--gold-d)}
.ic{width:46px;height:46px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.why{background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:42px}
.feat{display:flex;gap:16px}
.feat .fi{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--shadow-s)}
.feat h4{font-size:17.5px;margin:4px 0 4px}
.feat p{margin:0;font-size:14.5px;color:var(--muted)}
.band{background:linear-gradient(135deg,#fff6dd,#ffe9ad);border:1px solid #f3dca0;border-radius:18px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h3{font-size:23px;margin:0 0 4px}
.band p{margin:0;color:var(--ink2)}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-s)}
.quote .q{font-size:18px;color:var(--ink);font-family:Poppins;font-weight:500;line-height:1.5}
.quote .ph{color:#b9bfca;font-style:italic}
.quote .who{margin-top:18px;display:flex;align-items:center;gap:12px}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:Poppins;font-weight:700;color:#231c00}
.quote .who b{display:block;font-family:Poppins;color:var(--ink);font-size:15px}
.quote .who span{font-size:13px;color:var(--muted)}
.stars{color:var(--gold-d);letter-spacing:2px;margin-bottom:12px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.rgrid .card .body{padding:26px}
.final .cta{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
footer .fbadges{display:flex;gap:16px;margin-top:16px}
footer .fbadges img{height:46px;width:auto;background:#fff;border-radius:8px;padding:5px}
.facts,.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px;
  align-items:stretch}
.fact,.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px 14px;text-align:center;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;justify-content:center;gap:4px}
.fact b,.kpi b{display:block;font-family:Poppins;font-weight:800;color:var(--ink);
  line-height:1.15;font-size:24px}
.fact span,.kpi span{display:block;font-size:13.5px;color:var(--muted);line-height:1.35}
.final .tcnote,.tcnote.on-dark{color:#9aa5b4}
.final .tcnote a,.tcnote.on-dark a{color:var(--gold)}
.trust, .why { background: var(--bg2); }
.card, .quote, .window, .chip { background:#fff; }
.cta-2 { margin-top:14px; }
.btn-upgrade { background:#fff; border-color:var(--gold-d); color:var(--gold-d); font-weight:600; }
.btn-upgrade:hover { background:var(--gold-d); color:#fff; }
@media(max-width:900px){nav.main,.nav-cta .login{display:none}.burger{display:block}nav.main.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;gap:6px}.hero .wrap{grid-template-columns:1fr;padding-top:44px}.heroimg{order:-1}.pgrid,.fgrid,.tgrid,.rgrid{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr 1fr}.trust .wrap{justify-content:center;text-align:center}}
@media(max-width:620px){.facts,.kpis{grid-template-columns:1fr;gap:10px} .fact,.kpi{padding:14px;flex-direction:row;justify-content:space-between; align-items:center;text-align:left} .fact b,.kpi b{font-size:20px}}
@media (max-width:1180px){ .pgrid { grid-template-columns:repeat(2,1fr); } .rgrid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1000px){ .hero .wrap { grid-template-columns:1fr; gap:32px; padding:44px 22px 56px; } .heroimg { order:-1; } .heroimg img { max-width:460px; } .fgrid, .tgrid { grid-template-columns:1fr; } .section { padding:64px 0; } }
@media (max-width:820px){ .trust .wrap { flex-direction:column; align-items:flex-start; gap:20px; } .kpis { gap:26px; } .band { flex-direction:column; align-items:flex-start; padding:26px 24px; } .band a.btn { width:100%; justify-content:center; } }
@media (max-width:700px){ .pgrid, .rgrid { grid-template-columns:1fr; } .topstrip .left { display:none; } .topstrip .wrap { justify-content:center; } .topstrip a { margin:0 10px; } .section { padding:52px 0; } .wrap { padding:0 18px; } .hero .wrap { padding:34px 18px 44px; } .heroimg img { max-width:100%; } .card .boxwrap { height:200px; } .card .boxwrap img { max-height:170px; } footer .cols { grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:620px){ .lbl-full { display:none; } .lbl-short { display:inline; } header.nav .wrap { gap:10px; } .nav-cta .btn { padding:10px 15px; font-size:14px; white-space:nowrap; } .btn { white-space:normal; text-align:center; line-height:1.32; } .hero .cta, .hero .cta-2, .final .cta { flex-direction:column; align-items:stretch; } .hero .cta .btn, .hero .cta-2 .btn, .final .cta .btn { width:100%; justify-content:center; } .heroimg img { max-width:100%; height:auto; } .window, .card, .quote { max-width:100%; } }
@media (max-width:520px){ header.nav .wrap { height:70px; } .logo img { height:44px !important; } .wordmark b { font-size:15px; } .wordmark i { font-size:8.5px; letter-spacing:.1em; } .hero .cta { flex-direction:column; align-items:stretch; } .hero .cta .btn { width:100%; justify-content:center; } .final .cta { flex-direction:column; } .final .cta .btn { width:100%; justify-content:center; } .kpis { flex-direction:column; gap:16px; } .trust .badges { gap:16px; } footer .cols { grid-template-columns:1fr; } .fbar { flex-direction:column; gap:6px; } }

/* ---------- honeypot ----------
   Hidden from people, visible to bots that read the HTML. Uses several
   techniques together because a careful bot checks for display:none alone.
   Never remove: intw_PurchaseUser.php rejects any submission that fills these. */
.mms-hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
  opacity:0!important;pointer-events:none!important}

/* ===================================================================
   Pricing page
   Added 27 Aug 2026 with templates/page-pricing.php, which replaced the
   six currency pages and their 40 TablePress tables.
   =================================================================== */

/* currency row and the note beside it */
.ctrlbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.curr{display:flex;gap:6px;flex-wrap:wrap}
.ctrlnote{font-size:13.5px;color:var(--muted);max-width:560px;margin:0}
.ctrlnote b{color:var(--ink)}

/* discipline chips. Each carries its own total, so the whole price list is
   visible at a glance and search engines see all fifteen figures. */
.chips2{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.chips2 .chip{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  transition:border-color .15s,color .15s,transform .15s}
.chips2 .chip i{font-style:normal;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.chips2 .chip:hover{border-color:var(--gold-d);color:var(--gold-d);transform:translateY(-1px)}
.chips2 .chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips2 .chip.is-on i{color:#d9cfa8}
.curr .chip{text-decoration:none}
.curr .chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* the package build-up */
.buildup{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden}
.buildup h3{padding:16px 24px;margin:0;display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;flex-wrap:wrap}
.buildup h3 span{font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:13.5px;color:var(--muted)}
.pgroup{border-top:1px solid var(--line)}
.pgroup>.ph{padding:12px 24px 6px;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:15px}
.pgroup>.ph i{font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:400;
  font-size:13px;color:var(--muted)}

table.pmods{width:100%;border-collapse:collapse}
table.pmods th{padding:7px 24px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);text-align:left;font-weight:600}
table.pmods th.amt{text-align:right}
table.pmods td{padding:7px 24px;font-size:14.5px;border-top:1px solid #f0ece3;vertical-align:top}
table.pmods td.num{width:42px;color:var(--gold-d);font-weight:700;font-family:Poppins,system-ui,sans-serif}
table.pmods td.amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:130px}
table.pmods tr.sub td{border-top:1px solid var(--line);font-weight:600;background:#faf7f1}

/* totals column - the parts must visibly add to the total */
.totals{padding:16px 24px;background:var(--bg2);border-top:1px solid var(--line)}
.trow{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding:3px 0}
.trow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.trow.big{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:19px;
  border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.trow.novat span:last-child{font-weight:600;color:var(--gold-d);white-space:normal;text-align:right}

/* buy / lease / subscription */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 24px 4px}
.way{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.way.pick{border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(241,172,5,.14)}
.way .wl{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;margin-bottom:4px}
.way .wp{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:23px;color:var(--ink);
  line-height:1.15;font-variant-numeric:tabular-nums}
.way .wp i{font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
.way .wn{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.waynote{font-size:13px;color:var(--muted);padding:10px 24px 0;margin:0}
.buildup .tcnote{padding:6px 24px 0;margin:0}
.buyrow{padding:18px 24px 22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.buyrow .note{font-size:13.5px;color:var(--muted);flex:1 1 260px;margin:0}

/* the full price list reuses the same table styling */
.plist .pgroup:first-child{border-top:0}
.plist{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow)}

@media (max-width:820px){
  .ways{grid-template-columns:1fr}
  .buildup h3,.pgroup>.ph,.totals,.waynote,.buyrow,.buildup .tcnote{padding-left:16px;padding-right:16px}
  table.pmods td,table.pmods th{padding-left:16px;padding-right:16px}
  table.pmods td.amt{width:100px}
  .ctrlbar{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Very small phones. At 320px the number column, the description and the amount
   column together came to slightly more than the card, and .buildup clips its
   overflow - so the price was being cut off rather than wrapped. Tighter padding
   and a narrower amount column fix it; the scroll is a safety net for anything
   narrower still. */
@media (max-width:400px){
  .pgroup{overflow-x:auto}
  table.pmods td,table.pmods th{padding-left:12px;padding-right:12px;font-size:13.5px}
  table.pmods td.amt{width:86px}
  table.pmods td.num{width:30px}
  .buildup h3,.totals,.waynote,.buyrow,.buildup .tcnote{padding-left:12px;padding-right:12px}
  .trow{font-size:13.5px}
  .way .wp{font-size:20px}
}

/* ===================================================================
   Video guides
   Added 27 Aug 2026 with templates/page-videos.php, which replaced the
   Videos landing page and the six per-program pages that The Grid used
   to render.
   =================================================================== */

/* .section h2 is specificity 0,1,1 and was winning over a bare .vfilter-h,
   rendering these filter labels at 32px like a section heading. They are labels
   for the chip groups, not headings, so the selector is qualified to match. */
.section h2.vfilter-h{font-size:15px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:0 0 2px;font-weight:600;line-height:1.3}
.vfilter-h + .chips2{margin-top:8px;margin-bottom:20px}
.vcount{font-size:14px;color:var(--muted);margin:4px 0 0}
.vcount b{color:var(--ink)}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

.vcard{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s}
.vcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,22,30,.13)}

/* the thumbnail is a link to YouTube rather than an embedded player: 50 embeds
   on one page would load 50 iframes and a great deal of third-party script */
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:#111;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s,opacity .2s}
.vcard:hover .vthumb img{transform:scale(1.04);opacity:.92}

.vplay{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;padding-left:4px;transition:background .2s,transform .2s}
.vcard:hover .vplay{background:var(--gold-d);color:#000;transform:scale(1.08)}

.vdur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;
  font-size:12px;font-weight:600;padding:2px 6px;border-radius:4px;
  font-variant-numeric:tabular-nums}

.vbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.vbody h3{font-size:16.5px;line-height:1.3;margin:0}
.vbody h3 a{color:var(--ink);text-decoration:none}
.vbody h3 a:hover{color:var(--gold-d)}
.vbody p{font-size:14px;color:var(--ink2);margin:0;line-height:1.5}

.vmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto;padding-top:6px}
.vtag{font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);text-decoration:none;background:var(--bg2)}
.vtag:hover{border-color:var(--gold-d);color:var(--gold-d)}
.vtag-prog{border-color:#e4d9b8;background:#fdf8e8;color:#7a6412;font-weight:600}
.vdate{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}

.vempty{background:#fff;border:1px solid var(--line);border-radius:13px;padding:30px 26px;
  text-align:center;box-shadow:var(--shadow)}
.vempty h3{margin:0 0 8px}
.vempty p{color:var(--ink2);margin:0;max-width:560px;margin-inline:auto}

@media (max-width:520px){
  .vgrid{grid-template-columns:1fr;gap:16px}
  .vdate{margin-left:0}
}

/* ===================================================================
   Downloads
   Added 28 Aug 2026 with templates/page-downloads.php, which replaced
   the four gated Cornerstone pages.
   =================================================================== */

.dlguide{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;
  margin:22px 0 0;box-shadow:var(--shadow);max-width:820px}
.dlguide b{display:block;font-family:Poppins,system-ui,sans-serif;font-size:15.5px}
.dlguide span{font-size:14px;color:var(--muted)}

.dlnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dlnav a{font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,color .15s}
.dlnav a:hover{border-color:var(--gold-d);color:var(--gold-d)}

.dlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}

.dlcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 20px 20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.dlcard h3{margin:0;font-size:17.5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dlver{font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:13px;color:var(--muted)}

/* the spec list is a two-column grid so the values line up down the card */
.dlspec{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0;font-size:14px}
.dlspec dt{color:var(--muted)}
.dlspec dd{margin:0;font-variant-numeric:tabular-nums}

.dlnote{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.5}
.dllegacy{font-size:12.5px;color:var(--muted);margin:0;padding-top:2px;border-top:1px solid var(--line)}
.dlbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.dlbtns .btn{font-size:14px;padding:8px 14px}

/* pattern libraries - small targets, so they get their own compact row */
.dlpatterns{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dlpat{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-size:15px;
  transition:border-color .15s,transform .15s}
.dlpat:hover{border-color:var(--gold-d);color:var(--gold-d);transform:translateY(-1px)}
.dlpat-i{font-size:17px}

/* the Google Earth notice - deliberately prominent, it has a deadline on it */
.dlwarn{background:#fdf8e8;border:1px solid #e4d9b8;border-left:4px solid var(--gold-d);
  border-radius:12px;padding:20px 24px;margin-top:26px}
.dlwarn h3{margin:0 0 10px;font-size:17.5px;color:#7a6412}
.dlwarn p{margin:0 0 10px;font-size:14.5px;color:var(--ink2);line-height:1.6;max-width:78ch}
.dlwarn p:last-child{margin-bottom:0}
.dlwarn code{background:#fff;border:1px solid #e4d9b8;border-radius:4px;padding:1px 5px;font-size:13px}
.dlsrc{font-size:12.5px;color:var(--muted)}

@media (max-width:560px){
  .dlgrid,.dlpatterns{grid-template-columns:1fr}
  .dlguide{flex-direction:column;align-items:flex-start}
  .dlwarn{padding:16px 16px}
}

/* ===================================================================
   Login, registration and account
   Added 28 Aug 2026. The forms themselves are rendered by Ultimate
   Member; this is the page around them plus enough restraint on UM's
   own styling that it stops looking like a different website.
   =================================================================== */

.acc-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.acc-single{max-width:560px}

/* box-sizing stated explicitly: without it the 26px side padding is added
   OUTSIDE the grid-assigned width, which pushed the card 2px past the viewport
   at 320px. Small, but it is a horizontal scrollbar on a phone. */
.acc-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 26px 26px;box-shadow:var(--shadow);box-sizing:border-box;max-width:100%}
.acc-card h2{margin:0 0 4px;font-size:21px}
.acc-sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.acc-help{font-size:14px;color:var(--muted);margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--line)}

.acc-note{font-size:14px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px;max-width:760px;margin:18px 0 0;line-height:1.55}

.acc-warn{background:#fdf8e8;border:1px solid #e4d9b8;border-left:4px solid var(--gold-d);
  border-radius:12px;padding:18px 22px;margin-top:24px;max-width:820px}
.acc-warn h3{margin:0 0 8px;font-size:17px;color:#7a6412}
.acc-warn p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.6}

.acc-fallback{background:#fdf8e8;border:1px solid #e4d9b8;border-radius:10px;padding:14px 16px;
  font-size:14.5px}

/* ---- containing Ultimate Member ------------------------------------
   UM ships its own layout and colours. Rather than fight every rule, the
   form is given the theme's typography and controls, and UM's fixed
   widths are released so it fills the card it sits in. */
.acc-form .um{max-width:100% !important;margin:0 !important}
.acc-form .um-form input[type=text],
.acc-form .um-form input[type=email],
.acc-form .um-form input[type=password],
.acc-form .um-form input[type=tel],
.acc-form .um-form select,
.acc-form .um-form textarea{
  width:100%;font-family:Inter,system-ui,sans-serif;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  box-shadow:none;transition:border-color .15s,box-shadow .15s}
.acc-form .um-form input:focus,
.acc-form .um-form select:focus,
.acc-form .um-form textarea:focus{
  outline:none;border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(241,172,5,.16)}

.acc-form .um-form label,
.acc-form .um-form .um-field-label label{
  font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:14px;color:var(--ink);
  margin-bottom:5px;display:block}

.acc-form .um-field{margin-bottom:14px;padding:0}
.acc-form .um-field-area{margin:0}

/* UM's submit button, wearing the theme's primary button */
.acc-form .um-form input[type=submit],
.acc-form .um-form .um-button,
.acc-form .um-form a.um-button{
  display:inline-block;background:var(--grad) !important;color:#231c00 !important;
  font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:15px;
  border:0 !important;border-radius:10px !important;padding:12px 22px !important;
  box-shadow:none !important;cursor:pointer;width:auto !important;line-height:1.2;
  text-shadow:none !important;transition:transform .15s,filter .15s}
.acc-form .um-form input[type=submit]:hover,
.acc-form .um-form .um-button:hover{transform:translateY(-1px);filter:brightness(1.04)}

/* the secondary "register instead" style link UM puts under the form */
.acc-form .um-form .um-alt{font-size:14px;color:var(--muted)}
.acc-form .um-col-alt{padding-top:8px}

/* UM error and success notices, in the theme's voice */
.acc-form .um-field-error,.acc-form .um-error-block{
  background:#fdecec;border:1px solid #f0c2c2;color:#8a2b2b;border-radius:8px;
  padding:9px 12px;font-size:13.5px;margin-top:6px}
.acc-form .um-notice.success,.acc-form .um-notice{
  background:#eef7ee;border:1px solid #cfe6cf;color:#245c24;border-radius:8px;
  padding:11px 14px;font-size:14px}

@media (max-width:820px){
  .acc-cols{grid-template-columns:1fr}
}

@media (max-width:400px){
  .acc-card{padding:18px 16px 20px}
  .acc-note,.acc-warn{padding-left:14px;padding-right:14px}
}

/* ==========================================================================
   Team review, 1 September 2026
   ========================================================================== */

/* A text panel.
 *
 * The team reported the two paragraphs at the foot of the login page sitting
 * side by side instead of one under the other. The cause: those panels were
 * marked .obox, which is the LOGO box - 120px tall, display:flex, centred,
 * built to hold a single <img> on the product pages. Any paragraphs inside it
 * become flex children and line up in a row.
 *
 * Same class collision as .mods and .vfilter-h earlier in this rebuild. .obox
 * is left alone because the product page uses it correctly; the five text
 * panels move here. */
.notebox{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-s)}
.notebox h3{font-size:18px;margin:0 0 10px}
.notebox p{font-size:15.5px;line-height:1.7;color:var(--ink2);margin:0 0 12px}
.notebox p:last-child{margin-bottom:0}
.notebox ul{margin:0 0 12px;padding-left:20px;font-size:15.5px;line-height:1.7;color:var(--ink2)}
/* 2 Sept: :not(.btn) added. Without it this rule - specificity (0,1,1) - beat
   .btn-primary (0,1,0) and repainted the button's dark label gold, on a gold
   background. Unreadable, and it hit every button inside a notebox: "Download
   the trial" on System Requirements, "Browse the version archive" on Downloads.
   My own doing, introduced with .notebox yesterday. */
.notebox a:not(.btn){color:var(--gold-d);font-weight:600}
.notebox a:not(.btn):hover{text-decoration:underline}

/* Anchor links landed with the heading hidden behind the sticky header - the
 * team saw it on Utilities, CAD patterns and Version archive. The header is
 * 86px, 70px on a narrow screen; the extra allows a little breathing room. */
:target{scroll-margin-top:110px}
section[id]{scroll-margin-top:110px}
@media (max-width:520px){ :target,section[id]{scroll-margin-top:92px} }

/* System requirements */
.srgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.srcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow-s)}
.srcard .srh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.srcard .srh .ic{width:38px;height:38px;border-radius:10px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.srcard h3{font-size:17px;margin:0}
.srrow{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);
  font-size:14.5px;align-items:flex-start}
.srrow:first-of-type{border-top:0}
.srk{flex:0 0 104px;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px;
  text-align:center;margin-top:2px}
.srk.min{background:var(--bg2);color:var(--muted)}
.srk.rec{background:#fff7e2;color:#8a6400;border:1px solid #f3dca0}
.srv{flex:1;color:var(--ink2);line-height:1.55}
@media(max-width:520px){.srrow{flex-direction:column;gap:4px}
  .srk{flex:0 0 auto;align-self:flex-start}}

/* ==========================================================================
   Legal pages - privacy, cookie policy, terms
   ========================================================================== */

.legalwrap{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}

/* the contents list, built from the h2s at render time */
.toc{position:sticky;top:110px}
.toc .lbl{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{display:block;font-size:14px;padding:6px 0 6px 12px;border-left:2px solid var(--line);
  color:var(--ink2);transition:.15s}
.toc a:hover,.toc a:focus{color:var(--gold-d);border-left-color:var(--gold-d)}

/* the document itself. Long prose, so it reads a little looser than the rest
   of the site and the measure is capped - full-width legal text is unreadable
   on a wide screen. */
.legal{max-width:760px}
.legal h2{font-size:20px;margin:34px 0 10px;scroll-margin-top:120px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:17px;margin:24px 0 8px;scroll-margin-top:120px}
.legal p{font-size:15.5px;line-height:1.78;margin:0 0 14px;color:var(--ink2)}
.legal ul,.legal ol{font-size:15.5px;line-height:1.78;color:var(--ink2);
  margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--gold-d);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left;
  vertical-align:top;background:#fff}
.legal th{font-family:Poppins,system-ui,sans-serif;font-weight:600;background:var(--bg2)}

.updated{font-size:13.5px;color:var(--muted);margin-top:34px;padding-top:16px;
  border-top:1px solid var(--line)}

.legalnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

@media (max-width:900px){
  .legalwrap{grid-template-columns:1fr}
  .toc{position:static;margin-bottom:24px}
  .toc a{display:inline-block;border-left:0;border-bottom:2px solid var(--line);
    padding:4px 12px 4px 0;margin-right:10px}
  .toc a:hover,.toc a:focus{border-left-color:transparent;border-bottom-color:var(--gold-d)}
}

/* Long legal documents are the most likely place to overflow a narrow screen:
   a wide table, or an unbroken URL in a clause. Both are handled rather than
   left to push the page sideways. */
@media (max-width:480px){
  .legal{overflow-wrap:break-word}
  .legal table{display:block;overflow-x:auto}
  .legalnav .btn{width:100%}
}