/*
Theme Name: CoinScope Pro
Theme URI: https://www.coinscopepro.com
Author: Jennifer K. Mellen
Author URI: https://www.coinscopepro.com
Description: Site theme for CoinScope Pro, the numismatic evaluation suite. Dark-first glass design with a light mode, a full design panel under Appearance, and a Software catalog post type.
Version: 1.0.30
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: numismalab
Copyright: (c) 2026 Jennifer K. Mellen. All rights reserved.
*/
/* ---------- tokens: dark-first, three-state ---------- */
:root{
  --bg:#F4F6FB; --bg2:#EAEDF5; --panel:#FFFFFF; --panel2:#F7F8FC;
  --ink:#101320; --muted:#5A6274; --faint:#8A93A8;
  --line:rgba(16,19,32,.10); --line2:rgba(16,19,32,.06);
  --indigo:#5B4BE0; --cyan:#0E97C7; --indigo-bright:#6D5EF7; --cyan-bright:#22C0E8;
  --good:#12A150; --warn:#B8791A; --crit:#D64545;
  --glass:rgba(255,255,255,.7); --glass-brd:rgba(16,19,32,.10);
  --shadow:0 20px 50px -20px rgba(16,19,32,.28);
  --grad:linear-gradient(120deg,var(--indigo-bright),var(--cyan-bright));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0D14; --bg2:#0E1119; --panel:#12151F; --panel2:#161A26;
  --ink:#E9ECF5; --muted:#98A1B6; --faint:#6C7690;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --indigo:#8E82FF; --cyan:#35D0EE; --indigo-bright:#8E82FF; --cyan-bright:#35D0EE;
  --good:#56D98A; --warn:#F5B54A; --crit:#FF6B6B;
  --glass:rgba(22,26,38,.55); --glass-brd:rgba(255,255,255,.10);
  --shadow:0 30px 70px -25px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#0B0D14; --bg2:#0E1119; --panel:#12151F; --panel2:#161A26;
  --ink:#E9ECF5; --muted:#98A1B6; --faint:#6C7690;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --indigo:#8E82FF; --cyan:#35D0EE; --indigo-bright:#8E82FF; --cyan-bright:#35D0EE;
  --good:#56D98A; --warn:#F5B54A; --crit:#FF6B6B;
  --glass:rgba(22,26,38,.55); --glass-brd:rgba(255,255,255,.10);
  --shadow:0 30px 70px -25px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
h1,h2,h3,.display{font-family:"Sora","IBM Plex Sans",sans-serif;text-wrap:balance;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.mono{font-family:"IBM Plex Mono",monospace}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-family:"IBM Plex Sans";
  padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn-primary{background:var(--grad);color:#0B0D14;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--indigo-bright) 60%,transparent)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--panel2);transform:translateY(-2px)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-family:"IBM Plex Mono";
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}

/* ---------- brand mark ---------- */
.badge{width:var(--s,40px);height:var(--s,40px);border-radius:26%;position:relative;flex:0 0 auto;
  background:linear-gradient(150deg,#7C6BFF,#2FB7E6 65%,#4BE0C0);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 8px 20px -8px rgba(80,90,255,.6);overflow:hidden}
.badge::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 20% 12%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(50% 45% at 85% 90%,rgba(255,60,190,.35),transparent 60%)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}

/* ---------- header ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line2)}
.nav-in{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Sora";font-weight:700;font-size:18px;letter-spacing:-.01em}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 40px;overflow:hidden}
.hero-glow{position:absolute;inset:-20% -10% auto -10%;height:620px;z-index:0;filter:blur(70px);opacity:.55;pointer-events:none;
  background:radial-gradient(45% 60% at 22% 30%,color-mix(in srgb,var(--indigo-bright) 55%,transparent),transparent 70%),
  radial-gradient(45% 55% at 82% 40%,color-mix(in srgb,var(--cyan-bright) 50%,transparent),transparent 70%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1.15fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,62px);font-weight:800;margin:16px 0 0}
.hero p.lead{font-size:19px;color:var(--muted);max-width:46ch;margin:20px 0 28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-sub{margin-top:16px;font-size:13px;color:var(--faint);font-family:"IBM Plex Mono"}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero{padding:52px 0 20px}}

/* ---------- app window mockup ---------- */
.win{border-radius:16px;border:1px solid var(--glass-brd);background:var(--panel);box-shadow:var(--shadow);overflow:hidden;font-size:12.5px}
.win-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,var(--panel2),var(--panel))}
.win-bar .badge{--s:22px}
.win-title{font-family:"Sora";font-weight:600;font-size:13px}
.win-title small{color:var(--faint);font-weight:400;font-family:"IBM Plex Mono";font-size:11px}
.win-dots{margin-left:auto;display:flex;gap:6px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.win-stats{display:flex;gap:0;border-bottom:1px solid var(--line2);font-family:"IBM Plex Mono";font-size:11px}
.win-stats div{padding:9px 14px;border-right:1px solid var(--line2);color:var(--muted)}
.win-stats b{color:var(--ink);font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono";font-size:11.5px}
.tbl th{text-align:left;color:var(--faint);font-weight:500;padding:8px 14px;border-bottom:1px solid var(--line2);font-size:10.5px;letter-spacing:.03em}
.tbl td{padding:7px 14px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl .name{font-family:"IBM Plex Sans";font-weight:500}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;width:74px;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--grad)}
.row-flag td{background:color-mix(in srgb,var(--crit) 10%,transparent)}
.row-sel td{background:color-mix(in srgb,var(--indigo-bright) 15%,transparent)}
.tag-eco{color:var(--good)}
.mini{padding:12px 14px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line2);color:var(--muted);font-family:"IBM Plex Mono";font-size:11px}
.pulse{width:130px;height:34px}
.pulse path{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:draw 3.4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- generic sections ---------- */
section{position:relative;padding:70px 0}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(27px,3.4vw,40px);font-weight:700;margin:12px 0 0}
.sec-head p{color:var(--muted);font-size:17px;margin:14px 0 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--glass-brd);border-radius:16px;padding:26px;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cyan) 45%,var(--glass-brd));box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--indigo-bright) 16%,transparent);border:1px solid var(--glass-brd)}
.card .ic svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.8}
.card h3{font-size:19px;margin:0 0 8px}
.card ul{margin:12px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14.5px;display:flex;flex-direction:column;gap:8px}
.card li{display:flex;gap:9px;align-items:flex-start}
.card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);margin-top:8px;flex:0 0 auto}

