/* Life Desk product page (/life-desk/). Tokens only, class names start with ld-. Spec: docs/DESIGN-SYSTEM.md */

.ld-anchor { scroll-margin-top: 54px; }
.subnav .ld-soon { margin-left: 8px; }
.ld-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* ---------- 1. Hero (S24): the headline beside the team's hero picture (Personal and Work on the desk, Orbilla in front),
   given back to the air on its left and lower edges; --ld-bar is the sub-navigation's height, which the hero slides under. */
.ld-hero { --ld-bar: 54px; margin-top: calc(-1 * var(--ld-bar)); padding-top: calc(var(--nav-h) + var(--ld-bar) + clamp(28px, 3.4vw, 48px)); padding-bottom: clamp(56px, 6.4vw, 96px); overflow: hidden; }
.ld-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(24px, 3vw, 48px); align-items: center; min-height: min(680px, calc(100vh - var(--nav-h) - var(--ld-bar) - 80px)); }
.ld-hero-copy { display: grid; gap: 22px; justify-items: start; }
.ld-hero h1 { font-size: clamp(36px, 3.7vw, 54px); line-height: 1.04; max-width: 16ch; }
.ld-hero .lede { max-width: 42ch; }
.ld-hero .actions, .ld-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ld-hero-scene { margin: 0; display: grid; gap: 10px; }
.ld-hero-scene img { display: block; width: 100%; height: auto;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 14%, #000 92%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 22%, #000 94%, transparent) intersect, linear-gradient(0deg, transparent, #000 14%, #000 92%, transparent); }
.ld-hero-scene figcaption { justify-self: end; padding-right: var(--gutter); }


/* ---------- 2. Two sides (S34, D033): the visitor's own switch. Personal or Work, the side's five places, one phone
   showing the place picked. Work changes the light of the whole section: pine in light mode (D033 lifts "one world per
   mode" here only; site.js sets the world), pine night in dark mode with the switch lit brass. The ground feathers in
   at the top and bottom, never a band. ---------- */
.ld-sides { position: relative; isolation: isolate; overflow-x: clip; --ld-ground: var(--bg); transition: color .9s var(--ease);
  --glass-bg: rgba(var(--pane), var(--pane-a)); --glass-edge: var(--pane-edge);   /* re-read here: the root's are the page's world, not Work's */
  --glass-shadow: inset 0 1px 0 var(--pane-hi), 0 1px 1px rgba(var(--shade), .1), 0 12px 32px -14px rgba(var(--shade), .3), 0 36px 80px -30px rgba(var(--shade), .36); }
.ld-sides::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ld-ground); opacity: 0; transition: opacity .9s var(--ease);
  --f: calc(var(--space-s) * .9);   /* the feather stays inside the section's own air, never under its words */
  -webkit-mask: linear-gradient(180deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent); mask: linear-gradient(180deg, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent); }
.ld-switch[hidden], .ld-places[hidden] { display: none; }
.ld-sides[data-side="work"]::before { opacity: 1; }
[data-mode="dark"] .ld-sides[data-side="work"] { --ld-ground: var(--night); --accent: var(--gold); }
.ld-sides h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.028em; }
.ld-sides .lede { max-width: 34ch; transition: color .9s var(--ease); }
.ld-sides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 5vw, 96px); align-items: center; }
.ld-sides-copy { display: grid; gap: 20px; justify-items: start; }

.ld-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(100%, 520px); margin-top: 16px; padding: 6px; border-radius: 26px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.ld-switch button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 16px 20px; border: 0; border-radius: 20px; background: none; color: inherit; font: inherit; cursor: pointer;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), translate .3s var(--ease); }
.ld-switch b { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.ld-switch span { font-size: 15px; line-height: 1.35; color: var(--muted); transition: color .5s var(--ease); }
.ld-switch [aria-pressed="false"]:hover { background: rgba(var(--pane), .5); translate: 0 -1px; }
.ld-switch [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--lift-1); cursor: default; }
.ld-switch [aria-pressed="true"] span { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }

