:root{color-scheme:light;--ink:#28453f;--jade:#37766d;--gold:#ac813c;--cream:#fbf8f3;--muted:#65736c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#faf6f0,#fffaf6 50%,#f5efe5);color:var(--ink);font:16px/1.6 "DM Sans",system-ui,sans-serif;min-width:320px}h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.18}h1{font-size:clamp(2.8rem,6.6vw,6.3rem);letter-spacing:-.045em;margin:14px 0}h2{font-size:clamp(2rem,3.7vw,3.5rem);margin:10px 0 18px}h3{font-size:1.5rem;margin:10px 0}p{margin:0 0 18px}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #cc9b43;outline-offset:3px}button{font:inherit;cursor:pointer}.wrap{width:min(1360px,calc(100% - 36px));margin:auto}.eyebrow{font-size:.73rem;letter-spacing:.25em;text-transform:uppercase;font-weight:700;color:#866742}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;min-height:50px;border-radius:999px;background:linear-gradient(110deg,#3e8276,#30685f);color:#fff;font-weight:700;box-shadow:0 12px 27px rgba(45,105,95,.18);border:1px solid transparent;transition:transform .2s}.button:hover{transform:translateY(-2px)}.button.alt{background:#fffaf5;color:#346c63;border-color:#d9d0c0;box-shadow:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:114px}.logo{width:clamp(158px,17vw,246px);height:auto;mix-blend-mode:multiply}.nav{display:flex;align-items:center;gap:26px;font-size:.9rem;font-weight:600}.nav a:hover{color:#9a722f}.nav .button{color:#fff}.menu{display:none;background:#fffaf4;border:1px solid #e5ddd0;border-radius:12px;padding:9px 13px;color:#3b6159}.hero{position:relative;isolation:isolate;text-align:center;overflow:hidden;min-height:680px;padding:72px 16px 38px;border-radius:32px;background:linear-gradient(180deg,#fff8f0,#f8d7bd 60%,#b8ccc5);box-shadow:0 22px 70px rgba(95,71,51,.1)}.hero-art,.hero-art *{position:absolute;pointer-events:none}.hero-art{inset:0;z-index:-1;background:radial-gradient(ellipse at 78% 52%,rgba(255,250,205,.95),transparent 30%),linear-gradient(180deg,#fffbf7,#f8e4d4 42%,#edb89b 70%,#c0cbc8 100%)}.sun{width:80px;height:80px;border-radius:50%;left:76%;top:53%;background:#fff9db;box-shadow:0 0 65px 35px rgba(255,231,162,.58)}.ridge{left:0;right:0;bottom:20%;height:22%;background:linear-gradient(#aea3a4,#8e96a0);clip-path:polygon(0 88%,8% 48%,18% 70%,27% 26%,41% 68%,55% 40%,70% 81%,80% 17%,90% 69%,100% 36%,100% 100%,0 100%);opacity:.42}.sea{left:0;right:0;bottom:0;height:29%;background:repeating-linear-gradient(171deg,rgba(255,255,236,.2) 0 2px,transparent 2px 15px),linear-gradient(180deg,#a2b9b8,#e3d8c9);opacity:.8}.hero .eyebrow{color:#445e54}.hero-tag{font-size:clamp(1rem,1.65vw,1.35rem);letter-spacing:.25em;margin:0 auto 8px}.hero-sub{font-size:clamp(1.03rem,1.5vw,1.25rem);max-width:490px;margin:0 auto 25px}.orb{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0 auto 20px;width:clamp(220px,27vw,296px);aspect-ratio:1;border-radius:50%;border:6px solid rgba(255,255,255,.92);box-shadow:0 0 0 11px rgba(255,250,234,.35),0 20px 40px rgba(42,96,85,.2);background:radial-gradient(circle at 36% 25%,#aecabd,#4b8b7f 62%,#2e706b);color:#fff;letter-spacing:.25em;font-size:1.2rem;font-weight:700;transition:transform .2s}.orb:hover{transform:scale(1.03)}.lotus{font-size:3rem;font-weight:400;letter-spacing:0;line-height:1.2;margin-bottom:10px}.hero-caption{max-width:440px;margin:10px auto 0;padding:8px 16px;color:#375850;font-weight:600;background:rgba(255,251,244,.6);border-radius:99px}.intentions{padding:30px 22px;margin:16px 0 0;border:1px solid #efe7dc;border-radius:25px;background:#fffdfa;text-align:center;box-shadow:0 12px 40px rgba(66,58,45,.04)}.intention-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:20px}.intent{padding:18px 14px;border-radius:18px;background:#edf5ed;color:#3d675f}.intent:nth-child(2){background:#fbf2e3;color:#aa7924}.intent:nth-child(3){background:#fbebec;color:#995667}.intent:nth-child(4){background:#f0ebf9;color:#6d5792}.intent span{display:block;font-size:2.2rem}.intent strong{display:block;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}.intro{padding:110px 0 86px;text-align:center}.intro p{color:#6a7770;max-width:760px;margin:0 auto;font-size:1.1rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.step{border:1px solid #e9e4da;border-radius:24px;background:#fffdfa;padding:34px 25px;box-shadow:0 12px 40px rgba(88,75,54,.035);text-align:left}.step-number{font-size:.8rem;color:#ad8344;letter-spacing:.17em}.step p{font-size:.96rem;text-align:left;margin:9px 0 0}.shared{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:55px clamp(24px,5vw,70px);border-radius:28px;background:linear-gradient(135deg,#e8f0e8,#fbf6ea);border:1px solid #e1e8df}.shared p{color:#617269}.schedule{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.schedule div{border-radius:15px;padding:14px 10px;text-align:center;background:#fffaf4;border:1px solid #e9e1d6;font-weight:700;color:#3b695e}.schedule small{display:block;letter-spacing:.15em;font-size:.7rem;font-weight:500;color:#9c7d53}.features{padding:100px 0;text-align:center}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.feature{padding:30px 24px;background:#fffdfa;border-radius:22px;border:1px solid #ece5db;text-align:left}.feature-symbol{font-size:2rem;color:#bd8b40}.feature p{color:#6b7972;margin:0}.join{background:linear-gradient(140deg,#f8e9d5,#f3f7eb);border-radius:26px;padding:72px 24px;text-align:center}.join p{max-width:550px;margin:0 auto 22px;color:#61716a}.footer{display:flex;justify-content:space-between;gap:20px;align-items:center;color:#78817b;padding:34px 0;font-size:.8rem}.footer a:hover{color:#376e63}
@media(max-width:850px){.topbar{min-height:90px;flex-wrap:wrap}.nav{gap:14px}.hero{padding-top:58px;min-height:620px}.shared{grid-template-columns:1fr}.steps,.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.wrap{width:calc(100% - 20px)}.topbar{gap:8px;min-height:75px;padding:5px 3px}.logo{width:135px}.menu{display:block}.nav{display:none;position:absolute;z-index:12;top:74px;left:10px;right:10px;flex-direction:column;align-items:stretch;gap:0;background:#fffaf5;border:1px solid #eee2d2;border-radius:18px;padding:13px;box-shadow:0 20px 45px rgba(72,61,48,.15)}.nav.open{display:flex}.nav a{padding:12px}.nav .button{margin-top:9px}.hero{padding:48px 12px 30px;min-height:0;border-radius:24px}.hero h1{font-size:clamp(2.8rem,10vw,4rem)}.hero-tag{letter-spacing:.13em;font-size:.94rem}.hero-sub{font-size:.95rem}.orb{width:min(63vw,270px);min-width:210px}.hero-caption{font-size:.75rem}.intentions{padding:23px 12px}.intention-row{grid-template-columns:repeat(2,1fr);gap:10px}.intro{padding:66px 10px}.steps,.feature-grid{grid-template-columns:1fr}.shared{padding:38px 18px}.schedule{grid-template-columns:repeat(2,1fr)}.features{padding:65px 0}.join{padding:52px 18px}.footer{flex-direction:column;text-align:center;gap:8px}.sun{left:75%;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orb{transition:none}}


/* Coastal photography for the matching official website landing page.
   Photo: Irvin Aloise, via Unsplash, https://unsplash.com/photos/golden-sunset-over-a-calm-ocean-and-coastline-Z_L9vbyHN2k */
.hero-art{
  background-color:#f9e8d7;
  background-image:
    linear-gradient(180deg,rgba(255,253,249,.93) 0%,rgba(255,249,242,.83) 25%,rgba(255,245,236,.52) 46%,rgba(255,241,224,.08) 67%,rgba(249,243,233,.24) 100%),
    url("https://images.unsplash.com/photo-1754671448143-8bd0bfb10bce?auto=format&fit=crop&w=2000&q=82");
  background-size:cover;
  background-position:center, center 62%;
  background-repeat:no-repeat;
}
.hero-art .sun,.hero-art .ridge,.hero-art .sea {display:none;}
@media(max-width:650px){
 .hero-art {
  background-image:linear-gradient(180deg,rgba(255,253,249,.94),rgba(255,249,240,.75) 31%,rgba(255,244,233,.35) 56%,rgba(250,240,224,.12) 78%),url("https://images.unsplash.com/photo-1754671448143-8bd0bfb10bce?auto=format&fit=crop&w=2000&q=82");
  background-position:center,58% center;
 }
}

/* Website only: invite visitors to discover the Protocol before entering the app. */
.hero {min-height:630px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(66px,8vw,110px);padding-bottom:55px;}
.hero-discovery {margin:64px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;}
.hero-discovery-symbol {display:block;color:#486f65;text-shadow:0 4px 12px rgba(255,255,255,.9);font:normal 3rem/1 Georgia,serif;}
.hero-discovery-link {display:inline-flex;gap:12px;align-items:center;justify-content:center;border-radius:999px;padding:12px 23px;border:1px solid rgba(255,253,247,.8);background:rgba(255,253,247,.83);color:#365c54;font-size:.9rem;font-weight:700;box-shadow:0 8px 25px rgba(69,70,56,.07);backdrop-filter:blur(6px);transition:background .2s;}
.hero-discovery-link:hover {background:#fffdfa;}
.hero .hero-sub {margin-bottom:0;}
@media(max-width:650px) {
 .hero {min-height:530px;padding-top:65px;padding-bottom:38px;}
 .hero-discovery {margin-top:62px;}
}


/* Accessible, responsive sixty-second breathing clock. No backdrop-filter or
   CSS masking is needed, so the illustration stays visible in Safari/iOS. */
.hero > :not(.hero-art){position:relative;z-index:1}
.hero-art{z-index:0}
.hero{height:auto;min-height:0;padding-top:clamp(38px,5vw,70px);padding-bottom:42px}
.hero-clock-section{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:16px auto 0}
.hero-clock{
  position:relative;display:block;flex:none;
  width:clamp(244px,26vw,312px);height:clamp(244px,26vw,312px);
  overflow:visible;border-radius:50%;
  background:radial-gradient(circle at 40% 28%,rgba(255,255,255,.93),rgba(255,249,238,.84) 63%,rgba(232,214,183,.86));
  box-shadow:0 15px 35px rgba(58,64,55,.13),inset 0 0 24px rgba(255,255,255,.7);
}
.breathing-clock-face{display:block;width:100%;height:100%;overflow:visible}
.clock-wash{fill:none;stroke:rgba(154,124,77,.29);stroke-width:1.6}
.clock-inner-outline{fill:none;stroke:rgba(255,255,255,.76);stroke-width:1.3}
.clock-fallback-ticks{fill:none;stroke:rgba(119,105,78,.48);stroke-width:2;stroke-dasharray:2 12.87;transform:rotate(-90deg);transform-origin:160px 160px}
.clock-tick{stroke:#7a735f;stroke-width:2;stroke-linecap:round;opacity:.44}
.clock-tick.clock-tick-major{stroke:#735c42;stroke-width:2.7;opacity:.85}
.clock-tick.clock-tick-elapsed{stroke:#bb8745;stroke-width:3;opacity:1}
.clock-hand{stroke:#252b27;stroke-width:1.65;stroke-linecap:round;opacity:.65}
.clock-pivot{fill:#514d3e}
.clock-middle{
  position:absolute;inset:30%;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,250,241,.90);
  box-shadow:0 0 22px 12px rgba(255,250,241,.46);text-align:center;
}
.clock-breath{display:block;white-space:nowrap;font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(1.11rem,1.8vw,1.42rem);letter-spacing:0;color:#36554d}
.clock-note{font-size:.82rem;font-weight:600;color:#3b5d53;letter-spacing:.045em;margin:8px auto 0;background:rgba(255,251,244,.73);padding:3px 14px;border-radius:100px}
.hero-discovery{margin:16px auto 0}
.hero-discovery-symbol{font-size:2rem}
.hero-caption{margin-top:13px}
@media(max-width:850px){
  .hero{padding-top:42px;padding-bottom:36px}
  .hero-clock{width:clamp(238px,33vw,300px);height:clamp(238px,33vw,300px)}
}
@media(max-width:650px){
  .hero{padding:34px 12px 28px;min-height:0;overflow:hidden}
  .hero h1{font-size:clamp(2.25rem,9.3vw,3.65rem);line-height:1.14;overflow-wrap:normal}
  .hero .eyebrow{letter-spacing:.12em;font-size:.66rem}
  .hero-tag{letter-spacing:.1em;font-size:.93rem}
  .hero-sub{max-width:25rem}
  .hero-clock-section{margin-top:12px}
  .hero-clock{width:min(72vw,278px);height:min(72vw,278px);min-width:0;min-height:0}
  .clock-breath{font-size:clamp(1.06rem,5vw,1.29rem)}
  .clock-note{font-size:.73rem;letter-spacing:0}
  .hero-discovery{margin-top:11px}
  .hero-discovery-link{font-size:.84rem;padding:10px 17px}
  .hero-caption{margin-top:11px;max-width:95%;font-size:.74rem}
}
@media(max-width:360px){
  .hero{padding-left:8px;padding-right:8px}
  .hero h1{font-size:2.25rem}
  .hero-clock{width:224px;height:224px;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero-clock,.clock-hand{transition:none;animation:none}
}


/* First-screen layout: keep the MMP logo/navigation and breathing clock
   in view in portrait and landscape, including short iPhone Safari viewports.
   Content is still readable in document flow when the viewport is unusually
   short or the visitor enlarges their text. */
.hero-copy,.hero-actions{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
.hero-copy h1{max-width:100%}
.hero-actions .hero-discovery{margin-top:16px}
.hero-actions .hero-caption{margin-top:13px}

/* An iPhone portrait needs to show the entire clock, not merely its upper edge.
   The small viewport unit accounts for Safari's visible browser controls. */
@media (orientation:portrait) and (max-width:650px) {
  .topbar{min-height:clamp(56px,8svh,75px)}
  .hero{padding-top:clamp(18px,3svh,34px);padding-bottom:22px}
  .hero h1{font-size:clamp(2rem,8vw,3.25rem);margin:7px 0 8px}
  .hero-tag{margin-bottom:5px}
  .hero-sub{line-height:1.4}
  .hero-clock-section{margin-top:12px}
  .hero-clock{width:min(72vw,35svh,278px);height:auto;aspect-ratio:1}
  .hero-actions .hero-discovery{margin-top:11px}
  .hero-actions .hero-caption{margin-top:8px}
}

/* Landscape: a balanced three-part hero keeps the breathing clock physically
   centered, while the message and discover link sit to its left and right. */
@media (orientation:landscape) and (max-height:920px) and (min-width:560px) {
  .topbar{position:relative;z-index:20;min-height:clamp(56px,9svh,82px);flex-wrap:nowrap}
  .logo{width:clamp(124px,14vw,190px)}
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(170px, min(31vw,310px)) minmax(0,1fr);
    column-gap:clamp(9px,1.5vw,30px);
    justify-items:center;align-items:center;align-content:center;
    min-height:calc(100svh - clamp(65px,10svh,92px));
    min-height:calc(100dvh - clamp(65px,10dvh,92px));
    padding:clamp(12px,2.2vh,30px);
    text-align:center;
  }
  .hero-copy{grid-column:1;grid-row:1;align-items:center;justify-content:center}
  .hero-clock-section{grid-column:2;grid-row:1;margin:0;align-self:center;justify-self:center}
  .hero-actions{grid-column:3;grid-row:1;align-items:center;justify-content:center}
  .hero h1{font-size:clamp(1.25rem,3.25vw,3rem);line-height:1.13;margin:10px 0}
  .hero .eyebrow{font-size:clamp(.56rem,.8vw,.73rem);letter-spacing:.11em}
  .hero-tag{font-size:clamp(.79rem,1.18vw,1rem);letter-spacing:.07em;line-height:1.3}
  .hero-sub{font-size:clamp(.78rem,1.05vw,1rem);line-height:1.45;margin:8px 0 0}
  .hero-clock{width:min(100%,29vw,calc(100svh - 160px),300px);width:min(100%,29vw,calc(100dvh - 160px),300px);height:auto;aspect-ratio:1}
  .clock-breath{font-size:clamp(.95rem,1.55vw,1.32rem)}
  .clock-note{font-size:clamp(.68rem,.85vw,.8rem);margin-top:5px;line-height:1.3}
  .hero-actions .hero-discovery{margin:0}
  .hero-discovery-symbol{font-size:1.8rem}
  .hero-discovery-link{font-size:clamp(.75rem,1vw,.9rem);padding:10px 15px}
  .hero-actions .hero-caption{max-width:240px;font-size:.75rem;margin-top:12px}
}
/* Short landscapes, especially iPhones, use the normal Menu dropdown rather
   than four links crowded together beside the logo. */
@media (orientation:landscape) and (max-height:520px) and (min-width:560px) {
  .topbar{min-height:54px;padding:3px 6px}
  .logo{width:125px}
  .menu{display:block}
  .nav{
    display:none;position:absolute;z-index:40;
    top:calc(100% - 1px);left:auto;right:0;width:min(290px,calc(100vw - 24px));
    flex-direction:column;align-items:stretch;gap:0;
    background:#fffaf5;border:1px solid #eee2d2;border-radius:16px;
    padding:9px;box-shadow:0 15px 40px rgba(72,61,48,.16);
  }
  .nav.open{display:flex}
  .nav a{padding:10px 13px}
  .hero{min-height:calc(100svh - 62px);min-height:calc(100dvh - 62px);padding:10px 14px;border-radius:22px}
  .hero h1{font-size:clamp(1.1rem,2.7vw,1.8rem);margin:6px 0}
  .hero .eyebrow,.hero .hero-sub,.hero-discovery-symbol,.hero-actions .hero-caption{display:none}
  .hero-tag{font-size:.78rem;line-height:1.35;margin:0}
  .hero-clock{width:min(100%,28vw,calc(100svh - 130px),245px);width:min(100%,28vw,calc(100dvh - 130px),245px)}
  .clock-note{font-size:.66rem;white-space:nowrap;padding:2px 8px;margin-top:6px}
  .hero-discovery-link{font-size:.76rem;padding:9px 10px;line-height:1.35;max-width:100%}
}
/* Extra-small portrait phones hide only the optional copy after the clock. */
@media (orientation:portrait) and (max-width:650px) and (max-height:640px) {
  .hero .hero-sub,.hero-actions .hero-caption{display:none}
  .hero{padding-top:13px}
  .hero-clock{width:min(68vw,34svh,235px)}
  .hero-actions .hero-discovery{margin-top:8px}
}

/* MIRACLE MINUTE — evergreen world backdrop.
   The map is softly visible at all times. On the 12/3/6/9 PT global minute,
   eligible land gently changes to gold and the clock gains a subtle halo. */
.hero .hero-clock-section {
  position:relative;
  isolation:isolate;
  z-index:2;
  overflow:visible;
}
.hero .hero-copy,.hero .hero-actions {position:relative;z-index:3}
.hero-clock-section>.hero-clock,.hero-clock-section>.clock-note {position:relative;z-index:2}

/* Give the static earth enough presence without competing with the heading. */
.hero-clock-section>.world-backdrop {
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:50%;
  top:42%;
  width:clamp(600px,84vw,1080px);
  height:auto;
  aspect-ratio:960/440;
  transform:translate(-50%,-50%);
  opacity:.74;
  visibility:visible;
  filter:drop-shadow(0 7px 15px rgba(63,95,80,.11));
  transition:opacity 1.2s ease,filter 1.2s ease;
}
.hero.world-mode .hero-clock-section>.world-backdrop {
  opacity:.94;
  filter:drop-shadow(0 10px 22px rgba(136,105,52,.16));
}
.world-backdrop-map{display:block;width:100%;height:100%;overflow:visible}
.world-backdrop-country {
  fill:rgba(85,132,115,.54);
  stroke:rgba(255,251,236,.83);
  stroke-width:1.15;
  stroke-linejoin:round;
  transition:fill .8s ease,stroke .8s ease;
}
.world-backdrop-country.all-active {
  fill:rgba(188,135,55,.83);
  stroke:rgba(255,245,222,.9);
}
.world-backdrop-country.part-active {fill:rgba(175,156,92,.73)}

/* Semi-transparent champagne glass face all day: countries remain visible
   through the clock, while a soft inset shadow holds the circular shape. */
.hero .hero-clock {
  background:radial-gradient(circle at 33% 23%,
    rgba(255,253,246,.64) 0%,
    rgba(255,250,239,.44) 46%,
    rgba(249,233,209,.28) 78%,
    rgba(236,213,180,.38) 100%);
  border:1px solid rgba(255,253,244,.64);
  box-shadow:0 13px 36px rgba(64,89,74,.14),
    inset 0 1px 23px rgba(255,254,247,.44);
}
.hero .clock-middle {
  background:rgba(255,250,242,.76);
  box-shadow:0 0 18px 9px rgba(255,251,241,.31);
}
.hero .clock-breath {
  color:#284d42;
  text-shadow:0 1px 3px rgba(255,255,248,.9);
}
.hero .clock-hand {stroke:#213c34;opacity:.84}
.hero .clock-wash{stroke:rgba(150,119,78,.56)}
.hero-clock.global-minute-live {
  background:radial-gradient(circle at 33% 22%,
    rgba(255,251,238,.66) 0%,
    rgba(255,247,224,.38) 46%,
    rgba(244,227,191,.25) 78%,
    rgba(233,205,151,.38) 100%);
  outline:2px solid rgba(174,125,53,.77);
  outline-offset:4px;
  box-shadow:0 0 0 8px rgba(250,223,168,.20),
    0 0 0 17px rgba(195,158,87,.09),
    0 19px 44px rgba(90,92,64,.18),
    inset 0 2px 17px rgba(255,255,243,.32);
}
.hero-clock.global-minute-live .clock-wash{stroke:#aa793d;stroke-width:2.5}
.hero-clock.global-minute-live .clock-middle{background:rgba(255,248,230,.69)}
.hero-clock.global-minute-live .clock-breath{color:#24473b}
.hero-clock.global-minute-live .clock-hand{stroke:#1c372d;opacity:.95}
.clock-note.global-minute-live-note{
  color:#75501e;
  background:rgba(255,250,237,.86);
  box-shadow:0 4px 14px rgba(93,73,48,.09);
}

/* A restrained glass layer on landscape text blocks keeps the words legible
   while allowing the world to remain visible through the sides. */
@media (orientation:landscape) and (min-width:560px) {
  .hero .hero-copy,.hero .hero-actions {
    padding:12px clamp(12px,1.4vw,20px);
    border-radius:23px;
    border:1px solid rgba(255,253,245,.43);
    background:linear-gradient(135deg,rgba(255,252,244,.49),rgba(254,246,230,.24));
    box-shadow:0 10px 30px rgba(66,72,61,.07);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }
}
@media (max-width:650px) {
  .hero-clock-section>.world-backdrop {width:clamp(520px,152vw,700px);top:44%;opacity:.65}
  .hero.world-mode .hero-clock-section>.world-backdrop{opacity:.84}
  .hero .hero-clock {box-shadow:0 12px 31px rgba(64,89,74,.15),inset 0 1px 17px rgba(255,253,241,.4)}
}
@media (orientation:landscape) and (max-height:920px) and (min-width:560px) {
  .hero-clock-section>.world-backdrop {width:clamp(610px,79vw,1050px);top:45%}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px) {
  .hero-clock-section>.world-backdrop {width:clamp(520px,80vw,750px)}
  .hero .hero-copy,.hero .hero-actions {padding:6px 9px;border-radius:15px}
}
@media (prefers-reduced-motion:reduce) {
  .hero-clock-section>.world-backdrop,.world-backdrop-country {transition:none}
}


/* Desktop composition only (iPad Pro landscape tops out at 1366 CSS pixels):
   the iPad's glass panels look oversized when stretched across a widescreen.
   Replace them with narrow feathered light behind the text, without changing
   phone or tablet layout, clock size/behavior, or the always-visible map. */
@media (min-width:1380px) and (orientation:landscape) {
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(286px,322px) minmax(0,1fr);
    gap:clamp(16px,2vw,30px);
    align-items:center;
    align-content:center;
    justify-items:center;
    min-height:clamp(610px,calc(100svh - 122px),820px);
    min-height:clamp(610px,calc(100dvh - 122px),820px);
    padding:40px clamp(34px,4.2vw,70px);
  }
  .hero .hero-copy{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:398px;
  }
  .hero .hero-clock-section{
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:center;
    margin:0;
  }
  .hero .hero-actions{
    grid-column:3;
    grid-row:1;
    width:100%;
    max-width:320px;
    justify-content:center;
  }
  .hero .hero-copy,.hero .hero-actions{
    padding:24px 14px;
    border:0;
    border-radius:48%;
    background:radial-gradient(ellipse 72% 75% at center,
      rgba(255,252,241,.77) 0%,
      rgba(255,250,238,.48) 44%,
      rgba(255,250,238,.18) 67%,
      rgba(255,250,238,0) 94%);
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .hero h1{
    font-size:clamp(2.05rem,2.55vw,2.67rem);
    line-height:1.14;
    letter-spacing:-.042em;
    margin:10px 0 13px;
  }
  .hero .hero-sub{
    max-width:330px;
    margin:10px auto 0;
    line-height:1.5;
    font-size:clamp(.9rem,1.05vw,1.03rem);
    text-shadow:0 1px 5px rgba(255,250,238,.85);
  }
  .hero .hero-tag{
    letter-spacing:.11em;
    font-size:clamp(.83rem,.9vw,1rem);
  }
  .hero .hero-clock{
    width:min(100%,322px,calc(100dvh - 185px));
    height:auto;
    aspect-ratio:1;
  }
  .hero .clock-breath{font-size:1.3rem}
  .hero .hero-discovery-link{
    padding:12px 20px;
    box-shadow:0 9px 25px rgba(75,80,68,.11);
  }
  .hero .hero-actions .hero-caption{
    margin-top:14px;
    max-width:255px;
    font-size:.78rem;
  }
  .hero-clock-section>.world-backdrop{
    width:min(92vw,1020px);
    top:45%;
  }
  .hero .hero-copy .eyebrow,.hero .hero-copy .hero-tag{
    text-shadow:0 1px 6px rgba(255,251,239,.9);
  }
}