/*
 * Embalo — the public site.
 *
 * ⚠️ The palette and typefaces are NOT chosen here. They are the ones settled in
 * `docs/brand-foundation.html` on 1 September 2026 — direction "A · Instrument": cool paper,
 * azulejo blue, figures always in the mono face. Copied rather than imported because this site
 * deploys on its own, and a second palette invented for the marketing pages is how a brand starts
 * meaning two different things. If the foundation changes, this file changes with it.
 */
:root {
  --paper:#F2F4F6; --card:#FFFFFF; --sunk:#E7EBEF;
  --ink:#10161C; --muted:#55606D; --dim:#7C8794;
  --rule:#D8DEE5; --rule-strong:#B9C3CC;
  --accent:#17627F; --accent-soft:#DDEAF0;
  --ochre:#A9702A; --ochre-soft:#F5EADA;
  --pos:#2C6B52; --neg:#A4392F;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0D1319; --card:#141C23; --sunk:#0A1015;
    --ink:#E6EBF0; --muted:#96A2AE; --dim:#74808C;
    --rule:#23303A; --rule-strong:#35454F;
    --accent:#6FB6D4; --accent-soft:#16303D;
    --ochre:#DDA858; --ochre-soft:#2B2213;
    --pos:#6DBF98; --neg:#E0897E;
  }
}
:root[data-theme="dark"] {
  --paper:#0D1319; --card:#141C23; --sunk:#0A1015;
  --ink:#E6EBF0; --muted:#96A2AE; --dim:#74808C;
  --rule:#23303A; --rule-strong:#35454F;
  --accent:#6FB6D4; --accent-soft:#16303D;
  --ochre:#DDA858; --ochre-soft:#2B2213;
  --pos:#6DBF98; --neg:#E0897E;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;padding:0 1.4rem 5rem;}
.wrap{max-width:44rem;margin:0 auto;}
.wide{max-width:52rem;}
p{margin:0 0 1rem;max-width:66ch;}
a{color:var(--accent);}
strong,b{font-weight:700;}
code{font-family:var(--mono);font-size:.86em;background:var(--sunk);
  padding:.1em .34em;border-radius:2px;}

/* masthead ------------------------------------------------------------- */
header.site{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:2rem 0 1.1rem;border-bottom:1px solid var(--rule);}
/*
 * ⚠️ Mark A · "The Swing", from `design/embalo-identity/MarkOptions.dc.html` — the recommended
 * lead of four. A pendulum path that dips, recovers, and closes higher than it opened, with the
 * dot marking where you stand. The identity set notes its trade-off: it reads as a smile at very
 * small sizes if the asymmetry is lost, which is why the 24px variant is drawn with a HEAVIER
 * stroke rather than scaled down from the 72px one. That heavier variant is the one used here.
 *
 * It is the only one of the four marks that admits losing, which is the right thing for a product
 * whose whole argument is honest record-keeping.
 */
.wordmark{font-family:var(--display);font-weight:800;font-size:1.4rem;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;}
.wordmark .mark{width:1.15em;height:1.15em;color:var(--accent);flex:none;
  /* Nudged to sit on the wordmark's optical baseline rather than its box. */
  transform:translateY(.02em);}
nav.site{display:flex;gap:1.3rem;font-size:.9rem;}
nav.site a{text-decoration:none;color:var(--muted);}
nav.site a:hover,nav.site a[aria-current]{color:var(--accent);}

/* hero ----------------------------------------------------------------- */
.hero{padding:3.4rem 0 2.6rem;border-bottom:1px solid var(--rule);}
.hero h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.04;letter-spacing:-.025em;
  margin:0 0 1.1rem;text-wrap:balance;}
.claim{font-size:clamp(1.05rem,2.4vw,1.28rem);color:var(--accent);margin:0 0 1.4rem;}
.lede{font-size:1.05rem;color:var(--muted);max-width:52ch;}

/* the honest box — the constraint, stated up front ---------------------- */
.constraint{background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:0 7px 7px 0;
  padding:1.15rem 1.35rem;margin:2rem 0;}
.constraint p{font-size:.95rem;margin:0;}
.constraint p + p{margin-top:.6rem;}

section.band{padding:2.6rem 0;border-bottom:1px solid var(--rule);}
h2{font-family:var(--display);font-weight:700;font-size:1.42rem;
  letter-spacing:-.015em;margin:0 0 1.1rem;}
