/*
Theme Name: Month Navigator
Version: 0.2.1
Requires at least: 6.8
Requires PHP: 8.3
*/

:root {
  --paper: #ffffff;
  --ink: #1d1d1f;
  --muted: #4b4b52;
  --soft: #f5f5f7;
  --accent: #005eb8;
  --content: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  overflow: hidden;
}

.site-header,
.hero,
.product-view,
.proof,
.closing,
.site-footer {
  padding-left: max(24px, calc((100vw - var(--content)) / 2));
  padding-right: max(24px, calc((100vw - var(--content)) / 2));
}

.site-header {
  padding-top: 24px;
  padding-bottom: 24px;
}

.product-line,
.eyebrow,
.requirement,
.cost-position,
figcaption,
.site-footer p {
  margin: 0;
}

.product-line {
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  min-height: 680px;
  padding-top: 72px;
  padding-bottom: 96px;
}

.eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 720;
  letter-spacing: 0.02em;
}

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--ink);
  letter-spacing: -0.035em;
}

h1 {
  max-width: 720px;
  margin-bottom: 24px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.02;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}

h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.2;
}

.hero-copy > p:not(.eyebrow),
.section-intro,
.closing p,
.proof-card p {
  color: var(--muted);
}

.hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 0 34px;
  font-size: 21px;
}

.download-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 52px;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  transition: transform 160ms ease;
}

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

.download-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.cost-position,
.requirement {
  width: 100%;
  color: var(--ink);
}

.cost-position {
  max-width: 620px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.requirement {
  color: var(--muted);
  font-size: 15px;
}

.hero-image {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 42px 26px;
  border-radius: 32px;
  background: var(--soft);
}

.hero-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 38px rgb(29 29 31 / 16%));
}

.product-view {
  padding-top: 110px;
  padding-bottom: 120px;
}

.section-intro {
  max-width: 650px;
  margin: 0 0 48px;
}

.shot-grid {
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 24px;
  align-items: stretch;
}

figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
  margin: 0;
  padding: 36px;
  border-radius: 28px;
  background: var(--soft);
}

figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: auto;
}

figcaption {
  padding-top: 24px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.proof {
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--soft);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.proof-card {
  min-height: 250px;
  padding: 32px;
  border-radius: 22px;
  background: var(--paper);
}

.proof-card p {
  margin: 0;
  font-size: 17px;
}

.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 110px;
}

.closing-copy {
  max-width: 700px;
}

.closing p {
  margin: 0;
}

.site-footer {
  padding-top: 28px;
  padding-bottom: 34px;
  background: var(--soft);
}

.site-footer p {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 48px;
  }

  .hero-image {
    min-height: 0;
  }

  .shot-grid,
  .proof-grid,
  .closing {
    grid-template-columns: 1fr;
  }

  .closing .download-button {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 17px;
  }

  .site-header,
  .hero,
  .product-view,
  .proof,
  .closing,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    gap: 44px;
    padding-bottom: 72px;
  }

  h1 {
    font-size: 44px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 19px;
  }

  .hero-image,
  figure {
    padding: 24px 16px;
    border-radius: 22px;
  }

  figure {
    min-height: 280px;
  }

  .product-view,
  .proof,
  .closing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .download-button {
    transition: none;
  }
}

