/* ============================================================================
   OCTUI — LANDING PAGE STYLESHEET (EDITABLE / ORGANIZED)
   ============================================================================

   QUICK FIND (Ctrl+F in your editor):

   IMAGE CONTROL PANEL       -> hero and early-access background image filenames
   HERO BACKGROUND IMAGE     -> ocean hero artwork and placement
   HERO TEXT READABILITY     -> white overlay over ocean behind heading
   HERO PHONE POSITION       -> position, size, rotation of main phone
   REAL HOME SCREEN IMAGE    -> screenshot fit/crop within main phone
   HERO MASCOT               -> size/placement of the official mascot
   PRIVACY ARTWORK           -> privacy scene image styling
   EARLY ACCESS BACKGROUND   -> background behind signup form
   RESPONSIVE BREAKPOINTS    -> tablet, mobile and small-phone overrides

   PAGE ORDER:
     00. Global colors, typography, spacing
     01. Header / logo / navigation
     02. Hero ocean background and copy
     03. Main phone / photo cards / mascot
     04. Feature cards
     05. Vision and second phone
     06. How it works
     07. App preview
     08. Roadmap
     09. Privacy
     10. FAQ
     11. Early access and form
     12. Footer
     13. Privacy notice page
     14. Responsive overrides (laptop -> mobile)

   IMPORTANT IMAGE DISTINCTION:
     * CSS background images: Change the two variables below.
     * <img> image files (logo, mascot, app screenshot, photo cards):
       Their file paths are in index.html. CSS only controls how they DISPLAY.

   This is the original stylesheet reformatted and annotated. No redesign intended.
   Adapted from the supplied mobile-app landing page template.
   ============================================================================ */

/* ============================================================================
   IMAGE CONTROL PANEL — EDIT BACKGROUND IMAGE FILE PATHS HERE
   ============================================================================

   Relative paths start from css/octui.css (the CSS file), not index.html.
   Example: ../assets/hero-underwater.jpg means the site assets folder.

   CURRENT BACKGROUND IMAGES:
     Main hero (ocean)      ../assets/hero-underwater.jpg
     Early-access banner    ../assets/octui-privacy-scene.png

   OTHER FILES TO CHANGE IN index.html (NOT CSS):
     Official Octui logo    assets/octui-logo.png
     Official mascot        assets/octui-mascot.png
     Main phone screenshot  assets/hero/octui-app-screen-mobile.jpg
     Privacy scene          assets/octui-privacy-scene.png
     App icon               assets/octui-app-icon.png
   ============================================================================ */

/* ============================================================================
   00. GLOBAL COLORS, TYPE, SECTION SPACING
   Edit site-wide variables under :root; common components follow.
   ============================================================================ */

