/* Embassys landing page. Built from docs/design/prototypes/landing.html; tokens in docs/design/tokens.json. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/familjen-grotesk-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/albert-sans-600-latin.woff2") format("woff2"); }
:root {
  --paper: #F5F5F2;
  --surface: #FFFFFF;
  --ink: #1E2A31;
  --muted: #5E6A6F;
  --line: #E2E3DE;
  --soft: #EEEEEA;
  --focus: #2F5F7C;
  --accent: #2F5F7C;
  --paint: #B8432F;
  --moss: #5F7658;
  --ok: #2F6B4A;
  --ok-bg: #E3EEE6;
  --warn: #75561A;
  --warn-bg: #F3EAD5;
  --p-white: #FFFFFF;
  --p-light: #F4F3EE;
  --p-shade: #D9D8D1;
  --p-crown: #C0452F;
  --p-eye: #23201D;
  --f-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-disp: "Familjen Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-brand: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --f-label: "Inter", ui-sans-serif, system-ui, sans-serif;
  --host-bg: #FFFFFF;
  --host-ink: #1F1F1F;
  --host-muted: #6B6B6B;
  --host-line: #E4E4E4;
  --host-surface: #F4F4F4;
  --host-bubble: #EEEEEE;
  --d-accent: var(--accent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111517; --surface: #181D20; --ink: #E7EBEC; --muted: #9AA5AA; --line: #262D31; --soft: #1E2427; --focus: #8DB5CF;
    --accent: #8DB5CF; --paint: #E07A63; --moss: #9DB793; --ok: #7CC79C; --ok-bg: #16291E; --warn: #E3C27A; --warn-bg: #2E2614;
    --host-bg: #212121; --host-ink: #ECECEC; --host-muted: #A3A3A3; --host-line: #363636; --host-surface: #2A2A2A; --host-bubble: #303030;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111517; --surface: #181D20; --ink: #E7EBEC; --muted: #9AA5AA; --line: #262D31; --soft: #1E2427; --focus: #8DB5CF;
  --accent: #8DB5CF; --paint: #E07A63; --moss: #9DB793; --ok: #7CC79C; --ok-bg: #16291E; --warn: #E3C27A; --warn-bg: #2E2614;
  --host-bg: #212121; --host-ink: #ECECEC; --host-muted: #A3A3A3; --host-line: #363636; --host-surface: #2A2A2A; --host-bubble: #303030;
}
* { box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.55;
  padding-inline: clamp(16px, 4vw, 48px);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
h1, h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font: 600 14px/1 var(--d-body); padding: 13px 18px; border-radius: 999px; border: 1px solid var(--d-line); background: transparent; color: var(--d-ink); cursor: pointer; }
.btn.primary { background: var(--d-ink); color: var(--d-paper); border-color: var(--d-ink); }
code { font-family: var(--f-label); font-size: .9em; }
body { font-size: 16px; line-height: 1.6; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { display: grid; gap: 8px; font-size: 13.5px; }
.sw i { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); max-width: 100%; }
.sw span { font-family: var(--f-label); font-size: 10.5px; color: var(--muted); display: block; }
:root {
  --i-ink: #1E2A31; --i-paper: #FBFAF6; --i-red: #C0452F; --i-blush: #EFC2B3; --i-sun: #E2A53A;
  --i-s1: #DAD6CC; --i-s2: #CBC6BA; --i-s3: #BCB7AB; --i-s4: #E6E3DB; --i-fjord: #7B98AD; --i-moss: #93A585; --i-ochre: #D6B26C;
}
.chart { position: relative; border-radius: 28px; overflow: hidden; background: #DCE6EB; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 30px 60px -40px rgba(30,42,49,.35); }
.chart svg { display: block; width: 100%; height: auto; }
.lab { font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .28em; fill: #33424A; }
.lab.s { font-size: 8px; letter-spacing: .18em; fill: #6A7A82; }
.sea-lab { font-family: "Albert Sans", system-ui, sans-serif; font-style: italic; font-size: 11px; letter-spacing: .06em; fill: #7890A0; }
.wmark { white-space: nowrap; font-family: var(--f-ui); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); display: inline-block; }
.wmark .wb { position: relative; display: inline-block; }
.wmark .wb::after { content: ""; position: absolute; left: var(--fx, .118em); top: var(--fy, .06em); width: var(--flagw, .28em); height: var(--flagh, .18em); background: var(--flagc, var(--p-crown)); clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); }
.wb svg.eyes { position: absolute; left: 0; top: 0; height: 1em; overflow: visible; pointer-events: none; }
.wmark { --eyec: var(--paper); }
:root { --sea-top: #E3ECF0; --sea-bot: #CFDCE3; --sea-ink: #1E2A31; --sea-muted: #4E5F68; --ring: #B3C6D0; --sea-hi: #FFFFFF; --shoal: #EFF6F5; --beach: #EADFC6; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --sea-top: #1B2B34; --sea-bot: #101B21; --sea-ink: #E7EBEC; --sea-muted: #A3B2B9; --ring: #3A5260; --sea-hi: #5E8092; --shoal: #1D2D35; --beach: #3A4244; --land-a: #2A353A; --land-b: #232E33; --foam: #3F525B; --land-ink: #D5DDE0; --isle-shadow: #05090B; --card: #22313A; --card-line: #33444D; --card-ink: #E7EBEC; --card-muted: #9FB0B7; --card-btn: #E7EBEC; --card-btn-ink: #1E2A31; --card-shadow: #000000; --card-shadow-o: .22; }
}
:root[data-theme="dark"] { --sea-top: #1B2B34; --sea-bot: #101B21; --sea-ink: #E7EBEC; --sea-muted: #A3B2B9; --ring: #3A5260; --sea-hi: #5E8092; --shoal: #1D2D35; --beach: #3A4244; --land-a: #2A353A; --land-b: #232E33; --foam: #3F525B; --land-ink: #D5DDE0; --isle-shadow: #05090B; --card: #22313A; --card-line: #33444D; --card-ink: #E7EBEC; --card-muted: #9FB0B7; --card-btn: #E7EBEC; --card-btn-ink: #1E2A31; --card-shadow: #000000; --card-shadow-o: .22; }
/* The sea is painted on the root, so it fills the whole canvas: edge to edge
   and below the footer. It starts with the top sea colour, which iOS uses to
   tint the notch and status bar. The body has no margin or background of its
   own; before, its default margin left a lighter frame at the sides and bottom. */
