/* Layout concept: the printed account book from the live site, split into one ledger page per feature. Screenshot slots are hatched plates with lettered markers that match the callout list beside them. */
:root{
  --paper:#F3EFE6; --ink:#152238; --muted:#4F5565; --rule:#C9C1AE; --rule-strong:#152238;
  --stamp:#B4472A; --teal:#1F6F6B; --plate:#EAE4D6; --hatch:#DDD5C3; --on-stamp:#FFFFFF;
  --font-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#101A2B; --ink:#F1EDE2; --muted:#A8B1C3; --rule:#2A3A55; --rule-strong:#F1EDE2;
  --stamp:#E88B6C; --teal:#6CC6BE; --plate:#16233A; --hatch:#1D2D49; --on-stamp:#101A2B; color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#101A2B; --ink:#F1EDE2; --muted:#A8B1C3; --rule:#2A3A55; --rule-strong:#F1EDE2;
  --stamp:#E88B6C; --teal:#6CC6BE; --plate:#16233A; --hatch:#1D2D49; --on-stamp:#101A2B; color-scheme:dark;}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.6;padding-inline:16px;padding-block:0}
a{color:var(--teal);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--stamp);outline-offset:3px;border-radius:3px}
.wrap{max-width:1040px;margin-inline:auto}
.wf{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;letter-spacing:.06em;color:var(--muted);padding-block:8px;border-bottom:1px dashed var(--rule)}
.wf b{color:var(--stamp);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.mast{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:22px 12px;border-bottom:4px double var(--rule-strong)}
.brand{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--ink);text-decoration:none}
.brand small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.mast nav{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.mast nav a{color:var(--ink);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.mast nav a:hover{color:var(--stamp)}
.mast nav a[aria-current="page"]{border-bottom-color:var(--stamp)}
.mast nav a.cta{color:var(--stamp)}
h1,h2,h3{text-wrap:balance}
.hero{padding-block:48px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:center}
.hero h1,.page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,5.6vw,62px);line-height:1.02;letter-spacing:-.01em;margin:0 0 18px}
.hero p,.page-head p{margin:0 0 18px;max-width:46ch;color:var(--muted);font-size:19px}
.rubric{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--stamp);margin:0 0 10px}
.page-head{padding-block:48px 8px;max-width:760px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn{display:inline-block;font:600 14px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 20px;border:2px solid var(--stamp);color:var(--stamp);border-radius:3px;background:transparent;cursor:pointer}
.btn.solid{background:var(--stamp);color:var(--on-stamp)}
.btn:hover{transform:translateY(-1px)}
/* screenshot slots */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted);font-size:13px;letter-spacing:.06em;background:repeating-linear-gradient(135deg,var(--plate) 0 14px,var(--hatch) 14px 15px);min-width:0}
.ph span{background:var(--paper);border:1px solid var(--rule);padding:6px 10px;max-width:26ch}
.win{border:1px solid var(--rule-strong);background:var(--paper);min-width:0}
.win .bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--rule-strong);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.win .bar i{width:9px;height:9px;border-radius:50%;border:1px solid var(--muted);display:block}
.win .bar em{font-style:normal;margin-left:8px}
.win .ph{aspect-ratio:16/10}
.phones{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.phone{width:min(210px,100%);border:2px solid var(--rule-strong);border-radius:26px;padding:10px;background:var(--paper)}
.phone .ph{aspect-ratio:9/19.5;border-radius:16px}
.mk{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);font-weight:700;font-size:13px;display:grid;place-items:center;letter-spacing:0}
.mk.b{top:44%;left:auto;right:12%}
.mk.c{top:auto;bottom:12%;left:22%}
/* feature page */
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:start;padding-block:36px 8px}
.callouts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.callouts li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.callouts .k{width:26px;height:26px;border-radius:50%;background:var(--stamp);color:var(--on-stamp);font-weight:700;font-size:13px;display:grid;place-items:center}
.callouts b{font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.2;display:block;margin-bottom:2px}
.callouts span{color:var(--muted)}
section.block{border-top:1px solid var(--rule-strong);margin-top:52px;padding-block:28px 0;display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px 44px}
section.block>h2{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--stamp);margin:6px 0 0}
.lead{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3.2vw,34px);line-height:1.15;margin:0 0 22px;max-width:26ch;text-wrap:balance}
.entries{margin:0;padding:0;list-style:none}
.entries li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:6px 28px;padding-block:14px;border-top:1px solid var(--rule)}
.entries li:last-child{border-bottom:1px solid var(--rule)}
.entries b{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2}
.entries span{color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule-strong)}
.grid3>div{padding:22px}
.grid3>div+div{border-left:1px solid var(--rule-strong)}
.grid3 h3,.pair h3{font-family:var(--font-display);font-weight:400;font-size:23px;margin:0 0 8px;line-height:1.15}
.grid3 p,.pair p{margin:0;color:var(--muted)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule-strong)}
.pair>div{padding:22px}
.pair>div:nth-child(even){border-left:1px solid var(--rule-strong)}
.pair small,.grid3 small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);font-weight:600;margin-bottom:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{border:1px solid var(--rule);padding:14px;display:grid;gap:8px;background:var(--plate)}
.tile .ic{width:34px;height:34px;border:2px solid var(--teal);border-radius:6px}
.tile b{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.15}
.tag{display:inline-block;border:2px solid var(--stamp);color:var(--stamp);border-radius:3px;padding:2px 10px;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.note{border-left:4px solid var(--teal);padding:4px 0 4px 16px;color:var(--muted);max-width:62ch;margin:22px 0 0}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0;border:1px solid var(--rule-strong)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 20px;border-top:1px solid var(--rule)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);font-family:var(--font-display);font-size:30px;line-height:1;color:var(--stamp)}
.steps b{font-family:var(--font-display);font-weight:400;font-size:21px;display:block;line-height:1.2}
.steps span{color:var(--muted)}
form{display:grid;gap:16px;max-width:520px}
label{display:grid;gap:6px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
input,select,textarea{font:400 17px/1.4 var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:3px;padding:11px 12px;width:100%;min-width:0}
.msg{border:1px solid var(--teal);color:var(--ink);padding:12px 14px;background:var(--plate);max-width:520px}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule-strong);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.pager a{text-decoration:none;color:var(--ink)}
.pager a:hover{color:var(--stamp)}
footer{margin-top:64px;padding-block:20px 40px;border-top:4px double var(--rule-strong);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 40px;font-size:14px;color:var(--muted)}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer a{color:var(--muted)}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block-start:32px}
  .split{grid-template-columns:minmax(0,1fr)}
  section.block{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:40px}
  .entries li{grid-template-columns:minmax(0,1fr)}
  .grid3,.pair{grid-template-columns:minmax(0,1fr)}
  .grid3>div+div,.pair>div+div{border-left:0;border-top:1px solid var(--rule-strong)}
  .pair>div:nth-child(even){border-left:0}
  footer{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* real screenshots */
.shot{display:block;line-height:0}
.shot img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1600/817}
.callouts .k{width:12px;height:12px;border-radius:0;margin-top:9px;background:var(--stamp)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.gallery .g{margin:0;display:grid;gap:10px;align-content:start;min-width:0}
.gallery figcaption{display:grid;gap:2px;font-size:15px;color:var(--muted)}
.gallery figcaption b{font-family:var(--font-display);font-weight:400;font-size:19px;color:var(--ink);line-height:1.2}
@media (max-width:860px){.gallery{grid-template-columns:minmax(0,1fr)}}

/* brand */
.brand{display:grid;gap:6px;justify-items:start}
.brand .plate{display:block;background:#152238;padding:8px 14px 6px;border:1px solid var(--rule)}
.brand .plate img{display:block;height:42px;width:auto;max-width:100%}
.brand small{margin-top:0}
.appicon{display:block;width:96px;height:96px;margin:0 0 16px;border-radius:22px}
footer .fb{display:flex;gap:16px;align-items:flex-start}
footer .fb img{width:56px;height:56px;border-radius:13px;flex:none}
footer .fb p{margin:0}

/* transparent logo, one file per theme */
.brand .plate{display:none}
.brand .logo{display:block;height:46px;width:auto;max-width:100%}
.logo-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none!important}:root:not([data-theme="light"]) .logo-dark{display:block!important}}
:root[data-theme="dark"] .logo-light{display:none!important}
:root[data-theme="dark"] .logo-dark{display:block!important}

