/* Outlay landing — "THE DOCUMENT".
   The page doesn't contain a statement; it IS one. A financial document set in
   bond-paper white with Swiss annual-report rules: a masthead, a full-width
   ledger as the hero, numbered report sections, giant tabular numerals, one
   black divider band. Red flags, green only where money is verified or saved.
   One quiet motion — ledger rows landing. Nothing else moves. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#fcfcfa;         /* bond paper */
  --ink:#101010;
  --body-c:#41413d;
  --faint:#84847c;
  --hair:#111111;          /* hairlines are INK, not gray — the document look */
  --hair-soft:#d9d9d2;
  --green:#0b6a4a;
  --red:#b23a2c;
  --band:#101010;          /* the divider band */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --w:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:transparent;color:var(--body-c);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
/* ambient layer: a subliminal ledger grid, drifting one cell every 90s */
@media (prefers-reduced-motion: no-preference){
  body::before{content:"";position:fixed;inset:-64px;z-index:-1;pointer-events:none;
    background:
      repeating-linear-gradient(180deg,rgba(16,16,16,.03) 0 1px,transparent 1px 32px),
      repeating-linear-gradient(90deg,rgba(16,16,16,.02) 0 1px,transparent 1px 32px);
    animation:gridpan 90s linear infinite}
  @keyframes gridpan{to{transform:translateY(32px)}}
}
#readbar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--green);
  transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green)}
h1,h2,h3{color:var(--ink);margin:0}
::selection{background:var(--ink);color:var(--paper)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip-link:focus{left:12px;top:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.micro{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.small{font-size:13.5px;color:var(--faint)}

/* ---------- nav: functional, documentary ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.brand{font-weight:680;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand .dot{color:var(--green)}
.navlinks{display:flex;gap:24px;margin-left:8px}
.navlinks a{color:var(--body-c);font-size:14px;font-weight:520;text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.navsp{flex:1}
.btn{display:inline-block;border:1px solid var(--ink);padding:10px 20px;font-weight:560;
  font-size:14.5px;color:var(--ink);text-decoration:none;transition:background .12s ease,color .12s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--green);border-color:var(--green)}
.btn.lg{padding:14px 28px;font-size:16px}
.navcta{display:flex;gap:14px;align-items:center}
.navcta .acctname{color:var(--ink)!important}
.navcta .acctburger{border-color:var(--hair-soft)!important}
.navcta .acctburger span{background:var(--ink)!important}
.hamburger{display:none}

/* ---------- masthead ---------- */
.masthead{padding:64px 0 0;position:relative;overflow:clip}
.masthead .wrap{position:relative;z-index:1}
/* watermark figures drifting behind the document (3.5% ink) */
.wm{position:absolute;font-family:var(--mono);font-weight:700;color:var(--ink);opacity:.035;
  line-height:1;pointer-events:none;user-select:none;z-index:0;font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;white-space:nowrap}
.wm.a{font-size:clamp(120px,16vw,240px);right:-3%;top:4%}
.wm.b{font-size:clamp(90px,11vw,170px);left:44%;bottom:26%}
@media (prefers-reduced-motion: no-preference){
  .wm.a{animation:wmfloat 26s ease-in-out infinite alternate}
  .wm.b{animation:wmfloat 34s ease-in-out -12s infinite alternate-reverse}
  @keyframes wmfloat{from{transform:translateY(-10px)}to{transform:translateY(14px)}}
}
.mast-rule{border-top:3px solid var(--hair)}
.mast-meta{display:flex;justify-content:space-between;gap:16px;padding:12px 0 46px;flex-wrap:wrap}
.display{font-size:clamp(58px,9.2vw,132px);line-height:.96;font-weight:640;letter-spacing:-.05em;
  max-width:11em}
.display .acc{color:var(--green)}
.mast-sub{display:flex;gap:56px;align-items:flex-end;justify-content:space-between;
  margin:40px 0 56px;flex-wrap:wrap}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:33em;color:var(--body-c);margin:0}
.lede b{color:var(--ink);font-weight:600}
.ctarow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;flex:none}

/* ---------- THE LEDGER (full-width hero table) ---------- */
.ledger{border-top:3px solid var(--hair);font-variant-numeric:tabular-nums;position:relative;overflow:clip}
/* the audit scan: a faint green sweep reconciles the ledger every 9s */
@media (prefers-reduced-motion: no-preference){
  .ledger::after{content:"";position:absolute;left:0;right:0;height:56px;top:-64px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(11,106,74,.05) 42%,rgba(11,106,74,.10) 50%,rgba(11,106,74,.05) 58%,transparent);
    animation:scan 9s ease-in-out 3.2s infinite}
  @keyframes scan{0%,10%{top:-64px;opacity:0}16%{opacity:1}52%{top:100%;opacity:1}58%,100%{top:100%;opacity:0}}
}
.lg-cols,.lg-row{display:grid;grid-template-columns:minmax(0,2.6fr) 1fr 1fr 1.2fr minmax(0,1.1fr);
  gap:20px;align-items:baseline}
