/* ============================================================
   ScopeFlow marketing site — the shared stylesheet.
   Extracted verbatim from index.html when the site became more
   than one page (29 Aug 2026), so the landing page and the user
   guide cannot drift apart. Page-specific rules stay inline on
   the page that needs them.
   ============================================================ */

/* ============================================================
   TCR ESTIMATING — landing page
   Palette derived from the trade's own artifact: a marked-up
   takeoff sheet. Cool stone paper, drafting-ink navy,
   ONE accent family in the app's CTA blue (brand rhymes with the
   software — director, 2 Sep 2026, extended to the whole site on his
   review); green = confirmed and red = gap stay semantic.
   ============================================================ */

:root{
  --paper:        #EBEDE8;
  --paper-deep:   #E1E4DE;
  --ink:          #152029;
  --ink-soft:     #4A5A63;
  --rule:         #C2CAC4;
  --rule-faint:   #D6DCD6;

  --cta:          #2191FB;   /* the app's action blue — the site's one accent */
  --navy:         #0C2E5A;   /* the app's brand navy — small accent TEXT (chips, callout kickers) */
  --green:        #2F7D4F;   /* confirmed */
  --gap:          #B23A26;   /* missing, never invented */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1180px;
  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background-color:var(--paper);
  /* engineering paper: 8mm grid, barely there */
  background-image:
    repeating-linear-gradient(to right, var(--rule-faint) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--rule-faint) 0 1px, transparent 1px 32px);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }

/* ---------- type roles ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0; }
h1{ font-size:clamp(34px,5.2vw,54px); }
h2{ font-size:clamp(30px,4.4vw,50px); }
h3{ font-size:clamp(19px,2vw,23px); letter-spacing:-.015em; line-height:1.2; }
p{ margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.lede{ font-size:clamp(17px,1.9vw,20px); color:var(--ink-soft); line-height:1.55; max-width:60ch; }

/* ---------- SIGNATURE: highlighter swipe ----------
   Small screens get a wrapping gradient highlight.
   Above 700px, where the line is safely one row, it becomes the
   rough hand-swiped marker shape. */
.hl{
  background-image:linear-gradient(rgba(33,145,251,.38), rgba(33,145,251,.38));
  background-repeat:no-repeat;
  background-size:100% .58em;
  background-position:0 .70em;
  padding-inline:.08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hl--green{ background-image:linear-gradient(rgba(47,125,79,.34), rgba(47,125,79,.34)); }

@media (min-width:701px){
  .hl{
    background-image:none; padding-inline:0;
    position:relative; z-index:0; white-space:nowrap;
  }
  .hl::before{
    content:""; position:absolute; z-index:-1;
    left:-.14em; right:-.14em; top:.14em; bottom:.03em;
    background:var(--cta);
    opacity:.38;
    border-radius:42% 58% 46% 54% / 62% 44% 56% 38%;
    transform:rotate(-.5deg) skewX(-3deg);
  }
  .hl--green::before{ background:var(--green); opacity:.34; }
}

/* ---------- section rhythm (single source of truth) ---------- */
.band{ padding-block:clamp(64px,9vw,124px); position:relative; }
.band--tight{ padding-block:clamp(48px,6vw,84px); }
.band + .band{ border-top:1px solid var(--rule); }

.sechead{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(28px,4vw,48px); }
.sechead .eyebrow{ flex:none; }
.sechead .line{ flex:1; height:1px; background:var(--rule); transform:translateY(-3px); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(235,237,232,.88);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand__mark{
  width:22px; height:22px; border:2px solid var(--ink); border-radius:2px;
  display:grid; place-items:center; flex:none;
}
.brand__mark i{ width:8px; height:8px; background:var(--cta); display:block; }
.brand__txt{ font-family:var(--display); font-weight:800; font-size:16.5px; letter-spacing:-.02em; }
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--ink-soft); text-decoration:none; text-transform:uppercase;
}
.nav__links a:hover{ color:var(--ink); }
@media (max-width:760px){ .nav__links a:not(.btn){ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:12px 20px; border:1.5px solid var(--cta); border-radius:2px;
  background:var(--cta); color:#fff; cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ box-shadow:3px 3px 0 var(--ink); }
.btn--sm{ padding:9px 15px; font-size:11.5px; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2.5px solid var(--cta); outline-offset:3px; border-radius:2px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(52px,7vw,88px); padding-bottom:clamp(56px,7vw,96px); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,60px); align-items:center; }
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr; gap:38px; } }

.hero h1{ margin-top:18px; }
.hero__sub{ margin-top:22px; max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__note{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:18px; letter-spacing:.02em; }

/* ---------- SIGNATURE: the live estimate line ---------- */
.sheet{
  background:#F6F7F3;
  border:1.5px solid var(--ink);
  border-radius:3px;
  box-shadow:7px 7px 0 rgba(21,32,41,.09);
  overflow:hidden;
}
.sheet__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 14px; border-bottom:1.5px solid var(--ink); background:var(--paper-deep);
}
.sheet__title{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.sheet__pin{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); }

.sheet__cols,.sheet__row{
  display:grid;
  grid-template-columns: 88px minmax(0,1fr) 62px 40px 74px 92px;
  gap:10px; align-items:center;
  padding:9px 14px;
  font-family:var(--mono); font-size:12px;
}
.sheet__cols{
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--rule); padding-block:7px;
}
.sheet__row{ border-bottom:1px solid var(--rule-faint); min-height:41px; }
.sheet__row:last-of-type{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.dim{ color:var(--rule); }
.desc{ font-family:var(--body); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:560px){
  .sheet__cols,.sheet__row{ grid-template-columns:74px minmax(0,1fr) 66px 82px; }
  .sheet__cols span:nth-child(4),.sheet__row span:nth-child(4),
  .sheet__cols span:nth-child(5),.sheet__row span:nth-child(5){ display:none; }
}

.sheet__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-top:1.5px solid var(--ink); background:var(--paper-deep);
  flex-wrap:wrap;
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px; border:1px solid;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.chip i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.chip--wait{ color:var(--ink-soft); border-color:var(--rule); background:transparent; }
.chip--flag{ color:var(--navy); border-color:var(--cta); background:rgba(33,145,251,.14); }
.chip--green{ color:var(--green); border-color:var(--green); background:rgba(47,125,79,.14); }
.sheet__src{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); }

