/* =========================================================================
   CONCEPT 3 — "TORQUE"
   Warm cream ground, Plus Jakarta 800 display type, big soft shadows,
   18–26px radii, orange panel behind the product tour, bento "why" grid,
   ink CTA block, expandable feature cards.
   Automotive cues: workshop photography (band + CTA), the five category
   photos, a tyre-tread strip on the hero panel, one hazard-tape chip used
   twice, bolt-head bullets and tick rulers under the stats.
   ========================================================================= */

:root {
  --accent: #f5860f;          /* brand orange, fills only */
  --accent-dark: #c9600a;     /* hover fill */
  --accent-ink: #a24c06;      /* orange as TEXT — AA on cream */
  --accent-soft: #fff1de;
  --accent-glow: rgba(245, 134, 15, 0.22);
  --ink: #16130f;
  --ink-2: #382f27;
  --muted: #6e655c;
  --bg: #fffbf5;
  --bg-2: #fbf1e3;
  --surface: #ffffff;
  --line: rgba(22, 19, 15, 0.08);
  --line-2: rgba(22, 19, 15, 0.16);
  --shadow-sm: 0 2px 10px rgba(22, 19, 15, 0.05);
  --shadow: 0 10px 30px rgba(22, 19, 15, 0.07);
  --shadow-lg: 0 26px 64px rgba(22, 19, 15, 0.14);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --max: 1220px;
  --pad: clamp(4.5rem, 8vw, 7.5rem);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  /* automotive textures — CSS only, used sparingly */
  --tape: repeating-linear-gradient(-45deg, var(--accent) 0 7px, rgba(255, 255, 255, 0.24) 7px 14px);
  --tread: repeating-linear-gradient(90deg, rgba(22, 19, 15, 0.34) 0 9px, rgba(22, 19, 15, 0) 9px 21px);
  --tread-hi: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 3px, rgba(255, 255, 255, 0) 3px 21px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: var(--sans); font-size: 1rem; line-height: 1.68;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); margin: 0; font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.3rem, 4.2vw, 3.55rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.1; }
h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.sec { padding: var(--pad) 0; position: relative; }
.tag {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent-ink);
}
.ico { display: inline-flex; }
.ico svg { width: 22px; height: 22px; }
.ico-sm svg { width: 16px; height: 16px; }

/* rounded hazard-tape chip — two appearances on the page, never a full band */
.tape-chip { display: block; width: 84px; height: 10px; border-radius: 999px; background: var(--tape); }

/* ---------------------------------------------------------------- chrome -- */
#scrollProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 10000; transition: width 0.1s linear; }
#backToTop {
  position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border: 0;
  border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
  z-index: 120; opacity: 0; transform: translateY(12px); transition: all 0.25s ease; pointer-events: none;
  box-shadow: var(--shadow);
}
#backToTop svg { width: 18px; height: 18px; transform: rotate(-90deg); }
#backToTop.visible { opacity: 1; transform: none; pointer-events: auto; }
#backToTop:hover { background: var(--accent); }

/* In the page margin, above every section ground (sections are position:
   relative, so anything under z-index 90 gets painted over). Burnt tone,
   because brand orange at this opacity is invisible on cream. */
.demo-watermark {
  position: fixed; right: -172px; top: 50%; width: 440px;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--head); font-size: 92px; font-weight: 800; letter-spacing: 0.2em;
  line-height: 1; text-align: center;
  color: var(--accent-dark); opacity: 0.075; z-index: 90; pointer-events: none; user-select: none;
}
@media (max-width: 1280px) {
  /* narrower page margin — shrink the mark so the whole word still fits */
  .demo-watermark { font-size: 76px; width: 380px; right: -152px; }
}

