@font-face { font-family: Livvic; font-weight: 400; font-style: normal; font-display: swap;
             src: url("/fonts/Livvic-Regular.woff2") format("woff2"),
                  url("/fonts/Livvic-Regular.ttf") format("truetype"); }
@font-face { font-family: Livvic; font-weight: 500; font-style: normal; font-display: swap;
             src: url("/fonts/Livvic-Medium.woff2") format("woff2"),
                  url("/fonts/Livvic-Medium.ttf") format("truetype"); }
@font-face { font-family: Livvic; font-weight: 600; font-style: normal; font-display: swap;
             src: url("/fonts/Livvic-SemiBold.woff2") format("woff2"),
                  url("/fonts/Livvic-SemiBold.ttf") format("truetype"); }
@font-face { font-family: Livvic; font-weight: 700; font-style: normal; font-display: swap;
             src: url("/fonts/Livvic-Bold.woff2") format("woff2"),
                  url("/fonts/Livvic-Bold.ttf") format("truetype"); }
@font-face { font-family: Livvic; font-weight: 900; font-style: normal; font-display: swap;
             src: url("/fonts/Livvic-Black.woff2") format("woff2"),
                  url("/fonts/Livvic-Black.ttf") format("truetype"); }

:root {
  --ink:          #121510;
  --on-ink:       #ffffff;
  --ink-2:        rgba(18, 21, 16, 0.66);
  --ink-3:        rgba(18, 21, 16, 0.62);
  --ink-faded:    rgba(18, 21, 16, 0.33);

  --bone:         #ffffff;
  --surface:      #ffffff;
  --mist:         #f1f3f0;
  --raised-fill:  linear-gradient(to bottom, #ffffff, #ffffff);
  --raised-edge:  rgba(0, 0, 0, 0.05);
  --hairline:     rgba(18, 21, 16, 0.07);
  --on-image-hairline: rgba(0, 0, 0, 0.08);
  --glass:        rgba(255, 255, 255, 0.96);
  --card-glass:   rgba(255, 255, 255, 0.66);
  --card-glass-edge: rgba(6, 40, 30, 0.08);
  --chip:         #ffffff;
  --field-focus:  rgba(18, 21, 16, 0.35);
  --brand-ink:    #06281e;

  --brand:        #185542;
  --brand-raised: #226953;
  --brand-fill:   linear-gradient(to bottom, #226953, #185542);
  --brand-soft:   rgba(24, 85, 66, 0.10);
  --on-brand:     #ffffff;
  --racing-deep:  #06281e;
  --splash-top:   #1c614c;
  --top-light:    linear-gradient(to bottom, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%);

  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");

  --accent:       #ffbf00;
  --on-accent:    #1a1d14;
  --gold:         #f29e12;

  --success:      #339e5c;
  --warning:      #d98c1a;
  --danger:       #cc2e29;

  --on-tint:      #ffffff;
  --on-tint-2:    rgba(255, 255, 255, 0.95);
  --on-tint-3:    rgba(255, 255, 255, 0.78);
  --on-tint-fill: rgba(255, 255, 255, 0.18);
  --on-tint-fill-subtle: rgba(255, 255, 255, 0.14);

  --r-xl:   28px;
  --r-lg:   22px;
  --r-md:   16px;
  --r-sm:   12px;
  --r-tiny: 2px;
  --r-pill: 999px;

  --b-hairline: 0.5px;
  --b-thin:     0.75px;
  --b-regular:  1px;
  --b-thick:    1.2px;
  --b-heavy:    1.5px;
  --b-xheavy:   2px;

  --sh-hairline:   0 1px 4px rgba(0, 0, 0, 0.06);
  --sh-raised:     0 3px 16px rgba(0, 0, 0, 0.05);
  --sh-card:       0 12px 40px rgba(0, 0, 0, 0.09);
  --sh-control:    0 4px 16px rgba(0, 0, 0, 0.07);
  --sh-button:     0 6px 24px rgba(0, 0, 0, 0.14);
  --sh-chip-rest:  0 3px 12px rgba(0, 0, 0, 0.06);
  --sh-chip-sel:   0 3px 12px rgba(0, 0, 0, 0.16);
  --sh-chip-image: 0 3px 16px rgba(0, 0, 0, 0.22);
  --sh-floating:   0 8px 32px rgba(0, 0, 0, 0.12);
  --sh-overlay:    0 6px 24px rgba(0, 0, 0, 0.20);
  --sh-text-image: 0 1px 8px rgba(0, 0, 0, 0.28);
  --sh-hero-text:  0 3px 20px rgba(0, 0, 0, 0.35);

  --s2: 2px;  --s4: 4px;   --s6: 6px;   --s8: 8px;   --s10: 10px;
  --s12: 12px; --s14: 14px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s28: 28px; --s32: 32px; --s40: 40px; --s56: 56px;

  --button-h:     56px;
  --control-h:    46px;
  --tap:          44px;
  --icon-col:     28px;
  --field-icon:   22px;
  --card-inset:   18px;
  --field-pad-y:  14px;
  --row-pad-y:    14px;

  --d-micro:     120ms;
  --d-quick:     150ms;
  --d-standard:  200ms;
  --d-moderate:  250ms;
  --d-slow:      300ms;
  --dur:         200ms;
  --ease:        cubic-bezier(0.42, 0, 0.58, 1);
  --ease-out:    cubic-bezier(0, 0, 0.58, 1);
  --ease-in:     cubic-bezier(0.42, 0, 1, 1);
  --spring:      cubic-bezier(0.34, 1.4, 0.64, 1);

  --o-disabled:       0.5;
  --o-pressed-strong: 0.9;
  --o-pressed-soft:   0.8;

  --t-page:       clamp(32px, 5.2vw, 58px);
  --t-sheet:      clamp(28px, 3.6vw, 40px);
  --t-section:    clamp(22px, 2.4vw, 30px);
  --t-subsection: 20px;
  --t-body:       16px;
  --t-body-sm:    15px;
  --t-caption:    13px;
  --t-eyebrow:    11px;

  --container: 1200px;
  --gutter:    clamp(1.15rem, 4vw, 2.25rem);
  --nav-h:     56px;
  --nav-offset: 16px;

  --sans:    "Livvic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Livvic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --forest: var(--brand); --forest-700: #0e4a38; --forest-bright: var(--brand);
  --forest-deep: var(--racing-deep); --paper: var(--surface);
  --forest-tint: var(--brand-soft); --forest-tint-border: rgba(24, 85, 66, 0.16);
  --gold-soft: rgba(255, 191, 0, 0.22); --sand: var(--mist);
  --hairline-strong: var(--hairline-strong-v, rgba(18, 21, 16, 0.14));
  --on-photo: var(--on-tint-2);
  --shadow-sm: var(--sh-hairline); --shadow-card: var(--sh-card);
  --shadow-lift: var(--sh-floating); --shadow-nav: var(--sh-floating);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
picture { display: contents; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden;
  scroll-padding-top: calc(var(--nav-offset) + var(--nav-h) + 1.5rem); }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-weight: 500;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-soft); }
:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--forest); border-radius: 6px; }

