/* ==========================================================================
   Fincraft — design system
   Craft a better financial future.

   Built from the brand mark: deep navy, struck gold, bronze, cream, and a
   rose copper that carries the warm end of the palette.

   Plain CSS on purpose: no build step, nothing to compile before deploying.
   ========================================================================== */

:root{
  /* ---- the brand, before it is given a job ---- */
  --navy:#14213D;        /* the plate the coin is struck on */
  --gold:#D2B172;        /* the coin, lit — reads on navy */
  --bronze:#A8823F;      /* the coin, unlit — reads on cream */
  --cream:#F6F1E7;       /* paper */
  --copper:#B06A58;      /* rose copper */
  --copper-lift:#D79683; /* rose copper, raised for a dark ground */

  /* ---- light: ink on paper ---- */
  --page:#F6F1E7; --surface:#FFFCF7; --ink:#14213D; --ink2:#44506B; --muted:#8A8475;
  --grid:#E7DFCF; --baseline:#C9BEA7; --border:rgba(20,33,61,.10);
  --accent:#14213D; --accent2:#A8823F; --accent-soft:#EFE7D5;
  --brand-navy:#14213D; --brand-gold:#A8823F; --brand-copper:#B06A58;
  --grad:linear-gradient(135deg,#14213D 0%,#1E3057 55%,#A8823F 100%);

  /* Chart series: navy, bronze, rose copper. Three marks that stay apart
     when printed in grey, which a navy/teal pairing does not. */
  --s1:#1E3057; --s2:#A8823F; --s3:#B06A58;

  --good:#1F7A4C; --goodtext:#19633D; --warning:#C0871F; --critical:#B3433A;
  --sidebg:#14213D; --side2:#1E2E51; --sideink:#A7B0C6;
  --shadow:0 1px 2px rgba(20,33,61,.05),0 4px 16px rgba(20,33,61,.06);
  --scrollshadow:rgba(20,33,61,.16);
  --shadow-lg:0 8px 30px rgba(20,33,61,.14);
  --pillpos-bg:#E2F0E5; --pillpos-ink:#19633D; --pillneg-bg:#F7E4E0; --pillneg-ink:#9B3A31;
  --pillzero-bg:#EFE9DC; --input-bg:#FFFFFF; --hover:#F1EADC; --tagbg:#EBE3D2; --tagink:#7A5E2C;
  --qval-bg:#F2ECDE;

  /* Categorical palette. Each hue has a solid (dots, rails, icons) and a
     soft background + ink pair (tags, chips) so contrast holds in both
     themes. Warmed to sit beside the brand rather than fight it. */
  --c-blue:#1E3057;    --c-blue-bg:#E4E8F0;    --c-blue-ink:#1E3057;
  --c-indigo:#4A4A8C;  --c-indigo-bg:#E7E6F1;  --c-indigo-ink:#3E3E7A;
  --c-violet:#7A5A9B;  --c-violet-bg:#EDE6F3;  --c-violet-ink:#634A80;
  --c-teal:#2A7D73;    --c-teal-bg:#DEEEEB;    --c-teal-ink:#1F635B;
  --c-green:#3E7C4F;   --c-green-bg:#E2F0E5;   --c-green-ink:#2C6039;
  --c-amber:#A8823F;   --c-amber-bg:#F2E9D5;   --c-amber-ink:#7A5E2C;
  --c-rose:#B06A58;    --c-rose-bg:#F7E6E1;    --c-rose-ink:#8E5244;
  --c-slate:#6B7185;   --c-slate-bg:#ECEAE3;   --c-slate-ink:#565B6C;

  /*
   | Sidebar hues, which are a separate question from the ones above.
   |
   | The categorical palette is tuned for cards on cream, so in the light
   | theme those solids are dark — and the sidebar is navy in BOTH themes.
   | Using them there put dark icons on a dark ground and the menu went
   | invisible. These are lifted to read on navy and are deliberately not
   | redefined per theme, because the surface they sit on never changes.
   */
  --s-blue:#7FA0D4; --s-indigo:#9A97D8; --s-violet:#B79BD6; --s-teal:#5EC2B4;
  --s-green:#6FC58A; --s-amber:#D2B172; --s-rose:#D79683;  --s-slate:#9BA3B8;
}

/* Explicit dark choice: the coin on its plate. */
[data-theme="dark"]{
  --navy:#14213D; --gold:#D2B172; --bronze:#A8823F; --cream:#F6F1E7;
  --copper:#D79683; --copper-lift:#E8B0A0;

  /* The page sits below the brand navy so cards lift off it rather than
     disappearing into it. */
  --page:#0B1224; --surface:#14213D; --ink:#F6F1E7; --ink2:#BFC7D8; --muted:#8089A0;
  --grid:#23314F; --baseline:#3C4A6B; --border:rgba(246,241,231,.10);
  --accent:#D2B172; --accent2:#D79683; --accent-soft:#1C2B4B;
  --brand-navy:#6B86C4; --brand-gold:#D2B172; --brand-copper:#D79683;
  --grad:linear-gradient(135deg,#0E1830 0%,#1E3057 55%,#A8823F 100%);
  --s1:#7FA0D4; --s2:#D2B172; --s3:#D79683;

  --good:#3FA86B; --goodtext:#7BD6A0; --warning:#E0B45C; --critical:#E98477;
  --sidebg:#0E1830; --side2:#1B2A4C; --sideink:#949DB4;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.4);
  --scrollshadow:rgba(0,0,0,.55);
  --shadow-lg:0 8px 30px rgba(0,0,0,.55);
  --pillpos-bg:#14301F; --pillpos-ink:#7BD6A0; --pillneg-bg:#3A1C17; --pillneg-ink:#E8A79B;
  --pillzero-bg:#1D2942; --input-bg:#0E1830; --hover:#1B2A4C; --tagbg:#23314F; --tagink:#D2B172;
  --qval-bg:#1A2744;

  /* Solids lift, soft backgrounds drop to a dark tint, ink becomes the
     light end of the hue — otherwise tags turn into unreadable mud. */
  --c-blue:#7FA0D4;    --c-blue-bg:#17233D;    --c-blue-ink:#A8BEE2;
  --c-indigo:#9A97D8;  --c-indigo-bg:#1F2042;  --c-indigo-ink:#B9B6E6;
  --c-violet:#B79BD6;  --c-violet-bg:#271F3D;  --c-violet-ink:#CDB9E4;
  --c-teal:#5EC2B4;    --c-teal-bg:#10302C;    --c-teal-ink:#8FD8CD;
  --c-green:#6FC58A;   --c-green-bg:#14301F;   --c-green-ink:#9BDCAF;
  --c-amber:#D2B172;   --c-amber-bg:#332814;   --c-amber-ink:#E3CB9B;
  --c-rose:#D79683;    --c-rose-bg:#3A1C17;    --c-rose-ink:#E8B0A0;
  --c-slate:#9BA3B8;   --c-slate-bg:#1D2942;   --c-slate-ink:#C7CDDB;
}


/* "System" sets no data-theme at all, so the OS preference applies — but an
   explicit light choice must still win over a dark OS.

   These values are a copy of the [data-theme="dark"] block above. CSS has no
   way to share one declaration between a selector and a media query without
   a build step, and this project deliberately has none — so the duplication
   is guarded by a test that fails if the two ever drift apart. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#14213D; --gold:#D2B172; --bronze:#A8823F; --cream:#F6F1E7;
    --copper:#D79683; --copper-lift:#E8B0A0;

    /* The page sits below the brand navy so cards lift off it rather than
       disappearing into it. */
    --page:#0B1224; --surface:#14213D; --ink:#F6F1E7; --ink2:#BFC7D8; --muted:#8089A0;
    --grid:#23314F; --baseline:#3C4A6B; --border:rgba(246,241,231,.10);
    --accent:#D2B172; --accent2:#D79683; --accent-soft:#1C2B4B;
    --brand-navy:#6B86C4; --brand-gold:#D2B172; --brand-copper:#D79683;
    --grad:linear-gradient(135deg,#0E1830 0%,#1E3057 55%,#A8823F 100%);
    --s1:#7FA0D4; --s2:#D2B172; --s3:#D79683;

    --good:#3FA86B; --goodtext:#7BD6A0; --warning:#E0B45C; --critical:#E98477;
    --sidebg:#0E1830; --side2:#1B2A4C; --sideink:#949DB4;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.4);
  --scrollshadow:rgba(0,0,0,.55);
    --shadow-lg:0 8px 30px rgba(0,0,0,.55);
    --pillpos-bg:#14301F; --pillpos-ink:#7BD6A0; --pillneg-bg:#3A1C17; --pillneg-ink:#E8A79B;
    --pillzero-bg:#1D2942; --input-bg:#0E1830; --hover:#1B2A4C; --tagbg:#23314F; --tagink:#D2B172;
    --qval-bg:#1A2744;

    /* Solids lift, soft backgrounds drop to a dark tint, ink becomes the
       light end of the hue — otherwise tags turn into unreadable mud. */
    --c-blue:#7FA0D4;    --c-blue-bg:#17233D;    --c-blue-ink:#A8BEE2;
    --c-indigo:#9A97D8;  --c-indigo-bg:#1F2042;  --c-indigo-ink:#B9B6E6;
    --c-violet:#B79BD6;  --c-violet-bg:#271F3D;  --c-violet-ink:#CDB9E4;
    --c-teal:#5EC2B4;    --c-teal-bg:#10302C;    --c-teal-ink:#8FD8CD;
    --c-green:#6FC58A;   --c-green-bg:#14301F;   --c-green-ink:#9BDCAF;
    --c-amber:#D2B172;   --c-amber-bg:#332814;   --c-amber-ink:#E3CB9B;
    --c-rose:#D79683;    --c-rose-bg:#3A1C17;    --c-rose-ink:#E8B0A0;
    --c-slate:#9BA3B8;   --c-slate-bg:#1D2942;   --c-slate-ink:#C7CDDB;
  }
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){color-scheme:dark}
}

/* Padding and border count inside a declared width.
   Without this a field set to the width of its column is that width PLUS
   its padding and border, which is why inputs kept sticking out of the
   panels holding them on narrow screens. Every width in this file is
   written as if this were already true. */
*,*::before,*::after{box-sizing:border-box}

/* No webfont is loaded: fetching one from a third party would leak every
   visitor's IP address to that host on every page view. "Inter" is kept
   first so a locally installed or self-hosted copy is still used. */
body{
  font-family:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--page);color:var(--ink);font-size:14px;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.011em;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:224px;background:var(--sidebg);color:#fff;display:flex;flex-direction:column;
  flex-shrink:0;position:sticky;top:0;height:100vh}
