/* ===== Website v2 (October 2026) =====
   Its own tab, its own hooks. Everything sits under .w2-view and uses w2- classes and data-w2-* attributes,
   so the original Website tab (.mock, .page, .dirscope, data-page-link) and the live site build never see it.
   The site is light by design. Layout responds to the frame's width with container queries, so the
   Phone button shows the real phone layout inside the decision room. */

/* ---------- The tab around the site (decision-room chrome, theme-aware) ---------- */
.w2-view .b-lede { max-width: 50em; }
.w2-intro { display: grid; gap: 22px; }
.w2-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
@media (max-width: 1040px) { .w2-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w2-who { grid-template-columns: minmax(0, 1fr); } }
.w2-who-card { background: var(--b-surface); border: 1px solid var(--b-line); border-radius: 14px; padding: 18px 18px 16px; display: grid; gap: 8px; align-content: start; }
.w2-who-card h3 { font: 600 20px/1.2 var(--b-display); margin: 0; }
.w2-who-card p { margin: 0; font-size: 15px; line-height: 1.45; }
.w2-who-card .w2-who-k { font: 700 12.5px/1.2 var(--b-body); letter-spacing: .06em; text-transform: uppercase; color: var(--b-muted); }
.w2-who-card dl { margin: 0; display: grid; gap: 8px; }
.w2-who-card dt { font: 700 12.5px/1.2 var(--b-body); letter-spacing: .04em; text-transform: uppercase; color: var(--b-muted); }
.w2-who-card dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.w2-changed { margin-top: 26px; }
.w2-changed summary { cursor: pointer; font: 700 16px/1.3 var(--b-body); list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.w2-changed summary::-webkit-details-marker { display: none; }
.w2-changed summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.w2-changed[open] summary::before { transform: rotate(45deg); }
.w2-changed ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; max-width: 62em; }
.w2-changed li { line-height: 1.5; }

.w2-ctx { background: var(--b-surface); border: 1px solid var(--b-line); border-radius: 14px; margin-top: 18px; }
.w2-ctx-in { padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.w2-ctx-in > label { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--b-body); color: var(--b-muted); }
.w2-ctx select { min-height: 40px; border-radius: 9px; border: 1px solid var(--b-line); background: var(--b-surface); color: var(--b-ink); font: 600 15px/1 var(--b-body); padding: 0 10px; }
.w2-ctx-seg { display: inline-flex; border: 1px solid var(--b-line); border-radius: 10px; overflow: hidden; background: var(--b-surface); }
.w2-ctx-seg button { min-height: 40px; padding: 0 14px; border: 0; background: none; color: var(--b-muted); font: 600 14px/1 var(--b-body); cursor: pointer; }
.w2-ctx-seg button[aria-pressed="true"] { background: var(--b-strong); color: var(--b-on-strong); }
.w2-ctx-imgs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.w2-ctx-imgs > span { font: 600 14px/1 var(--b-body); color: var(--b-muted); }
.w2-ctx-file { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px dashed var(--b-line); background: var(--b-surface); font: 600 14px/1 var(--b-body); cursor: pointer; }
.w2-ctx-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.w2-ctx-file:focus-within { outline: 3px solid var(--b-strong); outline-offset: 2px; }
@media (max-width: 760px) { .w2-ctx-imgs { margin-left: 0; } }

.w2-map { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1040px) { .w2-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w2-map button { width: 100%; min-height: 64px; text-align: left; display: grid; gap: 3px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--b-line); background: var(--b-surface); color: var(--b-ink); cursor: pointer; font: inherit; }
.w2-map button b { font: 700 15px/1.2 var(--b-body); }
.w2-map button span { font-size: 13px; line-height: 1.3; color: var(--b-muted); }
.w2-map button[aria-current="true"] { border-color: var(--b-strong); box-shadow: inset 0 0 0 1px var(--b-strong); }
.w2-map-h { font: 700 13px/1.2 var(--b-body); letter-spacing: .06em; text-transform: uppercase; color: var(--b-muted); margin: 22px 0 0; }