.concept-switch {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; z-index: 130;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; box-shadow: var(--shadow);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.concept-switch a { padding: 0.45rem 0.85rem; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.concept-switch a:hover { color: var(--ink); }
.concept-switch .cs-item.active { background: var(--accent); color: #fff; }
.concept-switch .cs-home { border-right: 1px solid var(--line); border-radius: 0; margin-right: 3px; }

/* ------------------------------------------------------------------- nav -- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all 0.25s ease; }
.nav.scrolled { background: rgba(255, 251, 245, 0.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(22, 19, 15, 0.05); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 1rem clamp(1.25rem, 4vw, 2.5rem); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand img { width: 34px; height: auto; }
.brand-name { font-family: var(--head); font-weight: 800; font-size: 1.14rem; letter-spacing: -0.03em; color: var(--ink); }
.brand-name em { font-style: normal; color: var(--accent-ink); }
.nav-links { display: flex; gap: 1.35rem; margin: 0 auto; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color 0.2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-ink); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-login { font-size: 0.92rem; font-weight: 600; }
.nav-login:hover { color: var(--accent-ink); }
.burger { display: none; background: none; border: 0; padding: 0.4rem; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); margin: 4px 0; }

.drawer { position: fixed; inset: 0; background: var(--bg); z-index: 140; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer nav { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; }
.drawer nav a { font-family: var(--head); font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.drawer-close { position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: 0; font-size: 2rem; color: var(--ink); line-height: 1; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: 999px; font-size: 0.92rem; font-weight: 700;
  font-family: var(--head); letter-spacing: -0.01em; border: 2px solid transparent; transition: all 0.22s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn-sm { padding: 0.58rem 1.25rem; font-size: 0.9rem; }
.btn-lg { padding: 1.02rem 1.9rem; font-size: 1rem; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 14px 30px var(--accent-glow); }
.btn-soft { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-soft:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-white { background: #fff; color: var(--accent-ink); border-color: #fff; }
.btn-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22, 19, 15, 0.22); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #000; }
.btn-outline { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.93rem; font-weight: 700; font-family: var(--head); color: var(--accent-ink); align-self: flex-start; }
.link-arrow.sm { font-size: 0.89rem; }
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: calc(5.5rem + 3vw) 0 0; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 78%;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); z-index: -1;
}
/* the hero band runs a little wider than the rest of the page so the app
   capture inside the narrower art column stays as large as possible */
.hero > .wrap { max-width: 1260px; }
/* two columns, vertically centred: copy left, orange panel + tour right */
.hero-grid {
  position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.75rem, 3vw, 2.75rem); align-items: center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* no eyebrow above it any more — the headline starts the column */
.hero-copy h1 { margin: 0; }
.hero-sub { margin: 1.05rem 0 0; max-width: 44ch; color: var(--muted); font-size: 1.08rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.6rem, 2.6vw, 2.15rem); }
/* the copy column is narrower now — trim the pills so both CTAs hold one row */
.hero-cta .btn-lg { padding: 1rem 1.4rem; font-size: 1rem; }
/* trust chips — white pills on the cream ground: soft shadow, hairline
   border, ink label, orange tick. The friendliest of the three concepts. */
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: clamp(1.5rem, 2.4vw, 2rem); }
.hero-facts li {
  display: inline-flex; align-items: center; gap: 0.48rem; padding: 0.56rem 0.95rem;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(22, 19, 15, 0.07);
  font-family: var(--head); font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink);
}
.hero-facts svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

/* the orange panel — warm at the top-left, burnt at the bottom-right so the
   Cosmic Orange phone rail keeps separation where it sits. Tight padding, so
   the browser window fills as much of the narrower column as it can. */
