/* Fish Zone — fishzone.pro
   Palette is taken from the app and from the depth charts it shows:
   deep water navy, pale water background, the app's action blue, status green,
   and the shallow-water orange of the bathymetry as the single warm accent. */

:root {
    --deep: #0a2a43;        /* navy: headings, dark sections */
    --deep-2: #0f3a5c;
    --ink: #17324a;         /* body text */
    --muted: #5a7389;
    --water: #eef4f8;       /* page background */
    --water-2: #e2ecf3;
    --line: #cfdce6;
    --surface: #ffffff;
    --blue: #1d6fe0;        /* app action blue */
    --blue-ink: #0b57c9;
    --green: #22a55b;       /* "allowed" / good conditions */
    --red: #d9474a;         /* "prohibited" */
    --shallow: #e7a33b;     /* bathymetry orange, used sparingly */
    --sand: #f3dfae;
    --radius: 22px;
    --radius-s: 12px;
    --max: 1180px;
    --gutter: clamp(16px, 4vw, 48px);
    --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--water);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

h1, h2 { color: var(--deep); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(38px, 5.6vw, 68px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
p { margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--blue); color: #fff; font-weight: 700;
    padding: 12px 20px; border-radius: 999px; white-space: nowrap;
}
.btn:hover { background: var(--blue-ink); text-decoration: none; }
.btn-small { padding: 9px 16px; font-size: 15px; }

/* ------------------------------------------------------------ header */
.top {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
    padding: 12px var(--gutter);
    background: rgba(238, 244, 248, 0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(207, 220, 230, 0.7);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--deep); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.brand img { border-radius: 9px; }
.brand:hover { text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* the country line moves from the hero into the header on phones */
.brand-where { display: none; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--blue-ink); }
@media (max-width: 900px) { .brand-where { display: block; } }
.top-nav { display: flex; gap: 22px; justify-content: center; }
.top-nav a { color: var(--ink); font-weight: 500; font-size: 15px; }
.top-right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.lang button { border: 0; background: none; padding: 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.lang button.is-on { background: var(--deep); color: #fff; }

@media (max-width: 760px) {
    .top { grid-template-columns: auto auto; }
    .top-nav { display: none; }
    .btn-small { display: none; }
}

/* ------------------------------------------------------------ phone frame */
.phone {
    position: relative;
    width: 300px; aspect-ratio: 300 / 622;
    border-radius: 44px;
    background: #111418;
    padding: 10px;
    box-shadow: 0 30px 60px -20px rgba(10, 42, 67, 0.45), 0 0 0 1px rgba(0,0,0,0.25) inset;
}
.phone::before {           /* dynamic island, sized with the phone (92×26 at 20px on a 300px frame) */
    content: ""; position: absolute; top: 3.2%; left: 50%; transform: translateX(-50%);
    width: 30.7%; height: 4.2%; border-radius: 999px; background: #111418; z-index: 2;
}
.phone-screen {
    position: relative; width: 100%; height: 100%;
    border-radius: 35px; overflow: hidden; background: #f3f6fa;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(48px, 7vw, 88px); }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* The app's fish mark as a faint watermark (from the app's adaptive icon, transparent eye).
   Sits between the contour lines and the content. */
.brand-mark {
    position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 574 / 482;
    background: url(images/fish-mark.webp) no-repeat center / contain;
}
.hero .brand-mark { width: min(48vw, 680px); left: 1%; top: 14%; opacity: .06; rotate: -6deg; }
.brand-mark-light { width: min(48vw, 560px); right: -6%; bottom: -14%; opacity: .07; rotate: 8deg; filter: brightness(0) invert(1); }
@media (max-width: 900px) {
    .hero .brand-mark { width: 110vw; left: -30%; top: 2%; opacity: .05; }
    .brand-mark-light { width: 90vw; right: -30%; bottom: -10%; }
}
.hero-grid {
    position: relative; z-index: 1;
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(24px, 5vw, 72px);
}
.hero-where { font-weight: 700; color: var(--blue-ink); margin-bottom: 14px; }
.hero-sub { font-size: clamp(18px, 1.6vw, 21px); max-width: 34em; margin: 22px 0 28px; color: var(--ink); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Both store badges sit in the same black frame (same width, height and border); each official
   image is centred inside with its own grey border cropped away, so the two never differ in size. */
.store-badge {
    --badge-w: 188px; --badge-h: 56px; --badge-art: 58px;
    display: flex; align-items: center; justify-content: center;
    width: var(--badge-w); height: var(--badge-h); overflow: hidden;
    background: #000; border: 1px solid #a6a6a6; border-radius: 9px;
}
.store-badge img { flex: none; height: var(--badge-art); width: auto; max-width: none; }
/* App Store SVG (no padding): a little wider than the frame, so its own grey edge is cropped on every side */
.store-badge:not(.store-badge-play) img { width: calc(var(--badge-w) + 6px); height: auto; }
/* The Google Play PNG (646×250) has 41px of transparent padding on every side (visible badge 168px tall):
   scale it so the visible badge is --badge-art tall; the frame crops the padding and its border. */
.store-badge-play img { height: calc(var(--badge-art) * 250 / 168); }
@media (max-width: 420px) { .store-badge { --badge-w: 144px; --badge-h: 43px; --badge-art: 45px; } }
@media (max-width: 370px) { .store-badge { --badge-w: 136px; --badge-h: 41px; --badge-art: 43px; } }
.store-badge:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) { .store-badge { transition: transform .2s ease; } }

.facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px;
    margin: 40px 0 0; padding: 0; max-width: 620px;
}
.facts div { border-left: 3px solid var(--shallow); padding-left: 14px; }
.facts dt { font-size: 30px; font-weight: 800; color: var(--deep); letter-spacing: -0.02em; line-height: 1; }
.facts dd { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--ink); }

/* Two phones stacked in one grid cell: the depth chart ("where you can fish") tilted behind,
   the species list ("what you can take") in front. Placement uses the individual translate/rotate/scale
   properties so GSAP's transform (intro, parallax) composes with it instead of replacing it. */
.hero-phone { margin: 0; display: grid; place-items: center; }
.hp { grid-area: 1 / 1; }
.hp-back { translate: -44% 3%; rotate: -7deg; scale: .88; }
.hp-back .phone { box-shadow: 0 24px 50px -24px rgba(10, 42, 67, 0.5), 0 0 0 1px rgba(0,0,0,0.25) inset; }
.hp-front { translate: 22% 0; rotate: 3deg; z-index: 1; }
.hero-phone .phone { width: min(320px, 78vw); }
@media (max-width: 900px) {
    /* both phones stay, smaller, fanned out under the store buttons */
    .hero-phone .phone { width: min(240px, 50vw); }
    .hp-back { translate: -32% 4%; }
    .hp-front { translate: 24% 0; }
}

/* Hero entrance is driven by motion.js (GSAP). Until it takes over, the hero stays hidden so it
   doesn't flash; the inline script in <head> removes fz-motion if motion.js never runs. */
.fz-motion .hero-copy > *, .fz-motion .hero-phone .phone { visibility: hidden; }
/* SplitText line masks: room for descenders so "g", "y" aren't clipped during the reveal */
.h1-line-mask { padding-bottom: .12em; margin-bottom: -.12em; }

@media (max-width: 900px) {
    /* One column: the copy's children join the grid so they can be reordered.
       The header already names the app and the countries and the facts say what the subtitle says, so the
       headline is visually hidden (kept for search and screen readers): store buttons → facts → phones. */
    .hero-grid { grid-template-columns: 1fr; row-gap: 0; }
    .hero-copy { display: contents; }
    .hero { padding-top: 16px; }
    .hero-where, .hero-sub { display: none; }
    .hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .stores { justify-content: center; }
    .facts { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 18px 0 0; }
    .facts div { padding-left: 10px; }
    .facts dt { font-size: 22px; }
    .facts dd { font-size: 13px; margin-top: 4px; line-height: 1.35; }
    .hero-phone { order: 2; margin: 16px 0 8px; }
}

/* ------------------------------------------------------------ section heads */
section { padding: clamp(56px, 8vw, 110px) var(--gutter); }
.section-head { max-width: var(--max); margin: 0 auto 36px; }
.section-head p { margin-top: 14px; max-width: 40em; font-size: 18px; color: var(--muted); }

/* ------------------------------------------------------------ story */
.story { background: var(--surface); padding-top: 0; padding-bottom: 0; }
.story-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 6vw, 96px);
}
.story-steps { padding: 8vh 0; }
.step { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; opacity: .3; }
.step.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .step { transition: opacity .4s ease; } }
.step h2 { font-size: clamp(26px, 3vw, 36px); }
.step p { margin-top: 14px; max-width: 30em; font-size: 18px; }
.step-shot { display: none; margin: 0; }
.story-progress { display: none; }

