/* site.css — seamside.com. Tokens only (viewer/prefs/os-prefs.css, copied in
   at build); both modes follow the visitor's system. The register is calm:
   one idea per screen, a lot of ground, media carrying each section, and one
   warm moment per page (the glow behind the hero). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--os-font-sans); font-size: var(--os-fs-lg); line-height: 1.55; background: var(--os-bg); color: var(--os-text); -webkit-font-smoothing: antialiased; cursor: auto;
  /* os-prefs.css is the app's sheet: its body never scrolls and never selects. A page does both. */
  overflow: visible; -webkit-user-select: text; user-select: text; }
a { color: inherit; cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: none; box-shadow: var(--os-focus-ring); border-radius: var(--os-radius-sm); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--os-sp-xl); }
.section { padding: 96px 0 0; }
.rule { border-top: 1px solid var(--os-border-color-subtle); }

/* ---- type ---- */
.display { font-family: var(--os-font-serif); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0; text-wrap: balance; font-size: clamp(40px, 1.4rem + 3.1vw, 66px); }
.h2 { font-family: var(--os-font-serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; font-size: clamp(32px, 1.2rem + 2.2vw, 52px); }
.h3 { font-size: var(--os-fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.lede { font-size: clamp(18px, 1rem + 0.35vw, 21px); line-height: 1.5; color: var(--os-text-secondary); margin: 28px 0 0; max-width: 36rem; text-wrap: balance; }
.muted { color: var(--os-text-secondary); }
.fine { font-size: var(--os-fs-sm); color: var(--os-text-muted); }
.label { font-size: var(--os-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--os-text-muted); }

/* ---- buttons: the app's own (teal, squared, pressed by ink) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--os-sp-sm); height: 44px; padding: 0 22px; border-radius: var(--os-radius-md); border: 1px solid transparent; font-size: var(--os-fs-md); font-weight: 500; text-decoration: none; white-space: nowrap; background: var(--os-c1); color: var(--os-c1-fg); transition: background var(--os-transition-fast), border-color var(--os-transition-fast); }
.btn:hover { background: color-mix(in srgb, var(--os-c1), var(--os-text) 12%); }
.btn:active { background: color-mix(in srgb, var(--os-c1), var(--os-text) 24%); }
.btn.ghost { background: transparent; color: var(--os-text); border-color: var(--os-border-color); }
.btn.ghost:hover { background: var(--os-bg-subtle); border-color: var(--os-text-muted); }
.btn.ghost:active { background: var(--os-bg-inset); }
.btn.sm { height: 32px; padding: 0 14px; font-size: var(--os-fs-base); border-radius: var(--os-radius-sm); }
.btn.lg { height: 52px; padding: 0 28px; font-size: var(--os-fs-lg); }
.top .btn.sm { background: var(--os-text); color: var(--os-bg); }
.top .btn.sm:hover { background: color-mix(in srgb, var(--os-text), var(--os-bg) 16%); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-sp-md); margin-top: 40px; }
.link { color: var(--os-text-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--os-border-color); }
.link:hover { color: var(--os-text); }
.arrow { text-decoration: none; font-weight: 500; }
.arrow::after { content: ' →'; transition: margin var(--os-transition-fast); }
.arrow:hover::after { margin-left: 3px; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--os-bg), transparent 18%); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--os-border-color-subtle); }
.top .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.brand small { font-weight: 400; color: var(--os-text-muted); font-size: inherit; }
magic-orb { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; }
.top .main-nav { display: flex; gap: 24px; font-size: var(--os-fs-md); color: var(--os-text-secondary); }
.main-nav a { text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--os-text); }
.top .end { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.guide-link { font-size: var(--os-fs-md); color: var(--os-text-secondary); text-decoration: none; }
.guide-link:hover, .guide-link[aria-current] { color: var(--os-text); }
/* Narrow, the nav is a menu: PRECISION's anchored menu, with rows a thumb can hit. */
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: var(--os-radius-sm); background: none; color: var(--os-text); font-size: 24px; cursor: pointer; }
.menu-btn:hover { background: var(--os-bg-subtle); }
.site-menu { inset: 60px 16px auto auto; margin: 0; min-width: 13rem; padding: 4px; background: var(--os-bg-elevated); color: var(--os-text); border: 1px solid var(--os-border-color); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-lg); }
.site-menu:popover-open { display: flex; flex-direction: column; }
.site-menu a { padding: 12px; font-size: var(--os-fs-md); color: var(--os-text-secondary); text-decoration: none; border-radius: var(--os-radius-sm); }
.site-menu a:hover, .site-menu a[aria-current] { background: var(--os-bg-subtle); color: var(--os-text); }

/* ---- footer ---- */
.foot { margin-top: 160px; border-top: 1px solid var(--os-border-color-subtle); padding: 56px 0 48px; font-size: var(--os-fs-md); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.foot h4 { margin: 0 0 14px; font-size: var(--os-fs-md); font-weight: 500; }
.foot .cols a { display: block; padding: 4px 0; color: var(--os-text-secondary); text-decoration: none; }
.foot .cols a.brand { display: flex; padding: 0; color: var(--os-text); }
.foot .cols a:hover { color: var(--os-text); }
.foot .base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-sp-lg); margin-top: 56px; color: var(--os-text-muted); font-size: var(--os-fs-base); }
/* the Small Craft boat as a mark between the two lines, in the text's own colour */
.foot .base .boat { display: flex; }
.foot .base .boat svg { width: 0.95em; height: 0.95em; opacity: 0.7; }

/* ---- media slots and windows ---- */
.slot { position: relative; margin: 0; border-radius: var(--os-radius-xl); background: var(--os-bg-subtle); border: 1px solid var(--os-border-color-subtle); display: grid; place-items: center; overflow: hidden; aspect-ratio: var(--ar, 16 / 10); }
.slot > figcaption { font-size: var(--os-fs-base); color: var(--os-text-muted); text-align: center; max-width: 24rem; padding: var(--os-sp-lg); }
.slot > figcaption::before { content: attr(data-kind); display: block; font-size: var(--os-fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 6px; }
.show-slots .slot { outline: 2px dashed var(--os-c6); outline-offset: -2px; }
.window { border-radius: var(--os-radius-xl); background: var(--os-bg-surface); border: 1px solid var(--os-border-color); box-shadow: var(--os-shadow-xl); overflow: hidden; }
.window > .bar { display: flex; align-items: center; gap: 5px; height: 25px; padding: 0 11px; border-bottom: 1px solid var(--os-border-color-subtle); }
.window > .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--os-border-color); }
.window > .slot { border: 0; border-radius: 0; }
.capture { margin: 0; }
.capture img { display: block; width: 100%; height: auto; border-radius: var(--os-radius-xl); border: 1px solid var(--os-border-color-subtle); }
.window > .capture img { border: 0; border-radius: 0; }
.g-article > .capture { margin-top: 40px; }

