@font-face {
  font-family: "Eina01";
  src: url("fonts/Eina01-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eina01";
  src: url("fonts/Eina01-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* AbitAI — Swiss + Tech aesthetic */
:root {
  --c-bg: #F7F7F5;
  --c-white: #FFFFFF;
  --c-light: #E6E6E8;
  --c-soft: #A7A7AD;
  --c-mid: #6E6E73;
  --c-dark: #2A2A2E;
  --c-charcoal: #1C1C1F;
  --c-near-black: #0F0F10;
  --c-accent: #FF3D5D;

  --font-sans: "Eina01", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --col: 12;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11", "calt";
  background: var(--c-bg);
  color: var(--c-near-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--c-accent); color: var(--c-white); }

/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .grid12 { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
@media (max-width: 600px) { .grid12 { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.hairline-top { border-top: 1px solid var(--c-light); }
.hairline-bot { border-bottom: 1px solid var(--c-light); }

/* Editorial labels */
.label-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mid);
  font-weight: 500;
}
.label-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-mid);
  font-weight: 500;
}

/* HEADER */
.hdr {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: rgba(247,247,245,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--c-light);
}
.hdr-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.wordmark {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.wordmark-logo {
  height: 32px;
  width: auto;
  display: block;
  transition: height 220ms ease;
}
.hdr.scrolled .wordmark-logo { height: 28px; }
.wordmark-footer .wordmark-logo { height: 32px; }
.wordmark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
  display: inline-block;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 13.5px; color: var(--c-dark);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--c-near-black); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--c-accent);
  transition: width 200ms ease;
}
.nav-links a:hover::after { width: 100%; }
@media (max-width: 760px) { .nav-links { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500;
  padding: 11px 18px;
  border-radius: 4px;
  border: 1px solid var(--c-near-black);
  background: var(--c-near-black); color: var(--c-white);
  transition: transform 200ms ease, background 200ms ease;
}
.btn .btn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover .btn-dot { transform: scale(1.5); }

/* Pill CTA — premium capsule with vertical text flip on hover */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #0A0C0C;
  color: #F4F4F4;
  border: 0;
  padding: 0 28px 0 32px;
  height: 60px;
  min-width: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
}
.btn-pill:hover {
  transform: scale(1.045);
  transition: background 220ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  background: #0A0C0C;
}
.btn-pill .pill-label {
  position: relative;
  display: inline-block;
  flex: 1;
  height: 1.5em;
  overflow: hidden;
  line-height: 1.5;
}
.btn-pill .pill-text {
  display: block;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform 380ms cubic-bezier(.7,0,.2,1);
  will-change: transform;
}
.btn-pill .pill-text-dup {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.btn-pill:hover .pill-text { transform: translateY(-100%); }
.btn-pill:hover .pill-text-dup { transform: translateY(0); }
.btn-pill .pill-arrow {
  width: 28px; height: 12px;
  margin-left: 24px;
  color: #F4F4F4;
  flex-shrink: 0;
  transition: transform 320ms cubic-bezier(.7,0,.2,1);
}
.btn-pill:hover .pill-arrow { transform: translateX(6px); }

/* Compact pill — header */
.btn-pill-sm {
  height: 42px;
  padding: 0 18px 0 22px;
  font-size: 13px;
  background: #FAFAFA;
  color: #111214;
  border: 1px solid #B9B9B9;
}
.btn-pill-sm:hover { background: #FAFAFA; }
.btn-pill-sm .pill-arrow {
  width: 22px;
  height: 10px;
  margin-left: 14px;
  color: #111214;
}
.btn-ghost {
  background: transparent; color: var(--c-near-black);
  border: 1px solid var(--c-light);
}
.btn-ghost:hover { border-color: var(--c-near-black); }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--c-near-black);
  padding: 11px 4px;
}
.btn-link .arrow { transition: transform 220ms ease; }
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-link::after {
  content: ""; display: block; height: 1px;
  background: var(--c-near-black);
  width: 0; transition: width 200ms ease;
  position: absolute;
}
.btn-link { position: relative; }
.btn-link:hover::after { width: 100%; bottom: 6px; left: 4px; right: 24px; }

/* HERO */
.hero {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(64px, 10vw, 140px);
  position: relative;
  overflow: hidden;
  background: #F7F7F5;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.hero-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(32px, 5vw, 56px);
  position: relative; z-index: 2;
}
.hero-content {
  grid-column: 1 / span 7;
  position: relative; z-index: 2;
}
.hero-visual {
  grid-column: 8 / span 5;
  position: relative; z-index: 2;
}
@media (max-width: 1100px) {
  .hero-content { grid-column: 1 / span 12; }
  .hero-visual { grid-column: 1 / span 12; margin-top: 48px; }
}

.headline {
  font-size: clamp(40px, 6.6vw, 90px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 clamp(14px, 1.4vw, 18px) 0;
  color: var(--c-near-black);
}
.headline .ln {
  display: block;
  overflow: hidden;
}
.headline .ln > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 900ms cubic-bezier(.2,.8,.2,1) forwards;
}
.headline .ln:nth-child(2) > span { animation-delay: 120ms; }
@keyframes rise { to { transform: translateY(0); } }

.hero-sub {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--c-dark);
  max-width: 540px;
  margin: 0 0 clamp(56px, 6vw, 82px) 0;
  opacity: 0; animation: fade 800ms ease 320ms forwards;
}
.trust-line {
  font-size: 13px; color: var(--c-mid);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 36px;
  opacity: 0; animation: fade 800ms ease 440ms forwards;
}
.trust-line .pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-light);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
.trust-line .pill .check {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-accent);
  display: inline-block;
}
.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  opacity: 0; animation: fade 800ms ease 560ms forwards; }

@keyframes fade { to { opacity: 1; } }

