/* Plus Jakarta Sans (SIL Open Font License 1.1), self-hosted variable font.
   Served from our own origin: no connection to fonts.googleapis.com and then a
   second to fonts.gstatic.com before text can paint. One file covers 400-800. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2-variations"),url(/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2-variations"),url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Font faces are declared in public/css/fonts.css and injected here at the top
   of the file. An @import would have queued a third-party request only after
   this stylesheet had already downloaded and parsed. */

/* ---- One Click Marketing design tokens ---- */
:root {
  --paper: #F5F6F9; --ink: #10122B; --ink-2: #4A4E6D;
  --indigo: #2F45E0; --electric: #5B6CFF; --win: #0FA968;
  --card: #FFFFFF; --line: #E3E6F2;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  --step-5: clamp(2.75rem, 1.2rem + 6.5vw, 5.25rem);
  --step-4: clamp(2rem, 1.1rem + 3.5vw, 3.25rem);
  --step-1: 1.25rem; --step-0: 1.0625rem;
  --space-section: clamp(5rem, 12vw, 9rem);
  --measure: 72rem; --radius: 1.25rem;
  /* Homepage photo band: overlap is half the photo height, so the images sit
     centred on the section break below them. */
  --band-img-h: 16rem; --band-overlap: calc(var(--band-img-h) / 2);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
h1, h2, .price { font-family: var(--font-display); letter-spacing: -0.02em; }
h1 { font-size: var(--step-5); line-height: .97; font-weight: 800; }
h2 { font-size: var(--step-4); line-height: 1.05; font-weight: 700; }
em.hl { font-style: normal; color: var(--indigo); position: relative; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--electric); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; }
/* Above .site-header's z-index of 20, or the focused link paints behind the
   sticky header and a keyboard user sees nothing. */
.skip-link:focus { left: 0; z-index: 100; }
.btn { display: inline-block; padding: .8rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--indigo); }
.btn-ghost { border: 1.5px solid var(--line); background: var(--card); }
/* --electric on white text is 4.17:1, below the 4.5:1 threshold for normal text;
   --indigo passes at 6.89:1, so the resting state uses indigo and electric is
   reserved for hover, where the higher-contrast state is not required. */
.btn-electric { background: var(--indigo); color: #fff; }
.btn-electric:hover { background: var(--electric); }

/* ---- Public site header ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.05rem;
  text-decoration: none; color: var(--ink);
}
.wordmark-badge {
  display: block; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: .5rem;
}
.site-header nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.5rem; font-weight: 500;
}
.site-header nav a { text-decoration: none; }
@media (max-width: 40rem) {
  /* Static, not sticky: the stacked two/three-row header would otherwise
     permanently eat ~25% of a phone viewport. */
  .site-header { position: static; flex-direction: column; align-items: flex-start; }
  .site-header nav { width: 100%; gap: .75rem 1.1rem; }
  /* Paired inputs (onboarding) have no room side-by-side on phones. */
  .field-row { flex-direction: column; align-items: stretch; gap: 1.25rem; }
}

/* ---- Public site footer ---- */
.site-footer {
  background: var(--ink); color: var(--paper);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  max-width: var(--measure);
  margin-inline: auto;
}
.footer-col .wordmark { color: var(--paper); }
.footer-strapline {
  margin: .75rem 0 0;
  color: rgb(245 246 249 / 65%);
  max-width: 28ch;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-nav a, .footer-contact a {
  color: var(--paper);
  text-decoration: none;
}
.footer-nav a:hover, .footer-contact a:hover {
  text-decoration: underline;
}
.footer-legal {
  margin: .75rem 0 0;
  color: rgb(245 246 249 / 55%);
  font-size: .9rem;
}
@media (max-width: 40rem) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  max-width: var(--measure);
  margin-inline: auto;
}
.hero .eyebrow {
  grid-column: 1 / 12;
  font-family: var(--font-mono);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.hero h1 {
  grid-column: 1 / 12;
  margin: 0;
}
.hero-standfirst {
  grid-column: 7 / 13;
  grid-row: 3;
  align-self: start;
  max-width: 34ch;
  color: var(--ink-2);
  margin-top: 1.6rem;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 56rem) {
  .hero .eyebrow, .hero h1, .hero-standfirst {
    grid-column: 1 / -1;
    max-width: none;
  }
}

em.hl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 10, 100 6 S 160 2, 198 7' fill='none' stroke='%235B6CFF' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% .5em;
  padding-bottom: .08em;
}

/* ---- Ranking ticker (signature element) ---- */
.ticker {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: ticker 45s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}
.ticker-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticker-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker .kw { color: var(--paper); }
.ticker .pos { opacity: .55; text-decoration: line-through; }
.ticker .pos.win { opacity: 1; text-decoration: none; color: var(--win); font-weight: 700; }
.ticker .arrow { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---- What you get ---- */
.what {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure);
  margin-inline: auto;
}
.what h2 {
  max-width: 24ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
  margin: 0;
}
.service dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.service dd {
  margin: 0;
  max-width: 30ch;
  color: var(--ink-2);
}
@media (min-width: 56.01rem) {
  .service:nth-child(odd) {
    transform: translateY(1.5rem);
  }
}
@media (max-width: 56rem) {
  .services {
    grid-template-columns: 1fr;
  }
}

