/* ---------------------------------------------------------------------------
   Omnivan – omnivan.se

   Built from Omnivan.dc.html in Claude Design (see design-source/). The design
   file carried all its form in style="..." attributes; here it has moved into
   classes, because the CSP in infra/web/Caddyfile allows neither inline CSS nor
   'unsafe-inline'. That applies to the SVGs too, which are therefore coloured
   through classes rather than style attributes.

   Dark is the design's default. Light follows the system setting. There is
   deliberately no toggle: one would have to remember its choice, and this page
   stores nothing on the visitor's machine.

   Order in this file:
     1. Font           2. Tokens (Nocturne + Omnivan)     3. Base
     4. Design-system components                          5. Page parts
   --------------------------------------------------------------------------- */

/* --- 1. Font -------------------------------------------------------------- */
/* Inter, self hosted. The design system pulled it from Google Fonts; it must not
   do that here, because the visitor's IP would then leave the EU without a legal
   basis. Variable weight in one file (latin, 48 kB) - SIL OFL 1.1, see
   fonts/LICENSE.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* --- 2. Tokens ------------------------------------------------------------ */
/* One light palette, shared with server/gw-api/internal/web/static/omnivan.css.
   Keep the two in sync: they are served by different services, so they cannot
   share a file, but a colour that drifts between the website and the portal is
   a colour the product no longer owns.

   White, sea blue, warm amber and forest green. The amber is the signal in the
   logo, and it carries warnings and the focus ring; the green carries "all is
   well". Light only - the dark branch and the data-theme hook are gone, because
   the audience reads this on a phone in daylight and the illustration below the
   headline is a sunrise, which has no dark counterpart. */
:root {
  color-scheme: light;

  --bg:         #f3f6f8;
  --card:       #ffffff;
  --ink:        #15283a;
  --mute:       #46596a;
  --line:       #dbe3ea;
  --line-soft:  #edf1f4;
  --head:       #f7f9fb;
  --sea:        #1b6a99;
  --sea-dk:     #14557c;
  --sea-tint:   #e5f0f7;
  --warm:       #d8872c;
  --warm-lt:    #f0a54e;
  --warm-tint:  #fdf0df;
  --warm-ink:   #83490b;
  --ok:         #2a7549;
  --ok-tint:    #e3f2e8;
  --bad:        #ad3d1b;
  --bad-tint:   #fbe8e1;
  --switch-off: #c3ced7;

  /* The horizon drawing. Its own values rather than the roles above: this is a
     picture of a morning, not an interface, and tying the sea in the drawing to
     the colour of a button would make both worse. */
  --sky-hi:     #ffffff;
  --sky-mid:    #fdf6ec;
  --sky-lo:     #f9ead6;
  --sun-glow:   #f3b366;
  --sun-disc:   #f6c27f;
  --water:      #cfe3ef;
  --ridge-back: #a9c8b4;
  --ridge-front:#6f9c80;
  --firs:       #2f5e45;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 650;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;

  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 0 0 1px var(--line);
  --shadow-lg: 0 20px 50px rgba(21, 40, 58, .25);
  --shadow-card: 0 8px 28px rgba(21, 40, 58, .08);
}

/* --- 3. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

a {
  color: var(--sea);
  text-underline-offset: 3px;
}
a:hover { color: var(--sea-dk); }

/* No `:focus { outline: none }` here. That removes the fallback in a browser
   without :focus-visible, leaving no focus indicator at all.

   The ring is amber rather than blue: blue on blue is the one pair that would
   disappear, and every primary button on the page is blue. */
:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
::selection { background: var(--sea-tint); }

svg { display: block; }

/* Without JavaScript there is no mode switch to operate, so it is hidden rather
   than left sitting there dead. app.js removes .no-js from <html> - but only
   once it has seen that the markup is what it expects. The toggle and +/- stay
   disabled: they are part of the picture of the app. */
.no-js .js-only { display: none; }

/* Text only screen readers should reach. clip-path rather than display:none,
   which would hide it from them as well. */
.visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- 4. Components -------------------------------------------------------- */
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--line); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* The primary button is filled now rather than outlined. On a white page an
   outline reads as "secondary", and the one thing this page asks for - become a
   test pilot - should not look like the lesser of two choices. */
