/* MonsiTrade styles. Tokens, type and motion follow the MonsiTools design
   language v2 (Monsibd/MonsiTools docs/design-system.md). Edit tokens here,
   not literals in components. House rule: no em dashes anywhere. */

/* Fonts, self-hosted (licences in assets/fonts) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:100 700;src:url(assets/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:100 700;src:url(assets/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:200 900;src:url(assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:200 900;src:url(assets/fonts/source-serif-4-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:600;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:21px;--text-xl:26px;--text-2xl:36px;
  --text-display:clamp(40px,5.2vw,60px);
  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.55;--leading-relaxed:1.7;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  /* Square corners everywhere, by choice. Keep the tokens so a radius can
     come back in one place if ever wanted. */
  --radius-sm:0;--radius-md:0;--radius-lg:0;--radius-full:0;
  --motion-fast:140ms;--motion-base:220ms;--motion-ease:cubic-bezier(.2,.7,.2,1);
  --measure:70ch;--wrap:1152px;--nav-h:64px;
  --color-focus:#38bdf8;
  /* The gold of the MonsiTools logo star, shared by all three sites (docs/qol-and-signature.md). */
  --maker-gold:#e6a832;
}
:root,[data-theme="dark"]{
  --bg-page:#1c1b19;--bg-surface:#252320;--bg-surface-2:#2f2c28;
  --border-color:#3b3833;--border-strong:#5c5750;
  --text-primary:#f3f0ea;--text-secondary:#e3ded5;--text-muted:#d8d2c7;
  /* RAMP Trade colours: teal #3387a2 fill, navy #1e2330 hover. --accent is a
     lighter teal for text and icons so it stays readable on the dark page. */
  --accent:#5fb1c9;--accent-hover:#7cc2d6;--accent-fill:#3387a2;--accent-fill-text:#050b0d;--accent-press:#1e2330;--accent-press-text:#e3e4de;
  --shadow-float:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg-page:#faf8f4;--bg-surface:#f2efe8;--bg-surface-2:#e8e4db;
  --border-color:#c9c2b5;--border-strong:#8a8276;
  --text-primary:#1d1b18;--text-secondary:#4a453e;--text-muted:#625c53;
  --accent:#256b84;--accent-hover:#1e2330;--accent-fill:#3387a2;--accent-fill-text:#050b0d;--accent-press:#1e2330;--accent-press-text:#e3e4de;
  --shadow-float:0 10px 30px rgba(60,45,20,.12);
  /* Darker focus ring so it keeps 3:1 against the light page. */
  --color-focus:#0369a1;
  color-scheme:light;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--space-4))}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color var(--motion-base) ease,color var(--motion-base) ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--accent-fill);color:var(--accent-fill-text);font-weight:560;text-decoration:none}
.skip-link:focus{top:var(--space-3)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--space-6)}

/* Type */
h1,h2,h3{font-family:var(--font-serif);font-weight:600;color:var(--text-primary);text-wrap:balance}
h2{font-size:var(--text-2xl);line-height:var(--leading-tight)}
h3{font-size:var(--text-lg);line-height:var(--leading-snug)}
p,li{text-wrap:pretty}
.kicker{font-size:var(--text-sm);font-weight:560;color:var(--accent)}
.lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:60ch}
.sec-lede{color:var(--text-secondary);max-width:var(--measure)}

/* Logo and wordmark (MonsiTools pattern: body in text colour, star in accent) */
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;font-family:var(--font-sans);font-weight:650;letter-spacing:-.02em;font-size:var(--text-lg);white-space:nowrap}
/* Original RAMP Trade logo. Its navy parts vanish on the dark page, so in
   dark mode it sits on a light tile; in light mode it shows as is. */