/* ---- How it works ---- */
.how {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--card);
}
.how-inner {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure);
  margin-inline: auto;
}
/* Clears the half-photo the band above hangs into this section. */
.how-after-band .how-inner { padding-top: calc(var(--space-section) + var(--band-overlap)); }
.how h2 {
  max-width: 24ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.step:nth-child(2) { margin-top: 2.5rem; }
.step:nth-child(3) { margin-top: 5rem; }
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  color: rgb(16 18 43 / 20%);
  line-height: 1;
  margin-bottom: .75rem;
}
.step h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.step p {
  color: var(--ink-2);
  margin: 0;
  max-width: 28ch;
}
@media (max-width: 56rem) {
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(2), .step:nth-child(3) { margin-top: 0; }
}

/* ---- Pricing (the page's one symmetric, formal moment) ---- */
.pricing {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}
.pricing h2 {
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  max-width: 24ch;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  text-align: left;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.plan-featured {
  border: 2px solid var(--indigo);
  position: relative;
}
@media (min-width: 56.01rem) {
  .plan-featured {
    transform: translateY(-.75rem);
  }
}
.plan-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 1rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  background: rgb(47 69 224 / 12%);
  color: var(--indigo);
  font-size: .82rem;
  font-weight: 700;
}
.plan h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}
.plan .price {
  margin: 0 0 .75rem;
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1;
}
.plan .price .per {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: normal;
}
.plan-tagline {
  margin: 0 0 1.5rem;
  color: var(--ink-2);
}
.plan-features {
  flex: 1;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.plan-features li {
  padding-left: 1.6rem;
  position: relative;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--indigo);
  font-weight: 700;
}
.plan-features li.plan-features-divider {
  padding-left: 0;
  margin-top: .25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--ink-2);
  font-weight: 600;
}
.plan-features li.plan-features-divider::before {
  content: none;
}
.plan .btn {
  text-align: center;
  margin-top: auto;
}
.pricing-note {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 46ch;
  color: var(--ink-2);
}
.pricing-note strong {
  color: var(--ink);
}
@media (max-width: 56rem) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* ---- FAQ ---- */
.faq {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: 48rem;
  margin-inline: auto;
}
.faq h2 {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-list details {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--indigo);
  font-weight: 700;
}
.faq-list details[open] summary::after {
  content: "–";
}
.faq-list details p {
  margin: 1rem 0 0;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ---- Closing CTA band ---- */
.cta-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.cta-band h2 {
  margin: 0 auto 1rem;
}
.cta-standfirst {
  margin: 0 auto clamp(2rem, 4vw, 2.5rem);
  max-width: 40ch;
  color: rgb(245 246 249 / 75%);
}

/* ---- Motion: page transitions ---- */
@view-transition { navigation: auto; }
/* A scroll-driven `@keyframes rise` used to live here. It never worked: it
   declared only a `from`, so the implicit `to` resolved to the underlying
   opacity of 0 set further down, and it interpolated 0 -> 0. site.js is the
   single reveal path in every browser. */

/* ---- Auth pages ---- */
.auth {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 2.5rem);
}
.auth-card h1 {
  font-size: var(--step-1);
  margin: 0 0 1.5rem;
}
.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.auth-card label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.auth-card input:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 1px;
}
.auth-card .field-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
}
.auth-card .btn {
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
  font: inherit;
}
.auth-card p {
  color: var(--ink-2);
  margin: 0 0 1.25rem;
}
.auth-card p.auth-switch {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--ink-2);
}
.auth-switch a {
  color: var(--indigo);
  font-weight: 600;
  text-decoration: none;
}
.auth-switch a:hover {
  text-decoration: underline;
}

/* ---- Blog index (editorial list, no card grid) ---- */
.blog-index {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure);
  margin-inline: auto;
}
.blog-index h1 {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-list-item {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.post-list-item:last-child {
  border-bottom: 1px solid var(--line);
}
.post-date {
  display: block;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink-2);
  margin-bottom: .6rem;
}
.post-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .6rem;
}
.post-title a {
  text-decoration: none;
  color: var(--ink);
}
.post-title a:hover {
  color: var(--indigo);
}
.post-excerpt {
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
.post-empty {
  color: var(--ink-2);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.pagination a {
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
}
.pagination a:hover {
  text-decoration: underline;
}
.pagination .is-disabled {
  color: var(--ink-2);
  opacity: .5;
}
.pagination-status {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink-2);
}

/* ---- Blog post ---- */
.post {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.prose-wrap {
  max-width: 42rem;
  margin-inline: auto;
}
.post-meta {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink-2);
  margin: 0 0 .75rem;
}
.prose-wrap > h1 {
  font-size: var(--step-4);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.prose {
  color: var(--ink);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 1rem;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.75rem 0 .85rem;
}
.prose p {
  margin: 0 0 1.25rem;
}
.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}
.prose li {
  margin-bottom: .5rem;
}
.prose a {
  color: var(--indigo);
  text-decoration: underline;
}
.prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--line);
  color: var(--ink-2);
  font-style: italic;
}

/* ---- Dashboard shell ---- */
.dash-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.dash-header nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.5rem; font-weight: 500;
}
.dash-header nav a { text-decoration: none; }
.dash-header nav a[aria-current="page"] {
  color: var(--indigo);
  font-weight: 700;
}
.dash-user {
  display: flex; align-items: center; gap: 1rem;
  font-size: .9rem; color: var(--ink-2);
}
.dash-user form { margin: 0; }
.btn-logout {
  background: none; border: 1.5px solid var(--line); border-radius: 999px;
  padding: .45rem 1.1rem; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.btn-logout:hover { border-color: var(--ink); }
@media (max-width: 40rem) {
  .dash-header { flex-direction: column; align-items: flex-start; }
}
.dash-main {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) var(--space-section);
}
.dash-main > h1 {
  font-size: var(--step-4);
  margin: 0 0 .5rem;
}
.dash-lede {
  color: var(--ink-2);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 55ch;
}