/* ---- small parts ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--os-cSuccess); display: inline-block; flex: none; animation: breathe 3s infinite; }
@keyframes breathe { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.tile { transition: background var(--os-transition-normal), box-shadow var(--os-transition-normal), transform 320ms var(--os-ease-spring); width: 40px; height: 40px; border-radius: var(--os-radius-md); display: grid; place-items: center; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; flex: none; background: color-mix(in srgb, var(--ch), var(--os-bg) 84%); color: var(--ch); }
.tile i { font-size: 1.45em; line-height: 1; }
.tile.logo { background: var(--os-bg-inset); color: var(--os-text); }
.closing .btn.ghost { background: var(--os-bg); }
.tile.logo svg { width: 52%; height: 52%; }
.c1 { --ch: var(--os-c1); } .c3 { --ch: var(--os-c3); } .c5 { --ch: var(--os-c5); } .c7 { --ch: var(--os-c7); } .c8 { --ch: var(--os-c8); } .c9 { --ch: var(--os-c9); } .c11 { --ch: var(--os-c11); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--os-border-color-subtle); color: var(--os-text-secondary); }
.list li:first-child { border-top: 0; }
.code { font-family: var(--os-font-mono); font-size: var(--os-fs-base); line-height: 1.6; background: var(--os-bg-inset); border-radius: var(--os-radius-md); padding: 12px 14px; color: var(--os-text-secondary); white-space: pre-wrap; margin: 0; }

/* A grid of cards with some weight. */
.cells { display: grid; gap: 16px; }
.cells > * { border: 1px solid var(--os-border-color-subtle); border-radius: var(--os-radius-lg); background: var(--os-bg-surface); box-shadow: var(--os-shadow-sm); padding: 28px; }
.cells.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cells.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cells h3 { margin: 0 0 8px; font-size: var(--os-fs-lg); font-weight: 600; }
.cells p { margin: 0; color: var(--os-text-secondary); font-size: var(--os-fs-md); }

/* ---- home ---- */
.hero { position: relative; padding: 112px 0 0; }
.hero .display { max-width: 34ch; text-wrap: pretty; }
.home .hero .lede { max-width: 37rem; }
/* The home headline breaks where it reads best, once there is room for it. */
.hero .display br { display: none; }
@media (min-width: 62rem) { .hero .display br { display: block; } }
.hero .shot { position: relative; margin-top: 88px; }
.hero .shot::before { content: ''; position: absolute; inset: -18% 6% 40%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--os-c1), transparent 55%), transparent); filter: blur(48px); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.split p { margin: 0; color: var(--os-text-secondary); font-size: var(--os-fs-xl); line-height: 1.45; max-width: 30rem; }
/* ---- ideas: the card band, and the page's one bleed ---- */
/* overflow-x alone makes the browser compute overflow-y as auto too, which
   gives the row a second, vertical scroll nobody asked for. */
.fan { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding: 16px 0 28px; }
.fan::-webkit-scrollbar { display: none; }
/* The inset a snapped card rests at belongs to the scroller as scroll-padding,
   not to each card as scroll-margin: Firefox grows the scrollable area so every
   snap position stays reachable, so the margin let the row scroll ~1700px past
   its own content and leave a screenful of nothing. Chrome clamps and hid it. */
.fan { --lead: max(var(--os-sp-xl), (100vw - 76rem) / 2 + var(--os-sp-xl)); scroll-snap-type: x proximity; scroll-padding-left: var(--lead); }
.fan-row { --cw: clamp(20rem, 14rem + 6vw, 24rem); display: flex; align-items: stretch; gap: 20px; width: max-content;
  padding-left: var(--lead); }
/* A real item, not padding: Firefox leaves a scroll container's trailing
   padding out of the scrollable overflow. Its width mirrors the lead, so the
   row travels between two symmetric rests: card one's left edge on the content
   column's left edge, and the last card's right edge on the column's right.
   The negative margin cancels the flex gap in front of it, so the trailing
   space is exactly the lead at every width, including where the gutter is
   narrower than the gap. */
.fan-row::after { content: ''; flex: 0 0 var(--lead); margin-left: -20px; }
/* max-width as well as basis: the row is `width: max-content`, and a
   wrapping flex child (the last card's chips) contributes its widest
   single-line width to that, which inflated the row in Firefox. */
.fan .icard { flex: 0 0 var(--cw); max-width: var(--cw); scroll-snap-align: start; }
/* The lead padding aligns card one to the text column, so it grows at half
   the rate of the window and eats the overflow: at 3440 only 96px was left
   to scroll, and past 3632 none. Cards grow with the viewport above ~1500
   so the band keeps something to pull, and nothing changes below it. */
.icard { --ring: var(--ch); display: flex; flex-direction: column; text-decoration: none; padding: 20px; border-radius: var(--os-radius-xl); background: var(--ch); color: var(--ch-fg); box-shadow: var(--os-shadow-md); transition: transform 320ms var(--os-ease-spring), box-shadow var(--os-transition-normal); }
.icard:focus-visible { border-radius: var(--os-radius-xl); }
/* The hovered card picks itself up and tips. The tip moves a corner about 5px
   into a 20px gap, so it never touches its neighbour and is never stacked over
   one. */
