/* ============================================================================
   FIELD REPORT — the shared design system for simitar.info
   Site redesign S1/S2/S4. Committed dark identity, brand hexes sampled from the
   owner's LinkedIn artwork.

   WHY THIS FILE EXISTS (S4): nine subpages were carrying the old light design.
   The alternative was pasting ~200 lines into each of them, which is the exact
   drift class this codebase has been bitten by repeatedly (one mechanism, two
   copies, quietly diverging). This is the single source of truth for the shared
   layer.

   *** KNOWN DRIFT RISK, stated rather than discovered later ***
   index.html still INLINES its copy of this system. It was verified in S2 and
   was out of S4's scope (and a concurrent task owns it), so it was not converted.
   Until it is, a token change here must be mirrored there. Converting index.html
   to link this file is the follow-up that closes it.

   COLOUR ROLES — load-bearing, do not blur:
     AZURE  = BRAND / identity. Wordmark S, headline accents, links, marks.
     ORANGE = ACTION ONLY. Filled CTA buttons and nothing else.

   Contrast (computed, WCAG 2.1, vs --ink unless noted):
     white     on ink      19.43  AA + AAA normal
     steel     on ink       7.60  AA + AAA normal
     steel     on panel     7.15  AA + AAA normal
     azure     on ink       3.84  AA LARGE ONLY (>=3.0). Never body copy.
     azure     on panel     3.61  AA LARGE ONLY.
     azure-lit on ink       6.22  AA normal — links and small accents
     azure-lit on panel     5.85  AA normal
     ink       on orange    6.42  AA normal  <-- the filled-CTA ink
     white     on orange    3.03  FAILS normal text. The brand's own LinkedIn
                                  button is white-on-orange; we do NOT copy it.
     edge      on ink       4.00  AA non-text (interactive borders, focus)
     hairline  on ink       1.22  DECORATIVE separators only, never a control
                                  edge and never meaning-bearing on its own.

   NOTE FOR THE DEMO PAGES: this file deliberately does NOT define .hidden,
   .chip, .yn-btn or any other class the demo scripts assign at runtime. Those
   stay in each demo page's own <style> block. Defining .hidden here could win a
   specificity fight and reveal elements the scripts mean to hide — a styling
   change becoming a functional one.
   ========================================================================== */

:root{
  --ink:#0B0D12;       /* page ground — near-black, the brand's deepest */
  --panel:#12151C;     /* lifted surface */
  --hairline:#1E222B;  /* decorative rules */
  --edge:#6B727C;      /* interactive borders (>=3:1) */
  --white:#FFFFFF;     /* primary + display text */
  --steel:#9AA3AD;     /* muted text */
  --azure:#2868E0;     /* BRAND (true logo blue). DISPLAY SCALE ONLY (3.84:1) */
  --azure-lit:#4A90FF; /* brand blue for TEXT-SIZE use (6.22:1) */
  --orange:#F86714;    /* ACTION ONLY — filled CTAs, nothing else */
  --display:"Barlow Condensed","Oswald","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font:400 16px/1.6 var(--body);
  /* Deliberately NO overflow-x:hidden — it masks real overflow defects instead
     of surfacing them (it hid a clipped header nav during S2). */
}
a{color:var(--white);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
         line-height:.96;letter-spacing:.005em;overflow-wrap:break-word}
p{margin:0}
hr{border:0;border-top:1px solid var(--hairline);margin:32px 0}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.5;
      letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--hairline)}
/* padding-block only: a `padding:16px 0` shorthand would zero out the horizontal
   padding .wrap sets on the SAME element (equal specificity, later rule wins)
   and slam the header flush to the viewport edge. The old design had that bug. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;
     flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
/* Wordmark per the brand artwork: azure leading S, white remainder, no separate
   mark. TEXT-STYLED FOR NOW — replace with the real SVG when supplied, keeping
   the azure/white split. */
.brand{display:inline-flex;align-items:center;font-family:var(--display);
       font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;
       color:var(--white);min-height:44px}
.brand:hover{text-decoration:none}
.brand .s{color:var(--azure)}
/* Phone: the nav takes its own row under the wordmark. Beside the brand it
   clipped the last link off the right edge at 375px. */
.nav nav{display:flex;flex-wrap:wrap;gap:2px 22px;flex:1 0 100%}
.nav nav a{display:inline-flex;align-items:center;min-height:44px;
           font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
           text-transform:uppercase;color:var(--steel)}
.nav nav a:hover{color:var(--white)}

/* ---------- page head (the subpage counterpart to the homepage hero) ---------- */
.page-head{padding-top:48px;padding-bottom:36px}
.page-head .mono{margin:0 0 18px}
.page-head h1{font-size:clamp(2.1rem,9vw,4.25rem);max-width:18ch;margin:0 0 20px;
              text-wrap:balance}
