/* Loudcuts pricing pages (/precios, /pricing), on top of css/site.css: same palette, one family, one button.
   Direction "Type and nothing else" (taste-skill seed 2017811971, pricing redrawn as a large typographic table):
   the price sheet is set like the paper edit. Graphite opens it, the plans are a printed table, the one clip
   is cut open, the terms are poster lines with one struck in red pencil, the month is a printed slip. */

/* list items wrap like paragraphs: no single word left on a last line */
.pp li { text-wrap: pretty; }

/* the canvas under the last line of the footer is graphite too */
html:has(> body.pp) { background: var(--suite); }

.pp {
  /* the display step: the hero title, the terms and the close share it */
  --step-display: clamp(3.25rem, 6.6vw, 6.5rem);
  --step-plan: clamp(1.375rem, 3vw, 3rem);
  --sec: clamp(96px, 14vh, 180px);
}

/* ------------------------------------------------------------------ header: wordmark, links on the axis, one action */
.pp-bar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 20px; color: var(--suite-ink); }
.pp-bar .lockup { color: var(--suite-ink); justify-self: start; }
.pp-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
.pp-bar :focus-visible { outline-color: var(--hi); }
@media (hover: hover) and (pointer: fine) { .pp-bar .nav-act:hover { background: var(--suite-ink); color: var(--ink); } }