.btn-primary { background: var(--sea); border-color: var(--sea); color: #fff; }
.btn-primary:hover { background: var(--sea-dk); border-color: var(--sea-dk); color: #fff; }
.btn-secondary { background: var(--card); border: 1.5px solid var(--sea); color: var(--sea-dk); }
.btn-secondary:hover { background: var(--sea-tint); color: var(--sea-dk); }
/* The buttons that stand alone in the hero and in the contact band. 56px is
   well past the 44px touch target, which is deliberate: most of the people
   reading this are over 60 and holding a phone. */
.btn-lg { font-size: 19px; font-weight: 600; min-height: 56px; padding-inline: 24px; border-radius: var(--radius-md); }
/* A button inside a card or a row: still 48px, a thumb's width. */
.btn-md { font-size: 17px; font-weight: 600; min-height: 48px; padding-inline: 18px; }
/* Amber on ink, not sea on ink: the blue that carries every other button on
   the page disappears against the dark testpilot card. */
.btn-warm { background: var(--warm); border-color: var(--warm); color: var(--ink); gap: 8px; }
.btn-warm:hover { background: #e89a45; border-color: #e89a45; color: var(--ink); }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
/* A pill with a dot, not an outline: the label in the hero says when the
   product arrives, which is information rather than a button. */
.tag-dot {
  border: 0;
  gap: 8px;
  background: var(--warm-tint);
  color: var(--warm-ink);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.tag-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm);
}

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
}
.seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.seg-opt:has(input:checked) { background: var(--sea); color: #fff; font-weight: 600; }
.seg-opt:not(:has(input:checked)):hover { background: var(--sea-tint); }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--warm); outline-offset: -2px; }

/* --- 5. Page parts -------------------------------------------------------- */
/* Content stays within 1120px and gets air at the edge: 16px on a phone, up to
   64px when there is room. */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 64px);
}

/* The mark: a vehicle in profile with a signal above the roof. The vehicle
   inherits the text colour; the signal is always the sunset warm, which is the
   same colour the alarm banner and the sun on the horizon use.

   The handoff writes these two as style="fill:var(--warm)" inline. The CSP
   forbids that, so they are classes here - the geometry is unchanged. */
.logo { flex: none; color: inherit; }
.logo-dot { fill: var(--warm); }
.logo-signal { stroke: var(--warm); }

/* A small round marker in front of a line of text. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.dot-ok { background: var(--ok); }

/* --- The header (every page) ----------------------------------------------
   Four links and the ask on a wide screen. Below 900px the links fold into a
   menu: a <details>, so it opens without JavaScript. The handoff folds at
   700px, but four links, the brand and the button do not fit between 700 and
   900 without wrapping. The links are in the markup twice, once for each
   shape; the one not shown is display:none and so out of the reading order
   too. */
.site-header-bar { position: relative; background: var(--card); border-bottom: 1px solid var(--line); }
.site-header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px clamp(16px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  letter-spacing: -0.03em;
}
.nav-main { display: flex; gap: 2px; }
.nav-main a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
}
.nav-main a:hover,
.nav-main a[aria-current="page"] { background: var(--sea-tint); color: var(--sea-dk); }
.nav-main a[aria-current="page"] { font-weight: 600; }
.header-cta {
  margin-left: 12px;
  white-space: nowrap;
  background: var(--sea);
  border-color: var(--sea);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  min-height: 48px;
  padding-inline: 20px;
  border-radius: var(--radius-md);
}
.header-cta:hover { background: var(--sea-dk); border-color: var(--sea-dk); color: #fff; }

.nav-mobile { display: none; }
.nav-mobile summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] summary { border-color: var(--sea); background: var(--sea-tint); }
/* The open menu lies over the page under the header, full width, rather than
   pushing the page down: the header stays where the thumb left it. */
.nav-mobile nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 0 20px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.nav-mobile nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}
.nav-mobile nav a[aria-current="page"] { font-weight: 600; color: var(--sea-dk); }

