/* The shell: colours, type, header, footer and the legal pages.
   Everything that belongs to the product page itself is in product.css. */

:root {
  color-scheme: dark;
  --bg: #101a1a;
  --panel: #182727;
  --ink: #f2f3ec;
  --muted: #a2b3b0;
  --accent: #91e0cd;
  --amber: #eab977;
  --paper: #edeee6;
  --line: #ffffff20;
  --radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 90px }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.65 }
a { color: inherit; text-decoration: none }
a:hover { color: var(--accent) }
button { font: inherit }
img { display: block; max-width: 100%; height: auto }
p { margin: 0 0 1.3em }
h1, h2, h3 { margin: 0; font-weight: 500 }
h1, h2 { letter-spacing: -.05em; line-height: 1.08 }
h2 { font-size: clamp(32px, 4.2vw, 56px) }
h3 { font-size: 22px; letter-spacing: -.025em; line-height: 1.3 }
[hidden] { display: none !important }

a, button, summary { -webkit-tap-highlight-color: transparent }
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px }
.paper :focus-visible { outline-color: #206052 }

.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto }
.section { padding-block: 108px }
.eyebrow {
  font-size: 12px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase;
  margin: 0 0 28px; color: var(--accent);
}
.skip { position: absolute; z-index: 30; left: 16px; top: -100px; background: var(--accent); color: var(--bg); padding: 12px }
.skip:focus { top: 12px }

/* ------------------------------------------------------------------ chrome */
/* The header stays, because the page is long and the sections are its map.
   Written as `.header.wrap` on purpose: the element carries both classes, and the narrow
   screen's `.wrap { width: calc(100% - 40px) }` comes later in this file — so with one class
   it won the cascade and the sticky bar stopped 40 px short of the right edge. */
.header.wrap {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 84px; padding-inline: max(24px, calc((100% - 1180px) / 2));
  width: 100%; margin: 0;
  border-bottom: 1px solid var(--line);
  background: #101a1ad9; backdrop-filter: blur(14px) saturate(1.3);
}
.brand { display: inline-flex; gap: 11px; align-items: center; font-weight: 650; font-size: 17px; letter-spacing: .08em; white-space: nowrap }
.brand img { border-radius: 10px }
.brand-dot { color: var(--accent) }
.main-nav { display: flex; gap: 30px; color: #d0dbd7; font-size: 14px }
.main-nav a, .languages a { padding-block: 12px }
.main-nav a { position: relative; min-height: 44px; display: flex; align-items: center }
/* The current section is underlined rather than recoloured: the line follows the eye down
   the page without the navigation flickering between two greens. */
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1) }
.main-nav a[aria-current] { color: var(--ink) }
.languages { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 24px; padding: 3px; font-size: 12px; font-weight: 600 }
.languages a { padding: 7px 12px; min-height: 44px; border-radius: 20px; display: flex; align-items: center }
.languages [aria-current] { background: #d8e8dd; color: #152522 }

/* How far down the page you are — two pixels, no numbers. */
.rail { position: fixed; inset: 0 0 auto; height: 2px; z-index: 25; pointer-events: none }
.rail span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f9d8a, var(--accent)) }

.button {
  display: inline-flex; justify-content: center; gap: 14px; align-items: center;
  padding: 16px 26px; border-radius: 8px; background: var(--accent); color: #0f2924;
  font-size: 15px; font-weight: 650; min-height: 54px;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.button:hover { background: #b6f2e3; color: #102821; transform: translateY(-2px); box-shadow: 0 12px 30px #91e0cd26 }
.button:active { transform: none }
.availability { font-size: 13px; color: var(--muted); margin: 15px 0 0 }
.text-link { display: inline-block; border-bottom: 1px solid #81b9a780; padding: 5px 0; font-size: 16px; color: var(--accent) }
.section-intro { color: var(--muted); margin-top: 26px; max-width: 560px }

.paper { background: var(--paper); color: #152622; color-scheme: light }
.paper .eyebrow { color: #4f7066 }

figcaption { font-size: 13px; color: var(--muted); margin-top: 20px; line-height: 1.6 }
.capture-note { font-size: 14px; color: var(--muted) }

/* -------------------------------------------------------- questions, author */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 90px }
.faq details { border-bottom: 1px solid #20372b30; padding-block: 20px }
.faq details:first-child { border-top: 1px solid #20372b30 }
.faq summary { cursor: pointer; font-size: 18px; line-height: 1.4; padding-right: 25px }
.faq details p { color: #58695f; font-size: 16px; margin: 15px 0 0 }

.author { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center }
.author h2 { font-size: 34px; letter-spacing: -.025em }
.author > div > p:not(.eyebrow) { color: var(--muted); max-width: 430px; font-size: 16px }

.contact {
  border: 1px solid #8dbfaf38; border-radius: var(--radius); padding: 40px 44px;
  display: flex; justify-content: space-between; align-items: center; gap: 50px;
  background: linear-gradient(120deg, #1b302a, #16262390); margin-bottom: 80px;
}
.contact h2 { font-size: 29px; line-height: 1.25; letter-spacing: -.025em }
.contact p { font-size: 15px; color: var(--muted); max-width: 620px; margin: 13px 0 0 }
.contact .button { white-space: nowrap }

.footer { border-top: 1px solid var(--line); padding-block: 35px; display: flex; justify-content: space-between; align-items: start; gap: 30px; flex-wrap: wrap }
.footer .brand { font-size: 13px; gap: 0 }
.footer p { color: var(--muted); font-size: 13px; margin: 9px 0 0 }
.footer nav { display: flex; gap: 24px; font-size: 14px; padding-block: 5px }
.footer nav a { min-height: 44px; display: flex; align-items: center }
.copyright { font-size: 13px; color: var(--muted); padding-top: 7px }

/* ------------------------------------------------------------ legal pages */
.legal { max-width: 780px; min-height: 60vh }
.legal h1 { font-size: clamp(38px, 6vw, 64px); margin: 35px 0 }
.legal h2 { font-size: 26px; margin: 35px 0 12px; letter-spacing: -.02em }
.legal p, .legal address { color: #b6c5bd; line-height: 1.8; font-style: normal }
.notice { border-left: 2px solid var(--accent); padding: 15px 20px; background: #24352c }
.legal a:not(.text-link) { text-decoration: underline }

@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px) }
  .section { padding-block: 80px }
  .faq, .author { gap: 45px }
  .contact { gap: 30px; padding: 30px }
  .main-nav { gap: 20px }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px) }
  .header { min-height: 72px; gap: 12px; flex-wrap: wrap; padding-block: 12px }
  .brand { font-size: 14px }
  .brand img { width: 30px; height: 30px }
  .main-nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; font-size: 13px; overflow-x: auto; scrollbar-width: none }
  .main-nav::-webkit-scrollbar { display: none }
  .main-nav a { padding-block: 2px; min-height: 36px; white-space: nowrap }
  .main-nav a::after { bottom: 4px }
  .section { padding-block: 64px }
  .faq, .author { grid-template-columns: 1fr; gap: 28px }
  .faq summary { font-size: 17px }
  .contact { flex-direction: column; align-items: stretch; gap: 25px; padding: 26px; margin-bottom: 50px }
  .contact h2 { font-size: 26px }
  .contact .button { white-space: normal }
  .footer { gap: 25px }
  .footer > div { width: 100% }
  .footer nav { gap: 20px }
  .copyright { width: 100% }
  .legal { padding-top: 45px }
  .legal h1 { overflow-wrap: anywhere }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}