.icard:hover, .icard:focus-visible { transform: translateY(-8px) rotate(-1.2deg); box-shadow: var(--os-shadow-xl); }
.icard:nth-child(even):hover, .icard:nth-child(even):focus-visible { transform: translateY(-8px) rotate(1.2deg); }
.icard:active { transform: translateY(-3px) rotate(-0.4deg); }
.icard:hover .ic-pic img, .icard:focus-visible .ic-pic img { transform: scale(1.04); }
.ic-head { display: block; }
.ic-head b { display: block; font-size: var(--os-fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
/* Who is in the space, as its own page draws them. The ring is the ground the
   faces sit on, so one rule works on the coloured card and the quiet one. */
.who { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--os-fs-base); color: color-mix(in srgb, currentColor, transparent 30%); }
.faces { display: inline-flex; }
.faces i { display: grid; place-items: center; width: 19px; height: 19px; margin-left: -5px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 600; background: color-mix(in srgb, var(--ring), currentColor 28%); box-shadow: 0 0 0 1.5px var(--ring); }
.faces i:first-child { margin-left: 0; }
.ic-pic { position: relative; display: block; margin-top: 14px; border-radius: var(--os-radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
/* Out of flow on purpose: the row is `width: max-content`, and an in-flow
   image whose `width: 100%` cannot resolve against an indefinite size
   contributes its *intrinsic* width instead (these are 2x captures, so
   ~2560px each). That grew the row past its own cards and let it scroll
   a screenful past the end in Firefox. Absolute children size nothing. */
.ic-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--os-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ic-pic img, .icard { transition: none; }
  .icard:hover .ic-pic img, .icard:hover, .icard:focus-visible, .icard:nth-child(even):hover { transform: none; }
}

.icard-more { background: var(--os-text); color: var(--os-bg); justify-content: space-between; }
.icard-more .ic-head b { min-height: 0; font-size: var(--os-fs-2xl); letter-spacing: -0.02em; max-width: 11ch; }
.ic-picks { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-top: 8px; }
.ic-picks span { padding: 6px 12px; border-radius: var(--os-radius-full); background: color-mix(in srgb, var(--os-bg), transparent 88%); font-size: var(--os-fs-base); }
.ic-go { font-weight: 500; font-size: var(--os-fs-md); }

/* The same cards squared up, on the Ideas page. */
.icards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }

/* ---- what each idea would actually look like ---- */
.pv { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px; border-radius: var(--os-radius-md); background: var(--os-bg-elevated); color: var(--os-text); box-shadow: var(--os-shadow-md); font-size: var(--os-fs-sm); line-height: 1.3; }
.pv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; }
.pv-h em { font-style: normal; font-weight: 400; font-size: var(--os-fs-xs); color: var(--os-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a budget: a bar per category, its name under it, the month's plan dashed across */
.pv-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.pv-bars > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 66px; justify-content: flex-end; font-size: var(--os-fs-2xs); color: var(--os-text-muted); }
.pv-bars i { width: 100%; background: var(--ch); border-radius: var(--os-radius-xs) var(--os-radius-xs) 0 0; }
.pv-bars u { position: absolute; left: 0; right: 0; top: 6px; border-top: 1px dashed var(--os-text-muted); }
/* homework */
.pv-task { display: flex; align-items: center; gap: 8px; }
.pv-task i { flex: none; width: 14px; height: 14px; border-radius: var(--os-radius-xs); border: 1.5px solid var(--os-border-color); }
.pv-task.done { color: var(--os-text-muted); text-decoration: line-through; }
.pv-task.done i { background: var(--ch); border-color: var(--ch); }
.pv-track { height: 4px; border-radius: var(--os-radius-full); background: var(--os-bg-inset); margin-top: 2px; }
.pv-track i { display: block; height: 100%; border-radius: var(--os-radius-full); background: var(--ch); }
/* a document two people are in */
.pv-lines i { position: relative; display: block; height: 7px; border-radius: var(--os-radius-full); background: var(--os-bg-inset); margin-bottom: 9px; }
.pv-lines i:last-child { margin-bottom: 0; }
.pv-lines i b { position: absolute; right: -1px; top: -13px; padding: 1px 5px; border-radius: var(--os-radius-xs); background: var(--ch); color: var(--os-bg); font-size: var(--os-fs-2xs); font-weight: 500; }
.pv-lines i b::after { content: ''; position: absolute; right: 0; top: 100%; width: 2px; height: 11px; background: var(--ch); }
/* a mix */
.pv-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 30px; }
.pv-wave i { flex: 1; background: var(--ch); border-radius: var(--os-radius-xs); }
.pv-wave u { position: absolute; left: 41%; top: -2px; bottom: -2px; width: 2px; background: var(--os-text); }
.pv-fader { display: flex; align-items: center; gap: 9px; font-size: var(--os-fs-2xs); color: var(--os-text-muted); }
.pv-fader > span { flex: 1; height: 4px; border-radius: var(--os-radius-full); background: var(--os-bg-inset); }
.pv-fader i { display: block; height: 100%; border-radius: var(--os-radius-full); background: var(--ch); }
/* a roll */
.pv-roll { display: flex; align-items: center; gap: 12px; }
.pv-roll b { flex: none; display: grid; place-items: center; width: 42px; height: 46px; background: var(--ch); color: var(--ch-fg); font-size: var(--os-fs-xl); font-weight: 600; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pv-roll > span { display: flex; flex-direction: column; gap: 2px; color: var(--os-text-muted); font-size: var(--os-fs-xs); }
.pv-roll em { font-style: normal; font-size: var(--os-fs-md); font-weight: 600; color: var(--os-text); }
/* a menu */
.pv-item { display: flex; align-items: center; gap: 8px; }
.pv-item em { margin-left: auto; font-style: normal; color: var(--os-text-muted); font-variant-numeric: tabular-nums; }
.pv-item i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ch); color: var(--ch-fg); font-style: normal; font-size: var(--os-fs-xs); font-weight: 600; }

