:root {
  --ink: #061b35;
  --deep: #03182f;
  --blue: #0b4b79;
  --teal: #2bd0c8;
  --aqua: #8ceae3;
  --mist: #e7f7f7;
  --sand: #fbfaf6;
  --paper: #fffefd;
  --line: rgb(6 27 53 / 12%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--paper); }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #30d9d2; outline-offset: 4px; }

.skip-link { position: fixed; z-index: 99; top: 12px; left: 12px; transform: translateY(-180%); padding: 10px 14px; color: var(--deep); background: #fff; border-radius: 8px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: absolute; z-index: 10; top: 0; left: 0; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 22px; padding: 25px clamp(22px, 5vw, 80px); color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 730; letter-spacing: -.65px; }
/* Reuses the authenticated product's canonical SeaWise logo asset. */
.brand-logo { display: block; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; }
.site-header nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 13px; font-weight: 630; letter-spacing: .015em; color: rgb(255 255 255 / 78%); }.site-header nav a:hover { color: #fff; }
.header-sign-in { padding: 10px 14px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 99px; font-size: 13px; font-weight: 700; background: rgb(255 255 255 / 7%); backdrop-filter: blur(10px); }.header-sign-in:hover { background: rgb(255 255 255 / 18%); }

.hero { position: relative; display: grid; min-height: min(920px, 100svh); overflow: hidden; grid-template-columns: minmax(0, 1.06fr) minmax(410px, .94fr); align-items: center; padding: 148px clamp(22px, 8vw, 128px) 64px; isolation: isolate; color: #fff; background: #052547; }
.hero-water { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgb(3 22 47 / 96%) 0%, rgb(3 29 58 / 86%) 38%, rgb(3 35 65 / 18%) 71%, rgb(1 26 49 / 40%) 100%), url("/ui-v3/assets/backgrounds/home-ocean.webp") center / cover; }
.hero-grid { position: absolute; z-index: -2; right: -14%; bottom: -10%; width: 760px; height: 760px; border: 1px solid rgb(152 241 232 / 15%); border-radius: 48% 52% 44% 56%; box-shadow: 0 0 0 88px rgb(144 239 229 / 4%), 0 0 0 176px rgb(144 239 229 / 3%); transform: rotate(-18deg); }
.hero-content { position: relative; z-index: 2; max-width: 670px; padding-bottom: 10px; }.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 11px; font-weight: 800; letter-spacing: .145em; text-transform: uppercase; color: rgb(255 255 255 / 72%); }.eyebrow span { display: inline-block; width: 20px; height: 1px; background: var(--teal); }.eyebrow--dark { color: #547086; }.eyebrow--light { color: rgb(230 253 251 / 72%); }
.hero h1, .section h2 { margin: 0; font-weight: 740; letter-spacing: -.066em; line-height: .945; }.hero h1 { max-width: 660px; font-size: clamp(54px, 6.5vw, 103px); }.hero h1 em { color: var(--aqua); font-style: normal; }.hero-copy { max-width: 540px; margin: 31px 0 0; color: rgb(238 252 253 / 78%); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -.015em; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 14px 21px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 750; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }.button:hover { transform: translateY(-2px); }.button-primary { color: #003140; background: var(--aqua); box-shadow: 0 13px 34px rgb(0 0 0 / 16%); }.button-primary:hover { background: #d0fffb; }.button-quiet { border-color: rgb(255 255 255 / 22%); color: #fff; background: rgb(1 26 48 / 16%); }.button-quiet:hover { border-color: rgb(255 255 255 / 42%); background: rgb(255 255 255 / 11%); }.privacy-note { display: flex; align-items: center; gap: 8px; margin: 19px 0 0; font-size: 12px; color: rgb(236 253 253 / 60%); }.privacy-note span { color: var(--aqua); font-size: 19px; }

.phone-stage { position: relative; display: grid; min-height: 600px; align-content: center; justify-items: center; padding-top: 15px; }.phone { position: relative; z-index: 2; width: min(340px, 82%); overflow: hidden; border: 8px solid #f3f8f5; border-radius: 41px; color: var(--ink); background: #eef8f9; box-shadow: 0 38px 100px rgb(0 8 18 / 47%), 0 0 0 1px rgb(255 255 255 / 45%); }.phone::after { position: absolute; top: 0; left: 50%; width: 95px; height: 24px; border-radius: 0 0 14px 14px; background: #f3f8f5; content: ""; transform: translateX(-50%); }.phone-top { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 9px 16px 0; font-size: 8px; font-weight: 800; }.phone-island { width: 68px; height: 16px; border-radius: 20px; background: #dbe8e7; }.phone-signal { font-size: 6px; letter-spacing: 1px; }.app-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px 0; }.app-location { padding: 5px 8px; border: 1px solid #d7e6e6; border-radius: 999px; color: #3b6272; font-size: 9px; font-weight: 700; }.app-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #7eddd5, #0e6478); }.app-kicker { margin: 22px 17px 5px; color: #67909d; font-size: 9px; font-weight: 700; }.phone h2 { margin: 0 17px; font-size: 29px; line-height: .98; letter-spacing: -.075em; }.app-map { position: relative; height: 176px; overflow: hidden; margin: 17px; border-radius: 20px; background: radial-gradient(circle at 80% 16%, #9de4df 0 5%, transparent 5.4%), linear-gradient(140deg, #a6dbd5 0%, #bdeae5 40%, #8bcfcb 41%, #78bfc1 100%); }.map-contour { position: absolute; display: block; border: 1px solid rgb(13 87 98 / 28%); border-radius: 50%; }.contour-a { width: 220px; height: 72px; top: 23px; left: -31px; transform: rotate(-16deg); }.contour-b { width: 220px; height: 85px; top: 60px; left: 50px; transform: rotate(19deg); }.contour-c { width: 150px; height: 54px; top: 95px; left: -21px; transform: rotate(4deg); }.map-pin { position: absolute; top: 55px; left: 55%; width: 19px; height: 19px; border: 5px solid #fff; border-radius: 50% 50% 50% 0; background: #087d86; box-shadow: 0 3px 9px rgb(0 55 66 / 24%); transform: rotate(-45deg); }.map-route { position: absolute; right: -9px; bottom: 13px; width: 52%; height: 44%; border-top: 2px dashed rgb(255 255 255 / 85%); border-left: 2px dashed rgb(255 255 255 / 85%); border-radius: 85% 0 0 0; transform: rotate(-3deg); }.map-label { position: absolute; right: 10px; bottom: 10px; padding: 7px 9px; border-radius: 9px; color: #214a59; background: rgb(255 255 255 / 90%); box-shadow: 0 4px 10px rgb(0 69 80 / 9%); font-size: 8px; font-weight: 700; }.map-label b { display: block; margin-top: 2px; color: #087b82; }.app-row { display: flex; justify-content: space-between; padding: 0 17px; font-size: 11px; font-weight: 760; }.app-row span:last-child { color: #07848b; font-size: 9px; }.condition-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 17px 19px; }.condition-cards div { display: grid; min-height: 75px; padding: 10px; border: 1px solid #dceced; border-radius: 13px; background: #fff; }.condition-cards i { align-self: start; width: 16px; height: 16px; margin-bottom: 4px; font-style: normal; }.condition-cards span { color: #547785; font-size: 8px; font-weight: 700; }.condition-cards b { margin-top: 2px; color: #173f51; font-size: 9px; }.sun-icon { border: 2px solid #e7ad26; border-radius: 50%; box-shadow: 0 0 0 3px rgb(231 173 38 / 12%); }.fish-icon { color: #0c8190; font-size: 21px !important; line-height: 12px; }.app-nav { display: flex; align-items: center; justify-content: space-around; min-height: 54px; padding: 5px 10px 7px; border-top: 1px solid #e4eeee; color: #7692a0; background: #fff; font-size: 17px; }.app-nav span { display: grid; justify-items: center; gap: 1px; }.app-nav small { font-size: 7px; font-weight: 700; }.app-nav .active { color: #07828b; }.float-card { position: absolute; z-index: 3; display: grid; gap: 3px; padding: 13px 15px; border: 1px solid rgb(207 255 250 / 42%); border-radius: 15px; color: #edffff; background: rgb(0 44 66 / 58%); box-shadow: 0 18px 39px rgb(0 4 13 / 23%); font-size: 10px; backdrop-filter: blur(12px); }.float-card b { font-size: 12px; }.float-card--conditions { top: 22%; right: -5px; }.pulse { position: absolute; top: -6px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgb(139 234 227 / 18%); }.orbit { position: absolute; z-index: 0; border: 1px solid rgb(169 248 241 / 23%); border-radius: 50%; }.orbit-one { width: 480px; height: 480px; }.orbit-two { width: 610px; height: 320px; transform: rotate(-27deg); }.illustration-label { position: absolute; z-index: 3; bottom: 5px; margin: 0; color: rgb(238 255 255 / 56%); font-size: 10px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; }

.product-stage { position: relative; display: grid; min-height: 600px; align-content: center; justify-items: center; margin: 0; padding: 24px 0 0; }.product-stage__halo { position: absolute; z-index: 0; width: min(680px, 110%); height: 62%; border: 1px solid rgb(169 248 241 / 22%); border-radius: 48% 52% 44% 56%; box-shadow: 0 0 0 88px rgb(144 239 229 / 4%), 0 0 0 176px rgb(144 239 229 / 3%); transform: rotate(-18deg); }.product-preview { position: relative; z-index: 1; display: block; width: min(690px, 108%); overflow: hidden; border: 1px solid rgb(215 255 251 / 35%); border-radius: 21px; background: #f5fbfc; box-shadow: 0 36px 92px rgb(0 8 18 / 47%), 0 0 0 1px rgb(255 255 255 / 18%); }.product-preview img { display: block; width: 100%; height: auto; }.product-stage figcaption { position: relative; z-index: 1; margin-top: 13px; color: rgb(238 255 255 / 70%); font-size: 10px; font-weight: 760; letter-spacing: .085em; text-transform: uppercase; }

.intro-band { display: flex; min-height: 142px; align-items: center; padding: 24px clamp(22px, 8vw, 128px); color: #d9fbf8; background: #087e87; }.intro-band p { max-width: 670px; margin: 0; font-size: clamp(18px, 2vw, 27px); font-weight: 650; letter-spacing: -.035em; }
.section { padding-right: clamp(22px, 8vw, 128px); padding-left: clamp(22px, 8vw, 128px); }.flow { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px, 8vw, 150px); padding-top: clamp(88px, 11vw, 168px); padding-bottom: clamp(88px, 11vw, 168px); }.section-heading h2, .tools h2, .final-cta h2 { font-size: clamp(46px, 5.5vw, 86px); color: var(--ink); }.flow-steps { display: grid; gap: 20px; }.flow-step { position: relative; min-height: 196px; padding: 30px 178px 30px 105px; border-top: 1px solid var(--line); }.flow-step:last-child { border-bottom: 1px solid var(--line); }.step-number { position: absolute; top: 31px; left: 0; margin: 0; color: #6c8497; font-size: 12px; font-weight: 800; }.flow-step h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.035em; }.flow-step > p:not(.step-number) { max-width: 400px; margin: 0; color: #587187; font-size: 15px; line-height: 1.55; }.step-icon { position: absolute; top: 26px; right: 11px; display: grid; width: 104px; height: 104px; place-content: center; overflow: hidden; border-radius: 24px; background: #e8f7f5; }.wave-line { display: block; width: 58px; height: 12px; margin: -3px 0; border-bottom: 2px solid #159c9c; border-radius: 50%; transform: skewX(-24deg); }.compass { border-radius: 50%; background: #eaf5fa; }.compass::before, .compass::after { position: absolute; width: 1px; height: 72px; background: #84aabe; content: ""; }.compass::after { transform: rotate(90deg); }.compass span { width: 38px; height: 38px; border: 12px solid transparent; border-top-color: #11768c; border-left-color: #11768c; transform: rotate(45deg); }.log-mark { gap: 8px; align-content: center; padding: 20px; background: #eff7eb; }.log-mark span { display: block; width: 60px; height: 7px; border-radius: 99px; background: #68a974; }.log-mark span:nth-child(2) { width: 41px; }.log-mark span:nth-child(3) { width: 50px; }.step-word { position: absolute; right: 1px; bottom: 23px; color: #a4b5c1; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.tools { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 9vw, 150px); padding-top: clamp(88px, 11vw, 164px); padding-bottom: clamp(88px, 11vw, 164px); color: #f3fffe; background: #04203e; }.tools h2 { color: #f3fffe; }.tools-copy > p:not(.eyebrow) { max-width: 480px; margin: 27px 0 0; color: rgb(221 243 246 / 70%); font-size: 18px; line-height: 1.55; }.tool-list { border-top: 1px solid rgb(215 249 247 / 19%); }.tool-list article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 28px 0; border-bottom: 1px solid rgb(215 249 247 / 19%); }.tool-index { padding-top: 4px; color: #6da5b6; font-size: 11px; font-weight: 800; }.tool-list h3 { margin: 0 0 7px; font-size: 20px; letter-spacing: -.03em; }.tool-list p { max-width: 430px; margin: 0; color: rgb(221 243 246 / 64%); font-size: 14px; line-height: 1.45; }

.final-cta { position: relative; overflow: hidden; padding-top: clamp(98px, 13vw, 190px); padding-bottom: clamp(100px, 13vw, 192px); text-align: center; color: #efffff; background: #087f87; isolation: isolate; }.final-cta .eyebrow { justify-content: center; }.final-cta h2 { position: relative; color: #fff; }.final-cta > p:not(.eyebrow) { position: relative; max-width: 545px; margin: 27px auto 0; color: rgb(228 255 253 / 84%); font-size: 18px; line-height: 1.55; }.final-cta .button { position: relative; margin-top: 31px; }.cta-glow { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(940px, 100vw); height: 450px; border: 1px solid rgb(191 255 248 / 20%); border-radius: 50%; box-shadow: 0 0 0 70px rgb(191 255 248 / 4%), 0 0 0 140px rgb(191 255 248 / 4%); transform: translate(-50%, -43%); }.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px clamp(22px, 5vw, 80px); color: #537087; font-size: 12px; background: #f4faf9; }.site-footer .brand { color: var(--ink); font-size: 18px; }.site-footer p { margin: 0; font-weight: 750; letter-spacing: .02em; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 130px; }.hero-content { padding-bottom: 0; }.phone-stage { min-height: 550px; margin-top: 8px; }.flow, .tools { grid-template-columns: 1fr; }.flow { gap: 50px; }.intro-band { align-items: flex-start; flex-direction: column; }.site-header nav { display: none; }.flow-step { padding-right: 145px; } }
@media (max-width: 560px) { .site-header { padding: 20px 20px; }.site-header .brand { font-size: 19px; }.header-sign-in { padding: 8px 10px; }.hero { padding: 118px 22px 25px; }.hero h1 { font-size: clamp(50px, 15vw, 67px); }.hero-copy { font-size: 16px; }.hero-actions { margin-top: 27px; }.button { width: 100%; }.phone-stage { min-height: 504px; }.phone { width: 286px; border-width: 7px; border-radius: 35px; transform: translateX(-7px); }.float-card--conditions { top: 21%; right: -1px; }.orbit-one { width: 370px; height: 370px; }.orbit-two { width: 460px; height: 240px; }.illustration-label { bottom: 5px; }.intro-band { min-height: 160px; }.intro-band > div { width: 100%; flex-wrap: wrap; gap: 9px; font-size: 10px; }.intro-band i { width: 12px; }.section-heading h2, .tools h2, .final-cta h2 { font-size: clamp(42px, 13.3vw, 60px); }.flow-step { min-height: 230px; padding: 28px 0 75px 50px; }.step-number { left: 0; }.step-icon { right: 0; width: 84px; height: 84px; border-radius: 19px; transform: scale(.86); transform-origin: top right; }.step-word { right: 0; bottom: 24px; }.tools-copy > p:not(.eyebrow), .final-cta > p:not(.eyebrow) { font-size: 16px; }.site-footer { align-items: flex-start; flex-direction: column; }.site-footer p { order: 3; } }

@media (max-width: 900px) { .product-stage { min-height: 550px; margin-top: 8px; } }
@media (max-width: 560px) { .product-stage { min-height: 540px; }.product-stage__halo { width: 420px; height: 71%; }.product-preview { width: min(390px, 93vw); border-radius: 18px; }.product-stage figcaption { max-width: 290px; text-align: center; line-height: 1.45; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Public-home concept integration: uses the real SeaWise palette, routes, and
   asset library. It intentionally has no demo shell, fictional forecast, or
   client-side preview state. */
.public-hero {
  position: relative;
  display: grid;
  min-height: min(900px, 100svh);
  grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr);
  align-items: center;
  overflow: hidden;
  padding: 148px clamp(22px, 8vw, 128px) 70px;
  isolation: isolate;
  color: #fff;
  background: var(--deep);
}
.public-hero__water { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgb(3 22 47 / 98%) 0%, rgb(3 29 58 / 93%) 39%, rgb(3 35 65 / 38%) 69%, rgb(1 24 46 / 64%) 100%), url("/ui-v3/assets/backgrounds/home-ocean.webp") center / cover; }
.public-hero__grid { position: absolute; z-index: -2; right: -12%; bottom: -15%; width: 760px; height: 760px; border: 1px solid rgb(152 241 232 / 16%); border-radius: 47% 53% 44% 56%; box-shadow: 0 0 0 88px rgb(144 239 229 / 4%), 0 0 0 176px rgb(144 239 229 / 3%); transform: rotate(-18deg); }
.public-hero__copy { position: relative; z-index: 2; max-width: 670px; }
.public-hero__copy h1, .public-features h2, .public-captain h2 { margin: 0; font-weight: 740; letter-spacing: -.066em; line-height: .945; }
.public-hero__copy h1 { max-width: 660px; font-size: clamp(54px, 6.5vw, 103px); }
.public-hero__copy h1 em, .public-features h2 em { color: var(--aqua); font-style: normal; }
.public-hero__copy > p:not(.eyebrow):not(.privacy-note) { max-width: 548px; margin: 31px 0 0; color: rgb(238 252 253 / 80%); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -.015em; }
.public-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.public-hero__stage { position: relative; display: grid; min-height: 590px; align-content: center; justify-items: center; margin: 0; padding: 36px 0 22px; }
.public-hero__orbit { position: absolute; z-index: 0; width: min(650px, 108%); height: 61%; border: 1px solid rgb(169 248 241 / 25%); border-radius: 47% 53% 45% 55%; box-shadow: 0 0 0 72px rgb(144 239 229 / 4%), 0 0 0 144px rgb(144 239 229 / 3%); transform: rotate(-18deg); }
.public-hero__ocean { position: relative; z-index: 1; display: block; width: min(620px, 101%); aspect-ratio: 1.27; object-fit: cover; object-position: center; border: 1px solid rgb(215 255 251 / 35%); border-radius: 32px; box-shadow: 0 36px 92px rgb(0 8 18 / 47%), 0 0 0 1px rgb(255 255 255 / 16%); }
.public-hero__fish { position: absolute; z-index: 2; right: -4%; bottom: 8%; width: min(610px, 105%); height: auto; filter: drop-shadow(0 30px 22px rgb(0 7 20 / 42%)); transform: rotate(-4deg); }
.public-hero__callout { position: absolute; z-index: 3; right: 5%; bottom: 10%; display: grid; gap: 6px; width: min(240px, 44%); padding: 16px 18px; border: 1px solid rgb(207 255 250 / 43%); border-radius: 18px; color: #edffff; background: rgb(0 44 66 / 67%); box-shadow: 0 18px 39px rgb(0 4 13 / 25%); backdrop-filter: blur(14px); }
.public-hero__callout span { color: rgb(230 253 251 / 70%); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.public-hero__callout strong { font-size: 15px; line-height: 1.1; letter-spacing: -.025em; }
.public-hero__callout p { margin: 0; color: rgb(230 253 251 / 77%); font-size: 11px; line-height: 1.4; }
.public-hero__stage figcaption { position: relative; z-index: 3; max-width: 420px; margin-top: 15px; color: rgb(238 255 255 / 68%); font-size: 10px; font-weight: 760; letter-spacing: .07em; line-height: 1.4; text-align: center; text-transform: uppercase; }

.public-intro { display: flex; min-height: 142px; align-items: center; padding: 24px clamp(22px, 8vw, 128px); color: #d9fbf8; background: var(--sw-teal-700, #087e87); }
.public-intro p { max-width: 700px; margin: 0; font-size: clamp(18px, 2vw, 27px); font-weight: 650; letter-spacing: -.035em; }

.public-features { padding: clamp(88px, 11vw, 164px) clamp(22px, 8vw, 128px); color: #f3fffe; background: #04203e; }
.public-features > header { max-width: 720px; }
.public-features h2 { color: #f3fffe; font-size: clamp(46px, 5.5vw, 86px); }
.public-features h2 em { color: var(--aqua); }
.public-features > header > p:not(.eyebrow) { max-width: 550px; margin: 27px 0 0; color: rgb(221 243 246 / 72%); font-size: 18px; line-height: 1.55; }
.public-feature-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; max-width: 1320px; margin: 62px auto 0; }
.public-feature { position: relative; display: flex; min-height: 330px; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 54px); border: 1px solid rgb(215 249 247 / 20%); border-radius: 28px; background: linear-gradient(135deg, rgb(10 70 106 / 88%), rgb(5 45 77 / 96%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); }
.public-feature > div { position: relative; z-index: 2; max-width: 340px; }
.public-feature span { display: block; color: rgb(200 248 244 / 76%); font-size: 10px; font-weight: 800; letter-spacing: .115em; }
.public-feature h3 { max-width: 295px; margin: 18px 0 12px; color: #fff; font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.055em; line-height: .98; }
.public-feature p { max-width: 310px; margin: 0; color: rgb(232 249 250 / 75%); font-size: 15px; line-height: 1.55; }
.public-feature a { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 14px; border: 1px solid rgb(213 255 251 / 32%); border-radius: 999px; color: #f5ffff; font-size: 13px; font-weight: 760; background: rgb(1 27 51 / 22%); }
.public-feature a:hover { background: rgb(255 255 255 / 12%); }
.public-feature a b { font-size: 17px; line-height: 1; }
.public-feature--forecast img { position: absolute; right: -11%; bottom: 3%; width: min(58%, 470px); height: auto; filter: drop-shadow(0 20px 22px rgb(0 9 22 / 43%)); transform: rotate(-4deg); }
.public-feature--plan { background: linear-gradient(145deg, #087b82, #07375e); }
.public-route-art { position: absolute !important; right: 8%; bottom: 10%; width: min(44%, 250px); height: 145px; overflow: hidden; border: 1px solid rgb(218 255 252 / 29%); border-radius: 52% 48% 43% 57%; background: radial-gradient(circle at 75% 18%, rgb(155 243 233 / 38%) 0 4%, transparent 4.5%), linear-gradient(145deg, rgb(95 202 197 / 47%), rgb(8 98 124 / 70%)); }
.public-route-art i { position: absolute; display: block; border: 1px solid rgb(237 255 253 / 43%); border-radius: 50%; }
.public-route-art i:nth-child(1) { top: 20px; left: -15px; width: 170px; height: 70px; transform: rotate(-15deg); }
.public-route-art i:nth-child(2) { top: 58px; right: -36px; width: 180px; height: 77px; transform: rotate(18deg); }
.public-route-art i:nth-child(3) { top: 88px; left: 23px; width: 140px; height: 55px; transform: rotate(2deg); }
.public-route-art b { position: absolute; right: 16px; bottom: 14px; padding: 7px 9px; border-radius: 9px; color: #0b5565; background: rgb(255 255 255 / 92%); font-size: 10px; }
.public-feature--catch { grid-column: 1 / -1; min-height: 370px; align-items: center; padding: 0; background: #eef9f8; }
.public-feature--catch picture { align-self: stretch; width: 51%; overflow: hidden; background: #e5f6f4; }
.public-feature--catch picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.public-feature--catch > div { max-width: 420px; padding: clamp(28px, 4vw, 58px); }
.public-feature--catch span { color: #487c8e; }
.public-feature--catch h3 { color: var(--ink); }
.public-feature--catch p { color: #466a7c; }
.public-feature--catch a { border-color: rgb(8 123 130 / 26%); color: #075967; background: #fff; }
.public-feature--catch a:hover { background: #e5f8f6; }

.public-captain { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(78px, 10vw, 140px) clamp(22px, 8vw, 128px); color: #efffff; background: linear-gradient(115deg, #087e87, #06506d); }
.public-captain > div { max-width: 700px; }
.public-captain h2 { font-size: clamp(44px, 5vw, 78px); color: #fff; }
.public-captain > div > p:not(.eyebrow) { max-width: 510px; margin: 24px 0 0; color: rgb(228 255 253 / 84%); font-size: 18px; line-height: 1.55; }
.public-captain .button { flex: 0 0 auto; }

@media (max-width: 900px) {
  .public-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 132px; }
  .public-hero__stage { min-height: 520px; margin-top: 12px; }
  .public-feature-grid { grid-template-columns: 1fr; }
  .public-feature--catch { grid-column: auto; }
  .public-captain { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .public-hero { padding: 118px 22px 28px; }
  .public-hero__copy h1 { font-size: clamp(50px, 15vw, 67px); }
  .public-hero__copy > p:not(.eyebrow):not(.privacy-note) { font-size: 16px; }
  .public-hero__actions .button { width: 100%; }
  .public-hero__stage { min-height: 430px; padding-top: 20px; }
  .public-hero__orbit { width: 410px; height: 61%; }
  .public-hero__ocean { width: min(390px, 95vw); border-radius: 24px; }
  .public-hero__fish { right: -6%; bottom: 11%; width: min(440px, 113%); }
  .public-hero__callout { right: 2%; bottom: 9%; width: min(210px, 54%); padding: 12px 14px; }
  .public-hero__stage figcaption { max-width: 290px; }
  .public-features { padding-top: 86px; padding-bottom: 86px; }
  .public-features > header > p:not(.eyebrow) { font-size: 16px; }
  .public-feature-grid { margin-top: 42px; }
  .public-feature { min-height: 335px; border-radius: 23px; }
  .public-feature h3 { font-size: 34px; }
  .public-feature--forecast img { right: -13%; bottom: 2%; width: min(68%, 330px); }
  .public-route-art { right: 4% !important; width: 44%; }
  .public-feature--catch { display: grid; grid-template-columns: 1fr; }
  .public-feature--catch picture { width: 100%; min-height: 190px; max-height: 260px; }
  .public-feature--catch picture img { object-position: center; }
  .public-feature--catch > div { padding: 30px 26px 34px; }
  .public-captain { padding-top: 76px; padding-bottom: 78px; }
  .public-captain .button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .public-hero__fish { animation: public-home-fish-drift 9s ease-in-out infinite alternate; }
  .public-hero__orbit { animation: public-home-orbit-drift 14s ease-in-out infinite alternate; }
}
@keyframes public-home-fish-drift {
  from { transform: rotate(-4deg) translate3d(0, 0, 0); }
  to { transform: rotate(-2deg) translate3d(-10px, -8px, 0); }
}
@keyframes public-home-orbit-drift {
  from { transform: rotate(-18deg) scale(1); }
  to { transform: rotate(-13deg) scale(1.025); }
}

/* P17 keeps the public page lively without treating a marketing sample as a
   product session. The tabbed preview contains only local markup and artwork. */
.button:active { transform: translateY(0) scale(.98); }
.public-demo { padding: clamp(88px, 11vw, 160px) clamp(22px, 8vw, 128px); background: var(--sand); }
.public-demo > header { max-width: 700px; margin: 0 auto 46px; text-align: center; }
.public-demo > header .eyebrow { justify-content: center; }
.public-demo > header h2 { margin: 0; color: var(--ink); font-size: clamp(44px, 5.2vw, 76px); font-weight: 740; letter-spacing: -.065em; line-height: .96; }
.public-demo > header > p:not(.eyebrow) { max-width: 590px; margin: 22px auto 0; color: #547187; font-size: 17px; line-height: 1.55; }
.public-demo__frame { max-width: 1120px; margin: 0 auto; overflow: hidden; border: 1px solid rgb(6 27 53 / 13%); border-radius: 30px; background: #fff; box-shadow: 0 30px 70px rgb(6 27 53 / 12%); }
.public-demo__tabs { display: flex; justify-content: center; gap: 8px; padding: 15px; border-bottom: 1px solid rgb(6 27 53 / 9%); background: #fbfefd; }
.public-demo__tabs button { min-width: 94px; min-height: 44px; padding: 10px 15px; border: 1px solid transparent; border-radius: 999px; color: #547187; background: transparent; font: inherit; font-size: 13px; font-weight: 760; cursor: pointer; }
.public-demo__tabs button[aria-selected="true"] { border-color: rgb(8 123 130 / 22%); color: #075967; background: #e5f8f6; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%); }
.public-demo__tabs button:hover { color: #075967; background: #eef9f8; }
.public-demo__panel { display: grid; min-height: 420px; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: center; gap: clamp(24px, 5vw, 80px); padding: clamp(30px, 6vw, 78px); }
/* Panels stay all-visible without JavaScript. The enhanced controller alone
   may collapse inactive panels; this rule must outrank the base grid display. */
.public-demo--enhanced .public-demo__panel[hidden] { display: none; }
.public-demo__panel > div:first-child { max-width: 400px; }
.public-sample-label { display: inline-flex; min-height: 26px; align-items: center; padding: 5px 9px; border: 1px solid rgb(8 123 130 / 20%); border-radius: 999px; color: #28717a; background: #effaf9; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-demo__panel h3 { margin: 18px 0 13px; color: var(--ink); font-size: clamp(30px, 3.7vw, 50px); letter-spacing: -.06em; line-height: .98; }
.public-demo__panel p { margin: 0; color: #557286; font-size: 16px; line-height: 1.55; }
.public-demo__panel a { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; margin-top: 23px; padding: 10px 14px; border: 1px solid rgb(8 123 130 / 25%); border-radius: 999px; color: #075967; background: #fff; font-size: 13px; font-weight: 780; }
.public-demo__panel a:hover { background: #e8f8f7; }
.public-demo__panel a b { font-size: 17px; line-height: 1; }
.public-demo__forecast-art { position: relative; min-height: 244px; overflow: hidden; border: 1px solid #c6e7e5; border-radius: 24px; background: radial-gradient(circle at 72% 20%, rgb(161 236 228 / 75%) 0 5%, transparent 5.5%), linear-gradient(145deg, #c9ece9 0%, #a3ddd9 44%, #75c0c3 45%, #529da9 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 64%); }
.public-demo__forecast-art::before { position: absolute; inset: 26px 18px 36px; border: 1px solid rgb(9 93 111 / 20%); border-radius: 45% 55% 38% 62%; content: ""; transform: rotate(-8deg); }
.public-demo__forecast-art i { position: absolute; display: block; height: 7px; border-radius: 999px; background: rgb(255 255 255 / 74%); box-shadow: 0 3px 9px rgb(0 68 77 / 12%); }
.public-demo__forecast-art i:nth-child(1) { top: 38px; left: 28px; width: 34%; }
.public-demo__forecast-art i:nth-child(2) { top: 71px; left: 28px; width: 52%; }
.public-demo__forecast-art i:nth-child(3) { right: 28px; bottom: 70px; width: 42%; }
.public-demo__forecast-art i:nth-child(4) { right: 28px; bottom: 38px; width: 58%; }
.public-demo__forecast-art i:nth-child(5) { bottom: 50px; left: 42%; width: 13px; height: 13px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: #087b82; transform: rotate(-45deg); }
.public-demo__forecast-art b { position: absolute; right: 18px; top: 18px; padding: 8px 10px; border-radius: 9px; color: #195a69; background: rgb(255 255 255 / 88%); font-size: 11px; }
.public-demo__plan-art { position: relative; min-height: 244px; overflow: hidden; border: 1px solid rgb(8 123 130 / 25%); border-radius: 24px; background: linear-gradient(140deg, #087e87, #075174); }
.public-demo__plan-art::after { position: absolute; inset: -32px -50px; border: 1px solid rgb(220 255 252 / 25%); border-radius: 50%; box-shadow: 0 0 0 58px rgb(196 255 249 / 4%), 0 0 0 116px rgb(196 255 249 / 3%); content: ""; transform: rotate(-18deg); }
.public-demo__plan-art i { position: absolute; z-index: 1; display: block; border: 1px dashed rgb(232 255 253 / 80%); border-radius: 50%; }
.public-demo__plan-art i:nth-child(1) { top: 44px; left: 28px; width: 178px; height: 84px; transform: rotate(-15deg); }
.public-demo__plan-art i:nth-child(2) { right: -17px; bottom: 41px; width: 185px; height: 82px; transform: rotate(18deg); }
.public-demo__plan-art i:nth-child(3) { left: 46%; bottom: 49px; width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: var(--sw-sun, #f6b91b); transform: rotate(-45deg); }
.public-demo__plan-art span { position: absolute; z-index: 2; right: 18px; top: 18px; padding: 8px 10px; border-radius: 9px; color: #0c5a64; background: rgb(255 255 255 / 92%); font-size: 11px; font-weight: 800; }
.public-demo__panel--catch { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.public-sample-catches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.public-sample-catches figure { position: relative; min-height: 258px; margin: 0; overflow: hidden; border-radius: 20px; background: #d9eded; box-shadow: 0 12px 26px rgb(6 27 53 / 12%); }
.public-sample-catches img { display: block; width: 100%; height: 100%; object-fit: cover; }
.public-sample-catches figcaption { position: absolute; right: 11px; bottom: 11px; left: 11px; display: grid; gap: 3px; padding: 10px; border: 1px solid rgb(255 255 255 / 36%); border-radius: 13px; color: #f6ffff; background: rgb(2 27 44 / 68%); backdrop-filter: blur(10px); }
.public-sample-catches figcaption span { font-size: 9px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.public-sample-catches figcaption strong { font-size: 14px; }
.public-captain__link { border-color: rgb(235 255 253 / 37%); background: rgb(0 45 67 / 17%); }

@media (prefers-reduced-motion: no-preference) {
  .public-hero__water { animation: public-home-water-drift 20s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    /* Reveal motion is progressive enhancement only. No-JS pages keep every
       section readable, and the explicit enhanced class is applied only after
       the carousel/Pause control initializes successfully. */
    .public-home--reveal-enhanced .public-reveal { animation: public-section-reveal .72s ease-out both; animation-range: entry 8% cover 31%; animation-timeline: view(); }
  }
}
@keyframes public-home-water-drift {
  from { background-position: center, center; }
  to { background-position: center, 53% 46%; }
}
@keyframes public-section-reveal {
  from { opacity: .01; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
  .public-demo { padding-top: 78px; padding-bottom: 78px; }
  .public-demo > header { margin-bottom: 32px; text-align: left; }
  .public-demo > header .eyebrow { justify-content: flex-start; }
  .public-demo > header > p:not(.eyebrow) { margin-left: 0; }
  .public-demo__frame { border-radius: 23px; }
  .public-demo__tabs { justify-content: stretch; gap: 6px; padding: 10px; }
  .public-demo__tabs button { min-width: 0; flex: 1 1 0; padding-right: 8px; padding-left: 8px; }
  .public-demo__panel, .public-demo__panel--catch { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding: 28px 22px 30px; }
  .public-demo__panel h3 { font-size: 36px; }
  .public-demo__forecast-art, .public-demo__plan-art { min-height: 205px; }
  .public-sample-catches { min-height: 245px; }
  .public-sample-catches figure { min-height: 245px; border-radius: 16px; }
}
@media (max-width: 390px) {
  .public-demo__tabs button { font-size: 12px; }
  .public-sample-catches { gap: 9px; }
  .public-sample-catches figcaption { right: 7px; bottom: 7px; left: 7px; padding: 8px; }
}

/* P18: public-page progressive enhancement under the existing strict CSP. */
.public-hero { min-height: 100svh; }
.public-hero__stage { min-height: min(610px, 66svh); }
.public-hero__fish { right: 1%; bottom: 9%; width: min(590px, 96%); max-width: 100%; object-fit: contain; object-position: center; }
.public-feature { align-items: center; overflow: hidden; }
.public-feature--forecast img,
.public-feature--community img { position: relative; right: auto; bottom: auto; display: block; width: min(45%, 430px); max-width: 45%; height: auto; margin: 0 -1% 0 20px; object-fit: contain; object-position: center; filter: drop-shadow(0 20px 22px rgb(0 9 22 / 43%)); transform: none; }
.public-route-art { position: relative !important; right: auto; bottom: auto; flex: 0 1 250px; width: min(42%, 250px); margin-left: 18px; }
.public-feature--community { grid-column: 1 / -1; background: linear-gradient(135deg, #0b4b79, #076f78); }
.public-feature--community img { width: min(48%, 520px); max-width: 48%; }

.public-demo__panel + .public-demo__panel { border-top: 1px solid rgb(6 27 53 / 9%); }
.public-demo--enhanced .public-demo__panel + .public-demo__panel { border-top: 0; }
.public-demo__panel--map { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.public-sample-map { position: relative; min-height: 310px; overflow: hidden; border: 1px solid #c5e8e5; border-radius: 24px; background: #bfe9e4; box-shadow: inset 0 1px 0 rgb(255 255 255 / 66%); }
.public-sample-map__toolbar { display: contents; }
.public-sample-map__label { position: absolute; z-index: 4; top: 13px; left: 13px; margin: 0; padding: 7px 9px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; color: #135a67; background: rgb(255 255 255 / 87%); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.public-sample-map__surface { position: absolute; inset: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none; }
.public-sample-map__surface:active { cursor: grabbing; }
.public-sample-map__surface:focus-visible { outline: 3px solid #30d9d2; outline-offset: -5px; }
.public-sample-map__world { position: absolute; inset: -15%; transform-origin: center; background: radial-gradient(ellipse at 78% 18%, rgb(255 255 255 / 48%) 0 2%, transparent 2.8%), radial-gradient(ellipse at 23% 72%, rgb(7 124 130 / 25%) 0 15%, transparent 15.7%), linear-gradient(141deg, #bee9e5 0 29%, #8bcfcb 30% 46%, #70babe 47% 100%); transition: transform 150ms ease-out; }
.public-sample-map__world::before, .public-sample-map__world::after { position: absolute; border: 1px solid rgb(7 103 117 / 28%); border-radius: 50%; content: ""; }
.public-sample-map__world::before { top: 18%; left: -15%; width: 94%; height: 34%; transform: rotate(-15deg); }
.public-sample-map__world::after { right: -20%; bottom: 12%; width: 90%; height: 38%; transform: rotate(19deg); }
.public-sample-map__marker { position: absolute; z-index: 2; top: var(--marker-y); left: var(--marker-x); display: grid; min-width: 44px; min-height: 44px; place-items: center; padding: 0; border: 4px solid #fff; border-radius: 50% 50% 50% 0; color: #fff; background: #087b82; box-shadow: 0 7px 15px rgb(0 63 75 / 25%); font: inherit; font-size: 0; cursor: pointer; transform: translate(-50%, -100%) rotate(-45deg); }
.public-sample-map__marker span { display: block; padding: 3px 6px; border-radius: 999px; color: #0a5665; background: #fff; font-size: 10px; font-weight: 800; transform: rotate(45deg); }
.public-sample-map__marker:hover { background: #0a9697; }
.public-sample-map__controls { position: absolute; z-index: 5; top: 58px; right: 13px; bottom: auto; display: grid; gap: 7px; }
.public-sample-map__controls button { min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid rgb(8 96 108 / 19%); border-radius: 12px; color: #0b5968; background: rgb(255 255 255 / 92%); box-shadow: 0 6px 15px rgb(0 69 80 / 13%); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.public-sample-map__controls button:last-child { font-size: 11px; }
.public-sample-map__controls button:hover { background: #e7f8f6; }
/* This needs to outrank the generic panel paragraph color. Marker selection
   must remain legible over every illustrative-map state, not inherit its dark
   copy color onto a dark teal panel. */
.public-demo__panel .public-sample-map__detail { position: absolute; z-index: 4; right: 13px; bottom: 13px; left: 13px; min-height: 37px; margin: 0; padding: 9px 11px; border: 1px solid rgb(224 255 252 / 56%); border-radius: 12px; color: #fff; background: #04344a; font-size: 12px; font-weight: 650; line-height: 1.45; pointer-events: none; }

.public-social-samples { padding: clamp(80px, 10vw, 144px) clamp(22px, 8vw, 128px); background: #f5fbfb; }
.public-social-samples > header { max-width: 670px; margin: 0 auto 42px; text-align: center; }
.public-social-samples > header .eyebrow { justify-content: center; }
.public-social-samples h2 { margin: 0; color: var(--ink); font-size: clamp(42px, 5vw, 72px); font-weight: 740; letter-spacing: -.065em; line-height: .96; }
.public-social-samples > header > p:not(.eyebrow) { max-width: 550px; margin: 22px auto 0; color: #557286; font-size: 16px; line-height: 1.55; }
.public-social-samples__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1020px; margin: 0 auto; }
.public-social-samples__grid article { overflow: hidden; border: 1px solid rgb(6 27 53 / 11%); border-radius: 22px; background: #fff; box-shadow: 0 14px 28px rgb(6 27 53 / 7%); }
.public-social-samples__grid figure { aspect-ratio: 16 / 9; margin: 0; background: #d5ecea; }
.public-social-samples__grid figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.public-social-samples__grid article > div { padding: 20px 21px 23px; }
.public-social-samples__grid span { display: block; color: #367983; font-size: 10px; font-weight: 820; letter-spacing: .085em; text-transform: uppercase; }
.public-social-samples__grid h3 { margin: 8px 0 8px; color: var(--ink); font-size: 24px; letter-spacing: -.04em; }
.public-social-samples__grid p { margin: 0; color: #587387; font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  .public-hero { min-height: 100svh; }
  .public-hero__stage { min-height: 410px; }
  .public-hero__fish { right: 1%; bottom: 8%; width: min(530px, 96%); }
  .public-feature--forecast img, .public-feature--community img { width: min(42%, 350px); max-width: 42%; margin-left: 12px; }
  .public-route-art { width: min(40%, 230px); }
}
@media (max-width: 620px) {
  .public-hero { min-height: 100svh; padding-top: 112px; padding-bottom: 22px; }
  .public-hero__stage { min-height: 330px; padding-top: 8px; }
  .public-hero__ocean { width: min(390px, 94vw); aspect-ratio: 1.16; }
  .public-hero__fish { right: 1%; bottom: 8%; width: min(390px, 97%); }
  .public-hero__callout { bottom: 8%; }
  .public-feature { min-height: 365px; align-items: flex-start; }
  .public-feature--forecast img, .public-feature--community img { align-self: flex-end; width: min(54%, 260px); max-width: 54%; margin: 18px -2% 0 9px; }
  .public-route-art { align-self: flex-end; width: min(48%, 210px); margin: 18px 0 0 9px; }
  .public-demo__panel--map { grid-template-columns: 1fr; }
  .public-sample-map { min-height: 278px; }
  .public-sample-map__controls { top: 52px; }
  .public-social-samples { padding-top: 72px; padding-bottom: 72px; }
  .public-social-samples > header { margin-bottom: 28px; text-align: left; }
  .public-social-samples > header .eyebrow { justify-content: flex-start; }
  .public-social-samples > header > p:not(.eyebrow) { margin-left: 0; }
  .public-social-samples__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* P20: the opening public hero is one edge-to-edge ocean composition, not a
   text column beside a framed artwork card. */
.public-hero {
  /* P28: the carousel artwork uses one alpha-aware desktop safe region. This
     begins after the padded editorial rail (the 670px / 58vw copy measure)
     plus a clear 32px gap, so every species starts to the right of the copy
     instead of receiving a one-off negative-right correction. */
  --public-hero-copy-safe-start: calc(clamp(22px, 8vw, 128px) + min(670px, 58vw) + 32px);
  display: flex;
  width: 100%;
  min-height: max(100svh, 680px);
  grid-template-columns: none;
  align-items: center;
  margin: 0;
  padding: max(120px, calc(env(safe-area-inset-top) + 96px)) clamp(22px, 8vw, 128px) max(52px, calc(env(safe-area-inset-bottom) + 36px));
  border: 0;
  border-radius: 0;
}
.public-hero__water {
  background: linear-gradient(90deg, rgb(2 18 40 / 98%) 0%, rgb(3 28 55 / 94%) 40%, rgb(3 35 65 / 50%) 66%, rgb(1 23 46 / 36%) 100%), url("/ui-v3/assets/backgrounds/home-ocean.webp") center / cover;
}
.public-hero__copy { max-width: min(670px, 58vw); padding: 0; }
.public-hero__fish {
  z-index: 1;
  right: clamp(-370px, -23vw, -190px);
  bottom: clamp(-52px, -3vw, -16px);
  width: clamp(760px, 85vw, 1280px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 32px 28px rgb(0 7 20 / 48%));
}
.public-hero__grid { right: -18%; bottom: -34%; width: min(68vw, 980px); height: min(68vw, 980px); }

@media (max-width: 620px) {
  .public-hero {
    min-height: max(100svh, 700px);
    align-items: flex-start;
    padding: max(108px, calc(env(safe-area-inset-top) + 88px)) 22px max(36px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .public-hero__copy { max-width: 100%; }
  .public-hero__fish {
    right: -72vw;
    bottom: max(-4px, env(safe-area-inset-bottom));
    width: 172vw;
    max-width: none;
  }
  .public-hero__grid { right: -58vw; bottom: -42vw; width: 128vw; height: 128vw; }
}

/* P22: the full-bleed p20 hero remains intact while this layer gives the
   user a calm, locally illustrated species carousel. */
.public-hero__carousel { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.public-hero__carousel .public-hero__fish {
  transition: opacity 620ms ease, visibility 0s linear 0s;
  will-change: opacity;
}
.public-hero__carousel--enhanced .public-hero__fish[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms ease, visibility 0s linear 620ms;
}
.public-hero__carousel--enhanced .public-hero__fish:not([hidden]) { opacity: 1; visibility: visible; }
/* P29: the copy/CTA is a deliberately isolated foreground compositor layer.
   Mobile fish crossfades are filtered, promoted layers in some renderers; an
   ordinary z-index alone did not reliably keep the primary CTA label above a
   Wahoo frame. Keep all text and actions in one explicit foreground plane. */
.public-hero__copy {
  position: relative;
  z-index: 4;
  isolation: isolate;
  transform: translateZ(0);
}
.public-hero__actions { position: relative; z-index: 1; isolation: isolate; }
.public-hero__actions .button { position: relative; z-index: 1; isolation: isolate; transform: translateZ(0); }
/* P28 places every carousel canvas inside the same desktop artwork region.
   The common left boundary starts after the headline/CTA rail; each source
   image has positive transparent left padding, so its visible alpha body is
   farther right still. Alpha measurements vertically align each visible body,
   rather than each transparent image box, to the 50% hero midpoint: Mahi
   46.33%, Wahoo 50.00%, Red snapper 48.70%, and Blackfin tuna 48.44% from
   image top. `translate` is static placement only; carousel fish never travel
   during their opacity-only crossfades. */
.public-hero__fish[data-hero-fish="mahi"] {
  top: 50%;
  left: var(--public-hero-copy-safe-start);
  right: auto;
  bottom: auto;
  width: clamp(720px, 58vw, 900px);
  translate: 0 -46.33%;
}
.public-hero__fish[data-hero-fish="wahoo"] {
  top: 50%;
  left: var(--public-hero-copy-safe-start);
  right: auto;
  bottom: auto;
  width: clamp(600px, 53vw, 820px);
  translate: 0 -50%;
}
.public-hero__fish[data-hero-fish="snapper"] {
  top: 50%;
  left: var(--public-hero-copy-safe-start);
  right: auto;
  bottom: auto;
  width: clamp(680px, 56vw, 880px);
  translate: 0 -48.70%;
}
.public-hero__fish[data-hero-fish="tuna"] {
  top: 50%;
  left: var(--public-hero-copy-safe-start);
  right: auto;
  bottom: auto;
  width: clamp(640px, 54vw, 840px);
  translate: 0 -48.44%;
}
/* Mahi-mahi and Red snapper already face left in their canonical SeaWise
   artwork. Wahoo and Blackfin tuna face right, so mirror only those two
   fish canvases. `translate` continues to own alpha-aware vertical centering;
   this horizontal-only transform leaves the background, text, controls, and
   other public artwork untouched. */
.public-hero__fish[data-hero-fish="wahoo"],
.public-hero__fish[data-hero-fish="tuna"] {
  transform: scaleX(-1);
  transform-origin: center;
}
.public-hero__carousel-controls {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 3vw, 46px);
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 32px);
  padding: 6px;
  border: 1px solid rgb(214 255 252 / 29%);
  border-radius: 999px;
  color: #efffff;
  background: rgb(1 24 46 / 56%);
  box-shadow: 0 10px 30px rgb(0 7 20 / 24%);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.public-hero__carousel-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.public-hero__carousel-button:hover,
.public-hero__carousel-button:focus-visible { border-color: rgb(197 255 250 / 40%); background: rgb(255 255 255 / 13%); }
.public-hero__carousel-status {
  min-width: 76px;
  margin: 0 3px;
  color: rgb(237 255 254 / 86%);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .02em;
  text-align: center;
}
.public-hero__carousel-pause { min-width: 58px; }

@media (max-width: 620px) {
  .public-hero__fish[data-hero-fish="mahi"] { top: 50%; left: auto; right: -72vw; bottom: auto; width: 158vw; translate: 0 -46.33%; }
  .public-hero__fish[data-hero-fish="wahoo"] { top: 50%; left: auto; right: -16vw; bottom: auto; width: 156vw; translate: 0 -50%; }
  .public-hero__fish[data-hero-fish="snapper"] { top: 50%; left: auto; right: -46vw; bottom: auto; width: 142vw; translate: 0 -48.70%; }
  .public-hero__fish[data-hero-fish="tuna"] { top: 50%; left: auto; right: -12vw; bottom: auto; width: 156vw; translate: 0 -48.44%; }
  /* The foreground isolation above protects text from every fish. Avoid a
     second persistent compositing layer on mobile artwork during crossfade. */
  .public-hero__carousel .public-hero__fish { filter: none; will-change: auto; }
  .public-hero__copy { text-shadow: 0 2px 18px rgb(0 12 31 / 70%); }
  .public-hero__copy::before { position: absolute; z-index: -1; inset: -18px -16px -22px -22px; border-radius: 32px; background: radial-gradient(ellipse at 30% 28%, rgb(2 18 40 / 83%) 0%, rgb(2 18 40 / 61%) 54%, transparent 79%); content: ""; }
  .public-hero__carousel-controls { right: 12px; bottom: max(13px, calc(env(safe-area-inset-bottom) + 8px)); gap: 1px; padding: 4px; }
  .public-hero__carousel-button { min-width: 42px; min-height: 42px; padding: 7px 9px; }
  .public-hero__carousel-status { min-width: 63px; margin: 0; font-size: 10px; }
  .public-hero__carousel-pause { min-width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-hero__carousel .public-hero__fish { transition: none; }
}

/* P23: keep carousel artwork on its deliberately tuned, stable coordinates.
   The earlier generic fish-drift keyframes animate `transform`, which overrides
   the per-species placement above while the carousel is running.  The carousel
   should crossfade between still illustrations only; water can retain its
   independent ambient movement. */
@media (prefers-reduced-motion: no-preference) {
  .public-hero__carousel .public-hero__fish { animation: none; }
}

/* P24: living-water detail stays behind the artwork and copy. It is only
   activated by the same progressive enhancement that provides Pause/Play, so
   the no-JS public page is complete and still. Fish artwork itself never moves:
   switching remains an opacity-only crossfade on fixed coordinates. */
.public-hero__rays,
.public-hero__caustics,
.public-hero__particles { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.public-hero__rays {
  inset: -18%;
  opacity: .34;
  background:
    linear-gradient(117deg, transparent 28%, rgb(184 255 249 / 13%) 39%, transparent 50%),
    linear-gradient(106deg, transparent 44%, rgb(177 245 255 / 10%) 54%, transparent 65%);
  background-size: 155% 100%, 180% 100%;
  background-position: 8% 0, 88% 0;
  mix-blend-mode: screen;
}
.public-hero__caustics {
  opacity: .2;
  background:
    repeating-radial-gradient(ellipse at 70% 74%, transparent 0 22px, rgb(151 245 235 / 15%) 24px 26px, transparent 29px 48px),
    linear-gradient(180deg, transparent 44%, rgb(102 220 217 / 10%) 100%);
  background-size: 250px 154px, 100% 100%;
  background-position: 26% 68%, center;
}
.public-hero__particles span {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: .32;
  background: rgb(222 255 252 / 88%);
  box-shadow: 0 0 12px rgb(185 255 250 / 46%);
}
.public-hero__particles span:nth-child(1) { right: 31%; bottom: 19%; }
.public-hero__particles span:nth-child(2) { right: 16%; bottom: 33%; width: 3px; height: 3px; opacity: .24; }
.public-hero__particles span:nth-child(3) { right: 44%; bottom: 12%; width: 4px; height: 4px; opacity: .2; }
/* Keep the inherited water animation off until JavaScript exposes a pauseable
   control. The copy and CTA remain on their existing higher layer. */
.public-hero:not(.public-hero--motion-enhanced) .public-hero__water { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .public-hero--motion-enhanced .public-hero__water { animation: public-home-water-drift 20s ease-in-out infinite alternate; }
  .public-hero--motion-enhanced .public-hero__rays { animation: public-home-light-rays 24s ease-in-out infinite alternate; }
  .public-hero--motion-enhanced .public-hero__caustics { animation: public-home-caustics 18s ease-in-out infinite alternate; }
  .public-hero--motion-enhanced .public-hero__particles span:nth-child(1) { animation: public-home-particle-rise 13s ease-in-out infinite alternate; }
  .public-hero--motion-enhanced .public-hero__particles span:nth-child(2) { animation: public-home-particle-rise 17s ease-in-out -5s infinite alternate; }
  .public-hero--motion-enhanced .public-hero__particles span:nth-child(3) { animation: public-home-particle-rise 15s ease-in-out -8s infinite alternate; }
}
.public-hero--motion-paused .public-hero__water,
.public-hero--motion-paused .public-hero__rays,
.public-hero--motion-paused .public-hero__caustics,
.public-hero--motion-paused .public-hero__particles span { animation-play-state: paused !important; }
/* Pausing decoration must never freeze a view-timeline reveal before its
   section has entered the viewport. Complete it to the readable end state
   instead; resuming re-enables the timeline for subsequent scrolls. */
.public-home--motion-paused .public-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .public-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes public-home-light-rays {
  from { background-position: 8% 0, 88% 0; }
  to { background-position: 24% 0, 69% 0; }
}
@keyframes public-home-caustics {
  from { background-position: 26% 68%, center; }
  to { background-position: 47% 58%, center; }
}
@keyframes public-home-particle-rise {
  from { transform: translate3d(0, 0, 0); opacity: .18; }
  to { transform: translate3d(9px, -28px, 0); opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .public-hero__rays,
  .public-hero__caustics,
  .public-hero__particles { display: none; }
}

/* P32: public mobile flow cards reserve physical space for the decorative
   step icon instead of letting an absolutely positioned icon intrude into
   headings or body copy. The Plan route illustration gets its own bounded
   row below the real CTA, rather than sharing the narrow copy row. */
@media (max-width: 620px) {
  .flow-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 72px;
    column-gap: 10px;
    row-gap: 10px;
    min-height: 0;
    padding: 26px 0 24px;
  }
  .flow-step .step-number {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: 4px;
  }
  .flow-step .step-icon {
    position: static;
    grid-column: 3;
    grid-row: 1 / span 2;
    place-self: start end;
    width: 72px;
    height: 72px;
    transform: none;
  }
  .flow-step h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }
  .flow-step > p:not(.step-number) {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: none;
  }
  .flow-step .step-word {
    position: static;
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: end;
    margin-top: 2px;
    text-align: right;
  }

  .public-feature--plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .public-feature--plan > div {
    min-width: 0;
    max-width: none;
  }
  .public-feature--plan .public-route-art {
    justify-self: end;
    width: min(100%, 248px);
    height: clamp(106px, 34vw, 132px);
    margin: 24px 0 0;
  }
}

/* P32: the illustrative map gets three dedicated mobile zones. The label,
   zoom/reset row, and noninteractive detail remain out of the central marker
   area instead of competing for the same small map corner. */
@media (max-width: 430px) {
  .public-sample-map {
    min-height: 356px;
  }
  .public-sample-map__label {
    top: 12px;
    right: 12px;
    left: 12px;
    width: fit-content;
    max-width: calc(100% - 24px);
    line-height: 1.25;
  }
  .public-sample-map__controls {
    top: 58px;
    right: 12px;
    left: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .public-sample-map__controls button {
    flex: 0 0 44px;
  }
  .public-sample-map__controls button:last-child {
    flex-basis: 58px;
  }
  .public-sample-map__detail {
    right: 12px;
    bottom: 12px;
    left: 12px;
    min-height: 86px;
    padding: 10px 11px;
  }
  .public-sample-map__marker[data-public-map-marker="reef"] { --marker-x: 26% !important; --marker-y: 67% !important; }
  .public-sample-map__marker[data-public-map-marker="edge"] { --marker-x: 70% !important; --marker-y: 52% !important; }
  .public-sample-map__marker[data-public-map-marker="water"] { --marker-x: 72% !important; --marker-y: 68% !important; }
}

/* P33: small-screen map chrome is ordinary flow around a clipped interactive
   canvas. Markers can only occupy the canvas, never the label/controls or the
   detail panel. */
@media (max-width: 430px) {
  .public-sample-map {
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    min-height: 0;
  }
  .public-sample-map__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .public-sample-map__label {
    position: static;
    width: fit-content;
    max-width: 100%;
  }
  .public-sample-map__controls {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .public-sample-map__surface {
    position: relative;
    inset: auto;
    grid-row: 2;
    min-height: 220px;
  }
  .public-sample-map__detail {
    position: static;
    grid-row: 3;
    min-height: 86px;
    margin: 0 12px 12px;
  }
}

/* P34: keep the illustrative mobile markers as independently tappable points
   inside the canvas. The prior Edge/Water anchors were visually adjacent after
   the expanded map-world transform, even though the surrounding map chrome was
   correctly in normal flow. These normalized positions preserve their sample
   detail mappings while leaving each marker its own touch region. */
@media (max-width: 430px) {
  .public-sample-map__marker[data-public-map-marker="edge"] {
    --marker-x: 63% !important;
    --marker-y: 35% !important;
  }
  .public-sample-map__marker[data-public-map-marker="water"] {
    --marker-x: 78% !important;
    --marker-y: 74% !important;
  }
}