.page-head .sub{color:var(--steel);font-size:1.0625rem;max-width:62ch;margin:0}
.hl{color:var(--azure)}   /* headline accent — DISPLAY SCALE ONLY (3.84:1) */

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.cta,.cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;
  font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:2px;border:1px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;
}
.cta{background:var(--orange);color:var(--ink)}  /* 6.42:1 — NEVER white (3.03, fails) */
.cta:hover{text-decoration:none;background:#FF7A2E}
.cta-ghost{color:var(--white);border-color:var(--edge);background:transparent}
.cta-ghost:hover{text-decoration:none;border-color:var(--white);background:rgba(255,255,255,.07)}


/* ---------------------------------------------------------------------------
   PADDING-BLOCK LONGHANDS ARE DELIBERATE ON .section / .hero / .page-head /
   .crumb / .nav — do not "tidy" them back into a `padding: A B` shorthand.
   Subpages put these classes on the SAME ELEMENT as .wrap
   (<section class="section wrap">), so a shorthand zeroes .wrap's horizontal
   padding at equal specificity and slams the content flush to the viewport
   edge. It bit the header once and the sections a second time; measured at
   1440px the section content sat at x=173 while the hero sat at x=213.
   --------------------------------------------------------------------------- */
/* ---------- sections + prose ---------- */
.section{padding-top:48px;padding-bottom:48px;border-top:1px solid var(--hairline)}
.section > .wrap > .mono{margin:0 0 14px}
.section h2{font-size:clamp(1.6rem,6.4vw,2.5rem);max-width:24ch;margin:0 0 18px;
            text-wrap:balance}
.section h3{font-size:clamp(1.1rem,4.4vw,1.4rem);margin:28px 0 10px;color:var(--white)}
.lead{color:var(--steel);max-width:64ch;margin:0 0 8px}
.prose{max-width:68ch}
/* reading-column width belongs on the CONTENT, not on the .wrap — a narrow
   max-width on .wrap centres the whole column and breaks alignment with the header. */
.doc > *{max-width:74ch}
.prose p{margin:0 0 16px;color:var(--steel)}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--white);font-weight:600}
.prose i,.prose em{color:var(--steel)}
.prose a{color:var(--azure-lit);font-weight:600}
/* Any in-content link should READ as a link. Without this, prose outside a
   .prose wrapper inherits the base white and is indistinguishable from body
   text (the contact page's mailto did exactly that). Buttons and the wordmark
   are excluded so they keep their own treatment. */
main a:not(.cta):not(.cta-ghost):not(.btn):not(.btn-ghost):not(.arrow-link):not(.brand){
  color:var(--azure-lit);font-weight:600}
.prose ul,.prose ol{color:var(--steel);margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--edge)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--panel);
            border:1px solid var(--hairline);border-radius:2px;padding:1px 5px;
            color:var(--white)}
.muted{color:var(--steel);font-size:14px}
.arrow-link{display:inline-flex;align-items:center;min-height:44px;
            font-family:var(--display);font-weight:700;font-size:19px;
            letter-spacing:.05em;text-transform:uppercase;color:var(--azure-lit)}

/* ---------- panels / cards / callouts ---------- */
.panel{background:var(--panel);border:1px solid var(--hairline);
       border-top:2px solid var(--azure);padding:22px 20px}
.panel h3{font-size:20px;margin:0 0 10px;line-height:1.08;color:var(--white)}
.panel p{margin:0;color:var(--steel);font-size:.9375rem}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0 0}
.note{background:var(--panel);border:1px solid var(--hairline);
      border-left:2px solid var(--azure);padding:16px 18px;color:var(--steel);
      font-size:.9375rem}
.note b,.note strong{color:var(--white)}

/* ---------- forms ---------- */
.field{display:block;margin:0 0 18px}
.field > span{display:block;margin:0 0 7px;font-family:var(--mono);font-weight:500;
              font-size:11px;letter-spacing:.16em;text-transform:uppercase;
              color:var(--steel)}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--panel);color:var(--white);
  border:1px solid var(--edge);border-radius:2px;
  font:400 16px/1.5 var(--body);   /* 16px: anything smaller makes iOS zoom on focus */
}
textarea{min-height:132px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--edge)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azure);outline-offset:2px;
                                        border-color:var(--azure)}
button.cta{font-family:var(--display);cursor:pointer}
button.cta[disabled]{opacity:.55;cursor:not-allowed}
.form-ok{color:var(--azure-lit);font-weight:600}
.form-err{color:#FF8A6B;font-weight:600}   /* 8.42:1 on ink — readable failure text (computed, not guessed) */


/* ---------- shared subpage components (used by 2+ pages) ----------
   Re-tinted from the old light design. Structure preserved; only colour,
   type and radius moved to the Field Report system. */
.hero{padding-top:48px;padding-bottom:36px}
.hero h1{font-size:clamp(2.1rem,9vw,4.25rem);max-width:18ch;margin:0 0 20px;text-wrap:balance}
.hero p{color:var(--steel);font-size:1.0625rem;max-width:62ch;margin:0 0 16px}
.hero p:last-child{margin-bottom:0}
.crumb{padding-top:18px}
.crumb,.hint,.fieldnote,.privacy-note{color:var(--steel);font-size:14px}
.hint{margin:14px 0 0}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;
     letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
     background:var(--panel);border:1px solid var(--hairline);border-radius:2px;
     padding:5px 10px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0}
