/* Ready Answer landing, page CSS (tasteskill: only what sits inside a visual, plus the lit ground).
   The lit ground (--ground-*) is the brand's orange instead of sand/sky/sage: Hakim pinned dark + orange,
   and the dealt hero warns against dark UI on a dark ground. */
html[data-ground="ember"] {
  --ground-bg: #0f0f11; --ground-surface: #18181b; --ground-accent: #ff6b1a;
  --ground-ink: #f4f4f5; --ground-muted: #a1a1aa;
}

/* the hero window: the real screen standing in a lit orange frame */
.hero--centred .hero__window {
  background: linear-gradient(to bottom, var(--ground-surface), var(--ground-bg));
  border: 1px solid var(--line);
}
.hero--centred .hero__window > .ly-piece.shot-win { width: min(1180px, calc(100% - 2 * var(--s-6))); }
.hero--centred .hero__window > .ly-piece.shot-win { border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); overflow: hidden; background: #17181b; }
.shot-win img { display: block; width: 100%; height: auto; }
@media (max-width: 639px) {
  .hero--centred .hero__window > .ly-piece.shot-win { width: calc(100% - 2 * var(--s-4)); }
}

/* screens inside card panels: inset 24px, top-aligned, cut by the panel's bottom edge */
.panel > .shot {
  position: absolute; z-index: 1; left: 50%; top: var(--s-6); transform: translateX(-50%);
  width: min(400px, calc(100% - 2 * var(--s-5))); height: auto; max-width: none;
  border-radius: var(--r-sm); border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent);
}
#steps .panel, #features .panel { --p-h: 300px; }
@media (max-width: 639px) {
  #steps .panel, #features .panel { --p-h: 200px; }
  .panel > .shot { top: var(--s-5); width: calc(100% - 2 * var(--s-4)); }
}

/* the pill's live dot */
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--action); flex: none; }

/* pricing: on a phone the "for whom" line goes, so four plans fit two screens */
@media (max-width: 639px) { .plans .plan__for { display: none; } }

/* the phone screen in the split frame, rising from the frame's foot */
.phone-frame { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--ground-surface), var(--ground-bg)); border: 1px solid var(--line); }
.phone-frame > .phone-shot {
  position: absolute; left: 50%; top: var(--s-7); transform: translateX(-50%);
  width: min(340px, 64%); height: auto; max-width: none;
  border-radius: 28px; border: 6px solid #1c1c20; outline: 1px solid color-mix(in oklab, var(--p-ink) 16%, transparent);
}
@media (max-width: 639px) { .phone-frame > .phone-shot { top: var(--s-5); width: 70%; } }

/* tablet and small laptop: the three steps stack or go two-up, so the section takes two screens there */
@media (min-width: 640px) and (max-width: 1279px) { #steps { --h: 2; } }
/* tablet: the two feature cards stack; taller panels so the screen is not half empty */
@media (min-width: 640px) and (max-width: 1023px) { #features .panel { --p-h: 400px; } }

/* the spec rows beside the phone: label and value both from the left */
.phone-copy .rows--spec > li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.phone-copy .rows--spec .rows__value { text-align: left; justify-self: start; grid-column: 2; white-space: normal; max-width: none; }

/* plan head: the name and its badge on one line */
.plan__head { display: flex; align-items: center; gap: var(--s-3); }
/* the call apps the FAQ names, in their own colours */
.apps { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.app-chip { display: inline-flex; align-items: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-4) 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--p-surface); font-weight: 500; }
.app-chip .ic { width: 28px; height: auto; }
/* legal row: each part starts on the left line when it wraps */
.footer__legal .legal__links { display: inline-flex; gap: var(--s-5); }
@media (max-width: 639px) { #steps .panel { --p-h: 312px; } }

/* the kit's panel mesh is radial; on this dark page it reads as a halo (impeccable radial-halo), so the
   panels take the same linear ember grade as the hero frame */
:root:has(meta[name="site-kind"][content="software"])[data-ground="ember"] .card > .panel:not([data-fx], .panel--device) { background-image: linear-gradient(to bottom, var(--ground-surface) 0%, var(--ground-bg) 70%); border: 1px solid var(--line); }

/* phone: Solo first; the pill keeps one line at 320 */
@media (max-width: 639px) { .plans > .is-featured { order: -1; } }
@media (max-width: 359px) { .pill__more { display: none; } }
.apps__label { margin-top: var(--s-5); color: var(--muted); }
.apps__label + .apps { margin-top: var(--s-3); }

/* every panel screenshot fades out over its last 56px, so no line is cut hard */
.card > .panel { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
/* step 1's capture is short: centred in its panel instead of leaving a band under it */
#steps .card:first-child .panel > .shot:not(.shot--phone):not(.shot--screen) { top: 50%; transform: translate(-50%, -50%); }
/* phone: the legal row stacks on the left line */
@media (max-width: 639px) { .footer__legal { flex-direction: column; align-items: flex-start; gap: var(--s-3); } }
.panel > .shot { box-sizing: content-box; }

/* 2026-11-13 (app-screenshot-mockups): every product image is a REAL screen in a drawn phone or
   browser frame (transparent PNG/WebP). CSS only places it: no CSS bezel, border or box around it. */
.panel > .shot--phone { border: 0; border-radius: 0; width: min(300px, 72%); top: var(--s-6); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); }
@media (max-width: 639px) { .panel > .shot--phone { width: min(260px, 74%); top: var(--s-5); } }
.hero--centred .hero__window > .ly-piece.shot-win { border: 0; background: transparent; overflow: visible; }
.shot-win img { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
@media (max-width: 639px) { .hero--centred .hero__window > .ly-piece.shot-win { width: min(320px, 82%); margin-inline: auto; } }
.phone-frame > .phone-shot { border: 0; outline: 0; border-radius: 0; width: min(330px, 62%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }

/* 2026-11-13: in the small panels the screen alone (no device frame): the frame's status bar and
   camera took the top band where the text that matters sits. The framed phone stays in "On your phone". */
.panel > .shot--screen { border: 0; border-radius: 18px; width: min(320px, 78%); top: var(--s-5); filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45)); }
@media (max-width: 639px) { .panel > .shot--screen { width: min(300px, 84%); top: var(--s-4); } .hero--centred .hero__window > .ly-piece.shot-win { width: min(330px, 86%); } }