@media (max-width: 900px) {
  .site-header { gap: 8px; }
  .nav-main { display: none; }
  .nav-mobile { display: block; }
  .header-cta { margin-left: 0; }
}
@media (max-width: 700px) {
  .site-header { padding: 12px 16px; }
  .brand { gap: 8px; }
  .brand .logo { width: 28px; height: 28px; }
  .brand-name { font-size: 21px; }
  .header-cta { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .header-cta { padding-inline: 12px; font-size: 16px; }
}

/* --- The first screen ------------------------------------------------------
   Daybreak: white at the top, warming downwards into the horizon drawing, so
   the illustration grows out of the page instead of sitting in a box on it.
   The text on the left; on the right the customer portal in a phone, cut off
   by the section's lower edge, with the sun beside it. There is no picture of
   the box yet (it waits for the enclosure), so the portal carries the first
   screen. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-mid) 62%, var(--sky-lo) 100%);
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px clamp(16px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 40px;
  position: relative;
  z-index: 1;
}
/* The bottom padding is the room the horizon needs under the text. */
.hero-text { padding: 28px 0 210px; }
.hero-title {
  font-size: 72px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  /* Negative left margin: optical alignment, so the capital lines up with the
     text below instead of looking indented. */
  margin: 24px 0 0 -0.04em;
  max-width: 12ch;
}
.hero-lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 40ch;
  margin: 24px 0 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-works { margin: 28px 0 0; font-size: 16px; line-height: 1.5; color: var(--mute); }
.hero-works strong { font-weight: 650; color: var(--ink); }

.hero-phone {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.hero-phone .pphone { position: relative; z-index: 1; width: 300px; }
.hero-phone .pphone-screen { height: 590px; }
/* The sun belongs to the phone's column, not to the horizon drawing: in the
   drawing it slid under the phone at most widths. Whole and visible, its
   centre on the horizon line. */
.hero-sun {
  position: absolute;
  right: 210px;
  bottom: -46px;
  width: 300px;
  height: 300px;
  z-index: 0;
  overflow: visible;
}
.hero-note {
  position: absolute;
  left: -36px;
  bottom: 210px;
  z-index: 2;
  width: 190px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  font-size: 15px;
  line-height: 1.45;
}
.hero-note strong { display: block; font-weight: 650; }
.hero-note span { display: block; color: var(--mute); margin-top: 4px; }

/* The drawing at its own size, centred, behind everything: it is a picture of
   a morning, and stretching it with the window turned the firs into a fence. */
.horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1440px;
  height: 300px;
  margin-left: -720px;
  z-index: 0;
}
/* The drawing, in its own colours (see the tokens). The sea is a filled
   rectangle below the horizon rather than a tinted background, so the line
   where water meets sky is a real edge. The ridges have no outline: a stroke
   at this scale turns a hillside into a sticker. */
.sun-in { stop-color: var(--sun-glow); stop-opacity: 0.7; }
.sun-out { stop-color: var(--sun-glow); stop-opacity: 0; }
.sea-mid { stop-color: var(--sea); stop-opacity: 0.5; }
.sea-end { stop-color: var(--sea); stop-opacity: 0; }
.water { fill: var(--water); }
.sun-disc { fill: var(--sun-disc); stroke: var(--warm); }
.sun-glitter { fill: none; stroke: var(--warm); opacity: 0.8; }
.sea-lines { fill: none; stroke: var(--sea); opacity: 0.45; }
.ridge-back { fill: var(--ridge-back); stroke: none; }
.ridge-front { fill: var(--ridge-front); stroke: none; }
.firs { fill: var(--firs); stroke: none; }

/* Between a phone and a laptop the two columns get too narrow for a 72px
   headline and a 300px phone, so the first screen stacks as on a phone, with
   the larger text. The note goes: stacked, it would cover the phone's
   numbers. */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-text { padding-bottom: 0; }
  .hero-phone { justify-content: center; margin-top: 40px; }
  .hero-phone .pphone-screen { height: 420px; }
  .hero-note { display: none; }
  .hero-sun { right: calc(50% - 300px); bottom: -46px; }
}
@media (max-width: 700px) {
  .hero-inner { padding: 28px 20px 0; }
  .hero-text { padding-top: 0; }
  .hero-title { font-size: 42px; line-height: 1.06; margin-top: 18px; max-width: none; }
  .hero-lead { font-size: 19px; line-height: 1.5; margin-top: 16px; }
  .hero-lead-more { display: none; }
  .hero-actions { flex-direction: column; gap: 10px; margin-top: 22px; }
  .hero-actions .btn { width: 100%; }
  .hero-works { margin-top: 16px; }
  .hero-phone { margin-top: 28px; }
  .hero-phone .pphone { width: 286px; }
  .hero-phone .pphone-screen { height: 330px; }
  .hero-sun { right: -56px; bottom: -38px; width: 160px; height: 160px; }
  /* The left end of the drawing, where the firs are, 120px high: what the
     handoff calls xMinYMax slice. */
  .horizon { left: 0; margin-left: 0; width: 576px; height: 120px; }
}