.ld-places { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px; border-radius: 26px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); }
.ld-places button { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 22px; background: none; color: var(--muted); font: 500 16px/1.2 var(--sans); cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease); }
.ld-places button:hover { color: var(--text); background: rgba(var(--pane), .5); }
.ld-places [aria-pressed="true"], .ld-places [aria-pressed="true"]:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); cursor: default; }

/* The phone: its own tab bar is tappable too (site.js lays five hit areas over the picture's tab bar, measured on the
   660 px screens: the bar runs from about 89.5% to 97% of the height; the hit areas take the screen's full width from 88.5% to 98.5%, at least 44 px each where they show; on phone layouts the places sit right under the phone instead, 4% in from each side). Behind it on Work, a pool of
   brass light, so the change is felt in dark mode as well. */
.ld-sides-phone { position: relative; width: clamp(250px, 28vw, 380px); justify-self: center; }
.ld-sides-grid { position: relative; }
.ld-sides-grid::before { content: ""; position: absolute; z-index: -1; inset: -12% -8% -12% 46%; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 34%, transparent), transparent); }   /* the device's own ::after is its floor shadow */
.ld-sides[data-side="work"] .ld-sides-grid::before { opacity: 1; }
.ld-screens { position: relative; display: grid; }
.ld-screens img { grid-area: 1 / 1; display: block; width: 100%; height: auto; border-radius: var(--screen-r); opacity: 0; transition: opacity .6s var(--ease); }
.ld-screens img.is-on { opacity: 1; z-index: 1; }   /* the new screen fades in on top of the old, which stays whole */
.ld-screens img.is-out { opacity: 1; transition: none; }
.ld-screens img.ld-now { transition: none; }   /* a tap mid-fade: the fade finishes at once, then the next begins */
.ld-tapbar { position: absolute; z-index: 2; left: 0; right: 0; top: 88.5%; height: 10%; display: grid; grid-template-columns: repeat(5, 1fr); }
.ld-tapbar button { border: 0; padding: 0; background: none; cursor: pointer; }
@media (max-width: 700px) { .ld-sides::before { --f: 30px; } }   /* the section's air is about 40 px here */
@media (max-width: 760px) {   /* a phone: the switch, then the phone it changes, then the places under it */
  .ld-sides-grid { grid-template-columns: 1fr; gap: 20px; }
  .ld-sides-copy { display: contents; }
  .ld-switch { order: 1; margin-top: 8px; }
  .ld-sides-phone { order: 2; width: min(58vw, 260px); margin-top: 12px; }
  .ld-places { order: 3; justify-self: center; justify-content: center; }
  .ld-sides [data-say] { order: 4; }
  .ld-sides-grid::before { inset: 22% -30% 8%; }
  .ld-tapbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-sides, .ld-sides::before, .ld-sides .lede, .ld-switch button, .ld-switch span, .ld-places button, .ld-screens img, .ld-sides-grid::before { transition: none; }
}

/* ---------- 3. What's inside, by side, as motion (S35, D040): each claim a headline, one line and a motion graphic (an
   SVG drawn on a 480 x 300 box, ld-motion.js) on a soft desk-ground panel. No row of equal cards: each chapter opens
   wide (graphic 7, words 5), then pairs on 7/5 and 5/7 tracks. The graphic's resting state is its last frame. ---------- */
.ld-chap + .ld-chap { margin-top: clamp(96px, 11vw, 176px); }
.ld-chap-title { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.024em; max-width: 14ch; margin-bottom: clamp(32px, 4vw, 64px); }
.ld-mo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.ld-mo { display: grid; gap: 22px; align-content: start; }
.ld-mo-copy { display: grid; gap: 12px; justify-items: start; align-content: center; }
.ld-mo h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -.022em; max-width: 18ch; }
.ld-mo-copy p:not(.fine):not(.lede) { max-width: 40ch; color: var(--muted); text-wrap: pretty; }
.ld-mo-wide { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; gap: 28px clamp(32px, 5vw, 96px); align-items: center; }
.ld-mo-wide.ld-mo-flip { grid-template-columns: 5fr 7fr; }
.ld-mo-wide.ld-mo-flip .mg-pic { order: 2; }
.ld-mo-7 { grid-column: span 7; }
.ld-mo-5 { grid-column: span 5; }

