/* Make A Check: mc.css, the shared foundation (tokens, base, components).
   Built by FE-1 from docs/team/directions/A (DESIGN.md + mock.css), amended by docs/team/GATE1.md.
   Every class starts with mc-: check.css owns short global names (.check .f .lbl .val .rule .bank
   .logo .sheet .paper .preview .stub .a .b .r ...). How to use each piece: docs/team/KIT.md.
   Every colour and size comes from a token in :root. No page layout lives in this file.
   Breakpoints: 1100 (hero lead drops), 900 (one column, menu button, app bar on two rows), 640 (phone). */

/* ============ 0. Fonts (self-hosted, OFL; licences beside the files) ============ */
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/schibsted-grotesk/schibsted-grotesk-latin-wght.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader/newsreader-latin-opsz72-wght300-400.woff2') format('woff2');
  font-weight:300 400;font-style:normal;font-display:swap}
/* Metric-matched stand-ins, so text keeps its size and line breaks while the real face loads. */
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial'),local('ArialMT');font-weight:400 550;
  size-adjust:105.24%;ascent-override:92.79%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Schibsted Grotesk Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:551 900;
  size-adjust:105.24%;ascent-override:92.79%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Newsreader Fallback';src:local('Georgia');font-weight:300 400;
  size-adjust:98.14%;ascent-override:74.89%;descent-override:27%;line-gap-override:0%}

/* ============ 1. Tokens ============ */
:root{
  color-scheme:light;

  /* jade: the one brand colour. Green = the main action. */
  --mc-jade-950:#04261d; --mc-jade-900:#063a2c; --mc-jade-800:#085540; --mc-jade-700:#0b6b50; --mc-jade-600:#0e7f5e;
  --mc-jade-500:#14a17a; --mc-jade-300:#7fd6b2; --mc-jade-200:#bdebd6; --mc-jade-100:#dcf4e8; --mc-jade-50:#eef8f3;
  /* quiet neutrals around the workspace */
  --mc-white:#ffffff; --mc-wash:#f4f8f6; --mc-line:#dfe8e3; --mc-line-2:#c9d6cf; --mc-edge:#7d938a;
  --mc-ink:#0d241c; --mc-ink-2:#45564f; --mc-ink-3:#5f6f68;
  /* states */
  --mc-red:#b42318; --mc-red-800:#8a1a12; --mc-red-50:#fdeeec; --mc-red-line:#f1c2bd;
  --mc-amber-ink:#7a4b00; --mc-amber-50:#fff4dc; --mc-amber-line:#ecd29c;
  /* VOID: the check's own paper blue (direction B), for the free VOID-check feature only (DESIGN.md names) */
  --mc-void-bg:#e4edf5; --mc-void-ink:#234a6b; --mc-void-text:#34546f; --mc-void-ink-hover:#1a3a55; --mc-void-line:#d3e1ee;
  /* the preview overlay that shows where the field being typed prints (never printed) */
  --mc-hl:rgba(20,161,122,.13); --mc-hl-line:#0e7f5e; --mc-hl-halo:rgba(20,161,122,.18); --mc-hl-todo:rgba(20,161,122,.08);
  /* the check paper, for the small drawn check chip (from check.css .paper) */
  --mc-paper-1:#e9f1f8; --mc-paper-2:#f4f8fb; --mc-paper-edge:#b9c9d6; --mc-paper-ink:#273b4a;
  --mc-check-ink:#111111;   /* the check's own ink (check.css); only the check host uses it */
  /* on dark and jade grounds */
  --mc-on-dark:#ffffff;
  --mc-pill-bg:rgba(3,34,25,.72); --mc-pill-bg-hover:rgba(3,34,25,.88); --mc-pill-line:rgba(255,255,255,.55);
  /* the lit stage (landing hero only, GATE1 #4) */
  --mc-stage:radial-gradient(48% 70% at 64% 46%,rgba(214,255,236,.58),rgba(214,255,236,0) 72%),linear-gradient(152deg,#159b73 0%,#0d7757 36%,#08583f 68%,#053b2b 100%);
  --mc-stage-edge:rgba(255,255,255,.08);
  /* browser surfaces */
  --mc-focus:var(--mc-jade-700);
  --mc-scroll-thumb:#a3b5ad;
  --mc-tap:rgba(11,107,80,.14);
  --mc-backdrop:rgba(6,24,18,.42);

  /* type */
  --mc-sans:'Schibsted Grotesk','Schibsted Grotesk Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mc-serif:'Newsreader','Newsreader Fallback',Georgia,'Times New Roman',serif;
  --mc-fs-display:clamp(44px,5.3vw,76px);    /* the public H1 (phone 44) */
  --mc-fs-h2:clamp(32px,3.4vw,48px);
  --mc-fs-h2-serif:clamp(34px,3.6vw,52px);
  --mc-fs-h3:21px;
  --mc-fs-title:32px;
  --mc-fs-lead:clamp(18px,1.35vw,20px);
  --mc-fs-body:17px;
  --mc-fs-app:16px;
  --mc-fs-label:15px;
  --mc-fs-small:15px;
  --mc-fs-hint:14.5px;
  --mc-fs-price:56px;
  --mc-fs-pack:40px;
  --mc-w-text:400; --mc-w-medium:500; --mc-w-nav:550; --mc-w-label:600; --mc-w-head:650; --mc-w-display:700;
  --mc-serif-wght-display:380;   /* Newsreader on the home H1 */
  --mc-serif-wght:400;           /* Newsreader on the VOID and closing headings */

  /* space: a 4px base, named in steps of 4 (--mc-sp-6 = 24px) */
  --mc-sp-1:4px; --mc-sp-2:8px; --mc-sp-3:12px; --mc-sp-4:16px; --mc-sp-5:20px; --mc-sp-6:24px; --mc-sp-7:28px; --mc-sp-8:32px;
  --mc-sp-10:40px; --mc-sp-12:48px; --mc-sp-14:56px; --mc-sp-16:64px; --mc-sp-20:80px; --mc-sp-24:96px; --mc-sp-32:128px;
  --mc-section-y:96px;          /* between public sections; tightened from A's 128 per GATE1 #8 */
  --mc-content:1200px;
  --mc-gutter:24px;
  --mc-header-h:72px;
  --mc-appbar-h:68px;

  /* shape: radii by rank */
  --mc-r-stage:28px; --mc-r-panel:20px; --mc-r-menu:14px; --mc-r-ctl:12px; --mc-r-chip:9px; --mc-r-sm:6px; --mc-r-paper:0; --mc-r-round:999px;
  /* sizes */
  --mc-h-btn:52px; --mc-h-btn-sm:44px; --mc-h-input:50px; --mc-h-row:60px; --mc-target:44px;

  /* depth: shadows carry an offset and a soft blur; the paper's is the one real shadow */
  --mc-shadow-paper:0 1px 1px rgba(3,40,28,.16),0 14px 26px -10px rgba(3,40,28,.32),0 46px 70px -34px rgba(3,40,28,.42);   /* lifted: landing hero only */
  --mc-shadow-paper-soft:0 1px 2px rgba(3,40,28,.14),0 12px 28px -16px rgba(3,40,28,.32);   /* checks in the workspace */
  --mc-shadow-pop:0 1px 2px rgba(3,40,28,.12),0 16px 40px -12px rgba(3,40,28,.35);
  --mc-shadow-chip:0 1px 2px rgba(3,40,28,.18),0 0 0 1px rgba(3,40,28,.06);
  --mc-shadow-label:0 1px 2px rgba(3,40,28,.25);
  --mc-shadow-drop:0 18px 30px -18px rgba(3,40,28,.35);

  /* motion: colour 120ms, chip 180ms, menus and sheets 200ms fade + 8px, typed fields 160ms */
  --mc-ease:cubic-bezier(.16,1,.3,1);
  --mc-t-press:120ms; --mc-t-pulse:150ms; --mc-t-fade:160ms; --mc-t-chip:180ms; --mc-t-pop:200ms; --mc-t-out:400ms;
  --mc-move:8px;

  --mc-z-sticky:20; --mc-z-menu:40;
}
@media (max-width:640px){
  :root{--mc-gutter:16px;--mc-header-h:60px;--mc-section-y:64px;--mc-fs-title:26px}
}
@media (prefers-reduced-motion:reduce){
  :root{--mc-move:0px}
}

/* ============ 2. Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;accent-color:var(--mc-jade-700);caret-color:var(--mc-jade-700);
  scrollbar-color:var(--mc-scroll-thumb) transparent;-webkit-tap-highlight-color:var(--mc-tap);
  scroll-padding-top:calc(var(--mc-header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--mc-white);color:var(--mc-ink);font:var(--mc-w-text) var(--mc-fs-body)/1.6 var(--mc-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.mc-app{background:var(--mc-wash);font-size:var(--mc-fs-app);line-height:1.5}
h1,h2,h3,h4,h5,h6{margin:0;color:inherit;font-weight:var(--mc-w-head);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
p,figure,blockquote,dl,dd{margin:0}
:where(ul[class],ol[class]){margin:0;padding:0;list-style:none}   /* zero specificity: any mc- class wins */
b,strong{font-weight:var(--mc-w-head)}
a{color:var(--mc-jade-700);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:currentColor;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:where(:hover){color:var(--mc-jade-800);text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--mc-focus);outline-offset:3px}
::selection{background:var(--mc-jade-200);color:var(--mc-jade-950)}
::placeholder{color:var(--mc-ink-3);opacity:1}
[hidden]{display:none!important}
/* Amounts: proportional lining figures, right-aligned in columns. Never tabular-nums on text with a
   comma, point or colon: Schibsted's tabular comma and point are a full figure wide ("$1 , 845 . 50"). */
.mc-num{font-variant-numeric:lining-nums proportional-nums}
.mc-tnum{font-variant-numeric:lining-nums tabular-nums}   /* digits only: check numbers, codes */
.mc-nw{white-space:nowrap}
.mc-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ 3. Type ============ */
.mc-display{font-size:var(--mc-fs-display);line-height:.98;font-weight:var(--mc-w-display);letter-spacing:-.03em;text-wrap:balance}
.mc-h2{font-size:var(--mc-fs-h2);line-height:1.05;font-weight:var(--mc-w-head);letter-spacing:-.028em;text-wrap:balance}
.mc-h3{font-size:var(--mc-fs-h3);line-height:1.25;font-weight:var(--mc-w-head);letter-spacing:-.01em}
.mc-title{font-size:var(--mc-fs-title);line-height:1.15;font-weight:var(--mc-w-head);letter-spacing:-.025em}
.mc-lead{font-size:var(--mc-fs-lead);line-height:1.5;color:var(--mc-ink-2);max-width:56ch;text-wrap:pretty}
.mc-help{margin-top:var(--mc-sp-2);color:var(--mc-ink-2);max-width:60ch;text-wrap:pretty}
.mc-small{font-size:var(--mc-fs-small);line-height:1.5;color:var(--mc-ink-3)}
/* Newsreader: three public headlines only (DESIGN.md 11.1): the home H1, the VOID heading, the closing
   heading. Never in the app, forms, buttons, tables, prices or cards. */
.mc-serif{font-family:var(--mc-serif);font-weight:var(--mc-serif-wght);font-variant-numeric:proportional-nums;letter-spacing:-.012em}
.mc-display.mc-serif{font-weight:var(--mc-serif-wght-display);line-height:1;letter-spacing:-.02em}
.mc-h2.mc-serif{font-size:var(--mc-fs-h2-serif);line-height:1.06}
@media (max-width:640px){
  .mc-display.mc-serif{line-height:1.02}
}

/* ============ 4. Layout primitives ============ */
.mc-wrap{width:100%;max-width:calc(var(--mc-content) + 2 * var(--mc-gutter));margin-inline:auto;padding-inline:var(--mc-gutter)}
.mc-section{padding-block:var(--mc-section-y)}
/* section head: title in columns 1-7, the side (lead, toggle) in 8-12, bottom-aligned */
.mc-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mc-sp-6);align-items:end;margin-bottom:var(--mc-sp-12)}
.mc-head > :first-child{grid-column:1 / span 7}
.mc-head > :nth-child(2){grid-column:8 / span 5}
@media (max-width:900px){
  .mc-head{display:block}
  .mc-head > :nth-child(2){margin-top:var(--mc-sp-4)}
}
.mc-rule{height:0;margin:var(--mc-sp-6) 0;border:0;border-top:1px solid var(--mc-line)}