:root {
  --ink: #143343;
  --ink2: #2d4f5e;
  --muted: #597380;
  --teal: #079a9b;
  --deep: #006e78;
  --mint: #d4f6ed;
  --seafoam: #e8f9f5;
  --coral: #ff7867;
  --coral-dark: #ee6457;
  --sand: #fff4e7;
  --line: #d8eeed;
  --shadow: 0 20px 60px rgba(13,86,97,.11);

  /* IMAGE CONTROL PANEL: edit just these URLs to replace backgrounds. */
  --hero-background-image: url("../assets/hero-underwater.jpg");
  --early-access-background-image: url("../assets/ocean/05-early-access-seabed.jpg");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body.octui-site {
  margin: 0;
  background: #fbfefd;
  color: var(--ink);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.octui-site a {
  text-decoration: none;
}

body.octui-site a:focus-visible,
body.octui-site button:focus-visible,
body.octui-site input:focus-visible,
summary:focus-visible {
  outline: 3px solid #f99474;
  outline-offset: 4px;
}

body.octui-site button,
body.octui-site input {
  font: inherit;
}

body.octui-site img {
  max-width: 100%;
}

::selection {
  background: #aeeae4;
  color: #143343;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  background: #fff;
  padding: 12px 20px;
  z-index: 1000;
}

.skip-link:focus {
  top: 12px;
}

.container {
  max-width: 1180px;
}

.section-space {
  padding: 108px 0;
}

.overline {
  display: block;
  font-weight: 780;
  letter-spacing: .21em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--teal);
  margin-bottom: 18px;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 54px;
}

.section-intro.centered {
  text-align: center;
}

.section-intro h2,
.copy-block h2 {
  font-size: clamp(31px,3.3vw,48px);
  line-height: 1.13;
  letter-spacing: -.043em;
  font-weight: 800;
  margin: 0 0 19px;
}

.section-intro h2 span,
.copy-block h2 span {
  color: var(--teal);
}

.section-intro p,
.copy-block p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.section-intro p {
    max-width: 610px;
    margin: 0 auto;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #FFFFFF;
}

.copy-block p {
  max-width: 590px;
  margin: 0 0 16px;
}

.copy-block .overline {
  margin-bottom: 22px;
}


/* ============================================================================
   01. SITE HEADER, NAVIGATION & OFFICIAL LOGO
   Change the logo size using .brand-logo or .footer-logo.
   ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f0fbfb;
  border-bottom: 1px solid rgba(17,131,140,.08);
}

.site-header.is-scrolled {
  position: sticky;
  top: 0;
  background: rgba(247,253,251,.95);
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 25px rgba(30,88,94,.07);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  gap: 24px;
}

.brand {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 31px;
  font-weight: 820;
  letter-spacing: -.075em;
  line-height: 1;
}

.brand img {
  display: block;
  flex: none;
}

.brand:visited {
  color: var(--ink);
}

.brand-logo-wrap {
  line-height: 0;
}

.brand-logo {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
}

.footer-logo {
  width: 220px;
}

.brand-i {
  position: relative;
  display: inline-block;
}

.coral-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--coral);
  border-radius: 50%;
  left: 5px;
  top: -5px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 29px;
}

.primary-nav>a {
  font-size: 13px;
  font-weight: 740;
  color: #274856;
  transition: color .2s;
}

.primary-nav>a:not(.nav-cta):hover {
  color: var(--teal);
}

.primary-nav>a.nav-cta {
  padding: 11px 21px;
  background: var(--coral);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(255,111,91,.23);
}

.primary-nav>a.nav-cta:hover {
  background: var(--coral-dark);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}


/* ============================================================================
   02. HERO SECTION — OCEAN BACKGROUND, TEXT & BUTTONS
   HERO BACKGROUND IMAGE is defined in the IMAGE CONTROL PANEL at the top.
   ============================================================================ */

/* HERO BACKGROUND IMAGE: var(--hero-background-image) is set in the control panel above.
      To change the ocean artwork, edit the --hero-background-image value. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(232,248,250,.58) 0%,rgba(232,248,250,.34) 20%,rgba(127,204,231,.12) 48%,rgba(14,124,177,.08) 100%),var(--hero-background-image);
  background-repeat: no-repeat,no-repeat;
  background-size: cover,cover;
  background-position: center top,center top;
  min-height: 690px;
  padding: 85px 0 103px;
}

/* HERO TEXT READABILITY OVERLAY: Adjust these rgba alpha values
      to lighten or darken the ocean behind the text. This does not change the image file. */
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(242,250,252,.86) 0%,rgba(242,250,252,.74) 28%,rgba(242,250,252,.32) 48%,rgba(242,250,252,.10) 62%,rgba(255,255,255,0) 78%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-row {
  min-height: 565px;
}

/* Soft glow behind the right-hand hero phone. */
.hero-halo {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  right: -150px;
  top: -120px;
  background: radial-gradient(circle at 45% 38%,rgba(255,255,255,.34),rgba(135,231,240,.18) 45%,rgba(18,149,190,.08) 62%,transparent 74%);
}

/* Translucent wave along the bottom of the hero. */
.hero-wave {
  display: none;
  position: absolute;
  left: -6%;
  bottom: -150px;
  width: 115%;
  height: 285px;
  transform: rotate(-3deg);
  background: linear-gradient(100deg,rgba(255,255,255,.12),rgba(255,255,255,.48));
  border-radius: 50%;
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  letter-spacing: .17em;
  font-size: 10px;
  font-weight: 800;
  color: #477984;
  margin-bottom: 28px;
}

.eyebrow-dot {
  background: var(--coral);
  box-shadow: 0 0 0 5px #ffe4da;
  width: 7px;
  height: 7px;
  border-radius: 100%;
}

.eyebrow-sep {
  opacity: .45;
}

.hero h1 {
  font-size: clamp(43px,5vw,69px);
  line-height: 1.09;
  letter-spacing: -.058em;
  font-weight: 840;
  margin: 0 0 25px;
  color: #142f42;
  max-width: 600px;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--teal);
}

.hero-description {
  max-width: 530px;
  font-size: 18px;
  color: #4c6b79;
  line-height: 1.82;
  margin: 0 0 31px;
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 760;
  border-radius: 13px;
  padding: 15px 23px;
  font-size: 14px;
  transition: transform .2s,background .2s,box-shadow .2s;
}

.button:hover {
  transform: translateY(-2px);
}

.button-coral {
  color: #fff !important;
  background: var(--coral);
  box-shadow: 0 10px 25px rgba(255,113,92,.25);
}

.button-coral:hover {
  background: var(--coral-dark);
}

.button-ghost {
  color: #204654 !important;
  border: 1.5px solid rgba(102,165,171,.95);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(4px);
}

.button-ghost:hover {
  background: #fff;
}

.play-icon {
  border: 1.7px solid #386b73;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  padding-left: 2px;
}

.hero-micro {
  margin: 24px 0 0;
  font-size: 12px;
  color: #335c6a;
  font-weight: 700;
}

