/* Home page, after clickup.com: white sections, bold tight headings, hairline grids instead of shadowed cards, soft
   grey panels and chips, and a slightly lighter purple (white text on it still passes 4.5:1). Loaded after site.css,
   on the home page only, so these rules only restyle the home page. */

.page-home {
  --signal: #7655ff;
  --signal-hover: #6a47f7;
  --signal-rgb: 118 85 255;
  --signal-soft: #f4f1ff;
  --signal-tint: #ebe5ff;
  --soft: #f2f2f4;
  --soft-hover: #e9e9ec;
  --panel-soft: #f7f7f8;
  --badge-line: linear-gradient(90deg, rgb(118 85 255 / 0), #7655ff 25%, #ff5fa2 60%, #ffb340 85%, rgb(255 179 64 / 0));
}

/* ── Header and buttons ─────────────────────────────────────────────── */
.site-header { background: rgb(255 255 255 / 0.94); border-bottom-color: transparent; }
.nav-signin { padding: 8px 14px; background: var(--soft); color: var(--ink); font-weight: 600; }
.nav-signin:hover { background: var(--soft-hover); }
.btn { border-radius: 10px; }
.btn-signal { box-shadow: none; }
/* The plan cards and trial strip are shared with /pricing, which keeps its black buttons; here they follow ClickUp:
   soft grey for the secondary plans, purple for the trial. */
.plan .btn-ink { background: var(--soft); color: var(--ink); box-shadow: none; }
.plan .btn-ink:hover { background: var(--soft-hover); }
.trial-strip .btn-ink { background: var(--signal); color: var(--on-signal); box-shadow: none; }
.trial-strip .btn-ink:hover { background: var(--signal-hover); }

/* ── Badges and headings ────────────────────────────────────────────── */
/* Every kicker is a white pill with a colour line along its top edge. */
.kicker { padding: 6px 14px 6px 12px; border: 1px solid #e6e6e9; background: var(--badge-line) top / 100% 1.5px no-repeat, var(--panel); box-shadow: none; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.kicker::before { box-shadow: none; }
.hero .kicker { margin-bottom: 22px; }
.section { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 960px) { .section { padding-top: 104px; padding-bottom: 104px; } }
.section-head { margin-bottom: 44px; }
.section-title { font: 700 clamp(2rem, 1.2rem + 2.6vw, 3.25rem)/1.06 var(--display); letter-spacing: -0.045em; }
.section-lede { color: #646469; }

/* ── From this link → to this page: a soft grey panel ───────────────── */
.proof-grid { width: calc(100% - 2 * var(--gutter)); max-width: var(--wrap); padding: 40px 24px; border-radius: 24px; background: var(--panel-soft); }
@media (min-width: 860px) { .proof-grid { padding: 64px 48px; gap: 56px; } }
.proof-link { border-color: #e3e3e7; border-radius: 14px; box-shadow: none; }
.proof-arrow { box-shadow: none; }

/* ── How it works: one hairline grid, a small purple label per step ─── */
.steps { background: none; border: 0; }
.step-list { gap: 0; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.step { display: block; padding: 28px 24px; border: 0; border-radius: 0; box-shadow: none; background: var(--panel); }
.step + .step { border-top: 1px solid var(--hairline); }
@media (min-width: 860px) {
  .step-list { gap: 0; }
  .step { padding: 36px 32px; }
  .step + .step { border-top: 0; border-left: 1px solid var(--hairline); }
}
.steps .step-num { display: block; width: auto; height: auto; margin: 0 0 16px; background: none; border-radius: 0; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); }
.steps .step-num::before { content: "Step "; }
.step-title { font: 700 21px/1.25 var(--display); letter-spacing: -0.03em; }
.step p { color: #646469; }
.steps-foot { margin-top: 32px; }

/* ── Built for affiliates: a hairline table, the NuPages column tinted ─ */
.vs { max-width: 900px; border-color: var(--hairline); border-radius: 16px; box-shadow: none; }
.vs th, .vs td { padding: 16px 22px; border-bottom-color: var(--hairline); }
.vs thead th { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--muted); background: var(--panel); }
.vs th:last-child, .vs td:last-child { border-left: 1px solid var(--hairline); background: var(--signal-soft); }
.vs thead th:last-child { color: var(--signal-ink); background: var(--signal-soft); }

/* ── Templates: lighter tiles, grey format chips ────────────────────── */
.wall-tile { box-shadow: 0 0 0 1px var(--hairline), 0 18px 36px -22px rgb(16 24 40 / 0.32); }
.wall-toggle { border-radius: 8px; box-shadow: none; }
.format-chips a { border-color: transparent; border-radius: 8px; background: var(--soft); color: var(--ink); }
.format-chips a:hover { border-color: transparent; background: var(--signal-soft); color: var(--signal-ink); }

/* ── Pricing: flat hairline cards ───────────────────────────────────── */
.plan { border-color: var(--hairline); border-radius: 16px; box-shadow: none; }
.plan-featured { border: 1.5px solid var(--signal); padding: 27.5px 23.5px 23.5px; box-shadow: 0 20px 40px -30px rgb(var(--signal-rgb) / 0.5); }
.plan-flag { border-radius: 6px; font-weight: 600; }
.plan-amount { font-weight: 700; }
.trial-strip { border: 0; border-radius: 16px; background: var(--panel-soft); }

/* ── FAQ and footer ─────────────────────────────────────────────────── */
.faq-list { border-top-color: var(--hairline); }
.faq-item { border-bottom-color: var(--hairline); }
.faq-toggle { border-color: transparent; border-radius: 8px; background: var(--soft); }
.faq-item[open] .faq-toggle { border-color: var(--signal); background: var(--signal); }
.site-footer { border-top-color: var(--hairline); background: var(--paper); }
.footer-bottom { border-top-color: var(--hairline); }
.pricing-teaser .section-lede { max-width: 700px; }

/* ── Closing card: the founder's line on the ClickUp-style gradient ─── */
/* White text ≥ 4.5:1 everywhere: base 6.23:1, orange glow 4.55:1, pink glow 4.84:1 (the glows never overlap). */
.closing-card { position: relative; overflow: hidden; padding: 48px 24px; border-radius: 24px; text-align: center; color: #fff; background: radial-gradient(60% 90% at 0% 100%, rgb(255 138 92 / 0.4) 0%, transparent 60%), radial-gradient(55% 85% at 100% 0%, rgb(255 95 162 / 0.4) 0%, transparent 60%), #5b3df0; }
.closing-card :focus-visible { outline-color: #fff; }
@media (min-width: 960px) { .closing-card { padding: 80px 48px; } }
.closing-quote { max-width: 820px; margin: 0 auto 32px; }
.closing-quote p { margin: 0 0 16px; font: 600 clamp(1.4rem, 0.9rem + 1.8vw, 2.25rem)/1.3 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.closing-quote footer { font-size: 15px; color: #fff; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }
.closing-note { margin: 0; font-size: 14.5px; color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f4f4f6; }