/*
 * The product landing page.
 *
 * Separate from console.css on purpose. The console is a desk tool for an
 * operator who is already signed in; this is the first thing a bank sees, and
 * the two want different density, different rhythm and different chrome. They
 * share a palette so they are recognisably one product.
 *
 * TWO CONSTRAINTS THIS FILE IS BUILT AROUND, both from the CSP in app.py:
 *
 *  1. `default-src 'self'` blocks inline script. So NOTHING here may depend on
 *     JavaScript to become visible. The reveal is a CSS animation with no
 *     starting `opacity: 0` rule of its own -- if animations never run, every
 *     element is simply visible. An earlier draft used a JS IntersectionObserver
 *     with `.rise { opacity: 0 }`, which would have rendered the entire page
 *     blank on the deployment while working perfectly on a laptop.
 *
 *  2. `default-src 'self'` also blocks Google Fonts. The display face is
 *     Georgia, as in console.css, rather than a web font that would silently
 *     fail to load and fall back anyway.
 */

:root{
  --canvas:#FFFFFF;
  --panel:#F5F7F8;
  --rule:#E2E7EB;
  --rule-lit:#C6CED5;
  --ink:#16202A;
  --sage:#4E5C68;
  --dim:#78868F;
  --emerald:#17518A;      /* the action colour; navy, not green */
  --emerald-lit:#0F3A66;
  --amber:#8A5A12;
  --violet:#4E45A0;
  --good:#17703F;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans:  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --edge: clamp(22px, 6vw, 88px);
  --on-brand:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Grain. Depth from tone and hairlines rather than shadow -- the same argument
   the product makes about evidence: nothing floating, everything ruled. */
/* The grain that sat over the dark ground is gone. On white it reads as a
   dirty screen rather than as texture, which is the difference between a
   printed page and a badly scanned one. */

.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--emerald);
}
.eyebrow.muted{color:var(--dim)}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(36px,5.2vw,68px)}
h2{font-size:clamp(27px,3.3vw,44px)}
h3{font-size:21px;letter-spacing:-.01em}
p{color:var(--sage)}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--edge)}
section{border-top:1px solid var(--rule)}
.pad{padding:clamp(58px,8vw,116px) 0}

/* ------------------------------------------------------------------ nav */
.lpnav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.lpnav .wrap{display:flex;align-items:center;gap:34px;height:64px}
.mark{font-family:var(--serif);font-size:20px;letter-spacing:-.02em;white-space:nowrap;
  display:flex;align-items:center;gap:9px}
.mark img{width:19px;height:19px;border-radius:50%}
.mark b{color:var(--emerald);font-weight:400}
.navlinks{display:flex;gap:28px;margin-left:10px}
.navlinks a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;padding:4px 0;position:relative;transition:color .2s;
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--emerald);transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{right:0}
.navright{margin-left:auto;display:flex;align-items:center;gap:18px}

.btn{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  padding:12px 20px;border:1px solid transparent;transition:.22s;white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--emerald);color:var(--on-brand);border-color:var(--emerald)}
.btn-primary:hover{background:var(--emerald-lit);border-color:var(--emerald-lit)}
.btn-ghost{border-color:var(--rule-lit);color:var(--ink)}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)}
.link-quiet{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;transition:color .2s;
}
.link-quiet:hover{color:var(--ink)}

/* ----------------------------------------------------------------- hero */
.hero{border-top:none;padding:clamp(58px,9vw,118px) 0 clamp(44px,6vw,80px);position:relative}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 25%);
  opacity:.45;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin:18px 0 24px}
.hero h1 em{font-style:italic;color:var(--emerald)}
.hero .lede{font-size:17.5px;max-width:46ch;margin-bottom:32px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}

.record{background:var(--panel);border:1px solid var(--rule-lit);position:relative;
  padding:24px 24px 18px}
.record::before{
  content:"";position:absolute;top:-1px;right:-1px;width:20px;height:20px;
  background:var(--canvas);border-left:1px solid var(--rule-lit);border-bottom:1px solid var(--rule-lit);
}
.record-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:15px;border-bottom:1px solid var(--rule)}
.record-head .id{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.1em}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.rrow .field{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink)}
.record-foot{padding-top:14px;font-family:var(--mono);font-size:10px;color:var(--dim);line-height:1.95}
.record-foot span{color:var(--emerald)}