.mini-check {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #d8f3e6;
  color: #008d7f;
  font-size: 10px;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.bullet-dot {
  padding: 0 10px;
  color: #6f989c;
}


/* ============================================================================
   03. HERO PHONE MOCKUP, SCREENSHOT, FLOATING PHOTOS & MASCOT
   The actual phone screenshot source is in index.html (img src); .phone-hero-shot controls how it fits.
   ============================================================================ */

.hero-visual-col {
  min-height: 620px;
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 610px;
  isolation: isolate;
}

.hero-visual:before {
  display: none;
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 15px;
  height: 120px;
  border-radius: 58% 42% 40% 60% / 54% 48% 52% 46%;
  background: radial-gradient(circle at 50% 22%,rgba(255,255,255,.18),rgba(255,255,255,0) 46%),linear-gradient(180deg,rgba(240,228,208,.75),rgba(222,208,186,.88));
  box-shadow: 0 20px 40px rgba(15,96,103,.14);
  z-index: 0;
}

.hero-visual:after {
  content: "";
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 138px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(196,244,242,.14) 52%,rgba(196,244,242,0) 72%);
  z-index: 0;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.64);
  pointer-events: none;
}

.orbit-one {
  width: 580px;
  height: 580px;
  left: 0;
  top: 16px;
  border-color: rgba(255,255,255,.58);
}

.orbit-two {
  width: 460px;
  height: 460px;
  left: 65px;
  top: 84px;
  background: radial-gradient(circle,rgba(255,255,255,.16),rgba(169,229,225,.10) 56%,transparent 73%);
}

.phone {
  position: relative;
  background: #172c38;
  border: 5px solid #223d4a;
  border-radius: 41px;
  padding: 7px;
  box-shadow: 0 30px 55px rgba(12,68,77,.25),inset 0 0 0 1px #547078;
  overflow: hidden;
}

.phone-island {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 19px;
  background: #162c39;
  border-radius: 0 0 15px 15px;
}

.phone-screen {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(160deg,#ebfcfc,#f8ffff 46%,#eefafa);
  border-radius: 30px;
  padding: 29px 14px 0;
  position: relative;
}

.phone-screen-image {
  padding: 0;
  background: #fff;
}

/* REAL HOME SCREEN IMAGE: its FILE is set by <img src="..."> in index.html.
      Use object-fit / object-position here to control framing inside the phone. */
.phone-hero-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 30px;
}

/* HERO PHONE POSITION & SIZE: Adjust width, height, left, top, transform. */
.phone-hero {
  position: absolute;
  z-index: 5;
  width: 278px;
  height: 553px;
  left: 50%;
  top: 15px;
  transform: translateX(-42%) rotate(5deg);
}

.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #244551;
  font-weight: 800;
  line-height: 1;
  padding: 0 8px 11px;
}

.phone-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-size: 23px;
  line-height: 1.3;
}

.phone-logo strong {
  letter-spacing: -.06em;
}

.phone-logo>span {
  margin-left: auto;
  font-size: 20px;
  color: #73979f;
}

.phone-greeting {
  font-weight: 800;
  font-size: 16px;
  margin-top: 10px;
  letter-spacing: -.03em;
}

.phone-subhead {
  font-size: 10px;
  color: #65878e;
  line-height: 1.4;
}

.search-mock {
  margin-top: 12px;
  border: 1px solid #deeeed;
  background: white;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 10px;
  color: #7d9fa5;
}

.search-mock span {
  font-size: 17px;
  vertical-align: middle;
  margin-right: 4px;
}

.quick-title,
.phone-bottom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  margin: 14px 0 9px;
}

.quick-title span,
.phone-bottom-title span {
  color: var(--teal);
  font-size: 10px;
}

.phone-categories {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px;
}

.phone-categories div {
  position: relative;
  height: 92px;
  border-radius: 13px;
  overflow: hidden;
  background: #99b9b8;
}

.phone-categories img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08);
}

.phone-categories div:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent,rgba(7,29,37,.58));
}

