/* =====================================================================
   crestnotch.app, the search pages in the homepage's dark glass (2026-10-24,
   the owner's master plan Part 4.1-4.5). Only pages whose <body> carries the
   class "sg" load it and match it: Scripts/seo_glass.py writes the class, the
   <link> (right after c26-guide.css) and the markup these rules draw (the hero
   card, the pill, the closing card's top row, sg-us on our table column or row,
   sg-bento on bold-lead lists). Frozen pages (experiments) never carry it.
   Every rule starts with .sg main (or .sg-pill) so it wins over each page's own
   <style>, which comes later in the <head>, without !important.
   The homepage's language: glass at white 4% with a 10% hairline, 16px corners,
   a blur behind; white primary and glass secondary buttons; the pricing card's
   deep panel (rgba(12,12,32,.62), 26px corners, a 16% ring) for the closing ask.
   Hashed by Scripts/hash_site_assets.py.
   ===================================================================== */
.sg { --sg-glass: rgba(255, 255, 255, 0.04); --sg-edge: rgba(255, 255, 255, 0.1); --sg-em: 52, 211, 153; }

/* 4.3 prose stays a comfortable measure (~768px) inside the article */
.sg main article > p:not([class]) { max-width: 768px; }

/* ---------------------------------------------------------------- 4.1 the hero card */
.sg main .sg-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 24px 0 30px; padding: 24px; border-radius: 16px; background: var(--sg-glass); box-shadow: inset 0 0 0 1px var(--sg-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.sg main .sg-shot { margin: 0; min-width: 0; }
.sg main .sg-shot img { width: 100%; height: auto; max-width: none; border-radius: 12px; }
.sg main .sg-act { min-width: 0; }
.sg main .sg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sg main .sg-btns .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; text-decoration: none; white-space: nowrap; }
.sg main .sg-btns .btn-white { background: #fff; color: #000; }
.sg main .sg-btns .btn-white:hover { background: #e9e9ee; }
.sg main .sg-req { margin: 12px 0 0; max-width: none; font-size: 13.5px; line-height: 1.5; color: var(--t3); }
/* the hero clip (2026-10-24, lane seo5): the clip's own shape is set on the figure (--ar), so
   nothing moves while it loads; the poster <img> sits under the video until it plays */
.sg main .sg-clip { position: relative; overflow: hidden; aspect-ratio: var(--ar); border-radius: 12px; background: #000; }
.sg main .sg-clip img, .sg main .sg-clip video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: 50% 0; border-radius: 0; }
/* 2026-10-25: the poster's fade moves only when motion is welcome (the gate's motion rule). */
@media (prefers-reduced-motion: no-preference) { .sg main .sg-clip img { transition: opacity 0.4s ease; } }
.sg main .sg-clip.playing img { opacity: 0; }
.sg main .sg-cb { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sg main .sg-cb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sg main .sg-cb svg { display: none; }
.sg main .sg-cb .i-play, .sg main .sg-clip.playing .sg-cb .i-pause { display: block; }
.sg main .sg-clip.playing .sg-cb .i-play { display: none; }
/* 4.2 the pictures are the app's own renders: no text drawn over them in the hero */
.sg main .sg-hero .lv { display: none; }
/* a phone: the picture is a short strip (its top, where the notch is), the presses share one row
   when they fit, and the requirement is one small line, so the table and the lead stay close */
@media (max-width: 760px) {
  .sg main .sg-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; margin: 16px 0 22px; }
  .sg main .sg-shot img { max-height: 140px; object-fit: cover; object-position: center top; }
  .sg main .sg-clip { aspect-ratio: auto; height: 140px; }
  .sg main .sg-btns { gap: 8px; }
  .sg main .sg-btns .btn { padding-left: 12px; padding-right: 12px; font-size: 15px; }
  .sg main .sg-req { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
}

/* ---------------------------------------------------------------- 4.3 step cards */
.sg main ol.steps { list-style: none; counter-reset: sgstep; display: grid; gap: 12px; margin: 18px 0 22px; padding: 0;
  background: none; border: 0; border-radius: 0; overflow: visible; }
.sg main ol.steps > li { counter-increment: sgstep; position: relative; padding: 18px 20px 18px 68px; border-radius: 16px;
  background: var(--sg-glass); box-shadow: inset 0 0 0 1px var(--sg-edge); font-size: 15px; color: var(--t2); }
.sg main ol.steps > li::before { content: counter(sgstep); position: absolute; left: 20px; top: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; font: 700 15px/1 var(--display); letter-spacing: 0; color: #fff;
  background: color-mix(in oklab, var(--h-base) 60%, #0c0e18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 18px color-mix(in oklab, var(--h-base) 55%, transparent); }

/* ---------------------------------------------------------------- 4.3 bento lists */
.sg main ul.sg-bento { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; padding: 0; max-width: none; }
.sg main ul.sg-bento > li { margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--sg-glass); box-shadow: inset 0 0 0 1px var(--sg-edge);
  font-size: 14.5px; line-height: 1.5; color: var(--t2); }
.sg main ul.sg-bento > li::before { content: none; }
.sg main ul.sg-bento > li > :is(strong, b):first-child { display: block; margin: 0 0 6px; font: 650 16px/1.3 var(--display); letter-spacing: -0.012em; color: var(--t1); }
/* a phone: one column of slim cards, the bold lead inline, so a list costs about what it did as bullets */
@media (max-width: 640px) {
  .sg main ul.sg-bento { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sg main ul.sg-bento > li { padding: 10px 14px; font-size: 14.5px; border-radius: 14px; }
  .sg main ul.sg-bento > li > :is(strong, b):first-child { display: inline; margin: 0; font: inherit; font-weight: 650; }
}

/* ---------------------------------------------------------------- 4.4 tables in glass */
.sg main :is(.tblwrap, .tablecard) { border: 0; border-radius: 16px; background: var(--sg-glass); box-shadow: inset 0 0 0 1px var(--sg-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.sg main :is(.tblwrap, .tablecard) thead th { background: rgba(255, 255, 255, 0.03); }
/* our column (the vs pages) */
.sg main th.sg-us, .sg main td.sg-us { background: rgba(var(--sg-em), 0.06);
  box-shadow: inset 1px 0 0 rgba(var(--sg-em), 0.3), inset -1px 0 0 rgba(var(--sg-em), 0.3); }
.sg main th.sg-us { color: #fff; box-shadow: inset 1px 0 0 rgba(var(--sg-em), 0.3), inset -1px 0 0 rgba(var(--sg-em), 0.3), inset 0 1px 0 rgba(var(--sg-em), 0.3); }
.sg main tr:last-child > td.sg-us { box-shadow: inset 1px 0 0 rgba(var(--sg-em), 0.3), inset -1px 0 0 rgba(var(--sg-em), 0.3), inset 0 -1px 0 rgba(var(--sg-em), 0.3); }
/* our row (the app lists) */
.sg main tr.sg-us > td { background: rgba(var(--sg-em), 0.06); box-shadow: inset 0 1px 0 rgba(var(--sg-em), 0.3), inset 0 -1px 0 rgba(var(--sg-em), 0.3); }
.sg main tr.sg-us > td:first-child { box-shadow: inset 0 1px 0 rgba(var(--sg-em), 0.3), inset 0 -1px 0 rgba(var(--sg-em), 0.3), inset 1px 0 0 rgba(var(--sg-em), 0.3); color: #fff; font-weight: 650; }
.sg main tr.sg-us > td:last-child { box-shadow: inset 0 1px 0 rgba(var(--sg-em), 0.3), inset 0 -1px 0 rgba(var(--sg-em), 0.3), inset -1px 0 0 rgba(var(--sg-em), 0.3); }
/* the badge: drawn by CSS, so a search snippet never quotes it */
.sg main :is(th.sg-us, tr.sg-us > td:first-child)::after { content: "#1 Pick \00B7  Best Value"; display: block; width: max-content; margin: 6px 0 0;
  padding: 3px 8px; border-radius: 999px; font: 650 10.5px/1.2 var(--sans); letter-spacing: 0.02em; text-transform: none; white-space: nowrap;
  color: rgb(var(--sg-em)); background: rgba(var(--sg-em), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--sg-em), 0.35), 0 0 14px rgba(var(--sg-em), 0.25); }
/* green checks in our cells */
.sg main :is(td.sg-us, tr.sg-us > td) :is(svg.ck, .mk.y) { color: rgb(var(--sg-em)); }

/* ---------------------------------------------------------------- 4.5 the closing card */
.sg main .endcta { padding: 30px 28px; border: 0; border-radius: 26px; text-align: left; background: rgba(12, 12, 32, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.sg main .endcta .sg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font: 700 19px/1.2 var(--display); color: var(--t1); }
.sg main .endcta .sg-top .tag { margin: 0; vertical-align: 0; font-size: 12px; letter-spacing: 0.02em; text-transform: none; }
.sg main .endcta h2 { margin: 0 0 10px; font: 750 clamp(26px, 3.4vw, 34px)/1.08 var(--display); letter-spacing: -0.03em; }
.sg main .endcta p { max-width: 640px; margin: 0 0 20px; }
.sg main .endcta .btn { margin: 0 8px 8px 0; min-height: 48px; }
.sg main .endcta .fine { margin: 10px 0 0; }

/* ---------------------------------------------------------------- 4.5 the floating pill */
.sg-pill { position: fixed; z-index: 80; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 24px); padding: 7px 7px 7px 18px; border-radius: 999px;
  background: rgba(16, 18, 34, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  transform: translate(-50%, calc(100% + 24px)); opacity: 0; visibility: hidden; }
.sg-pill.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .sg-pill { transition: transform 0.35s var(--ease-out), opacity 0.25s ease, visibility 0s linear 0.35s; }
  .sg-pill.on { transition: transform 0.35s var(--ease-out), opacity 0.25s ease, visibility 0s; }
}
.sg-pill .sg-pill-t { margin: 0 6px 0 0; min-width: 0; font-size: 14px; line-height: 1.25; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-pill .sg-pill-t b { color: var(--t1); font-weight: 650; margin-right: 8px; }
.sg-pill .btn { --bh: 40px; flex: none; min-height: 44px; padding: 0 16px; font-size: 14.5px; text-decoration: none; }
.sg-pill .btn-white { background: #fff; color: #000; }
.sg-pill .sg-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -2px; border-radius: 50%; color: var(--t2); }
.sg-pill .sg-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* the page's last lines are never left under the pill */
body.sg main { padding-bottom: 76px; }
@media (max-width: 900px) { .sg-pill .sg-pill-t span { display: none; } }
/* our row on a phone: the cells stack, so the row is tinted without the edge lines */
@media (max-width: 720px) {
  .sg main tr.sg-us > td, .sg main tr.sg-us > td:is(:first-child, :last-child) { box-shadow: none; }
  /* the badge sits beside the name, not under it, so the stacked table grows no taller */
  .sg main :is(th.sg-us, tr.sg-us > td:first-child)::after { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }
}
@media (max-width: 520px) {
  .sg-pill { left: 12px; right: 12px; width: auto; max-width: none; padding-left: 14px; transform: translate(0, calc(100% + 24px)); }
  .sg-pill.on { transform: none; }
  .sg-pill .sg-pill-t { flex: 1 1 auto; font-size: 13.5px; }
  .sg-pill .sg-pill-t b { margin: 0; }
  .sg-pill .btn { padding: 0 12px; font-size: 14px; }
  /* Take and Minutes: their Buy says "All three apps", so the name and what it needs
     (Minutes: macOS 26) take a line of their own above the presses */
  .sg-pill-2 { flex-wrap: wrap; border-radius: 22px; padding: 10px 6px 8px 14px; row-gap: 6px; }
  .sg-pill-2 .sg-pill-t { flex: 1 0 100%; margin: 0; white-space: normal; font-size: 13px; }
  .sg-pill-2 .sg-pill-t span { display: inline; }
  .sg-pill-2 .sg-pill-t b { margin-right: 6px; }
  .sg-pill-2 .btn { flex: 1 1 auto; }
}