/* ---- the prompt: pick what it's for, and it offers three ---- */
.prompt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
.prompt-chips button { padding: 8px 16px; border-radius: var(--os-radius-full); border: 1px solid var(--os-border-color-subtle); background: var(--os-bg-surface); font-size: var(--os-fs-md); transition: border-color var(--os-transition-fast), background var(--os-transition-fast); }
.prompt-chips button:hover { border-color: var(--os-text-muted); }
.prompt-chips button[aria-selected="true"] { background: var(--os-text); color: var(--os-bg); border-color: var(--os-text); }
.ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.tile-idea { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: var(--os-radius-lg); background: var(--os-bg-subtle); }
.tile-idea p { margin: 0; font-size: var(--os-fs-lg); line-height: 1.4; text-wrap: pretty; }
.say-it { display: block; padding: 12px 14px; border-radius: var(--os-radius-md); background: var(--os-bg-inset); font-family: var(--os-font-mono); font-size: var(--os-fs-sm); line-height: 1.45; color: var(--os-text-secondary); }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.itag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-family: var(--os-font-mono); font-size: var(--os-fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--os-text-muted); text-decoration: none; }
.itag:hover { color: var(--os-text); }
.itag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ch); }
.prompt-again { margin-top: 20px; }
.prompt-again:disabled { opacity: 0.4; cursor: default; }
.app { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--os-radius-lg); border: 1px solid var(--os-border-color-subtle); text-decoration: none; background: var(--os-bg-surface); box-shadow: var(--os-shadow-sm); transition: border-color var(--os-transition-fast), transform var(--os-transition-fast); }
.app:active { transform: scale(0.98); }
.app:hover { border-color: var(--os-border-color); }
.app b { font-weight: 500; font-size: var(--os-fs-md); }
.ledger { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border-radius: var(--os-radius-xl); overflow: hidden; }
.ledger > div { padding: 36px 44px; background: var(--os-bg-subtle); }
.ledger .label { margin: 0 0 12px; }
.ledger .list { font-size: var(--os-fs-xl); }
.ledger .list li { padding: 12px 0; }
.ledger .ours { background: var(--os-contrast-surface); color: var(--os-contrast-text); }
.ledger .ours .label { color: var(--os-contrast-text-muted); }
.ledger .ours .list li { color: var(--os-contrast-text); border-top-color: var(--os-contrast-surface-raised); }
.close { text-align: left; }
.home .section { padding-top: 136px; }
/* The last word on the home page, over the people it is for: seamside.com's
   photographs, dimmed, one fading into the next. */
.closing { margin-top: 136px; padding: 136px 0 32px; border-top: 1px solid var(--os-border-color-subtle); }
/* The picture runs off the bottom-right and is cut by the section, so the foot
   of the page shows the corner of the app rather than a framed thumbnail. */
.closing.has-shot { position: relative; overflow: hidden; padding-bottom: 140px; }
/* The footer's own rule is the line the picture is cut at, so it carries no
   gap of its own on a page that ends this way. */
body:has(.closing.has-shot) .foot { margin-top: 0; }
.closing.has-shot .close { position: relative; z-index: 1; }
.closing.has-shot .close > * { max-width: 32rem; }
.close-shot { position: absolute; top: 132px; left: max(calc(50% + 2rem), 23rem); width: 52rem; pointer-events: none; }
.close-shot .window { box-shadow: var(--os-shadow-xl); }
.home .foot { margin-top: 0; border-top: 0; }
.foot .tagline { max-width: 16rem; margin-top: 14px; text-wrap: balance; }

.more-link { margin: 8px 0 0; font-size: var(--os-fs-md); }

/* the network section: a stepped rail, and a network feeding one space */
.net { display: flex; flex-direction: column; gap: 16px; }
.steps-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.steps-rail::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 2px; background: var(--os-border-color); }
.steps-rail::after { content: ''; position: absolute; left: 12.5%; top: 11px; height: 2px; width: var(--fill, 0%); background: var(--os-c1); transition: width 400ms var(--os-ease-out); }
.steps-rail button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; padding: 0 4px 8px; color: var(--os-text-muted); font-size: var(--os-fs-md); }
.steps-rail button:hover { color: var(--os-text); }
.steps-rail b { font-weight: 500; }
.steps-rail .stop { width: 24px; height: 24px; border-radius: 50%; background: var(--os-bg); border: 2px solid var(--os-border-color); transition: background var(--os-transition-fast), border-color var(--os-transition-fast), transform 300ms var(--os-ease-spring); }
.steps-rail button.done .stop { border-color: var(--os-c1); background: color-mix(in srgb, var(--os-c1), var(--os-bg) 70%); }
.steps-rail button[aria-selected="true"] { color: var(--os-text); }
.steps-rail button[aria-selected="true"] .stop { background: var(--os-c1); border-color: var(--os-c1); transform: scale(1.15); }
.stage { min-height: 33rem; padding: 36px 40px 40px; border-radius: var(--os-radius-xl); background: var(--os-bg-subtle); border: 1px solid var(--os-border-color-subtle); display: flex; flex-direction: column; align-items: center; }
.scene { margin: 0 0 28px; font-size: var(--os-fs-lg); text-align: center; min-height: 1.6em; }
.nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.node { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--os-radius-md); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); box-shadow: var(--os-shadow-sm); font-size: var(--os-fs-md); }
.node svg { width: 32px; height: 32px; color: var(--os-text); flex: none; }
.node .face { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; background: color-mix(in srgb, var(--ch), var(--os-bg-surface) 70%); color: var(--ch); margin-left: -4px; }
.node.theirs { border-style: dashed; }
.new { animation: rise 420ms var(--os-ease-spring) both; }
.bus { width: 2px; height: 36px; margin: 6px 0; background: repeating-linear-gradient(180deg, var(--os-c1) 0 6px, transparent 6px 12px); background-size: 2px 24px; animation: flowdown 1s linear infinite; }
.space-card { width: min(34rem, 100%); padding: 16px 20px; border-radius: var(--os-radius-lg); background: var(--os-bg-surface); border: 1px solid var(--os-border-color); box-shadow: var(--os-shadow-md); }
.space-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.space-head small { margin-left: auto; color: var(--os-text-muted); font-size: var(--os-fs-sm); font-feature-settings: 'tnum' 1; }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--os-border-color-subtle); font-size: var(--os-fs-md); }
.item .from { color: var(--os-text-muted); font-size: var(--os-fs-sm); }
.item .when { margin-left: auto; font-size: var(--os-fs-xs); padding: 2px 8px; border-radius: var(--os-radius-full); background: var(--os-bg-inset); color: var(--os-text-secondary); white-space: nowrap; }
.item .when.always { background: color-mix(in srgb, var(--os-cSuccess), transparent 85%); color: var(--os-cSuccess); }
.item .tag { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ch, var(--os-c1)); }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes flowdown { to { background-position: 0 24px; } }
@media (prefers-reduced-motion: reduce) { .new, .bus { animation: none; } }

/* the home page's still network, beside its heading */
.net.still .stage { min-height: 0; padding: 32px; }
.net.still .nodes { gap: 8px; }
.net.still .node { font-size: var(--os-fs-base); padding: 6px 12px 6px 6px; }
.net.still .node svg { width: 26px; height: 26px; }