.phone-categories div span {
  position: absolute;
  z-index: 1;
  bottom: 6px;
  left: 8px;
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.phone-bottom-title {
  margin-bottom: 7px;
}

.phone-memory-img {
  height: 68px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.phone-tabs {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 47px;
  background: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-top: 1px solid #d9eceb;
}

.phone-tabs span {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #8c9fa4;
  font-size: 17px;
  line-height: 1.1;
}

.phone-tabs span small {
  font-size: 8px;
  font-weight: 700;
  margin-top: 1px;
}

.phone-tabs .tab-active {
  color: var(--teal);
}

.float-photo {
  position: absolute;
  z-index: 2;
  background: #fff;
  padding: 7px 7px 17px;
  border-radius: 13px;
  box-shadow: 0 15px 38px rgba(29,103,107,.22);
}

.float-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.photo-left-top {
  left: 0;
  top: 63px;
  width: 173px;
  height: 200px;
  transform: rotate(-11deg);
}

.photo-right-top {
  right: -48px;
  top: 73px;
  width: 173px;
  height: 173px;
  transform: rotate(9deg);
}

.photo-left-bottom {
  left: 12px;
  bottom: 120px;
  width: 173px;
  height: 173px;
  transform: rotate(9deg);
}

.photo-right-bottom {
  right: -43px;
  bottom: 93px;
  width: 173px;
  height: 173px;
  transform: rotate(-9deg);
}

.photo-caption {
  position: absolute;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  color: #64808b;
  bottom: 2px;
  left: 11px;
}

/* HERO MASCOT: This positions the approved octopus image.
      The actual image file is specified in index.html. */
.hero-mascot {
  position: absolute;
  z-index: 7;
  width: 148px;
  height: 148px;
  bottom: -10px;
  left: 24px;
  filter: drop-shadow(0 12px 14px rgba(19,113,102,.24));
  transform: rotate(-5deg);
}

.hero-mascot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.concept-tag {
  position: absolute;
  z-index: 8;
  bottom: -23px;
  right: 65px;
  font-size: 10px;
  font-weight: 700;
  color: #62858b;
  letter-spacing: .04em;
}


/* ============================================================================
   04. FEATURE CARDS — LESS SCROLLING, MORE REMEMBERING
   Feature card backgrounds, icons, spacing and type.
   ============================================================================ */

.features-section {
  background: #fff;
}

.feature-grid {
  row-gap: 24px;
}

.feature-card {
  height: 100%;
  padding: 35px 30px 27px;
  border: 1px solid #e1f0ee;
  border-radius: 23px;
  background: linear-gradient(155deg,#fff,#fbfefd);
  box-shadow: 0 13px 33px rgba(26,108,118,.045);
  transition: transform .2s,box-shadow .2s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  border-radius: 22px;
  margin-bottom: 25px;
}

.feature-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-coral {
  background: #ffebe5;
  color: #f87e65;
}

.icon-teal {
  background: #dcf7ef;
  color: #099a91;
}

.icon-violet {
  background: #eeedff;
  color: #7975cf;
}

.feature-card h3 {
  font-size: 21px;
  letter-spacing: -.035em;
  font-weight: 800;
  margin-bottom: 12px;
}

.feature-card p {
  min-height: 90px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.feature-number {
  display: block;
  color: #a2b5b8;
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 800;
  margin-top: 22px;
}


/* ============================================================================
   05. VISION / STORY SECTION — SECOND PHONE & IMAGE CARDS
   Illustrative phone, collage and the All Your Memories copy block.
   ============================================================================ */

/* SECTION BACKGROUND COLOR / GRADIENT. */
.story-section {
  background: url("../assets/ocean/02-organized-midwater.jpg") center center / cover no-repeat;
}

.story-row {
  min-height: 560px;
}

.story-visual {
  height: 565px;
  position: relative;
}

.story-blob {
	display: none;
  position: absolute;
  left: 2%;
  top: 5%;
  height: 480px;
  width: 480px;
  border-radius: 53% 47% 67% 33% / 36% 67% 33% 64%;
  background: linear-gradient(125deg,#baeeeb,#e1fbf8);
  transform: rotate(-12deg);
}

.phone-story {
  width: 277px;
  height: 515px;
  position: absolute;
  top: 22px;
  left: 147px;
  transform: rotate(8deg);
  z-index: 4;
}

.story-screen {
  padding: 29px 12px;
}

.story-app-top {
  display: flex;
  justify-content: space-between;
  font-weight: 850;
  font-size: 13px;
  align-items: center;
}

.story-app-top span:first-child {
  font-size: 14px;
}

.story-date {
  text-align: center;
  color: #6d9799;
  font-size: 10px;
}

.story-chips {
  display: flex;
  gap: 5px;
  margin: 18px 0 14px;
}

.story-chips span {
  font-size: 9px;
  flex: 1;
  text-align: center;
  background: #fff;
  padding: 6px 0;
  border-radius: 9px;
  color: #5a8188;
}

.story-chips span:first-child {
  background: #a7e8e4;
  color: #007c7e;
  font-weight: 800;
}

.story-gallery {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 6px;
}

.story-gallery img {
  height: 107px;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.story-gallery img:nth-child(3) {
  grid-column: span 2;
  height: 90px;
}

.timeline-tag {
  color: #078c8a;
  font-size: 11px;
  font-weight: 800;
  margin-top: 10px;
}

.timeline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--coral);
  border-radius: 50%;
  margin-right: 7px;
}

.story-photo {
  position: absolute;
  background: white;
  padding: 8px 8px 20px;
  border-radius: 12px;
  box-shadow: 0 17px 40px rgba(46,105,114,.22);
  z-index: 3;
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.story-photo-asset img,
.story-photo-icon img {
  object-fit: contain;
  background: linear-gradient(180deg,#f4fbfb,#ffffff);
}

.story-photo-asset {
  padding: 10px;
  background: #fff;
}

.story-photo-icon {
  padding: 12px;
  background: #fff;
}

.collage-a {
  height: 187px;
  width: 177px;
  left: 0;
  top: 62px;
  transform: rotate(-12deg);
}

.collage-b {
  height: 180px;
  width: 179px;
  left: 0;
  bottom: 41px;
  transform: rotate(9deg);
}

.visual-float-label {
  position: absolute;
  left: 289px;
  bottom: 5px;
  color: var(--teal);
  font-family: Georgia,serif;
  font-style: italic;
  font-size: 18px;
  white-space: nowrap;
}

.check-list {
  margin-top: 25px;
  display: grid;
  gap: 11px;
  color: var(--ink2);
  font-size: 14px;
  font-weight: 670;
}

.check-list span,
.privacy-points span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ccefeb;
  color: #008c87;
  margin-right: 10px;
  font-weight: 900;
}

.text-link {
  display: inline-block;
  color: var(--teal);
  font-weight: 790;
  margin-top: 26px;
  border-bottom: 2px solid #b8e6df;
  padding-bottom: 4px;
}

.text-link:hover {
  color: var(--deep);
}


/* ============================================================================
   06. HOW IT WORKS — THREE STEPS
   Timeline steps, numbers and descriptions.
   ============================================================================ */

.how-section {
  background: white;
}

.process-grid {
  position: relative;
  row-gap: 30px;
}

.process-grid:before {
  content: "";
  height: 1px;
  position: absolute;
  top: 37px;
  left: 18%;
  right: 18%;
  border-top: 2px dashed #b7e3de;
}

.process-item {
  text-align: center;
  position: relative;
  padding: 0 15px;
}

.process-no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 73px;
  height: 73px;
  border-radius: 50%;
  background: #e8f8f5;
  border: 8px solid #fff;
  box-shadow: 0 0 0 1px #d6f1ed;
  margin: 0 auto 23px;
  color: var(--teal);
  font-weight: 850;
  letter-spacing: .04em;
}

.process-symbol {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: linear-gradient(140deg,#f4fcf8,#e1f6f1);
  display: grid;
  place-items: center;
  color: #0b9b97;
  font-size: 32px;
  margin: 0 auto 21px;
}

.process-item h3 {
  font-weight: 790;
  font-size: 20px;
  letter-spacing: -.025em;
}

.process-item p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 295px;
  margin: 12px auto 0;
}

.section-note {
  text-align: center;
  margin: 45px auto 0;
  color: #799095;
  font-size: 12px;
}


/* ============================================================================
   07. APP PREVIEW — THREE MINI PHONE MOCKUPS
   Controls the previews further down the page.
   ============================================================================ */

.preview-section {
  background: url("../assets/ocean/03-preview-deeper-water.jpg") center center / cover no-repeat;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 26px;
}

.preview-card {
  text-align: center;
  min-width: 0;
  border-radius: 27px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(206,235,230,.8);
  padding: 27px 22px 23px;
  box-shadow: 0 12px 30px rgba(35,116,123,.055);
}

.preview-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 18px 0 5px;
}

.preview-card>p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.preview-phone {
  background: #1f3740;
  border: 4px solid #243f4b;
  border-radius: 30px;
  padding: 6px;
  width: 217px;
  height: 447px;
  margin: 0 auto;
  box-shadow: 0 13px 30px rgba(22,77,84,.17);
}

.preview-screen {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #f3fcfa;
  height: 100%;
  border-radius: 22px;
  padding: 23px 11px 11px;
}

.preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 10px;
  color: #244b53;
  height: 27px;
}

.preview-top b {
  margin-right: auto;
  font-size: 12px;
}

.preview-search {
  background: #fff;
  border: 1px solid #e2efed;
  border-radius: 8px;
  padding: 7px;
  font-size: 9px;
  color: #82a4a9;
  margin: 9px 0;
}

.preview-screen h4 {
  font-weight: 850;
  font-size: 13px;
  letter-spacing: -.02em;
  margin: 12px 0 8px;
}

.preview-cover {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  height: 135px;
}

.preview-cover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.preview-cover:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent,rgba(10,37,50,.74));
}