.pill{
  display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid;white-space:nowrap;
}
.p-ok  {color:var(--good);   border-color:#A8CDB6;background:#E8F3EC}
.p-lim {color:var(--amber);  border-color:#DCC08A;background:#FAF2E2}
.p-lic {color:var(--sage);   border-color:var(--rule-lit);background:transparent}
.p-abs {color:var(--violet); border-color:#B4AEE0;background:#EDECF8}

/* --------------------------------------------------------- trust strip */
.trust{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:9px 28px;padding:19px var(--edge)}
.trust span{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim)}
.trust span::before{content:"·";margin-right:28px;color:var(--rule-lit)}
.trust span:first-child::before{content:"";margin:0}

/* --------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:clamp(32px,4.5vw,56px) clamp(18px,3vw,42px);border-left:1px solid var(--rule)}
.stat:first-child{border-left:none;padding-left:0}
.stat .fig{font-family:var(--serif);font-size:clamp(27px,3.3vw,40px);color:var(--emerald);
  line-height:1;margin-bottom:13px}
.stat p{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.85;color:var(--sage)}

/* -------------------------------------------------------------- layout */
.head{max-width:62ch;margin-bottom:clamp(34px,4.5vw,58px)}
.head h2{margin:15px 0 17px}
.head p{font-size:16.5px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,62px)}

/* ---------------------------------------------------------------- rail */
.rail{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule-lit)}
.step{padding:22px 18px 0 0;position:relative}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--emerald)}
.step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;color:var(--emerald);
  display:block;margin-bottom:11px}
.step .t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:block;margin-bottom:8px}
.step p{font-size:13px;line-height:1.6}

/* --------------------------------------------------------------- table */
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:28px;align-items:center}
.legend div{display:flex;align-items:center;gap:8px}
.legend small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim)}
.tablewrap{overflow-x:auto}
.flowtable{width:100%;border-collapse:collapse;min-width:740px}
.flowtable thead th{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim);text-align:left;
  padding:0 16px 12px 0;border-bottom:1px solid var(--rule-lit);
}
.flowtable tbody td{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.flowtable tbody tr{transition:background .18s}
.flowtable tbody tr:hover{background:var(--panel)}
.flowtable td.flow{font-size:15px;color:var(--ink);width:29%}
.flowtable td.status{width:13%}
.flowtable td.what{font-size:13.5px;color:var(--sage);line-height:1.6}

/* ------------------------------------------------------------- pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.pillar{background:var(--canvas);padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px)}
.pillar h3{margin:13px 0 13px}
.pillar p{font-size:14px}

/* ---------------------------------------------------------- deployment */
.deploy{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.dep{background:var(--panel);padding:clamp(26px,3vw,38px)}
.dep h3{margin:13px 0 19px}
.dep ul{list-style:none}
.dep li{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--sage);
  padding:11px 0 11px 19px;border-top:1px solid var(--rule);position:relative}
.dep li::before{content:"—";position:absolute;left:0;color:var(--emerald)}

/* ------------------------------------------------------------ absences */
.absence{border-left:2px solid var(--violet);background:var(--panel);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,42px)}
.absence h2{margin:13px 0 19px;max-width:20ch}
.absence p{max-width:66ch;font-size:15.5px;margin-bottom:13px}

/* ----------------------------------------------------------- final cta */
.final{text-align:center;padding:clamp(66px,9vw,126px) 0}
.final h2{max-width:22ch;margin:0 auto 28px}
.final .cta-row{justify-content:center}

/* -------------------------------------------------------------- footer */
.lpfoot{border-top:1px solid var(--rule);padding:clamp(42px,5vw,64px) 0 38px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;margin-bottom:42px}
.fcol h4{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim);margin-bottom:15px}
.fcol a{display:block;font-size:13.5px;color:var(--sage);text-decoration:none;
  padding:5px 0;transition:color .2s}
.fcol a:hover{color:var(--emerald)}
.fineprint{border-top:1px solid var(--rule);padding-top:24px;
  font-family:var(--mono);font-size:10px;line-height:2;color:var(--dim);max-width:82ch}

/* -------------------------------------------------------------- motion
   No `.rise{opacity:0}` anywhere. The animation supplies its own starting
   frame, so an element is visible whenever the animation does not run --
   which, given the CSP, is the case that has to be safe. */
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.rise{animation:rise .75s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}
.d3{animation-delay:.21s}.d4{animation-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  html{scroll-behavior:auto}
}

@media(max-width:960px){
  .hero .wrap,.cols,.pillars,.deploy,.stats{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--rule);padding-left:0}
  .stat:first-child{border-top:none}
  .rail{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}