html { background: linear-gradient(180deg, var(--sea-top) 0, var(--sea-bot) 1400px) no-repeat var(--sea-bot); }
/* Clip sideways overflow at the root only: clipping the body too would cut the nav's backdrop at the body's margin. */
html { overflow-x: clip; }
body { font-size: 16px; margin: 0; background: none; color: var(--sea-ink); }
.sea { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding-inline: 24px; padding-block: 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 140px; }
.sea .wmark { color: var(--sea-ink); --eyec: var(--sea-top); }
/* The header follows the first 72px of scroll: the logo and Sign in lift by
   --nav-lift while a frosted capsule, like the web app's header, fades in
   around them. The header's size never changes, so the page never reflows, and
   only transform and opacity animate. Browsers with scroll-driven animations
   run it from the scroll position on the compositor; others get --nav-p on the
   header from landing.js. */
/* No top margin, so the sticky header is held from the first pixel of scroll. */
body { margin-top: 0; }
.sea-nav { --nav-p: 0; --nav-lift: 36px; --nav-pt: calc(env(safe-area-inset-top, 0px) + 52px); --nav-pb: 18px; position: sticky; top: 0; z-index: 10; align-self: start; display: flex; align-items: center; gap: 24px; padding-block: var(--nav-pt) var(--nav-pb); margin-bottom: -140px; transform: translateY(calc(-1 * var(--nav-lift) * var(--nav-p))); }
.sea-nav > .wmark { transform: translateX(calc(10px * var(--nav-p))); }
.sea-nav::before { content: ""; position: absolute; z-index: -1; left: -8px; right: -6px; top: calc(var(--nav-pt) - 6px); bottom: calc(var(--nav-pb) - 6px); border-radius: 999px; background: color-mix(in srgb, var(--sea-top) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea-hi) 70%, transparent); opacity: var(--nav-p); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @keyframes nav-lift { from { transform: none; } to { transform: translateY(calc(-1 * var(--nav-lift))); } }
  @keyframes nav-mark { from { transform: none; } to { transform: translateX(10px); } }
  @keyframes nav-glass { from { opacity: 0; } to { opacity: 1; } }
  .sea-nav, .sea-nav > .wmark, .sea-nav::before { animation-duration: 1ms; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0px 72px; }
  .sea-nav { animation-name: nav-lift; }
  .sea-nav > .wmark { animation-name: nav-mark; }
  .sea-nav::before { animation-name: nav-glass; }
}
.sea-nav .wmark { font-size: 26px; margin-right: auto; text-decoration: none; }
.sea-nav a:not(.wmark):not(.btn) { color: var(--sea-muted); text-decoration: none; font-size: 15px; }
.sea-nav a:not(.wmark):not(.btn):hover { color: var(--sea-ink); }
.btn { font: 500 15px/1 var(--f-ui); padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.sm { padding: 10px 16px; font-size: 14px; }
.landing-account { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 50%; }
.landing-avatar { width: 36px; height: 36px; display: grid; place-items: center; font: 600 14px/1 var(--f-ui); color: #1E2A31; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--beach) 80%, transparent); }
.btn:focus-visible, .urlbox button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sea-hero { display: grid; justify-items: center; text-align: center; gap: 14px; padding-top: 8px; }
.sea-hero h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; max-width: 22ch; color: var(--sea-ink); }
.sea-hero .ctas { position: relative; z-index: 1; margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sea-hero .chart { width: 100%; max-width: 1060px; background: none; box-shadow: none; border-radius: 0; overflow: visible; margin-top: -8px; }
/* The chart is two layers: the still islands (.chart-bg) and the moving parts
   (#chart) above them. Each is its own compositing layer, so an animation frame
   repaints only the moving parts. */
.sea-hero .chart { position: relative; }
.chart svg.chart-bg { position: absolute; inset: 0; height: 100%; }
.chart svg.chart-bg, #chart { will-change: transform; }
#chart { position: relative; }
.isle { position: relative; isolation: isolate; padding: 44px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start;
  --ink: #1E2A31; --muted: #5E6A6F; --line: #E2E3DE; --surface: #FFFFFF; --soft: #EEEEEA; --paper: #F5F5F2; --ok: #2F6B4A; --focus: #2F5F7C;
  color: var(--ink); color-scheme: light; }
.isle .wmark { color: var(--ink); --eyec: #F6F3EA; }
/* Each island is painted once into its own layer, so scrolling never repaints its shadow and shallows. */
.isle > svg.isle-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; will-change: transform; }
/* Dark islands are moonlit land, not sand: their content takes the dark palette. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lab { fill: #B9C5CA; }
:root:not([data-theme="light"]) .lab.s { fill: #8496A0; }
:root:not([data-theme="light"]) .isle { --ink: #E7EBEC; --muted: #A6B3B9; --line: #3A474D; --surface: #1C2629; --soft: #2C373C; --paper: #20292D; --focus: #8DB5CF; color-scheme: dark; }
:root:not([data-theme="light"]) .isle .wmark { --eyec: var(--land-a); }
}
:root[data-theme="dark"] .lab { fill: #B9C5CA; }
:root[data-theme="dark"] .lab.s { fill: #8496A0; }
:root[data-theme="dark"] .isle { --ink: #E7EBEC; --muted: #A6B3B9; --line: #3A474D; --surface: #1C2629; --soft: #2C373C; --paper: #20292D; --focus: #8DB5CF; color-scheme: dark; }
:root[data-theme="dark"] .isle .wmark { --eyec: var(--land-a); }
/* The sea is still: the page's gradient with a faint wave pattern fixed over
   it, as in the web and iOS apps. A full-screen WebGL water shader used most of
   the page's processing time, so it was removed. The pattern overscans every
   edge by --sea-bleed: iOS draws the page under the status bar, the floating
   toolbar and the rounded corners, beyond the layout viewport that a fixed
   element normally fills. */
.sea-waves { --sea-bleed: 120px; position: fixed; left: calc(-1 * var(--sea-bleed)); top: calc(-1 * var(--sea-bleed)); width: calc(100vw + 2 * var(--sea-bleed)); height: calc(100vh + 2 * var(--sea-bleed)); height: calc(100lvh + 2 * var(--sea-bleed)); z-index: 0; pointer-events: none; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='28'%3E%3Cpath d='M0 14 q22.5 -7 45 0 t45 0 t45 0 t45 0' fill='none' stroke='%23B9CCD5' stroke-opacity='.4' stroke-width='.9'/%3E%3C/svg%3E") 0 0 / 180px 28px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sea-waves { opacity: .05; } }
:root[data-theme="dark"] .sea-waves { opacity: .05; }
.rq-fields { list-style: none; margin: 0; padding: 0; display: grid; }
.rq-fields li { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-top: 1px solid var(--line); }
.rq-fields li:first-child { border-top: 0; }
.rq-fields li span { transition: color .3s ease; }
.rq-fields li:has(.sw[aria-pressed="false"]) span { color: color-mix(in srgb, var(--muted) 70%, var(--surface)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.sw { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: #1E2A31; transition: background .3s ease; }
.sw::after { content: ""; position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .3s cubic-bezier(.3,.7,.2,1); }
.sw[aria-pressed="false"] { background: #D5D8D4; }
.sw[aria-pressed="false"]::after { left: 3px; }
.sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip3 { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--p-crown); color: #fff; }
.chip3 i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.start { justify-self: center; width: min(100%, 640px); padding: 60px 56px 64px; justify-items: center; text-align: center; gap: 16px; }
.start .wmark.big { font-size: 56px; margin-bottom: 4px; }
.start .m { color: var(--muted); font-size: 16px; max-width: 34ch; }
.start .small { color: var(--muted); font-size: 13.5px; }
.start .btn { margin-top: 6px; }
.urlbox { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 7px 7px 20px; }
.urlbox code { font-family: var(--f-label); font-size: 14.5px; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; text-align: left; }
.urlbox button { font: 500 14px/1 var(--f-ui); padding: 11px 16px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
.sea-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--sea-muted); }
.sea-foot .wmark { font-size: 20px; margin-right: auto; }
@media (max-width: 900px) {
.sea { gap: 110px; }
.sea-nav a:not(.wmark):not(.btn):not(.landing-account) { display: none; }
.start { padding: 52px 30px 56px; }
}
@media (max-width: 520px) {
.sea-hero { padding-top: 64px; }
.sea-hero .chart { width: 128%; max-width: none; margin-inline: -14%; }
.start .wmark.big { font-size: 44px; }
}
.wmark { font-family: var(--f-brand); }
body { font-family: var(--f-ui); }
.sea-hero h1, .start h2:not(.wmark) { font-family: var(--f-disp); font-weight: 600; letter-spacing: -.03em; }
.sea-hero h1 { letter-spacing: -.028em; }
.lab { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: 9.5px; letter-spacing: .2em; }
.lab.s { font-size: 7.5px; letter-spacing: .16em; font-weight: 500; }
.sea-lab { font-family: "Inter", system-ui, sans-serif; }
.urlbox code { font-family: var(--f-ui); font-feature-settings: "ss02" 1, "tnum" 1; font-size: 15px; }
/* Hero fits the first screen: the map scales to the height left after the nav, headline and buttons. */
.sea-hero { gap: 12px; }
.sea-hero h1 { font-size: clamp(26px, 3vw, 38px); }
.sea-hero .chart { width: min(100%, 1000px, calc((100svh - 360px) * 2.15)); max-width: none; margin-top: -26px; }
@media (max-width: 860px) { .sea-hero .chart { width: 128%; margin-inline: -14%; } }

/* Phones: the button follows the headline, so it is on the first screen; the
   map stands upright under it, and the islands give their content the width. */
@media (max-width: 640px) {
  .sea { gap: 88px; }
  .sea-nav { --nav-pt: calc(env(safe-area-inset-top, 0px) + 12px); --nav-pb: 12px; --nav-lift: 0px; }
  .sea-hero { gap: 10px; padding-top: 0; }
  .sea-hero h1 { font-size: 30px; line-height: 1.1; max-width: 16ch; order: 1; }
  .sea-hero .ctas { order: 2; margin-top: 8px; width: 100%; max-width: 320px; flex-direction: column; }
  .sea-hero .chart, .sea-hero .chart.portrait { order: 3; width: min(92%, 380px); margin: 4px auto 0; }
  .sea-hero .ctas .btn { width: 100%; justify-content: center; }
  .isle { padding-inline: 22px; }
  .start { padding: 50px 24px 54px; }
  .start .urlbox { width: 100%; }
}
@media (max-width: 640px) {
  .start .btn { width: 100%; justify-content: center; white-space: nowrap; font-size: 15px; }
}

/* The J2 wordmark: outlines, sized by font-size like text. */
.wmark .wm-svg, svg.wm-svg.wmark { display: block; height: 1.02em; width: auto; overflow: visible; }
a.wmark, h2.wmark { display: inline-flex; align-items: center; }
.wmark .wb::after { content: none; }

/* The still illustrations arrive in the page, drawn at build time in both
   orientations: the map's side-by-side and upright still layers, and each
   section island for a desktop box and a phone box. CSS shows the one that
   fits, so nothing waits for the script, and the map keeps its shape before
   the script sets the moving layer's viewBox. */
.sea-hero .chart { aspect-ratio: 800 / 372; }
.chart #chart { position: absolute; inset: 0; height: 100%; }
.chart svg.chart-bg.tall, .isle > svg.isle-bg.tall { display: none; }
@media (max-width: 640px) {
  .sea-hero .chart { aspect-ratio: 318 / 622; }
  .chart svg.chart-bg.wide, .isle > svg.isle-bg.wide { display: none; }
  .chart svg.chart-bg.tall, .isle > svg.isle-bg.tall { display: block; }
}

/* Launch sections (2026-10-14): How a request works on the first island, what
   your embassy can share, your own assistant, the app row and the footer.
   Cards sit directly on the sea with a soft lift; dark mode lifts them with a
   hairline and a lighter surface instead of a heavy shadow. */
:root {
  --c-bg: #FFFFFF; --c-ink: #1E2A31; --c-muted: #5E6A6F; --c-line: #E6E7E2; --c-soft: #F1F2EE; --c-raise: #FFFFFF;
  --c-shadow: 0 1px 0 rgba(30,42,49,.04), 0 18px 40px -28px rgba(30,42,49,.40);
  --sand: #EADFC6; --sand-ink: #6B5A36; --ok-ink: #2F6B4A; --ask-ink: #75561A; --block-ink: #8A3B2C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #22313A; --c-ink: #E7EBEC; --c-muted: #9FB0B7; --c-line: #33444D; --c-soft: #2A3A43; --c-raise: #3A4D57;
    --c-shadow: 0 0 0 1px #33444D, 0 18px 40px -30px rgba(0,0,0,.45);
    --sand: #4D4E46; --sand-ink: #E2D6BA; --ok-ink: #7CC79C; --ask-ink: #E3C27A; --block-ink: #E79A87;
  }
}
:root[data-theme="dark"] {
  --c-bg: #22313A; --c-ink: #E7EBEC; --c-muted: #9FB0B7; --c-line: #33444D; --c-soft: #2A3A43; --c-raise: #3A4D57;
  --c-shadow: 0 0 0 1px #33444D, 0 18px 40px -30px rgba(0,0,0,.45);
  --sand: #4D4E46; --sand-ink: #E2D6BA; --ok-ink: #7CC79C; --ask-ink: #E3C27A; --block-ink: #E79A87;
}
.sea { gap: 120px; }
.sec { display: grid; gap: 40px; justify-items: center; width: min(100%, 1000px); justify-self: center; }
.sec-head { display: grid; gap: 12px; text-align: center; justify-items: center; }
.sec h2, .split h2, .how-isle h2 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; max-width: 18ch; }
.sec-head p, .split-copy p { color: var(--sea-muted); font-size: 17px; max-width: 46ch; text-wrap: pretty; }
.card { background: var(--c-bg); color: var(--c-ink); border-radius: 22px; box-shadow: var(--c-shadow); }
.ag-sm { width: 30px; height: 30px; flex: none; }
.ag-xs { width: 24px; height: 24px; flex: none; }
.tile { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; flex: none; }
.tile svg { width: 21px; height: 21px; }
.tile.sm { width: 30px; height: 30px; border-radius: 9px; }
.tile.sm svg { width: 16px; height: 16px; }

/* How a request works: a real sequence, so the steps are numbered. The art,
   title and text of the three steps share rows. */
.how-isle { justify-self: center; width: min(100%, 1060px); padding: 68px 60px 76px; gap: 36px; justify-items: center; }
.how-isle .sec-head p { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 20px; }
.step { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 14px; }
.st-art { padding: 18px; display: flex; flex-direction: column; gap: 12px; justify-content: center; font-size: 14px; }
.step h3 { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; font: 600 18px/1.25 var(--f-disp); letter-spacing: -.02em; color: var(--ink); }
.step h3 .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--f-ui); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); flex: none; }
.step p { color: var(--muted); font-size: 15.5px; padding-left: 36px; }
.who { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.who div { display: grid; }
.who b { font-weight: 600; font-size: 14.5px; }
.who span { color: var(--c-muted); font-size: 13.5px; }
.why { font-size: 13.5px; color: var(--c-ink); background: var(--c-soft); border-radius: 12px; padding: 9px 12px; }
.why i { color: var(--c-muted); font-style: normal; }
.win { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-ink); }
.win svg { width: 15px; height: 15px; color: var(--c-muted); }
.mini-label { font-size: 12.5px; font-weight: 500; color: var(--c-muted); }
.st-art .rq-fields li { padding: 8px 0; font-size: 14px; border-color: var(--c-line); }
.st-art .rq-fields li:has(.sw[aria-pressed="false"]) span { color: var(--c-muted); }
.st-art .sw { width: 34px; height: 20px; background: var(--c-ink); }
.st-art .sw::after { top: 2.5px; left: 16.5px; width: 15px; height: 15px; background: var(--c-bg); }
.st-art .sw[aria-pressed="false"] { background: var(--c-line); }
.st-art .sw[aria-pressed="false"]::after { left: 2.5px; }
.mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-foot .chip3 { font-size: 12px; padding: 4px 10px 4px 8px; }
.pill { font: 500 12.5px/1 var(--f-ui); padding: 8px 13px; border-radius: 999px; background: var(--c-ink); color: var(--c-bg); }

/* Step 3: the in-chat card as the requester sees it, small, in a neutral
   chat. It follows the card's succeeded state in catalog/app/Card.tsx. */
.st-art.host { justify-content: flex-start; gap: 10px; }
.mcp { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; font-size: 12.5px; line-height: 1.4; }
.mcp-head { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-bottom: 1px solid var(--c-line); }
.mcp-head > div { display: grid; gap: 3px; }
.mcp-av { width: 22px; height: 22px; border-radius: 50%; background: #86B07A; color: #1E2A31; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none; }
.mcp-ok { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 11px; font-weight: 500; color: var(--ok-ink); background: color-mix(in srgb, var(--ok-ink) 11%, transparent); padding: 2px 7px 2px 5px; border-radius: 999px; }
.mcp-ok svg { width: 11px; height: 11px; }
.mcp-body { display: grid; gap: 5px; padding: 9px 11px; }
.mcp-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--c-soft); }
.mcp-mail b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-mail span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.mcp-mail i { grid-column: 1 / -1; font-style: normal; color: var(--c-muted); display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
.mcp-mail i svg { width: 11px; height: 11px; }
.mcp-foot { padding: 6px 11px 7px; border-top: 1px solid var(--c-line); line-height: 0; }
.mcp-foot .wmark { font-size: 11px; color: var(--c-muted); }
.step .st-art p.host-say { padding-left: 2px; font-size: 13.5px; color: var(--c-ink); }

/* What your embassy can share: one sand tile per kind of data, as in the
   apps, and where each comes from with the provider's own logo. Live sources
   are in ink; coming ones keep their logo and fade their name. */
#reach { width: min(100%, 1000px); }
.kinds { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; }
.kind { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding: 18px 16px 20px; }
.kind h3 { margin: 0; font: 600 16.5px/1.25 var(--f-disp); letter-spacing: -.015em; }
.kind p { color: var(--c-muted); font-size: 14px; line-height: 1.5; }
ul.src { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 9px; align-content: start; border-top: 1px solid var(--c-line); }
ul.src li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--c-ink); min-width: 0; }
ul.src li span:not(.logo) { flex: 1; min-width: 0; line-height: 1.3; }
ul.src li.off { color: var(--c-muted); font-weight: 400; }
ul.src li em { font: 500 10.5px/1 var(--f-ui); font-style: normal; padding: 3px 6px; border-radius: 999px; background: var(--c-soft); color: var(--c-muted); flex: none; }
.logo { width: 20px; height: 20px; flex: none; object-fit: contain; }
.logo.dev { border-radius: 6px; background: var(--c-soft); color: var(--c-ink); display: grid; place-items: center; }
.logo.dev svg { width: 14px; height: 14px; }