/* ============ 5. Icons and brand ============ */
.mc-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:-.25em}
.mc-icon--sm{width:16px;height:16px}
.mc-icon--lg{width:22px;height:22px}

.mc-brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--mc-target);color:var(--mc-ink);font-weight:var(--mc-w-display);
  font-size:19px;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.mc-brand:hover{color:var(--mc-ink)}
.mc-mark{width:30px;height:30px;flex:none}
.mc-mark__tile{fill:var(--mc-jade-700)}
.mc-mark__card{fill:var(--mc-white)}
.mc-mark__line{fill:none;stroke-width:1.6;stroke-linecap:round}
.mc-mark__line--a{stroke:var(--mc-jade-300)}
.mc-mark__line--b{stroke:var(--mc-jade-700)}
.mc-mark__sig{fill:none;stroke:var(--mc-jade-700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============ 6. Buttons and links ============ */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--mc-h-btn);padding:10px 24px;
  border:1px solid transparent;border-radius:var(--mc-r-ctl);background:none;color:var(--mc-ink);
  font:var(--mc-w-label) 17px/1.15 var(--mc-sans);letter-spacing:-.005em;text-align:center;text-decoration:none;text-wrap:balance;
  cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background-color var(--mc-t-press) var(--mc-ease),border-color var(--mc-t-press) var(--mc-ease),color var(--mc-t-press) var(--mc-ease)}
.mc-btn .mc-icon{width:20px;height:20px}
.mc-btn--primary{background:var(--mc-jade-700);color:var(--mc-white)}
.mc-btn--quiet{background:var(--mc-white);border-color:var(--mc-edge);color:var(--mc-ink)}
.mc-btn--text{padding-inline:12px;color:var(--mc-ink-2)}
.mc-btn--onjade{background:var(--mc-white);color:var(--mc-jade-800)}
.mc-btn--void{background:var(--mc-void-ink);color:var(--mc-white)}
.mc-btn--danger{background:var(--mc-red);color:var(--mc-white)}
.mc-btn--sm{min-height:var(--mc-h-btn-sm);padding:8px 18px;font-size:16px}
.mc-btn--block{display:flex;width:100%}
@media (hover:hover){
  .mc-btn--primary:hover{background:var(--mc-jade-800);color:var(--mc-white)}
  .mc-btn--quiet:hover{border-color:var(--mc-ink);color:var(--mc-ink)}
  .mc-btn--text:hover{background:var(--mc-wash);color:var(--mc-ink)}
  .mc-btn--onjade:hover{background:var(--mc-jade-50);color:var(--mc-jade-900)}
  .mc-btn--void:hover{background:var(--mc-void-ink-hover);color:var(--mc-white)}
  .mc-btn--danger:hover{background:var(--mc-red-800);color:var(--mc-white)}
}
.mc-btn--primary:active{background:var(--mc-jade-900)}
.mc-btn--quiet:active,.mc-btn--text:active{background:var(--mc-line)}
.mc-btn--onjade:active{background:var(--mc-jade-100)}
.mc-btn--void:active{background:var(--mc-void-ink-hover)}
.mc-btn--danger:active{background:var(--mc-red-800)}
/* Loading keeps the words ("Printing...") and adds a ring; the page ignores clicks meanwhile. */
.mc-btn.is-loading{pointer-events:none}
.mc-btn:disabled,.mc-btn[aria-disabled="true"]{background:var(--mc-line);border-color:var(--mc-line);color:var(--mc-ink-3);cursor:not-allowed}
.mc-btn--text:disabled,.mc-btn--text[aria-disabled="true"]{background:none;border-color:transparent}
.mc-spinner{display:inline-block;width:18px;height:18px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:mc-spin .8s linear infinite}

/* icon-only button: More, close, menu */
.mc-iconbtn{display:inline-grid;place-items:center;width:var(--mc-target);height:var(--mc-target);flex:none;padding:0;border:0;border-radius:10px;
  background:none;color:var(--mc-ink-2);cursor:pointer;transition:background-color var(--mc-t-press) var(--mc-ease),color var(--mc-t-press) var(--mc-ease)}
@media (hover:hover){.mc-iconbtn:hover{background:var(--mc-wash);color:var(--mc-ink)}}
.mc-iconbtn:active{background:var(--mc-line)}
.mc-iconbtn[aria-expanded="true"]{background:var(--mc-wash);box-shadow:inset 0 0 0 1px var(--mc-line-2);color:var(--mc-ink)}
.mc-iconbtn:disabled{background:none;color:var(--mc-line-2);cursor:not-allowed}

/* a standalone link ("See pricing") and a button that reads as a link ("Change") */
.mc-link{font-weight:var(--mc-w-label);color:var(--mc-jade-700)}
.mc-linkbtn{position:relative;display:inline;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:var(--mc-w-label);
  color:var(--mc-jade-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);cursor:pointer}
.mc-linkbtn::after{content:'';position:absolute;inset:-12px -6px}   /* a 44px target without changing the line */
@media (hover:hover){.mc-linkbtn:hover{color:var(--mc-jade-800);text-decoration-color:currentColor}}
.mc-linkbtn:focus-visible{outline-offset:2px;border-radius:2px}
.mc-back{display:inline-flex;align-items:center;gap:6px;min-height:var(--mc-target);margin-left:-4px;color:var(--mc-ink-2);font-weight:var(--mc-w-nav);text-decoration:none}
.mc-back:hover{color:var(--mc-ink);text-decoration:underline}

/* ============ 7. Forms ============ */
.mc-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mc-sp-5)}   /* a stack of fields, 20px apart; never wider than its box */
.mc-fieldrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mc-sp-4)}
.mc-field{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mc-sp-2);min-width:0}
.mc-label{display:block;font-size:var(--mc-fs-label);font-weight:var(--mc-w-label);line-height:1.3;color:var(--mc-ink)}
.mc-optional{font-weight:var(--mc-w-text);color:var(--mc-ink-3)}
.mc-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mc-sp-4)}
.mc-labelrow a{font-size:var(--mc-fs-small);font-weight:var(--mc-w-label)}
.mc-fieldset{min-width:0;margin:0;padding:0;border:0}
.mc-fieldset > legend{padding:0;margin-bottom:var(--mc-sp-2)}

