/* ==========================================================================
   SRT Agency — shared site styles (AEO rebuild, midnight/reef dark theme)
   Served from /styles.css (root, crawlable — /assets is disallowed in robots).
   Palette matches the AEO funnels + mission-control report brand.
   ========================================================================== */

:root {
  --midnight:#0B1426;
  --midnight-2:#101B33;
  --midnight-deep:#060C1A;
  --card:#152341;
  --card-hover:#1B2D52;
  --ocean:#1B65A7;
  --ocean-2:#2E86C9;
  --reef:#00C9A7;
  --reef-ink:#04252b;
  --text:#F0F4F8;
  --text-dim:#8FA3BF;
  --text-faint:#5C6E8A;
  --border:#233657;
  --danger:#FF6B6B;
  --whatsapp:#25D366;
  --radius:10px;
  --radius-lg:16px;
  --maxw:1080px;
  --maxw-prose:720px;
  --ease:cubic-bezier(.22,1,.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--midnight);
  color:var(--text);
  line-height:1.6;
  font-weight:300;
  letter-spacing:-.01em;
  min-height:100dvh;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--reef); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--reef); outline-offset:2px; border-radius:4px; }

/* ---- layout ---- */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section { padding:72px 0; }
.section-sm { padding:44px 0; }
.section.alt { background:var(--midnight-2); }
.center { text-align:center; }
.narrow { max-width:var(--maxw-prose); margin-left:auto; margin-right:auto; }

/* ---- typography ---- */
h1,h2,h3 { font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h1 { font-size:clamp(1.9rem, 5vw, 3rem); }
h2 { font-size:clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom:14px; }
h3 { font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
p { margin-bottom:14px; }
.lead { font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--text-dim); font-weight:300; }
.eyebrow { color:var(--reef); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.muted { color:var(--text-dim); }
.small { font-size:.85rem; }
strong { font-weight:600; color:var(--text); }

/* ---- header / nav ---- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(11,20,38,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--text); font-size:1.02rem; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.logo-mark { display:inline-flex; align-items:flex-end; gap:3px; height:22px; }
.logo-mark i { width:5px; border-radius:2px; display:block; }
.logo-mark i:nth-child(1){ height:12px; background:var(--ocean); }
.logo-mark i:nth-child(2){ height:18px; background:var(--ocean-2); }
.logo-mark i:nth-child(3){ height:22px; background:var(--reef); }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:var(--text-dim); font-size:.92rem; font-weight:400; }
.nav-links a:hover { color:var(--text); text-decoration:none; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:8px; }
@media (max-width:820px){
  .nav-links {
    position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--midnight-2); border-bottom:1px solid var(--border); padding:8px 20px 16px;
    display:none;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 0; width:100%; border-bottom:1px solid var(--border); }
  .nav-links .btn { margin-top:12px; width:100%; text-align:center; }
  .nav-toggle { display:inline-flex; }
}

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:.98rem; font-weight:600; line-height:1;
  padding:13px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:opacity .15s var(--ease), transform .15s var(--ease), background .15s;
}
.btn:hover { text-decoration:none; opacity:.92; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--reef); color:var(--reef-ink); }
/* nav CTA: beat `.nav-links a` (0,1,1) so the button ink isn't overridden to --text-dim (was rendering faint gray on teal, unreadable) */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color:var(--reef-ink); }
.btn-secondary { background:transparent; color:var(--text); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--reef); opacity:1; }
.btn-wa { background:var(--whatsapp); color:#053b1b; }
.btn-lg { padding:16px 30px; font-size:1.05rem; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.55; cursor:default; }

/* ---- hero ---- */
.hero { padding:84px 0 64px; }
.hero h1 { margin-bottom:18px; }
.hero .lead { max-width:640px; margin-bottom:28px; }
.hero .lead.center { margin-left:auto; margin-right:auto; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
.btn-row.center { justify-content:center; }
.hero-note { margin-top:16px; color:var(--text-faint); font-size:.85rem; }

/* ---- cards / grids ---- */
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 24px;
}
.card h3 { margin-bottom:8px; }
.card p { color:var(--text-dim); font-size:.95rem; margin-bottom:0; }
/* .tier is here too: /pricing puts this eyebrow in .tier and in its two bands,
   never in a .card, so scoping it to .card left every one of them unstyled. */
.card .num, .tier .num { color:var(--reef); font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.35; margin-bottom:10px; display:block; }

/* ---- stat / data strip ---- */
.stat { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.stat .big { font-size:2rem; font-weight:700; color:var(--reef); letter-spacing:-.02em; line-height:1.1; }
.stat .txt { color:var(--text-dim); font-size:.92rem; margin:8px 0 10px; }
.stat .cite { color:var(--text-faint); font-size:.76rem; }

/* ---- verticals pills ---- */
.pills { display:flex; flex-wrap:wrap; gap:10px; }
.pill { background:var(--card); border:1px solid var(--border); border-radius:999px; padding:9px 16px; font-size:.9rem; color:var(--text-dim); }
.pill.flag { border-color:var(--reef); color:var(--text); }

/* ---- guarantee / callout ---- */
.callout { background:var(--midnight-deep); border:1px solid var(--border); border-left:3px solid var(--reef); border-radius:var(--radius); padding:22px 24px; }
.callout p:last-child { margin-bottom:0; }

/* ---- screenshot slot (founder-supplied) ---- */
.shot { background:var(--midnight-deep); border:1px dashed var(--border); border-radius:var(--radius); padding:40px 20px; text-align:center; color:var(--text-faint); font-size:.85rem; }

/* ---- pricing ---- */
.tier { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px; display:flex; flex-direction:column; }
.tier.featured { border-color:var(--reef); }
.tier .price { font-size:2.2rem; font-weight:700; letter-spacing:-.02em; }
/* .amt / .unit, not a bare `span`. Every price is
   <div class="price"><span>$349</span><span>/mo</span></div>, so `.tier .price span`
   was painting the number itself at 1rem in --text-dim: $349, $499, $999 and $4,999
   all rendered at body size in grey. Only "Free" looked right, because it is a bare
   text node with no span around it. */
.tier .price .amt  { font-weight:700; color:var(--text); }
.tier .price .unit { font-size:1rem; color:var(--text-dim); font-weight:400; }
.tier ul { list-style:none; margin:18px 0 24px; display:flex; flex-direction:column; gap:10px; }
.tier li { color:var(--text-dim); font-size:.93rem; padding-left:24px; position:relative; }
.tier li::before { content:"✓"; position:absolute; left:0; color:var(--reef); font-weight:700; }
.tier .btn { margin-top:auto; }

/* ---- FAQ ---- */
.faq details { border:1px solid var(--border); border-radius:var(--radius); background:var(--card); margin-bottom:10px; }
.faq summary { cursor:pointer; list-style:none; padding:18px 20px; font-weight:600; font-size:1rem; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--reef); font-weight:700; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq .ans { padding:0 20px 20px; color:var(--text-dim); font-size:.95rem; }

/* ---- CTA band ---- */
.cta-band { background:linear-gradient(180deg,var(--midnight-2),var(--midnight)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; }

/* ---- forms ---- */
.form-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 26px; max-width:520px; }
.field { margin-top:16px; }
.field:first-of-type { margin-top:0; }
.field label { display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:6px; }
.field input, .field textarea {
  width:100%; background:var(--midnight-deep); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:inherit; font-size:1rem; padding:12px 14px;
}
.field textarea { min-height:110px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--reef); }
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:18px; }
.consent input { width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color:var(--reef); }
.consent label { font-size:.8rem; color:var(--text-dim); line-height:1.5; }
.consent a { color:var(--reef); }
.fine { color:var(--text-faint); font-size:.78rem; margin-top:14px; }
.thanks { display:none; }