/* What only Life Desk's graphics draw (the shared palette, type and Replay are in motion.css). */
[data-mo] svg .mo-num.mo-date { font-size: 76px; letter-spacing: -.045em; }
.mo-rec { fill: var(--accent); }
.mo-device { fill: var(--surface); stroke: var(--text); stroke-width: 6; }
.mo-notch { fill: var(--text); }
.mo-ring, .mo-day { fill: none; stroke: var(--gold); stroke-width: 5; }
.mo-day { fill: var(--bg-2); stroke-width: 3; }
.mo-scan { fill: var(--gold); }
.mo-axis { fill: var(--rule); transform-origin: left center; }
.mo-hi { fill: var(--gold); transform-origin: left center; }
.mo-lockbg { fill: var(--mg-notice); }
.mo-locktx { fill: var(--mg-on-notice); }
.mo-col { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mo-tap { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.mo-knob { fill: var(--accent); transform-origin: left center; }
.mo-lab { opacity: 0; }
[data-mo] svg .mo-lab, [data-mo] svg .mo-onk:not(.mo-xs) { font-family: var(--serif); font-weight: 500; font-size: 26px; }
.mo-mark { filter: drop-shadow(0 10px 18px rgba(var(--shade), .25)); }
.mo-scan, .mo-ring, .mo-tap, .mo-in { opacity: 0; }
.mo-chip .lbl-a { opacity: 0; }
.mo-saved, .mo-toast { opacity: 1; }
.mo-form, .fly1, .fly2 { opacity: 0; }

/* ---------- 4. One app instead of five, and 7. Who it's for: the words beside a graphic ---------- */
.ld-mo-five, .ld-mo-who { grid-template-columns: 5fr 7fr; gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
.ld-mo-five .lede { max-width: 34ch; }
.ld-mo-who .ld-head { margin-bottom: 8px; }
.ld-who-list { display: grid; gap: 22px; border-top: 1px solid var(--rule); padding-top: clamp(20px, 2.4vw, 32px); width: 100%; }
.ld-who-list li { display: grid; gap: 10px; align-content: start; }
.ld-who-list h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.ld-who-list p { color: var(--muted); max-width: 36ch; text-wrap: pretty; }

/* ---------- Rows of screens: the app's phones side by side, the app's words under each (S23, as Zen Timer's rows) ----------
   .ld-row-3, -4, -5 set the count; .ld-slide is a row longer than the page that slides at every width, with arrows
   (life-desk.js) from 1000px. Under 1000px every row is a site.css rail. */
.ld-head { max-width: 18ch; margin-bottom: clamp(36px, 4.4vw, 64px); font-size: clamp(32px, 3.6vw, 52px); }
.ld-row-head { display: grid; gap: 16px; justify-items: start; margin-bottom: clamp(36px, 4.4vw, 64px); }
.ld-row-head .lede { max-width: 44ch; }
.ld-row-head > p:not(.lede) { color: var(--muted); }
.ld-row { display: grid; grid-template-columns: repeat(var(--ld-n, 3), minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(16px, 2.2vw, 36px); width: 100%; }
.ld-row-4 { --ld-n: 4; }
.ld-row-5 { --ld-n: 5; }
.ld-card { display: grid; gap: clamp(16px, 1.8vw, 24px); align-content: start; }
.ld-card > .dev { width: min(232px, 100%); justify-self: center; }
.ld-card .dev-body > * { aspect-ratio: 600 / 1304; object-fit: cover; }
.ld-card-copy { display: grid; gap: 6px; align-content: start; }
.ld-card h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.015em; }
.ld-card p { max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ld-more { display: block; margin-top: 6px; font-size: 13px; }
.ld-steps { counter-reset: ld-step; }
.ld-steps .ld-card { counter-increment: ld-step; }
.ld-steps .ld-card-copy::before { content: "0" counter(ld-step); font: 500 15px/1 var(--serif); letter-spacing: .1em; color: var(--gold-text); font-variation-settings: "SOFT" 40, "WONK" 0; }
.ld-row-after { margin-top: clamp(56px, 6vw, 96px); }
.ld-row-note { margin-top: clamp(24px, 3vw, 40px); }
.ld-loop { padding-block: clamp(96px, 10vw, 160px); }
.ld-rail-nav { display: none; }
.ld-rail-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; font: 600 18px/1 var(--sans); color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: box-shadow .3s var(--ease), opacity .3s var(--ease); }
.ld-rail-nav button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent); }
.ld-rail-nav button:disabled { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px var(--rule); }
@media (min-width: 1000px) {
  .ld-row.rail { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; -webkit-mask: none; mask: none; }
  .ld-row.rail.ld-slide { display: flex; gap: clamp(24px, 2.6vw, 40px); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 36px; margin-block: -16px -36px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - max(var(--gutter), 72px)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - max(var(--gutter), 72px)), transparent); }
  .ld-row.rail.ld-slide .ld-card { flex: 0 0 calc((100% - 4 * clamp(24px, 2.6vw, 40px) - var(--gutter)) / 4.4); scroll-snap-align: start; }
  .ld-rail-nav:not([hidden]) { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
}
@media (max-width: 999px) {
  .ld-row.rail { display: flex; gap: 22px; width: auto; padding-block: 16px 28px; margin-block: -16px -28px; }
  .ld-row.rail .ld-card { width: min(232px, 64%); }
  .ld-row.rail.ld-row-after { margin-top: 40px; }
}