/* HERO VISUAL — abstract AI interface */
.viz-stack {
  position: relative;
  height: 540px;
}
.viz-card {
  background: var(--c-white);
  border: 1px solid var(--c-light);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 24px -16px rgba(0,0,0,0.08);
  position: absolute;
  opacity: 0; transform: translateY(16px);
  animation: cardIn 700ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

.viz-chat {
  top: 24px; left: 0; width: 78%;
  padding: 18px 18px 16px;
  animation-delay: 260ms;
}
.viz-chat-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.viz-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-near-black); color: var(--c-white);
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.viz-avatar.user { background: var(--c-light); color: var(--c-dark); }
.viz-msg {
  font-size: 13px; line-height: 1.5; color: var(--c-dark);
  background: var(--c-bg);
  padding: 9px 12px; border-radius: 4px 12px 12px 12px;
  max-width: 85%;
}
.viz-msg.me {
  background: var(--c-near-black); color: var(--c-white);
  border-radius: 12px 4px 12px 12px;
  margin-left: auto;
}
.viz-typing {
  display: inline-flex; gap: 3px; padding: 9px 12px;
  background: var(--c-bg); border-radius: 4px 12px 12px 12px;
}
.viz-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-soft);
  animation: blink 1.2s infinite;
}
.viz-typing span:nth-child(2) { animation-delay: 0.18s; }
.viz-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.viz-compare {
  top: 220px; right: 0; width: 70%;
  padding: 16px 18px 18px;
  animation-delay: 420ms;
}
.viz-compare h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-mid); margin: 0 0 14px 0; font-weight: 500;
  font-family: var(--font-mono);
  display: flex; justify-content: space-between;
}
.viz-compare h4 .num { color: var(--c-near-black); }
.viz-cmp-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  padding: 8px 0; border-top: 1px solid var(--c-light);
  font-size: 12.5px;
}
.viz-cmp-row:first-of-type { border-top: 0; }
.viz-cmp-row .name { color: var(--c-near-black); font-weight: 500; }
.viz-cmp-row .meta { color: var(--c-mid); font-family: var(--font-mono); font-size: 11px; }
.viz-cmp-row .score {
  color: var(--c-near-black); font-family: var(--font-mono); font-size: 11px;
  display: flex; align-items: center; gap: 6px;
}
.viz-cmp-row .score::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-soft);
}
.viz-cmp-row.top .score::before { background: var(--c-accent); }
.viz-cmp-row.top .score { color: var(--c-near-black); font-weight: 600; }

.viz-insight {
  bottom: 0; left: 8%; width: 64%;
  padding: 14px 16px;
  animation-delay: 580ms;
}
.viz-insight .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.viz-insight .row:last-child { margin-bottom: 0; }
.viz-insight .key { font-size: 12px; color: var(--c-mid); }
.viz-insight .val {
  font-family: var(--font-mono); font-size: 12px; color: var(--c-near-black);
  display: inline-flex; align-items: center; gap: 6px;
}
.viz-bar {
  width: 60px; height: 4px; background: var(--c-light); border-radius: 2px;
  overflow: hidden; position: relative;
}
.viz-bar::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%;
  width: var(--w, 60%); background: var(--c-near-black);
}
.viz-bar.accent::after { background: var(--c-accent); }

.viz-chips {
  position: absolute; top: -16px; right: 0;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  width: 60%;
  opacity: 0; animation: fade 800ms ease 780ms forwards;
}
.chip {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  padding: 5px 9px;
  background: var(--c-white);
  border: 1px solid var(--c-light);
  border-radius: 999px;
  color: var(--c-dark);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .d { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }

/* Section base */
.section {
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
}
.section-head {
  margin-bottom: clamp(56px, 6.5vw, 88px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
}
.section-head .ttl {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -2px;
  font-weight: 600;
  margin: 0;
  color: var(--c-near-black);
  text-wrap: balance;
  max-width: 22ch;
}

/* Reveal title — character-by-character ink scan */
.reveal-title { color: transparent; }
.reveal-title .rword { display: inline-block; white-space: nowrap; }
.reveal-title .rsp { white-space: normal; }
.reveal-title .rch {
  color: #E8E8E8;
  transition: color var(--fade, 600ms) cubic-bezier(.45,.05,.3,.99);
  transition-delay: 0ms;
  will-change: color;
}
.reveal-title.play .rch {
  color: var(--end, var(--c-near-black));
  transition-delay: var(--d, 0ms);
}
@media (max-width: 900px) {
  .section-head .ttl { max-width: none; }
}

/* Problem cards */
.problem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-light);
}
.problem-card {
  padding: 32px 28px 36px 0;
  border-right: 1px solid var(--c-light);
  position: relative;
  transition: padding-left 300ms ease;
}
.problem-card:last-child { border-right: 0; }
.problem-card:not(:first-child) { padding-left: 28px; }
.problem-card .problem-glyph {
  width: 28px; height: 28px;
  margin-bottom: 24px;
  color: var(--c-near-black);
  transition: color 300ms ease, transform 300ms ease;
}
.problem-card:hover .problem-glyph {
  color: var(--c-accent);
}
.problem-card h3 {
  font-size: 19px; line-height: 1.25;
  margin: 0 0 12px 0; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-near-black);
}
.problem-card p {
  font-size: 14px; line-height: 1.5;
  color: var(--c-mid); margin: 0;
  max-width: 26ch;
}
@media (max-width: 900px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-card { padding: 28px 20px 32px; border-bottom: 1px solid var(--c-light); }
  .problem-card:nth-child(2n) { border-right: 0; }
  .problem-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { border-right: 0 !important; padding-left: 0; }
  .problem-card:not(:last-child) { border-bottom: 1px solid var(--c-light); }
}