.skip-link { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--forest); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-nav);
  transition: top var(--dur) var(--ease); }
.skip-link:focus-visible { top: 12px; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

h1 { font-family: var(--display); font-weight: 700; font-size: var(--t-page);
  line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 700; font-size: var(--t-sheet);
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 700; font-size: var(--t-section);
  line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
h4 { font-family: var(--display); font-weight: 700; font-size: var(--t-subsection);
  line-height: 1.2; letter-spacing: -0.012em; }
.serif-i { font-style: normal; font-weight: 900; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s6);
  font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow .ic { width: 14px; height: 14px; color: var(--brand); }
.eyebrow.on-dark { color: var(--on-tint-3); }
.eyebrow.on-dark .ic { color: var(--accent); }
.eyebrow.on-photo { color: var(--on-tint-2); text-shadow: var(--sh-text-image); }
.eyebrow.on-photo .ic { color: var(--on-tint); }

.mark { position: relative; white-space: nowrap; z-index: 0; color: var(--ink); }
.mark::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .07em;
  height: .36em; background: var(--accent); z-index: -1; border-radius: var(--r-tiny);
  transform: rotate(-1.4deg); }
.mark.on-dark { color: var(--on-tint); }

.ic { width: 16px; height: 16px; flex: none; display: block; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  height: var(--button-h); padding: 0 var(--s28); border-radius: var(--r-pill);
  cursor: pointer; border: none; font-family: var(--sans); font-weight: 700;
  font-size: var(--t-body); white-space: nowrap;
  transition: transform var(--d-micro) var(--ease-out), opacity var(--d-micro) var(--ease-out),
    box-shadow var(--dur) var(--ease), background var(--dur), border-color var(--dur); }
.btn .ic { width: 18px; height: 18px; }
.btn--sm { height: var(--control-h); padding: 0 var(--s20); font-size: var(--t-caption); }
.btn:disabled { opacity: var(--o-disabled); pointer-events: none; }
.btn:active { transform: scale(0.985); opacity: var(--o-pressed-strong); }

.btn--primary { background: var(--brand-fill); color: var(--on-brand);
  box-shadow: var(--sh-button); position: relative; }
.btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--b-hairline) solid rgba(255, 255, 255, 0.14); pointer-events: none; }
.btn--primary:hover { background: linear-gradient(to bottom, #2a7a60, #1c6350); }

.btn--secondary, .btn--outline { background: var(--raised-fill); color: var(--ink);
  border: var(--b-thick) solid var(--hairline); box-shadow: var(--sh-control); }
.btn--secondary:hover, .btn--outline:hover { border-color: var(--hairline-strong); }
.btn--secondary:active, .btn--outline:active { transform: scale(0.99); opacity: var(--o-pressed-soft); }

.nav {
  position: fixed; top: var(--nav-offset); left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: max-content;
  max-width: calc(100% - (var(--gutter) * 1.4));
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1.4rem;
  padding: 0 0.55rem 0 1.2rem;
  background: rgba(6, 40, 30, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: var(--b-regular) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-nav);
  transition: top var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.nav.is-scrolled { top: 10px; background: rgba(6, 40, 30, 0.92); border-color: rgba(255, 255, 255, 0.12); }

.nav .brand { display: inline-flex; align-items: center; }
.nav .brand .logo { height: 28px; width: auto; flex: none; display: block; }
@media (max-width: 480px) { .nav .brand .logo { height: 24px; } }

.nav-links { display: none; align-items: center; gap: 1.7rem; }
.nav-links a { font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.78); transition: color var(--dur) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 0.4rem; }

@media (min-width: 920px) { .nav-links { display: inline-flex; } }
@media (max-width: 919px) { .nav-actions .appstore-mini { display: none; } }
@media (max-width: 480px) { .nav { max-width: calc(100% - 16px); padding: 0 0.45rem 0 0.95rem; } }
.appstore-mini svg, .appstore-mini .ic { width: 15px; height: 15px; }
@media (min-width: 900px) { }

.drawer { position: fixed; top: calc(var(--nav-offset) + var(--nav-h) + 10px); left: 50%;
  width: calc(100% - var(--gutter)); max-width: 460px;
  background: var(--glass); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 0.7rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px);
  transition: opacity var(--dur), transform var(--dur), visibility 0s var(--dur); z-index: 99; box-shadow: var(--shadow-lift); }
.drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.drawer a { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 0.85rem 0.35rem; border-bottom: 1px solid var(--hairline); }
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 0.8rem; }
@media (min-width: 900px) { .drawer { display: none; } }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(120px, 17vh, 170px) 0 clamp(70px, 9vh, 96px); isolation: isolate;
  overflow: clip; overflow-clip-margin: 320px; }

