@import url("fonts/fonts.css");

/* ============================================================
   Afentico · The Retention System
   Equal-weight synthesis of all five references + brand.
   Brand wins colours + fonts; feel blended from Wix (airy
   oversized type, pill buttons), User Interviews (paper calm,
   mono-dot eyebrows, checklists), AutoSend (hairline flat
   cards, one soft showcase shadow, mono tags), wellcopy
   (agency rhythm). No single reference dominates.
   ============================================================ */
:root {
  /* ---- Brand colours (win — do not substitute) ---- */
  --color-bright-snow: #F8F8F6;
  --color-parchment:   #EFEDEA;
  --color-dim-grey:    #6B6B6B;
  --color-onyx:        #111111;
  --color-brick-ember: #CA0013;

  /* ---- Derived neutrals ---- */
  --color-white:       #FFFFFF;
  --color-hairline:    #E4E1DC;
  --color-ash:         #9B9A97;
  --color-ember-deep:  #A50010;
  --color-ember-wash:  #FBE9EA;

  /* ---- Semantic ---- */
  --bg-canvas:      var(--color-bright-snow);
  --bg-alt:         var(--color-parchment);
  --surface-card:   var(--color-white);
  --border-hairline:var(--color-hairline);
  --text-primary:   var(--color-onyx);
  --text-muted:     var(--color-dim-grey);
  --text-tertiary:  var(--color-ash);
  --accent:         var(--color-brick-ember);
  --accent-hover:   var(--color-ember-deep);
  --on-accent:      var(--color-white);

  /* ---- Fonts (Manrope headers · Inter body + labels) ---- */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-oblique: 0deg;

  /* ---- Type scale (Wix-leaning: bigger display, tighter tracking) ---- */
  --text-eyebrow: 13px;
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body:    16px;
  --text-body-lg: 19px;
  --text-subheading: 21px;
  --text-heading-sm: 24px;
  --text-heading: clamp(26px, 3vw, 34px);
  --text-heading-lg: clamp(30px, 4.6vw, 52px);
  --text-display: clamp(34px, 4.8vw, 58px);

  /* ---- Spacing ---- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px;

  /* ---- Layout ---- */
  --page-max: 1180px;
  --section-gap: 96px;
  --section-gap-lg: 128px;

  /* ---- Radius (pill buttons; soft cards) ---- */
  --radius-pill: 9999px;
  --radius-button: 10px;
  --radius-input: 14px;
  --radius-card: 20px;
  --radius-card-sm: 14px;

  /* ---- Elevation: flat by default; ONE soft shadow for the showcase surface ---- */
  --shadow-soft: 0 22px 50px -20px rgba(17, 17, 17, 0.18);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--color-ember-wash); color: var(--color-onyx); }
a:focus-visible { outline: 2px solid var(--color-onyx); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   Typography primitives
   ============================================================ */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: oblique var(--display-oblique);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}
h3 { letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 var(--space-24);
  display: block;
}

.lead { font-size: var(--text-body-lg); color: var(--text-muted); line-height: 1.6; }
.muted { color: var(--text-muted); }
em.hl { font-style: inherit; color: var(--accent); }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-24); }
.section { padding-block: var(--section-gap); }
.section--alt { background: var(--bg-alt); }
.section-head { max-width: 680px; margin-bottom: var(--space-64); }
.section-head h2 { font-size: var(--text-heading-lg); margin-bottom: var(--space-16); }
.section-head .lead { margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.hero__grid > *, .value__grid > *, .footer__grid > *, .grid-3 > *, .system__grid > * { min-width: 0; }

/* ============================================================
   Buttons — pill geometry (Wix / User Interviews)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-button);
  padding: var(--space-12) var(--space-24);
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-onyx); outline-offset: 3px; }

/* Ghost secondary — outline pill */
.btn--ghost {
  color: var(--text-primary); background: transparent; border: 1px solid var(--color-onyx);
}
.btn--ghost:hover { background: var(--color-onyx); border-color: var(--color-onyx); color: var(--color-white); transform: translateY(-1px); }

/* Text button (tertiary) */
.btn-text {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 600;
  color: var(--text-primary); background: none; border: none; padding: 13px 6px;
  transition: color .15s ease, gap .15s ease;
}
.btn-text:hover { color: var(--accent); gap: 12px; }
.btn-text:focus-visible { outline: 2px solid var(--color-onyx); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border-hairline);
  background: color-mix(in srgb, var(--bg-canvas) 86%, transparent);
  backdrop-filter: saturate(1.05) blur(9px);
  -webkit-backdrop-filter: saturate(1.05) blur(9px);
}
.nav__inner {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-16) var(--space-24);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-style: normal;
  font-size: 23px; letter-spacing: -0.02em; color: var(--text-primary);
}
.nav__links { display: flex; align-items: center; gap: var(--space-32); }
.nav__links a { font-size: var(--text-body-sm); color: var(--text-primary); font-weight: 500; transition: color .15s ease; }
.nav__links a:hover { color: var(--accent); }
.nav__cta { display: flex; align-items: center; gap: var(--space-16); }

