/* allheard.ai marketing — site-level CSS on top of the design system.
   The DS tokens/components own all colour/type/space; this file only adds the
   page-furniture helpers the UI kit's index.html declared (.site/.link), the
   photography frames, the contact form layout, and the motion (reveals, sticky
   header, smooth scroll) — every value a DS token. Marketing is always light. */

/* Kit helpers (from design/index.html) */
.site{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter-lg); }
.link{ font:var(--type-ui); color:var(--text-secondary); text-decoration:none; cursor:pointer; }
.link:hover{ color:var(--text-primary); }
.ph{ background:var(--surface-sunken); border-radius:var(--radius-lg); display:grid; place-items:center; color:var(--text-muted); font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase; text-align:center; padding:20px; }

@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
:where(section[id],div[id]){ scroll-margin-top:88px; }

/* Photography frames — warm editorial imagery inside a DS card radius. */
.ah-photo{ border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-sunken); border:1px solid var(--border-hairline); }
.ah-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Sticky header gains a soft blur once scrolled (kit already draws the hairline). */
.ah-site-header{ transition:background var(--duration-base) var(--ease-out); }
.ah-site-header.is-scrolled{
  background:color-mix(in srgb, var(--surface-page) 82%, transparent);
  -webkit-backdrop-filter:saturate(120%) blur(12px);
  backdrop-filter:saturate(120%) blur(12px);
}

/* Scroll reveals — gated on .js so no-JS visitors see everything at once. */
.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity var(--duration-slow) var(--ease-entrance),
             transform var(--duration-slow) var(--ease-entrance);
  transition-delay:calc(var(--i,0) * 60ms);
  will-change:opacity,transform;
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* Contact form */
.ah-contact-form{ display:grid; gap:var(--space-5); max-width:var(--container-narrow); }
@media (min-width:640px){ .ah-contact-form .ah-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); } }
.ah-note{ border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); font:var(--type-body); }
.ah-note--success{ background:var(--status-success-tint); color:var(--status-success); border:1px solid var(--status-success); }
.ah-note--danger{ background:var(--status-danger-tint); color:var(--status-danger); border:1px solid var(--status-danger); }
.ah-note a{ color:inherit; text-decoration-color:currentColor; font-weight:var(--weight-semibold); }
/* Message textarea, matched to the DS Input look (no DS Textarea component). */
.ah-field{ display:grid; gap:var(--space-2); }
.ah-field > label{ font:var(--type-ui-strong); color:var(--text-primary); }
.ah-textarea{ width:100%; min-height:120px; padding:var(--pad-control-y) var(--pad-control-x); font:var(--type-body); color:var(--text-primary); background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-lg); resize:vertical; line-height:var(--leading-body); }
.ah-textarea::placeholder{ color:var(--text-disabled); }
.ah-textarea:hover{ border-color:var(--border-focus); }
.ah-textarea[aria-invalid="true"]{ border-color:var(--status-danger); }
.ah-field__error{ font:var(--type-caption); color:var(--status-danger); min-height:1em; }

/* Live-caption demo: fixed height so the streaming text never reflows the page
   (was yanking scroll on mobile as captions cycled). Captions swap inside it. */
.ah-caption-box{ height:186px; overflow:hidden; }
@media (max-width:680px){ .ah-caption-box{ height:242px; } }

/* Marketing-consent checkbox — token-styled (ink accent; red stays reserved). */
.ah-consent{ display:flex; gap:var(--space-3); align-items:flex-start; max-width:var(--container-narrow); }
.ah-consent__box{ inline-size:20px; block-size:20px; margin-top:2px; flex:none; accent-color:var(--chalk-900); cursor:pointer; }
.ah-consent__text{ font:var(--type-caption); color:var(--text-muted); line-height:var(--leading-body); cursor:pointer; }
.ah-consent__text a{ color:var(--text-secondary); text-decoration-color:var(--chalk-400); }

/* ===== Texture & premium detail =====
   The DS defaults to flat colour; per founder direction the site gets a warm
   film grain, the three language hues as a signature gradient accent, treated
   photography and oversized decorative numerals. CSS-first, no libraries. */

/* Fine warm film grain over the whole page — static, non-interactive. */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  mix-blend-mode:multiply; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Language-spectrum accent — EN/ES/PT hues, the product's signature. */
.ah-lang-rule{ height:5px; width:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--lang-8),var(--lang-1) 52%,var(--lang-2)); }

/* Photography: warm bottom scrim + subtle life on hover, not a plain rectangle. */
.ah-photo{ position:relative; }
.ah-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, color-mix(in srgb, var(--chalk-900) 26%, transparent), transparent 50%); }
.ah-photo img{ transition:transform var(--duration-slow) var(--ease-out); }
@media (hover:hover){ .ah-photo:hover img{ transform:scale(1.045); } }

/* Oversized decorative numeral watermark inside step cards. */
.ah-step-num{ position:absolute; top:-14px; right:4px; z-index:0; font-family:var(--font-display); font-weight:var(--weight-black); font-size:104px; line-height:1; letter-spacing:-.045em; color:var(--surface-sunken); pointer-events:none; user-select:none; }
.ah-step-body{ position:relative; z-index:1; }

/* Card grids gain a quiet lift on hover (transform only — DS forbids border+shadow). */
@media (hover:hover){
  .ah-hovercards > *{ transition:transform var(--duration-base) var(--ease-out); }
  .ah-hovercards > *:hover{ transform:translateY(-3px); }
}

@media (prefers-reduced-motion:reduce){
  .ah-photo:hover img{ transform:none; }
  .ah-hovercards > *:hover{ transform:none; }
}

/* ---- Responsive polish ----
   The kit lays every grid out with inline `grid-template-columns`, on the .site
   element itself (hero, stat band, footer) or on a descendant (cards). Both forms
   are matched below and collapsed for phones. Hero stacks earlier (tablet too). */

/* Hero stacks on tablet portrait and phones; the 5-vertical nav (too wide to fit
   with the logo + Sign in + CTA below ~900px) collapses to the footer nav here. */
@media (max-width:900px){
  .ah-hero-grid{ grid-template-columns:1fr !important; gap:var(--space-10) !important; }
  .ah-nav{ display:none !important; }              /* verticals stay reachable via the footer + home rooms grid */
}

/* Phone (≤680): single column everywhere, tighter rhythm. */
@media (max-width:680px){
  :root{ --section-y:56px; --section-y-lg:68px; --gutter:20px; --gutter-lg:20px; }
  .site[style*="grid-template-columns"],
  .site [style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:var(--space-6) !important; }
  .ah-headrow{ gap:var(--space-3) !important; }
  .ah-footer-bottom{ flex-wrap:wrap; gap:var(--space-3); }
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}