/* Two columns: copy beside one picture. */
.split { width: min(100%, 1000px); justify-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; }
.split-copy { display: grid; gap: 14px; align-content: center; }
.split-copy h2 { max-width: 14ch; }
.split-copy .note { font-size: 14.5px; color: var(--sea-muted); max-width: 46ch; }

/* Your own assistant: a question about your own mail, then one setting per
   assistant on the permission. */
.perm { padding: 8px 20px 10px; display: grid; }
.chat { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; line-height: 1.45; }
.chat .me { justify-self: end; max-width: 85%; background: var(--c-ink); color: var(--c-bg); padding: 9px 13px; border-radius: 16px 16px 6px 16px; }
.chat .them { display: flex; gap: 9px; align-items: flex-start; max-width: 92%; }
.chat .them > div { background: var(--c-soft); padding: 9px 13px; border-radius: 16px 16px 16px 6px; }
.chat .them b { font-weight: 600; }
.chat .them svg { margin-top: 4px; }
.perm-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.perm-head div { display: grid; line-height: 1.3; }
.perm-head b { font-weight: 600; font-size: 15px; }
.perm-head span { color: var(--c-muted); font-size: 13.5px; }
.perm-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.perm-head + .perm-row { border-top: 0; }
.perm-row .nm { flex: 1; min-width: 120px; display: grid; line-height: 1.3; }
.perm-row .nm b { font-weight: 600; font-size: 14.5px; }
.perm-row .nm span { color: var(--c-muted); font-size: 13px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--c-soft); gap: 2px; }
.seg button { font: 500 13px/1 var(--f-ui); border: 0; background: transparent; color: var(--c-muted); padding: 8px 11px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-ink); box-shadow: 0 1px 2px rgba(30,42,49,.14), 0 0 0 1px var(--c-line); }
.seg button[data-v="allow"][aria-pressed="true"] { color: var(--ok-ink); }
.seg button[data-v="ask"][aria-pressed="true"] { color: var(--ask-ink); }
.seg button[data-v="block"][aria-pressed="true"] { color: var(--block-ink); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* The app row in the start island. Official store badges are shown unchanged;
   Google's image carries its own clear space, so it is drawn taller to match
   Apple's badge. Beta links are plain buttons: the badges are only for store
   listings. */
.start .get { display: grid; gap: 10px; justify-items: center; margin-top: 14px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); width: 100%; }
.stores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge.apple img { height: 44px; width: auto; }
.badge.gplay img { height: 65px; width: auto; margin: -10.5px -8px; }
.start .stores .btn { margin-top: 0; width: auto; min-height: 44px; }