.mc-input{display:block;width:100%;min-width:0;min-height:var(--mc-h-input);padding:12px 16px;border:1px solid var(--mc-edge);border-radius:var(--mc-r-ctl);
  background:var(--mc-white);color:var(--mc-ink);font:var(--mc-w-medium) 17px/1.3 var(--mc-sans);
  transition:border-color var(--mc-t-press) var(--mc-ease),box-shadow var(--mc-t-press) var(--mc-ease)}
.mc-input::placeholder{font-weight:var(--mc-w-text)}
@media (hover:hover){.mc-input:hover{border-color:var(--mc-ink-3)}}
.mc-input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--mc-jade-700);
  box-shadow:inset 0 0 0 1px var(--mc-jade-700),0 0 0 3px var(--mc-jade-100)}
.mc-input[aria-invalid="true"]{border-color:var(--mc-red);box-shadow:0 0 0 3px var(--mc-red-50)}
.mc-input[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1px var(--mc-red),0 0 0 3px var(--mc-red-50)}
.mc-input:disabled{border-color:var(--mc-line-2);background:var(--mc-wash);color:var(--mc-ink-3);-webkit-text-fill-color:var(--mc-ink-3);cursor:not-allowed}
.mc-input[readonly]{background:var(--mc-wash)}
.mc-input:-webkit-autofill{-webkit-text-fill-color:var(--mc-ink);box-shadow:inset 0 0 0 100px var(--mc-jade-50)}
.mc-input:-webkit-autofill:focus{box-shadow:inset 0 0 0 1px var(--mc-jade-700),0 0 0 3px var(--mc-jade-100),inset 0 0 0 100px var(--mc-jade-50)}
textarea.mc-input{min-height:96px;resize:vertical;line-height:1.45}
.mc-input[type="search"]{-webkit-appearance:none;appearance:none}
/* the 6-digit sign-in code (digits only, so tabular figures are safe) */
.mc-input--code{max-width:280px;padding-left:calc(16px + .3em);font-size:26px;font-weight:var(--mc-w-label);letter-spacing:.3em;text-align:center;font-variant-numeric:lining-nums tabular-nums}

.mc-hint{font-size:var(--mc-fs-hint);line-height:1.45;color:var(--mc-ink-2);text-wrap:pretty}
.mc-hint--good{display:flex;align-items:flex-start;gap:var(--mc-sp-2);color:var(--mc-jade-700);font-weight:var(--mc-w-label)}
.mc-error{display:flex;align-items:flex-start;gap:var(--mc-sp-2);font-size:var(--mc-fs-hint);line-height:1.45;color:var(--mc-red);font-weight:var(--mc-w-label);text-wrap:pretty}
.mc-hint .mc-icon,.mc-error .mc-icon{width:16px;height:16px;margin-top:2px}

/* affixes: "$" before an amount, an icon before a search, "Show" after a password */
.mc-affix{position:relative;display:block}
.mc-affix__pre{position:absolute;left:16px;top:50%;display:inline-flex;transform:translateY(-50%);color:var(--mc-ink-2);font-size:17px;font-weight:var(--mc-w-medium);pointer-events:none}
.mc-affix--pre .mc-input{padding-left:34px}
.mc-affix--icon .mc-input{padding-left:46px}
.mc-affix__btn{position:absolute;right:4px;top:50%;min-height:42px;padding:0 12px;transform:translateY(-50%);border:0;border-radius:var(--mc-r-chip);
  background:none;color:var(--mc-jade-700);font-size:var(--mc-fs-small);font-weight:var(--mc-w-label);cursor:pointer}
@media (hover:hover){.mc-affix__btn:hover{background:var(--mc-wash)}}
.mc-affix--btn .mc-input{padding-right:80px}

/* select: the native control with a drawn chevron */
.mc-select{position:relative;display:block}
.mc-select .mc-input{padding-right:44px;-webkit-appearance:none;appearance:none;cursor:pointer}
.mc-select::after{content:'';position:absolute;right:19px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.8px solid var(--mc-ink-2);
  border-bottom:1.8px solid var(--mc-ink-2);transform:rotate(45deg);pointer-events:none}
.mc-select:has(select:disabled)::after{border-color:var(--mc-ink-3)}

/* checkbox and radio: the whole label is the 44px target */
.mc-check{display:flex;align-items:flex-start;gap:var(--mc-sp-3);min-height:var(--mc-target);padding:11px 0;color:var(--mc-ink);font-size:16px;line-height:1.4;cursor:pointer}
.mc-check input{flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--mc-edge);border-radius:var(--mc-r-sm);
  background:var(--mc-white) 50% 50% / 14px 14px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer;
  transition:background-color var(--mc-t-press) var(--mc-ease),border-color var(--mc-t-press) var(--mc-ease)}
.mc-check input[type="radio"]{border-radius:50%}
.mc-check input:checked{border-color:var(--mc-jade-700);background-color:var(--mc-jade-700)}
.mc-check input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.3l2.9 2.9L11.4 4.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mc-check input[type="radio"]:checked{box-shadow:inset 0 0 0 4.5px var(--mc-white)}
@media (hover:hover){.mc-check:hover input:not(:checked):not(:disabled){border-color:var(--mc-ink)}}
.mc-check input[aria-invalid="true"]{border-color:var(--mc-red)}
.mc-check input:disabled{border-color:var(--mc-line-2);background-color:var(--mc-wash);cursor:not-allowed}
.mc-check input:disabled:checked{border-color:var(--mc-line-2);background-color:var(--mc-line-2)}
.mc-check:has(input:disabled){color:var(--mc-ink-3);cursor:not-allowed}
.mc-check__hint{display:block;margin-top:2px;font-size:var(--mc-fs-hint);color:var(--mc-ink-2)}

/* ============ 8. Segmented control (Check | Full sheet, Monthly | Yearly, check type) ============ */
/* Radios inside, so arrow keys move the choice with no script. Buttons with aria-pressed also work. */
.mc-seg{display:inline-flex;gap:2px;max-width:100%;padding:3px;border:1px solid var(--mc-line-2);border-radius:var(--mc-r-ctl);background:var(--mc-wash)}
.mc-seg--block{display:flex;width:100%}
.mc-seg--block > *{flex:1 1 0}
.mc-seg > label{position:relative;display:flex;min-width:0}
.mc-seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.mc-seg__opt{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:var(--mc-target);padding:0 16px;border:0;border-radius:var(--mc-r-chip);
  background:none;color:var(--mc-ink-2);font:var(--mc-w-label) 15px/1.2 var(--mc-sans);white-space:nowrap;cursor:pointer;
  transition:background-color var(--mc-t-chip) var(--mc-ease),color var(--mc-t-chip) var(--mc-ease),box-shadow var(--mc-t-chip) var(--mc-ease)}
@media (hover:hover){.mc-seg__opt:hover{color:var(--mc-ink)}}
/* a switch between views or periods (Check | Full sheet, Monthly | Yearly): the chosen side is ink */
.mc-seg input:checked + .mc-seg__opt,.mc-seg__opt[aria-pressed="true"]{background:var(--mc-ink);color:var(--mc-white)}
/* --soft: a choice inside a form (the check type in More options): a white chip */
.mc-seg--soft input:checked + .mc-seg__opt,.mc-seg--soft .mc-seg__opt[aria-pressed="true"]{background:var(--mc-white);color:var(--mc-ink);box-shadow:var(--mc-shadow-chip)}
.mc-seg--white{background:var(--mc-white)}   /* on a wash ground (the Write preview) */
.mc-seg input:focus-visible + .mc-seg__opt{outline:2px solid var(--mc-focus);outline-offset:2px}
.mc-seg__opt:focus-visible{outline-offset:2px}
.mc-seg input:disabled + .mc-seg__opt,.mc-seg__opt:disabled{color:var(--mc-ink-3);cursor:not-allowed}
.mc-seg__note{font-weight:var(--mc-w-medium);color:var(--mc-jade-700)}
.mc-seg input:checked + .mc-seg__opt .mc-seg__note,.mc-seg__opt[aria-pressed="true"] .mc-seg__note{color:var(--mc-jade-200)}
.mc-seg--soft input:checked + .mc-seg__opt .mc-seg__note,.mc-seg--soft .mc-seg__opt[aria-pressed="true"] .mc-seg__note{color:var(--mc-jade-700)}

/* ============ 8b. Tabs: filter one list (the kind of document on Checks) ============ */
/* Radios inside, so arrow keys move the choice with no script. The chosen tab is ink with a jade underline;
   a long row scrolls sideways inside itself on a phone. */
.mc-tabs{display:flex;gap:var(--mc-sp-1);min-width:0;max-width:100%;overflow-x:auto;box-shadow:inset 0 -1px 0 var(--mc-line);scrollbar-width:none}
.mc-tabs::-webkit-scrollbar{display:none}
.mc-tab{position:relative;display:flex;flex:none}
.mc-tab > input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.mc-tab > span{position:relative;display:inline-flex;align-items:center;min-height:var(--mc-target);padding:0 14px;color:var(--mc-ink-2);
  font-weight:var(--mc-w-nav);white-space:nowrap;cursor:pointer;transition:color var(--mc-t-press) var(--mc-ease)}
