/* Time Opts — Trial 14 HTML readiness. Visual CSS unchanged from Trial 13H. */
:root {
  color-scheme: light;
  --ink: #222826;
  --body-ink: #2C3634;
  --blue: #22577A;
  --blue-hover: #1B4865;
  --teal: #38A3A5;
  --mint: #57CC99;
  --mint-soft: #D8F3E7;
  --rule: #D6DEDC;
  --hero-ground: #F7FAF9;
  --surface: #EEF7F5;
  --display-font: "Montserrat", "Avenir Next", "Century Gothic", Arial, sans-serif;
  --body-font: "Open Sans", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:var(--body-font); font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; }
.container { width:min(100% - 64px,1216px); margin-inline:auto; }
:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }

/* Temporary brandmark: two time paths moving in opposite directions. */
.site-header { background:#fff; border-bottom:1px solid #E2E8E6; position:relative; z-index:5; }
.header-inner { min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.wordmark { display:inline-flex; align-items:center; flex-shrink:0; gap:12px; text-decoration:none; font-family:var(--display-font); font-size:24px; font-weight:700; letter-spacing:-.044em; }
.brand-symbol { width:42px; height:42px; display:block; flex-shrink:0; }
.main-nav { display:flex; align-items:center; gap:clamp(19px,3.2vw,49px); font-family:var(--body-font); font-size:14px; font-weight:700; }
.main-nav > a:not(.button) { text-decoration:none; }
.main-nav > a:not(.button):hover { color:var(--blue); }
.nav-pending { color:var(--ink); cursor:default; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:47px; padding:11px 27px; background:var(--blue); color:#fff; border:1px solid var(--blue); border-radius:5px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background-color .18s ease,transform .18s var(--ease); }
.button:hover { background:var(--blue-hover); }
.button:active { transform:scale(.975); }
.button-small { min-height:41px; padding:9px 19px; }
.button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s var(--ease); }
.button-primary:hover svg { transform:translateX(3px); }

/* Hero infographic: static explanatory artwork rather than an imitation app UI. */
.hero { position:relative; overflow:hidden; background:var(--hero-ground); border-bottom:1px solid #E2E8E6; }
.hero-inner { min-height:575px; display:grid; grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr); gap:clamp(22px,3vw,52px); align-items:center; }
.hero-copy { min-width:0; padding:83px 0 88px; }
.hero h1 { font-family:var(--display-font); font-size:clamp(40px,3.75vw,60px); line-height:1.1; letter-spacing:-.047em; font-weight:700; margin:0 0 30px; }
.hero p { max-width:555px; margin:0 0 17px; font-size:16.5px; line-height:1.67; color:var(--body-ink); }
.hero p+p { margin-bottom:30px; }
.hero-figure { margin:0; min-width:0; }
.hero-infographic { display:block; width:100%; height:auto; }

/* Identical homepage narrative and grid positions to Trial 5. */
.story-section { position:relative; }
.story-grid { display:grid; align-items:center; gap:clamp(60px,7.5vw,128px); }
.story-copy { min-width:0; }
.story-heading { display:block; margin-bottom:25px; }
.story-heading h2 { margin:0; max-width:580px; font-family:var(--display-font); font-size:clamp(27px,2.5vw,36px); line-height:1.22; letter-spacing:-.043em; font-weight:700; }
.story-paragraphs { padding-left:0; }
.story-paragraphs p { margin:0 0 19px; max-width:590px; font-size:16.2px; line-height:1.74; color:var(--body-ink); }
.story-paragraphs p:last-child { margin-bottom:0; }
.choice-section { background:#fff; }
.story-choice-grid { grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr); padding-block:125px 140px; }
.timezone-section { background:#EEF7F5; isolation:isolate; overflow:hidden; }

.story-timezone-grid { position:relative; z-index:1; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); padding-block:120px 132px; }
.share-section { background:#fff; }
.story-share-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-block:116px 126px; }
.share-copy .story-heading { margin-bottom:28px; }
.art-figure { min-width:0; margin:0; width:100%; }
.art-figure img { display:block; width:100%; height:auto; }

/* Feature overview retains the concise five-feature grid. */
.features-section { background:#F3F8F7; isolation:isolate; overflow:hidden; }
.features-section::before { content:""; position:absolute; inset:0; z-index:0; background:url("assets/features-background.webp") left center / cover no-repeat; opacity:.78; pointer-events:none; }
.features-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); gap:clamp(50px,7vw,112px); padding-block:118px 130px; align-items:start; }
.features-intro h2 { margin:0; max-width:390px; font-family:var(--display-font); font-size:clamp(29px,2.8vw,41px); line-height:1.22; letter-spacing:-.042em; font-weight:700; }
.features-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:35px; row-gap:0; }
.feature-item { padding:7px 0 30px; min-width:0; border-bottom:1px solid #D7E3E0; margin-bottom:24px; }
.feature-item h3 { margin:0 0 12px; font-family:var(--display-font); font-size:clamp(17px,1.45vw,20px); line-height:1.35; letter-spacing:-.027em; font-weight:700; }
.feature-heading { display:flex; align-items:flex-start; gap:13px; }
.content-icon { width:24px; height:24px; flex:none; color:var(--blue); margin-top:1px; }
.feature-item p { margin:0; color:var(--body-ink); font-size:15.5px; line-height:1.72; }
.feature-item-last { grid-column:1/-1; max-width:435px; margin-bottom:0; border-bottom:0; padding-bottom:0; }

/* No fake privacy-control UI. Supporting benefit statements remain as typographic copy. */
.simple-section { background:#fff; }
.story-simple-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-block:123px 139px; }
.simple-statements { border-top:2px solid var(--blue); }
.simple-item { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:17px; padding:25px 0 27px; border-bottom:1px solid var(--rule); }
.simple-item-copy { min-width:0; }
.simple-item-title { margin:0 0 9px; font-family:var(--display-font); font-size:clamp(17px,1.6vw,23px); font-weight:600; letter-spacing:-.025em; line-height:1.35; }
.simple-item-description { margin:0; font-family:var(--body-font); color:var(--body-ink); font-size:15px; line-height:1.7; }
.statement-icon { width:25px; height:25px; color:var(--teal); margin-top:2px; }

/* Platform buttons remain inert placeholders pending store availability. */
.get-section { background:#EBF7F4; border-top:1px solid #DCE9E5; border-bottom:1px solid #DCE9E5; }
.get-inner { padding-top:95px; padding-bottom:102px; text-align:center; }
.get-section h2 { font-family:var(--display-font); font-size:clamp(34px,3.1vw,47px); line-height:1.15; font-weight:700; letter-spacing:-.045em; margin:0 0 12px; }
.get-section p { font-size:17px; line-height:1.5; margin:0; color:var(--body-ink); }
.platform-list { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:990px; margin:42px auto 0; }
.platform { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; min-height:115px; padding:18px 12px; color:var(--ink); border:1px solid #D6E4E1; border-radius:5px; background:#fff; font-size:16px; font-weight:700; cursor:default; }
.platform img { display:block; width:31px; height:31px; object-fit:contain; }
.site-footer { background:#fff; }
.footer-inner { min-height:95px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.footer-brand { font-family:var(--display-font); display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:700; letter-spacing:-.03em; text-decoration:none; }
.footer-symbol { width:22px; height:22px; }
.footer-nav { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; font-size:14px; color:var(--body-ink); }

@media (max-width:1120px) {
  .story-grid { gap:50px; }
  .story-choice-grid { grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr); }
  
}
@media (max-width:800px) {
  .container { width:min(100% - 42px,1216px); }
  .header-inner { min-height:70px; flex-wrap:wrap; padding-block:14px; row-gap:14px; }
  .wordmark { font-size:22px; }
  .main-nav { gap:19px; font-size:13px; }
  .main-nav > .nav-pending { display:none; }
  .button-small { min-height:37px; padding:8px 13px; }
  .hero-inner { min-height:0; grid-template-columns:1fr; gap:12px; }
  .hero-copy { padding:72px 0 8px; }
  .hero h1 { font-size:clamp(38px,5.9vw,52px); }
  .hero-figure { width:min(100%,650px); justify-self:center; padding-bottom:36px; }
  .story-grid { grid-template-columns:1fr; gap:40px; }
  .story-choice-grid,.story-share-grid,.story-simple-grid { padding-block:84px 90px; }
  .story-timezone-grid { padding-block:84px 90px; }
  .features-grid { grid-template-columns:1fr; gap:32px; padding-block:84px 90px; }
  .features-intro h2 { max-width:680px; }
  .story-heading h2 { max-width:640px; font-size:clamp(27px,4.2vw,35px); }

  .story-paragraphs p { max-width:650px; }
  .art-figure { width:min(100%,640px); justify-self:center; }
  .story-timezone-grid .timezone-copy { grid-row:1; }
  .story-timezone-grid .timezone-figure { grid-row:2; }
  .story-share-grid .share-copy { grid-row:1; }
  .story-share-grid .share-figure { grid-row:2; }
  .simple-statements { width:min(100%,650px); margin-left:0; }
  .platform-list { grid-template-columns:repeat(3,1fr); gap:12px; }
}
@media (max-width:500px) {
  .container { width:calc(100% - 36px); }
  .header-inner { gap:14px; }
  .wordmark { gap:8px; font-size:21px; }
  .brand-symbol { width:34px; height:34px; }
  .main-nav { width:100%; justify-content:space-between; }
  .hero-copy { padding:62px 0 6px; }
  .hero h1 { font-size:clamp(33px,8.8vw,43px); letter-spacing:-.055em; margin-bottom:24px; }
  .hero p { font-size:15.5px; }
  .hero-figure { padding-bottom:28px; }
  .story-choice-grid,.story-share-grid,.story-simple-grid { padding-block:66px 76px; }
  .story-timezone-grid { padding-block:66px 76px; }
  .features-grid { padding-block:69px 78px; gap:29px; }
  .features-list { grid-template-columns:1fr; }
  .feature-item { margin-bottom:15px; padding:5px 0 24px; }
  .feature-item-last { grid-column:1; border-bottom:0; margin-bottom:0; padding-bottom:0; }
  .story-heading { margin-bottom:22px; }
  .story-heading h2 { font-size:26px; }
  .story-paragraphs p { font-size:15.5px; line-height:1.69; margin-bottom:18px; }
  .simple-statements { margin-left:0; }
  .simple-item { padding:23px 0; }
  .simple-item-title { font-size:19px; }
  .simple-item-description { font-size:14.5px; }
  .get-inner { padding-top:72px; padding-bottom:78px; }
  .platform-list { grid-template-columns:repeat(2,1fr); }
  .platform { min-height:103px; }
  .footer-inner { padding-block:26px; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button,.button svg { transition:none; }

}
@media (hover:none) { .button-primary:hover svg { transform:none; } }

/* Preserve the complete hero illustration at narrower laptop widths. */
@media (min-width:801px) and (max-width:1120px) {
  .hero-inner { grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:20px; }
  .hero h1 { font-size:clamp(37px,3.8vw,48px); }
  .hero p { font-size:15.5px; line-height:1.62; }
}


/* Trial 10 imagery: preserve the source drawings, adapt their scale to the page. */
.hero-inner { grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:clamp(18px,2.1vw,38px); }
.hero-copy { position:relative; z-index:1; }
.hero-figure { width:calc(100% + 24px); margin-right:-24px; overflow:visible; }
.hero-artwork { width:100%; height:auto; display:block; object-fit:contain; mix-blend-mode:multiply; }
.choice-figure { width:calc(100% + min(4vw,55px)); }
.choice-figure img { mix-blend-mode:multiply; }
.story-choice-grid { grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr); gap:clamp(28px,4vw,72px); }

/* Timezone: photo-style background composition on right, unobstructed copy on left. */
.timezone-section { background:#eff7f5; }
.story-timezone-grid { gap:clamp(40px,5vw,88px); }
.photo-figure { margin:0; width:calc(100% + max(0px,(100vw - 1216px) / 2)); height:clamp(360px,34vw,555px); overflow:hidden; align-self:stretch; }
.photo-figure img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 50%; }

.share-figure img { width:100%; height:auto; }
.features-section { background:#f3f8f7; }
.features-section::before { opacity:.86; background-position:left center; }

@media (max-width:1120px) and (min-width:801px) {
  .hero-inner { grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); }
  .hero-figure { width:calc(100% + 20px); margin-right:-20px; }
  .choice-figure { width:100%; }
}
@media (max-width:800px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-figure { width:min(100%,680px); margin:0 auto; }
  .story-choice-grid { grid-template-columns:1fr; }
  .choice-figure { width:min(100%,680px); }
  .photo-figure { width:100%; height:clamp(280px,52vw,500px); }
  .features-section::before { background-position:25% center; opacity:.52; }
}
@media (max-width:500px) {
  .hero-figure { padding-bottom:34px; }
  .hero-artwork { width:108%; max-width:none; margin-left:-4%; }
  .photo-figure { height:310px; }
  .features-section::before { background-position:24% center; opacity:.35; }
}

@media (min-width:1121px) and (max-width:1360px) { .choice-figure { width:100%; } }

/* Trial 12: keep the expanded footer navigation readable on small screens. */
@media (max-width:800px) {
  .footer-inner { flex-wrap:wrap; }
  .footer-nav { column-gap:12px; }
}


/* === Trial 13: identity, hero composition, photographic direction, feature texture === */
/* Identity is still provisional; this simple clock references the approved app icon. */
.brand-symbol { width:40px; height:40px; }
.wordmark { gap:10px; letter-spacing:-.046em; }
.footer-symbol { width:22px; height:22px; }

/* A more substantial full-width, nearly full-viewport opening. The approved
   illustration remains the right-hand focus, and hero copy stays on the left. */
.hero { background:#F8FBFA; }
.hero-inner { min-height:clamp(670px, calc(100svh - 80px), 900px); grid-template-columns:minmax(0,.89fr) minmax(0,1.11fr); gap:clamp(28px,3.1vw,55px); }
.hero-copy { padding-block:105px; max-width:575px; }
.hero h1 { font-size:clamp(44px,4.05vw,64px); }
.hero-figure { width:calc(100% + max(0px,(100vw - 1216px)/2) + 115px); margin-right:calc(-1 * max(0px,(100vw - 1216px)/2)); margin-left:-25px; }
.hero-artwork { width:100%; height:auto; mix-blend-mode:multiply; }

/* Timezone photography: a single local replaceable image in assets/timezones-photo.webp. */
.photo-figure-trial13 { position:relative; background:#DDEBEF; }

/* Refine the overview background: all strong arcs stay at the far left. The
   very light pattern on the remaining area is solely texture, not information. */
.features-section { background:#F4F9F8; }
.features-section::before {
  background-size:100% 100%; background-position:left center;
  transform:translateX(-7%); opacity:.91;
}
.features-section::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle,rgba(34,87,122,.18) .65px,transparent .9px);
  background-size:24px 24px; background-position:0 0;
  opacity:.19;
  -webkit-mask-image:linear-gradient(to right,transparent 31%,black 78%);
  mask-image:linear-gradient(to right,transparent 31%,black 78%);
}
.features-intro { position:relative; z-index:1; }
.features-list { position:relative; z-index:1; }

/* Keep mobile hero readable rather than forcing a desktop-height screen. */
@media (min-width:801px) and (max-width:1120px) {
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:clamp(630px,calc(100svh - 70px),770px); }
  .hero-copy { padding-block:85px; }
  .hero h1 { font-size:clamp(35px,3.7vw,50px); }
  .hero-figure { width:calc(100% + 90px); margin-left:-20px; margin-right:-60px; }
}
@media (max-width:800px) {
  .hero-inner { min-height:0; grid-template-columns:1fr; gap:0; }
  .hero-copy { padding:80px 0 24px; max-width:650px; }
  .hero-figure { width:min(100%,710px); margin-inline:auto; padding-bottom:60px; }
  .hero h1 { font-size:clamp(38px,5.9vw,52px); }
  .features-section::before { transform:translateX(-18%); opacity:.52; }
  .features-section::after { opacity:.12; }
}
@media (max-width:500px) {
  .hero-copy { padding-top:62px; padding-bottom:24px; }
  .hero h1 { font-size:clamp(33px,8.8vw,43px); }
  .hero-figure { width:100%; margin-inline:auto; padding-bottom:37px; }
  .hero-artwork { max-width:100%; width:100%; margin:0; }
  .features-section::before { transform:translateX(-26%); opacity:.35; }
  .features-section::after { opacity:.07; }
}

/* Trial 13 visual review correction: keep all three timezone columns visible
   and preserve the approved headline's three-line grouping. */
@media (min-width:1121px) {
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; }
  .hero h1 { font-size:clamp(44px,3.5vw,57px); }
  .hero-figure { width:calc(100% + max(0px,(100vw - 1216px)/2) - 10px); margin-left:-5px; }
}
@media (min-width:801px) and (max-width:1120px) {
  .hero-figure { width:calc(100% + 35px); margin-left:0; margin-right:-35px; }
}
@media (min-width:1121px) {
  .hero-figure { width:calc(100% + max(0px,(100vw - 1216px)/2) + 80px); margin-left:-95px; }
}


/* Trial 13B — The hero illustration is a full-width backdrop, not a right-hand column.
   The image itself has generous clear space on its left for the approved copy. */
.hero { display:flex; flex-direction:column; background:#F9FCFC; isolation:isolate; }
.hero-figure { position:absolute; inset:0; z-index:0; width:100%; height:100%; margin:0; overflow:hidden; pointer-events:none; }
.hero-artwork { position:absolute; left:0; top:50%; width:100%; height:auto; max-width:none; margin:0; transform:translateY(-50%); display:block; mix-blend-mode:normal; object-fit:contain; }
.hero-inner { position:relative; z-index:1; display:flex; align-items:center; width:min(100% - 64px,1216px); min-height:clamp(650px,calc(100svh - 80px),880px); gap:0; }
.hero-copy { max-width:530px; width:100%; min-width:0; padding-block:80px; }
.hero h1 { font-size:clamp(42px,3.5vw,57px); }
.hero p { max-width:520px; }

/* On narrower screens the full-width banner sits below the text; the art remains
   uncropped on laptops and right-aligned on phones so its data stays legible. */
@media (max-width:1199px) {
  .hero-inner { order:0; min-height:0; width:min(100% - 64px,1216px); padding-block:72px 8px; }
  .hero-copy { max-width:620px; padding:0; }
  .hero h1 { font-size:clamp(39px,4.6vw,52px); }
  .hero-figure { position:relative; order:1; inset:auto; height:clamp(315px,43vw,500px); width:100%; flex:none; }
  .hero-artwork { width:100%; height:100%; top:0; left:0; transform:none; object-fit:cover; object-position:right center; }
}
@media (max-width:800px) {
  .hero-inner { width:min(100% - 42px,1216px); padding-block:64px 8px; }
  .hero-copy { max-width:650px; }
  .hero-figure { height:clamp(260px,52vw,410px); padding:0; }
}
@media (max-width:500px) {
  .hero-inner { width:calc(100% - 36px); padding-top:60px; }
  .hero-copy { padding:0 0 8px; }
  .hero h1 { font-size:clamp(33px,8.8vw,43px); }
  .hero-figure { height:clamp(220px,65vw,280px); width:100%; padding:0; margin:0; }
  .hero-artwork { width:100%; max-width:none; height:100%; left:0; margin:0; object-fit:cover; object-position:right center; }
}


/* Trial 13C — white hero, contained-height image.
   Keep the wide asset visually to the right while allowing a clean white zone
   for copy and white bands above and below the image. */
.hero { background:#ffffff; }
.hero-figure { position:absolute; inset:0; width:100%; height:100%; background:transparent; overflow:hidden; }
.hero-artwork {
  position:absolute;
  top:50%; right:0; left:auto;
  width:90%; height:auto; max-width:none;
  transform:translateY(-50%);
  object-fit:contain;
  /* Source artwork has a near-white cyan canvas; lift neutral pixels to white
     while retaining colour in the actual illustration. */
  filter:contrast(1.09) brightness(1.01);
}
.hero-inner { min-height:clamp(725px,calc(100svh - 80px),825px); }
.hero-copy { max-width:530px; }
@media (min-width:1200px) and (max-width:1399px) {
  .hero-copy { max-width:480px; }
  .hero-artwork { width:88%; }
}
@media (max-width:1199px) {
  .hero { background:#fff; }
  .hero-inner { min-height:0; }
  .hero-figure { position:relative; inset:auto; width:100%; height:clamp(315px,43vw,500px); }
  .hero-artwork { position:absolute; right:0; left:0; top:0; width:100%; height:100%; transform:none; object-fit:cover; object-position:right center; }
}
@media (max-width:800px) {
  .hero-figure { height:clamp(260px,52vw,410px); }
}
@media (max-width:500px) {
  .hero-figure { height:clamp(220px,65vw,280px); }
}


/* Trial 13E — correct the timezone section layering.
   0: full-width photograph; 1: left reading wash; 2: dark text.
   No image or overlay is allowed to cover the copy. */
.timezone-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #edf7f3;
}
.timezone-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.timezone-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.timezone-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    #edf7f3 0%,
    rgba(237,247,243,.99) 31%,
    rgba(237,247,243,.96) 40%,
    rgba(237,247,243,.70) 55%,
    rgba(237,247,243,.18) 75%,
    rgba(237,247,243,0) 86%);
}
.story-timezone-grid {
  position: relative;
  z-index: 2;
  display: block;
  grid-template-columns: none;
  min-height: clamp(520px, 43vw, 630px);
  padding-block: 118px 124px;
}
.timezone-copy { position:relative; z-index: 1; max-width: 610px; }
.timezone-copy .story-heading h2,
.timezone-copy .story-paragraphs p { color: var(--ink); }
.timezone-copy .story-paragraphs p { color: var(--body-ink); }
@media (max-width: 980px) {
  .story-timezone-grid { min-height:0; padding-block:80px 90px; }
  .timezone-section::before {
    background: linear-gradient(to right,
      rgba(237,247,243,.99) 0%,
      rgba(237,247,243,.98) 58%,
      rgba(237,247,243,.90) 79%,
      rgba(237,247,243,.58) 100%);
  }
  .timezone-copy { max-width:650px; }
}
@media (max-width:500px) {
  .story-timezone-grid { padding-block:65px 76px; }
  .timezone-section::before { background:rgba(237,247,243,.94); }
}


/* Trial 13F — single hero background; no overlaid img, tint or filter.
   The CSS refers to one replaceable WebP, never a second image layer. */
.hero {
  background-color:#fff;
  background-image:url("assets/hero-time-options.webp");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:72% auto;
}
.hero-figure, .hero-artwork { display:none !important; }
.hero-inner { position:relative; z-index:1; }
@media (max-width:1199px) {
  .hero {
    background-position:right bottom;
    background-size:100% auto;
    padding-bottom:clamp(270px,55vw,510px);
  }
  .hero-inner { padding-bottom:20px; }
}
@media (max-width:500px) {
  .hero {
    background-position:right bottom;
    background-size:120% auto;
    padding-bottom:clamp(210px,69vw,310px);
  }
}


/* Trial 13G — agreed composition and asset sizing. Do not change approved copy. */
/* One replaceable horizontal logo including the wordmark, not separate HTML text. */
.wordmark { display:inline-flex; align-items:center; min-width:0; line-height:1; }
.brand-lockup { display:block; width:clamp(162px,16vw,210px); max-width:100%; height:auto; object-fit:contain; }
.footer-brand { display:inline-flex; align-items:center; line-height:1; }
.footer-lockup { display:block; width:132px; height:auto; object-fit:contain; }

/* Change the desktop story rhythm: choosing-times image LEFT, copy RIGHT. */
@media (min-width:801px) {
  .story-choice-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4.5vw,78px); }
  .story-choice-grid > .story-copy { grid-column:2; grid-row:1; }
  .story-choice-grid > .choice-figure { grid-column:1; grid-row:1; width:100%; min-width:0; margin:0; }
}
@media (max-width:800px) {
  .story-choice-grid > .story-copy, .story-choice-grid > .choice-figure { grid-column:auto; grid-row:auto; }
  .story-choice-grid { grid-template-columns:1fr; }
}

/* Right-focused photograph, avoiding a blown-up full-section crop.
   Tint is always behind dark copy, never over the text. */
.timezone-section { position:relative; overflow:hidden; background:#edf7f3; isolation:isolate; }
.timezone-figure { position:absolute; left:auto; right:0; top:50%; inset:auto 0 auto auto;
  width:min(55vw,800px); height:clamp(370px,35vw,520px); top:50%; transform:translateY(-50%);
  z-index:0; margin:0; overflow:hidden; background:none; }
.timezone-figure img { width:100%; height:100%; object-fit:cover; object-position:center center; filter:none; }
.timezone-section::before { content:""; pointer-events:none; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, #edf7f3 0%, #edf7f3 34%, rgba(237,247,243,.99) 43%, rgba(237,247,243,.82) 50%, rgba(237,247,243,0) 66%);
}
.story-timezone-grid { position:relative; z-index:2; min-height:590px; display:block; padding-block:110px 116px; }
.timezone-copy { max-width:590px; position:relative; z-index:2; }
.timezone-copy .story-heading h2 { color:var(--ink); }
.timezone-copy .story-paragraphs p { color:var(--body-ink); }
@media (max-width:1100px) and (min-width:801px) {
  .timezone-figure { width:56%; height:460px; }
  .timezone-copy { max-width:52%; }
  .story-timezone-grid { min-height:540px; padding-block:82px; }
}
@media (max-width:800px) {
  .timezone-section { display:flex; flex-direction:column; }
  .timezone-section::before { display:none; }
  .story-timezone-grid { order:1; min-height:0; padding-block:78px 58px; display:block; }
  .timezone-copy { width:100%; max-width:650px; }
  .timezone-figure { order:2; position:relative; inset:auto; top:auto; right:auto; transform:none;
    width:100%; height:auto; aspect-ratio:720/520; max-height:480px; }
  .timezone-figure img { width:100%; height:100%; object-fit:cover; object-position:center; }
}
@media (max-width:500px) {
  .brand-lockup { width:164px; }
  .story-timezone-grid { padding-block:64px 44px; }
  .timezone-figure { max-height:360px; }
}


/* Trial 17 — Subtle photographic parallax while keeping Trial 13H's
   full-bleed crop and left-side reading wash. The photograph and wash are
   separate layers behind the text; no overlay can cover the copy. */
.timezone-section {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #edf7f3;
}
.timezone-parallax-media {
  position: absolute;
  z-index: 0;
  inset: -105px 0;
  pointer-events: none;
  background-image: url("assets/timezones-photo.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: translate3d(0, 0, 0);
}
.timezone-section::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(237,247,243,.98) 0%,
    rgba(237,247,243,.97) 30%,
    rgba(237,247,243,.92) 42%,
    rgba(237,247,243,.66) 54%,
    rgba(237,247,243,.20) 72%,
    rgba(237,247,243,0) 88%);
}
.story-timezone-grid {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100% - 64px,1216px);
  min-height: clamp(520px, 43vw, 630px);
  padding-block: 112px 122px;
}
.timezone-copy { position:relative; z-index:2; max-width:610px; width:100%; }
.timezone-copy .story-heading h2 { color:var(--ink); }
.timezone-copy .story-paragraphs p { color:var(--body-ink); }
@media (max-width:1100px) {
  .timezone-section::before {
    background: linear-gradient(90deg,
      rgba(237,247,243,.99) 0%,
      rgba(237,247,243,.96) 49%,
      rgba(237,247,243,.80) 67%,
      rgba(237,247,243,.30) 100%);
  }
  .timezone-parallax-media { background-position:57% center; }
  .story-timezone-grid { min-height:540px; padding-block:84px 96px; }
  .timezone-copy { max-width:610px; }
}
@media (max-width:800px) {
  .story-timezone-grid { width:min(100% - 42px,1216px); min-height:0; padding-block:85px 93px; }
  .timezone-parallax-media { inset:0; background-position:63% center; transform:none !important; }
}
@media (max-width:500px) {
  .story-timezone-grid { width:calc(100% - 36px); padding-block:68px 76px; }
  .timezone-section::before {
    background:linear-gradient(90deg,rgba(237,247,243,.94),rgba(237,247,243,.86));
  }
  .timezone-parallax-media { background-position:62% center; }
}