.preview-cover span {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.preview-cover small {
  display: block;
  font-weight: 500;
  font-size: 9px;
}

.preview-mini-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin-top: 9px;
}

.preview-mini-row img {
  width: 100%;
  height: 77px;
  border-radius: 8px;
  object-fit: cover;
}

.preview-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #5f969b;
  background: #fff;
  border-top: 1px solid #e4efef;
  padding: 7px 0;
}

.preview-filter {
  display: flex;
  gap: 4px;
  margin: 13px 0;
}

.preview-filter span {
  flex: 1;
  border-radius: 6px;
  font-size: 9px;
  text-align: center;
  padding: 5px;
  background: white;
  color: #71949b;
}

.preview-filter span:first-child {
  background: #b7ede8;
  color: #047f80;
  font-weight: 800;
}

.preview-photo-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 6px;
}

.preview-photo-grid img {
  width: 100%;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
}

.mission-small {
  text-align: center;
  color: #009c98;
  font-size: 8px;
  letter-spacing: .12em;
  font-weight: 800;
  margin: 12px 0;
}

.mission-photo {
  height: 122px;
  border-radius: 12px;
  overflow: hidden;
}

.mission-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-screen>.mission-photo+h4 {
  text-align: center;
  margin-top: 13px;
}

.preview-screen>p {
  text-align: center;
  font-size: 9px;
  color: #547885;
  line-height: 1.5;
  margin-bottom: 9px;
}

.mission-options {
  display: grid;
  gap: 5px;
}

.mission-options span {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e0efed;
  font-size: 9px;
  text-align: center;
  color: #416774;
}