/* The logo sits straight on the page in both themes; the dark theme uses logo-dark.svg (body and shirt colours swapped). */
.brand-logo{height:38px;width:38px;flex:none;transition:transform var(--motion-fast) ease}
.brand:hover .brand-logo{transform:translateY(-1px)}
.brand-accent{color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-md);font-weight:560;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease}
.btn:active{transform:translateY(1px)}
.btn-md{height:40px;padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-lg{height:48px;padding:0 var(--space-5);font-size:var(--text-base)}
.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fill-text)}
.btn-primary:hover{background:var(--accent-press);border-color:var(--accent-fill);color:var(--accent-press-text)}
.btn-quiet{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-secondary);transition:border-color var(--motion-fast) ease,color var(--motion-fast) ease,background-color var(--motion-fast) ease}
.icon-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn .ico{width:20px;height:20px}

/* Nav */
.nav-wrap{position:fixed;inset:0 0 auto;z-index:50;background:var(--bg-page);border-bottom:1px solid var(--border-color);transition:background-color var(--motion-base) ease}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:1280px;height:var(--nav-h);margin:0 auto;padding:0 var(--space-6)}
.nav-links{display:flex;gap:var(--space-1)}
.nav-links a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:560;color:var(--text-secondary);text-decoration:none;transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease}
.nav-links a:hover{color:var(--accent);background:var(--bg-surface)}
.nav-actions{display:flex;align-items:center;gap:var(--space-2)}
.theme-toggle .ico-moon,[data-theme="light"] .theme-toggle .ico-sun{display:none}
[data-theme="light"] .theme-toggle .ico-moon{display:block}
.nav-toggle,.nav-toggle .ico-close{display:none}
.mobile-menu{display:none}

/* Hero */
main{padding-top:var(--nav-h)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--space-7);align-items:center;padding-top:var(--space-9);padding-bottom:var(--space-8)}
.hero-title{margin-top:var(--space-3);font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:-.01em}
.hero-title .w{display:inline-block;white-space:nowrap}
.hero-title .w:last-child,.hero-title .w:nth-last-child(2){color:var(--accent)}
.hero-title .ch{display:inline-block;opacity:.001;transform:translateY(10px);animation:charIn .3s cubic-bezier(.3,.8,.6,1) forwards}
@keyframes charIn{to{opacity:1;transform:none}}
.hero .lede{margin-top:var(--space-5)}
.hero .actions{margin-top:var(--space-6)}
.js .hero-fade{opacity:.001;animation:fadeIn .6s cubic-bezier(.12,.23,.5,1) .2s forwards}
@keyframes fadeIn{to{opacity:1}}
.panel{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5)}
.panel-title{font-size:var(--text-lg);line-height:var(--leading-snug)}
.checks{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}
.checks li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);color:var(--text-primary);font-weight:500}
.checks .ico{color:var(--accent);width:20px;height:20px;stroke-width:2.2}

/* Sections */
.section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.sec-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6);max-width:60rem}
.narrow .sec-head,.narrow .faq-list{max-width:760px}

/* Cards (MonsiTools: surface, quiet outline, lift 2px on hover) */
.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease)}
/* Only cards that are links react to hover; the team card is not clickable. */
a.card:hover{border-color:var(--border-strong);background:var(--bg-surface-2);transform:translateY(-2px);box-shadow:var(--shadow-float)}
a.card{display:block;text-decoration:none;color:inherit}
a.card:active{transform:scale(.995)}
.card h3{margin-top:var(--space-4)}
.card h3+p{margin-top:var(--space-3);color:var(--text-secondary)}

/* Products */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:center}
.product+.product{margin-top:var(--space-7)}
.product-flip .product-media{order:2}
.product-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-color);aspect-ratio:4/3}
.product-media picture{display:block;height:100%}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--motion-ease)}
.product:hover .product-media img{transform:scale(1.03)}
.product-text h3{font-size:var(--text-xl);line-height:var(--leading-snug)}
.product-text p{margin-top:var(--space-3);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:var(--measure)}

/* Services: a plain list, name on the left, what it means on the right */
.rows{border-top:1px solid var(--border-color)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-6);padding:var(--space-5) 0;border-bottom:1px solid var(--border-color)}
.row dt{font-family:var(--font-serif);font-weight:600;font-size:var(--text-lg);line-height:var(--leading-snug)}
.row dd{margin:0;color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:var(--measure)}

