/* The new eSSESSMENT page (tab G): the homepage's modules (site.css, home.css), the product pictures from
   the first eSSESSMENT page (ess.css), and the few pieces this page adds. The story follows the core
   sales deck: the gap, guided check-ins, design, deliver, review, building blocks, examples, pricing. */

/* ---------- the module cards: the homepage's card size and corners for every picture ---------- */
#between .ie-v, #checkins .ie-v, #design .ie-v, #deliver .ie-v, #review .ie-v {
  --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12);
  position: relative; height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); padding: 0; overflow: hidden; border-radius: 40px;
}
#checkins .ie-v > .d-host { position: absolute; inset: 0; }
#checkins .ie-v { background: radial-gradient(70% 70% at 25% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom right, #fbd8d2 0%, #e6c9f2 50%, #b7c3ff 100%); }
#between .ie-i { display: none; }
@media (max-width: 899px) { #between .ie-v, #checkins .ie-v, #design .ie-v, #deliver .ie-v, #review .ie-v { height: calc(64px + min(550px, 100vw - 80px) * 0.58); } }
@media (max-width: 639px) { #between .ie-v, #checkins .ie-v, #design .ie-v, #deliver .ie-v, #review .ie-v { height: auto; aspect-ratio: 1; border-radius: 28px; } }
.e-fine { margin-top: 14px; font: 400 13px/19px var(--font); color: var(--mute); }

/* ---------- the gap: thirty days, two lab visits, a check-in on each day between ---------- */
#between .ie-v { background: #f1f1f3; }
.gp { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 7%; }
.gp-top { display: flex; justify-content: space-between; font: 400 13px/1 var(--font); color: var(--mute); }
.gp-top b { font-weight: 500; color: var(--ink); }
.gp-row { display: grid; grid-template-columns: 54px repeat(28, minmax(0, 1fr)) 54px; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gp-lab { display: grid; place-items: center; height: 54px; border-radius: 14px; background: #1d1d1f; color: #fff; text-align: center; }
.gp-lab b { font: 600 11px/1 var(--font); }
.gp-lab span { margin-top: -10px; font: 400 9.5px/1 var(--font); opacity: 0.7; }
.gp-d { display: grid; place-items: center; height: 54px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e6e4e0; }
.gp-d i { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; }
.gp-d.on { background: #e5484d; box-shadow: 0 6px 14px -6px rgba(229, 72, 77, 0.6); }
.gp-d.on i { background: #fff; }
.gp-pop { align-self: center; width: min(360px, 100%); padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px -22px rgba(20, 20, 40, 0.3); }
.gp-k { font: 500 12.5px/1 var(--font); color: var(--ink); }
.gp-tr { display: block; width: 100%; height: 40px; margin: 12px 0 10px; }
.gp-tr path { fill: none; stroke: #e5484d; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.gp-v { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; }
.gp-v small { display: block; font: 400 11.5px/1 var(--font); color: var(--mute); }
.gp-v b { display: block; margin-top: 6px; font: 500 22px/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.gp-v b span { margin-left: 3px; font: 400 12px/1 var(--font); letter-spacing: 0; color: var(--mute); }
.gp-cap { position: absolute; right: 24px; bottom: 18px; font: 400 11px/1 var(--font); color: var(--mute); }
@media (max-width: 639px) {
  .gp { gap: 16px; padding: 0 6%; }
  .gp-row { grid-template-columns: 34px repeat(28, minmax(0, 1fr)) 34px; gap: 2px; }
  .gp-lab, .gp-d { height: 38px; } .gp-lab { border-radius: 10px; } .gp-d { border-radius: 4px; }
  .gp-lab span { display: none; } .gp-d i { width: 4px; height: 4px; }
  .gp-pop { padding: 14px 16px; border-radius: 16px; } .gp-v b { font-size: 18px; }
}

/* ---------- design: the Claude window on a soft gradient, running off the right and the foot ---------- */
#design .ie-v { background: radial-gradient(70% 70% at 25% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom right, #fbe1d4 0%, #f3d4e4 50%, #d4dcff 100%); }
#design .ie-v > .chat { position: absolute; top: 9%; left: 7%; right: -4%; bottom: -10%; width: auto; max-width: none; margin: 0; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 60px -24px rgba(40, 30, 80, 0.4); }
#design .chat .chat-b { padding-right: 9%; }

/* ---------- deliver: the step list beside the phone, on warm gray ---------- */
#deliver .ie-v { display: grid; place-items: center; height: auto; min-height: 560px; padding: 36px 32px; background: #f1f1f3; }
#deliver .tp-ph { width: 100%; }
#deliver .tp-ph .phone { --pw: 236px !important; }
@media (max-width: 639px) { #deliver .ie-v { aspect-ratio: auto; min-height: 0; padding: 22px 14px; } #deliver .tp-ph .phone { --pw: 200px !important; } }

/* ---------- review: Playback, scaled into the card ---------- */
#review .ie-v { display: grid; align-items: center; padding: 0 0 0 7%; background: #f1f1f3; }
#review .ie-v > .stage { width: 112%; }

/* ---------- building blocks: word tiles, grouped by color ---------- */
.e-cap .cp-r { display: grid; align-items: center; }
.ct-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin-inline: auto; }
.ct { display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border-radius: 22px; font: 500 13px/1.2 var(--font); text-align: center; text-wrap: balance; color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35); }
.ct-q { background: #2f7de1; }
.ct-q:nth-child(2n) { background: #4b8ff0; }
.ct-a { background: #23a28c; }
.ct-a:nth-child(2n) { background: #2fb39b; }
.ct-r { background: #e5484d; }
.ct-r + .ct-r { background: #ef6a5b; }
.ct-k { background: #1d1d1f; }
.ct-bl { background: #e9e8e5; box-shadow: none; filter: blur(6px); opacity: 0.6; }
@media (max-width: 639px) { .ct-g { gap: 8px; } .ct { border-radius: 16px; font-size: clamp(9.5px, 2.6vw, 12.5px); } }

/* ---------- example programs ---------- */
.ex { padding-block: 112px 0; }
.ex-in { max-width: 1232px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.ex-t .f2-k { display: flex; height: auto; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--font); color: var(--mute); }
.ex-t .f2-h { margin-top: 18px; }
.ex-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.ex-c { display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #f1f1f3; }
.ex-k { font: 400 13px/18px var(--font); color: var(--mute); }
.ex-h { margin-top: 10px; font: 450 22px/28px var(--font); letter-spacing: -0.01em; color: var(--ink); }
.ex-p { margin-top: 10px; font: 400 15px/22px var(--font); color: var(--ink); }
.ex-m { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 22px; font: 400 13px/18px var(--font); color: var(--mute); }
.ex-m a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ex-own { background: #0e0e10; }
.ex-own .ex-h, .ex-own .ex-p, .ex-own .ex-m a { color: #fff; }
.ex-own .ex-k { color: #9a9aa3; }
.ex-n { margin-top: 18px; font: 400 12.5px/17px var(--font); color: var(--mute); }
@media (max-width: 899px) { .ex-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ex { padding-top: 72px; } .ex-in { padding-inline: 16px; } .ex-t { padding-inline: 9px; } .ex-g { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; } .ex-c { padding: 22px; } .ex-t .f2-k { display: none; } }

/* ---------- start ---------- */
.e-go { padding: 112px 24px 128px; text-align: center; }
.e-go-h { font: 450 clamp(34px, 5vw, 56px)/1.05 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.e-go-p { max-width: 520px; margin: 18px auto 0; font: 400 18px/27px var(--font); color: var(--mute); }
.e-go .h0-b { justify-content: center; margin-top: 30px; }
@media (max-width: 639px) { .e-go { padding: 72px 20px 88px; } .e-go-p { font-size: 16px; line-height: 24px; } }
#design .ie-v > .chat { left: 7%; right: auto; width: 97% !important; max-width: none !important; min-width: 0; justify-self: auto; }
/* deliver: no second card inside the card */
#deliver .tp-ph { padding: 0; border-radius: 0; background: none; box-shadow: none; grid-template-columns: minmax(0, 280px) auto; gap: clamp(24px, 4vw, 56px); }
#deliver .tp-list b { font-size: 16px; }
#deliver .tp-list span { font-size: 13px; line-height: 18px; }
.e-cap .f2-k { display: flex; height: auto; padding: 0; border-radius: 0; background: none; font: 400 15px/20px var(--font); color: var(--mute); }
.e-cap { padding-bottom: 0; }
@media (max-width: 639px) { .e-cap .f2-k { display: none; } }
@media (max-width: 639px) {
  /* design: the note and the link follow the copy, under the card */
  #design .e-fine { order: 2; margin: 14px 25px 0; }
  #design .ie-how { order: 2; justify-self: start; margin: 20px 0 0 25px; height: auto; padding: 0; box-shadow: none; background: none; font: 600 16px/24px var(--font); }
  /* deliver: just the phone, centred, cycling through its screens */
  #deliver .tp-ph { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #deliver .tp-list { display: none; }
  #deliver .ie-v { padding: 24px 0; }
}
@media (max-width: 639px) { .e-cap .e-fine { order: 2; margin: 14px 25px 0; } }

/* ---------- Between visits, as slide 1 of the sales deck, with the phone carried down from the hero ---------- */
.g1 { padding-block: 112px 0; }
.g1-in { position: relative; max-width: 1232px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.g1-svg { position: absolute; inset: 0; overflow: visible; }
.g1-slot { position: absolute; top: 0; left: 40px; width: 280px; height: 586px; }
.g1-slot .g1-phone, .g1-fly .g1-phone { transform: scale(calc(280 / 330)); transform-origin: top left; }
.g1-stage .g1-t { position: absolute; top: 150px; left: 470px; width: 640px; }
.g1-k { font: 400 15px/20px var(--font); color: var(--mute); }
.g1-h { margin-top: 18px; font: 450 56px/1.05 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.g1-h em { font-style: normal; color: #ad2029; }
.g1-p { max-width: 480px; margin-top: 24px; font: 400 18px/27px var(--font); color: var(--mute); }
.g1-cap { margin-top: 18px; font: 400 12.5px/17px var(--font); color: var(--mute); }
/* the travelling phone: fixed over the page while it moves, drawn at 330px and scaled to the slot */
.g1-fly { position: fixed; top: 0; left: 0; z-index: 30; width: 330px; transform-origin: top left; pointer-events: none; visibility: hidden; will-change: transform; }
.g1-fly .g1-phone { transform: none; }
.g1-fly.on { visibility: visible; }
.g1-slot.away { visibility: hidden; }
.g1-m { display: none; }
@media (max-width: 899px) {
  .g1-stage, .g1-fly { display: none !important; }
  .g1-m { display: grid; gap: 28px; }
  .g1-h { font-size: 40px; }
  .g1-mph { justify-self: center; width: 230px; height: 481px; }
  .g1-mph .g1-phone { transform: scale(calc(230 / 330)); transform-origin: top left; }
  .g1-msvg { width: 100%; height: auto; overflow: visible; }
}
@media (max-width: 639px) { .g1 { padding-top: 72px; } .g1-in { padding-inline: 25px; } .g1-k { display: none; } .g1-h { font-size: 34px; } .g1-p { font-size: 16px; line-height: 24px; } }

/* the travelling phone is a live copy of the hero's (ess2-travel.js), drawn at its own size */
.g1-fly { width: auto; transform-origin: 0 0; }
.g1-slot { overflow: visible; }
.g1-slot { top: 125px; }   /* the phone lands half as far above the line */
.g1-fly:not(.on) { display: none !important; }   /* gone, not just hidden: the copy inside sets its own visibility */
/* no empty space at the top of Between visits: the phone and copy start at the section's top edge */
.g1 { padding-top: 24px; }
.g1-slot { top: 0; }
.g1-stage .g1-t { top: 25px; }
.g1 { padding-top: 0; }
.g1-stage .g1-t { top: 75px; }   /* more room above "Between visits" */
.g1-stage .g1-p { max-width: 560px; }
.g1 { padding-top: 56px; }   /* a bit more room under the hero card */

/* How it works: a big centred heading, like the hero's */
.e-hiw { padding: 140px 24px 0; text-align: center; }
.e-hiw-h { font: 450 clamp(44px, 6vw, 76px)/1.02 var(--font); letter-spacing: -0.03em; color: var(--ink); }
.e-hiw-p { max-width: 560px; margin: 22px auto 0; font: 400 19px/29px var(--font); color: var(--mute); text-wrap: balance; }
.e-hiw + #design { padding-top: 72px; }
@media (max-width: 639px) { .e-hiw { padding-top: 88px; } .e-hiw-p { font-size: 16px; line-height: 24px; } .e-hiw + #design { padding-top: 40px; } }
.e-hiw + #design { padding-top: 120px; }
@media (max-width: 639px) { .e-hiw + #design { padding-top: 56px; } }
/* Deliver, step 1: the reminder is simply there on the lock screen */

/* Try it today: download Coherence */
.e-try { padding: 112px 24px 0; }
.e-try-in { max-width: 1232px; margin: 0 auto; padding: 72px 32px; border-radius: 40px; background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); text-align: center; }
.e-try-h { font: 450 clamp(36px, 5vw, 60px)/1.05 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.e-try-h em { font-style: normal; color: #ad2029; }
.e-try-p { max-width: 520px; margin: 18px auto 0; font: 400 18px/27px var(--font); color: var(--mute); text-wrap: balance; }
.e-try-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.e-store { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border-radius: 14px; background: #0b0b0c; color: #fff; text-decoration: none; transition: background 0.15s; }
.e-store:hover { background: #2a2a2e; }
.e-store svg { width: 26px; height: 26px; }
.e-store span { display: grid; text-align: left; }
.e-store small { font: 500 11px/1 var(--font); opacity: 0.8; }
.e-store b { margin-top: 3px; font: 600 18px/1.1 var(--font); }
.e-try-f { margin-top: 22px; font: 400 12.5px/17px var(--font); color: var(--mute); }
@media (max-width: 639px) { .e-try { padding: 72px 16px 0; } .e-try-in { padding: 48px 20px; border-radius: 28px; } .e-try-p { font-size: 16px; line-height: 24px; } }

/* Building blocks: every Activity Builder step on show, nothing to click */
.es-d { align-content: start; }
.es-d .mf-os { gap: 8px; }
.es-row { display: flex; align-items: center; gap: 14px; cursor: default; text-align: left; }
.es-row span { display: grid; gap: 2px; }
.es-row b { font: 500 15px/20px var(--font); color: var(--ink); }
.es-row small { font: 400 13px/18px var(--font); color: var(--mute); }
#model-cards-steps .ie-v { min-height: 0; padding-block: 44px; }
/* Try it today: G7's layout, store buttons under the copy, the app icon on a gradient card */
.e-try2 .ie-h em { font-style: normal; color: #ad2029; }
.e-try2 .e-try-b { justify-content: flex-start; margin-top: 28px; }
.e-try2 .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); display: grid; place-content: center; justify-items: center; gap: 14px; height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); border-radius: 40px; background: linear-gradient(#f6f5f2 0%, #f1f0ee 45%, #dfe1ee 82%, #b9c1ec 100%); }
.e-try2 .ie-v img { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 18px 36px -18px rgba(20, 20, 60, 0.45); }
.e-try2 .ie-v span { font: 500 16px/1 var(--font); color: var(--ink); }
@media (max-width: 639px) { .e-try2 .ie-v { height: auto; aspect-ratio: 1; border-radius: 28px; } .e-try2 .ie-v img { width: 104px; height: 104px; border-radius: 24px; } .e-try2 .e-try-b { margin: 24px 0 0 25px; } .e-try2 .e-fine { margin: 14px 25px 0; } }
/* more room after the examples */
.ex { padding-bottom: 56px; }
/* pricing: one card */
#pricing .pr-g { grid-template-columns: minmax(0, 420px); }
#deliver .tp-list.auto button[aria-selected="true"] i { animation-duration: 5s; }

/* Building blocks: the seven steps in two columns, so the card keeps the standard height */
#model-cards-steps .es-d { width: min(100%, 640px); }
#model-cards-steps .es-d .mf-os { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#model-cards-steps .es-row { padding: 10px 12px; }
#model-cards-steps .es-row small { font-size: 12px; line-height: 16px; }
#model-cards-steps .ie-v { --cw: calc((min(1232px, 100vw - 48px) - clamp(40px, 5vw, 80px)) * 7 / 12); height: calc(112px + min(550px, var(--cw) - 80px) * 0.58); min-height: 0; padding: 24px; }
@media (max-width: 899px) { #model-cards-steps .ie-v { height: auto; padding: 28px 14px; } }
@media (max-width: 639px) { #model-cards-steps .es-d .mf-os { grid-template-columns: 1fr; } }
/* Try it today: the store buttons sit on the card, under the app icon */
.e-try2 .ie-v .e-try-b { justify-content: center; margin-top: 18px; }
.e-try2 .ie-v .e-store { height: 50px; }
@media (max-width: 639px) { .e-try2 .ie-v .e-try-b { margin: 14px 0 0; } }
.e-try2 .ie-v .e-store span { display: grid; font: inherit; color: #fff; }
.e-try2 .ie-v .e-store small { font: 500 11px/1 var(--font); }
.e-try2 .ie-v .e-store b { font: 600 18px/1.1 var(--font); }
@media (max-width: 639px) { .e-try2 .e-fine { order: 3; margin: 14px 25px 0; } }
/* Deliver, camera reading: the vitals up top, the question during the reading at the foot */
.cam-q .co-read { top: 14cqi; bottom: auto; }
.cam-q .co-q { top: auto; bottom: 7cqi; }
.cam-q .co-tip { top: 108cqi; }
.cam-q .co-stop { display: none; }
#deliver .tp-list.auto button[data-tp="2"][aria-selected="true"] i { animation-duration: 8s; }
/* the survey card keeps one size (two lines kept for every question); the question and its scale
   cross-fade, and the answer fills in with a soft press */
.cam-q .co-q .co-qt { min-height: 2.4em; }
.cam-q .co-q .co-qt, .cam-q .co-q .co-ends, .cam-q .co-q .co-scale { transition: opacity 0.35s ease; }
.cam-q .co-q.swap .co-qt, .cam-q .co-q.swap .co-ends, .cam-q .co-q.swap .co-scale { opacity: 0; }
.cam-q .co-scale span { transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.e-try2 .ie-v { background: radial-gradient(70% 70% at 25% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom right, #fbd8d2 0%, #e6c9f2 50%, #b7c3ff 100%); }   /* its own colour, apart from Building blocks above */
/* Try it today: a phone, the app's icon and name, the two store buttons stacked under them */
.e-try2 .ie-v.e-try-v { display: grid; place-items: center; height: auto; padding: 0; background: none; border-radius: 0; }
.e-try-ph { --pw: 260px; }
.e-try-sc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 9cqi; background: linear-gradient(#ffffff, #f4f4f7); }
.e-try-sc img { width: 34cqi; height: 34cqi; border-radius: 8cqi; box-shadow: 0 4cqi 8cqi -4cqi rgba(20, 20, 60, 0.45); }
.e-try-sc b { margin-top: 5cqi; font: 650 7cqi/1.1 var(--ui); letter-spacing: -0.01em; color: #1d1d1f; }
.e-try-sc small { margin-top: 1.4cqi; font: 500 4.2cqi/1 var(--ui); color: #6e6e73; }
.e-try-st { display: grid; gap: 3cqi; width: 100%; margin-top: 9cqi; }
.e-try-st .e-store { justify-content: center; height: auto; padding: 3.4cqi 4cqi; border-radius: 4cqi; }
.e-try-st .e-store svg { width: 7cqi; height: 7cqi; }
.e-try-st .e-store span { display: grid; color: #fff; }
.e-try-st .e-store small { margin: 0; font: 500 3cqi/1 var(--ui); color: rgba(255, 255, 255, 0.8); }
.e-try-st .e-store b { margin: 0.6cqi 0 0; font: 600 5cqi/1.1 var(--ui); color: #fff; }
@media (max-width: 639px) { .e-try-ph { --pw: 220px; } }
.cam-q .co-q.nt .co-scale span { transition: none; }

/* Start: two ways in, side by side */
.e-go { padding: 112px 24px 128px; text-align: left; }
.e-go2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1232px; margin: 0 auto; }
.e-go-c { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 40px; border-radius: 28px; background: #f1f1f3; }
.e-go-ch { font: 450 clamp(28px, 3vw, 40px)/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.e-go-cp { margin-top: 12px; font: 400 17px/25px var(--font); color: var(--mute); }
.e-go-c .btn { margin-top: 28px; }
.e-go-dk { background: #0e0e10; }
.e-go-dk .e-go-ch { color: #fff; }
.e-go-dk .e-go-cp { color: #9a9aa3; }
.e-go-b2 { background: #fff; color: #0e0e10; }
.e-go-b2:hover { background: #e9e9ee; }
@media (max-width: 799px) { .e-go2 { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .e-go { padding: 72px 16px 88px; } .e-go-c { padding: 32px 24px; border-radius: 22px; } }
/* Try it today: a smaller app icon on the phone */
.e-try-sc img { width: 18cqi; height: 18cqi; border-radius: 4.4cqi; }
.e-try-sc b { margin-top: 3.4cqi; font-size: 6cqi; }
.e-go-c .btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; font: 500 16px/1 var(--font); text-decoration: none; }
.e-go-b1 { background: #0e0e10; color: #fff; }
.e-go-b1:hover { background: #2a2a2e; }
.e-try2 .ie-v.e-try-v .e-try-sc img { width: 18cqi; height: 18cqi; border-radius: 4.4cqi; box-shadow: 0 2cqi 5cqi -2cqi rgba(20, 20, 60, 0.4); }
/* the vitals sit just above the survey card */
.cam-q .co-read { top: auto; bottom: 56cqi; }
/* FAQs: more room above */
#faqs { padding-top: 72px; }
/* Try it today: the phone as a home screen, Coherence among the apps, the store buttons as a widget */
.e-try2 .ie-v.e-try-v .e-try-sc.hs { display: block; padding: 0; background: radial-gradient(80% 60% at 20% 10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 100%), linear-gradient(160deg, #fbd8d2 0%, #e6c9f2 50%, #b7c3ff 100%); }
.hs-g { position: absolute; top: 19cqi; left: 7cqi; right: 7cqi; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 5cqi; justify-items: center; }
.hs-a { display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; }
.hs-a i { display: block; width: 15cqi; height: 15cqi; border-radius: 3.6cqi; box-shadow: inset 0 0 0 0.3cqi rgba(255, 255, 255, 0.55); opacity: 0.85; }
.hs-a u { display: block; width: 10cqi; height: 1.4cqi; margin-top: 0.6cqi; border-radius: 1cqi; background: rgba(29, 29, 31, 0.14); }
.e-try2 .ie-v.e-try-v .hs .hs-coh img { width: 15cqi; height: 15cqi; border-radius: 3.6cqi; box-shadow: 0 1.6cqi 4cqi -1.4cqi rgba(20, 20, 60, 0.45); }
.e-try2 .ie-v.e-try-v .hs .hs-coh b { margin: 0; font: 600 3cqi/1 var(--ui); letter-spacing: 0; color: #1d1d1f; }
.hs-w { position: absolute; left: 7cqi; right: 7cqi; bottom: 30cqi; padding: 4cqi; border-radius: 6cqi; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 0.3cqi rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs-w .e-try-st { margin: 0; }
.hs-d { position: absolute; left: 4.5cqi; right: 4.5cqi; bottom: 6cqi; display: flex; justify-content: space-around; padding: 3.4cqi 3cqi; border-radius: 8cqi; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 0.3cqi rgba(255, 255, 255, 0.55); }
.hs-d i { width: 15cqi; height: 15cqi; border-radius: 3.6cqi; box-shadow: inset 0 0 0 0.3cqi rgba(0, 0, 0, 0.04); }
/* Building blocks: nine steps, three across */
#model-cards-steps .es-d .mf-os { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { #model-cards-steps .es-d .mf-os { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { #model-cards-steps .es-d .mf-os { grid-template-columns: 1fr; } }
/* Try it today: a plain home screen, only Coherence and the store buttons */
.e-try2 .ie-v.e-try-v .e-try-sc.hs { background: linear-gradient(#ffffff, #f2f2f5); }
.hs-w { bottom: 12cqi; background: #f6f6f8; box-shadow: inset 0 0 0 0.3cqi #e8e8ed; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Building blocks, grouped: six question types as a compact grid, then the three activities as rows */
#model-cards-steps .es-d { gap: 10px; }
.es-g { margin-top: 6px; font: 500 12px/16px var(--font); letter-spacing: 0.02em; color: var(--mute); }
#model-cards-steps .es-d .mf-os.es-qs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#model-cards-steps .es-d .mf-os.es-as { grid-template-columns: minmax(0, 1fr); }
#model-cards-steps .es-q { padding: 9px 12px; }
#model-cards-steps .es-q b { font-size: 14px; line-height: 18px; }
@media (max-width: 639px) { #model-cards-steps .es-d .mf-os.es-qs { grid-template-columns: 1fr 1fr; } }
/* Try it today: the Coherence icon alone, centred on the home screen */
.hs-g { top: 0; bottom: 48cqi; display: grid; place-content: center; grid-template-columns: auto; }
.e-try2 .ie-v.e-try-v .hs .hs-coh img { width: 22cqi; height: 22cqi; border-radius: 5cqi; }
.e-try2 .ie-v.e-try-v .hs .hs-coh b { font-size: 4cqi; }
@media (min-width: 640px) { #model-cards-steps .ie-v { height: auto; padding-block: 40px; } }   /* the grouped card is taller: let the panel grow to fit */
/* Try it today: copy left, a black card right, the same size as the Building blocks card above */
.dlc .dlc-h em { font-style: normal; color: #ad2029; }
.dlc .ie-v.dlc-v { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; border-radius: 40px; background: #0b0b0c; text-align: center; box-sizing: border-box; }
.dlc-t { font: 600 clamp(30px, 3vw, 42px)/1.05 var(--font); letter-spacing: -0.02em; color: #fff; }
.dlc-i { width: 112px; height: 112px; margin-top: 28px; border-radius: 26px; box-shadow: 0 0 0 3px #fff; }
.dlc-b { display: grid; gap: 12px; width: min(100%, 260px); margin-top: 32px; }
.dlc-s { display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; text-decoration: none; transition: background-color 0.15s; }
.dlc-s:hover { background: #1c1c1f; }
.dlc-s svg { width: 28px; height: 28px; flex: none; color: #fff; }
.dlc-s span { display: grid; text-align: left; }
.dlc-s small { font: 500 12px/1 var(--font); color: #fff; }
.dlc-s b { margin-top: 3px; font: 600 22px/1.05 var(--font); letter-spacing: -0.01em; color: #fff; }
@media (max-width: 639px) { .dlc .ie-v.dlc-v { order: 1; padding: 40px 20px; border-radius: 28px; } .dlc-i { width: 96px; height: 96px; border-radius: 22px; } .dlc .e-fine { order: 3; margin: 14px 25px 0; } }
/* Try it today, card: the full download design (headline, line, icon, store buttons, fine print) */
.dlc-t em { font-style: normal; color: #e5484d; }
.dlc .ie-v.dlc-v { padding: 36px 28px; }
.dlc-t { font-size: clamp(30px, 3.2vw, 44px); }
.dlc-p { max-width: 360px; margin-top: 10px; font: 400 15px/22px var(--font); color: #a1a1aa; text-wrap: balance; }
.dlc-i { width: 88px; height: 88px; margin-top: 22px; border-radius: 21px; }
.dlc-b { gap: 10px; width: min(100%, 240px); margin-top: 22px; }
.dlc-s { height: 54px; }
.dlc-s b { font-size: 20px; }
.dlc-f { margin-top: 18px; font: 400 11.5px/16px var(--font); color: #77777f; }
/* Try it today, card sized like the Review card: tighter spacing so everything fits */
.dlc .ie-v.dlc-v { min-height: 0; padding: 24px 28px; overflow: hidden; }
.dlc-t { font-size: clamp(28px, 2.8vw, 38px); }
.dlc-p { margin-top: 8px; }
.dlc-i { width: 72px; height: 72px; margin-top: 18px; border-radius: 17px; }
.dlc-b { gap: 8px; width: min(100%, 220px); margin-top: 18px; }
.dlc-s { height: 48px; gap: 10px; }
.dlc-s svg { width: 24px; height: 24px; }
.dlc-s small { font-size: 10.5px; }
.dlc-s b { font-size: 18px; }
.dlc-f { margin-top: 14px; }
@media (max-width: 639px) { .dlc .ie-v.dlc-v { padding: 20px 16px; } .dlc-t { font-size: 26px; } .dlc-p { font-size: 13px; line-height: 18px; } .dlc-i { width: 56px; height: 56px; margin-top: 12px; border-radius: 13px; box-shadow: 0 0 0 2px #fff; } .dlc-b { margin-top: 12px; width: min(100%, 200px); } .dlc-s { height: 42px; } .dlc-s b { font-size: 16px; } .dlc-f { margin-top: 10px; font-size: 10.5px; line-height: 14px; } }
@media (min-width: 640px) and (max-width: 999px) { .dlc-t { font-size: 28px; } .dlc-i { width: 60px; height: 60px; margin-top: 14px; border-radius: 14px; } .dlc-b { margin-top: 14px; } .dlc-s { height: 44px; } .dlc-f { margin-top: 10px; } }
/* Between visits on phones and tablets: the desktop module itself, scaled to fit (phone, arrows, timeline),
   under the copy; the separate phone layout is not used */
@media (max-width: 899px) {
  .g1-in { display: flex; flex-direction: column; }
  .g1-m { order: 0; }
  .g1-m .g1-mph, .g1-m .g1-msvg { display: none; }
  .g1-stage { display: block !important; order: 1; margin-top: 28px; }
  .g1-stage .g1-t { display: none; }
}
@media (max-width: 899px) { .g1-slot .g1-phone { transform: scale(0.694); } }   /* the phone at the size it lands at on desktop (229 of the stage's 1232), clear of the timeline */
/* Review: a taller Playback window (the stage is 860 x 580), the card grows with it */
#review .pb-lanes { height: 402px; }
#review .ie-v.e-pb-card { height: auto; aspect-ratio: auto; padding-block: 48px; }
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding-block: 28px; } }
/* Deliver on phones and tablets: the steps stay on the left as on desktop, a smaller phone on the right */
@media (max-width: 899px) {
  #deliver .ie-v { height: auto; aspect-ratio: auto; padding: 28px 20px; }
  #deliver .tp-ph { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: center; gap: 16px; }
  #deliver .tp-list { display: grid; order: 0; }
  #deliver .tp-ph .phone { --pw: 180px !important; }
}
@media (max-width: 639px) {
  #deliver .ie-v { padding: 18px 12px; }
  #deliver .tp-ph { gap: 10px; }
  #deliver .tp-ph .phone { --pw: 136px !important; }
  #deliver .tp-list { gap: 2px; }
  #deliver .tp-list button { grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; padding: 8px 8px; border-radius: 12px; }
  #deliver .tp-list button::before { width: 22px; height: 22px; font-size: 11px; }
  #deliver .tp-list b { font-size: 13px; line-height: 17px; }
  #deliver .tp-list span { font-size: 11px; line-height: 15px; }
  #deliver .tp-list i { left: 8px; right: 8px; }
}
/* Between visits on phones and tablets: the copy, then the phone with the program's 30 days as a block grid to
   its right (visits on day 1 and day 30 in black, check-ins on day 10 and day 20 in red, dotted arrows to them) */
.pdg, .pdg-a { display: none; }
@media (max-width: 899px) {
  .g1-stage { display: none !important; }
  .g1-m { position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px 40px; }
  .g1-m .g1-t { grid-column: 1 / -1; }
  .g1-m .g1-msvg { display: none; }
  .g1-m .g1-mph { display: block; justify-self: start; width: 200px; height: 418px; }
  .g1-m .g1-mph .g1-phone { transform: scale(calc(200 / 330)); transform-origin: top left; }
  .pdg { display: grid; gap: 14px; justify-items: start; }
  .pdg-g { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; margin: 0; padding: 0; list-style: none; }
  .pdg-g li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; background: #f1efeb; font: 500 12px/1 var(--font); color: #a9a49b; font-variant-numeric: tabular-nums; }
  .pdg-g li.v { background: #17171a; color: #fff; }
  .pdg-g li.c { background: #ad2029; color: #fff; box-shadow: 0 6px 14px -6px rgba(173, 32, 41, 0.6); }
  .pdg-lg { display: flex; gap: 16px; font: 500 12px/1 var(--font); color: var(--mute); }
  .pdg-lg span { display: inline-flex; align-items: center; gap: 6px; }
  .pdg-lg span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
  .pdg-lg .v::before { background: #17171a; }
  .pdg-lg .c::before { background: #ad2029; }
  .pdg-a { display: block; position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
  .pdg-a path { fill: none; stroke: #ad2029; stroke-width: 2.2; stroke-dasharray: 1.5 6; stroke-linecap: round; }
}
@media (max-width: 639px) {
  .g1-m { gap: 24px 22px; }
  .g1-m .g1-mph { width: 150px; height: 314px; }
  .g1-m .g1-mph .g1-phone { transform: scale(calc(150 / 330)); }
  .pdg-g { grid-template-columns: repeat(6, minmax(0, 28px)); gap: 5px; }
  .pdg-g li { border-radius: 8px; font-size: 10px; }
  .pdg-lg { gap: 10px; font-size: 11px; }
  .pdg-a path { stroke-width: 2; stroke-dasharray: 1.2 5; }
}
@media (max-width: 899px) {
  .pdg-a path.h { stroke: #fff; stroke-width: 6; stroke-dasharray: none; opacity: 0.9; }   /* a white halo where an arrow crosses the grid */
}
@media (max-width: 899px) { .pdg-g li:not(.v):not(.c) { color: transparent; } }   /* numbers only on the four marked days; the arrows pass over plain blocks */
/* Days grid: 20 days, five to a row, all circles; the other days are empty rings */
@media (max-width: 899px) {
  .pdg-g { grid-template-columns: repeat(5, 40px); gap: 12px; }
  .pdg-g li { border-radius: 50%; }
  .pdg-g li:not(.v):not(.c) { background: transparent; box-shadow: inset 0 0 0 1.5px #d6d2cb; }
  .pdg-lg span::before { border-radius: 50%; }
}
@media (max-width: 639px) {
  .pdg-g { grid-template-columns: repeat(5, minmax(0, 30px)); gap: 8px; }
  .pdg-g li { border-radius: 50%; }
}
/* Between visits: no arrows; the circle grid sits level with the top of the phone */
@media (max-width: 899px) { .g1-m .pdg { align-self: start; padding-top: 6px; } }
/* Deliver on phones: a larger phone, so the card is taller */
@media (max-width: 899px) { #deliver .tp-ph .phone { --pw: 220px !important; } #deliver .ie-v { padding: 32px 20px; } }
@media (max-width: 639px) { #deliver .tp-ph .phone { --pw: 172px !important; } #deliver .ie-v { padding: 26px 12px; } }
/* Days grid: under the legend, what one check-in holds (survey answers and the camera's vitals) */
@media (max-width: 899px) {
  .pdg-ck { width: 100%; max-width: 260px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -14px rgba(23, 23, 23, 0.3); box-sizing: border-box; }
  .pdg-ckh { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font); color: var(--ink); }
  .pdg-ckh::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ad2029; }
  .pdg-ck dl { display: grid; gap: 7px; margin: 10px 0 0; }
  .pdg-ck dl div { display: flex; justify-content: space-between; gap: 10px; }
  .pdg-ck dt { font: 400 12px/1.2 var(--font); color: var(--mute); }
  .pdg-ck dd { margin: 0; font: 500 12px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
}
@media (max-width: 639px) {
  .pdg-ck { padding: 10px 11px; border-radius: 12px; }
  .pdg-ckh { font-size: 12px; }
  .pdg-ck dl { gap: 5px; margin-top: 8px; }
  .pdg-ck dt, .pdg-ck dd { font-size: 11px; }
}
/* Days column, lined up: grid, legend and check-in card share one width and left edge; the grid starts at the
   top of the phone and the card ends at its bottom; smaller circles */
@media (max-width: 899px) {
  .g1-m .pdg { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: min(100%, 280px); padding: 0; }
  .pdg-g { grid-template-columns: repeat(5, 26px); justify-content: space-between; gap: 14px 0; width: 100%; }
  .pdg-g li { width: 26px; font-size: 10px; }
  .pdg-g li.c { box-shadow: 0 4px 10px -4px rgba(173, 32, 41, 0.6); }
  .pdg-ck { max-width: none; width: 100%; margin-top: auto; }
}
@media (max-width: 639px) {
  .g1-m .pdg { gap: 10px; }
  .pdg-g { grid-template-columns: repeat(5, 20px); gap: 10px 0; }
  .pdg-g li { width: 20px; font-size: 9px; }
  .pdg-g li:not(.v):not(.c) { box-shadow: inset 0 0 0 1.25px #d6d2cb; }
}
/* Between visits ("Introducing eSSESSMENT") is desktop only: hidden below 900px */
@media (max-width: 899px) { #between { display: none !important; } }
/* Deliver, "For today" screen: more room between the date, the title and the two cards, and the app's tab bar at the foot */
#deliver .co-day { margin-top: 3cqi; }
#deliver .co-h { margin-top: 2.6cqi; }
#deliver .co-h + .co-card { margin-top: 7cqi; }
#deliver .co-card + .co-card { margin-top: 4cqi; }
#deliver .co-card { padding: 5cqi; }
.co-tb { display: flex; justify-content: space-around; margin: auto -6cqi -9cqi; padding: 3.4cqi 4cqi 8cqi; border-top: 1px solid var(--s-line); background: #fafafa; }
.co-tb span { display: grid; justify-items: center; gap: 1.2cqi; font: 500 3.1cqi/1 var(--ui); color: #9a9aa0; }
.co-tb span.on { color: #b51f2a; }
.co-tb svg { width: 6.4cqi; height: 6.4cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* How it works: a short centred hairline under the intro, before the Design card (not a full-width rule) */
.e-hiw::after { content: ""; display: block; width: 48px; height: 1px; margin: 48px auto 0; background: var(--line-2); }
@media (max-width: 639px) { .e-hiw::after { width: 40px; margin-top: 36px; } }
/* Review on phones: the browser fills the card edge to edge (no empty strip on the left) */
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 14px 12px; } #review .ie-v > .stage { width: 100%; } }
@media (max-width: 639px) { #review .pb { width: 640px; } #review .pb-g { grid-template-columns: minmax(0, 1fr) 170px; } }   /* phones: the window drawn at 640 wide to match the stage */
@media (max-width: 639px) { #review .pb-cam { width: 74%; aspect-ratio: 1; } #review .pb-cam img { object-position: 50% 22%; } }   /* phones: a smaller camera tile, so she sits smaller in the window */
/* Review: the camera tile plays the participant video */
#review .pb-cam video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 639px) { #review .pb-cam video { object-position: 50% 22%; } }
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 16px 0 16px 14px; overflow: hidden; } #review .ie-v > .stage { width: 122%; } }   /* phones: the window runs off the card's right edge, as on desktop */
@media (max-width: 639px) { #review .ie-v > .stage { width: 104%; } }   /* far enough off the right edge that the camera picture is cut off */
@media (max-width: 639px) { #review .ie-v > .stage { max-width: none; } }   /* a site-wide max-width: 100% was holding it inside the card */
/* Review on phones: the window hangs just past the card's edge; the small camera tile is nudged right so only
   her picture is cut off, and the notes under it stay whole */
@media (max-width: 639px) { #review .pb-cam { transform: translateX(64px); } }
/* Review on phones: the whole Playback window in view inside the card (no bleed), the camera tile in its column */
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 14px 12px; } #review .ie-v > .stage { width: 100%; max-width: 100%; } #review .pb-cam { transform: none; } }
/* Review on phones: the window runs straight off the card's right edge (square right corners), content still in view */
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 14px 0 14px 12px; overflow: hidden; } #review .ie-v > .stage { width: calc(100% + 12px); max-width: none; } #review .pb { border-radius: 14px 0 0 14px; } }
@media (max-width: 639px) { #review .pb-cam { width: 100%; aspect-ratio: 16 / 10; } #review .pb-cam video { object-position: 50% 28%; } }   /* phones: a landscape camera tile, full column width and shorter */
@media (max-width: 639px) { #review .pb-cam { width: 78%; } }   /* phones: a smaller landscape camera tile */
@media (max-width: 639px) { #review .ie-v > .stage { translate: 4.4% 0; } }   /* phones: shifted right until only a sliver of white is left between her and the card edge */
/* Review on phones: no play button or times in the header, and a slightly shorter window */
@media (max-width: 639px) { #review .pb-tr { display: none; } #review .pb-lanes { height: 362px; } }

/* The page shows once this, its last stylesheet, is in (see the head) */
body { opacity: 1; }

/* Playback: a narrower camera column so the participant sits smaller (tablet and up). */
@media (min-width: 640px) { #review .pb-g { grid-template-columns: minmax(0, 1fr) 140px; } }

/* Modules match the homepage: gray body copy under black headings. */
main[data-view="site-ess"] > section:not(#intro) :is(.ie-p,.g1-p,.e-hiw-p,.ex-p,.e-go-cp,.ie-l li){color:#7d7d80}
main[data-view="site-ess"] > section.e-go :is(.e-go-dk) .e-go-cp{color:#9a9aa3}

/* Model cards: "Open model card" as a button, not a small text link. */
main[data-view="site-ess"] .mcx-l .mcx-a{align-self:flex-start;gap:7px;height:38px;margin-top:16px;padding:0 18px;border-radius:999px;background:#0e0e10;color:#fff;font:500 14px/1 var(--font)}
main[data-view="site-ess"] .mcx-l .mcx-a:hover{background:#2a2a2e;text-decoration:none}

/* Cards use the homepage's cool gray, not the warm one. */
main[data-view="site-ess"] #model-cards-steps .ie-v.mf-v{background:#f1f1f3}

/* Building blocks: nothing here is clickable, so the rows lose their outlines. */
main[data-view="site-ess"] #model-cards-steps .es-row{border:0;box-shadow:none;background:none;padding:8px 4px}

/* Pricing on desktop: heading above, one wide card with details left and the list and button right. */
@media (min-width:900px){
 main[data-view="site-ess"] #pricing .pr-in{grid-template-columns:minmax(0,1fr);row-gap:40px}
 main[data-view="site-ess"] #pricing .pr-g{grid-template-columns:minmax(0,1fr);grid-template-rows:none;max-width:none}
 main[data-view="site-ess"] #pricing .pr-c{grid-row:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:72px;padding:40px 48px}
 main[data-view="site-ess"] #pricing .pr-tag{grid-column:1;grid-row:1}
 main[data-view="site-ess"] #pricing .pr-n{grid-column:1;grid-row:2}
 main[data-view="site-ess"] #pricing .pr-s{grid-column:1;grid-row:3}
 main[data-view="site-ess"] #pricing .pr-p b{grid-column:1;grid-row:4;align-self:end;margin-top:28px}
 main[data-view="site-ess"] #pricing .pr-p span{grid-column:1;grid-row:5}
 main[data-view="site-ess"] #pricing .pr-l{grid-column:2;grid-row:1 / 4;margin-top:0;padding-top:0;border-top:0}
 main[data-view="site-ess"] #pricing .pr-m{display:none}
 main[data-view="site-ess"] #pricing .pr-f{grid-column:2;grid-row:4;align-self:end}
 main[data-view="site-ess"] #pricing .pr-b{grid-column:2;grid-row:5}
}

/* Building blocks: a line icon per step, so the list doesn't read like the model card picker */
#model-cards-steps .es-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#f1f1f3;color:#0a0a0a}
#model-cards-steps .es-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Deliver: the lock screen on the homepage gray, not a darker blue-gray */
#deliver .co-lock { background: linear-gradient(180deg, #f7f7f9 0%, #f1f1f3 100%); }
/* Review: the homepage hero's browser in place of the Playback window (note, Oct 30); rvb-old is kept but hidden. */
#review .rvb-old { display: none !important; }
#review .rvb { position: relative; width: 100%; height: 0; overflow: hidden; background: #fff; border: 1px solid #d3d5da; box-shadow: 0 12px 28px -20px rgba(37,42,60,.25); opacity: 0; transition: opacity .3s; }
#review .rvb.on { opacity: 1; }
#review .rvb iframe { position: absolute; left: 0; top: 0; width: 1600px; height: 1100px; border: 0; transform-origin: 0 0; pointer-events: none; }
#review .ie-v.e-pb-card { padding: 48px; overflow: hidden; }
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 16px; } }
/* until the browser reports its size, hold a 1.55:1 space so the card never collapses */
#review .rvb:not(.on) { height: auto !important; aspect-ratio: 1.55; }
/* Slightly larger browser, same even gap on all sides (note, Oct 30). */
#review .ie-v.e-pb-card { padding: 32px; }
@media (max-width: 639px) { #review .ie-v.e-pb-card { padding: 12px; } }
/* The white cards in Building blocks and Model cards match the Review browser (note, Oct 30): same 32px gray
   border all round, same width, and the browser's 608:354 shape (content may make them a touch taller). */
@media (min-width: 640px) {
  #model-cards-steps .ie-v.mf-v, #model-cards-skin .ie-v.mcx-v { display: block; height: auto; aspect-ratio: auto; min-height: 0; padding: 32px; }
  #model-cards-steps .ie-v.mf-v > .es-d, #model-cards-skin .ie-v.mcx-v > .mcx-c { box-sizing: border-box; width: 100%; max-width: none; margin: 0; aspect-ratio: 608 / 354; transform: none; }
  #model-cards-skin .ie-v.mcx-v > .mcx-c { align-content: center; }
}
@media (max-width: 639px) {
  #model-cards-steps .ie-v.mf-v, #model-cards-skin .ie-v.mcx-v { height: auto; aspect-ratio: auto; padding: 12px; }
  #model-cards-steps .ie-v.mf-v > .es-d, #model-cards-skin .ie-v.mcx-v > .mcx-c { box-sizing: border-box; width: 100%; max-width: none; margin: 0; transform: none; }
}
/* Review browser: the same drop shadow as those white cards. */
#review .rvb { box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 24px 50px -22px rgba(30,30,60,.35); border-color: transparent; }
@media (min-width: 640px) {
  #model-cards-steps .ie-v.mf-v, #model-cards-skin .ie-v.mcx-v { height: auto !important; align-self: center; }
  #model-cards-steps .ie-v.mf-v > .es-d .mf-o { padding-block: 6px; }
}