/* ===========================================================================
   thetaadvisory.ca — homepage only (index.html).

   Built from the 2026-10 homepage revamp, mockup D ("story, with the
   details"): mockup C's editorial rhythm carrying mockup B's product detail.
   The legal and support pages keep css/site.css; this file is self-contained
   (fonts, tokens, header, footer) so the two cannot fight over specificity.

   Same traps as site.css (see README.md): link colour lives on the bare `a`
   so any class can beat it, and Poiret One has no U+0398 or U+2192.
   =========================================================================== */

/* ---- base ---- */
@font-face{
  font-family:'Poiret One';
  src:url('/fonts/poiret-one-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Roboto';
  src:url('/fonts/roboto-latin-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --ink:#302058;
  --ink-2:#4C3D71;
  --muted:#7A6E92;
  --faint:#A79CBC;
  --lav:#D0B9F1;
  --page:#F7F3FC;
  --card:#FFFFFF;
  --line:#E7E0F0;
  --line-2:#D3C8E6;
  --tint:#F0E8FB;
  --card-border:#DDD2EE;
  --on-ink:#EDE2FD;

  --lift-1:0 1px 2px rgba(28,16,54,.05), 0 10px 28px -12px rgba(28,16,54,.14);
  --lift-2:0 2px 6px rgba(28,16,54,.07), 0 22px 48px -16px rgba(28,16,54,.20);
  --lift-3:0 4px 10px rgba(28,16,54,.06), 0 40px 80px -24px rgba(28,16,54,.28);

  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --spring:cubic-bezier(.22,.94,.24,1.02);

  --display:'Poiret One','Century Gothic','Futura',sans-serif;
  --body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--card); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400; text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--ink); text-decoration-color:var(--line-2); text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px; margin:0 auto; padding:0 40px}
.eyebrow{
  font-size:11px; text-transform:uppercase; letter-spacing:1.8px;
  color:var(--muted); font-weight:500;
}

