/* The static template: support, account deletion, terms, privacy, premium, the card saved page, the app review page and
   the Stripe return pages. 31 Oct 2026 (design audit, Job 2). These pages had faces of their own from a font host,
   with a near copy of the palette, so the page after Stripe looked like another company. They now share the shop's
   faces and the app's own values:

     tokens    apps/mobile/src/theme/theme.tsx, light and dark. Copy from there, do not invent a value here.
     faces     Barlow Condensed for headings, labels and codes; Inter for everything a person reads. Self hosted from the
               same files as the home page. One Barlow weight, 700, so a page downloads one Barlow file and one Inter.
     wordmark  .brand: the tile the app icon uses, then "Master Vault" in Barlow Condensed 700.
     button    .btn: the app's teal to teal2 gradient at 135 degrees with its ON_TEAL words, radius 12. Never white on teal.
     theme     follows the system like the shop, and a choice made in the shop (localStorage mv-creator-theme, read by the
               one line script in each page's head) wins in both directions.

   --dim is 4.33 and 4.19 on --raised, so it is never used on --raised. The measured pairs are in the commit that made
   this file.

   open.html and get.html carry a copy of the sections between the markers below in their own <style>, because they
   send a visitor on with a script and a script waits for every stylesheet above it. Change those sections here and
   there together. */

/* @section faces */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-latin-ext-9d351bd922.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-latin-3787a5a419.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext-34b9c504ca.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-3100e775e8.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; }
/* @end */

/* @section tokens */
:root{
  --void:#F4F7F6; --surface:#FFFFFF; --raised:#E7F1EE; --line:#DAE7E3;
  --teal:#00B3A4; --teal2:#35D0BE; --teal-text:#00786E; --on-teal:#0B1B19; --live:#D22F23;
  --page-grid:#C0E7E0;
  --text:#14211F; --muted:#5A6B67; --dim:#627370;
  --sel:rgba(0,179,164,.24); --shadow:0 18px 50px rgba(20,33,31,.08);
  --font-display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --void:#0A0A0B; --surface:#141518; --raised:#1C1E22; --line:#2A2D31;
    --teal:#12B7A2; --teal2:#35D0BE; --teal-text:#12B7A2; --on-teal:#0B1B19; --live:#F0483C;
    --page-grid:rgba(53,208,190,.22);
    --text:#F3F4F6; --muted:#9AA0A7; --dim:#7A8088;
    --sel:rgba(18,183,162,.32); --shadow:0 18px 50px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --void:#0A0A0B; --surface:#141518; --raised:#1C1E22; --line:#2A2D31;
  --teal:#12B7A2; --teal2:#35D0BE; --teal-text:#12B7A2; --on-teal:#0B1B19; --live:#F0483C;
  --page-grid:rgba(53,208,190,.22);
  --text:#F3F4F6; --muted:#9AA0A7; --dim:#7A8088;
  --sel:rgba(18,183,162,.32); --shadow:0 18px 50px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* @end */

/* @section base */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--void)}
body{margin:0;background-color:var(--void);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px;border-radius:4px}
a{color:var(--teal-text);text-underline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.2px;line-height:1.15;text-wrap:balance}
p,li{text-wrap:pretty}

/* The one wordmark: the same as the buyer site's header. */
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.2px;line-height:1;text-decoration:none;white-space:nowrap}
.brand .mark{width:28px;height:28px;flex:none;display:block}

/* The one primary button: the same as the home page and the app. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 20px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:var(--on-teal);font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.ghost,.btn.alt{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover,.btn.alt:hover{background:var(--raised);filter:none}

/* The one small label: Barlow, uppercase, as on the buyer site. */
.code{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.7px;line-height:1.3;text-transform:uppercase;color:var(--teal-text);margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* @end */

/* @section centre */
/* A card in the middle of the page, on the brand's grid. */
.s-centre{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 16px;
  background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);background-size:48px 48px}
.s-centre .card{max-width:520px;width:100%;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px 30px;box-shadow:var(--shadow)}
.s-centre .brand{margin-bottom:26px}
.s-centre h1{font-size:32px;margin:0 0 12px}
.s-centre p{color:var(--muted);margin:0 0 26px}
.s-centre .btn{min-width:200px}
.stack{display:grid;gap:10px;max-width:320px;margin:0 auto}
.stack .btn{min-width:0}
a.alt:not(.btn){display:block;margin-top:16px;font-size:14px;color:var(--muted);text-decoration:none}
a.alt[href]:not(.btn):hover{color:var(--text);text-decoration:underline}
.part{display:none}
.steps{list-style:none;padding:0;margin:0 auto 26px;max-width:340px;text-align:left;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--text)}
.steps b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:var(--on-teal);font-size:13px;display:grid;place-items:center}
@media (max-width:480px){.s-centre .card{padding:32px 22px}}
/* @end */