/* --- The customer portal in a phone ----------------------------------------
   Drawn in HTML, not a screenshot, so it stays sharp and costs nothing. It
   looks like app.omnivan.se: the same header, the same cards. A picture, so
   aria-hidden, with a sentence for screen readers beside it. */
.pphone {
  width: min(100%, 310px);
  padding: 10px;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.pphone-screen {
  border-radius: 36px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Cut off by the section below it: no bottom edge and no bottom corners. */
.pphone-cut { padding-bottom: 0; border-radius: 44px 44px 0 0; }
.pphone-cut .pphone-screen { border-radius: 36px 36px 0 0; }
.pp-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.pp-notch { align-self: center; width: 92px; height: 22px; border-radius: 12px; background: var(--ink); }
.pp-bar { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.pp-name { margin-right: auto; font-size: 16px; font-weight: 600; letter-spacing: -0.03em; }
.pp-url { font-size: 12px; line-height: 1.5; color: var(--mute); background: var(--bg); border-radius: 8px; padding: 3px 8px; }
.pp-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; line-height: 1.25; }
.pp-body-story { gap: 12px; padding-bottom: 22px; }
.pp-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.pp-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; white-space: nowrap; }
.pp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint); }
.pp-state { font-size: 14px; font-weight: 600; }
.pp-seen { font-size: 13px; color: var(--mute); }
.pp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pp-card-head { display: flex; align-items: center; gap: 10px; }
.pp-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--warm-tint);
  color: var(--warm-ink);
}
.pp-card-name { font-size: 15px; font-weight: 600; }
.pp-card-brand { font-size: 12px; color: var(--mute); }
.pp-card-value { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pp-big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.pp-small { font-size: 13px; color: var(--mute); }

/* The story's phone: a banner that says what the state is, and three tiles. */
.pp-banner { display: flex; gap: 10px; padding: 12px; border-radius: var(--radius-md); }
.pp-banner-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 5px 2px 0; }
.pp-banner-text { display: flex; flex-direction: column; gap: 2px; }
.pp-banner-title { font-size: 15px; font-weight: 650; line-height: 1.3; }
.pp-banner-body { font-size: 13px; line-height: 1.4; }
[data-banner="ok"]   .pp-banner { background: var(--ok-tint); }
[data-banner="warn"] .pp-banner { background: var(--warm-tint); }
[data-banner="bad"]  .pp-banner { background: var(--bad-tint); }
[data-banner="ok"]   :is(.pp-banner-title) { color: var(--ok); }
[data-banner="warn"] :is(.pp-banner-title) { color: var(--warm-ink); }
[data-banner="bad"]  :is(.pp-banner-title) { color: var(--bad); }
[data-banner="ok"]   .pp-banner-dot { background: var(--ok); }
[data-banner="warn"] .pp-banner-dot { background: var(--warm-ink); }
[data-banner="bad"]  .pp-banner-dot { background: var(--bad); }
[data-mode="offline"] .pp-dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-tint); }

.pp-data { display: flex; flex-direction: column; gap: 10px; transition: opacity 0.3s; }
/* Offline: the values fade, because they are no longer fresh. */
[data-mode="offline"] .pp-data { opacity: 0.45; }
.pp-tile { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pp-tile-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); }
.pp-tile-row-value { align-items: baseline; }
.pp-tile-value { font-size: 20px; font-weight: 650; color: var(--ink); }
.pp-temp { font-size: 40px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; margin-top: 4px; }
.spark { width: 100%; height: 34px; margin-top: 6px; }
.spark-falling { stroke: var(--bad); }
.spark-steady { stroke: var(--sea); }
/* Which curve shows is decided by state, not by JavaScript: without scripting
   the page stays in "all calm" and shows the steady curve. */
