@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/plowday/fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/plowday/fonts/bricolage-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0B1030;
  --night-2: #0D1338;
  --surface: #141C4A;
  --line: #273064;
  --snow: #EEF2FF;
  --text: #E2E7F5;
  --muted: #9AA3C7;
  --accent: #F28C1B;
  --beacon: #FFD23F;
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --r-control: 8px;
  --r-card: 14px;
  --r-stage: 20px;
  --gutter: 16px;
  --measure: 34rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; color: var(--snow); text-wrap: balance; margin: 0; }
p, li, figcaption, dd { text-wrap: pretty; }
p { margin: 0; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
kbd {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--snow);
  background: color-mix(in srgb, var(--snow) 10%, transparent);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -64px;
  background: var(--snow); color: var(--night); padding: 10px 14px; border-radius: var(--r-control);
  font-weight: 600; z-index: 20; text-decoration: none;
}
.skip:focus { top: 12px; }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.page { position: relative; z-index: 1; }

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand-top { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--snow); text-decoration: none; }
.brand-top img { width: 28px; height: 28px; border-radius: 7px; }
.top-links { display: flex; align-items: center; gap: 6px; }
.top-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; border-radius: var(--r-control); }
/* Language switch: the current language is plain text, the other one is a link to its page */
.lang { display: inline-flex; align-items: center; margin-left: 6px; margin-right: -10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.lang .lang-on { color: var(--snow); padding: 0 6px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.lang .lang-sep { color: var(--line); }
.top-links .lang a { padding: 0 10px 0 6px; font-size: 14px; color: var(--muted); }

/* Hero: a dusk scene, the drift along the bottom, the plow crossing once. The copy and the real app
   loop in a Mac frame sit side by side from 1024 px, stacked below that. */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: min(100svh, 920px); display: grid; align-items: center;
  padding: 104px 0 clamp(150px, 22vh, 220px);
  background: linear-gradient(180deg, rgba(7, 10, 34, 0) 0%, rgba(11, 16, 48, 0.15) 40%, rgba(23, 24, 71, 0.85) 72%, rgba(42, 36, 88, 0.95) 100%);
}
.hero-stars, .hero-hills, .hero-drift { position: absolute; left: 0; width: 100%; pointer-events: none; }
.hero-stars { top: 0; height: 72%; }
.hero-hills { bottom: 0; height: clamp(120px, 24vh, 230px); }
.hero-drift { bottom: -1px; height: clamp(30px, 5vh, 48px); }
/* Deep snow ahead of the plow. The mask edge rides with the blade (x 175 of the 212 px truck), so the
   snow left of the blade is gone and the thin drift below stays as the cleared road. Same clock as drive. */
.hero-deep {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(48px, 8vh, 80px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 calc(50% + 30px)); mask-image: linear-gradient(90deg, transparent 50%, #000 calc(50% + 30px));
  -webkit-mask-size: calc(200vw + 600px) 100%; mask-size: calc(200vw + 600px) 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: clear 6s cubic-bezier(0.4, 0, 0.6, 1) 0.4s both;
}
.claim .nb { white-space: nowrap; }
.truck { position: absolute; left: 0; bottom: clamp(8px, 1.8vh, 18px); width: 212px; height: 94px; pointer-events: none; will-change: transform; }
.hero-inner { position: relative; z-index: 1; display: grid; gap: 48px; justify-items: center; text-align: center; }
.hero-copy { display: grid; justify-items: center; max-width: 36rem; }
.hero h1 {
  font-size: clamp(56px, min(8.3vw, 11vh), 112px);
  font-weight: 600; line-height: 1; letter-spacing: -0.035em;
}
.hero .claim {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text); margin-top: 20px;
}
.hero .claim b { font-weight: 500; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; margin-top: 36px; }
.hero-actions .btn { min-height: 60px; padding-inline: 24px; }

/* The Mac frame around the app loop: a dark bezel and a thin base, nothing else. */
.hero-mac { margin: 0; width: min(100%, 800px); }
.mac-screen {
  position: relative; padding: 2.1%; border-radius: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 4px 4px;
  background: linear-gradient(180deg, #1A1D2C, #0B0C14);
  box-shadow: inset 0 0 0 1px #2E3454, 0 40px 90px -36px rgba(0, 0, 0, 0.85), 0 0 120px -40px rgba(190, 205, 255, 0.25);
}
.mac-screen video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: #0A0E2A; }
.mac-base {
  position: relative; height: clamp(8px, 1.3vw, 14px); margin: 0 -5.5%;
  background: linear-gradient(180deg, #8A91B4 0%, #5A6186 22%, #333957 70%, #1E2238 100%);
  border-radius: 1px 1px 40% 40% / 1px 1px 100% 100%;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.8);
}
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); background: #2A2F4A; border-radius: 0 0 8px 8px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; }
}
/* Below 1280 px the margin beside the column is too narrow for the wider base: inset the frame a little. */
@media (max-width: 1279px) {
  .hero-mac { padding-inline: 3%; }
  .mac-base { margin-inline: -3.2%; }
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 56px; align-items: center; justify-items: stretch; text-align: left; }
  .hero-copy { justify-items: start; }
  .hero h1 { font-size: clamp(64px, min(7.4vw, 12vh), 112px); }
  .hero-actions { justify-content: flex-start; }
  .hero-mac { width: 100%; justify-self: end; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--night);
  font-family: var(--body); font-weight: 600; font-size: 17px;
  border: 0; border-radius: var(--r-control); cursor: pointer; text-decoration: none;
  transition: transform 140ms var(--ease-out-expo), background-color 140ms var(--ease-out-expo);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn-quiet {
  background: transparent; color: var(--snow);
  border: 1px solid var(--line);
}
/* Buy now: the label and a small sublabel stacked inside one button */
.btn-buy { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 56px; padding: 7px 22px 8px; line-height: 1.2; }
.btn-buy .btn-sub { font-size: 13px; font-weight: 500; opacity: 0.78; }
.hero-actions .btn-buy { align-items: center; }
.btn[disabled] { background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
:focus-visible { outline: 3px solid var(--snow); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn:not([disabled]):hover { background: color-mix(in srgb, var(--accent) 85%, white); }
  .btn-quiet:not([disabled]):hover { background: color-mix(in srgb, var(--snow) 8%, transparent); border-color: var(--muted); }
  .brand-top:hover, .foot a:hover, .top-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Entrance: one moment */
.hero h1, .hero .claim, .hero-actions, .hero-mac, .top .wrap {
  animation: rise 0.7s var(--ease-out-expo) both;
}
.hero h1 { animation-name: fade; animation-delay: 0.05s; }
.hero-mac { animation-delay: 0.2s; animation-duration: 0.9s; }
.hero .claim { animation-delay: 0.3s; }
.hero-actions { animation-delay: 0.42s; }
.top .wrap { animation-name: fade; animation-delay: 0.6s; }
.truck { animation: drive 6s cubic-bezier(0.4, 0, 0.6, 1) 0.4s both; }
.pw-beacon { animation: beacon 1.2s ease-in-out infinite alternate; }
.pw-beacon-b { animation-delay: -0.6s; }
@keyframes beacon { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes clear {
  from { -webkit-mask-position: calc(-100vw - 355px) 0; mask-position: calc(-100vw - 355px) 0; }
  to { -webkit-mask-position: -65px 0; mask-position: -65px 0; }
}
@keyframes drive { from { transform: translateX(-230px); } to { transform: translateX(calc(100vw + 60px)); } }

/* Sections */
section { padding: 96px 0; }
.band { background: color-mix(in srgb, var(--night-2) 94%, transparent); }
h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; }
.lead { font-size: 19px; color: var(--muted); max-width: var(--measure); margin-top: 16px; }
.head { max-width: 48rem; }

/* Film and stage */
.stage {
  position: relative; margin: 40px 0 0;
  border-radius: var(--r-stage); overflow: hidden;
  background: #0A0E2A;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
  aspect-ratio: 16 / 10;
}
.stage video { width: 100%; height: 100%; object-fit: cover; }
.stage-wide { aspect-ratio: 16 / 9; }
.stage-wide video { object-fit: contain; }
.launch { padding-bottom: 0; }

/* Tools bento */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 40px;
}
.cell {
  grid-column: span 12;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.cell img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.cell-body { padding: 20px 22px 24px; }
.cell h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cell h3 kbd { font-weight: 400; }
.cell p { color: var(--muted); margin-top: 10px; }
.cell .tease { color: var(--text); font-size: 15px; margin-top: 14px; }
/* Demo or full version, one small mark per tool cell */
.avail { display: inline-block; margin-bottom: 12px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--snow); }
.avail-full { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.cell-accent .avail { align-self: flex-start; margin-top: 18px; border-color: color-mix(in srgb, var(--night) 40%, transparent); color: var(--night); }
.tools-buy { display: flex; justify-content: center; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.tools-buy .btn-big { width: min(100%, 420px); }
.cell-accent {
  background: var(--accent); color: var(--night); border-color: var(--accent);
  grid-template-rows: 1fr; align-content: end;
}
.cell-accent .cell-body { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 220px; }
.cell-accent h3 { color: var(--night); }
.cell-accent p { color: color-mix(in srgb, var(--night) 72%, var(--accent)); }
.sun { width: 36px; height: 36px; margin-bottom: auto; fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 768px) {
  .cell-shovel { grid-column: span 6; }
  .cell-blower { grid-column: span 6; }
  .cell-plow { grid-column: span 8; }
  .cell-accent { grid-column: span 4; }
}
@media (min-width: 1024px) {
  .cell-plow { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .cell-plow img { height: 100%; aspect-ratio: auto; }
  .cell-plow .cell-body { align-self: center; padding: 28px; }
}

/* Slide-off */
.slide .wrap { display: grid; gap: 32px; align-items: center; }
.slide figure { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
@media (min-width: 1024px) {
  .slide .wrap { grid-template-columns: 5fr 7fr; gap: 56px; }
}

/* Honest rows */
.rows { margin: 40px 0 0; display: grid; }
.row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row dt { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--snow); letter-spacing: -0.01em; }
.row dd { margin: 0; color: var(--muted); max-width: var(--measure); }
.row dd img { margin-top: 12px; width: 320px; height: 28px; border-radius: 6px; border: 1px solid var(--line); }
@media (min-width: 768px) {
  .row { grid-template-columns: 220px 1fr; gap: 24px; }
}

/* Settings */
.settings .wrap { display: grid; gap: 32px; }
.shot { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #1E1E1E; }
.shot img { width: 100%; }
.shot-panel { width: min(299px, 100%); border-radius: 22px; background: #1C1C1E; }
.head .shot-panel { margin-top: 36px; }
@media (min-width: 1024px) {
  .settings .wrap { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
}

/* Buy */
.plans { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 40px; }
.plan {
  grid-column: span 12;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 26px 28px; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start;
}
.plan-full { border-color: var(--accent); }
.plan h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.plan .price { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; color: var(--snow); margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.plan .price small { font-family: var(--body); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--muted); }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; color: var(--muted); }
.plan li { padding: 6px 0; }
/* The full-version list carries the tiles of the app's own Settings: a rounded square in the section
   tint with a white glyph. The plow glyph is the app's PlowGlyph path. */
.plan-full li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; padding: 7px 0; }
.ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 6px 14px -8px rgba(0, 0, 0, 0.8);
}
.ico svg { width: 19px; height: 19px; }
.ico svg.wide { width: 23px; height: 15px; }
.ico-blue { background: linear-gradient(180deg, #4E9CFF, #2985FA 55%, #1F6EDB); }
.ico-plow { background: linear-gradient(180deg, #FFA749, #F28C1B 55%, #DB6E0A); }
.ico-dusk { background: linear-gradient(180deg, #29385C, #5C6B94 60%, #9E99B3); }
.ico-grey { background: linear-gradient(180deg, #A2A4AC, #8C8F99 55%, #73767F); }
.plan li b { font-weight: 600; color: var(--snow); }
.plan .sub { color: var(--muted); font-size: 15px; margin-top: 14px; }
.plan .buy-action { display: grid; gap: 12px; justify-items: start; margin-top: 26px; align-self: end; }
.plan-demo .buy-action .btn { min-height: 56px; }
.plan .note { color: var(--muted); font-size: 15px; }
.plan .note:empty { display: none; }
.plan .sys { color: var(--snow); font-size: 15px; font-weight: 600; }
/* The seat picker: three equal choices, the chosen one carries the accent. Buy now buys the chosen one. */
.seats { width: 100%; margin-bottom: 6px; }
.seats-h { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--snow); letter-spacing: -0.01em; margin-bottom: 10px; }
.seat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seat {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  min-height: 92px; padding: 14px 14px 13px; text-align: left;
  background: color-mix(in srgb, var(--snow) 4%, transparent); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; font: inherit; cursor: pointer;
  transition: border-color 140ms var(--ease-out-expo), background-color 140ms var(--ease-out-expo), transform 140ms var(--ease-out-expo);
}
.seat-name { font-weight: 600; font-size: 16px; color: var(--snow); line-height: 1.25; }
.seat-sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }
.seat-sub::first-letter { text-transform: uppercase; }
.seat-price { margin-top: auto; padding-top: 8px; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--snow); }
.seat[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.seat[aria-pressed="true"] .seat-price { color: var(--accent); }
.seat:active { transform: scale(0.98); }
.seat[disabled] { cursor: not-allowed; opacity: 0.6; }
.seat[disabled]:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .seat:not([disabled]):not([aria-pressed="true"]):hover { border-color: var(--muted); background: color-mix(in srgb, var(--snow) 8%, transparent); } }
.btn-big { width: 100%; min-height: 72px; align-items: center; padding: 10px 24px 11px; box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-big .btn-label { font-size: 21px; letter-spacing: -0.01em; }
.btn-big .btn-sub { font-size: 14px; }
.btn-big[disabled] { box-shadow: none; }
/* The buy head stays short: the plan card, the Buy button and the list carry the page here. */
.buy .head h2 { font-size: clamp(30px, 3.2vw, 44px); }
.buy .head .lead { max-width: none; font-size: 17px; margin-top: 12px; }
.buy-note { color: var(--muted); font-size: 15px; margin-top: 20px; max-width: var(--measure); }
@media (min-width: 768px) {
  .plan-full { grid-column: span 7; }
  .plan-demo { grid-column: span 5; }
}
/* Thank-you state after a purchase */
.thanks { display: none; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-card); padding: 28px 26px 30px; margin-top: 40px; }
.thanks[data-on] { display: block; }
.thanks h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.thanks .status { color: var(--muted); margin-top: 10px; font-size: 17px; }
.key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.key { font-family: var(--mono); font-size: clamp(18px, 2.2vw, 24px); color: var(--snow); background: color-mix(in srgb, var(--snow) 8%, transparent); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 14px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.key-row .btn { min-height: 44px; font-size: 15px; }
.thanks .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.thanks .actions .btn { min-height: 48px; }
.thanks .steps { color: var(--muted); margin-top: 18px; max-width: var(--measure); }
.thanks .steps b { color: var(--snow); font-weight: 600; }

/* Facts */
.facts { padding: 88px 0 96px; }
.facts h2 { font-size: clamp(28px, 3vw, 40px); }
.fact-grid { display: grid; grid-template-columns: 1fr; margin-top: 32px; border-top: 1px solid var(--line); }
.fact { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.fact b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.1; color: var(--snow); }
.fact span { display: block; color: var(--muted); margin-top: 6px; }
@media (min-width: 640px) {
  .fact-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
@media (min-width: 1024px) {
  .fact-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Footer: the page ends in a snow bank */
.foot { position: relative; background: linear-gradient(to bottom, transparent 47px, var(--snow) 47px); color: var(--night); padding: 0 0 40px; margin-top: 0; }
.foot .cap { display: block; width: 100%; height: 48px; margin-top: -1px; }
.foot .wrap { display: grid; gap: 40px; padding-top: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--night); font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.brand svg { width: 40px; height: 40px; flex-shrink: 0; }
.foot .tag { margin-top: 12px; color: color-mix(in srgb, var(--night) 68%, var(--snow)); max-width: 24rem; }
.foot-links { display: grid; gap: 14px; align-content: start; }
.foot-links a { color: var(--night); text-decoration: none; font-weight: 600; }
.foot-links a small, .foot-links p small { display: block; font-weight: 400; color: color-mix(in srgb, var(--night) 68%, var(--snow)); font-size: 15px; margin-top: 2px; }
.foot-links p { font-weight: 600; }
.foot-links p small { font-weight: 400; max-width: 28rem; }
.foot .legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--night) 14%, var(--snow)); color: color-mix(in srgb, var(--night) 68%, var(--snow)); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 32px; }
/* The withdrawal link (EU Art. 11a label) gets its own full-width row, so the grid above stays even. */
.foot-withdraw { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--night) 14%, var(--snow)); }
.foot-withdraw { font-size: 14px; }
.foot-withdraw a { font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot-links .foot-withdraw small { font-size: 13px; }
@media (min-width: 640px) {
  .foot-links { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .foot-links .wide { grid-column: 1 / -1; }
  .foot-withdraw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .foot-links .foot-withdraw small { margin-top: 0; }
}
@media (min-width: 1024px) {
  .foot .wrap { grid-template-columns: 1fr 1.25fr; }
  .foot .wrap > div:first-child { align-self: center; }
}

@media (max-width: 640px) {
  section { padding: 72px 0; }
  .slide h2 br { display: none; }
  .hero { padding-top: 88px; }
  .hero-inner { gap: 36px; }
  .brand-top span { display: none; }
  .top-links { gap: 0; }
  .top-links a { padding: 0 8px; font-size: 14px; }
  .lang { margin-left: 2px; }
  .hero-actions { flex-direction: column; align-items: center; width: 100%; }
  .hero-actions .btn { width: min(100%, 320px); justify-content: center; }
  .plan { padding: 22px 18px 24px; }
  .seat-row { gap: 8px; }
  .seat { padding: 12px 10px 11px; min-height: 88px; }
  .seat-price { font-size: 20px; }
  .cell h3 { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero .claim, .hero-actions, .hero-mac, .top .wrap { animation: none; opacity: 1; transform: none; }
  .pw-beacon { animation: none; }
  .truck, .buddy { display: none !important; }
  .hero-deep { animation: none; -webkit-mask-image: none; mask-image: none; }
  .btn { transition: background-color 140ms; }
  .btn:active { transform: none; }
}

/* The companion plow: a small copy of the hero truck in the left margin. It shows only when the
   margin beside the 1120px column is wide enough for the truck and its line (--buddy-min in the
   script matches this media query). */
.buddy { display: none; position: fixed; left: 0; bottom: 0; z-index: 4; width: var(--buddy-margin, 0px); height: 190px; pointer-events: none; }
@media (min-width: 1500px) and (prefers-reduced-motion: no-preference) {
  .buddy { display: block; }
}
.buddy > * { pointer-events: auto; }
.buddy-truck { position: absolute; left: 0; bottom: 40px; width: 104px; height: 57px; display: block; transform: translateX(var(--buddy-x, 12px)); transition: transform 180ms linear, opacity 200ms linear, visibility 0s linear 0s; border-radius: var(--r-control); }
.buddy-truck svg { width: 100%; height: 100%; display: block; overflow: visible; }
.buddy-line { position: absolute; left: var(--line-x, 12px); bottom: 104px; max-width: calc(var(--buddy-margin, 0px) - 24px); width: max-content; padding: 6px 10px 7px; background: var(--snow); color: var(--night); border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; text-wrap: balance; transition: opacity 200ms linear, visibility 0s linear 0s; }
.buddy-line::after { content: ""; position: absolute; top: 100%; left: var(--tail-x, 24px); width: 10px; height: 6px; margin-left: -5px; background: var(--snow); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.buddy-line:empty { display: none; }
.buddy[data-off] .buddy-truck, .buddy[data-off] .buddy-line { opacity: 0; visibility: hidden; transition: transform 180ms linear, opacity 200ms linear, visibility 0s linear 200ms; }
.buddy[data-gone] .buddy-truck { transform: translateX(-140px); opacity: 0; visibility: hidden; transition: transform 700ms ease-in-out, opacity 200ms linear 500ms, visibility 0s linear 700ms; }
.buddy[data-gone] .buddy-line { opacity: 0; visibility: hidden; transition: opacity 160ms linear, visibility 0s linear 160ms; }

/* Withdrawal waiver above the Buy button: unticked by default, one tap target */
.waiver { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; cursor: pointer; }
.waiver input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.waiver input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.waiver a { color: var(--snow); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .waiver a:hover { color: var(--accent); } }
/* Gift: a quiet toggle above the waiver; the fields open under it. */
.gift { width: 100%; }
.gift-toggle { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; line-height: 1.45; cursor: pointer; }
.gift-toggle b { color: var(--snow); font-weight: 600; }
.gift-toggle input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.gift-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gift-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 14px 0 2px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--snow) 4%, transparent); }
.gift-fields[hidden] { display: none; }
.gift-fields .field:nth-child(3), .gift-hint { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-h { font-size: 13px; font-weight: 600; color: var(--snow); }
.field-h small { font-weight: 400; color: var(--muted); font-size: 12px; }
.field input, .field textarea {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--snow);
  background: var(--night); border: 1px solid var(--line); border-radius: var(--r-control);
  transition: border-color 140ms var(--ease-out-expo);
}
.field textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gift-hint { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .gift-fields { grid-template-columns: 1fr; } }