/* ---- field guide ---- */
.g-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-cards.small { grid-template-columns: repeat(2, 1fr); }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--os-radius-lg); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); box-shadow: var(--os-shadow-sm); text-decoration: none; transition: box-shadow var(--os-transition-fast), transform var(--os-transition-fast); }
.g-card:hover { box-shadow: var(--os-shadow-md); }
.g-card:active { transform: scale(0.99); }
.g-card .tile { margin-bottom: 10px; }
.g-card b { font-weight: 600; font-size: var(--os-fs-lg); }
.g-card span { color: var(--os-text-secondary); font-size: var(--os-fs-md); }
.g-layout { display: grid; grid-template-columns: 13rem minmax(0, 46rem); gap: 64px; padding-top: 72px; }
.g-side { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: var(--os-fs-md); }
.g-side a { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--os-radius-sm); text-decoration: none; color: var(--os-text-secondary); }
.g-side a:hover { background: var(--os-bg-subtle); color: var(--os-text); }
.g-side a[aria-current] { background: var(--os-bg-surface); color: var(--os-text); font-weight: 500; box-shadow: var(--os-shadow-xs); }
.g-side .g-home { font-size: var(--os-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--os-text-muted); margin-bottom: 8px; }
.g-side > a i { font-size: 17px; color: var(--os-text-muted); }

/* ---- Field Guide search: a field in the rail, results wider than it ---- */
.g-find { position: relative; margin: 0 0 12px; }
.g-find input { width: 100%; height: 34px; padding: 0 12px; border-radius: var(--os-radius-sm); border: 1px solid var(--os-border-color-subtle); background: var(--os-bg-surface); color: var(--os-text); font: inherit; font-size: var(--os-fs-md); }
.g-find input::placeholder { color: var(--os-text-muted); }
.g-find input:focus-visible { border-color: var(--os-c1); box-shadow: none; outline: none; }
.g-results { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: 26rem; max-width: calc(100vw - 3rem); max-height: 23rem; overflow-y: auto; padding: 6px; border-radius: var(--os-radius-lg); border: 1px solid var(--os-border-color); background: var(--os-bg-elevated); box-shadow: var(--os-shadow-xl); }
.g-results a { display: block; padding: 9px 11px; border-radius: var(--os-radius-sm); text-decoration: none; color: var(--os-text-secondary); font-size: var(--os-fs-base); line-height: 1.4; }
.g-results a:hover, .g-results a.on { background: var(--os-bg-subtle); color: var(--os-text); }
.g-results .g-page { font-weight: 500; color: var(--os-text); }
.g-results .g-where { display: block; margin-bottom: 2px; font-size: var(--os-fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--os-text-muted); }
.g-results .g-where i { font-style: normal; }
.g-results .g-where i::before { content: ' \203A  '; }
.g-results mark { background: color-mix(in srgb, var(--os-c1), transparent 78%); color: inherit; border-radius: 2px; }
.g-none { margin: 0; padding: 9px 11px; color: var(--os-text-muted); font-size: var(--os-fs-base); }
/* the line a result pointed at */
.g-article :target { background: color-mix(in srgb, var(--os-c1), transparent 88%); box-shadow: 0 0 0 6px color-mix(in srgb, var(--os-c1), transparent 88%); border-radius: var(--os-radius-xs); scroll-margin-top: 96px; }
.hero .g-find { max-width: 26rem; margin-top: 32px; }
.g-side > a[aria-current] i { color: var(--os-c1); }
.g-article > .tile { width: 48px; height: 48px; font-size: 18px; margin-bottom: 20px; }
.g-article .display { font-size: clamp(36px, 1.4rem + 2.4vw, 56px); }
.g-article > .lede { margin-top: 16px; }
.g-article > .slot, .g-article > .g-media, .g-article > .net { margin-top: 40px; }
.g-sec { margin-top: 48px; }
.g-sec h2 { margin: 0 0 12px; font-size: var(--os-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--os-text-muted); }
.g-sec ul, .g-sec ol { margin: 0; padding: 0; list-style: none; }
.g-sec li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--os-border-color-subtle); font-size: var(--os-fs-lg); line-height: 1.5; }
.g-sec ul li::before { content: ''; position: absolute; left: 6px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--os-c1); }
.g-sec ol { counter-reset: g; }
.g-sec ol li::before { counter-increment: g; content: counter(g); position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--os-fs-xs); font-weight: 600; background: var(--os-c1); color: var(--os-c1-fg); }
.g-sec code { font-family: var(--os-font-mono); font-size: 0.88em; padding: 1px 5px; border-radius: 4px; background: var(--os-bg-inset); }
.g-sec li a { color: var(--os-c1); }
.g-sec .code { margin-top: 12px; }
.g-sec h3 { margin: 20px 0 6px; font-size: var(--os-fs-md); font-weight: 600; color: var(--os-text); }
.g-sec > p, .g-intro { margin: 0 0 12px; font-size: var(--os-fs-lg); line-height: 1.6; color: var(--os-text); max-width: 42rem; }
.g-intro { margin-top: 32px; }
.g-sec .g-cards { margin-top: 4px; }
.g-media { margin: 0; }
.g-media img, .g-media video { width: 100%; border-radius: var(--os-radius-xl); border: 1px solid var(--os-border-color-subtle); }
.g-media figcaption { margin-top: 8px; font-size: var(--os-fs-sm); color: var(--os-text-muted); }
.g-article .net .steps-rail b { font-size: var(--os-fs-base); }
.g-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--os-border-color-subtle); }
.g-pager a { display: flex; flex-direction: column; text-decoration: none; font-weight: 500; }
.g-pager a.next { text-align: right; }
.g-pager small { color: var(--os-text-muted); font-weight: 400; font-size: var(--os-fs-sm); }

