/* AI-Deate Live landing site: shared styles for the home page and the guide pages. */
/* Thai text uses Thonburi where available, as in the Live App. */
@font-face {
  font-family: 'Thai';
  src: local('Thonburi');
  unicode-range: U+0E00-0E7F;
}
:root {
  --bg: #000000;
  --ink: #f2f2f0;
  --ink-2: #b4b9bf;
  --muted: #80878f;
  --line: #222428;
  --panel: #121314;
  --panel-2: #1b1c1f;
  --accent: #ffd300;
  --stage: #000000;
  --label-font: 'Michroma', 'DM Sans', system-ui, sans-serif;
  --font: 'Thai', 'DM Sans', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Myanmar', 'Noto Sans Khmer', 'Noto Sans Lao', system-ui, sans-serif;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
}
.wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .wrap {
    padding: 0 16px;
  }
}
.center {
  text-align: center;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
@keyframes breathe {
  50% {
    opacity: 0.3;
  }
}
@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.btn.dark {
  background: var(--ink);
  color: #000;
}
.btn.dark:hover {
  background: #d9d9d6;
}
.btn.yellow {
  background: var(--accent);
  color: #000;
}
.btn.yellow:hover {
  background: #ffdd33;
}
.btn.light {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn.light:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
.btn.small {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* eyebrow label with the AI-Deate star */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label-font);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.label {
  color: var(--accent);
}
.label::before {
  content: '';
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 780 772' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M369.799 0C328.952 0 295.839 32.7727 295.839 73.2V192.15L213.451 110.608C184.568 82.0216 137.739 82.0217 108.856 110.608C79.9728 139.194 79.9728 185.542 108.856 214.128L188.344 292.8H73.9597C33.1129 292.8 0 325.573 0 366C0 406.427 33.1129 439.2 73.9597 439.2H194.144L111.756 520.742C82.8729 549.328 82.873 595.676 111.756 624.262C140.639 652.849 187.468 652.849 216.351 624.262L295.839 545.591V658.8C295.839 699.227 328.952 732 369.799 732C410.645 732 443.758 699.227 443.758 658.8V545.591L527.235 628.21C556.118 656.797 602.947 656.797 631.83 628.21C660.713 599.624 660.713 553.276 631.83 524.69L545.453 439.2H665.637C706.484 439.2 739.597 406.427 739.597 366C739.597 325.573 706.484 292.8 665.637 292.8H551.253L634.73 210.181C663.613 181.594 663.613 135.247 634.73 106.66C605.847 78.0739 559.018 78.0738 530.135 106.66L443.758 192.15V73.2C443.758 32.7728 410.645 0 369.799 0Z' fill='%23FFD300'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 60px;
}
.nav nav {
  display: flex;
  gap: 32px;
  font-size: 14px;
}
.nav nav a,
.nav .signin {
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.nav nav a:hover,
.nav .signin:hover {
  color: var(--muted);
}
.nav .spacer {
  flex: 1;
}
.nav .signin {
  font-size: 14px;
}
.nav .menu {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* The full link row needs about 1120px; below that the menu button takes over. */
@media (max-width: 1120px) {
  .nav nav {
    display: none;
  }
  .nav .menu {
    display: inline-flex;
  }
  /* Open menu: the links drop down under the bar. */
  .nav.open nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    padding: 8px 16px 20px;
    background: rgba(0, 0, 0, 0.96);
    border-bottom: 1px solid var(--line);
    font-size: 18px;
  }
  .nav.open nav a {
    padding: 14px 8px;
    border-bottom: 1px solid var(--line);
  }
  .nav.open nav a.menu-only {
    display: block;
    color: var(--accent);
    border-bottom: 0;
  }
}
.nav nav a.menu-only {
  display: none;
}
@media (max-width: 480px) {
  .nav .signin {
    display: none;
  }
  .nav .wrap {
    gap: 10px;
  }
  .nav .wrap > a:first-child svg {
    height: 20px !important;
  }
}

/* hero */
.hero {
  padding: 8px 0 56px;
}
.hero-media {
  position: relative;
  min-height: min(86vh, 820px);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  background: #0b0c0e;
}
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Darken the footage so the headline stays readable. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.57) 70%), linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45));
}
.hero-media > :not(video) {
  position: relative;
  z-index: 1;
}
.hero-media h1,
.hero-media .sub,
.hero-media .label {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.hero .sub {
  color: #e3e5e8;
}
.hero-media .btn.light {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
  .hero-media {
    min-height: 78vh;
    padding: 72px 16px;
  }
}
.hero h1 {
  margin: 20px auto 0;
  max-width: 1240px;
  font-size: clamp(44px, 7.4vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hero h1 .y {
  color: var(--accent);
}
.hero .sub {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.5;
}
.hero .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.built-for {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 48px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #6b7178;
}

/* video */
.video {
  padding-top: 120px;
}
.video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.video-frame img,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.video-frame .play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s;
}
.video-frame:hover .play {
  transform: scale(1.08);
}
.video-frame .play svg {
  margin-left: 4px;
}

/* panels */
.panel {
  border-radius: 16px;
  background: var(--panel);
  padding: 72px 24px 0;
  overflow: hidden;
}
.panel.alt {
  background: var(--panel-2);
}
.panel + .panel,
.stack > * + * {
  margin-top: 16px;
}
.panel h2,
.section h2 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.panel h2 .grey,
.section h2 .grey,
.cta-card h2 .grey {
  display: block;
  color: var(--accent);
}
.blurb {
  margin: 18px auto 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.icons {
  margin: 48px auto 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  text-align: center;
}
.icons svg {
  display: block;
  color: var(--accent);
  margin: 0 auto 10px;
}
.icons b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.icons span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

/* stage screen demo */
.screen {
  margin: 64px auto 0;
  max-width: 1040px;
  border-radius: 16px 16px 0 0;
  background: var(--stage);
  color: #e9ecef;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: left;
  box-shadow: 0 -1px 0 #222428 inset;
}
.screen .head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--label-font);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.screen .head i {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 780 772' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M369.799 0C328.952 0 295.839 32.7727 295.839 73.2V192.15L213.451 110.608C184.568 82.0216 137.739 82.0217 108.856 110.608C79.9728 139.194 79.9728 185.542 108.856 214.128L188.344 292.8H73.9597C33.1129 292.8 0 325.573 0 366C0 406.427 33.1129 439.2 73.9597 439.2H194.144L111.756 520.742C82.8729 549.328 82.873 595.676 111.756 624.262C140.639 652.849 187.468 652.849 216.351 624.262L295.839 545.591V658.8C295.839 699.227 328.952 732 369.799 732C410.645 732 443.758 699.227 443.758 658.8V545.591L527.235 628.21C556.118 656.797 602.947 656.797 631.83 628.21C660.713 599.624 660.713 553.276 631.83 524.69L545.453 439.2H665.637C706.484 439.2 739.597 406.427 739.597 366C739.597 325.573 706.484 292.8 665.637 292.8H551.253L634.73 210.181C663.613 181.594 663.613 135.247 634.73 106.66C605.847 78.0739 559.018 78.0738 530.135 106.66L443.758 192.15V73.2C443.758 32.7728 410.645 0 369.799 0Z' fill='%23FFD300'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: breathe 2.4s ease-in-out infinite;
}
.screen .src {
  margin: 0;
  font-size: clamp(20px, 3vw, 38px);
  line-height: 1.25;
  min-height: 2.5em;
  letter-spacing: -0.02em;
}
.screen .tr {
  margin: 0;
  font-size: clamp(19px, 2.7vw, 34px);
  line-height: 1.45;
  color: var(--accent);
  min-height: 2.9em;
  transition: opacity 0.3s;
}
.screen .caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 4px;
  vertical-align: -0.1em;
  background: var(--accent);
  animation: caret 1s step-end infinite;
}
.wave {
  position: relative;
  height: 36px;
  max-width: 440px;
  overflow: hidden;
}
.wave svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 36px;
  animation: drift 9s linear infinite;
}
.screen .langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.screen .langs button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #2a2f36;
  background: none;
  color: #b3bac2;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.screen .langs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.screen .langs .fi {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
}
.screen .langs button[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 500;
}