/* telemetry strip */
.tele{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.tele .pill{font-size:13px;padding:8px 14px}
.tele .pill b{color:var(--ink)}

/* security band */
.band{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:24px;
  padding:44px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media(max-width:860px){.band{grid-template-columns:1fr;padding:30px}}
.threat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;font-family:"IBM Plex Mono";font-size:12.5px;box-shadow:var(--shadow)}
.threat .hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.sev{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;background:color-mix(in srgb,var(--crit) 18%,transparent);color:var(--crit)}
.threat .ln{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line2);color:var(--muted)}
.threat .ln b{color:var(--ink)}
.threat .why{margin-top:10px;color:var(--muted);font-family:"IBM Plex Sans";font-size:13px;line-height:1.5}

/* pricing */
.price-wrap{display:grid;grid-template-columns:1fr;justify-items:center}
.price{max-width:440px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.price .top{padding:28px 30px;border-bottom:1px solid var(--line2);position:relative}
.price .promo{position:absolute;top:20px;right:22px;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.05em;
  background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);padding:5px 10px;border-radius:999px}
.price h3{font-size:22px;margin:0}
.price .amt{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.price .amt .now{font-family:"Sora";font-weight:800;font-size:46px}
.price .amt .was{font-family:"IBM Plex Mono";color:var(--faint);text-decoration:line-through;font-size:18px}
.price .amt .per{color:var(--muted);font-size:14px}
.price ul{list-style:none;padding:22px 30px;margin:0;display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.price li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.price li svg{width:18px;height:18px;stroke:var(--good);fill:none;stroke-width:2;flex:0 0 auto;margin-top:2px}
.price .foot{padding:0 30px 28px;display:flex;flex-direction:column;gap:10px}
.price .note{font-size:12.5px;color:var(--faint);text-align:center;font-family:"IBM Plex Mono"}

/* about / studio */
.studio{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
@media(max-width:860px){.studio{grid-template-columns:1fr}}
.studio .mk{display:flex;flex-direction:column;gap:16px}
.studio .big-badge{--s:96px}
.studio blockquote{margin:0;font-family:"Sora";font-weight:600;font-size:22px;line-height:1.35}
.sign{font-family:"IBM Plex Mono";font-size:13px;color:var(--muted);margin-top:6px}

/* download cta */
.download{text-align:center;background:radial-gradient(60% 120% at 50% 0%,color-mix(in srgb,var(--indigo-bright) 16%,transparent),transparent 70%);
  border:1px solid var(--line);border-radius:24px;padding:56px 30px}
.download h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin:0}
.download p{color:var(--muted);max-width:52ch;margin:16px auto 26px}
.ss-note{margin-top:20px;font-size:12.5px;color:var(--faint);font-family:"IBM Plex Mono"}

/* footer */
footer{border-top:1px solid var(--line2);margin-top:40px;padding:40px 0;color:var(--muted);font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.pulse path{animation:none;stroke-dashoffset:0}}

/* ---------- WP inner pages & WooCommerce (mapped onto the same tokens) ---------- */
main#top{display:block}
.page-shell{max-width:900px;margin:0 auto;padding:64px 24px;color:var(--muted)}
.page-shell.wide{max-width:1160px}
.page-shell h1,.page-shell h2,.page-shell h3{color:var(--ink)}
.page-shell h1:first-child{margin-top:0}
.page-shell a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.page-shell li{margin-bottom:.4em}
.woocommerce ul.products li.product{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--ink);font-family:"Sora",sans-serif;font-size:18px}
.woocommerce .price,.woocommerce div.product p.price{color:var(--cyan) !important;font-weight:600}
.woocommerce table.shop_table{border:1px solid var(--line);background:var(--panel)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line2)}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--grad);color:#0B0D14;border:0;border-radius:12px;padding:12px 22px;font-weight:600}
.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.woocommerce form .form-row input.input-text:focus{border-color:var(--cyan);outline:2px solid color-mix(in srgb,var(--cyan) 25%,transparent);outline-offset:2px}
.woocommerce-message,.woocommerce-info{border-top-color:var(--indigo);background:var(--panel2);color:var(--ink)}

/* real GM monogram in the top bar */
.brand-mark{border-radius:26%;flex:0 0 auto;display:block}


/* big brand mark */
.nav-in{height:auto;padding:8px 0}
.numismalab-header .brand-mark,header.nav .brand-mark{width:120px;height:120px}
header.nav .brand{font-size:26px;gap:16px}
@media(max-width:820px){header.nav .brand-mark{width:72px;height:72px}header.nav .brand{font-size:20px}}