@media (hover:hover){.mc-tab > span:hover{color:var(--mc-ink)}}
.mc-tab > input:checked + span{color:var(--mc-ink);font-weight:var(--mc-w-head)}
.mc-tab > input:checked + span::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--mc-jade-700)}
.mc-tab > input:focus-visible + span{outline:2px solid var(--mc-focus);outline-offset:-4px;border-radius:var(--mc-r-chip)}
.mc-tab > input:disabled + span{color:var(--mc-ink-3);cursor:not-allowed}
@media (max-width:640px){
  .mc-tab > span{padding-inline:11px}
  .mc-tab > input:checked + span::after{left:11px;right:11px}
}

/* ============ 9. "Change": a fact with an action (date and check number, no More options needed) ============ */
/* "Change" opens a small sheet (.mc-modal.mc-modal--sm) with Check number, Date and Save. */
.mc-change-line{font-size:var(--mc-fs-small);line-height:1.5;color:var(--mc-ink-2)}
.mc-change-line b{color:var(--mc-ink);font-weight:var(--mc-w-label)}

/* ============ 10. Disclosure ("More options") ============ */
/* The head is a button with aria-expanded (the page shows/hides the body and stores pac.advanced).
   A native details/summary gets the same look. */
.mc-disclosure{border:1px solid var(--mc-line-2);border-radius:var(--mc-r-ctl);background:var(--mc-white)}
.mc-disclosure__head,.mc-disclosure > summary{display:flex;align-items:center;gap:var(--mc-sp-3);width:100%;min-height:56px;padding:8px 16px;border:0;
  border-radius:inherit;background:none;color:var(--mc-ink);font:inherit;text-align:left;list-style:none;cursor:pointer}
.mc-disclosure > summary::-webkit-details-marker{display:none}
.mc-disclosure__title{flex:none;font-weight:var(--mc-w-head)}
.mc-disclosure__hint{flex:1;min-width:0;overflow:hidden;color:var(--mc-ink-3);font-size:var(--mc-fs-hint);white-space:nowrap;text-overflow:ellipsis}
.mc-disclosure__chev{width:18px;height:18px;flex:none;margin-left:auto;color:var(--mc-ink-2);transition:transform var(--mc-t-pop) var(--mc-ease)}
@media (hover:hover){.mc-disclosure__head:hover .mc-disclosure__title,.mc-disclosure > summary:hover .mc-disclosure__title{text-decoration:underline;text-underline-offset:.18em}}
.mc-disclosure__head[aria-expanded="true"] .mc-disclosure__chev,.mc-disclosure[open] .mc-disclosure__chev{transform:rotate(180deg)}
.mc-disclosure__body{padding:var(--mc-sp-4);border-top:1px solid var(--mc-line);animation:mc-fade var(--mc-t-pop) var(--mc-ease)}
@media (max-width:640px){.mc-disclosure__hint{display:none}}

/* ============ 11. Rows and groups (Apple-Settings style; the "From" account picker) ============ */
.mc-group{border:1px solid var(--mc-line);border-radius:var(--mc-r-menu);background:var(--mc-white)}
/* nothing is clipped (a row's More menu opens past the frame): the end rows carry the rounded corners */
:where(.mc-group > .mc-row:first-child,.mc-group > :first-child > .mc-row){border-top-left-radius:calc(var(--mc-r-menu) - 1px);border-top-right-radius:calc(var(--mc-r-menu) - 1px)}
:where(.mc-group > .mc-row:last-child,.mc-group > :last-child > .mc-row){border-bottom-left-radius:calc(var(--mc-r-menu) - 1px);border-bottom-right-radius:calc(var(--mc-r-menu) - 1px)}
.mc-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:var(--mc-h-row);padding:10px 16px;border:0;background:none;
  color:var(--mc-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--mc-t-press) var(--mc-ease),border-color var(--mc-t-press) var(--mc-ease)}
.mc-group > .mc-row + .mc-row::before,.mc-group > * + * > .mc-row::before{content:'';position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--mc-line)}
.mc-group--icons > .mc-row + .mc-row::before,.mc-group--icons > * + * > .mc-row::before{left:52px}
@media (hover:hover){.mc-row:hover{background:var(--mc-wash);color:var(--mc-ink)}}
.mc-row:active{background:var(--mc-line)}
.mc-group .mc-row:focus-visible{outline-offset:-3px}
.mc-row__icon{width:22px;height:22px;flex:none;color:var(--mc-jade-700)}
.mc-row__text{flex:1;min-width:0}
.mc-row__title{display:block;font-weight:var(--mc-w-label);overflow-wrap:anywhere}
.mc-row__sub{display:block;font-size:var(--mc-fs-hint);color:var(--mc-ink-2);overflow-wrap:anywhere}
.mc-row__value{margin-left:auto;color:var(--mc-ink-2);font-size:var(--mc-fs-small);text-align:right}
.mc-row__chev{width:18px;height:18px;flex:none;color:var(--mc-ink-3)}
@media (max-width:640px){   /* on a phone a row's value moves under its title instead of squeezing it */
  .mc-row:has(> .mc-row__value){flex-wrap:wrap;row-gap:2px}
  .mc-row:has(> .mc-row__value) > .mc-row__chev{order:2}
  .mc-row > .mc-row__value{order:3;flex-basis:100%;margin-left:0;font-size:var(--mc-fs-hint);text-align:left}
  .mc-row:has(> .mc-row__icon) > .mc-row__value{padding-left:36px}
}
.mc-row--danger .mc-row__title{color:var(--mc-red)}
.mc-row--static{cursor:default}
.mc-row--static:hover,.mc-row--static:active{background:none}
/* a row that stands alone as a control: the "From" checking-account picker */
.mc-row--box{min-height:64px;border:1px solid var(--mc-edge);border-radius:var(--mc-r-ctl);background:var(--mc-white)}
@media (hover:hover){.mc-row--box:hover{border-color:var(--mc-ink);background:var(--mc-white)}}
.mc-row--box.mc-row--static{border-color:var(--mc-line-2)}
/* --flat: rows inside another box (More options): no frame, a hairline above each row */
.mc-group--flat{border:0;border-top:1px solid var(--mc-line);border-radius:0;background:none}
.mc-group--flat .mc-row{min-height:52px;padding:10px 0;border-radius:0}
.mc-group--flat > .mc-row + .mc-row::before,.mc-group--flat > * + * > .mc-row::before{left:0}
@media (hover:hover){.mc-group--flat .mc-row:hover{background:none}.mc-group--flat .mc-row:hover .mc-row__title{text-decoration:underline;text-underline-offset:.18em}}
.mc-group--flat .mc-row:active{background:none}
.mc-group--flat .mc-row:focus-visible{outline-offset:2px}

/* the "From" row at the top of Write a check (GATE1 #15): nickname, bank and last four; it opens the
   list of checking accounts (with "Add a checking account"). Shown even with one account. */
.mc-from{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 14px;border:1px solid var(--mc-line-2);border-radius:var(--mc-r-ctl);
  background:var(--mc-wash);color:var(--mc-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--mc-t-press) var(--mc-ease)}
@media (hover:hover){.mc-from:hover{border-color:var(--mc-edge)}}
.mc-from:active{background:var(--mc-line)}
.mc-from__label{flex:none;width:40px;color:var(--mc-ink-2);font-size:13.5px;font-weight:var(--mc-w-label)}
.mc-from__text{flex:1;min-width:0}
.mc-from__name{display:block;overflow:hidden;font-weight:var(--mc-w-head);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.mc-from__meta{display:block;overflow:hidden;color:var(--mc-ink-2);font-size:var(--mc-fs-hint);text-overflow:ellipsis;white-space:nowrap}
.mc-from .mc-icon{color:var(--mc-ink-2)}
@media (max-width:640px){
  .mc-from{min-height:56px;padding:10px 12px}
  .mc-from__label{display:none}
}

/* the drawn check chip that marks a checking account */
.mc-chip-ck{position:relative;flex:none;width:44px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--mc-paper-1),var(--mc-paper-2));box-shadow:inset 0 0 0 1px var(--mc-paper-edge)}
.mc-chip-ck::after{content:'';position:absolute;left:6px;right:14px;bottom:4px;height:2px;background:repeating-linear-gradient(90deg,var(--mc-paper-ink) 0 3px,transparent 3px 5px)}