/* ============================================================
   Hero — centered typographic statement
   ============================================================ */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding-block: var(--space-96) var(--space-96); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-64); }
.hero h1 {
  font-size: var(--text-display);
  letter-spacing: -0.03em; line-height: 1.04;
  margin: 0 0 var(--space-24); max-width: 18ch;
}
.hero .subhead { font-size: var(--text-body); color: var(--text-muted); max-width: 48ch; margin: 0 0 var(--space-32); }
.hero__actions { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.hero__partner-badge { height: 44px; width: auto; }

/* Right column — phone mockup, flat */
.hero__media { display: flex; align-items: center; justify-content: center; }
.hero__phone {
  width: 272px; height: auto; max-width: 100%;
  filter: drop-shadow(0 32px 48px rgba(17, 17, 17, 0.22));
}

/* one restrained load fade for the hero (no per-element stagger) */
.hero { animation: heroIn .5s ease both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Value band — headline left, argument right (Wix feature pattern)
   ============================================================ */
.value__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-64); align-items: center; }
.value h2 { font-size: var(--text-heading-lg); max-width: 15ch; }
.value__text h2 { margin-bottom: var(--space-24); }
.value__body p { color: var(--text-muted); margin: 0 0 var(--space-24); font-size: var(--text-body-lg); max-width: 54ch; }
.value__body p:last-child { margin-bottom: 0; }

/* Vertical email stack — structural donor (vertical-image-stack), skinned to DESIGN.md tokens */
.stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.stack__viewport { position: relative; width: 360px; height: 680px; overflow: hidden; touch-action: pan-y; }
.stack__viewport:focus-visible { outline: 2px solid var(--color-onyx); outline-offset: 6px; border-radius: var(--radius-card-sm); }
.stack__cards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stack__card {
  position: absolute; top: 50%; left: 50%;
  width: 340px; height: 560px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
  will-change: transform, opacity;
  cursor: pointer;
}
.stack__scroll {
  width: 100%; height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 8px; background: var(--bg-alt);
  scrollbar-width: none; -ms-overflow-style: none;
}
.stack__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.stack__img { display: block; width: 100%; height: auto; pointer-events: none; }
.stack__dots { display: flex; gap: var(--space-12); }
.stack__dot { width: 12px; height: 12px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--color-hairline); cursor: pointer; transition: background .2s ease, width .2s ease; }
.stack__dot:hover { background: var(--text-tertiary); }
.stack__dot.is-active { width: 30px; background: var(--accent); }
.stack__dot:focus-visible { outline: 2px solid var(--color-onyx); outline-offset: 2px; }

/* ============================================================
   The Retention System — merged services + process (bento)
   ============================================================ */
.system__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: var(--space-16);
}
/* Custom bento — gently varied widths (7/5 splits), single-row heights */
.sys-flows    { grid-column: 1 / 8;  grid-row: 1 / 2; }  /* wide feature (7/12) */
.sys-capture  { grid-column: 8 / 13; grid-row: 1 / 2; }  /* narrow (5/12) */
.sys-campaigns{ grid-column: 1 / 6;  grid-row: 2 / 3; }  /* narrow (5/12) */
.sys-inbox    { grid-column: 6 / 13; grid-row: 2 / 3; }  /* wide (7/12) */
.sys-testing  { grid-column: 1 / 7;  grid-row: 3 / 4; }  /* medium (6/12) */
.sys-endtoend { grid-column: 7 / 13; grid-row: 3 / 4; }  /* medium (6/12) */

.tile {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-16);
  min-width: 0;
}
.tile h3 { font-size: var(--text-heading-sm); }
.tile p { margin: 0; color: var(--text-muted); }

/* Tile colour variants — warm brand surfaces (red reserved for the CTA) */
.tile--parchment { background: var(--bg-alt); }
.tile--wash { background: var(--color-ember-wash); border-color: rgba(202, 0, 19, 0.14); }

/* Inbox tile: Spam -> Primary node line (flat, on-brand) */
.tile__flow { margin: auto 0; display: flex; align-items: center; gap: var(--space-12); }
.node { font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); color: var(--text-muted); background: var(--bg-alt); white-space: nowrap; }
.node--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.node__line { flex: 1; height: 2px; min-width: 16px; background: linear-gradient(to right, var(--border-hairline), var(--accent)); border-radius: 2px; }