/* How it works */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  border-top: 1px solid var(--c-light);
}
.how-line {
  position: absolute; top: 0; left: 0; height: 1px;
  background: var(--c-accent);
  width: var(--progress, 0%);
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.how-line::after {
  content: "";
  position: absolute;
  right: -5px; top: -4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(255,61,93,0.35);
  transform: scale(var(--prog-dot, 1));
  transition: transform 220ms ease;
  opacity: 0;
}
.how-grid:not([style*="0%"]) .how-line::after,
.how-line:not([style*=""]) {}
.how-line[class] { /* always show dot when has any width */ }
/* Show dot whenever line has width: use a pseudo trick — show always but hide via parent */
.how-line::after { opacity: var(--dot-opacity, 0); }
.how-grid .how-line::after { opacity: 1; }
.how-line.flowing::after {
  animation: pulseDot 700ms ease-in-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,93,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,61,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,61,93,0); }
}
/* Hide dot when progress is 0 */
.how-grid[style*="--progress: 0%"] .how-line::after,
.how-grid[style*="--progress:0%"] .how-line::after { opacity: 0; }

.how-step.pulse .stepnum .dot {
  animation: stepPulse 700ms ease-out;
}
@keyframes stepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,93,0.6); transform: scale(1.2); }
  100% { box-shadow: 0 0 0 14px rgba(255,61,93,0); transform: scale(1.2); }
}
.how-step {
  padding: 36px 24px 36px 0;
  border-right: 1px solid var(--c-light);
  position: relative;
  min-height: 280px;
}
.how-step:last-child { border-right: 0; }
.how-step:not(:first-child) { padding-left: 24px; }
.how-step .stepnum {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-soft);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 10px;
  transition: color 400ms ease;
}
.how-step.active .stepnum { color: var(--c-near-black); }
.how-step .stepnum .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-light);
  transition: background 400ms ease, transform 400ms ease;
}
.how-step.active .stepnum .dot { background: var(--c-accent); transform: scale(1.2); }
.how-step h3 {
  font-size: 22px; line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 500;
  margin: 0 0 14px 0; color: var(--c-near-black);
}
.how-step p {
  font-size: 14px; line-height: 1.55;
  color: var(--c-mid); margin: 0;
  max-width: 28ch;
}
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; border-left: 1px solid var(--c-light); border-top: 0; }
  .how-line { width: 1px; height: var(--progress, 0%); top: 0; left: 0; }
  .how-step { border-right: 0; border-bottom: 1px solid var(--c-light); padding: 28px 0 28px 28px; min-height: auto; }
  .how-step:last-child { border-bottom: 0; }
  .how-step:not(:first-child) { padding-left: 28px; }
}

/* Benefits — asymmetric grid */
.benefits {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--c-light);
  border: 1px solid var(--c-light);
}
.benefit {
  background: var(--c-bg);
  padding: 26px 28px 28px;
  position: relative;
  transition: background 240ms ease;
}
.benefit:hover { background: var(--c-white); }
.benefit .glyph {
  width: 28px; height: 28px;
  margin-bottom: 28px;
  color: var(--c-near-black);
}
.benefit h3 {
  font-size: 20px; letter-spacing: -0.015em;
  font-weight: 500; line-height: 1.25;
  margin: 0 0 10px 0; color: var(--c-near-black);
}
.benefit p {
  font-size: 14px; line-height: 1.55;
  color: var(--c-mid); margin: 0;
  max-width: 32ch;
}
.benefit .num {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-soft);
}
.benefit.large { grid-column: span 8; }
.benefit.med   { grid-column: span 4; }
.benefit.small { grid-column: span 4; }
.benefit.full  { grid-column: span 12; }
.benefit.full p { max-width: 56ch; }
@media (max-width: 900px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .benefit, .benefit.large, .benefit.med, .benefit.small { grid-column: span 1; }
}
@media (max-width: 600px) {
  .benefits { grid-template-columns: 1fr; }
}

/* Trust */
.trust {
  padding: clamp(80px, 10vw, 140px) 0;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  border-top: 1px solid var(--c-light);
}
.trust-item {
  grid-column: span 4;
  padding: 36px 24px 0 0;
  border-right: 1px solid var(--c-light);
}
.trust-item:nth-child(3n) { border-right: 0; }
.trust-item:nth-child(n+4) { padding-top: 36px; border-top: 1px solid var(--c-light); margin-top: 0; }
.trust-item .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-mid); margin-bottom: 28px;
  display: flex; align-items: center; gap: 8px;
}
.trust-item .num::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}
.trust-item h3 {
  font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
  margin: 0 0 10px 0; color: var(--c-near-black);
}
.trust-item p {
  font-size: 14px; line-height: 1.55; color: var(--c-mid);
  margin: 0; max-width: 30ch; padding-bottom: 36px;
}
.trust-item .glyph {
  width: 22px; height: 22px;
  color: var(--c-near-black);
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .trust-item { grid-column: span 6; }
  .trust-item:nth-child(3n) { border-right: 1px solid var(--c-light); }
  .trust-item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .trust-item { grid-column: span 12; border-right: 0 !important; }
}