.w2-stage { margin-top: 22px; }
.w2-frame { border: 1px solid var(--b-line); border-radius: 16px; overflow: clip; background: #FCFCFA; box-shadow: var(--b-shadow); transition: max-width .32s ease; margin-inline: auto; max-width: 100%; }
.w2-stage[data-w2-device="phone"] .w2-frame { max-width: 390px; border-radius: 28px; }
.w2-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #EEEDE8; border-bottom: 1px solid #DEDDD6; color: #55555D; }
.w2-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D4D2CA; flex: none; }
.w2-url { flex: 1; min-width: 0; text-align: center; font: 500 13px/1.2 var(--b-body); background: #FFFFFF; border: 1px solid #DEDDD6; border-radius: 7px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-viewport { container: w2 / inline-size; }
@media (max-width: 560px) { .w2-stage { margin-inline: -12px; } .w2-frame { border-radius: 12px; } }

/* ---------- The site itself ---------- */
.w2 {
  color-scheme: light;
  --paper: #FCFCFA; --paper-2: #F4F2EC; --paper-3: #ECE9E1; --card: #FFFFFF;
  --ink: #18181C; --ink-2: #2E2E35; --muted: #5A5A62; --soft: #8A8A92; --line: #E3E1D9; --line-2: #CFCCC2;
  --red: #E03E2D; --red-ink: #B92A1B; --red-soft: #FCE7E4;
  --blue: #3FA7D6; --blue-ink: #1A6F99; --blue-soft: #E3F2F9;
  --green: #1E7A4C; --green-soft: #E2F2E9;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r: 8px; --r-lg: 14px;
  --shadow: 0 1px 0 rgba(24,24,28,.05), 0 22px 44px -28px rgba(24,24,28,.5);
  --shadow-sm: 0 1px 0 rgba(24,24,28,.05), 0 10px 22px -16px rgba(24,24,28,.35);
  background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
:where(.w2) *, :where(.w2) *::before, :where(.w2) *::after { box-sizing: border-box; }
:where(.w2) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.w2) :where(ul, ol) { padding: 0; list-style: none; }
:where(.w2) a { color: inherit; }
:where(.w2) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.w2 :focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
:where(.w2) :where(h1, h2) { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
:where(.w2) :where(h3, h4) { font: 600 19px/1.3 var(--body); letter-spacing: -0.005em; text-wrap: balance; }
.w2 em, .w2 .w2-em { font-style: italic; }
.w2 h1 em, .w2 h2 em { color: var(--red-ink); }
.w2 [id] { scroll-margin-top: 140px; }

.w2-in { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.w2-narrow { max-width: 780px; }
@container w2 (max-width: 640px) { .w2-in { padding-inline: 18px; } }

/* Early-access strip and header */
.w2-strip { background: var(--ink); color: #F1F0EC; font: 500 14px/1.3 var(--body); }
.w2-strip .w2-in { display: flex; justify-content: center; align-items: center; gap: 10px; padding-block: 9px; text-align: center; }
.w2-strip i { width: 8px; height: 8px; border-radius: 50%; background: #5BC08A; box-shadow: 0 0 0 0 rgba(91,192,138,.6); animation: w2-ping 2.4s ease-out infinite; flex: none; }
@keyframes w2-ping { 0% { box-shadow: 0 0 0 0 rgba(91,192,138,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(91,192,138,0); } }
.w2-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 49px); z-index: 20; background: rgba(252,252,250,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.w2-nav .w2-in { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.w2-logo { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font: 400 27px/1 var(--display); letter-spacing: -0.01em; margin-right: auto; cursor: pointer; background: none; border: 0; padding: 0; color: var(--ink); }
.w2-logo b { font-style: italic; font-weight: 400; color: var(--red-ink); }
.w2-links { display: flex; align-items: center; gap: 22px; }
.w2-links a, .w2-links button { font: 500 15.5px/1 var(--body); text-decoration: none; color: var(--ink-2); background: none; border: 0; padding: 8px 0; cursor: pointer; border-bottom: 2px solid transparent; }
.w2-links a:hover, .w2-links button:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.w2-links [aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.w2-menu-btn { display: none; min-height: 44px; min-width: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; padding: 0 12px; font: 600 15px/1 var(--body); }
.w2-sheet { display: none; }
@container w2 (max-width: 860px) {
  .w2-links { display: none; }
  .w2-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .w2-nav .w2-in { gap: 10px; }
  .w2-nav .w2-btn { min-height: 44px; padding-inline: 14px; font-size: 15px; }
  .w2-sheet { display: block; overflow: hidden; max-height: 0; transition: max-height .28s ease; border-top: 1px solid transparent; }
  .w2-sheet.is-open { max-height: 420px; border-top-color: var(--line); }
  .w2-sheet ul { display: grid; padding: 6px 18px 14px; }
  .w2-sheet a, .w2-sheet button { display: flex; width: 100%; min-height: 48px; align-items: center; text-align: left; font: 500 17px/1 var(--body); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; padding: 0; }
}
@container w2 (max-width: 400px) { .w2-logo { font-size: 23px; } .w2-nav .w2-btn { padding-inline: 12px; } }

/* Buttons and links */
.w2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r); background: var(--ink); color: #FFFFFF; font: 600 16.5px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 20px -14px rgba(24,24,28,.8); }
.w2-btn:hover { background: #000000; transform: translateY(-1px); }
.w2-btn:active { transform: translateY(0); }
.w2-btn svg { width: 18px; height: 18px; flex: none; }
.w2-btn--lg { min-height: 58px; padding-inline: 30px; font-size: 17.5px; }
.w2-btn--quiet { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.w2-btn--quiet:hover { background: var(--paper-2); }
.w2-link { font: 600 15.5px/1.3 var(--body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; background: none; border: 0; padding: 6px 0; cursor: pointer; }
.w2-link:hover { text-decoration-color: var(--ink); }
.w2-cta { display: grid; justify-items: start; gap: 12px; }
.w2-cta--center { justify-items: center; text-align: center; }
.w2-under { font-size: 14.5px; line-height: 1.4; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.w2-under svg { width: 16px; height: 16px; color: var(--green); flex: none; }
@container w2 (max-width: 640px) { .w2-cta { justify-items: stretch; text-align: center; } .w2-cta .w2-btn { width: 100%; } .w2-under { justify-content: center; } }

/* Sections and type */
.w2-pg { display: block; }
.w2-pg[hidden] { display: none !important; }
.w2-pg.is-in { animation: w2-page .28s ease both; }
@keyframes w2-page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.w2-sec { padding-block: 92px; }
.w2-sec + .w2-sec { padding-top: 24px; }
.w2-sec--tint { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) 90px, var(--paper-2) calc(100% - 90px), var(--paper) 100%); }
.w2-sec--tint + .w2-sec, .w2-sec + .w2-sec--tint { padding-top: 92px; }
@container w2 (max-width: 640px) { .w2-sec { padding-block: 60px; } .w2-sec--tint + .w2-sec, .w2-sec + .w2-sec--tint { padding-top: 60px; } }
.w2-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.w2-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.w2-h1 { font-size: clamp(46px, 7.2cqi, 86px); line-height: .98; }
.w2-h2 { font-size: clamp(36px, 5cqi, 58px); line-height: 1.02; }
.w2-line { font-size: clamp(17.5px, 1.9cqi, 20.5px); line-height: 1.5; color: var(--muted); max-width: 36em; text-wrap: pretty; }
.w2-small { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.w2-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.w2-tag--red { background: var(--red-soft); color: var(--red-ink); border-color: transparent; }
.w2-tag--blue { background: var(--blue-soft); color: var(--blue-ink); border-color: transparent; }
.w2-tag--green { background: var(--green-soft); color: var(--green); border-color: transparent; }

/* Hero */
.w2-hero { padding-block: 64px 84px; }
.w2-hero .w2-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.w2-hero-copy { display: grid; gap: 22px; align-content: center; }
.w2-hero-copy .w2-line { font-size: clamp(18px, 2.1cqi, 21.5px); }
@container w2 (max-width: 860px) {
  .w2-hero { padding-block: 36px 60px; }
  .w2-hero .w2-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Sample art and the before and after slider */
.w2-art { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 100%; overflow: hidden; border-radius: var(--r); background: var(--paper-3); }
.w2-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.w2-art .w2-own { position: absolute; inset: 0; background: center / cover no-repeat; display: none; z-index: 2; }
.w2-art[data-w2-state="before"] .w2-own { background-image: var(--own-before); }
.w2-art[data-w2-state="after"] .w2-own { background-image: var(--own-after); }
.w2.has-own-before .w2-art[data-w2-state="before"] .w2-own, .w2.has-own-after .w2-art[data-w2-state="after"] .w2-own { display: block; }
.w2-sample { position: absolute; left: 10px; bottom: 10px; z-index: 3; font: 600 11.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; background: rgba(255,255,255,.88); color: #4A4A52; pointer-events: none; }

.w2-ba { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: end; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); --pos: 50%; user-select: none; -webkit-user-select: none; touch-action: pan-y; background: var(--paper-3); }
@container w2 (max-width: 860px) { .w2-ba { justify-self: stretch; max-width: none; } }
.w2-ba .w2-art { position: absolute; inset: 0; border-radius: 0; }
.w2-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.w2-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFFFF; z-index: 4; box-shadow: 0 0 0 1px rgba(0,0,0,.12); pointer-events: none; }
.w2-ba-knob { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #FFFFFF; color: var(--ink); display: grid; place-items: center; z-index: 5; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); pointer-events: none; transition: transform .18s ease; }
.w2-ba-knob svg { width: 22px; height: 22px; }
.w2-ba:hover .w2-ba-knob, .w2-ba:focus-within .w2-ba-knob { transform: scale(1.06); }
.w2-ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 6; }
.w2-ba-lab { position: absolute; top: 12px; z-index: 5; font: 600 13px/1 var(--body); padding: 7px 10px; border-radius: 6px; background: rgba(255,255,255,.92); color: var(--ink); pointer-events: none; transition: opacity .2s ease; }
.w2-ba-lab--before { left: 12px; }
.w2-ba-lab--after { right: 12px; }
.w2-ba[data-w2-near="before"] .w2-ba-lab--before, .w2-ba[data-w2-near="after"] .w2-ba-lab--after { opacity: 0; }
.w2-pin { position: absolute; left: var(--x); top: var(--y); z-index: 3; display: inline-flex; align-items: center; gap: 7px; transform: translate(-14px, -14px); pointer-events: none; }
.w2-pin b { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #FFFFFF; display: grid; place-items: center; font: 700 14px/1 var(--body); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 14px -6px rgba(0,0,0,.5); flex: none; }
.w2-pin span { font: 600 13px/1.2 var(--body); background: #FFFFFF; color: var(--ink); padding: 6px 9px; border-radius: 6px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); white-space: nowrap; }
@container w2 (max-width: 520px) { .w2-pin span { display: none; } }
.w2-ba-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.w2-ba-wrap { display: grid; justify-items: end; }
@container w2 (max-width: 860px) { .w2-ba-wrap { justify-items: stretch; } }
.w2-ba-wrap .w2-ba-cap { width: 100%; max-width: 560px; }
@container w2 (max-width: 860px) { .w2-ba-wrap .w2-ba-cap { max-width: none; } }
.w2-credit { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1.3 var(--body); color: var(--ink-2); }
.w2-credit svg { width: 16px; height: 16px; color: var(--red-ink); flex: none; }
.w2-credit b { font-weight: 700; }

/* Square sample tiles */
.w2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@container w2 (max-width: 760px) { .w2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.w2-tile { display: grid; gap: 12px; align-content: start; }
.w2-tile .w2-art { box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.w2-tile:hover .w2-art { transform: translateY(-3px); box-shadow: var(--shadow); }
.w2-tile h3 { font-size: 18px; }
.w2-tile p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.w2-flip { position: relative; aspect-ratio: 1 / 1; }
.w2-flip .w2-art { position: absolute; inset: 0; transition: opacity .45s ease, transform .3s ease; }
.w2-flip .w2-art[data-w2-state="before"] { opacity: 0; }
.w2-tile:hover .w2-flip .w2-art[data-w2-state="before"], .w2-flip.is-before .w2-art[data-w2-state="before"] { opacity: 1; }
.w2-flip-hint { position: absolute; right: 10px; top: 10px; z-index: 4; font: 600 11.5px/1 var(--body); padding: 6px 8px; border-radius: 5px; background: rgba(24,24,28,.78); color: #FFFFFF; pointer-events: none; }
@container w2 (max-width: 640px) { .w2-tile h3 { font-size: 16px; } .w2-tile p { font-size: 14px; } }

/* The three jobs */
.w2-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@container w2 (max-width: 900px) { .w2-jobs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
.w2-job { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.w2-job.is-lead { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); }
.w2-job-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.w2-job h3 { font: 400 34px/1 var(--display); letter-spacing: -0.01em; }
.w2-job-what { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.w2-price { display: grid; gap: 4px; padding-block: 14px; border-block: 1px solid var(--line); }
.w2-price-big { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.w2-price-big small { font: 500 14px/1 var(--body); color: var(--muted); }
.w2-price-big strong { font: 400 46px/1 var(--display); letter-spacing: -0.02em; }
.w2-price-split { font-size: 13.5px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.w2-job .w2-ledger { align-self: start; }
.w2-job .w2-credit { padding-top: 14px; border-top: 1px dashed var(--line-2); }

/* Plain ruled lists */
.w2-ledger { display: grid; }
.w2-ledger li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.w2-ledger li:last-child { border-bottom: 0; }
.w2-ledger li::before { content: ""; width: 7px; height: 7px; margin: 8px 0 0 6px; border-radius: 50%; background: var(--ink); }
.w2-ledger b { font-weight: 600; }
.w2-ledger--big li { font-size: 17px; padding-block: 16px; }

/* Steps */
.w2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: w2s; position: relative; }
.w2-steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.w2-step { position: relative; display: grid; gap: 12px; align-content: start; padding-right: 26px; counter-increment: w2s; }
.w2-step::before { content: counter(w2s); position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); font: 400 28px/1 var(--display); }
.w2-step h3 { font-size: 21px; margin-top: 6px; }
.w2-step p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.w2-step .w2-small { color: var(--ink-2); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.w2-step .w2-small svg { width: 15px; height: 15px; }
@container w2 (max-width: 760px) {
  .w2-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .w2-steps::before { left: 27px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 14px); }
  .w2-step { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding-right: 0; }
  .w2-step::before { grid-row: 1 / span 3; }
  .w2-step h3 { margin-top: 14px; }
}
.w2-after-steps { margin-top: 40px; text-align: center; font: 400 italic 26px/1.3 var(--display); color: var(--ink-2); }

/* Two columns: copy and a picture or list */
.w2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.w2-split--flip > :first-child { order: 2; }
@container w2 (max-width: 860px) { .w2-split { grid-template-columns: minmax(0, 1fr); gap: 30px; } .w2-split--flip > :first-child { order: 0; } }
.w2-split .w2-head { margin-bottom: 0; }

/* A big statement band */
.w2-band { background: var(--ink); color: #F4F3EF; border-radius: 22px; padding: clamp(36px, 6cqi, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.w2-band h2 { color: #FFFFFF; }
.w2-band h2 em { color: #FF8A7A; }
.w2-band .w2-line { color: #CFCDC6; }
.w2-band-num { display: grid; gap: 8px; justify-items: start; }
.w2-band-num strong { font: 400 clamp(84px, 13cqi, 150px)/.9 var(--display); letter-spacing: -0.03em; color: #FFFFFF; }
.w2-band-num span { font-size: 17px; color: #CFCDC6; max-width: 20em; }
.w2-band .w2-credit { color: #E7E5DF; }
.w2-band .w2-credit svg { color: #FF8A7A; }
.w2-band .w2-btn { background: #FFFFFF; color: var(--ink); }
.w2-band .w2-btn:hover { background: #F1F0EC; }
@container w2 (max-width: 860px) { .w2-band { grid-template-columns: minmax(0, 1fr); border-radius: 16px; gap: 26px; } }

/* Cards in a grid (benefits, terms) */
.w2-grid { display: grid; gap: 18px; }
.w2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container w2 (max-width: 900px) { .w2-grid--3, .w2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container w2 (max-width: 600px) { .w2-grid--2, .w2-grid--3, .w2-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.w2-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 10px; align-content: start; }
.w2-card h3 { font-size: 19px; }
.w2-card p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.w2-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
.w2-ico svg { width: 22px; height: 22px; }
.w2-ico--red { background: var(--red-soft); color: var(--red-ink); }
.w2-ico--blue { background: var(--blue-soft); color: var(--blue-ink); }
.w2-ico--green { background: var(--green-soft); color: var(--green); }

/* Numbers */
.w2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@container w2 (max-width: 760px) { .w2-stats { grid-template-columns: minmax(0, 1fr); } }
.w2-stat { display: grid; gap: 6px; padding: 22px 0; border-top: 2px solid var(--ink); }
.w2-stat strong { font: 400 54px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.w2-stat p { color: var(--muted); font-size: 15.5px; }
.w2-stat small { color: var(--soft); font-size: 13px; }

/* Price table and receipt */
.w2-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.w2-table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 560px; }
.w2-table th, .w2-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.w2-table th { font: 600 13px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.w2-table tr:last-child td { border-bottom: 0; }
.w2-table td.w2-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.w2-table td strong { font-size: 17px; }
.w2-receipt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; display: grid; gap: 0; box-shadow: var(--shadow-sm); max-width: 440px; width: 100%; justify-self: center; }
.w2-receipt-h { font: 600 13px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.w2-receipt dl { display: grid; }
.w2-receipt dl > div { display: flex; justify-content: space-between; gap: 14px; padding-block: 11px; border-bottom: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; }
.w2-receipt dt { color: var(--ink-2); }
.w2-receipt dd { font-weight: 600; }
.w2-receipt .is-total { border-bottom: 0; padding-top: 14px; }
.w2-receipt .is-total dt { font-weight: 700; }
.w2-receipt .is-total dd { font: 400 34px/1 var(--display); }
.w2-receipt-note { font-size: 13.5px; color: var(--muted); padding-top: 8px; }

/* Questions */
.w2-faq { max-width: 780px; margin-inline: auto; display: grid; border-top: 1px solid var(--line-2); }
.w2-faq details { border-bottom: 1px solid var(--line-2); }
.w2-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 22px 0; font: 600 18px/1.35 var(--body); }
.w2-faq summary::-webkit-details-marker { display: none; }
.w2-faq summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: radial-gradient(circle, var(--ink) 0 0) center / 12px 2px no-repeat, radial-gradient(circle, var(--ink) 0 0) center / 2px 12px no-repeat; transition: transform .25s ease, background-size .25s ease; }
.w2-faq details[open] summary::after { transform: rotate(180deg); background-size: 12px 2px, 2px 0; }
.w2-faq .w2-a { padding: 0 44px 22px 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; display: grid; gap: 10px; }
.w2-faq details[open] .w2-a { animation: w2-open .26s ease both; }
@keyframes w2-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.w2-faq-group { font: 400 32px/1.1 var(--display); margin: 44px auto 6px; max-width: 780px; }
.w2-faq-group:first-child { margin-top: 0; }
@container w2 (max-width: 640px) { .w2-faq summary { font-size: 17px; padding: 18px 0; } .w2-faq .w2-a { padding-right: 0; } }

/* Closing call to action */
.w2-final { text-align: center; display: grid; justify-items: center; gap: 18px; padding: clamp(44px, 7cqi, 84px) 24px; border-radius: 22px; background: radial-gradient(120% 140% at 50% 0%, #FFFFFF 0, var(--paper-2) 70%); border: 1px solid var(--line); }
.w2-final .w2-line { margin-inline: auto; }

/* Notes and callouts */
.w2-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.w2-note svg { width: 20px; height: 20px; margin-top: 2px; color: var(--ink-2); }
.w2-note--blue { background: var(--blue-soft); border-color: transparent; }
.w2-note--blue svg { color: var(--blue-ink); }
.w2-note--green { background: var(--green-soft); border-color: transparent; }
.w2-note--green svg { color: var(--green); }

/* Forms */
.w2-form { display: grid; gap: 26px; }
.w2-form-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 4cqi, 40px); box-shadow: var(--shadow-sm); display: grid; gap: 24px; }
.w2-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: w2p; }
.w2-progress li { display: grid; gap: 8px; font: 600 14px/1.25 var(--body); color: var(--soft); counter-increment: w2p; }
.w2-progress li::before { content: ""; height: 5px; border-radius: 3px; background: var(--line); transition: background .3s ease; }
.w2-progress li.is-on, .w2-progress li.is-done { color: var(--ink); }
.w2-progress li.is-on::before, .w2-progress li.is-done::before { background: var(--ink); }
.w2-field { display: grid; gap: 7px; }
.w2-field > label, .w2-field > legend, .w2-label { font: 600 16px/1.3 var(--body); padding: 0; }
.w2-field .w2-opt { font-weight: 500; color: var(--soft); }
.w2-hint { font-size: 14px; line-height: 1.45; color: var(--muted); }
.w2-input, .w2-textarea, .w2-select { width: 100%; min-height: 50px; border: 1px solid var(--line-2); border-radius: var(--r); background: #FFFFFF; padding: 12px 14px; font-size: 16px; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease; }
.w2-textarea { min-height: 108px; resize: vertical; }
.w2-input:focus, .w2-textarea:focus, .w2-select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(24,24,28,.12); }
.w2-input::placeholder, .w2-textarea::placeholder { color: #9A9AA1; }
.w2-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@container w2 (max-width: 640px) { .w2-row { grid-template-columns: minmax(0, 1fr); } }
fieldset.w2-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.w2-choices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; }
@container w2 (max-width: 640px) { .w2-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2-choices--stack { grid-template-columns: minmax(0, 1fr); } }
.w2-choice { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 14px 13px; border: 1px solid var(--line-2); border-radius: 11px; background: #FFFFFF; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; min-height: 52px; }
.w2-choice input { position: absolute; opacity: 0; pointer-events: none; }
.w2-choice b { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.w2-choice span { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.w2-choice .w2-choice-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.w2-choice:hover { border-color: var(--ink-2); }
.w2-choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--paper); }
.w2-choice:has(input:focus-visible) { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.w2-choice.is-suggested::after { content: "Our pick"; position: absolute; top: -9px; right: 10px; font: 700 11px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; background: var(--ink); color: #FFFFFF; }
.w2-drop { position: relative; display: grid; place-items: center; gap: 10px; text-align: center; padding: 34px 20px; border: 2px dashed var(--line-2); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.w2-drop:hover, .w2-drop.is-over { border-color: var(--ink); background: #FFFFFF; }
.w2-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.w2-drop svg { width: 30px; height: 30px; color: var(--ink-2); }
.w2-drop b { font-size: 17px; }
.w2-marker { position: relative; border-radius: 12px; overflow: hidden; background: var(--paper-3); cursor: crosshair; max-width: 520px; margin-inline: auto; width: 100%; }
.w2-marker img { display: block; width: 100%; height: auto; }
.w2-marker .w2-art { border-radius: 0; }
.w2-marker .w2-pin { pointer-events: auto; }
.w2-marker .w2-pin span { display: none; }
.w2-notes { display: grid; gap: 10px; }
.w2-notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.w2-notes li > b { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #FFFFFF; display: grid; place-items: center; font: 700 14px/1 var(--body); }
.w2-notes button { min-height: 44px; min-width: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; text-decoration: underline; }
.w2-form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
@container w2 (max-width: 640px) { .w2-form-nav { flex-direction: column-reverse; align-items: stretch; } .w2-form-nav .w2-btn { width: 100%; } }
.w2-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 18px; border-radius: 12px; background: var(--paper-2); font-variant-numeric: tabular-nums; }
.w2-total strong { font: 400 36px/1 var(--display); }
.w2-total span { font-size: 14px; color: var(--muted); }
.w2-done { display: grid; justify-items: center; text-align: center; gap: 16px; padding-block: 24px; }
.w2-done-mark { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); animation: w2-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.w2-done-mark svg { width: 34px; height: 34px; }
@keyframes w2-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.w2-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.w2-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }

/* Footer */
.w2-foot { margin-top: 40px; border-top: 1px solid var(--line); padding-block: 48px 40px; background: var(--paper); }
.w2-foot .w2-in { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
.w2-foot h4 { font: 700 13px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.w2-foot ul { display: grid; gap: 4px; }
.w2-foot a, .w2-foot button { font: 400 15.5px/1.3 var(--body); text-decoration: none; color: var(--ink-2); background: none; border: 0; padding: 7px 0; cursor: pointer; text-align: left; }
.w2-foot a:hover, .w2-foot button:hover { color: var(--ink); text-decoration: underline; }
.w2-foot-brand { display: grid; gap: 12px; align-content: start; }
.w2-foot-brand p { color: var(--muted); font-size: 15px; max-width: 26em; }
.w2-foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@container w2 (max-width: 760px) { .w2-foot .w2-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2-foot-brand { grid-column: 1 / -1; } }

/* Scroll reveal: only when the script runs, and never with reduced motion */
.w2.w2-anim [data-w2-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.w2.w2-anim [data-w2-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .w2 *, .w2 *::before, .w2 *::after { animation: none !important; transition: none !important; }
  .w2.w2-anim [data-w2-reveal] { opacity: 1; transform: none; }
}

/* Visibility helpers */
.w2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w2-only-phone { display: none; }
@container w2 (max-width: 640px) { .w2-only-phone { display: revert; } .w2-no-phone { display: none; } }

/* Client and artist sides share the header and footer */
.w2[data-w2-side="client"] [data-w2-only="artist"], .w2[data-w2-side="artist"] [data-w2-only="client"] { display: none !important; }
.w2-ba-before { position: absolute; inset: 0; }
.w2-legend { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-2); font-weight: 500; }
.w2-legend li { display: inline-flex; align-items: center; gap: 7px; }
.w2-legend b { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #FFFFFF; display: grid; place-items: center; font: 700 12px/1 var(--body); }
.w2 [data-w2-step].is-in { animation: w2-page .28s ease both; }
@container w2 (max-width: 520px) { .w2-pin { transform: translate(-11px, -11px); } .w2-pin b { width: 22px; height: 22px; font-size: 12px; } }
/* The footer's link style must not flatten the logo */
.w2-foot .w2-logo { font: 400 27px/1 var(--display); color: var(--ink); padding: 0; }
.w2-foot .w2-logo:hover { text-decoration: none; }
/* On phones the header button steps back, so the hero button is the only solid one in view */
@container w2 (max-width: 860px) { .w2-nav .w2-btn { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; } .w2-nav .w2-btn:hover { background: var(--paper-2); } }
/* A legend ignores its fieldset's grid gap, so it carries its own space above the choices */
fieldset.w2-field > legend { padding-bottom: 8px; }

/* ===== The pre-launch page (view-prelaunch.html, web2-prelaunch-page.html). Builds on web2.css. ===== */
.pl .pl-nav .w2-in { gap: 18px; }
.pl .pl-links a { font: 500 15.5px/1 var(--body); text-decoration: none; color: var(--ink-2); padding: 8px 0; border-bottom: 2px solid transparent; }
.pl .pl-links a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
/* No button in the header: the hero holds the one main button. Phones keep the two key links */
@container w2 (max-width: 860px) { .pl .pl-links { display: flex; gap: 16px; } .pl .pl-links a { font-size: 15px; padding: 12px 0; } }
@container w2 (max-width: 520px) { .pl .pl-link-faq { display: none; } }
.pl .w2-logo { text-decoration: none; }
.pl .pl-hero { padding-block: 88px 96px; }
.pl .pl-hero .w2-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pl .pl-hero .w2-hero-copy { max-width: 820px; justify-items: center; }
.pl .pl-hero .w2-line { margin-inline: auto; }
@container w2 (max-width: 640px) { .pl .pl-hero { padding-block: 52px 64px; } }
.pl .pl-steps { margin-bottom: 40px; }

/* The quiz */
.pl .pl-quiz { max-width: 760px; margin-inline: auto; }
.pl .pl-card { gap: 20px; }
.pl .pl-qhead { display: grid; gap: 10px; }
.pl .pl-qcount { font: 600 14px/1 var(--body); color: var(--muted); }
.pl .pl-qbar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl .pl-qbar i { display: block; height: 100%; width: var(--p, 16%); background: var(--red-ink); border-radius: 3px; transition: width .32s ease; }
.pl .pl-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.pl .pl-q[hidden] { display: none; }
.pl .pl-q.is-in { animation: w2-page .28s ease both; }
.pl .pl-qtitle { font: 400 clamp(28px, 3.6cqi, 36px)/1.12 var(--display); letter-spacing: -0.01em; padding: 0; margin: 0; }
.pl .pl-opts { --cols: 2; }
.pl .pl-opts .w2-choice { min-height: 60px; align-content: center; padding: 16px 18px; }
.pl .pl-opts .w2-choice b { font-size: 17px; }
@container w2 (max-width: 640px) { .pl .pl-opts { grid-template-columns: minmax(0, 1fr); } }
.pl .pl-drop { padding: 26px 18px; }
.pl .pl-details .w2-form-nav, .pl .pl-q .w2-form-nav { padding-top: 4px; }

/* The artist rounds */
.pl .pl-rounds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 44px; counter-reset: none; }
.pl .pl-rounds li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 16px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow-sm); }
.pl .pl-rounds .is-real { background: var(--red-ink); color: #FFFFFF; border-color: var(--red-ink); box-shadow: 0 18px 36px -22px rgba(185, 42, 27, .75); }
.pl .pl-r-n { font: 600 12.5px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pl .pl-rounds .is-real .pl-r-n { color: #FBE3DF; }
.pl .pl-rounds b { font-size: 16px; line-height: 1.3; }
.pl .pl-rounds strong { font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--red-ink); }
.pl .pl-rounds .is-real strong { font-size: 26px; color: #FFFFFF; }
@container w2 (max-width: 860px) { .pl .pl-rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl .pl-rounds .is-real { grid-column: 1 / -1; } }
.pl .pl-artist-split { align-items: start; }
.pl .pl-submit { justify-content: flex-end; }

/* Email sign-up */
.pl .pl-notify-form { display: grid; gap: 14px; width: 100%; max-width: 560px; }
.pl .pl-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl .pl-who label { position: relative; cursor: pointer; }
.pl .pl-who input { position: absolute; opacity: 0; }
.pl .pl-who span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #FFFFFF; font: 600 15px/1 var(--body); }
.pl .pl-who input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pl .pl-who input:focus-visible + span { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.pl .pl-notify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
@container w2 (max-width: 520px) { .pl .pl-notify-row { grid-template-columns: minmax(0, 1fr); } }
.pl .pl-foot { margin-top: 0; padding-block: 28px; }
.pl .pl-foot .w2-foot-base { border-top: 0; margin-top: 0; padding-top: 0; }
.pl .pl-foot a { color: var(--muted); }
.pl .w2-choice.is-off { opacity: .45; pointer-events: none; }
.pl .pl-artist-copy { position: sticky; top: 130px; }
@container w2 (max-width: 860px) { .pl .pl-artist-copy { position: static; } }
.pl .pl-hero .w2-under { display: block; text-align: center; }
.pl .pl-hero .w2-under svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* Spacing pass (Jan, October 7): even padding, no oversized gaps */
.pl .w2-sec { padding-block: 48px; }
.pl .w2-sec + .w2-sec, .pl .w2-sec--tint + .w2-sec, .pl .w2-sec + .w2-sec--tint { padding-top: 48px; }
.pl .w2-sec--tint { padding-block: 56px; background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) 32px, var(--paper-2) calc(100% - 32px), var(--paper) 100%); }
.pl .pl-hero { padding-block: 64px 40px; }
.pl .w2-head { margin-bottom: 30px; gap: 12px; }
.pl .pl-steps { margin-bottom: 32px; }
.pl .pl-rounds { margin-bottom: 32px; }
.pl .pl-card { gap: 18px; }
.pl .pl-qhead { gap: 8px; }
.pl legend.pl-qtitle, .pl p.pl-qtitle { padding: 6px 0 14px; }
.pl .pl-q { gap: 12px; }
.pl .pl-q .w2-hint { margin-top: -6px; }
.pl .pl-notify .w2-final { padding: 44px 24px; gap: 16px; }
.pl .pl-foot { padding-block: 24px; }
@container w2 (max-width: 640px) {
  .pl .w2-sec, .pl .w2-sec--tint { padding-block: 36px; }
  .pl .w2-sec + .w2-sec, .pl .w2-sec--tint + .w2-sec, .pl .w2-sec + .w2-sec--tint { padding-top: 36px; }
  .pl .pl-hero { padding-block: 40px 28px; }
  .pl .w2-head { margin-bottom: 24px; }
  .pl .pl-notify .w2-final { padding: 32px 22px; }
}
/* The red line always starts its own line */
.pl .pl-hero h1 em { display: block; }
.pl .pl-notify-note { margin-top: -4px; }

/* UX pass (Jan, October 8) */
/* Hidden means hidden. The live site has no global rule, and cards set their own display */
.pl [hidden] { display: none !important; }

/* Choices: a round mark (one answer) or a square (pick any), in the logo's red once picked */
.pl .w2-choices { gap: 12px; }
.pl .w2-choice, .pl .pl-opts .w2-choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #FFFFFF; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.pl .w2-choice::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B4B1A7; background: #FFFFFF; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pl .w2-choice:has(input[type="checkbox"])::before { border-radius: 6px; }
.pl .w2-choice b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.pl .pl-opts .w2-choice b { font-size: 16.5px; }
.pl .w2-choice:hover { border-color: var(--ink-2); background: #FFFFFF; }
.pl .w2-choice:has(input:checked) { border-color: var(--red-ink); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red-ink); }
.pl .w2-choice:has(input[type="radio"]:checked)::before { border-color: var(--red-ink); background: var(--red-ink); box-shadow: inset 0 0 0 4px #FFFFFF; }
.pl .w2-choice:has(input[type="checkbox"]:checked)::before { border-color: var(--red-ink); background: var(--red-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.pl .w2-choice:has(input:focus-visible) { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.pl .w2-choice .pl-c-text { display: grid; gap: 2px; min-width: 0; font-size: inherit; color: var(--ink); }
.pl .pl-c-text span { font-size: 14px; line-height: 1.35; color: var(--muted); }

/* Even rows: two answers a row (4 or 6 answers), three answers stack in one column, one column on phones */
.pl .pl-opts--stack { grid-template-columns: minmax(0, 1fr); }
.pl .pl-other { padding-top: 4px; animation: w2-page .24s ease both; }

/* Dropdowns: room for the arrow, which sits 16px in from the edge */
.pl .w2-select { -webkit-appearance: none; appearance: none; padding: 12px 48px 12px 16px; cursor: pointer; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%2318181C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 14px 14px no-repeat; }
.pl .w2-input { padding-inline: 16px; }

/* The artist form gets the wider column on desktop, and its fields run full width */
@container w2 (min-width: 861px) { .pl .pl-artist-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; } }
.pl [data-pl-form="artist"] .w2-row { grid-template-columns: minmax(0, 1fr); }
@container w2 (max-width: 640px) { .pl [data-pl-jobs] { grid-template-columns: minmax(0, 1fr); } }

/* Every link is at least a fingertip tall */
.pl .w2-logo { min-height: 44px; align-items: center; }
.pl .pl-links a, .pl .pl-hero .w2-link, .pl .pl-foot a { min-height: 44px; display: inline-flex; align-items: center; }
.pl .pl-links a { white-space: nowrap; }
.pl .pl-hero .w2-link { justify-content: center; justify-self: center; }
@container w2 (max-width: 520px) { .pl .pl-links a.pl-link-faq { display: none; } }

/* Back is a real button; the main button keeps the right side */
.pl .w2-form-nav { padding-top: 8px; gap: 12px; }
.pl .pl-back { min-height: 52px; padding-inline: 24px; }
.pl .w2-check input { accent-color: var(--red-ink); }
.pl .w2-drop b { overflow-wrap: anywhere; }

/* The thank-you card takes the form's place and eases in */
.pl .w2-done { padding-block: 36px; gap: 14px; }
.pl .w2-done h3.w2-h2 { font: 400 clamp(32px, 4.2cqi, 44px)/1.08 var(--display); letter-spacing: -0.01em; }
.pl .w2-done:not([hidden]) { animation: w2-page .32s ease both; }
.pl .w2-done [tabindex="-1"]:focus { outline: none; }

/* The early-list choice uses the same red once picked */
.pl .pl-who input:checked + span { border-color: var(--red-ink); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red-ink); }
@media (prefers-reduced-motion: reduce) { .pl .pl-other, .pl .w2-done:not([hidden]) { animation: none; } }

/* Round two (Jan, October 8): more room between everything, most of all under the hero's button */
.pl .pl-hero { padding-block: 96px 88px; }
.pl .pl-hero .w2-hero-copy { gap: 30px; }
.pl .pl-hero .w2-cta { gap: 22px; margin-top: 12px; }
.pl .pl-hero .w2-under { margin-top: 4px; }
.pl .w2-sec { padding-block: 88px; }
.pl .w2-sec--tint { padding-block: 96px; }
.pl .w2-sec + .w2-sec, .pl .w2-sec--tint + .w2-sec, .pl .w2-sec + .w2-sec--tint { padding-top: 88px; }
.pl .w2-head { margin-bottom: 48px; gap: 18px; }
.pl .pl-steps { margin-bottom: 52px; }
.pl .pl-rounds { margin-bottom: 52px; }
.pl .pl-notify .w2-final { padding: 64px 32px; gap: 20px; }
.pl .pl-foot { padding-block: 32px; }
@container w2 (max-width: 640px) {
  .pl .pl-hero { padding-block: 56px 56px; }
  .pl .pl-hero .w2-hero-copy { gap: 24px; }
  .pl .pl-hero .w2-cta { gap: 18px; }
  .pl .w2-sec, .pl .w2-sec--tint { padding-block: 64px; }
  .pl .w2-sec + .w2-sec, .pl .w2-sec--tint + .w2-sec, .pl .w2-sec + .w2-sec--tint { padding-top: 64px; }
  .pl .w2-head { margin-bottom: 36px; gap: 14px; }
  .pl .pl-steps, .pl .pl-rounds { margin-bottom: 40px; }
  .pl .pl-notify .w2-final { padding: 44px 22px; }
}

/* The business story: short paragraphs, each section with its own picture */
.pl .pl-split { align-items: center; gap: 72px; }
@container w2 (max-width: 860px) { .pl .pl-split { gap: 40px; } }
.pl .pl-copy { display: grid; gap: 26px; align-content: start; }
.pl .pl-copy .w2-h2 { text-wrap: balance; }
.pl .pl-prose { display: grid; gap: 16px; max-width: 34em; }
.pl .pl-prose p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pl .pl-prose--center { margin: 44px auto 0; text-align: center; justify-items: center; }
.pl .pl-src { margin: 20px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.pl .pl-src a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pl .pl-src a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.pl .pl-src--center { text-align: center; }
@container w2 (max-width: 640px) { .pl .pl-prose p { font-size: 17.5px; } .pl .pl-prose--center { margin-top: 32px; } }

/* 1. Then and now */
.pl .pl-then { display: grid; gap: 14px; }
.pl .pl-then-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px 26px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); }
.pl .pl-then-row b { display: block; margin-top: 6px; font: 400 clamp(22px, 2.4cqi, 27px)/1.2 var(--display); color: var(--muted); }
.pl .pl-then-row.is-now { background: var(--card); border-color: var(--ink); box-shadow: var(--shadow); }
.pl .pl-then-row.is-now b { color: var(--ink); }
.pl .pl-then-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.pl .pl-then-row.is-now .pl-then-ico { background: var(--red-soft); border-color: transparent; color: var(--red-ink); }
.pl .pl-then-ico svg { width: 24px; height: 24px; }
.pl .pl-then-k { font: 600 12.5px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }

/* 2. Eugene Schwartz's five levels of market sophistication, drawn as stairs that climb to the right */
.pl .pl-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pl .pl-level { --step: 0; display: grid; gap: 10px; align-content: start; min-height: calc(250px + var(--step) * 46px); padding: 20px 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pl .pl-level:nth-child(2) { --step: 1; }
.pl .pl-level:nth-child(3) { --step: 2; }
.pl .pl-level:nth-child(4) { --step: 3; }
.pl .pl-level:nth-child(5) { --step: 4; }
.pl .pl-level-n { font: 700 12.5px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--red-ink); }
.pl .pl-level b { font: 400 clamp(20px, 2.1cqi, 23px)/1.2 var(--display); color: var(--ink); }
.pl .pl-level p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pl .pl-level-stat { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.pl .pl-level-stat strong { display: block; margin-bottom: 4px; font: 400 34px/1 var(--display); color: var(--red-ink); font-variant-numeric: tabular-nums; }
.pl .pl-level.is-ours { background: var(--red-ink); border-color: var(--red-ink); box-shadow: 0 22px 44px -24px rgba(185, 42, 27, .8); }
.pl .pl-level.is-ours .pl-level-n { color: #FBE3DF; }
.pl .pl-level.is-ours b { color: #FFFFFF; }
.pl .pl-level.is-ours p { color: #FFF4F2; }
/* Each level carries a five-step meter, filled in orange up to its level, so the climb reads on phones too */
.pl .pl-meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: 132px; margin-bottom: 2px; }
.pl .pl-meter i { height: 6px; border-radius: 3px; background: var(--paper-3); }
.pl .pl-level:nth-child(1) .pl-meter i:nth-child(-n+1), .pl .pl-level:nth-child(2) .pl-meter i:nth-child(-n+2), .pl .pl-level:nth-child(3) .pl-meter i:nth-child(-n+3), .pl .pl-level:nth-child(4) .pl-meter i:nth-child(-n+4) { background: var(--red-ink); }
.pl .pl-level.is-ours .pl-meter i { background: #FFFFFF; }
/* Narrower screens: the same climb, one level per row, each stepped in a little further */
@container w2 (max-width: 980px) {
  .pl .pl-levels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pl .pl-level { min-height: 0; margin-left: calc(var(--step) * 14px); }
}

/* 4b. The print checklist: four items, two by two (one column on phones) */
.pl .pl-checks { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@container w2 (max-width: 760px) { .pl .pl-checks { grid-template-columns: minmax(0, 1fr); } }
.pl .pl-checkitem { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; align-content: start; padding: 26px 26px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pl .pl-check-n { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--red-ink); color: #FFFFFF; font: 400 22px/1 var(--display); }
.pl .pl-checkitem b { align-self: center; font: 600 18px/1.3 var(--body); color: var(--ink); }
.pl .pl-checkitem p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pl .pl-check-cta { margin: 36px auto 0; max-width: 34em; text-align: center; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.pl .pl-check-cta a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red-ink); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* 3. Two studies */
.pl .pl-proof { display: grid; gap: 16px; }
.pl .pl-proof-card { margin: 0; display: grid; gap: 10px; padding: 28px 28px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pl .pl-proof-card strong { font: 400 clamp(54px, 6cqi, 72px)/1 var(--display); letter-spacing: -0.02em; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.pl .pl-proof-card figcaption { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.pl .pl-proof-card figcaption b { font-weight: 700; color: var(--red-ink); }
.pl .pl-proof-card .pl-src { margin-top: 2px; }

/* 4. Draft versus final */
.pl .pl-bars { display: grid; gap: 26px; max-width: 760px; margin-inline: auto; padding: 34px 34px 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pl .pl-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; }
.pl .pl-bar-k { grid-column: 1 / -1; font: 600 16.5px/1.35 var(--body); color: var(--ink-2); }
.pl .pl-bar-t { height: 18px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.pl .pl-bar-t i { display: block; height: 100%; width: var(--v); border-radius: 999px; background: var(--ink); }
.pl .pl-bar.is-final .pl-bar-t i { background: var(--red-ink); }
.pl .pl-bar b { font: 400 38px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 2.6ch; text-align: right; }
.pl .pl-bar.is-final b { color: var(--red-ink); }
@container w2 (max-width: 640px) { .pl .pl-bars { padding: 24px 22px; gap: 22px; } .pl .pl-bar b { font-size: 32px; } }

/* 5. The DM thread */
.pl .pl-handled { margin-top: 2px; }
.pl .pl-handled li { font-size: 16.5px; }
.pl .pl-dm { display: grid; gap: 12px; align-content: start; width: 100%; max-width: 440px; justify-self: center; padding: 22px 22px 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pl .pl-dm-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.pl .pl-dm-av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--blue-soft), var(--red-soft)); border: 1px solid var(--line); }
.pl .pl-dm-msg { margin: 0; max-width: 84%; padding: 12px 16px; border-radius: 20px 20px 20px 6px; font-size: 15.5px; line-height: 1.45; background: var(--paper-2); color: var(--ink); justify-self: start; }
.pl .pl-dm-msg.is-me { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--ink); color: #FFFFFF; }
.pl .pl-dm-meta { justify-self: end; margin-top: -4px; font: 600 12.5px/1.3 var(--body); color: var(--red-ink); }

/* 6. The post a business shares: text only, no sample pictures (Jan, October 8) */
.pl .pl-post-card { margin: 0 auto; width: 100%; max-width: 560px; display: grid; gap: 18px; padding: 24px 26px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pl .pl-post-head { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.pl .pl-post-av { width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--red-soft), var(--blue-soft)); border: 1px solid var(--line); }
.pl .pl-post-text { margin: 0; font: 400 clamp(24px, 3cqi, 31px)/1.3 var(--display); color: var(--ink); text-wrap: pretty; }
.pl .pl-post-text b { font-weight: 400; color: var(--red-ink); }
.pl .pl-post-tags { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.pl .pl-post-tags b { font-weight: 600; color: var(--ink); padding: 6px 11px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }

/* 7. The mission, on the one dark card of the page */
.pl .pl-mission-card { max-width: 820px; margin-inline: auto; display: grid; justify-items: center; text-align: center; gap: 26px; padding: clamp(48px, 7cqi, 80px) clamp(24px, 6cqi, 72px); border-radius: 28px; background: var(--ink); color: #F4F2EC; }
.pl .pl-mission-card .w2-h2 { color: #FFFFFF; }
.pl .pl-mission-card .w2-h2 em { color: #FF8A7A; }
.pl .pl-mission-card .pl-prose { justify-items: center; }
.pl .pl-mission-card .pl-prose p { color: #E4E2DA; }
.pl .pl-mission-card .w2-small { max-width: 32em; color: #B9B7AE; }
.pl .pl-mission-card .w2-btn { background: #FFFFFF; color: var(--ink); margin-top: 6px; }
.pl .pl-mission-card .w2-btn:hover { background: #F1F0EC; }
.pl .pl-mission-card :focus-visible { outline-color: #FFFFFF; }

/* Bold words and the logo orange (Jan, October 8). Black stays the main color, orange is the second:
   a bold phrase in a paragraph gets an orange marker stroke, lists keep plain bold, and the small marks go orange */
.pl { --mark: rgba(224, 62, 45, .24); }
.pl p strong { font-weight: 600; color: var(--ink); background: linear-gradient(180deg, transparent 58%, var(--mark) 58%, var(--mark) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .08em; margin-inline: -.08em; }
.pl .pl-mission-card p strong { color: #FF8A7A; background: none; }
.pl .w2-ledger b, .pl .w2-faq .w2-a b { font-weight: 600; color: var(--ink); }
.pl .w2-strip { background: var(--red-ink); color: #FFFFFF; }
.pl .w2-strip i { background: #FFFFFF; animation-name: pl-ping; }
@keyframes pl-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
.pl .w2-under svg { color: var(--red-ink); }
.pl .w2-link { text-decoration-color: var(--red-ink); text-decoration-thickness: 2px; }
.pl .pl-links a:hover { border-bottom-color: var(--red-ink); }
/* Lists that aren't interactive keep the plain ruled ledger, with the dot in orange (no checkbox-looking marks) */
.pl .w2-ledger li::before { width: 8px; height: 8px; margin: 8px 0 0 6px; background: var(--red-ink); }
.pl .w2-step::before { border-color: var(--red-ink); color: var(--red-ink); }
.pl .w2-faq summary::after { border-color: transparent; background: radial-gradient(circle, var(--red-ink) 0 0) center / 12px 2px no-repeat, radial-gradient(circle, var(--red-ink) 0 0) center / 2px 12px no-repeat, var(--red-soft); }
.pl .w2-faq details[open] summary::after { background-size: 12px 2px, 2px 0; }
.pl .w2-faq summary:hover::after { background-color: #F9D6D0; }

/* Pictures ease in as they scroll into view (the script adds pl-anim only when motion is allowed) */
.pl.pl-anim .pl-rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.pl.pl-anim .pl-rv.is-in { opacity: 1; transform: none; }
.pl.pl-anim .pl-level:nth-child(2), .pl.pl-anim .pl-checkitem:nth-child(2), .pl.pl-anim .pl-proof-card:nth-child(2), .pl.pl-anim .pl-then-row:nth-child(2) { transition-delay: .08s; }
.pl.pl-anim .pl-level:nth-child(3), .pl.pl-anim .pl-checkitem:nth-child(3) { transition-delay: .16s; }
.pl.pl-anim .pl-level:nth-child(4), .pl.pl-anim .pl-checkitem:nth-child(4) { transition-delay: .24s; }
.pl.pl-anim .pl-level:nth-child(5) { transition-delay: .32s; }
.pl.pl-anim .pl-bar-t i { width: 0; transition: width 1s cubic-bezier(.2, .7, .2, 1) .2s; }
.pl.pl-anim .pl-bars.is-in .pl-bar-t i { width: var(--v); }
@media (prefers-reduced-motion: reduce) { .pl.pl-anim .pl-rv { opacity: 1; transform: none; transition: none; } .pl.pl-anim .pl-bar-t i { width: var(--v); transition: none; } }


/* Live page: no decision-room bars above the header */
html, body { margin: 0; background: #FCFCFA; }
body { -webkit-text-size-adjust: 100%; }
.w2-viewport { min-height: 100vh; }
.pl .w2-nav { top: env(safe-area-inset-top, 0px); }
.pl [id] { scroll-margin-top: 84px; }
.pl-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #18181C; color: #FFFFFF; padding: 10px 14px; border-radius: 8px; }
.pl-skip:focus { left: 8px; }
.pl-doc { padding-block: 56px 72px; }
.pl-doc h1 { font: 400 clamp(40px, 6cqi, 60px)/1.02 var(--display); margin-bottom: 14px; }
.pl-doc h2 { font: 600 20px/1.3 var(--body); margin: 30px 0 8px; }
.pl-doc p { margin: 0 0 12px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.pl-doc a { color: var(--ink); }