/* ---------- 5. Privacy: deep pine, edge to edge (approved wording; styles only) ---------- */
.ld-privacy { padding-block: clamp(200px, 20vw, 300px) clamp(96px, 11vw, 160px); }
.ld-quote { font: 460 clamp(36px, 4.6vw, 66px)/1.06 var(--serif); letter-spacing: -.025em; font-variation-settings: "SOFT" 40, "WONK" 0; max-width: 22ch; text-wrap: balance; }
.ld-promise { max-width: 40ch; font: 400 clamp(20px, 1.8vw, 26px)/1.5 var(--sans); text-wrap: pretty; }
.ld-quote::before { content: ""; display: block; width: 56px; height: 2px; background: var(--gold); margin-bottom: 28px; }
.ld-privacy-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.ld-privacy-pic { width: min(240px, 60vw); justify-self: center; margin: 0; }

/* ---------- The pine close ---------- */
.ld-close { padding-block: clamp(200px, 20vw, 300px) clamp(72px, 8vw, 120px); text-align: center; }
.ld-close-in { display: grid; justify-items: center; }
.ld-close h2 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1; letter-spacing: -.028em; max-width: 14ch; }
.ld-close .lede { margin-top: clamp(20px, 2.2vw, 28px); max-width: 44ch; text-wrap: balance; }
/* D043: the Organizer closes the page, the largest Orbilla on it, glowing on the pine (Life Desk keeps Orbilla off its
   pine without the glow). Orbi's own breath is its only movement, and it stops under Reduce Motion (orbi.css). */