.mission-options span:nth-child(2) {
  background: #c7f1eb;
  color: #007f83;
  border-color: #6bd3c5;
  font-weight: 790;
}

.preview-disclaimer {
  text-align: center;
  font-size: 12px;
  color: #FFFFFF;
  margin: 29px 0 0;
}


/* ============================================================================
   08. ROADMAP / FUTURE FEATURES
   Future feature grid and cards.
   ============================================================================ */

.roadmap-section {
  background: #fff;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.roadmap-item {
  display: flex;
  gap: 19px;
  background: #f7fcfa;
  border: 1px solid #e0f0ee;
  border-radius: 18px;
  padding: 26px;
}

.road-icon {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #dbf4ed;
  height: 59px;
  width: 59px;
  font-size: 32px;
  color: var(--teal);
}

.roadmap-item:nth-child(2) .road-icon {
  background: #e4f1ff;
  color: #3386b1;
}

.roadmap-item:nth-child(3) .road-icon {
  background: #fff0e9;
  color: var(--coral-dark);
}

.roadmap-item:nth-child(4) .road-icon {
  background: #f0edff;
  color: #8178c2;
}

.road-label {
  font-size: 9px;
  color: #779fa0;
  letter-spacing: .15em;
  font-weight: 850;
}

.roadmap-item h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 4px 0 8px;
}

.roadmap-item p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}


/* ============================================================================
   09. PRIVACY SECTION — TREASURE SCENE & APP ICON
   The privacy scene is an <img> in index.html, not a CSS background.
   ============================================================================ */

/* PRIVACY SECTION BACKGROUND COLOR. */
.privacy-section {
  background: url("../assets/ocean/04-privacy-seabed.jpg") center center / cover no-repeat;
  overflow: hidden;
}

.privacy-art {
  height: 420px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRIVACY ARTWORK: The IMAGE FILE is in index.html (class="privacy-scene").
      Edit width / border-radius / shadow here. */
.privacy-scene {
  display: block;
  width: 100%;
  max-width: 430px;
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(17,92,102,.18);
}

.privacy-badge {
  position: absolute;
  right: 0;
  bottom: -14px;
  width: 112px;
  filter: drop-shadow(0 15px 22px rgba(25,118,112,.25));
}

.privacy-points {
  display: grid;
  gap: 13px;
  margin: 23px 0 18px;
  color: #365965;
  font-weight: 750;
  font-size: 14px;
}

.privacy-points span {
  background: #069b99;
  color: #fff;
}

.copy-block p.privacy-fine {
  font-size: 12px;
  margin-top: 16px;
  line-height: 1.6;
  color: #779199;
}


/* ============================================================================
   10. FAQ — ACCORDION & MASCOT
   Questions, expanded answers and mascot sizing.
   ============================================================================ */

.faq-section {
  background: #fff;
}

.faq-mascot {
  width: 160px;
  margin-top: 30px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 16px rgba(255,120,103,.15));
}

.faq-list {
  border-top: 1px solid #dfeeed;
}

.faq-list details {
  border-bottom: 1px solid #dfeeed;
  padding: 0 2px;
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  gap: 20px;
  font-size: 17px;
  font-weight: 740;
  color: #20414d;
  padding: 21px 0;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  font-size: 24px;
  color: var(--teal);
  font-weight: 500;
  transition: transform .2s;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  padding: 0 34px 22px 0;
  margin: 0;
}


/* ============================================================================
   11. EARLY ACCESS — BACKGROUND IMAGE & EMAIL FORM
   EARLY ACCESS BACKGROUND IMAGE is defined in the IMAGE CONTROL PANEL at the top.
   ============================================================================ */

/* EARLY ACCESS BACKGROUND IMAGE: var(--early-access-background-image)
      comes from the IMAGE CONTROL PANEL at the top. Adjust gradient for visibility. */
.early-access-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,rgba(8,64,89,.90) 0%,rgba(8,90,116,.84) 38%,rgba(7,110,130,.70) 70%,rgba(13,114,134,.60) 100%),var(--early-access-background-image);
  background-size: cover;
  background-position: center bottom;
  color: white;
  padding: 98px 0 94px;
}

.early-access-section:before {
  content: "";
  width: 590px;
  height: 440px;
  background: rgba(255,255,255,.07);
  border-radius: 60% 40% 20% 80%;
  position: absolute;
  right: -100px;
  top: 20px;
  transform: rotate(-20deg);
}

.early-access-section .container {
  position: relative;
  z-index: 2;
}

.overline.light {
  color: #c5f6ef;
}

.early-access-section h2 {
  font-size: clamp(34px,4vw,55px);
  letter-spacing: -.045em;
  line-height: 1.12;
  font-weight: 830;
  max-width: 600px;
}

.early-access-section h2 em {
  color: #ffb49d;
  font-style: normal;
}

.early-access-section p {
  color: #e7faf9;
  font-size: 16px;
  max-width: 560px;
  line-height: 1.7;
}

/* EARLY ACCESS EMAIL FORM WRAPPER. */
.signup-form {
  position: relative;
  display: flex;
  max-width: 576px;
  background: white;
  align-items: center;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 11px 35px rgba(5,46,60,.19);
  margin-top: 25px;
}