/* ---------- parallax background ---------- */
.numismalab-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-grid{position:absolute;inset:-20% 0;opacity:.5;
  background:
    linear-gradient(color-mix(in srgb,var(--indigo-bright) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--indigo-bright) 7%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(75% 60% at 50% 30%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 60% at 50% 30%,#000 0%,transparent 100%)}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;will-change:transform}
.o1{width:640px;height:640px;left:-160px;top:6%;background:color-mix(in srgb,var(--indigo-bright) 55%,transparent)}
.o2{width:560px;height:560px;right:-140px;top:34%;background:color-mix(in srgb,var(--cyan-bright) 45%,transparent)}
.o3{width:460px;height:460px;left:32%;top:74%;background:color-mix(in srgb,var(--indigo-bright) 35%,transparent)}
header.nav,main,footer{position:relative;z-index:1}

/* ---------- glassmorphism ---------- */
.card,.price,.band,.threat,.download,.win{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--glass-brd)}
.win-bar{background:color-mix(in srgb,var(--panel2) 65%,transparent)}
.pill{background:color-mix(in srgb,var(--panel) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
header.nav{background:color-mix(in srgb,var(--bg) 62%,transparent)}
@media(prefers-reduced-motion:reduce){.bg-orb,.bg-grid{transform:none !important}}

/* top bar sized to the big mark */
.nav-in{height:auto;min-height:140px;padding:12px 24px;align-items:center}
header.nav .nav-links{font-size:16px;gap:30px}
header.nav .nav-cta .btn{padding:15px 26px;font-size:16px}
@media(max-width:820px){.nav-in{min-height:92px}}

/* ---------- screenshots: grid + iOS lightbox ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
@media(max-width:980px){.shots{grid-template-columns:repeat(2,1fr)}}
.shot{padding:0;border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;cursor:pointer;
  background:var(--panel);box-shadow:0 8px 24px -12px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.shot img{display:block;width:100%;aspect-ratio:1536/961;object-fit:cover;object-position:top left}
.shot:hover{transform:translateY(-4px) scale(1.015);border-color:color-mix(in srgb,var(--cyan) 40%,var(--glass-brd));box-shadow:var(--shadow)}
.shot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px}
.lb-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);
  opacity:0;transition:opacity .26s ease}
.lb-card{position:relative;z-index:1;margin:0;max-width:min(1180px,94vw);
  background:var(--panel);border:1px solid var(--glass-brd);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
  opacity:0;transform:scale(.92) translateY(14px);
  transition:opacity .3s cubic-bezier(.2,.9,.25,1.15),transform .3s cubic-bezier(.2,.9,.25,1.15)}
.lb.on .lb-backdrop{opacity:1}
.lb.on .lb-card{opacity:1;transform:scale(1) translateY(0)}
.lb-img{display:block;width:100%;max-height:76vh;object-fit:contain;background:var(--bg2)}
.lb-cap{padding:14px 60px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line2)}
.lb-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);font-size:15px;line-height:1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s}
.lb-x:hover{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);font-size:24px;line-height:1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s}
.lb-nav:hover{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.lb-prev{left:12px}.lb-next{right:12px}
@media(prefers-reduced-motion:reduce){.lb-card,.lb-backdrop,.shot{transition:none}}

/* refinements after live review */
.win{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
.bg-orb{opacity:.16;filter:blur(120px)}
.bg-grid{opacity:.32}

/* App Store-style screenshot strip */
.shots{display:flex;grid-template-columns:none;gap:22px;margin-top:36px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:6px 6px 22px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:0 0 min(760px,86%);scroll-snap-align:center;position:relative;border-radius:18px;
  background:var(--panel);border:1px solid var(--glass-brd)}
.shot img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;border-radius:18px 18px 0 0}
.shot::after{content:attr(aria-label);display:block;padding:12px 18px;font-size:13px;color:var(--muted);
  text-align:left;border-top:1px solid var(--line2);font-family:"IBM Plex Mono",monospace}
.shot:hover{transform:translateY(-3px)}
@media(max-width:700px){.shot{flex-basis:92%}}

/* full logo lockup in the top bar */
.brand-lockup{height:92px;width:auto;display:block}
header.nav .nav-in{min-height:116px}
@media(max-width:820px){.brand-lockup{height:56px}header.nav .nav-in{min-height:76px}}

/* ---------- software catalog ---------- */
.sw-card{display:block;color:inherit}
.sw-card h3{margin:10px 0 6px}
.sw-icon img{width:64px;height:64px;border-radius:16px;display:block;margin-bottom:14px;object-fit:cover}
.sw-status{font-size:11px;letter-spacing:.16em}

/* critical: keep the lightbox truly hidden when closed */
.lb[hidden]{display:none}


/* ---------- the hero's breadth strip ----------
   A number reads faster than a sentence, which is the whole point of this block: it has to land
   inside the same five seconds as the headline. Wraps rather than scrolls, so nothing is hidden
   off the edge of a phone. */
.hero-stats{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:26px 0 0;padding:0}
.hero-stats li{display:flex;align-items:baseline;gap:8px}
.hero-stats b{font-family:"Sora",sans-serif;font-size:30px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--muted);max-width:11ch;line-height:1.25}

/* ---------- what it covers, in one skimmable row ---------- */
#span{padding:28px 0 8px}
.span-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.span-row>div{background:var(--panel);padding:18px 16px}
.span-row .eyebrow{font-size:11px}
.span-row p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
@media (max-width:1000px){.span-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){
  .span-row{grid-template-columns:repeat(2,1fr)}
  .hero-stats b{font-size:24px}
}


/* ---------- FAQ ----------
   <details> rather than JavaScript accordions, for three reasons that all matter here: the answers
   are in the DOM whether or not they are open, so a crawler and a screen reader both get them; the
   browser's own find-in-page opens the matching one; and it works with scripting disabled. */
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.faq-jump a{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.faq-jump a:hover{background:var(--panel2);color:var(--ink);border-color:var(--cyan)}
.faq-sec{margin-top:40px;scroll-margin-top:90px}
.faq-sec h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 14px}
.faq-q{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 10px;
  overflow:hidden}
.faq-q summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:16px;list-style:none;
  display:flex;align-items:center;gap:12px;transition:background .15s}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::before{content:"+";font-family:"IBM Plex Mono",monospace;font-size:17px;
  color:var(--cyan);flex:0 0 14px;transition:transform .18s}
.faq-q[open] summary::before{content:"\2212"}
.faq-q summary:hover{background:var(--panel2)}
.faq-q summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.faq-a{padding:0 18px 17px 44px}
.faq-a p{margin:0;color:var(--muted);line-height:1.62;max-width:78ch}


/* ---------- the studio band ---------- */
.studio-band{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:34px}
.studio-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.studio-facts li{display:grid;gap:2px;padding-left:16px;border-left:2px solid var(--cyan)}
.studio-facts b{font-family:"Sora",sans-serif;font-size:15px;color:var(--ink)}
.studio-facts span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);
  line-height:1.4}
@media (max-width:900px){.studio-band{grid-template-columns:1fr;padding:26px}}

/* ---------- the studio page's prose ----------
   A measure of about 68 characters, because this page is the one thing on the site somebody reads
   rather than scans, and a full-width line of body text at 1160px is genuinely tiring to follow. */
.about-body{max-width:68ch;margin-top:26px}
.about-body p{color:var(--ink);opacity:.86;line-height:1.72;margin:0 0 18px;font-size:16.5px}
.about-body h2{font-size:clamp(21px,2.2vw,28px);margin:38px 0 14px}
.about-body strong{color:var(--ink);opacity:1}
.about-body em{color:var(--cyan);font-style:normal}


