/* Homepage: the sea lives inside frames (the Mac's wallpaper, the tiles, the
   yes, the closing band) so the page stays clean and the water can be bright.
   Every Octa bar is the app's own light glass. The white page, header and
   buttons are shared with the subpages (styles.css, "Light pages"). */

.home2 { --accent: #1F7AE8; --attention: #8A6A2E; --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.home2 .defs { position: absolute; }

.home2 kbd {
  font: 600 0.72rem var(--font); color: var(--ink); padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(11, 27, 34, 0.15); background: #fff; box-shadow: 0 1px 0 rgba(11, 27, 34, 0.08);
}

/* ───────── Hero ───────── */

.h-hero {
  padding: clamp(132px, 15vw, 176px) 0 0; text-align: center;
  background: radial-gradient(70% 460px at 50% 0, rgba(14, 124, 134, 0.07), transparent 75%);
}
.h-hero h1 { font-size: clamp(3rem, 7.2vw, 6.2rem); line-height: 0.98; letter-spacing: -0.048em; font-weight: 600; color: var(--ink); }
/* "by voice." in the app's blue, the Octa cursor's and the Octa bar's. */
.h-hero h1 > span { color: var(--accent); }
.h-lede { margin: 26px auto 0; max-width: 46ch; color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; }
.h-actions { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.h-note { color: var(--ink-3); font-size: 0.92rem; }

/* The Mac: everything on the screen is sized in em off the frame's width, so
   the whole screen scales like a picture. */
.mac {
  position: relative; margin: clamp(44px, 5vw, 64px) auto 0;
  width: min(100% - 2 * var(--gutter), 1180px);
  container-type: inline-size;
}
.mac-lid {
  position: relative; padding: 1.05cqw; border-radius: 2.6cqw 2.6cqw 1.1cqw 1.1cqw; background: #0A0B0D;
  box-shadow: 0 0 0 0.14cqw #BFC3C8, 0 0 0 0.24cqw #E4E6E9, 0 3cqw 6cqw -2.4cqw rgba(9, 44, 70, 0.45);
  transform-origin: 50% 100%;
}
.mac-screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 1.6cqw 1.6cqw 0.35cqw 0.35cqw; background: #0F86AE;
  font: 400 1.16cqw/1.3 var(--sys); letter-spacing: 0; text-align: left; color: #1D1D1F;
}
.mac-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mac-base {
  position: relative; width: 113%; height: 1.7cqw; margin-left: -6.5%;
  border-radius: 0 0 3cqw 3cqw / 0 0 1.5cqw 1.5cqw;
  background: linear-gradient(180deg, #F3F4F6 0%, #DADCE0 35%, #B6B9BE 80%, #8F9297 100%);
  box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.9), 0 2.2cqw 3cqw -1.2cqw rgba(9, 44, 70, 0.4);
}
.mac-base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 0.6cqw; transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #A6A9AE, #D3D5D8);
}