/* Alternating section backgrounds */
.bg-a { background: #F7F7F5; }
.bg-b { background: #FFFFFF; }
.bg-b .benefit { background: #F7F7F5; }
.bg-b .benefits { background: var(--c-light); }
.bg-b .problem-card,
.bg-b .how-grid,
.bg-b .problem-grid { border-color: #D4D4D8; }
.bg-b .problem-card { border-right-color: #D4D4D8; }
.bg-b .how-step { border-right-color: #D4D4D8; }
.bg-b .trust-grid,
.bg-b .trust-item,
.bg-b .trust-item:nth-child(3n) { border-color: #D4D4D8; }
.bg-b .demo-chat,
.bg-b .demo-side,
.bg-b .demo-side-card { border-color: #D4D4D8; }
.bg-b .demo-side { background: #D4D4D8; }

/* AI demo */
.demo-wrap {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  align-items: start;
}
.demo-chat {
  grid-column: 1 / span 6;
  background: var(--c-white);
  border: 1px solid var(--c-light);
  border-radius: 8px;
  padding: 28px 28px 32px;
  min-height: 460px;
}
.demo-side {
  grid-column: 8 / span 5;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--c-light);
  border: 1px solid var(--c-light);
  border-radius: 8px; overflow: hidden;
}
@media (max-width: 1100px) {
  .demo-chat { grid-column: 1 / -1; }
  .demo-side { grid-column: 1 / -1; }
}

.demo-chat .chathead {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--c-light); margin-bottom: 22px;
}
.demo-chat .chathead .label-meta { display: flex; align-items: center; gap: 8px; }
.demo-chat .chathead .label-meta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}
.demo-chat .live { font-family: var(--font-mono); font-size: 11px; color: var(--c-mid); }

.demo-msgs { display: flex; flex-direction: column; gap: 14px; }
.demo-msg {
  max-width: 85%;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
  border-radius: 4px 14px 14px 14px;
  background: var(--c-bg); color: var(--c-near-black);
  opacity: 0; transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.demo-msg.me {
  background: var(--c-near-black); color: var(--c-white);
  align-self: flex-end;
  border-radius: 14px 4px 14px 14px;
}
.demo-msg.show { opacity: 1; transform: translateY(0); }
.demo-msg .who {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-mid); margin-bottom: 6px; display: block;
}
.demo-msg.me .who { color: rgba(255,255,255,0.55); }
.demo-typing {
  align-self: flex-start;
  padding: 14px 16px; background: var(--c-bg); border-radius: 4px 14px 14px 14px;
  display: inline-flex; gap: 4px;
}
.demo-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-soft);
  animation: blink 1.2s infinite;
}
.demo-typing span:nth-child(2) { animation-delay: .18s; }
.demo-typing span:nth-child(3) { animation-delay: .36s; }

.demo-side-card {
  background: var(--c-white);
  padding: 18px 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px;
  align-items: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.demo-side-card.show { opacity: 1; transform: translateY(0); }
.demo-side-card .key {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-mid); grid-column: 1 / -1;
}
.demo-side-card .val {
  font-size: 14.5px; color: var(--c-near-black); font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.3;
}
.demo-side-card .pct {
  font-family: var(--font-mono); font-size: 12px; color: var(--c-near-black);
  display: inline-flex; align-items: center; gap: 6px;
}
.demo-side-card .pct .pdot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }

/* CTA */
.cta-section {
  padding: clamp(96px, 12vw, 180px) 0;
  text-align: center;
}
.cta-section .label-meta { margin-bottom: 28px; }
.cta-headline {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 24px 0;
  max-width: 18ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
  color: #B3B3B3;
}
.cta-headline em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  color: #0F0F10;
}
.cta-headline em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 0.08em; background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.7, 0, 0.2, 1) 200ms;
}
.cta-headline em:nth-of-type(2)::after { transition-delay: 480ms; }
.cta-headline.played em::after { transform: scaleX(1); }
.cta-section p {
  font-size: 18px; color: var(--c-mid);
  max-width: 50ch; margin: 0 auto 36px;
  line-height: 1.5;
}
.cta-section .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-section .micro {
  margin-top: 18px;
  font-size: 12.5px; color: var(--c-soft);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* Footer */
.footer {
  background: var(--c-near-black);
  color: var(--c-soft);
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { grid-column: 1 / span 5; }
.footer-brand .wordmark { color: var(--c-white); margin-bottom: 16px; }
.footer-brand p {
  font-size: 14px; max-width: 40ch; line-height: 1.55;
  color: rgba(255,255,255,0.55); margin: 0;
}
.footer-col { grid-column: span 2; }
.footer-col.address { grid-column: span 3; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-soft);
  font-weight: 500; margin: 0 0 16px 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li { font-size: 13.5px; color: rgba(255,255,255,0.65); }
.footer-col a:hover { color: var(--c-white); }
.footer-col.address p { font-size: 13.5px; color: rgba(255,255,255,0.65); margin: 0 0 8px; line-height: 1.55; }
.footer-social {
  display: flex; align-items: center; gap: 8px;
}
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: rgba(255,255,255,0.7);
  border-radius: 999px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.footer-social-link:hover {
  color: var(--c-white);
  background-color: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.footer-social-link img {
  width: 26px; height: 26px; display: block;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.footer-social-link:hover img { opacity: 1; }
.footer-bot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding-top: 28px;
  font-size: 12px; color: var(--c-soft);
  font-family: var(--font-mono);
}
.footer-partner {
  display: inline-flex; align-items: center;
  margin-top: 20px;
  text-decoration: none;
  opacity: 0.85; transition: opacity 160ms ease;
}
.footer-partner:hover { opacity: 1; }
.footer-partner-logo {
  height: 64px; width: auto; display: block;
}
@media (max-width: 600px) {
  .footer-bot { flex-direction: column; gap: 18px; text-align: center; }
}
@media (max-width: 900px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 3; }
  .footer-col.address { grid-column: span 6; }
}
@media (max-width: 600px) {
  .footer-col, .footer-col.address { grid-column: span 6; }
}

/* Scroll progress */
.scroll-prog {
  position: fixed; left: 0; top: 0; height: 2px;
  background: var(--c-accent);
  z-index: 200;
  transform-origin: left;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transition: transform 80ms linear;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* Problem section — frosted glass cards over interior backdrop */
.section.problem-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #1a1814;
  background-image:
    linear-gradient(180deg, rgba(15,15,16,0.22) 0%, rgba(15,15,16,0.08) 45%, rgba(15,15,16,0.35) 100%),
    url("assets/problem-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: clamp(36px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.section.problem-section .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.section.problem-section .section-head .ttl { color: #F5F2EA; }
.section.problem-section .reveal-title .rch { color: rgba(245,242,234,0.16); }
.section.problem-section .reveal-title.play .rch { color: var(--end, #F5F2EA); }

.glass-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 32px;
  min-height: 0;
  justify-items: center;
}
.glass-card {
  --notch-x: 75%;
  --notch-r: 26px;
  --enter-y: 0px;
  --hover-y: 0px;
  --hover-s: 1;
  --mx: 30%;
  --my: 20%;
  position: relative;
  width: 100%;
  max-width: 240px;
  border-radius: 22px;
  padding: 24px 18px;
  min-height: 180px;
  color: #F5F2EA;
  transform: translateY(var(--enter-y)) translateY(var(--hover-y)) scale(var(--hover-s));
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  background:
    /* top sheen */
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 22%, rgba(255,255,255,0) 38%),
    /* corner highlight — top-left brighter */
    radial-gradient(130% 70% at 0% 0%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 55%),
    /* lower-right softly darker for thickness */
    radial-gradient(120% 90% at 100% 100%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 55%),
    /* base translucent fill — milky cream */
    linear-gradient(180deg, rgba(255,250,240,0.13) 0%, rgba(255,250,240,0.05) 50%, rgba(255,250,240,0.10) 100%);
  backdrop-filter: blur(22px) saturate(175%) brightness(112%) url(#glass-distortion);
  -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(112%);
  box-shadow:
    /* top inner hairline (sheen edge) */
    inset 0 1px 0 rgba(255,255,255,0.34),
    /* lower inner shadow for depth */
    inset 0 -28px 60px rgba(0,0,0,0.14),
    /* contact shadow */
    0 6px 8px -2px rgba(0,0,0,0.18),
    /* ambient drop */
    0 14px 32px -14px rgba(0,0,0,0.38),
    /* diffuse halo */
    0 0 24px rgba(0,0,0,0.10),
    0 26px 70px -18px rgba(0,0,0,0.30);
}
.glass-card:hover {
  --hover-y: -3px;
  --hover-s: 1.018;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    inset 0 -28px 60px rgba(0,0,0,0.16),
    0 6px 10px -2px rgba(0,0,0,0.22),
    0 22px 44px -16px rgba(0,0,0,0.44),
    0 0 36px rgba(0,0,0,0.14),
    0 40px 90px -22px rgba(0,0,0,0.34);
}
.glass-card:active {
  --hover-s: 0.992;
  --hover-y: -1px;
  transition-duration: 180ms;
}
/* Pointer-following soft specular */
.glass-shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(200px 150px at var(--mx) var(--my), rgba(255,255,255,0.20), rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}
.glass-card:hover .glass-shine { opacity: 1; }

/* Specular highlight sweep — curved polished-glass reflection across top */
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* diagonal sheen across upper portion */
    linear-gradient(115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0.18) 40%,
      rgba(255,255,255,0.06) 50%,
      rgba(255,255,255,0) 62%),
    /* upper-left bloom */
    radial-gradient(70% 50% at 12% 8%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
}
/* Polished reflective rim — luminous top arc + dual hairline */
.glass-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* top luminous arc — thicker glass at top */
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 88%, rgba(255,255,255,0.08) 100%),
    /* corner glint */
    radial-gradient(40% 28% at 6% 4%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 0 0 2px rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.10);
  transition: box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.glass-card:hover::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.34),
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}

.glass-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.glass-title {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: #F5F2EA;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.glass-title span {
  display: block;
  white-space: nowrap;
}
.glass-sub {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(245,242,234,0.78);
  margin: 0;
  max-width: 64%;
  text-wrap: pretty;
}

/* Asymmetric placement */
.glass-c1 { grid-column: 1; grid-row: 1; }
.glass-c2 { grid-column: 2; grid-row: 1; }
.glass-c3 { grid-column: 1; grid-row: 2; }
.glass-c4 { grid-column: 3; grid-row: 2; }
.glass-c5 { grid-column: 4; grid-row: 2; }

@media (max-width: 1100px) {
  .glass-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; min-height: 0; gap: 28px; }
  .glass-card { min-height: 160px; }
  .glass-c1, .glass-c2, .glass-c3, .glass-c4, .glass-c5 { grid-column: auto; grid-row: auto; --enter-y: 0px !important; }
  .glass-c5 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .glass-grid { grid-template-columns: 1fr; }
  .glass-c5 { grid-column: 1; }
  .glass-card { padding: 20px 16px; min-height: 150px; }
  .glass-sub { max-width: 84%; }
}