/* ------------------------------------------------------------------ hero: graphite, a composed void, the statement on the axis */
.pp-hero {
  position: relative; min-height: clamp(560px, 74svh, 820px);
  background: var(--suite); color: var(--suite-ink);
}
.pp-hero-row {
  position: absolute; left: var(--m); right: var(--m); bottom: 72px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 20px; align-items: last baseline;
}
.pp-title {
  grid-column: 2; grid-row: 1;
  font-size: var(--step-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em;
}
.pp-title .ln { display: block; overflow: clip; padding: 0.18em 0 0.12em; margin: -0.18em 0 -0.12em; }
.pp-title [data-line] { display: block; }
.pp-hero-say { grid-column: 1; grid-row: 1; max-width: 32ch; color: var(--suite-muted); font-size: var(--step-body); line-height: 1.45; }

/* ------------------------------------------------------------------ the plans, as a large printed table */
.pp-plans { padding: var(--sec) var(--m); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 2fr)); grid-template-rows: repeat(7, auto); isolation: isolate; }
.pp-key, .plan { grid-row: 1 / span 7; display: grid; grid-template-rows: subgrid; min-width: 0; }
.pk-list, .pc-list { grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; margin: 0; }
.pp-key h2 { grid-row: 1; padding: 0 20px 32px 0; align-self: end; font-size: var(--step-head); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.pk-list li, .pc-list > div { padding: 18px 20px; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; }
.pk-list li { color: var(--pencil); }
/* every second row is one tone down, a band across the whole screen */
.pk-list li { position: relative; padding-left: 0; }
.pk-list li:nth-child(odd)::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--m)); width: 100vw; background: var(--proof); }
.plan:last-child :is(.pc-head, .pc-list > div, .pc-act) { padding-right: 0; }
.pc-list dd { margin: 0; text-wrap: balance; }
.pc-head { grid-row: 1; padding: 0 20px 32px; align-self: end; }
.pc-head h3 { font-size: var(--step-plan); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
.pc-price { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.pc-num { font-size: var(--step-plan); line-height: 1.02; letter-spacing: -0.03em; }
.pc-per { font-size: var(--step-small); color: var(--pencil); }
.pc-act { grid-row: 7; padding: 28px 20px 0; }
.pk-note { grid-row: 7; padding: 28px 20px 0 0; align-self: center; font-size: var(--step-small); color: var(--pencil); }
.pc-act .button { white-space: nowrap; }
/* the phone's plan switcher (below); a plan the switcher is not showing stays out of the layout */
.pp-strip { display: none; }
.plan[hidden] { display: none; }
@media (min-width: 768px) {
  .pc-list dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ------------------------------------------------------------------ what a clip is: the talk against the clip, cut by the edge */
.pp-anatomy { background: var(--suite); color: var(--suite-ink); padding: var(--sec) var(--m) 0; container-type: inline-size; }
.pa-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.pa-top h2 { grid-column: 1 / span 5; font-size: var(--step-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.pa-say { grid-column: 7 / -1; max-width: 46ch; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.pa-specs {
  --spec: calc((50cqi - var(--m) - 10px) / 2.6);
  margin-top: 12vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: end;
}
/* the section's lower edge cuts both figures at about 60% of their height */
.spec { min-width: 0; }
.spec figcaption { font-size: var(--step-lead); color: var(--suite-muted); line-height: 1.3; letter-spacing: -0.01em; }
/* the box ends at the section's edge: the lower part of each figure is cut off with it */
.spec-fig {
  height: 0.8em; padding-top: 0.26em; margin-top: calc(14px - 0.26em); overflow: clip;
  font-size: var(--spec); font-weight: 500; line-height: 0.8; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: -0.05em;
}
.js .spec[data-rise] { --rise: 18%; }

/* ------------------------------------------------------------------ one clip, cut open: the live thing */
.pp-sample { padding: var(--sec) var(--m); }
.pp-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; }
.pp-card > h2 { grid-column: 6 / -1; grid-row: 1; font-size: var(--step-head); font-weight: 500; line-height: 1; letter-spacing: -0.035em; margin-bottom: 24px; }
.ps-clip {
  grid-column: 1 / span 4; grid-row: 1 / span 2; position: sticky; top: 24px;
  background: var(--suite); padding: 20px; display: flex; flex-direction: column; align-items: center;
}
.ps-screen { width: min(100%, calc((100svh - 150px) * 9 / 16), 394px); aspect-ratio: 9 / 16; background: #000; }
.ps-screen video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.ps-ctl { align-self: stretch; display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ps-ctl .ctl { background: var(--suite-raised); color: var(--suite-ink); }
.ps-ctl .ctl.is-on { background: var(--hi); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ps-ctl .ctl:hover { background: var(--hi); color: var(--ink); } }
.ps-clip :focus-visible { outline-color: var(--hi); }
video[role="button"]:focus-visible { outline-offset: -3px; }
:lang(es) .ctl[data-act="play"] { min-inline-size: 7.5em; }
:lang(es) .ctl[data-act="sound"] { min-inline-size: 9.5em; }

.ps-sheet { grid-column: 6 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ps-facts { font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.ps-sheet .cc-note { max-width: 60ch; color: var(--ink); font-weight: 400; }
.ps-hint { font-size: var(--step-small); color: var(--pencil); max-width: 60ch; }
.ps-sheet .cc-script { max-width: 62ch; overflow: visible; padding: 0; margin-top: 4px; }
.ps-talk { margin-top: 8px; max-width: 62ch; }
.ps-talk .ep { color: var(--ink); margin-top: 0; }
.ps-talk .ep-wave { height: 36px; }
.ps-talk figcaption, .ps-fig figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--pencil); max-width: 44ch; }
.ps-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.ps-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ps-fig { container-type: inline-size; }
.ps-strip img { width: 100%; height: calc((100cqi * 9 / 16)); object-fit: cover; background: var(--suite); }
.ps-wide { position: relative; aspect-ratio: 16 / 9; background: var(--suite); overflow: hidden; }
.ps-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-wide-dim { filter: brightness(.4) saturate(.7); }
.ps-wide-win { clip-path: inset(0 18.125% 0 50.234%); }
.ps-check { margin-top: 12px; font-size: var(--step-body); max-width: 60ch; }
.ps-check a { display: block; width: fit-content; margin-top: 6px; padding-block: 6px; font-weight: 500; }

/* ------------------------------------------------------------------ the terms, one per poster line */
.pp-terms { padding: var(--sec) var(--m); }
.pp-terms h2 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 64px; }
.term { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 20px; align-items: first baseline; }
.t-word { font-size: var(--step-display); font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; white-space: nowrap; padding-bottom: 0.04em; }
.t-fact { font-size: var(--step-body); line-height: 1.4; max-width: 44ch; }
.term--cut s { position: relative; text-decoration: none; }
/* the red pencil strikes the one thing that is cut */
.term--cut s::after {
  content: ""; position: absolute; left: -0.04em; right: -0.06em; top: 54%; height: 0.075em;
  background: var(--red); transform-origin: 0 50%;
}
.js .term--cut.is-armed s::after { transform: scaleX(0); }
.js .term--cut.is-armed.is-in s::after { transform: none; transition: transform 520ms var(--ease-in-out) calc(var(--d, 0ms) + 360ms); }

/* ------------------------------------------------------------------ how it works: the month on a printed slip */
.pp-how {
  background: var(--suite); color: var(--suite-ink); padding: var(--sec) var(--m);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start;
}
.ph-say { grid-column: 1 / span 5; }
.ph-say h2 { font-size: var(--step-head); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.ph-p { margin-top: 28px; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.ph-say h3 { margin-top: 48px; font-size: var(--step-body); font-weight: 500; }
.ph-send { margin-top: 12px; max-width: 40ch; }
.ph-send li { padding: 6px 0; line-height: 1.45; }
.slip {
  grid-column: 7 / span 5; width: min(100%, 480px); justify-self: start;
  background: var(--paper); color: var(--ink); padding: 32px 28px 0; font-variant-numeric: tabular-nums;
}
.slip-title { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; }
.slip h4 { margin: 28px 0 6px; font-size: var(--step-body); font-weight: 500; }
.slip li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: var(--step-body); line-height: 1.35; }
.slip li > span:first-child { flex: 0 1 auto; }
.slip li > span:last-child { flex: none; text-align: right; color: var(--ink); }
.dots { flex: 1 1 24px; min-width: 24px; height: 4px; overflow: visible; align-self: baseline; }
.dots line { stroke: var(--pencil); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 9; }
.slip-end {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px;
  margin: 28px -28px 0; padding: 12px 28px; background: var(--ink); color: var(--paper); font-size: var(--step-body); font-weight: 500;
}

/* ------------------------------------------------------------------ questions (the home's list) */
.pp .faq { padding-top: var(--sec); padding-bottom: var(--sec); }

/* ------------------------------------------------------------------ the close: the accent as a whole field */
.pp-close {
  background: var(--hi); color: var(--ink); min-height: min(90svh, 780px);
  padding: clamp(72px, 12vh, 140px) var(--m) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 72px;
}
.pp-close-title { font-size: clamp(3.25rem, 9.5vw, 10rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.045em; }
.pp-close-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
.pp-close-say { grid-column: 1 / span 7; max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.pp-close-say a { font-weight: 500; }
.pp-close-act { white-space: nowrap; grid-column: 9 / -1; justify-self: end; min-height: 64px; padding: 0 32px; font-size: var(--step-lead); background: var(--ink); color: var(--hi); }
@media (hover: hover) and (pointer: fine) { .pp-close-act:hover { background: var(--paper); color: var(--ink); } }

/* ------------------------------------------------------------------ footer: columns above, the name below */
.pp-foot { display: flex; flex-direction: column; padding-top: clamp(56px, 8vh, 96px); }
@media (min-width: 1024px) { .pp-foot { min-height: min(100svh, 1000px); } }
.pp-foot .foot-row { margin-top: 0; }
.pp-foot .name--foot { margin-top: auto; padding-top: 72px; }
.pp-foot .foot-legal { margin-top: 24px; }
.pp-foot .foot-legal a { display: inline-block; padding-block: 12px; margin-block: -12px; }

@media (min-width: 1024px) {
  .pp-hero { min-height: max(360px, calc(100svh - 300px)); }
  .pp-plans { padding-top: 96px; }
  .pp-key h2 { font-size: var(--step-plan); }
  /* a two-line note hangs below its term's first line without pushing the next term down */
  .t-fact { margin-bottom: -3em; }
}

/* ------------------------------------------------------------------ load: the title rises from behind its own lines */
@media (prefers-reduced-motion: no-preference) {
  .js .pp-title [data-line] { animation: pp-line 800ms var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
  .js .pp-hero-say { animation: pp-rise 700ms var(--ease-out) both 380ms; }
}
@keyframes pp-line { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1023px) {
  .pp-hero { min-height: min(74svh, 640px); }
  .t-fact { text-align: left; justify-self: start; }
  .pp-foot .name--foot { padding-top: 120px; }
  .pp-close-row { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .pp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 32px; }
  .pp-card > h2 { grid-column: 1; grid-row: auto; margin-bottom: 0; }
  .ps-clip { grid-column: 1; grid-row: auto; position: static; }
  .ps-screen { width: min(100%, calc(62svh * 9 / 16), 360px); }
  .ps-sheet { grid-column: 1; grid-row: auto; }
  .term + .term { margin-top: 10px; }
  .pp-how { row-gap: 56px; }
  .ph-say { grid-column: 1 / span 6; }
  .slip { grid-column: 7 / -1; }
  .pa-top h2 { grid-column: 1 / span 4; }
  .pa-say { grid-column: 5 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* three plan columns, each cell naming its row */
  .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto) auto; column-gap: 0; }
  .pp-key { display: contents; }
  .pp-key h2 { grid-column: 1 / -1; grid-row: 1; padding: 0 0 40px; }
  .pk-list { display: none; }
  .pk-note { grid-column: 1 / -1; grid-row: 9; padding: 28px 0 0; }
  .plan { grid-row: 2 / span 7; }
  .pc-head { grid-row: 1; }
  .pc-list { grid-row: 2 / span 5; }
  .pc-act { grid-row: 7; }
  .plan :is(.pc-head, .pc-list > div, .pc-act) { padding-left: 14px; padding-right: 14px; }
  .plan:first-of-type :is(.pc-head, .pc-list > div, .pc-act) { padding-left: 0; }
  .plan:last-child :is(.pc-head, .pc-list > div, .pc-act) { padding-right: 0; }
  .pc-list > div { position: relative; display: flex; flex-direction: column; gap: 2px; font-size: var(--step-body); }
  .pc-list > div:nth-child(odd)::before { content: ""; position: absolute; z-index: -1; inset: 0 -1px; background: var(--proof); }
  .plan:first-of-type .pc-list > div:nth-child(odd)::before { left: calc(-1 * var(--m)); }
  .plan:last-child .pc-list > div:nth-child(odd)::before { right: calc(-1 * var(--m)); }
  .pc-list dt { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; color: var(--pencil); font-size: var(--step-small); }
  .pc-act .button { width: 100%; padding: 0 12px; }

  .pp-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 28px; }
  .pp-card > h2 { grid-column: 2; grid-row: 1; margin-bottom: 20px; }
  .ps-clip { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px; }
  .ps-screen { width: min(100%, calc((100svh - 150px) * 9 / 16), 300px); }
  .ps-sheet { grid-column: 2; grid-row: 2; }
  .ps-figs { grid-template-columns: minmax(0, 1fr); }
  .term { grid-template-columns: minmax(0, 1fr) minmax(0, 30ch); align-items: last baseline; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 767px) {
  .pp { --sec: 88px; }
  .pp-bar { display: flex; justify-content: space-between; }
  .pp-nav { gap: 16px; }
  .pp-links { gap: 16px; }
  /* the plans start in this screen, so the bar's jump to them is a plain link: the Highlighter stays with the plan */
  .pp-bar .nav-act { background: transparent; color: var(--suite-ink); padding: 0 6px; margin-right: -6px; font-size: var(--step-small); }
  @media (hover: hover) and (pointer: fine) { .pp-bar .nav-act:hover { background: transparent; color: var(--suite-ink); text-decoration: underline; } }

  /* the graphite opens the sheet without a void: the three prices come into the first screen */
  .pp-hero { min-height: 0; padding: calc(var(--bar) + 16px) var(--m) 32px; }
  .pp-hero-row { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .pp-title { font-size: 11.6vw; }
  .pp-hero-say { max-width: 34ch; }

  .pp-grid { display: flex; flex-direction: column; }
  .pp-key { display: contents; }
  .pp-key h2 { padding: 0; font-size: var(--step-head); align-self: start; }
  .pk-list { display: none; }
  .pp-plans { padding-top: 36px; }
  .pk-note { order: 2; align-self: flex-start; padding: 12px 0 0; }
  .plan { order: 3; display: block; margin-top: 88px; }
  .pp-key + .plan { margin-top: 48px; }

  /* the three plans side by side, name and price; without script they jump to the plans below */
  .pp-strip { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
  .pp-strip li { display: flex; }
  .pp-strip a {
    flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 76px; padding: 10px 12px 9px;
    border-bottom: 3px solid transparent; background: var(--proof); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
  }
  .pp-strip a:active { transform: scale(0.97); }
  .pp-strip a:focus-visible { outline-offset: -3px; }
  /* the plan on show is highlighted, and ruled underneath so it reads without colour too */
  .pp-strip [aria-selected="true"] { background: var(--hi); border-bottom-color: var(--ink); }
  .pt-name { font-size: var(--step-small); font-weight: 500; line-height: 1.2; }
  .pt-price { font-size: var(--step-lead); font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (hover: hover) and (pointer: fine) { .pp-strip a:hover:not([aria-selected="true"]) .pt-name { text-decoration: underline; } }

  /* with script: one plan at a time under the strip, its rows as label and value */
  .is-tabs .plan { margin-top: 16px; }
  .is-tabs .plan:focus-visible { outline-offset: 4px; }
  .is-tabs .pc-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .is-tabs .pc-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 14px; align-items: baseline; padding: 11px 14px; }
  .is-tabs .pc-act { padding-top: 16px; }
  .pc-head { padding: 0 0 18px; }
  .pc-head h3, .pc-num { font-size: 9vw; }
  .pc-list { display: block; }
  .pc-list > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font-size: var(--step-body); }
  .pc-list > div:nth-child(odd) { background: var(--proof); }
  .pc-list dt { color: var(--pencil); font-size: var(--step-small); }
  .pc-act { padding: 20px 0 0; }
  .pc-act .button { width: 100%; min-height: 52px; }

  .pa-top { display: block; }
  .pa-say { margin-top: 20px; font-size: var(--step-body); }
  .pa-specs { --spec: calc((100cqi - 2 * var(--m)) / 2.62); grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 56px; }
  .spec:first-child .spec-fig { height: 1.08em; }

  .ps-figs { grid-template-columns: minmax(0, 1fr); }
  .ps-ctl { justify-content: center; }

  .pp-terms h2 { margin-bottom: 40px; }
  .term { display: block; padding-bottom: 22px; }
  .t-word { display: block; font-size: 12vw; }
  .t-fact { display: block; margin-top: 6px; max-width: 34ch; font-size: var(--step-body); }

  .pp-how { display: block; }
  .ph-say h2 { font-size: var(--step-head); }
  .slip { width: 100%; margin-top: 48px; padding: 28px 20px 0; }
  .slip-end { margin-inline: -20px; padding-inline: 20px; flex-wrap: wrap; }

  .pp-close { min-height: 80svh; }
  .pp-close-title { font-size: 12vw; max-width: none; }
  .pp-close-row { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .pp-close-say { font-size: var(--step-body); }
  .pp-close-act { justify-self: auto; width: 100%; }

  .pp-foot { min-height: 0; }
  .pp-foot .name--foot { padding-top: 20svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .term--cut.is-armed s::after { transform: none !important; transition: none !important; }
  .pp-strip a { transition: none; }
}