/* lightbox */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:minmax(0,1fr) auto auto;background:rgba(10,16,28,.98);padding:max(14px,env(safe-area-inset-top,0px)) 16px 12px;color:#F1EDE2}
.lb[hidden]{display:none}
.lb-stage{min-height:0;overflow:auto;display:grid;place-items:center;padding-inline:44px}
.lb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;cursor:zoom-in;border:1px solid #2A3A55;background:#F3EFE6}
.lb.zoom .lb-stage{place-items:start center}
.lb.zoom .lb-stage img{max-width:none;max-height:none;width:1920px;cursor:zoom-out}
.lb-cap{margin:10px 0 0;text-align:center;font-size:15px;line-height:1.4}
.lb-hint{margin:2px 0 0;text-align:center;font-size:12.5px;letter-spacing:.06em;color:#A8B1C3}
.lb button{position:absolute;background:#F3EFE6;color:#152238;border:0;border-radius:3px;width:40px;height:40px;font:600 26px/1 var(--font-body);cursor:pointer;display:grid;place-items:center;padding:0}
.lb button:hover{background:#fff}
.lb button:focus-visible{outline:3px solid #E88B6C;outline-offset:2px}
.lb-x{top:12px;right:12px;z-index:2}
.lb-p{left:8px;top:50%;transform:translateY(-50%)}
.lb-n{right:8px;top:50%;transform:translateY(-50%)}
a.shot{cursor:zoom-in}
a.shot:focus-visible{outline:3px solid var(--stamp);outline-offset:-3px}
@media (max-width:600px){.lb-stage{padding-inline:0}.lb-p,.lb-n{top:auto;bottom:64px;transform:none}.lb-p{left:12px}.lb-n{right:12px}}

/* legal page */
.legal{max-width:68ch}
.legal h3{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;margin:22px 0 4px}
.legal h3:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted);line-height:1.6}
.legal ul,.legal ol{padding-left:1.2em;margin:6px 0}
.legal li{margin:6px 0}
.legal li b{color:var(--ink)}
.fill{background:rgba(180,71,42,.14);padding:0 4px;border-radius:3px;color:var(--ink)}
.jump{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0}

/* sticky top frame */
.mast{position:sticky;top:0;z-index:20;background:var(--paper,#F3EFE6);padding-block:12px 8px}
section[id]{scroll-margin-top:96px}
@media (max-width:640px){section[id]{scroll-margin-top:150px}}
@media (max-width:640px){
  .mast{flex-direction:column;align-items:flex-start;gap:6px;padding-block:8px 6px}
  .mast nav{flex-wrap:nowrap;overflow-x:auto;width:100%;white-space:nowrap;gap:6px 16px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .mast nav a{flex:0 0 auto}
}

/* dropdown menus */
.mast nav{align-items:flex-end}
.dd{position:relative}
.dd-b{font:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:inherit;color:var(--ink);background:none;border:0;border-bottom:2px solid transparent;padding:4px 0;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.dd-b:hover,.dd.open .dd-b{color:var(--stamp)}
.dd-b[aria-current="page"]{border-bottom-color:var(--stamp)}
.dd-b i{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.dd.open .dd-b i{transform:rotate(-135deg) translate(-1px,-1px)}
.dd-m{display:none;position:absolute;left:-14px;top:100%;min-width:210px;margin:0;padding:6px 0;list-style:none;background:var(--paper,#F3EFE6);border:1px solid var(--rule-strong);box-shadow:0 8px 22px rgba(0,0,0,.14);z-index:30}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.dd.open .dd-m{display:block}
.dd-m a{display:block;padding:9px 16px;border-bottom:0!important;white-space:nowrap}
.dd-m a:hover{background:var(--plate,rgba(0,0,0,.04))}
.dd-m a[aria-current="page"]{color:var(--stamp)}
.pager.top{margin-top:14px;padding-top:0;padding-bottom:10px;border-top:0;border-bottom:1px solid var(--rule)}
.pager.top+.page-head{padding-top:30px}
@media (max-width:640px){
  .mast nav{flex-wrap:wrap;overflow-x:visible;white-space:normal;gap:2px 18px}
  .dd{position:static}
  .dd-m{position:static;box-shadow:none;border:0;border-left:2px solid var(--rule-strong);margin:4px 0 6px 4px;padding:0;min-width:0;flex-basis:100%}
  .dd::after{display:none}
  .mast nav{align-items:flex-start}
  .dd.open{flex-basis:100%}
}