.brand{padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.brandrow{display:flex;align-items:center;gap:10px}
.logo{--logo-size:38px;width:var(--logo-size);height:var(--logo-size);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
/* The artwork is transparent-backed, so on the navy sidebar its blue stroke
   would vanish — hence the white plate. No padding here: the supplied file
   already carries a wide margin of its own. */
.logo.tile{background:#fff;border-radius:11px;
  box-shadow:0 4px 12px rgba(15,23,42,.28)}
.brand h1{font-size:17px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#c7d2fe,#e9d5ff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.brand p{font-size:10.5px;color:var(--sideink);margin-top:4px;letter-spacing:.02em}

.nav{flex:1;padding:10px 10px 14px;overflow-y:auto}

/* Each item carries its stage's hue in --hue, set inline by the sidebar. */
.nav a{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;color:var(--sideink);padding:8px 12px;border-radius:9px;
  font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:2px;text-decoration:none;
  transition:background .16s ease,color .16s ease}
.nav a:hover{background:rgba(255,255,255,.055);color:#fff;text-decoration:none}

/* ---------- icons ----------
   Drawn, not typed. One rule sizes them all; they take the colour of the
   text beside them, so nothing has to be restated per theme. */
.icn{width:var(--icn-size,1.05em);height:var(--icn-size,1.05em);flex-shrink:0;
  display:block;vertical-align:-0.15em}

/* The icon chip is the colour code — legible at a glance without shouting. */
.nav .ic{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
  border-radius:7px;flex-shrink:0;--icn-size:14px;
  background:color-mix(in srgb, var(--hue) 20%, transparent);
  color:var(--hue);transition:background .16s ease,color .16s ease}
.nav a:hover .ic{background:color-mix(in srgb, var(--hue) 32%, transparent)}

/* Active: a tinted ground and a coloured rail, rather than a heavy gradient on
   every selected row. Quieter, and it keeps the colour coding readable. */
.nav a.on{background:color-mix(in srgb, var(--hue) 17%, transparent);color:#fff;font-weight:650}
.nav a.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;background:var(--hue)}
.nav a.on .ic{background:var(--hue);color:#fff}

.nav .sep{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#6b778d;
  padding:12px 12px 5px;font-weight:800}
.nav .sep:first-child{padding-top:4px}

/* color-mix is widely supported, but fall back to something sane without it. */
@supports not (background: color-mix(in srgb, red 20%, transparent)){
  .nav .ic{background:var(--side2)}
  .nav a.on{background:var(--side2)}
  .nav a.on .ic{background:var(--hue)}
}

.side .foot{padding:9px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:9.5px;
  color:var(--sideink);line-height:1.5}
.main{flex:1;padding:24px 30px;min-width:0}

/* ==========================================================================
   THE ACCOUNT BAR
   Language, theme and signing out, which used to be three control strips
   stacked at the foot of the sidebar. They are settings you touch once, so
   they sit behind menus here and the sidebar is left to navigate.
   ========================================================================== */
.topnav{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:9px 30px;padding-top:calc(9px + env(safe-area-inset-top))}
/* On a wide screen the page already says where you are twice — the
   highlighted item in the sidebar and the heading below this bar — so the
   bar stays a utility strip and the title appears only on a phone, where
   neither of those is on screen. */
.topnav-title{display:none;flex:1;font-size:14px;font-weight:700;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topnav-actions{margin-left:auto}
.topnav-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* The icon buttons: help, language, theme. */
.topnav-icon{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:34px;height:34px;padding:0 9px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--ink2);font-size:13px;font-weight:700;font-family:inherit;
  cursor:pointer;text-decoration:none;list-style:none;white-space:nowrap}
.topnav-icon::-webkit-details-marker{display:none}
.topnav-icon::marker{content:""}
.topnav-icon:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.menu[open] > .topnav-icon{background:var(--accent-soft);color:var(--accent);
  border-color:var(--border)}

/* A button that carries a word rather than a glyph. */
.topnav-label{gap:6px;font-size:12.5px;font-weight:600}
.topnav-icon .icn{--icn-size:16px}
.topnav-icon > span{font-size:11.5px;letter-spacing:.03em}

/* The account button carries a name, so it is wider and shows who you are. */
.topnav-who{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 5px;
  border-radius:99px;border:1px solid var(--border);background:transparent;cursor:pointer;
  list-style:none;color:var(--ink2);font-size:12.5px;font-weight:600;max-width:200px}
.topnav-who::-webkit-details-marker{display:none}
.topnav-who::marker{content:""}
.topnav-who:hover{background:var(--hover);color:var(--ink)}
.menu[open] > .topnav-who{background:var(--hover);color:var(--ink)}
.topnav-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topnav-who .caret{color:var(--muted);flex-shrink:0;display:inline-flex;--icn-size:12px}
.avatar{width:26px;height:26px;border-radius:99px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em}

/* ---------- the dropdowns ---------- */
.menu{position:relative}
.menupanel{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:180px;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:var(--shadow-lg);padding:6px;overflow:hidden}
.menupanel-wide{min-width:232px}
.menuhead{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:800;padding:7px 10px 6px;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menuitem{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;
  border-radius:9px;background:transparent;color:var(--ink);font-family:inherit;font-size:12.5px;
  font-weight:600;text-align:left;cursor:pointer;text-decoration:none;white-space:nowrap}
.menuitem:hover{background:var(--hover);text-decoration:none;color:var(--ink)}
.menuitem.on{color:var(--accent2)}
.menuitem.danger{color:var(--critical)}
.menuitem.danger:hover{background:var(--pillneg-bg);color:var(--pillneg-ink)}
.menuitem > .icn{--icn-size:15px;color:var(--muted)}
.menuitem:hover > .icn{color:var(--ink2)}
.menuitem.on > .icn,.menuitem.danger > .icn{color:inherit}
.menumark{width:11px;flex-shrink:0;font-size:11px;color:var(--accent2)}
.menunote{margin-left:auto;font-size:10.5px;font-weight:500;color:var(--muted)}
.menufoot{border-top:1px solid var(--grid);margin-top:5px;padding-top:5px}
/* A sentence at the foot of a menu, rather than a row you can click. */
.menunotefull{font-size:11px;line-height:1.5;color:var(--muted);padding:7px 10px 4px;
  margin:0;white-space:normal;font-weight:500}

/* The hamburger only exists on narrow screens; the sidebar covers wide ones. */
.hamburger{display:none}

/* ---------- headings ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
  gap:12px;flex-wrap:wrap}
.topbar h2{font-size:22px;font-weight:800;letter-spacing:-.025em}
.topbar .sub{color:var(--ink2);font-size:12.5px;margin-top:3px}

/* ---------- flash + validation ---------- */
.flash{border-radius:12px;padding:11px 15px;font-size:12.5px;margin-bottom:16px;
  border:1px solid var(--border)}
.flash.ok{background:var(--pillpos-bg);color:var(--pillpos-ink)}
.flash.bad{background:var(--pillneg-bg);color:var(--pillneg-ink)}
.flash.info{background:var(--accent-soft);color:var(--ink2)}
.flash.warn{background:#fef3c7;color:#92400e}
[data-theme="dark"] .flash.warn{background:#3a2f10;color:#fcd34d}
.flash b{font-weight:700}
.flash ul{margin:4px 0 0 16px}
.err{color:var(--critical);font-size:11px;margin-top:3px;display:block}

/* ---------- cards ---------- */
/* A uniform track, so every stat card on a screen is the same width
   whichever row it lands on. Tried as wrapped flex first, which fills the
   last row but sizes a lone fourth card to the full width of the page —
   a ragged right edge reads as a grid, one enormous card reads as a bug. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin-bottom:18px}
.cards > .card{min-width:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;box-shadow:var(--shadow)}
.card .lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.card .val{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .val.pos{color:var(--goodtext)}
.card .val.neg{color:var(--critical)}
.card .note{font-size:11px;color:var(--muted);margin-top:4px}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.panel h3{font-size:14.5px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em}
.panel h3 .sub{font-weight:500;color:var(--muted);font-size:12px;margin-left:7px}

/* A panel that starts folded.
   Screens like Transactions carry two entry forms above the register, and
   between them they pushed the data the screen exists to show below the
   fold. The forms stay where they belong and open on a click; they open
   themselves when a submission came back with errors, so a rejected form
   is never hidden from the person who has to correct it. */
details.foldpanel{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  margin-bottom:16px;box-shadow:var(--shadow)}
details.foldpanel > summary{padding:15px 18px;cursor:pointer;user-select:none;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;list-style:none;
  border-radius:16px}
details.foldpanel > summary::-webkit-details-marker{display:none}
details.foldpanel > summary::marker{content:""}
details.foldpanel > summary:hover{color:var(--accent2)}
details.foldpanel > summary:before{content:"+";font-weight:800;color:var(--muted);
  font-size:15px;line-height:1;width:12px;flex-shrink:0}
details.foldpanel[open] > summary:before{content:"–"}
details.foldpanel > summary .sub{font-weight:500;color:var(--muted);font-size:12px}
details.foldpanel[open] > summary{border-bottom:1px solid var(--grid);border-radius:16px 16px 0 0}
details.foldpanel > .foldbody{padding:16px 18px 6px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;margin-bottom:16px;padding:26px 30px;border-radius:20px;background:var(--grad);
  color:#fff;box-shadow:0 10px 34px rgba(36,36,120,.33);border:0;overflow:hidden}
.hero:before{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 72%)}
.hero .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:rgba(255,255,255,.75)}
.hero .heroval{font-size:40px;font-weight:800;margin-top:5px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hero .delta{font-size:13px;font-weight:600;margin-top:6px;color:rgba(255,255,255,.92)}
.herosplit{display:grid;grid-template-columns:repeat(4,auto);gap:30px;position:relative}
.herosplit .hv{font-size:17px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.hero .hv.pos{color:#bbf7d0}
.hero .hv.neg{color:#fecaca}

/* ---------- bars ---------- */
/* One grid for the whole chart, with each row contributing its cells via
   display:contents — otherwise every row sizes its own columns and the tracks
   no longer share a scale, which makes the bars incomparable.
   Elastic columns: fixed 170px/128px starved the track to nothing inside a
   half-width .grid2 panel. */
.bars{display:grid;grid-template-columns:minmax(72px,150px) minmax(56px,1fr) auto;
  align-items:center;column-gap:10px;row-gap:9px;font-size:12.5px}
.barrow{display:contents}
.barrow .bl{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:right;font-weight:500}
.barrow .track{height:16px;position:relative;background:var(--grid);border-radius:5px}
.barrow .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;min-width:2px}
.barrow .bv{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px}

/* ---------- tables ---------- */
/* A wide table scrolls sideways, which is fine — but a column cut off at
   a hard edge looks like a rendering fault rather than like more table.
   These four layers put a shadow on whichever side still has content
   hidden, and nothing on a table that already fits: the two solid layers
   scroll with the content and uncover the two fixed shadows only when
   there is something past the edge. */
.tablewrap{overflow-x:auto;
  background:
    linear-gradient(to right,var(--surface) 30%,transparent) left center,
    linear-gradient(to left,var(--surface) 30%,transparent) right center,
    radial-gradient(farthest-side at 0 50%,var(--scrollshadow),transparent) left center,
    radial-gradient(farthest-side at 100% 50%,var(--scrollshadow),transparent) right center;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  text-align:left;padding:7px 9px;border-bottom:1px solid var(--baseline);font-weight:700;
  white-space:nowrap}
td{padding:8px 9px;border-bottom:1px solid var(--grid);vertical-align:middle}
/* A cell holding a label rather than something to read in full. Long
   account names were wrapping to two lines on every row, which doubled
   the height of a table nobody wanted twice as tall. The full value stays
   in the title attribute. */
td.trunc{max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
tr:hover td{background:var(--hover)}
tfoot td{font-weight:700;border-top:2px solid var(--baseline);border-bottom:0}
th a{color:inherit}
th a:hover{color:var(--accent);text-decoration:none}

.pill{display:inline-block;padding:2.5px 11px;border-radius:99px;font-weight:700;font-size:12px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.pos{background:var(--pillpos-bg);color:var(--pillpos-ink)}
.pill.neg{background:var(--pillneg-bg);color:var(--pillneg-ink)}
.pill.zero{background:var(--pillzero-bg);color:var(--ink2)}
.pill.warn{background:#fef3c7;color:#92400e}
[data-theme="dark"] .pill.warn{background:#3a2f10;color:#fcd34d}

.tag{display:inline-block;background:var(--tagbg);color:var(--tagink);border-radius:7px;
  padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{background:var(--grad);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-size:13px;
  font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 3px 12px rgba(99,102,241,.3);
  transition:transform .12s,filter .15s;display:inline-block;text-decoration:none;line-height:1.3}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
.btn.ghost:hover{color:var(--accent)}
.btn.sm{padding:5px 11px;font-size:12px;box-shadow:none}
.btn.danger{background:transparent;color:var(--critical);border:1.5px solid var(--critical);box-shadow:none}
.btn.danger:hover{color:var(--critical)}
.btn.grey{background:transparent;color:var(--ink2);border:1.5px solid var(--baseline);box-shadow:none}
.btn.grey:hover{color:var(--ink2)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- forms ---------- */
input,select,textarea{font-family:inherit;font-size:13px;padding:8px 10px;
  border:1.5px solid var(--baseline);border-radius:9px;background:var(--input-bg);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,168,204,.22)}
input[type=checkbox]{width:auto;padding:0;vertical-align:middle}
input.num{text-align:right;font-variant-numeric:tabular-nums}
input.qval{width:120px;text-align:right;border-color:transparent;background:var(--qval-bg);
  font-variant-numeric:tabular-nums}
input.qval:hover,input.qval:focus{border-color:var(--accent)}

/* Rows align on their TOP edge, not their bottom.
   Aligning on the bottom put every control on one baseline only while the
   fields were the same height — and a field carrying a hint underneath is
   taller, so its input floated up out of line with its neighbours. Tried
   hanging the hints out of the flow instead, which cured the alignment
   and let two hints print on top of each other.
   Top alignment keeps the inputs level however tall a field grows, so
   long as the labels above them stay on one line. Buttons and checkboxes
   sitting loose in a row still align to the bottom, where they read as
   belonging to the controls beside them. */
.formrow{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px;
  row-gap:14px}
.formrow > label,.formrow .f > label{white-space:nowrap}
.formrow > .btn,.formrow > button,.formrow > .checkline,
.formrow > a.btn{align-self:flex-end}
.formrow .f > .hint{line-height:1.35;margin-top:2px;max-width:32ch}
/* An input with no width falls back to its size attribute — about 20
   characters — and on a phone that is wider than the panel holding it. */
.formrow .f > input,.formrow .f > select,.formrow .f > textarea{max-width:100%}
.formrow .f,.f{display:flex;flex-direction:column;gap:4px}
.formrow label,.f label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.f.grow{flex:1;min-width:160px}
.checkline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);
  padding-bottom:9px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formgrid .wide{grid-column:1/-1}

/* ---------- misc ---------- */
.monthnav{display:flex;align-items:center;gap:8px}
.monthnav a{background:var(--surface);border:1.5px solid var(--baseline);color:var(--ink);
  border-radius:9px;width:32px;height:32px;cursor:pointer;font-size:14px;display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none}
.monthnav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.monthnav .mv{font-size:15px;font-weight:800;min-width:110px;text-align:center;letter-spacing:-.01em}

.seg{display:inline-flex;border:1.5px solid var(--baseline);border-radius:10px;overflow:hidden}
.seg a{background:var(--surface);border:0;padding:7px 13px;font-size:12.5px;cursor:pointer;
  color:var(--ink2);font-weight:600;text-decoration:none}
.seg a.on{background:var(--accent);color:#fff}
.seg a:hover{text-decoration:none}

.muted{color:var(--muted);font-size:12px}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}
.flexbet{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.flexrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nowrap{white-space:nowrap}
.right{text-align:right}

.utiltrack{height:8px;background:var(--grid);border-radius:5px;overflow:hidden}
.utilfill{height:8px;border-radius:5px}

.dropzone{border:2px dashed var(--baseline);border-radius:14px;padding:26px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;display:block}
.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone .big{font-size:15px;font-weight:700;margin-bottom:4px}
.dropzone input[type=file]{display:none}

textarea.paste{width:100%;height:140px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--page)}
.authbox{width:430px;max-width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:28px;box-shadow:var(--shadow-lg)}
.authbox .brandrow{margin-bottom:20px}
.authbox .f{margin-bottom:13px}
.authbox input{width:100%}
.authbox .btn{width:100%;margin-top:6px}

.codebox{background:var(--hover);border:1px solid var(--grid);border-radius:10px;padding:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;white-space:pre-wrap;
  color:var(--ink2);margin:8px 0}

.pager{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap;font-size:12.5px}
.pager a,.pager span{padding:5px 10px;border-radius:8px;border:1px solid var(--border);
  color:var(--ink2);text-decoration:none}
.pager a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pager .on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager svg{width:14px;height:14px}

/* charts */
.chart{width:100%;height:auto;overflow:visible}
.chart .gridline{stroke:var(--grid);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:9.5px}
.chart .baseline{stroke:var(--baseline);stroke-width:1}

/* Responsive rules live in the RESPONSIVE section at the end of this file. */

@media print{
  /* The mark is part of the report letterhead, so force its colours through. */
  .logo,.logo img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .side,.btn,.monthnav,.noprint,.pager{display:none !important}
  .app{display:block}
  .main{padding:0}
  body{background:#fff;color:#000}
  html{color-scheme:light}
  .panel,.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .hero{background:#fff !important;color:#000;box-shadow:none;border:1px solid #ccc}
  .hero .lbl,.hero .delta{color:#444}
}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.authbody{background:var(--page)}
.authwrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px 16px;gap:14px}
.authcard{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:30px 28px;box-shadow:var(--shadow-lg)}
.authbrand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.authbrand-name{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.authbrand-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.authtitle{font-size:21px;font-weight:800;letter-spacing:-.025em;margin-bottom:5px}
.authsub{font-size:13px;color:var(--ink2);margin-bottom:18px;line-height:1.5}
.authcard .f{margin-bottom:14px}
.authcard input[type=email],.authcard input[type=text],.authcard input[type=password],
.authcard select{width:100%}
.authfoot{margin-top:18px;text-align:center;font-size:13px;color:var(--ink2)}
.authlegal{font-size:11px;color:var(--muted);text-align:center;max-width:430px;line-height:1.6}
.btn-block{width:100%;display:block;text-align:center}
.small{font-size:12.5px}
.fhint{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}

/* ==========================================================================
   PASSWORD FIELD — show/hide toggle and strength meter
   ========================================================================== */
.pwwrap{position:relative;display:flex}
.pwwrap input{width:100%;padding-right:66px}
/* Floated clear of the field's own border, which it used to sit on. */
.pwtoggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);height:26px;
  padding:0 10px;border:0;border-radius:7px;background:var(--hover);color:var(--ink2);
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;letter-spacing:.02em}
.pwtoggle:hover{background:var(--accent-soft);color:var(--accent)}
.pwmeter{margin-top:7px;display:flex;align-items:center;gap:9px}
.pwmeter-track{flex:1;height:5px;background:var(--grid);border-radius:4px;overflow:hidden}
.pwmeter-fill{height:5px;width:0;border-radius:4px;transition:width .2s,background .2s}
.pwmeter-label{font-size:11px;font-weight:700;min-width:64px;text-align:right}
.pwmeter[data-level="1"] .pwmeter-fill{width:25%;background:var(--critical)}
.pwmeter[data-level="2"] .pwmeter-fill{width:50%;background:var(--warning)}
.pwmeter[data-level="3"] .pwmeter-fill{width:75%;background:var(--s1)}
.pwmeter[data-level="4"] .pwmeter-fill{width:100%;background:var(--s3)}
.pwmeter[data-level="1"] .pwmeter-label{color:var(--critical)}
.pwmeter[data-level="2"] .pwmeter-label{color:var(--warning)}
.pwmeter[data-level="3"] .pwmeter-label{color:var(--s1)}
.pwmeter[data-level="4"] .pwmeter-label{color:var(--s3)}

/* ==========================================================================
   APP SHELL — drawer, mobile bar
   ========================================================================== */
.maincol{flex:1;min-width:0;display:flex;flex-direction:column}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navscrim{display:none}
.navclose{display:none}
.brandrow{text-decoration:none;color:inherit}
.brandrow:hover{text-decoration:none}
/* ==========================================================================
   PAGE NAV — Back / Save / Next
   ========================================================================== */
.pagenav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--grid)}
.pagenav-mid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:1}
.pagenav-spacer{display:block;min-width:1px}
.pagenav .btn{white-space:nowrap}

/* ==========================================================================
   PAGE HELP
   ========================================================================== */
.pagehelp{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
.pagehelp summary{cursor:pointer;padding:12px 16px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:9px;list-style:none;color:var(--ink2)}
.pagehelp summary::-webkit-details-marker{display:none}
.pagehelp summary:hover{color:var(--accent)}
.pagehelp[open] summary{border-bottom:1px solid var(--grid)}
.pagehelp-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:99px;background:var(--accent-soft);color:var(--accent);
  flex-shrink:0;--icn-size:12px}
.pagehelp-body{padding:14px 16px 16px;font-size:13px;line-height:1.6;color:var(--ink2)}
/* An h3 by document structure, sized like the h4 it replaced. */
.pagehelp-h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;
  color:var(--muted);margin:14px 0 6px}
.pagehelp-intro{margin-bottom:12px}
.pagehelp-body ol,.pagehelp-body ul{margin-left:18px}
.pagehelp-body li{margin-bottom:5px}
.pagehelp-more{margin-top:14px;font-size:12.5px}

/* ==========================================================================
   HELP PAGE
   ========================================================================== */
.helpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.helplist{margin-left:18px;font-size:13px;line-height:1.65;color:var(--ink2)}
.helplist li{margin-bottom:6px}
.helph4{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:14px 0 6px;font-weight:700}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .grid3{grid-template-columns:1fr 1fr}
  .main{padding:20px 22px}
}

@media(max-width:900px){
  /* Sidebar becomes an off-canvas drawer. */
  .side{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;height:100dvh;
    box-shadow:0 0 40px rgba(0,0,0,.4)}
  .navtoggle:checked ~ .app .side{transform:translateX(0)}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(8,10,25,.5);
    z-index:55;opacity:0;pointer-events:none;transition:opacity .22s}
  .navtoggle:checked ~ .app .navscrim{opacity:1;pointer-events:auto}
  .navclose{display:flex;align-items:center;justify-content:center;position:absolute;top:12px;right:10px;
    width:34px;height:34px;border-radius:9px;background:var(--side2);color:#fff;font-size:22px;
    cursor:pointer;line-height:1}
  .brand{position:relative;padding-right:52px}

  /* Bigger tap targets in the drawer. */
  .nav a{padding:13px 14px;font-size:14.5px;min-height:46px}

  /* The bar becomes the only navigation affordance on screen, so the
     hamburger appears and the page title comes forward. */
  .topnav{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));gap:8px}
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:40px;height:40px;padding:9px;border-radius:9px;cursor:pointer;flex-shrink:0}
  .hamburger:hover{background:var(--hover)}
  .hamburger span{display:block;height:2px;background:var(--ink);border-radius:2px}
  .topnav-title{display:block;font-size:15px;font-weight:800;color:var(--ink)}

  /* A name does not fit beside three other controls on a phone, so the
     account button falls back to the avatar alone. */
  .topnav-name,.topnav-who .caret{display:none}
  .topnav-who{padding:0;border:0;width:34px;height:34px;justify-content:center}
  .avatar{width:34px;height:34px;font-size:12px}
  .topnav-icon{min-width:36px;height:36px}

  /* Right-anchored panels would hang off the left edge of a narrow screen
     when they are wide, so they span the viewport instead. */
  .menupanel{right:0;left:auto;min-width:200px;max-width:calc(100vw - 28px)}
  .menuitem{padding:11px 10px;font-size:13.5px}

  .main{padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
  .grid2,.grid3{grid-template-columns:1fr}
  .topbar h2{font-size:19px}
  .hero{padding:20px 18px;border-radius:16px}
  .hero .heroval{font-size:31px}
  .herosplit{grid-template-columns:1fr 1fr;gap:14px;width:100%}
  .formgrid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .card{padding:13px 14px;border-radius:13px}
  .card .val{font-size:20px}
  .panel{padding:15px 14px;border-radius:14px}

  /* Tables stay scrollable but get a visible edge so the affordance reads. */
  .tablewrap{margin:0 -14px;padding:0 14px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}

  /* Form rows stack instead of squeezing. */
  .formrow{flex-direction:column;align-items:stretch;gap:12px}
  .formrow .f,.formrow .f.grow{width:100%;min-width:0}
  .formrow input,.formrow select,.formrow textarea{width:100%}
  .formrow .btn{width:100%;margin-bottom:0 !important}
  .checkline{padding-bottom:0}

  /* Comfortable touch targets. */
  input,select,textarea{font-size:16px;padding:11px 12px}  /* 16px stops iOS zooming on focus */
  .btn{padding:11px 18px}
  .btn.sm{padding:8px 13px;font-size:12.5px}
  input.qval{width:100%;min-width:110px}

  /* Page nav becomes a sticky footer bar — always reachable with a thumb. */
  .pagenav{position:sticky;bottom:0;margin:20px -14px 0;padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--border);
    box-shadow:0 -4px 16px rgba(15,23,42,.07);z-index:30;gap:8px}
  .pagenav .btn{padding:11px 12px;font-size:12.5px;flex:1;text-align:center}
  /* Two save buttons and two arrows will not fit on one phone-width row.
     The saves take a full-width row of their own above the arrows, rather
     than wrapping inside a centred column and spilling out of the bar. */
  .pagenav{flex-wrap:wrap;row-gap:8px}
  .pagenav-mid{order:-1;flex:0 0 100%;flex-wrap:nowrap}
  .pagenav-mid .btn{flex:1;width:auto}
  .pagenav-back,.pagenav-next{flex:1}
  .helpgrid{grid-template-columns:1fr}
}

@media(max-width:480px){
  /* 2x2 rather than a single tall column — halves the hero's height. */
  .herosplit{grid-template-columns:1fr 1fr;gap:12px}
  .herosplit .hv{font-size:15px}
  .hero .heroval{font-size:27px}
  .cards{grid-template-columns:1fr 1fr}
  .authcard{padding:24px 20px;border-radius:16px}
  .pagenav .btn{font-size:12px;padding:11px 8px}
}

/* Respect a reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   COLOUR-CODED TAGS AND DOTS
   Applied via App\Support\Palette, so an account type or category group keeps
   the same hue everywhere it appears.
   ========================================================================== */
.tag.hue-blue  {background:var(--c-blue-bg);   color:var(--c-blue-ink)}
.tag.hue-indigo{background:var(--c-indigo-bg); color:var(--c-indigo-ink)}
.tag.hue-violet{background:var(--c-violet-bg); color:var(--c-violet-ink)}
.tag.hue-teal  {background:var(--c-teal-bg);   color:var(--c-teal-ink)}
.tag.hue-green {background:var(--c-green-bg);  color:var(--c-green-ink)}
.tag.hue-amber {background:var(--c-amber-bg);  color:var(--c-amber-ink)}
.tag.hue-rose  {background:var(--c-rose-bg);   color:var(--c-rose-ink)}
.tag.hue-slate {background:var(--c-slate-bg);  color:var(--c-slate-ink)}

/* A bare dot, for when a tag would be too heavy (table rows, legends). */
.hdot{display:inline-block;width:8px;height:8px;border-radius:99px;flex-shrink:0;
  margin-right:7px;vertical-align:baseline}
.hdot.hue-blue{background:var(--c-blue)}      .hdot.hue-indigo{background:var(--c-indigo)}
.hdot.hue-violet{background:var(--c-violet)}  .hdot.hue-teal{background:var(--c-teal)}
.hdot.hue-green{background:var(--c-green)}    .hdot.hue-amber{background:var(--c-amber)}
.hdot.hue-rose{background:var(--c-rose)}      .hdot.hue-slate{background:var(--c-slate)}

/* A left rail on a panel, to colour-code a whole group. */
.panel.railed{position:relative;overflow:hidden}
.panel.railed::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hue)}

/* ==========================================================================
   ELEGANCE PASS
   Lighter shadows, tighter type, and hover states that acknowledge the cursor
   without moving the layout.
   ========================================================================== */
.card{transition:box-shadow .18s ease,border-color .18s ease}
.card:hover{box-shadow:0 2px 4px rgba(15,23,42,.05),0 10px 26px rgba(15,23,42,.07);
  border-color:rgba(15,23,42,.12)}
[data-theme="dark"] .card:hover{border-color:rgba(255,255,255,.16)}

.panel h3,.card .lbl{font-feature-settings:"ss01";}
.panel h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

/* Table headers read as labels rather than shouting. */
th{font-size:10px;letter-spacing:.08em;padding:9px 9px;font-weight:800}
td{padding:9px}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s ease}

/* Numbers should align on the decimal everywhere, not just where remembered. */
.card .val,.hero .heroval,.hero .hv,.pill,td.r,th.r,.bv{font-variant-numeric:tabular-nums}

/* Buttons: keep the lift, soften the shadow. */
.btn{box-shadow:0 2px 8px rgba(43,42,133,.26)}
.btn:hover{box-shadow:0 4px 14px rgba(43,42,133,.32)}
.btn:active{transform:translateY(0)}
.btn.ghost:hover,.btn.grey:hover,.btn.danger:hover{background:var(--hover)}

/* Focus visible for keyboard users, without ringing on mouse clicks. */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* The hero's decorative circle sat oddly on wide screens. */
.hero:before{right:-90px;top:-110px;width:320px;height:320px}
.hero .lbl{color:rgba(255,255,255,.8)}

/* Section headings inside panels. */
.panel h3 .sub{font-weight:500;color:var(--muted);font-size:11.5px;letter-spacing:0}

/* Empty states deserve a little more presence. */
.empty{padding:34px 20px;line-height:1.6}

/* Collapsible sidebar group (Administration). */
.navgroup summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary::after{content:"▸";font-size:9px;transition:transform .15s ease;opacity:.7}
.navgroup[open] summary::after{transform:rotate(90deg)}
.navgroup summary:hover{color:#94a3b8}

/* ==========================================================================
   POLICY PAGES
   ========================================================================== */
.legalwrap{max-width:760px;margin:0 auto;padding:26px 18px 50px;min-height:100dvh;
  display:flex;flex-direction:column;gap:18px}
.legalhead{padding-bottom:16px;border-bottom:1px solid var(--border)}
.legalhead .brandrow{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.legalbody{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:30px 32px;box-shadow:var(--shadow);line-height:1.68;color:var(--ink2);font-size:14px}
.legalbody h1{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
.legalbody h2{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  margin:28px 0 9px;padding-top:18px;border-top:1px solid var(--grid)}
.legalbody h2:first-of-type{border-top:0;padding-top:0}
.legalbody p{margin-bottom:12px}
.legalbody ul{margin:0 0 12px 20px}
.legalbody li{margin-bottom:8px}
.legalbody b{color:var(--ink);font-weight:700}
.legalbody code{background:var(--hover);border:1px solid var(--grid);border-radius:5px;
  padding:1px 6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink)}
.legallead{font-size:15px;color:var(--ink);line-height:1.65}
.legaldate{font-size:12px;color:var(--muted);margin-bottom:6px}
.legaltable{margin:6px 0 14px;font-size:13px}
.legaltable th{text-transform:none;font-size:12px;letter-spacing:0;color:var(--ink);
  vertical-align:top;white-space:normal;width:26%}
.legaltable thead th{width:auto;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}

/* An unpublishable document says so on its own face.
   The operator is not the one reading these pages, so a warning in a log
   or a config comment would be seen by nobody until a customer asked who
   they had just contracted with. */
.legalwarn{border:1px solid var(--warning);border-left-width:4px;border-radius:12px;
  background:var(--accent-soft);color:var(--ink);padding:13px 16px;margin:0 0 20px;
  font-size:12.5px;line-height:1.65}
.legalwarn b{font-weight:800}
.legalwarn code{font-size:11.5px}
.legaltable td{vertical-align:top}
.legalfoot{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:12.5px}

@media(max-width:900px){
  .legalbody{padding:22px 18px;border-radius:14px}
  .legalbody h1{font-size:22px}
  .legaltable th{width:auto}
}

/* Policy links in the auth card and sidebar footers. */
.authlinks{display:flex;gap:9px;justify-content:center;align-items:center;font-size:11.5px;
  color:var(--muted)}
.side .footlinks{display:flex;gap:10px;margin-top:5px}
.side .footlinks a{color:var(--sideink);text-decoration:none;border-bottom:1px solid transparent}
.side .footlinks a:hover{color:#fff;text-decoration:none;border-bottom-color:rgba(255,255,255,.35)}

/* ==========================================================================
   IMPORT — column mapping
   ========================================================================== */
.mapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.mapgrid select{width:100%}
.rawgrid{font-size:11.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.rawgrid th{font-size:9.5px}
.rawgrid td{padding:5px 8px;white-space:nowrap;color:var(--ink2)}
.rawgrid tr.isheader td{background:var(--accent-soft);color:var(--ink);font-weight:700}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.searchbox{min-width:200px;padding-left:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:9px center;background-size:14px}
.searchbox::-webkit-search-cancel-button{cursor:pointer}
tr[data-row].is-filtered{display:none}

/* ==========================================================================
   PAGE NAV — save-and-back
   ========================================================================== */
.pagenav-mid .btn + .btn{margin-left:0}

@media(max-width:900px){
  .mapgrid{grid-template-columns:1fr}
  .searchbox{min-width:0;width:100%}
}
.panel.is-filtered{display:none}

/* ==========================================================================
   TWO-FACTOR
   ========================================================================== */
.otpinput{font-size:22px;letter-spacing:.3em;text-align:center;font-family:ui-monospace,Menlo,monospace;
  width:100%;max-width:240px;padding:12px}
.secretkey{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.08em;
  background:var(--hover);border:1px solid var(--grid);border-radius:10px;padding:14px;
  text-align:center;word-break:break-all;color:var(--ink);font-weight:600}
.codegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.codegrid code{background:var(--hover);border:1px solid var(--grid);border-radius:8px;
  padding:10px;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:13px;
  letter-spacing:.06em;color:var(--ink)}

/* ==========================================================================
   ASSISTANT
   ========================================================================== */
.answer{margin-top:14px;padding:14px 16px;background:var(--accent-soft);border-radius:12px}
.answer-main{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.5}
.chip{display:inline-block;padding:6px 12px;border-radius:99px;background:var(--hover);
  border:1px solid var(--border);font-size:12px;color:var(--ink2);text-decoration:none}
.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.insight{display:flex;gap:11px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid var(--grid)}
.insight:last-child{border-bottom:0}
.insight-title{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:3px}

/* ==========================================================================
   WORDMARK
   ========================================================================== */
/* ---------- the mark ---------- */

/* Coin plus wordmark, set rather than imaged: it themes, prints and scales
   where a baked-in lockup would carry its own background into whatever it
   sits on. The lockup PNGs in public/images remain for email and export,
   where CSS cannot be relied on. */
.wordmark{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
.wordmark-coin{width:var(--coin-size,34px);height:var(--coin-size,34px);
  flex-shrink:0;display:block}

/* A didone, which is what the mark is drawn in. Didot ships on Apple
   devices and Bodoni on most others; Georgia is the floor, and keeps the
   high-contrast serif character rather than falling back to a grotesque. */
.wordmark-text{font-family:"Didot","Bodoni 72","Playfair Display",
  "Times New Roman",Georgia,serif;
  font-size:var(--wordmark-size,20px);font-weight:400;
  /* Written "FinCraft": capital F and C, the rest lower case (29-Oct-2026), so no uppercase transform and a
     lighter tracking than capitals need. */
  letter-spacing:.06em;line-height:1;
  color:var(--wordmark-ink,inherit);white-space:nowrap;
  /* The tracking adds space after the last letter that the eye reads as a
     lopsided gap when the mark is centred. */
  text-indent:.06em;margin-right:-.06em}

/* Doubled from the first pass. The mark was sized like an afterthought in
   a corner; at this weight it reads as the product's name, which on a
   screen somebody opens every day is what it should be.

   Side by side, a coin and wordmark at this size are wider than the
   sidebar and the last letters clip. So the sidebar stacks them — which is
   the arrangement the brand already has a lockup for — and the wordmark
   gets the full column width instead of what is left after the coin. */
/* 29-Oct-2026: the name under the coin made bigger (26px -> 40px); "FinCraft" is about 165px wide at this size,
   inside the 224px rail. */
.side .wordmark{--coin-size:68px;--wordmark-size:40px;--wordmark-ink:var(--cream);
  flex-direction:column;gap:10px;width:100%}
.side .wordmark .wordmark-text{letter-spacing:.08em;text-align:center}

.authbrand .wordmark{--coin-size:92px;--wordmark-size:42px;
  flex-direction:column;gap:14px;margin:0 auto}
.authbrand .wordmark .wordmark-text{letter-spacing:.07em}

/* The tagline grows with it rather than staying a caption. */
.brandrow-stacked p{font-size:12.5px;letter-spacing:.01em;margin-top:9px;text-align:center}
.authbrand-sub{font-size:15px !important;letter-spacing:.01em;margin-top:2px}

/* A wordmark this size needs room to breathe at the top of the sidebar. */
.side .brand{padding-bottom:16px}

@media (max-width:860px){
  /* On a phone the sign-in card is the whole screen, so the mark stays
     generous — but a narrow handset still has to fit the wordmark. */
  .authbrand .wordmark{--coin-size:78px;--wordmark-size:34px}
}
@media (max-width:360px){
  .authbrand .wordmark{--coin-size:66px;--wordmark-size:27px}
}

.brandrow-stacked{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.brandrow-stacked p{font-size:10.5px;color:var(--sideink);letter-spacing:.02em}

/* ==========================================================================
   CARD VIEW FOR TABLES ON PHONES
   A table marked .cardable stops being a table under 760px and becomes one
   card per row, each cell labelled from its column heading via data-label.
   Horizontal scrolling on a phone is workable but miserable; this reads.
   ========================================================================== */
@media(max-width:760px){
  table.cardable,
  table.cardable thead,
  table.cardable tbody,
  table.cardable tr,
  table.cardable td{display:block;width:100%}

  table.cardable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  table.cardable tr{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:11px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
  table.cardable tr:hover td{background:transparent}

  table.cardable td{border:0;padding:5px 0;display:flex;align-items:center;
    justify-content:space-between;gap:12px;text-align:right}
  table.cardable td:before{content:attr(data-label);font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;flex-shrink:0}

  /* A cell with no label is a full-width action row. */
  table.cardable td[data-label=""]:before,
  table.cardable td:not([data-label]):before{content:none}
  table.cardable td:not([data-label]){justify-content:flex-end;padding-top:9px;
    border-top:1px solid var(--grid);margin-top:4px}

  table.cardable td.r,table.cardable td.c{text-align:right}
  table.cardable tfoot tr{background:var(--hover)}
  table.cardable input,table.cardable select{max-width:62%}

  /* A text link in a row is how you open the thing it names, and a 15px
     line of text is not a target a thumb can hit. Padding rather than
     font-size: the row should not get louder to become tappable. */
  /* A progress bar in a card row is a flex item with no intrinsic width,
     so it collapsed to nothing and left its label sitting alone. */
  table.cardable td .utiltrack,table.cardable td .meter{flex:1;max-width:60%;min-width:90px}

  table.cardable td a:not(.btn):not(.tag),
  .card .note a,
  .pagehelp-more a{display:inline-block;padding:8px 0;line-height:1.3}

  /* A truncating column exists to stop a narrow table column wrapping.
     Once the row is a card there is no column to protect, and the ceiling
     would hide the value instead. */
  table.cardable td.trunc{max-width:none;white-space:normal;overflow:visible;text-overflow:clip}

  /* The wrapper no longer needs to scroll once rows are cards. */
  .tablewrap:has(table.cardable){overflow:visible;margin:0;padding:0}
}

@media(max-width:760px){
  /* Empty-state and full-width cells keep their natural layout. */
  table.cardable td[colspan]{display:block;text-align:center;border-top:0;margin:0;padding:14px 0}
  table.cardable td[colspan]:before{content:none}
}

/* ==========================================================================
   INLINE REGISTER EDITING
   Fields read as text until touched, so the register still scans as a table.
   ========================================================================== */
.inline-edit{border-color:transparent;background:transparent;padding:5px 7px;
  font-size:13px;border-radius:7px;transition:background .13s,border-color .13s}
.inline-edit:hover{background:var(--hover);border-color:var(--grid)}
.inline-edit:focus{background:var(--input-bg);border-color:var(--accent)}
.inline-edit.pos{color:var(--goodtext);font-weight:700}
.inline-edit.neg{color:var(--critical);font-weight:700}
.inline-edit.zero{color:var(--ink2)}
.inline-dirty{border-color:var(--warning) !important;background:var(--input-bg) !important}
@media(max-width:760px){ .inline-edit{border-color:var(--grid);background:var(--input-bg)} }

/* ==========================================================================
   REPORT CENTRE
   ========================================================================== */
.reportgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.reportcard{position:relative;border:1px solid var(--border);border-radius:14px;
  padding:15px 16px 16px;background:var(--surface);display:flex;flex-direction:column;gap:8px;
  overflow:hidden;transition:box-shadow .18s,border-color .18s}
.reportcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hue)}
.reportcard:hover{box-shadow:var(--shadow);border-color:var(--baseline)}
.reportcard-head{display:flex;align-items:center;gap:4px}
.reportcard-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.reportcard .btn{align-self:flex-start;margin-top:auto}
.reportcard p{flex:1;line-height:1.55}

/* Two-factor method picker and QR. */
.methodpick{display:grid;gap:10px;margin-bottom:16px}
.methodcard{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;
  border:1.5px solid var(--baseline);cursor:pointer;transition:border-color .15s,background .15s}
.methodcard:hover{border-color:var(--accent);background:var(--hover)}
.methodcard:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.methodcard input{margin-top:3px;flex-shrink:0}
.methodcard span{display:flex;flex-direction:column;gap:3px;font-size:13px}
.methodcard b{color:var(--ink)}
.qrrow{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.qrbox{background:#fff;padding:10px;border-radius:12px;border:1px solid var(--grid);flex-shrink:0}
.qrbox svg{display:block;width:200px;height:200px}
@media(max-width:600px){ .qrrow{flex-direction:column} .qrbox{margin:0 auto} }

.contrib{margin-top:12px;border-top:1px solid var(--grid);padding-top:10px}
.contrib summary{cursor:pointer;font-size:12.5px}
.contrib summary:hover{color:var(--accent)}
.authbrand-wordmark{flex-direction:column;align-items:center;gap:8px;text-align:center}
.authbrand-wordmark .authbrand-sub{font-size:11.5px;color:var(--muted)}

/* ==========================================================================
   SORTABLE COLUMN HEADINGS
   ========================================================================== */
th.sortable{padding:0}
th.sortable a{display:flex;align-items:center;gap:5px;padding:9px;color:inherit;
  text-decoration:none;white-space:nowrap}
th.sortable.r a{justify-content:flex-end}
th.sortable.c a{justify-content:center}
th.sortable a:hover{color:var(--accent);text-decoration:none;background:var(--hover)}
.sortmark{opacity:.35;transition:opacity .15s;display:inline-flex;--icn-size:9px;
  vertical-align:middle;margin-left:2px}
th.sortable a:hover .sortmark{opacity:.75}
.sortmark.on{opacity:1;color:var(--accent)}
th.sortable[aria-sort] a{color:var(--accent)}

@media(max-width:760px){
  /* Headings are hidden in card view, so sorting moves to a select. */
  .sortbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
  .sortbar select{flex:1}
}
.sortbar{display:none}
@media(max-width:760px){ .sortbar{display:flex} }

/* ---------- plans, usage and roles ---------- */
.plangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.plancard{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:10px}
.plancard.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.planhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.planhead h4{font-size:15px;font-weight:800;letter-spacing:-.01em}
.planprice{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.planper{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.planblurb{font-size:12.5px;color:var(--ink2);line-height:1.5}
.planfeatures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;flex:1}
.planfeatures li{font-size:12px;color:var(--ink2);padding-left:18px;position:relative;line-height:1.45}
.planfeatures li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:800}
.plancard form{margin-top:4px}
.plancard .btn{width:100%}

/* A usage bar. Unlimited allowances render no bar at all rather than an
   empty one, which would read as "none left". */
.meter{height:7px;background:var(--grid);border-radius:99px;overflow:hidden;min-width:90px}
.meterfill{display:block;height:100%;background:var(--s3);border-radius:99px;transition:width .3s}
.meterfill.near{background:var(--warning)}
.meterfill.over{background:var(--critical)}

.rolelist{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:4px 18px;border-top:1px solid var(--grid);padding-top:12px}
.rolelist dt{font-size:12px;font-weight:700;color:var(--ink)}
.rolelist dd{font-size:11.5px;color:var(--muted);margin:0 0 8px;line-height:1.45}

/* ---------- nominees, documents, loans ---------- */

/* One named person inside a table cell. */
.nomline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;
  padding:2px 0;line-height:1.5}
.nomline + .nomline{border-top:1px dashed var(--grid);margin-top:3px;padding-top:5px}

/* A bare × that removes a row without looking like a button. */
.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;border-radius:4px}
.linkbtn:hover{color:var(--critical);background:var(--hover)}

/* Something wrong with an arrangement. High is the one that costs money. */
.issues{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.issue{font-size:11.5px;line-height:1.45;padding:5px 8px;border-radius:7px;margin-bottom:4px;
  border-left:3px solid var(--muted);background:var(--hover);color:var(--ink2)}
.issue.high{border-left-color:var(--critical);background:var(--pillneg-bg);color:var(--pillneg-ink)}
.issue.medium{border-left-color:var(--warning);background:#fef3c7;color:#92400e}
[data-theme="dark"] .issue.medium{background:#3a2f10;color:#fcd34d}

.flash.ok{background:var(--pillpos-bg);color:var(--pillpos-ink)}

/* A loan's terms, folded away until wanted. */
.loanform{border:1px solid var(--grid);border-radius:12px;margin-bottom:10px;overflow:hidden}
.loanform > summary{padding:11px 14px;cursor:pointer;font-weight:700;font-size:13px;
  background:var(--hover);user-select:none}
.loanform > summary:hover{background:var(--accent-soft)}
.loanform[open] > summary{border-bottom:1px solid var(--grid)}
.loanform form{padding:14px}

/* The emergency pack: printed, read once, under pressure. Generous type. */
.packhead{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.packhead h1{font-size:26px;font-weight:800;letter-spacing:-.02em}
.packhead .sub{color:var(--ink2);font-size:13px;margin-top:4px}
.packnote{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5;max-width:60ch}
.packsection{margin-bottom:26px;break-inside:avoid}
.packsection h2{font-size:16px;font-weight:800;margin-bottom:10px;
  border-bottom:1px solid var(--grid);padding-bottom:5px}
.packitem{margin-bottom:16px;padding-left:12px;border-left:3px solid var(--grid);break-inside:avoid}
.packitem h3{font-size:14px;font-weight:700;margin-bottom:5px}
.packitem dl{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;font-size:12.5px;margin-bottom:6px}
.packitem dt{color:var(--muted);font-weight:600}
.packitem dd{margin:0}
.packitem ul{margin:2px 0 6px 18px;font-size:12.5px}
.packsub{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.5}
.packsub.warn{color:var(--critical);font-weight:600}
.packfoot{margin-top:30px;padding-top:12px;border-top:1px solid var(--grid);
  font-size:11.5px;color:var(--muted)}

/* ---------- returns ---------- */
.rate{font-weight:800;font-variant-numeric:tabular-nums;font-size:13.5px}
.rate.pos{color:var(--goodtext)}
.rate.neg{color:var(--critical)}
.ratenote{font-size:10.5px;line-height:1.4;max-width:30ch;margin-left:auto;text-align:right}

/* The purchases behind a holding, folded away under it. */
.lots{margin-top:8px;border-top:1px dashed var(--grid);padding-top:8px}
.lots > summary{cursor:pointer;font-size:11.5px;color:var(--muted);font-weight:600;
  user-select:none;list-style:none}
.lots > summary::-webkit-details-marker{display:none}
.lots > summary::before{content:"▸ ";transition:none}
.lots[open] > summary::before{content:"▾ "}
.lots > summary:hover{color:var(--accent)}
.lottable{width:100%;margin-top:8px;font-size:11.5px}
.lottable th{text-align:left;color:var(--muted);font-weight:600;padding:3px 6px;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.lottable td{padding:3px 6px;border-top:1px solid var(--grid);font-variant-numeric:tabular-nums}
.lottable .r{text-align:right}
.lotform{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.lotform input,.lotform select{font-size:12px;padding:5px 7px}
.lotform label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;display:block;margin-bottom:2px}

/* A surface that flips with the theme ships both coins and shows the one
   that will read against it.

   The names describe the surface, not the artwork: coin-dark is the gold
   coin with navy engraving, which is what reads on a dark ground. */
.coin-dark{display:none}
.coin-light{display:block}
[data-theme="dark"] .coin-dark{display:block}
[data-theme="dark"] .coin-light{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .coin-dark{display:block}
  :root:not([data-theme="light"]) .coin-light{display:none}
}

.authlangs{display:flex;gap:8px;justify-content:center;margin-bottom:4px}
.authlangs button{background:none;border:0;color:var(--muted);font-size:12px;
  cursor:pointer;font-family:inherit;padding:2px 6px;border-radius:6px;line-height:1.6}
.authlangs button:hover{color:var(--ink2);background:var(--hover)}
.authlangs button.on{color:var(--accent2);font-weight:700}

/* Devanagari sits on a higher baseline and needs a little more line height
   than Latin at the same size, or the matras clip against the row above. */
:root:lang(hi) body,[lang="hi"]{line-height:1.65}
[lang="hi"]{font-feature-settings:"kern" 1}

/* ---------- tax ---------- */
.dedgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 18px;
  margin-bottom:14px}
.regimegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.regimecard{margin-bottom:0}
.regimecard.winner{border-color:var(--good);box-shadow:0 0 0 2px var(--pillpos-bg)}
.regimecard h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.taxtotal{background:var(--hover);border-radius:12px;padding:14px 16px;margin:10px 0 14px}
.taxtotal .lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700}
.taxtotal .val{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.taxtotal .note{font-size:11.5px;color:var(--muted);margin-top:3px}

/* The working, so a figure can be checked rather than believed. */
.taxworking td{padding:4px 6px}
.taxworking .bandrow td{padding-left:18px;font-size:11px}
.taxworking .rule td{border-top:1px solid var(--baseline)}
.taxworking .total td{border-top:2px solid var(--ink);font-size:13px}

.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ticklist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ticklist li{font-size:12.5px;color:var(--ink2);line-height:1.5;padding-left:20px;position:relative}
.ticklist li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:800}
.ticklist.warnlist li::before{content:"!";color:var(--warning)}
.subhead{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin:14px 0 6px}

/* ---------- help ---------- */

/* Two doors: "how do I do this" and "what does that word mean" are
   different questions and deserve different entrances. */
.helpdoors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin-bottom:16px}
.helpdoor{display:flex;flex-direction:column;gap:5px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.helpdoor:hover{border-color:var(--accent2);transform:translateY(-1px)}
.helpdoor-ic{color:var(--accent2);line-height:1;display:inline-flex;--icn-size:22px}
.helpdoor-title{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-top:4px}
.helpdoor-sub{font-size:12.5px;color:var(--muted);line-height:1.5}

.recipe h3{font-size:15.5px}
.recipe-answer{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:10px}
.recipe .helplist{margin-bottom:12px}

/* Wide enough for two: the answer on the left, the steps beside it.
   The answer alone was capped at a reading measure inside a full-width
   card, which left a third of every recipe blank while the steps queued
   up underneath it. */
@media (min-width:1080px){
  .recipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    column-gap:36px;align-items:start}
  .recipe > h3{grid-column:1 / -1}
  .recipe-answer{margin-bottom:0}
  .recipe .helplist{margin:0}
  .recipe > .btn{grid-column:2;justify-self:start;margin-top:12px}
}

.helpref{border:1px solid var(--grid);border-radius:12px;padding:14px}
.helpref h4{font-size:13.5px;font-weight:700;margin:0}
.helpref .muted{font-size:12px;line-height:1.5;margin:6px 0}

/* The glossary: definition lists read better than cards for scanning. */
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 24px}
.glossterm{padding:10px 0;border-top:1px solid var(--grid);scroll-margin-top:80px}
.glossterm:target{background:var(--accent-soft);border-radius:8px;padding-left:10px;padding-right:10px}
.glossary dt{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
.glossary dd{margin:0}
.glossshort{font-size:12.5px;color:var(--ink2);line-height:1.5;font-weight:600}
.glosslong{font-size:12px;color:var(--muted);line-height:1.6;margin-top:5px}
.glosssee{font-size:11.5px;color:var(--muted);margin-top:5px}
.glosssee a{color:var(--accent2)}

/* ---------- search and ask ---------- */
.modetabs{display:flex;gap:6px;margin-bottom:14px}
.modetab{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:11px;
  background:var(--surface);border:1px solid var(--border);text-decoration:none;
  color:var(--ink2);font-size:13px;font-weight:700;transition:all .15s}
.modetab:hover{border-color:var(--accent2);color:var(--ink)}
.modetab.on{background:var(--accent);color:var(--cream);border-color:var(--accent)}
[data-theme="dark"] .modetab.on{background:var(--gold);color:var(--navy)}

.askrow{display:flex;gap:9px}
.askrow input{flex:1;font-size:14.5px;padding:12px 14px}
.askrow .btn{padding:12px 22px;flex-shrink:0}

.answercard{border-left:4px solid var(--good)}
.answercard.unanswered{border-left-color:var(--muted)}
.answer{font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.01em}
.answer-detail{font-size:13px;color:var(--ink2);line-height:1.6;margin-top:8px;max-width:70ch}
.answercard .btn{margin-top:12px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-block;padding:7px 13px;border-radius:99px;background:var(--hover);
  border:1px solid var(--grid);font-size:12.5px;color:var(--ink2);text-decoration:none;
  transition:all .15s}
.chip:hover{background:var(--accent-soft);border-color:var(--accent2);color:var(--ink)}

.resultlist{list-style:none;margin:0;padding:0}
.resultlist li + li{border-top:1px solid var(--grid)}
/* The row: title block on the left, figure on the right. */
.resultlist a,.resultlist li.plainrow{display:flex;align-items:center;gap:14px;
  padding:11px 13px;text-decoration:none;color:inherit;border-radius:9px}
.resultlist a:hover{background:var(--hover)}
/* The title block: a column, so align-items here is the HORIZONTAL axis.
   It used to share the rule above, which centred every title over its own
   subtitle and made a left-aligned list look ragged. */
.resultlist .result-main{flex:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;min-width:0;padding:0}
.result-title{font-size:13.5px;font-weight:700;color:var(--ink);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-sub{font-size:11.5px;color:var(--muted);line-height:1.45;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
.result-figure{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  flex-shrink:0;color:var(--ink2)}
.result-figure.pos{color:var(--goodtext)}
.result-figure.neg{color:var(--critical)}

@media (max-width:520px){
  .askrow{flex-direction:column}
  .askrow .btn{width:100%}
  .modetab{flex:1;justify-content:center}
}

/* A nominee offered at the moment an account is created, folded away so
   it does not lengthen the form for people who will skip it. */
.nomineeblock{border:1px solid var(--grid);border-radius:12px;margin-top:14px;overflow:hidden}
.nomineeblock > summary{padding:12px 15px;cursor:pointer;background:var(--hover);
  display:flex;align-items:baseline;gap:9px;user-select:none;font-size:13px;font-weight:700}
.nomineeblock > summary .muted{font-weight:500;font-size:11.5px}
.nomineeblock > summary:hover{background:var(--accent-soft)}
.nomineeblock[open] > summary{border-bottom:1px solid var(--grid)}
.nomineeblock > .hint,.nomineeblock > .formrow,.nomineeblock > .checkline{margin:12px 15px}
.nomineeblock > .hint{max-width:72ch}

/* ------------------------------------------------------------------------
   Money today.

   The screen the product was conceived around, so the available figure is
   the largest thing on the page and everything else is subordinate to it.
   The working is a <details> rather than a separate screen: people only
   want it the first time, and once.
   ------------------------------------------------------------------------ */
.todaycard{border-left:4px solid var(--accent2)}
.todaycard.conf-low{border-left-color:var(--muted)}
.todaycard.conf-medium{border-left-color:var(--warning)}
.todaycard.conf-high{border-left-color:var(--good)}

.today-headline{font-size:clamp(19px,4.2vw,29px);line-height:1.32;margin:0;
  color:var(--ink);font-weight:600;letter-spacing:-.02em}
.today-headline b{font-weight:700;color:var(--accent2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.today-headline.neg{color:var(--critical)}
.today-when{margin:8px 0 0;font-size:13px;color:var(--ink2)}
.today-rate{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.today-note{margin:14px 0 0;font-size:12px;color:var(--muted);
  padding-top:11px;border-top:1px solid var(--grid)}

/* Where there is room, the caveat sits beside the figure it qualifies
   rather than orphaned beneath it at two thirds width. */
@media (min-width:1080px){
  .todaycard:has(.today-note){display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
    column-gap:32px;align-items:start}
  .todaycard:has(.today-note) > :not(.today-note){grid-column:1}
  .todaycard .today-note{grid-column:2;grid-row:1 / span 20;align-self:stretch;
    margin:0;padding:2px 0 0 24px;border-top:0;border-left:1px solid var(--grid)}
}

.working{margin-top:16px}
.working > summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink2);
  user-select:none;padding:5px 0}
.working > summary:hover{color:var(--accent2)}
.working .taxworking{max-width:380px}

/* Thirty days as bars. Absolute heights would make a comfortable month
   unreadable next to a tight one, so the window is scaled to its own
   range — the shape is what matters, and the low point is labelled. */
.runway{display:flex;align-items:flex-end;gap:2px;height:96px;margin-top:14px;
  padding:0;border-bottom:1px solid var(--baseline)}
/* The chart series colour rather than the soft accent: on navy the soft
   accent is a shade off the panel it sits on, and the whole month
   disappeared in the dark theme. */
.runway-bar{flex:1;min-width:2px;background:var(--s1);opacity:.5;border-radius:2px 2px 0 0;
  transition:opacity .12s,background .12s}
.runway-bar.warn{background:var(--warning);opacity:.85}
.runway-bar.neg{background:var(--critical);opacity:.9}
.runway-bar:hover{opacity:1}

/* The weekly check-in. Severity is a left edge rather than a coloured
   block: six coloured blocks in a row is a page nobody reads. */
.checkin-headline{font-size:15.5px;font-weight:600;letter-spacing:-.015em;
  margin:0 0 14px;color:var(--ink)}
.checkinlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checkin-item{display:flex;align-items:center;gap:14px;padding:11px 14px;
  border-radius:10px;background:var(--hover);border-left:3px solid var(--muted)}
.checkin-item.sev-high{border-left-color:var(--critical)}
.checkin-item.sev-medium{border-left-color:var(--warning)}
.checkin-item.sev-good{border-left-color:var(--good)}
.checkin-item.sev-info{border-left-color:var(--s-blue)}
.checkin-item > div{flex:1;min-width:0}
.checkin-title{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.checkin-detail{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.checkin-item .btn{flex-shrink:0}

@media (max-width:520px){
  .checkin-item{flex-direction:column;align-items:stretch;gap:9px}
  .checkin-item .btn{width:100%;text-align:center}
  .runway{height:72px}
  .working .taxworking{max-width:none}
}

/* Keyboard reference on the how-to page. */
.keygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:4px 18px}
.keyrow{display:flex;align-items:center;gap:11px;padding:7px 0;
  border-bottom:1px solid var(--grid);font-size:12.5px}
.keys{display:inline-flex;gap:4px;flex-shrink:0;min-width:74px}
kbd{display:inline-block;min-width:21px;text-align:center;padding:2px 6px;border-radius:6px;
  background:var(--hover);border:1px solid var(--border);border-bottom-width:2px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;
  color:var(--ink2);line-height:1.5}
.keydoes{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------------------
   About — the product note.
   Prose, so it gets a reading measure rather than the full page width.
   ------------------------------------------------------------------------ */
/* Prose fills the card it is in.
   The first attempt capped the text at 74 characters inside a full-width
   panel, which left a third of every card blank and read as a mistake
   rather than as typography. A measure is still worth having — a 105
   character line is hard to follow — so the long sections set in two
   columns instead: the text reaches both edges and each line stays
   readable. Only where there is more than one paragraph, since splitting
   a single one down the middle gains nothing. */
.aboutnote p{line-height:1.72;margin-bottom:12px}
.aboutnote p:last-child{margin-bottom:0}
.aboutlead{font-size:15px;color:var(--ink)}

/* Lower than the grids below, because two columns of plain text work at
   a narrower width than two columns of text-and-list do. Between this and
   1080 a single column was running to 96 characters. */
@media (min-width:980px){
  .aboutprose:has(p + p){columns:2;column-gap:38px}
  /* A paragraph stays whole and takes a column; nothing is cut in half
     mid-sentence. Tried letting the opening line span both columns first,
     which left the second column empty whenever a section had only two
     paragraphs — a worse hole than the one this set out to close. */
  .aboutprose p{break-inside:avoid}
}
.aboutnote .ticklist li{line-height:1.6;margin-bottom:9px}
.aboutdivider{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink2);
  margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--grid)}

.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:4px 22px}
.feat{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--grid)}
.feat-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:9px;margin-top:1px;--icn-size:16px;
  background:var(--accent-soft);color:var(--accent2)}
.feat-title{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.feat-blurb{margin:3px 0 0;font-size:12px;line-height:1.55;color:var(--muted);max-width:none}

/* ------------------------------------------------------------------------
   Where it went.
   ------------------------------------------------------------------------ */
.moverhead{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  margin:0 0 8px;color:var(--muted)}
.moverhead.up{color:var(--critical)}
.moverhead.down{color:var(--goodtext)}
.moverlist{list-style:none;margin:0;padding:0}
.moverlist li{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--grid)}
.moverlist li:last-child{border-bottom:0}
.mover-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:13px;font-weight:600;color:var(--ink)}
.mover-was{font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.mover-delta{font-size:13px;font-weight:800;flex-shrink:0;font-variant-numeric:tabular-nums}
.mover-delta.neg{color:var(--critical)}
.mover-delta.pos{color:var(--goodtext)}

/* ------------------------------------------------------------------------
   Reading — published notes and the reference shelf.
   ------------------------------------------------------------------------ */
.chiprow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink2);
  font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.chip:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

.newsitem{padding:14px 0;border-bottom:1px solid var(--grid)}
.newsitem:last-child{border-bottom:0;padding-bottom:0}
.newsitem:first-child{padding-top:0}
.newsmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px;
  font-size:11px;color:var(--muted)}
.newstitle{margin:0 0 5px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.newsitem.lead .newstitle{font-size:16.5px}
.newstitle a{color:var(--ink);text-decoration:none}
.newstitle a:hover{color:var(--accent2);text-decoration:none}
.newssum{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink2)}

/* A list that has the whole page to itself sets two-up above this width:
   one column of items down the left of a 940px card wastes half of it. */
.newsgrid{display:grid;gap:0 34px}
@media (min-width:1080px){
  .newsgrid{grid-template-columns:1fr 1fr}
  .newsgrid .newsitem:nth-child(2){padding-top:0}
}
.newssource{margin:6px 0 0;font-size:11px;color:var(--muted)}

.refhead{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  color:var(--muted);margin:16px 0 7px}
.refhead:first-of-type{margin-top:4px}
.reflist{list-style:none;margin:0;padding:0}
.reflist li{padding:9px 0;border-bottom:1px solid var(--grid);font-size:12.5px}
.reflist li:last-child{border-bottom:0}
.reflist a{font-weight:700;color:var(--ink);text-decoration:none}
.reflist a:hover{color:var(--accent2)}
.refhost{margin-left:7px;font-size:10.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.refsum{display:block;margin-top:3px;font-size:11.5px;line-height:1.55;color:var(--muted)}

.newsbody{max-width:76ch}
.newslead{font-size:15px;line-height:1.65;color:var(--ink);margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--grid)}
.newsbody p{font-size:13.5px;line-height:1.75;color:var(--ink2);margin-bottom:13px}
.newslink{margin-top:18px;padding-top:14px;border-top:1px solid var(--grid)}
.newslink a{font-weight:700;font-size:13.5px}

/* An edit form that opens in a row of its own, under the item it edits.
   The checkbox is the state; the row is the panel. Nothing here widens
   the table, which is what putting the form inside a cell did. */
.editrow{display:none}
tr:has(.edittoggle:checked) + .editrow{display:table-row}
.editrow > td{background:var(--hover);padding:16px 18px;border-bottom:2px solid var(--border)}
tr:has(.edittoggle:checked) label[for^="edit-"]{background:var(--accent);color:#fff;
  border-color:var(--accent)}

@media(max-width:760px){
  /* Rows are cards here, so the form follows its card. */
  table.cardable .editrow{display:none}
  table.cardable tr:has(.edittoggle:checked) + .editrow{display:block}
  /* A cell in card mode is a right-aligned label/value pair. This one
     holds a form, so it opts out of all of that. */
  table.cardable .editrow > td{display:block;border-radius:12px;margin:-6px 0 10px;
    text-align:left;justify-content:flex-start;border-top:0;padding:16px 14px}
}


/* ------------------------------------------------------------------------
   The landing page at "/", for somebody who has not signed in.

   Built from the same tokens as the app, so it follows the theme like
   every other screen. The hero sits on the brand gradient, which is dark
   in both themes, so its text and buttons are fixed to cream and gold
   rather than taken from tokens that flip.
   ------------------------------------------------------------------------ */
.landbody{min-height:100dvh;display:flex;flex-direction:column}
.landhead,.landmain,.landfoot{width:100%;max-width:1080px;margin:0 auto;padding-left:16px;padding-right:16px}
.landhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:18px;padding-bottom:18px}
.landbrand{color:var(--ink);text-decoration:none;min-width:0}
.landbrand:hover{text-decoration:none}
.landbrand .wordmark{--coin-size:44px;--wordmark-size:26px}
.landnav{display:flex;gap:8px;align-items:center;flex-shrink:0}
.landmain{flex:1;display:flex;flex-direction:column;gap:34px;padding-bottom:40px}

.landhero{background:var(--grad);color:var(--cream);border-radius:22px;
  padding:56px 48px;box-shadow:var(--shadow-lg)}
.landeyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.landhero h1{font-family:"Didot","Bodoni 72","Playfair Display","Times New Roman",Georgia,serif;
  font-weight:400;font-size:clamp(32px,5.4vw,54px);line-height:1.08;letter-spacing:.01em;
  max-width:16ch;margin-bottom:18px}
.landlead{font-size:16px;line-height:1.65;max-width:58ch;color:rgba(246,241,231,.88);margin-bottom:26px}
.landcta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.landcta .btn{padding:12px 22px;font-size:14px}
.landbtn-gold{background:var(--gold);color:var(--navy);box-shadow:0 3px 14px rgba(0,0,0,.25)}
.landbtn-gold:hover{color:var(--navy)}
.landbtn-line{background:transparent;color:var(--cream);border:1.5px solid rgba(246,241,231,.55);box-shadow:none}
.landbtn-line:hover{color:var(--cream);background:rgba(246,241,231,.08)}

.landsec h2{font-size:21px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:14px}
.landthree{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.landq p,.landnote{font-size:13.5px;line-height:1.6;color:var(--ink2)}
.landnote + .landnote{margin-top:10px}
.landtwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.landtwo .ticklist li{font-size:13.5px;line-height:1.6}
.landclose{text-align:center;padding:10px 0}
.landclose .landcta{justify-content:center}
.landfoot{padding-top:18px;padding-bottom:26px;border-top:1px solid var(--grid);
  display:flex;flex-direction:column;gap:8px;align-items:center}
.landfoot .authlinks{flex-wrap:wrap}

@media (max-width:640px){
  .landbrand .wordmark{--coin-size:34px;--wordmark-size:20px}
  .landnav .btn{padding:7px 11px;font-size:12px}
  .landhero{padding:34px 22px;border-radius:18px}
  .landlead{font-size:15px}
  .landcta .btn{flex:1 1 auto;text-align:center}
  .landtwo{grid-template-columns:1fr}
}
@media (max-width:380px){
  /* Two buttons and a wordmark do not fit a small handset side by side;
     the coin alone still says whose page this is. */
  .landbrand .wordmark-text{display:none}
}

/* ------------------------------------------------------------------------
   Photographs. Decorative everywhere they appear: alt="" and off the
   printout, so they never stand between a reader and a figure.
   ------------------------------------------------------------------------ */
.photobanner{position:relative;margin:0 0 16px;border-radius:16px;overflow:hidden;
  height:150px;background:var(--hover);border:1px solid var(--border)}
.photobanner img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,center)}
.photobanner figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;
  color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(10,20,40,.72),rgba(10,20,40,0))}
@media(max-width:640px){ .photobanner{height:110px} .photobanner figcaption{font-size:12.5px} }

/* ------------------------------------------------------------------------
   Memberships and the vault
   ------------------------------------------------------------------------ */
.inline-form{display:inline}
.inline-form .inline-edit.r{text-align:right;width:110px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.empty-state p{max-width:62ch;line-height:1.6}
tr.is-muted td{opacity:.6}
.chip.chip-quiet{border-style:dashed;color:var(--muted)}

.vaultgate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--surface);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:16px}
.vaultgate-photo img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}
.vaultgate-body{padding:28px 26px}
.vaultgate-body h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:10px 0 6px}
.vaultgate-body > p{line-height:1.6;max-width:52ch}
.vaultgate-ic{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:12px;background:var(--c-indigo-bg);color:var(--c-indigo-ink)}
.vaultgate-ic svg{width:24px;height:24px}
.vaultgate-form{margin:18px 0 20px;max-width:360px}
.vaultgate-form input{width:100%}
.vaultgate-points li{font-size:13px;line-height:1.6}
@media(max-width:760px){
  .vaultgate{grid-template-columns:1fr}
  .vaultgate-photo img{min-height:0;height:140px}
  .vaultgate-body{padding:20px 16px}
}

.vaultkind{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--muted)}
.vaultkind svg{width:16px;height:16px}
.vaultsecret{display:inline-flex;max-width:190px;vertical-align:middle}
.vaultsecret input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.vaultnote{margin-top:6px;font-size:12.5px}
.vaultnote summary{cursor:pointer;color:var(--accent2)}
.vaultnote p{margin-top:4px;white-space:normal;color:var(--ink2)}
.vaultclock{font-variant-numeric:tabular-nums}
.vaultgen .btn{margin-top:6px}
.ic-inline{display:inline-flex;vertical-align:-3px}
.ic-inline svg{width:15px;height:15px}