/* ---------- the studio portrait ----------
   A rotating conic-gradient ring behind a glass frame, in the theme's own indigo and cyan. The ring
   is a pseudo-element on its own layer so it can spin without repainting the photograph, and it is
   masked to a ring rather than drawn as a disc so the image sits in a halo instead of on a plate.

   THE PHOTOGRAPH IS NOT KNOWN IN ADVANCE, which drives two decisions. It is cropped with
   object-fit so a portrait, a square or a landscape all fill the frame without distorting - a
   squashed face is the one failure mode that cannot be tolerated. And it rests in muted duotone,
   coming to full colour on hover and focus, which flatters an ordinary phone snap and keeps a
   studio shot from fighting the page's own palette. */
.studio-hero{display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:start;
  margin-top:22px}
.studio-hero.no-photo{grid-template-columns:1fr;max-width:64ch}
.studio-hero .lead{margin-top:0}

.studio-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.studio-chips li{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--muted);
  border:1px solid var(--line);background:var(--panel)}

.portrait{position:relative;margin:0;padding:14px}
.portrait-ring{position:absolute;inset:0;border-radius:24px;padding:2px;
  background:conic-gradient(from 0deg,var(--indigo-bright),var(--cyan-bright),
    var(--indigo-bright),var(--cyan-bright),var(--indigo-bright));
  /* masked to a ring: the gradient shows only in the 2px padding band */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.85}

.portrait-frame{position:relative;border-radius:22px;overflow:hidden;background:var(--panel2);
  box-shadow:var(--shadow)}
.portrait-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(.45) contrast(1.04);transition:filter .5s ease,transform .5s ease}
.portrait:hover .portrait-img,.portrait:focus-within .portrait-img{
  filter:grayscale(0) contrast(1);transform:scale(1.02)}
.portrait-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 16px 14px;
  font-size:11.5px;line-height:1.45;color:#EAF2FF;
  background:linear-gradient(to top,rgba(4,6,12,.92),rgba(4,6,12,.55) 55%,transparent)}

/* A visitor who has asked the system to stop moving things gets a still ring. */
@media (prefers-reduced-motion:reduce){
  .portrait-ring{animation:none}
  .portrait-img{transition:none}
}
@media (max-width:900px){
  .studio-hero{grid-template-columns:1fr;gap:26px}
  .portrait{max-width:420px}
}


/* ---------- portrait tuned for the actual photograph ----------
   Three changes, each driven by what the picture turned out to be rather than by what was guessed
   before it existed.

   1. IT IS SQUARE. The placeholder cropped to 4:5, which on a 2048x2048 headshot means slicing
      the sides off a composition somebody framed on purpose. The native ratio is kept.

   2. THE GREY IS FADED, NOT KEPT. It is a studio seamless, and a rectangle of flat grey sitting on
      a dark violet page reads as a photograph pasted into a hole. A radial mask lets the corners
      dissolve into the panel so she emerges from the page instead.

   3. THE COLOUR STAYS. The resting state was greyscale, which was the right hedge for an unknown
      snapshot and is the wrong one here: the lilac lace is almost exactly the theme's indigo, so
      desaturating throws away a coincidence worth having. Only a slight lift is applied. */
.portrait-img{
  aspect-ratio:1/1;
  filter:saturate(1.06) contrast(1.03);
  -webkit-mask-image:radial-gradient(118% 108% at 50% 38%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:radial-gradient(118% 108% at 50% 38%,#000 58%,rgba(0,0,0,.55) 82%,transparent 100%)}
.portrait:hover .portrait-img,.portrait:focus-within .portrait-img{
  filter:saturate(1.14) contrast(1.05);transform:scale(1.025)}

/* The frame behind her carries the fade, so the masked corners land on a violet wash rather than
   on a hard panel edge. */
.portrait-frame{
  background:
    radial-gradient(120% 100% at 50% 20%,
      color-mix(in srgb,var(--indigo-bright) 20%,transparent),
      transparent 70%),
    linear-gradient(180deg,var(--panel2),var(--panel))}

/* The caption sat on a black gradient, which fought the violet. Tinted to match. */
.portrait-cap{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--bg) 92%,var(--indigo-bright)) 0%,
    color-mix(in srgb,var(--bg) 62%,transparent) 55%,
    transparent 100%)}


/* ---------- the ring: rotate the LIGHT, not the frame ----------
   The first attempt animated transform:rotate on the ring element. That spins the element's whole
   box, border-radius and all, so instead of light travelling around a fixed frame you get a
   rounded rectangle tumbling behind the photograph - visibly a tilted diamond at most moments, and
   out of alignment with the picture it is supposed to frame.

   A conic-gradient's own start angle is the thing that should move. It is not animatable by
   default because the browser has no way to know an unregistered custom property holds an angle
   and should be interpolated rather than swapped. @property declares exactly that, so the sweep
   becomes smooth and the frame never moves.

   The @supports guard matters: where @property is unavailable the animation simply never runs and
   the ring sits still as a fixed gradient, which is a perfectly good outcome. Nothing tumbles. */
@property --portrait-angle{syntax:"<angle>";inherits:false;initial-value:0deg}

.portrait-ring{
  --portrait-angle:0deg;
  background:conic-gradient(from var(--portrait-angle),
    transparent 0deg,
    var(--indigo-bright) 40deg,
    var(--cyan-bright) 110deg,
    transparent 190deg,
    transparent 260deg,
    var(--indigo-bright) 330deg,
    transparent 360deg)}

@supports (background:conic-gradient(from var(--portrait-angle),red,blue)){
  .portrait-ring{animation:portrait-sweep 9s linear infinite}
}
@keyframes portrait-sweep{to{--portrait-angle:360deg}}

@media (prefers-reduced-motion:reduce){
  .portrait-ring{animation:none}
}


/* ---------- the portrait, as a coin you can flip ----------
   A real coin turns about its vertical axis, so the flip is rotateY and not the rotateX that CSS
   tutorials reach for - flipping top over bottom would read as a page turning, not a coin.

   backface-visibility is what makes it work: both faces sit in the same place, stacked, and the one
   pointing away from the viewer is simply not drawn. Without it you get both images painted over
   each other for the whole animation.

   The 1100px perspective is deliberately shallow-ish. Much less and the portrait lunges at you on
   the way round, which on a photograph of a person looks faintly alarming. */
