/* portal/landing.css — REWS.AI landing page.
   Built to the Chairman landing wireframe v2: a single decisive hero (headline, one line, one button)
   over a framed PICTURE of the product — a static, non-interactive depiction of the R73 single view
   (horizon control + read-only plan state, two impact tiles, spill-over line, four merged-list rows) —
   then three doors into the product. Tokens mirror the shared shell block (tools/shell-tokens.js) so
   light + dark match the rest of the product exactly; the landing carries no sidebar, so it defines its
   own copy of the tokens rather than pulling shell.css. Horizontal gutters are 24px on mobile, up to
   60px on wide. The picture uses two extra status tokens (seam accent + status pills) below. */

:root{
  color-scheme:light;  /* native controls/scrollbars follow the theme (dark blocks below flip it) */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-display:2.75rem;--fs-h1:1.75rem;--fs-h2:1.375rem;--fs-body:1.0625rem;--fs-small:0.875rem;--fs-micro:0.8125rem;
  --lh-tight:1.2;--lh-body:1.55;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:14px;
  --bg:#f6f8fa;--panel:#ffffff;--ink:#1c2430;--muted:#5a6473;--line:#d7dde5;
  --accent:#3d6fa8;--on-accent:#ffffff;--accent2:#2f7e86;--accent-soft:#e4edf6;
  --warn-bg:#fbf2df;--warn-line:#ecd7a2;--warn-ink:#7f560f;--danger:#b23b3b;
  --shadow:0 18px 40px rgba(28,36,48,0.08);
  /* picture-mock status tokens (the R73 single view's seam + status pills) */
  --seam:#3d6fa8;--plan-bg:#f2f6fb;
  --st-red-ink:#b23b3b;--st-red-bg:rgba(178,59,59,0.12);
  --st-amber-ink:#8a6414;--st-amber-bg:rgba(217,164,65,0.18);
  --st-green-ink:#2f7d4f;--st-green-bg:rgba(47,125,79,0.14);
  --st-grey-ink:#5a6473;--st-grey-bg:rgba(90,100,115,0.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#12161c;--panel:#1b222b;--ink:#e6eaf0;--muted:#98a2b1;--line:#2a323d;
    --accent:#5b8fc9;--on-accent:#0e141b;--accent2:#46a7ad;--accent-soft:#1e2b3a;
    --warn-bg:#2a2214;--warn-line:#574524;--warn-ink:#dbb26a;--danger:#e0796a;
    --shadow:0 18px 40px rgba(0,0,0,0.5);
    --seam:#5b8fc9;--plan-bg:#161d26;
    --st-red-ink:#e0796a;--st-red-bg:rgba(224,122,79,0.16);
    --st-amber-ink:#dbb26a;--st-amber-bg:rgba(217,164,65,0.16);
    --st-green-ink:#5fb37a;--st-green-bg:rgba(95,179,122,0.16);
    --st-grey-ink:#98a2b1;--st-grey-bg:rgba(152,162,177,0.15);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12161c;--panel:#1b222b;--ink:#e6eaf0;--muted:#98a2b1;--line:#2a323d;
  --accent:#5b8fc9;--on-accent:#0e141b;--accent2:#46a7ad;--accent-soft:#1e2b3a;
  --warn-bg:#2a2214;--warn-line:#574524;--warn-ink:#dbb26a;--danger:#e0796a;
  --shadow:0 18px 40px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;}
a{color:inherit;}

.lp-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,60px);}

/* ---- top bar ---------------------------------------------------------------------------------- */
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--line);}
.lp-brand{font-weight:var(--fw-bold);letter-spacing:0.4px;text-decoration:none;font-size:1.15rem;color:var(--ink);}
.lp-brand:hover{color:var(--accent);}
.lp-top-actions{display:flex;align-items:center;gap:14px;}
.lp-about{color:var(--muted);text-decoration:none;font-size:var(--fs-small);font-weight:var(--fw-medium);}
.lp-about:hover{color:var(--accent);}
.lp-theme{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--muted);
  font:inherit;font-size:var(--fs-small);font-weight:var(--fw-medium);cursor:pointer;padding:4px 2px;}
.lp-theme:hover{color:var(--accent);}
.lp-theme .repp-theme-icon{font-size:15px;line-height:1;}

/* accent button — the one action, echoed small in the top bar */
.lp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);border-radius:var(--radius-sm);padding:13px 22px;text-decoration:none;
  font-weight:var(--fw-semibold);font-size:var(--fs-body);box-shadow:var(--shadow);transition:filter .12s ease;}
.lp-cta:hover{filter:brightness(1.06);}
.lp-cta--sm{padding:9px 15px;font-size:var(--fs-small);box-shadow:none;}