/* ------------------------------------------------------------------------
   Landing page photographs
   ------------------------------------------------------------------------ */
.landhero.has-photo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.landhero-photo{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.3);
  aspect-ratio:4/3;background:rgba(255,255,255,.06)}
.landhero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.landpeople{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.landperson{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.landperson img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.landperson figcaption{padding:13px 15px 15px}
.landperson b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.landperson span{font-size:12.5px;line-height:1.55;color:var(--ink2)}
@media(max-width:900px){
  .landhero.has-photo{grid-template-columns:1fr}
  .landhero-photo{aspect-ratio:16/9}
}

/* The sign-in card carries one quiet photograph above the brand. */
.authphoto{margin:-6px -6px 18px;border-radius:12px;overflow:hidden;height:120px}
.authphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media(max-height:700px){ .authphoto{display:none} }

/* Eleven currencies make the reporting-currency menu taller than a
   short laptop or a phone held sideways; it scrolls rather than running
   off the bottom of the screen. */
.menupanel-wide{max-height:calc(100dvh - 80px);overflow-y:auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.calccard{display:block;color:inherit;text-decoration:none}
.calccard:hover{text-decoration:none;border-color:var(--accent2)}
.calccard h3{margin-top:10px}
.calccard p{font-size:13px;line-height:1.55}

.mixchart{width:100%;height:auto;display:block}
.mixlabel{font-size:10px;fill:var(--muted)}
.mixlegend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--ink2)}
.mixlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.packvault{padding:9px 0;border-bottom:1px solid var(--grid);font-size:13px;line-height:1.6}

.vaultgate-device{margin:-8px 0 18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.devrow{padding:8px 0;border-bottom:1px solid var(--grid);font-size:13px}
.e2etext{font-style:italic}

/* ========================================================================
   Landing page, second edition: features, how it works, security, help,
   about. Everything below overrides the first edition's rules above.
   Colours come only from the theme tokens, so dark mode follows.
   ======================================================================== */
.skiplink{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:10px;border:1px solid var(--border)}
.skiplink:focus{left:12px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
.landbody [id]{scroll-margin-top:84px}

.landbody .landhead{position:sticky;top:0;z-index:40;max-width:none;padding:12px max(16px,calc((100% - 1120px)/2));
  background:color-mix(in srgb,var(--page) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--grid)}
.landmain,.landfoot{max-width:1120px}
.landmain{gap:72px;padding-top:22px;padding-bottom:72px}
.landanchors{display:flex;gap:4px;align-items:center;margin-left:auto;margin-right:8px}
.landanchors a{color:var(--ink2);font-size:13px;font-weight:600;padding:7px 11px;border-radius:9px;text-decoration:none;white-space:nowrap}
.landanchors a:hover{background:var(--hover);color:var(--ink);text-decoration:none}

.landhero{padding:56px 52px;box-shadow:0 18px 50px rgba(20,33,61,.22)}
.landhero h1{font-size:clamp(34px,5vw,56px);line-height:1.05}
.landtrust{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.landtrust li{font-size:12.5px;font-weight:600;color:rgba(246,241,231,.82);display:flex;align-items:center;gap:7px}
.landtrust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

.landkicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.landsec h2,.landband h2,.landclose h2{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:var(--ink);margin-bottom:14px;max-width:24ch}
.landintro{font-size:15px;line-height:1.65;color:var(--ink2);max-width:62ch;margin:-4px 0 22px}

.landq{padding:22px}
.landq h3{font-size:16px;margin:10px 0 6px}
.landnum{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;background:color-mix(in srgb,var(--hue) 16%,transparent);color:var(--hue)}

/* Features, grouped */
.featgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.featgroup{padding:22px;border-top:3px solid var(--hue)}
.featgroup-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.featgroup-head h3{margin:0;font-size:17px}
.featgroup-ic{display:inline-flex;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--hue) 14%,transparent);color:var(--hue)}
.featgroup-ic svg{width:21px;height:21px}
.featlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.featlist li{padding:11px 0;border-top:1px solid var(--grid);display:flex;flex-direction:column;gap:3px}
.featlist li:first-child{border-top:0;padding-top:4px}
.featlist b{font-size:13.5px;color:var(--ink)}
.featlist span{font-size:13px;line-height:1.55;color:var(--ink2)}

/* Photo bands */
.landband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;background:var(--surface);
  border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 10px 34px rgba(20,33,61,.08)}
.landband-flip .landband-photo{order:2}
.landband-photo{margin:0;min-height:100%}
.landband-photo img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
.landband-body{padding:40px 38px;align-self:center}
.landband-body > p:not(.landkicker){font-size:14.5px;line-height:1.7;color:var(--ink2);max-width:58ch}
.landcurrencies{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.landcurrencies li{font-size:12px;color:var(--ink2);padding:6px 11px;border-radius:99px;border:1px solid var(--border);background:var(--page)}
.landcurrencies b{color:var(--ink);margin-right:3px;letter-spacing:.02em}
.landticks{gap:11px}
.landticks li{font-size:13.5px;line-height:1.6}

/* Audience */
.landperson{transition:transform .2s ease,box-shadow .2s ease}
.landperson:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,33,61,.12)}