/* Glass card entrance animation */
.glass-grid .glass-card {
  opacity: 0;
  filter: blur(14px);
  transition:
    opacity 900ms cubic-bezier(.2,.8,.2,1) var(--gd, 0ms),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(.2,.8,.2,1) var(--gd, 0ms),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
.glass-grid.play .glass-card { opacity: 1; filter: blur(0); }

/* Entrance offsets and final play offsets — fed through --enter-y so hover transforms stack */
.glass-grid .glass-c1 { --enter-y: 40px; }
.glass-grid .glass-c2 { --enter-y: 54px; }
.glass-grid .glass-c3 { --enter-y: 60px; }
.glass-grid .glass-c4 { --enter-y: 48px; }
.glass-grid .glass-c5 { --enter-y: 70px; }
.glass-grid.play .glass-c1 { --enter-y: 0px; }
.glass-grid.play .glass-c2 { --enter-y: 14px; }
.glass-grid.play .glass-c3 { --enter-y: 20px; }
.glass-grid.play .glass-c4 { --enter-y: 8px; }
.glass-grid.play .glass-c5 { --enter-y: 30px; }

@media (max-width: 1100px) {
  .glass-grid.play .glass-c1,
  .glass-grid.play .glass-c2,
  .glass-grid.play .glass-c3,
  .glass-grid.play .glass-c4,
  .glass-grid.play .glass-c5 { --enter-y: 0px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-grid .glass-card { transition: none; opacity: 1; filter: none; }
  .glass-card:hover { --hover-y: 0px; --hover-s: 1; }
  .glass-shine { display: none; }
}


/* Featured benefit card — hover reveals image, underline draws, arrow slides in */
.benefit-featured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.benefit-featured .benefit-content {
  position: relative;
  z-index: 2;
  transition: color 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-featured .benefit-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-kitchen.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transform: scale(1.02);
  transition:
    clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.benefit-featured:hover .benefit-image {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transform: scale(1.0);
}
.benefit-featured:hover { background: var(--c-bg); }

/* Title + underline */
.benefit-featured h3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.benefit-featured .benefit-underline {
  display: block;
  width: 64px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}
.benefit-featured:hover .benefit-underline { transform: scaleX(1); }

/* Right-side arrow */
.benefit-featured .benefit-arrow {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 44px;
  height: auto;
  color: var(--c-near-black);
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    color 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.benefit-featured:hover .benefit-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Hover: shift text to readable on photo */
.benefit-featured:hover .glyph,
.benefit-featured:hover h3,
.benefit-featured:hover .benefit-arrow { color: #FFFFFF; }
.benefit-featured:hover p { color: rgba(255,255,255,0.88); }
.benefit-featured .glyph,
.benefit-featured h3,
.benefit-featured p { transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .benefit-featured .benefit-image,
  .benefit-featured .benefit-underline,
  .benefit-featured .benefit-arrow,
  .benefit-featured .glyph,
  .benefit-featured h3,
  .benefit-featured p { transition: none; }
}


/* Per-card image override for featured benefits */
.benefit-featured.benefit-img-bedroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-bedroom.png");
}

.benefit-featured.benefit-img-bathroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-bathroom.png");
}

.benefit-featured.benefit-img-living .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-living.png");
}

.benefit-featured.benefit-img-openplan .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-openplan.png");
}

.benefit-featured.benefit-img-foyer .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%),
    url("assets/value-foyer.png");
}


