/* assets/pg-home.css · the home page only (reset Round 1, 3 Nov 2026; brief 5.1 "/ Home").
   Page compositions built from the kit (assets/kit.css), the product kit (assets/product-ui.css) and the K11 card
   (assets/mcard.css). Every colour is a token; every component (tour, phone, desk, flow, duo, close, question) is the
   kit's own. What lives here is layout: how the 13 sections place those parts. Prefix: ph-. Logical properties
   throughout, so the Arabic twin mirrors. Motion: none of its own (the kit and the product kit own it). */

main.pg-home{ overflow-x:clip; }

/* ---------- 1 · hero: headline on the inline-start two-thirds, the sub, action and question on the last third; the
   goal switch spans the frame under it (one hero per frame, on a third: DS:90) ---------- */
.ph-hero{ padding-block:clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.ph-hero__top{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:start; margin-block-end:clamp(40px, 5vw, 72px); }
@media (min-width:1024px){ .ph-hero__top{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(40px, 5vw, 80px); } .ph-hero__side{ padding-block-start:38px; } }
.ph-hero__copy{ display:grid; gap:18px; }
.ph-hero__h{ margin:0; max-width:17ch; }
.ph-tail{ color:var(--ink-muted); }
.ph-hero__side{ display:grid; gap:18px; justify-items:start; }
.ph-hero__sub{ margin:0; }
.ph-hero__local{ position:relative; margin:-4px 0 0; padding-inline-start:18px; font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.ph-hero__local::before{ content:""; position:absolute; inset-inline-start:0; top:.45em; width:8px; height:8px; border-radius:50%; background:var(--role-human); box-shadow:0 0 0 1px var(--role-human-text); }
.ph-hero__acts{ margin-block-start:4px; }
.ph-down::after{ content:"\2193"; font-weight:400; }
.ph-hero__qa.k-qa{ margin:0; width:100%; max-inline-size:none; }
.ph-hero__talk{ margin:-4px 0 0; color:var(--ink-muted); }
.ph-talk{ padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hairline); cursor:pointer; min-height:24px; }
.ph-talk:hover{ color:var(--ink); text-decoration-color:currentColor; }
.ph-hero__ui{ min-width:0; }
/* fix pass (review_design P1-1): from 1024px the hero is one frame on a third: copy at 5/12 (eyebrow, H1, lead, action,
   the question under it) and the product proof at 7/12, the goal switch above its K5 pair, all inside the first screen
   (DS:90; brief 5.1 home §1). The desktop shot is cropped 4:3 so the phone (bottom inline-end, 80px over the frame)
   clears the tabs. */
@media (min-width:1024px){
  .ph-hero{ padding-block:clamp(40px, 4.4vw, 64px) var(--sec-pad); }
  .ph-hero > .k-wrap{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:clamp(40px, 4.4vw, 72px); align-items:center; }
  .ph-hero__top{ display:grid; grid-template-columns:none; gap:20px; margin:0; }
  .ph-hero__side{ padding-block-start:0; gap:16px; }
  .ph-hero__h{ max-width:none; }
  .ph-hero .pui-goals{ gap:16px; }
  .ph-hero .pui-tab{ padding:0 10px; font-size:13.5px; }
  .ph-hero .pui-goals .pui-pair{ padding-inline-end:156px; padding-block-end:56px; }
  .ph-hero .pui-goals .pui-pair > .pui-shot{ aspect-ratio:4 / 3; }
  .ph-hero .pui-goals .pui-pair > .pui-mini, .ph-hero .pui-goals .pui-pair > .pui-asst{ aspect-ratio:4 / 3; overflow:hidden; }
  .ph-hero .pui-goals .pui-pair > .iphone{ bottom:0; }
  .ph-hero .pui-goals__cap{ margin-top:4px; }
}

/* ---------- 3 · picker: the product lane's K12a sits in the section as is ---------- */
.ph-move .pui{ margin-block-end:0; }

/* ---------- 4 · see what you can do: a kit screen, the stretch it sits on (an IP locator, never redrawn) and the plan ---------- */
.ph-do__panel{ position:relative; display:grid; gap:16px; }
.ph-do__desk{ max-width:none; }
/* the live INFINITE Analytics board (product lane, S19) is laid out for a ~1120px window; in the tour's stage it is
   shown whole at a fixed zoom, the way a desk frame shows a screen, so its KPI cards keep their own layout. Phones use the
   product kit's own reflow. */
.ph-do__live{ min-width:0; }
@media (max-width:767px){
  .ph-do__live{ position:relative; max-height:448px; overflow:hidden; border-radius:12px; }   /* the height of the other panels' phone crops */
  .ph-do__live::after{ content:""; position:absolute; inset:auto 0 0 0; height:64px; background:linear-gradient(to bottom, transparent, var(--ground)); pointer-events:none; }
}
@media (min-width:768px){ .ph-do__live > .pui{ zoom:.62; } }
@media (min-width:1024px){ .ph-do__live > .pui{ zoom:.52; } }
@media (min-width:1200px){ .ph-do__live > .pui{ zoom:.64; } }
@media (min-width:1360px){ .ph-do__live > .pui{ zoom:.72; } }
.ph-do__foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px 32px; padding-block-start:8px; }
.ph-do__plan{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px 24px; margin:0; }
/* the authored mark at the top of the tab column (the K9 rail pattern): the IP lane's Bright mark, inline and unchanged
   in geometry, lit per item by RIVET_IP.light (assets/ip.js). Its hinge stays ink here: the screen's one insight belongs
   to the dashboard on the analytics tab (brief 2.2 accounting). */
