/* sightpane.com's home, 2026-10-14, fourth pass (src/pages/sp-home.mjs).
   wedgestudio.dev's design language (its .pd- sections in site.css: the two
   tone head with a side line, the editorial intro, the stacked cards, the
   facts row, the questions and the close), with what is Sightpane's own
   here as .sh-. Nothing rises or fades in on scroll, the only motion is
   inside the app pictures. Concentric radii (outer = inner + padding), one
   soft layer of elevation, no gradients of our own. The app pictures are
   .spt, played by pages/sp-home.js. The last block styles the captured app
   on sightpane.com's other pages (the Product page, its menu, the closes,
   About and Guides) */
/* the few rules of pages/app.css the home uses, so the home does not load that file */
.ap-ci { width: 16px; height: 16px; margin-right: 8px; flex: none; }
.ap-by { gap: 9px; }
.ap-bym { width: 16px; height: 16px; flex: none; color: var(--pd-tx); }

/* sightpane.com's bar has three links, so Sign in keeps its word at every width the bar shows (the studio's five need the room) */
@media (min-width: 861px) and (max-width: 1140px) {
  body[data-site="sightpane"] .nb-client { width: auto; padding: 0 16px 0 13px; }
  body[data-site="sightpane"] .nb-client span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* the nav's shade is the studio's own (site.css .nb::before), solid behind the links on both sites since 2026-10-15 */

/* ---------- an app picture ---------- */
.spt { position: relative; width: 100%; aspect-ratio: var(--ar); overflow: hidden; }
.spt-poster, .spt picture { display: block; width: 100%; height: auto; }
.spt picture img { width: 100%; height: auto; display: block; }
.spt-clip { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.spt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.spt-host { position: absolute; inset: 0; }
/* the live page takes over from the poster, they are the same picture so the swap is invisible */
.spt.is-live .spt-clip { opacity: 1; }
.spt.is-live :is(.spt-poster, picture) { visibility: hidden; }
@media (max-width: 600px) { .spt[style*="--ar-m"] { aspect-ratio: var(--ar-m); } }

/* ---------- the hero's window, the app filling Powder's pane ---------- */
.sh .pd-hero .pd-app .spt { position: absolute; inset: 8px 8px 0; width: auto; aspect-ratio: auto; border-radius: 16px 16px 0 0; }
.sh .pd-hero .pd-app .spt-poster, .sh .pd-hero .pd-app .spt img { opacity: 1; border-radius: 0; }
/* phones, the app's own phone layout in a taller pane */
@media (max-width: 600px) { .sh .pd-hero { --ah: calc((var(--aw) - 16px) * 1.42 + 16px); } } /* a tablet shows the desktop capture in the 4:3 window (critic B-P2-4) */

/* the loop's four parts under the scene */
.sh-caps { position: relative; z-index: 5; display: flex; justify-content: center; gap: 8px; list-style: none; max-width: calc(var(--pd-w) + 2 * var(--gutter, 24px)); margin: 0 auto; padding: 28px var(--gutter, 24px) 0; }
.sh-caps li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px 12px 12px; border-radius: 99px; color: var(--pd-dim); font-size: 14px; line-height: 1.3; letter-spacing: -.01em; transition: color 320ms cubic-bezier(0.2, 0, 0, 1); }
.sh-cn { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pd-edge-2); font-size: 12px; font-variant-numeric: tabular-nums; transition: background-color 320ms cubic-bezier(0.2, 0, 0, 1), color 320ms cubic-bezier(0.2, 0, 0, 1), box-shadow 320ms cubic-bezier(0.2, 0, 0, 1); }
.sh-caps li.on { color: var(--pd-tx); }
.sh-caps li.on .sh-cn { background: var(--pd-tx); box-shadow: none; color: var(--bg); }
.sh-caps li.past .sh-cn { color: var(--pd-mid); }
/* in the hero they sit on the dusk sky in both themes, so they keep the dark theme's tones, centred under the buttons at every width */
.pd-hero .sh-caps { --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .8); --pd-dim: rgba(255, 255, 255, .66); --pd-edge-2: rgba(255, 255, 255, .24); --bg: #0a0a0b; }
@media (max-width: 809px) {
  .sh-caps { justify-content: flex-start; padding-top: 20px; }
  .sh-caps li { display: none; padding-left: 0; }
  .sh-caps li.on { display: flex; }
  .pd-hero .sh-caps { justify-content: center; }
}