.lg-cols{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--faint);
  text-transform:uppercase;padding:12px 0 10px;border-bottom:1px solid var(--hair)}
.lg-row{padding:15px 0;border-bottom:1px solid var(--hair-soft);font-size:15.5px;color:var(--ink)}
.lg-row .it{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-row .it small{color:var(--faint);font-weight:400}
.lg-row .who,.lg-row .team{font-family:var(--mono);font-size:13px;color:var(--body-c)}
.lg-row .st{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lg-row .st.ok{color:var(--green)} .lg-row .st.bad{color:var(--red)} .lg-row .st.dim{color:var(--faint)}
.lg-row .amt{font-family:var(--mono);font-size:15.5px;font-weight:600;text-align:right}
.lg-row.flag .it,.lg-row.flag .amt{color:var(--red)}
.lg-row.dim .it,.lg-row.dim .amt{color:var(--faint)}
.lg-total{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:2px solid var(--hair);border-bottom:3px solid var(--hair);
  padding:18px 0;margin-top:-1px}
.lg-total .t{font-family:var(--mono);font-size:13px;letter-spacing:.1em;font-weight:700;color:var(--ink)}
.lg-total .t .ok{color:var(--green)}
.lg-total .amt{font-family:var(--mono);font-size:clamp(22px,2.6vw,32px);font-weight:700;color:var(--ink)}
/* the summary figures — the three numbers that ARE the pitch */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:44px 0 12px}
.fig .v{font-family:var(--mono);font-size:clamp(34px,4.2vw,56px);font-weight:700;color:var(--ink);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fig .v .u{color:var(--green)}
.fig .k{margin-top:8px;font-size:14px;color:var(--body-c);max-width:22em}
.providers{padding:26px 0 64px;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.p-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-right:4px}
.pv{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;
  color:var(--body-c);white-space:nowrap}
.pvico{width:14px;height:14px;flex:none;fill:var(--ink);opacity:.72}
/* rows land once, quietly */
@media (prefers-reduced-motion: no-preference){
  .ledger .lg-row,.ledger .lg-total,.figures .fig{opacity:0;animation:land .45s ease-out forwards}
  .ledger .lg-row:nth-of-type(3){animation-delay:.12s}.ledger .lg-row:nth-of-type(4){animation-delay:.24s}
  .ledger .lg-row:nth-of-type(5){animation-delay:.36s}.ledger .lg-row:nth-of-type(6){animation-delay:.48s}
  .ledger .lg-row:nth-of-type(7){animation-delay:.6s}.ledger .lg-row:nth-of-type(8){animation-delay:.72s}
  .lg-total{animation-delay:.95s!important}
  .figures .fig:nth-child(1){animation-delay:1.15s}.figures .fig:nth-child(2){animation-delay:1.3s}
  .figures .fig:nth-child(3){animation-delay:1.45s}
  @keyframes land{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}

/* ---------- numbered report sections ---------- */
.section{padding:96px 0}
.sec-no{display:flex;align-items:baseline;gap:18px;border-top:3px solid var(--hair);padding-top:14px;
  margin-bottom:46px}
.sec-no .no{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--faint)}
.sec-no h2{font-size:clamp(30px,3.6vw,50px);line-height:1.04;font-weight:620;letter-spacing:-.035em}
.sec-intro{max-width:44em;font-size:17.5px;margin:0 0 52px}

/* method rows (01) */
.mrow{display:grid;grid-template-columns:120px 1.1fr 1fr;gap:36px;align-items:baseline;
  padding:38px 0;border-top:1px solid var(--hair-soft)}
.mrow:first-of-type{border-top:none}
.mrow .n{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.14em}
.mrow h3{font-size:clamp(21px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.mrow p{margin:10px 0 0;max-width:30em;font-size:15.5px}
.sample{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink);
  border-left:2px solid var(--hair);padding-left:18px;font-variant-numeric:tabular-nums}
.sample .c{color:var(--faint)}
.sample .g{color:var(--green);font-weight:600}
.sample .r{color:var(--red);font-weight:600}

/* control rows (02) — wide ledger rows, not cards */
.crow{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
  padding:44px 0;border-top:1px solid var(--hair-soft)}
.crow:first-of-type{border-top:none}
.crow h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.022em}
.crow p{margin:12px 0 18px;max-width:32em;font-size:15.5px}
.crow .go{font-size:14px;font-weight:560}
.cfig{font-family:var(--mono);font-size:13px;line-height:2.05;color:var(--ink);
  font-variant-numeric:tabular-nums;border-top:2px solid var(--hair);padding-top:14px}
.cfig .row{display:flex;justify-content:space-between;gap:14px}
.cfig .row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfig .g{color:var(--green);font-weight:600}
.cfig .r{color:var(--red);font-weight:600}
.cfig .f{color:var(--faint)}

/* ---------- the band (03 — security divider page) ----------
   The ink melts in and out of the paper (no hard section edge) — the seamless
   background transition, done in pure CSS so contrast is never at risk. */
.band{color:#b9b9af;padding:200px 0 210px;margin:-40px 0;position:relative;
  background:linear-gradient(180deg,transparent 0,var(--band) 170px,
             var(--band) calc(100% - 170px),transparent 100%)}
.band .wrap{position:relative;z-index:1}
/* security-paper microprint, drifting like banknote engraving */
@media (prefers-reduced-motion: no-preference){
  .band::before{content:"";position:absolute;inset:-24px;pointer-events:none;
    background:repeating-linear-gradient(45deg,rgba(252,252,250,.05) 0 1px,transparent 1px 8px);
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    mask:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    animation:bandpan 70s linear infinite}
  @keyframes bandpan{to{transform:translate(-11.3px,-11.3px)}}
}
.band .sec-no{border-top-color:#3a3a34}
.band .sec-no .no{color:#6e6e64}
.band h2{color:var(--paper)}
.band .lede{color:#b9b9af}
.band .lede b{color:#f0f0e8}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:48px 0 34px;
  border-top:1px solid #3a3a34;border-bottom:1px solid #3a3a34}
.spec{padding:26px 28px 26px 0;border-left:1px solid #3a3a34;padding-left:28px}
.spec:first-child{border-left:none;padding-left:0}
.spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#7ec9a4;
  text-transform:uppercase;font-weight:600}
.spec .v{margin-top:10px;font-size:13.5px;color:#b9b9af;line-height:1.55}
.band .row2{font-size:14px;max-width:58em;color:#8f8f85}
.band a{color:#f0f0e8}
.band a:hover{color:#7ec9a4}

/* ---------- engage (04) ---------- */
.closing{padding:104px 0 84px}
.closing .display2{font-size:clamp(44px,6.4vw,92px);line-height:.98;font-weight:640;
  letter-spacing:-.045em;color:var(--ink);max-width:12em}
.closing .lede{margin:30px 0 38px}
.morelinks{display:flex;gap:30px;margin-top:46px;flex-wrap:wrap;font-size:14.5px}

/* ---------- faq ---------- */
.faq{max-width:820px;border-top:2px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair-soft);padding:2px 0}
.faq summary{cursor:pointer;font-weight:560;color:var(--ink);font-size:16px;padding:18px 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--faint);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;font-size:15px;max-width:46em}

/* ---------- colophon ---------- */
footer{border-top:3px solid var(--hair);padding:26px 0 40px;font-size:13.5px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--body-c);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .sep{flex:1}
footer .micro{letter-spacing:.14em}

/* ---------- diagrams & charts (bespoke, in-brand — no stock art) ---------- */
.fig-svg{width:100%;height:auto;display:block}
.fig-cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;margin-top:10px}
.diagram{background:#fff;border:1px solid var(--hair-soft);padding:22px 22px 16px}
/* control bars */
.bars{display:grid;gap:16px;border-top:2px solid var(--hair);padding-top:18px;
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.bars .row{display:grid;gap:7px}
.bars .lab{display:flex;justify-content:space-between;gap:12px}
.bars .lab .g{color:var(--green);font-weight:600}
.bars .lab .r{color:var(--red);font-weight:600}
.bars .lab .f{color:var(--faint)}
.bars .track{height:10px;background:#ecece7;position:relative;overflow:visible}
.bars .track .fill{position:absolute;left:0;top:0;bottom:0}
.bars .track .fill.g{background:var(--green)}
.bars .track .fill.r{background:var(--red)}
.bars .track .fill.f{background:#b9b9af}
.bars .track .cap{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.bars .legend{display:flex;gap:18px;color:var(--faint);font-size:11px}
.bars .legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px;font-style:normal}
.bars .legend .g i{background:var(--green)} .bars .legend .r i{background:var(--red)}
.bars .legend .f i{background:#b9b9af}
/* boundary diagram sits on the dark band */
.band .bgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:8px}
@media(max-width:980px){.band .bgrid{grid-template-columns:1fr}}

/* ---------- seamless scroll experience ----------
   Children rise into place once as they enter the viewport (staggered via
   --d), figures count up, the masthead drifts at a slower rate, and the nav
   re-inks itself while the dark band passes beneath it. All gated on
   prefers-reduced-motion; content is fully visible without JS. */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(16px);
    transition:opacity .65s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
               transform .65s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
  .rv.in{opacity:1;transform:none}
  .display,.mast-sub{will-change:transform}
}
/* charts draw themselves when revealed (solid strokes only; dashed lines fade) */
@media (prefers-reduced-motion: no-preference){
  .rv .fig-svg .draw{stroke-dasharray:1;stroke-dashoffset:1}
  .rv.in .fig-svg .draw{animation:svgdraw 1.1s ease-out forwards}
  .rv.in .fig-svg .draw.d2{animation-delay:.5s}
  @keyframes svgdraw{to{stroke-dashoffset:0}}
  .rv .fig-svg .fade{opacity:0}
  .rv.in .fig-svg .fade{animation:svgfade .6s ease-out 1s forwards}
  @keyframes svgfade{to{opacity:1}}
}
nav.overband{background:color-mix(in srgb,var(--band) 92%,transparent);border-bottom-color:#3a3a34}
nav.overband .brand,nav.overband .navlinks a:hover{color:#fff}
nav.overband .navlinks a{color:#b9b9af}
nav.overband .btn.primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
nav.overband .hamburger span{background:#fff}
nav,nav .brand,nav .navlinks a,nav .btn.primary{transition:background .45s ease,color .45s ease,border-color .45s ease}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .lg-cols,.lg-row{grid-template-columns:minmax(0,2.2fr) 1fr minmax(0,1.1fr)}
  .lg-cols .oc,.lg-row .who,.lg-cols .tc,.lg-row .team{display:none}
  .figures{grid-template-columns:1fr;gap:26px}
  .mrow{grid-template-columns:1fr;gap:14px;padding:32px 0}
  .crow{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .specs{grid-template-columns:1fr}
  .spec{border-left:none;padding-left:0;border-top:1px solid #3a3a34;padding-top:22px}
  .spec:first-child{border-top:none}
}
@media(max-width:760px){
  .navlinks{display:none}
  .hamburger{display:flex;flex-direction:column;gap:4.5px;background:none;border:0;padding:8px;cursor:pointer}
  .hamburger span{width:20px;height:2px;background:var(--ink);display:block}
  .nav-toggle:checked ~ .navlinks{display:flex;position:absolute;top:60px;left:0;right:0;
    flex-direction:column;background:var(--paper);border-bottom:1px solid var(--hair);
    padding:18px 32px;gap:16px;margin:0}
  .section{padding:68px 0}
  .band{padding:64px 0}
  .closing{padding:72px 0 56px}
  .masthead{padding:40px 0 0}
  .mast-sub{margin:30px 0 40px}
}