/* ============ 12. Panels and surfaces ============ */
.mc-panel{border:1px solid var(--mc-line);border-radius:var(--mc-r-panel);background:var(--mc-white);padding:var(--mc-sp-8) 36px}
.mc-panel--wash{border-color:transparent;background:var(--mc-wash)}
.mc-panel--flush{padding:0}
.mc-panel__title{font-size:var(--mc-fs-h3);line-height:1.2;font-weight:var(--mc-w-head);letter-spacing:-.01em}
.mc-panel__help{margin-top:6px;color:var(--mc-ink-2);max-width:60ch;text-wrap:pretty}
.mc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mc-sp-3) var(--mc-sp-4);margin-top:var(--mc-sp-7);padding-top:var(--mc-sp-6);border-top:1px solid var(--mc-line)}
/* the neutral workspace a check preview sits on (no glow, no line-work: GATE1 #4) */
.mc-preview{position:relative;border-radius:var(--mc-r-panel);background:var(--mc-wash);padding:var(--mc-sp-8) var(--mc-sp-12)}
.mc-preview__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mc-sp-3) var(--mc-sp-4);margin-bottom:var(--mc-sp-6)}
.mc-preview__note,.mc-preview__cap{color:var(--mc-ink-2);font-size:var(--mc-fs-hint)}
.mc-preview__cap{margin-top:var(--mc-sp-5)}
/* the VOID feature's surface: B's paper blue (landing section and the VOID page, GATE1 #3) */
.mc-void{--mc-focus:var(--mc-void-ink);border-radius:var(--mc-r-stage);background:var(--mc-void-bg);color:var(--mc-void-ink)}
.mc-void__title{color:var(--mc-void-ink)}
.mc-void__text{color:var(--mc-void-text)}
.mc-void a:not([class]){color:var(--mc-void-ink)}
.mc-void a:not([class]):hover{color:var(--mc-void-ink-hover)}
/* any jade or dark ground (the landing stage, the closing band): white focus rings */
.mc-on-jade{--mc-focus:var(--mc-on-dark)}
@media (max-width:640px){
  .mc-panel{padding:var(--mc-sp-6) var(--mc-sp-5)}
  .mc-panel--flush{padding:0}
  .mc-preview{padding:var(--mc-sp-4);border-radius:var(--mc-r-menu)}
  .mc-void{border-radius:22px}
}

/* ============ 13. The check host and the preview overlay ============ */
/* Hosts the real PACCheck render. Resets everything the check could inherit, so no page can move a
   field: it inherits exactly what it did when accepted on paper (site/app body: 14px/1.45). */
.mc-ck{position:relative;width:100%;color:var(--mc-check-ink);font:400 14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  letter-spacing:normal;word-spacing:normal;text-align:left;text-indent:0;text-transform:none;text-shadow:none;text-wrap:wrap;
  font-feature-settings:normal;font-variation-settings:normal;font-kerning:auto;font-optical-sizing:auto;text-rendering:auto;
  white-space:normal;hyphens:manual;overflow-wrap:normal;word-break:normal;direction:ltr;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.mc-ck{aspect-ratio:8.5 / 3.5}                 /* the host reserves the check's shape: no layout shift while it renders */
.mc-ck--sheet{aspect-ratio:8.5 / 11}
.mc-ck__scale{position:absolute;left:0;top:0;width:8.5in;height:3.5in;transform-origin:0 0;transform:scale(var(--mc-ck-s,1))}
.mc-ck--sheet .mc-ck__scale{height:11in}
.mc-ck--lifted .mc-ck__scale{box-shadow:var(--mc-shadow-paper)}        /* the landing hero only */
.mc-ck--soft .mc-ck__scale{box-shadow:var(--mc-shadow-paper-soft)}     /* every check in the workspace */
.mc-ck .sheet{margin:0;box-shadow:none}
/* overlay that teaches the form (GATE1 #20): sits above the check, never part of it, never printed */
.mc-spots{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity var(--mc-t-out) var(--mc-ease)}
.mc-spots.is-off{opacity:0}
.mc-spot{position:absolute;border-radius:5px;background:var(--mc-hl);box-shadow:0 0 0 2px var(--mc-hl-line);
  transition:box-shadow var(--mc-t-pulse) var(--mc-ease),opacity var(--mc-t-pulse) var(--mc-ease)}
.mc-spot.is-emph{box-shadow:0 0 0 2px var(--mc-hl-line),0 0 0 7px var(--mc-hl-halo)}   /* the amount: figures and words pulse together */
.mc-spot--todo{border:1.5px dashed var(--mc-jade-600);border-radius:4px;background:var(--mc-hl-todo);box-shadow:none}
.mc-spot__label{position:absolute;left:-2px;bottom:calc(100% + 7px);display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:5px;
  background:var(--mc-hl-line);color:var(--mc-white);font:var(--mc-w-label) 12.5px/1 var(--mc-sans);white-space:nowrap}
.mc-spot__label--todo{padding:6px 8px;border-radius:var(--mc-r-sm);background:var(--mc-white);box-shadow:0 0 0 1px var(--mc-line-2),var(--mc-shadow-label);color:var(--mc-jade-900);font-size:13px}
.mc-spot__label--below{top:calc(100% + 7px);bottom:auto}
.mc-spot__label--end{left:auto;right:-2px}
.mc-spot__label .mc-icon{width:14px;height:14px}
@media (max-width:640px){.mc-spot__label{display:none}}   /* phones: the rings, no tags */

/* ============ 14. Notices ============ */
.mc-notice{display:flex;align-items:flex-start;gap:var(--mc-sp-3);padding:14px 16px;border:1px solid var(--mc-line-2);border-radius:var(--mc-r-ctl);
  background:var(--mc-wash);color:var(--mc-ink);font-size:var(--mc-fs-small);line-height:1.5}
.mc-notice__icon{width:20px;height:20px;flex:none;margin-top:1px;color:var(--mc-ink-2)}
.mc-notice__body{flex:1;min-width:0;text-wrap:pretty}
.mc-notice__title{font-weight:var(--mc-w-head)}
.mc-notice__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mc-sp-2) var(--mc-sp-4);margin-top:var(--mc-sp-3)}
.mc-notice--info .mc-notice__icon{color:var(--mc-ink-2)}
.mc-notice--quiet{border-color:transparent}   /* a tip on wash, e.g. the print-window settings line */
.mc-notice--success{border-color:var(--mc-jade-200);background:var(--mc-jade-50)}
.mc-notice--success .mc-notice__icon,.mc-notice--success .mc-notice__title{color:var(--mc-jade-800)}
.mc-notice--warning{border-color:var(--mc-amber-line);background:var(--mc-amber-50)}
.mc-notice--warning .mc-notice__icon,.mc-notice--warning .mc-notice__title{color:var(--mc-amber-ink)}
.mc-notice--error{border-color:var(--mc-red-line);background:var(--mc-red-50)}
.mc-notice--error .mc-notice__icon,.mc-notice--error .mc-notice__title{color:var(--mc-red-800)}

/* ============ 15. Badges (document type, status) ============ */
.mc-badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 8px;border:1px solid var(--mc-line-2);border-radius:var(--mc-r-sm);
  background:var(--mc-white);color:var(--mc-ink-2);font:var(--mc-w-label) 13px/1.2 var(--mc-sans);white-space:nowrap;vertical-align:middle}
.mc-badge .mc-icon{width:14px;height:14px}
.mc-badge--jade{border-color:var(--mc-jade-200);background:var(--mc-jade-50);color:var(--mc-jade-800)}
.mc-badge--void{border-color:var(--mc-void-line);background:var(--mc-void-bg);color:var(--mc-void-ink)}
.mc-badge--red{border-color:var(--mc-red-line);background:var(--mc-red-50);color:var(--mc-red-800)}
.mc-badge--amber{border-color:var(--mc-amber-line);background:var(--mc-amber-50);color:var(--mc-amber-ink)}
/* status: a dot and a word (Checks: "Printed", "Marked void Oct 1") */
.mc-status{display:inline-flex;align-items:center;gap:7px;color:var(--mc-ink);font-size:var(--mc-fs-small);font-weight:550;white-space:nowrap}
.mc-status::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--mc-jade-600)}
.mc-status--void{color:var(--mc-red)}
.mc-status--void::before{background:var(--mc-red)}

/* the result after an action: an ink panel ("Check 001043 saved. ...", GATE1 #18) */
.mc-toast{--mc-focus:var(--mc-on-dark);display:flex;align-items:flex-start;gap:var(--mc-sp-3);padding:14px 16px;border-radius:var(--mc-r-ctl);
  background:var(--mc-ink);color:var(--mc-on-dark);font-size:var(--mc-fs-small);line-height:1.45}
.mc-toast__icon{width:20px;height:20px;flex:none;margin-top:1px;color:var(--mc-jade-300)}
.mc-toast__body{flex:1;min-width:0;text-wrap:pretty}
.mc-toast a,.mc-toast .mc-linkbtn{color:var(--mc-on-dark);font-weight:var(--mc-w-head)}
.mc-toast__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mc-sp-2) var(--mc-sp-4);margin-top:var(--mc-sp-3)}
.mc-toast--float{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--mc-z-menu);width:min(480px,calc(100% - 32px));
  box-shadow:var(--mc-shadow-pop);transform:translateX(-50%);animation:mc-toast-in var(--mc-t-pop) var(--mc-ease)}

/* ============ 16. Cost line: what Print costs and what happens (GATE1 #18) ============ */
.mc-cost{display:flex;align-items:center;gap:var(--mc-sp-3);color:var(--mc-ink);font-size:16px;font-weight:var(--mc-w-medium);line-height:1.4}
.mc-cost--out{color:var(--mc-red-800)}
.mc-conseq{margin-top:var(--mc-sp-2);color:var(--mc-ink-2);font-size:var(--mc-fs-hint);line-height:1.5;text-wrap:pretty}   /* what Print does */
.mc-tokens{display:flex;flex:none;gap:4px}
.mc-tokens > span{display:block;width:22px;height:10px;border-radius:2px;background:var(--mc-jade-700)}
.mc-tokens > span.is-use{background:repeating-linear-gradient(135deg,var(--mc-jade-700) 0 2px,var(--mc-jade-200) 2px 5px)}
.mc-tokens > span.is-off{background:var(--mc-line-2)}