/* ---------- the rhythm ----------
   Sections are wedgestudio.dev's .pd-sec (its gap between sections and its
   1080px column) with its head, a chip, a two tone headline and a side line.
   Headlines 30 to 40, card titles 22 to 28, body 16, small text 14 */
.sh { --sh-e: cubic-bezier(0.2, 0, 0, 1); --sh-glass: rgba(23, 23, 23, .78); --sh-gap: clamp(104px, 11vw, 160px); }
/* one gap between sections, tighter than the studio's own, so no stretch of the page reads as empty */
.sh .sh-sec, .sh .sh-faq { padding-top: var(--sh-gap); }
.sh-sec { scroll-margin-top: 80px; }
.sh .pd-head h2 { max-width: 17em; }

/* ---------- 2, the intro, prose in one narrow column ---------- */
.sh-intro { padding-top: var(--sh-gap); }
.sh .sh-intro p:last-child { margin-bottom: 0; }
.sh .sh-intro .pd-intro-a { margin: 0 0 32px; color: var(--pd-tx); font-size: clamp(24px, 2.3vw, 31px); font-weight: 400; line-height: 1.35; letter-spacing: -.035em; }
.sh .sh-intro p:not(.pd-chip) { margin: 0 0 28px; color: var(--pd-dim); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; letter-spacing: -.02em; }
.sh .sh-intro p.sh-by { color: var(--pd-mid); }

/* ---------- 3, the problem, two cards that share their rows ---------- */
.sh-ba { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: 16px; }
.sh-ba-bg { position: absolute; inset: 0; grid-row: 1 / -1; border-radius: 20px; }
.sh-ba-bg.is-old { grid-column: 1; box-shadow: inset 0 0 0 1px var(--pd-edge); }
.sh-ba-bg.is-new { grid-column: 2; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge-2), 0 1px 2px rgba(0, 0, 0, .1), 0 16px 40px rgba(0, 0, 0, .14); }
.sh-ba-h { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 30px 36px 22px; color: var(--pd-mid); font-size: 18px; letter-spacing: -.02em; }
.sh-ba-h.is-new { grid-column: 2; color: var(--pd-tx); }
.sh-ba-h.is-old { grid-column: 1; }
.sh-ba-m { width: 16px; height: 16px; }
.sh-beat { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 16px; align-content: start; margin: 0; padding: 20px 36px 22px; font-size: 16px; line-height: 1.5; }
.sh-beat::before { content: ''; position: absolute; left: 36px; right: 36px; top: 0; border-top: 1px solid var(--pd-edge); }
.sh-beat.is-old { grid-column: 1; color: var(--pd-dim); }
.sh-beat.is-new { grid-column: 2; color: var(--pd-tx); }
.sh-beat small { grid-column: 2; margin-bottom: 4px; color: var(--pd-dim); font-size: 13px; letter-spacing: .01em; }
.sh-beat > span:last-child { grid-column: 2; }
.sh-beat:nth-last-child(-n + 2) { padding-bottom: 32px; }
.sh-ba-x, .sh-ba-t, .sh-ba-o { grid-row: 1 / span 2; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.sh-ba-x { box-shadow: inset 0 0 0 1px var(--pd-edge-2); color: var(--pd-dim); }
.sh-ba-t { background: var(--pd-f3); color: var(--pd-tx); }
.sh-ba-o { box-shadow: inset 0 0 0 1px var(--pd-edge-2); color: var(--pd-mid); }
.sh-cmp tr.is-keep td:nth-child(2) { color: var(--pd-mid); }
.sh-ba-x svg, .sh-ba-t svg, .sh-ba-o svg { width: 16px; height: 16px; }

/* ---------- 5, inside Sightpane, the stacked cards ---------- */
.sh-gcard { min-height: 520px; padding: 8px; border-radius: 16px; background: rgba(15, 15, 15, .85); border: 1px solid rgba(255, 255, 255, .1); }
.sh-gcard .pd-row-tx { padding: 44px 40px 36px; }
.sh-gcard h3 { margin-top: 40px; }
.sh .sh-gcard .pd-row-tx > p:not(.pd-dotl):not(.pd-note) { margin-top: 18px; max-width: 42ch; font-size: 16px; line-height: 1.6; }
.sh-gcard .pd-note { padding-top: 32px; color: rgba(255, 255, 255, .62); }
/* the four cards show the app's phone layout at about 0.87 of its size, so its text reads (critic S-P1-3) */
.sh .sh-gwin { left: 50%; right: auto; width: min(340px, 84%); top: 50%; bottom: auto; translate: -50% -50%; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .3); }
.sh-gwin .spt { position: relative; inset: auto; width: 100%; aspect-ratio: var(--ar); background: transparent; }
.sh-stack { gap: 32px; }
/* the picture takes three fifths of the card (critic S-P1-3), the text two fifths. The window in it is the app's
   phone layout at about 0.87 of its size, centred, so the app's text reads at 11 to 12px (WP-1) */
