/* RentMaxxer home page, editorial (direction A, docs/design/mocks/a.html; the basicarts.org
   register). Linked from landing.html only, after pages.css: the light page's tokens (white
   paper, ink #16140F, rule #D9D5CC) and the chrome on light (nav, notice line, footer) come from
   pages.css under body.pg, the same as every inner page; this file adds the home page's own
   pieces, scoped under body.editorial.
   Rules (docs/brand/identity.md): the type table (display 36 to 72, section heads 26 to 40,
   lead 18 to 20, body 16, small 14), the 4-point scale for every gap, the 1120 px frame
   (app.css .container), one gap between sections (96 px on desktop, 64 on a phone: each
   section pads half of it, so nothing doubles), no kicker labels or pills in the hero. EB
   Garamond for the headline, the section heads and the numbers; Geist for everything else.
   The one accent is ink: the button (owner, Oct 22 2026: "just make it black").
   Sections: 1 the scale, 2 the nav and footer on the home page, 3 type and rhythm, 4 the hero
   and the photo (two columns from 1024 px), 5 the split sections and "you are busy", 6 the list,
   7 the limits table, 8 the chart, 9 plans and the close, 9b how it works and every draw you
   qualify for (direction B), 9c questions, 10 wide screens, 11 the Oct 29 finish (Mock C) on
   the sections below the hero, 12 the scroll reveal. */

/* ---------------------------------------------------------------- 1. the scale */
body.editorial {
  --ed-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);        /* 36 at 390, 72 from 1260: the one headline (and the close) */
  --ed-h2: clamp(1.625rem, 1.25rem + 1.55vw, 2.5rem);     /* 26 at 390, 40 from 1290: section heads */
  --ed-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 to 20: the hero lead */
  --ed-body: 1rem;                                        /* 16 */
  --ed-small: var(--pg-small);                            /* 14 */
  --pg-body: 1rem;                                        /* the rows, links and buttons pages.css sizes from it: 16 here too */
  --ed-sec: 32px;                                         /* half the gap between sections: 64 on a phone, 96 from 900 px (section 10) */
  --ed-num: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);          /* 56 up to 400 px, 88 from 1200: the big count (identity.md .bignum) for the step numerals and the saving */
  /* the shared rent chart (static/chart.css) on paper; the market line a deeper amber (3:1) */
  --rc-grid: var(--pg-rule); --rc-gap: rgba(22, 20, 15, 0.045); --rc-cursor: rgba(22, 20, 15, 0.3);
  --rc-market: #B87400;
}
html:has(body.editorial) { background: #FFFFFF; }

/* ---------------------------------------------------------------- 2. the nav and footer on the home page */
.editorial .nav .brand { --mark-o: 0.55; }
.editorial .footer__head { font-family: var(--pg-serif); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.005em; }
.editorial .footer__legal { border-top-color: var(--pg-rule); color: var(--pg-muted); }
.editorial .toast { background: var(--pg-ink); color: var(--pg-paper); border: 0; box-shadow: none; }

/* ---------------------------------------------------------------- 3. type and rhythm */
.editorial main { font-size: var(--ed-body); line-height: 1.5; }
.editorial main a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-3); }
.editorial main a:hover { text-decoration-color: var(--text); }
.editorial main h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--ed-h2); line-height: 1.12;
  letter-spacing: -0.005em; max-width: 16ch; text-wrap: balance;
}
.ed-sec { padding-block: var(--ed-sec); }
.ed-src { margin-top: 16px; font-size: var(--ed-small); color: var(--text-3); }

/* ---------------------------------------------------------------- 4. the hero and the one photo
   The headline on the display scale, the lead, the one button and one small line; no kicker,
   no pill. The photo (the slideshow) follows the text on a phone and sits beside it from
   1024 px (.ed-hero--photo: two equal columns), so the hero and its proof end above a 900 px
   fold. 16 px between the headline and its lead, 32 to the button, 12 to the small line. */
