/* Amino — hireamino.com — light "Gulf" theme, pinned headline + scroll-cycled predicates */

:root {
  --bg-top:   #E7F3F8;   /* powder Gulf blue */
  --bg-bot:   #F7FBFC;   /* near-white */
  --ink:      #0C2A37;   /* deep teal-navy */
  --muted:    #5A7885;   /* AA on white (4.75:1); was #5E7D8B ≈ 4.41 */
  --blue:     #2BA6D6;   /* Gulf blue */
  --blue-dk:  #1C7FAE;
  --orange:   #F2671F;   /* Gulf orange — accents, gradient, hovers */
  --orange-btn: #C4520E; /* deeper orange for buttons w/ white text (AA 4.6:1; plain #F2671F is 3.12:1) */
  --hairline: rgba(12,42,55,0.12);
  --grad: linear-gradient(95deg, var(--orange), #F59331);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot) 60%);
  -webkit-font-smoothing: antialiased;
}

/* Animated field behind everything */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* Pinned chrome */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(22px, 4vw, 48px);
}
/* text-decoration:none belongs here: .wordmark is used on an <a> on every page except
   the homepage, so without it the logo renders underlined (the tool pages served by
   Workers — /audit, /warmup, /headers — have no inline style to fall back on). */
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wordmark-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 0 4px rgba(242,103,31,0.16);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity:.85; } 50% { opacity:1; box-shadow: 0 0 0 6px rgba(242,103,31,0.22); } }
.cta {
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--orange-btn); padding: 10px 18px; border-radius: 999px;
  transition: transform .15s, box-shadow .15s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242,103,31,0.35); }
/* Header CTA: full founder framing on desktop, shorter label on mobile. */
.cta-short { display: none; }
@media (max-width: 560px) { .cta-full { display: none; } .cta-short { display: inline; } }

.brandmark {
  position: fixed; right: clamp(22px,4vw,48px); bottom: 20px; z-index: 10;
  font-weight: 600; font-size: 15px; letter-spacing: .04em; color: rgba(12,42,55,0.45);
  text-decoration: none; transition: color .2s;
}
.brandmark:hover { color: var(--orange); }
.gh-link {
  position: fixed; left: clamp(22px,4vw,48px); bottom: 18px; z-index: 10;
  display: inline-flex; color: rgba(12,42,55,0.45); transition: color .2s;
}
.gh-link:hover { color: var(--orange); }
.baseline {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 10;
  font-size: 12.5px; color: rgba(12,42,55,0.42);
}
/* ── Fixed-chrome scrim (top only) ───────────────────────────────────────────
   .topbar is position:fixed with NO background, so card titles and descriptions
   scroll directly beneath the wordmark and the solid orange CTA button and the
   two tangle. This scrim sits just under the chrome (z-index 9 vs 10) and fades
   content out before it reaches it, instead of introducing a hard bar over the
   canvas field.

   Top only, deliberately. `main` is z-index:2 AND establishes a stacking
   context, so a body-level scrim paints over every descendant — a matching
   bottom scrim would wash out `.hero-skip` ("Explore the free tools ↓"), which
   sits only ~40px off the bottom edge, and no z-index on that link can escape
   main's stacking context to avoid it. The bottom chrome is a 12.5px line at
   42% opacity, so it has far less to collide with than a solid button.

   Homepage-only: the four fixed elements exist nowhere else, and :has(> .topbar)
   scopes it without touching the markup. Browsers without :has() drop the rule
   and simply keep the previous behaviour. */
body:has(> .topbar)::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 104px;
  z-index: 9; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-top) 0%, rgba(231,243,248,0.88) 44%, rgba(231,243,248,0) 100%);
}
.baseline a { color: inherit; text-decoration: none; transition: color .2s; }
.baseline a:hover { color: var(--orange); }

/* Pinned stage */
main { position: relative; z-index: 2; }
.stage { height: 340vh; position: relative; }
.stage-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}