@media (max-height: 620px) {
  .hero { min-height: auto;
          padding: calc(var(--nav-offset) + var(--nav-h) + 28px) 0 clamp(32px, 7vh, 56px); }
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 48px; align-items: center; }

.hero-copy { max-width: 620px; }
.hero h1 { color: #fff; font-size: clamp(40px, 6.3vw, 78px); margin: 22px 0 0; line-height: 1.02;
  letter-spacing: -0.022em; text-shadow: 0 2px 40px rgba(4,29,21,0.4); }
.hero h1 .serif-i { color: #fff; }
.hero .lead { color: var(--on-photo); font-size: clamp(17px, 1.55vw, 20px); font-weight: 500;
  margin-top: 24px; max-width: 540px; text-shadow: 0 1px 18px rgba(4,29,21,0.45); }
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 9px); } }
@media (max-width: 980px) { }

.hero-device { display: flex; justify-content: center; }
.phone { position: relative; width: 300px; aspect-ratio: 300 / 624; border-radius: 48px; background: #0a0d09;
  padding: 10px;
  box-shadow:
    0 1px 2px rgba(6, 40, 30, 0.10),
    0 12px 26px -10px rgba(6, 40, 30, 0.20),
    0 34px 62px -34px rgba(6, 40, 30, 0.24);
  animation: floaty 7s var(--ease-out) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; background: #0a0d09; border-radius: 999px; z-index: 4; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.app-chip.on { background: var(--brand-fill); color: var(--on-brand); border-color: transparent;
  box-shadow: var(--sh-chip-sel); }
.app-card .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,29,21,0.97) 2%, rgba(4,29,21,0.5) 36%, rgba(4,29,21,0) 64%); }
.app-card .heart { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); display: grid; place-items: center; }
.app-card .heart svg { width: 16px; height: 16px; color: #fff; }
.app-card .badge { position: absolute; top: 12px; left: 12px; font-size: 10.5px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); padding: 5px 10px; border-radius: var(--r-pill);
  border: var(--b-regular) solid var(--on-image-hairline);
  box-shadow: var(--sh-chip-image); }
.app-card .meta { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; }
.app-card .meta .tname { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.app-card .meta p { font-size: 11.5px; opacity: .9; font-weight: 600; margin-top: 3px; }
.app-card .meta .row { display: flex; gap: 8px; margin-top: 10px; font-size: 11px; font-weight: 700; }
.app-card .meta .row span { display: inline-flex; align-items: center; gap: 4px; background: var(--on-tint-fill); backdrop-filter: blur(8px); padding: 4px 9px; border-radius: var(--r-pill); }
.app-card .meta .row svg { width: 12px; height: 12px; }
.app-nav .item { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.app-nav .item.on { color: var(--brand); }
.app-nav .item svg { width: 21px; height: 21px; }

.trust { background: var(--brand); color: var(--on-brand); }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 34px; padding: 22px var(--gutter); }
.trust .item { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: rgba(255,255,255,0.94); }
.trust .item .ic { width: 17px; height: 17px; color: var(--accent); flex: none; }
.trust .sep { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.28); }
@media (max-width: 620px) { .trust .sep { display: none; } }

.section { padding: clamp(78px, 10vw, 140px) 0; position: relative; }
.sec-head { max-width: 720px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { margin-inline: auto; }
.sec-head h2 { font-size: clamp(32px, 4.6vw, 56px); margin-top: 18px; line-height: 1.04; }
.sec-head p { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); margin-top: 18px; font-weight: 500; max-width: 620px; }
.sec-head.center p { margin-inline: auto; }
.fcard .icw .ic { width: 25px; height: 25px; }

.how { overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 64px; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; left: 16%; right: 16%; height: 2px;
  background-image: linear-gradient(to right, var(--forest-bright) 38%, transparent 0%);
  background-size: 14px 2px; background-repeat: repeat-x; opacity: 0.4; }
.step { position: relative; text-align: center; padding: 0 8px; }
.step .pin { width: 56px; height: 56px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-fill); color: var(--on-brand); font-family: var(--display); font-size: 22px; font-weight: 700;
  box-shadow: 0 12px 26px -10px rgba(11,40,30,0.5), var(--edge-top); position: relative; z-index: 1;
  border: 3px solid var(--sand); }
.step.is-gold .pin { background: var(--brand-fill); color: var(--on-brand); }
.step h3 { font-size: 22px; letter-spacing: -.01em; }
.step p { color: var(--ink-2); font-size: 15px; margin-top: 10px; font-weight: 500; max-width: 300px; margin-inline: auto; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 34px; } .steps::before { display: none; } }

.explore { overflow-x: clip; }
.explore .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; max-width: none; }
.explore .sec-head .left { max-width: 640px; }
.rail { display: flex; gap: 22px; width: 100%; max-width: 100%; overflow-x: auto;
  --rail-inset: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  padding: 54px var(--rail-inset) 30px; scroll-padding-inline: var(--rail-inset);
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.trip { position: relative; flex: 0 0 318px; height: 430px; border-radius: var(--r-xl);
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate; background: var(--racing-deep);
  transition: transform var(--dur) var(--ease-out); }
.trip::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--b-regular) solid rgba(255, 255, 255, 0.12); pointer-events: none; z-index: 3; }
.trip:hover { transform: translateY(-6px); }
.trip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform 700ms var(--ease-out); }
.trip:hover img { transform: scale(1.05); }