/* -------------------------------- header -------------------------------- */
.mark{
  font-family:var(--display); font-size:25px; letter-spacing:.5px; line-height:1;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3em;
}
.mark svg{width:.70em; height:.88em; flex:none; overflow:visible}
.head{position:sticky; top:0; z-index:20; padding:14px 0;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(170%) blur(20px); -webkit-backdrop-filter:saturate(170%) blur(20px);
  box-shadow:0 1px 0 rgba(48,32,88,.06);
}
.head .wrap{display:flex; align-items:center; gap:22px}
.nav{display:flex; gap:4px; margin-left:auto; font-size:13.5px; align-items:center}
.nav a{color:var(--ink-2); text-decoration:none; padding:6px 12px; border-radius:var(--r-pill)}
.nav a:hover{background:rgba(48,32,88,.07); color:var(--ink)}
.nav .btn{margin-left:8px; padding:8px 16px; font-size:13px}
/* .nav a outranks .btn-solid on specificity: re-state the button colours. */
.nav a.btn-solid{color:var(--on-ink)}
.nav a.btn-solid:hover{background:#3D2A6E; color:#fff}
.wrap .eyebrow{font-size:11px; color:var(--muted); font-weight:500}

/* -------------------------------- buttons ------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500; padding:13px 24px; line-height:1.2;
  border-radius:var(--r-pill); text-decoration:none; border:1px solid transparent;
  transition:background 160ms var(--spring), box-shadow 280ms var(--spring), transform 160ms var(--spring);
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--ink); color:var(--on-ink); border-color:var(--ink); box-shadow:var(--lift-1)}
.btn-solid:hover{background:#3D2A6E; color:#fff; box-shadow:var(--lift-2)}
.btn-out{background:rgba(255,255,255,.7); color:var(--ink); border-color:var(--line-2)}
.btn-out:hover{background:#fff; border-color:var(--ink)}
.btn-light{background:#fff; color:var(--ink); border-color:#fff}
.btn-light:hover{background:var(--on-ink)}
.btn-ghost-dark{background:transparent; color:var(--on-ink); border-color:rgba(237,226,253,.4)}
.btn-ghost-dark:hover{border-color:var(--on-ink); color:#fff}
.acts{display:flex; flex-wrap:wrap; gap:10px}

/* ===================== the workbook + Blink composite ====================
   An illustrative Excel window: a real-looking prepaid schedule on the left,
   the Blink task pane on the right, cropped live from the existing listing
   screenshot 02-journals.webp (whose journal is this same June amortization,
   8,530.00). Numbered pins match the legend beside it.

   The pane crop: in the 1366x768 source, the pane sits at x 741-1111,
   y 115-653 (370 x 538). Percent offsets are derived from those numbers —
   left/width against the crop's width, top against its height. */
.wb{
  border-radius:var(--r-lg); background:#fff; overflow:hidden;
  box-shadow:var(--lift-3), 0 0 0 1px var(--card-border);
  text-align:left;
}
.wb-bar{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#F6F4F9; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2);
}
.wb-bar img{width:16px; height:16px}
.wb-bar .dots{display:flex; gap:6px; margin-right:6px}
.wb-bar .dots i{width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block}
.wb-bar .file{font-weight:500; color:var(--ink)}
.wb-bar .tab{margin-left:auto; color:var(--muted)}
.wb-body{display:grid; grid-template-columns:minmax(0,1fr) 300px; background:#fff}
.wb-sheet{position:relative; padding:0 0 14px; border-right:1px solid var(--line); overflow:hidden}
.wb-formula{
  display:flex; gap:10px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--line);
  font-size:12px; color:var(--muted);
}
.wb-formula .ref{width:44px; color:var(--ink-2)}
.wb-formula code{font-family:Consolas,'SF Mono',Menlo,monospace; color:var(--ink-2); font-size:11.5px}
.wb table{border-collapse:collapse; width:100%; font-size:12.5px; font-variant-numeric:tabular-nums}
.wb th,.wb td{border:1px solid #EEEAF3; padding:5px 9px; white-space:nowrap; text-align:right}
.wb thead th{background:#F6F4F9; color:var(--muted); font-weight:400; font-size:11px; text-align:center; padding:3px}
.wb tbody th{background:#F6F4F9; color:var(--muted); font-weight:400; font-size:11px; width:30px; text-align:center; padding:3px}
.wb td.l{text-align:left}
.wb .title td{font-weight:600; color:var(--ink); border-color:transparent; padding-top:10px}
.wb .meta td{color:var(--ink-2); border-color:transparent}
.wb .hdr td{font-weight:600; color:var(--ink); background:var(--tint); border-color:#E4DAF2}
.wb .sel td{background:#F3EDFC}
.wb .sel td.am{outline:2px solid var(--ink); outline-offset:-2px; background:#fff; font-weight:600}
.wb .calc{color:var(--ink)}

.wb-pane{position:relative; background:var(--page); display:flex; align-items:flex-start; justify-content:center; padding:0}
.crop{position:relative; width:100%; aspect-ratio:370/538; overflow:hidden}
.crop img{
  position:absolute; max-width:none; width:369.19%; height:auto;
  left:-200.27%; top:-21.375%;
}

.pin{
  position:absolute; z-index:2; width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; line-height:26px;
  text-align:center; box-shadow:0 0 0 4px rgba(208,185,241,.75), 0 4px 10px rgba(28,16,54,.25);
  font-family:var(--body);
}
.pin-i{position:static; display:inline-block; vertical-align:middle; margin:-4px 8px -2px 0;
  width:22px; height:22px; line-height:22px; font-size:11.5px; box-shadow:0 0 0 3px rgba(208,185,241,.75)}
/* Pane pins are centred on (left, top), in percent of the crop, placed in
   the white space beside the thing they point at so they never cover text. */
.p3,.p4,.p5,.p6{transform:translate(-50%,-50%)}
.p3{left:84%; top:70.6%}
.p4{left:38%; top:52.8%}
.p5{left:38%; top:61.2%}
.p6{left:75%; top:36.2%}

.legend{list-style:none; margin:0; padding:0; counter-reset:l; display:grid; gap:14px}
.legend li{counter-increment:l; position:relative; padding-left:42px}
.legend li::before{
  content:counter(l); position:absolute; left:0; top:1px; width:26px; height:26px;
  border-radius:50%; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600;
  display:grid; place-items:center;
}
.legend b{display:block; font-weight:500; color:var(--ink); font-size:15px}
.legend span{display:block; color:var(--ink-2); font-size:14px; line-height:1.55}

/* ------------------------- the theta-wave hairline ------------------------ */
.wave{position:absolute; inset:auto 0 0 0; width:100%; height:120px; pointer-events:none}
.wave path{fill:none; stroke:var(--ink); stroke-width:1.2; opacity:.18}
.wave path+path{opacity:.09}

/* --------------------------------- footer -------------------------------- */
.foot{border-top:1px solid var(--line); padding:28px 0 40px; font-size:12.5px; color:var(--muted)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:baseline}
.foot .links{display:flex; flex-wrap:wrap; gap:4px; margin-left:auto}
.foot a{color:var(--ink-2); text-decoration:none; padding:4px 10px; border-radius:var(--r-pill)}
.foot a:hover{background:var(--tint)}

@media (max-width:860px){
  .wrap{padding:0 20px}
  .nav a:not(.btn){display:none}
  .mark{font-size:21px}
  .wb-body{grid-template-columns:1fr}
  .wb-sheet{border-right:0; border-bottom:1px solid var(--line)}
  .wb-pane{padding:18px 0 0}
  .wb-pane .crop{max-width:300px}
  .wb .hide-sm{display:none}
  /* phone: drop the Closing column (D) so the sheet fits without clipping */
  .wb thead tr>:nth-child(5),.wb tbody tr:not(.title)>:nth-child(5){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---- editorial layout (mockup C) ---- */
h2{font-family:var(--display); font-size:52px; line-height:1.08; letter-spacing:.2px}
.kicker{font-size:12px; letter-spacing:1.8px; text-transform:uppercase; font-weight:500; color:var(--muted); margin-bottom:18px}

/* hero */
.hero{position:relative; overflow:hidden; background:var(--lav); padding:96px 0 150px}
.hero h1{font-family:var(--display); font-size:104px; line-height:.98; letter-spacing:-.5px; position:relative; z-index:1}
.hero-foot{display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end; margin-top:56px; position:relative; z-index:1}
.hero .sub{font-size:19px; color:var(--ink); max-width:48ch}
.hero .cred{margin-top:16px; font-size:13.5px; color:var(--ink); opacity:.78; text-align:right}
.hero .wave{height:220px; bottom:-20px}
.hero .wave path{stroke-width:1.4; opacity:.28}

/* statement */
.statement{padding:120px 0 100px}
.statement .huge{font-family:var(--display); font-size:46px; line-height:1.2; max-width:24ch}
.statement em{font-style:normal; background:linear-gradient(transparent 62%, var(--lav) 62%)}
.statement .cols{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:56px; max-width:900px; border-top:1px solid var(--line-2); padding-top:28px}
.statement .cols p{font-size:18px; color:var(--ink-2)}
.statement .strong{color:var(--ink) !important; font-weight:500}

/* proof */
.proof{padding:40px 0 120px}
.proof-grid{display:grid; grid-template-columns:340px minmax(0,1fr); gap:56px; align-items:start}
.proof-copy h2{font-size:42px; margin-bottom:34px}
.proof-shot{position:sticky; top:96px}
.proof-shot .wb-body{grid-template-columns:minmax(0,1fr) 236px}
.proof-shot .wb .hide-sm{display:none}
.proof-shot .wb th,.proof-shot .wb td{padding:5px 7px; font-size:12px}
.proof-shot .wb thead th,.proof-shot .wb tbody th{font-size:10.5px; padding:3px}

/* origin */
.origin{background:var(--ink); color:#fff; padding:120px 0}
.origin .kicker{color:#BFB2DA}
.origin h2{font-size:60px; color:#fff}
.origin-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; margin-top:64px}
.litany{list-style:none; padding:0; margin:0; display:grid; gap:2px}
.litany li{font-family:var(--display); font-size:34px; line-height:1.4; color:var(--on-ink)}
.litany li:last-child{color:#fff}
.origin-copy p{font-size:17.5px; color:var(--on-ink)}
.origin-copy p+p{margin-top:16px}
.origin-copy .pull{margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.2); font-size:21px; color:#fff; line-height:1.5}

/* four words */
.words{padding:120px 0}
.words-head{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end}
.words-head p{font-size:18px; color:var(--ink-2)}
.four{margin:64px 0 0; display:grid; grid-template-columns:1fr; border-top:1px solid var(--line-2)}
.four div{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line-2)}
.four dt{font-family:var(--display); font-size:64px; line-height:1}
.four dd{margin:0; font-size:17px; color:var(--ink-2); max-width:40ch}

/* implementation */
.impl{background:var(--page); padding:110px 0}
.impl-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.impl h2{font-size:46px}
.impl .body{margin-top:22px; font-size:18px; color:var(--ink-2)}
.fine{margin-top:22px; font-size:13px; color:var(--muted)}
.strike{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.strike li{font-family:var(--display); font-size:28px; line-height:1.25; color:var(--muted)}
.strike s{text-decoration-thickness:2px; text-decoration-color:var(--ink)}

/* cta */
.cta{padding:120px 0}
.note{max-width:780px; margin:0 auto; padding:60px 64px; background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--lift-3), inset 0 0 0 1px var(--line); position:relative}
.note::before{content:''; position:absolute; inset:0 0 auto 0; height:8px; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--lav)}
.note h2{font-size:56px}
.note>p:not(.kicker):not(.sig){margin-top:20px; font-size:19px; color:var(--ink-2)}
.note .acts{margin-top:30px}
.sig{margin-top:34px; font-family:var(--display); font-size:24px}

/* close */
.close{position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:110px 0 190px}
.close .lead{font-size:20px; color:var(--on-ink); max-width:52ch}
.close h2{font-size:92px; line-height:1; color:#fff; margin-top:40px}
.close .acts{margin-top:40px}
.close .wave path{stroke:#fff; opacity:.22}

@media (max-width:980px){
  .proof-grid{grid-template-columns:1fr}
  .proof-shot{position:static}
}
@media (max-width:860px){
  h2{font-size:36px}
  .hero{padding:56px 0 110px}
  .hero h1{font-size:54px}
  .hero-foot{grid-template-columns:1fr; gap:28px; margin-top:32px}
  .hero .cred{text-align:left}
  .hero .wave{height:90px; bottom:0}
  .proof-shot .wb-body{grid-template-columns:1fr}
  .statement,.words,.origin,.impl,.cta{padding:76px 0}
  .statement .huge{font-size:30px}
  .statement .cols,.words-head,.origin-grid,.impl-grid{grid-template-columns:1fr; gap:28px}
  .origin h2,.note h2,.impl h2{font-size:38px}
  .litany li{font-size:24px}
  .four div{grid-template-columns:1fr; gap:8px}
  .four dt{font-size:44px}
  .strike li{font-size:24px}
  .note{padding:40px 24px}
  .close h2{font-size:52px}
}

/* ---- additions (mockup D) ---- */
.apps-pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:6px 14px 6px 10px; border-radius:var(--r-pill);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:13px; font-weight:500; color:var(--ink-2);
}
.apps-pill span{display:inline-flex; gap:4px}
.apps-pill img{width:16px; height:16px}

/* ledger: the main value */
.ledger{padding:40px 0 120px}
.ledger-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start}
.ledger h2{font-size:52px}
.ledger .body{margin-top:20px; font-size:18px; color:var(--ink-2); max-width:46ch}
.rlist{list-style:none; padding:0; margin:8px 0 0; border-top:1px solid var(--line-2)}
.rlist li{display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line-2)}
.rlist b{font-weight:500; font-size:16.5px}
.rlist span{font-size:13px; color:var(--muted); white-space:nowrap}

/* proof: legend reads as the step list, so give it a little more air */
.proof{background:var(--page); padding:110px 0}
.proof-copy .legend{gap:18px}

/* hooks */
.carry{padding:110px 0 40px}
.carry h2{font-size:44px}
.chain{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:12px 0; align-items:center}
.chain li{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  padding:8px 16px; border-radius:var(--r-pill); background:var(--tint)}
.chain li:first-child{background:var(--ink); color:#fff}
.chain li img{width:18px; height:18px}
.chain li+li{margin-left:34px; position:relative}
.chain li+li::before{content:'\2192'; position:absolute; left:-24px; color:var(--faint)}
.hooks{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px}
.hooks p{font-size:16.5px; color:var(--ink-2)}
.hooks b{color:var(--ink); font-weight:500}


@media (max-width:860px){
  .ledger-grid,.hooks{grid-template-columns:1fr; gap:28px}
  .ledger h2,.carry h2{font-size:36px}
  .ledger,.proof,.carry{padding:72px 0}
  .rlist li{flex-direction:column; gap:2px}
  .chain{flex-direction:column; align-items:flex-start; gap:26px}
  .chain li+li{margin-left:0}
  .chain li+li::before{content:'\2193'; left:18px; top:-24px}
}

/* screenshots: the live homepage's strip, restyled to sit in C's rhythm.
   assets/strip.js adds the arrows' behaviour and the unattended advance; the
   strip still scrolls by hand with no JavaScript. */
.shots{padding:110px 0 30px}
.shots-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px}
.shots h2{font-size:44px}
.shots-nav{display:flex; gap:8px; flex:none}
.shots-btn{
  width:40px; height:40px; padding:0; cursor:pointer;
  font:inherit; font-size:16px; line-height:1; color:var(--ink-2);
  background:#fff; border:1px solid var(--card-border); border-radius:999px; box-shadow:var(--lift-1);
}
.shots-btn:hover{color:var(--ink); border-color:var(--line-2)}
.strip{
  display:flex; gap:20px; margin-top:34px; padding:4px 0 18px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px}
.strip:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}
.slide{flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always}
.slide img{
  display:block; width:100%; height:auto; aspect-ratio:1366/768;
  border-radius:var(--r-lg); border:1px solid var(--card-border); box-shadow:var(--lift-2); background:#fff;
}
@media (max-width:860px){
  .shots{padding:72px 0 10px}
  .shots h2{font-size:34px}
}

/* skip link (same as site.css) */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--on-ink);
  padding:10px 18px; z-index:40; text-decoration:none; border-radius:var(--r-pill);
}
.skip:focus{left:10px; top:10px}