/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   Brand: Counthall's Ink & copper (owner 2026-09-26): ink #202D45 for primary
   actions and headings, copper #C57650 as the warm accent, ivory #F6F2EB as
   the ground — the palette design/tokens/wardory.tokens.json carries. Links
   use a darker copper (#9A5230, 5.3:1 on ivory) so small text clears AA; in the
   dark the light copper (#D9906B) is the accent with an ink label.

   --verified is the SEMANTIC green (a clear check, paid) and deliberately not a
   brand colour since Ink & copper; the halo is copper, via --accent-2.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#f6f2eb; --bg-2:#ece5d9; --surface:#ffffff;
  --text:#202d45; --text-soft:#5a6273;
  --accent:#202d45; --accent-2:#c57650; --accent-ink:#f6f2eb;
  --accent-text:#9a5230;                 /* 5.3:1 on ivory, 5.9:1 on white — AA */
  --line:#e3dccf;
  --verified:#1b7a52; --caution:#b8862f; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 70%);
}

/* ---- dark (deep cool palette, faint blue atmosphere) ---- */
[data-theme="dark"] {
  --bg:#121826; --bg-2:#182032; --surface:#1c2435;
  --text:#ede8df; --text-soft:#a9afbc;
  --accent:#d9906b; --accent-2:#e8a784; --accent-ink:#202d45;
  --accent-text:#e2a27f;                 /* AA ≈8:1 on --bg */
  --line:#2a3346;
  --verified:#3fb585; --caution:#d9a441; --caution-text:#e3b45f;
  --chip-bg:#222b3e;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#121826; --bg-2:#182032; --surface:#1c2435;
    --text:#ede8df; --text-soft:#a9afbc;
    --accent:#d9906b; --accent-2:#e8a784; --accent-ink:#202d45;
    --accent-text:#e2a27f;
    --line:#2a3346;
    --verified:#3fb585; --caution:#d9a441; --caution-text:#e3b45f;
    --chip-bg:#222b3e;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 72%);
  }
}

/* ---- app footer: brand line + "All oomny apps" link + base row. Matches the
   umbrella footer feel; token-driven, so each brand colours its own cloud +
   accent link. Scoped to `.app-foot` so it beats site.css's element-only
   `footer …` rules (site.css loads after theme.css). ---- */
/* Clip the full-bleed divider: 100vw includes the browser's vertical scrollbar. */
.app-foot{padding:0;overflow-x:clip}
.app-foot .app-foot-brand,
.app-foot .app-foot-base{max-width:72rem;margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-size:var(--step--1);color:var(--text-soft)}
.app-foot .app-foot-brand{padding-block:var(--sp-3)}
.app-foot .app-foot-base{padding-block:var(--sp-2)}
.app-foot .oomny-line{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.app-foot .oomny-line strong{color:var(--text);font-weight:700}
.app-foot .cloud-mark{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.app-foot a.all-apps{color:var(--accent-text);font-weight:600;white-space:nowrap}
.app-foot a.all-apps:hover{color:var(--accent-text);text-decoration:underline}
.app-foot .app-foot-base .links{display:flex;gap:1.2rem;flex-wrap:wrap}
/* full-bleed hairline dividing the two rows (spans the whole footer, not the
   72rem content band) */
.app-foot .app-foot-base{position:relative}
.app-foot .app-foot-base::before{content:"";position:absolute;top:0;
  left:50%;width:100vw;transform:translateX(-50%);border-top:1px solid var(--line)}

/* ============================================================================
   "Het register" (owner brief 2026-09-29: unique, audience-built sites).
   Counthall's buyer has a legal duty and a fear of getting it wrong, so the page looks like the
   thing they trust: a ledger. Ivory ruled paper, ink type, a copper margin line, mono figures.
   The hero checks an invoice line by line; the archive is drawn as the hash chain it is.
   Scoped to [data-brand="counthall"] and wd2-* so the shared site.css keeps serving features /
   faq / support and the umbrella's branded legal pages.
   ============================================================================ */
[data-brand="counthall"]{ --wd-measure:42rem; --ink:#202d45; --copper:#c57650; --tally:#c8492b;
  background:
    linear-gradient(90deg, transparent calc(50% - 36rem - 1.7rem), color-mix(in srgb, var(--accent-2) 55%, transparent) 0 calc(50% - 36rem - 1.7rem + 1px), transparent 0),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 5%, transparent) 31px 32px),
    var(--bg); }
