/* ============================================================================
   RECONNA SYSTEM — the approved visual system, ported from the prototype at
   work/reconna-landing (dist/styles.css, read 2026-09-14), not approximated.

   LOAD ORDER on a page that also uses trove.css class names:
       <link rel="stylesheet" href="/static/trove.css">
       <link rel="stylesheet" href="/static/reconna-tokens.css">
       <link rel="stylesheet" href="/static/reconna-system.css">   <-- last

   SCOPE OF THIS PASS. Used by / (first-time visitor) and /today (signed-in
   home). It is deliberately NOT applied to the other 27 pages yet: 1,055
   hardcoded hex colors across web/*.html mean linking a token file does not
   convert a page, and converting them is its own piece of work. See
   RECONNA_DESIGN_MIGRATION.md for the backlog and the per-page counts.

   TYPOGRAPHY — why the stack is ordered this way. The approved prototype
   renders its display face as Palatino Linotype on Windows, which is where it
   was approved. Palatino is a system font, so it cannot be the only answer:
   Fraunces is already loaded as a webfont by /today and sits behind it, so a
   machine without Palatino still gets an editorial serif rather than falling
   to Georgia. Rendering never depends on a locally installed font.
   ============================================================================ */

:root{
  /* --- surfaces ------------------------------------------------------- */
  --rc-navy:#121a31;        /* dark section ground: nav, hero, trust band  */
  --rc-paper:#f3f1eb;       /* warm ivory page ground                      */
  --rc-white:#ffffff;       /* card / brief surface                        */
  --rc-rail:#e9e7e0;        /* reveal rail, one step darker than paper     */
  --rc-wash:#f9fafc;        /* command surface, evidence strip             */

  /* --- ink ------------------------------------------------------------ */
  --rc-ink:#11172a;
  --rc-body:#5e6678;        /* long-form copy on light                     */
  --rc-muted:#687085;
  --rc-faint:#8790a2;
  --rc-on-navy:#c3cbdf;     /* body copy on the navy ground                */
  --rc-on-navy-faint:#7f8ca9;

  /* --- accents -------------------------------------------------------- */
  --rc-blue:#425eea;        /* the one action color                        */
  --rc-blue-ink:#2f47c9;    /* text-on-light variant, for contrast         */
  --rc-mint:#70d5b2;        /* what-changes-the-outcome                    */
  --rc-amber:#d8a84b;       /* pending / undecided status                  */

  /* --- rules ---------------------------------------------------------- */
  --rc-line:#d9dce4;
  --rc-line-warm:#d6d3ca;   /* on the ivory rail                           */
  --rc-line-dark:#33405f;   /* on the navy ground                          */

  /* --- type ----------------------------------------------------------- */
  --rc-serif:"Iowan Old Style","Palatino Linotype",Palatino,Fraunces,Georgia,serif;
  --rc-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- measure + depth ------------------------------------------------ */
  --rc-max:1240px;
  --rc-shadow:0 24px 70px rgba(17,23,42,.14);
  --rc-shadow-lift:0 28px 85px rgba(0,0,0,.30);
}

.rc *{box-sizing:border-box}
.rc{background:var(--rc-paper);color:var(--rc-ink);font-family:var(--rc-sans);margin:0}
/* :where() so this carries NO specificity. Written as `.rc a` it measured
   (0,1,1) and beat every single-class rule that sets its own color — the
   request-access CTA rendered ink-on-blue instead of white. */
:where(.rc) a{color:inherit}
.rc button,.rc textarea,.rc input{font:inherit}

/* gutter: the page's own margin, so every band lines up on one measure */
.rc-gutter{padding-left:max(28px,calc((100vw - var(--rc-max))/2));padding-right:max(28px,calc((100vw - var(--rc-max))/2))}
.rc-shell{max-width:var(--rc-max);margin:0 auto}

/* ---------------------------------------------------------------- nav -- */
.rc-nav{height:78px;display:flex;align-items:center;gap:42px;background:var(--rc-navy);color:#fff;
        border-bottom:1px solid rgba(255,255,255,.14)}