/* ---- prose (legal / about) ---- */
.prose { max-width:var(--maxw-prose); margin:0 auto; }
.prose h2 { margin-top:34px; }
.prose h3 { margin-top:22px; margin-bottom:6px; }
.prose p, .prose li { color:var(--text-dim); font-size:.98rem; }
.prose ul, .prose ol { margin:0 0 14px 22px; }
.prose li { margin-bottom:6px; }
.prose .updated { color:var(--text-faint); font-size:.85rem; }

/* ---- footer ---- */
.site-footer { background:var(--midnight-deep); border-top:1px solid var(--border); padding:52px 0 32px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
@media (max-width:820px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-grid { grid-template-columns:1fr; } }
.foot-brand p { color:var(--text-faint); font-size:.85rem; max-width:280px; }
.foot-col h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:12px; font-weight:600; }
.foot-col a { display:block; color:var(--text-dim); font-size:.9rem; padding:5px 0; }
.foot-col a:hover { color:var(--text); text-decoration:none; }
.foot-nap { color:var(--text-dim); font-size:.85rem; margin-top:14px; line-height:1.7; }
.foot-nap a { color:var(--text-dim); }
.foot-bottom { border-top:1px solid var(--border); margin-top:36px; padding-top:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--text-faint); font-size:.8rem; }

/* ---- the glint ----
   One reusable class. A translucent white band is swept across the element by
   transform:translateX inside an overflow:hidden box. The travel is packed into
   the first 18% of a 4.2s cycle, so it flashes for about three quarters of a
   second and then rests for three and a half, which reads as a glint rather than
   a barber pole. pointer-events:none is load bearing: without it the sweep sits
   on top of the label or anchor and eats the click. */
