/* =========================================================
   STAFFO — Ultra-minimal editorial landing page
   Design system: Ink #121214 · Paper #FAFAF7 · Orange #EA5814 (ONE accent)
   Type: Space Grotesk (display) · Inter (body) · JetBrains Mono (labels)
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* color */
  --ink: #F2F0EA;             /* primary text on dark */
  --paper: #0F0F12;           /* page background (near-black) */
  --surface: #17171B;         /* cards / mockups */
  --orange: #EA5814;          /* fills + large display only */
  --orange-text: #FF7847;     /* small/normal-size orange text — AA on dark */
  --orange-on-soft: #FFA37E;  /* small orange text on --orange-soft — AA */
  --orange-soft: rgba(234, 88, 20, 0.16);
  --grey-900: #ECEAE4;
  --grey-700: #B7B5AE;        /* secondary body text */
  --grey-500: #918F88;        /* labels */
  --grey-400: #6E6C66;        /* decorative only (dots, separators) */
  --grey-300: #3F3F46;
  --grey-200: #2A2A30;
  --grey-100: #1D1D22;
  --line: rgba(242, 240, 234, 0.09);
  --line-strong: rgba(242, 240, 234, 0.22);

  /* type scale (fluid) */
  --fs-eyebrow: 0.72rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-lead: clamp(1.12rem, 1rem + 0.7vw, 1.5rem);
  --fs-h3: clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-h2: clamp(2.4rem, 1.4rem + 4.4vw, 5.4rem);
  --fs-h1: clamp(3rem, 1.2rem + 8.2vw, 9rem);

  /* spacing */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1280px;
  --section-y: clamp(4.25rem, 8vw, 8.5rem);

  /* radius */
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- FONT FALLBACK (cuts H1 reflow / CLS while Space Grotesk swaps in) ---------- */
@font-face {
  font-family: "Grotesk Fallback";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--orange); color: #fff; }

/* Ambient orange glow — own fixed compositor layer (no repaint on scroll) */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 4% 38%, rgba(234,88,20,0.09), transparent 60%),
    radial-gradient(46vw 46vw at 98% 64%, rgba(234,88,20,0.11), transparent 60%),
    radial-gradient(34vw 34vw at 60% 95%, rgba(234,88,20,0.07), transparent 62%);
  transform: translateZ(0);
}

/* ---------- GRAIN / PAPER TEXTURE ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

/* Robust anchor offset so fixed nav never clips section titles
   (covers reduced-motion / direct deep-link loads where JS offset isn't used) */
:where(section[id], [id]) { scroll-margin-top: 6.5rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; border-radius: var(--r-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- TYPOGRAPHY PRIMITIVES ---------- */
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--orange);
}
.eyebrow--light { color: rgba(18,18,20,0.55); }
.eyebrow--light::before { background: var(--orange); }

.accent { color: var(--orange); }

.section__head { max-width: 46ch; margin-bottom: clamp(1.9rem, 3.6vw, 3.1rem); }
.section__title {
  font-family: "Space Grotesk", "Grotesk Fallback", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.section__lead {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--grey-700);
  line-height: 1.45;
  max-width: 40ch;
}

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.85rem 1.35rem;
  border-radius: 100px;
  transition: transform 0.5s var(--ease-soft), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
  will-change: transform;
}
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  transition: transform 0.5s var(--ease-soft), background-color 0.4s var(--ease);
}
.btn__icon svg { width: 14px; height: 14px; }

.btn--solid { background: var(--orange); color: #fff; }
.btn--solid .btn__icon { background: rgba(255,255,255,0.30); }
.btn--solid .btn__icon svg { stroke-width: 1.7; }
.btn--solid:hover { background: #d54e0f; }
.btn--solid:hover .btn__icon { transform: translate(3px, -1px); background: rgba(255,255,255,0.42); }
.btn--solid:active { transform: scale(0.97); }

.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--outline .btn__icon { background: var(--grey-100); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline:hover .btn__icon { transform: translate(3px, -1px); }
.btn--outline:active { transform: scale(0.97); }

.btn--ghost { background: transparent; color: #121214; box-shadow: inset 0 0 0 1.5px rgba(18,18,20,0.3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(18,18,20,0.65); }
.btn--ghost:active { transform: scale(0.97); }

/* ---------- CARD (double-bezel base) ---------- */
.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 1px 2px rgba(18,18,20,0.03),
    0 18px 40px -28px rgba(18,18,20,0.22);
  border: 1px solid var(--line);
  transition: transform 0.6s var(--ease-soft), box-shadow 0.6s var(--ease-soft);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 1px 2px rgba(18,18,20,0.04),
    0 30px 60px -30px rgba(18,18,20,0.28);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: clamp(0.9rem, 2vw, 1.5rem);
  transition: padding 0.5s var(--ease);
}
.nav__inner {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  background: rgba(15,15,18,0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 10px 30px -20px rgba(18,18,20,0.3);
  transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease);
}
.nav.is-scrolled .nav__inner { box-shadow: 0 14px 40px -22px rgba(18,18,20,0.4); background: rgba(15,15,18,0.86); }

.nav__brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em;
}
.nav__dot { color: var(--orange); }

.nav__links { display: flex; gap: 2rem; }
.nav__link {
  font-size: 0.92rem; color: var(--grey-700); position: relative; padding-block: 0.2rem;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--orange);
  transition: width 0.4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: 100%; }

.nav__cta { padding: 0.7rem 0.7rem 0.7rem 1.2rem; }

.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 12px; width: 20px; height: 1.6px; background: var(--ink); border-radius: 2px;
  transition: transform 0.45s var(--ease-soft), opacity 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 19px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(13,13,16,0.94);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 1.5rem; text-align: center; }
.mobile-menu__link {
  font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 2rem; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu__link--cta { color: var(--orange); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(6.75rem, 15vh, 10rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__wash {
  position: absolute; top: -20%; right: -10%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at center, rgba(234,88,20,0.18), rgba(234,88,20,0) 62%);
  pointer-events: none; z-index: 0; will-change: transform;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__copy { max-width: 38ch; }

.hero__title {
  font-family: "Space Grotesk", "Grotesk Fallback", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 1.8rem;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__title .word { display: inline-block; will-change: transform; }
.hero__title .accent { position: relative; }

/* hand-drawn underline */
.underline {
  position: absolute; left: -2%; right: -2%; bottom: -0.10em; height: 0.10em;
  background: var(--orange); border-radius: 100px; transform-origin: left center;
  transform: scaleX(0);
}

.hero__sub {
  font-size: var(--fs-lead); color: var(--grey-700); line-height: 1.45; margin-bottom: 2.2rem; max-width: 36ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; }
.hero__phone { font-size: 0.9rem; color: var(--grey-700); margin-bottom: 1rem; }
.hero__phone a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.hero__phone a:hover { color: var(--orange-text); }
.hero__trust { color: var(--grey-500); }

/* live call card */
.hero__mock { position: relative; z-index: 1; will-change: transform; }
.callcard {
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(18,18,20,0.4), 0 2px 6px rgba(18,18,20,0.04);
  max-width: 440px; margin-inline: auto;
}
.callcard__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--grey-100);
}
.callcard__live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.callcard__live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(234,88,20,0.5); animation: pulse 1.8s infinite; }
.callcard__time { color: var(--grey-500); font-size: 0.78rem; letter-spacing: 0.05em; }

.callcard__body { padding: 1.3rem; }
.callcard__row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.callcard__avatar {
  width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.85rem;
}
.callcard__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.callcard__role { color: var(--grey-500); font-size: 0.66rem; }
.callcard__tag { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; padding: 0.3rem 0.6rem; border-radius: 100px; }
.callcard__tag--akut { background: var(--orange-soft); color: var(--orange-on-soft); }

.callcard__wave { display: flex; align-items: center; gap: 4px; height: 34px; margin-bottom: 1.1rem; }
.callcard__wave span { flex: 1; background: var(--grey-300); border-radius: 100px; height: 30%; transform-origin: center; }

.callcard__transcript { display: flex; flex-direction: column; gap: 0.6rem; }
.bubble {
  font-size: 0.86rem; line-height: 1.45; padding: 0.6rem 0.85rem; border-radius: 14px; max-width: 90%;
}
.bubble--in { background: var(--grey-100); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble--out { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; align-self: flex-end; }

.callcard__foot { padding: 0.9rem 1.3rem; border-top: 1px solid var(--line); background: var(--grey-100); }
.callcard__action { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--grey-700); }
.callcard__action .check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.65rem; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(234,88,20,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(234,88,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(234,88,20,0); }
}

/* ---------- MARQUEE ---------- */
.marquee {
  margin-top: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 1.2rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 1.6rem; width: max-content; white-space: nowrap;
  font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--ink); letter-spacing: -0.01em;
  will-change: transform;
}
.marquee__track .sep { color: var(--orange); }

/* =========================================================
   PROBLEM
   ========================================================= */
.problem__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem);
}
.pain { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; }
.pain__pill {
  align-self: flex-start; background: var(--orange-soft); color: var(--orange-on-soft);
  padding: 0.35rem 0.75rem; border-radius: 100px; font-size: 0.66rem; letter-spacing: 0.12em; margin-bottom: 1.4rem;
}
.pain__title {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 0.7rem;
}
.pain__text { color: var(--grey-700); font-size: 0.98rem; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how__pin { position: relative; }
.how__stage {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  min-height: 60vh;
}

/* conversation */
.how__convo { padding: 0; overflow: hidden; align-self: stretch; }
.convo__bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--grey-100); }
.convo__live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-size: 0.66rem; }
.convo__live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.8s infinite; }
.convo__tag { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); transition: color 0.4s var(--ease); }
.convo__lines { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 320px; }
.convo__lines .bubble { opacity: 0; transform: translateY(10px); }

/* tracks */
.how__tracks { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
.track {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(18,18,20,0.22);
  opacity: 0.5; transform: scale(0.98); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease);
}
.track.is-active { opacity: 1; transform: scale(1); box-shadow: 0 30px 60px -30px rgba(18,18,20,0.3); }
.track__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.track__badge {
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.16em; padding: 0.35rem 0.7rem; border-radius: 100px;
  background: var(--orange); color: #fff;
}
.track__badge--rutine { background: var(--ink); color: var(--paper); }
.track__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
.track__text { color: var(--grey-700); font-size: 0.95rem; margin-bottom: 1.3rem; }

/* akut mail mock */
.mail { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--grey-100); }
.mail__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.mail__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--orange); color: #fff; font-size: 0.85rem; }
.mail__subject { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.85rem; line-height: 1.2; }
.mail__meta { color: var(--grey-500); font-size: 0.58rem; }
.mail__status { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); transition: color 0.4s var(--ease); }
.mail__status.is-sent { color: var(--orange-text); }
.mail__body { padding: 0.9rem 1rem; background: var(--surface); }
.mail__body p { font-size: 0.82rem; color: var(--grey-700); margin-bottom: 0.3rem; }
.mail__body strong { color: var(--ink); font-weight: 600; }

/* calendar mock */
.cal { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: 0 18px 40px -28px rgba(18,18,20,0.25); }
.cal__head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.cal__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 0.8rem; color: var(--ink); }
.cal__icon { position: relative; display: grid; place-items: end center; width: 22px; height: 22px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e3e0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.6rem; color: #1a73e8; padding-bottom: 2px; overflow: hidden; }
.cal__icon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #1a73e8; }
.cal__date { font-family: "JetBrains Mono", monospace; font-size: 0.54rem; letter-spacing: 0.14em; color: var(--grey-500); }
.cal__week { display: grid; grid-template-columns: repeat(5, 1fr); }
.cal__col { border-right: 1px solid var(--line); min-height: 168px; padding-bottom: 0.4rem; }
.cal__col:last-child { border-right: 0; }
.cal__col--today { background: rgba(234,88,20,0.09); }
.cal__dh { text-align: center; padding: 0.45rem 0 0.5rem; border-bottom: 1px solid var(--line); }
.cal__dn { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.5rem; letter-spacing: 0.1em; color: var(--grey-500); }
.cal__dd { display: inline-block; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-top: 3px; }
.cal__dd--today { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #1a73e8; color: #fff; }
.cal__slot {
  display: flex; flex-direction: column; gap: 1px; margin: 0.3rem 0.25rem 0;
  padding: 0.3rem 0.38rem; border-radius: 5px;
  background: var(--orange-soft); border-left: 2.5px solid var(--orange);
  opacity: 0; transform: translateX(12px);
}
.cal__slot--akut { background: rgba(226,75,42,0.18); border-left-color: #E24B2A; }
.cal__time { color: var(--orange-on-soft); font-size: 0.5rem; letter-spacing: 0.04em; }
.cal__slot--akut .cal__time { color: #FF9273; }
.cal__job { font-size: 0.58rem; color: var(--ink); font-weight: 500; line-height: 1.15; }
.cal__foot { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem; border-top: 1px solid var(--line); font-size: 0.58rem; color: var(--grey-700); }
.cal__check { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.5rem; }

/* office strip */
.office { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.office__label { color: var(--grey-500); margin-bottom: 1.3rem; }
.office__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.office__chip {
  font-size: 0.86rem; color: var(--grey-700); padding: 0.6rem 1.1rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
}

/* =========================================================
   FEATURES
   ========================================================= */
.features__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem);
}
.feature { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; min-height: 200px; }
.feature--wide { grid-column: span 3; flex-direction: row; align-items: flex-start; gap: 1.5rem; min-height: auto; flex-wrap: wrap; }
.feature--wide .feature__title { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.feature__num { color: var(--grey-500); font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: auto; padding-bottom: 1.4rem; }
.feature--wide .feature__num { padding-bottom: 0; }
.feature__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.6rem; }
.feature__text { color: var(--grey-700); font-size: 0.92rem; }
.feature--wide .feature__text { flex: 1; min-width: min(280px, 100%); }

/* =========================================================
   COMPARISON
   ========================================================= */
.compare__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.ccard { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; }
.ccard__flag {
  position: absolute; top: 1.4rem; right: 1.4rem; font-size: 0.6rem; letter-spacing: 0.16em;
  color: var(--orange);
}
.ccard__label { color: var(--grey-500); margin-bottom: 1.4rem; font-size: 0.62rem; }
.ccard__price { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.ccard__price .ccard__unit { font-size: 0.9rem; font-weight: 500; color: var(--grey-500); letter-spacing: 0; }
.ccard__sub { color: var(--grey-700); font-size: 0.92rem; margin: 1rem 0 1.6rem; }
.ccard__list { margin-top: auto; display: flex; flex-direction: column; gap: 0.55rem; }
.ccard__list li { font-size: 0.88rem; display: flex; align-items: center; gap: 0.6rem; color: var(--grey-700); }
.ccard__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ccard__list--bad li::before { background: var(--grey-300); }
.ccard__list--good li::before { background: var(--orange); }
.ccard--win { background: var(--ink); color: var(--paper); border-color: transparent; }
.ccard--win .ccard__sub { color: rgba(18,18,20,0.68); }
.ccard--win .ccard__list li { color: rgba(18,18,20,0.8); }
.ccard--win .ccard__price.accent { color: var(--orange); }
.compare__note { text-align: center; margin-top: 1.6rem; color: var(--grey-500); font-size: 0.6rem; line-height: 1.6; max-width: 52ch; margin-inline: auto; text-transform: none; letter-spacing: 0.04em; }
.compare__foot { text-align: center; margin-top: 1.2rem; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; letter-spacing: -0.01em; }

/* =========================================================
   PRICING
   ========================================================= */
.founding {
  text-align: center; background: var(--orange-soft); color: var(--orange-on-soft);
  padding: 0.7rem 1.2rem; border-radius: 100px; width: max-content; max-width: 100%; margin: 0 auto 2.5rem;
  font-size: 0.62rem; letter-spacing: 0.1em; line-height: 1.5;
}
.pricing .section__head { margin-inline: auto; text-align: center; }
.pricing .section__head .eyebrow { justify-content: center; }
.pricing .section__lead { margin-inline: auto; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.plan { padding: clamp(1.8rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.plan--featured { background: var(--ink); color: var(--paper); border-color: transparent; transform: translateY(-8px); }
.plan--featured:hover { transform: translateY(-12px); }
.plan__flag {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: #fff; padding: 0.35rem 0.9rem; border-radius: 100px; font-size: 0.58rem; letter-spacing: 0.14em;
}
.plan__name { color: var(--grey-500); margin-bottom: 1.2rem; }
.plan--featured .plan__name { color: var(--orange); }
.plan__price { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.4rem; }
.plan__amt { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.plan__per { font-size: 1rem; font-weight: 500; color: var(--grey-500); }
.plan--featured .plan__per { color: rgba(18,18,20,0.55); }
.plan__setup { font-size: 0.85rem; color: var(--grey-500); margin-bottom: 1.8rem; }
.plan__setup s { color: var(--grey-400); text-decoration-thickness: 1px; }
.plan__setup-founding { color: var(--orange-text); font-weight: 500; white-space: nowrap; }
.plan--featured .plan__setup { color: rgba(18,18,20,0.55); }
.plan--featured .plan__setup s { color: rgba(18,18,20,0.4); }
.plan--featured .plan__setup-founding { color: #C7470F; }
.plan__list { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2rem; flex: 1; }
.plan__list li { font-size: 0.9rem; color: var(--grey-700); padding-left: 1.5rem; position: relative; }
.plan__list li::before { content: "+"; position: absolute; left: 0; color: var(--orange-text); font-weight: 600; }
.plan--featured .plan__list li { color: rgba(18,18,20,0.78); }
.plan--featured .plan__list li::before { color: var(--orange); }
.plan--featured .plan__list li:first-child { color: rgba(18,18,20,0.5); }

/* =========================================================
   TRUST
   ========================================================= */
.trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.tcard { padding: clamp(1.5rem, 2.5vw, 2rem); }
.tcard__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grey-100); color: var(--ink); font-size: 0.8rem; margin-bottom: 1.1rem; }
.tcard h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.tcard p { color: var(--grey-700); font-size: 0.9rem; }

/* =========================================================
   STEPS
   ========================================================= */
.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: s; }
.step { position: relative; padding-top: 2rem; border-top: 1.5px solid var(--ink); }
.step__num { color: var(--orange-text); font-size: 0.72rem; letter-spacing: 0.2em; margin-bottom: 1.2rem; display: block; }
.step__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.step__text { color: var(--grey-700); font-size: 0.95rem; }

/* =========================================================
   FINAL CTA BAND
   ========================================================= */
.cta-band { position: relative; background: #F4F2EC; color: #121214; overflow: hidden; padding-block: clamp(5rem, 10vw, 9rem); }
.cta-band__wash {
  position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%); width: 80vw; height: 60vw; max-width: 1000px; max-height: 700px;
  background: radial-gradient(circle at center, rgba(234,88,20,0.22), rgba(234,88,20,0) 60%); pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; text-align: center; }
.cta-band__inner .eyebrow { justify-content: center; }
.cta-band__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: clamp(2.4rem, 1.2rem + 5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.035em; }
.cta-band__sub { color: rgba(18,18,20,0.68); font-size: var(--fs-lead); margin: 1.4rem auto 2.4rem; max-width: 44ch; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-bottom: 1.8rem; }
.cta-band__trust { color: rgba(18,18,20,0.5); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2rem; margin-bottom: 3rem; }
.footer__logo { font-size: 1.6rem; display: inline-block; margin-bottom: 0.6rem; }
.footer__tag { color: var(--grey-500); font-size: 0.92rem; }
.footer__head { color: var(--grey-500); margin-bottom: 1.2rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col a { color: var(--grey-700); font-size: 0.92rem; transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--orange); }
.footer__note { color: var(--grey-500); font-size: 0.82rem; line-height: 1.6; }
.footer__base { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--grey-500); font-size: 0.8rem; }
.footer__base .mono { font-size: 0.62rem; color: var(--grey-500); }

/* =========================================================
   REVEAL (set initial state via JS-added class only, so no-JS shows content)
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal-line { opacity: 0; transform: translateY(16px); }

/* =========================================================
   FOCUS STATES
   ========================================================= */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 100%; }
  .hero__mock { margin-top: 1rem; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .how__stage { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .feature--wide { grid-column: span 2; }
  .compare__grid, .pricing__grid, .trust__grid, .steps__list { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
  .plan--featured:hover { transform: translateY(-4px); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__inner { padding: 0.5rem 0.5rem 0.5rem 1.2rem; }
  .problem__grid { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: 1fr; }
  .feature--wide { grid-column: span 1; flex-direction: column; }
  .feature--wide .feature__text { min-width: 0; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .trust__grid { grid-template-columns: 1fr; }
  /* WCAG 2.5.8: comfortable tap targets for footer/contact links */
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.4rem; }
}

/* =========================================================
   ANIMATION HOOKS (added by the animation layer / main.js)
   GPU-only: only transform + opacity are animated.
   ========================================================= */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  pointer-events: none; background: transparent;
}
.scroll-progress__bar {
  display: block; height: 100%; width: 100%;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}

/* Cursor glow (desktop fine-pointer only) */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 5;
  width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(234,88,20,0.17), rgba(234,88,20,0) 60%);
  will-change: transform, opacity;
}
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* Grain is a desktop nicety; drop it on touch/low-end to save paint + bytes */
@media (hover: none), (pointer: coarse) { .grain { display: none; } }

/* Section-title char reveal: chars slide up out of a clipped mask.
   Masks are inline so mixed plain + .accent text keeps its natural flow;
   vertical overflow is clipped while horizontal stays visible. */
.js .section__title .line-mask,
.js .cta-band__title .line-mask {
  display: inline-block; overflow-y: clip; overflow-x: visible;
  vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.js .section__title .char,
.js .cta-band__title .char { display: inline-block; }

/* Eyebrow line: the little orange tick draws in */
.js .eyebrow::before { transform: scaleX(0); transform-origin: left center; will-change: transform; }
.js .eyebrow.is-in::before { transform: scaleX(1); transition: transform 0.6s var(--ease) 0.05s; }

/* Magnetic / inner-glide wrappers shouldn't clip the lift */
.magnetic { will-change: transform; }

/* Card hover-tilt (subtle, transform only, set by JS) */
.card.tilt { transition: transform 0.4s var(--ease-soft), box-shadow 0.6s var(--ease-soft); }

/* Stagger items start hidden only when JS is on (so no-JS still shows them) */
.js .stagger-item { opacity: 0; }

/* Hero mock floats; wash floats — handled in JS, just hint the compositor */
.callcard, .hero__mock, .hero__wash { will-change: transform; }

/* Marquee row fades/rises in as a block */
.js .marquee { opacity: 0; }

/* Office chips pop in one-by-one */
.js .office__chip { opacity: 0; }

/* Count-up number keeps tabular alignment while ticking */
.num, [data-count] { font-variant-numeric: tabular-nums; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .reveal-line { opacity: 1 !important; transform: none !important; }
  .callcard__live .dot, .convo__live .dot { animation: none; }
  .marquee__track { animation: none !important; }
  .underline { transform: scaleX(1) !important; }
  .convo__lines .bubble, .cal__slot { opacity: 1 !important; transform: none !important; }
  .track { opacity: 1 !important; transform: none !important; }
  /* New animation hooks: reveal everything statically */
  .scroll-progress, .cursor-glow { display: none !important; }
  .js .section__title .char, .js .cta-band__title .char,
  .js .stagger-item, .js .office__chip { opacity: 1 !important; transform: none !important; }
  .js .eyebrow::before { transform: scaleX(1) !important; }
  .js .marquee { opacity: 1 !important; }
}


/* --- fixes (16 Jun): underline sits UNDER the accent word (room so it isn't clipped);
   section-title words never break mid-letter (chars grouped per word) --- */
.hero__title .line:has(.accent) { padding-bottom: 0.20em; }
.section__title .char-word,
.cta-band__title .char-word { display: inline-block; white-space: nowrap; }


/* ---- Mistet-opkald-mockups i problem-kortene ---- */
.pain__mock { margin-top: auto; padding-top: 1.2rem; }
.miss { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.miss__row { display: flex; align-items: center; gap: 0.55rem; }
.miss__row + .miss__row { border-top: 1px solid var(--line); padding-top: 0.35rem; }
.miss__ic { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(234,88,20,0.16); color: #FF7847; }
.miss__ic svg { width: 13px; height: 13px; }
.miss__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.miss__name { font-size: 0.76rem; font-weight: 500; color: var(--ink); line-height: 1.1; }
.miss__sub { font-size: 0.62rem; color: #FF7847; }
.miss__time { margin-left: auto; flex: none; font-size: 0.6rem; color: var(--grey-500); }

/* Pris-per-dag-linje på featured plan (værdi-indramning) */
.plan__perday { font-size: 0.8rem; color: rgba(18,18,20,0.55); margin: -1.2rem 0 1.8rem; }

/* =========================================================
   V2 — "OPKALDET": ringetone-åbning · stemme-canvas · interlude
   ========================================================= */

/* ---- Hero voice waveform canvas (behind content) ---- */
.hero__voice {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.6;
}
.hero .container, .hero .marquee { position: relative; z-index: 1; }

/* ---- CH 01: incoming-call overlay on the callcard ---- */
.callcard { position: relative; overflow: hidden; }
.callcard__ring {
  position: absolute; inset: 0; z-index: 5;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(234, 88, 20, 0.10), transparent 60%),
    var(--surface);
  border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; text-align: center; padding: 1.5rem;
}
html:not(.js) .callcard__ring { display: none; } /* no-JS: never cover the content */
.callcard__ring-halo {
  position: relative; width: 84px; height: 84px; margin-bottom: 1rem;
  display: grid; place-items: center;
}
.callcard__ring-halo i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(234, 88, 20, 0.55);
  animation: ringPulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.callcard__ring-halo i:nth-child(2) { animation-delay: 0.4s; }
.callcard__ring-halo i:nth-child(3) { animation-delay: 0.8s; }
@keyframes ringPulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}
.callcard__ring-icon {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 30px rgba(234, 88, 20, 0.45);
  animation: ringShake 1.1s ease-in-out infinite;
}
.callcard__ring-icon svg { width: 26px; height: 26px; }
@keyframes ringShake {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-10deg); } 24% { transform: rotate(9deg); }
  36% { transform: rotate(-7deg); } 48% { transform: rotate(5deg); }
  60% { transform: rotate(0deg); }
}
.callcard__ring-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.callcard__ring-sub { font-size: 0.72rem; color: var(--grey-500); letter-spacing: 0.06em; }
.callcard__ring-status {
  margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--orange-text); text-transform: uppercase;
}
.callcard__ring-status.is-answered { color: #4ade80; }
.callcard__ring.is-answered .callcard__ring-halo i { animation-play-state: paused; opacity: 0; }
.callcard__ring.is-answered .callcard__ring-icon { animation: none; background: #16a34a; box-shadow: 0 8px 30px rgba(22, 163, 74, 0.4); }

/* ---- CH 02: statement interlude ---- */
.interlude { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.interlude__line {
  font-family: "Space Grotesk", "Grotesk Fallback", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 1rem + 6.4vw, 6.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.interlude__line--accent { color: var(--orange); }
@media (max-width: 640px) { .interlude { padding: 4rem 0; } }

/* underline that draws itself under "Staffo svarer." on scrub */
.il-wrap { position: relative; display: inline-block; }
.il-underline {
  position: absolute; left: 0.02em; right: 0.1em; bottom: 0.03em; height: 0.075em;
  background: var(--orange); border-radius: 100px;
  transform: scaleX(0); transform-origin: left center;
}
html:not(.js) .il-underline { transform: none; }

/* ---- Hero flow-strip: konceptet i fire trin ---- */
.hero__flow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.45rem; margin: -0.35rem 0 1.6rem;
}
.flow-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.8rem 0.42rem 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; font-size: 0.86rem; font-weight: 500; color: var(--grey-900);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.flow-chip i {
  font-style: normal; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-text);
  font-size: 0.62rem; letter-spacing: 0;
}
.flow-chip:hover { border-color: rgba(234, 88, 20, 0.55); transform: translateY(-2px); }
.flow-arrow { color: var(--grey-400); font-size: 0.85rem; }
@media (max-width: 640px) {
  .hero__flow { gap: 0.35rem; }
  .flow-chip { font-size: 0.78rem; padding: 0.36rem 0.65rem 0.36rem 0.42rem; }
}