/* ---- Dashboard cards ---- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  padding: 0; margin: 0; list-style: none;
}
.dash-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.dash-card:hover {
  border-color: var(--indigo);
  transform: translateY(-2px);
}
.dash-card h2 {
  font-size: var(--step-1);
  margin: 0 0 .4rem;
}
.dash-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
}

/* ---- Panels (settings sections) ---- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.panel-head h2 {
  font-size: var(--step-1);
  margin: 0;
}

/* ---- Status badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .04em;
}
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-ok { background: #E4F7EE; color: #0B6B44; }
.badge-fail { background: #FDE8EA; color: #A11326; }
.badge-warn { background: #FFF3DC; color: #8A5A00; }
.badge-muted { background: #EDEFF5; color: var(--ink-2); }

/* ---- Dashboard forms ---- */
.form-stack {
  display: flex; flex-direction: column; gap: 1.25rem;
  max-width: 40rem;
}
.field label {
  display: block; font-weight: 600; margin-bottom: .4rem;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field textarea.field-tall { min-height: 16rem; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 1px;
}
.field-hint { color: var(--ink-2); font-size: .85rem; margin: .35rem 0 0; }
.field-error { color: #A11326; font-size: .85rem; margin: .35rem 0 0; }
.auth-aside { margin-top: 1.5rem; }
.field-check {
  display: flex; align-items: center; gap: .5rem; font-weight: 500;
}
.field-row {
  display: flex; align-items: center; gap: .6rem;
}
.field-row input { flex: 1; }
.form-actions {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}

/* ---- Buttons (dashboard extras) ---- */
button.btn { border: none; cursor: pointer; font: inherit; font-weight: 600; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-sm { padding: .5rem 1.1rem; font-size: .9rem; }
.btn-danger { background: none; border: 1.5px solid #E5B4BB; color: #A11326; }
.btn-danger:hover { border-color: #A11326; background: #FDE8EA; }
.btn-quiet {
  background: none; border: 1.5px solid var(--line); color: var(--ink);
}
.btn-quiet:hover { border-color: var(--ink); }

/* ---- Alerts ---- */
.alert {
  padding: .9rem 1.2rem;
  border-radius: .75rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.alert-success { background: #E4F7EE; border: 1px solid #9ADBBC; color: #0B6B44; }
.alert-error { background: #FDE8EA; border: 1px solid #F0AEB6; color: #A11326; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
  background: var(--paper);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .row-actions {
  display: flex; align-items: center; gap: .75rem;
  justify-content: flex-end;
}
.data-table .row-actions a {
  font-weight: 600; color: var(--indigo); text-decoration: none;
}
.data-table .row-actions a:hover { text-decoration: underline; }
.link-danger {
  background: none; border: none; padding: 0; font: inherit;
  font-weight: 600; color: #A11326; cursor: pointer; text-decoration: none;
}
.link-danger:hover { text-decoration: underline; }
/* Same shape as .link-danger but for safe actions — red is reserved for
   destructive ones, so colour keeps its meaning. */
.link-action {
  background: none; border: none; padding: 0; font: inherit; font-size: .85rem;
  color: var(--indigo); font-weight: 600; cursor: pointer;
}
.link-action:hover { text-decoration: underline; }

/* ---- 2FA setup ---- */
.qr-box {
  display: inline-block;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: .5rem 0 1rem;
}
.qr-key {
  font-family: var(--font-mono);
  font-size: .9rem;
  word-break: break-all;
  color: var(--ink-2);
}
.qr-key strong { color: var(--ink); }

/* ---- Selects ---- */
.field select, select.field-select {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.field select:focus-visible { outline: 3px solid var(--electric); outline-offset: 1px; }

/* ---- Activity feed ---- */
.activity-list {
  list-style: none; margin: 0; padding: 0;
}
.activity-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}
.activity-list li:last-child { border-bottom: none; }
.activity-note { font-weight: 500; }
.activity-time {
  font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2);
  white-space: nowrap;
}

/* ---- Plan feature list (customer dashboard) ---- */
.plan-feature-list {
  margin: .75rem 0 0; padding: 0; list-style: none;
  color: var(--ink-2); font-size: .95rem;
}
.plan-feature-list li {
  padding: .3rem 0 .3rem 1.4rem;
  position: relative;
}
.plan-feature-list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--win); font-weight: 700;
}

/* ---- Budget bar ---- */
.budget-bar {
  height: .6rem; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); overflow: hidden;
}
.budget-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--electric));
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---- Notification bell + centre ---- */
.bell { position: relative; text-decoration: none; font-size: 1.15rem; line-height: 1; }
.bell-count {
  position: absolute; top: -.5rem; left: .8rem;
  background: #d1242f; color: #fff;
  font-size: .65rem; font-weight: 700; font-family: var(--font-mono);
  padding: .05rem .35rem; border-radius: 999px; line-height: 1.4;
}
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.notif:last-child { border-bottom: none; }
.notif-dot { width: .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem; flex: none; background: var(--ink-2); }
.notif-success .notif-dot { background: #0FA968; }
.notif-error .notif-dot { background: #d1242f; }
.notif-warning .notif-dot { background: #E8A317; }
.notif-info .notif-dot { background: var(--electric); }
.notif-title { margin: 0 0 .25rem; font-weight: 600; }
.notif-text { margin: 0 0 .35rem; color: var(--ink-2); font-size: .95rem; }
.notif.is-unread { background: #F2F4FE; }
.notif.is-unread .notif-title::after {
  content: 'new'; margin-left: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--indigo);
}
.notif-meta { margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); }
.notif-meta a { color: var(--indigo); font-weight: 600; text-decoration: none; }

/* ---- Review queue ---- */
.review-item {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
}
.review-item:first-of-type { border-top: none; }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.review-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.decline-pop { display: inline-block; }
.decline-pop > summary { list-style: none; display: inline-block; }
.decline-pop > summary::-webkit-details-marker { display: none; }
.decline-form {
  margin-top: .6rem; padding: .85rem;
  background: #FDF6F6; border: 1px solid #F0AEB6; border-radius: .6rem;
  display: flex; flex-direction: column; gap: .5rem; max-width: 32rem;
}
.decline-form textarea { min-height: 3.5rem; }

/* ---- Report KPI row ---- */
.kpi-row {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem;
}
.kpi-row li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; text-align: center;
}
.kpi-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.kpi-label { display: block; margin-top: .35rem; font-size: .8rem; color: var(--ink-2); }

/* ============================================================
   Homepage modern refresh
   ============================================================ */

/* ---- Hero: aurora backdrop + tighter type ---- */
.hero { position: relative; isolation: isolate; }
/*
  A single soft indigo wash behind the headline.

  The previous version had three problems that made it read as a smudge rather
  than a glow: it started above the hero, so the sticky header's opaque
  background sliced a dead-straight line across it; it included a 10% green
  layer that went muddy against the blue; and it was strongest in empty space
  at the top left rather than behind anything.

  Now it sits wholly inside the hero, fades to nothing well before every edge,
  and is one hue from the brand palette.
*/
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 26rem at 30% 40%, rgba(91, 108, 255, .16), transparent 65%),
    radial-gradient(30rem 22rem at 72% 20%, rgba(47, 69, 224, .10), transparent 65%);
  animation: aurora 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}
.hero h1 { text-wrap: balance; }
.hero-standfirst p:first-child { font-size: 1.15rem; }

/* ---- Hero trust chips (left column, top-aligned with the standfirst) ---- */
.hero-chips {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
@media (max-width: 56rem) {
  .hero-chips {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap;
    margin-top: 1.25rem;
  }
}
.hero-chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  background: rgb(255 255 255 / 70%);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  backdrop-filter: blur(6px);
}
.hero-chips li::before {
  content: "✓";
  color: var(--win); font-weight: 800;
}

/* ---- Ticker: soft edge fade so it reads as motion, not a bar ---- */
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* ---- Services as cards ---- */
.services { align-items: stretch; }
@media (min-width: 56.01rem) { .service:nth-child(odd) { transform: none; } }
.service {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo), var(--electric));
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.service:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 1rem 2.5rem rgb(16 18 43 / 10%);
}
.service:hover::before { transform: scaleX(1); }
.service dd { max-width: none; }

