/* 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: #4D4E46; --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: #4D4E46; --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 { 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; }
.vow { justify-self: center; width: min(100%, 940px); padding: 72px 72px 80px; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; column-gap: 56px; }
.vow-copy { display: grid; gap: 14px; }
.vow h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; max-width: 11ch; }
.vow-copy p { color: var(--muted); font-size: 17px; max-width: 28ch; }
.req { background: var(--surface); border-radius: 22px; padding: 20px; display: grid; gap: 16px; box-shadow: 0 1px 0 rgba(30,42,49,.05), 0 24px 48px -28px rgba(30,42,49,.45); font-size: 15px; }
.rq-head { display: flex; align-items: center; gap: 12px; }
.rq-head .ag { width: 38px; height: 38px; flex: none; }
.rq-head div { display: grid; line-height: 1.3; }
.rq-head b { font-weight: 600; }
.rq-head span { color: var(--muted); font-size: 14px; }
.rq-when { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.rq-when svg { width: 16px; height: 16px; color: var(--muted); }
.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; }
.rq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.rq-foot .chip3 { white-space: nowrap; }
.rq-foot .chip3 { margin-right: auto; }
.rq-foot .btn2s { padding: 10px 15px; font-size: 13.5px; }
.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; }
.btn2s { font: 500 12.5px/1 var(--f-ui); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn2s.dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.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; }
.vow { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 56px 30px 64px; }
.vow-copy { justify-items: center; text-align: center; }
.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, .vow h2, .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 - 300px) * 2.15)); max-width: none; margin-top: -26px; }
@media (max-width: 860px) { .sea-hero .chart { width: 128%; margin-inline: -14%; } }

/* Phones: the map stands upright between the headline and the buttons, and
   the islands give their content the width. */
@media (max-width: 640px) {
  .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: 27px; max-width: 16ch; order: 1; }
  .sea-hero .chart, .sea-hero .chart.portrait { order: 2; width: min(100%, 420px); margin: 0 auto; }
  .sea-hero .ctas { order: 3; margin-top: 2px; width: 100%; max-width: 340px; flex-direction: column; }
  .sea-hero .ctas .btn { width: 100%; justify-content: center; }
  .isle { padding-inline: 22px; }
  .vow { padding: 52px 22px 58px; row-gap: 26px; }
  .vow h2 { font-size: 30px; }
  .vow-copy p { font-size: 16px; }
  .start { padding: 50px 24px 54px; }
  .start .urlbox { width: 100%; }
}
@media (max-width: 640px) {
  /* Decline and Approve share a row under the end date. */
  .rq-foot { display: grid; grid-template-columns: 1fr 1fr; }
  .rq-foot .chip3 { grid-column: 1 / -1; justify-self: start; margin: 0 0 2px; }
  .rq-foot .btn2s { justify-content: center; text-align: center; }
  .req { padding: 18px; }
  .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; }
}