[data-brand="counthall"] main{ max-width:none; padding-inline:0; }
[data-brand="counthall"] .wd-col{ width:min(var(--wd-measure),100% - 2 * clamp(1.1rem,4vw,2.5rem)); margin-inline:auto; }
[data-brand="counthall"] h1, [data-brand="counthall"] h2{ font-weight:800; letter-spacing:-.035em; }
[data-brand="counthall"] .btn.primary{ border-radius:10px; }
.wd-actions .launch-live{ flex-direction:row; }
[data-brand="counthall"] .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }

/* ---- header + languages: one row, the languages a segmented control ---- */
[data-brand="counthall"] header.nav{ position:relative; z-index:5; }

@media (min-width:1000px){ [data-brand="counthall"] header.nav nav:not([data-language-picker]){ margin-right:0; } }

[data-brand="counthall"] .app-langs{ margin-top:1.8rem; gap:.55rem; }
[data-brand="counthall"] .app-langs-lead{ font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600; }

/* ---- hero ---- */
.wd2-stage{ position:relative; padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); }
.wd2-in{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
[data-brand="counthall"] .wd2-copy{ width:auto; margin:0; }
.wd2-copy h1{ margin-top:1.1rem; font-size:clamp(2.5rem,4.5vw,4.1rem); line-height:1.03; max-width:15ch; text-wrap:balance; }
.wd-lede{ margin:1.4rem 0 0; font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.55; color:var(--text); max-width:33rem; }
.wd-actions{ margin-top:1.8rem; }
.wd-actions .launch-live, .wd-actions .launch-prelaunch{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.wd2-copy .note{ margin-top:1.1rem; font-size:.9rem; color:var(--text-soft); max-width:32rem; }
.wd2-figure{ position:relative; margin:0; display:grid; justify-items:center; }
.wd2-sheet{ width:min(100%,29rem); transform:rotate(-3.2deg); filter:drop-shadow(0 34px 34px rgba(32,45,69,.22)); }
.wd2-sheet svg{ display:block; width:100%; height:auto; overflow:visible; }
.sh-paper{ fill:var(--surface); stroke:var(--line); stroke-width:1.5; }
.sh-fold{ fill:color-mix(in srgb,var(--text) 10%,var(--surface)); }
.sh-band{ fill:var(--ink); }
.sh-t{ font-family:var(--mono); font-size:13px; fill:var(--text); }
.sh-inv{ fill:#f6f2eb; font-weight:700; letter-spacing:.06em; }
.sh-mut{ fill:#a9b0c0; font-size:11px; }
.sh-k{ fill:var(--accent-text); font-size:11.5px; letter-spacing:.04em; }
.sh-v{ fill:var(--text); font-size:13px; }
.sh-big{ font-size:24px; font-weight:800; fill:var(--text); }
.sh-r{ text-anchor:end; }
.sh-bar{ fill:color-mix(in srgb,var(--text) 14%,transparent); }
.sh-bar.sh-s{ fill:color-mix(in srgb,var(--text) 9%,transparent); }
.sh-rule{ stroke:var(--line); stroke-width:1.5; }
.sh-rule.sh-heavy{ stroke:var(--ink); stroke-width:2; }
.sh-ok{ fill:var(--verified); font-weight:700; font-size:12px; letter-spacing:.06em; }
.sh-tick, .st-tick{ fill:none; stroke:var(--verified); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sh-scan, .sh-scanline{ display:none; }
.sh-stamp{ opacity:.96; }
.st-ring{ fill:none; stroke:var(--tally); stroke-width:3.5; }
.st-ring.st-thin{ stroke-width:1.2; }
.st-t{ fill:var(--tally); font-weight:800; font-size:17px; letter-spacing:.04em; }
.st-tick{ stroke:var(--tally); }
.wd2-phone{ position:absolute; right:-3%; bottom:1.5rem; z-index:3; filter:drop-shadow(0 30px 30px rgba(32,45,69,.35)); }
.wd2-phone .device{ --dv-scale:.44; --rot:3.5deg; }
.wd2-figure figcaption{ margin-top:1.6rem; font-size:var(--step--1); color:var(--text-soft); text-align:left; max-width:15rem; justify-self:start; }
/* the check runs once, only when script armed it */
@media (prefers-reduced-motion:no-preference){
  .wd2-sheet.is-armed .sh-row, .wd2-sheet.is-armed .sh-stamp{ opacity:0; }
  .wd2-sheet.is-armed .sh-scan, .wd2-sheet.is-armed .sh-scanline{ display:block; opacity:0; }
  .wd2-sheet.is-live .sh-scan{ animation:wd-scan 3.4s cubic-bezier(.45,.05,.4,1) both; }
  .wd2-sheet.is-live .sh-scanline{ stroke:var(--copper); stroke-width:2; animation:wd-scanline 3.4s cubic-bezier(.45,.05,.4,1) both; }
  .wd2-sheet.is-live .sh-row{ animation:wd-row .5s var(--d,0s) both; }
  .wd2-sheet.is-live .sh-stamp{ transform-box:fill-box; transform-origin:center; animation:wd-stamp .55s 3.3s cubic-bezier(.3,1.5,.5,1) both; }
  @keyframes wd-scan{ 0%{ transform:translateY(0); opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(470px); opacity:0; } }
  @keyframes wd-scanline{ 0%{ transform:translateY(0); opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(470px); opacity:0; } }
  @keyframes wd-row{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
  @keyframes wd-stamp{ from{ opacity:0; transform:scale(1.9) rotate(-12deg); } to{ opacity:.96; transform:scale(1) rotate(0); } }
}

/* ---- the four beats, with a rail that follows the reader ---- */
.wd2-beats{ border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); }
.wd2-beats-in{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); display:grid;
  grid-template-columns:15rem minmax(0,1fr); gap:clamp(2rem,5vw,5rem); }
.wd2-rail{ position:sticky; top:2rem; align-self:start; display:grid; gap:.2rem; padding-top:clamp(2rem,5vw,3.4rem); }
.wd2-rail a{ display:grid; grid-template-columns:2.4rem 1fr; align-items:baseline; gap:.5rem; padding:.7rem .6rem;
  border-radius:10px; text-decoration:none; color:var(--text-soft); font-weight:650; font-size:.98rem; line-height:1.25;
  border-left:3px solid transparent; transition:color .2s, background .2s, border-color .2s; }
.wd2-rail a i{ font-style:normal; font-family:var(--mono); font-size:.8rem; color:var(--accent-text); }
.wd2-rail a.is-on{ color:var(--text); background:var(--surface); border-left-color:var(--copper); }
.wd2-beats-list{ min-width:0; }
.wd-beat{ display:grid; grid-template-columns:3.6rem minmax(0,1fr); gap:1.2rem; padding:clamp(2rem,4.5vw,3.2rem) 0;
  border-bottom:1px solid var(--line); scroll-margin-top:1rem; }
.wd-beat:last-child{ border-bottom:0; }
.wd-num{ font-family:var(--mono); font-size:var(--step-2); font-weight:400; color:var(--accent-text); line-height:1.1; }
.wd-beat h2{ font-size:clamp(1.7rem,3vw,2.5rem); }
.wd-beat p{ margin:.9rem 0 0; color:var(--text-soft); max-width:36rem; }
.wd-beat p:first-of-type{ color:var(--text); }
.wd-beat-figure{ grid-template-columns:3.6rem minmax(0,1fr) auto; }
.wd-beat-still{ display:grid; align-content:start; }
.wd-beat-still .device{ --dv-scale:.5; --rot:0deg; }

/* ---- the archive: a hash chain, and the years it has to last ---- */
.wd2-archive{ background:var(--ink); color:#ede8df; --text:#ede8df; --text-soft:#b5bccb; --accent-text:#e2a27f;
  --line:#33405a; --surface:#1c2435; padding-block:clamp(3.5rem,8vw,6rem); }
.wd2-archive-in{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.wd2-archive h2{ margin-top:1rem; font-size:clamp(2rem,4vw,3.4rem); line-height:1.03; }
.wd2-archive p{ margin:1rem 0 0; color:var(--text-soft); max-width:34rem; }
.wd2-archive .eyebrow{ color:#e2a27f; }
.wd-archive .more{ color:#e2a27f; font-weight:650; text-decoration:none; }
.wd-archive .more:hover{ text-decoration:underline; }
.wd2-chain{ grid-column:1 / -1; order:3; padding-top:1rem; }
.wd2-chain svg{ display:block; width:100%; height:auto; overflow:visible; }
.ch-blk rect{ fill:#26314a; stroke:#4a587a; stroke-width:1.5; }
.ch-n{ font-family:var(--mono); font-size:13px; fill:#e2a27f; font-weight:700; }
.ch-h{ font-family:var(--mono); font-size:15px; fill:#fff; font-weight:700; letter-spacing:.03em; }
.ch-p{ font-family:var(--mono); font-size:12px; fill:#8f9bb5; }
.ch-link path{ stroke:#c57650; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:4 5; fill:none; }
.ch-link .ch-open{ opacity:.45; }
.wd2-years{ display:flex; gap:0; margin-top:1.4rem; height:2.4rem; }
.wd2-years span{ position:relative; display:flex; align-items:center; padding-inline:.8rem; font-family:var(--mono);
  font-size:.85rem; letter-spacing:.06em; color:#14192a; }
.wd2-years b{ font-size:1.05rem; margin-right:.5rem; }
.wd2-years span::after{ content:attr(data-c); font-weight:700; }
.y-de{ flex:8; background:repeating-linear-gradient(90deg,#c57650 0 calc(12.5% - 3px),#202d45 calc(12.5% - 3px) 12.5%); border-radius:8px 0 0 8px; }
.y-nl{ flex:7; background:repeating-linear-gradient(90deg,#e2a27f 0 calc(14.285% - 3px),#202d45 calc(14.285% - 3px) 14.285%); border-radius:0 8px 8px 0; }
.wd2-archive .wd-archive-still{ order:2; justify-self:center; }
.wd2-archive .wd-archive-still .device{ --dv-scale:.5; --rot:2deg; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.wd2-archive-in .wd2-chain{ grid-column:1 / -1; }
@media (prefers-reduced-motion:no-preference){
  .wd2-chain.is-armed .ch-blk, .wd2-chain.is-armed .ch-link{ opacity:0; transform:translateY(18px); }
  .wd2-chain.is-live .ch-blk, .wd2-chain.is-live .ch-link{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .wd2-chain.is-live .ch-blk[style*="--n:1"], .wd2-chain.is-live .ch-link{ transition-delay:.18s; }
  .wd2-chain.is-live .ch-blk[style*="--n:2"]{ transition-delay:.36s; } .wd2-chain.is-live .ch-blk[style*="--n:3"]{ transition-delay:.54s; }
  .ch-blk, .ch-link{ transform-box:fill-box; }
}

/* ---- price: a slip ---- */
.wd-price{ position:relative; max-width:44rem; margin:clamp(3rem,7vw,5rem) auto; padding:clamp(2rem,5vw,3rem);
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 60px -40px rgba(32,45,69,.4);
  width:auto; }
.wd-price::before, .wd-price::after{ content:""; position:absolute; left:0; right:0; height:10px;
  background:radial-gradient(circle at 10px 0, transparent 6px, var(--bg) 6.5px) 0 0/20px 10px repeat-x; }
.wd-price::before{ top:-10px; transform:scaleY(-1); } .wd-price::after{ bottom:-10px; }
.wd-price-row{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-top:.9rem; }
.wd-amt{ font-family:var(--display); font-size:clamp(3.6rem,9vw,6.4rem); font-weight:800; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; line-height:1; background:linear-gradient(transparent 82%, color-mix(in srgb,var(--copper) 45%,transparent) 82% 92%, transparent 92%); }
.wd-once{ color:var(--text-soft); max-width:16rem; }
.wd-price p{ margin:1.2rem 0 0; color:var(--text-soft); }
@media (max-width:999px){ [data-brand="counthall"] .wd-price{ margin-inline:clamp(1.1rem,4vw,2.5rem); } }

/* ---- questions: a ledger list ---- */
[data-brand="counthall"] .wd-faq{ max-width:var(--wd-measure); padding-inline:clamp(1.1rem,4vw,2.5rem); box-sizing:content-box;
  counter-reset:q; }
[data-brand="counthall"] .wd-faq details{ counter-increment:q; background:var(--surface); }
[data-brand="counthall"] .wd-faq summary{ display:grid; grid-template-columns:2.2rem 1fr auto; align-items:baseline; gap:.4rem; }
[data-brand="counthall"] .wd-faq summary::before{ content:counter(q,decimal-leading-zero); font-family:var(--mono); font-size:.8rem; color:var(--accent-text); }
[data-brand="counthall"] .wd-faq summary::after{ float:none; }
[data-brand="counthall"] .benefit{ min-width:0; overflow-wrap:anywhere; }
[data-brand="counthall"] #how-its-made .wrap{ max-width:calc(var(--wd-measure) + 2 * clamp(1.1rem,4vw,2.5rem)); }

@media (max-width:999px){
  .wd2-in{ grid-template-columns:minmax(0,1fr); }
  .wd2-figure{ margin-top:1.5rem; }
  .wd2-sheet{ width:min(88%,26rem); margin-right:auto; }
  .wd2-phone{ position:relative; right:auto; bottom:auto; margin:-9rem 0 0 auto; }
  .wd2-figure figcaption{ max-width:none; justify-self:start; }
  .wd2-beats-in{ grid-template-columns:minmax(0,1fr); }
  .wd2-rail{ display:none; }
  .wd2-archive-in{ grid-template-columns:minmax(0,1fr); }
  .wd-beat-figure{ grid-template-columns:3.6rem minmax(0,1fr); }
  .wd-beat-still{ grid-column:2; justify-items:start; margin-top:1.2rem; }
  [data-brand="counthall"]{ background:repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 5%, transparent) 31px 32px), var(--bg); }
}
@media (max-width:520px){
  .wd2-phone .device{ --dv-scale:.4; }
  .wd2-years span{ padding-inline:.4rem; font-size:.7rem; }
  .wd2-years b{ margin-right:.25rem; }
  .wd-beat{ grid-template-columns:2.6rem minmax(0,1fr); gap:.8rem; }
  .wd-beat-figure{ grid-template-columns:2.6rem minmax(0,1fr); }
  .wd2-copy h1{ font-size:2.35rem; }
}

/* ---- launch swap ----
   Wording and store link derive from ONE fact (app.toml [store] app_store_url /
   play_store_url, via {{launchState}} + the badge states), so a page can never say
   "coming soon" beside a working store button. Per-brand rules by design: site.css is
   byte-identical across sites and not the place (see maythorn/tondo theme.css). */
.hero-actions .launch-live, .hero-actions .launch-prelaunch,
.cta-row .launch-live, .cta-row .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }


/* ============================================================================
   Round 3 (owner feedback 2026-09-29): Counthall's hero stops being copy-left / object-right. It is a
   LETTERHEAD: the headline runs the full width like the title of a document, the sheet being checked
   sits in the right-hand margin under it, and the explanation and the actions sit in the left column
   like the body of a letter. DOM order is unchanged (the copy column dissolves into the grid).
   ============================================================================ */
@media (min-width:900px){
  .wd2-in{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); grid-template-rows:auto auto; align-content:start; column-gap:clamp(2rem,5vw,4.5rem); row-gap:0; align-items:start; }
  [data-brand="counthall"] .wd2-copy{ display:contents; }
  .wd2-copy > .eyebrow{ grid-column:1 / -1; grid-row:1; justify-self:start; }
  .wd2-copy > h1{ grid-column:1 / -1; grid-row:2; max-width:none; font-size:clamp(3rem,6.6vw,6.2rem); line-height:.98; letter-spacing:-.03em;
    margin:1rem 0 2.2rem; border-bottom:3px double var(--ink); padding-bottom:1.6rem; text-wrap:balance; }
  .wd2-copy > :not(.eyebrow):not(h1){ grid-column:1; }
  .wd2-figure{ grid-column:2; grid-row:3 / span 6; align-self:start; margin-top:0; }
  .wd2-sheet{ transform:rotate(2.2deg); }
  .wd2-phone{ right:auto; left:-16%; bottom:5.5rem; }
  .wd2-figure figcaption{ justify-self:end; text-align:right; }
}