/* How it works */
.landsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:step}
.landsteps li{counter-increment:step;position:relative;padding:54px 20px 22px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;gap:6px}
.landsteps li::before{content:counter(step);position:absolute;top:18px;left:20px;width:28px;height:28px;border-radius:50%;
  background:var(--grad);color:var(--cream);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.landsteps b{font-size:14.5px;color:var(--ink)}
.landsteps span{font-size:13px;line-height:1.6;color:var(--ink2)}

/* Help */
.landfaq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.landqa{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0}
.landqa summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;font-weight:700;font-size:14px;color:var(--ink);position:relative}
.landqa summary::-webkit-details-marker{display:none}
.landqa summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:500;color:var(--accent2)}
.landqa[open] summary::after{content:"−"}
.landqa[open]{border-color:var(--accent2)}
.landqa p{padding:0 18px 16px;margin:0;font-size:13.5px;line-height:1.65;color:var(--ink2)}

/* About */
.landabout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin-bottom:18px}
.landabout-photo{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 10px 34px rgba(20,33,61,.12)}
.landabout-photo img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.landprinciples{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.landprinciples li{font-size:13.5px;line-height:1.6;color:var(--ink2);padding-left:16px;border-left:3px solid var(--gold)}
.landprinciples b{color:var(--ink)}
.landnotpanel{padding:20px 22px}

/* Closing */
.landclose{position:relative;border-radius:24px;overflow:hidden;padding:0;text-align:center;min-height:320px;display:flex;align-items:center;justify-content:center}
.landclose-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.landclose::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(14,24,48,.88),rgba(30,48,87,.78) 55%,rgba(168,130,63,.72))}
.landclose-body{position:relative;z-index:1;padding:56px 24px;max-width:640px}
.landclose h2{color:var(--cream);margin:0 auto 10px;max-width:none}
.landclose p{color:rgba(246,241,231,.86);font-size:15px;margin-bottom:22px}
.landclose .landcta{justify-content:center}

