/* NOCATCH shared styles for the new pages (same tokens as nocatch.org). */






:root {
  --mist: var(--mist); --shallows: var(--shallows); --sky: var(--sky); --ocean: var(--ocean); --ocean-hover: var(--ocean-hover);
  --ocean-text: var(--ocean-text); --deep: var(--deep); --drift: var(--drift); --signal: #2FD35A; --white: #FFFFFF; --line: var(--line);
  --brand: "Bebas Neue", "Courier Prime", system-ui, sans-serif;
  --body: "Galano Grotesque", "GalanoGrotesque", "Courier Prime", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 20px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--body); color: var(--deep); background: var(--mist); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.narrow { max-width: 760px; }

/* Buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius:0; background: var(--ocean); color: var(--deep); font: 600 15px/1.2 var(--body); padding: 12px 18px; text-decoration: none; cursor: pointer; transition: background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); min-height: 44px; text-align: center; }
.pill:hover { background: var(--ocean-hover); }
.pill:active { transform: scale(0.98); }
.pill--wide { width: 100%; padding: 15px 18px; font-size: 16px; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--white); color: var(--deep); border-radius:0; padding: 11px 16px; font: 600 15px/1.2 var(--body); text-decoration: none; cursor: pointer; min-height: 44px; }
.ghost:hover { border-color: var(--sky); }
.pill:focus-visible, .ghost:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }
.pill[disabled] { background: var(--shallows); color: var(--drift); cursor: not-allowed; }

/* Type */
.hero { padding-block: 44px 20px; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ocean-text); margin: 0 0 10px; }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
h3 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--drift); margin: 14px 0 0; max-width: 56ch; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; }
.prose p { margin: 0 0 16px; max-width: 66ch; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; max-width: 64ch; }
.prose li { margin-bottom: 8px; }
.muted { color: var(--drift); }
.note { font-size: 13.5px; line-height: 1.5; color: var(--drift); margin: 0; }
section.block { padding-block: 34px; }
section.block + section.block { border-top: 1px solid var(--line); }

/* Cards and stats */
.card { background: var(--white); border: 1px solid var(--line); border-radius:0; padding: 22px; min-width: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.figure { font-family: var(--brand); font-size: 40px; letter-spacing: 0.04em; line-height: 1; display: block; }
.figure + span { display: block; margin-top: 8px; color: var(--drift); font-size: 15px; line-height: 1.45; }
.src { font-size: 13px; color: var(--drift); margin-top: 10px; display: block; }
.src a { color: var(--ocean-text); }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 14px; border-radius:0; background: var(--white); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.status .dot { width: 8px; height: 8px; border-radius:0; background: var(--sky); flex: none; }
html[data-phase="live"] .status .dot { background: var(--signal); box-shadow:none; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius:0; background: var(--shallows); color: var(--ocean-text); font-weight: 700; }

/* Forms */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label, .field legend { font-size: 14px; font-weight: 600; }
.field input, .field select { font: 16px var(--body); color: var(--deep); padding: 13px 14px; border: 1px solid var(--line); border-radius:0; background: var(--white); width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--ocean); outline-offset: 1px; border-color: var(--ocean); }
.field .help { font-size: 13px; color: var(--drift); }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--drift); line-height: 1.45; margin-bottom: 16px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ocean); flex: none; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-pick label { font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius:0; cursor: pointer; background: var(--white); }
.chips-pick input { accent-color: var(--ocean); }
.done { text-align: center; }
.done .big { font-size: 44px; }

/* Sticky phone bar */
.bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; }
.bar.show { display: block; }
@media (min-width: 860px) { .bar, .bar.show { display: none; } }


/* ---- Header and footer: same as the live site's styles.css ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 15px/1 var(--body);text-decoration:none;border:0;cursor:pointer;border-radius:0;padding:.95em 1.4em;transition:background .18s ease,transform .18s cubic-bezier(.16,1,.3,1);min-height:44px}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--ocean);color:var(--deep)}
.btn-main:hover{background:var(--ocean-hover)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(245,250,253,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px;max-width:1180px}
.top .logo{font-family:var(--brand);font-weight:700;font-size:1.25rem;letter-spacing:.02em;text-decoration:none;color:var(--deep);display:flex;align-items:center;gap:.45em}
.top .logo i{width:9px;height:9px;border-radius:50%;background:var(--signal);display:block}
.top nav{display:flex;gap:24px;margin-left:auto;font-size:.97rem}
.top nav a{color:var(--drift);text-decoration:none;transition:color .15s}
.top nav a:hover{color:var(--deep)}
.top nav a[aria-current="page"]{color:var(--deep);font-weight:600}
.top .btn{padding:.75em 1.15em;font-size:.95rem}
.menu{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--deep);cursor:pointer;place-items:center}
.menu svg{width:20px;height:20px}
@media (max-width:900px){.menu{display:grid}.top .wrap{gap:12px}.top .btn{margin-left:0}
.top nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;gap:0;margin:0;padding:8px 16px 16px;background:rgba(245,250,253,.98);border-bottom:1px solid var(--line);box-shadow:none}
.top nav a{padding:14px 4px;font-size:1.05rem;color:var(--deep);border-bottom:1px solid var(--line)}
.top nav a:last-child{border-bottom:0}
.top.open{background:var(--mist);backdrop-filter:none;-webkit-backdrop-filter:none}
.top.open nav{display:flex;background:var(--mist)}}
footer{background:var(--white);border-top:1px solid var(--line);padding-block:56px 40px;color:var(--drift);font-size:.93rem;margin-top:40px}
footer .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px 48px;max-width:1180px}
@media (max-width:720px){footer .wrap{grid-template-columns:1fr 1fr}footer .fbrand{grid-column:1/-1}}
footer a{color:var(--drift)}
footer a:hover{color:var(--deep)}
footer .fbrand{display:grid;gap:12px;align-content:start}
footer .fbrand .logo{font-family:var(--brand);font-weight:700;font-size:1.25rem;color:var(--deep)}
footer .fbottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--line);padding-top:22px;font-size:.88rem}
footer h3{font:600 1rem/1.3 var(--body);color:var(--deep);margin:0 0 10px}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}

footer .social{display:flex;align-items:center;gap:10px;margin-top:4px}
footer .social a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:0;border:1px solid var(--line);background:var(--white);color:var(--deep);text-decoration:none;font-size:20px}
footer .social a:hover{border-color:var(--sky)}
footer .social a.ks{width:auto;padding:0 12px}
footer .social a.ks img{display:block;width:96px;height:auto}
footer .social a[hidden]{display:none}