/* Step 16E — Trial 15. Support / Feedback / Privacy pages only.
   Homepage visual baseline is unchanged from Trial 13H. */
.footer-nav a { text-decoration:none; }
.footer-nav a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.main-nav a[aria-current="page"] { color:var(--blue); text-decoration:underline; text-underline-offset:7px; }
.subpage-main { background:#fff; }
.subpage-container { width:min(100% - 64px,850px); margin-inline:auto; }
.subpage-intro { padding:83px 0 70px; border-bottom:1px solid #e0e9e6; background:#fff; }
.subpage-intro h1 { font-family:var(--display-font); font-size:clamp(36px,3.7vw,50px); line-height:1.16; letter-spacing:-.046em; font-weight:700; margin:0 0 22px; }
.subpage-intro p { font-size:16.5px; line-height:1.75; color:var(--body-ink); max-width:760px; margin:0 0 14px; }
.subpage-intro p:last-child { margin-bottom:0; }
.subpage-intro .subpage-lead { font-size:18px; max-width:720px; line-height:1.7; }
.subpage-content { padding-block:30px 94px; }
.page-section { padding:47px 0 53px; border-bottom:1px solid #dfe9e6; }
.page-section-last { border-bottom:0; padding-bottom:0; }
.page-section h2 { font-family:var(--display-font); font-size:clamp(22px,2.1vw,28px); line-height:1.32; letter-spacing:-.03em; margin:0 0 23px; font-weight:700; }
.page-section p, .page-section li { max-width:760px; font-size:16px; line-height:1.78; color:var(--body-ink); margin:0 0 17px; }
.page-section p:last-child { margin-bottom:0; }
.page-section ul { margin:0 0 20px; padding-left:23px; }
.page-section li { padding-left:4px; margin-bottom:10px; }
.text-link { color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.text-link:hover { color:var(--blue-hover); }
.faq-list { margin:0; }
.faq-item { padding:23px 0 25px; border-bottom:1px solid #e6ecea; }
.faq-item:first-child { padding-top:4px; }
.faq-item:last-child { border-bottom:0; padding-bottom:0; }
.faq-item h3 { font-family:var(--display-font); font-size:17.5px; font-weight:600; line-height:1.45; letter-spacing:-.019em; margin:0 0 9px; }
.faq-item p { font-size:15.8px; margin:0; }
.feedback-form { max-width:720px; }
.feedback-category { border:0; margin:0 0 32px; padding:0; }
.feedback-category legend, .form-field label { font-size:16px; font-weight:700; margin:0 0 14px; display:block; }
.radio-label { display:flex; align-items:center; gap:12px; font-size:15.5px; line-height:1.5; padding:9px 0; cursor:pointer; }
.radio-label input { width:18px; height:18px; accent-color:var(--blue); flex:none; }
.form-field { margin-bottom:30px; }
.form-field label { margin:0 0 5px; }
.form-field .field-hint { font-size:14px; line-height:1.6; margin-bottom:12px; color:#50615d; }
.form-field textarea, .form-field input[type="email"] { width:100%; min-height:48px; border:1px solid #b4c8c3; border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:16px; padding:13px 15px; }
.form-field textarea { min-height:180px; resize:vertical; }
.form-field textarea:focus, .form-field input:focus { outline:2px solid var(--teal); outline-offset:2px; border-color:var(--blue); }
.optional-note { color:#576662; font-weight:400; }
.feedback-submit:disabled { opacity:.58; cursor:not-allowed; transform:none; }
.form-notice { font-size:14px !important; margin-top:15px !important; max-width:600px; }
.privacy-date { color:#536761 !important; font-size:14px !important; margin-bottom:24px !important; }
.privacy-content .page-section h2 { font-size:clamp(20px,1.8vw,25px); }
@media (max-width:800px) {
  .subpage-container { width:min(100% - 42px,850px); }
  .subpage-intro { padding:64px 0 57px; }
  .subpage-content { padding-block:15px 72px; }
  .page-section { padding:36px 0 42px; }
  .page-section-last { padding-bottom:0; }
}
@media (max-width:500px) {
  .subpage-container { width:calc(100% - 36px); }
  .subpage-intro { padding:48px 0; }
  .subpage-intro h1 { font-size:34px; }
  .subpage-intro p { font-size:15.5px; }
  .subpage-intro .subpage-lead { font-size:16.5px; }
  .subpage-content { padding-bottom:60px; }
  .page-section { padding:33px 0 36px; }
  .page-section h2 { font-size:22px; }
  .page-section p, .page-section li { font-size:15.5px; }
  .faq-item h3 { font-size:16.5px; }
}

/* Trial 18 — More noticeable, still restrained motion (homepage only).
   JavaScript enables reveal transitions; without JS all content stays visible. */
html.motion-enabled .home-page .motion-reveal {
  opacity:0;
  transform:translate3d(0,32px,0);
  transition:opacity .78s ease-out, transform .78s var(--ease);
}
html.motion-enabled .home-page .motion-reveal.is-visible {
  opacity:1;
  transform:translate3d(0,0,0);
}
/* Trial 18 — light green interaction feedback on actual links/buttons only.
   Do not style the not-yet-active platform tiles as clickable. */
.button:not(:disabled) {
  transition:background-color .23s ease, border-color .23s ease, color .23s ease,
             box-shadow .23s ease, transform .23s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .main-nav > a:not(.button), .footer-nav a, .text-link {
    transition:color .24s ease, background-color .24s ease, box-shadow .24s ease;
  }
  .main-nav > a:not(.button):hover,
  .footer-nav a:hover,
  .text-link:hover {
    background-color:var(--mint-soft);
    box-shadow:0 0 0 5px var(--mint-soft);
    color:var(--blue);
  }
  .button:not(:disabled):hover {
    background-color:var(--mint);
    border-color:var(--mint);
    color:#fff;
    font-weight:700;
    box-shadow:0 6px 16px rgba(34,87,122,.10);
    transform:translateY(-3px);
  }
  .button:not(:disabled):active { transform:translateY(0) scale(.975); }
  .art-figure img { transition:transform .65s var(--ease); }
  .art-figure:hover img { transform:translateY(-9px) scale(1.012); }
  .feature-item .content-icon { transition:transform .32s var(--ease), color .32s ease; }
  .feature-item:hover .content-icon { transform:translateY(-6px); color:var(--mint); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  html.motion-enabled .home-page .motion-reveal {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .timezone-parallax-media { transform:none !important; }
  .button, .button svg, .art-figure img, .content-icon,
  .main-nav > a, .footer-nav a, .text-link { transition:none !important; }
  .art-figure:hover img, .feature-item:hover .content-icon,
  .button:not(:disabled):hover { transform:none !important; }
}


/* Trial 19 — Match the feature icon hover on the three reassurance
   statements and five (still non-interactive) platform tiles.
   Platform SVGs are inline on the homepage so CSS currentColor can
   provide the exact mint colour, without introducing filters or images. */
.platform .platform-icon {
  display:block;
  width:31px;
  height:31px;
  flex:none;
  color:var(--blue);
}
@media (hover:hover) and (pointer:fine) {
  .simple-item .statement-icon,
  .get-section .platform .platform-icon {
    transition:transform .32s var(--ease), color .32s ease;
  }
  .simple-item:hover .statement-icon,
  .get-section .platform:hover .platform-icon {
    transform:translateY(-6px);
    color:var(--mint);
  }
}
@media (prefers-reduced-motion:reduce) {
  .simple-item .statement-icon,
  .get-section .platform .platform-icon { transition:none !important; }
  .simple-item:hover .statement-icon,
  .get-section .platform:hover .platform-icon { transform:none !important; }
}

/* Trial 20 — feedback form confirmation and error states */
.form-status { margin-top: 18px; font-size: 14px; line-height: 1.65; }
.form-status[hidden] { display: none; }
.form-success { color: #1d6a50; }
.form-error { color: #a23b36; }


/* Trial 26 — Match the platform tiles above and below the homepage.
   Both sections reuse the same .platform-list and .platform rules.
   All platform tiles remain informational and non-clickable until store links exist. */
.hero-platforms {
  background: #fff;
  border-top: 1px solid #e6eeeb;
  border-bottom: 1px solid #e6eeeb;
}
.hero-platforms-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-block: 35px 33px;
}
.hero-platforms .platform-list {
  width: 100%;
  margin: 0 auto;
}
.hero-platforms-availability,
.hero-platforms-purchase {
  margin: 0;
  line-height: 1.5;
  text-align: center;
  color: var(--body-ink);
}
.hero-platforms-availability { font-size: 13px; }
.hero-platforms-purchase { font-size: 13px; font-weight: 700; color: var(--blue); }
@media (max-width: 500px) {
  .hero-platforms-inner { padding-block: 26px 27px; gap: 11px; }
}