.shine { position:relative; overflow:hidden; }
.shine::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 58%);
  transform:translateX(-130%);
  animation:shine-sweep 4.2s var(--ease) 1.2s infinite;
}
@keyframes shine-sweep {
  0%   { transform:translateX(-130%); }
  18%  { transform:translateX(130%); }
  100% { transform:translateX(130%); }
}

/* ---- the nudge ----
   Currently on the DFY toggle only. It is the control the ads band is waiting
   on, and it is a checkbox, which reads as passive; the CTA beside it already
   looks like a button and shaking that one too was noise.

   A small shake on the same 4.2s beat as the glint, and starting just as the
   sweep crosses, so the two read as one gesture rather than two things
   twitching out of step. Amplitude is deliberately tiny: enough to catch
   peripheral vision, not enough to look broken or to smear the label while it
   moves. It rests for roughly three and a half seconds between nudges.

   It stops the moment anyone engages with the element. A control that keeps
   jittering under the cursor is harder to click, not easier, and dropping the
   animation also hands transform back to .btn:active, so the press still
   depresses instead of being overridden by a running keyframe. */
.nudge { animation:nudge-shake 4.2s var(--ease) 1.2s infinite; }
.nudge:hover, .nudge:focus-within, .nudge:active { animation:none; }
@keyframes nudge-shake {
  0%, 8%, 22%, 100% { transform:translateX(0) rotate(0); }
  10% { transform:translateX(-3px) rotate(-.6deg); }
  12% { transform:translateX(3px)  rotate(.6deg); }
  14% { transform:translateX(-2px) rotate(-.45deg); }
  16% { transform:translateX(2px)  rotate(.45deg); }
  18% { transform:translateX(-1px) rotate(-.2deg); }
  20% { transform:translateX(1px)  rotate(0); }
}

/* ---- the multi-step lead popup ----
   Shared by /pricing and the homepage hero. Ported from the /LHR opt-in modal in
   mission-control, which is the one modal in either repo built to a real standard:
   Escape closes, page scroll is restored on close, focus returns to the opener, and
   the backdrop only closes on a press that both starts and ends on the backdrop.
   The behaviour lives inline on each page; only the paint is shared. */
.mdl-back { position:fixed; inset:0; background:rgba(6,12,26,.82); backdrop-filter:blur(4px);
            display:none; align-items:center; justify-content:center; padding:20px; z-index:100; }
.mdl-back.open { display:flex; }
.mdl { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
       width:100%; max-width:440px; padding:32px 28px 26px; position:relative; max-height:92vh; overflow-y:auto; }
.mdl-close { position:absolute; top:12px; right:14px; background:none; border:0; color:var(--text-faint);
             font-size:1.7rem; line-height:1; cursor:pointer; padding:6px 10px; }
.mdl-close:hover { color:var(--text); }
.mdl h2 { font-size:1.3rem; margin-bottom:6px; }
.mdl .mdl-lead { color:var(--text-dim); font-size:.9rem; margin-bottom:22px; }
.mdl-dots { display:flex; gap:6px; margin-bottom:20px; }
.mdl-dots i { flex:1; height:3px; border-radius:2px; background:var(--border); }
.mdl-dots i.on { background:var(--reef); }
.mdl-step { display:none; }
.mdl-step.active { display:block; }
.mdl label { display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; color:var(--text); }
.mdl input[type=text],.mdl input[type=email],.mdl input[type=tel] {
  width:100%; background:var(--midnight-deep); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 15px; color:var(--text); font-family:inherit; font-size:1rem; }
.mdl input:focus { outline:none; border-color:var(--reef); }
.mdl-err { color:var(--danger); font-size:.82rem; margin-top:8px; display:none; }
.mdl-err.visible { display:block; }
.mdl-actions { margin-top:20px; }
.mdl-backlink { display:block; width:100%; background:none; border:0; color:var(--text-faint);
                font-size:.82rem; margin-top:12px; cursor:pointer; font-family:inherit; }
.mdl-backlink:hover { color:var(--text-dim); }
/* Off screen rather than display:none, so it is never autofilled. */
.mdl-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Same technique, reused wherever a label has to exist for a screen reader without
   taking part in layout. */
.vis-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:560px){
  /* A bottom sheet, so the active field sits above the mobile keyboard rather than
     behind it. One field per screen is what makes a dialog survivable here at all. */
  .mdl-back { align-items:flex-end; padding:0; }
  .mdl { max-width:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom:0; padding:28px 22px 22px; }
}

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; transition:none !important; } }
@media (prefers-reduced-motion:reduce){ .shine::after { display:none; } .nudge { animation:none; } }