/* amarineone.co.uk, the public site.
   Drawn to the design the owner approved on 2026-09-18 (the canvas "Amarine One website"): the office portal's own
   cream and navy, the A mark, and the platform's real screens instead of photographs.
   theme.css adds the optional dark palette. Product screenshots retain their original colours.

   A screen is shown at the size it has on a real screen, never smaller, so that it can be read and stays sharp. The
   owner, twice: a whole screen shrunk into a card "nu se intelege", and shrunk crops "arata rau tare". So every
   picture is cut pixel for pixel from the 2x screenshots (docs/implementation/marketing-site/crops.json and
   crop-shots.ps1), given its real width in CSS pixels, and has a crop of its own for a phone where it is large.
   .shot    a desktop screen, cropped: 1160 wide on a product page, 410 in a card, 360 on a phone.
   .handset a phone screen at 390, the width of the phone it came from. */

/* The fonts come from this site's own host (docs/implementation/marketing-site/fetch-fonts.mjs), not from Google:
   the Privacy notice says the site loads nothing from other companies' servers. SIL Open Font Licence. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-400-800.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; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/ibm-plex-sans.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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500.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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600.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 {
  --cream: #f4efe4;
  --card: #fffdf8;
  --ink: #241f17;
  --ink-2: #3d362b;
  --muted: #625a4c;
  --line: #e3d9c4;
  --line-2: #d9ceb6;
  --sand: #efe8da;
  --navy: #34495e;
  --navy-deep: #26374a;
  --navy-line: #5a6f86;
  --pale: #c9d4e2;
  --pale-2: #dfe6ee;
  --night: #241f17;
  --night-ink: #e9e1d0;
  --night-muted: #b9ae98;
  --bezel: #1a1815;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 5.5vw, 80px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; }
/* height: auto: every img carries its real width and height (no jump while it loads), and without this the height
   attribute would win over the sizes below and stretch each screenshot to its full pixel height. */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--navy-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.eyebrow-light { color: var(--pale); }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.h2 { font-stretch: 112%; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.03; letter-spacing: -.015em; }