/* ---- tool pages ---- */
.crumb { display: flex; gap: 8px; font-size: var(--os-fs-md); color: var(--os-text-muted); margin-bottom: 24px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--os-text); }
.pair { display: flex; align-items: center; justify-content: center; gap: 24px; aspect-ratio: 4 / 3; border-radius: var(--os-radius-xl); background: var(--os-bg-subtle); border: 1px solid var(--os-border-color-subtle); }
.pair .tile, .pair magic-orb { width: 80px; height: 80px; border-radius: var(--os-radius-xl); font-size: 28px; }
.pair magic-orb { border-radius: 50%; }
.pair .to { color: var(--os-text-muted); font-size: 28px; }
.hero-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; padding-top: 96px; }
.steps { counter-reset: step; }
.steps > div::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--os-c1); color: var(--os-c1-fg); font-size: var(--os-fs-base); font-weight: 600; margin-bottom: 20px; }
.steps .code { margin-top: 16px; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path { padding: 36px; border-radius: var(--os-radius-xl); border: 1px solid var(--os-border-color-subtle); background: var(--os-bg-surface); box-shadow: var(--os-shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.path.ours { border-color: color-mix(in srgb, var(--os-c1), var(--os-border-color) 40%); background: color-mix(in srgb, var(--os-c1), var(--os-bg-surface) 92%); }
.path p { margin: 0; color: var(--os-text-secondary); }
.path .list { margin-top: 8px; flex: 1; }
.path .code { margin-top: 12px; }
.faq { max-width: 48rem; }
.faq details { border-top: 1px solid var(--os-border-color-subtle); }
.faq details:last-child { border-bottom: 1px solid var(--os-border-color-subtle); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: var(--os-fs-xl); font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--os-text-muted); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 24px; color: var(--os-text-secondary); max-width: 40rem; }
.others { display: grid; grid-template-columns: repeat(5, 1fr); }
.cells.others { gap: 10px; }
.others a { display: flex; align-items: center; gap: 12px; padding: 18px 20px; text-decoration: none; font-weight: 500; font-size: var(--os-fs-md); }
.others a { transition: box-shadow var(--os-transition-normal), transform var(--os-transition-normal) var(--os-ease-spring), border-color var(--os-transition-fast); }
/* A nudge that says it goes somewhere: the card lifts and an arrow slides in. */
.others a::after { content: '→'; margin-left: auto; color: var(--os-c1); opacity: 0; transform: translateX(-6px); transition: opacity var(--os-transition-fast), transform var(--os-transition-normal) var(--os-ease-spring); }
.others a:hover, .others a:focus-visible { transform: translateY(-2px); box-shadow: var(--os-shadow-lg); border-color: var(--os-border-color); }
.others a:hover::after, .others a:focus-visible::after { opacity: 1; transform: none; }
.others a:active { transform: translateY(0) scale(0.98); box-shadow: var(--os-shadow-sm); }
@media (prefers-reduced-motion: reduce) { .others a, .others a::after { transition: none; } .others a:hover { transform: none; } }
.others .tile { width: 30px; height: 30px; font-size: 11px; border-radius: var(--os-radius-sm); }
.others.cells > * { padding: 14px 16px; }
.catchalls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.catch { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px; border-radius: var(--os-radius-lg); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); box-shadow: var(--os-shadow-sm); text-decoration: none; transition: box-shadow var(--os-transition-normal), transform var(--os-transition-normal) var(--os-ease-spring); }
.catch:hover { box-shadow: var(--os-shadow-lg); transform: translateY(-2px); }
.catch:active { transform: translateY(0) scale(0.99); }
.catch h3 { margin: 6px 0 0; font-size: var(--os-fs-xl); font-weight: 600; letter-spacing: -0.01em; }
.catch p { margin: 0; color: var(--os-text-secondary); }
.catch .go { color: var(--os-c1); font-weight: 500; font-size: var(--os-fs-md); margin-top: 4px; }

/* ---- download ---- */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.platforms.two { grid-template-columns: repeat(2, 1fr); }
.platform { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: var(--os-radius-lg); border: 1px solid var(--os-border-color-subtle); background: var(--os-bg-surface); box-shadow: var(--os-shadow-sm); scroll-margin-top: 96px; }
.platform.mine { border-color: color-mix(in srgb, var(--os-c1), var(--os-border-color) 30%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-c1), transparent 82%), var(--os-shadow-sm); }
.platform .head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.platform .head > div { flex: 1; min-width: 9rem; }
.platform .head .fine { margin: 2px 0 0; }
/* One badge, wherever something is marked: the download page's platforms and
   the pricing page's tier. It resets case and tracking because it is used
   inside .label, which sets both. */
.badge { display: inline-block; font-size: var(--os-fs-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--os-radius-full); white-space: nowrap; background: var(--os-bg-inset); color: var(--os-text-muted); text-transform: none; letter-spacing: normal; }
.platform .yours, .platform .badge { margin-left: auto; align-self: flex-start; font-size: var(--os-fs-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--os-radius-full); white-space: nowrap; }
.platform .yours { display: none; background: color-mix(in srgb, var(--os-c1), transparent 85%); color: var(--os-c1); }
.platform.mine .yours { display: inline-block; }
.platform .badge { background: var(--os-bg-inset); color: var(--os-text-muted); }
.platform .files { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; }
.platform.soon { gap: 0; box-shadow: none; background: transparent; border-style: dashed; }
.platform .yours-word { display: none; }
.platform.soon.mine .yours-word { display: inline; }
.platform.soon.mine { box-shadow: none; }

/* ---- pricing ---- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Plus is lighter than Free, not smaller than it: same padding and the same
   price size, so the two lists start on the same line and read across. */
.plan.plus { background: transparent; box-shadow: none; }
.plan { padding: 36px; border-radius: var(--os-radius-lg); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); box-shadow: var(--os-shadow-sm); }
/* a badge is taller than the label text, which pushed one column down by 6px */
.plan .label { display: flex; align-items: center; gap: 8px; min-height: 26px; }
/* one line each, so the two prices and both lists stay on the same rails */
.plan-for { margin: 10px 0 0; min-height: 1.5em; color: var(--os-text-secondary); font-size: var(--os-fs-md); }
.plan .price { margin: 14px 0 24px; font-family: var(--os-font-serif); font-weight: 700; font-size: 48px; letter-spacing: -0.02em; line-height: 1; }
.plan .price span { font-family: var(--os-font-sans); font-weight: 400; font-size: var(--os-fs-md); letter-spacing: 0; color: var(--os-text-muted); }

/* ---- use-case pages ---- */
/* The photograph belongs to the hero and the picture under it, so it is
   anchored to a box that holds both and is sized by them. Hung off `main` it
   resolves against the viewport instead, and its scale changes with the
   window's height rather than with the page. */
.case-top { position: relative; overflow: hidden; }
.case-hero { position: relative; display: flex; align-items: center; min-height: 34rem; padding: 56px 0 36px; }
/* An off-centre ellipse, larger than the space it shows in, so the photograph
   dissolves on a curve and no straight edge of it is ever on screen. */