/* Footer: links, contact and, with store badges, their trademark notice. */
.foot { display: grid; gap: 36px; border-top: 1px solid color-mix(in srgb, var(--ring) 70%, transparent); padding-block: 40px 0; color: var(--sea-muted); font-size: 14.5px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.foot-brand { display: grid; gap: 10px; align-content: start; margin-right: auto; max-width: 30ch; }
.foot-brand .wmark { font-size: 24px; color: var(--sea-ink); }
.foot-col { display: grid; gap: 9px; align-content: start; min-width: 0; }
.foot-col h3 { margin: 0 0 3px; font: 600 13px/1.2 var(--f-ui); letter-spacing: .02em; color: var(--sea-ink); }
.foot-col a { color: var(--sea-muted); text-decoration: none; }
.foot-col a:hover { color: var(--sea-ink); }
.mailto { display: inline-flex; align-items: center; gap: 8px; }
.mailto code { font: 500 14.5px/1.2 var(--f-ui); color: var(--sea-ink); user-select: all; }
.mailto button { font: 500 12.5px/1 var(--f-ui); padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ring) 80%, transparent); background: transparent; color: var(--sea-muted); cursor: pointer; }
.foot-base { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; }
.foot-base span:first-child { margin-right: auto; }
.tm { font-size: 12px; color: var(--sea-muted); max-width: 90ch; }

