/* ============================================================================
   coralmate.com — the rest of the stylesheet.
   Tokens, reset, header, hero and the honesty strip live inlined in index.html
   so the first screen paints without waiting for this file.
   No @import, no external font, no network request of any kind.
   ========================================================================== */

/* Diagram tokens — used by the inline SVG illustrations so they follow the theme. */
:root{
  --diag-bg:#f2fafa; --diag-card:#ffffff; --diag-line:#a9c9cd;
  --diag-ink:#153b43; --diag-dim:#556a71;
  --diag-accent:#b8371a; --diag-accent-bg:#fbe4da;
}
@media (prefers-color-scheme:dark){
  :root{
    --diag-bg:#0b2d38; --diag-card:#123a45; --diag-line:#2d6373;
    --diag-ink:#dcecee; --diag-dim:#9bbcc3;
    --diag-accent:#ff9678; --diag-accent-bg:#3b2b2c;
  }
}

/* ---------------------------------------------------------------- structure */
.band{padding:78px 0; border-top:1px solid var(--line)}
.band-soft{background:var(--shell-2)}
.band-deep{background:var(--sea-deep); color:#eef6f6; border-top-color:#123a45}
.band-deep .eyebrow{color:#9fd3dc}
.band-deep h2{color:#ffffff}
.band-deep code.inline{background:#123a45; color:#dcecee; border-color:#1d4f5e}
.wrap-narrow{max-width:760px}

h2{font:400 clamp(25px,3.1vw,36px)/1.2 var(--serif); margin:0 0 16px; letter-spacing:-.012em; max-width:22em}
h3{font:600 19px/1.35 var(--sans); margin:0 0 10px; letter-spacing:-.005em}
p{margin:0 0 15px}
.section-lead{font-size:18px; color:var(--ink-2); max-width:44em; margin:0 0 40px}
.section-lead.center{margin-left:auto; margin-right:auto; text-align:center}
.fine{font-size:14.5px; line-height:1.6; color:var(--ink-3)}
.opt{font:400 12.5px/1 var(--mono); color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; margin-left:4px}
em{font-style:italic}

code.inline{
  font:500 .89em/1.4 var(--mono); background:var(--sea-soft); color:var(--sea);
  padding:1px 6px; border-radius:5px; border:1px solid var(--line); white-space:nowrap;
}
kbd{
  font:600 .82em/1 var(--mono); background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:3px 6px; white-space:nowrap;
}

/* ------------------------------------------------------------- read-first */
/* 380px, not 300px: at 300 the four cards laid out 3-across and left one orphan on
   its own row. 380 gives a 2x2 block on desktop and one column below ~780px. */
.know-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:22px}
.know-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 22px; box-shadow:var(--shadow);
}
.know-card h3{color:var(--sea); font-size:19.5px}
.know-card p{font-size:16px; color:var(--ink-2)}
.know-card p:last-child{margin-bottom:0}
.steps{margin:0 0 15px; padding-left:22px; font-size:16px; color:var(--ink-2)}
.steps li{margin-bottom:6px}
.callout{
  background:var(--coral-soft); border-left:3px solid var(--coral);
  padding:13px 16px; border-radius:0 8px 8px 0; margin-top:16px !important; font-size:15.5px !important;
}
.hashline{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:12px 0}
.hash-label{font:600 11.5px/1 var(--mono); letter-spacing:.08em; color:var(--sea); text-transform:uppercase}
.hashline code{
  font:500 12px/1.5 var(--mono); color:var(--ink-2); background:var(--shell-2);
  border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  word-break:break-all; overflow-wrap:anywhere; display:block; width:100%;
}

/* --------------------------------------------------------------- features */
.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:34px 40px; margin-bottom:66px}
.feat h3{display:flex; gap:11px; align-items:baseline; font-size:19px; color:var(--ink)}
.feat-ic{
  flex:0 0 auto; color:var(--coral); font:400 17px/1 var(--sans);
  transform:translateY(1px);
}
.feat p{color:var(--ink-2); font-size:16px; margin:0}

.assistants{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 36px; box-shadow:var(--shadow);
}
.assistants h3{color:var(--sea); font-size:21px}
.assistants p{color:var(--ink-2); font-size:16px}
.figure-sm svg{box-shadow:none; border:1px solid var(--line)}

/* ---------------------------------------------------------------- privacy */
.priv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:40px}
.priv-h{font:600 13px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #1d4f5e}
.priv-h.yes{color:#8fe0c4}
.priv-h.no{color:#ffb59d}
.ticks,.crosses{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.ticks li,.crosses li{position:relative; padding-left:32px; font-size:16px; line-height:1.6; color:#cfe4e7}
.ticks li strong,.crosses li strong{color:#ffffff}
.ticks li::before,.crosses li::before{
  position:absolute; left:0; top:0; width:21px; height:21px; border-radius:6px;
  font:700 12px/21px var(--sans); text-align:center;
}
.ticks li::before{content:"✓"; background:#14483d; color:#8fe0c4}
.crosses li::before{content:"✕"; background:#4a2620; color:#ffb59d}
/* The honest-limits note replaces the old red-X column: plain prose, not a wall
   of crosses. #cfe4e7 on the sea-deep band measures well past 4.5:1. */
.priv-note{color:#cfe4e7; font-size:16px; line-height:1.6; margin:0 0 15px}
.priv-note:last-child{margin-bottom:0}
.band-deep code.inline{white-space:normal}

/* --------------------------------------------------------------- download */
.dl-wrap{text-align:center}
.dl-wrap h2{margin-left:auto; margin-right:auto}
.btn-lg{font-size:19px; padding:19px 34px}
.dl-meta.center{text-align:center}
.dl-alt{text-align:center; margin:8px 0 0}
.dl-alt a{color:var(--sea); text-underline-offset:3px}
.thanks{
  max-width:660px; margin:34px auto 0; text-align:left;
  background:var(--card); border:1px solid var(--coral); border-radius:var(--r);
  padding:28px 30px; box-shadow:var(--shadow);
}
.thanks h3{color:var(--coral); font-size:20px}
.thanks-steps{margin:0 0 6px; padding-left:22px; color:var(--ink-2); font-size:16px}
.thanks-steps li{margin-bottom:12px}
.thanks-coffee{
  border-top:1px solid var(--line); padding-top:18px; margin:18px 0 0;
  font-size:16px; color:var(--ink-2);
}

/* ------------------------------------------------------------------- ask */
.coffee-wrap{display:grid; grid-template-columns:132px minmax(0,1fr); gap:40px; align-items:start}
.coffee-art svg{width:132px; height:132px}
.coffee-lead{font-size:17.5px; color:var(--ink-2); max-width:40em}
.btn-coffee{background:var(--sea); color:#ffffff}
.btn-coffee:hover{background:#0a3946}
@media (prefers-color-scheme:dark){
  .btn-coffee{background:#9fd3dc; color:#062028}
  .btn-coffee:hover{background:#bfe4ea}
}

/* ----------------------------------------------------------------- forms */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:26px; margin-bottom:60px}
.fbox{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 28px 26px; box-shadow:var(--shadow);
}
.fbox h3{color:var(--sea); font-size:20px}
.fbox-note{font-size:15px; color:var(--ink-3); margin-bottom:22px; line-height:1.6}
.nojs{background:var(--card); border-left:3px solid var(--coral); padding:15px 18px; border-radius:0 10px 10px 0; font-size:16px}
.field{margin-bottom:18px}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font:600 15px/1.4 var(--sans); color:var(--ink); margin-bottom:6px}
input[type=text],input[type=email],textarea{
  width:100%; font:400 16px/1.5 var(--sans); color:var(--ink);
  background:var(--shell); border:1.5px solid var(--line); border-radius:9px;
  padding:11px 13px; display:block;
}
textarea{resize:vertical; min-height:88px}
#b-report{font:400 13px/1.5 var(--mono)}
input:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,textarea:focus{border-color:var(--sea)}
.field.invalid input,.field.invalid textarea{border-color:var(--coral)}
.hint{font-size:13.5px; color:var(--ink-3); margin:6px 0 0; line-height:1.5}
.trunc{
  font-size:14px; line-height:1.55; color:var(--coral); font-weight:600;
  background:var(--coral-soft); border-left:3px solid var(--coral);
  padding:10px 13px; border-radius:0 8px 8px 0; margin:10px 0 0;
}
.count{float:right; font:400 12.5px/1.5 var(--mono); color:var(--ink-3)}
.count.over{color:var(--coral); font-weight:600}
.btn-sm{font-size:16px; padding:13px 22px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.formstatus{margin:14px 0 0; font-size:15.5px; line-height:1.55; min-height:1px}
.formstatus:empty{margin:0}
.formstatus.ok{color:var(--sea); font-weight:600}
.formstatus.err{color:var(--coral); font-weight:600}
.formstatus.busy{color:var(--ink-3)}

/* ----------------------------------------------------------- request list */
.reqs{border-top:1px solid var(--line); padding-top:44px}
.req-list{display:grid; gap:12px; margin-top:22px}
.req{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:11px; padding:16px 18px;
}
.req-vote{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--shell-2); border:1.5px solid var(--line); border-radius:9px;
  padding:7px 0; width:100%; cursor:pointer; color:var(--ink); font-family:var(--sans);
}
.req-vote:hover:not(:disabled){border-color:var(--coral); background:var(--coral-soft)}
.req-vote:disabled{cursor:default; opacity:.72}
.req-vote .n{font:700 17px/1 var(--sans)}
.req-vote .l{font:600 10.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.req-t{font-weight:600; font-size:16.5px; margin:0 0 3px}
.req-d{font-size:15px; color:var(--ink-2); margin:0}
.pill{
  font:600 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:20px; white-space:nowrap;
  background:var(--sea-soft); color:var(--sea); border:1px solid var(--line);
}
.pill[data-s="done"]{background:#dcf1e6; color:#14624a; border-color:#a9d6c2}
.pill[data-s="planned"]{background:var(--coral-soft); color:var(--coral); border-color:var(--coral)}
.pill[data-s="declined"]{background:var(--shell-2); color:var(--ink-3)}
@media (prefers-color-scheme:dark){
  .pill[data-s="done"]{background:#123a30; color:#8fe0c4; border-color:#1f5a48}
}
.req-empty{color:var(--ink-3); font-size:15.5px; margin:0; padding:18px 0}

/* ------------------------------------------------------------------- faq */
details{
  border-bottom:1px solid var(--line); padding:4px 0;
}
details summary{
  cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
  font:600 17.5px/1.45 var(--sans); color:var(--ink);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+"; position:absolute; right:4px; top:15px;
  font:400 24px/1 var(--sans); color:var(--coral);
}
details[open] summary::after{content:"−"}
details summary:hover{color:var(--coral)}
details p{color:var(--ink-2); font-size:16px; padding:0 30px 18px 0; margin:0}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line); background:var(--shell-2); padding:44px 0 34px}
.foot-grid{display:flex; gap:36px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; margin-bottom:26px}
.foot-brand{font:700 21px/1 var(--serif); margin:0 0 8px; color:var(--ink)}
.foot-grid .fine{max-width:38em; margin:0}
.foot-links{list-style:none; margin:0; padding:0; display:flex; gap:10px 22px; flex-wrap:wrap}
.foot-links a{color:var(--ink-2); text-decoration:none; font-size:15.5px; display:inline-block; padding:4px 0}
.foot-links a:hover{color:var(--coral); text-decoration:underline}
.foot-fine{border-top:1px solid var(--line); padding-top:22px; margin:0}

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
  .band{padding:58px 0}
  .assistants{grid-template-columns:1fr; gap:30px; padding:28px 24px}
  .coffee-wrap{grid-template-columns:1fr; gap:24px}
  .coffee-art svg{width:96px; height:96px}
}
@media (max-width:700px){
  /* nowrap keeps paths like %APPDATA%\Coral in one piece on a wide screen, but on a
     narrow one a long command (Get-FileHash .\Coral-Setup-1.9.0-x64.exe) pushed the
     whole page sideways. Measured: 23px of horizontal scroll at 360px. */
  code.inline{white-space:normal; overflow-wrap:anywhere}
}
@media (max-width:560px){
  /* Measured at 360px: the header was taking 270px of a 780px screen before the
     nav wrapped onto its second row. Tightened so the h1 stays on the first screen. */
  .site-head .wrap{min-height:0; padding-top:13px; padding-bottom:11px; gap:9px 14px}
  .site-nav{margin-left:0; width:100%; gap:5px 17px}
  .site-nav a{font-size:14.5px}
  .brand{font-size:19px}
  .brand svg{width:26px; height:26px}

  .req{grid-template-columns:64px minmax(0,1fr); gap:14px}
  .req .pill{grid-column:2; justify-self:start}
  .field.two{grid-template-columns:1fr}
  .know-card,.fbox{padding:22px 20px}
  .thanks{padding:24px 20px}
}
@media (max-width:400px){
  .band{padding:46px 0}
  .btn-lg{font-size:17px; padding:17px 20px}
  h2{font-size:25px}
  .foot-links{gap:14px 18px}
}

/* ------------------------------------------------------------------ print */
@media print{
  .site-head,.site-nav,.thanks,.form-grid,.reqs,.coffee-art{display:none}
  body{background:#fff; color:#000}
  .band{padding:20px 0; border:0}
}