/* Footer */
.landfoot{border-top:1px solid var(--grid);padding-top:34px;align-items:stretch}
.landfoot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;width:100%;margin-bottom:22px}
.landfoot-cols nav{display:flex;flex-direction:column;gap:7px}
.landfoot-cols nav a{font-size:13px;color:var(--ink2);text-decoration:none}
.landfoot-cols nav a:hover{color:var(--accent2)}
.landfoot-head{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.landfoot-brand .wordmark{--coin-size:34px;--wordmark-size:20px}
.landfoot-brand p{font-size:12.5px;color:var(--muted);margin-top:8px}
.landfoot .authlegal{max-width:none}

/* ---- Tablet ---- */
@media(max-width:980px){
  .landanchors a{padding:7px 8px;font-size:12.5px}
  .landsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landband{grid-template-columns:1fr}
  .landband-flip .landband-photo{order:0}
  .landband-photo img{min-height:0;height:auto;aspect-ratio:16/8}
  .landband-body{padding:28px 26px}
  .landabout{grid-template-columns:1fr;gap:22px}
  .landfoot-cols{grid-template-columns:repeat(3,1fr)}
  .landfoot-brand{grid-column:1/-1}
}

/* ---- Phone: anchors become a scrolling row under the brand ---- */
@media(max-width:760px){
  .landbody .landhead{flex-wrap:wrap;row-gap:8px}
  .landanchors{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .landanchors::-webkit-scrollbar{display:none}
  .landanchors a{background:var(--hover);flex-shrink:0}
  .landbody [id]{scroll-margin-top:118px}
  .landmain{gap:52px}
  .landhero{padding:32px 22px}
  .featgroups,.landfaq{grid-template-columns:1fr}
  .featgroup{padding:18px}
  .landsteps{grid-template-columns:1fr}
  .landband{border-radius:18px}
  .landband-body{padding:22px 18px}
  .landclose{border-radius:18px;min-height:0}
  .landclose-body{padding:40px 18px}
  .landfoot-cols{grid-template-columns:repeat(2,1fr)}
  .landtrust{gap:6px 14px}
}

/* Activity log: a day-by-day timeline */
.activity-filters{margin-bottom:6px}
.activity-notyou a{font-weight:700}
.activity-day{font-size:12px !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 8px !important}
.activity-list{list-style:none;margin:0;padding:0;position:relative}
.activity-list::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--grid)}
.activity-item{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:9px 0}
.activity-ic{position:relative;z-index:1;display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--surface);border:2px solid color-mix(in srgb,var(--hue) 45%,transparent);color:var(--hue)}
.activity-ic svg{width:17px;height:17px}
.activity-what{margin:6px 0 2px;font-size:13.5px;font-weight:600;color:var(--ink)}
.activity-meta{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.activity-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:8px}
.activity-item.is-warning .activity-ic{background:color-mix(in srgb,var(--hue) 12%,var(--surface))}
.activity-item.is-warning .activity-what{color:var(--critical)}
@media(max-width:600px){
  .activity-item{grid-template-columns:32px minmax(0,1fr);gap:10px}
  .activity-ic{width:32px;height:32px}
  .activity-list::before{left:15px}
  .activity-time{grid-column:2;padding-top:0;order:3}
}