/* Tile figures: on-brand SVG visuals centred in the tile's free space */
.tile__viz { margin: auto 0; padding: var(--space-8) 0; }
.tile__viz svg { width: 100%; height: auto; }
.tile__viz .viz--cal, .tile__viz .viz--form { max-width: 260px; }
.tile__viz--center { display: flex; justify-content: center; }
.tile__viz--center .viz--loop { max-width: 176px; }
/* Flow diagram fills the wide feature tile and centres vertically */
.tile__viz--flow { flex: 1; display: flex; align-items: center; padding: var(--space-8) 0; }
.tile__viz--flow .viz--flow { width: 100%; max-width: 560px; }

/* Testing tile: abstract A/B bars, no fabricated numbers */
.tile__ab { margin: auto 0; display: flex; align-items: flex-end; gap: var(--space-16); height: 72px; }
.ab__bar { flex: 1; border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-family: var(--font-mono); font-size: var(--text-caption); }
.ab__bar--a { height: 58%; background: var(--color-white); border: 1px solid var(--border-hairline); color: var(--text-muted); }
.ab__bar--b { height: 100%; background: var(--accent); color: var(--on-accent); }


/* ============================================================
   Final CTA — centered on parchment
   ============================================================ */
.final { text-align: center; }
.final__inner { max-width: 780px; margin-inline: auto; }
.final h2 { font-size: var(--text-heading-lg); margin-bottom: var(--space-24); }
.final p { color: var(--text-muted); max-width: 60ch; margin: 0 auto var(--space-40); font-size: var(--text-body-lg); }
.final__actions { display: flex; justify-content: center; margin-bottom: var(--space-24); }

/* ============================================================
   Booking page — intro + Calendly embed
   ============================================================ */
.booking__head { max-width: 680px; margin: 0 auto var(--space-48); text-align: center; }
.booking__head h1 { font-size: var(--text-heading-lg); margin-bottom: var(--space-16); }
.booking__head .lead { margin: 0 auto; max-width: 58ch; }
.booking__calendar { max-width: 900px; margin-inline: auto; }
.booking__calendar .calendly-inline-widget { width: 100%; }

/* ============================================================
   Legal / prose pages (privacy policy, terms)
   ============================================================ */
.legal__inner { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: var(--text-heading-lg); margin-bottom: var(--space-8); }
.legal__updated { font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 var(--space-48); }
.legal h2 { font-size: var(--text-heading-sm); margin: var(--space-48) 0 var(--space-16); }
.legal h3 { font-size: var(--text-subheading); margin: var(--space-32) 0 var(--space-8); }
.legal p { color: var(--text-muted); margin: 0 0 var(--space-16); max-width: 68ch; }
.legal ul { color: var(--text-muted); margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.legal li { margin-bottom: var(--space-8); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal a:hover { color: var(--accent-hover); }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--border-hairline); padding-block: var(--space-64); }
.footer__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-40); align-items: start; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); max-width: 268px; }
.footer__brand .wordmark { font-size: 24px; }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-16); text-align: right; }
.footer__badges { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; justify-content: flex-start; }
.footer__badges .badge { width: 52px; height: 52px; object-fit: contain; }
.footer__partner-badge { height: 40px; width: auto; display: block; }
.footer__bottom { max-width: var(--page-max); margin: var(--space-48) auto 0; padding-top: var(--space-24); border-top: 1px solid var(--border-hairline); display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.footer__bottom span, .footer__bottom a { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.footer__bottom a { transition: color .15s ease; }
.footer__bottom a:hover { color: var(--accent); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-40); }
  .hero__placeholder { min-height: 280px; }
  .value__grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .grid-3 { grid-template-columns: 1fr; }
  /* Bento -> 2 columns: flagship + wide tiles go full width, the two small tiles pair up */
  .system__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .sys-flows, .sys-campaigns, .sys-capture, .sys-inbox, .sys-testing, .sys-endtoend { grid-column: auto; grid-row: auto; }
  .sys-flows, .sys-inbox { grid-column: 1 / 3; }
}
@media (max-width: 720px) {
  .section { padding-block: var(--space-64); }
  .hero { padding-block: var(--space-48) var(--space-80); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__right { align-items: flex-start; text-align: left; }
  .footer__bottom { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .stack__viewport { width: min(320px, 84vw); height: min(600px, 156vw); }
  .stack__card { width: min(300px, 80vw); height: min(480px, 128vw); }
  .stack__dots { gap: var(--space-16); }
  .stack__dot { width: 15px; height: 15px; }
  .stack__dot.is-active { width: 36px; }
  .system__grid { grid-template-columns: 1fr; }
  .sys-flows, .sys-campaigns, .sys-capture, .sys-inbox, .sys-testing, .sys-endtoend { grid-column: 1 / -1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero { animation: none; }
  .btn, .btn-text { transition: none; }
  .stack__card { transition: none; }
}