.caret{ display:inline-block; width:7px; height:13px; background:var(--ink); vertical-align:-2px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   PROBLEM — ruled schedule rows
   ============================================================ */
.prob{ border-top:1px solid var(--rule); }
.prob__row{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:clamp(14px,3vw,34px);
  padding-block:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--rule);
  align-items:start;
}
.prob__k{ font-family:var(--mono); font-size:11px; color:var(--gap); letter-spacing:.08em; padding-top:.42em; }
.prob__t{ font-family:var(--display); font-weight:600; font-size:clamp(18px,2.5vw,27px); letter-spacing:-.02em; line-height:1.22; }
.prob__d{ color:var(--ink-soft); font-size:15.5px; margin-top:8px; max-width:64ch; }

/* ============================================================
   HOW — a real sequence, so it earns its numbers
   ============================================================ */
.how{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
@media (max-width:940px){ .how{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .how{ grid-template-columns:1fr; } }
.how__cell{ border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:clamp(20px,2.4vw,28px); background:rgba(246,247,243,.6); }
.how__n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-soft); }
.how__cell h3{ margin-top:14px; }
.how__cell p{ margin-top:11px; color:var(--ink-soft); font-size:14.5px; line-height:1.55; }

/* ============================================================
   RATES — the moat
   ============================================================ */
.rates__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(30px,5vw,64px); align-items:start; }
@media (max-width:940px){ .rates__grid{ grid-template-columns:1fr; } }
.rates__list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
.rates__list li{ padding-block:17px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:16px minmax(0,1fr); gap:14px; align-items:start; }
.rates__list b{ font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em; }
.rates__list span{ display:block; color:var(--ink-soft); font-size:14.5px; margin-top:4px; }
.tick{ width:14px; height:14px; border:1.5px solid var(--green); border-radius:2px; position:relative; margin-top:4px; }
.tick::after{ content:""; position:absolute; inset:2px 2px; background:var(--green); border-radius:1px; }

/* ============================================================
   CONTROL — provenance tags
   ============================================================ */
.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  padding:6px 11px; border:1px dashed var(--ink-soft); border-radius:2px; color:var(--ink);
}
.tag b{ color:var(--ink-soft); font-weight:400; }

.ctrl__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); margin-top:clamp(28px,4vw,44px); }
@media (max-width:860px){ .ctrl__grid{ grid-template-columns:1fr; } }
.ctrl__card{ border-top:2px solid var(--ink); padding-top:16px; }
.ctrl__card h3{ font-size:18px; }
.ctrl__card p{ color:var(--ink-soft); font-size:14.5px; margin-top:9px; }

/* ============================================================
   PRICING — tabular, not card-y
   ============================================================ */
.price{ border-top:1px solid var(--ink); }
.price__row{
  display:grid; grid-template-columns:210px minmax(0,1fr) 190px; gap:clamp(16px,3vw,36px);
  padding-block:clamp(22px,3vw,32px); border-bottom:1px solid var(--rule); align-items:start;
}
@media (max-width:860px){ .price__row{ grid-template-columns:1fr; gap:14px; } }
.price__name{ font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.02em; }
.price__for{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:7px; }
.price__inc{ margin:0; padding:0; list-style:none; }
.price__inc li{ font-size:14.5px; color:var(--ink-soft); padding-left:17px; position:relative; margin-bottom:6px; }
.price__inc li::before{ content:"—"; position:absolute; left:0; color:var(--rule); }
.price__fig{ font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.price__unit{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:4px; letter-spacing:.05em; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding-block:20px;
  font-family:var(--display); font-weight:600; font-size:clamp(16.5px,2vw,20px); letter-spacing:-.015em;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); font-weight:400; font-size:21px; color:var(--ink-soft); flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding-bottom:22px; color:var(--ink-soft); font-size:15.5px; max-width:72ch; }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{ background:var(--ink); color:var(--paper); border-top:1px solid var(--ink); }
.cta h2{ color:var(--paper); max-width:16ch; }
.cta p{ color:#A9B7BE; margin-top:18px; max-width:52ch; font-size:16.5px; }
.cta .eyebrow{ color:#8A9BA3; }
.cta .sechead .line{ background:#39474F; }
.form{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.form input{
  flex:1 1 260px; min-width:0;
  background:transparent; border:1.5px solid #46545C; border-radius:2px;
  padding:12px 14px; color:var(--paper); font-family:var(--mono); font-size:13px;
}
.form input::placeholder{ color:#7C8C94; }
.form .btn{ background:var(--cta); border-color:var(--cta); color:#fff; }
.form .btn:hover{ box-shadow:3px 3px 0 var(--paper); }
.cta__fine{ font-family:var(--mono); font-size:11px; color:#7C8C94; margin-top:16px; letter-spacing:.03em; }

.foot{ background:var(--ink); color:#8A9BA3; padding-block:30px; border-top:1px solid #2A3840; }
.foot__in{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; }
.foot a{ color:#A9B7BE; text-decoration:none; }
.foot a:hover{ color:var(--paper); }
.foot .brand__txt{ color:var(--paper); }
.foot .brand__mark{ border-color:var(--paper); }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }