/* ============================================================================
   Biffles marketing site — ported from the Biffles Design System
   (templates/website/Website.dc.html). Plain static CSS: design tokens +
   component classes (Button / Badge / Logo / Icon) + responsive layout.
   ========================================================================== */

/* ---- Color tokens ---- */
:root {
  --teal-50:#E6F5F2; --teal-100:#BCE6DE; --teal-200:#88D2C6; --teal-300:#54BEAE;
  --teal-400:#2EAA98; --teal-500:#1B9686; --teal-600:#14796C; --teal-700:#0E5F54;
  --teal-800:#0A483F; --teal-900:#06302A;
  --sky-50:#EEF3FE; --sky-100:#D8E3FC; --sky-200:#B4C8F8; --sky-300:#85A4F1;
  --sky-400:#5680EA; --sky-500:#3060E0; --sky-600:#244CC2; --sky-700:#1E3E9C;
  --sunny-100:#FFF3D1; --sunny-300:#FFD75E; --sunny-500:#FBC02D; --sunny-700:#C9930A;
  --gray-0:#FFFFFF; --gray-25:#FBFBFC; --gray-50:#F4F4F6; --gray-100:#ECECEF;
  --gray-200:#DEDEE3; --gray-300:#C7C7CF; --gray-400:#A0A0AB; --gray-500:#797985;
  --gray-600:#5B5B66; --gray-700:#43434C; --gray-800:#2C2C33; --gray-900:#1A1A1F;
  --green-100:#DCF3E4; --green-500:#1FA463; --green-700:#157A49;
  --amber-100:#FCEFCF; --amber-500:#E89C1C; --amber-700:#B0760F;
  --red-100:#FBDEDB; --red-500:#DC3A2F; --red-700:#A8281F;

  --brand:var(--teal-500); --brand-hover:var(--teal-600); --brand-active:var(--teal-700);
  --bg-paper:#FAF7F2; --surface-card:var(--gray-0); --surface-sunken:var(--gray-50);
  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-faint:var(--gray-400); --text-link:var(--sky-600);
  --border-subtle:var(--gray-200); --border-default:var(--gray-300); --divider:var(--gray-100);
  --success:var(--green-500); --success-soft:var(--green-100);
}

/* ---- Typography tokens ---- */
:root {
  --font-brand:"Fredoka","Trebuchet MS",sans-serif;
  --font-display:"Lora",Georgia,"Times New Roman",serif;
  --font-sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px;
  --weight-bold:700; --tracking-snug:-0.01em; --tracking-wide:0.02em; --tracking-caps:0.08em;
}

/* ---- Radius & shadow tokens ---- */
:root {
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:22px; --radius-2xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(26,26,31,.06);
  --shadow-sm:0 1px 3px rgba(26,26,31,.08),0 1px 2px rgba(26,26,31,.04);
  --shadow-md:0 4px 12px rgba(26,26,31,.08),0 2px 4px rgba(26,26,31,.04);
  --shadow-lg:0 12px 28px rgba(26,26,31,.12),0 4px 8px rgba(26,26,31,.05);
  --shadow-xl:0 24px 56px rgba(26,26,31,.16);
  --shadow-brand:0 8px 20px rgba(27,150,134,.30);
}

/* ---- Base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-md); line-height:1.5;
  color:var(--text-body); background:var(--bg-paper); overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { margin:0; }
img { max-width:100%; display:block; }
::selection { background:var(--teal-200); color:var(--teal-900); }

/* ---- Eyebrow label ---- */
.eyebrow {
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.08em;
  font-weight:800; font-size:13px; color:var(--brand);
}

/* ---- Logo ---- */
.logo-link { display:inline-flex; align-items:center; text-decoration:none; }
.logo { display:inline-flex; align-items:center; gap:8px; color:var(--brand); }
.logo-mark { fill:currentColor; flex:none; }
.logo-word {
  font-family:var(--font-brand); font-weight:600; letter-spacing:-0.01em;
  line-height:1; color:var(--brand);
}

/* ---- Buttons (pill, from Button.jsx) ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-weight:700; letter-spacing:-0.01em;
  border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover { filter:brightness(.96); text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn-md { padding:7px 16px; font-size:var(--text-md); min-height:36px; }
.btn-lg { padding:10px 22px; font-size:var(--text-lg); min-height:44px; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn-secondary { background:var(--surface-card); color:var(--text-strong); border:1.5px solid var(--border-default); box-shadow:var(--shadow-xs); }
.btn-block { display:flex; width:100%; }

/* ---- Badge ---- */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; border-radius:var(--radius-pill); line-height:1.4;
}
.badge-brand { background:var(--teal-50); color:var(--teal-700); }

/* ---- Icons (Lucide sprite) ---- */
.ic { display:block; flex:none; }
.ic-stroke { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-fill { fill:currentColor; stroke:none; }

/* ---- Header: floating white pill nav (black + teal on white) ---- */
.site-header { position:sticky; top:12px; z-index:50; padding:16px 16px 0; }
.nav {
  max-width:940px; margin:0 auto; display:flex; align-items:center; gap:18px;
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:999px;
  padding:8px 8px 8px 22px; box-shadow:0 12px 30px rgba(26,26,31,.10);
}
.logo-dark, .logo-dark .logo-word { color:var(--brand); }
.nav-links { display:flex; align-items:center; gap:4px; margin:0 auto; }
.nav-link {
  font-family:var(--font-sans); font-weight:700; font-size:15px; text-decoration:none;
  color:var(--text-strong); padding:8px 14px; border-radius:999px; transition:background .15s, color .15s;
}
.nav-link:hover { color:var(--brand); }
.nav-link.active { color:var(--teal-700); background:var(--teal-50); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-login { font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--brand); text-decoration:none; }
.nav-login:hover { color:var(--brand-hover); }
.nav-toggle { display:none; margin-left:auto; align-items:center; justify-content:center; background:none; border:none; color:var(--text-strong); padding:8px; cursor:pointer; border-radius:10px; }
.nav-drawer { display:none; }

/* ---- Header: Switch dropdown (built by site.js) ---- */
.nav-dropdown { position:relative; display:inline-flex; }
.nav-dropdown-toggle { display:inline-flex; align-items:center; gap:5px; }
.nav-caret { transition:transform .16s ease; }
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform:rotate(180deg); }
.nav-menu {
  position:absolute; top:100%; left:50%; padding-top:12px;
  transform:translateX(-50%) translateY(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; z-index:60;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-menu-inner {
  min-width:224px; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:16px; box-shadow:0 16px 36px rgba(26,26,31,.16); padding:8px;
  display:flex; flex-direction:column; gap:2px;
}
.nav-menu-inner a {
  font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--text-strong);
  text-decoration:none; padding:9px 14px; border-radius:10px; white-space:nowrap; transition:background .14s, color .14s;
}
.nav-menu-inner a:first-child { color:var(--brand); }
.nav-menu-inner a:hover { background:var(--teal-50); color:var(--teal-700); }

/* Mobile drawer sub-items (0,2,0 specificity so they win over .nav-drawer-link) */
.nav-drawer .nav-drawer-sub { padding-left:30px; font-size:14px; font-weight:600; color:var(--text-muted); }

/* Drawer accordion: the header is a button that opens its section in place. */
.nav-drawer .nav-drawer-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-weight:700; font-size:15px; color:var(--text-strong);
  padding:11px 12px; border-radius:12px;
}
.nav-drawer .nav-drawer-toggle:hover { background:var(--teal-50); color:var(--teal-700); }
.nav-drawer .nav-drawer-toggle .nav-caret { transition:transform .22s ease; }
.nav-drawer .nav-drawer-toggle.open .nav-caret { transform:rotate(180deg); }
.nav-drawer-sub-list {
  display:flex; flex-direction:column; gap:2px;
  overflow:hidden; max-height:0; transition:max-height .24s ease;
}
.nav-drawer-sub-list.open { max-height:520px; }

/* ---- Home hero (centered, gradient) ---- */
body.home { position:relative; }
body.home::before {
  content:''; position:absolute; inset:0 0 auto 0; height:900px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 92% 55% at 50% 90%, rgba(27,150,134,.20), rgba(27,150,134,0) 72%),
    radial-gradient(ellipse 70% 45% at 82% 16%, rgba(251,192,45,.12), rgba(251,192,45,0) 62%),
    linear-gradient(180deg, #FAF7F2 0%, #EDF6F3 58%, #FAF7F2 100%);
}
body.home::after {
  content:''; position:absolute; inset:0 0 auto 0; height:900px; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,121,108,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,121,108,.06) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 78% 52% at 50% 86%, #000 8%, transparent 72%);
          mask-image:radial-gradient(ellipse 78% 52% at 50% 86%, #000 8%, transparent 72%);
}
.hero { max-width:840px; margin:0 auto; padding:56px 24px 8px; text-align:center; position:relative; z-index:1; }
.hero-badge {
  display:inline-block; margin-bottom:26px; padding:8px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong);
}
.hero-title { font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; color:var(--text-strong); font-size:64px; line-height:1.05; margin:0; }
.hero-title .accent { color:var(--brand); }
.hero-sub { font-size:19px; line-height:1.6; color:var(--text-body); max-width:600px; margin:24px auto 0; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.hero-rating { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; font-size:14px; color:var(--text-muted); }
.hero-rating .stars { color:var(--sunny-500); font-size:17px; letter-spacing:1px; }
.hero-mock { max-width:960px; margin:44px auto 0; padding:0 24px; position:relative; z-index:1; }
.mock-window { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); overflow:hidden; }

/* ---- Layout grids (columns live here so they can go responsive) ---- */
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; }

/* ---- Feature card ---- */
.feature-card {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:28px;
}
.feature-ic {
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--teal-50);
  color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}

/* ---- FAQ (native details, no JS) ---- */
.faq { border-bottom:1px solid var(--divider); }
.faq > summary {
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 4px; font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--text-strong);
}
.faq > summary::-webkit-details-marker { display:none; }
.faq-sign {
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--teal-50); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; line-height:1;
}
.faq-sign::after { content:"+"; }
.faq[open] .faq-sign::after { content:"\2212"; }
.faq > p { margin:0; padding:0 4px 24px; font-size:16px; line-height:1.65; color:var(--text-muted); }

/* ---- Switch pages (platform picker cards + numbered steps) ---- */
.switch-card {
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
a.switch-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--teal-200); }
.switch-card-name { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--text-strong); margin-bottom:8px; }
.switch-card-note { font-size:15px; line-height:1.55; color:var(--text-muted); margin:0 0 18px; }
.switch-card-link {
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-sans); font-weight:700; font-size:15px; color:var(--brand);
}

.step-row { display:flex; gap:18px; align-items:flex-start; }
.step-num {
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--teal-50); color:var(--teal-700);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:18px;
}
.step-title { font-family:var(--font-sans); font-weight:800; font-size:17px; color:var(--text-strong); margin:6px 0 4px; }
.step-body { font-size:15px; line-height:1.6; color:var(--text-muted); margin:0; }

.switch-panel {
  background:var(--surface-sunken); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:26px 28px;
}
/* "Set up in minutes" numbered list, counter-driven so the markup stays clean */
.setup-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; counter-reset:setup; }
.setup-list li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--text-body); }
.setup-list li::before {
  counter-increment:setup; content:counter(setup);
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--teal-50); color:var(--teal-700);
  font-family:var(--font-sans); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}

.switch-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.switch-list li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--text-body); }
.switch-list .tick { color:var(--success); flex:none; margin-top:2px; }
.switch-list .cross { color:var(--text-faint); flex:none; margin-top:2px; }

/* ---- Footer ---- */
.site-footer { background:var(--surface-card); border-top:1px solid var(--border-subtle); }
.footer-grid { max-width:1200px; margin:0 auto; padding:48px 32px; gap:32px; }
.footer-col-title { font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-strong); margin-bottom:14px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:var(--text-muted); text-decoration:none; }
.footer-links a:hover { color:var(--brand); }
.footer-bottom { border-top:1px solid var(--divider); padding:18px 32px; text-align:center; font-size:13px; color:var(--text-faint); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .grid-2 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .display-lg { font-size:38px !important; }
}
@media (max-width: 1024px) {
  /* Tablet and mobile: never the desktop pill. Always a solid, full-width white
     bar pinned to the top, with the hamburger. The transparent/frosted morph is
     desktop-only (see the min-width:1025px block above), so none of it applies
     here and the bar stays opaque -- the drawer opens directly beneath it, and
     translucency there reads as a rendering fault rather than a choice. */
  .nav-links, .nav-right { display:none; }
  .nav-toggle { display:inline-flex; }

  .site-header { top:0; padding:0; }
  .nav {
    max-width:none; margin:0; border-radius:0;
    background:var(--surface-card);
    border-width:0 0 1px; border-color:var(--border-subtle);
    box-shadow:none;
    padding:10px 18px;
  }

  body.nav-open .nav-drawer {
    display:flex; flex-direction:column; gap:6px;
    max-width:none; margin:0; padding:14px 18px;
    background:var(--surface-card);
    border:0; border-bottom:1px solid var(--border-subtle); border-radius:0;
    box-shadow:0 12px 30px rgba(26,26,31,.10);
  }
  .nav-drawer-link { font-family:var(--font-sans); color:var(--text-strong); font-weight:700; font-size:15px; padding:11px 12px; border-radius:12px; text-decoration:none; }
  .nav-drawer-link:hover { background:var(--teal-50); color:var(--teal-700); }
  .nav-drawer .btn { margin-top:4px; }
}
@media (max-width: 768px) {
  .hero-title { font-size:42px; }
  .grid-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .hero-title { font-size:33px; }
  .hero-sub { font-size:17px; }
  .display-lg { font-size:30px !important; }
  .grid-4 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
}

/* ============================================================================
   Header: full width across the top of the page, morphing into the floating
   pill as soon as you scroll. Desktop only -- below 821px the mobile drawer
   layout takes over and the pill is left exactly as it was. site.js adds
   .is-scrolled; with no JS the header simply stays full width, which still
   looks deliberate.

   Vertical sizing is matched on purpose so the morph causes NO layout shift:
     top      header padding 0    + nav padding 16px  = content + 32
     scrolled header padding 16px + nav padding 8px   = content + 32
   ========================================================================== */
@media (min-width: 1025px) {
  .site-header { transition:padding .32s cubic-bezier(.4,0,.2,1); }
  .nav {
    transition:max-width .32s cubic-bezier(.4,0,.2,1),
               border-radius .32s cubic-bezier(.4,0,.2,1),
               border-color .32s ease,
               box-shadow .32s ease,
               padding .32s cubic-bezier(.4,0,.2,1),
               background-color .32s ease,
               -webkit-backdrop-filter .32s ease,
               backdrop-filter .32s ease;
  }
  /* At the top: no bar at all, just the links floating over the page. Shadow and
     blur are kept as zero-valued (not `none`) so they interpolate rather than
     snapping when the morph runs. */
  .site-header:not(.is-scrolled) { padding:0; }
  .site-header:not(.is-scrolled) .nav {
    max-width:100vw;
    border-radius:0;
    background-color:transparent;
    border-color:transparent;
    box-shadow:0 12px 30px rgba(26,26,31,0);
    -webkit-backdrop-filter:blur(0px);
    backdrop-filter:blur(0px);
    padding:16px 40px;
  }
  /* Scrolled: frosted glass. Half-opaque white, with whatever scrolls underneath
     blurred out behind it. */
  .site-header.is-scrolled .nav {
    background-color:rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .nav { transition:none !important; }
}

/* ============================================================================
   Register-your-interest form (free-trial page)
   The only form on the marketing site. Public self-serve signup is closed, so
   this is the single route in from the public pages; it posts to the
   register-interest edge function via site.js.
   ========================================================================== */
.interest-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field label {
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 700; color: var(--text-strong);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--text-strong);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #9CA3AF; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--teal-100);
}
/* Only flag a field once it has actually been marked invalid on submit, so the
   form is not shouting red at someone who has simply not filled it in yet. */
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.form-status {
  font-size: 14px; line-height: 1.55; font-weight: 600;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.form-status.is-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.form-status.is-success { background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-200); }

@media (max-width: 640px) {
  .interest-card { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}