.ld-close-stage { width: min(380px, 66vw); margin-block: clamp(28px, 3.4vw, 48px) clamp(8px, 1.4vw, 20px); }
.ld-close-orbi { width: 100%; }
[data-mode="light"] .ld-close-stage::after { content: ""; display: block; width: 52%; height: 2px; margin: -7% auto 0; border-radius: 1px; background: var(--accent); opacity: .55; }   /* on light it stands on a thin pine line (Life Desk's rule) */
.ld-close-row { width: min(760px, 100%); margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.ld-close .fine { margin-top: 24px; }

/* ---------- 9. Plans, and questions ---------- */
.ld-plans-grid { display: grid; grid-template-columns: 6fr 6fr; gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
.ld-plans-grid .stack > p:not(.lede) { max-width: 44ch; color: var(--muted); }
.ld-plans-soon { padding-left: clamp(20px, 2.4vw, 32px); border-left: 2px solid var(--gold); }
.ld-plan-name { font: 460 clamp(28px, 2.8vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.ld-plans-soon p:not(.ld-plan-name) { color: var(--muted); }
.ld-plans-store { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px clamp(24px, 3vw, 40px); align-items: center; }
.ld-plans-store .fine { grid-column: 1 / -1; }
.ld-price-rows dd b { font: 460 24px/1.2 var(--serif); color: var(--text); }
.ld-flag { display: block; margin-top: 2px; font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
@media (max-width: 520px) { .ld-plans-store { grid-template-columns: minmax(0, 1fr); } .ld-plans-shot { width: min(220px, 70%); justify-self: center; } }
.ld-plans-store .fine { margin-top: 16px; }
.ld-faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 24px clamp(32px, 5vw, 96px); align-items: start; }

/* ---------- Narrower screens ---------- */
@media (max-width: 899px) {
  .ld-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ld-hero-copy { max-width: 560px; }
  .ld-hero-scene { margin-left: calc(-1 * var(--gutter)); }
  .ld-hero-scene img { -webkit-mask: linear-gradient(0deg, transparent, #000 14%); mask: linear-gradient(0deg, transparent, #000 14%); }
  .ld-privacy-grid, .ld-plans-grid, .ld-faq-grid { grid-template-columns: 1fr; }
  .ld-mo-7, .ld-mo-5 { grid-column: 1 / -1; }
  .ld-mo-wide, .ld-mo-wide.ld-mo-flip, .ld-mo-five, .ld-mo-who { grid-template-columns: minmax(0, 1fr); }
  .ld-mo-wide.ld-mo-flip .mg-pic { order: 0; }
  .ld-mo-five .mg-pic, .ld-mo-who .mg-pic { order: -1; }
}
/* The phone's rhythm: sections 40px deep, h2 at 32px. The clip sits beside the feature's words, the scene under them. */
@media (max-width: 699.98px) {
  .ld-anchor, .ld-close, .ld-inside { padding-block: 40px; }
  .ld-chap.ld-anchor { padding-block: 0; }
  .ld-chap + .ld-chap { margin-top: 72px; }
  .ld-privacy.ld-privacy, .ld-close { padding-top: 150px; }          /* room for the sky to turn */
  .ld-hero { padding-top: calc(var(--nav-h) + var(--ld-bar) + 16px); padding-bottom: 32px; }
  .ld-hero-copy { gap: 14px; }
  .ld-hero-scene figcaption { justify-self: center; padding: 0 var(--gutter); }
  .ld-sides-grid { grid-template-columns: 1fr; gap: 32px; }
  .ld-sides-clip { width: min(180px, 50vw); }
  .ld-mo-grid { row-gap: 56px; }
  .ld-mo { gap: 16px; }
  .ld-mo h3 { font-size: 24px; }
  .ld-mo .mg-pic { padding: 8px; border-radius: var(--r-m); }
  .ld-privacy { padding-bottom: 36px; }
  .ld-quote { font-size: 32px; line-height: 1.08; }
  .ld-quote::before { margin-bottom: 12px; }
  .ld-promise { font-size: 18px; }
  .ld-close-row .link-arrow { display: none; }
  .ld-close h2 { margin-top: 14px; }
  .ld-close .lede { margin-top: 14px; }
  .ld-close-row { margin-top: 20px; }
  .ld-close .fine { margin-top: 12px; }
}
@media (max-width: 600px) {
  .ld-anchor h2, .ld-close h2 { font-size: 32px; }
  .subnav .ld-soon { display: none; }
}
@media (max-width: 380px) {
  .ld-anchor, .ld-close, .ld-inside { padding-block: 36px; }
  .ld-chap.ld-anchor { padding-block: 0; }
}