.trip .trip-tint { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to bottom,
    rgba(6, 40, 30, 0) 18%, rgba(6, 40, 30, 0.45) 50%,
    rgba(6, 40, 30, 0.85) 78%, rgba(6, 40, 30, 1) 100%),
  linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%); }

.trip .tbody { position: relative; z-index: 2; padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s8);
  color: var(--on-tint); }
.trip .t-handle { display: inline-flex; align-items: center; gap: var(--s6);
  font-size: var(--t-caption); font-weight: 600; color: var(--on-tint-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.trip .t-pro { color: var(--accent); }
.trip .t-route { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--on-tint-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trip .tbody h3 { font-family: var(--display); font-size: 28px; font-weight: 900;
  letter-spacing: -0.5px; line-height: 1.1; color: var(--on-tint);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.trip .t-stats { display: flex; flex-wrap: wrap; gap: var(--s14); margin-top: var(--s2); }
.trip .t-stats .stat { display: inline-flex; align-items: center; gap: var(--s4);
  font-size: 12px; font-weight: 600; color: var(--on-tint-2); white-space: nowrap; }

.platforms { background: var(--forest-deep); color: #fff; overflow: hidden; position: relative; isolation: isolate; }
.platforms::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 540px at 82% -8%, rgba(243,201,60,0.16), transparent 60%),
              radial-gradient(700px 500px at 8% 110%, rgba(24,85,66,0.4), transparent 62%); }
.platforms .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.platforms h2 { color: #fff; font-size: clamp(32px, 4.2vw, 52px); }
.platforms .lead { color: rgba(255,255,255,0.82); font-size: 18px; margin-top: 20px; max-width: 480px; }
.plat-chip .ic { width: 20px; height: 20px; color: var(--accent); }
.plat-visual .tall { grid-row: span 2; aspect-ratio: 3 / 5; }
.plat-visual .pv.sm { aspect-ratio: 1 / 1; }

.free .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.free h2 { font-size: clamp(30px, 3.8vw, 48px); }
.free p { font-size: clamp(16px, 1.4vw, 19px); margin-top: 18px; font-weight: 500; color: var(--ink-2); }
.free .price-tag { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.free .price-tag b { font-family: var(--display); font-size: 48px; font-weight: 700; color: var(--brand); letter-spacing: -.03em; }
.free .price-tag span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.free-points .fp .fpic .ic { width: 21px; height: 21px; }

.cta { position: relative; overflow: hidden; color: var(--ink); text-align: left; isolation: isolate;
  padding: clamp(20px, 4vw, 64px) 0 clamp(56px, 7vw, 96px); }
.cta .cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.cta .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(4,29,21,0.78), rgba(4,29,21,0.92)); }
.cta h2 { font-size: clamp(36px, 5.6vw, 72px); color: var(--ink); }
.cta p { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 20px); margin: 20px auto 0; max-width: 560px; font-weight: 500; }
.cta .cta-actions { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.cta .cta-sub { margin-top: 22px; color: var(--ink-3); font-size: 14px; font-weight: 600; }

.footer { border-top: var(--b-regular) solid var(--hairline); padding-block: 1.85rem; }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 1.5rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-brand .logo { height: 22px; width: auto; }
.footer-copy { font-family: var(--sans); font-size: var(--t-eyebrow); line-height: 1;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.footer-copy a { color: var(--ink-2); transition: color var(--dur); }
.footer-copy a:hover { color: var(--ink); }
.footer-sep { color: var(--ink-faded); margin: 0 0.45rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-links a { font-family: var(--sans); font-size: var(--t-eyebrow); line-height: 1;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3);
  display: inline-block; padding-block: 7px;
  transition: color var(--dur); }
.footer-links a:hover { color: var(--ink); }

.footer-browse { padding-bottom: 1.6rem; margin-bottom: 1.6rem; text-align: center;
  border-bottom: var(--b-hairline, 1px) solid var(--hairline); }
.footer-browse__h { font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600;
  line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.9rem; }
.footer-browse__list { list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0.35rem 1.6rem; }
.footer-browse__list a { font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 600;
  color: var(--ink-2); display: inline-block; padding-block: 3px;
  transition: color var(--dur); }
.footer-browse__list a:hover { color: var(--brand); }

.consent { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 150;
  width: calc(100% - var(--gutter)); max-width: 560px;
  display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; justify-content: space-between;
  background: var(--glass); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px 18px;
  box-shadow: var(--shadow-lift), var(--edge-top); }
.consent[hidden] { display: none; }
body.has-consent { padding-bottom: calc(var(--consent-h, 96px) + 18px + 12px); }
body.has-consent .hero { min-height: calc(100svh - var(--consent-h, 96px) - 30px); }
.consent__text { font-size: 13.5px; font-weight: 500; color: var(--ink-2); flex: 1 1 240px; line-height: 1.5; }
.consent__text a { color: var(--forest-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 480px) {
  .consent__actions { flex: 1 1 100%; }
  .consent__actions .btn { flex: 1; }
  .consent { padding: 12px 14px; gap: 10px 12px; bottom: 12px; }
  .consent__text { font-size: 12.5px; line-height: 1.45; }
}

.subpage { padding-top: calc(var(--nav-offset) + var(--nav-h) + 48px); padding-bottom: clamp(64px, 9vw, 120px); background: var(--paper); min-height: 70vh; }

.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(32px, 5vw, 52px); }
.legal h2 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 44px; }
.legal h3 { font-size: 18px; margin-top: 26px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; font-weight: 500; margin-top: 14px; line-height: 1.7; }
.legal ul { margin-top: 14px; padding-left: 22px; }
.legal li { margin-top: 8px; }
.legal a { color: var(--forest-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--forest); }

.error { display: grid; place-items: center; text-align: center; }
.error .wrap { max-width: 620px; }
.error h1 { font-size: clamp(34px, 6vw, 64px); margin-top: 18px; }
.error p { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); margin: 18px auto 34px; max-width: 460px; font-weight: 500; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero { min-height: auto; }
  .platforms .wrap, .free .wrap { grid-template-columns: 1fr; gap: 40px; }
  .footer .wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer .brand { grid-column: 1 / -1; }
  .trip { flex: 0 0 80vw; height: 400px; }
}
@media (max-width: 420px) {
  .nav { gap: 0.5rem; padding: 0 0.4rem 0 1rem; }
  .footer .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .dl-chev { transition: none; }
  .dl-btn, .dl-btn:active { transition: none; transform: none; }
}


.card {
  background: var(--raised-fill); border-radius: var(--r-lg); padding: var(--card-inset);
  border: var(--b-thin) solid var(--raised-edge);
  box-shadow: var(--sh-hairline), var(--sh-card);
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-family: var(--sans); font-size: var(--t-caption); font-weight: 600;
  padding: var(--s6) var(--s12); border-radius: var(--r-pill);
  background: var(--mist); color: var(--ink); border: var(--b-regular) solid transparent;
}
.chip--badge { padding: var(--s4) var(--s8); font-size: var(--t-eyebrow); }
.chip--accent { background: var(--accent); color: var(--on-accent); border-color: var(--on-image-hairline); }
.chip .ic { width: 14px; height: 14px; }

.field { position: relative; display: block; }
.field > input, .field > select, .field > textarea {
  width: 100%; min-height: 48px; font-family: var(--sans); font-size: var(--t-body);
  font-weight: 500; color: var(--ink); background: var(--surface);
  border: var(--b-regular) solid var(--hairline); border-radius: var(--r-md);
  padding: var(--field-pad-y) var(--s16); appearance: none;
  transition: border-color var(--d-standard) var(--ease), box-shadow var(--d-standard) var(--ease);
}
.field > textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field > select { cursor: pointer; }
.field > :is(input, select, textarea):focus {
  outline: none; border-color: var(--field-focus);
  box-shadow: inset 0 0 0 0.5px var(--field-focus);
}
.field > input::placeholder, .field > textarea::placeholder { color: transparent; }

.field > label {
  position: absolute; left: var(--s16); top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: var(--t-body); font-weight: 500;
  color: var(--ink-2); pointer-events: none; max-width: calc(100% - var(--s32));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: all var(--d-standard) var(--ease);
}
.field > :is(input, textarea):focus ~ label,
.field > :is(input, textarea):not(:placeholder-shown) ~ label,
.field > select:focus ~ label,
.field.is-filled > label {
  top: 0; left: var(--s10); transform: translateY(-50%);
  font-size: 12px; font-weight: 600; padding: 0 var(--s6);
  background: var(--surface); color: var(--ink-2);
}
.field > :is(input, select, textarea):focus ~ label { color: var(--brand); }
.field > textarea ~ label { top: var(--s24); }
.field > textarea:focus ~ label, .field > textarea:not(:placeholder-shown) ~ label { top: 0; }
.field .hint { display: block; margin: var(--s6) 0 0 var(--s16); font-size: 12px;
  font-weight: 500; color: var(--ink-3); }
.field.is-error > :is(input, select, textarea) { border-color: var(--danger); }
.field.is-error .hint { color: var(--danger); }
.fcard .f-tier { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  font-weight: 700; flex: none; }
.fcard.is-accent .f-tier { background: var(--on-tint-fill); color: var(--accent);
  border-color: transparent; }

.frow .icw .ic { width: 20px; height: 20px; }
.frow .f-tier { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  font-weight: 700; flex: none; }

.shot { display: none; }
.shot:has(img) { display: block; border-radius: var(--r-xl); overflow: hidden;
  border: var(--b-regular) solid var(--hairline); box-shadow: var(--sh-card); }

.stage { position: relative; width: 300px; }
.stage .phone { position: relative; z-index: 2; }

.deco { position: absolute; z-index: 0; pointer-events: none; }

.deco-route {
  max-width: none;
  width: 520px; height: 660px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0; opacity: 0.9;
}

.deco-photo {
  width: 152px; border-radius: 14px; overflow: hidden; background: #fff;
  padding: 8px 8px 26px;
  box-shadow: 0 2px 5px rgba(6, 40, 30, 0.07), 0 16px 30px -14px rgba(6, 40, 30, 0.30);
  animation: drift 9s var(--ease-out) infinite;
}
.deco-photo img { width: 100%; height: 118px; object-fit: cover; border-radius: 8px; }
.deco-photo--l { left: -132px; top: 84px;  transform: rotate(-8deg);  animation-delay: -1.2s; }
.deco-photo--r { right: -124px; bottom: 96px; transform: rotate(7deg); animation-delay: -3.4s; }

.deco-badge {
  width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(6, 40, 30, 0.07), 0 12px 22px -10px rgba(6, 40, 30, 0.26);
  animation: drift 7.5s var(--ease-out) infinite;
}
.deco-badge .ic { width: 27px; height: 27px; }
.deco-badge--pin {
  left: -74px; top: -14px; background: var(--accent); color: var(--on-accent);
  transform: rotate(-10deg); animation-delay: -0.6s;
}
.deco-badge--compass {
  right: -68px; top: 176px; background: var(--chip); color: var(--brand-on-surface, var(--brand));
  transform: rotate(9deg); animation-delay: -2.6s;
}

.deco-chip {
  z-index: 3;
  right: -104px; top: 40px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--chip); padding: 9px 14px; border-radius: var(--r-pill);
  box-shadow: 0 2px 4px rgba(6, 40, 30, 0.06), 0 10px 20px -10px rgba(6, 40, 30, 0.24);
  transform: rotate(4deg);
  animation: drift 8.5s var(--ease-out) infinite; animation-delay: -4.1s;
}
.deco-chip .ic { width: 14px; height: 14px; color: var(--brand); }

@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

@media (prefers-reduced-motion: reduce) {
  .deco-photo, .deco-badge, .deco-chip { animation: none; }
}

@media (max-width: 980px) {
  .hero-device { display: flex; margin-top: 46px; }
  .stage { width: min(300px, 58vw); }
  .stage .phone { width: 100%; }

  .deco-photo { width: 34vw; max-width: 152px; padding: 6px 6px 20px; }
  .deco-photo img { height: 26vw; max-height: 118px; }
  .deco-photo--l { left: -18vw; top: 12%; }
  .deco-photo--r { right: -17vw; bottom: 14%; }

  .deco-badge { width: 12vw; max-width: 58px; height: 12vw; max-height: 58px; border-radius: 28%; }
  .deco-badge .ic { width: 5.5vw; max-width: 27px; height: 5.5vw; max-height: 27px; }
  .deco-badge--pin { left: -8vw; top: -2%; }
  .deco-badge--compass { right: -7vw; top: 26%; }

  .deco-chip { right: -14vw; top: 6%; font-size: 11px; padding: 7px 11px; gap: 5px; }
  .deco-route { width: 130%; height: 116%; }
}

@media (max-width: 780px) {
  .footer-bar { justify-content: center; row-gap: 0.5rem; }
  .footer-copy, .footer-links { flex-basis: 100%; }
  .footer-copy { text-align: center; }
  .footer-links { justify-content: center; }
}

body {
  background:
    var(--dither),

    linear-gradient(to top, rgba(255, 191, 0, 0.22) 0%, rgba(255, 191, 0, 0.13) 22%,
                            rgba(255, 191, 0, 0.06) 44%, rgba(255, 191, 0, 0.02) 68%,
                            rgba(255, 191, 0, 0) 100%) bottom / 100% 760px no-repeat,

    linear-gradient(to bottom,
      rgba(120, 160, 145, 0.40) 0px,
      rgba(120, 160, 145, 0.355) 260px,
      rgba(120, 160, 145, 0.305) 520px,
      rgba(120, 160, 145, 0.25) 780px,
      rgba(120, 160, 145, 0.195) 1020px,
      rgba(120, 160, 145, 0.14) 1250px,
      rgba(120, 160, 145, 0.088) 1450px,
      rgba(120, 160, 145, 0.045) 1620px,
      rgba(120, 160, 145, 0.015) 1740px,
      rgba(120, 160, 145, 0) 1820px) top / 100% 1820px no-repeat,

    var(--bone);
  background-size: 160px 160px, 100% 760px, 100% 1820px, auto;
}

.launch-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    var(--dither),
    radial-gradient(58% 22% at 16% 18%, rgba(255, 255, 255, 0.10), transparent 72%),
    radial-gradient(46% 18% at 82% 30%, rgba(255, 255, 255, 0.075), transparent 72%),
    radial-gradient(40% 15% at 52% 9%,  rgba(255, 255, 255, 0.06),  transparent 72%),
    linear-gradient(to bottom,
      var(--racing-deep) 0%,
      #072b21 8%,
      #093221 16%,
      #0b3a2c 24%,
      #0f4534 34%,
      #16553f 44%,
      var(--splash-top) 54%,
      rgba(38, 108, 86, 0.80) 62%,
      rgba(70, 132, 108, 0.56) 71%,
      rgba(100, 150, 128, 0.34) 80%,
      rgba(118, 158, 143, 0.15) 89%,
      rgba(120, 160, 145, 0) 96%,
      rgba(120, 160, 145, 0) 100%);
  background:
    var(--dither),
    radial-gradient(58% 22% at 16% 18%, rgba(255, 255, 255, 0.10), transparent 72%),
    radial-gradient(46% 18% at 82% 30%, rgba(255, 255, 255, 0.075), transparent 72%),
    radial-gradient(40% 15% at 52% 9%,  rgba(255, 255, 255, 0.06),  transparent 72%),
    linear-gradient(to bottom in oklab,
      var(--racing-deep) 0%,
      #072b21 8%,
      #093221 16%,
      #0b3a2c 24%,
      #0f4534 34%,
      #16553f 44%,
      var(--splash-top) 54%,
      rgba(38, 108, 86, 0.80) 62%,
      rgba(70, 132, 108, 0.56) 71%,
      rgba(100, 150, 128, 0.34) 80%,
      rgba(118, 158, 143, 0.15) 89%,
      rgba(120, 160, 145, 0) 96%,
      rgba(120, 160, 145, 0) 100%);
  background-size: 160px 160px, auto, auto, auto, auto;
}