.story-phone-wrap { position: relative; }
.story-phone { position: sticky; top: calc(50vh - 311px); margin: 0 auto; }

/* Screen layers inside the pinned phone. Each layer is one app screen; the active one carries
   a "focus" transform (pan/zoom to the detail being described). Enter/leave mimic the app:
   tab = horizontal slide, push = iOS navigation push, sheet = bottom sheet. */
.story-layer {
    position: absolute; inset: 0; overflow: hidden; background: #f3f6fa;
    opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.story-layer img, .story-layer video {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
    transform-origin: var(--fx, 50%) var(--fy, 0%);
    transform: scale(var(--fs, 1));
}
.story-layer.is-on { opacity: 1; z-index: 2; }
/* "Video" badge on looped clips: pill above the app's tab bar, with a line that follows playback. */
.clip-badge {
    position: absolute; left: 50%; bottom: 13%; translate: -50% 0; z-index: 3;
    display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 6px 12px 7px 26px; border-radius: 999px;
    background: rgba(10, 42, 67, .82); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); pointer-events: none;
}
.clip-badge::before {
    content: ""; position: absolute; left: 11px; top: 50%; translate: 0 -50%;
    border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
}
.clip-badge i { display: block; height: 2px; border-radius: 2px; background: #7fc4ff; transform: scaleX(0); transform-origin: left; }
.step-shot { position: relative; }
.story-layer.is-prev { opacity: 1; z-index: 1; }
.story-layer.is-prev img, .story-layer.is-prev video { transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .story-layer { transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s ease; }
    .story-layer img, .story-layer video { transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .25s; }
    /* enter states: set by JS for one frame, then removed */
    .story-layer.enter-tab-fwd  { transform: translateX(100%); opacity: 1; }
    .story-layer.enter-tab-back { transform: translateX(-100%); opacity: 1; }
    .story-layer.enter-push     { transform: translateX(100%); opacity: 1; box-shadow: -20px 0 40px rgba(0,0,0,.25); }
    .story-layer.enter-sheet    { transform: translateY(100%); opacity: 1; border-radius: 28px 28px 0 0; }
    .story-layer.leave-tab-fwd  { transform: translateX(-30%); opacity: 0; }
    .story-layer.leave-tab-back { transform: translateX(30%); opacity: 0; }
    .story-layer.leave-push     { transform: scale(.94); opacity: .5; filter: brightness(.7); }
    .story-layer.leave-sheet    { transform: scale(.96); opacity: 1; filter: brightness(.6); }
}

/* Mobile: the story becomes a horizontal, snapping strip of screens with the caption under each.
   Vertical scroll stays short; swiping sideways is the "scroll" of this section. */
@media (max-width: 860px) {
    .story { padding: 48px 0 40px; }
    .story-grid { display: block; }
    .story-phone-wrap { display: none; }
    .story-steps {
        display: flex; gap: 14px; padding: 0 var(--gutter) 8px;
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .story-steps::-webkit-scrollbar { display: none; }
    .step {
        flex: 0 0 min(66vw, 280px); scroll-snap-align: center; scroll-snap-stop: always;
        min-height: 0; padding: 0; opacity: 1; justify-content: flex-start;
    }
    .step-shot {
        display: block; width: 100%; aspect-ratio: 300 / 540;
        border-radius: 30px; padding: 8px; background: #111418;
        box-shadow: 0 18px 36px -18px rgba(10,42,67,.5);
    }
    .step-shot img, .step-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
    .step h2 { font-size: 22px; margin-top: 18px; }
    .step p { font-size: 16px; margin-top: 8px; }
    .story-progress {
        display: block; height: 4px; margin: 18px var(--gutter) 0; border-radius: 999px; background: var(--water-2); overflow: hidden;
    }
    .story-progress span { display: block; height: 100%; width: 16.6%; background: var(--blue); border-radius: inherit; }
}

/* ------------------------------------------------------------ layers */
.layers-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 5vw, 80px); align-items: center; }
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.layer-list button {
    width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px;
    padding: 14px 18px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.layer-list button strong { font-size: 17px; color: var(--deep); }
.layer-list button span { grid-column: 1; font-size: 14px; color: var(--muted); }
.layer-list button::after {     /* toggle pill */
    content: ""; grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 26px; border-radius: 999px;
    background: var(--line) radial-gradient(circle at 13px 13px, #fff 9px, transparent 10px) no-repeat 0 0 / 26px 26px;
}
.layer-list button.is-on { border-color: var(--blue); background: #f2f7ff; }
.layer-list button.is-on::after { background-color: var(--blue); background-position: 18px 0; }
@media (prefers-reduced-motion: no-preference) {
    .layer-list button { transition: border-color .25s ease, background-color .25s ease; }
    .layer-list button::after { transition: background-color .25s ease, background-position .3s cubic-bezier(.3,.7,.3,1.3); }
}
.layers-phone { margin: 0 auto; }
.layer-desc { display: none; }
@media (max-width: 860px) {
    .layers-grid { grid-template-columns: 1fr; gap: 14px; }
    .layers-phone { width: min(260px, 64vw); }
    /* Phones: the layers become a swipeable row of chips, the phone screen right under them. */
    .layer-list {
        display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin: 0 -16px; padding: 2px 16px 4px; position: relative;
    }
    .layer-list::-webkit-scrollbar { display: none; }
    .layer-list li { flex: none; scroll-snap-align: center; }
    .layer-list button { display: block; width: auto; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
    .layer-list button strong { font-size: 15px; }
    .layer-list button.is-on { background: var(--deep); border-color: var(--deep); }
    .layer-list button.is-on strong { color: #fff; }
    .layer-list button span, .layer-list button::after { display: none; }
    .layer-desc { display: block; margin: 0 auto; max-width: 34em; min-height: 3em; text-align: center; font-size: 15px; color: var(--muted); }
}

/* ------------------------------------------------------------ forecast */
.forecast { background: var(--water); }
.layers { background: var(--surface); }
.fc-card {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start;
}
.fc-col { display: grid; gap: 20px; }
.fc-left, .fc-right, .fc-trend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.fc-trend-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fc-trend h3 { font-size: 18px; font-weight: 800; color: var(--deep); margin: 0; }
.fc-trend-now { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.2; }
.fc-trend-now b { display: block; font-size: 30px; font-weight: 800; color: var(--deep); letter-spacing: -0.02em; }
.fc-trend-delta { flex: none; font-size: 12px; font-weight: 700; color: #0b57c9; background: #eef4ff; border: 1px solid #d6e4fb; border-radius: 9px; padding: 4px 9px; white-space: nowrap; }
.fc-trend-plot { position: relative; height: 80px; margin: 26px 6px 0; }
.fc-trend-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fc-trend-plot i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #1769e0; }
.fc-trend-plot i.fc { background: #13b7d6; }
.fc-trend-plot b { position: absolute; transform: translate(-50%, -150%); font-size: 11px; font-weight: 600; color: var(--deep); white-space: nowrap; }
.fc-trend-axis { position: relative; height: 18px; margin: 8px 6px 0; }
.fc-trend-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #62708b; white-space: nowrap; }
.fc-trend-src { margin-top: 6px; font-size: 12px; color: var(--muted); }
.fc-cond-title { margin: 20px 0 0; font-size: 18px; font-weight: 800; color: var(--deep); }
.fc-left { display: flex; flex-direction: column; gap: 18px; }
.fc-summary { display: flex; align-items: center; gap: 18px; }
.fc-score { position: relative; width: 112px; height: 112px; flex: none; }
.fc-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fc-ring-bg { fill: none; stroke: #e9eff3; stroke-width: 11; }
.fc-ring-val { fill: none; stroke: #0b9a61; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 81; }
@media (prefers-reduced-motion: no-preference) { .fc-ring-val { transition: stroke-dashoffset .35s ease, stroke .35s ease; } }
.fc-score-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.fc-score-num b { font-size: 38px; font-weight: 800; color: var(--deep); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fc-score-num small { color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 4px; }
.fc-level { font-weight: 800; font-size: 19px; color: #0b9a61; line-height: 1.2; }
.fc-level.mid { color: #e0901a; }
.fc-level.low { color: var(--muted); }
.fc-conf { color: #e0901a; font-size: 14px; margin-top: 4px; }
.fc-window { color: var(--muted); font-size: 14px; margin-top: 8px; }
.fc-window b { display: block; color: var(--deep); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.fc-fish { width: 100%; height: auto; display: block; }

.fc-chart-title { font-size: 20px; font-weight: 800; color: var(--deep); margin: 0 0 6px; }
.fc-plot { position: relative; padding-left: 62px; }
/* Sky above the chart: the sun or the moon follows the selected hour, rising from and setting below the horizon line. */
.fc-sky { position: relative; height: 66px; overflow: hidden; border-bottom: 1px dashed #d6e2ec; border-radius: 10px 10px 0 0; background: #eef5ff; }
@media (prefers-reduced-motion: no-preference) { .fc-sky { transition: background-color .6s ease; } }
.fc-sky.is-day { background: #f6faff; }
.fc-sky.is-dawn { background: #fff7e3; }
.fc-mark { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #f5a524; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-mark i { font-style: normal; margin-right: 1px; }
.fc-body { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; will-change: transform; }
.fc-body svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-sun circle { fill: #ffb000; }
.fc-sun path { stroke: #ffb000; stroke-width: 2; stroke-linecap: round; fill: none; }
.fc-moon path { fill: #1769e0; }
.fc-body .fc-moon, .fc-body.is-night .fc-sun { display: none; }
.fc-body.is-night .fc-moon { display: block; }
.fc-graph { position: relative; height: 170px; }
.fc-chart { width: 100%; height: 100%; display: block; }
.fc-lvl { position: absolute; right: 100%; margin-right: 8px; transform: translateY(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; }
.fc-lvl[data-v="70"] { color: #3fae7f; }
.fc-lvl[data-v="55"] { color: #f5a524; }
.fc-lvl[data-v="35"] { color: #6f9cf5; }
.fc-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #1769e0; box-shadow: 0 0 0 3px #fff; left: 0; top: 0; }
.fc-axis { position: relative; height: 22px; }
.fc-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: #62708b; font-variant-numeric: tabular-nums; }
.fc-pill-row { position: relative; height: 28px; }
.fc-pill { position: absolute; top: 0; transform: translateX(-50%); background: #1769e0; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-slider { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.fc-slider input { flex: 1; accent-color: var(--blue); }
.fc-slider output { font-weight: 800; color: var(--deep); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.fc-factors { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fc-factors li { background: var(--water); border-radius: var(--radius-s); padding: 12px 14px; }
.fc-factors strong { display: block; color: var(--deep); font-size: 15px; }
.fc-factors span { display: block; color: var(--muted); font-size: 14px; }
.fc-factors em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.fc-factors em.up { background: #e3f5ea; color: #156b3a; }
.fc-factors em.up2 { background: #bfe8cf; color: #0f5a30; }
.fc-factors em.flat { background: var(--water-2); color: var(--muted); }
.fc-factors em.down { background: #fbe4e5; color: #9d2b2e; }
.fc-foot { margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
    .fc-card { grid-template-columns: 1fr; }
    .fc-col { grid-template-columns: 1fr 1fr; }
    .fc-fish { width: 80%; max-width: 260px; margin: auto auto 0; }
}
@media (max-width: 560px) {
    .fc-left, .fc-right, .fc-trend { padding: 18px 16px; }
    .fc-col { grid-template-columns: 1fr; }
    .fc-fish { width: 70%; margin: 0 auto; }
    .fc-plot { padding-left: 52px; }
    .fc-lvl { font-size: 10px; }
}

/* ------------------------------------------------------------ download */
.download { position: relative; overflow: hidden; background: var(--deep); color: #d9e6f0; text-align: center; }
.download-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.download-icon { border-radius: 22px; background: #fff; padding: 10px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.6); }
.download h2 { color: #fff; }
.download p { font-size: 18px; max-width: 32em; }
.download .stores { justify-content: center; margin-top: 8px; }

/* ------------------------------------------------------------ footer */
.foot { background: var(--deep-2); color: #b9cbda; padding: 32px var(--gutter); font-size: 14px; }
.foot-grid { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.foot strong { color: #fff; font-size: 16px; }
.foot p { margin-top: 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: #e6eef5; }

/* ------------------------------------------------------------ legal pages (privacy-policy, delete-account)
   Plain document look: white page, numbered sections divided by rules, contents list beside the text. */
.legal-page { background: var(--surface); }
.legal-page .top { background: rgba(255, 255, 255, 0.88); }
.legal { max-width: 760px; margin: 0 auto; padding: 44px var(--gutter) 80px; }
.legal-with-toc { max-width: 1080px; display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 56px; align-items: start; }
.legal-with-toc .legal-head { grid-column: 1 / -1; }
.legal-head { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 2px solid var(--deep); }
.legal-head h1 { font-size: clamp(28px, 4vw, 42px); hyphens: auto; overflow-wrap: break-word; }
.legal-head > p { margin-top: 6px; color: var(--muted); font-size: 16px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.legal-meta p:first-child { color: var(--ink); font-weight: 600; }

.legal-toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; font-size: 14px; }
.legal-toc > p { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink); line-height: 1.35; }
.legal-toc a:hover { color: var(--blue-ink); text-decoration: none; }
.legal-toc a.is-current { border-left-color: var(--blue); color: var(--blue-ink); font-weight: 600; }

.legal-body { font-size: 16px; line-height: 1.65; }
.legal-body h2, .legal-body h3 { scroll-margin-top: 84px; }
.legal-body h2 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; margin: 36px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { color: var(--deep); font-size: 17px; margin: 22px 0 8px; }
.legal-body h4 { color: var(--deep-2); font-size: 15px; margin: 16px 0 4px; }
.legal-body p, .legal-body ul { margin: 0 0 12px; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 5px; }
.legal-body strong { color: var(--deep); }
.legal-body a { overflow-wrap: anywhere; }
.legal-box { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 4px; padding: 16px 20px; margin: 24px 0; }
.legal-box h3 { margin-top: 0; }
.legal-warn { border-left: 3px solid var(--red); background: #fdf1f1; color: #6e1f22; border-radius: 4px; padding: 12px 16px; margin: 18px 0; }
.legal-warn strong { color: inherit; }
.legal-shot { margin: 18px 0 22px; text-align: center; }
.legal-shot img { max-width: 240px; width: 100%; margin: 0 auto; border-radius: 18px; border: 1px solid var(--line); }
.legal-shot figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.top-nav a[aria-current] { color: var(--blue-ink); font-weight: 700; }

@media (max-width: 900px) {
    .legal-with-toc { display: block; }
    .legal-toc { position: static; max-height: none; margin-bottom: 32px; padding: 16px 18px; background: var(--water); border-radius: var(--radius-s); }
    .legal-toc ul { border-left: 0; }
    .legal-toc a { padding: 4px 0; border-left: 0; margin: 0; }
    .legal-toc a.is-current { font-weight: 400; color: var(--ink); }
}

@media print {
    .legal-page .top, .legal-page .foot, .legal-toc { display: none; }
    .legal, .legal-with-toc { display: block; max-width: none; padding: 0; }
    .legal-body { font-size: 11pt; color: #000; }
    .legal-body h2 { break-after: avoid; }
    .legal-body a::after { content: none; }
}