/* ============ 17. Table with a next step on every row ============ */
.mc-table-wrap{border:1px solid var(--mc-line);border-radius:var(--mc-r-panel);background:var(--mc-white)}
.mc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--mc-fs-app);line-height:1.4}
.mc-table th,.mc-table td{padding:14px 12px;text-align:left;vertical-align:middle}
.mc-table th:first-child,.mc-table td:first-child{padding-left:20px}
.mc-table th:last-child,.mc-table td:last-child{padding-right:12px}
.mc-table thead th{padding-top:12px;padding-bottom:12px;background:var(--mc-wash);color:var(--mc-ink-2);font-size:14px;font-weight:var(--mc-w-label);white-space:nowrap}
.mc-table thead th:first-child{border-top-left-radius:calc(var(--mc-r-panel) - 1px)}
.mc-table thead th:last-child{border-top-right-radius:calc(var(--mc-r-panel) - 1px)}
.mc-table tbody td,.mc-table tbody th{border-top:1px solid var(--mc-line)}
.mc-table tbody th{font-weight:var(--mc-w-label)}
.mc-table .is-num{text-align:right;font-variant-numeric:lining-nums proportional-nums;white-space:nowrap}
.mc-table td.is-num{font-weight:var(--mc-w-head);font-size:17px}
.mc-table .mc-cell-sub{display:block;font-size:14.5px;color:var(--mc-ink-2)}
.mc-table .mc-cell-main b{display:block;font-weight:var(--mc-w-label);overflow-wrap:anywhere}
.mc-table .mc-cell-meta{color:var(--mc-ink-2);font-size:var(--mc-fs-small)}
.mc-table .mc-cell-actions{text-align:right}
/* the row's actions: the next step first, More last; they wrap rather than push the table wider */
.mc-rowact{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.mc-rowact .mc-btn{white-space:nowrap}
@media (min-width:1101px){   /* wide screens: the actions column takes what it needs and stays on one line */
  .mc-table td.mc-cell-actions{width:1%}
  .mc-rowact{flex-wrap:nowrap}
}
@media (min-width:901px) and (max-width:1100px){   /* mid widths drop the columns marked .mc-col-wide (Checks: Account, Type) */
  .mc-table .mc-col-wide{display:none}
}
@media (hover:hover){.mc-table tbody tr:hover > *{background:var(--mc-wash)}}
.mc-table tr.is-voided .mc-cell-main b,.mc-table tr.is-voided td.is-num{color:var(--mc-ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.mc-table tr.is-voided .mc-cell-meta{color:var(--mc-ink-3)}
.mc-table tbody tr:last-child > :first-child{border-bottom-left-radius:calc(var(--mc-r-panel) - 1px)}
.mc-table tbody tr:last-child > :last-child{border-bottom-right-radius:calc(var(--mc-r-panel) - 1px)}
.mc-table-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--mc-sp-2) var(--mc-sp-6);padding:14px 22px;border-top:1px solid var(--mc-line);color:var(--mc-ink-2);font-size:var(--mc-fs-small)}
/* phones and narrow tablets: each row becomes a small card (no sideways scrolling) */
@media (max-width:900px){
  .mc-table,.mc-table tbody{display:block}
  .mc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mc-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--mc-sp-4);padding:16px 16px 14px;border-top:1px solid var(--mc-line)}
  .mc-table tbody tr:first-child{border-top:0}
  .mc-table tbody td,.mc-table tbody th,.mc-table tbody td:first-child,.mc-table tbody td:last-child{grid-column:1 / -1;display:flex;gap:var(--mc-sp-3);padding:0;border:0;text-align:left;white-space:normal}
  .mc-table tbody td[data-label]::before{content:attr(data-label);flex:none;width:92px;color:var(--mc-ink-3);font-size:14px;font-weight:var(--mc-w-medium)}
  .mc-table tbody td.mc-cell-main,.mc-table tbody th.mc-cell-main{grid-column:1;grid-row:1;display:block}
  .mc-table tbody td.is-num{grid-column:2;grid-row:1;display:block;text-align:right}
  .mc-table tbody td.mc-cell-actions{display:block;width:auto;margin-top:var(--mc-sp-2)}
  .mc-table tbody .mc-cell-main::before,.mc-table tbody td.is-num::before,.mc-table tbody .mc-cell-actions::before{content:none}
  .mc-rowact{justify-content:flex-start;gap:var(--mc-sp-2)}
  .mc-rowact > .mc-more{margin-left:auto}
  .mc-table tbody tr:last-child > :first-child,.mc-table tbody tr:last-child > :last-child{border-radius:0}
  .mc-table tbody tr:hover{background:var(--mc-wash)}
  .mc-table tbody tr:hover > *{background:none}
}

/* ============ 18. "More" menu (secondary row actions; Delete lives here, explained) ============ */
.mc-more{position:relative;display:inline-flex}
.mc-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--mc-z-menu);min-width:240px;max-width:min(320px,calc(100vw - 32px));padding:6px;
  border:1px solid var(--mc-line);border-radius:var(--mc-r-menu);background:var(--mc-white);box-shadow:var(--mc-shadow-pop);text-align:left;white-space:normal;
  animation:mc-pop var(--mc-t-pop) var(--mc-ease)}
.mc-menu--up{top:auto;bottom:calc(100% + 6px)}
.mc-menu__item{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:var(--mc-target);padding:8px 12px;border:0;
  border-radius:var(--mc-r-chip);background:none;color:var(--mc-ink);font:var(--mc-w-medium) 16px/1.3 var(--mc-sans);text-align:left;text-decoration:none;cursor:pointer}
@media (hover:hover){.mc-menu__item:hover{background:var(--mc-wash);color:var(--mc-ink)}}
.mc-menu__item:active{background:var(--mc-line)}
.mc-menu__item:focus-visible{outline-offset:-2px}
.mc-menu__item--danger,.mc-menu__item--danger:hover{color:var(--mc-red)}
.mc-menu__note{margin-top:2px;color:var(--mc-ink-2);font-size:13.5px;font-weight:var(--mc-w-text);line-height:1.4}
.mc-menu__sep{height:1px;margin:6px 4px;background:var(--mc-line)}

/* ============ 19. Empty state: one line, one button ============ */
.mc-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mc-sp-2);padding:var(--mc-sp-12) var(--mc-sp-10)}
.mc-empty__art{position:relative;width:96px;height:42px;margin-bottom:var(--mc-sp-3);border-radius:2px;background:linear-gradient(180deg,var(--mc-paper-1),var(--mc-paper-2));box-shadow:inset 0 0 0 1px var(--mc-paper-edge),var(--mc-shadow-paper-soft)}
.mc-empty__art::before{content:'';position:absolute;left:12px;right:30px;top:15px;height:1.5px;background:var(--mc-paper-edge)}
.mc-empty__art::after{content:'';position:absolute;left:14px;right:34px;bottom:7px;height:3px;background:repeating-linear-gradient(90deg,var(--mc-paper-ink) 0 4px,transparent 4px 7px);opacity:.75}
.mc-empty__title{color:var(--mc-ink);font-size:19px;font-weight:var(--mc-w-head);letter-spacing:-.01em}
.mc-empty__text{max-width:46ch;color:var(--mc-ink-2);text-wrap:pretty}
.mc-empty .mc-btn{margin-top:var(--mc-sp-3)}
@media (max-width:640px){.mc-empty{padding:var(--mc-sp-8) var(--mc-sp-5)}}

/* ============ 20. Stepper (progress above the form) and progress bars ============ */
.mc-stepper{display:flex;gap:var(--mc-sp-2)}
.mc-step{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--mc-target);padding-top:12px;border-top:3px solid var(--mc-line-2);
  color:var(--mc-ink-3);font-size:var(--mc-fs-label);font-weight:var(--mc-w-label)}
.mc-step > a{display:flex;align-items:center;gap:10px;min-width:0;min-height:var(--mc-target);color:inherit;text-decoration:none}
.mc-step > a:hover .mc-step__label{text-decoration:underline;text-underline-offset:.18em}
.mc-step__n{display:grid;place-items:center;width:26px;height:26px;flex:none;border:2px solid var(--mc-line-2);border-radius:50%;background:var(--mc-white);
  color:var(--mc-ink-3);font-size:13px;font-weight:var(--mc-w-display)}
.mc-step__n .mc-icon{width:14px;height:14px}
.mc-step__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-step[aria-current="step"]{border-top-color:var(--mc-jade-700);color:var(--mc-ink)}
.mc-step[aria-current="step"] .mc-step__n{border-color:var(--mc-jade-700);background:var(--mc-jade-700);color:var(--mc-white)}
.mc-step.is-done{border-top-color:var(--mc-jade-700);color:var(--mc-ink-2)}
.mc-step.is-done .mc-step__n{border-color:var(--mc-jade-700);background:var(--mc-jade-50);color:var(--mc-jade-700)}
@media (max-width:640px){
  .mc-step[aria-current="step"]{flex-grow:2.5}
  .mc-step:not([aria-current="step"]) .mc-step__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.mc-progress{display:flex;align-items:center;gap:14px;color:var(--mc-ink-2);font-size:var(--mc-fs-small)}
.mc-progress__bars{display:grid;grid-auto-flow:column;grid-auto-columns:48px;gap:6px}
.mc-progress__bars > span{height:6px;border-radius:3px;background:var(--mc-line-2)}
.mc-progress__bars > span.is-done{background:var(--mc-jade-700)}

/* ============ 21. Checklist with minutes per step ============ */
.mc-checklist{overflow:hidden;border:1px solid var(--mc-line);border-radius:var(--mc-r-panel);background:var(--mc-white)}
.mc-task{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 18px;align-items:start;padding:24px 28px}
.mc-task + .mc-task{border-top:1px solid var(--mc-line)}
.mc-task__n{grid-row:1 / span 3;display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--mc-line-2);border-radius:50%;
  color:var(--mc-ink-3);font-size:var(--mc-fs-small);font-weight:var(--mc-w-display)}
