/* Kelana landing — no build step. Tokens match the app. */
:root {
  --ink: #0E2A1F;
  --green: #106847;
  --green-deep: #185842;
  --marigold: #F4B93C;
  --paper: #F8FBF9;
  --white: #FFFFFF;
  --ink-soft: #46584F;      /* body text on paper/white, AA */
  --line: #DCD6C8;
  --tint: #E6EFE9;          /* pale green surface */
  --block: #143A30;         /* map blocks */
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1120px;
  --gutter: 20px;
  --loop: 14s;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--ink-soft); font-weight: 400; }
.t-right { text-align: right; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.closing :focus-visible, .site-footer :focus-visible { outline-color: var(--marigold); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-small { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-deep); }
.btn-ghost { color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-outline { color: var(--green-deep); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: var(--white); }
.btn-accent { background: var(--marigold); color: var(--ink); }
.btn-accent:hover { background: #F6BB5E; }
.btn-ghost-light { color: var(--paper); border-color: rgba(246, 243, 236, .6); }
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246, 243, 236, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
  text-decoration: none;
}
.site-nav { display: none; gap: 28px; }
.site-nav a, .link-quiet {
  font-weight: 500; font-size: .9375rem; text-decoration: none;
  padding: 10px 2px;
}
.site-nav a:hover, .link-quiet:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-cta { display: none; }

/* ---------- hero ---------- */
.hero { padding-block: 40px 56px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
h1 {
  font-size: clamp(2.125rem, 1.2rem + 4.4vw, 3.75rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.035em;
  text-wrap: balance;
}
.lede {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--ink-soft);
}
.hero .cta-row { margin-top: 28px; }
.hero-note { margin-top: 18px; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- trip illustration ---------- */
.trip {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px;
  min-width: 0;
}
.trip-map { width: 100%; height: auto; border-radius: var(--radius); }
.map-label {
  font-family: inherit; font-size: 13px; font-weight: 600; fill: var(--paper);
}
.fence {
  fill: rgba(242, 169, 59, .12);
  stroke: var(--marigold); stroke-opacity: .7; stroke-width: 1.5; stroke-dasharray: 4 5;
}
.driver {
  offset-path: path("M40 260H150V170H290V80H380");
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: drive var(--loop) linear infinite;
}
.driver-pulse {
  fill: var(--paper); opacity: .25;
  transform-box: fill-box; transform-origin: center;
  animation: pulse 2s ease-out infinite;
}

.trip-body { padding: 16px 10px 10px; }
.trip-steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  font-size: .875rem; font-weight: 600;
}
.step { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.pip {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--white);
}
.step-1 { animation: s1 var(--loop) step-end infinite; }
.step-2 { animation: s2 var(--loop) step-end infinite; }
.step-3 { animation: s3 var(--loop) step-end infinite; }
.step-4 { animation: s4 var(--loop) step-end infinite; }
.step-1 .pip { animation: p1 var(--loop) step-end infinite; }
.step-2 .pip { animation: p2 var(--loop) step-end infinite; }
.step-3 .pip { animation: p3 var(--loop) step-end infinite; }
.step-4 .pip { animation: p4 var(--loop) step-end infinite; }

.meter { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.meter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.meter-label { font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
.meter-chip {
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  background: var(--marigold); color: var(--ink);
  padding: 3px 10px; border-radius: 999px;
  opacity: 0; animation: after var(--loop) step-end infinite;
}
.meter-value {
  position: relative; height: 2.6rem;
  font-size: 2.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 2.6rem;
}
.val { position: absolute; left: 0; top: 0; }
.val-before { animation: before var(--loop) step-end infinite; }
.val-after { opacity: 0; animation: after var(--loop) step-end infinite; }
.meter-track { height: 8px; border-radius: 4px; background: var(--tint); overflow: hidden; margin-top: 6px; }
.meter-fill {
  height: 100%; width: 100%; background: var(--green); border-radius: 4px;
  transform-origin: left center;
  animation: fill var(--loop) ease-out infinite;
}

/* timeline: 0–32% to pickup · 32–44% arrived · 44–84% on trip · 84–100% completed */
@keyframes drive {
  0% { offset-distance: 0%; }
  32%, 44% { offset-distance: 38.46%; }
  84%, 100% { offset-distance: 100%; }
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .45; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes s1 { 0% { color: var(--ink); } 32% { color: var(--ink-soft); } }
@keyframes s2 { 0% { color: var(--ink-soft); } 32% { color: var(--ink); } 44% { color: var(--ink-soft); } }
@keyframes s3 { 0% { color: var(--ink-soft); } 44% { color: var(--ink); } 84% { color: var(--ink-soft); } }
@keyframes s4 { 0% { color: var(--ink-soft); } 84% { color: var(--ink); } }
@keyframes p1 {
  0% { background: var(--marigold); border-color: var(--marigold); }
  32% { background: var(--green); border-color: var(--green); }
}
@keyframes p2 {
  0% { background: var(--white); border-color: var(--line); }
  32% { background: var(--marigold); border-color: var(--marigold); }
  44% { background: var(--green); border-color: var(--green); }
}
@keyframes p3 {
  0% { background: var(--white); border-color: var(--line); }
  44% { background: var(--marigold); border-color: var(--marigold); }
  84% { background: var(--green); border-color: var(--green); }
}
@keyframes p4 {
  0% { background: var(--white); border-color: var(--line); }
  84% { background: var(--green); border-color: var(--green); }
}
@keyframes before { 0% { opacity: 1; } 84% { opacity: 0; } }
@keyframes after { 0% { opacity: 0; } 84% { opacity: 1; } }
@keyframes fill {
  0%, 84% { transform: scaleX(1); }
  90%, 100% { transform: scaleX(.95); }
}

/* ---------- sections ---------- */
.section { padding-block: 64px; }
section[id] { scroll-margin-top: 64px; }
.section-white { background: var(--white); }
h2 {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  max-width: 20em; text-wrap: balance;
}
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.section-lede { margin-top: 14px; max-width: 40em; color: var(--ink-soft); font-size: 1.0625rem; }
.fine { margin-top: 18px; max-width: 52em; font-size: .875rem; color: var(--ink-soft); }
.sub-h { margin-top: 48px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

/* how it works: a route with three stops */
.flow { margin-top: 36px; display: grid; gap: 0; }
.flow li { position: relative; padding: 0 0 32px 60px; }
.flow li:last-child { padding-bottom: 0; }
.flow li::before {
  content: ""; position: absolute; left: 19px; top: 40px; bottom: 0;
  border-left: 3px dotted var(--green);
}
.flow li:last-child::before { display: none; }
.flow-num {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 800;
}
.flow li:last-child .flow-num { background: var(--marigold); color: var(--ink); }
.flow h3 { padding-top: 7px; }
.flow p { margin-top: 8px; color: var(--ink-soft); max-width: 32em; }

/* USP list */
.points { margin-top: 32px; border-top: 2px solid var(--ink); }
.point { padding-block: 22px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.point dt { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.point dd { color: var(--ink-soft); max-width: 38em; }

/* plans */
.plans { margin-top: 32px; display: grid; gap: 16px; }
.plan {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column;
}
.plan h3 { font-size: 1.25rem; font-weight: 800; }
.plan-dur { color: var(--ink-soft); font-size: .9375rem; }
.plan-price { margin-top: 16px; font-size: 1.875rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.plan-facts { margin-block: 18px 22px; border-top: 1px solid var(--line); }
.plan-facts div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-block: 10px; border-bottom: 1px solid var(--line);
}
.plan-facts dt { color: var(--ink-soft); font-size: .9375rem; }
.plan-facts dd { font-weight: 600; text-align: right; }
.bonus { background: var(--marigold); color: var(--ink); padding: 2px 10px; border-radius: 999px; font-size: .875rem; white-space: nowrap; }
.plan .btn { margin-top: auto; }

/* tables that restack on small screens */
.stack-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display: block; }
.stack-table tr {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px;
}
.section-white .stack-table tr { background: var(--paper); border-color: transparent; }
.stack-table tbody th { text-align: left; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.stack-table td {
  display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px;
  padding-block: 7px; text-align: left; border-top: 1px solid var(--line);
}
.stack-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: .875rem; font-weight: 500; }
.rates td strong { font-weight: 800; }
.compare td { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 9px; }
.compare td.col-kelana { font-weight: 600; color: var(--green-deep); }

/* rollover / refund */
.choices { margin-top: 32px; display: grid; gap: 16px; }
.choice {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column;
}
.choice-roll { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.choice p { margin-top: 10px; color: var(--ink-soft); }
.choice-roll p { color: #C9D6CF; }
.ledger { margin-top: auto; padding-top: 22px; }
.ledger div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 10px; border-top: 1px solid var(--line);
}
.choice-roll .ledger div { border-color: rgba(246, 243, 236, .22); }
.ledger dt { font-size: .9375rem; }
.ledger dd { font-weight: 600; white-space: nowrap; }
.ledger .ledger-total { border-top-width: 2px; border-top-color: currentColor; }
.ledger-total dt { font-weight: 600; }
.ledger-total dd { font-size: 1.25rem; font-weight: 800; }
.choice-roll .ledger-total dd { color: var(--marigold); }

/* FAQ */
.faq-grid { display: grid; gap: 28px; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--green-deep); }
.faq details p { padding: 0 2px 20px; max-width: 40em; color: var(--ink-soft); }

/* closing */
.closing { background: var(--ink); color: var(--paper); padding-block: 72px; }
.closing h2 { max-width: 16em; }
.closing p { margin-top: 16px; max-width: 34em; color: #C9D6CF; font-size: 1.0625rem; }
.closing .cta-row { margin-top: 28px; }

/* footer */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 32px 28px; border-top: 1px solid rgba(246, 243, 236, .16); }
.footer-row { display: grid; gap: 24px; }
.footer-brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.footer-tag { color: #C9D6CF; font-size: .9375rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-nav a { font-size: .9375rem; padding-block: 8px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.copyright { margin-top: 24px; font-size: .875rem; color: #C9D6CF; }

/* ---------- breakpoints ---------- */
@media (min-width: 480px) {
  .trip-steps { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .header-cta { display: inline-flex; }
}

@media (min-width: 760px) {
  :root { --gutter: 32px; }
  .section { padding-block: 96px; }
  .hero { padding-block: 64px 88px; }

  .flow { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .flow li { padding: 60px 0 0; }
  .flow li::before {
    left: 48px; right: -32px; top: 19px; bottom: auto;
    border-left: 0; border-top: 3px dotted var(--green);
  }

  .point { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: baseline; padding-block: 26px; }
  .choices { grid-template-columns: 1fr 1fr; }

  /* back to real tables */
  .stack-table { display: table; }
  .stack-table thead { display: table-header-group; position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
  .stack-table tbody { display: table-row-group; }
  .stack-table tr { display: table-row; background: none; border: 0; }
  .section-white .stack-table tr { background: none; }
  .stack-table th, .stack-table td { display: table-cell; padding: 16px 16px; vertical-align: top; text-align: left; border-top: 0; border-bottom: 1px solid var(--line); }
  .stack-table td::before { content: none; }
  .stack-table thead th, .stack-table thead td { font-size: .875rem; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid var(--ink); vertical-align: bottom; }
  .stack-table tbody th { font-size: 1rem; margin: 0; }
  .stack-table .t-right { text-align: right; }
  .stack-table th:first-child, .stack-table td:first-child { padding-left: 0; }
  .rates { background: none; }
  .compare { table-layout: fixed; }
  .compare .col-kelana { background: var(--tint); }
  .compare thead .col-kelana { color: var(--green-deep); font-size: 1rem; font-weight: 800; border-radius: var(--radius) var(--radius) 0 0; }

  .closing { padding-block: 104px; }
  .footer-row { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 960px) {
  .site-nav { display: flex; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .faq-grid h2 { position: sticky; top: 96px; }
}

/* ---------- reduced motion: show the finished trip ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq summary::after { transition: none; }
  .driver { animation: none; offset-distance: 100%; }
  .driver-pulse { animation: none; opacity: 0; }
  .trip-steps .step, .trip-steps .pip, .meter .meter-chip, .meter .val, .meter .meter-fill { animation: none; }
  .trip-steps .step { color: var(--ink-soft); }
  .trip-steps .step-4 { color: var(--ink); }
  .trip-steps .pip { background: var(--green); border-color: var(--green); }
  .meter .val-before { opacity: 0; }
  .meter .val-after, .meter .meter-chip { opacity: 1; }
  .meter-fill { transform: scaleX(.95); }
}