.line { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.pre { display: block; font-size: clamp(30px, 5vw, 64px); line-height: 1.04; }
.pred-slot { position: relative; display: block; height: 1.3em; margin-top: 14px; width: 100%; }
.pred-slot .pred { position: absolute; left: 0; right: 0; opacity: 0; }
.pred { font-size: clamp(25px, 4.2vw, 52px); line-height: 1.1; color: var(--ink); }
.pred em { font-style: italic; color: var(--orange); }
.closing .pred em { color: var(--blue-dk); }
.pred.static { position: static; opacity: 1; }

.scrollcue { margin-top: 44px; font-family: 'Inter'; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.chev { font-size: 18px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.progress { position: absolute; bottom: 12vh; display: inline-flex; gap: 9px; }
/* Discreet escape hatch out of the 340vh hero, straight to the tools. */
.hero-skip { position: absolute; bottom: 5.5vh; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s; }
.hero-skip:hover { color: var(--orange); }
.progress i { width: 7px; height: 7px; border-radius: 50%; background: rgba(12,42,55,0.18); transition: background .3s, transform .3s; }
.progress i.on { background: var(--orange); transform: scale(1.25); }

/* Closing */
.panel { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.closing { min-height: auto; padding: 8px 24px 96px; }
.closing .pred { position: static; }
.btn {
  margin-top: 34px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; text-decoration: none;
  color: #fff; background: var(--blue-dk); padding: 14px 26px; border-radius: 999px;
  border: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); background: var(--blue); }

/* Waitlist form */
.waitlist { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.waitlist input {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 13px 20px; min-width: 210px;
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,103,31,0.16); }
.waitlist .btn { margin-top: 0; }
.consent { margin-top: 16px; font-size: 12.5px; color: var(--muted); max-width: 420px; }

/* Capabilities — the free tools, grouped pre / post delivery */
.caps { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 92px 24px 64px; }
.caps-h { font-size: clamp(28px, 4.2vw, 42px); text-align: center; line-height: 1.14; }
.caps-h em { font-style: italic; color: var(--blue-dk); }
.caps-sub { max-width: 650px; margin: 16px auto 0; text-align: center; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--muted); }
/* The three columns share one set of rows (band header + three cards) via subgrid, so
   the cards line up across columns even when a band header wraps to a different number
   of lines. As plain block flows the columns each started wherever their own header
   ended, and column 1 rode ~7px high. */
.caps-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 18px; row-gap: 12px; margin-top: 42px; }
.caps-col { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 12px; border-radius: 16px; padding: 18px; }
.caps-col.pre  { background: rgba(43,166,214,0.06); }
.caps-col.mid  { background: rgba(26,127,55,0.05); }
.caps-col.post { background: rgba(242,103,31,0.05); }
.caps-zh { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); margin: 2px 2px 14px; }
.caps-zh span { font-weight: 400; color: var(--muted); }
.caps-card { display: flex; flex-direction: column; min-height: 176px; background: #fff; border: 1px solid var(--hairline); border-radius: 13px; padding: 16px 17px; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.caps-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12,42,55,0.09); border-color: var(--ac); }
.caps-col.pre .caps-card  { --ac: var(--blue-dk); }
.caps-col.mid .caps-card  { --ac: #1a7f37; }
.caps-col.post .caps-card { --ac: var(--orange); }
.cc-name { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.cc-desc { display: block; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.cc-go { display: inline-block; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ac); margin-top: auto; padding-top: 10px; }
/* "Start here" badge on the audit card — the universal first conversion step. */
.cc-tag { align-self: flex-start; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--orange-btn); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.caps-card.is-start { border-color: var(--blue-dk); }
/* Primary audit CTA directly beneath the tool grid. */
.caps-cta { text-align: center; margin-top: 34px; }
.caps-cta-btn { display: inline-block; font-size: 15px; padding: 13px 26px; }
.caps-lead { text-align: center; margin: 40px auto 0; max-width: 580px; font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.caps-lead a { color: var(--blue-dk); font-weight: 600; text-decoration: none; }
.caps-lead a:hover { color: var(--orange); }
/* Stacked: nothing to align across, so drop back to plain block flow. */
@media (max-width: 860px) {
  .caps-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 18px; }
  .caps-col { display: block; grid-row: auto; padding: 18px 18px 7px; }
  .caps-card { margin-bottom: 12px; }
}
@media (max-width: 680px) { .caps { padding: 72px 20px 48px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark-dot, .chev { animation: none; }
  .pred-slot .pred { transition: none; }
}

/* ---------- Top nav (blog link) ---------- */
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav .navlink { font-size: 14px; font-weight: 500; color: var(--ink); opacity: .82; text-decoration: none; }
.topnav .navlink:hover { color: var(--orange); opacity: 1; }

/* ---------- Blog ---------- */
.blog-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(22px,4vw,48px); }
.blog-nav .wordmark { font-size: 19px; }
.blog-nav .back { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.blog-nav .back:hover { color: var(--orange); }
.blog-wrap { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 132px 24px 96px; }

.blog-head h1 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(34px,6vw,54px); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.blog-head p { color: var(--muted); font-size: 18px; margin: 14px 0 0; max-width: 560px; line-height: 1.5; }
.post-list { list-style: none; padding: 0; margin: 44px 0 0; }
.post-list li { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.post-list a { text-decoration: none; display: block; }
.post-list h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; transition: color .15s; }
.post-list a:hover h2 { color: var(--orange); }
.post-list .dek { color: var(--muted); font-size: 17px; margin: 0; line-height: 1.5; }

.post-title { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(32px,5.2vw,52px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; }
.post-dek { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.5; color: var(--muted); margin: 0 0 44px; }
.post-body p { font-size: 18px; line-height: 1.72; color: #24414E; margin: 0 0 24px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { font-style: italic; }
.post-body h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--ink); margin: 40px 0 14px; }
.post-body ul { margin: 0 0 24px; padding-left: 22px; }
.post-body li { font-size: 18px; line-height: 1.72; color: #24414E; margin: 0 0 10px; }
.post-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.post-cta { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--hairline); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.post-cta .primary { color: #fff; background: var(--orange-btn); padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; }
.post-cta .sec { color: var(--muted); text-decoration: none; font-size: 15px; }

.foot-gh { display: inline-flex; color: var(--muted); transition: color .2s; }
.foot-gh:hover { color: var(--orange); }
.post-cta .foot-gh { margin-left: auto; }