@media (min-width: 901px) {
  .sh .sh-gcard { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .sh .sh-gcard.rev { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .sh .sh-gcard .pd-row-tx { padding: 40px 32px 32px; }
}
.sh .sh-after { margin: 36px 0 0; max-width: 60ch; color: var(--pd-dim); font-size: 15px; line-height: 1.6; }
.sh-after .pd-more { margin-left: 6px; white-space: nowrap; }

/* more from Sightpane AI, four small stills under the cards */
.sh-ai { margin-top: 72px; }
.sh-ai h3 { margin: 0; max-width: 40em; color: var(--pd-tx); font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
.sh-ai-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin: 24px 0 0; padding: 0; }
.sh-ai-item { display: grid; align-content: start; gap: 4px; }
.sh-ai-shot { position: relative; margin: 0 0 14px; padding: 28px 0; border-radius: 14px; overflow: clip; background: #1b2228; box-shadow: inset 0 0 0 1px var(--pd-edge); }
.sh-ai-win { position: relative; margin: 0 5%; overflow: hidden; border-radius: 10px; background: var(--sh-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .3); }
.sh-ai-win .spt { position: relative; width: 100%; aspect-ratio: var(--ar); }
.sh-ai-item b { color: var(--pd-tx); font-size: 15px; font-weight: 400; letter-spacing: -.015em; }
.sh-ai-item > span { color: var(--pd-dim); font-size: 13.5px; line-height: 1.45; }

/* ---------- 7, where it fits, the table, then the tools ---------- */
.sh-cmp { padding: 8px 36px 12px; border-radius: 20px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.sh-cmp table { width: 100%; border-collapse: collapse; }
.sh-cmp thead :is(th, td) { padding: 28px 24px 20px 0; color: var(--pd-mid); font-size: 18px; font-weight: 400; letter-spacing: -.02em; text-align: left; }
.sh-cmp thead th:last-child { color: var(--pd-tx); }
.sh-cmp thead th .sh-ba-m { margin: 0 10px -2px 0; }
.sh-cmp thead td { width: 22%; }
.sh-cmp tbody th { padding: 20px 24px 20px 0; border-top: 1px solid var(--pd-edge); color: var(--pd-dim); font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; vertical-align: top; }
.sh-cmp tbody td { position: relative; width: 39%; padding: 18px 24px 18px 38px; border-top: 1px solid var(--pd-edge); color: var(--pd-dim); font-size: 16px; line-height: 1.5; vertical-align: top; }
.sh-cmp tbody td:last-child { color: var(--pd-tx); }
.sh-cmp td :is(.sh-ba-x, .sh-ba-t, .sh-ba-o) { position: absolute; left: 0; top: 19px; }
.sh-tools { margin-top: 72px; }
.sh-fits .sh-tools { margin-top: 0; }
.sh-tools h3 { margin: 0; max-width: 40em; color: var(--pd-tx); font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
.sh-tool-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; }
.sh-tool { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.sh-tool-m { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--pd-card-hi); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-tx); }
.sh-bm { width: 18px; height: 18px; }
.sh-tool > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sh-tool b { color: var(--pd-tx); font-size: 15px; font-weight: 400; letter-spacing: -.015em; }
.sh-tool b + span { color: var(--pd-dim); font-size: 13px; line-height: 1.35; }

/* ---------- 9, why we built it ---------- */
/* ---------- 6, why, one line on a dusk band ----------
   The page's one scene moment between the hero and the close, as the studio's
   page heads do. The sky rises from the page, the far and near hills stand
   at its foot and dissolve back into the page. The words stay light on it in
   both themes */
.sh-why { position: relative; isolation: isolate; padding-bottom: clamp(220px, 21vw, 300px); --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .82); --pd-dim: rgba(255, 255, 255, .62); --pd-edge: rgba(255, 255, 255, .14); --pd-edge-2: rgba(255, 255, 255, .2); --pd-card: rgba(255, 255, 255, .06); --pd-chip: rgba(255, 255, 255, .08); color: var(--pd-tx); }
.sh-why .pd-chip { color: #fff3f0; }
.sh-dusk { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; }
.sh-dusk-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0, #1b2228 clamp(96px, 10vw, 140px), #242b31 40%, #363b42 58%, #5c5057 76%, #8f6e70 88%, #b88482 97%); }
.sh-dusk img { position: absolute; left: 50%; bottom: -16%; width: max(100%, 1100px); height: auto; translate: -50% 0; }
.sh-dusk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 14vw, 200px); background: linear-gradient(180deg, transparent, var(--bg)); }
.sh-why .pd-chip { margin: 0; }
.sh-why-line { margin: 24px 0 0; max-width: 21em; color: var(--pd-tx); font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.3; letter-spacing: -.04em; }
.sh .sh-why-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 32px 0 0; }