.hero-art { position: relative; }
@media (min-width: 1260px) {
  /* Bleed toward the right viewport edge so the browser window stays as wide
     as possible. Capped at 4vw, and never further than the page margin the
     1260px hero band leaves over — the panel's 26px corner and the phone's
     overhang have to stay on screen. .hero clips anything left over. */
  .hero-art { margin-right: max(-4vw, calc((1260px - 100vw) / 2)); }
}
.hero-panel {
  position: relative;
  background: linear-gradient(143deg, #ffa63f 0%, #f5860f 42%, #c85b0b 100%);
  border-radius: var(--radius-lg);
  padding: clamp(0.7rem, 1.1vw, 1rem);
  padding-bottom: clamp(1.55rem, 2.2vw, 2.05rem);
  box-shadow: var(--shadow-lg);
}
/* tyre-tread strip along the bottom edge of the panel — it stops short of
   the phone, which overhangs the browser on the right */
.hero-panel .tread {
  position: absolute; left: 7%; right: 27%; bottom: clamp(0.5rem, 0.85vw, 0.8rem);
  height: 14px; border-radius: 8px; background: var(--tread), var(--tread-hi);
  opacity: 0.75;
}

/* ------------------------------------------------- product tour (shared) -- */
/* The browser fills the panel; padding-bottom reserves the overhang of the
   phone, which hangs below the window and past its right edge. */
.mock { position: relative; padding: 0 0 8% 0; }
.mock-browser {
  margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px -22px rgba(22, 19, 15, 0.45), 0 0 0 1px rgba(22, 19, 15, 0.08);
}
.mb-bar {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem;
  background: linear-gradient(#fdfaf6, #f2ece3); border-bottom: 1px solid rgba(22, 19, 15, 0.09);
}
.mb-lights { display: flex; gap: 6px; flex: 0 0 auto; }
.mb-lights i { width: 10px; height: 10px; border-radius: 50%; }
.mb-lights i:nth-child(1) { background: #ff5f57; }
.mb-lights i:nth-child(2) { background: #febc2e; }
.mb-lights i:nth-child(3) { background: #28c840; }
.mb-url {
  flex: 1; display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0;
  background: #fff; border-radius: 999px; padding: 0.28rem 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.08);
  font-size: 0.74rem; font-weight: 500; color: var(--muted);
}
.mb-url svg { width: 11px; height: 11px; flex: 0 0 auto; color: #2f9e4f; }
.mb-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-tab {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 0.25rem 0.6rem;
}
.mb-screen { position: relative; aspect-ratio: 1400 / 743; background: #fff; overflow: hidden; }
.mb-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.014);
  transition: opacity 0.85s cubic-bezier(.4, 0, .2, 1), transform 6s linear;
}
.mb-slide.is-active { opacity: 1; transform: scale(1); }
.mb-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 22%);
}
.mb-player {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem;
  background: #fff; border-top: 1px solid rgba(22, 19, 15, 0.09);
}
/* keep play button, progress bar, caption and counter clear of the phone */
@media (min-width: 621px) { .mb-player { padding-right: 26%; } }
.mb-play { width: 26px; height: 26px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transition: background 0.2s ease; }
.mb-play:hover { background: var(--accent-dark); }
.mb-play svg { width: 11px; height: 11px; }
.mb-play .is-play { display: none; }
.is-paused .mb-play .is-pause { display: none; }
.is-paused .mb-play .is-play { display: block; }
.mb-track { flex: 0 0 76px; height: 4px; border-radius: 2px; background: rgba(22, 19, 15, 0.1); overflow: hidden; }
.mb-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.mb-cap { flex: 1; min-width: 0; font-size: 0.84rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-count { flex: 0 0 auto; font-size: 0.77rem; font-weight: 600; color: var(--muted); }
.mb-count b { color: var(--ink); font-weight: 800; }

/* iPhone 17 Pro — Cosmic Orange anodised rail with a dark bezel ring inside
   it, so the device reads as a device at 1:1 against the orange panel.
   Radii stay concentric: 17.9%/8.6% body, 3.4% ring, 14.8%/7.1% screen. */
.mock-phone { position: absolute; right: -4%; bottom: 0; width: 25%; max-width: 202px; }
.mp-body {
  position: relative; aspect-ratio: 1 / 2.086; border-radius: 17.9% / 8.6%;
  padding: 3.4%;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.4) 0 13%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(150deg, #ffb178 0%, #f77e2d 28%, #cf5f1c 58%, #f7912f 82%, #a8460f 100%);
  box-shadow: 0 26px 50px -14px rgba(22, 19, 15, 0.55), 0 0 0 1px rgba(74, 32, 8, 0.55);
}
.mp-body::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(22, 19, 15, 0.3);
}
.mp-screen {
  position: relative; z-index: 1; height: 100%; border-radius: 14.8% / 7.1%;
  overflow: hidden; background: #000;
  /* the dark bezel between rail and glass, concentric with the screen */
  box-shadow: 0 0 0 2.6px #100c09;
}
.mp-screen::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.mp-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s cubic-bezier(.4, 0, .2, 1); }
.mp-slide.is-active { opacity: 1; }
.mp-island { position: absolute; top: 1.3%; left: 50%; transform: translateX(-50%); width: 30.3%; height: 4.2%; border-radius: 999px; background: #000; z-index: 2; }
/* dark anodised keys — orange keys on an orange rail were invisible */
.mp-btn { position: absolute; width: 1.4%; border-radius: 2px; background: linear-gradient(#8c3f14, #431904); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.mp-silent { left: -1.4%; top: 15.5%; height: 5.5%; }
.mp-up { left: -1.4%; top: 23%; height: 7%; }
.mp-down { left: -1.4%; top: 31.5%; height: 7%; }
.mp-power { right: -1.4%; top: 24.5%; height: 11%; }

.mock-badge {
  position: absolute; left: -4%; bottom: 26%; display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border-radius: 14px; padding: 0.6rem 0.8rem;
  box-shadow: 0 18px 40px -12px rgba(22, 19, 15, 0.4), 0 0 0 1px rgba(22, 19, 15, 0.05);
  max-width: 224px;
}
.mba-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.mba-ico svg { width: 16px; height: 16px; }
.mba-txt { display: grid; gap: 1px; }
.mba-txt strong { font-family: var(--head); font-size: 0.9rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }

/* ----------------------------------------------------------- sec heading -- */
/* Editorial two-column header: label + heading left, deck / control right.
   Every header on the page carries something in column 2. */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0.8rem; align-items: end;
}
.sec-head > .tag { grid-column: 1; grid-row: 1; }
.sec-head > h2 { grid-column: 1; grid-row: 2; margin: 0; }
.sec-head > .sec-sub { grid-column: 2; grid-row: 2; }
.sec-head > .segmented { grid-column: 2; grid-row: 2; margin-top: 0; justify-self: start; }
.sec-head > .link-arrow { grid-column: 2; grid-row: 3; align-self: end; }
.sec-head.link-beside > .link-arrow { grid-row: 2; padding-bottom: 0.4rem; }
.sec-sub { font-size: 1.06rem; color: var(--muted); max-width: 46ch; padding-bottom: 0.25rem; }
.sec-head.centered { display: block; max-width: 62ch; margin: 0 auto; text-align: center; }
.sec-head.centered h2 { margin-top: 0.8rem; }
.sec-head.centered .sec-sub { margin: 0.9rem auto 0; padding-bottom: 0; }
.sec-head.centered .link-arrow { margin-top: 1.1rem; }
.sec-head + * { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
/* Heading only (no deck, no control, no link): one column, a narrower measure
   for the h2 and less air before the content — instead of a half-empty row. */
.sec-head.solo { display: block; max-width: 33rem; }
.sec-head.solo h2 { margin-top: 0.5rem; }
.sec-head.solo + * { margin-top: clamp(1.9rem, 3.4vw, 2.6rem); }

/* ----------------------------------------------------------------- bento -- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.bento-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 2rem 1.85rem 2.1rem; box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* The lead pillar spans the top as a wide, warm card — icon, title and copy
   side by side — instead of a tall near-black block with a void above it. */
.bento-card.lead {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 76px minmax(190px, 0.82fr) minmax(0, 1.28fr);
  gap: 1.2rem clamp(1.5rem, 3vw, 2.6rem); align-items: center;
  padding: clamp(1.6rem, 2.6vw, 2.35rem) clamp(1.6rem, 2.6vw, 2.6rem);
  background: linear-gradient(118deg, #fff8ee 0%, var(--accent-soft) 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(245, 134, 15, 0.14);
}
.bento-card.lead .bento-ico {
  width: 76px; height: 76px; border-radius: 24px; margin-bottom: 0;
  background: var(--accent); color: #fff;
}
.bento-card.lead .bento-ico svg { width: 30px; height: 30px; }
.bento-card.lead h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); margin-bottom: 0; }
.bento-card.lead p { font-size: 1.02rem; color: var(--ink-2); max-width: 52ch; }
.bento-ico { width: 54px; height: 54px; border-radius: 17px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 1.3rem; }
.bento-card h3 { margin-bottom: 0.6rem; }
.bento-card p { font-size: 0.99rem; color: var(--ink-2); }

/* -------------------------------------------------------------- features -- */
/* Wrapping flex rows, not CSS columns: every row is a set of equal-height
   cards and the OPEN card takes a full row of its own, so an expanded module
   can never leave a hole beside it (and a short last row grows to fill).
   <details name="mdmodule"> keeps exactly one module open at a time. */
.fgrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem; }
.fcard {
  flex: 1 1 calc((100% - 2.2rem) / 3); min-width: 240px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: box-shadow 0.25s ease;
}
.fcard[open] { flex-basis: 100%; }
.fcard:hover { box-shadow: var(--shadow); }
.fcard[open] { box-shadow: var(--shadow-lg); }
.fcard-head {
  display: grid; grid-template-columns: 44px 1fr 22px; align-items: center; gap: 0.9rem;
  padding: 1.15rem 1.35rem; list-style: none; cursor: pointer;
}
.fcard-head::-webkit-details-marker { display: none; }
.fcard-head::marker { content: ''; }
.fcard-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; transition: all 0.2s ease; }
.fcard[open] .fcard-ico { background: var(--accent); color: #fff; }
.fcard-title { display: grid; }
.fcard-title em { font-style: normal; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.fcard-title strong { font-family: var(--head); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; }
.fcard-plus { color: var(--muted); display: inline-flex; transition: transform 0.25s ease, color 0.25s ease; }
.fcard-plus svg { width: 20px; height: 20px; }
.fcard[open] .fcard-plus { transform: rotate(45deg); color: var(--accent); }
.fcard-body { padding: 0 1.35rem 1.35rem; animation: fadeUp 0.3s ease both; }
.fcard-blurb { font-size: 1.05rem; color: var(--ink-2); padding: 0.9rem 0 1rem; border-top: 1px solid var(--line); }
.fcard-highlight { margin-top: 1rem; padding: 0.95rem 1.05rem; background: var(--accent-soft); border-radius: var(--radius-sm); }
.fcard-highlight p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--ink-2); }
.fcard-body > .link-arrow { margin-top: 1rem; }
@media (min-width: 861px) {
  .fcard[open] .fcard-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start;
    border-top: 1px solid var(--line); padding-top: 1.15rem;
  }
  .fcard[open] .fcard-blurb { grid-column: 1; grid-row: 1; border-top: 0; padding: 0 0 0.9rem; }
  .fcard[open] .fcard-more { grid-column: 2; grid-row: 1 / span 2; }
  .fcard[open] .fcard-body > .link-arrow { grid-column: 1; grid-row: 2; margin-top: 0; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* bolt-head bullets instead of check ticks */
.bolt-list { display: grid; gap: 0.6rem; }
.bolt-list li { display: grid; grid-template-columns: 14px 1fr; gap: 0.7rem; font-size: 0.93rem; color: var(--ink-2); }
.bolt-list i {
  width: 12px; height: 13px; margin-top: 0.42rem; position: relative; background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.bolt-list i::after {
  content: ''; position: absolute; inset: 3px; background: var(--bg-2);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* -------------------------------------------------------- disclosure UI --- */
.disc { background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden; }
.disc-head {
  width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem;
  background: none; border: 0; text-align: left; transition: background 0.2s ease;
}
.disc-head:hover { background: rgba(22, 19, 15, 0.035); }
.disc-ico { color: var(--accent-ink); display: inline-flex; flex: 0 0 auto; }
.disc-ico svg { width: 17px; height: 17px; }
.disc-label { flex: 1; font-family: var(--head); font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
.disc-meta { flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.disc-plus { flex: 0 0 auto; color: var(--accent-ink); display: inline-flex; transition: transform 0.25s ease; }
.disc-plus svg { width: 17px; height: 17px; }
.disc.open .disc-plus { transform: rotate(45deg); }
.disc-body { display: none; padding: 0 1rem 1rem; }
.disc.open > .disc-body { display: block; animation: fadeUp 0.28s ease both; }

.fcard-more { background: var(--bg-2); }
.fcard-more .disc-label { font-size: 0.92rem; }

/* ----------------------------------------- workshop band: types + stats -- */
.sec-band { padding-top: 0; }
.band {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(2.25rem, 4.4vw, 3.6rem) clamp(1.5rem, 3.4vw, 3rem);
  box-shadow: var(--shadow-lg);
}
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(201, 96, 10, 0.78) 0%, rgba(150, 62, 8, 0.84) 46%, rgba(22, 19, 15, 0.9) 100%);
}
.band-inner { position: relative; }
.band-head { max-width: 46ch; }
.band-head .tag { color: #ffd7a8; margin-top: 1rem; }
.band-head h2 { color: #fff; margin-top: 0.55rem; }
.band-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: clamp(2rem, 3.6vw, 2.9rem); }
.band-type { margin: 0; }
/* Real 4:3 workshop photographs: cover-fit, captions inside on a scrim so the
   five cards read as one set whatever each photo's own tonality is. */
.band-photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: #14110e; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}
.band-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.band-type:hover .band-photo img { transform: scale(1.05); }
.band-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(15, 12, 9, 0.9) 0%, rgba(15, 12, 9, 0.45) 42%, rgba(15, 12, 9, 0) 74%);
}
.band-type figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0.7rem 0.8rem;
  font-family: var(--head); font-size: 0.87rem; font-weight: 700; color: #fff;
  letter-spacing: -0.015em; line-height: 1.3;
}
.band-type { transition: transform 0.25s ease; }
.band-type:hover { transform: translateY(-4px); }
.band-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.bstat strong { display: block; font-family: var(--head); font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.stat-ruler { display: block; height: 8px; width: 62px; margin: 0.6rem 0 0.55rem; background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 8px); }
.bstat span { display: block; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------- integrations -- */
/* 17 logos: a centred wrap of fixed-width tiles, so the short last row
   centres at every breakpoint instead of leaving an empty grid slot. */
.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.wall-tile {
  flex: 0 0 auto; width: 178px; height: 84px;
  display: grid; place-items: center; padding: 0.7rem 1rem;
  background: var(--surface); border-radius: 15px; box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.wall-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.wall-tile img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; }
/* artwork with pale strokes or a lot of internal padding needs more room,
   or the tile reads as blank */
.wall-tile[title="Mailchimp"] img { max-height: 60px; }
.wall-tile[title="Vehicle Visual"] img { max-height: 52px; }
.wall-tile[title="Xero"] img,
.wall-tile[title="Carjam"] img,
.wall-tile[title="My Car Check"] img { max-height: 54px; }
.intx-all { margin-top: 1.2rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.intx-all .disc-head { padding: 1rem 1.15rem; }
.intx-intro { font-size: 0.97rem; color: var(--muted); max-width: 76ch; padding-top: 0.2rem; }
.cat-bar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.chip-btn { background: var(--bg-2); border: 0; color: var(--ink-2); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.87rem; font-weight: 600; transition: all 0.2s ease; }
.chip-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.chip-btn.active { background: var(--ink); color: #fff; }
.region-select { display: none; }
.intx-group { margin-top: 1.5rem; }
.intx-cat { display: flex; align-items: center; gap: 0.5rem; font-family: var(--head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.intx-cat span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 0.35rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.74rem; letter-spacing: 0; }
.intx-rows { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.8rem; }
.intx-row { flex: 1 1 calc(50% - 0.25rem); min-width: 220px; }
.intx-row.open { flex-basis: 100%; }
.intx-row { background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden; }
.intx-row.open { background: var(--accent-soft); }
.intx-head { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.65rem; background: none; border: 0; text-align: left; }
.intx-logo { width: 56px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; background: #fff; border-radius: 8px; overflow: hidden; padding: 0.25rem; }
.intx-logo img { max-height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.intx-logo em { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 0.72rem; color: var(--ink); }
.intx-name { flex: 1; font-size: 0.93rem; font-weight: 600; color: var(--ink); }
.intx-plus { flex: 0 0 auto; color: var(--accent-ink); display: inline-flex; transition: transform 0.25s ease; }
.intx-plus svg { width: 16px; height: 16px; }
.intx-row.open .intx-plus { transform: rotate(45deg); }
.intx-body { display: none; padding: 0 0.75rem 0.85rem; }
.intx-row.open .intx-body { display: block; animation: fadeUp 0.25s ease both; }
.intx-body p { font-size: 0.92rem; color: var(--ink-2); break-inside: avoid; }
@media (min-width: 861px) {
  .intx-row.open .intx-body { columns: 2; column-gap: 2.4rem; }
  .intx-row.open .intx-body .link-arrow { column-span: all; }
}
.intx-body p + p { margin-top: 0.45rem; }
.intx-body .link-arrow { margin-top: 0.6rem; word-break: break-all; }

/* ---------------------------------------------------------------- proven -- */
/* One shelf, three named workshops. No star row: content.cjs carries no
   ratings and no quotes, so none are shown. */
.cust-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.cust-card {
  margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 1.15rem; align-items: center; padding: 1.7rem 1.6rem;
  border-right: 1px solid var(--line); transition: background 0.25s ease;
}
.cust-card:last-child { border-right: 0; }
.cust-card:hover { background: #fffaf2; }
.cust-photo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: var(--bg-2); }
.cust-photo img { width: 100%; height: 100%; object-fit: cover; }
.cust-card figcaption { font-family: var(--head); font-weight: 700; color: var(--ink); font-size: 1.03rem; letter-spacing: -0.02em; line-height: 1.3; }

/* --------------------------------------------------------------- pricing -- */
.sec-pricing { background: var(--bg-2); }
.segmented { display: inline-flex; gap: 3px; padding: 5px; border-radius: 999px; background: var(--surface); margin-top: 1.4rem; flex-wrap: wrap; box-shadow: var(--shadow-sm); }
.seg { background: none; border: 0; color: var(--ink-2); padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; transition: all 0.2s ease; }
.seg:hover { color: var(--ink); }
.seg.active { background: var(--accent); color: #fff; }
.plan-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: start; }
.plan {
  position: relative; background: var(--surface); border-radius: var(--radius);
  padding: 1.9rem 1.65rem; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan.featured {
  background: linear-gradient(158deg, #f0790b 0%, #b85306 100%);
  box-shadow: 0 26px 60px -16px rgba(178, 80, 6, 0.55);
}
.plan.featured h3 { color: #fff; }
.plan-badge {
  position: absolute; top: -11px; right: 1.4rem; background: #fff; color: var(--accent-ink);
  box-shadow: 0 6px 16px rgba(22, 19, 15, 0.16);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.plan-price { font-family: var(--head); font-size: clamp(1.75rem, 2.6vw, 2.2rem); font-weight: 800; color: var(--ink); letter-spacing: -0.04em; line-height: 1.1; margin-top: 0.9rem; }
.plan-unit { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-top: 0.15rem; }
.plan-users { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); margin-top: 1.1rem; }
.plan-users svg { color: var(--accent); }
.plan.featured .plan-price, .plan.featured .plan-price span { color: #fff; }
.plan.featured .plan-unit { color: rgba(255, 255, 255, 0.82); }
.plan.featured .plan-users { color: #fff; }
.plan.featured .plan-users svg { color: #fff; }
[data-price-cell] { transition: opacity 0.2s ease; }
[data-price-cell].is-updating { opacity: 0; }
.plan .btn { margin-top: 1.2rem; width: 100%; }
.plan-more { margin-top: 1.15rem; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.plan-more .disc-head { padding: 0.75rem 0; }
.plan-more .disc-head:hover { background: none; }
.plan-more .disc-label { font-size: 0.9rem; color: var(--accent-ink); }
.plan-more .disc-body { padding: 0 0 0.25rem; }
.plan.featured .plan-more { border-top-color: rgba(255, 255, 255, 0.32); }
.plan.featured .plan-more .disc-label, .plan.featured .plan-more .disc-plus { color: #fff; }
.plan-list { display: grid; gap: 0.5rem; }
.plan-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem; font-size: 0.9rem; color: var(--ink-2); padding-bottom: 0.45rem; border-bottom: 1px dashed var(--line-2); }
.plan-list li > span { flex: 0 0 auto; white-space: nowrap; }
.plan-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-list b { flex: 1; font-weight: 700; color: var(--ink); text-align: right; }
.plan.featured .plan-list li { color: rgba(255, 255, 255, 0.84); border-bottom-color: rgba(255, 255, 255, 0.26); }
.plan.featured .plan-list b { color: #fff; }
.addons { margin-top: 1.5rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.addons .disc-head { padding: 1rem 1.15rem; }
.addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 0.3rem; }
.addon { background: var(--bg-2); border-radius: var(--radius-sm); padding: 1.35rem 1.4rem; }
.addon h4 { margin-bottom: 0.4rem; }
.addon p { font-size: 0.95rem; color: var(--ink-2); }
.addons-note { margin-top: 1rem; font-size: 0.82rem; color: var(--muted); }

/* --------------------------------------------------------------- support -- */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.support-card { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.75rem 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.55rem; }
.support-num { position: absolute; top: 1.15rem; right: 1.35rem; font-family: var(--head); font-size: 0.78rem; font-weight: 800; color: var(--line-2); }
.support-ico { width: 46px; height: 46px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 0.35rem; }
.support-card p { font-size: 0.97rem; color: var(--ink-2); }
.support-card .link-arrow { margin-top: auto; padding-top: 0.8rem; }
.support-card .disc.phones { margin-top: 0.7rem; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.support-card .disc.phones .disc-head { padding: 0.7rem 0; }
.support-card .disc.phones .disc-head:hover { background: none; }
.support-card .disc.phones .disc-body { padding: 0 0 0.3rem; }
.disc.phones .disc-label { font-size: 0.9rem; }
.disc.phones .disc-meta { display: none; }
.phone-list { display: grid; gap: 0.35rem; }
.phone-list li { display: flex; justify-content: space-between; gap: 0.55rem; font-size: 0.9rem; padding-bottom: 0.35rem; border-bottom: 1px dashed var(--line-2); }
.phone-list li:last-child { border-bottom: 0; }
.phone-list span { color: var(--muted); }
.phone-list a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.phone-list a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------------------ blog -- */
.blog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.blog-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.blog-body h3 a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------------- cta block -- */
.cta-ink {
  background: var(--ink); color: rgba(255, 255, 255, 0.75); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch;
  box-shadow: var(--shadow-lg);
}
.cta-copy { padding: clamp(2.25rem, 4vw, 3.6rem); }
.cta-copy .tape-chip { margin-bottom: 1.35rem; }
.cta-copy .tag { color: #ffbd7a; }
.cta-copy h2 { color: #fff; margin-top: 0.7rem; max-width: 22ch; }
.cta-copy p { margin-top: 1rem; max-width: 52ch; font-size: 1.02rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.cta-photo { position: relative; min-height: 300px; }
.cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(22, 19, 15, 0.35) 42%, rgba(22, 19, 15, 0.05) 100%),
              linear-gradient(0deg, rgba(201, 96, 10, 0.3), rgba(201, 96, 10, 0) 60%);
}

/* --------------------------------------------------------------- contact -- */
.contact-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.contact-info { display: grid; gap: 1.1rem; align-content: start; }
.info-card { background: var(--surface); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm); }
.info-card .tag { margin-bottom: 0.7rem; }
.info-strong { font-family: var(--head); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.info-row { display: grid; grid-template-columns: 20px 1fr; gap: 0.7rem; margin-top: 0.8rem; font-size: 0.95rem; }
.info-row svg { color: var(--accent); margin-top: 0.28rem; }
.info-row a:hover { color: var(--accent-ink); }
.info-card .disc.phones { margin-top: 1.1rem; background: var(--bg-2); border-radius: var(--radius-sm); }
.map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.map iframe { display: block; }

.cf { background: var(--surface); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.3rem); box-shadow: var(--shadow); display: grid; gap: 1.05rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.cf-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.45rem; }
.cf-label em { color: var(--accent-ink); font-style: normal; }
.cf input, .cf textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; transition: all 0.2s ease;
}
.cf input::placeholder, .cf textarea::placeholder { color: #a99e93; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.cf textarea { resize: vertical; }
.cf-submit { width: 100%; margin-top: 0.2rem; }
.cf-note { font-size: 0.78rem; color: var(--muted); text-align: center; }
.form-thanks { background: var(--accent-soft); border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; }
.form-thanks.visible { opacity: 1; transform: none; }
.form-thanks h3 { color: var(--accent-ink); margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- footer -- */
.footer { position: relative; background: var(--ink); color: rgba(255, 255, 255, 0.7); padding: clamp(3.25rem, 5.5vw, 5rem) 0 1.75rem; margin-top: clamp(3rem, 5vw, 4.5rem); }
.footer .brand-name { color: #fff; }
.footer .brand-name em { color: var(--accent); }
.footer .tag { color: #ffbd7a; }
.foot-top { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.05fr; gap: 2rem; }
.foot-brand { max-width: 34ch; }
.foot-line { margin-top: 1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.68); }
.socials { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.social { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.8); transition: all 0.2s ease; }
.social svg { width: 15px; height: 15px; }
.social:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.foot-about { margin-top: 1.3rem; background: rgba(255, 255, 255, 0.05); }
.foot-about .disc-head { padding: 0.7rem 0.9rem; }
.foot-about .disc-head:hover { background: rgba(255, 255, 255, 0.05); }
.foot-about .disc-label { color: #fff; font-size: 0.92rem; }
.foot-about .disc-plus { color: var(--accent); }
.foot-about .disc-body { padding: 0 0.9rem 0.9rem; }
.foot-about p { font-size: 0.91rem; color: rgba(255, 255, 255, 0.72); }
.foot-col ul { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.foot-col li, .foot-col a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); }
.foot-col a:hover { color: var(--accent); }
.app-badges { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.app-badge { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm); padding: 0.5rem 0.85rem; transition: all 0.2s ease; }
.app-badge:hover { border-color: var(--accent); }
.app-badge-ico svg { width: 20px; height: 20px; color: #fff; }
.app-badge span { display: grid; }
.app-badge small { font-size: 0.75rem; color: rgba(255, 255, 255, 0.66); }
.app-badge strong { font-family: var(--head); font-size: 0.9rem; color: #fff; }
.foot-bottom {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------- reveals -- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.07s; } .d2 { transition-delay: 0.14s; } .d3 { transition-delay: 0.21s; } .d4 { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .mb-slide, .mp-slide { transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1180px) {
  .fcard { flex-basis: calc((100% - 1.1rem) / 2); }
  .band-types { grid-template-columns: repeat(3, 1fr); }
  .plan-row { grid-template-columns: repeat(2, 1fr); }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 1120px) {
  /* six links at 0.92rem + Login + Sign Up no longer clear each other here */
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-login { display: none; }
  .nav-actions { margin-left: auto; }
  .nav { background: rgba(255, 251, 245, 0.92); backdrop-filter: blur(14px); }
}
@media (max-width: 1024px) {
  .hero { padding-top: calc(4.5rem + 3vw); }
  /* one column, and the COPY COMES FIRST — the h1 must never start below
     the fold on a tablet or phone */
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 3.4rem); }
  .hero-sub { max-width: 56ch; }
  /* full-width panel: keep the annotation and the phone inside the frame so
     neither breaks the page gutter */
  .mock-badge { left: 0; }
  .mock-phone { right: -1%; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-ink { grid-template-columns: 1fr; }
  .cta-photo { min-height: 240px; order: -1; }
  .cta-photo::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(22, 19, 15, 0.2) 70%), linear-gradient(90deg, rgba(201, 96, 10, 0.25), rgba(201, 96, 10, 0) 70%); }
}
@media (max-width: 900px) {
  /* headers and the hero header band stack */
  .sec-head { display: block; }
  .sec-head h2 { margin-top: 0.8rem; }
  .sec-head .sec-sub { margin-top: 0.9rem; padding-bottom: 0; max-width: 56ch; }
  .sec-head .link-arrow { margin-top: 1.1rem; }
  .sec-head.link-beside > .link-arrow { padding-bottom: 0; }
  .sec-head .segmented { margin-top: 1.3rem; }
  .bento-card.lead { grid-template-columns: 76px minmax(0, 1fr); }
  .bento-card.lead p { grid-column: 1 / -1; max-width: none; }
  .cust-row { grid-template-columns: 1fr; }
  .cust-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .cust-card:last-child { border-bottom: 0; }
}
@media (max-width: 860px) {
  .intx-row { flex-basis: 100%; }
  .band-types { grid-template-columns: repeat(2, 1fr); }
  .band-stats { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 760px) {
  .fcard { flex-basis: 100%; min-width: 0; }
  .bento { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr; }
  .plan-row { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .addon-grid { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 620px) {
  .demo-watermark { display: none; }
  .mock { padding: 0 0 12%; }
  .mock-phone { width: 34%; right: 2%; }
  .mb-player { padding-right: 40%; }
  .mock-badge { display: none; }
  .mb-cap { display: none; }
  .hero-panel .tread { left: 6%; right: 34%; height: 12px; }
  .band-types { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .band-type figcaption { font-size: 0.84rem; }
  .bento-card.lead { grid-template-columns: 1fr; gap: 1rem; }
  .bento-card.lead .bento-ico { width: 62px; height: 62px; border-radius: 20px; }
}
@media (max-width: 560px) {
  .segmented { display: none; }
  .region-select { display: block; width: 100%; margin-top: 1.3rem; padding: 0.8rem 1rem; font-family: var(--sans); font-size: 0.9rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); }
  .band-stats { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .concept-switch { font-size: 0.72rem; letter-spacing: 0.04em; }
  .concept-switch a { padding: 0.4rem 0.6rem; }
  .foot-top { grid-template-columns: 1fr; }
  .wall-tile { width: 116px; height: 68px; padding: 0.5rem 0.7rem; }
  .wall-tile img { max-height: 30px; }
  .wall-tile[title="Mailchimp"] img { max-height: 46px; }
  .wall-tile[title="Vehicle Visual"] img,
  .wall-tile[title="Xero"] img,
  .wall-tile[title="Carjam"] img,
  .wall-tile[title="My Car Check"] img { max-height: 40px; }
  .cust-photo { width: 76px; height: 76px; }
  .cust-card { grid-template-columns: 76px minmax(0, 1fr); padding: 1.35rem 1.25rem; }
}