.signup-form input[type=email] {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 14px;
  font-size: 14px;
}

.signup-form input[type=email]::placeholder {
  color: #93a7ae;
}

.signup-form button {
  flex: none;
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  padding: 14px 17px;
  cursor: pointer;
}

.signup-form button:hover {
  background: var(--coral-dark);
}

.signup-form button:disabled {
  opacity: .7;
  cursor: wait;
}

.hp-field {
  position: absolute;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.early-access-section p.signup-fine {
  font-size: 11px;
  color: #c9eeeb;
  margin: 11px 0 0;
}

.signup-fine a {
  color: white;
  text-decoration: underline !important;
}

.form-status {
  min-height: 21px;
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  color: #fff !important;
}

.cta-visual {
  height: 360px;
  position: relative;
  display: grid;
  place-items: center;
}

.cta-visual img {
  width: 250px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 22px 20px rgba(2,64,72,.31));
  transform: rotate(-6deg);
  border-radius: 22%;
}

.cta-mascot-glow {
  display: none;
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(194,255,244,.63),rgba(255,255,255,.06) 65%,transparent 70%);
}

.star {
  position: absolute;
  font-size: 30px;
  color: #d4ffea;
}

.star-one {
  left: 11%;
  top: 15%;
}

.star-two {
  right: 11%;
  top: 26%;
  color: #ffd5b6;
}

.star-three {
  right: 20%;
  bottom: 9%;
}


/* ============================================================================
   12. FOOTER — LOGO, LINKS & COPYRIGHT
   Footer background color, logo and navigation.
   ============================================================================ */

/* FOOTER BACKGROUND COLOR. */
.site-footer {
  background: #092d3a;
  color: #d3e6e9;
  padding: 55px 0 24px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,.13);
  padding-bottom: 43px;
}

.footer-brand {
  max-width: 300px;
}

.brand-light {
  color: #fff !important;
}

.footer-brand p {
  color: #a7c2c8;
  font-size: 13px;
  line-height: 1.7;
  margin: 18px 0 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 20px;
}

.footer-links a,
.footer-bottom a {
  color: #c0d5d9;
  font-size: 12px;
}

.footer-links a:hover,
.footer-bottom a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 26px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 11px;
  color: #8eafb7;
  margin: 0;
}

.footer-bottom>div {
  display: flex;
  gap: 23px;
  flex-wrap: wrap;
}


/* ============================================================================
   13. LEGAL / PRIVACY NOTICE PAGE
   Styling for privacy.html.
   ============================================================================ */

.legal-page {
  min-height: 65vh;
  padding: 65px 0 110px;
}

.legal-page .legal-content {
  max-width: 790px;
}

.legal-content h1 {
  font-size: 46px;
  line-height: 1.2;
  letter-spacing: -.05em;
  font-weight: 800;
}

.legal-content h2 {
  font-size: 22px;
  font-weight: 800;
  margin-top: 36px;
}

.legal-content p,
.legal-content li {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.9;
}

.legal-content a {
  color: var(--teal);
}

.legal-meta {
  font-size: 12px;
  color: #789196;
}