.rc-brand{text-decoration:none;font:800 25px/1 var(--rc-serif);letter-spacing:-.5px;color:#fff}
.rc-brand span{color:#7890ff}
.rc-nav nav{display:flex;gap:27px;margin-left:auto}
.rc-nav nav a{text-decoration:none;color:#aeb8d1;font-size:14px;font-weight:650}
.rc-nav nav a:hover{color:#fff}
.rc-navcta{text-decoration:none;font-size:14px;font-weight:800;border:1px solid #4a5778;padding:11px 15px;border-radius:7px;color:#fff}
.rc-navcta:hover{border-color:#7890ff}
.rc-navcta span{margin-left:8px;color:#92a2ff}

/* ------------------------------------------------------------ overline -- */
.rc-over{margin:0 0 20px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:850;
         color:#6271a2;display:flex;align-items:center;gap:10px}
.rc-over i{width:22px;height:2px;background:var(--rc-blue);display:block}
.rc-over.on-navy{color:#aeb9d3}
.rc-over.on-navy i{background:var(--rc-mint)}

/* ---------------------------------------------------------------- hero -- */
.rc-hero{background:var(--rc-navy);color:#fff;padding-top:88px;padding-bottom:54px;
         display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:end}
.rc-hero h1{font:700 clamp(62px,7.2vw,104px)/.9 var(--rc-serif);letter-spacing:-5px;margin:0 0 34px;max-width:620px}
.rc-lede{font-size:21px;line-height:1.55;color:var(--rc-on-navy);max-width:600px;margin:0}
/* The three-step statement. Drawn as a numbered sequence on a shared rule so it
   reads as one deliberate object at every width — as a wrapping row of phrases
   and separators it looked like leftover text, and on a phone it orphaned a
   separator at the end of a line. Each column wraps its own label; the object
   never re-flows into something unintended. */
.rc-seq{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
        margin:34px 0 0;padding:0;counter-reset:rcseq;border-top:1px solid rgba(255,255,255,.17)}
.rc-seq li{counter-increment:rcseq;padding:12px 16px 0 0;font-size:12.5px;font-weight:650;
           line-height:1.35;color:var(--rc-on-navy)}
.rc-seq li::before{content:"0" counter(rcseq);display:block;margin-bottom:7px;font-size:10px;
                   font-weight:850;letter-spacing:.12em;color:#8fa2ff}

/* ------------------------------------------------------------- command -- */
.rc-command{background:var(--rc-wash);color:var(--rc-ink);border-radius:14px;
            box-shadow:var(--rc-shadow-lift);overflow:hidden}
.rc-command-bar{min-height:50px;display:flex;align-items:center;gap:12px;padding:12px 18px;
                border-bottom:1px solid var(--rc-line);color:#737c91;font-size:12px;font-weight:750;
                text-transform:uppercase;letter-spacing:.08em}
.rc-mark{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;color:#fff;
         background:var(--rc-blue);font:800 14px var(--rc-serif);flex:none}
.rc-command form{padding:22px}
.rc-command textarea{width:100%;border:0;resize:none;background:transparent;color:var(--rc-ink);
                     font:700 25px/1.35 var(--rc-serif);outline:none}
.rc-command textarea::placeholder{color:#9aa2b2}
.rc-go{width:100%;border:0;background:var(--rc-blue);color:#fff;border-radius:8px;padding:14px 17px;
       text-align:left;font-size:14px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;
       align-items:center;gap:12px}
.rc-go:hover{background:#3550d8}
.rc-examples{padding:14px 18px 17px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--rc-line);flex-wrap:wrap}
.rc-examples>span{font-size:11px;color:#858c9b;margin-right:4px}
.rc-examples button{border:1px solid var(--rc-line);background:#fff;color:#5a6376;border-radius:20px;
                    padding:7px 10px;font-size:11px;cursor:pointer}
.rc-examples button:hover{border-color:#a9b2c4}
.rc-examples button.on{background:var(--rc-ink);color:#fff;border-color:var(--rc-ink)}

/* -------------------------------------------------------------- reveal -- */
.rc-reveal{display:grid;grid-template-columns:300px 1fr;max-width:var(--rc-max);margin:0 auto;
           background:#fff;box-shadow:var(--rc-shadow)}
.rc-rail{background:var(--rc-rail);padding:42px 32px;border-right:1px solid var(--rc-line-warm)}
.rc-eyebrow{font-size:11px;font-weight:850;letter-spacing:.13em;color:var(--rc-blue-ink);margin:0 0 15px}
.rc-rail h2{font:700 30px/1.08 var(--rc-serif);margin:0}
.rc-rail .rc-meta{color:#747a86;font-size:13px;line-height:1.45;margin:6px 0 0}
.rc-status{display:flex;align-items:center;gap:8px;margin:28px 0 52px;font-size:12px}
.rc-status i{width:8px;height:8px;border-radius:50%;background:var(--rc-amber);
             box-shadow:0 0 0 4px rgba(216,168,75,.15);display:block;flex:none}
.rc-steps{list-style:none;padding:0;margin:0}
.rc-steps li{display:flex;gap:14px;padding:13px 0;color:#8a8e98;font-size:13px;
             border-bottom:1px solid #d4d1c8;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;
             width:100%;text-align:left;font-family:inherit}
.rc-steps li span{font-size:10px;letter-spacing:.08em}
.rc-steps li:hover{color:var(--rc-ink)}
.rc-steps li.on{color:var(--rc-ink);font-weight:800}

.rc-brief{padding:42px 48px 0;min-width:0}
.rc-topline{display:flex;justify-content:space-between;gap:20px;color:var(--rc-faint);font-size:10px;
            letter-spacing:.12em;font-weight:800;flex-wrap:wrap}
.rc-brief h3{font:700 clamp(34px,4vw,57px)/1.04 var(--rc-serif);letter-spacing:-1.8px;max-width:860px;margin:45px 0 20px}
.rc-brief-copy{font-size:18px;line-height:1.58;color:var(--rc-body);max-width:820px;margin:0 0 38px}

.rc-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rc-card{border:1px solid var(--rc-line);border-radius:10px;padding:25px;min-width:0}
.rc-card h4{font:700 24px/1.15 var(--rc-serif);margin:0 0 12px}
.rc-card p{font-size:14px;line-height:1.55;color:var(--rc-muted);margin:0 0 12px}
.rc-card--move{border-top:4px solid var(--rc-blue)}
.rc-card--signal{border-top:4px solid var(--rc-mint)}
.rc-label{font-size:11px;font-weight:850;letter-spacing:.13em;color:var(--rc-blue-ink);margin:0 0 15px}
/* 92px, not the prototype's 78: "CONSEQUENCE" at 9px/.11em measures 87px and
   overflowed its own column, running under the value beside it. */
.rc-detail{display:grid;grid-template-columns:92px 1fr;gap:10px;margin-top:15px;padding-top:15px;
           border-top:1px solid var(--rc-line);align-items:baseline}
.rc-detail span{font-size:9px;font-weight:850;letter-spacing:.11em;color:#8b92a1}
.rc-detail strong{font-size:12px}
.rc-signals{list-style:none;padding:0;margin:0}
.rc-signals li{padding:11px 0 11px 16px;border-bottom:1px solid var(--rc-line);position:relative}
.rc-signals li:last-child{border:0}
.rc-signals li:before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--rc-mint)}
.rc-signals strong{display:block;font:700 16px var(--rc-serif)}
.rc-signals span{display:block;font-size:12px;line-height:1.4;color:#737b8d;margin-top:3px}

/* people: who shapes the decision */
.rc-people{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.rc-person{border:1px solid var(--rc-line);border-radius:10px;padding:18px 20px}
.rc-person .rc-role{font-size:10px;font-weight:850;letter-spacing:.11em;color:var(--rc-blue-ink)}
.rc-person h5{font:700 19px/1.2 var(--rc-serif);margin:6px 0 6px}
.rc-person p{margin:0;font-size:13.5px;line-height:1.5;color:var(--rc-muted)}
.rc-person .rc-lever{margin-top:10px;padding-top:10px;border-top:1px solid var(--rc-line);font-size:13px;color:var(--rc-ink)}
.rc-person .rc-lever b{font-size:9px;font-weight:850;letter-spacing:.11em;color:#8b92a1;display:block;margin-bottom:3px}

/* decision path */
.rc-path{list-style:none;padding:0;margin:0}
.rc-path li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--rc-line);align-items:start}
.rc-path li:last-child{border-bottom:0}
.rc-path time{font-size:11px;font-weight:850;letter-spacing:.08em;color:var(--rc-blue-ink);padding-top:3px}
.rc-path strong{display:block;font:700 18px/1.25 var(--rc-serif)}
.rc-path span{display:block;font-size:13.5px;line-height:1.5;color:var(--rc-muted);margin-top:4px}
.rc-path li.rc-now strong{color:var(--rc-ink)}
.rc-path li.rc-now time{color:#a8761f}

/* evidence */
.rc-evidence{list-style:none;padding:0;margin:0}
.rc-evidence li{display:grid;grid-template-columns:1fr auto;gap:18px;padding:15px 0;border-bottom:1px solid var(--rc-line);align-items:baseline}
.rc-evidence li:last-child{border-bottom:0}
.rc-evidence strong{display:block;font:700 16px/1.3 var(--rc-serif)}
.rc-evidence span{display:block;font-size:12.5px;color:var(--rc-muted);margin-top:3px}
.rc-kind{font-size:9.5px;font-weight:850;letter-spacing:.1em;color:#8b92a1;white-space:nowrap}

/* evidence strip along the foot of the brief */
.rc-strip{margin:35px -48px 0;background:#f5f6f8;border-top:1px solid var(--rc-line);padding:20px 48px;
          display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rc-strip>div{display:flex;align-items:center;gap:12px}
.rc-check{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#daf4eb;color:#15795e;font-weight:900;flex:none}
.rc-strip p{margin:0;font-size:12px;color:#7a8293}
.rc-strip p strong{color:var(--rc-ink)}
.rc-strip a{color:var(--rc-blue-ink);font-weight:800;font-size:12px;text-decoration:none}

/* ------------------------------------------------------------- listing -- */
.rc-introgrid{display:grid;grid-template-columns:1.1fr .9fr;column-gap:100px;align-items:end;margin-bottom:55px}
.rc-introgrid .rc-over{grid-column:1/-1}
.rc-h2{font:700 clamp(40px,5vw,67px)/1 var(--rc-serif);letter-spacing:-2.5px;margin:0}
.rc-introgrid>p:last-child{font-size:18px;line-height:1.6;color:var(--rc-muted);margin:0}
.rc-list{border-top:1px solid #9fa4af}
.rc-list article{display:grid;grid-template-columns:70px 1fr 150px;gap:24px;padding:28px 8px;
                 border-bottom:1px solid var(--rc-line);align-items:start}
.rc-list article>span{font-size:11px;color:var(--rc-blue-ink);font-weight:850}
.rc-list h3{font:700 26px/1.2 var(--rc-serif);margin:0 0 7px}
.rc-list p{margin:0;color:var(--rc-muted);line-height:1.55;max-width:720px}
.rc-list em{text-align:right;font-style:normal;font-size:10px;color:#757d8d;letter-spacing:.1em;font-weight:850}

/* --------------------------------------------------------------- trust -- */
.rc-trust{background:var(--rc-navy);color:#fff;padding-top:100px;padding-bottom:100px;
          display:grid;grid-template-columns:.75fr 1.25fr;gap:100px}
.rc-trust .rc-h2{font-size:clamp(38px,4.4vw,58px)}
.rc-trust-note{color:var(--rc-on-navy);font-size:15px;line-height:1.6;margin:28px 0 0;max-width:420px}
.rc-trust-note strong{color:#fff}
/* a quiet qualifier under a pane's content */
.rc-note{font-size:13.5px;color:var(--rc-faint);margin-top:26px}
.rc-quad{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rc-line-dark);border-left:1px solid var(--rc-line-dark)}
.rc-quad article{padding:25px;min-height:190px;border-right:1px solid var(--rc-line-dark);border-bottom:1px solid var(--rc-line-dark)}
.rc-quad strong{font-size:10px;color:var(--rc-mint);letter-spacing:.1em}
.rc-quad h3{font:700 22px var(--rc-serif);margin:25px 0 8px}
.rc-quad p{margin:0;color:#aeb8cf;font-size:13px;line-height:1.5}

/* -------------------------------------------------------------- access -- */
.rc-access{text-align:center;background:#fff;padding:110px 25px}
.rc-access .rc-over{justify-content:center}
.rc-access .rc-h2{font-size:clamp(40px,5.2vw,68px)}
.rc-cta{display:inline-flex;gap:35px;align-items:center;background:var(--rc-blue);color:#fff;
        text-decoration:none;font-weight:850;padding:17px 20px;border-radius:7px;margin:35px 0 18px}
.rc-cta:hover{background:#3550d8}
.rc-access>p:last-child{font-size:12px;color:#808798;margin:0}

/* -------------------------------------------------------------- footer -- */
.rc-footer{background:#fff;border-top:1px solid var(--rc-line);min-height:84px;display:flex;align-items:center;
           gap:28px;color:#737b8d;font-size:11px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.rc-footer .rc-brand{color:var(--rc-ink);font-size:20px}
.rc-footer .rc-brand span{color:var(--rc-blue)}
.rc-footer p:nth-of-type(1){margin-left:auto}

/* ------------------------------------------------------- 900 and below -- */
@media(max-width:900px){
  .rc-nav nav{display:none}
  .rc-navcta{margin-left:auto}
  .rc-hero{grid-template-columns:1fr;gap:45px;padding-top:60px}
  .rc-hero h1{font-size:clamp(52px,9vw,72px)}
  .rc-reveal{grid-template-columns:230px 1fr;margin-inline:20px}
  .rc-brief{padding-inline:30px}
  .rc-cards{grid-template-columns:1fr}
  .rc-strip{margin-inline:-30px;padding-inline:30px}
  .rc-introgrid,.rc-trust{grid-template-columns:1fr;gap:40px}
}

/* ------------------------------------------------------- 640 and below -- */
@media(max-width:640px){
  .rc-gutter{padding-left:18px;padding-right:18px}
  .rc-nav{height:68px}
  .rc-navcta{font-size:12px;padding:9px 11px}
  .rc-hero{padding-top:34px;padding-bottom:20px;gap:22px}
  .rc-hero h1{font-size:clamp(42px,12vw,57px);letter-spacing:-2px;margin-bottom:22px}
  .rc-lede{font-size:17px}
  /* TIGHTEN THE FIRST VIEWPORT. Every value below is space, not type: the hero
     keeps its headline and its full explanation, but stops spending 300px of
     padding before the proof. The target is the live reveal beginning inside
     the first screen, not a promise followed by a form. */
  .rc-seq{margin-top:18px}
  .rc-seq li{padding:10px 12px 0 0;font-size:12px}
  .rc-command-bar{min-height:0;padding:10px 15px}
  .rc-command form{padding:16px 15px}
  .rc-command textarea{font-size:19px;line-height:1.35;overflow:hidden}
  .rc-go{padding:13px 15px}
  .rc-examples{padding:11px 15px 13px;gap:7px}
  .rc-examples button{padding:6px 9px}
  .rc-reveal{display:block;margin-inline:0}
  .rc-rail{padding:24px 22px}
  .rc-rail h2{font-size:27px}
  .rc-rail{padding:28px 22px;border-right:0;border-bottom:1px solid var(--rc-line-warm)}
  .rc-status{margin-bottom:18px}
  .rc-steps{display:flex;gap:0;overflow-x:auto;border-top:1px solid #d4d1c8;-webkit-overflow-scrolling:touch}
  .rc-steps li{border-bottom:0;padding:12px 14px 12px 0;white-space:nowrap;width:auto}
  .rc-brief{padding:30px 22px 0}
  .rc-brief h3{font-size:clamp(28px,7.5vw,38px);margin-top:26px;letter-spacing:-1px}
  .rc-brief-copy{font-size:16px;margin-bottom:26px}
  .rc-strip{margin-inline:-22px;padding-inline:22px;align-items:flex-start}
  .rc-detail{grid-template-columns:1fr}
  .rc-path li{grid-template-columns:1fr;gap:4px}
  .rc-evidence li{grid-template-columns:1fr;gap:6px}
  .rc-h2{font-size:clamp(32px,8.5vw,43px);letter-spacing:-1.4px}
  .rc-introgrid{display:block}
  .rc-introgrid>p:last-child{margin-top:24px}
  .rc-list article{grid-template-columns:38px 1fr;gap:14px}
  .rc-list em{grid-column:2;text-align:left}
  .rc-list h3{font-size:22px}
  .rc-trust{padding-top:70px;padding-bottom:70px}
  .rc-quad{grid-template-columns:1fr}
  .rc-quad article{min-height:auto}
  .rc-access{padding:80px 20px}
  .rc-cta{gap:18px;width:100%;justify-content:space-between}
  .rc-footer{padding-block:26px}
  .rc-footer p{width:100%;margin:0!important}
}

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