/* ─── Hero editorial photo ─────────────────────────────────────────── */
.hero-editorial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  animation: fade 900ms ease 200ms forwards;
}
.hero-editorial image-slot {
  width: 100%;
  height: auto;
  min-height: 520px;
  aspect-ratio: 4 / 5;
  display: block;
  border: 1px solid var(--c-light);
  border-radius: 6px;
  background: #EFEEEA;
  filter: grayscale(0.18) contrast(1.02);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 24px 60px -28px rgba(0,0,0,0.16);
}
.hero-editorial-caption {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mid);
}
.hero-editorial-caption .rule {
  width: 32px; height: 1px; background: var(--c-near-black);
}

/* ─── CTA underline animation already wired via .cta-headline em ──── */
/* The accent underline is provided by existing rule .cta-headline em::after.
   Add a slight glow rest state and ensure 'confiança' span gets it. */
.cta-headline em {
  font-style: normal;
  white-space: nowrap;
}
.cta-headline em::after {
  height: 0.10em;
}

/* ─── Demo section — tighten chat head, drop WhatsApp-y feel ───────── */
.demo-chat .chathead .label-meta { text-transform: uppercase; letter-spacing: 0.10em; }
.demo-chat .live { letter-spacing: 0.08em; text-transform: uppercase; }

/* Spacing: hero → how is now adjacent; give a touch of air */
.hero { padding-bottom: clamp(72px, 8vw, 120px); }
.section.bg-a#how { padding-top: clamp(72px, 8vw, 120px); }

/* ─── Value section — bottom-to-top wipe hover ───────────────────────
   Calm, cinematic reveal: image clip-paths from bottom→top, underline
   draws left→right, arrow fades + slides in from the right.
   Easing: cubic-bezier(0.22, 1, 0.36, 1) at ~550–700ms.
─────────────────────────────────────────────────────────────────────── */

.benefit-featured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.benefit-featured .benefit-content {
  position: relative;
  z-index: 2;
}

/* The attached image layer — sits behind content, revealed by clip-path */
.benefit-featured .benefit-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  transform: scale(1.02);
  transition:
    -webkit-clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1),
            clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: clip-path, transform;
}
.benefit-featured:hover .benefit-image {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  transform: scale(1.0);
}

/* Per-card backgrounds with a soft white veil overlaid for legibility */
.benefit-featured.benefit-img-bedroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-bedroom.png");
}
.benefit-featured.benefit-img-bathroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-bathroom.png");
}
.benefit-featured.benefit-img-living .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-living.png");
}
.benefit-featured.benefit-img-openplan .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-openplan.png");
}
.benefit-featured.benefit-img-foyer .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.40) 100%),
    url("assets/value-foyer.png");
}
.benefit-featured.benefit-img-kitchen .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%),
    url("assets/value-kitchen.png");
}
/* Card 01 has no image — fall back to solid cream */
.benefit-featured:not([class*="benefit-img-"]) .benefit-image {
  background-image: none;
  background-color: #EFEEEA;
}

/* Title + underline */
.benefit-featured h3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.benefit-featured .benefit-underline {
  display: block;
  width: 72px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}
.benefit-featured:hover .benefit-underline {
  transform: scaleX(1);
}

/* Right-side arrow — fades + slides in from the right */
.benefit-featured .benefit-arrow {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 44px;
  height: auto;
  color: var(--c-near-black);
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    color 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.benefit-featured:hover .benefit-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Text colour shift: dark at rest, white when the image is revealed */
.benefit-featured .glyph,
.benefit-featured h3,
.benefit-featured p,
.benefit-featured .benefit-arrow {
  transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-featured:hover .glyph,
.benefit-featured:hover h3,
.benefit-featured:hover .benefit-arrow { color: #FFFFFF; }
.benefit-featured:hover p,
.benefit-featured:hover .benefit-extra { color: rgba(255,255,255,0.92); }

/* Extra paragraph stays static — visible at rest, colour follows on hover */
.benefit-extra {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-mid);
  margin: 6px 0 0 0;
  max-width: 56ch;
}

/* Value section headline — primary near-black + softer secondary */
#benefits .section-head .ttl,
#benefits .reveal-title.play .rch { color: var(--end, #0F0F10); }

@media (prefers-reduced-motion: reduce) {
  .benefit-featured .benefit-image,
  .benefit-featured .benefit-underline,
  .benefit-featured .benefit-arrow,
  .benefit-featured .glyph,
  .benefit-featured h3,
  .benefit-featured p { transition: none; }
}



/* ─── Blog section — cinematic horizontal accordion ─────────────────── */
.blog-section {
  background: #FFFFFF;
  color: #0F0F10;
  padding: clamp(96px, 11vw, 160px) 0;
  position: relative;
}
.blog-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: clamp(56px, 7vw, 92px);
  max-width: 760px;
}
.blog-title {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -2px;
  font-weight: 600;
  margin: 0;
  color: var(--c-near-black);
  text-wrap: balance;
  max-width: 22ch;
}

/* The accordion row */
.blog-row {
  display: flex;
  gap: 22px;
  height: clamp(420px, 56vw, 560px);
  align-items: stretch;
}
.blog-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #0c0e0d;
  cursor: pointer;
  isolation: isolate;
  transition: flex-grow 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-row.has-active .blog-card { flex-grow: 1; }
.blog-row .blog-card.is-active { flex-grow: 1.65; }

/* Image layer */
.blog-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 550ms ease;
  filter: saturate(0.92) brightness(0.96);
  z-index: 1;
}
.blog-card.is-active .blog-card-img {
  transform: scale(1.06);
  filter: saturate(1.0) brightness(1.02);
}