.ed-hero { padding-top: 32px; padding-bottom: var(--ed-sec); }
.ed-hero h1 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--ed-h1); line-height: 1.06;
  letter-spacing: -0.01em; max-width: 12ch; text-wrap: balance;
}
.ed-hero h1 em { font-style: italic; }
.ed-dek { margin-top: 16px; max-width: 38em; font-size: var(--ed-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.ed-cta {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; margin-top: 32px;
  background: var(--accent); color: var(--on-accent); border-radius: 4px;
  font-family: var(--font); font-size: var(--ed-body); font-weight: 500; line-height: 1;
  text-decoration: none; transition: background-color var(--t-hover) var(--ease-out);
}
.editorial main .ed-cta { color: var(--on-accent); text-decoration: none; }
.ed-cta:hover { background: var(--pg-amber-press, #2C2923); }
.ed-cta:active { transform: translateY(1px); }
.ed-small { margin-top: 12px; font-size: var(--ed-small); color: var(--text-3); }
.ed-small + .ed-small { margin-top: 4px; }
.ed-hero__text + .ed-plate { margin-top: 32px; }

.ed-plate { margin: 0; position: relative; }
/* the slideshow (static/hero.js): every photo the same box, cropped to fill, so nothing shifts:
   4:5 on a phone, 16:10 stacked on a tablet, 4:3 beside the text from 1024 px (section 10) */
.ed-plate__frame { position: relative; overflow: hidden; border-radius: 8px; background: var(--surface-2); touch-action: pan-y; }
.ed-plate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-2); }
@media (min-width: 640px) { .ed-plate img { aspect-ratio: 16 / 10; } }
/* each photo is one link to its listing (the whole image); the link is what crossfades.
   Its focus ring is drawn on the frame (outside the crop, never clipped, and it stays put
   while the photos swap); no tap flash, no outline on the moving link itself. */
.ed-plate__link { display: block; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; }
.ed-plate__frame .ed-plate__link + .ed-plate__link { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease-out, ease); }
.ed-plate__frame .ed-plate__link + .ed-plate__link img { height: 100%; }
.ed-plate__frame .ed-plate__link.is-in { opacity: 1; }
.ed-plate__frame:has(.ed-plate__link:focus-visible) { outline: 2px solid var(--text); outline-offset: 4px; }
@supports not selector(:has(a)) {
  .ed-plate__link:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
}
.ed-plate[data-slides]:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
/* one thin line per photo; the current one fills over its 3.5 seconds */
.ed-plate__dots { display: flex; gap: 4px; }
.ed-plate__dots[hidden] { display: none; }
/* each line is a 44px tap target: 44px tall (the negative margin gives back the 20px it adds
   under the line, so nothing below moves) */
.ed-plate__dots button {
  flex: 1; min-height: 44px; margin: 0 0 -20px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.ed-plate__dots button::before, .ed-plate__dots button::after {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line);
}
.ed-plate__dots button::after { background: var(--text); transform: scaleX(0); transform-origin: left; }
.ed-plate__dots button[aria-current="true"]::after { transform: scaleX(1); }
.ed-plate__dots button.is-running::after { animation: ed-fill 3500ms linear both; }
.ed-plate.is-paused .ed-plate__dots button::after { animation-play-state: paused; }
.ed-plate__dots button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* and 44px wide on a phone, where eight lines in the photo's width are 38px each: the row of
   buttons reaches into the gutters (the screen's width / n each) while every line is drawn where
   it was, in the photo's width with 4px between (hero.js sets --i and --n) */
@media (max-width: 639px) {
  .ed-plate__dots { gap: 0; margin-inline: calc(-1 * var(--gutter)); }
  .ed-plate__dots button::before, .ed-plate__dots button::after {
    right: auto; left: calc(var(--gutter) - var(--i, 0) * (2 * var(--gutter) - 4px) / var(--n, 1));
    width: calc(100% - (2 * var(--gutter) + 4px * (var(--n, 1) - 1)) / var(--n, 1));
  }
}
@keyframes ed-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the caption is set in the photo: the metro top left, the home sizes top right, the name
   line bottom left (one line, an ellipsis when long), the rent bottom right. Small white
   Geist on the photo (section 11 sets each on dark glass): no band, no scrim, no gradient on
   the rows, only a tight text shadow to hold the text on a light sky. It never takes a click
   (the photo under it is the link) and nothing sits over the lines under the photo. The
   figcaption under it is for screen readers only. */
.ed-plate__over { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ed-plate__row {
  position: absolute; left: 0; right: 0; height: 44px; margin: 0; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #FFFFFF;
  font-family: var(--font); font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.35);
}
.ed-plate__row--top { top: 0; }
.ed-plate__row--bottom { bottom: 0; }
.ed-plate__row span { white-space: nowrap; }
.ed-plate__row [data-o="city"], .ed-plate__row [data-o="where"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-plate__row [data-o="sizes"], .ed-plate__row [data-o="rent"] { flex: none; margin-left: auto; }
.ed-plate__row span:empty { display: none; }

/* ---------------------------------------------------------------- 5. the split sections and "you are busy"
   The split sections (busy, qualify, every draw, security, questions): the heading in one
   column and the body in the other from 900 px (section 10), stacked with 32 px between on a phone. */
.ed-split { display: grid; gap: 32px; }
/* "You are busy": a hairline above, the copy in the body size, three plain lines with hairlines between */
.ed-busy, .ed-how, .ed-security { border-top: 1px solid var(--line); }
.ed-busy__body { display: grid; gap: 16px; max-width: 52ch; }
.ed-busy__body p { margin: 0; }
.ed-busy__list { margin: -4px 0 4px; padding: 0; list-style: none; }
.ed-busy__list li { padding: 12px 0; border-top: 1px solid var(--line); }
.ed-busy__list li:last-child { border-bottom: 1px solid var(--line); }
.ed-busy__src { font-size: var(--ed-small); color: var(--text-3); }
/* ---------------------------------------------------------------- 6. open right now: the shared rows (_rows.html, pages.css .lrow; section 11 makes them cards) */
.ed-lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ed-lhead a { font-size: var(--ed-body); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.ed-lhead + .lrows { margin-top: 24px; }
.ed-kinds { margin: 8px 0 0; font-size: var(--ed-body); color: var(--text-3); }
.ed-kinds + .lrows { margin-top: 24px; }
.editorial .lrow__title { font-size: 1.3125rem; }

/* ---------------------------------------------------------------- 7. the limits table */
.ed-limits { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 1rem; }
.ed-limits th, .ed-limits td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.ed-limits td { text-align: right; font-family: var(--font-display); font-size: 1.375rem; line-height: 1; }
.editorial main .ed-limits a { text-decoration-color: transparent; }
.ed-limits a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-block: -12px; vertical-align: middle; }  /* a 44px target; the cell's padding takes it back */
.editorial main .ed-limits a:hover { text-decoration-color: var(--text); }

/* ---------------------------------------------------------------- 8. the chart (the shared include, on paper) */
.ed-chart .rchart { max-width: 880px; }
.ed-chart .rchart__title { font-family: var(--font-display); font-size: var(--ed-h2); line-height: 1.12; letter-spacing: -0.005em; color: var(--text); margin-bottom: 16px; max-width: 22ch; }  /* 22ch: the city and the size (two tappable words, chart.css .rchart__pick) share a line, "asking rent" takes the next */
.ed-chart .rchart__year { font-weight: 400; }

/* ---------------------------------------------------------------- 9. plans and the close */
/* a price list: the name small and spaced, the price large in the serif, one line, one
   action. A hairline over each plan; the recommended one (Autopilot) a 2px rule in the accent
   and the section's one button. No cards, no badges. */
.ed-plans { list-style: none; padding: 0; margin: 32px 0 0; }
.ed-plan { display: grid; align-content: start; gap: 0; padding: 24px 0 32px; border-top: 1px solid var(--line); }
.ed-plan--pick { border-top: 2px solid var(--accent); padding-top: 23px; }
.editorial main .ed-plan__name {
  font-family: var(--font); font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.ed-plan__price {
  margin-top: 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 1.75rem + 1.3vw, 3rem);
  line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums; white-space: nowrap;
}
.ed-plan__price small { margin-left: 2px; font-family: var(--font); font-size: var(--ed-small); letter-spacing: 0; color: var(--text-3); }
.ed-plan__line { margin-top: 12px; max-width: 38ch; color: var(--text-2); text-wrap: pretty; }
.ed-plan__note { display: block; margin-top: 4px; font-size: var(--ed-small); color: var(--text-3); }
.ed-plan__act { margin-top: 16px; }
.ed-plan__act a:not(.ed-cta) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.ed-cta--s { min-height: 48px; padding: 0 24px; margin-top: 0; }
.ed-plans__fine { max-width: none; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--ed-small); color: var(--text-3); }
/* the close: the headline on the display scale again (one serif headline size), then the button */
.editorial main .ed-close h2 { font-size: var(--ed-h1); line-height: 1.06; letter-spacing: -0.01em; max-width: 12ch; }

/* ---------------------------------------------------------------- 9b. how it works, and every draw you qualify for
   The owner's direction B (Nov 5 2026, mocks/section-B.html). "How it works." over three equal
   columns from 900 px, a hairline over each: a big serif numeral (the identity.md big count,
   56 on a phone to 88), the step in Geist 500, its detail in the muted grey. On a phone the
   three stack, the numeral beside its step on one baseline. Then "Every draw you qualify for."
   on the split: one sentence, the typical saving set large in the serif (a link to the
   market-rent source), "a month" and the caption in the small size. Hairlines are the only
   ornament: no cards, no circles, no marks, no dark panel, nothing moves. */
.editorial main .ed-how h2, .editorial main .ed-worth h2 { font-weight: 500; }
.ed-how__n, .ed-pay__num {
  font-family: var(--font-display); font-weight: 500; font-size: var(--ed-num); line-height: 0.9;
  letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.ed-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 24px; }
.ed-steps li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.ed-steps p { margin: 0; text-wrap: pretty; }
.ed-steps b { display: block; font-weight: 500; }
.ed-steps p span { display: block; margin-top: 4px; color: var(--text-2); }
@media (min-width: 900px) {
  .ed-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
  /* one column each and nothing stretched, so the three titles sit on one line across the columns */
  .ed-steps li { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-top: 24px; align-items: start; align-content: start; }
  .ed-steps p { max-width: 30ch; }
}
.ed-worth { border-top: 1px solid var(--line); }
.ed-pay p { margin: 0; }
.ed-pay__line { max-width: 40ch; text-wrap: pretty; }
.ed-pay .ed-pay__fig { margin-top: 32px; }    /* (under .ed-pay: it outranks the p reset above) */
.ed-pay__fig small { margin-left: 8px; font-size: var(--ed-small); color: var(--text-2); }
.ed-pay .ed-pay__cap { margin-top: 12px; font-size: var(--ed-small); color: var(--text-2); }

/* ---------------------------------------------------------------- 9c. questions: hairline rows, native <details>, no icons */
.ed-faq { border-top: 1px solid var(--line); }
.ed-faq__list { border-top: 1px solid var(--line); }
.ed-faq__item { border-bottom: 1px solid var(--line); }
.ed-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 500;
}
.ed-faq__q::-webkit-details-marker { display: none; }
.ed-faq__q::after { content: "+"; flex: none; font-weight: 400; color: var(--text-3); }
.ed-faq__item[open] > .ed-faq__q::after { content: "\2013"; color: var(--text); }
.ed-faq__q:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ed-faq__a { margin: 0; padding: 0 0 24px; max-width: 58ch; color: var(--text-3); }
.ed-faq__a a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 10. wide screens */
@media (min-width: 900px) {
  body.editorial { --ed-sec: 48px; }                     /* 96 between sections */
  .editorial main h2 { max-width: 22ch; }
  .ed-hero { padding-top: 48px; }
  .ed-plate__row { font-size: 0.8125rem; }
  .ed-split { grid-template-columns: minmax(320px, 4.5fr) minmax(0, 7.5fr); gap: 64px; align-items: start; }
  /* "Where we look" on the same split: the heading and its line on the left, the map and its
     reading line on the right (the map's own margin goes; the dek keeps 16 under the heading) */
  .ed-map { display: grid; grid-template-columns: minmax(320px, 4.5fr) minmax(0, 7.5fr); grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .ed-map > h2 { grid-column: 1; grid-row: 1; }
  .ed-map > .usmap__dek { grid-column: 1; grid-row: 2; margin-top: 16px; }
  .ed-map > .usmap { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  /* the open rows in two columns, four to a column with the live eight */
  .editorial #open .lrows { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  /* three columns; subgrid keeps the prices, lines and actions on one level across them */
  .ed-plans { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); column-gap: 32px; }
  .ed-plan { grid-row: span 4; grid-template-rows: subgrid; padding-bottom: 0; }
  .ed-plan__act { align-self: end; }
  .ed-plans__fine { margin-top: 32px; }
}
@media (min-width: 1024px) {
  /* the hero in two equal columns: the text, then the photo beside it (4:3, so both end together) */
  .ed-hero--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
  .ed-hero--photo .ed-hero__text + .ed-plate { margin-top: 0; }
  .ed-hero--photo .ed-plate img { aspect-ratio: 4 / 3; }
}
/* the map's lead line sits 16 under its heading on every width (map.css gives it 10) */
.editorial .usmap__dek { margin-top: 16px; }
.editorial .usmap { margin-top: 24px; }
/* phones (480px and under): the light scale's phone step (pages.css 15) plus the home page's
   own sizes; the small size is 14px, as on every inner page */
@media (max-width: 480px) {
  body.editorial { --pg-small: 0.875rem; --fs-small: 0.875rem; --fs-micro: 0.8125rem; }
  .ed-chart .rchart { --rc-small: var(--ed-small); }  /* the chart's reading line at the phone small size too */
  .ed-chart .rchart__title { max-width: none; }       /* the frame is the cap: the city and the size (two buttons) keep one line at 26px */
  .ed-cta { padding: 0 24px; }
  .ed-limits { font-size: 0.9375rem; }
  .ed-limits td { font-size: 1.1875rem; }
  .ed-plan { padding: 16px 0 24px; }
  .ed-plan--pick { padding-top: 15px; }
  .ed-plan__price { margin-top: 8px; font-size: 2.25rem; }
  .ed-plan__line { margin-top: 8px; }
  .ed-plan__act { margin-top: 12px; }
  .editorial .footer__head { font-size: 1rem; }
}

/* ---------------------------------------------------------------- 11. the Oct 29 finish (Mock C) on the sections below the hero
   Kept as the owner saw it (3de79ed) with its spacing moved onto the scale and nothing wider
   than the frame: the warm light at the top of the page, the glass nav, the corner texts on
   dark glass, the listing rows as cards, the dark security band. The hero itself is flat
   (section 4): no kicker pill, an ink button, the photo without a frame. How it works and
   Every draw you qualify for left this finish on Nov 5 2026 (direction B, section 9b): no
   step cards, no filled numbers, no Without / With columns. */
html:has(body.editorial), body.editorial, .editorial main { overflow-x: clip; }
body.editorial {
  background: radial-gradient(1200px 600px at 50% -100px, #F6F4EE 0%, #FFFFFF 55%);
}
.editorial .nav {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(22, 20, 15, 0.08);
  box-shadow: 0 4px 24px -6px rgba(22, 20, 15, 0.05);
}
.ed-plate__row span {
  background: rgba(15, 14, 11, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) {
  .ed-plate__row span { padding: 5px 11px; }
}
/* the listing rows as cards (the rows are the content): 8px between, no rule over the first,
   nothing shifted sideways (the first row used to stick 6px out of the frame) */
.editorial .lrows { display: grid; gap: 8px; border-top: 0; }
.editorial .lrows > .lrow {
  padding: 12px 16px;
  border: 1px solid rgba(22, 20, 15, 0.09);
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF9F6 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 4px 14px -4px rgba(22, 20, 15, 0.06);
  transition: border-color 260ms var(--ease-out);
}
.editorial .lrows > .lrow:hover { border-color: rgba(22, 20, 15, 0.24); }
/* the security band: a dark band across the screen on a phone, a card the frame's width from
   900 px; the section's own padding is its inset, so the gap to its neighbours stays the page's */
.ed-security {
  max-width: var(--maxw);
  padding: var(--ed-sec) 16px;
  background: linear-gradient(165deg, #1F1D17 0%, #11100C 55%, #080705 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 24px 52px -14px rgba(22, 20, 15, 0.30);
}
@media (min-width: 900px) {
  .ed-security { padding: var(--ed-sec); border-radius: 14px; }
}
.ed-security h2, .ed-security li, .editorial main .ed-security a { color: #FFFFFF; }
.ed-security .ed-busy__list li { border-color: rgba(255, 255, 255, 0.14); }
.ed-security .ed-src { color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------- 12. the scroll reveal (static/reveal.js)
   Sections and the open-now rows fade up once as they scroll in; the Oct 29 choreography
   slides headings in from the left and rows, steps and cards from the right. Hidden only
   under html.js-reveal, which the script adds: no script, nothing hidden. (The transition
   sits on the shown state only: hiding is instant, showing fades.) */
html.js-reveal [data-reveal], html.js-reveal [data-reveal-rows] > * { opacity: 0; transform: translateY(14px); }
html.js-reveal [data-reveal].is-in, html.js-reveal [data-reveal-rows] > .is-in {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--ease-out, ease-out), transform 450ms var(--ease-out, ease-out);
}
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(-36px, 14px, 0);
}
html.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-reveal [data-reveal] > h2,
html.js-reveal [data-reveal] .rchart__title {
  opacity: 0;
  transform: translate3d(-56px, 0, 0);
}
html.js-reveal [data-reveal].is-in > h2,
html.js-reveal [data-reveal].is-in .rchart__title {
  opacity: 1;
  transform: none;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-reveal [data-reveal-rows] > *,
html.js-reveal [data-reveal] .ed-busy__list > li,
html.js-reveal [data-reveal] .ed-limits tbody > tr,
html.js-reveal [data-reveal] .ed-plans > .ed-plan,
html.js-reveal [data-reveal] .ed-steps > li,
html.js-reveal [data-reveal] .ed-faq__list > .ed-faq__item {
  opacity: 0;
  transform: translate3d(64px, 6px, 0);
}
html.js-reveal [data-reveal-rows] > .is-in,
html.js-reveal [data-reveal].is-in .ed-busy__list > li,
html.js-reveal [data-reveal].is-in .ed-limits tbody > tr,
html.js-reveal [data-reveal].is-in .ed-plans > .ed-plan,
html.js-reveal [data-reveal].is-in .ed-steps > li,
html.js-reveal [data-reveal].is-in .ed-faq__list > .ed-faq__item {
  opacity: 1;
  transform: none;
  transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1) var(--jump-delay, 0ms),
              transform 540ms cubic-bezier(0.22, 1, 0.36, 1) var(--jump-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .ed-plate__frame .ed-plate__link + .ed-plate__link { transition: none; }
  .ed-plate__dots button.is-running::after { animation: none; transform: scaleX(1); }
  .ed-cta { transition: none; }
  .ed-cta:active { transform: none; }
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal] > h2,
  html.js-reveal [data-reveal] .rchart__title,
  html.js-reveal [data-reveal-rows] > *,
  html.js-reveal [data-reveal] .ed-busy__list > li,
  html.js-reveal [data-reveal] .ed-limits tbody > tr,
  html.js-reveal [data-reveal] .ed-plans > .ed-plan,
  html.js-reveal [data-reveal] .ed-steps > li,
  html.js-reveal [data-reveal] .ed-faq__list > .ed-faq__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}