.case-photo { position: absolute; top: 0; height: 82%; left: -10%; width: min(76%, 66rem);
  -webkit-mask-image: radial-gradient(73% 65% at 32% 14%, var(--os-text) 20%, transparent 90%);
  mask-image: radial-gradient(73% 65% at 32% 14%, var(--os-text) 20%, transparent 90%); }
.case-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-shot { padding: 0 0 72px; }
.case-say { position: relative; z-index: 1; width: min(44%, 32rem); margin-left: auto; }
.case-say .crumb { margin: 0 0 20px; }
@media (max-width: 60rem) {
  .case-top { overflow: visible; }
  .case-hero { display: block; min-height: 0; padding: 0 0 40px; }
  .case-photo { position: relative; top: 0; left: 0; width: 100%; height: 21rem;
    -webkit-mask-image: radial-gradient(100% 82% at 44% 30%, var(--os-text) 34%, transparent 94%);
    mask-image: radial-gradient(100% 82% at 44% 30%, var(--os-text) 34%, transparent 94%); }
  .case-say { width: auto; margin: -56px 0 0; }
  .idea-shot { margin-top: 0; }
}
.idea-shot { max-width: 58rem; margin: 0 auto; position: relative; }
.section.rule { padding-top: 56px; }
.section.rule .label { display: block; margin-bottom: 24px; }
.minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mini { --ring: var(--os-bg-subtle); display: block; padding: 12px; border-radius: var(--os-radius-lg); background: var(--os-bg-subtle); color: var(--os-text); text-decoration: none; transition: transform 320ms var(--os-ease-spring), box-shadow var(--os-transition-normal), background var(--os-transition-normal), color var(--os-transition-normal); }
.mini:hover, .mini:focus-visible { --ring: var(--ch); transform: translateY(-4px) rotate(-1deg); box-shadow: var(--os-shadow-lg); background: var(--ch); color: var(--ch-fg); }
.mini:focus-visible { border-radius: var(--os-radius-lg); }
.mini-pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--os-radius-md); overflow: hidden; }
.mini-pic img { width: 100%; height: 100%; object-fit: cover; }
.mini b { display: block; margin-top: 10px; font-size: var(--os-fs-md); font-weight: 600; line-height: 1.25; }
.mini .who { margin-top: 8px; font-size: var(--os-fs-sm); }
.mini .faces i { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .mini, .mini:hover { transform: none; transition: none; } }

@media (max-width: 60rem) {
  .top .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .g-layout, .plans, .platforms, .platforms.two, .ledger, .split, .hero-2, .paths, .case { grid-template-columns: 1fr; }
  .icards { grid-template-columns: 1fr 1fr; }
  .ideas-grid { grid-template-columns: 1fr; }
  .cells.cols-3, .cells.cols-4 { grid-template-columns: 1fr 1fr; }
  .minis { grid-template-columns: repeat(3, 1fr); }
  .others { grid-template-columns: 1fr 1fr; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .section { padding-top: 96px; }
  .case .card { right: 0; }
}
@media (max-width: 60rem) {
  .steps-rail b { font-size: var(--os-fs-sm); text-align: center; }
  .g-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .g-side .g-home { width: 100%; }
  .g-cards, .g-cards.small { grid-template-columns: 1fr; }
  .stage { padding: 24px 16px; }
}
@media (max-width: 40rem) {
  .guide-link { display: none; }   /* the footer carries it at this width */
}
@media (max-width: 36rem) {
  .cells.cols-2, .cells.cols-3, .cells.cols-4 { grid-template-columns: 1fr; }
  .icards, .ideas-grid { grid-template-columns: 1fr; }
  .fan { --lead: var(--os-sp-lg); }
  .minis { grid-template-columns: 1fr 1fr; }
  .fan-row { --cw: 17rem; }
  .wrap { padding: 0 var(--os-sp-lg); }
}

.hero.share .lede { max-width: 46rem; }

/* The tray's own icon: the line-art mark the menu bar shows, in the text color around it. */
.tray-mark { display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url(/media/tray-symbolic.svg) center / contain no-repeat; mask: url(/media/tray-symbolic.svg) center / contain no-repeat; }

/* home: the three ways in, drawn as home's own doors (frames/home_tiles doors.webp,
   one painting across the row), then one short beat for the menu bar and sharing. */
.ways-in .doors { --gap: var(--os-sp-lg); --row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 48px; }
.ways-in .door { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--os-bg-surface);
  border: 1px solid var(--os-border-color-subtle); border-radius: var(--os-radius-lg); box-shadow: var(--os-shadow-sm); overflow: hidden;
  transition: transform var(--os-transition-normal), box-shadow var(--os-transition-normal); }
.ways-in .door:hover { transform: translateY(-3px); box-shadow: var(--os-shadow-lifted); }
.ways-in .door:active { transform: translateY(0) scale(0.985); transition: transform 80ms ease, box-shadow 80ms ease; }
.ways-in .door:focus-visible { outline: none; box-shadow: var(--os-focus-ring); }

.ways-in .art { position: relative; height: 7rem; overflow: hidden; display: grid; place-items: center; flex: none; }
.ways-in .art .win { position: absolute; inset: 0; transition: transform 1.4s var(--os-ease-spring); }
.ways-in .door:hover .art .win { transform: scale(1.05); }
.ways-in .art .field { position: absolute; inset: -12%; width: calc(var(--row) * 100% + (var(--row) - 1) * var(--gap) + 24%);
  left: calc(-1 * var(--col, 0) * (100% + var(--gap)) - 12%); background: url(/media/doors.webp) center / cover; }
.ways-in .art i { position: relative; font-size: 40px; color: var(--os-c1-fg); opacity: 0.92; }

.ways-in .dbody { display: flex; flex-direction: column; flex: 1; padding: var(--os-sp-xl) var(--os-sp-xl) var(--os-sp-lg); }
.ways-in .who { display: flex; align-items: center; gap: var(--os-sp-sm); font-size: var(--os-fs-sm); font-weight: var(--os-weight-semibold); color: var(--ch); }
.ways-in .tag { font-family: var(--os-font-mono); font-size: var(--os-fs-2xs); font-weight: var(--os-weight-medium); letter-spacing: 0.06em;
  padding: 1px var(--os-sp-xs); border-radius: var(--os-radius-xs); background: color-mix(in srgb, var(--ch), transparent 84%); }