.portrait.coin-flip{padding:14px}
.coin{all:unset;display:block;width:100%;cursor:pointer;perspective:1100px;
  -webkit-tap-highlight-color:transparent}
.coin:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:24px}
.coin-inner{position:relative;display:block;width:100%;aspect-ratio:1/1;
  transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.9,.25,1)}
.coin.flipped .coin-inner{transform:rotateY(180deg)}

.coin-face{position:absolute;inset:0;display:block;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 20%,
      color-mix(in srgb,var(--indigo-bright) 20%,transparent),transparent 70%),
    linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:var(--shadow);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-rev{transform:rotateY(180deg)}
.coin-face .portrait-img{width:100%;height:100%}

.coin-hint{margin:14px 0 0;text-align:center;font-size:11.5px;letter-spacing:.06em;
  color:var(--faint);transition:color .2s}
.coin:hover + .coin-hint{color:var(--cyan)}

/* Somebody who has asked for less motion gets the swap without the spin. The joke still works. */
@media (prefers-reduced-motion:reduce){
  .coin-inner{transition:none}
}


/* ---------- the Morgan reverse sits on transparency ----------
   The obverse is a rectangular photograph and needs a frame. The reverse is a round coin on a
   transparent background, so the same frame would draw a panel behind a circle and undo the effect.
   The reverse therefore loses its background, its shadow and its mask, and the coin floats. */
.coin-rev{background:none;box-shadow:none;display:flex;align-items:center;justify-content:center}
.coin-rev .portrait-img{
  -webkit-mask-image:none;mask-image:none;
  width:96%;height:auto;aspect-ratio:1/1;object-fit:contain;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}
.coin-rev .portrait-cap{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--bg) 88%,var(--indigo-bright)) 0%,
    transparent 100%)}

/* ---------- 404 ---------- */
.shell-404{padding-top:12px}
.four-oh-four{display:grid;grid-template-columns:380px 1fr;gap:52px;align-items:center;
  min-height:62vh}
.four-oh-four-copy .lead{max-width:52ch}
.four-oh-four h1{font-size:clamp(38px,6vw,68px);margin:12px 0 18px}

.cent{position:relative;margin:0;display:flex;align-items:center;justify-content:center}
/* A copper glow behind a copper coin, so it reads as lit rather than pasted on. */
.cent-glow{position:absolute;width:86%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(214,120,60,.45),rgba(214,120,60,.10) 55%,transparent 72%);
  filter:blur(26px)}
.cent-img{position:relative;display:block;width:100%;height:auto;border-radius:50%;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));
  animation:cent-bob 7s ease-in-out infinite}
@keyframes cent-bob{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-12px) rotate(1.2deg)}
}

.four-oh-four-links{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.four-oh-four-links a{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.four-oh-four-links a:hover{background:var(--panel2);color:var(--ink);border-color:var(--cyan)}

.four-oh-four-search{display:flex;gap:10px;margin-top:26px;max-width:460px}
.four-oh-four-search input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-family:"IBM Plex Sans",sans-serif;font-size:15px}
.four-oh-four-search input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media (prefers-reduced-motion:reduce){.cent-img{animation:none}}
@media (max-width:820px){
  .four-oh-four{grid-template-columns:1fr;gap:28px;text-align:center;min-height:0}
  .cent{max-width:300px;margin:0 auto}
  .four-oh-four-copy .lead{margin-left:auto;margin-right:auto}
  .four-oh-four-links{justify-content:center}
  .four-oh-four-search{margin-left:auto;margin-right:auto}
}


/* ---------- the coin sits dead centre ----------
   The reverse was drifting right and touching the frame. The cause is that a rotateY(180deg) face
   is laid out BEFORE it is rotated, so any horizontal asymmetry in the box - here the flex child
   sizing against a percentage width, plus a drop-shadow that is not part of the layout box - lands
   mirrored and therefore visible on the opposite side to where it was introduced.

   Positioning the image absolutely at the centre removes the question entirely: it is centred on
   both axes regardless of how the face is transformed, and a slightly smaller width leaves room
   for the drop shadow to fall inside the frame instead of being clipped by overflow:hidden. */
/* CENTRED WITHOUT transform, AND THAT IS THE WHOLE POINT.
   Centring with top/left 50% plus translate(-50%,-50%) works until something else sets transform on
   the same element - and the hover rule sets transform:scale(). The scale then REPLACES the
   translate rather than adding to it, so the coin jumped to the bottom right the instant the cursor
   touched it. `inset:0` with `margin:auto` centres a sized absolute box using the layout engine, so
   transform is left free for the hover to animate and the two can never fight. */
.coin-rev .portrait-img{
  position:absolute;inset:0;margin:auto;
  width:86%;height:86%;
  object-fit:contain}
/* and the hover keeps working, because scale composes from a centred origin */
.coin-flip:hover .coin-rev .portrait-img{transform:scale(1.03)}


/* ---------- the features page ----------
   Copy on the left at a readable measure, screenshots on the right. The two columns are deliberately
   unequal: prose wants about 64 characters a line and a screenshot wants as much width as it can
   get, so splitting 50/50 would give the worst of both. */
.feat{margin-top:56px;scroll-margin-top:90px;padding-top:34px;border-top:1px solid var(--line2)}
.feat:first-of-type{border-top:0}
.feat-head h2{font-size:clamp(24px,3vw,36px);margin:8px 0 0}
.feat-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:38px;
  align-items:start;margin-top:22px}
.feat-copy p{color:var(--ink);opacity:.86;line-height:1.7;margin:0 0 15px;font-size:16px;
  max-width:64ch}

/* THE LIMITS ARE MARKED, NOT HIDDEN. A caution rule and a warm accent, so a reader skimming for
   capabilities cannot skip past the sentence that says where the tool stops. */
.feat-wont{border-left:2px solid var(--warn);padding-left:14px;margin-top:20px !important;
  font-size:14.5px;opacity:.95}
.feat-wont strong{color:var(--warn)}

