/* Stay In Date design system — "the certificate, made friendly"
   Forced-light armour: this site renders light-on-paper everywhere,
   regardless of OS dark mode. Dual solid+gradient backgrounds guard
   against user-agent repaints (qa.py counts these). */

@font-face { font-family:"Archivo"; font-weight:800; font-style:normal; font-display:swap;
  src:url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: only light;
  --ink:#14251C; --paper:#F6F7F3; --card:#FFFFFF;
  --board:#1F5C40; --board-deep:#143D2B;
  --stamp:#E4A11B; --stamp-ink:#1C1607;
  --rule:#D8DED4; --muted:#5A6B60;
  --radius:14px; --radius-sm:8px;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow:0 1px 2px rgba(20,37,28,.06),0 8px 24px rgba(20,37,28,.08);
}

/* ---- forced-light armour ---- */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body {
    background-color:#F6F7F3 !important;
    background-image:linear-gradient(#F6F7F3,#F6F7F3) !important;
    color:#14251C !important;
  }
}

* { box-sizing:border-box; }
html {
  background-color:var(--paper);
  background-image:linear-gradient(var(--paper),var(--paper));
  -webkit-text-size-adjust:100%;
}
body {
  margin:0; color:var(--ink); font-family:var(--font-body);
  font-size:1.0625rem; line-height:1.6;
  background-color:var(--paper);
  background-image:linear-gradient(180deg,#FBFCFA 0,var(--paper) 280px);
}
img { max-width:100%; display:block; }
a { color:var(--board); text-underline-offset:3px; }
a:hover { color:var(--board-deep); }

h1,h2,h3 { font-family:var(--font-display); line-height:1.12; letter-spacing:-0.015em; margin:0 0 .5em; }
h1 { font-weight:800; font-size:clamp(2rem,5.4vw,3.25rem); }
h2 { font-weight:800; font-size:clamp(1.45rem,3.2vw,2rem); }
h3 { font-weight:700; font-size:1.15rem; }
.lede { font-size:1.2rem; color:var(--muted); max-width:44rem; }

.wrap { max-width:74rem; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }

/* ---- header ---- */
.site-head {
  background-color:var(--paper);
  background-image:linear-gradient(var(--paper),var(--paper));
  border-bottom:1px solid var(--rule);
}
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; padding-top:.9rem; padding-bottom:.9rem; }
.logo { font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.logo-mark { width:1.35rem; height:1.35rem; border-radius:5px;
  background-color:var(--board);
  background-image:linear-gradient(145deg,var(--board),var(--board-deep));
  position:relative; }
.logo-mark::after { content:""; position:absolute; inset:29%; border:2px solid var(--stamp); border-top:0; border-right:0; transform:rotate(-45deg) translateY(-14%); }
.head-cta { font-weight:600; font-size:.95rem; }

/* ---- hero ---- */
.hero {
  color:#F4F7F2;
  background-color:var(--board-deep);
  background-image:linear-gradient(160deg,var(--board) 0%,var(--board-deep) 62%);
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(3.4rem,8vw,6rem);
  position:relative; overflow:hidden;
}
.hero::before { content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(246,247,243,.5) 46px 47px); }
.hero h1 { color:#fff; max-width:17ch; }
.hero .lede { color:#D6E3DA; }
.hero .wrap { position:relative; }

/* ---- buttons ---- */
.btn { display:inline-block; font-weight:700; font-family:var(--font-body);
  border-radius:999px; padding:.8rem 1.6rem; text-decoration:none; border:0; cursor:pointer; font-size:1rem; }
.btn-stamp { color:var(--stamp-ink);
  background-color:var(--stamp);
  background-image:linear-gradient(180deg,#F0B33A,var(--stamp));
  box-shadow:0 2px 0 rgba(20,22,7,.18); }
.btn-stamp:hover { color:var(--stamp-ink); filter:brightness(1.04); }
.btn-ghost { color:#EAF2EC; border:1.5px solid rgba(234,242,236,.45); background:transparent; margin-left:.6rem; }
.btn-ghost:hover { color:#fff; border-color:#fff; }

/* ---- counterfoil card (signature element) ---- */
.counterfoil { position:relative; display:grid; grid-template-columns:2.4rem 1fr;
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  background-color:var(--card);
  background-image:linear-gradient(var(--card),var(--card));
  box-shadow:var(--shadow); }
.counterfoil .stub { position:relative; writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-mono); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  color:#3E5747; text-transform:uppercase; padding:.9rem .35rem;
  background-color:#EEF2EC;
  background-image:linear-gradient(90deg,#EAEFE8,#F1F4EF); }
.counterfoil .stub::after { content:""; position:absolute; left:-1px; top:0; bottom:0; width:0;
  border-left:2px dashed #B9C6BB; }
.counterfoil .body { padding:1.15rem 1.25rem; }
.counterfoil h3 { margin-bottom:.35rem; }
.counterfoil .meta { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); letter-spacing:.04em; }

.card-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); margin:1.6rem 0; }

/* ---- sections ---- */
section { padding:clamp(2.2rem,6vw,3.6rem) 0; }
section + section { border-top:1px solid var(--rule); }
.section-kicker { font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--board); margin-bottom:.4rem; }

.facts { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-top:1.4rem; }
.fact { border:1px solid var(--rule); border-radius:var(--radius-sm); padding:1rem 1.1rem;
  background-color:var(--card);
  background-image:linear-gradient(var(--card),var(--card)); }
.fact .k { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.fact .v { font-family:var(--font-display); font-weight:800; font-size:1.35rem; margin-top:.2rem; }
.fact .note { font-size:.85rem; color:var(--muted); margin-top:.15rem; }

.pricing-note { font-size:.85rem; color:var(--muted); font-style:italic; }

/* ---- steps ---- */
.steps { counter-reset:step; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); padding:0; margin:1.4rem 0 0; list-style:none; }
.steps li { counter-increment:step; border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:1.1rem 1.1rem 1rem;
  background-color:var(--card);
  background-image:linear-gradient(var(--card),var(--card)); }
.steps li::before { content:counter(step,decimal-leading-zero); display:block;
  font-family:var(--font-mono); font-weight:600; color:var(--stamp); font-size:.85rem; margin-bottom:.4rem; }

/* ---- FAQ ---- */
.faq details { border:1px solid var(--rule); border-radius:var(--radius-sm); margin:.6rem 0;
  background-color:var(--card);
  background-image:linear-gradient(var(--card),var(--card)); }
.faq summary { cursor:pointer; font-weight:600; padding:.95rem 2.8rem .95rem 1.1rem; list-style:none; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:1.05rem; top:.78rem;
  font-family:var(--font-mono); color:var(--board); font-size:1.15rem; }
.faq details[open] summary::after { content:"–"; }
.faq .a { padding:0 1.1rem 1rem; color:#33443A; }

/* ---- status / seeking ---- */
.status-note { display:flex; gap:.7rem; align-items:flex-start;
  border:1px solid #E4D6AE; border-radius:var(--radius-sm); padding:1rem 1.1rem;
  background-color:#FBF4E1;
  background-image:linear-gradient(#FCF7E8,#FBF4E1); }
.status-note .dot { flex:0 0 .55rem; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--stamp); margin-top:.45rem; }

/* ---- form ---- */
.lead-form { border:1px solid var(--rule); border-radius:var(--radius); padding:1.4rem;
  background-color:var(--card);
  background-image:linear-gradient(var(--card),var(--card)); box-shadow:var(--shadow); max-width:34rem; }
.lead-form label { display:block; font-weight:600; font-size:.92rem; margin:.9rem 0 .3rem; }
.lead-form input, .lead-form select, .lead-form textarea { width:100%; font:inherit; color:var(--ink);
  border:1px solid #C4CEC5; border-radius:var(--radius-sm); padding:.65rem .75rem; background:#fff; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline:2px solid var(--board); outline-offset:1px; }
.lead-form .btn { margin-top:1.3rem; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-msg { margin-top:.8rem; font-size:.95rem; }

/* ---- conversion layer ---- */
.cta-band { color:#EAF2EC; padding:2.4rem 0; margin-top:2.4rem;
  background-color:var(--board-deep);
  background-image:linear-gradient(120deg,var(--board-deep),var(--board)); }
.cta-band h2 { color:#fff; margin-top:0; }
.cta-band p { color:#D7E4DA; max-width:38rem; }
.cta-band .cta-actions { margin-top:1.2rem; }
.sticky-spacer { height:4rem; }
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background-color:var(--board-deep);
  background-image:linear-gradient(var(--board-deep),var(--board-deep));
  box-shadow:0 -4px 14px rgba(10,25,16,.22); }
.sticky-cta .btn { display:block; text-align:center; width:100%; }
@media (min-width:768px){ .sticky-cta, .sticky-spacer { display:none; } }

/* ---- footer ---- */
.site-foot { color:#C9D6CC; margin-top:3rem;
  background-color:var(--board-deep);
  background-image:linear-gradient(180deg,#173F2E,var(--board-deep)); }
.site-foot .wrap { padding-top:2.2rem; padding-bottom:2.2rem; }
.site-foot a { color:#EAF2EC; }
.foot-brand { font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.1rem; }
.foot-legal { font-size:.82rem; margin-top:1rem; color:#9FB3A5; max-width:52rem; }

/* ---- motion ---- */
@media (prefers-reduced-motion:no-preference) {
  .hero h1, .hero .lede, .hero .hero-actions { animation:rise .5s ease-out both; }
  .hero .lede { animation-delay:.07s; } .hero .hero-actions { animation-delay:.14s; }
  @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
}
@media (max-width:640px){ .btn-ghost{ margin-left:0; margin-top:.6rem; } }