.spark-falling { display: none; }
[data-kallt="ja"] .spark-falling { display: block; }
[data-kallt="ja"] .spark-steady { display: none; }
.batt {
  height: 8px;
  border-radius: 4px;
  background: var(--line-soft);
  margin-top: 10px;
  overflow: hidden;
}
.batt-fill { width: 78%; height: 100%; border-radius: 4px; background: var(--ok); }

/* --- Sections -------------------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 104px) 0; }
.kicker {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-ink);
  margin-bottom: 16px;
}
/* On the blue band the amber loses its contrast, so the kicker there is the
   darker sea instead. */
.story .kicker { color: var(--sea-dk); }
.section-title {
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
.section-lead { font-size: 19px; color: var(--mute); max-width: 54ch; margin: 20px 0 0; }

/* Anchor targets should not land flush against the top of the viewport. */
#fungerar-med, #sa-funkar-det, #fragor, #testpilot, #tipsa { scroll-margin-top: 16px; }

/* --- Fungerar med ------------------------------------------------------------
   The first thing a motorhome owner asks: does it work with what I have? What
   works today in a card with a green edge, what we are working on beside it,
   and a way to say what is missing. */
.works { padding-bottom: clamp(64px, 9vw, 96px); }
.works-title { max-width: 20ch; }
.works-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.works-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.works-now { border: 2px solid var(--ok); }
.works-head { display: flex; align-items: center; gap: 10px; }
.works-head h3 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 0 4px; }
.works-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.works-dot-ok { background: var(--ok); box-shadow: 0 0 0 5px var(--ok-tint); }
.works-dot-warm { background: var(--warm); box-shadow: 0 0 0 5px var(--warm-tint); }
.works-list { list-style: none; margin: 0; padding: 0; }
.works-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  line-height: 1.4;
}
.works-row:last-child { border-bottom: 1px solid var(--line-soft); }
/* The brand as a word in a box until there are logos: self hosted SVG, one
   colour, at most 28px high, in the same box. */
.works-brand {
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}
.works-what { font-weight: 600; }
.works-how { font-size: 16px; color: var(--mute); }
.works-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
}
.works-soon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.works-soon-list li {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  line-height: 1.35;
}
.works-soon-list strong { font-weight: 700; }
.works-soon-list span { font-size: 15px; color: var(--mute); }
.works-missing {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--sea-tint);
}
.works-missing p { flex: 1 1 220px; margin: 0; font-size: 17px; line-height: 1.45; }
.works-missing strong { font-weight: 650; }
.works-extras {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.works-extras li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  line-height: 1.45;
}
.works-extras strong { display: block; font-weight: 650; }
.works-extras span:not(.extra-icon) { display: block; font-size: 16px; color: var(--mute); }
.extra-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--sea-tint);
  color: var(--sea-dk);
}
.works-note { max-width: 80ch; margin: 24px 0 0; font-size: 15px; color: var(--mute); }
.works-note a { color: var(--mute); }
.works-note a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .works-grid, .works-extras { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .works-card { padding: 20px; }
  .works-row { grid-template-columns: 104px minmax(0, 1fr); }
  .works-brand { font-size: 16px; }
}

/* "Today": six dashed boxes pointing at one whole one. */
.apps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 44px;
}
.apps-grid {
  flex: 1 1 320px;
  max-width: 460px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Six dashed boxes, because each of them is a thing you have to keep track of
   separately. Dashed rather than solid: they never quite add up to a whole. */
.app-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--card);
  border: 1.5px dashed var(--switch-off);
  border-radius: var(--radius-md);
  color: var(--mute);
}
.app-chip-name { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.app-chip-note { font-size: 14px; }
.apps-arrow { flex: none; }
.apps-arrow path { stroke: var(--sea); stroke-width: 2; }
.one-app {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--card);
  border: 2px solid var(--sea);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.one-app-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 21px;
  line-height: 1.2;
}
.one-app-note { font-size: 16px; color: var(--mute); line-height: 1.5; }

/* On a narrow screen the three parts stack, and the arrow turns a quarter turn
   so it still points from the six apps towards the single one. */