h3{font-size:1rem;font-weight:700;margin:0 0 .35rem;}
.eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:0 0 1rem;}

.steps{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin:0;padding:0;list-style:none;counter-reset:s;}
.steps li{counter-increment:s;}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--accent);display:block;margin-bottom:.5rem;}
.steps p{font-size:.94rem;color:var(--muted);margin:0;}

/* figures always in the mono face — brand rule -------------------------- */
.fig{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}

.plans{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:1.4rem 0 0;}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;}
.plan.pick{border-color:var(--accent);}
.plan .tier{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);}
.plan .amt{font-family:var(--mono);font-weight:600;font-size:2rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.plan .amt span{font-size:.9rem;font-weight:500;color:var(--muted);}
.plan p{font-size:.9rem;color:var(--muted);margin:0;}

/* long-form policy pages ------------------------------------------------ */
.doc h2{font-size:1.18rem;padding-top:1.6rem;margin-top:1.6rem;
  border-top:1px solid var(--rule);}
.doc h2:first-of-type{border-top:0;margin-top:.6rem;padding-top:0;}
.doc ul{padding-left:1.15rem;}
.doc li{margin-bottom:.45rem;max-width:66ch;}
.doc .updated{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);}
.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:30rem;}
th{text-align:left;font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  padding:0 .8rem .5rem 0;border-bottom:1px solid var(--ink);}
td{padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--rule);vertical-align:top;}
td:last-child,th:last-child{padding-right:0;}

footer.site{padding:2.2rem 0 0;color:var(--dim);font-size:.86rem;}
footer.site a{color:var(--muted);}
footer.site nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:.9rem;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ── the preview page ──────────────────────────────────────────────────────
   ⚠️ Unlisted on purpose. It exists so Ben can show family what he is building;
   it is not linked from the nav and is not for distribution. */
.unlisted { background:var(--ochre-soft); border:1px solid var(--ochre);
  border-radius:6px; padding:.7rem 1rem; font-size:.86rem; color:var(--ochre);
  display:inline-block; margin-bottom:1.6rem; }
.ads { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.ad { background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.75rem; min-height:19rem; }
.ad .kicker { font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); }
.ad h3 { font-family:var(--display); font-weight:800; font-size:1.32rem;
  line-height:1.14; letter-spacing:-.02em; text-wrap:balance; }
.ad p { font-size:.92rem; color:var(--muted); margin:0; }
.ad .stats { margin-top:auto; display:flex; flex-direction:column; gap:.5rem;
  padding-top:1rem; border-top:1px solid var(--rule); }
.ad .stat { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.ad .stat b { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:1.05rem; }
.ad .stat span { font-size:.82rem; color:var(--dim); }
.up{color:var(--pos);} .down{color:var(--neg);}
/* ⚠️ ONE screen, shown at a readable size, beside the words. The first version of this page was a
   five-up gallery of thumbnails — and three of them were 28 August renders of screens redesigned
   twice since. Fewer images, checked, beats more images unchecked. */
.showcase { display:grid; gap:2rem; align-items:start; }
@media (min-width:56rem){ .showcase{ grid-template-columns:19rem 1fr; gap:3rem; } }
.showcase img { width:100%; height:auto; display:block; border:1px solid var(--rule);
  border-radius:12px; background:var(--card); }
.showcase figure { margin:0; display:flex; flex-direction:column; gap:.65rem; }
.showcase figcaption { font-size:.82rem; color:var(--dim); font-family:var(--mono);
  line-height:1.55; }
.points { display:flex; flex-direction:column; gap:1.5rem; }
.point h3 { font-family:var(--display); font-weight:700; font-size:1.08rem; margin-bottom:.3rem; }
.point p { font-size:.95rem; color:var(--muted); margin:0; }
.nevers { display:grid; gap:.55rem; margin:1.2rem 0 0; padding:0; list-style:none; }
.nevers li { display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; align-items:baseline;
  font-size:.95rem; }
.nevers li::before { content:"—"; color:var(--neg); font-weight:700; }
.swatches { display:flex; flex-wrap:wrap; gap:.7rem; }
.sw { width:3.4rem; height:3.4rem; border-radius:7px; border:1px solid var(--rule); }