/* The app review page: a form in the same card. */
.s-centre .card.form{max-width:480px;text-align:left}
.card.form h1{font-size:28px}
.card.form p{margin-bottom:18px}
.card.form label{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}
.card.form select,.card.form input{width:100%;min-height:46px;padding:11px 14px;border-radius:12px;border:1px solid var(--dim);font:inherit;font-size:16px;background:var(--void);color:var(--text)}
.card.form button{width:100%;margin-top:22px}
.card.form button:disabled{opacity:.45;cursor:default;filter:none}
#out{display:none;margin-top:24px;text-align:center}
#otp{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:.14em;font-variant-numeric:tabular-nums;margin:6px 0 8px}
#err{display:none;margin-top:18px;color:var(--live);font-size:14px;line-height:1.5}
.small{font-size:13px;color:var(--muted)}

/* A longer page in one card: support, account deletion. */
.s-page{min-height:100vh;padding:48px 16px;
  background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);background-size:48px 48px}
.s-page .card{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px 34px;box-shadow:var(--shadow)}
.s-page .brand{margin-bottom:26px}
.s-page h1{font-size:36px;margin:0 0 14px}
.s-page h2{font-size:24px;margin:32px 0 10px}
.s-page p,.s-page li{color:var(--muted)}
.s-page p{margin:0 0 14px}
.s-page ol,.s-page ul{margin:0 0 14px;padding-left:22px}
.s-page li{margin-bottom:6px}
.s-page strong{color:var(--text)}
.contact{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 8px}
.s-page .panel{background:var(--void);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0}
.s-page .panel p:last-child{margin-bottom:0}
details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0;background:var(--surface)}
summary{cursor:pointer;font-weight:600;color:var(--text)}
details p{margin:12px 0 0}
.foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot a{color:var(--muted)}
@media (max-width:480px){.s-page{padding:24px 12px}.s-page .card{padding:30px 20px}.contact .btn{width:100%}}

/* The legal pages: terms and privacy. */
.s-legal{overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
#nav{position:sticky;top:14px;z-index:50}
.navin{display:flex;align-items:center;gap:22px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:10px 14px 10px 16px;margin-top:14px;box-shadow:var(--shadow)}
.navlinks{display:flex;gap:20px}
.navlinks a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .15s}
.navlinks a:hover{color:var(--text)}
.navlinks a.on{color:var(--teal-text)}
.nav-sp{flex:1}
.icon-btn{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);color:inherit;cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.dochead{padding:56px 0 30px}
.dochead h1{font-size:clamp(38px,5vw,52px);line-height:1.05;margin:0 0 12px}
.dochead .sub{font-size:17px;color:var(--muted);max-width:60ch;margin:0 0 18px}
.updated{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.7px;color:var(--teal-text);background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.doc{max-width:72ch;padding:10px 0 90px;font-size:16px}
.doc h2{font-size:26px;margin:44px 0 12px;display:flex;align-items:center;gap:12px;scroll-margin-top:96px}
.doc h2::before{content:"";display:inline-block;width:20px;height:3px;background:var(--teal);border-radius:2px;flex:none}
.doc h3{font-size:19px;margin:24px 0 6px}
.doc p{margin:0 0 14px;line-height:1.7}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin:7px 0;line-height:1.65}
.doc a{font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:18px 0}
.panel p{margin:0}
.panel.live{border-color:color-mix(in srgb,var(--live) 35%,transparent);background:color-mix(in srgb,var(--live) 5%,var(--surface))}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--text);background:var(--raised);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.7px;text-transform:uppercase}
tr:last-child td{border-bottom:none}
.note{color:var(--dim);font-size:14px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin:26px 0 10px;columns:2;column-gap:28px}
.toc a{display:block;font-size:14px;font-weight:500;color:var(--muted);padding:5px 0;break-inside:avoid;text-decoration:none}
.toc a:hover{color:var(--teal-text);text-decoration:underline}
.s-legal footer{padding:40px 0 50px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:13px;border-top:1px solid var(--line);margin-top:20px}
.s-legal footer .sp{flex:1}
.s-legal footer a{color:var(--muted)}
.s-legal footer .brand{font-size:16px;gap:8px}
.s-legal footer .brand .mark{width:24px;height:24px}
@media (max-width:760px){.navlinks{display:none}}
@media (max-width:600px){.toc{columns:1}}
@media (max-width:420px){.wrap{padding:0 12px}.navin{gap:8px;padding:8px 8px 8px 10px}.navin .btn{padding:10px 12px;font-size:14px;white-space:nowrap}}
/* The row is about 20 px too wide for its pill under 340. The tap targets stay 44 high. */
@media (max-width:340px){.nav-sp{display:none}.navin{gap:6px;padding:8px 6px 8px 8px}.navin .brand{gap:7px;margin-right:auto}.navin .brand .mark{width:24px;height:24px}.navin .btn{padding:10px}}

/* The Finger Rule (DESIGN.md), last in the file: size for the pointer, not the width. 31 Oct 2026. A question on /support
   looked 50 px tall and answered 26 of them, so its padding moves from the box to the part that is pressed. A link inside
   a sentence stays as it is. */
@media (pointer:coarse){
  .brand{min-height:44px}
  .navlinks a{display:inline-flex;align-items:center;min-height:44px}
  a.alt:not(.btn){display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px}
  details{padding:0 16px}
  summary{padding:12px 0;min-height:44px;box-sizing:border-box}
  details p{margin:0 0 12px}
  .toc a{padding:12px 0}
  .foot a,.s-legal footer a{display:inline-flex;align-items:center;min-height:44px}
}