.ph-mark{ display:grid; gap:12px; margin:0 0 20px; }
.ph-mark__art{ position:relative; padding:14px 10px; border-radius:var(--radius-card); background-color:var(--card-surface); box-shadow:var(--card-lift); }
.ph-mark__art svg{ position:relative; display:block; width:100%; height:auto; }
.ph-mark .ipm-fill, .ph-mark .ipm-room, .ph-mark .ipm-dot, .ph-mark .ipm-bud{ transition:opacity var(--dur-slow) var(--ease-emphasized); }
.ph-mark .is-off{ opacity:.1; }
.ph-mark .ipm-room.is-off{ opacity:.28; }
.ph-mark .ipm-hinge{ fill:var(--ink); }
.ph-mark__cap{ display:grid; gap:4px; }
.ph-mark__cap .t-micro{ color:var(--ink-muted); }
.ph-mark__where{ font:600 15px/1.4 var(--k-font, var(--font-sans)); color:var(--ink); }
@media (max-width:1023px){
  .ph-do__tour .k-tour__top{ flex-wrap:wrap; }
  .ph-mark{ flex:1 0 100%; grid-template-columns:minmax(0, 220px) minmax(0,1fr); align-items:center; gap:16px; margin:0 0 8px; }
}
@media (prefers-reduced-motion:reduce){ .ph-mark *{ transition:none !important; } }

/* ---------- 5 · hand-off: the question beside a real quote ---------- */
.ph-pairqa{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:start; margin-block-start:clamp(32px, 4vw, 56px); }
@media (min-width:1024px){ .ph-pairqa{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); } }
.ph-pairqa .k-qa{ margin:0; }
.ph-quote{ margin:0; display:grid; gap:20px; }
.ph-quote__q{ margin:0; }
.ph-quote__q p, .ph-case__q p, .ph-mvcard__q p{ margin:0; font:500 var(--role-card)/1.4 var(--k-font, var(--font-sans)); letter-spacing:-0.01em; color:var(--ink); text-wrap:pretty; }
/* who said it: photo, name, current role (members-data.json), LinkedIn */
.ph-by{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; margin:0; }
.ph-by__f{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.ph-by__id{ display:grid; gap:2px; min-width:0; }
.ph-by__id b{ font:600 15px/1.3 var(--k-font, var(--font-sans)); color:var(--ink); }
.ph-by__id span{ font:400 13px/1.4 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.ph-by__li{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ink-muted); }
.ph-by__li:hover{ color:var(--ink); background:var(--ground-alt); }

/* the move label: the human colour (gold) as a fill with black ink, never as text on light (BRAND) */
.ph-move-tag{ display:inline-flex; align-items:center; gap:8px; justify-self:start; max-width:100%; box-sizing:border-box; padding:6px 10px; border-radius:6px;
  background:var(--role-human-subtle); color:var(--ink); font:500 12px/1.35 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; }
.ph-move-tag::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--role-human); box-shadow:0 0 0 1px var(--role-human-text); }