.back-link {
  color: var(--teal);
  font-weight: 750;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   14. RESPONSIVE BREAKPOINTS — LAPTOP, TABLET & PHONES
   These rules override the regular styles at narrower widths.
   ============================================================================ */

/* Smaller laptop / compact desktop (1199px and under) */
@media (max-width:1199px) {
  .primary-nav {
    gap: 17px;
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero-visual {
    transform: scale(.91);
    transform-origin: center left;
  }

  .photo-right-bottom {
    right: 1px;
  }

  .story-blob {
    width: 430px;
  }

  .story-photo.collage-a {
    left: 10px;
  }

  .story-photo.collage-b {
    left: 17px;
  }

  .phone-story {
    left: 122px;
  }

}

/* Tablet / landscape mobile (991px and under) */
@media (max-width:991px) {
  .section-space {
    padding: 83px 0;
  }

  .nav-container {
    min-height: 75px;
  }

  .brand-logo {
    width: 215px;
  }

  .footer-logo {
    width: 205px;
  }

  .nav-toggle {
    display: block;
  }

  .primary-nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    width: 100%;
    background: #f3fbfb;
    padding: 18px 26px 26px;
    box-shadow: 0 15px 30px rgba(14,79,81,.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav>a {
    padding: 12px 4px;
    font-size: 15px;
  }

  .primary-nav>a.nav-cta {
    margin-top: 12px;
    padding: 12px 16px;
    text-align: center;
  }

  .hero {
    padding: 62px 0 100px;
  }

  .hero-row {
    min-height: auto;
  }

  .hero-text {
    text-align: center;
  }

  .eyebrow {
    justify-content: center;
  }

  .hero h1,
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-row {
    justify-content: center;
  }

  .hero-visual-col {
    min-height: 600px;
  }

  .hero-visual {
    transform: none;
    max-width: 565px;
    margin: 10px auto 0;
  }

  .story-row {
    flex-direction: column-reverse;
  }

  .story-visual {
    width: 520px;
    max-width: 100%;
    margin: 25px auto 0;
  }

  .copy-block {
    text-align: center;
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-decoration: none;
  }

  .copy-block p {
    margin-left: auto;
    margin-right: auto;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #FFFFFF;
  }

  .check-list {
    text-align: left;
    display: inline-grid;
  }

  .process-grid:before {
    top: 36px;
  }

  .privacy-art {
    max-width: 430px;
    margin: 0 auto 35px;
  }

  .privacy-copy {
    text-align: center;
  }

  .privacy-points {
    display: inline-grid;
    text-align: left;
  }

  .faq-mascot {
    display: none;
  }

  .faq-section .copy-block {
    margin-bottom: 25px;
  }

  .cta-visual {
    height: 250px;
  }

  .cta-visual img {
    width: 200px;
  }

  .footer-main {
    align-items: flex-start;
  }

  .footer-links {
    max-width: 350px;
  }

}

/* Mobile phones / narrow tablet (767px and under) */
@media (max-width:767px) {
  .hero {
    padding: 54px 0 55px;
  }

  .hero h1 {
    font-size: clamp(40px,9vw,55px);
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-visual-col {
    min-height: 565px;
  }

  .hero-visual {
    max-width: 470px;
    height: 545px;
    transform: scale(.83);
    transform-origin: top center;
    margin: 35px auto -70px;
  }

  .phone-hero {
    left: 47%;
  }

  .section-intro {
    margin-bottom: 33px;
  }

  .section-intro h2,
  .copy-block h2 {
    font-size: 36px;
  }

  .feature-grid {
    justify-content: center;
  }

  .feature-card p {
    min-height: 0;
  }

  .feature-card {
    max-width: 540px;
    margin: auto;
  }

  .story-visual {
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom: -45px;
  }

  .process-grid:before {
    display: none;
  }

  .process-item {
    max-width: 400px;
    margin: auto;
  }

  .preview-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 470px;
    margin: auto;
  }

  .preview-card {
    padding: 27px 20px;
  }

  .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .early-access-section {
    padding: 75px 0 50px;
  }

  .early-access-section h2 {
    font-size: 41px;
  }

  .cta-visual {
    height: 220px;
  }

  .cta-visual img {
    width: 186px;
  }

  .footer-main {
    display: block;
  }

  .footer-links {
    margin-top: 22px;
    gap: 19px;
  }

  .footer-bottom>div {
    gap: 14px;
  }

}

/* Small phones (480px and under) */
@media (max-width:480px) {
  .nav-container {
    min-height: 71px;
  }

  .brand {
    font-size: 27px;
  }

  .brand img {
    height: auto;
    width: auto;
  }

  .brand-logo {
    width: 180px;
  }

  .footer-logo {
    width: 180px;
  }

  .hero .eyebrow {
    font-size: 9px;
    gap: 6px;
    letter-spacing: .12em;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero-micro {
    line-height: 2.2;
  }

  .hero-visual-col {
    min-height: 440px;
  }

  .hero-visual {
    margin: 26px 0 -160px 50%;
    transform: translateX(-50%) scale(.67);
    transform-origin: top center;
    width: 550px;
    max-width: none;
  }

  .concept-tag {
    right: 115px;
  }

  .hero .cta-row {
    gap: 9px;
  }

  .hero .button {
    font-size: 13px;
    padding: 13px 16px;
  }

  .section-space {
    padding: 70px 0;
  }

  .section-intro h2,
  .copy-block h2 {
    font-size: 31px;
  }

  .story-visual {
    margin: 10px auto -110px;
    transform: scale(.7);
    transform-origin: top left;
    width: 520px;
    max-width: none;
    left: 50%;
    margin-left: -184px;
  }

  .story-visual+.x {
    display: none;
  }

  .feature-card {
    padding: 27px;
  }

  .roadmap-item {
    padding: 21px 16px;
    gap: 13px;
  }

  .road-icon {
    width: 47px;
    height: 47px;
    font-size: 25px;
  }

  .privacy-art {
    transform: scale(.83);
    transform-origin: center;
    margin-bottom: -25px;
  }

  .faq-list summary {
    font-size: 15px;
  }

  .early-access-section h2 {
    font-size: 35px;
  }

  .signup-form {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
  }

  .signup-form input[type=email] {
    flex-basis: 100%;
    padding: 12px;
  }

  .signup-form button {
    width: 100%;
    padding: 13px;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom>div {
    margin-top: 18px;
  }

  .legal-content h1 {
    font-size: 36px;
  }

}

/* Reduced motion accessibility preference */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }

}
/* MOBILE ONLY - HEADER LOGO SIZE */

@media (max-width: 767px) {
    .site-header .brand-logo {
        width: 150px;
        height: auto;
    }
}

/* ==================================================
   SECTION 06 — REAL OCTUI APP SCREENSHOTS
   ================================================== */

.preview-screen--real {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3fcfa;
}

.preview-screen--real .preview-real-screenshot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* END OF FILE — edit image paths in the IMAGE CONTROL PANEL near the top. */