/* Landing hero, full bleed: the family photograph across the whole width,
   the words laid over a navy wash that keeps them readable. */
.landhero.landhero-full{position:relative;display:flex;align-items:center;width:100vw;max-width:none;
  margin:-22px calc(50% - 50vw) 0;padding:0;border-radius:0;box-shadow:none;background:var(--navy);
  min-height:min(84vh,760px);overflow:hidden;isolation:isolate}
.landhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;z-index:-2}
.landhero-full::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,24,48,.94) 0%,rgba(14,24,48,.82) 30%,rgba(14,24,48,.45) 52%,rgba(14,24,48,.08) 72%,transparent 100%),
             linear-gradient(0deg,rgba(14,24,48,.45) 0%,transparent 35%)}
.landhero-inner{width:100%;max-width:1120px;margin:0 auto;padding:72px max(16px,calc((100vw - 1120px)/2)) 64px}
.landhero-inner > *{max-width:540px}
.landhero-full h1{color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.25)}
.landhero-full .landlead{color:rgba(246,241,231,.92)}
@media(max-width:900px){
  .landhero.landhero-full{min-height:min(88vh,720px);align-items:flex-end}
  .landhero-bg{object-position:60% 30%}
  .landhero-full::before{background:linear-gradient(180deg,rgba(14,24,48,.15) 0%,rgba(14,24,48,.55) 38%,rgba(14,24,48,.93) 72%,rgba(14,24,48,.97) 100%)}
  .landhero-inner{padding:180px 22px 34px}
  .landhero-inner > *{max-width:none}
}
@media(max-width:760px){
  .landhero.landhero-full{margin-top:-22px}
}