/* Ordering: heading beside three short paragraphs */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-6);align-items:start}
.flow .sec-head{margin-bottom:0}
.flow-text{display:flex;flex-direction:column;gap:var(--space-4);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:var(--measure)}
.flow-text strong{color:var(--text-primary);font-weight:600}

/* Team spotlight */
.lead{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--space-7);align-items:center;padding:var(--space-4)}
.lead-photo{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1}
.lead-photo picture{display:block;height:100%}
.lead-photo img{width:100%;height:100%;object-fit:cover}
.lead-body{padding-right:var(--space-6)}
.lead-body h3{margin-top:var(--space-2);font-size:var(--text-2xl);line-height:var(--leading-tight)}
.lead-bio{margin-top:var(--space-3);color:var(--text-secondary);max-width:52ch}
.lead-points{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-5) 0 var(--space-6)}
.lead-points li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);font-weight:500}
.lead-points .ico{width:20px;height:20px;color:var(--accent)}

/* FAQ: heading and an "ask us" box on the left, questions on the right */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:var(--space-7);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + var(--space-5))}
.faq-side .sec-head{margin-bottom:var(--space-5)}
.faq-ask h3{font-size:var(--text-lg)}
.faq-ask p{margin-top:var(--space-3);color:var(--text-secondary)}
.faq-ask .actions{margin-top:var(--space-5)}
.faq-layout .faq-list{margin-top:calc(var(--text-sm) * var(--leading-normal) + var(--space-3))}

/* FAQ: soft rows, chevron turns, height animates */
.faq-list{display:flex;flex-direction:column;gap:var(--space-2)}
.faq-item{border-radius:var(--radius-md);background:var(--bg-surface);transition:background-color var(--motion-fast) ease}
.faq-item:hover{background:var(--bg-surface-2)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);width:100%;padding:var(--space-4) var(--space-5);text-align:left;font-weight:560;user-select:none}
.faq-q .chev{width:20px;height:20px;color:var(--text-muted);transition:transform var(--motion-base) var(--motion-ease)}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--accent)}
/* Collapsed only when script.js runs, so answers stay readable without JavaScript. Hidden answers leave the accessibility tree. */
.faq-a{display:grid}
.js .faq-a{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 240ms var(--motion-ease),opacity 240ms var(--motion-ease),visibility 0s 240ms}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 var(--space-5) var(--space-4);color:var(--text-secondary);line-height:var(--leading-relaxed)}
.js .faq-item.open .faq-a{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-7);align-items:center;padding:var(--space-7)}
.contact h2{margin-top:var(--space-3)}
.contact .sec-lede{margin-top:var(--space-3)}
.contact .actions{margin-top:var(--space-5)}
.contact-list{display:flex;flex-direction:column;gap:var(--space-2)}
.contact-list li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-page);color:var(--text-secondary);overflow-wrap:anywhere}
.contact-list .ico{width:20px;height:20px;color:var(--accent)}
.contact-list a{text-decoration:none;color:var(--text-primary)}
.contact-list a:hover{color:var(--accent)}