.step .pin { border-color: rgba(255, 255, 255, 0.9); }



.bento {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 60px);
}

.bento-card {
  grid-column: span 2; position: relative; overflow: hidden;
  border-radius: clamp(20px, 2vw, 28px);
  background: var(--card-glass);
  border: var(--b-regular) solid var(--card-glass-edge);
  box-shadow: 0 1px 2px rgba(6, 40, 30, 0.04), 0 14px 34px -22px rgba(6, 40, 30, 0.28);
  padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: var(--s20);
  min-height: 400px;
}
.bento-card--wide { grid-column: span 4; }

.bento-num {
  display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 2px;
  color: var(--brand); opacity: 0.45;
}
.bento-copy h3 {
  display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  margin-top: var(--s6);
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.14; letter-spacing: -0.01em;
}
.bento-copy p {
  margin-top: var(--s12); font-size: var(--t-body-sm); font-weight: 500;
  color: var(--ink-2); max-width: 44ch;
}

.bento-shot { margin: auto -8px calc(clamp(24px, 2.4vw, 34px) * -1 - 90px); display: flex; justify-content: center; }
.bento-shot .phone { width: 232px; animation: none; }

.bento-card--split { flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 48px); }
.bento-card--split .bento-copy { flex: 1 1 auto; }
.bento-card--split .bento-shot { flex: 0 0 auto; margin: 0 0 -120px; }
.bento-card--split .bento-shot .phone { width: 250px; }
.bento-card--centre .bento-copy p { max-width: 56ch; margin-inline: auto; }
.bento-card--centre .bento-copy h3 { justify-content: center; }
.bento-card--centre .bento-shot { margin-bottom: calc(clamp(24px, 2.4vw, 34px) * -1 - 150px); }
.bento-card--centre .bento-shot .phone { width: 268px; }