@media (max-width: 700px) {
  .apps-row { flex-direction: column; align-items: stretch; }
  .apps-grid { max-width: none; }
  .apps-arrow { margin-inline: auto; transform: rotate(90deg); }
  .one-app { flex: 1 1 auto; }
}

/* The story sits in its own band across the page. The band avoids the 100vw
   trick, which counts the scrollbar and causes horizontal scrolling; the inner
   wrapper carries the same gutters as .page instead. */
.story {
  padding: clamp(64px, 9vw, 104px) 0;
  background: var(--sea-tint);
}
.story-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px clamp(40px, 7vw, 96px);
  align-items: center;
}
.story-title { max-width: 16ch; }
.story-text p { font-size: 19px; color: var(--ink); max-width: 46ch; margin: 16px 0 0; }
.story-text p:first-of-type { margin-top: 24px; }
.story-text .story-hint { font-size: 16px; color: var(--mute); margin-top: 28px; }
.story-demo { display: flex; flex-direction: column; align-items: center; gap: 24px; }

.section-steps { padding-bottom: 0; }
.steps {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px 36px;
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
/* A filled circle with 1, 2, 3 rather than "01" trailing a hairline. The
   hairline was Nocturne's; on white it read as a loose thread, and "01" is a
   typographic mannerism that says nothing to somebody counting steps. */
.step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sea);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  font-feature-settings: "tnum" 1;
}
.steps h3 { font-size: 21px; line-height: 1.25; margin: 4px 0 0; }
.steps p { margin: 0; font-size: 17px; color: var(--mute); }

/* --- Vanliga frågor ----------------------------------------------------------
   <details>, so a question opens without JavaScript. The plus turns into a
   cross when it is open. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span:first-child { flex: 1; }
.faq-plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sea-tint);
  color: var(--sea-dk);
  transition: transform 0.2s;
}
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
.faq-list p { margin: 0; padding: 0 52px 22px 0; font-size: 18px; color: var(--mute); }
@media (max-width: 860px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .faq-list p { padding-right: 0; }
}

/* --- The way to a yes ------------------------------------------------------
   The one dark thing on the page: the ask. Beside it a lighter way in for the
   visitor who is not ready to write to us. */
.yes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(64px, 9vw, 104px);
}
.yes-pilot, .yes-tips { display: flex; flex-direction: column; border-radius: 20px; }
.yes-pilot { padding: 48px; background: var(--ink); color: #fff; }
.yes-pilot .section-title { font-size: clamp(32px, 4.2vw, 44px); color: #fff; max-width: 16ch; }
.yes-pilot p { font-size: 19px; color: #d5dee6; max-width: 44ch; margin: 20px 0 0; }
.yes-pilot :focus-visible { outline-color: var(--warm-lt); }
.yes-tips { padding: 40px; background: var(--card); border: 1px solid var(--line); }
.yes-tips .kicker { margin-bottom: 14px; }
.yes-tips h2 { font-size: clamp(26px, 3vw, 30px); line-height: 1.2; margin: 0; }
.yes-tips p { font-size: 18px; color: var(--mute); margin: 14px 0 0; }
.yes-actions { margin-top: 32px; }
.yes-tips .yes-actions { margin-top: auto; padding-top: 24px; }
@media (max-width: 860px) {
  .yes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .yes-pilot, .yes-tips { padding: 28px 22px; }
  .yes-pilot .btn { width: 100%; }
}

/* --- The footer (every page) -------------------------------------------------
   Three promises we keep, then the links. The promises are green: they are
   what is already true, not what is coming. */
.site-footer-bar { background: var(--card); border-top: 1px solid var(--line); }
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px clamp(16px, 5vw, 64px) 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 15px;
  color: var(--mute);
}
.promises {
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.promises li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.promise-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--ok-tint);
  color: var(--ok);
}
.footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.footer-copy { display: flex; align-items: center; gap: 8px; color: var(--ink); }
/* A touch target a thumb can hit: 44px high, not a 15px word. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-left: auto; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--mute);
}
.footer-links a:hover { color: var(--ink); }
.footer-links a[aria-current="page"] { color: var(--ink); text-decoration: none; font-weight: 600; }
@media (max-width: 700px) {
  .site-footer { padding: 28px 20px 20px; }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .footer-links { order: -1; flex-basis: 100%; margin-left: 0; }
}

/* --- Plain pages (404) ---------------------------------------------------- */
.plain {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 12vw, 140px) clamp(20px, 5vw, 64px);
}
.plain p { color: var(--mute); margin: 20px 0 0; }
.plain-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Text pages (integritet, villkor, varumärken) -------------------------- */
/* One narrow column: around 65 characters a line is what reads without the
   eye losing its place on the way back, on a phone and on a wide screen. */