/* ---- How: gradient step numbers, clean aligned steps ---- */
.how { background: linear-gradient(180deg, var(--card), #eef0f8); }
.step-num {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(120deg, var(--indigo), var(--electric));
  opacity: 1;
}
.step { border-top-width: 2px; }
@media (min-width: 56.01rem) {
  .step:nth-child(2), .step:nth-child(3) { margin-top: 0; }
}

/* ---- Section headings: gradient accent on the highlight ---- */
.what h2, .how h2, .pricing h2, .faq h2, .cta-band h2 { text-wrap: balance; }

/* ---- Pricing: glow on the featured plan ---- */
.plan { transition: transform .18s ease, box-shadow .18s ease; }
.plan:hover { box-shadow: 0 1rem 2.5rem rgb(16 18 43 / 8%); }
.plan-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--indigo), var(--electric)) border-box;
  box-shadow: 0 1.5rem 3rem rgb(47 69 224 / 18%);
}
.plan-featured:hover { box-shadow: 0 2rem 4rem rgb(47 69 224 / 24%); }

/* ---- Buttons: a touch of lift ---- */
.btn { transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn-primary:hover, .btn-electric:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgb(47 69 224 / 28%); }

/* ---- Closing CTA: gradient instead of flat ink ---- */
.cta-band {
  background:
    radial-gradient(60rem 30rem at 50% -40%, rgba(91,108,255,.35), transparent 60%),
    linear-gradient(160deg, #14163a, var(--ink));
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ---- Integration test result (inline, per box) ---- */
.test-result { margin: .85rem 0 0; min-height: 1.2em; font-weight: 600; }
.test-result.is-ok { color: #0B6B44; }
.test-result.is-fail { color: #A11326; }

/* ---- Chat thread ---- */
.chat { display: flex; flex-direction: column; gap: .75rem; max-height: 32rem; overflow-y: auto; padding: .25rem; }
.chat-msg { max-width: 80%; padding: .7rem 1rem; border-radius: 1rem; }
.chat-msg .chat-meta { display: block; font-size: .72rem; color: var(--ink-2); margin-top: .35rem; font-family: var(--font-mono); }
.chat-them { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: .3rem; }
.chat-me { align-self: flex-end; background: var(--indigo); color: #fff; border-bottom-right-radius: .3rem; }
.chat-me .chat-meta { color: rgb(255 255 255 / 70%); }
.chat-empty { color: var(--ink-2); text-align: center; padding: 1.5rem; }
.chat-compose { display: flex; gap: .6rem; margin-top: 1rem; }
.chat-compose textarea { flex: 1; min-height: 3rem; }

/* ---- Audit trail ---- */
.trail { list-style: none; margin: 0; padding: 0; }
.trail li { display: flex; gap: 1rem; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.trail li:last-child { border-bottom: none; }
.trail .trail-event { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.trail-time { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2); white-space: nowrap; }

/* ============================================================
   Dashboard shell: top bar + tab strip
   ============================================================ */
.dash-shell {
  position: sticky; top: 0; z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .8rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure); margin-inline: auto;
}
.brand-tag {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--indigo); background: rgb(47 69 224 / 10%);
  padding: .15rem .5rem; border-radius: 999px; margin-left: .15rem;
}
.dash-topbar .dash-user { display: flex; align-items: center; gap: 1rem; font-size: .9rem; color: var(--ink-2); }
.dash-topbar .dash-user form { margin: 0; }
.topbar-link { text-decoration: none; font-weight: 600; color: var(--ink-2); }
.topbar-link:hover { color: var(--ink); }
.topbar-user { color: var(--ink-2); }
@media (max-width: 44rem) { .topbar-user { display: none; } }

.dash-tabs {
  display: flex; gap: .1rem; flex-wrap: nowrap;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  max-width: var(--measure); margin-inline: auto;
  /* One scrollable row: wrap + overflow together meant the tabs both wrapped
     AND scrolled, giving a two-row header on phones. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Small per-client subnav (Record | SEO | Profile) reusing the tab look. */
.client-subnav {
  padding: 0;
  max-width: none;
  margin: -.25rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.dash-tab {
  position: relative;
  padding: .85rem 1rem;
  text-decoration: none; white-space: nowrap;
  font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: color .15s ease, border-color .15s ease;
}
.dash-tab:hover { color: var(--ink); }
.dash-tab[aria-current="page"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.tab-count {
  background: #d1242f; color: #fff; font-size: .68rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px; line-height: 1.5;
}
/* A touch more breathing room now the nav is its own bar */
.dash-main { padding-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---- Integration help ---- */
.integration-help {
  background: var(--paper); border: 1px solid var(--line); border-radius: .75rem;
  padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.integration-help p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.integration-links { margin-top: .6rem !important; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.integration-links a { color: var(--indigo); font-weight: 600; text-decoration: none; white-space: nowrap; }
.integration-links a:hover { text-decoration: underline; }

/* ---- Customer onboarding wizard ---- */
.onboard-head { max-width: 46rem; }
.onboard-progress {
  height: .6rem; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-top: 1.25rem;
}
.onboard-progress-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo), var(--electric));
  transition: width .4s ease;
}
.onboard-progress-label { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.onboard-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 46rem; }
.onboard-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: clip;
}
.onboard-step.is-done .onboard-card { border-color: #9ADBBC; }
.onboard-card summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
}
.onboard-card summary::-webkit-details-marker { display: none; }
.onboard-card summary:hover { background: #FAFBFE; }
.onboard-status {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; margin-top: .1rem;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem;
}
.onboard-step.is-done .onboard-status { background: var(--win); }
.onboard-titles { display: grid; gap: .15rem; }
.onboard-title { font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.onboard-req { font-size: .7rem; }
.onboard-blurb { color: var(--ink-2); font-size: .92rem; }
.onboard-card .form-stack, .onboard-card .onboard-reassure { padding: 0 1.35rem 1.35rem; }
.onboard-card .onboard-reassure { margin: 0 0 .25rem; padding-top: .25rem; }
.onboard-card .onboard-reassure a { color: var(--indigo); }
.onboard-finish {
  margin-top: 2rem; max-width: 46rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem;
}
.onboard-finish p { margin: 0; color: var(--ink-2); max-width: 28rem; }
.field input[type="number"] {
  width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--line);
  border-radius: .65rem; font: inherit; background: #fff; color: var(--ink);
}
.field-optional { font-weight: 400; color: var(--ink-2); font-size: .85rem; }
.tab-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--electric); vertical-align: middle; margin-left: .3rem;
}

/* ---- Hero grid + SERP card (signature) ---- */
.hero-grid {
  grid-column: 1 / -1; /* .hero itself is a 12-col grid; span it fully */
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-grid .hero-standfirst { grid-column: auto; grid-row: auto; max-width: 40ch; }
.hero-grid .hero-chips { grid-column: auto; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 1.25rem; }
@media (max-width: 56rem) { .hero-grid { grid-template-columns: 1fr; } }
.serp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(16, 18, 43, .25);
  padding: 1.1rem; overflow: clip;
}
.serp-bar {
  display: flex; align-items: center; gap: .6rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; margin-bottom: .9rem;
  color: var(--ink-2); font-size: .95rem;
}
.serp-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--electric); flex: none; }
.serp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.serp-results li {
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid var(--line); border-radius: .8rem;
  padding: .65rem .8rem; background: #FAFBFE;
}
.serp-results li.serp-you {
  background: #fff; border-color: var(--indigo);
  box-shadow: 0 10px 24px -14px rgba(47, 69, 224, .55);
}
.serp-fav {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo); color: #fff; font-size: .8rem;
}
.serp-fav-grey { background: var(--line); }
.serp-lines { display: grid; line-height: 1.35; }
.serp-lines strong { font-size: .95rem; }
.serp-lines span { color: var(--ink-2); font-size: .8rem; }
.serp-rank {
  margin-left: auto; text-align: right;
  font-family: var(--font-display); font-weight: 800; color: var(--win);
  display: grid; line-height: 1.1;
}
.serp-rank em { font-style: normal; font-weight: 600; font-size: .7rem; color: var(--ink-2); }
.serp-caption { color: var(--ink-2); font-size: .9rem; margin: .8rem .25rem 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .serp-results li.serp-you { animation: serp-climb 1.4s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
  .serp-results li:not(.serp-you) { animation: serp-shift 1.4s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
  @keyframes serp-climb { from { transform: translateY(9.9rem); } to { transform: translateY(0); } }
  @keyframes serp-shift { from { transform: translateY(-3.3rem); } to { transform: translateY(0); } }
  .serp-rank { animation: serp-fade .5s ease 1.9s backwards; }
  @keyframes serp-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Image band ---- */
/* No top padding: the preceding section already supplies the section gap. */
.imageband {
  padding: 0 clamp(1.25rem, 4vw, 3rem); max-width: var(--measure); margin: 0 auto;
  /* Positioned so the photos paint over the next section's background rather
     than being covered by it — they straddle the paper/white break. */
  position: relative; z-index: 1;
}
.imageband-head { max-width: 38rem; margin-bottom: 2rem; }
.imageband-head p { color: var(--ink-2); }
.imageband-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-bottom: calc(var(--band-overlap) * -1);
}
@media (max-width: 48rem) { .imageband-grid { grid-template-columns: 1fr; } }
.imageband-item {
  margin: 0; border-radius: var(--radius); overflow: clip;
  border: 1px solid var(--line);
  box-shadow: 0 22px 45px -24px rgba(16, 18, 43, .38);
}
.imageband-item img { display: block; width: 100%; height: var(--band-img-h); object-fit: cover; }

/* ---- Dashboard preview ---- */
.dash-preview {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; padding: var(--space-section) clamp(1.25rem, 4vw, 3rem) 0;
  max-width: var(--measure); margin: 0 auto;
}
.what { padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 56rem) { .dash-preview { grid-template-columns: 1fr; } }
.dash-preview-copy p { color: var(--ink-2); max-width: 26rem; }
.dash-preview-shot { margin: 0; border-radius: var(--radius); overflow: clip; border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(16, 18, 43, .25); }
.dash-preview-shot img { display: block; width: 100%; }

/* ---- Scroll reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Scoped to .js: only hide content we know JavaScript is present to reveal.
     Without this guard a visitor with JS blocked, or a failed script load, gets
     an entirely blank page, because only site.js ever adds .is-visible. */
  .js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
.hero-grid h1 { font-size: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem); }

/* ---- Admin: site image slots ---- */
.imgslots { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.imgslot-preview {
  display: block; width: 100%; height: 11rem; object-fit: cover;
  border-radius: .8rem; border: 1px solid var(--line); margin-bottom: 1rem;
}
.imgslot input[type="file"] { font: inherit; width: 100%; }

/* ---- Hero photo: SERP card overlaps the photo's quiet corner ---- */
.hero-visual.has-photo { position: relative; }
.hero-photo { margin: 0; border-radius: var(--radius); overflow: clip; border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(16, 18, 43, .45); }
.hero-photo img { display: block; width: 100%; height: clamp(23rem, 38vw, 33rem); object-fit: cover; object-position: 60% center; }
/* The card hangs off the photo's bottom-left, over the blurred street, so it
   never sits on the subject's face or hands. */
.hero-visual.has-photo .serp-card {
  position: absolute; left: -3rem; bottom: -2.25rem; width: min(18.5rem, 72%);
  padding: .75rem; box-shadow: 0 26px 60px -20px rgba(16, 18, 43, .5);
}
.hero-visual.has-photo .serp-card .serp-bar { font-size: .8rem; padding: .35rem .75rem; margin-bottom: .5rem; }
.hero-visual.has-photo .serp-results li:nth-child(n+3) { display: none; }
.hero-visual.has-photo .serp-results li { padding: .5rem .7rem; }
.hero-visual.has-photo .serp-caption { display: none; }
@media (max-width: 56rem) {
  .hero-visual.has-photo .serp-card { position: static; width: 100%; margin-top: 1rem; }
  .hero-visual.has-photo .serp-results li:nth-child(n+3) { display: flex; }
}

/* ---- Admin: package uplift + private notes ---- */
.uplift-state { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.uplift-state li { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.uplift-label { min-width: 9rem; color: var(--ink-2); font-size: .9rem; }
.notelist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }
.notelist li { background: #FAFBFE; border: 1px solid var(--line); border-radius: .8rem; padding: .85rem 1rem; }
.notelist-body { margin: 0; }
.notelist-meta {
  margin: .5rem 0 0; font-size: .82rem; color: var(--ink-2);
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.notelist-del { display: inline; margin-left: auto; }
.btn-linky { background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; color: #A11326; cursor: pointer; text-decoration: underline; }
.checkline { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); margin-right: auto; }

/* ---- Admin: features a package promises but the platform doesn't automate ---- */
.owed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.owed-list li { display: flex; align-items: flex-start; gap: .75rem; }
.owed-list .badge { flex: none; margin-top: .1rem; }

/* ---- Blog featured image ---- */
.post-hero { margin: 0 0 1.75rem; border-radius: var(--radius); overflow: clip; border: 1px solid var(--line); }
.post-hero img { display: block; width: 100%; height: auto; }

/* ---- Customer dashboard ---- */
.dash-title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem); margin: 0 0 .35rem; }

/* The scoreboard answers "how are we doing" before any explanation. */
.scoreboard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem; margin: 1.75rem 0;
}
.score {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .3rem;
}
.score-hero {
  background: linear-gradient(140deg, var(--indigo), var(--electric));
  border-color: transparent; color: #fff;
}
.score-hero .score-label, .score-hero .score-sub { color: rgb(255 255 255 / 85%); }
.score-num {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: 2.6rem; line-height: 1;
}
.score-of { font-size: 1.4rem; font-weight: 700; opacity: .55; }
.score-label { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.score-sub { font-size: .82rem; color: var(--ink-2); line-height: 1.4; }

.panel-nudge { border-color: var(--electric); }

.rank-group-title { font-weight: 600; font-size: .92rem; margin: 1.25rem 0 .6rem; }
.rank-group-title:first-of-type { margin-top: 0; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rank-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .85rem; background: #FAFBFE;
  border: 1px solid var(--line); border-radius: .7rem;
}
.rank-term { font-weight: 600; flex: 1; }
.rank-pos { font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.rank-pos-win { color: var(--win); font-weight: 700; }
/* Month-on-month movement chips. */
.rank-delta {
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  padding: .1rem .5rem; border-radius: 999px;
}
.rank-delta-up { background: #E4F7EE; color: #0B6B44; }
.rank-delta-down { background: #FDE8EA; color: #A11326; }

.plain-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.plain-stats li { padding-left: 1.1rem; position: relative; color: var(--ink-2); }
.plain-stats li::before { content: "•"; position: absolute; left: 0; color: var(--indigo); font-weight: 700; }
.plain-stats strong { color: var(--ink); }

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-list li {
  padding: .35rem .8rem; background: #FAFBFE; border: 1px solid var(--line);
  border-radius: 999px; font-size: .85rem;
}

.versus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.versus-name { font-weight: 600; display: block; margin-bottom: .35rem; }
.versus-bar {
  display: block; height: .5rem; border-radius: 999px;
  background: #EDEFF5; overflow: hidden; margin-bottom: .3rem;
}
.versus-ahead { display: block; height: 100%; background: var(--win); border-radius: 999px; }
.versus-note { font-size: .85rem; color: var(--ink-2); }

.rec { border: 1px solid var(--line); border-radius: .7rem; margin-bottom: .6rem; background: #FAFBFE; }
.rec summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; }
.rec-body { padding: 0 .9rem .9rem; color: var(--ink-2); }

.covers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.covers-list li { display: flex; gap: .6rem; align-items: flex-start; }
.covers-list li::before { content: "✓"; color: var(--win); font-weight: 800; flex: none; }

/* ---- Self-service plan upgrade ---- */
.upgrade-option {
  display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.upgrade-option:first-of-type { border-top: 0; padding-top: 0; }
.upgrade-copy h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.upgrade-price { margin: 0 0 .4rem; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.upgrade-price .per { font-size: .8rem; font-weight: 500; color: var(--ink-2); margin-left: .3rem; }
.upgrade-gains { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.upgrade-gains li { display: flex; gap: .55rem; font-size: .93rem; }
.upgrade-gains li::before { content: "+"; color: var(--win); font-weight: 800; flex: none; }
.upgrade-action { flex: none; }

.confirm-panel { max-width: 40rem; }
.confirm-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; }
.confirm-list li { display: grid; gap: .15rem; }
.confirm-label { font-size: .85rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.confirm-value { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }

/* ---- Admin: manual task board ---- */
.tasklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.tasklist-item { border: 1px solid var(--line); border-radius: .8rem; padding: .95rem 1.1rem; background: #FAFBFE; }
.tasklist-item.is-overdue { border-color: #F0AEB6; background: #FDF6F6; }
.tasklist-item.is-done { opacity: .8; }
.tasklist-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tasklist-due { margin-left: auto; font-size: .85rem; color: var(--ink-2); }
.tasklist-due.is-late { color: #A11326; font-weight: 600; }
.task-complete { margin-top: .75rem; }
.task-complete > summary { display: inline-block; cursor: pointer; list-style: none; }
.task-complete > summary::-webkit-details-marker { display: none; }
.task-complete .form-stack { margin-top: .85rem; }
.task-outcome {
  margin: .6rem 0 0; padding: .7rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: .6rem; font-size: .93rem;
}

/* ---- Admin: per-client allowance tuning ---- */
.tune-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.tune-grid .field label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tune-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .45rem; }
.tune-features .checkline { align-items: flex-start; gap: .55rem; color: var(--ink); }
.tune-features .badge { margin-left: .35rem; }

/* ---- Monthly report: the work log ---- */
.worklog-group + .worklog-group { margin-top: 1.5rem; }
.worklog-group-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.worklog-group-time { color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.worklog { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.worklog li { display: flex; gap: 1rem; align-items: baseline; }
.worklog-time {
  flex: none; min-width: 8.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--indigo);
}
.worklog-what { color: var(--ink); }
.worklog-note { margin: 1.25rem 0 0; }
@media (max-width: 34rem) {
  .worklog li { flex-direction: column; gap: .1rem; }
  .worklog-time { min-width: 0; font-size: .9rem; }
}

/* ---- Draft preview banner ---- */
.preview-bar {
  max-width: var(--measure); margin: 1.5rem auto -1rem; padding: .85rem 1.1rem;
  background: #FFF3DC; border: 1px solid #E8C15A; border-radius: .7rem;
  font-size: .92rem; color: #6B4A00;
}
.preview-bar a { color: #6B4A00; font-weight: 600; }

/* ---- Blog index: card grid ---- */
.blog-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog-head p { color: var(--ink-2); font-size: 1.05rem; }

.post-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 64rem) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 44rem) { .post-grid { grid-template-columns: 1fr; } }

.post-card { height: 100%; }
.post-card-link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: clip; text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card-link:hover {
  transform: translateY(-3px);
  border-color: var(--electric);
  box-shadow: 0 18px 40px -22px rgba(16, 18, 43, .45);
}
@media (prefers-reduced-motion: reduce) { .post-card-link { transition: none; } .post-card-link:hover { transform: none; } }

.post-card-media { display: block; background: var(--paper); }
.post-card-media img { display: block; width: 100%; height: 12rem; object-fit: cover; }
.post-card-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 12rem; font-size: 2rem; color: var(--indigo);
  background: linear-gradient(140deg, #EEF0FB, #F7F8FC);
}
.post-card-body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.15rem 1.25rem 1.35rem; }
.post-card-title { font-size: 1.15rem; line-height: 1.3; margin: 0; font-family: var(--font-display); }
.post-card-excerpt { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.post-card-more { margin-top: auto; padding-top: .5rem; font-weight: 600; font-size: .9rem; color: var(--indigo); }
.post-card-link:hover .post-card-more { text-decoration: underline; }
.post-card .post-date { font-size: .8rem; color: var(--ink-2); letter-spacing: .02em; }

/* ---- Numbered pagination ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pagination-pages { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.pagination-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: .6rem;
  background: var(--card); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.pagination-page:hover { border-color: var(--electric); }
.pagination-page.is-current { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pagination-prev, .pagination-next { font-weight: 600; text-decoration: none; color: var(--indigo); }
.pagination-prev.is-disabled, .pagination-next.is-disabled { color: var(--ink-2); opacity: .5; }

/* ---- Homepage: latest from the blog ---- */
.homeblog { padding: var(--space-section) clamp(1.25rem, 4vw, 3rem) 0; max-width: var(--measure); margin: 0 auto; }
.homeblog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.homeblog-head p { color: var(--ink-2); max-width: 38rem; margin: .6rem 0 0; }

/* ---- Interaction polish -------------------------------------------------
   Most hover states in here changed instantly, which reads as abrupt next to
   the few that already eased. This gives everything interactive the same short
   ease, plus a press state so clicks feel physical. Deliberately small: 1-2px
   of travel and ~150ms, enough to feel considered and not enough to notice.
------------------------------------------------------------------------- */

/* Links that only change colour. */
.site-header nav a,
.footer-nav a, .footer-contact a,
.topbar-link, .dash-tab,
.pagination a, .pagination-page,
.row-actions a, .link-danger, .btn-linky,
.integration-links a, .auth-switch a {
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

/* Outline buttons had no transition at all, so they snapped. */
.btn-ghost, .btn-quiet, .btn-danger, .btn-logout {
  transition: transform .15s ease, background .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.btn-ghost:hover, .btn-quiet:hover, .btn-logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 .35rem .9rem rgb(16 18 43 / 8%);
}

/* Pressing anything settles it back down: the click feels like a button. */
.btn:active, .btn-ghost:active, .btn-quiet:active, .btn-logout:active,
.dash-card:active, .post-card-link:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: .06s;
}

/* Panels and cards that were static. */
.panel, .plan, .imgslot, .tasklist-item, .onboard-card, .rec, .imageband-item {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.imageband-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.6rem 3rem -1.4rem rgb(16 18 43 / 42%);
}

/* Form fields: the focus ring appears instantly, the colour can ease. */
.field input, .field textarea, .field select, select.field-select {
  transition: border-color .15s ease, background .15s ease;
}
.field input:hover, .field textarea:hover, .field select:hover, select.field-select:hover {
  border-color: #C9CFEA;
}

/* The nav item you are on should not lift; it is not going anywhere. */
.dash-tab[aria-current="page"], .site-header nav a[aria-current="page"] {
  transform: none;
}

/* Anyone who has asked for less motion gets colour changes only. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .btn-quiet, .btn-logout,
  .dash-card, .post-card-link, .imageband-item, .panel, .plan {
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary:hover, .btn-electric:hover,
  .btn-ghost:hover, .btn-quiet:hover, .btn-logout:hover,
  .dash-card:hover, .imageband-item:hover {
    transform: none;
  }
}

/* ---- Hero cursor glow ---------------------------------------------------
   A soft indigo light that trails the pointer across the hero. It reuses the
   hue of the ambient aurora behind the headline so it reads as the light
   already there responding to you, rather than a second decoration competing
   with it. Sits in the hero's own stacking context, below the copy.

   The span is moved with transform only, so tracking the pointer costs a
   composite and never a layout. It stays at opacity 0 until site.js confirms
   there is a mouse to follow, which means touch users and reduced-motion
   users never see it and no JS ever runs for them.
------------------------------------------------------------------------- */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-glow span {
  position: absolute;
  top: 0;
  left: 0;
  width: 32rem;
  height: 32rem;
  margin: -16rem 0 0 -16rem;   /* centre the blob on the translated point */
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 108, 255, .13), transparent 100%);
  opacity: 0;
  transition: opacity .55s ease;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { display: none; }
}