@media (max-width: 1040px) {
  .bento-card, .bento-card--wide { grid-column: span 3; }
}
@media (max-width: 720px) {
  .bento-card, .bento-card--wide, .bento-card--full { grid-column: span 6; }
  .bento-card--split { flex-direction: column; align-items: stretch; }
  .bento-card--split .bento-shot { margin: auto -8px -110px; }
}

.phone-screen--placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(165deg, var(--splash-top) 0%, var(--racing-deep) 100%);
}
.phone-screen--placeholder .ic {
  width: 76px; height: 76px; color: rgba(255, 255, 255, 0.32);
}

.cta { padding: clamp(20px, 4vw, 64px) 0 clamp(56px, 7vw, 96px); text-align: left; }

.cta-card {
  position: relative; overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 3.4vw, 52px);
  min-height: clamp(400px, 42vw, 520px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(80% 50% at 22% 8%, rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(to bottom,
      var(--racing-deep) 0%, #0c3a2c 14%, #124b3a 28%, var(--splash-top) 42%,
      #34714f 55%, #6b8c5c 68%, #a9a86a 78%, #d4bd75 88%, #ffd98a 100%);
  background:
    radial-gradient(80% 50% at 22% 8%, rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(to bottom in oklab,
      var(--racing-deep) 0%, #0c3a2c 14%, #124b3a 28%, var(--splash-top) 42%,
      #34714f 55%, #6b8c5c 68%, #a9a86a 78%, #d4bd75 88%, #ffd98a 100%);
  box-shadow: 0 2px 6px rgba(6, 40, 30, 0.08), 0 30px 60px -34px rgba(6, 40, 30, 0.42);
}

.cta-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cta-card h2 { color: #fff; font-size: clamp(32px, 4.6vw, 62px); line-height: 1.04; margin: 0; }
.cta-card__brandcol { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; flex: none; }
.cta-card__marklink { display: inline-flex; flex: none; line-height: 0; }

.social {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 10px; list-style: none; margin: 0; padding: 0;
}
.social__btn {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.82);
  border: var(--b-regular) solid rgba(255, 255, 255, 0.24);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.social__btn:hover, .social__btn:focus-visible {
  background: rgba(255, 255, 255, 0.13); color: #fff; border-color: rgba(255, 255, 255, 0.45);
}
.social__btn svg { width: 18px; height: 18px; display: block; }
.cta-card__mark { height: clamp(32px, 3vw, 44px); width: auto; display: block; opacity: 0.95; }

.cta-card__bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}

.cta-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(76% 56% at 100% 100%,
    rgba(6, 40, 30, 0.70) 0%,
    rgba(6, 40, 30, 0.62) 28%,
    rgba(6, 40, 30, 0.40) 54%,
    rgba(6, 40, 30, 0.16) 78%,
    rgba(6, 40, 30, 0) 100%);
}
.cta-card__top, .cta-card__bottom { position: relative; z-index: 1; }

.cta-card__art { position: relative; flex: 0 0 auto; width: 260px; height: 150px; }
.cta-print {
  position: absolute; bottom: 0; width: 136px; border-radius: 12px; overflow: hidden;
  background: #fff; padding: 7px 7px 22px;
  box-shadow: 0 2px 5px rgba(6, 40, 30, 0.10), 0 14px 26px -14px rgba(6, 40, 30, 0.35);
}
.cta-print img { width: 100%; height: 100px; object-fit: cover; border-radius: 7px; }
.cta-print--a { left: 0;   transform: rotate(-7deg); }
.cta-print--b { left: 108px; bottom: 14px; transform: rotate(6deg); }

.cta-card__ask { text-align: right; max-width: 520px; margin-left: auto; }

.cta-card__ask p {
  position: relative; z-index: 1;
  color: #fff; font-size: clamp(16px, 1.4vw, 19px); margin: 0; font-weight: 500;
  line-height: 1.45;
}
.cta-card .cta-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.cta-card .cta-sub { margin-top: 18px; color: rgba(18, 21, 16, 0.62); font-size: 13.5px; font-weight: 600; }

@media (max-width: 860px) {
  .cta-card__top { flex-direction: column; align-items: center; }
  .cta-card h2 { text-align: center; }
  .cta-card__brandcol { order: -1; align-items: center; }
  .social { justify-content: center; }
  .cta-card__bottom { flex-direction: column; align-items: center; }
  .cta-card__art { width: 244px; height: 150px; }
  .cta-card__ask { text-align: center; margin-inline: auto; }
  .cta-card::before {
    background: radial-gradient(120% 42% at 50% 100%,
      rgba(6, 40, 30, 0.70) 0%,
      rgba(6, 40, 30, 0.62) 30%,
      rgba(6, 40, 30, 0.38) 58%,
      rgba(6, 40, 30, 0.14) 80%,
      rgba(6, 40, 30, 0) 100%);
  }
  .cta-card .cta-actions { justify-content: center; }
}

@media (max-width: 360px) {
  .cta-card__art { width: 208px; height: 128px; }
  .cta-print { width: 116px; }
  .cta-print img { height: 85px; }
  .cta-print--b { left: 92px; }
}

.dl { position: relative; display: inline-block; }
.dl > summary { list-style: none; cursor: pointer; }
.dl > summary::-webkit-details-marker { display: none; }

.dl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 26px; border-radius: var(--r-pill);
  background: #fff; color: var(--racing-deep);
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  box-shadow: 0 2px 6px rgba(6, 40, 30, 0.10), 0 14px 28px -16px rgba(6, 40, 30, 0.5);
  transition: transform var(--d-micro) var(--ease-out);
}
.dl-btn:active { transform: scale(0.985); }
.dl-chev { width: 17px; height: 17px; transition: transform var(--dur) var(--ease); }
.dl[open] .dl-chev { transform: rotate(180deg); }

.dl-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 274px; padding: 8px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: var(--b-regular) solid var(--card-glass-edge);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(6, 40, 30, 0.08), 0 26px 52px -22px rgba(6, 40, 30, 0.55);
  animation: dlIn 160ms var(--ease-out);
}
@keyframes dlIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dl-menu { animation: none; } }