/* phones */
.phones {
  margin: 64px auto 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}
.phone {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 9 / 15;
  border-radius: 32px 32px 0 0;
  background: #0b0c0e;
  box-shadow: 0 0 0 8px #2a2d31;
  padding: 28px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform: translateY(8px);
}
.phone .title {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin: 4px 0 6px;
}
.phone .choice {
  min-height: 40px;
  border-radius: 12px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.phone .choice.on {
  background: var(--accent);
  color: #000;
}
.phone .mode {
  border-radius: 12px;
  background: var(--panel-2);
  padding: 12px;
  display: flex;
  gap: 10px;
  text-align: left;
}
.phone .mode b {
  display: block;
  font-weight: 500;
  font-size: 14px;
}
.phone .mode span {
  font-size: 12px;
  color: var(--muted);
}
.phone .mode svg {
  flex: none;
  margin-top: 2px;
}
.phone .cap {
  font-family: var(--label-font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  margin-top: auto;
  padding-bottom: 16px;
}
@media (max-width: 760px) {
  .phones {
    grid-template-columns: 1fr;
    max-width: 260px;
    gap: 40px;
  }
  .phone {
    border-radius: 32px;
    aspect-ratio: auto;
    min-height: 320px;
    transform: none;
  }
  .phone:first-child {
    display: none;
  }
  .phone:last-child {
    margin-bottom: 40px;
  }
}

/* service cards */
.cards {
  margin: 56px auto 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 24px;
  text-align: left;
}
.card {
  background: var(--panel-2);
  border-radius: 14px;
  padding: 28px 26px 30px;
}
.card svg {
  display: block;
  color: var(--accent);
}
.card h3 {
  margin: 18px 0 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* sections on white */
.section {
  padding: 120px 0 0;
}
.steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.steps > div {
  border-top: 2px solid var(--accent);
  padding: 18px 8px 0 0;
}
.steps .n {
  font-family: var(--label-font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.steps h3 {
  margin: 10px 0 6px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}
.checklist {
  border-top: 1px solid var(--line);
}
.check {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.check b {
  font-weight: 500;
}
.check span {
  color: var(--ink-2);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .check {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.lang-cloud {
  margin: 40px auto 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lang-cloud span {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  background: var(--panel-2);
  color: var(--muted);
}
.lang-cloud span.voice {
  background: var(--panel);
  color: var(--ink);
}
.lang-cloud .fi {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  flex: none;
}
.lang-cloud span:not(.voice) .fi {
  opacity: 0.45;
}

/* testimonials */
.quotes {
  margin-top: 56px;
  columns: 3 340px;
  column-gap: 12px;
}
.quote {
  break-inside: avoid;
  margin: 0 0 12px;
  padding: 28px 26px 26px;
  border-radius: 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quote svg {
  width: 18px;
  height: 18px;
}
/* Organisation logos, sized so they look about the same weight. */
.quote .org {
  display: block;
  width: auto;
  max-width: 180px;
  height: 22px;
  object-fit: contain;
  object-position: left center;
}
.quote .org.h-dentsu {
  height: 17px;
}
.quote .org.h-tall {
  height: 34px;
}
.quote blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.quote .orig {
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.quote figcaption b {
  font-weight: 500;
  font-size: 15px;
}
.quote figcaption span {
  font-size: 13px;
  color: var(--accent);
}

/* pricing */
.packs {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}
.pack {
  position: relative;
  border-radius: 16px;
  background: var(--panel);
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pack.best {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pack .tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 600;
}
.pack .credits {
  font-size: 15px;
  color: var(--ink-2);
}
.pack .credits b {
  display: block;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pack .price {
  margin-top: 18px;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.pack .each {
  font-size: 14px;
  color: var(--muted);
}
.pricing-notes {
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  font-size: 15px;
  color: var(--ink-2);
}
.pricing-notes span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pricing-notes svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.pricing-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .packs {
    grid-template-columns: 1fr;
  }
}

/* FAQ */
.faq {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
  background: var(--panel);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: -6px 0 22px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* closing card */
.cta-card {
  margin-top: 120px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(32px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}
.cta-card h2 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.cta-card p {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cta-card .note {
  margin-top: 28px;
  font-size: 15px;
  color: var(--muted);
}
.cta-card .note a {
  color: var(--accent);
}
[hidden] {
  display: none !important;
}
/* quote form */
.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quote-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.quote-form .wide {
  grid-column: 1 / -1;
}
.quote-form input,
.quote-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.quote-form textarea {
  min-height: 132px;
  resize: vertical;
}
.quote-form input:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.quote-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.quote-form .send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.quote-form button[disabled] {
  opacity: 0.6;
  cursor: default;
}
.quote-form .status {
  font-size: 15px;
  color: var(--ink-2);
}
.quote-form .status.error {
  color: #ff8a7a;
}
.quote-sent {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  background: var(--panel);
}
.quote-sent h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--accent);
}
.quote-sent p {
  margin: 0;
}
@media (max-width: 640px) {
  .quote-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .cta-card {
    grid-template-columns: 1fr;
  }
}

/* footer */
footer {
  margin-top: 120px;
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
  font-size: 14px;
}
footer .top {
  display: grid;
  grid-template-columns: 1fr repeat(4, 170px);
  gap: 32px;
}
footer h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
footer ul a {
  text-decoration: none;
  color: var(--ink-2);
}
footer ul a:hover {
  color: var(--ink);
}
footer .bottom {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  color: var(--muted);
}
@media (max-width: 760px) {
  footer .top {
    grid-template-columns: 1fr 1fr;
  }
  footer .top > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- guide and location pages ---------- */
.g-hero {
  padding: 72px 0 24px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--muted);
}
.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent);
}
.crumbs .sep {
  color: var(--line);
}
.g-hero h1 {
  margin: 18px 0 0;
  max-width: 980px;
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.g-hero h1 .y {
  display: block;
  color: var(--accent);
}
.g-intro {
  margin: 24px 0 0;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
}
.g-intro a,
.g-body a {
  color: var(--accent);
}
.g-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.g-body {
  padding-top: 48px;
}
.g-body .g-cards,
.g-body .g-table,
.g-body .g-pills {
  max-width: 1000px;
}
.g-body h2 {
  margin: 64px 0 18px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.g-body > p {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 820px;
}
.ticks li {
  display: flex;
  gap: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ticks .star {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 6px;
}
.g-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.g-card {
  display: block;
  padding: 24px;
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}
a.g-card:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.g-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
a.g-card h3 {
  color: var(--accent);
}
.g-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.g-quote {
  margin: 48px 0 0;
  padding: 28px 32px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 16px 16px 0;
  max-width: 820px;
}
.g-quote blockquote {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
}
.g-quote figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.g-quote figcaption b {
  color: var(--ink);
  font-weight: 500;
}
.g-table {
  overflow-x: auto;
  border-radius: 16px;
  background: var(--panel);
}
.g-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}
.g-table th,
.g-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.g-table thead th {
  color: var(--accent);
  font-weight: 500;
}
.g-table tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.g-table td {
  color: var(--ink-2);
}
.g-table tr:last-child > * {
  border-bottom: 0;
}
.g-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-pills span {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: var(--panel);
  font-size: 15px;
}
.guide-page .faq {
  margin-top: 0;
}
.lang-switch {
  color: var(--accent) !important;
}

/* Contact page: the quote card sits right under the nav, with the page's heading as h1. */
.contact-wrap {
  padding-top: 48px;
}
.contact-page .cta-card {
  margin-top: 24px;
}
.cta-card h1 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.cta-card h1 .grey {
  display: block;
  color: var(--accent);
}
.quote-form .cf-turnstile {
  min-height: 65px;
}

/* Quote popup: opened by any "Get a quote" link (js/quote.js). */
.quote-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  margin: auto;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
}
.quote-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.quote-dialog h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.quote-dialog .intro {
  margin: 12px 0 24px;
  color: var(--ink-2);
}
.quote-dialog .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.quote-dialog .close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.quote-form .ts {
  min-height: 65px;
}

/* Closing "Get a quote" band on the home and guide pages: copy and buttons on the left, the big
   star mark on the right, half out of the card. */
.cta-band {
  position: relative;
  overflow: hidden;
  margin-top: 120px;
  padding: clamp(40px, 7vw, 88px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: radial-gradient(120% 140% at 100% 50%, rgba(255, 211, 0, 0.14), rgba(255, 211, 0, 0) 55%), var(--panel);
}
.cta-band .copy {
  position: relative;
  max-width: 620px;
}
.cta-band h2 {
  margin: 18px 0 0;
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
}
.cta-band h2 span {
  display: block;
  color: var(--accent);
}
.cta-band p {
  margin: 22px 0 0;
  max-width: 520px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
}
.cta-band .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 36px;
}
.cta-band .actions .more {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.cta-band .actions .more:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cta-band .big-star {
  position: absolute;
  top: 50%;
  right: -6%;
  width: clamp(260px, 34vw, 460px);
  height: auto;
  transform: translateY(-50%);
  animation: cta-spin 60s linear infinite;
}
@keyframes cta-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band .big-star {
    animation: none;
  }
}
@media (max-width: 760px) {
  .cta-band .big-star {
    top: auto;
    bottom: -90px;
    right: -70px;
    width: 220px;
    opacity: 0.35;
    transform: none;
    animation: none;
  }
}

/* Walkthrough video on guide pages; "soon" is the placeholder until a recording exists. */
.g-video {
  margin: 8px 0 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.g-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.g-video.soon {
  padding: 28px;
}
.g-video.soon p {
  margin: 10px 0 0;
  color: var(--ink-2);
}