/* The gallery in each section: as many columns as fit, never fewer than one. */
.feat-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.feat-shots .shot{all:unset;display:block;cursor:zoom-in;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.feat-shots .shot:hover{transform:translateY(-3px);border-color:var(--cyan);
  box-shadow:0 14px 32px -16px rgba(0,0,0,.7)}
.feat-shots .shot:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.feat-shots .shot img{display:block;width:100%;height:auto}

@media (max-width:1000px){
  .feat-body{grid-template-columns:1fr;gap:24px}
  .feat-shots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}


/* ---------- requirements table, hardware list, callouts ----------
   A grid rather than a <table>, because the only thing needed is three aligned columns that become
   one on a phone, and a real table cannot reflow without either scrolling sideways or shrinking the
   text past readability. */
.req-table{margin:18px 0 22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.req-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:0;
  border-top:1px solid var(--line2)}
.req-row:first-child{border-top:0}
.req-row>span{padding:11px 14px;font-size:14.5px;color:var(--muted)}
.req-row>span:first-child{color:var(--ink);font-weight:600}
.req-head>span{background:var(--panel2);color:var(--faint) !important;font-weight:600;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:700px){
  .req-row{grid-template-columns:1fr}
  .req-row>span{padding:7px 14px}
  .req-row>span:first-child{padding-top:12px}
  .req-head{display:none}
}

.hw-list{margin:14px 0 20px;padding-left:20px}
.hw-list li{color:var(--ink);opacity:.86;line-height:1.66;margin-bottom:10px;max-width:66ch}
.hw-list strong{opacity:1}

/* A callout for the thing the reader must not skim past. */
.callout{border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:12px;
  background:var(--panel);padding:20px 22px;margin:22px 0}
.callout p{margin:0 0 12px}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-left-color:var(--warn)}
.callout-warn strong{color:var(--warn)}

.fineprint{font-size:13px;color:var(--faint);border-top:1px solid var(--line2);padding-top:16px;
  margin-top:30px}
.fineprint[data-needs]{border:1px dashed var(--warn);border-radius:10px;padding:14px 16px;
  color:var(--muted)}


/* ---------- three pricing tiers ----------
   The middle one is raised rather than merely coloured, because on a three-tier grid the eye needs
   somewhere to land and the annual licence is the one that suits most people. */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;
  align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:18px;background:var(--panel);padding:26px 24px}
.tier h3{margin:0;font-size:19px}
.tier-featured{border-color:color-mix(in srgb,var(--cyan) 55%,transparent);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 26px 60px -34px color-mix(in srgb,var(--indigo-bright) 80%,transparent);
  transform:translateY(-8px)}
.tier-flag{position:absolute;top:-11px;left:24px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--grad);color:#0B0D14;font-weight:700}
.tier-price{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px}
.tier-now{font-family:"Sora",sans-serif;font-size:38px;line-height:1;font-weight:700}
.tier-per{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.tier-off{margin:0 0 16px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--good)}
.tier-list{list-style:none;margin:0 0 22px;padding:0;flex:1}
.tier-list li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.5px;
  color:var(--muted);line-height:1.5}
.tier-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--grad)}
.tier .btn{width:100%;justify-content:center}
.tier-foot{margin-top:24px;text-align:center;font-size:12px;color:var(--faint)}
@media (max-width:900px){
  .tier-grid{grid-template-columns:1fr;gap:14px}
  .tier-featured{transform:none}
}


/* ---------- licences and tickets in My Account ---------- */
.lic-h{margin:0 0 6px}
.lic-intro{color:var(--muted);margin:0 0 20px}
.lic-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:20px 22px;margin-bottom:14px}
.lic-dead{opacity:.72}
.lic-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.lic-name{font-family:"Sora",sans-serif;font-weight:600;font-size:16px}
.lic-key{display:inline-block;margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:13px;
  padding:5px 9px;border-radius:7px;background:var(--panel2);border:1px solid var(--line);
  color:var(--cyan);user-select:all;word-break:break-all}
.lic-chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.lic-ok{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.lic-no{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.lic-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
  margin:18px 0 0}
.lic-meta dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0}
.lic-meta dd{margin:3px 0 0;font-size:14.5px;color:var(--ink)}
.lic-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.lic-note{margin:14px 0 0;font-size:13.5px;color:var(--warn)}
.lic-foot{margin-top:22px;font-size:13px;color:var(--faint);border-top:1px solid var(--line2);
  padding-top:16px}

.tk-list{display:grid;gap:8px}
.tk-row{display:grid;grid-template-columns:70px 1fr auto auto;gap:12px;align-items:center;
  padding:13px 16px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
  transition:border-color .15s,background .15s}
.tk-row:hover{border-color:var(--cyan);background:var(--panel2)}
.tk-id{color:var(--faint);font-size:12px}
.tk-title{font-weight:600}
.tk-date{color:var(--faint);font-size:11.5px}
.tk-msg{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px}
.tk-mine{background:var(--panel)}
.tk-staff{background:var(--panel2);border-left:3px solid var(--cyan)}
.tk-who{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin-bottom:6px}
.tk-msg p{margin:0 0 9px;color:var(--ink);opacity:.9;line-height:1.6}
.tk-msg p:last-child{margin-bottom:0}
.tk-form label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:5px}
.tk-form input[type=text],.tk-form textarea,.tk-form select{width:100%;padding:11px 13px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif;font-size:15px}
.tk-form input:focus-visible,.tk-form textarea:focus-visible,.tk-form select:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px}
@media (max-width:640px){
  .tk-row{grid-template-columns:1fr auto}
  .tk-id,.tk-date{display:none}
}


/* ---------- download steps ---------- */
.dl-steps{display:grid;gap:14px;margin:28px 0 8px;max-width:640px}
.dl-step{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:20px 22px}
.dl-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#0B0D14;font-weight:700;font-size:15px}
.dl-step h3{margin:4px 0 6px;font-size:17px}
.dl-step p{margin:0 0 10px;color:var(--muted);font-size:14.5px;line-height:1.55}
.dl-step p:last-child{margin-bottom:0}

/* ---------- the honeypot: hidden from people, present for bots ----------
   Deliberately NOT display:none. Some bots skip fields that are display:none, so it is moved out of
   the viewport instead, which they fill in happily. aria-hidden and tabindex -1 keep it away from
   screen readers and from keyboard order. */