.mc-task__n .mc-icon{width:18px;height:18px}
.mc-task__title{padding-top:5px;color:var(--mc-ink);font-size:19px;font-weight:var(--mc-w-head);letter-spacing:-.01em;line-height:1.3}
.mc-task__time{padding-top:7px;color:var(--mc-ink-2);font-size:var(--mc-fs-small);white-space:nowrap}
.mc-task__text{grid-column:2 / span 2;max-width:46ch;color:var(--mc-ink-2)}
.mc-task__action{grid-column:2 / span 2;margin-top:14px}
.mc-task.is-now .mc-task__n{border-color:var(--mc-jade-700);background:var(--mc-jade-700);color:var(--mc-white)}
.mc-task.is-later .mc-task__title{color:var(--mc-ink-2)}
.mc-task.is-later .mc-task__text{color:var(--mc-ink-3)}
.mc-task.is-done{padding-block:18px}
.mc-task.is-done .mc-task__n{grid-row:1;border-color:var(--mc-jade-700);background:var(--mc-jade-50);color:var(--mc-jade-700)}
.mc-task.is-done .mc-task__title{color:var(--mc-ink-2)}
.mc-task.is-done .mc-task__time{color:var(--mc-jade-700);font-weight:var(--mc-w-label)}
.mc-task.is-done .mc-task__text,.mc-task.is-done .mc-task__action{display:none}
@media (max-width:640px){
  .mc-task{grid-template-columns:32px minmax(0,1fr);gap:2px 14px;padding:20px 16px}
  .mc-task__n{grid-row:1 / span 2;width:32px;height:32px}
  .mc-task__title{font-size:18px;padding-top:3px}
  .mc-task__time{grid-column:2;padding-top:0}
  .mc-task__text,.mc-task__action{grid-column:2}
  .mc-task__text{margin-top:6px}
}

/* ============ 22. Modal and phone sheet (native <dialog>) ============ */
.mc-modal{width:min(480px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;overflow:auto;border:0;border-radius:var(--mc-r-panel);
  background:var(--mc-white);color:var(--mc-ink);box-shadow:var(--mc-shadow-pop);overscroll-behavior:contain}
.mc-modal::backdrop{background:var(--mc-backdrop)}
.mc-modal[open]{animation:mc-rise var(--mc-t-pop) var(--mc-ease)}
.mc-modal[open]::backdrop{animation:mc-fade var(--mc-t-pop) linear}
.mc-modal--wide{width:min(560px,calc(100% - 32px))}   /* the first-print review */
.mc-modal--sm{width:min(400px,calc(100% - 32px))}     /* small sheets: Change number and date */
.mc-modal__in{position:relative;padding:28px 32px 26px}
.mc-modal__title{padding-right:40px;font-size:24px;line-height:1.2;font-weight:var(--mc-w-head);letter-spacing:-.02em;text-wrap:balance}
.mc-modal__text{margin-top:var(--mc-sp-1);color:var(--mc-ink-2);text-wrap:pretty}
.mc-modal__body{margin-top:18px}
.mc-modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mc-sp-3) var(--mc-sp-4);margin-top:var(--mc-sp-5)}
.mc-modal__actions > .mc-btn--primary{flex:1 1 auto}
.mc-modal__close{position:absolute;top:12px;right:12px}
html:has(.mc-modal:modal){overflow:hidden}
/* label / value rows: the first-print review, account details */
.mc-facts{display:grid;grid-template-columns:132px minmax(0,1fr);margin:0;border-top:1px solid var(--mc-line);font-size:var(--mc-fs-app)}
.mc-facts dt,.mc-facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--mc-line)}
.mc-facts dt{padding-right:var(--mc-sp-4);color:var(--mc-ink-2);font-size:var(--mc-fs-small)}
.mc-facts dd{color:var(--mc-ink);font-weight:var(--mc-w-label);overflow-wrap:anywhere}
.mc-facts dd > span{display:block;color:var(--mc-ink-2);font-size:var(--mc-fs-hint);font-weight:var(--mc-w-text)}
@media (max-width:640px){
  .mc-modal,.mc-modal--wide,.mc-modal--sm{width:100%;max-height:calc(100% - 24px);margin:auto 0 0;border-radius:var(--mc-r-panel) var(--mc-r-panel) 0 0}
  .mc-modal__in{padding:24px var(--mc-sp-4) calc(20px + env(safe-area-inset-bottom))}
  .mc-modal__title{font-size:22px}
  .mc-modal__actions{flex-direction:column;align-items:stretch}   /* main action last in the markup: lowest, nearest the thumb */
  .mc-modal__actions .mc-btn{width:100%}
  .mc-facts{grid-template-columns:112px minmax(0,1fr)}
}

/* ============ 23. Loading: skeleton and a line that says what is happening ============ */
.mc-skel{display:block;border-radius:var(--mc-r-sm);background:var(--mc-line);animation:mc-breathe 1.4s ease-in-out infinite alternate}
.mc-skel--text{width:var(--w,100%);height:14px}
.mc-skel--title{width:var(--w,40%);height:22px}
.mc-skel--block{height:var(--h,88px);border-radius:var(--mc-r-ctl)}
.mc-loading{display:inline-flex;align-items:center;gap:10px;color:var(--mc-ink-2);font-size:var(--mc-fs-small)}

/* ============ 24. Public header and its phone menu ============ */
.mc-header{position:sticky;top:0;z-index:var(--mc-z-sticky);border-bottom:1px solid var(--mc-line);background:var(--mc-white)}
.mc-header__in{display:flex;align-items:center;gap:var(--mc-sp-10);height:var(--mc-header-h)}
.mc-header__links{display:flex;gap:var(--mc-sp-8)}
.mc-header__links a{display:inline-flex;align-items:center;min-height:var(--mc-target);color:var(--mc-ink-2);font-size:16px;font-weight:var(--mc-w-medium);text-decoration:none}
.mc-header__links a:hover{color:var(--mc-ink)}
.mc-header__links a[aria-current="page"]{color:var(--mc-ink);font-weight:var(--mc-w-label)}
.mc-header__menu-only{display:none}
.mc-header__end{display:flex;align-items:center;gap:22px;margin-left:auto}
.mc-header__signin{display:inline-flex;align-items:center;min-height:var(--mc-target);color:var(--mc-ink);font-size:16px;font-weight:var(--mc-w-label);text-decoration:none}
.mc-header__signin:hover{color:var(--mc-ink);text-decoration:underline}
.mc-menu-btn{display:none;place-items:center;width:var(--mc-target);height:var(--mc-target);flex:none;padding:0;border:1px solid var(--mc-line-2);
  border-radius:var(--mc-r-ctl);background:var(--mc-white);color:var(--mc-ink);cursor:pointer}
.mc-menu-btn .mc-icon{width:22px;height:22px}
.mc-menu-btn[aria-expanded="true"] .mc-menu-btn__open,.mc-menu-btn[aria-expanded="false"] .mc-menu-btn__close{display:none}
@media (max-width:900px){
  .mc-header__in{gap:var(--mc-sp-3)}
  .mc-menu-btn{display:inline-grid}
  .mc-header__nav{display:none;position:absolute;left:0;right:0;top:100%;border-bottom:1px solid var(--mc-line);background:var(--mc-white);box-shadow:var(--mc-shadow-drop)}
  .mc-header.is-open .mc-header__nav{display:block;animation:mc-pop var(--mc-t-pop) var(--mc-ease)}
  .mc-header__links{flex-direction:column;gap:0;max-width:calc(var(--mc-content) + 2 * var(--mc-gutter));margin:0 auto;padding:4px var(--mc-gutter) 14px}
  .mc-header__links li + li{border-top:1px solid var(--mc-line)}
  .mc-header__links a{width:100%;min-height:52px;color:var(--mc-ink);font-size:18px}
  .mc-header__end{gap:var(--mc-sp-3)}
}
.mc-header__end .mc-btn{white-space:nowrap}
@media (max-width:640px){
  .mc-header__signin{display:none}
  .mc-header__menu-only{display:block}
  .mc-header__end .mc-btn{padding-inline:14px;font-size:15px}
}
@media (max-width:400px){   /* 360px phones: the mark, the name, Start free and the menu still fit on one line */
  .mc-header .mc-brand{gap:8px;font-size:17px}
  .mc-header .mc-mark{width:28px;height:28px}
  .mc-header__end{gap:var(--mc-sp-2)}
}