.doc {
  max-width: calc(68ch + 2 * clamp(16px, 5vw, 64px));
  margin: 0 auto;
  padding: clamp(40px, 8vw, 96px) clamp(16px, 5vw, 64px) clamp(56px, 9vw, 112px);
}
.doc h1 {
  font-size: clamp(34px, 5vw, 48px);
  margin: 0;
}
.doc h2 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  margin: 56px 0 0;
  scroll-margin-top: 16px;
}
.doc h3 { font-size: 20px; line-height: 1.3; margin: 32px 0 0; }
.doc p { margin: 16px 0 0; }
.doc ul, .doc ol { margin: 16px 0 0; padding-left: 1.4em; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--sea); }
.doc strong { font-weight: 650; }
.doc-lead { font-size: 20px; color: var(--mute); }
.doc-meta { font-size: 15px; color: var(--mute); }

/* The draft notice. Amber, because it is a warning and not an error: the text
   is meant to be read, just not yet relied on. */
.doc-draft {
  margin: 28px 0 0;
  padding: 16px 20px;
  background: var(--warm-tint);
  border: 1px solid var(--warm-lt);
  border-left: 6px solid var(--warm);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.doc-draft p { margin: 6px 0 0; }
.doc-draft p:first-child { margin-top: 0; }
.doc-draft-title { font-weight: 650; color: var(--warm-ink); }

/* A point the reader must not miss (in the terms: that Omnivan is not an
   alarm system to stake a life on). */
.doc-key {
  margin: 28px 0 0;
  padding: 20px 24px;
  background: var(--card);
  border: 2px solid var(--bad);
  border-radius: var(--radius-lg);
}
.doc-key h2 { margin-top: 0; color: var(--bad); }
.doc-key p:first-of-type { margin-top: 12px; }

/* The things we will not do, or a summary: a quiet card. */
.doc-card {
  margin: 28px 0 0;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.doc-card h2 { margin-top: 0; }
.doc-card > :first-child { margin-top: 0; }

.doc-toc {
  margin: 32px 0 0;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.doc-toc-title { margin: 0; font-weight: 650; }
.doc-toc ol { margin-top: 8px; }
.doc-toc li { margin-top: 4px; }

/* A placeholder for a fact nobody has given us yet. Loud on purpose: it must
   be impossible to publish the page and not notice that it is unfinished. */
.ph {
  background: var(--warm-tint);
  color: var(--warm-ink);
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Tables become a stack of rows on a phone, rather than scrolling sideways:
   the first cell is the heading of its row. */
.doc-table {
  width: 100%;
  margin: 20px 0 0;
  border-collapse: collapse;
  font-size: 17px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.doc-table th, .doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.doc-table thead th {
  border-top: 0;
  background: var(--head);
  font-size: 15px;
  color: var(--mute);
  font-weight: 600;
}
.doc-table tbody th { font-weight: 600; }
@media (max-width: 600px) {
  .doc-table thead { display: none; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; }
  .doc-table tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .doc-table tr:first-child { border-top: 0; }
  .doc-table th, .doc-table td { border-top: 0; padding: 2px 14px; }
  /* With the header row hidden, a cell that needs its column name says it
     itself. Generated content from the stylesheet, so the CSP still holds. */
  .doc-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--mute);
  }
}

/* The page never follows the system into dark mode any more. The rule is here
   rather than only in a comment, because a browser extension or a reader mode
   that forces color-scheme would otherwise recolour half the tokens. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* ---------------------------------------------------------------------------
   The contact form, /kontakt. Rendered by gw-api (templates/site/kontakt.html)
   and passed through by this site's Caddy, so it wears these styles.
   --------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 20px; margin: 32px 0 0; }
.form-field { display: flex; flex-direction: column; }
.form-field label { font-size: 18px; font-weight: 550; margin-bottom: 6px; }
.form-opt { color: var(--mute); font-weight: 400; }
.form :is(input[type="text"], input[type="email"], textarea, select) {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.form textarea { resize: vertical; line-height: 1.5; }
.form :is(input, textarea, select):focus-visible { outline: 3px solid var(--sea-tint); border-color: var(--sea); }
.doc .form-hint, .form-hint { font-size: 15px; color: var(--mute); margin: 8px 0 0; }
.form-msg { margin: 24px 0 0; padding: 14px 18px; border-radius: var(--radius-md); font-weight: 550; }
.form-ok { background: var(--ok-tint); color: var(--ok); }
.form-bad { background: var(--bad-tint); color: var(--bad); }
/* The honeypot: out of sight and out of the tab order, but in the page, where
   a bot filling every field finds it. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* A box to tick: the testpilot's consent. */
.form-field .form-check { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 400; margin: 0; }
.form-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--sea); }
/* What only a testpilot needs, and what only the others do, by the topic
   chosen - without a script. A browser without :has shows both. */
.form:has(#amne option[value="testpilot"]:not(:checked)) .pilot-only,
.form:has(#amne option[value="testpilot"]:checked) .not-pilot { display: none; }

/* ---------------------------------------------------------------------------
   The tips, /tipsa: what visitors want Omnivan to learn next, in per cent.
   Rendered by gw-api (templates/site/tipsa.html), like the contact form. The
   bars are <progress> elements: a width in a style attribute would be
   simpler, and the CSP forbids it.
   --------------------------------------------------------------------------- */
.doc .wish-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.doc .wish-list li { margin: 0; }
.wish-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.wish-label { font-weight: 600; }
.wish-note {
  font-size: 13px;
  font-weight: 550;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sea-tint);
  color: var(--sea-dk);
}
.wish-pct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.wish-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--sea);
  overflow: hidden;
}
.wish-bar::-webkit-progress-bar { background: var(--line-soft); border-radius: 999px; }
.wish-bar::-webkit-progress-value { background: var(--sea); border-radius: 999px; }
.wish-bar::-moz-progress-bar { background: var(--sea); border-radius: 999px; }
.wish-other .wish-label { color: var(--mute); font-weight: 500; }
.wish-other .wish-bar::-webkit-progress-value { background: var(--switch-off); }
.wish-other .wish-bar::-moz-progress-bar { background: var(--switch-off); }
/* "Fungerar redan" is green, like everything on the site that is already
   true; "På gång" stays blue. */