/* Dark overlay — restraint for the text */
.blog-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
  transition: background 550ms ease, opacity 550ms ease;
}
.blog-card.is-active .blog-card-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
}

/* Content — title top-left, button bottom-left, excerpt revealed mid */
.blog-card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 32px 32px 32px;
  color: #FFFFFF;
}
.blog-card-top { display: flex; flex-direction: column; gap: 14px; max-width: 42ch; }
.blog-card-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.blog-card-title {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.6px;
  font-weight: 600;
  margin: 0;
  color: #FFFFFF;
  text-wrap: balance;
}
.blog-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.blog-card-excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 44ch;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.blog-card.is-active .blog-card-excerpt {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease 140ms, transform 320ms ease 140ms;
}

/* Pill button — outlined transparent */
.blog-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
  background: rgba(255,255,255,0.02);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition:
    border-color 250ms ease,
    background 250ms ease,
    transform 250ms ease;
}
.blog-card-btn:hover,
.blog-card.is-active .blog-card-btn {
  border-color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
}
.blog-card-arrow {
  width: 22px;
  height: 10px;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card-btn:hover .blog-card-arrow,
.blog-card.is-active .blog-card-btn .blog-card-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .blog-row { flex-direction: column; height: auto; gap: 14px; }
  .blog-card { height: 320px; flex: none; }
  .blog-row .blog-card.is-active { flex: none; }
  .blog-card-excerpt {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card-img,
  .blog-card-overlay,
  .blog-card-excerpt,
  .blog-card-btn,
  .blog-card-arrow { transition: none !important; }
  .blog-card-excerpt { opacity: 1; transform: none; }
}


/* ─── Hero with full-bleed background image ─────────────────────────── */
.hero.hero-bg {
  padding: 0;
  min-height: clamp(640px, 92vh, 920px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #1a1410;
}
.hero.hero-bg .hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/hero-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: heroBgIn 1600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  opacity: 0;
}
@keyframes heroBgIn {
  0%   { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1.0); }
}
.hero.hero-bg .hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* left vignette deepens the already-shadowed wall for headline legibility */
    linear-gradient(90deg,
      rgba(20,12,4,0.55) 0%,
      rgba(20,12,4,0.38) 24%,
      rgba(20,12,4,0.18) 48%,
      rgba(20,12,4,0.02) 70%,
      rgba(20,12,4,0) 100%),
    /* gentle bottom fade */
    linear-gradient(180deg,
      rgba(20,12,4,0.10) 0%,
      rgba(20,12,4,0) 35%,
      rgba(20,12,4,0) 72%,
      rgba(20,12,4,0.18) 100%);
}
.hero.hero-bg .hero-bg-inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: stretch;
  padding-top: clamp(80px, 9vw, 128px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.hero.hero-bg .hero-content-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.hero.hero-bg .hero-ctas {
  margin-top: auto;
}
.hero-content-overlay {
  grid-column: auto;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 247, 234, 0.78);
  margin-bottom: clamp(20px, 2vw, 28px);
  opacity: 0;
  animation: fade 800ms ease 180ms forwards;
}
.hero-eyebrow-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 247, 234, 0.55);
  display: inline-block;
}
.headline-light {
  color: #FFF7EA;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25);
}
.hero-sub-light {
  color: rgba(255, 247, 234, 0.85);
  max-width: 540px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.30);
}
.hero.hero-bg .hero-sub {
  margin-bottom: clamp(36px, 4vw, 56px);
}
.hero.hero-bg .btn-pill {
  background: #FFF7EA;
  color: #15110D;
}
.hero.hero-bg .btn-pill:hover { background: #FFF7EA; }
.hero.hero-bg .btn-pill .pill-arrow { color: #15110D; }

@media (max-width: 760px) {
  .hero.hero-bg .hero-bg-image {
    background-position: 70% center;
  }
  .hero.hero-bg .hero-bg-scrim {
    background:
      linear-gradient(180deg,
        rgba(12,8,4,0.20) 0%,
        rgba(12,8,4,0.45) 45%,
        rgba(12,8,4,0.80) 100%),
      linear-gradient(90deg,
        rgba(12,8,4,0.45) 0%,
        rgba(12,8,4,0.30) 60%,
        rgba(12,8,4,0.15) 100%);
  }
  .hero.hero-bg .hero-bg-inner {
    align-items: flex-end;
  }
}


/* ─── Shared-element wordmark: hero → header ───────────────────────── */
/* The header's own wordmark stays in the layout to reserve the slot but
   is visually hidden. The floating wordmark is rendered above everything
   and animates between the hero anchor (large, just under nav) and the
   header anchor (small, in the nav row). */
.hdr .wordmark.wordmark-slot {
  visibility: hidden;
  pointer-events: none;
}

.brand-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  pointer-events: none;
}
.brand-stage > .container {
  position: relative;
  height: 0;
}
.brand-float {
  position: absolute;
  top: clamp(112px, 9.5vw, 148px);          /* hero state — below the nav */
  left: var(--gutter);
  transform-origin: left center;
  transform: scale(1);
  pointer-events: auto;
  will-change: transform, top;
  transition:
    top 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.brand-float-img {
  height: 40px;                              /* hero state height */
  width: auto;
  display: block;
}
.brand-float.is-collected {
  top: 22px;                                 /* centred in the 76px header */
  transform: scale(0.8);                     /* effective height = 32px */
}

@media (prefers-reduced-motion: reduce) {
  .brand-float { transition: none; }
}

/* Give the hero enough headroom for the resting logo so the headline
   never collides with the floating wordmark. */
.hero.hero-bg .hero-bg-inner {
  padding-top: clamp(118px, 10vw, 162px);
}


/* ─── Promise — brand manifesto between How it works and Diferenciais ─ */
.promise-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 78vh, 820px);
  background: #0e0a06;
  color: #FFF7EA;
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vw, 180px) 0;
}
.promise-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/value-kitchen.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  filter: saturate(0.95) contrast(1.02);
}
.promise-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8,5,2,0.72) 0%,
      rgba(8,5,2,0.55) 26%,
      rgba(8,5,2,0.32) 50%,
      rgba(8,5,2,0.08) 78%,
      rgba(8,5,2,0) 100%),
    linear-gradient(180deg,
      rgba(8,5,2,0.20) 0%,
      rgba(8,5,2,0) 30%,
      rgba(8,5,2,0) 70%,
      rgba(8,5,2,0.28) 100%);
}
.promise-inner {
  position: relative;
  z-index: 2;
}
.promise-content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.promise-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 247, 234, 0.72);
  margin-bottom: clamp(28px, 3vw, 40px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1) 80ms,
              transform 700ms cubic-bezier(.2,.8,.2,1) 80ms;
}
.promise-content.played .promise-eyebrow { opacity: 1; transform: translateY(0); }
.promise-eyebrow-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 247, 234, 0.55);
  display: inline-block;
}
.promise-title {
  font-size: clamp(44px, 6.8vw, 96px);
  line-height: 1.0;
  letter-spacing: -2px;
  font-weight: 600;
  margin: 0 0 clamp(28px, 3.2vw, 44px) 0;
  color: #FFF7EA;
  text-wrap: balance;
  white-space: pre-line;
  text-shadow: 0 1px 32px rgba(0,0,0,0.20);
}
.promise-section .reveal-title .rch { color: rgba(255, 247, 234, 0.14); }
.promise-section .reveal-title.play .rch { color: var(--end, #FFF7EA); }
.promise-body {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: rgba(255, 247, 234, 0.86);
  margin: 0;
  max-width: 56ch;
  text-shadow: 0 1px 18px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1) 480ms,
              transform 800ms cubic-bezier(.2,.8,.2,1) 480ms;
}
.promise-content.played .promise-body { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .promise-image { background-position: 70% center; }
}


/* ─── Benefit cards — light image overlay, dark text on hover ──────── */
/* Replace the dark-veil gradient on the photo reveal with a light cream
   veil so the black/grey copy stays legible. Per-card backgrounds. */
.benefit-featured.benefit-img-bedroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-bedroom.png");
}
.benefit-featured.benefit-img-bathroom .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-bathroom.png");
}
.benefit-featured.benefit-img-living .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-living.png");
}
.benefit-featured.benefit-img-openplan .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-openplan.png");
}
.benefit-featured.benefit-img-foyer .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-foyer.png");
}
.benefit-featured.benefit-img-kitchen .benefit-image {
  background-image:
    linear-gradient(180deg, rgba(255,250,240,0.70) 0%, rgba(255,250,240,0.84) 100%),
    url("assets/value-kitchen.png");
}