/* Footer */
.footer{margin-top:var(--space-8);border-top:1px solid var(--border-color);padding:var(--space-7) 0 var(--space-5);font-size:var(--text-sm)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr) minmax(0,1.1fr) minmax(0,1.45fr);gap:var(--space-6);align-items:start}
.footer-tagline{margin-top:var(--space-3);color:var(--text-secondary);max-width:32ch;line-height:var(--leading-normal)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.footer-heading{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;color:var(--text-muted);line-height:1.2;margin-bottom:var(--space-1)}
.footer-col a,.footer-col span{color:var(--text-secondary);text-decoration:none;line-height:1.35;overflow-wrap:anywhere;transition:color var(--motion-fast) ease}
.footer-col a:hover,.footer-bottom a:hover{color:var(--accent)}
.footer-biz{display:flex;align-items:flex-start;gap:var(--space-3)}
.footer-biz-logo{width:26px;height:26px;flex:none;margin-top:1px;object-fit:contain}
.footer-biz-text{display:flex;flex-direction:column;gap:2px}
[data-theme="dark"] .only-light,[data-theme="light"] .only-dark{display:none}
.footer-col .footer-biz-name{color:var(--text-secondary)}
.footer-col .footer-biz-desc{font-size:var(--text-xs);color:var(--text-muted)}
.footer-col a.footer-biz:hover .footer-biz-name{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;position:relative;margin-top:var(--space-7);padding-top:var(--space-5);font-size:var(--text-xs);color:var(--text-muted)}
.footer-bottom::before{content:"";position:absolute;top:0;left:var(--space-6);right:var(--space-6);height:1px;background:var(--border-color)}
.footer-bottom-links{display:flex;gap:var(--space-5)}
.footer-bottom a{color:var(--text-muted);text-decoration:none}

/* 404 */
.nf{padding-top:var(--space-9);padding-bottom:var(--space-8);max-width:760px}
.nf h1{margin-top:var(--space-3);font-size:var(--text-2xl);line-height:var(--leading-tight)}
.nf .lede{margin-top:var(--space-4)}
.nf .actions{margin-top:var(--space-5)}
.related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-7)}
.related-row{display:block;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-surface);text-decoration:none;font-weight:500;transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
.related-row:hover{background:var(--bg-surface-2);color:var(--accent)}

/* Legal pages */
.legal{max-width:760px;padding-top:var(--space-9);padding-bottom:var(--space-8)}
.legal h1{margin-top:var(--space-3);font-size:var(--text-2xl);line-height:var(--leading-tight)}
.legal-date{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}
.legal .lede{margin-top:var(--space-5)}
.legal h2{margin-top:var(--space-6);font-size:var(--text-xl);line-height:var(--leading-snug)}
.legal h2+p,.legal p+p,.legal p+ul,.legal ul+p{margin-top:var(--space-3)}
.legal p,.legal li{color:var(--text-secondary);line-height:var(--leading-relaxed)}
.legal ul{display:flex;flex-direction:column;gap:var(--space-2)}
.legal li{position:relative;padding-left:var(--space-5)}
.legal li::before{content:"";position:absolute;left:4px;top:.7em;width:7px;height:7px;background:var(--accent)}
.legal a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal a:hover{color:var(--accent)}
.legal code{font-family:var(--font-mono);font-size:.92em;padding:1px 6px;background:var(--bg-surface);border:1px solid var(--border-color)}

/* Touch screens: footer links get a taller hit area (the full row pitch) without moving anything. */
@media (pointer:coarse){
  .footer-col a:not(.footer-biz){padding-block:10px;margin-block:-10px}
  .icon-btn{width:44px;height:44px}
  .footer-bottom a{padding-block:12px;margin-block:-12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}
  .hero-title .ch,.js .hero-fade{opacity:1;transform:none;filter:none}
}

/* Tablet */
@media (max-width:1023px){
  .nav-links{display:none}
  .nav-toggle{display:inline-grid}
  .nav-toggle[aria-expanded="true"] .ico-menu{display:none}
  .nav-toggle[aria-expanded="true"] .ico-close{display:block}
  .mobile-menu{display:flex;flex-direction:column;gap:var(--space-1);max-height:0;overflow:hidden;padding:0 var(--space-6);border-top:1px solid transparent;visibility:hidden;transition:max-height var(--motion-base) var(--motion-ease),padding var(--motion-base) var(--motion-ease),visibility 0s var(--motion-base)}
  .mobile-menu.open{max-height:420px;padding:var(--space-3) var(--space-6) var(--space-5);border-top-color:var(--border-color);visibility:visible;transition-delay:0s}
  .mobile-menu a:not(.btn){padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-weight:560}
  .mobile-menu a:not(.btn):hover{color:var(--accent);background:var(--bg-surface)}
  .mobile-menu .btn{margin-top:var(--space-2)}
  .hero{grid-template-columns:1fr;padding-top:var(--space-8)}
  .lead{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--space-6)}
  .lead-body{padding-right:var(--space-2)}
  .contact{grid-template-columns:1fr;padding:var(--space-6)}
  .faq-layout{grid-template-columns:1fr;gap:var(--space-5)}
  .faq-side{position:static}
  .faq-layout .faq-list{margin-top:0}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-6)}
  .footer-brand-col{grid-column:1/-1}
}

