/*
  Sonopley's website, in the owner's chosen look, "Dusk" (D-297): a soft slate-teal ground under a mint glow, glass cards,
  the mint as the one accent, Unbounded for headings and Figtree for everything else. One look, so every colour is set
  here explicitly rather than following the visitor's light or dark setting. The fonts are the site's own files (D-298):
  the site asks nobody else for anything (D-296).
*/

@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #1d3338;
  --ground-deep: #162a2e;
  --text: #eef6f5;
  --text-2: #c2d6d4;
  --text-3: #a3bbb9;
  --mint: #7fe8c9;
  --mint-ink: #062a24;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 16px;
  --wrap: 1120px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 70% at 88% -12%, rgba(127, 232, 201, 0.26), transparent 58%),
    radial-gradient(90% 60% at -10% 110%, rgba(11, 114, 133, 0.22), transparent 60%),
    var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

a { color: var(--mint); text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--mint); color: var(--mint-ink); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 12px; }

/* --- Header -------------------------------------------------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--line); background: rgba(22, 42, 46, 0.55); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
.header-row { display: flex; align-items: center; gap: 12px 24px; padding-block: 16px; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.wordmark { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: 0.02em; }
.bars { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.bars b { display: block; width: 4px; border-radius: 3px; background: var(--mint); }
.bars b:nth-child(1) { height: 7px; } .bars b:nth-child(2) { height: 13px; } .bars b:nth-child(3) { height: 20px; }
.bars b:nth-child(4) { height: 22px; } .bars b:nth-child(5) { height: 17px; } .bars b:nth-child(6) { height: 10px; }
.brand.small .wordmark { font-size: 15px; }
.brand.small .bars { transform: scale(0.85); transform-origin: left center; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.site-nav a:hover { color: var(--text); }
body[data-page="features"] [data-nav="features"],
body[data-page="windows"] [data-nav="windows"],
body[data-page="iphone"] [data-nav="iphone"],
body[data-page="how-it-works"] [data-nav="how-it-works"],
body[data-page="faq"] [data-nav="faq"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--mint); }

.nav-later { color: var(--text-3); font-size: 15px; font-weight: 500; }
.soon { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(127, 232, 201, 0.14); color: var(--mint); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; vertical-align: 1px; }

/* The place a sign-in will take; nothing in it yet (D-297). */
.account-slot { min-width: 0; }

/* The language switcher: a globe and the language in its own words, opening the nine (D-333). No script: a <details>. */
.language { position: relative; }
.language summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--text-2); font-size: 15px; font-weight: 500; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.language summary::-webkit-details-marker { display: none; }
.language summary:hover, .language[open] summary { color: var(--text); background: var(--glass); }
.globe { fill: none; stroke: currentColor; stroke-width: 1.6; }
.language ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; list-style: none; margin: 0; padding: 6px; min-width: 160px; background: var(--ground-deep); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.language li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.language li a:hover { color: var(--text); background: var(--glass); }
.language li a[aria-current] { color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--mint); }

/* --- Page building blocks -------------------------------------------------------------------------------------------- */

main { display: block; flex: 1 0 auto; }

.hero { padding-block: 72px 40px; }
.hero h1, .page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
/* Nine languages, some with long compound words: a heading breaks a word rather than the page (D-333). */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

.lead { color: var(--text-2); font-size: clamp(17px, 2vw, 20px); max-width: 60ch; margin: 0; }

.section { padding-block: 40px; }
.section h2 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
.section > .wrap > p { color: var(--text-2); max-width: 65ch; }

.eyebrow { display: inline-block; color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; }
.pill.primary { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
.pill .note { font-weight: 500; opacity: 0.8; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.card h3 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 0; }
.card p { color: var(--text-2); margin: 0; font-size: 16px; }
.card .only { color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.card ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 16px; display: grid; gap: 4px; }

.platform { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.platform span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); }

/* A drawn placeholder where a screenshot will go (D-302, WI-324). */
.shot { position: relative; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--glass-strong), rgba(255, 255, 255, 0.03)); aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; display: grid; place-items: center; }
.shot.phone { aspect-ratio: 9 / 16; max-width: 240px; border-radius: 28px; }
.shot::before { content: ""; position: absolute; inset: 12px 12px auto; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.10); }
.shot::after { content: ""; position: absolute; inset: auto 12px 12px; height: 34%; border-radius: 10px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 14px, transparent 14px 26px); }
.shot .shot-label { position: relative; z-index: 1; color: var(--text-3); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(22, 42, 46, 0.7); border: 1px solid var(--line); }
.shot.phone .shot-label { margin-inline: 12px; text-align: center; }

/* A real screenshot in place of a drawn placeholder (WI-324): the window's own rounded corners, a hairline, no stretching. */
.shot-img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.shot-img.phone { max-width: 240px; border-radius: 28px; justify-self: center; }

/* A wide shot beside a phone one, bottoms aligned (WI-323). */
.shots { display: flex; gap: 24px; align-items: flex-end; }
.shots .shot, .shots .shot-img { flex: 1 1 auto; min-width: 0; }
.shots .shot.phone, .shots .shot-img.phone { flex: 0 0 220px; }

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }

.prose { max-width: 68ch; }
.prose h2 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { padding-left: 20px; display: grid; gap: 6px; }

.faq details { background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.faq details + details { margin-top: 12px; }
.faq summary { cursor: pointer; font-weight: 600; padding-block: 14px; list-style-position: inside; }
.faq details p { color: var(--text-2); margin: 0 0 16px; }

/* --- Footer --------------------------------------------------------------------------------------------------------- */

.site-footer { margin-top: 56px; border-top: 1px solid var(--line); background: rgba(22, 42, 46, 0.5); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 28px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--text-2); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--text); }
.footer-links .nav-later { font-size: 14px; }
.fineprint { flex-basis: 100%; margin: 0; color: var(--text-3); font-size: 13px; }

@media (max-width: 760px) {
  .site-nav { margin-left: 0; flex-basis: 100%; }
  .language ul { right: auto; left: 0; }
  .hero { padding-block: 48px 28px; }
  .split { grid-template-columns: 1fr; }
  .shots .shot.phone, .shots .shot-img.phone { flex-basis: 150px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pill { transition: transform 0.15s ease, background 0.15s ease; }
  .pill:hover { transform: translateY(-1px); }
}