.verify {
  margin: 20px 0 0;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ---- Where it lives: the upper right corner of a Mac screen ----
   Pure CSS. No script, no video, no extra requests, which is what keeps the
   "makes no network calls" claim on this page true of the page as well as the app.
   One 10s cycle: click the menu bar date, Notification Center opens, the forward
   arrow is clicked twice. The three month grids are the real 42-cell grids the
   widget draws, not an approximation. */

.demo {
  padding-top: 8px;
  padding-bottom: 64px;
}

.mac-corner {
  margin: 28px 0 0;
}

.corner {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 8 / 5;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 6%, #4a6fa5 0%, #2d4a72 46%, #1b2f4d 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 18px 44px rgba(0, 0, 0, 0.20);
  isolation: isolate;
}

/* menu bar */
.menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 7.2%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.7%;
  padding-right: 2.2%;
  background: rgba(22, 26, 34, 0.42);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.mb-icon {
  width: 15px;
  height: 11px;
  background: rgba(255, 255, 255, 0.88);
  flex: none;
}

.mb-battery { clip-path: polygon(0 18%,84% 18%,84% 8%,92% 8%,92% 92%,84% 92%,84% 82%,0 82%); }
.mb-wifi    { clip-path: polygon(50% 100%,0 34%,14% 20%,50% 58%,86% 20%,100% 34%); }
.mb-cc      { clip-path: polygon(0 14%,100% 14%,100% 30%,0 30%,0 62%,100% 62%,100% 78%,0 78%); }

.mb-clock {
  color: #fff;
  font-size: clamp(10px, 1.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  animation: mb-active 10s linear infinite;
}

/* Notification Center */
.ncpanel {
  position: absolute;
  top: 7.2%;
  right: 0;
  width: 47%;
  height: 92.8%;
  padding: 3.4% 3.2%;
  background: rgba(30, 34, 44, 0.60);
  backdrop-filter: saturate(150%) blur(22px);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  transform: translateX(102%);
  animation: nc-slide 10s ease-in-out infinite;
}

/* the widget */
.mn-widget {
  border-radius: 13px;
  padding: 7px 6px 5px;
  background: rgba(120, 130, 148, 0.42);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mn-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 5px;
}

.mn-chev {
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
}

.mn-prev { transform: rotate(135deg); }
.mn-next { transform: rotate(-45deg); animation: chev-press 10s linear infinite; }

.mn-title {
  position: relative;
  flex: 1;
  height: 1em;
  font-size: clamp(10px, 1.9vw, 13px);
  font-weight: 600;
  text-align: center;
}

.mn-title b {
  position: absolute;
  inset: 0;
  font-weight: 600;
  opacity: 0;
}

.mn-dow,
.mn-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mn-dow {
  padding-bottom: 4px;
}

.mn-dow i {
  font-size: clamp(6px, 1.25vw, 9px);
  font-weight: 500;
  font-style: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.mn-grid {
  position: relative;
  height: 5.9em;
  font-size: clamp(7px, 1.4vw, 10px);
}

.mn-days {
  position: absolute;
  inset: 0;
  grid-template-rows: repeat(6, 1fr);
  opacity: 0;
}

.mn-days i {
  display: grid;
  place-items: center;
  font-style: normal;
  color: #fff;
}

.mn-days i.out { color: rgba(255, 255, 255, 0.34); }

/* Fixed size, matching the widget: the marker is sized to the digits it sits
   behind, never to the cell, because the cell is flexible and medium is more
   than twice the width of small. */
.mn-days i.today {
  color: #fff;
  position: relative;
}

.mn-days i.today::before {
  content: "";
  position: absolute;
  width: 1.65em;
  height: 1.65em;
  border-radius: 50%;
  background: #ff3b30;
  z-index: -1;
}

.mn-mark {
  padding-top: 4px;
  text-align: center;
  font-size: clamp(7px, 1.45vw, 10px);
  font-weight: 600;
}

/* cursor and clicks */
.pointer {
  position: absolute;
  left: 18%;
  top: 82%;
  width: 13px;
  height: 19px;
  margin: -1px 0 0 -1px;
  background: #fff;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
  clip-path: polygon(0 0, 0 74%, 21% 58%, 38% 96%, 55% 88%, 39% 52%, 68% 50%);
  animation: pointer-path 10s ease-in-out infinite;
}

.ring {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

.ring-clock {
  left: 86%;
  top: 7%;
  animation: ring-once 10s linear infinite;
}

.ring-chev {
  left: 95%;
  top: 16%;
  animation: ring-twice 10s linear infinite;
}

/* ---- timing. One 10s cycle.
   0.3s  cursor leaves rest      1.5s  clicks the menu bar date
   1.7s  Notification Center in  3.2s  cursor reaches the forward arrow
   3.6s  click, August to September
   4.8s  click, September to October
   7.8s  panel closes, cursor returns, month resets while hidden           ---- */

@keyframes pointer-path {
  0%,   3%  { left: 18%; top: 82%; }
  15%,  22% { left: 86%; top: 7%; }
  32%,  70% { left: 95%; top: 16%; }
  82%       { left: 60%; top: 58%; }
  100%      { left: 18%; top: 82%; }
}

@keyframes nc-slide {
  0%,   16%  { transform: translateX(102%); }
  21%,  78%  { transform: translateX(0); }
  84%, 100%  { transform: translateX(102%); }
}

@keyframes mb-active {
  0%,   15%  { background: transparent; }
  16%,  79%  { background: rgba(255, 255, 255, 0.26); }
  80%, 100%  { background: transparent; }
}

@keyframes ring-once {
  0%,  14.4% { opacity: 0; transform: scale(0.35); }
  15%        { opacity: 0.95; transform: scale(0.35); }
  19%        { opacity: 0; transform: scale(1.25); }
  100%       { opacity: 0; transform: scale(0.35); }
}

@keyframes ring-twice {
  0%,  34.4% { opacity: 0; transform: scale(0.35); }
  35%        { opacity: 0.95; transform: scale(0.35); }
  39%        { opacity: 0; transform: scale(1.25); }
  46.4%      { opacity: 0; transform: scale(0.35); }
  47%        { opacity: 0.95; transform: scale(0.35); }
  51%        { opacity: 0; transform: scale(1.25); }
  100%       { opacity: 0; transform: scale(0.35); }
}

@keyframes chev-press {
  0%,  34.4% { opacity: 1; }
  35%, 37%   { opacity: 0.45; }
  38%        { opacity: 1; }
  46.4%      { opacity: 1; }
  47%, 49%   { opacity: 0.45; }
  50%, 100%  { opacity: 1; }
}

.mn-aug { animation: show-aug 10s linear infinite; }
.mn-sep { animation: show-sep 10s linear infinite; }
.mn-oct { animation: show-oct 10s linear infinite; }

@keyframes show-aug {
  0%,   35%  { opacity: 1; }
  37%,  87%  { opacity: 0; }
  89%, 100%  { opacity: 1; }
}

@keyframes show-sep {
  0%,   35%  { opacity: 0; }
  37%,  47%  { opacity: 1; }
  49%, 100%  { opacity: 0; }
}

@keyframes show-oct {
  0%,   47%  { opacity: 0; }
  49%,  85%  { opacity: 1; }
  87%, 100%  { opacity: 0; }
}

/* Motion is the whole point of this figure, so reduced motion does not hide it:
   it freezes on the open state showing the current month, which is the frame
   that carries the information. */
@media (prefers-reduced-motion: reduce) {
  .mb-clock,
  .ncpanel,
  .pointer,
  .ring,
  .mn-next,
  .mn-aug,
  .mn-sep,
  .mn-oct {
    animation: none;
  }

  .ncpanel { transform: translateX(0); }
  .mb-clock { background: rgba(255, 255, 255, 0.26); }
  .pointer { left: 95%; top: 16%; }
  .mn-aug { opacity: 1; }
  .mn-sep,
  .mn-oct { opacity: 0; }
}

@media (max-width: 640px) {
  .corner { aspect-ratio: 7 / 5; }
  .ncpanel { width: 56%; }
}

/* ---- hero variant: the animation is the hero visual, and the widget is the
   SQUARE size, which is the one the frame is showing. The soft panel keeps a
   little breathing room so the corner reads as a screen rather than a border. */

.hero-image {
  min-height: 0;
  padding: 26px;
}

.hero-image .mac-corner {
  margin: 0;
  width: 100%;
}

.hero-image .corner {
  aspect-ratio: 5 / 4;
  max-width: none;
}

.hero-image figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Square, not wide. A small widget is 1:1, so the grid takes the height the
   header, weekday row and word mark leave rather than sitting in a fixed band. */
.mn-widget {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
}

.mn-grid {
  flex: 1;
  height: auto;
}

.ncpanel {
  width: 52%;
}

@media (max-width: 860px) {
  .hero-image .corner { aspect-ratio: 8 / 5; }
}

/* Cursor and click targets re-measured after the widget became square: the
   forward arrow and the menu bar clock both moved. These are measured, not
   estimated, at both the desktop and the narrow breakpoint. */

.ring-clock { left: 78%; top: 4%; }
.ring-chev  { left: 93.5%; top: 17%; }

@keyframes pointer-path {
  0%,   3%  { left: 18%; top: 82%; }
  15%,  22% { left: 78%; top: 4%; }
  32%,  70% { left: 93.5%; top: 17%; }
  82%       { left: 60%; top: 58%; }
  100%      { left: 18%; top: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .pointer { left: 93.5%; top: 17%; }
}

/* The animation is the hero now, so the visual column carries equal weight
   with the copy rather than trailing it. */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

/* Separation. At hero size the widget was reading as part of the panel because
   both sat at nearly the same value. In Notification Center the widget is a
   lighter translucent card against a darker blur, and that edge is what makes it
   legible as a distinct object you could drag. */

.ncpanel {
  padding: 4.5% 4.5%;
  background: rgba(18, 21, 28, 0.66);
}

.mn-widget {
  background: rgba(150, 160, 178, 0.50);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}

/* ---- Full-window hero ------------------------------------------------------
   The frame now fills the viewport, so the internals stop being percentages.
   A Mac has a ~28px menu bar and a ~344pt Notification Center column whatever
   the screen size, and a small widget is ~168pt square. Scaling those with the
   viewport is what made the earlier version look like a toy at large sizes.
   Everything the cursor aims at derives from the SAME variables the panel uses,
   so the targets cannot drift out of sync with the layout again. */

:root {
  --mb-h: 28px;
  --nc-w: min(344px, 46vw);
  --nc-pad: 15px;
  --w-size: 168px;
}

.hero {
  position: relative;
  display: block;
  grid-template-columns: none;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  display: block;
}

.hero-image .mac-corner { margin: 0; height: 100%; }

.hero-image .corner {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}

/* The caption cannot sit under a full-bleed figure, so it moves into the frame. */
.hero-image figcaption {
  position: absolute;
  left: max(24px, calc((100vw - var(--content)) / 2));
  bottom: 34px;
  z-index: 2;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

/* Copy sits over the desktop half. The scrim is what makes it readable: the
   wallpaper gradient alone does not clear 4.5:1 for body text. */
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  max-width: 46ch;
  padding: calc(var(--mb-h) + 40px) 24px 120px
           max(24px, calc((100vw - var(--content)) / 2));
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(9, 14, 24, 0.86) 0%, rgba(9, 14, 24, 0.72) 38%, rgba(9, 14, 24, 0) 66%);
  pointer-events: none;
}

.hero-copy .eyebrow { color: #8fc2ff; }
.hero-copy h1 { color: #fff; }
.hero-copy p { color: rgba(255, 255, 255, 0.86); }
.hero-copy .cost-position { color: #fff; }
.hero-copy .requirement { color: rgba(255, 255, 255, 0.66); }

.hero-copy .download-button {
  background: #fff;
  color: #0b1220;
}

/* ---- frame internals at full size ---- */

.menubar {
  height: var(--mb-h);
  gap: 14px;
  padding-right: 16px;
}

.ncpanel {
  top: var(--mb-h);
  width: var(--nc-w);
  height: calc(100% - var(--mb-h));
  padding: var(--nc-pad);
}

.mn-widget {
  width: var(--w-size);
  height: var(--w-size);
  padding: 9px 8px 7px;
}

.mb-clock { font-size: 13px; }
.mn-title { font-size: 13px; }
.mn-dow i { font-size: 9px; }
.mn-grid { font-size: 11px; }
.mn-mark { font-size: 11px; }
.mn-chev { width: 8px; height: 8px; }

/* ---- targets, derived from the same variables as the layout ---- */

.pointer, .ring { right: auto; }

.ring-clock {
  left: auto;
  right: 68px;
  top: calc(var(--mb-h) / 2);
}

.ring-chev {
  left: auto;
  right: calc(var(--nc-w) - var(--nc-pad) - var(--w-size) + 16px);
  top: calc(var(--mb-h) + var(--nc-pad) + 15px);
}

@keyframes pointer-path {
  0%,   3%  { left: 22%; top: 74%; right: auto; }
  15%,  22% { left: calc(100% - 68px); top: calc(var(--mb-h) / 2); right: auto; }
  32%,  70% { left: calc(100% - (var(--nc-w) - var(--nc-pad) - var(--w-size) + 16px));
              top: calc(var(--mb-h) + var(--nc-pad) + 15px); right: auto; }
  82%       { left: 52%; top: 56%; right: auto; }
  100%      { left: 22%; top: 74%; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pointer {
    left: calc(100% - (var(--nc-w) - var(--nc-pad) - var(--w-size) + 16px));
    top: calc(var(--mb-h) + var(--nc-pad) + 15px);
  }
}

@media (max-width: 860px) {
  :root { --nc-w: min(300px, 62vw); --w-size: 150px; }

  .hero-image .corner { aspect-ratio: auto; }

  .hero-copy {
    max-width: none;
    padding-bottom: 150px;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(9, 14, 24, 0.90) 0%, rgba(9, 14, 24, 0.80) 55%, rgba(9, 14, 24, 0.55) 100%);
  }

  .hero-image figcaption { display: none; }
}

/* ---- Make it read as a Mac desktop, not a cropped rectangle ----------------
   A full-window frame with only right-side status icons reads as a mystery box.
   The left menu cluster, a layered wallpaper and a Dock are what make a person
   recognise the surface their own widget will live on. */

.corner {
  background:
    radial-gradient(120% 100% at 78% 8%, rgba(120, 158, 214, 0.55) 0%, rgba(120, 158, 214, 0) 58%),
    radial-gradient(90% 80% at 12% 92%, rgba(38, 88, 122, 0.75) 0%, rgba(38, 88, 122, 0) 62%),
    linear-gradient(158deg, #21406b 0%, #16304f 42%, #101f35 72%, #0b1524 100%);
}

.menubar { justify-content: space-between; padding-left: 14px; }

.mb-left {
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  white-space: nowrap;
}

.mb-left b { font-weight: 650; }
.mb-left span { font-weight: 400; color: rgba(255, 255, 255, 0.9); }

.mb-apple {
  width: 12px;
  height: 14px;
  background: rgba(255, 255, 255, 0.95);
  margin-right: 1px;
  /* Apple-ish silhouette: leaf, notch on the right, cleft at the base. */
  clip-path: polygon(58% 0, 68% 8%, 60% 17%, 74% 15%, 92% 30%, 82% 46%, 90% 72%, 74% 98%, 58% 92%, 42% 98%, 24% 74%, 16% 44%, 26% 20%, 46% 15%);
}

.mb-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dock {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.26), 0 8px 22px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.dock i {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: block;
}

.dock .dsep {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.26);
  margin: 0 2px;
}

.dock .d1 { background: linear-gradient(160deg, #7fb4f5, #2f7fe0); }
.dock .d2 { background: linear-gradient(160deg, #f6f7f9, #cdd3dc); }
.dock .d3 { background: linear-gradient(160deg, #6fd08c, #2f9e5a); }
.dock .d4 { background: linear-gradient(160deg, #ffd36b, #f0a12e); }
.dock .d5 { background: linear-gradient(160deg, #ff8f8a, #e0463f); }
.dock .d6 { background: linear-gradient(160deg, #b79bf0, #7a54cf); }
.dock .d7 { background: linear-gradient(160deg, #cfd6e0, #9aa4b3); }

@media (max-width: 860px) {
  .mb-left span { display: none; }
  .dock { display: none; }
}

/* The white brand bar above a full-bleed desktop destroyed the illusion the
   frame exists to create, and it also pushed the hero past the fold so the Dock
   fell off the bottom. It moves inside the frame instead, under the menu bar,
   which is where a person would expect a window title anyway. */

.site-header {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--mb-h) + 22px);
  padding-bottom: 0;
  pointer-events: none;
}

.site-header .product-line { color: rgba(255, 255, 255, 0.72); }

.hero-copy {
  min-height: 100svh;
  padding-top: calc(var(--mb-h) + 74px);
  padding-bottom: 132px;
  justify-content: center;
}

/* The headline was running to five lines and eating the fold. */
.hero-copy h1 {
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.04;
  margin-top: 10px;
  margin-bottom: 18px;
}

.hero-copy > p { font-size: 17px; }
.hero-copy .download-block { margin-top: 26px; }

/* Keep the Dock on screen at short viewports rather than letting it fall off. */
@media (max-height: 720px) {
  .dock { bottom: 8px; }
  .dock i { width: 30px; height: 30px; }
  .hero-copy { padding-bottom: 104px; }
}

/* The menu bar names the app, which is what macOS shows when it is frontmost,
   so the separate brand bar over the hero was both redundant and colliding with
   it. It is hidden on the hero only; the footer still carries the brand. */

.site-header { display: none; }

/* Fit the fold. The hero was 941px against an 800px viewport, which pushed the
   Dock off the bottom and cut the copy, so "fills the window" was not true. */

.hero-copy {
  padding-top: calc(var(--mb-h) + 52px);
  padding-bottom: 104px;
}

.hero-copy h1 {
  font-size: clamp(34px, 4vw, 54px);
  margin-bottom: 16px;
}

.hero-copy > p { font-size: 16.5px; line-height: 1.5; }
.hero-copy .download-block { margin-top: 22px; }

.hero-copy .cost-position {
  font-size: 16px;
  font-weight: 600;
  margin-top: 14px;
}

.hero-copy .requirement { font-size: 14px; margin-top: 6px; }

/* ---- Make the desktop read like a desktop --------------------------------
   Three problems at full size, and the first one mattered most: a dark
   translucent Notification Center panel over a dark wallpaper is invisible, so
   the widget appeared to float in space and the whole point of the animation
   (this thing lives in a panel that slides in) was lost. */

.corner {
  background:
    radial-gradient(78% 62% at 84% 12%, rgba(126, 178, 240, 0.70) 0%, rgba(126, 178, 240, 0) 62%),
    radial-gradient(66% 58% at 96% 52%, rgba(96, 210, 214, 0.34) 0%, rgba(96, 210, 214, 0) 66%),
    radial-gradient(84% 70% at 20% 96%, rgba(58, 116, 158, 0.60) 0%, rgba(58, 116, 158, 0) 64%),
    linear-gradient(154deg, #1d3f68 0%, #234a78 26%, #17325a 58%, #0e1e39 100%);
}

/* A visible column. The left edge is what tells you it is a panel and not the
   wallpaper, and it is the only cue available while the widget is the only
   thing inside it. */
.ncpanel {
  background: rgba(12, 18, 30, 0.52);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16), -14px 0 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

/* Dock icons were reading as flat swatches. Real ones have a highlight along
   the top edge and a defined rim. */
.dock {
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.34), 0 10px 26px rgba(0, 0, 0, 0.36);
}

.dock i {
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.28);
}

.dock .dsep { background: rgba(255, 255, 255, 0.34); }

/* The caption was crowding the Dock. It belongs beside the copy, not under it. */
.hero-image figcaption {
  bottom: auto;
  top: auto;
  left: max(24px, calc((100vw - var(--content)) / 2));
  bottom: 30px;
  max-width: 26ch;
  font-size: 13.5px;
  text-align: left;
}

@media (max-height: 760px) {
  .hero-image figcaption { display: none; }
}

/* The cursor is the thing the viewer follows, and at full-window size a 13px
   white arrow on a light widget disappeared. Bigger, with a dark rim so it
   survives both the dark wallpaper and the light widget it lands on. */
.pointer {
  width: 17px;
  height: 25px;
  filter:
    drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.9))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* The Dock was pulling focus. It is scenery: it tells you this is a Mac and
   then gets out of the way of the widget, which is what the eye should land on. */
.dock i { opacity: 0.82; filter: saturate(0.72); }

.ring { border-width: 2.5px; }

/* Clock target re-measured after the menu bar gained its left cluster and
   right padding: the clock centre sits 88px from the right edge, not 68px. */
.ring-clock { right: 88px; }

@keyframes pointer-path {
  0%,   3%  { left: 22%; top: 74%; }
  15%,  22% { left: calc(100% - 88px); top: calc(var(--mb-h) / 2); }
  32%,  70% { left: calc(100% - (var(--nc-w) - var(--nc-pad) - var(--w-size) + 16px));
              top: calc(var(--mb-h) + var(--nc-pad) + 15px); }
  82%       { left: 52%; top: 56%; }
  100%      { left: 22%; top: 74%; }
}

/* On a narrow screen the copy cannot sit ON the desktop: the scrim that makes
   text readable also drowns the widget, which is the one thing the viewer came
   to see. So they stack. The frame keeps the top of the fold, the copy takes
   the rest, and nothing is layered over anything. */

@media (max-width: 860px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: #0e1e39;
  }

  .hero::before { display: none; }

  .hero-image {
    position: relative;
    inset: auto;
    flex: none;
    height: 42svh;
    min-height: 260px;
  }

  .hero-copy {
    position: relative;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
    max-width: none;
    padding: 26px max(20px, calc((100vw - var(--content)) / 2)) 44px;
  }

  .hero-copy h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .hero-copy > p { font-size: 16px; }
}

/* The frame is second in the DOM, which is right for the desktop overlay and
   wrong for a stack, so it is reordered rather than moved in the markup. The
   copy keeps its reading order for a screen reader either way. */

@media (max-width: 860px) {
  .hero-image { order: -1; height: 40svh; min-height: 240px; }
  .hero-copy  { order: 1; }

  /* Natural height on a phone. Forcing 100svh here cut the copy off, and a
     frame squeezed into a third of a phone screen is not worth the fold. */
  .hero { min-height: auto; }
  .hero-copy { min-height: 0; padding-bottom: 40px; }
}

/* `figure` carries the shot-grid card styling globally: a soft background, a
   22px radius and display:flex. Absolute positioning hid that on the desktop
   hero, and in the mobile flow the figure collapsed to 32px wide and rendered
   as a white pill. Reset it explicitly rather than relying on the container. */

.hero-image .mac-corner {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Two leftovers from the original two-column grid were sizing the mobile stack
   to nothing: `.hero { align-items: center }` makes flex children shrink to fit
   rather than stretch, and the desktop `inset: 0` was still applied. Both are
   set explicitly here rather than left to cascade order. */

@media (max-width: 860px) {
  .hero { align-items: stretch; }

  .hero-image {
    width: 100%;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}

/* BUGFIX. The hero copy collapsed to one word per line on a wide screen.
   `box-sizing: border-box` is global and the page gutter was padding INSIDE a
   max-width:46ch box, so at 1900px the gutter (390px) plus the right padding
   consumed the whole 414px and left the text almost no room. It looked correct
   at 1280px only because the gutter was 80px there.

   The container now spans and carries the gutter as real padding; the measure
   is applied to the children instead, which is where a reading width belongs. */

.hero-copy {
  max-width: none;
  width: 100%;
}

.hero-copy > *,
.hero-copy .download-block > * {
  max-width: 46ch;
}

@media (max-width: 860px) {
  .hero-copy > *,
  .hero-copy .download-block > * { max-width: none; }
}

/* `ch` is relative to the element's OWN font size, so 46ch on a 54px headline
   resolved to about 1242px and the h1 ran across the Notification Center panel
   on one line. A reading measure shared by elements of different sizes has to
   be an absolute length. 520px is roughly 66 characters at the body size, which
   is the measure the paragraph wants, and it holds the headline to three lines. */

.hero-copy > *,
.hero-copy .download-block > * {
  max-width: 520px;
}

@media (max-width: 860px) {
  .hero-copy > *,
  .hero-copy .download-block > * { max-width: none; }
}