.hp{position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important}

/* ---------- machines on a licence card ---------- */
.lic-machines{margin-top:18px;border-top:1px solid var(--line2);padding-top:14px}
.lic-machine{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px}
.lic-machine:last-child{border-bottom:0}
.btn-small{padding:6px 12px;font-size:12.5px}

/* ---------------------------------------------------------------- featured post band
   Sits above the hero. It has to stand out from a page that is already doing a lot, and the way it
   does that is by being the ONE warm thing on a cold page - the site is cyan on near-black, so a
   gold edge and a warm glow read as different rather than as louder. Louder would fight the hero;
   different gets looked at first and then hands the reader on.

   The whole band is one link. A card with a small "read more" at the bottom asks the reader to aim;
   at this size the entire strip is the target. */
.nl-featured{
  position:relative; z-index:3;
  /* STRONGER THAN THE FIRST VERSION, because at desktop width the first one read as a divider
     rather than as something to look at. The left edge carries a solid gold rule - the eye enters
     a band at its start - and the wash is warmer without becoming a block of colour that would
     compete with the hero directly beneath it. */
  background:linear-gradient(90deg, rgba(242,227,140,.17), rgba(242,227,140,.055) 48%, rgba(242,227,140,.015) 78%, transparent);
  border-top:1px solid rgba(242,227,140,.42);
  border-bottom:1px solid rgba(242,227,140,.3);
  border-left:4px solid #F2E38C;
  box-shadow:inset 0 0 44px rgba(242,227,140,.07);
}
.nl-featured-inner{
  display:flex; align-items:center; gap:20px;
  padding:16px 0; text-decoration:none; color:inherit;
}
.nl-featured-img{
  width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid rgba(242,227,140,.55);
  box-shadow:0 0 22px rgba(242,227,140,.25);
}
.nl-featured-text{flex:1 1 auto; min-width:0}
.nl-featured-tag{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#F2E38C; font-weight:700; margin-bottom:4px;
}
.nl-featured-title{
  margin:0 0 5px; font-size:22px; line-height:1.25; color:var(--ink,#eaf2ff); font-weight:700;
}
.nl-featured-excerpt{
  margin:0; font-size:13px; line-height:1.5; color:var(--muted,#9aa6b8);
  /* Two lines and then stop. An excerpt that grows with the post makes the band a different height
     on every visit, and a band that moves is a band people learn to skip. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-featured-cta{
  flex:0 0 auto; font-size:13px; font-weight:700; color:#F2E38C;
  border:1px solid rgba(242,227,140,.45); border-radius:999px; padding:8px 16px;
  white-space:nowrap; transition:background .18s ease, transform .18s ease;
}
.nl-featured-inner:hover .nl-featured-cta{background:rgba(242,227,140,.14); transform:translateX(3px)}
.nl-featured-inner:hover .nl-featured-title{color:#F2E38C}

@media (max-width:760px){
  /* THE PICTURE GOES, NOT THE WORDS. On a phone the portrait would take a third of the band and
     push the title to three lines; the title is what the reader is deciding on. */
  .nl-featured-img{display:none}
  .nl-featured-inner{gap:12px; padding:13px 0; align-items:flex-start; flex-wrap:wrap}
  .nl-featured-title{font-size:17px}
  .nl-featured-cta{padding:6px 13px; font-size:12px}
}

/* ---------------------------------------------------------------- buttons with depth and a shine
   WHAT "ALIVE" MEANS HERE, and what it must not mean. A button on a page about measurement should
   look like a physical thing that can be pressed - not like a thing that is animating at you. So
   the depth is built the way a real raised surface is lit, and the shimmer only happens when the
   pointer arrives. A button that shines on its own, forever, is a distraction on every page and the
   first thing a returning visitor stops seeing.

   THREE LAYERS, which is what gives a flat rectangle a physical edge:
     an inset highlight along the TOP, where a light above would catch it;
     an inset shadow along the BOTTOM, where the face turns away;
     a cast shadow underneath, which is what separates it from the page.
   Lift it on hover and the cast shadow grows and softens, because an object moving toward you
   throws a bigger, softer shadow. Press it and everything reverses in half the time - a press is
   quicker than a reach. */

.btn{
  position:relative;
  overflow:hidden;                 /* keeps the sweep inside the rounded corners */
  isolation:isolate;               /* so the sweep cannot paint over anything outside the button */
  transition:transform .18s cubic-bezier(.22,.61,.36,1),
             box-shadow .18s cubic-bezier(.22,.61,.36,1),
             filter .18s ease;
  will-change:transform;
}

/* THE SHEEN. A narrow diagonal band of light that crosses once when the pointer arrives. It sits in
   a pseudo-element rather than in a background-position animation so it composites on the GPU and
   cannot cause a repaint of the text underneath. */
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.42) 48%,
    rgba(255,255,255,.62) 52%,
    transparent 62%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:2;
}
.btn:hover::after,
.btn:focus-visible::after{transform:translateX(130%)}

/* The label has to sit above the sheen, or the band washes over the text instead of across the
   face. Anything inside the button gets lifted, not just a span. */
.btn > *{position:relative; z-index:3}

.btn-primary{
  /* The gradient is unchanged - this only adds the lighting on top of it. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),          /* top edge catching the light */
    inset 0 -2px 0 rgba(0,0,0,.20),               /* bottom edge turning away */
    0 10px 30px -10px color-mix(in srgb,var(--indigo-bright) 60%,transparent),
    0 2px 6px -2px rgba(0,0,0,.45);               /* the contact shadow, close and tight */
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 18px 42px -12px color-mix(in srgb,var(--indigo-bright) 75%,transparent),
    0 4px 10px -3px rgba(0,0,0,.5);
  filter:saturate(1.06) brightness(1.03);
}
.btn-primary:active{
  transform:translateY(0);
  transition-duration:.09s;        /* a press is quicker than a reach */
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.34),              /* pressed IN: the highlight becomes a shadow */
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 3px 10px -6px rgba(0,0,0,.5);
  filter:saturate(1) brightness(.99);
}