.more { font-weight: 600; color: var(--navy); }
.light-link { color: #fff; font-weight: 600; }
.light-link:hover { color: var(--pale-2); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px;
  border-radius: 12px; font-weight: 600; font-size: 17px; text-decoration: none; border: 1px solid transparent; }
.button-primary { background: var(--navy); color: #fff; }
.button-primary:hover { background: var(--navy-deep); color: #fff; }
.button-quiet { border-color: #cfc3a9; color: var(--ink); }
.button-quiet:hover { background: var(--card); color: var(--ink); }
.button-outline-light { border-color: var(--pale); color: #fff; }
.button-outline-light:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---- the bar: every subject is a page of its own ---- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.brand-lines { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 19px; letter-spacing: .22em; }
.brand-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: clamp(16px, 1.7vw, 28px); font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.bar-actions { display: flex; gap: 12px; flex-shrink: 0; }
.bar-actions .button { min-height: 44px; padding: 10px 18px; font-size: 15px; border-radius: 10px; }
.menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #cfc3a9;
  border-radius: 10px; background: transparent; cursor: pointer; }
.menu-button svg { width: 22px; height: 22px; }
.menu-panel { display: none; }
.menu-panel a { padding: 12px 4px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu-panel a[aria-current="page"] { color: var(--navy); }

/* ---- the first view ---- */
.hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-top: clamp(24px, 4vw, 56px); }
.hero h1 { max-width: 1000px; font-stretch: 112%; font-size: clamp(42px, 6vw, 80px); line-height: .98; letter-spacing: -.02em; }
.hero .lede { max-width: 640px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.price-band { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; }
.price-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; text-align: left; }
.price-chip:hover { border-color: var(--navy); color: var(--ink); }
.price-chip-who { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-chip-sum { font-size: 16px; color: var(--ink-2); }
.price-chip-sum b { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--ink); }
.price-chip-sum i { font-style: normal; font-weight: 700; color: #8b8170; margin: 0 2px; }
.price-free { display: flex; flex-direction: column; justify-content: center; padding: 12px 18px; border-radius: 14px; background: var(--navy);
  color: #fff; font-weight: 700; font-size: 17px; text-align: left; }
.price-free small { font-weight: 500; font-size: 13px; color: var(--pale); }

.showcase { position: relative; margin-top: 56px; padding-bottom: 40px; }
.browser { width: min(1120px, 86%); border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px rgba(52, 40, 20, .18); }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #ece5d6; border-bottom: 1px solid var(--line-2); }
.browser-bar i { width: 12px; height: 12px; border-radius: 50%; background: #d6ccb7; }
.browser-bar span { margin-left: 16px; padding: 5px 14px; border-radius: 8px; background: var(--card); font-family: var(--mono); font-size: 13px; color: var(--muted); }
.browser img { width: 100%; }
.shot picture { display: block; }
.phone { position: absolute; right: 0; top: 64px; width: clamp(280px, 30vw, 410px); padding: 11px; border-radius: 46px; background: var(--bezel);
  box-shadow: 0 40px 90px rgba(26, 24, 21, .35); }
.phone img { width: 100%; aspect-ratio: 390 / 640; object-fit: cover; object-position: top; border-radius: 36px; }

/* ---- a screen, cropped ---- */
.shot { overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card);
  box-shadow: 0 24px 60px rgba(52, 40, 20, .12); }
.shot img { width: 100%; }

/* ---- a phone, whole ---- */
.handset { width: 410px; max-width: 100%; padding: 10px; border-radius: 44px; background: var(--bezel); box-shadow: 0 30px 70px rgba(26, 24, 21, .28); }
.handset img { width: 100%; border-radius: 34px; }
.phone-stage { display: flex; justify-content: center; padding: 40px 24px; border-radius: 28px; background: var(--sand); }

/* ---- sections ---- */
.section { padding-block: clamp(64px, 8vw, 104px); }
.section-tight { padding-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.section-head p { max-width: 460px; color: var(--ink-2); }
.band { background: var(--card); border-block: 1px solid var(--line); }
.dark { background: var(--navy-deep); color: #fff; }
.dark .section-head p { color: var(--pale-2); }

/* the three ways in, each a door to its page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Sign in: two doors, the office and the driver app, so a driver signs in once, in his own app. */
.sign-in-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sign-in-note { margin-top: 24px; }
/* Straight under the page heading: a form or a choice, not the next chapter of a page. */
.section.contact-page, .section.sign-in-section { padding-top: 8px; }

/* Book a demo: the form, and the other ways to reach us beside it. */
.contact-page { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: 15px; }
.form-status[data-tone="done"] { color: #1a6b43; font-weight: 600; }
.form-status[data-tone="error"] { color: #a8291f; }
.contact-aside { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.contact-aside h2 { font-size: 24px; }
.door { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.door:hover { border-color: var(--navy); color: var(--ink); transform: translateY(-2px); }
.door-text { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 22px; }
.door h3 { font-weight: 700; font-size: 26px; }
.door p { font-size: 15px; color: var(--ink-2); }
.door .more { margin-top: 4px; font-size: 15px; }
.door .shot { margin-top: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.door-phone { margin-top: auto; aspect-ratio: 760 / 595; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 22px;
  background: var(--sand); border-top: 1px solid var(--line); }
.door-phone img { width: 390px; max-width: none; border-radius: 26px 26px 0 0; box-shadow: 0 12px 30px rgba(52, 40, 20, .18); }

/* the assistant and training, one card each */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 36px 0; border-radius: 22px; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.teaser:hover { border-color: var(--navy); color: var(--ink); transform: translateY(-2px); }
.teaser-dark { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.teaser-dark:hover { border-color: var(--navy-line); color: #fff; }
.teaser-text { display: flex; flex-direction: column; gap: 14px; }
.teaser h3 { font-stretch: 112%; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.08; }
.teaser p { font-size: 16px; color: var(--ink-2); }
.teaser-dark p { color: var(--pale-2); }
.teaser-dark .more { color: #fff; }
.teaser .more { margin-top: 4px; }
.teaser-phone { height: 380px; overflow: hidden; justify-self: center; }
.teaser-phone img { width: 390px; border-radius: 30px 30px 0 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }

/* invoices from every portal */
.invoices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.invoice { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.invoice .shot { box-shadow: none; }
.invoice-phone { aspect-ratio: 760 / 585; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 24px; border-radius: 14px;
  background: var(--sand); border: 1px solid var(--line-2); }
.invoice-phone img { width: 390px; max-width: none; border-radius: 26px 26px 0 0; box-shadow: 0 12px 30px rgba(52, 40, 20, .18); }
.invoice figcaption { display: flex; flex-direction: column; gap: 6px; }
.invoice figcaption strong { font-family: var(--display); font-size: 21px; }
.invoice figcaption span { font-size: 15px; color: var(--ink-2); }

/* coming soon: the add-ons and the other kinds of fleet */
.soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.soon-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 20px; background: var(--card);
  border: 1px dashed var(--line-2); }
.soon-card h3 { font-weight: 700; font-size: 24px; }
.soon-card p { font-size: 15px; color: var(--ink-2); }
.soon-badge { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #e4e8ee; color: var(--navy-deep);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.soon-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-list li { padding: 7px 12px; border-radius: 10px; background: var(--sand); font-size: 14px; font-weight: 500; }
.soon-note { margin-top: 24px; color: var(--ink-2); }

/* ---- a page of its own ---- */
.page-head { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 40px); }
.page-head > * { max-width: 980px; }
.page-head h1 { font-stretch: 112%; font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

.features { display: flex; flex-direction: column; }
.feature { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.feature:first-child { border-top: 0; padding-top: 24px; }
.feature h2 { font-stretch: 112%; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.015em; }
.feature-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 64px; align-items: end; margin-bottom: 36px; }
.feature-head p { color: var(--ink-2); max-width: 600px; }
.feature .shot { max-width: 1160px; }
.feature-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; }
.feature-phone.flip { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.feature-phone.flip .feature-text { order: 2; }
.feature-text { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.feature-text p { color: var(--ink-2); font-size: 18px; }

.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: "✓"; color: var(--navy); font-weight: 700; }

.points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.points li { display: flex; flex-direction: column; gap: 6px; }
.points strong { font-family: var(--display); font-size: 19px; }
.points span { font-size: 15px; color: var(--pale-2); }

.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.next { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: border-color .15s; }
.next:hover { border-color: var(--navy); color: var(--ink); }
.next small { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.next strong { font-family: var(--display); font-stretch: 112%; font-size: clamp(20px, 1.8vw, 26px); }

.callout { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.callout .stack { max-width: 820px; }
.callout p { color: var(--pale-2); }

/* ---- pricing ---- */
.pricing { background: var(--navy); color: #fff; }
.pricing .section-head p { color: var(--pale-2); }
.plans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.plan { border-radius: 22px; padding: 40px; display: flex; flex-direction: column; gap: 22px; }
.plan-operator { background: var(--card); color: var(--ink); }
.plan-workshop { background: var(--navy-deep); border: 1px solid var(--navy-line); color: #fff; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.plan-head strong { font-family: var(--display); font-size: 26px; }
.badge { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.plan-operator .badge { background: #e4e8ee; color: var(--navy-deep); }
.plan-workshop .badge { background: var(--navy); color: #fff; }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 4.4vw, 64px); line-height: 1; }
.price span { font-size: 17px; color: var(--muted); }
.plan-workshop .price span { color: var(--pale); }
.price i { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 34px; color: #8b8170; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px 24px; font-size: 15px; }
.plan-operator ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; font-weight: 700; color: var(--navy); }
.plan-workshop li::before { color: #fff; }
.plan-workshop p { color: var(--pale-2); }
.examples { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.examples span { padding: 8px 12px; border-radius: 10px; background: var(--cream); }
.plan .button { margin-top: auto; }
.pricing-note { margin-top: 22px; font-size: 14px; color: var(--pale); }
.pricing-note-dark { color: var(--muted); }
.plans-page { margin-top: 16px; }
.plan-note { font-size: 14px; color: var(--pale); }

.calc { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 14px; background: var(--cream); }
.calc label { font-weight: 600; }
.calc-hint { margin-top: -6px; font-size: 14px; color: var(--muted); }
.calc-row { display: flex; align-items: center; gap: 16px; }
.calc-row input { flex: 1; accent-color: var(--navy); height: 32px; }
.calc-row output { min-width: 3ch; font-family: var(--display); font-weight: 800; font-size: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-total { color: var(--ink-2); }
.calc-total b { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--ink); }
.calc-total span { font-size: 14px; color: var(--muted); }

/* ---- questions, the story ---- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.faq-list summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-weight: 400; color: var(--navy); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin-top: 10px; color: var(--ink-2); max-width: 760px; }
.faq-page { padding-bottom: 32px; }
.faq-page > * { max-width: 980px; }
.faq-group { font-stretch: 112%; font-size: 24px; margin: 40px 0 12px; }

.story { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 64px; padding-bottom: 88px; }
.story-body { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.story-body h2 { font-stretch: 112%; font-size: 28px; margin-top: 24px; }
.story-body p { color: var(--ink-2); font-size: 18px; line-height: 1.65; }
.story-body .ticks li { font-size: 17px; }
.story-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; align-self: start; }
.story-aside .handset { margin-bottom: 12px; }

/* ---- try it: the real screens, in frames ---- */
.try-block { display: grid; grid-template-columns: minmax(0, 420px) 410px; justify-content: start; gap: 32px 80px; align-items: start;
  padding-block: 40px 72px; border-top: 1px solid var(--line); }
.try-block-wide { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 16px; }
.try-block-wide .try-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 56px; align-items: start; }
.try-block-wide .try-text h2 { grid-row: 2; }
.try-block-wide .try-steps, .try-block-wide .try-note { grid-column: 2; }
.try-block-wide .try-steps { grid-row: 1 / span 2; }
.try-text { display: flex; flex-direction: column; gap: 14px; }
.try-text h2 { font-stretch: 112%; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.015em; }
.try-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.try-note { font-size: 15px; color: var(--muted); }
.try-browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 30px 70px rgba(52, 40, 20, .14); }
.try-browser iframe { display: block; width: 100%; height: 780px; border: 0; background: #fff; }
.try-phone { width: 410px; max-width: 100%; padding: 10px; border-radius: 44px; background: var(--bezel); box-shadow: 0 30px 70px rgba(26, 24, 21, .28); }
.try-phone iframe { display: block; width: 100%; height: 780px; border: 0; border-radius: 34px; background: #fff; }
.try-lang { display: flex; gap: 8px; margin-top: 6px; }
.try-lang-button { min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid #cfc3a9; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.try-lang-button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- privacy and terms ---- */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding-bottom: 96px; }
.legal-contents { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 24px; align-self: start; font-size: 14px; }
.legal-contents a { color: var(--ink-2); text-decoration: none; }
.legal-contents a:hover { color: var(--navy); text-decoration: underline; }
.legal-body { display: flex; flex-direction: column; gap: 40px; max-width: 760px; min-width: 0; }
.legal-body section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; }
.legal-body h2 { font-stretch: 112%; font-size: 24px; }
.legal-body p, .legal-body .ticks li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.legal-body .ticks { gap: 12px; }
.table-scroll { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal-table th { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.legal-table td:first-child { font-weight: 600; }

/* ---- contact, footer ---- */
.contact { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.contact h2 { font-stretch: 112%; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.015em; }
.contact p { margin-top: 12px; color: var(--ink-2); }
.footer { background: var(--night); color: var(--night-ink); padding-block: 48px; }
.footer a { color: var(--night-ink); }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer .brand { color: var(--night-ink); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; font-size: 14px; }
.footer-cols div { display: flex; flex-direction: column; gap: 10px; }
.footer-cols strong { color: #fff; }
.footer-legal { margin-top: 28px; font-size: 13px; color: var(--night-muted); }
.footer-whatsapp { display: inline-flex; align-items: center; gap: 8px; }
.footer-whatsapp svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; font-size: 14px; }
.footer-social span { color: var(--night-muted); margin-right: 4px; }
.social-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); }
.social-link svg { width: 18px; height: 18px; fill: currentColor; }
.social-link:hover { border-color: currentColor; }
.social-link:focus-visible, .footer-whatsapp:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .door, .teaser, .next { transition: none; }
  .door:hover, .teaser:hover { transform: none; }
}

/* ---- narrower ---- */
/* Group product pages on desktop; keep direct links in the smaller-screen menu. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-button { display: inline-flex; }
  .menu-panel[data-open="true"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding-bottom: 16px; }
}
@media (max-width: 1100px) {
  /* A door or an invoice beside its picture, not above it: one column of pictures a whole page wide would be
     blown up past the size the screen really has. */
  .doors, .invoices { grid-template-columns: minmax(0, 1fr); }
  .soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soon-fleets { grid-column: 1 / -1; }
  .door { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .door .shot, .door-phone { border-top: 0; border-left: 1px solid var(--line); }
  .invoice { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: 32px; }
  .teasers { grid-template-columns: 1fr; }
  .plans, .story { grid-template-columns: minmax(0, 1fr); }
  .story-aside { position: static; max-width: 410px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .also { grid-template-columns: 1fr; }
  .callout { flex-direction: column; align-items: flex-start; }
  .legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .try-block, .try-block-wide .try-text { grid-template-columns: minmax(0, 1fr); }
  .try-block-wide .try-steps, .try-block-wide .try-note, .try-block-wide .try-text h2 { grid-column: auto; grid-row: auto; }
  .legal-contents { position: static; }
}
@media (max-width: 900px) {
  .feature-head, .feature-phone, .feature-phone.flip { grid-template-columns: 1fr; }
  .feature-phone.flip .feature-text { order: 0; }
  .feature-head { align-items: start; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .bar { padding-block: 14px; }
  .brand-sub { display: none; }
  .brand svg { width: 28px; height: 28px; }
  .brand-name { font-size: 16px; }
  .bar-actions .quiet-desktop { display: none; }
  .menu-panel[data-open="true"] { grid-template-columns: 1fr; }
  .hero { align-items: stretch; text-align: left; }
  .hero-actions .button { flex: 1 1 100%; }
  .price-band { flex-direction: column; align-items: stretch; }
  .browser { display: none; }
  /* On a phone the hero's phone is drawn the way the drivers page draws one (.phone-stage .handset): the owner,
     2026-09-19, "ecranul in poza 2 e frumos iar asta din poza unu e mic si inghesuit". Full width, a thin bezel,
     the whole screen rather than its top, on the same sand. */
  .showcase { margin-top: 24px; display: flex; justify-content: center; padding: 28px 16px; border-radius: 28px; background: var(--sand); }
  .phone { position: static; width: 100%; max-width: 410px; padding: 10px; border-radius: 44px; box-shadow: 0 30px 70px rgba(26, 24, 21, .28); }
  .phone img { aspect-ratio: auto; border-radius: 34px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .door, .invoice { display: flex; flex-direction: column; }
  .invoice { align-items: stretch; width: 100%; }
  .invoice > * { min-width: 0; max-width: 100%; }
  .door .shot, .door-phone { border-left: 0; border-top: 1px solid var(--line); }
  .teaser { grid-template-columns: 1fr; padding: 28px 24px 0; }
  .teaser-text { padding-bottom: 0; }
  .teaser-phone { height: 340px; max-width: 100%; }
  .phone-stage { padding: 28px 16px; }
  .handset { width: 100%; max-width: 410px; }
  .points { grid-template-columns: 1fr; }
  .soon { grid-template-columns: 1fr; }
  .soon-card { padding: 24px; }
  .plan { padding: 24px; }
  .plan-operator ul { grid-template-columns: 1fr; }
  .contact { flex-direction: column; align-items: stretch; gap: 20px; }
  .contact-page { grid-template-columns: 1fr; gap: 32px; }
  .contact-form { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; gap: 28px; }
  .footer-cols { flex-direction: column; gap: 24px; }
  .faq-list summary { font-size: 17px; }
  .try-browser iframe { height: 700px; }
  .try-phone { margin: 0 auto; }
  .try-phone iframe { height: 720px; }
}

/* ---- the user guide (guide/): one manual for each door, the office, the driver and the workshop ----
   The owner, 2026-09-19: "un manual de utilizare pt office, driver si workshop, cu poze si tot ce trebuie". Each
   task is a few numbered steps (the numbers are the order you press things in), the words on the buttons as the
   screen shows them, and the screen itself, cut at its real size like every other picture on this site. A screen
   wider than the column scrolls inside its frame rather than shrinking. Printed (or saved as a PDF) the contents
   come first, each part starts a new page, and a picture is fitted to the paper. */
.guide { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-bottom: 96px; }
.guide-contents { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 14px;
  max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.guide-contents strong { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); margin: 14px 0 4px; }
.guide-contents strong:first-child { margin-top: 0; }
.guide-contents a { color: var(--ink-2); text-decoration: none; padding: 3px 0; line-height: 1.35; }
.guide-contents a:hover { color: var(--navy); text-decoration: underline; }
.guide-body { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
.guide-part { display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 24px; }
.guide-part-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.guide-part-head h2 { font-stretch: 112%; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.015em; }
.guide-part-head p { color: var(--ink-2); }
.guide-task { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.guide-task h3 { font-size: 23px; line-height: 1.15; }
.guide-task p, .guide-task li { max-width: 720px; }
.guide-task > p { color: var(--ink-2); }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* The number sits in the margin, not in a grid: a step is a sentence with buttons' names inside it, and a grid would
   make every piece of it a cell of its own. */
.steps > li { counter-increment: step; position: relative; padding-left: 44px; min-height: 28px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -1px; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.steps > li > .guide-list { margin-top: 8px; }
.guide-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.ui { font-weight: 600; color: var(--navy-deep); }
.guide-note { max-width: 720px; padding: 16px 20px; border-radius: 14px; background: var(--sand); border: 1px solid var(--line);
  font-size: 15px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.guide-note > strong { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.guide-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Not .shot: its picture is 100% of its box, and any width set here would beat the picture's own width attribute,
   which is its real size. The frame holds the picture at that size and scrolls when the column is narrower. */
.guide-frame { overflow-x: auto; width: fit-content; max-width: 100%; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--card); box-shadow: 0 18px 44px rgba(52, 40, 20, .1); }
.guide-frame img { max-width: none; }
.guide-shot figcaption, .guide-phone figcaption { font-size: 14px; color: var(--muted); max-width: 720px; }
.guide-pair { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 48px; align-items: start; }
.guide-pair > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.guide-phone { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; position: sticky; top: 24px; }
.guide-phone .handset { box-shadow: 0 20px 50px rgba(26, 24, 21, .22); }
.guide-phones { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.guide-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 40px; }
.guide-doors .next p { color: var(--ink-2); font-size: 15px; }
.guide-doors .next span { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--navy); }
.guide-help { display: flex; flex-direction: column; gap: 10px; max-width: 760px; padding: 28px 30px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.guide-help h2 { font-stretch: 112%; font-size: 24px; }
.guide-help p { color: var(--ink-2); }
.print-only { display: none; }

@media (max-width: 1100px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .guide-contents { position: static; max-height: none; overflow: visible; display: block; columns: 2; column-gap: 40px;
    padding: 22px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
  .guide-contents strong, .guide-contents a { display: block; break-inside: avoid; }
  .guide-doors { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .guide-pair { grid-template-columns: minmax(0, 1fr); }
  .guide-phone { position: static; }
}
@media (max-width: 700px) {
  .guide-contents { columns: 1; }
  .guide-body { gap: 56px; }
  .guide-task h3 { font-size: 20px; }
  .guide-phone .handset { width: 100%; max-width: 410px; }
}

@media print {
  @page { size: A4; margin: 14mm 13mm 16mm; }
  html, body { background: #fff; }
  body { font-size: 10.5pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > header, .footer, .page-actions, .no-print { display: none !important; }
  .print-only { display: block; }
  .wrap { padding-inline: 0; max-width: none; }
  .page-head { padding-block: 0 8mm; }
  .page-head h1 { font-size: 30pt; }
  .guide { display: block; padding: 0; }
  .guide-contents { position: static; max-height: none; overflow: visible; display: block; columns: 2; column-gap: 10mm; font-size: 10pt;
    padding: 6mm 7mm; border: 1px solid var(--line-2); border-radius: 4mm; background: #fff; break-after: page; }
  .guide-contents strong, .guide-contents a { display: block; break-inside: avoid; }
  .guide-body { display: block; }
  .guide-part { display: block; break-before: page; }
  .guide-part-head { margin-bottom: 6mm; }
  .guide-task { display: block; padding-top: 5mm; margin-top: 5mm; }
  .guide-task > * + * { margin-top: 3.5mm; }
  .guide-task h3 { font-size: 15pt; break-after: avoid; }
  .steps > li, .guide-note, .guide-shot, .guide-phone { break-inside: avoid; }
  .steps > li { padding-left: 9mm; }
  .steps > li::before { width: 6mm; height: 6mm; font-size: 8.5pt; top: -.2mm; }
  .guide-frame { overflow: visible; box-shadow: none; }
  .guide-frame img { max-width: 100%; }
  .guide-pair { display: grid; grid-template-columns: minmax(0, 1fr) 58mm; gap: 7mm; }
  .guide-phone { position: static; }
  .guide-phone .handset, .guide-phones .handset { width: 58mm; padding: 1.6mm; border-radius: 7mm; box-shadow: none; }
  .guide-phone .handset img, .guide-phones .handset img { border-radius: 5.6mm; }
  .guide-phones { gap: 6mm; }
  a { color: inherit; text-decoration: none; }
}


/* Homepage hierarchy: the demo and current product come before the roadmap. */
.hero-action-group { display: grid; gap: 8px; }
.hero-note { color: var(--muted); font-size: 14px; text-align: center; }
.hero-pricing { display: grid; gap: 10px; }
.price-variable { display: inline-block; white-space: nowrap; }
.price-note { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.price-note > span { padding: 3px 10px; border-radius: 999px; background: var(--pale-2); color: var(--navy-deep); font-weight: 600; }
.workflow { margin-bottom: 32px; padding: 24px 28px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.workflow-label { font-weight: 600; margin-bottom: 20px; }
.workflow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: workflow; }
.workflow-steps li { position: relative; display: flex; flex-direction: column; gap: 5px; padding-top: 36px; counter-increment: workflow; }
.workflow-steps li::before { content: counter(workflow); position: absolute; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 13px var(--mono); }
.workflow-steps strong { font-size: 16px; }
.workflow-steps span { font-size: 14px; color: var(--muted); }
.origin { padding-block: 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.origin .stack { max-width: 740px; }
.origin h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.origin p { color: var(--ink-2); }
.origin .button { flex-shrink: 0; gap: 12px; }
.roadmap { padding-top: 40px; }
.roadmap-details { border-bottom: 1px solid var(--line-2); }
.roadmap-summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.roadmap-summary::-webkit-details-marker { display: none; }
.roadmap-summary > span:first-child { display: grid; gap: 8px; }
.roadmap-summary strong { font-family: var(--display); font-size: 28px; line-height: 1.15; }
.roadmap-description { color: var(--muted); font-size: 16px; }
.roadmap-toggle { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-size: 26px; color: var(--navy); }
.roadmap-details[open] .roadmap-toggle { transform: rotate(45deg); }
.roadmap-details .soon { padding-top: 16px; }
.roadmap-details .soon-note { margin-bottom: 28px; }
.image-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
.invoice figcaption .image-link span { font-size: inherit; color: inherit; }
.feature > .image-link { margin-top: 8px; }

@media (max-width: 900px) {
  .workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .origin { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 700px) {
  .hero { gap: 16px; padding-top: 20px; }
  .bar { gap: 10px; }
  .brand { gap: 8px; }
  .bar-actions { gap: 8px; }
  .bar-actions .button { padding-inline: 14px; }
  .plan { min-width: 0; }
  .plan-head { flex-wrap: wrap; }
  .calc-row input { min-width: 0; }
  .hero > .eyebrow { font-size: 10px; letter-spacing: .06em; }
  .hero h1 { font-size: clamp(36px, 10.6vw, 42px); }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hero-actions .button { padding: 11px 10px; font-size: 15px; min-height: 48px; }
  .hero-note { font-size: 13px; }
  .hero-pricing { gap: 8px; }
  .price-band { gap: 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--card); }
  .price-chip { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; }
  .price-chip + .price-chip { border-top: 1px solid var(--line); }
  .price-chip:hover { background: var(--sand); }
  .price-chip:focus-visible { outline-offset: -3px; }
  .price-chip-who { flex: 0 0 86px; font-size: 10px; letter-spacing: .04em; }
  .price-chip-sum { font-size: 12px; text-align: right; }
  .price-variable { display: block; }
  .price-chip-sum b { font-size: 20px; }
  .price-chip-sum i { margin: 0; }
  .price-note { gap: 8px; font-size: 12px; }
  .showcase { padding: 20px 12px; margin-top: 20px; }
  #top > .section, #top > .band > .section, #top > .pricing > .section { padding-block: 48px; }
  .workflow { padding: 20px; margin-bottom: 24px; }
  .workflow-label { font-size: 16px; }
  .workflow-steps { gap: 20px 16px; }
  .workflow-steps strong { font-size: 15px; }
  .workflow-steps span { font-size: 13px; }
  .origin { padding-block: 36px; }
  .roadmap { padding-top: 16px; }
  .roadmap-summary { gap: 16px; }
  .roadmap-summary strong { font-size: 24px; }
  .roadmap-description { font-size: 14px; }
}
@media (max-width: 380px) {
  .brand svg { width: 24px; height: 24px; }
  .brand-name { font-size: 14px; }
  .bar-actions .button { font-size: 14px; padding-inline: 12px; }
  .menu-button { width: 40px; }
}

/* Integrate beside the existing .nav rules in assets/site.css.
   Change the existing navigation-only @media (max-width: 1240px) to 1100px.
   The grouped navigation fits from 1101px; mobile keeps the direct page links. */
.nav { align-items: center; }
.nav-platform { position: relative; }
.nav-platform summary { display: flex; align-items: center; gap: 9px; padding-block: 6px;
  border-bottom: 2px solid transparent; list-style: none; cursor: pointer; white-space: nowrap; }
.nav-platform summary::-webkit-details-marker { display: none; }
.nav-platform summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.nav-platform[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.nav-platform summary:hover, .nav-platform[open] summary { color: var(--navy); }
.nav-platform:has(a[aria-current="page"]) summary { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.nav-platform-links { position: absolute; top: calc(100% + 10px); left: -16px; z-index: 20;
  display: flex; flex-direction: column; min-width: 210px; padding: 8px; border: 1px solid var(--line-2);
  border-radius: 14px; background: var(--card); box-shadow: 0 16px 38px rgba(52, 40, 20, .14); }
.nav .nav-platform-links a { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; }
.nav .nav-platform-links a:hover, .nav .nav-platform-links a[aria-current="page"] { background: var(--cream); color: var(--navy); }

/* Full screenshots: a native dialog with a fitted view and an optional scrollable actual-size view. */
.image-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 8px; font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.image-viewer { width: min(1320px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 24px 90px rgba(26, 24, 21, .3); }
.image-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.image-viewer::backdrop { background: rgba(26, 34, 45, .78); }
.image-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.image-viewer-bar h2 { min-width: 0; font-size: 20px; line-height: 1.2; text-wrap: initial; }
.image-viewer-actions { display: flex; flex-shrink: 0; gap: 8px; }
.image-viewer-actions button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--cream); color: var(--ink); font: 600 15px var(--body); cursor: pointer; }
.image-viewer-actions button:hover { background: var(--sand); }
.image-viewer-actions button:disabled { color: var(--muted); cursor: default; opacity: .65; }
.image-viewer-actions [data-image-close] { background: var(--navy); border-color: var(--navy); color: #fff; }
.image-viewer-actions [data-image-close]:hover { background: var(--navy-deep); }
.image-viewer-stage { display: flex; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--sand); }
.image-viewer-stage:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.image-viewer-stage img { display: block; flex: none; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.image-viewer-expanded .image-viewer-stage img { max-width: none; max-height: none; }
.image-viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.image-viewer-foot a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .image-viewer { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .image-viewer-bar { align-items: flex-start; flex-direction: column; padding: 12px; }
  .image-viewer-bar h2 { font-size: 18px; }
  .image-viewer-actions { align-self: flex-end; }
  .image-viewer-foot { align-items: flex-start; padding: 8px 12px; }
}