/* Phone */
@media (max-width:640px){
  :root{--text-2xl:30px;--text-xl:23px}
  .wrap,.nav{padding:0 var(--space-4)}
  .nav-cta{display:none}
  .mobile-menu,.mobile-menu.open{padding-left:var(--space-4);padding-right:var(--space-4)}
  .hero{padding-top:var(--space-7);gap:var(--space-6)}
  .hero-title{font-size:40px}
  .actions .btn{flex:1 1 100%}
  .section{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .product,.lead{grid-template-columns:1fr;gap:var(--space-5)}
  .product-flip .product-media{order:0}
  .row,.flow{grid-template-columns:1fr;gap:var(--space-2)}
  .flow{gap:var(--space-5)}
  .lead-body{padding:0 var(--space-2) var(--space-3)}
  .contact{padding:var(--space-5)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col-contact{grid-column:1/-1;order:3}
  .footer-bottom::before{left:var(--space-4);right:var(--space-4)}
  .related-list{grid-template-columns:1fr}
}

/* The page behind the open phone menu does not scroll. */
html.menu-locked,html.menu-locked body{overflow:hidden}

/* Quality of life (2026-10-24, docs/qol-and-signature.md) */
.to-top{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:40;width:44px;height:44px;display:grid;place-items:center;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-strong);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--motion-ease),visibility 0s var(--motion-base)}
.to-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{background:var(--bg-surface-2)}
.to-top .ico{width:20px;height:20px}
.copy-btn{margin-left:var(--space-3);padding:var(--space-1) var(--space-3);border:1px solid var(--border-strong);font-size:var(--text-sm);font-weight:560;color:var(--text-secondary)}
.copy-btn:hover{color:var(--text-primary);background:var(--bg-surface-2)}
.nav-links a.is-current{color:var(--accent)}
.heading-link{display:inline-grid;place-items:center;margin-left:var(--space-2);width:28px;height:28px;vertical-align:middle;color:var(--text-muted);opacity:0;transition:opacity var(--motion-fast) ease}
.heading-link .ico{width:18px;height:18px}
h2:hover .heading-link,.heading-link:focus-visible{opacity:1}
@media (hover:none){.heading-link{opacity:.6}}
@media (prefers-reduced-motion:reduce){.to-top,.heading-link{transition:none}}
@media print{
  .nav-wrap,.footer,.to-top,.skip-link,.heading-link,.copy-btn,.theme-toggle{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .legal a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}

/* Shared with MonsiTools and Mr. Radiant (docs/qol-and-signature.md): the gold star from the
   MonsiTools logo after the copyright line, and the same gold text selection. */
.maker-star{display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.05em;fill:var(--maker-gold)}
::selection{background:color-mix(in srgb,var(--maker-gold) 35%,transparent);color:var(--text-primary)}

/* Quality of life, round 2 (2026-10-24, docs/qol-and-signature.md) */
html{scrollbar-gutter:stable}                                   /* no sideways jump when the phone menu locks scrolling */
.mobile-menu{overscroll-behavior:contain}                        /* scrolling the menu never scrolls the page behind it */
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent} /* taps respond at once, no grey flash */
input,textarea{caret-color:var(--accent);accent-color:var(--accent-fill)} /* brand-coloured text cursor and native controls */
.faq-item:target .faq-q,article :target{outline:2px solid var(--maker-gold);outline-offset:4px} /* an FAQ answer or heading opened from a link is marked for a moment */
.faq-item:target .faq-q{animation:target-fade 2.4s ease forwards}
article :target{animation:target-fade 2.4s ease forwards}
@keyframes target-fade{to{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.faq-item:target .faq-q,article :target{animation:none;outline:none}}