/* Menu bar: clear glass over the wallpaper, white type, the notch in the middle. */
.mac-menubar {
  position: absolute; inset: 0 0 auto; z-index: 5; height: 2.35em;
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.1em 0 1.35em;
  color: #fff; font-size: 0.95em; font-weight: 500; white-space: nowrap;
  background: linear-gradient(rgba(0, 38, 70, 0.22), rgba(0, 38, 70, 0));
  text-shadow: 0 0.05em 0.3em rgba(0, 30, 60, 0.25);
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 1.35em; }
.mb-right { gap: 1.05em; }
.mb-left b { font-weight: 700; }
.mb-apple { width: 0.95em; height: 1.15em; fill: currentColor; margin-top: -0.15em; }
.mb-notch { position: absolute; left: 50%; top: 0; width: 13%; height: 100%; transform: translateX(-50%); background: #0A0B0D; border-radius: 0 0 0.85em 0.85em; }
.mb-i { width: 1.25em; height: 1.25em; }
.mb-batt { width: 1.6em; }
.mb-octa { width: 1.3em; height: 1.3em; filter: invert(1); }

/* The Octa bar: light Liquid Glass, as the app draws it on a light Mac. */
.mac-octa { position: absolute; z-index: 6; top: 2.85em; left: 50%; transform: translateX(-50%); width: 33em; display: flex; justify-content: center; }
.home2 .mac-octa .bar {
  width: 13.5em; min-height: 3.3em; padding: 0.6em 0.95em; gap: 0.75em; border-radius: 1.65em; font-size: 1em; font-family: var(--sys);
  color: #1D1D1F; background: rgba(255, 255, 255, 0.9); border: 0.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 30, 60, 0.08), 0 1em 2.6em -0.8em rgba(0, 40, 80, 0.45);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.home2 .mac-octa .bar[data-wide] { width: 100%; }
.home2 .bar-lead { width: 1.45em; height: 1.45em; color: var(--accent); }
.home2 .bar-lead svg { width: 1.3em; height: 1.3em; }
.home2 .bar-lead svg path[stroke="#072433"] { stroke: #fff; }
.home2 .bar[data-phase="needs"] .bar-lead { color: var(--attention); }
.home2 .bar-heard { color: rgba(29, 29, 31, 0.55); font-size: 0.8em; }
.home2 .bar-btn { font: 500 0.85em var(--sys); color: #1D1D1F; background: rgba(0, 0, 0, 0.06); border: 0; padding: 0.35em 0.9em; }
.home2 .bar-btn.yes { background: var(--accent); color: #fff; }
.home2 .bar-btn.yes.pressed { background: #1767C8; transform: scale(0.93); }
.home2 .wave i { background: var(--accent); }
.home2 .spin { border-color: rgba(0, 0, 0, 0.12); border-top-color: rgba(0, 0, 0, 0.55); }
.home2 .mac-octa .spin { width: 1.1em; height: 1.1em; }
.home2 .mac-octa .wave { height: 1.1em; }

/* Windows */
.mac .win {
  position: absolute; z-index: 3; border-radius: 1.05em; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 1.4em 3.4em -0.6em rgba(0, 35, 70, 0.45);
}
.lights { display: inline-flex; gap: 0.5em; }
.lights i { width: 0.86em; height: 0.86em; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }

.msgs { left: 6.5%; top: 13.5%; width: 55%; height: 71%; display: grid; grid-template-columns: 35% 1fr; background: #fff; }
.msgs-side { display: flex; flex-direction: column; gap: 0.15em; padding: 0.95em 0.6em; background: #F2F2F4; border-right: 0.5px solid #DADADF; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0.35em 0 0.4em; margin-bottom: 0.85em; }
.side-new { width: 1.3em; height: 1.3em; color: #6E6E73; }
.side-search { display: flex; align-items: center; gap: 0.4em; margin: 0 0.25em 0.7em; padding: 0.35em 0.6em; border-radius: 0.55em; background: rgba(0, 0, 0, 0.055); color: #8E8E93; font-size: 0.88em; }
.side-search svg { width: 1em; height: 1em; }
.convo { display: flex; align-items: center; gap: 0.65em; padding: 0.55em 0.6em; border-radius: 0.65em; transition: background-color 0.25s ease, color 0.25s ease; }
.convo.on { background: #2F7CF6; color: #fff; }
.c-txt { flex: 1; min-width: 0; }
.c-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.c-top b { font-size: 0.9em; font-weight: 600; }
.c-top time { font-size: 0.72em; color: #8E8E93; }
.convo small { display: block; font-size: 0.8em; color: #6E6E73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo.on small, .convo.on time { color: rgba(255, 255, 255, 0.85); }
.av {
  flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 0.82em; color: #fff; background: linear-gradient(#A9AEB8, #868B95);
}
.msgs-main { display: flex; flex-direction: column; min-width: 0; }
.msgs-head { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.75em 0 0.6em; border-bottom: 0.5px solid #E5E5EA; }
.msgs-head .av.sm { width: 2.3em; height: 2.3em; font-size: 0.75em; }
.msgs-head b { font-size: 0.78em; font-weight: 500; }
.thread2 { flex: 1; padding: 0.9em 1.1em; display: flex; flex-direction: column; gap: 0.35em; }
.thread2[hidden] { display: none; }
.stamp { align-self: center; margin-bottom: 0.4em; font-size: 0.7em; color: #8E8E93; }
.thread2 p { max-width: 72%; padding: 0.45em 0.8em; border-radius: 1.05em; font-size: 0.92em; line-height: 1.3; }
.thread2 .in { align-self: flex-start; background: #E9E9EB; }
.thread2 .out { align-self: flex-end; background: #0A84FF; color: #fff; }
.thread2 .out[hidden], .deliv[hidden] { display: none; }
.deliv { align-self: flex-end; font-size: 0.68em; color: #8E8E93; }
.compose2 { display: flex; align-items: center; gap: 0.6em; margin: 0.6em 0.9em 0.85em; }
.c-plus { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: #E9E9EB; color: #6E6E73; font-size: 1em; line-height: 1; }
.c-field {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
  min-height: 2em; padding: 0.3em 0.55em 0.3em 0.85em; border-radius: 1.1em; border: 0.5px solid #C7C7CC;
  color: #8E8E93; font-size: 0.9em; white-space: nowrap; overflow: hidden;
}
.c-field svg { flex: none; width: 1.15em; height: 1.15em; }
.c-field .has-draft { color: #1D1D1F; }

/* Spotify, small and dark */
.spot { right: 6%; top: 18%; width: 24.5%; padding: 0.85em 1.1em 1.1em; display: flex; flex-direction: column; gap: 0.6em; background: #121212; color: #fff; }
.spot-top { margin-bottom: 0.15em; }
.spot-art { position: relative; aspect-ratio: 1; border-radius: 0.5em; overflow: hidden; box-shadow: 0 0.8em 1.6em -0.6em rgba(0, 0, 0, 0.6); }
.spot-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spot-art span { position: absolute; left: 0.9em; top: 0.8em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 0 1em rgba(0, 40, 70, 0.35); }
.spot-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3em; }
.spot-meta b { display: block; font-size: 1em; font-weight: 700; }
.spot-meta small { display: block; font-size: 0.8em; color: #B3B3B3; }
.spot-meta svg { width: 1.3em; height: 1.3em; }
.spot-prog { height: 0.25em; border-radius: 1em; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.spot-prog i { display: block; height: 100%; width: 36%; border-radius: inherit; background: #fff; animation: listen-on 14s linear infinite; }
.spot-prog i.is-paused { animation-play-state: paused; background: #B3B3B3; }
@keyframes listen-on { from { width: 36%; } to { width: 60%; } }
.spot-times { display: flex; justify-content: space-between; margin-top: -0.2em; font-size: 0.68em; color: #A7A7A7; }
.spot-ctl { display: flex; align-items: center; justify-content: space-between; padding: 0 0.2em; }
.spot-ctl svg { width: 1.25em; height: 1.25em; color: #fff; }
.spot-ctl .s-sm { width: 1.1em; height: 1.1em; color: #B3B3B3; }
.pp { width: 2.5em; height: 2.5em; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pp svg { width: 1.15em; height: 1.15em; fill: #000; }
.pp .pp-play, .pp.is-paused .pp-pause { display: none; }
.pp.is-paused .pp-play { display: block; transform: translateX(0.06em); }

/* The Octa cursor: Octaflow blue with a white rim, and its name. It glides
   by transform, not left/top, so a move never re-lays out or repaints the
   screen: the box is the screen's size, so translate's % are the screen's,
   and the arrow sits at its top-left corner. */
.octa-cursor {
  position: absolute; z-index: 7; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
  transform: translate(calc(var(--x, 40) * 1%), calc(var(--y, 40) * 1%));
  transition: transform 0.85s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.35s ease;
}
.octa-cursor.on { opacity: 1; }
.octa-cursor svg {
  position: absolute; left: -0.08em; top: -0.08em; width: 1.15em; height: 1.7em; overflow: visible;
  fill: var(--accent); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
  filter: drop-shadow(0 0.08em 0.12em rgba(0, 0, 0, 0.3));
}
.octa-cursor span {
  position: absolute; left: 0.95em; top: 1.45em; white-space: nowrap;
  padding: 0.18em 0.55em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.9);
  background: var(--accent); color: #fff; font-size: 0.72em; font-weight: 600;
}
.oc-ring { position: absolute; left: -1.45em; top: -1.45em; width: 2.9em; height: 2.9em; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.octa-cursor.click .oc-ring { animation: oc-ring 0.5s ease-out; }
@keyframes oc-ring { from { transform: scale(0.4); opacity: 0.8; } to { transform: scale(1.3); opacity: 0; } }

/* The guide: the Octa cursor in the hero, beside the intro and then just left
   of the Mac (home.js places it on the page). Pointer devices with room for it. */
.guide { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .guide {
    --tilt: 0deg;
    display: block; position: absolute; left: 0; top: 0; z-index: 15; width: 0; height: 0; pointer-events: none;
    opacity: 0; transition: opacity 0.6s ease; will-change: transform;
  }
  .guide.on { opacity: 1; }
  .guide.behind { z-index: 0; }
  .guide-in {
    position: relative; transform-origin: 0 0; transform: rotate(var(--tilt));
    animation: guide-float 3.4s ease-in-out infinite alternate;
  }
  .guide svg {
    position: absolute; left: -1.5px; top: -1.5px; width: 21px; height: 31px; overflow: visible;
    fill: var(--accent); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round;
    filter: drop-shadow(0 2px 3px rgba(11, 27, 34, 0.28));
  }
  .guide span {
    position: absolute; left: 16px; top: 27px; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px; border: 1.5px solid #fff;
    background: var(--accent); color: #fff; font: 600 12px/1.2 var(--sys);
    box-shadow: 0 6px 14px -6px rgba(11, 27, 34, 0.45);
    transition: opacity 0.4s ease;
  }
  .guide.tight span { opacity: 0; }
  @keyframes guide-float { from { translate: 0 -3px; } to { translate: 0 4px; } }
  .ambient-paused .guide-in { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .guide { display: none !important; } }

/* Dock */
.mac-dock {
  position: absolute; z-index: 4; left: 50%; bottom: 0.8em; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.3em; padding: 0.42em 0.5em; border-radius: 1.55em;
  background: rgba(255, 255, 255, 0.4); border: 0.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0.8em 2em -0.8em rgba(0, 40, 80, 0.4);
}
.mac-dock img { display: block; width: 3.5em; height: 3.5em; }
.dock-sep { width: 1px; height: 2.9em; margin: 0 0.25em; background: rgba(0, 30, 60, 0.2); }
.dock-octa { display: block; width: 3.5em; height: 3.5em; padding: 0.34em; }
.dock-octa img { width: 100%; height: 100%; border-radius: 22.5%; box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25); }

.mac-foot { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 0.95rem; color: var(--ink-2); text-align: left; }
.mac-foot kbd { margin-right: 6px; }
.mac-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--ink-3); }
.mac-ctl button {
  background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer; white-space: nowrap;
  font: 500 0.92rem var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 27, 34, 0.3);
}

/* Phones: a taller screen, larger type, one window. */
@container (max-width: 620px) {
  .mac-lid { padding: 2cqw; border-radius: 5.5cqw; }
  .mac-screen { aspect-ratio: 3 / 4; font-size: 3.05cqw; border-radius: 3.6cqw; }
  .mac-base { display: none; }
  .mb-left span, .mb-right span, .mb-right .mb-i:not(.mb-batt) { display: none; }
  .mb-notch { width: 28%; }
  .mac-octa { width: 90%; top: 3em; }
  .msgs { left: 5%; right: 5%; width: auto; top: 22%; height: 47%; grid-template-columns: 1fr; }
  .msgs-side { display: none; }
  .spot { left: 5%; right: 5%; width: auto; top: auto; bottom: 1.2em; padding: 0.8em 1em; display: grid; grid-template-columns: 3.6em 1fr; gap: 0.45em 0.9em; align-items: center; }
  .spot-top, .spot-times, .spot-ctl { display: none; }
  .spot-art { grid-row: span 2; }
  .spot-art span { display: none; }
  .spot-meta { margin: 0; }
  .mac-dock { display: none; }
}

/* ───────── Sections ───────── */

.h-sec { padding: clamp(110px, 12vw, 160px) 0 0; }
.h-head { text-align: center; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.03; letter-spacing: -0.04em; font-weight: 600; color: var(--ink); }
.h-head span { color: #7D8B90; }
/* "Stop searching for <that one setting>.": the setting's name turns over,
   letter by letter (home.js); "Just ask for it." keeps its own line so the
   name changing never moves it. On narrower screens the name gets its own
   line too. */
.h-rot > span:last-child { display: block; }
.h-head .rot-line, .h-head .rot-line span { color: var(--ink); }
.rot {
  display: inline-block; position: relative; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.06em; margin-bottom: -0.06em; transition: width 0.55s cubic-bezier(0.6, 0, 0.2, 1);
}
.rot-w { display: inline-block; white-space: pre; }
.rot-w.out { position: absolute; left: 0; top: 0; }
.rot-c { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease; }
.rot-w.pre .rot-c { transform: translateY(105%); opacity: 0; transition: none; }
.rot-w.out .rot-c { transform: translateY(-105%); opacity: 0; transition-duration: 0.35s, 0.25s; }
@media (max-width: 1000px) { .rot-line { display: block; } }
.h-sub { margin: 18px auto 0; max-width: 52ch; text-align: center; color: var(--ink-2); font-size: 1.15rem; }
.h-sub a, .trio a, .home2 .faq a { color: var(--teal); }

/* The sea as a backdrop, inside a frame. */
.sea { background: #1590B5 image-set(url("/img/sea-1440.webp") 1x, url("/img/sea.webp") 2x) center / cover no-repeat; }

/* Three ways in */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; border-radius: 28px; background: var(--panel); overflow: hidden; }
.tile-wide { grid-column: 1 / -1; }
.tile-copy { padding: 32px 36px 28px; }
.tile h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tile p { margin-top: 8px; color: var(--ink-2); max-width: 46ch; }
.tile-vis { position: relative; flex: 1; min-height: 340px; margin: 0 14px 14px; border-radius: 18px; overflow: hidden; font: 400 13px/1.3 var(--sys); color: #1D1D1F; }
.tile-wide .tile-vis { min-height: 440px; }
#ask-tile { background-position: 62% 18%; }
#dict { background-position: 12% 92%; }
#typer { background-position: 88% 70%; }

/* A small Octa bar, in glass */
.gbar {
  position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; width: 400px; max-width: calc(100% - 28px); min-height: 46px;
  padding: 9px 12px 9px 14px; border-radius: 23px; font-size: 13px;
  background: rgba(255, 255, 255, 0.9); border: 0.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 30, 60, 0.08), 0 14px 34px -12px rgba(0, 40, 80, 0.45);
  transition: width 0.5s var(--ease);
}
[data-step="listen"] > .gbar, .gbar-dict { width: 200px; }
.gs { display: none; align-items: center; gap: 10px; width: 100%; min-width: 0; animation: gs-in 0.4s var(--ease); }
[data-step="listen"] > .gbar > [data-s="listen"], [data-step="work"] > .gbar > [data-s="work"],
[data-step="check"] > .gbar > [data-s="check"], [data-step="done"] > .gbar > [data-s="done"],
[data-step="paste"] > .gbar > [data-s="paste"], [data-step="type"] > .gbar > [data-s="type"],
[data-step="ask"] > .gbar > [data-s="ask"], [data-step="press"] > .gbar > [data-s="press"],
[data-step="sent"] > .gbar > [data-s="sent"] { display: flex; }
@keyframes gs-in { from { opacity: 0; transform: translateY(4px); } }
.gs > span:not(.gbtn, .gx, .wave, .spin, .caret) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs .typed { flex: 0 1 auto !important; }
.two { display: grid; }
.two small { font-size: 11px; color: rgba(29, 29, 31, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-dim { color: rgba(29, 29, 31, 0.6); }
.gs svg { flex: none; width: 18px; height: 18px; }
.gs .ok { color: var(--accent); }
.gs .hand { color: var(--attention); }
.gs .mic { width: 15px; color: #1D1D1F; }
.gs .spin { flex: none; width: 15px; height: 15px; }
.gbtn { flex: none; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); font-size: 12px; font-weight: 500; }
.gbtn.yes { background: var(--accent); color: #fff; transition: transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.gbtn.yes.pressed { background: #1767C8; transform: scale(0.92); }
.gx { flex: none; padding: 0 4px; font-size: 15px; color: rgba(29, 29, 31, 0.5); }
.wave.dark i { background: #1D1D1F; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Windows inside the tiles */
.tile-vis .win, .yes-stage .win, .say-stage .win {
  position: absolute; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 24px 50px -16px rgba(0, 35, 70, 0.5);
  transition: background-color 0.5s ease, color 0.5s ease, opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Ask: System Settings flips to Dark, and the bar says it checked. */
.sys { left: 50%; top: 86px; bottom: -24px; width: min(640px, 86%); transform: translateX(-50%); display: grid; grid-template-columns: 200px 1fr; }
.sys-side { padding: 14px 10px; background: #F2F2F4; border-right: 0.5px solid #DADADF; transition: inherit; }
.sys-search { margin: 14px 2px 10px; padding: 5px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.055); color: #8E8E93; font-size: 12px; }
.sys-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sys-side li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; }
.sys-side li i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--c); color: #fff; }
.sys-side li i svg { width: 12px; height: 12px; }
.c-blue { --c: #3478F6; } .c-gray { --c: #8E8E93; } .c-ink { --c: #1D1D1F; } .c-red { --c: #FF3B30; } .c-pink { --c: #FF2D55; }
.c-blue2 { --c: #0A84FF; } .c-purple { --c: #BF5AF2; } .c-rose { --c: #FF375F; } .c-orange { --c: #FF9F0A; } .c-green { --c: #30D158; }
.sys-side li.on { background: #2F7CF6; color: #fff; }
.sys-main { padding: 16px 22px; }
.sys-title { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.sys-group { border-radius: 10px; background: rgba(0, 0, 0, 0.035); border: 0.5px solid rgba(0, 0, 0, 0.06); }
.sys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 12.5px; }
.sys-row + .sys-row { border-top: 0.5px solid rgba(0, 0, 0, 0.08); }
.sys-modes { align-items: flex-start; }
.modes { display: flex; gap: 12px; }
.mode { display: grid; justify-items: center; gap: 5px; }
.mode i { width: 62px; height: 40px; border-radius: 6px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease; }
.m-light i { background: linear-gradient(#E6ECF2 0 26%, #fff 26%); }
.m-dark i { background: linear-gradient(#2B2F36 0 26%, #1C1E22 26%); }
.m-auto i { background: linear-gradient(90deg, #fff 50%, #1C1E22 50%); }
.mode small { font-size: 11px; color: #6E6E73; }
#ask-tile:is([data-step="listen"], [data-step="work"]) .m-light i,
#ask-tile:is([data-step="check"], [data-step="done"]) .m-dark i { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--accent); }
.dots { display: flex; gap: 7px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.dots i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0, 0, 0, 0.25); }
.sel { padding: 3px 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.05); font-size: 12px; }
#ask-tile:is([data-step="check"], [data-step="done"]) .sys { background: #1E1E20; color: #F5F5F7; }
#ask-tile:is([data-step="check"], [data-step="done"]) .sys-side { background: #29292C; border-color: #3A3A3C; }
#ask-tile:is([data-step="check"], [data-step="done"]) .sys-search { background: rgba(255, 255, 255, 0.08); }
#ask-tile:is([data-step="check"], [data-step="done"]) .sys-group { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); }
#ask-tile:is([data-step="check"], [data-step="done"]) .sys-row + .sys-row { border-color: rgba(255, 255, 255, 0.08); }
#ask-tile:is([data-step="check"], [data-step="done"]) .sel { background: #3A3A3C; color: #fff; }
#ask-tile:is([data-step="check"], [data-step="done"]) .mode small { color: #A1A1A6; }
#ask-tile:is([data-step="check"], [data-step="done"]) .dots i:first-child { box-shadow: 0 0 0 2px #1E1E20, 0 0 0 3.5px rgba(255, 255, 255, 0.4); }

/* Dictate: Notes, and the words arrive in one go when you let go. */
.notes { left: 50%; top: 84px; bottom: -24px; width: min(420px, 84%); transform: translateX(-50%); }
.notes-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid #E5E5EA; }
.notes-tools { font-size: 13px; font-weight: 600; color: #8E8E93; }
.notes-body { padding: 18px 22px; }
.notes-body small { display: block; margin-bottom: 12px; text-align: center; font-size: 11px; color: #8E8E93; }
.notes-body b { display: block; margin-bottom: 8px; font-size: 19px; font-weight: 700; }
.notes-body p { font-size: 14px; line-height: 1.45; }
.dict-text { transition: opacity 0.25s ease; }
#dict:is([data-step="listen"], [data-step="paste"]) .dict-text { display: none; }
#dict[data-step="done"] .dict-text { background: rgba(31, 122, 232, 0.14); animation: pasted 1.6s var(--ease) forwards; }
#dict[data-step="done"] > .gbar { opacity: 0; transform: translate(-50%, -6px); }
.gbar-dict { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
#dict[data-step="paste"] .wave i { animation-play-state: paused; }
@keyframes pasted { to { background: transparent; } }

/* Type: a request typed into the bar, and the file it found. */
.finder { left: 50%; top: 84px; bottom: -24px; width: min(440px, 86%); transform: translateX(-50%); display: grid; grid-template-columns: 34% 1fr; }
.finder-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #F2F2F4; border-right: 0.5px solid #DADADF; font-size: 12px; }
.finder-side small { margin: 14px 8px 4px; font-size: 10.5px; font-weight: 600; color: #8E8E93; }
.finder-side > span:not(.lights) { padding: 4px 8px; border-radius: 6px; }
.finder-side .on { background: rgba(0, 0, 0, 0.08); }
.finder-main { padding: 14px 0; }
.finder-main b { display: block; padding: 0 16px 10px; font-size: 14px; font-weight: 700; }
.finder-main ul { list-style: none; margin: 0; padding: 0 8px; }
.finder-main li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease; }
.finder-main li time { margin-left: auto; font-size: 11px; color: #8E8E93; }
.finder-main li i { position: relative; flex: none; width: 14px; height: 17px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px #D1D1D6; }
.finder-main li i.pdf::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 4px; border-radius: 1px; background: #E5484D; }
.finder-main li i.img { background: linear-gradient(135deg, #7FD3E6, #2E8BC0); box-shadow: none; }
#typer[data-step="done"] .hit { background: #2F7CF6; color: #fff; }
#typer[data-step="done"] .hit time { color: rgba(255, 255, 255, 0.8); }

/* Free dictation: one sentence at a time lands in Messages, Mail, Notes and
   Chrome. While the key is held the field waits; on letting go the words
   arrive in one go, as the app pastes them. */
/* Free dictation: a chapter of its own on a pale band of the sea's blue,
   so it gets noticed without pulling focus from the hero. */
.h-dict { padding-top: clamp(84px, 9vw, 120px); }
.dict-band {
  width: min(100% - 2 * clamp(12px, 2vw, 28px), 1480px); margin: 0 auto;
  padding: clamp(68px, 8vw, 108px) 0; border-radius: clamp(28px, 3vw, 44px);
  background: linear-gradient(180deg, #EBF3FA, #F4F8FB);
}
.eyebrow {
  display: flex; align-items: center; gap: 8px; width: max-content; margin: 0 auto 22px; padding: 7px 15px 7px 11px;
  border-radius: 999px; background: #fff; color: #1767C8; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 27, 34, 0.06), 0 8px 20px -12px rgba(11, 27, 34, 0.25);
}
.eyebrow svg { width: 16px; height: 16px; color: var(--accent); }
.dict-facts {
  list-style: none; max-width: 1000px; margin: clamp(40px, 5vw, 56px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); text-align: center;
}
.dict-facts li { display: flex; flex-direction: column; align-items: center; }
.dict-facts svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: #fff; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 1px 2px rgba(11, 27, 34, 0.08);
}
.dict-facts b { margin-top: 14px; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.dict-facts span { margin-top: 6px; max-width: 30ch; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.dict-more { margin-top: clamp(32px, 4vw, 44px); text-align: center; }
.dict-more a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .dict-facts { grid-template-columns: 1fr; gap: 30px; }
}
.say-stage { position: relative; margin: 44px auto 0; height: clamp(420px, 36vw, 480px); border-radius: 32px; overflow: hidden; background-position: 15% 88%; font: 400 15px/1.4 var(--sys); color: #1D1D1F; }
.say-stage > .gbar { top: 26px; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.say-stage > .gbar .gs { display: flex; }
.say-stage[data-step$="-done"] > .gbar { opacity: 0; transform: translate(-50%, -6px); }
.say-stage .dw { left: 50%; top: 96px; width: min(640px, 86%); opacity: 0; transform: translate(-50%, 12px); }
.say-stage[data-step^="msg"] .dw-msg, .say-stage[data-step^="mail"] .dw-mail,
.say-stage[data-step^="notes"] .dw-notes, .say-stage[data-step^="web"] .dw-web { opacity: 1; transform: translateX(-50%); }
.say-stage[data-step$="-listen"] .said { display: none; }
.say-stage[data-step$="-done"] .said { background: rgba(31, 122, 232, 0.14); animation: pasted 1.6s var(--ease) forwards; }
.dw-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 11px 14px; border-bottom: 0.5px solid #E5E5EA; }
.dw-top > :last-child { justify-self: end; }
.dw-title { font-size: 13px; font-weight: 600; color: #3A3A3C; }
.dw-chat { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 4px; }
.dw-chat .in { align-self: flex-start; max-width: 70%; padding: 7px 12px; border-radius: 16px; background: #E9E9EB; font-size: 14px; }
.dw-compose { display: flex; align-items: center; gap: 9px; padding: 10px 14px 14px; }
.dw-field { flex: 1; min-height: 34px; display: flex; align-items: center; padding: 5px 12px; border-radius: 17px; border: 0.5px solid #C7C7CC; font-size: 14px; }
.dw-body { padding: 16px 20px 24px; font-size: 15px; line-height: 1.5; }
.dw-h { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; }
.web-tab { padding: 4px 14px; border-radius: 8px; background: #F2F2F4; color: #3A3A3C; font-size: 12px; }
.web-page { display: grid; place-items: center; padding: 38px 28px 44px; }
.web-search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; min-height: 46px; padding: 8px 18px; border-radius: 999px; box-shadow: 0 0 0 1px #DADCE0, 0 2px 8px rgba(0, 0, 0, 0.06); font-size: 15px; }
.web-search svg { flex: none; width: 17px; height: 17px; color: #8E8E93; }
.say-dock {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 9px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.4); border: 0.5px solid rgba(255, 255, 255, 0.6);
}
.say-dock img { display: block; width: 46px; height: 46px; opacity: 0.55; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.say-stage[data-step^="msg"] .sd-msg, .say-stage[data-step^="mail"] .sd-mail,
.say-stage[data-step^="notes"] .sd-notes, .say-stage[data-step^="web"] .sd-web { opacity: 1; transform: translateY(-5px) scale(1.06); }

/* Settings: the request, the path it saves you, and the page opening. */
.bento-2 .tile-vis { min-height: 380px; }
.tile .path { margin-top: 10px; font-size: 0.95rem; color: var(--ink-3); }
.tile .path span { color: var(--ink-2); font-weight: 500; }
.set-vis .sys { width: min(560px, 90%); grid-template-columns: 168px 1fr; opacity: 0; transform: translate(-50%, 14px) scale(0.98); }
.set-vis[data-step="done"] .sys { opacity: 1; transform: translateX(-50%); }
.sys-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.sys-back { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: rgba(0, 0, 0, 0.05); color: #6E6E73; font-size: 15px; line-height: 1; }
.sys-bar b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-cap { margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 600; color: #6E6E73; }
.li-app { display: flex; align-items: center; gap: 8px; }
.li-app img { width: 22px; height: 22px; }
.li-app img[src*="octaflow"] { width: 18px; height: 18px; margin: 2px; border-radius: 4px; }
.sys-row small { font-size: 11px; color: #8E8E93; }
.sys-row.sys-pm { justify-content: flex-start; gap: 0; padding: 0; }
.sys-pm span { width: 30px; height: 26px; display: grid; place-items: center; border-right: 0.5px solid rgba(0, 0, 0, 0.08); color: #6E6E73; font-size: 14px; }
.tog { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #D1D1D6; }
.tog.on { background: #2F7CF6; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.tog.on::after { left: 14px; }
.sys-note { margin: 10px 4px 0; font-size: 11.5px; line-height: 1.4; color: #8E8E93; }

/* Works across your Mac: the apps, one request each */
.apps { margin-top: 56px; display: grid; justify-items: center; gap: 30px; }
.app-say {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 54px; padding: 12px 24px 12px 20px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -22px rgba(11, 27, 34, 0.35); font-size: 1.1rem; color: var(--ink);
}
.app-say .wave { flex: none; height: 16px; }
#app-said { min-width: 0; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-say.swap #app-said { opacity: 0; transform: translateY(3px); }
.app-row { list-style: none; margin: 0; padding: 0 0 26px; display: flex; justify-content: center; gap: clamp(8px, 2vw, 24px); }
.app-row li:nth-child(1), .app-row li:nth-child(8) { transform: translateY(26px); }
.app-row li:nth-child(2), .app-row li:nth-child(7) { transform: translateY(11px); }
.app-row li:nth-child(3), .app-row li:nth-child(6) { transform: translateY(3px); }
.app { display: block; padding: 0; border: 0; border-radius: 22%; background: none; cursor: pointer; transform-origin: 50% 100%; }
/* The row zooms like the Dock (home.js): pointer devices with the row on one line. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .apps { gap: 48px; }
}
.app img {
  display: block; width: clamp(60px, 7.4vw, 104px); height: auto;
  filter: drop-shadow(0 10px 14px rgba(11, 27, 34, 0.12));
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease), opacity 0.5s var(--ease);
}
.app-row:has(.app.on) .app:not(.on) img { opacity: 0.72; }
.app.on img { transform: translateY(-14px) scale(1.08); filter: drop-shadow(0 18px 18px rgba(11, 27, 34, 0.2)); }
.app-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Your yes */
.yes-stage { position: relative; margin: 56px auto 0; height: clamp(400px, 36vw, 480px); border-radius: 32px; overflow: hidden; background-position: 38% 62%; font: 400 15px/1.35 var(--sys); color: #1D1D1F; }
.gbar-yes { top: 30px; width: auto; min-height: 52px; padding: 9px 9px 9px 16px; font-size: 15px; }
.gbar-yes .gs { width: auto; }
.gbar-yes .gs > span:not(.gbtn, .gx) { flex: 0 1 auto; }
.gbar-yes .gbtn { font-size: 13px; padding: 6px 14px; }
.mailwin { left: 50%; top: 118px; bottom: -40px; width: min(660px, 88%); transform: translateX(-50%); }
#yes-stage[data-step="sent"] .mailwin { opacity: 0; transform: translate(-50%, -14px) scale(0.97); }
.mail-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px; border-bottom: 0.5px solid #E5E5EA; }
.mail-title { font-size: 13px; font-weight: 600; color: #3A3A3C; }
.mail-send { justify-self: end; width: 20px; height: 20px; color: var(--accent); }
.mail-field { display: flex; gap: 8px; padding: 10px 22px; border-bottom: 0.5px solid #EDEDF0; font-size: 14px; }
.mail-field span { color: #8E8E93; }
.mail-body { padding: 18px 22px; font-size: 16px; }
.mail-quote { margin-top: 18px; padding-left: 12px; border-left: 2px solid #C7D7F0; color: #6E6E73; font-size: 13.5px; }
.trio { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.trio li { padding-top: 20px; border-top: 1px solid var(--hair); color: var(--ink-2); }
.trio b { display: block; margin-bottom: 6px; font-size: 1.1rem; color: var(--ink); }

/* FAQ */
.home2 .faq-list { margin: 48px auto 0; max-width: 820px; }
.home2 .faq summary { color: var(--ink); }
.home2 .faq summary::after { border-color: var(--ink-3); }

/* Close: one bright band of sea */
.h-close { padding: clamp(110px, 12vw, 160px) 0 0; }
.close-band {
  position: relative; overflow: hidden; padding: clamp(84px, 10vw, 132px) 24px; border-radius: 36px; text-align: center; color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 45, 80, 0.32), rgba(0, 45, 80, 0.12)),
    #0F6E96 image-set(url("/img/sea-1440.webp") 1x, url("/img/sea.webp") 2x) 78% 4% / cover no-repeat;
}
.close-band h2 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; text-shadow: 0 2px 30px rgba(0, 40, 70, 0.25); }
.close-band p { margin: 20px auto 0; max-width: 40ch; font-size: 1.15rem; color: rgba(255, 255, 255, 0.92); }
.close-band .btn { margin-top: 36px; }

/* Footer on white */
.home2 .site-footer { margin-top: clamp(80px, 9vw, 120px); border-top: 0; }
.home2 .site-footer a:hover { color: var(--ink); }

/* ───────── Motion ───────── */

@media (prefers-reduced-motion: no-preference) {
  .h-copy > * { animation: h-in 1.2s var(--ease) both; }
  .h-copy > :nth-child(2) { animation-delay: 0.08s; }
  .h-copy > :nth-child(3) { animation-delay: 0.16s; }
  .mac { animation: h-in 1.4s var(--ease) 0.25s both; }
  @keyframes h-in { from { opacity: 0; transform: translateY(20px); } }

}
@media (prefers-reduced-motion: reduce) {
  .caret, .wave i, .spot-prog i, .gs { animation: none; }
  .gbar, .tile-vis .win, .yes-stage .win, .say-stage .win, .octa-cursor, .app img { transition: none; }
}
.ambient-paused .caret, .ambient-paused .spot-prog i { animation-play-state: paused; }

/* ───────── Small screens ───────── */

@media (max-width: 900px) {
  .bento, .trio { grid-template-columns: 1fr; }
  .tile-wide { grid-column: auto; }
  .tile-wide .tile-vis { min-height: 360px; }
  .sys, .set-vis .sys { grid-template-columns: 1fr; }
  .sys-side { display: none; }
  .app-row { flex-wrap: wrap; max-width: 460px; padding-bottom: 0; row-gap: 22px; }
  .app-row li { transform: none !important; }
  .trio { margin-top: 56px; gap: 28px; }
}
@media (max-width: 420px) {
  .app-say { border-radius: 22px; padding: 10px 18px 10px 16px; }
  #app-said { white-space: normal; text-align: left; }
  .modes { gap: 8px; }
  .mode i { width: 46px; height: 30px; }
  .sys-main { padding: 14px 14px; }
  .sys-row { flex-wrap: wrap; row-gap: 8px; padding: 10px 11px; }
  .sys { width: 90%; }
}
@media (max-width: 560px) {
  .tile-copy { padding: 26px 24px 22px; }
  .tile-vis { margin: 0 10px 10px; min-height: 320px; }
  .gbar { top: 14px; }
  .yes-stage { border-radius: 24px; }
  .gbar-yes { width: calc(100% - 28px); font-size: 13px; }
  .gbar-yes .gs { width: 100%; }
  .gbar-yes .gs > span:not(.gbtn, .gx) { flex: 1 1 auto; white-space: normal; }
  .mailwin { top: 130px; }
  .finder { grid-template-columns: 1fr; }
  .finder-side { display: none; }
  .close-band { border-radius: 26px; }
  .say-stage { height: 400px; border-radius: 24px; }
  .say-stage .dw { top: 80px; width: 90%; }
  .say-dock img { width: 38px; height: 38px; }
  .dw-body { font-size: 14px; }
  .app-say { font-size: 0.98rem; }
  .apps > * { max-width: 100%; }
  .mac-foot { font-size: 0.88rem; }
}

/* Phones: the headline breaks after "Mac,", the intro stops at "across your
   apps" (the yes has its own section further down), a little more air, and
   the caption under the Mac centered like everything above it. */
@media (max-width: 600px) {
  .h-hero h1 > span { display: block; }
  .h-lede { margin-top: 18px; font-size: 1.04rem; line-height: 1.6; }
  .lede-more { display: none; }
  .h-actions { margin-top: 30px; }
  .mac-foot, .mac-ctl { justify-content: center; text-align: center; }
}

.water-toggle { color: var(--text-soft); font: 500 0.8rem var(--font); border: 0; background: none; padding: 12px 4px; cursor: pointer; }
.water-toggle:hover { color: var(--text); }