/* ---- hero ------------------------------------------------------------------------------------- */
.lp-hero{padding:clamp(40px,7vw,80px) 0 clamp(28px,4vw,44px);}
.lp-headline{font-size:clamp(2.35rem,5.2vw,3.4rem);line-height:1.08;font-weight:var(--fw-bold);
  letter-spacing:-0.015em;margin:0 0 20px;max-width:13em;}
.lp-sub{color:var(--muted);font-size:clamp(1.15rem,1.9vw,1.35rem);line-height:1.4;max-width:34em;margin:0 0 28px;}

/* ---- framed picture panel (a static depiction of the R73 single view) ------------------------- */
.lp-frame{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(18px,2.5vw,28px);}
.lp-credit{margin:0 0 12px;font-size:var(--fs-small);color:var(--muted);}

/* the mock surface — a subtly inset panel so it reads as a picture of the app, not the app itself */
.lp-view{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);
  padding:clamp(12px,1.6vw,18px);}

/* header strip: horizon segment control (left) + read-only plan-state chips (right) */
.lp-view-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;}
.lp-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--panel);}
.lp-seg span{padding:5px 12px;font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--muted);
  border-right:1px solid var(--line);}
.lp-seg span:last-child{border-right:0;}
.lp-seg span.is-on{background:var(--accent-soft);color:var(--ink);font-weight:var(--fw-semibold);}
.lp-ps{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:auto;}
.lp-ps-chip{font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;}
.lp-ps-chip.is-on{background:var(--st-green-bg);border-color:transparent;color:var(--st-green-ink);font-weight:var(--fw-semibold);}

/* two impact tiles */
.lp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,16px);margin-bottom:14px;}
.lp-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;}
.lp-tile-k{margin:0 0 6px;font-size:var(--fs-micro);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--muted);font-weight:var(--fw-semibold);}
.lp-tile-v{margin:0;font-size:clamp(1.5rem,3vw,2rem);line-height:1.05;font-weight:var(--fw-bold);letter-spacing:-0.01em;}
.lp-tile-arrow{color:var(--accent);font-weight:var(--fw-semibold);padding:0 2px;}
.lp-tile-s{margin:6px 0 0;font-size:var(--fs-small);color:var(--muted);line-height:1.35;}

/* merged-list preview — scrolls horizontally on narrow screens, never pushing the page sideways */
.lp-tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);}
.lp-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);}
.lp-tbl th{font-size:var(--fs-micro);letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);
  text-align:left;font-weight:var(--fw-semibold);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.lp-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.lp-tbl tr:last-child td{border-bottom:0;}
.lp-tbl .lp-p{background:var(--plan-bg);}                 /* the proposed-plan columns, on the right of the seam */
.lp-tbl .lp-seam{border-left:2px solid var(--seam);}     /* the accent seam: as-built | plan */
.lp-dim{color:var(--muted);}
.lp-st{display:inline-block;border-radius:5px;padding:1px 8px;font-size:var(--fs-micro);font-weight:var(--fw-medium);white-space:nowrap;}
.lp-red{background:var(--st-red-bg);color:var(--st-red-ink);}
.lp-amber{background:var(--st-amber-bg);color:var(--st-amber-ink);}
.lp-green{background:var(--st-green-bg);color:var(--st-green-ink);}
.lp-grey{background:var(--st-grey-bg);color:var(--st-grey-ink);}

.lp-spill{margin:12px 2px 0;font-size:var(--fs-small);color:var(--muted);}
.lp-hint{margin:12px 0 0;text-align:center;font-size:var(--fs-small);color:var(--muted);letter-spacing:0.01em;}

/* ---- three doors ------------------------------------------------------------------------------ */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);
  margin:clamp(28px,4vw,44px) 0 0;}
.lp-card{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:22px 22px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .12s ease,transform .12s ease;}
.lp-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.lp-card-h{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-semibold);letter-spacing:-0.01em;}
.lp-card-l{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.4;flex:1 1 auto;}
.lp-card-go{margin-top:6px;color:var(--accent);font-size:var(--fs-small);font-weight:var(--fw-semibold);}

/* ---- footer ----------------------------------------------------------------------------------- */
.lp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,56px);padding:20px 0 32px;border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-small);}
.lp-foot a{color:var(--muted);text-decoration:none;}
.lp-foot a:hover{color:var(--accent);}

/* ---- responsive ------------------------------------------------------------------------------- */
@media (max-width:820px){
  .lp-cards{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .lp-tiles{grid-template-columns:1fr;gap:12px;}   /* the two impact tiles stack */
  .lp-ps{margin-left:0;}                            /* plan-state chips drop below the horizon control */
  .lp-about{display:none;}                          /* keep the top bar to brand · toggle · CTA on narrow screens */
  .lp-hero{max-width:none;}
}