.dl-opt {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 13px; color: var(--ink);
  transition: background var(--d-micro);
}
.dl-opt:hover, .dl-opt:focus-visible { background: var(--brand-soft); }
.dl-opt__ic { width: 26px; display: grid; place-items: center; color: var(--brand-ink); flex: none; }
.dl-opt__ic svg { width: 19px; height: 19px; }
.dl-opt__t { display: flex; flex-direction: column; line-height: 1.25; }
.dl-opt__t b { font-size: 15.5px; font-weight: 700; }
.dl-opt__t small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }

@media (max-width: 980px) {
  .dl-menu { left: 50%; transform: translateX(-50%); }
  @keyframes dlIn { from { opacity: 0; } to { opacity: 1; } }

  .dl-menu { min-width: 0; width: min(274px, calc(100vw - 28px)); }
}

.dl--right .dl-menu { left: auto; right: 0; }

.dl--nav .dl-btn {
  height: 40px; padding: 0 var(--s16); gap: var(--s8);
  font-size: var(--t-caption); font-weight: 700;
  background: #fff; color: var(--racing-deep);
  box-shadow: var(--sh-control);
}
.dl--nav .dl-chev { width: 14px; height: 14px; }
.dl-btn--icon { padding: 0 var(--s12); gap: 5px; }
.dl-btn--icon .dl-ic { width: 18px; height: 18px; flex: none; }