.wish-note-ok { background: var(--ok-tint); color: var(--ok); }
.doc .wish-more { margin: 16px 0 0; font-size: 17px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   /fungerar-med/: the whole list, from the catalogue. Rendered by gw-api
   (templates/site/fungerar-med.html). Wears the start page's cards.
   --------------------------------------------------------------------------- */
.works-page { padding-top: clamp(40px, 8vw, 96px); padding-bottom: clamp(56px, 9vw, 104px); }
.works-page-title { max-width: 22ch; font-size: clamp(34px, 5vw, 48px); }
.works-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 44px;
}
.works-page .works-head h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 0 4px; }
.works-row-big { grid-template-columns: 140px minmax(0, 1fr); padding: 18px 0; }
.works-row-big .works-brand { height: 60px; }
.works-guides { margin: 6px 0 0; font-size: 16px; color: var(--mute); }
.works-guides a { font-weight: 600; }
.works-side { display: flex; flex-direction: column; gap: 20px; }
.works-soon-rows { list-style: none; margin: 0; padding: 0; }
.works-soon-rows li {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  line-height: 1.4;
}
.works-soon-rows strong { font-weight: 650; }
.works-soon-rows span { font-size: 16px; color: var(--mute); }
.works-ask { padding: 24px; border-radius: var(--radius-lg); background: var(--sea-tint); }
.works-ask h2 { font-size: 22px; margin: 0; }
.works-ask p { margin: 10px 0 18px; font-size: 17px; }
.works-trust {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 960px;
  margin-top: 32px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.works-trust p { margin: 0; font-size: 15px; color: var(--mute); }
@media (max-width: 860px) {
  .works-page-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .works-row-big { grid-template-columns: 104px minmax(0, 1fr); }
}