/* ---------- 10, pricing in short ---------- */
.sh-prices { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-radius: 20px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.sh-price { padding: 32px 28px 30px; }
.sh-price + .sh-price { box-shadow: inset 1px 0 0 var(--pd-edge); }
.sh-price p { margin: 0; }
.sh-price-k { color: var(--pd-dim); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sh-price-n { display: grid; gap: 6px; margin-top: 30px !important; }
.sh-price-n b { color: var(--pd-tx); font-size: clamp(34px, 3.2vw, 42px); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sh-price-n small { color: var(--pd-dim); font-size: 13.5px; }
.sh-price-m { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--pd-edge); color: var(--pd-mid); font-size: 14.5px; }
.sh-price-d { margin-top: 6px !important; color: var(--pd-dim); font-size: 14.5px; line-height: 1.5; }
.sh-price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 32px; }
.sh-price-foot p { margin: 0; color: var(--pd-mid); font-size: 16px; }
.sh-price-foot .ctas { margin: 0; }

/* ---------- 11, the questions ---------- */
.sh-faq { max-width: calc(var(--pd-w) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sh-faq .pd-ssec { padding-top: 0; }
.sh .pd-close-lag .spt { border-radius: 16px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .sh-tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-price:nth-child(3) { box-shadow: inset 0 1px 0 var(--pd-edge); }
  .sh-price:nth-child(4) { box-shadow: inset 1px 0 0 var(--pd-edge), inset 0 1px 0 var(--pd-edge); }
}
@media (max-width: 900px) {
  .sh-gcard { min-height: 0; }
  /* on phones the picture is the app's phone layout, shown whole at its own shape, nothing cut at the foot */
  .sh .sh-gscene { aspect-ratio: auto; min-height: 0; padding: 28px 0; }
  .sh .sh-gwin { position: relative; inset: auto; left: auto; translate: none; width: min(84%, 340px); margin: 0 auto; border-radius: 26px; }
  .sh-gwin .spt[style*="--ar-m"] { aspect-ratio: var(--ar-m); }
  .sh-gcard .pd-row-tx { padding: 28px 22px 26px; }
  .sh-gcard h3 { margin-top: 26px; }
}
@media (max-width: 760px) {
  .sh-ai-list { grid-template-columns: minmax(0, 1fr); }
  .sh-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sh-tool { padding: 12px; }
  .sh-ba { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sh-ba-bg { display: none; }
  .sh-ba-h { grid-column: 1 !important; padding: 0 0 10px; font-size: 15px; }
  .sh-ba-h.is-old::before { content: ''; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pd-edge-2); }
  .sh-ba-h.is-new { padding-bottom: 22px; }
  .sh-beat { grid-column: 1 !important; padding: 16px 18px 18px; font-size: 15.5px; }
  .sh-beat::before { display: none; }
  .sh-beat.is-old { margin-top: 10px; border-radius: 16px 16px 0 0; box-shadow: inset 0 0 0 1px var(--pd-edge); }
  .sh-beat.is-new { border-radius: 0 0 16px 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge-2); }
  .sh-beat.is-new small { display: none; }
  .sh-beat:nth-last-child(-n + 2) { padding-bottom: 18px; }
  .sh-cmp { padding: 4px 20px 8px; }
  .sh-cmp thead { display: none; }
  .sh-cmp tbody tr { display: grid; padding: 18px 0 16px; border-top: 1px solid var(--pd-edge); }
  .sh-cmp tbody tr:first-child { border-top: 0; }
  .sh-cmp tbody :is(th, td) { width: auto; padding: 6px 0 6px 34px; border: 0; }
  .sh-cmp tbody th { padding-left: 0; padding-bottom: 8px; }
  .sh-cmp td :is(.sh-ba-x, .sh-ba-t, .sh-ba-o) { top: 7px; }
  .sh-price { padding: 24px 20px 22px; }
  .sh-price-n { margin-top: 22px !important; }
    .sh-why { padding-bottom: 300px; }
  .sh-dusk img { bottom: -1%; }
}

/* ---------- the captured app on sightpane.com's other pages ----------
   The Product menu's preview, the closes, the About and Guides windows show
   the real app's posters (tools/sp-capture), in the same glass as before */
.sp-shot { display: block; width: 100%; height: auto; }
.nd-live .nd-mini.is-shot { background: rgba(23, 23, 23, .78); overflow: hidden; }
.nd-live .nd-mini.is-shot img { position: absolute; inset: 0; width: 100%; height: auto; object-fit: initial; opacity: 1; transition: none; }
.pd-close-lag .sp-shot { border-radius: 16px; }
.ap-win > .sp-shot { position: absolute; left: 0; top: 0; }

/* ---------- the hover light, 2026-10-15 ----------
   Per David, "when I hover a card, the edge lights up where my mouse is ...
   Apply that through the app and the website ... almost a reflection of the
   Mac". wedgestudio.dev's pointer light (site/motion.js writes --gx, --gy and
   --go on every [data-glow], site.css draws the masked ring), on the surfaces
   build.mjs marks for sightpane.com (spHover). Only the colour is ours, one
   token per kind, quiet in light mode, and every dusk or dark glass surface
   keeps the dark values in both themes, as its buttons do. motion.js binds it
   only for a fine pointer, so touch never sees it */
body[data-site="sightpane"], body[data-site="sightpane"] :is(.pd-hero, .art-head, .pd-close, .sh-why, .nb:not(.on-page), .nb-panel, .sh-gcard, .sx-fig, .spa-maker, .ap-scene, .sp-rim) {
  --spg-card: rgba(255, 255, 255, .25); --spg-pill: rgba(255, 255, 255, .6); --spg-item: rgba(255, 255, 255, .28); --spg-line: rgba(255, 255, 255, .42); --spg-sheen: transparent;
}
:root[data-theme="light"] body[data-site="sightpane"] { --spg-card: rgba(0, 0, 0, .18); --spg-pill: rgba(0, 0, 0, .3); --spg-line: rgba(0, 0, 0, .3); --spg-sheen: rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body[data-site="sightpane"] { --spg-card: rgba(0, 0, 0, .18); --spg-pill: rgba(0, 0, 0, .3); --spg-line: rgba(0, 0, 0, .3); --spg-sheen: rgba(255, 255, 255, .16); } }
/* motion.js writes the pointer onto each card. Registered as not inherited, a write restyles only the card's
   own ring, never the app picture or the menu inside it (a full restyle of those on every frame cost 20 times
   the style work), and the ring takes the values from its card on purpose */
@property --gx { syntax: '<length>'; inherits: false; initial-value: -999px; }
@property --gy { syntax: '<length>'; inherits: false; initial-value: -999px; }
@property --go { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gs { syntax: '<length>'; inherits: false; initial-value: 735px; }
body[data-site="sightpane"] [data-glow]::before { --gx: inherit; --gy: inherit; --go: inherit; --gs: inherit; }
body[data-site="sightpane"] [data-glow] { --spg: var(--spg-card); }
body[data-site="sightpane"] [data-glow="pill"] { --spg: var(--spg-pill); }
body[data-site="sightpane"] [data-glow="item"] { --spg: var(--spg-item); }
body[data-site="sightpane"] [data-glow="line"] { --spg: var(--spg-line); }
:root body[data-site="sightpane"] [data-glow]::before { background: radial-gradient(var(--gs, 735px) circle at var(--gx, -999px) var(--gy, -999px), var(--spg), transparent 70%); }
/* buttons with a 1px border carry the ring on the border itself */
:root body[data-site="sightpane"] :is(.pill, .ghost)[data-glow]::before { inset: -1px; }
/* the white button cannot show a white ring and its hover fill is already at full white, so it keeps
   only that. The dark button of the light theme gets a soft sheen on its fill, under the label */
body[data-site="sightpane"] .pill[data-glow] { --spg: var(--spg-sheen); isolation: isolate; }
:root body[data-site="sightpane"] .pill[data-glow]::before { z-index: -1; padding: 0; -webkit-mask: none; mask: none; }
/* a row on hairlines (the questions, About's beliefs), only its rule lights */
:root body[data-site="sightpane"] [data-glow="line"]::before { inset: 0 0 -1px; padding: 0; border-radius: 0; -webkit-mask: linear-gradient(0deg, #000 1px, transparent 1px); -webkit-mask-composite: source-over; mask: linear-gradient(0deg, #000 1px, transparent 1px); }
:root body[data-site="sightpane"] .spa-prin [data-glow="line"]::before { inset: 0; -webkit-mask: linear-gradient(180deg, #000 1px, transparent 1px); mask: linear-gradient(180deg, #000 1px, transparent 1px); }
/* the app's glass windows, a rim over the outer frame (build.mjs, SP_RIM), never inside the picture */
.sp-rim { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; }

/* the small hover details, for a mouse only and still under reduced motion.
   Cards that are links rise a pixel as they brighten, arrows nudge toward
   where they lead, buttons dip a little when pressed */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .spg-more li a, .spg-list li a { transition: border-color 200ms ease-out, background-color 200ms ease-out, translate 200ms cubic-bezier(.2, 0, 0, 1); }
  .spg-more li a:hover, .spg-list li a:hover { translate: 0 -1px; }
  .spa-studio { transition: background-color 200ms ease-out, box-shadow 200ms ease-out, translate 200ms cubic-bezier(.2, 0, 0, 1); }
  .spa-studio:hover { translate: 0 -1px; }
  body[data-site="sightpane"] .pd-faq-ask a span { display: inline-block; transition: translate 200ms cubic-bezier(.2, 0, 0, 1); }
  body[data-site="sightpane"] .pd-faq-ask a:hover span { translate: 2px 0; }
  body[data-site="sightpane"] :is(.pill, .ghost) { transition: background-color 250ms var(--ease-pw), color 250ms var(--ease-pw), scale 150ms var(--ease-pw); }
  body[data-site="sightpane"] .nb-cta { transition: background 150ms ease-out, color 150ms ease-out, scale 150ms var(--ease-pw); }
  body[data-site="sightpane"] :is(.pill, .ghost, .nb-cta):active { scale: .98; }
}
/* keyboard focus on a card follows its own corners */
body[data-site="sightpane"] :is(.spg-list, .spg-more) a:focus-visible, body[data-site="sightpane"] .spa-studio:focus-visible { outline-offset: 3px; }

/* ---------- phones, the home in fewer screens (critic S-P2-4), 2026-10-15 ----------
   Each step of the problem is one card, the old way above a hairline and Sightpane's way under it. The four
   feature cards are one row you swipe sideways, each card nearly the screen's width with the next one peeking.
   The More from Sightpane AI pictures go, their names and lines stay */
@media (max-width: 600px) {
  .sh-ba-h { display: none; }
  .sh-beat { padding: 14px 16px 14px; font-size: 15px; }
  .sh-beat.is-old { margin-top: 12px; border-radius: 16px 16px 0 0; background: var(--pd-card); box-shadow: inset 1px 1px 0 var(--pd-edge-2), inset -1px 0 0 var(--pd-edge-2); }
  .sh-beat.is-new { border-radius: 0 0 16px 16px; box-shadow: inset 1px -1px 0 var(--pd-edge-2), inset -1px 0 0 var(--pd-edge-2); }
  .sh-beat.is-new::before { display: block; left: 16px; right: 16px; }
  .sh-beat.is-old > span:last-child { color: var(--pd-dim); }
  .sh-beat:nth-last-child(-n + 2) { padding-bottom: 14px; }
  .sh-beat.is-new:last-child { padding-bottom: 16px; }

  .sh .sh-stack { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter, 20px)); padding: 0 var(--gutter, 20px) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); overscroll-behavior-x: contain; scrollbar-width: none; }
  .sh .sh-stack::-webkit-scrollbar { display: none; }
  .sh .sh-stack > .pd-gshell { position: relative; top: auto; flex: 0 0 86%; scroll-snap-align: start; }
  .sh .sh-stack .sh-gcard { height: 100%; }
  .sh .sh-stack .sh-gwin { width: min(94%, 340px); } /* as wide as the card allows, so the app's text stays near 10px or more */

  .sh-ai-shot { display: none; }
  .sh-ai-list { gap: 18px; }
}