/* ---------- 6 · moves: where you are -> the gap -> what closes it, beside the person and the stretch ---------- */
.ph-mv{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:center; padding-block-start:clamp(8px, 1vw, 16px); }
@media (min-width:1024px){ .ph-mv{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); } }
.ph-mv__copy{ display:grid; gap:24px; align-content:start; }
.ph-mv__copy .t-row{ margin:0; max-width:22ch; }
.ph-mv__steps{ display:grid; gap:0; margin:0; }
.ph-mv__steps > div{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; padding-block:14px; box-shadow:inset 0 -1px 0 var(--hairline-soft); }
.ph-mv__steps > div:first-child{ box-shadow:inset 0 1px 0 var(--hairline-soft), inset 0 -1px 0 var(--hairline-soft); }
.ph-mv__steps dt{ color:var(--ink-muted); padding-block-start:3px; }
.ph-mv__steps dd{ margin:0; font:400 16px/1.55 var(--k-font, var(--font-sans)); color:var(--ink); }
@media (max-width:599px){ .ph-mv__steps > div{ grid-template-columns:1fr; gap:4px; } }
.ph-mv__go{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:0; }
.ph-mv__art{ position:relative; display:grid; justify-items:end; }
.ph-mv__where{ font-weight:600 !important; }
.ph-person{ position:relative; margin:0; width:min(100%, 420px); aspect-ratio:4 / 5; border-radius:var(--radius-base); overflow:hidden; background:var(--ground-alt); }
.ph-person__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.ph-person__cap{ position:absolute; inset-inline:12px; inset-block-end:12px; display:grid; gap:4px; padding:14px 16px; border-radius:14px;
  background:rgba(10,10,12,.82); color:#fff; }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ph-person__cap{ -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
}
@media (prefers-reduced-transparency:reduce){ .ph-person__cap{ background:rgb(10,10,12); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.ph-person__cap b{ font:600 16px/1.3 var(--k-font, var(--font-sans)); }
.ph-person__cap > span:not(.ph-move-tag){ font:400 13px/1.4 var(--k-font, var(--font-sans)); color:rgba(255,255,255,.82); }
.ph-person__cap q{ margin-block-start:6px; font:400 14px/1.5 var(--k-font, var(--font-sans)); color:#fff; }
.ph-person__cap .ph-move-tag{ margin-block-end:6px; background:var(--gold); color:#000; }
.ph-person__cap .ph-move-tag::before{ background:#000; box-shadow:none; }
@media (max-width:1023px){ .ph-mv__art{ justify-items:center; } }
/* ---------- 7 · proof: the Roboost case on the human duo (Dawn, ghost anchor under the number), three moves beside it ---------- */
.ph-proof__grid{ display:grid; gap:clamp(16px, 2vw, 24px); }
@media (min-width:1024px){ .ph-proof__grid{ grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); } }
.ph-case{ display:grid; gap:clamp(24px, 3vw, 40px); align-content:space-between; margin:0; padding:clamp(28px, 4vw, 56px); border-radius:var(--radius-base); }
.ph-case__top{ display:grid; gap:20px; }
.ph-case__logo{ width:auto; height:26px; }
.ph-case__stat{ display:grid; gap:8px; margin:0; }
.ph-case__v.k-stat__v{ font-size:clamp(4rem, 2.6rem + 5vw, 7.5rem); line-height:.95; letter-spacing:-0.04em; }
.ph-case__l{ font:500 var(--role-card)/1.35 var(--k-font, var(--font-sans)); color:var(--ink); max-width:24ch; }
.ph-case__q{ margin:0; }
.ph-proof__moves{ display:grid; gap:clamp(16px, 2vw, 24px); margin:0; padding:0; list-style:none; }
.ph-mvcard{ display:grid; gap:16px; align-content:start; }
.ph-mvcard__t{ margin:0; font:500 var(--role-card)/1.4 var(--k-font, var(--font-sans)); color:var(--ink); }
.ph-mvcard__q{ margin:0; }
.ph-more{ margin:clamp(24px, 3vw, 40px) 0 0; }

/* ---------- 8 · how it works: the third phone is an HTML credential (390px wide, scaled by kit.js) ---------- */
.ph-flow__s{ font:400 14px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.ph-cred{ background:#fff; }
.ph-cred__in{ box-sizing:border-box; width:390px; height:846px; padding:64px 28px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; color:#000;
  background:linear-gradient(180deg, var(--ghost-white) 0 46%, #fff 46%); font-family:var(--font-sans); }
.ph-cred__sb{ position:absolute; top:22px; inset-inline-start:34px; font:600 17px/1 var(--font-sans); }
.ph-cred__k{ margin:12px 0 4px; font:500 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.ph-cred__seal{ width:208px; height:208px; margin:6px 0 14px; border-radius:50%; box-shadow:0 18px 40px -18px rgba(59,6,212,.45); }
.ph-cred__t{ margin:0; font:600 26px/1.2 var(--font-sans); letter-spacing:-0.01em; }
.ph-cred__to{ margin:18px 0 0; font:500 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.ph-cred__n{ margin:0; font:600 30px/1.2 var(--font-sans); letter-spacing:-0.01em; }
.ph-cred__m{ margin:0; font:400 17px/1.4 var(--font-sans); color:var(--slate); }
.ph-cred__by{ margin:auto 0 0; font:400 15px/1.4 var(--font-sans); color:var(--slate); }
.ph-cred__btn{ display:flex; align-items:center; justify-content:center; width:100%; height:52px; margin-block-start:12px; border-radius:12px; background:var(--purple); color:#fff; font:600 17px/1 var(--font-sans); }

/* ---------- 9 · memberships: the K11 card is the art; the page states who it is for, the outcome and the link ---------- */
.ph-plans__grid{ display:grid; gap:clamp(32px, 3vw, 40px) clamp(16px, 2vw, 24px); margin:0; padding:0; list-style:none; }
/* phones: the four cards are one swipe row (scroll-snap, no autoplay), the next card peeking, as the kit's K15 row does */
@media (max-width:639px){
  .ph-plans__grid{ grid-auto-flow:column; grid-auto-columns:80%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin-inline:calc(var(--wrap-gutter) * -1); padding-inline:var(--wrap-gutter); scroll-padding-inline:var(--wrap-gutter); padding-block-end:8px; }
  .ph-plans__grid::-webkit-scrollbar{ display:none; }
  .ph-plan{ scroll-snap-align:start; }
}
@media (min-width:640px){ .ph-plans__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .ph-plans__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ph-plan{ display:grid; grid-template-rows:auto auto auto 1fr auto; gap:8px; align-content:start; }
.ph-plan__card{ container-type:inline-size; margin-block-end:14px; }
.ph-plan__card .mcardobj{ max-width:none; }
.ph-plan__n{ margin:0; }
.ph-plan__who{ margin:0; font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ph-plan__d{ margin:4px 0 0; font:400 16px/1.55 var(--k-font, var(--font-sans)); color:var(--ink); max-width:30ch; }
.ph-plan__go{ margin-block-start:8px; justify-self:start; }
.ph-plans__more{ display:flex; flex-wrap:wrap; gap:12px 32px; margin:clamp(32px, 4vw, 48px) 0 0; padding-block-start:clamp(24px, 3vw, 32px); box-shadow:inset 0 1px 0 var(--hairline-soft); }

/* ---------- 10 · chapters: a ruled board of the eight markets with the faces of members there; the chapter room on the phone ---------- */
.ph-chap__grid{ display:grid; gap:clamp(40px, 5vw, 80px); align-items:center; }
@media (min-width:1024px){ .ph-chap__grid{ grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); } }
.ph-board{ margin:0; padding:0; list-style:none; box-shadow:inset 0 1px 0 var(--hairline); }
.ph-board__row{ display:grid; grid-template-columns:48px minmax(0, 1fr) 180px 120px;   /* fixed tracks: the status column lines up on every row (review P2-6) */
   gap:12px 16px; align-items:center; min-height:56px; padding-block:8px; box-shadow:inset 0 -1px 0 var(--hairline-soft); }
.ph-board__cc{ font:500 13px/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--ink-muted); }
.ph-board__city{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.ph-board__city b{ font:600 17px/1.3 var(--k-font, var(--font-sans)); color:var(--ink); }
.ph-board__city span{ font:400 14px/1.3 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.ph-board__st{ display:inline-flex; align-items:center; gap:8px; font:500 12px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.ph-board__st::before{ content:""; width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink-muted); flex:none; }
.ph-board__st--on{ color:var(--ink); }
.ph-board__st--on::before{ background:var(--role-human); box-shadow:0 0 0 1px var(--role-human-text); }
.ph-faces{ display:flex; justify-content:flex-end; min-width:32px; }
.ph-faces img{ width:32px; height:32px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--ground-alt); }
.ph-faces img + img{ margin-inline-start:-8px; }
@media (max-width:599px){
  .ph-board__row{ grid-template-columns:36px minmax(0,1fr) auto; }
  .ph-board__st{ grid-column:2; grid-row:2; margin-block-start:-6px; }
  .ph-board__city{ flex-wrap:wrap; gap:2px 8px; }
  .ph-faces{ grid-column:3; grid-row:1 / span 2; }
  .ph-faces img{ width:28px; height:28px; }
}
.ph-chap__phone{ display:grid; justify-items:center; gap:16px; margin:0; }
.ph-chap__cap, .ph-letter__cap{ display:grid; gap:4px; max-width:260px; text-align:center; font:400 14px/1.5 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
.ph-chap__cap .t-micro, .ph-letter__cap .t-micro{ color:var(--ink-muted); }
.ph-letter__cap b{ font:600 16px/1.35 var(--k-font, var(--font-sans)); color:var(--ink); }

/* ---------- 11 · the founder's letter on the mode ground, the portrait, the Square Peg signature, the Workshop phone (.ph-letter__cb kept as the hook) ---------- */
.ph-letter__grid{ display:grid; gap:clamp(32px, 4vw, 64px); align-items:start; }
@media (min-width:1024px){ .ph-letter__grid{ grid-template-columns:minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); } }
.ph-founder{ display:grid; gap:14px; margin:0; max-width:300px; }
.ph-founder__img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-base); background:var(--ground-alt); }
.ph-founder figcaption{ display:grid; gap:2px; }
.ph-founder figcaption b{ font:600 16px/1.3 var(--k-font, var(--font-sans)); }
.ph-founder figcaption span{ font:400 14px/1.4 var(--k-font, var(--font-sans)); color:var(--ink-muted); }
@media (min-width:1024px){ .ph-founder{ position:sticky; top:calc(var(--header-h) + 32px); } }
@media (max-width:1023px){ .ph-founder{ max-width:96px; } .ph-founder__img{ border-radius:50%; } }   /* the name and role sit once, in the signature (review P2-8) */
.ph-letter__body{ display:grid; gap:20px; }
.ph-letter__body > *{ margin:0; }
.ph-letter__body .t-section{ margin-block-end:8px; }
.ph-letter__body > p:not([class]){ font:400 var(--role-lead)/1.65 var(--k-font, var(--font-sans)); color:var(--ink); max-width:62ch; }
.ph-letter__body b{ font-weight:600; }
.ph-sig{ display:grid; gap:2px; margin-block-start:8px !important; }
.ph-sig__n{ font:400 30px/1 "Square Peg", cursive; color:var(--purple); }
.ph-sig .t-micro{ color:var(--ink-muted); }
.ph-letter__cb{ display:grid; justify-items:center; gap:16px; margin:0; }
@media (max-width:1023px){ .ph-letter__cb{ padding-block-start:8px; } }

/* ---------- 12 · the DCR crop on the outcome duo (Signal): a white report window, labels with a shape, never colour alone ---------- */
.ph-dcr__copy{ display:grid; gap:0; }
.ph-dcr__copy .k-head{ margin-block-end:28px; }
.ph-dcr__band{ padding:clamp(20px, 3.4vw, 48px); border-radius:var(--radius-base); }
.ph-dcr__win{ display:grid; gap:14px; padding:clamp(18px, 2.4vw, 28px); border-radius:var(--radius-card); background:#fff; color:#000; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 24px 48px -24px rgba(0,0,0,.28);
  --ink:#000; --ink-muted:var(--slate); }
.ph-dcr__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ph-dcr__bar .t-micro{ color:var(--slate); }
.ph-dcr__bar .k-status{ background:var(--ghost-white); color:var(--slate); }
.ph-dcr__t{ margin:0; font:600 var(--role-card)/1.3 var(--font-sans); }
.ph-dcr__tbl{ width:100%; border-collapse:collapse; font:400 14px/1.35 var(--font-sans); }
.ph-dcr__tbl th, .ph-dcr__tbl td{ padding:10px 6px; text-align:start; box-shadow:inset 0 -1px 0 var(--hairline-soft, rgba(74,74,104,.14)); }
.ph-dcr__tbl thead th{ font:500 11px/1.2 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--slate); }
.ph-dcr__tbl tbody th{ font-weight:500; color:#000; padding-inline-end:12px; }
.cv{ display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:13px; color:#000; white-space:nowrap; }
.cv::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; box-sizing:border-box; }
.cv--ok::before{ background:var(--green-500, #00A763); }
.cv--thin::before{ border:2px solid var(--green-500, #00A763); background:linear-gradient(90deg, var(--green-500, #00A763) 50%, transparent 50%); }
.cv--no::before{ border:1.5px solid var(--slate); }
.ph-dcr__src{ margin:0; font:400 12px/1.5 var(--font-sans); color:var(--slate); }
@media (max-width:599px){
  .ph-dcr__tbl{ font-size:13px; }
  .ph-dcr__tbl th, .ph-dcr__tbl td{ padding:9px 3px; }
  .ph-dcr__tbl .cv{ font-size:0; gap:0; }   /* phones: the shape carries the label (key below); the word stays for screen readers */
  .ph-dcr__tbl .cv::before{ width:12px; height:12px; }
}
.ph-dcr__key{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; }
.ph-dcr__tbl tbody th{ max-width:16ch; }

/* ---------- 13 · close: the kit's K18 as is ---------- */
.pg-home .k-close{ padding-block-start:clamp(56px, 7vw, 96px); }

/* fix pass (review P2-7): the K11 card already says FREE / PRO / MAX / INFINITE, so the plan name under it is for screen
   readers only; the "FOR …" line leads */
.ph-plan__n{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* fix pass (review P2-5): the picker's form card stays in view beside the taller answer card */
@media (min-width:901px){ .ph-move .pui-pick{ align-items:start; } .ph-move .pui-pick > :first-child{ position:sticky; top:calc(var(--header-h, 64px) + 24px); } }