.card{background:var(--panel);border:1px solid var(--hairline);
      border-top:2px solid var(--azure);padding:22px 20px}
.card h3{margin:0 0 10px;font-size:20px;line-height:1.08;color:var(--white)}
.card p{margin:0;color:var(--steel);font-size:.9375rem}
.guard{background:var(--panel);border:1px solid var(--hairline);padding:22px 20px;margin:24px 0 0}
.guard ul{margin:10px 0 0;padding-left:20px;color:var(--steel);font-size:.9375rem}
.guard ul li{margin:0 0 8px}
.guard ul li b{color:var(--white)}
.guard ul li::marker{color:var(--edge)}
.faq{background:var(--panel);border:1px solid var(--hairline);padding:16px 18px;margin:0 0 10px}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:17px;
             letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.faq summary:hover{color:var(--azure-lit)}
.faq p{margin:12px 0 0;color:var(--steel);font-size:.9375rem}

/* buttons the demo scripts toggle — .btn/.secondary/:disabled are referenced
   from JS, so their names are load-bearing, not cosmetic. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
     padding:14px 26px;background:var(--orange);color:var(--ink);border:1px solid transparent;
     border-radius:2px;font-family:var(--display);font-weight:700;font-size:18px;
     letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
     transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:#FF7A2E;text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.secondary,.btn-ghost{background:transparent;color:var(--white);border-color:var(--edge)}
.btn.secondary:hover,.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:var(--white)}
.btn-block{width:100%}

/* demo status / error surfaces */
.demo-err,.sf-error{margin:14px 0 0;padding:12px 14px;background:var(--panel);
                    border:1px solid var(--hairline);border-left:2px solid #FF8A6B;
                    color:#FF8A6B;font-size:.9375rem}
.demo-status{margin:14px 0 0;padding:12px 14px;background:var(--panel);
             border:1px solid var(--hairline);border-left:2px solid var(--azure);
             color:var(--white);font-size:.9375rem}

/* the "no US number" browser-call modal (past-due-rent + FNOL).
   NOTE: each page keeps its OWN .hidden rule and its own
   `.modal-overlay.hidden{display:none}` override — .hidden must beat the
   overlay's display:flex, and that ordering is a functional contract. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;
               align-items:center;justify-content:center;padding:20px;z-index:2147483000}
.modal-card{background:var(--panel);border:1px solid var(--hairline);
            border-top:2px solid var(--azure);padding:26px 24px;max-width:420px;
            width:100%;text-align:center}
.modal-card h3{margin:0 0 10px;font-size:20px;color:var(--white)}
.modal-card p{margin:0 0 20px;color:var(--steel);font-size:.9375rem}
.modal-actions{display:flex;flex-direction:column;gap:10px}
.nonanp{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px}
.nonanp input{margin-top:4px;width:18px;height:18px;flex:none;min-height:0;accent-color:var(--azure)}
.nonanp label{font-size:14px;font-weight:600;cursor:pointer;margin:0;color:var(--white)}
.nonanp-caveat{color:var(--steel);font-size:13px;margin:8px 0 16px;padding:10px 12px;
               background:var(--panel);border:1px solid var(--hairline)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);padding:32px 0 40px;color:var(--steel);
       font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:space-between;
      align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.foot a{display:inline-flex;align-items:center;min-height:44px;
        font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
        text-transform:uppercase;color:var(--steel)}
.foot a:hover{color:var(--white)}
.foot .who a{font-family:var(--body);font-size:14px;letter-spacing:0;
             text-transform:none;min-height:0}

/* ---------- scale up ---------- */
@media (min-width:560px){
  .nav nav{flex:0 0 auto}
  .cards,.grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .wrap{padding:0 40px}
  .page-head{padding-top:80px;padding-bottom:56px}
  .section{padding-top:72px;padding-bottom:72px}
  .cards,.grid{grid-template-columns:repeat(3,1fr);gap:20px}
  /* NO GUTTER GRID HERE, deliberately. The homepage puts a numbered report index
     ("03 — The same day, twice") in a left gutter; the subpages have no such
     index, so the same grid reserved an EMPTY 170px column and indented every
     heading to x=446 while the header and h1 sat at x=220 — visibly inconsistent,
     and inconsistent AGAIN with the demo pages, whose <section class="section wrap">
     markup meant the child-combinator never matched them at all. Subpage content
     is plain left-aligned; the homepage keeps its gutter in its own inline CSS. */
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* A LAST WORD ON THE SHORTHAND TRAP: it bit three times during this redesign —
   .nav (header flush to the edge), .section (content at x=173 while the hero sat
   at x=213), and .doc on the legal pages. The rule is simple and applies to any
   class that can share an element with .wrap: use padding-top/padding-bottom,
   never the `padding: A B` shorthand. */