/* 100vw counts the scrollbar on desktop; clip, rather than scroll, the sliver. */
.landbody{overflow-x:clip}

/* On wide screens the family sits to the right of the words, not under them. */
@media(min-width:901px){
  .landhero-bg{width:128%;left:0;right:auto;object-position:0 40%}
  .landhero-inner > *{max-width:480px}
}
@media(min-width:901px){ .landhero-inner > h1{max-width:660px} }
/* The side padding already centres the text on a 1120px column. */
.landhero-inner{max-width:none;margin:0}

/* Bright hero: the picnic photograph left in full colour across the top,
   the words at the bottom on a wash that only rises as far as they need. */
.landhero.landhero-full{align-items:flex-end;min-height:min(88vh,800px)}
.landhero-full .landhero-bg{width:100%;left:0;object-position:center 28%;filter:saturate(1.08) brightness(1.04)}
.landhero-full::before{background:linear-gradient(0deg,rgba(14,24,48,.92) 0%,rgba(14,24,48,.72) 26%,rgba(14,24,48,.25) 48%,transparent 62%),linear-gradient(90deg,rgba(14,24,48,.35) 0%,transparent 45%)}
.landhero-full .landhero-inner{padding-top:40px;padding-bottom:44px}
@media(min-width:901px){
  .landhero-full .landhero-bg{width:100%;object-position:center 28%}
  .landhero-full .landhero-inner > *{max-width:600px}
  .landhero-full .landhero-inner > h1{max-width:760px}
}
@media(max-width:900px){
  .landhero-full .landhero-bg{object-position:58% 18%}
  .landhero-full::before{background:linear-gradient(0deg,rgba(14,24,48,.96) 0%,rgba(14,24,48,.85) 45%,rgba(14,24,48,.3) 66%,transparent 80%)}
  .landhero-full .landhero-inner{padding-top:230px}
}
@media(min-width:901px){
  .landhero-full::before{background:linear-gradient(0deg,rgba(14,24,48,.93) 0%,rgba(14,24,48,.82) 30%,rgba(14,24,48,.5) 52%,rgba(14,24,48,.12) 66%,transparent 74%),linear-gradient(90deg,rgba(14,24,48,.35) 0%,transparent 45%)}
}
.landhero-full .landeyebrow,.landhero-full .landlead,.landhero-full .landtrust li{text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* Switching from another app */
.appswitch{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;margin-bottom:16px}
.appswitch:hover{text-decoration:none;border-color:var(--accent2)}
.appswitch b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.appswitch .muted{font-size:13px}
.appimport-form{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.appimport-form .dropzone{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.appimport-form .dropzone input[type=file]{margin-top:8px;max-width:100%}
.dropzone-ic svg{width:28px;height:28px;color:var(--accent2)}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.appcard{border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:var(--page)}
.appcard b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.appcard p{font-size:12.5px;line-height:1.55;color:var(--ink2);margin:0}
.appcard-generic{grid-column:1/-1;border-style:dashed}
.appdates{align-items:center;gap:16px;flex-wrap:wrap}
.appdates p{margin:0;flex:1;min-width:220px}

/* Testimonials and FAQ admin */
.landquotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.landquote{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.landquote blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.landquote figcaption b{display:block;font-size:13px;color:var(--ink)}
.landquote figcaption span{font-size:12px;color:var(--muted)}
.landstars{margin:0;color:var(--gold);letter-spacing:2px;font-size:15px}
.landstars span{color:var(--grid)}
.adminquote{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--page)}
.adminquote.is-live{border-color:var(--accent2)}
.adminquote blockquote{margin:0 0 6px;font-size:13.5px;line-height:1.55}
.adminfaq{border-bottom:1px solid var(--grid);padding:10px 0}
.adminfaq summary{cursor:pointer;font-weight:600;font-size:13.5px}
.adminfaq form{margin-top:10px}

/* Landing pricing */
.pricebar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pricebar .landintro{margin:0 0 14px;max-width:56ch}
.landplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.landplan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.landplan.is-popular{border:2px solid var(--gold);box-shadow:0 14px 40px rgba(20,33,61,.14)}
.landplan-badge{position:absolute;top:-12px;left:22px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.landplan h3{font-size:18px;font-weight:800;margin:0}
.landplan-price{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.landplan-cur{font-size:15px;font-weight:700;color:var(--muted);margin-right:3px}
.landplan-per{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
.landplan-month{margin:-6px 0 0;font-size:12.5px;color:var(--muted)}
.landplan-blurb{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.landplan-limits{list-style:none;margin:0;padding:10px 0;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.landplan-limits li{font-size:12.5px;color:var(--ink2)}
.landplan-limits b{color:var(--ink)}
.landplan .planfeatures{flex:1}
.landplan .btn{width:100%;text-align:center;margin-top:6px}
.landplans-note{margin-top:14px;font-size:12.5px}

/* Light hero: a bright photograph under a wash of the page colour, so the
   words sit dark on light and the picture stays sunny. Follows dark mode,
   because the wash is the page colour itself. */
.landhero-full.is-light{background:var(--page)}
.landhero-full.is-light .landhero-bg{object-position:center 32%;filter:brightness(1.06) saturate(1.05)}
.landhero-full.is-light::before{background:linear-gradient(0deg,color-mix(in srgb,var(--page) 97%,transparent) 0%,color-mix(in srgb,var(--page) 90%,transparent) 28%,color-mix(in srgb,var(--page) 55%,transparent) 46%,transparent 62%)}
.landhero-full.is-light h1{color:var(--navy);text-shadow:none}
.landhero-full.is-light .landlead{color:var(--ink2)}
.landhero-full.is-light .landeyebrow{color:var(--bronze,#A8823F)}
.landhero-full.is-light .landeyebrow,.landhero-full.is-light .landlead,.landhero-full.is-light .landtrust li{text-shadow:none}
.landhero-full.is-light .landtrust li{color:var(--ink2)}
.landhero-full.is-light .landbtn-line{color:var(--navy);border-color:var(--navy);background:color-mix(in srgb,var(--page) 70%,transparent)}
.landhero-full.is-light .landbtn-line:hover{background:var(--page);color:var(--navy)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .landhero-full.is-light h1,:root:not([data-theme="light"]) .landhero-full.is-light .landbtn-line{color:var(--cream);border-color:var(--cream)}}
:root[data-theme="dark"] .landhero-full.is-light h1,:root[data-theme="dark"] .landhero-full.is-light .landbtn-line{color:var(--cream);border-color:var(--cream)}
@media(max-width:900px){
  .landhero-full.is-light .landhero-bg{object-position:52% 18%}
  .landhero-full.is-light::before{background:linear-gradient(0deg,color-mix(in srgb,var(--page) 98%,transparent) 0%,color-mix(in srgb,var(--page) 94%,transparent) 50%,color-mix(in srgb,var(--page) 40%,transparent) 68%,transparent 80%)}
}
@media(min-width:901px){ .landhero-full.is-light .landhero-bg{object-position:center 44%} }
@media(max-width:900px){ .landhero-full.is-light .landhero-inner{padding-top:330px} .landhero-full.is-light .landhero-bg{object-position:50% 12%} }
/* A touch brighter, and the wash starts lower so more of the photo shows. */
.landhero-full.is-light .landhero-bg{filter:brightness(1.1) saturate(1.08) contrast(1.02)}
@media(min-width:901px){ .landhero-full.is-light::before{background:linear-gradient(0deg,color-mix(in srgb,var(--page) 96%,transparent) 0%,color-mix(in srgb,var(--page) 86%,transparent) 26%,color-mix(in srgb,var(--page) 45%,transparent) 44%,transparent 58%)} }

/* Four stat cards at a mid width (sidebar open, about 700–900px of content)
   fell 3 + 1. Two by two is balanced and still roomy for long figures. */
@media (min-width:901px) and (max-width:1240px){
  .cards:has(> .card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .landhero-full.is-light .landeyebrow{color:var(--gold)}}
:root[data-theme="dark"] .landhero-full.is-light .landeyebrow{color:var(--gold)}

/* How it works: a wide photograph between the heading and the steps. */
.landhow-photo{margin:0 0 22px;border-radius:18px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 10px 30px rgba(20,33,61,.14)}
.landhow-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 72%}
@media(max-width:640px){ .landhow-photo{aspect-ratio:16/9} }
/* The group photograph fills the width, so the words need a firmer wash under them. */
@media(min-width:901px){ .landhero-full.is-light::before{background:linear-gradient(0deg,color-mix(in srgb,var(--page) 96%,transparent) 0%,color-mix(in srgb,var(--page) 86%,transparent) 22%,color-mix(in srgb,var(--page) 45%,transparent) 38%,transparent 50%),linear-gradient(90deg,color-mix(in srgb,var(--page) 82%,transparent) 0%,color-mix(in srgb,var(--page) 55%,transparent) 32%,transparent 58%)} .landhero-full.is-light .landhero-bg{object-position:center 90%} }
.landhero-full.is-light .landeyebrow{display:inline-block;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--page) 82%,transparent)}
/* Phones: the group photograph as a band across the top, the words below it,
   rather than a tall crop that shows only the canopy. */
@media(max-width:900px){
  .landhero-full.is-light .landhero-bg{height:min(62vw,430px);bottom:auto;object-position:42% 46%}
  .landhero-full.is-light::before{background:linear-gradient(180deg,transparent 0,transparent calc(min(62vw,430px) - 90px),var(--page) min(62vw,430px))}
  .landhero-full.is-light .landhero-inner{padding-top:calc(min(62vw,430px) - 24px)}
}
/* The hero photograph is brightened and sharpened in the file itself, so it
   is shown as it is, under a lighter wash that keeps the faces clear. */
.landhero-full.is-light .landhero-bg{filter:none}
@media(min-width:901px){
  .landhero-full.is-light .landhero-bg{object-position:center 22%}
  .landhero-full.is-light::before{background:linear-gradient(0deg,color-mix(in srgb,var(--page) 94%,transparent) 0%,color-mix(in srgb,var(--page) 78%,transparent) 22%,color-mix(in srgb,var(--page) 30%,transparent) 40%,transparent 52%),linear-gradient(90deg,color-mix(in srgb,var(--page) 72%,transparent) 0%,color-mix(in srgb,var(--page) 40%,transparent) 30%,transparent 52%)}
}
@media(max-width:900px){ .landhero-full.is-light .landhero-bg{object-position:40% 30%} }
/* Seedling hero: the cup stands on the left, so on wide screens the words sit
   on the right, over the deep green, with a soft shade behind them. On phones
   the photograph is a band across the top and the words sit on the page. */
.landhero-full.is-seed{background:var(--page)}
.landhero-full.is-seed .landhero-bg{filter:none;object-position:center 40%}
.landhero-full.is-seed .landeyebrow{color:var(--gold)}
@media(min-width:901px){
  .landhero.landhero-full.is-seed{align-items:center}
  .landhero-full.is-seed::before{background:linear-gradient(270deg,rgba(8,20,15,.84) 0%,rgba(8,20,15,.7) 34%,rgba(8,20,15,.22) 50%,transparent 58%)}
  .landhero-full.is-seed .landhero-inner{padding-left:max(54%,calc(100% - 640px))}
  .landhero-full.is-seed .landhero-inner > *{max-width:none}
  .landhero-full.is-seed h1,.landhero-full.is-seed .landlead,.landhero-full.is-seed .landtrust li{text-shadow:0 1px 12px rgba(0,0,0,.4)}
}
@media(max-width:900px){
  .landhero-full.is-seed .landhero-bg{height:min(66vw,440px);bottom:auto;object-position:32% 60%}
  .landhero-full.is-seed::before{background:linear-gradient(180deg,transparent 0,transparent calc(min(66vw,440px) - 70px),var(--page) min(66vw,440px))}
  .landhero-full.is-seed .landhero-inner{padding-top:calc(min(66vw,440px) - 10px)}
  .landhero-full.is-seed h1{color:var(--ink);text-shadow:none}
  .landhero-full.is-seed .landlead,.landhero-full.is-seed .landtrust li{color:var(--ink2);text-shadow:none}
  .landhero-full.is-seed .landeyebrow{color:var(--bronze);text-shadow:none}
  .landhero-full.is-seed .landbtn-line{color:var(--ink);border-color:var(--ink)}
}
/* Phones: summary cards sit two to a row; an odd last card takes the whole
   row rather than leaving a hole beside it. */
@media(max-width:480px){ .cards > .card:last-child:nth-child(odd){grid-column:1/-1} }
/* Field hints. 72 places used .hint, which had no style of its own, so the
   small print beside a field read as body text. Same look as .fhint. */
.hint{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
p.hint{margin:6px 0 0}
/* Billing: what the next plan up adds, and what moving up costs today. */
.upgradegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 28px;margin:12px 0}
.upgradegrid h4{margin:0 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.upgradebuy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--c-indigo,#4f5bd5) 8%,transparent)}
.upgradebuy form{margin:0}

/* ---- Search in the top bar ---- */
.topsearch{position:relative;display:flex;align-items:center;flex:1;max-width:380px;margin:0}
.topsearch input{width:100%;padding:8px 34px 8px 34px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:13.5px}
.topsearch input:focus{outline:2px solid color-mix(in srgb,var(--accent2) 55%,transparent);outline-offset:1px}
.topsearch-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.topsearch-ic svg{width:16px;height:16px}
.topsearch-key{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 5px;line-height:17px;pointer-events:none}
.topsearch input:focus ~ .topsearch-key{display:none}
@media(max-width:900px){ .topsearch{max-width:none;min-width:0} .topsearch-key{display:none} }
@media(max-width:560px){ .topsearch input{padding-right:10px} }

/* ---- Ask, from every screen ---- */
.askfab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--brand-navy),#26386a);color:#fff;font:600 14px/1 inherit;box-shadow:0 10px 28px rgba(20,33,61,.32);cursor:pointer}
.askfab:hover{transform:translateY(-1px)}
.askfab.is-open{opacity:0;pointer-events:none}
.askfab-ic{display:flex}.askfab-ic svg{width:18px;height:18px}
.askpanel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 90px));
  display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px rgba(20,33,61,.28);overflow:hidden}
.askpanel[hidden]{display:none}
.askpanel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.askpanel-sub{display:block;font-size:12px;color:var(--muted)}
.askpanel-x{border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.askpanel-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.askpanel-intro{font-size:12.5px;color:var(--muted);margin:0}
.askpanel-chips{display:flex;flex-wrap:wrap;gap:6px}
.askpanel-chips .chip{cursor:pointer;font:inherit;font-size:12.5px}
.askmsg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5}
.askmsg p{margin:0;white-space:pre-wrap}
.askmsg-user{align-self:flex-end;background:var(--brand-navy);color:#fff;border-bottom-right-radius:4px}
.askmsg-bot{align-self:flex-start;background:var(--accent-soft);color:var(--ink);border-bottom-left-radius:4px}
.askmsg-bot.is-waiting{color:var(--muted);font-style:italic}
.askmsg-bot.is-error{background:color-mix(in srgb,#c0392b 12%,transparent)}
.askmsg-detail{margin-top:6px!important;font-size:12.5px;color:var(--ink2)}
.askmsg-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.askmsg-foot .pill{font-size:10.5px}
.askmsg-foot a{font-weight:700;text-decoration:none}
.askpanel-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--border)}
.askpanel-form textarea{flex:1;resize:none;border-radius:12px;padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--border);background:var(--page);color:var(--ink)}
.askpanel-more{display:block;text-align:center;font-size:12px;padding:0 0 10px;color:var(--muted)}
.answer-source{float:right;font-size:11px}
.answer-ai{white-space:pre-wrap}
@media(max-width:640px){
  .askfab{right:14px;bottom:84px;padding:12px 14px}
  .askpanel{right:8px;left:8px;bottom:8px;width:auto;height:calc(100vh - 80px)}
}
@media print{ .askfab,.askpanel{display:none!important} }
.askpanel-head > div:first-child{min-width:0}
.askpanel-head .flexrow{flex-wrap:nowrap;align-items:center;gap:6px}
.askpanel-head .btn{white-space:nowrap}
@media(max-width:640px){ .askpanel-head b{font-size:14px} .askpanel-head .btn{padding:6px 10px;font-size:12px} }
/* Room at the foot of every page for the Ask button, so it never sits on
   top of the last thing on the page (the Back / Next bar on desktop). */
@media(min-width:641px){ body:has(.askfab) .main{padding-bottom:84px} }
@media(max-width:640px){ body:has(.pagenav .pagenav-mid > .btn) .askfab{bottom:124px} }