/* Reframe — design tokens and shared components.
   One grotesk (Archivo) for the interface, one serif (Source Serif 4) for
   document text: the redline, drafts, and reading copy. */

:root{
  --paper:#ECEEF0; --paper-raised:#FFFFFF;
  --ink:#0F131A; --ink-soft:#565E6C; --ink-faint:#8B929E;
  --line:#D4D8DE;
  --accent:#2338CE; --accent-ink:#FFFFFF; --accent-soft:#E3E6FA;
  --redline:#A62F22; --redline-soft:#F6E6E3;
  --greenline:#17714B; --greenline-soft:#E2F0E9;
  --shadow:0 1px 2px rgba(15,19,26,.05), 0 8px 24px -10px rgba(15,19,26,.20);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1014; --paper-raised:#171A21;
    --ink:#E8E9EC; --ink-soft:#98A0AE; --ink-faint:#656D7B;
    --line:#262B34;
    --accent:#8592FF; --accent-ink:#0E1014; --accent-soft:#1C2038;
    --redline:#E08C80; --redline-soft:#2B1B18;
    --greenline:#5FBF8C; --greenline-soft:#152720;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1014; --paper-raised:#171A21;
  --ink:#E8E9EC; --ink-soft:#98A0AE; --ink-faint:#656D7B;
  --line:#262B34;
  --accent:#8592FF; --accent-ink:#0E1014; --accent-soft:#1C2038;
  --redline:#E08C80; --redline-soft:#2B1B18;
  --greenline:#5FBF8C; --greenline-soft:#152720;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  font-size:16px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-0.028em; text-wrap:balance; }
img{ max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }
.doc{ font-family:"Source Serif 4", Georgia, "Times New Roman", serif; }
.num{ font-variant-numeric:tabular-nums; }

.wrap{ max-width:1060px; margin:0 auto; padding:0 28px; }
.prose{ max-width:600px; }
.label{ font-size:.78rem; font-weight:600; color:var(--ink-faint); }
.muted{ color:var(--ink-soft); }

/* masthead */
.masthead{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:10; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px; }
.wordmark{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:1.12rem; letter-spacing:-0.03em; text-decoration:none; }
.masthead nav{ display:flex; gap:24px; align-items:center; }
.masthead nav a{ text-decoration:none; color:var(--ink-soft); font-size:.9rem; font-weight:500; padding-bottom:2px; border-bottom:1.5px solid transparent; }
.masthead nav a:hover{ color:var(--ink); border-color:var(--accent); }
@media (max-width:700px){ .masthead nav a.hide-sm{ display:none; } }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:13px 22px;
  border-radius:2px; font-size:.94rem; font-weight:600; letter-spacing:-0.01em;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:box-shadow .14s ease, border-color .14s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ box-shadow:var(--shadow); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.link-btn{ background:none; border:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font-size:.86rem; padding:0; }
.link-btn:hover{ color:var(--ink); }

/* panels */
.panel{ background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow); overflow:hidden; }
.panel-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 26px; border-bottom:1px solid var(--line); background:var(--paper); }
.panel-body{ padding:30px 26px 32px; }

/* redline */
.redline{ font-family:"Source Serif 4", Georgia, serif; font-size:1.06rem; line-height:1.82; margin:0; }
.redline del{ color:var(--redline); background:var(--redline-soft); text-decoration:line-through; text-decoration-thickness:1.5px; padding:0 1px; }
.redline ins{ color:var(--greenline); background:var(--greenline-soft); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; padding:0 1px; }

.legend{ display:flex; gap:20px; margin-top:22px; font-size:.82rem; color:var(--ink-soft); flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:14px; height:3px; display:inline-block; }
.legend .cut i{ background:var(--redline); }
.legend .add i{ background:var(--greenline); }

.facts{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.facts .label{ display:block; margin-bottom:12px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:2px; padding:5px 10px; font-size:.82rem; font-variant-numeric:tabular-nums; }
.chip .ok{ color:var(--greenline); font-weight:700; }
.chip .miss{ color:var(--redline); font-weight:700; }

.score-row{ display:flex; align-items:center; gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.score-row .label{ width:100%; }
.score-num{ font-size:1.7rem; font-weight:700; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.score-arrow{ color:var(--ink-faint); }
.score-note{ color:var(--ink-soft); font-size:.88rem; max-width:430px; line-height:1.5; }

/* forms */
textarea, input[type="email"]{
  width:100%; font-size:1rem; padding:14px; border:1px solid var(--line);
  border-radius:3px; background:var(--paper); color:var(--ink);
}
textarea{ min-height:200px; resize:vertical; line-height:1.58; font-family:"Source Serif 4", Georgia, serif; }
input[type="email"]{ font-family:inherit; }

/* sections */
.section{ padding:88px 0; border-top:1px solid var(--line); }
.section-head{ max-width:560px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.12; }
.section-head p{ color:var(--ink-soft); margin:14px 0 0; line-height:1.6; font-family:"Source Serif 4", Georgia, serif; }

/* pricing */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
@media (max-width:820px){ .tiers{ grid-template-columns:1fr; } }
.tier{ background:var(--paper-raised); padding:28px 26px; display:flex; flex-direction:column; gap:16px; }
.tier.featured{ background:var(--accent-soft); }
.tier h3{ font-size:1.05rem; }
.tier .price{ font-size:2.1rem; font-weight:700; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.tier .price small{ font-size:.85rem; font-weight:500; color:var(--ink-soft); letter-spacing:0; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; color:var(--ink-soft); }
.tier li::before{ content:"—"; color:var(--ink-faint); margin-right:8px; }
.tier .btn{ margin-top:auto; }

.caveat{ margin-top:30px; padding:18px 22px; border-left:3px solid var(--accent); background:var(--accent-soft); font-size:.92rem; color:var(--ink-soft); line-height:1.6; font-family:"Source Serif 4", Georgia, serif; }
.caveat strong{ color:var(--ink); font-weight:600; }

.notice{ padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--paper-raised); font-size:.92rem; line-height:1.5; }
.notice.warn{ border-left-color:var(--redline); }

footer{ border-top:1px solid var(--line); padding:32px 0 42px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer .tag{ color:var(--ink-faint); font-size:.85rem; }

::selection{ background:var(--accent-soft); }

/* --- team seats ------------------------------------------------------- */
.team-panel{ margin-top:22px; }
.seat-list{ display:flex; flex-direction:column; }
.seat{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.seat:last-child{ border-bottom:none; }
.seat-email{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-role{
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:2px; padding:2px 7px;
}
.seat-role.owner{ color:var(--accent); border-color:var(--accent); }
.seat-role.pending{ color:var(--ink-faint); border-style:dashed; }
.seat.is-pending .seat-email{ color:var(--ink-soft); }

.invite-row{ display:flex; gap:10px; margin-top:20px; }
.invite-row input{
  flex:1; min-width:0; font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:9px 12px;
}
.invite-row input::placeholder{ color:var(--ink-faint); }
.team-note{ margin:14px 0 0; font-size:.85rem; }
.team-note.error{ color:var(--redline); }

/* --- blind read ------------------------------------------------------ */
.reads{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.read{ border-left:2px solid var(--line); padding-left:14px; }
.read.is-after{ border-left-color:var(--greenline); }
.read .label{ display:block; margin-bottom:7px; }
.read p{
  margin:0; font-size:.9rem; line-height:1.6; color:var(--ink-soft);
  font-family:"Source Serif 4", Georgia, serif;
}
@media (max-width:640px){ .reads{ grid-template-columns:1fr; } }