@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 460px; }
  .step { grid-row: auto; grid-template-rows: auto; gap: 10px; }
  .step > .st-art { order: 1; margin-top: 4px; }
  .step h3 { margin-top: 0; }
  .steps { gap: 36px; }
  .how-isle { padding: 56px 30px 64px; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; }
  .split-copy { justify-items: center; text-align: center; }
}
@media (max-width: 640px) {
  .how-isle { padding: 52px 22px 60px; }
  .sec-head p, .split-copy p { font-size: 16px; }
  .sec h2, .split h2, .how-isle h2 { font-size: 30px; }
  .kinds { grid-template-columns: minmax(0, 1fr); }
  .kind { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; }
  .kind .tile { grid-row: span 2; }
  .kind ul.src { grid-column: 2; margin-top: 8px; padding-top: 10px; }
  .foot-top { gap: 28px 40px; }
  .foot-brand { flex-basis: 100%; }
}

/* Privacy policy and terms: one readable card on the sea. */
.legal-page { gap: 32px; max-width: 860px; }
.legal-nav { padding-top: calc(env(safe-area-inset-top, 0px) + 40px); }
.legal-nav .wmark { font-size: 26px; text-decoration: none; }
.legal { padding: 48px 56px 56px; font-size: 16px; line-height: 1.65; display: grid; gap: 14px; }
.legal h1 { font: 600 clamp(30px, 4vw, 40px)/1.1 var(--f-disp); letter-spacing: -.035em; margin: 6px 0 4px; }
.legal h2 { font: 600 20px/1.3 var(--f-disp); letter-spacing: -.02em; margin: 18px 0 0; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal b { font-weight: 600; }
.legal a { color: inherit; }
.legal code { font: 500 .95em var(--f-ui); }
.legal table { border-collapse: collapse; font-size: 14.5px; width: 100%; }
.legal th, .legal td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.legal th { font-weight: 600; }
.legal .draft { font-size: 14px; background: color-mix(in srgb, var(--ask-ink) 12%, transparent); color: var(--c-ink); padding: 10px 14px; border-radius: 12px; }
.legal .todo { color: var(--ask-ink); font-style: italic; }
.legal-foot { color: var(--sea-muted); padding-bottom: 8px; }
.legal-foot a { color: var(--sea-muted); }
@media (max-width: 640px) {
  .legal { padding: 32px 22px 40px; }
  .legal table { font-size: 13.5px; }
}

/* The problem, under the headline (since 2026-10-15). */
.sea-hero .lede { color: var(--sea-muted); font-size: 17px; line-height: 1.5; max-width: 50ch; text-wrap: balance; margin-top: -4px; }
@media (max-width: 640px) { .sea-hero .lede { order: 1; font-size: 15.5px; max-width: 34ch; } }
.nw { white-space: nowrap; }
.start .tagline { font: 600 22px/1.2 var(--f-disp); letter-spacing: -.02em; text-wrap: balance; color: var(--ink); margin: -8px 0 4px; }

/* How it works: one request told three ways. Every example sits in the same
   grid cell, so the cards keep the tallest example's height and nothing moves
   when the example changes. */
.cases { display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--c-soft); box-shadow: inset 0 0 0 1px var(--c-line); margin-top: -12px; }
.cases button { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1 var(--f-ui); border: 0; background: transparent; color: var(--c-muted); padding: 9px 15px 9px 12px; border-radius: 11px; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.cases button svg { width: 16px; height: 16px; }
.cases button:hover { color: var(--c-ink); }
.cases button[aria-pressed="true"] { background: var(--c-raise); color: var(--c-ink); box-shadow: 0 1px 2px rgba(30,42,49,.12), 0 0 0 .5px rgba(30,42,49,.06); }
.cases button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.st-art { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-content: stretch; }
.st-art > .case { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; transition: opacity .28s ease, visibility 0s; }
.st-art.host > .case { justify-content: flex-start; gap: 10px; }
.steps:not([data-show="calendar"]) .case[data-case="calendar"],
.steps:not([data-show="location"]) .case[data-case="location"],
.steps:not([data-show="email"]) .case[data-case="email"],
.steps:not([data-show="documents"]) .case[data-case="documents"] { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.also { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-muted); }
.also .dots { display: inline-flex; }
.also .dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--c-soft); box-shadow: 0 0 0 2px var(--c-bg); margin-left: -5px; }
.also .dots i:first-child { margin-left: 0; background: #D6B26C; }
.also .dots i:nth-child(2) { background: #86B07A; }
.also .dots i:nth-child(3) { background: #A98FC9; }
.also .dots i:nth-child(4) { background: #7B98AD; }
.mcp-map { border-radius: 6px; overflow: hidden; line-height: 0; }
.mcp-map svg { width: 100%; height: auto; display: block; }
.mm-land { fill: var(--c-soft); }
.mm-street { stroke: var(--c-bg); stroke-width: 4; fill: none; }
.mm-river { stroke: color-mix(in srgb, #7B98AD 45%, var(--c-soft)); stroke-width: 9; fill: none; stroke-linecap: round; }
.mm-acc { fill: color-mix(in srgb, #7B98AD 22%, transparent); stroke: color-mix(in srgb, #7B98AD 70%, transparent); stroke-width: 1.2; }
.mm-pin { fill: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .st-art > .case, .steps .case { transition: none; } }
@media (max-width: 640px) {
  .cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 360px); }
  .cases button { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 2px 8px; font-size: 11.5px; }
  .cases button svg { width: 18px; height: 18px; }
}
.mm-dot { fill: var(--c-bg); }
.mcp-doc i { display: block; white-space: normal; line-height: 1.45; }
.mcp-doc i svg { display: none; }