.dl--cta .dl-btn {
  height: 56px; padding: 0 26px; gap: 10px;
  background: #fff; color: var(--racing-deep); font-size: 17px;
  box-shadow: 0 2px 6px rgba(6, 40, 30, 0.10), 0 12px 24px -14px rgba(6, 40, 30, 0.36);
}
.dl--cta .dl-menu { top: auto; bottom: calc(100% + 10px); }

@media (max-width: 980px) {
  .dl--right .dl-menu { left: auto; right: 0; transform: none; }
}

.hero:has(.dl[open]), .hero.dl-open { z-index: 20; }
.dl-menu { text-align: left; }

@media (max-width: 860px) {
  .dl--cta .dl-menu { left: 50%; right: auto; transform: translateX(-50%); }
}


:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
  color-scheme: dark;
  --ink:          #edf1ea;
  --on-ink:       #121510;
  --ink-2:        rgba(237, 241, 234, 0.74);
  --ink-3:        rgba(237, 241, 234, 0.60);
  --ink-faded:    rgba(237, 241, 234, 0.37);
  --bone:         #0b100e;
  --surface:      #141b18;
  --mist:         #1e2623;
  --raised-fill:  linear-gradient(to bottom, #141b18, #141b18);
  --raised-edge:  rgba(255, 255, 255, 0.09);
  --hairline:     rgba(255, 255, 255, 0.09);
  --hairline-strong-v: rgba(255, 255, 255, 0.18);
  --brand:        #26785d;
  --brand-on-surface: #35a681;
  --brand-soft:   rgba(38, 120, 93, 0.18);
  --accent:       #ffcb2e;
  --on-accent:    #10130d;
  --gold:         #fab833;
  --success:      #6bcc8c;
  --warning:      #f2b852;
  --danger:       #f2756b;
  --glass:        rgba(20, 27, 24, 0.94);
  --card-glass:   rgba(20, 27, 24, 0.72);
  --card-glass-edge: rgba(255, 255, 255, 0.09);
  --chip:         #1e2623;
  --field-focus:  rgba(237, 241, 234, 0.45);
  --brand-ink:    #35a681;
  }
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --ink:          #edf1ea;
  --on-ink:       #121510;
  --ink-2:        rgba(237, 241, 234, 0.74);
  --ink-3:        rgba(237, 241, 234, 0.60);
  --ink-faded:    rgba(237, 241, 234, 0.37);
  --bone:         #0b100e;
  --surface:      #141b18;
  --mist:         #1e2623;
  --raised-fill:  linear-gradient(to bottom, #141b18, #141b18);
  --raised-edge:  rgba(255, 255, 255, 0.09);
  --hairline:     rgba(255, 255, 255, 0.09);
  --hairline-strong-v: rgba(255, 255, 255, 0.18);
  --brand:        #26785d;
  --brand-on-surface: #35a681;
  --brand-soft:   rgba(38, 120, 93, 0.18);
  --accent:       #ffcb2e;
  --on-accent:    #10130d;
  --gold:         #fab833;
  --success:      #6bcc8c;
  --warning:      #f2b852;
  --danger:       #f2756b;
  --glass:        rgba(20, 27, 24, 0.94);
  --card-glass:   rgba(20, 27, 24, 0.72);
  --card-glass-edge: rgba(255, 255, 255, 0.09);
  --chip:         #1e2623;
  --field-focus:  rgba(237, 241, 234, 0.45);
  --brand-ink:    #35a681;
}