/* ============ 25. Public footer ============ */
/* on wash, under a hairline (DESIGN.md 5); quiet, like the rest of the page */
.mc-footer{padding:var(--mc-sp-16) 0 var(--mc-sp-8);border-top:1px solid var(--mc-line);background:var(--mc-wash);color:var(--mc-ink-2);font-size:var(--mc-fs-small)}
.mc-footer__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mc-sp-6)}
.mc-footer__brand{grid-column:1 / span 4}
.mc-footer__about{margin-top:14px;max-width:34ch;line-height:1.55}
.mc-footer__contact{display:grid;justify-items:start;margin-top:var(--mc-sp-3);font-style:normal}
.mc-footer__contact br{display:none}
.mc-footer__contact a{display:inline-flex;align-items:center;min-height:36px;color:var(--mc-ink);font-weight:var(--mc-w-medium);text-decoration:none}
.mc-footer__contact a:hover{color:var(--mc-ink);text-decoration:underline}
.mc-footer__cols{grid-column:6 / span 7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mc-sp-6)}
.mc-footer__h{margin-bottom:var(--mc-sp-2);color:var(--mc-ink);font-size:var(--mc-fs-small);font-weight:var(--mc-w-head);letter-spacing:0}
.mc-footer__col ul{display:grid;margin:0;padding:0;list-style:none}
.mc-footer__col a{display:inline-flex;align-items:center;min-height:40px;color:var(--mc-ink-2);text-decoration:none}
.mc-footer__col a:hover{color:var(--mc-ink);text-decoration:underline}
.mc-footer__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mc-sp-3) var(--mc-sp-6);margin-top:var(--mc-sp-12);padding-top:22px;
  border-top:1px solid var(--mc-line);font-size:14px}
.mc-footer__legal{display:flex;flex-wrap:wrap;gap:var(--mc-sp-2) var(--mc-sp-6);margin-left:auto}
.mc-footer__legal a{display:inline-flex;align-items:center;min-height:var(--mc-target);color:var(--mc-ink-2)}
.mc-footer__legal a:hover{color:var(--mc-ink)}
@media (pointer:coarse){.mc-footer__col a,.mc-footer__contact a{min-height:var(--mc-target)}}
@media (max-width:900px){
  .mc-footer__brand,.mc-footer__cols{grid-column:1 / -1}
  .mc-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--mc-sp-6)}
}
@media (max-width:640px){
  .mc-footer{padding:var(--mc-sp-12) 0 var(--mc-sp-7)}
  .mc-footer__legal{margin-left:0}
}

/* ============ 26. App bar: Write a check · Checks · Account, credits, Sign out (no Basic | Advanced) ============ */
.mc-appbar{position:sticky;top:0;z-index:var(--mc-z-sticky);border-bottom:1px solid var(--mc-line);background:var(--mc-white)}
.mc-appbar__in{display:flex;align-items:center;gap:36px;height:var(--mc-appbar-h);padding:0 var(--mc-sp-8)}
.mc-appbar__nav{display:flex;align-self:stretch;gap:var(--mc-sp-2)}
.mc-appbar__nav a{position:relative;display:inline-flex;align-items:center;padding:0 12px;color:var(--mc-ink-2);font-size:16px;font-weight:var(--mc-w-nav);text-decoration:none;white-space:nowrap}
.mc-appbar__nav a:hover{color:var(--mc-ink)}
.mc-appbar__nav a[aria-current="page"]{color:var(--mc-ink);font-weight:var(--mc-w-head)}
.mc-appbar__nav a[aria-current="page"]::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--mc-jade-700)}
.mc-appbar__nav a:focus-visible{outline-offset:-4px;border-radius:var(--mc-r-chip)}
.mc-appbar__end{display:flex;align-items:center;gap:var(--mc-sp-3);margin-left:auto}
.mc-appbar__end .mc-btn{white-space:nowrap}
.mc-credits{display:inline-flex;align-items:center;gap:.3em;min-height:var(--mc-target);color:var(--mc-ink-2);font-size:var(--mc-fs-small);font-weight:var(--mc-w-medium);text-decoration:none;white-space:nowrap}
.mc-credits b{color:var(--mc-ink);font-weight:var(--mc-w-head)}
.mc-credits:hover{color:var(--mc-ink);text-decoration:underline;text-underline-offset:.18em}
.mc-credits--out,.mc-credits--out b,.mc-credits--out:hover{color:var(--mc-red)}
@media (max-width:900px){
  .mc-appbar__in{gap:var(--mc-sp-4);padding:0 var(--mc-gutter)}
  .mc-appbar__in > .mc-brand .mc-brand__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:760px){
  .mc-appbar .mc-credits{display:none}
}
/* phone: one 56px row (mark + the three places) that scrolls away, so a page keeps one fixed bar at most
   (GATE1 #22). Credits and Sign out live on the Account page here. */
@media (max-width:640px){
  .mc-appbar{position:relative}
  .mc-appbar__in{height:56px}
  .mc-appbar__nav{gap:0}
  .mc-appbar__nav a{padding:0 10px;font-size:15px}
  .mc-appbar__nav a[aria-current="page"]::after{left:10px;right:10px}
  .mc-appbar__end{display:none}
}
@media (max-width:380px){   /* a 360 window with a classic 15-17px scrollbar leaves 343px: tighten so it fits */
  .mc-appbar__in{gap:var(--mc-sp-3)}
  .mc-appbar__nav a{padding:0 8px}
  .mc-appbar__nav a[aria-current="page"]::after{left:8px;right:8px}
}

/* ============ 27. The opener's pause control (landing stage) ============ */
.mc-pause{--mc-focus:var(--mc-on-dark);display:inline-flex;align-items:center;gap:var(--mc-sp-2);min-height:var(--mc-target);padding:0 16px 0 12px;
  border:1px solid var(--mc-pill-line);border-radius:var(--mc-r-round);background:var(--mc-pill-bg);color:var(--mc-on-dark);
  font:var(--mc-w-label) 15px/1 var(--mc-sans);cursor:pointer;transition:background-color var(--mc-t-press) var(--mc-ease)}
.mc-pause:hover{background:var(--mc-pill-bg-hover)}
.mc-pause svg{width:20px;height:20px;flex:none}

/* ============ 28. Reading pages (guides, legal): headings, lists and tables inside an article ============ */
.mc-prose{max-width:68ch;color:var(--mc-ink);font-size:var(--mc-fs-body);line-height:1.65}
.mc-prose > * + *{margin-top:1em}
.mc-prose h2{margin-top:2em;font-size:28px;line-height:1.2;letter-spacing:-.02em}
.mc-prose h3{margin-top:1.6em;font-size:21px;line-height:1.3}
.mc-prose h2 + *,.mc-prose h3 + *{margin-top:.6em}
.mc-prose ul,.mc-prose ol{padding-left:1.4em}
.mc-prose li + li{margin-top:.4em}
.mc-prose li::marker{color:var(--mc-jade-700)}
.mc-prose table{width:100%;border-collapse:collapse;font-size:var(--mc-fs-app)}
.mc-prose th,.mc-prose td{padding:10px 12px;border-bottom:1px solid var(--mc-line);text-align:left;vertical-align:top}
.mc-prose th{color:var(--mc-ink-2);font-weight:var(--mc-w-label)}
.mc-prose blockquote{padding-left:var(--mc-sp-4);border-left:1px solid var(--mc-line-2);color:var(--mc-ink-2)}

/* ============ 29. Motion, forced colours, print ============ */
@keyframes mc-spin{to{transform:rotate(360deg)}}
@keyframes mc-fade{from{opacity:0}to{opacity:1}}
@keyframes mc-pop{from{opacity:0;transform:translateY(calc(var(--mc-move) * -1))}to{opacity:1;transform:none}}
@keyframes mc-rise{from{opacity:0;transform:translateY(var(--mc-move))}to{opacity:1;transform:none}}
@keyframes mc-breathe{from{opacity:1}to{opacity:.45}}
@keyframes mc-toast-in{from{opacity:0;transform:translate(-50%,var(--mc-move))}to{opacity:1;transform:translate(-50%,0)}}
@keyframes mc-glow{from{opacity:1}to{opacity:.35}}
/* Reduced motion: no spatial movement (--mc-move is 0 above); colour and opacity changes stay. */
@media (prefers-reduced-motion:reduce){
  .mc-spinner{border-right-color:currentColor;animation:mc-glow 1s ease-in-out infinite alternate}
  .mc-skel{animation:none}
  .mc-disclosure__chev,.mc-spot,.mc-spots{transition:none}
}
@media (forced-colors:active){
  .mc-btn,.mc-iconbtn,.mc-menu-btn{border:1px solid ButtonText}
  .mc-check input{forced-color-adjust:none;border-color:CanvasText;background-color:Canvas}
  .mc-check input:checked{border-color:Highlight;background-color:Highlight}
  .mc-check input[type="radio"]:checked{box-shadow:inset 0 0 0 4.5px Canvas}
  .mc-seg input:checked + .mc-seg__opt,.mc-seg__opt[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}
  .mc-tab > input:checked + span::after{background:Highlight}
  .mc-step[aria-current="step"] .mc-step__n,.mc-task.is-now .mc-task__n{border-color:Highlight}
  .mc-spot{border-color:Highlight}
  .mc-pause{border:2px solid ButtonText;background:ButtonFace;color:ButtonText}
  .mc-tokens > span{forced-color-adjust:none}
}
@media print{
  .mc-header,.mc-appbar,.mc-footer,.mc-spots,.mc-pause{display:none!important}
}