/* Hover — keep icon, title and body copy dark for contrast */
.benefit-featured:hover .glyph,
.benefit-featured:hover h3,
.benefit-featured:hover .benefit-title-text { color: var(--c-near-black); }
.benefit-featured:hover p { color: var(--c-dark); }
.benefit-featured:hover .benefit-extra { color: var(--c-dark); }
.benefit-featured:hover .benefit-underline { background: var(--c-near-black); }

/* Subtitle reveal — mirrors the underline draw (left→right) */
.benefit-featured .benefit-extra {
  display: block;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition:
    -webkit-clip-path 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
            clip-path 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
    max-height 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
    margin-top 500ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
    color 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-featured:hover .benefit-extra {
  opacity: 1;
  max-height: 12em;
  margin-top: 10px;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .benefit-featured .benefit-extra {
    transition: none;
    opacity: 1;
    max-height: none;
    margin-top: 10px;
    clip-path: none;
    -webkit-clip-path: none;
  }
}


/* ─── Benefit cards — reveal ALL text on hover, reserve space from start ─── */
/* Both the main description (<p>) and the secondary copy (.benefit-extra)
   stay in the layout at all times so the card height never jumps. They are
   hidden at rest (opacity 0 + clip-path inset) and wiped in from the left
   on hover, matching the underline's easing/timing. */

.benefit-featured .benefit-content > p:not(.benefit-extra),
.benefit-featured .benefit-extra {
  opacity: 0;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition:
    -webkit-clip-path 500ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
            clip-path 500ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
    color 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-featured .benefit-extra {
  /* Slight stagger so the secondary copy lands just after the main one */
  transition-delay: 180ms, 180ms, 160ms, 0ms;
}

.benefit-featured:hover .benefit-content > p:not(.benefit-extra),
.benefit-featured:hover .benefit-extra {
  opacity: 1;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

/* Override the earlier collapse rule on benefit-extra — keep its space reserved */
.benefit-featured .benefit-extra {
  display: block;
  max-height: none;
  margin-top: 10px;
}
.benefit-featured:hover .benefit-extra { max-height: none; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .benefit-featured .benefit-content > p:not(.benefit-extra),
  .benefit-featured .benefit-extra {
    transition: none;
    opacity: 1;
    clip-path: none;
    -webkit-clip-path: none;
  }
}