.btn-ghost{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 6px 18px -10px rgba(0,0,0,.55);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cyan) 55%,var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.24),
    0 14px 30px -12px rgba(0,0,0,.6),
    0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent);
}
.btn-ghost:active{
  transform:translateY(0);
  transition-duration:.09s;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.08);
}
/* A ghost button is mostly transparent, so a white sheen at full strength reads as a flash rather
   than a shine across a surface. */
.btn-ghost::after{
  background:linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.16) 50%,
    transparent 60%);
}

/* The featured-post pill is a button in everything but class name. */
.nl-featured-cta{
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.2),
             0 6px 16px -10px rgba(242,227,140,.5);
}
.nl-featured-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(242,227,140,.3) 50%, transparent 60%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.4,0,.2,1);
}
.nl-featured-inner:hover .nl-featured-cta::after{transform:translateX(130%)}

/* NOT FOR EVERYONE. Somebody who has asked their system to stop animations has asked for a reason -
   vestibular trouble, or a machine that cannot afford the compositing. They keep the depth, which
   is static and carries the meaning, and lose the movement. */
@media (prefers-reduced-motion:reduce){
  .btn, .btn-primary, .btn-ghost{transition:none!important}
  .btn::after, .nl-featured-cta::after{display:none}
  .btn-primary:hover, .btn-ghost:hover, .btn:active{transform:none!important}
}


/* ==============================================================================================
   WORLD AND ANCIENT COINS (1.6.31) - the site-wide banner and the homepage section.
   The banner is a strip under the sticky header, not inside it: the header's height is fixed by
   the logo rules above, and a second line in it would push every page down twice. It uses the
   same glass and gradient tokens as the rest of the site so it reads as part of it, not as an ad.
   ============================================================================================== */
.nl-wc-banner{position:relative;z-index:40;border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,color-mix(in srgb,var(--indigo-bright) 22%,transparent),
                                    color-mix(in srgb,var(--cyan-bright) 16%,transparent));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.nl-wc-banner[hidden]{display:none}
.nl-wc-banner-in{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.nl-wc-tag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--grad);color:#0B0D14;padding:5px 10px;border-radius:999px;font-weight:600;white-space:nowrap}
.nl-wc-msg{margin:0;flex:1 1 420px;color:var(--ink);font-size:16px;line-height:1.45}
.nl-wc-msg b{font-size:17.5px}
.nl-wc-sub{color:var(--muted);font-size:14.5px}
.nl-wc-link{color:var(--cyan);font-weight:600;white-space:nowrap}
.nl-wc-link:hover{text-decoration:underline}
.nl-wc-x{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  width:32px;height:32px;cursor:pointer;font-size:14px;line-height:1}
.nl-wc-x:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:620px){
  .nl-wc-banner-in{gap:10px;padding:12px 0}
  .nl-wc-sub{display:none}
  .nl-wc-x{position:absolute;top:10px;right:12px}
  .nl-wc-msg{flex-basis:100%;padding-right:36px}
}

#world-coins{scroll-margin-top:130px}
.nl-wc-figs{list-style:none;padding:0;margin:26px 0 28px;display:grid;gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.nl-wc-figs li{background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;padding:16px 18px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nl-wc-figs b{display:block;font-size:clamp(24px,2.6vw,32px);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nl-wc-figs span{color:var(--muted);font-size:14px}
@media (max-width:760px){.nl-wc-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nl-wc-band{margin-top:28px;display:grid;gap:34px;grid-template-columns:1fr 1fr}
.nl-wc-band h3{margin:10px 0 12px;font-size:1.3rem}
.nl-wc-band p{color:var(--muted)}
.nl-wc-list{margin:0;padding-left:18px;color:var(--muted)}
.nl-wc-list li{margin:0 0 9px}
.nl-wc-list b{color:var(--ink)}
@media (max-width:860px){.nl-wc-band{grid-template-columns:1fr}}

/* Featured title cards on the News list and single posts */
.nl-card-thumb{display:block;margin:-8px -8px 16px}.nl-card-thumb img{display:block;width:100%;height:auto;border-radius:12px}
.nl-single-thumb{margin:18px 0 22px}.nl-single-thumb img{display:block;width:100%;height:auto;border-radius:16px}


/* ---------------------------------------------------------------- the two featured cards (2026-09-26)
   Replaces the gold bands above: Jen found them "ugly and gaudy". Small glass cards in the site's own
   colors - violet (--indigo) for the author, cyan for the newest post - side by side and staggered. */
.nl-feat2{position:relative; z-index:3; padding:10px 0 4px}
.nl-feat2-row{display:flex; gap:14px; align-items:flex-start}
.nl-fc{
  flex:1 1 0; min-width:0; display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:12px; text-decoration:none; color:inherit;
  background:var(--glass,rgba(22,26,38,.55)); border:1px solid var(--glass-brd,rgba(255,255,255,.1));
  border-left:3px solid var(--nl-fc,var(--indigo)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nl-fc-author{--nl-fc:var(--indigo)}
.nl-fc-news{--nl-fc:var(--cyan); margin-top:18px}
.nl-fc:hover{transform:translateY(-2px); border-color:var(--nl-fc); box-shadow:0 10px 26px -14px var(--nl-fc)}
.nl-fc-img{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--nl-fc)}
.nl-fc-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.nl-fc-tag{font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--nl-fc)}
.nl-fc-title{font-size:15px; font-weight:700; line-height:1.25; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nl-fc-excerpt{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nl-fc-go{flex:0 0 auto; color:var(--nl-fc); font-weight:700; transition:transform .18s ease}
.nl-fc:hover .nl-fc-go{transform:translateX(3px)}
@media (max-width:760px){
  .nl-feat2-row{flex-direction:column; gap:8px}
  .nl-fc{width:100%}
  .nl-fc-news{margin-top:0; margin-left:18px; width:calc(100% - 18px)}
}

/* NAV LABELS NEVER BREAK (Jen, 2026-09-26: "if it wraps for others make sure it's formatted ok").
   "50 Shades of Abe" wrapped onto three stacked lines at laptop width. Every label now stays on one
   line; when the row runs out of room the links flow onto a second, evenly spaced row instead. */
.nav-links{flex-wrap:wrap;row-gap:6px;align-items:center}
.nav-links > a,.nav-links > .menu-item > a,.nav-links > li > a{white-space:nowrap}