.ways-in .dt { display: block; margin-top: var(--os-sp-sm); font-family: var(--os-font-serif); font-weight: 700; font-size: clamp(22px, 1rem + 0.6vw, 27px);
  line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.ways-in .dp { display: block; margin-top: var(--os-sp-md); color: var(--os-text-secondary); line-height: 1.5; text-wrap: pretty; }
.ways-in .dfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--os-sp-md); margin-top: auto; padding-top: var(--os-sp-lg); }
.ways-in .marks { display: flex; gap: var(--os-sp-md); }
.ways-in .marks svg { width: 18px; height: 18px; opacity: 0.75; }
.ways-in .dfoot .arrow { font-size: var(--os-fs-md); color: var(--os-text); }
.ways-in .dt { font-size: clamp(20px, 1rem + 0.4vw, 24px); }
.ways-in .dfoot { padding-top: var(--os-sp-xl); }

/* the reader, named under the lede */
.start-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-sp-sm); margin: var(--os-sp-lg) 0 var(--os-sp-2xl); font-size: var(--os-fs-md); color: var(--os-text-muted); }
.start-from span { margin-right: var(--os-sp-xs); }
.start-from a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--os-radius-full); border: 1px solid var(--os-border-color);
  color: var(--os-text-secondary); text-decoration: none; transition: border-color var(--os-transition-fast), color var(--os-transition-fast); }
.start-from a:hover { color: var(--os-text); border-color: var(--os-text-muted); }
.start-from svg { width: 13px; height: 13px; }
.start-from i { font-size: 15px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.ways-in { scroll-margin-top: 48px; }

/* making it here: a line under the three, not a fourth card */
.make-here { display: flex; align-items: center; flex-wrap: wrap; gap: var(--os-sp-md); margin: var(--os-sp-xl) 0 0; padding: var(--os-sp-md) var(--os-sp-lg);
  border-radius: var(--os-radius-lg); border: 1px dashed var(--os-border-color); color: var(--os-text-secondary); text-decoration: none;
  transition: background var(--os-transition-normal), border-color var(--os-transition-normal), color var(--os-transition-fast), transform var(--os-transition-normal); }
.make-here > span:first-of-type { flex: 1; min-width: 16rem; }
.make-here .arrow { color: var(--os-text); }
.make-here magic-orb { transition: transform 600ms var(--os-ease-spring); }
.make-here:hover { border-style: solid; border-color: color-mix(in srgb, var(--os-c9), transparent 50%); color: var(--os-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--os-c9), transparent 88%), color-mix(in srgb, var(--os-c1), transparent 92%) 60%, transparent); }
.make-here:hover magic-orb { transform: scale(1.18) rotate(-12deg); }
.make-here:hover .arrow::after { margin-left: 3px; }
.make-here:active { transform: scale(0.99); }
.make-here:focus-visible { outline: none; box-shadow: var(--os-focus-ring); }

/* one short beat: the menu bar and the link */
.run-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--os-sp-lg); margin-top: 48px; }
.run-card { padding: var(--os-sp-xl); border-radius: var(--os-radius-lg); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); }
.run-card p { margin: var(--os-sp-sm) 0 0; color: var(--os-text-secondary); max-width: 30rem; }
.run-pic { height: 10rem; margin-bottom: var(--os-sp-xl); border-radius: var(--os-radius-md); background: var(--os-bg-subtle); position: relative; overflow: hidden; }
.run-tray .bar { display: flex; align-items: center; gap: var(--os-sp-md); height: 26px; padding: 0 var(--os-sp-md);
  background: var(--os-bg-inset); font-size: var(--os-fs-xs); line-height: 1; color: var(--os-text-secondary); }
.run-tray .bar > span:first-child { flex: 1; }
.run-tray .bar > i { font-size: 14px; }
/* the tray's own icon: the line-art mark, drawn in the bar's text color */
.run-tray .ti { position: relative; display: grid; place-items: center; width: 22px; height: 20px; border-radius: var(--os-radius-xs); background: color-mix(in srgb, var(--os-text), transparent 88%); }
.run-tray .menu { position: absolute; top: 24px; right: -6px; width: 13rem; padding: var(--os-sp-xs); border-radius: var(--os-radius-md); text-align: left;
  background: var(--os-bg-elevated); border: 1px solid var(--os-border-color-subtle); box-shadow: var(--os-shadow-lifted); font-size: var(--os-fs-sm); line-height: 1.4; color: var(--os-text); }
.run-tray .menu b { display: block; font-weight: 400; padding: 5px var(--os-sp-sm); border-radius: var(--os-radius-sm); }
.run-tray .menu b:first-child { background: var(--os-c1); color: var(--os-c1-fg); }
.run-tray .menu hr { border: 0; border-top: 1px solid var(--os-border-color-subtle); margin: var(--os-sp-xs) 0; }
.run-link { display: flex; flex-direction: column; justify-content: center; gap: var(--os-sp-md); padding: 0 var(--os-sp-xl); }
.run-link .seg { display: flex; padding: 3px; border-radius: var(--os-radius-sm); background: var(--os-bg-inset); font-size: var(--os-fs-sm); }
.run-link .seg span { flex: 1; text-align: center; padding: 5px 8px; border-radius: 4px; color: var(--os-text-muted); }
.run-link .seg .on { background: var(--os-bg-surface); color: var(--os-text); font-weight: 500; box-shadow: var(--os-shadow-xs); }
.run-link .line { display: flex; align-items: center; gap: var(--os-sp-sm); padding: 4px 4px 4px 12px; border-radius: var(--os-radius-sm); background: var(--os-bg-surface); border: 1px solid var(--os-border-color-subtle); }
.run-link code { flex: 1; font-family: var(--os-font-mono); font-size: var(--os-fs-sm); color: var(--os-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs .more-link { margin-top: var(--os-sp-xl); }

@media (max-width: 62rem) {
  .ways-in .doors { --row: 1; grid-template-columns: 1fr; }
  .ways-in .art { height: 5rem; }
  .ways-in .art .field { width: 124%; left: -12%; background-position: calc(var(--col) * 50%) center; }
  .run-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ways-in .door:hover { transform: none; } .ways-in .door:hover .art .win { transform: none; } }