/* Porchlight's site (docs/PLAN-2026-10-28-porchlight-site-redesign.md): an instrument for your app's week.
   Dark only, on the film's indigo night. Schibsted Grotesk for display, JetBrains Mono for structure and data,
   the system's text face for reading. Indigo #5856D6 is the one action colour; the accent #9B99FF is for links,
   one headline phrase and the "today" mark; amber carries the drama. Colour means status, and every status
   also carries its word.

   WCAG contrast, measured (relative luminance, 28 Oct 2026). AA asks 4.5:1 for text, 3:1 for large text and UI.
                       on ground #0D0C24   on panel #13123A   on raised #1B1A47
     text   #EEEDFF         16.61              15.48              14.15
     soft   #BDBBE6         10.42               9.71               8.88
     muted  #8E8CC0          6.08               5.67               5.18
     accent #9B99FF          7.66               7.14               6.53
     amber  #FFB340         10.75              10.02               9.16
     might  #FFD08A         13.37              12.46              11.39
     normal #63C08E          8.64               8.05               7.36
     white on indigo #5856D6 (buttons) 5.65 · indigo against the ground 3.39 (the button's edge, UI 3:1)
   The "not you" hairline #4A4880 is decoration only: its word is always written beside it in muted or soft. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-Variable.latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ground: #0D0C24; --panel: #13123A; --raised: #1B1A47; --line: rgba(155, 153, 255, .14); --line-strong: rgba(155, 153, 255, .26);
  --text: #EEEDFF; --soft: #BDBBE6; --muted: #8E8CC0;
  --accent: #9B99FF; --indigo: #5856D6; --film: #16153A;
  --needs: #FFB340; --might: #FFD08A; --normal: #63C08E; --notyou: #4A4880;
  --hit: rgba(255, 179, 64, .12); --top: rgba(13, 12, 36, .82);
  --head: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 24px;
  --wrap: min(1180px, calc(100vw - 2 * var(--gutter)));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
h3 { letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .88em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--ground); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.pl-wrap { width: var(--wrap); margin: 0 auto; }

/* Type: mono eyebrows and labels carry the structure; Schibsted carries the voice */
.pl-eyebrow, .pl-caps, .pl-label { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-eyebrow { margin-bottom: 20px; }
.pl-label { margin: 26px 0 10px; }
/* A section's head: a hairline, its name, and one reading from the sample data on the right */
.pl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 44px; }
.pl-head .pl-eyebrow { margin: 0; }
.pl-head .pl-reading { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
section h2 { font-size: clamp(36px, 4.6vw, 64px); }
.pl-h3 { font-size: clamp(24px, 2.4vw, 32px); }
.pl-sub { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 620px; margin-top: 22px; }
.pl-fine { color: var(--muted); font-size: 14px; margin-top: 20px; }
.pl-muted { color: var(--soft); font-size: 15px; }
.pl-muted.small { font-size: 13px; margin-top: 8px; }
.pl-mono { font: 12.5px/1.6 var(--mono); color: var(--muted); }

/* Buttons and the status line. Indigo is the one action colour. */
.pl-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 10px; background: var(--indigo); color: #fff; font: 600 15.5px var(--body); letter-spacing: -0.005em; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease); }
.pl-btn:hover { text-decoration: none; background: #6260E0; }
.pl-btn.small { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.pl-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: .04em; }
.pl-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pl-status.live i { background: var(--normal); }

/* Verdicts are marks with words: ● affecting you, ◐ might have, ○ not you */
.pl-v { display: inline-flex; align-items: baseline; gap: 7px; font: 500 14px/1.3 var(--body); white-space: nowrap; color: var(--soft); }
.pl-v i { font-style: normal; font-family: var(--mono); font-size: .92em; }
.pl-v.affecting, .pl-v.breaks { color: var(--needs); }
.pl-v.might, .pl-v.look { color: var(--might); }
.pl-v.notyou i, .pl-v.clear i { color: var(--muted); }

/* The header */
.pl-top { position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 max(var(--gutter), calc((100vw - 1180px) / 2)); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.pl-top.solid { background: var(--top); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-color: var(--line); }
.pl-mark { display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.pl-mark:hover { text-decoration: none; }
.pl-mark b { font: 600 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.pl-glyph { width: 22px; height: 18px; flex: none; }
.pl-top nav { display: flex; gap: 24px; margin-left: auto; }
.pl-top nav a { color: var(--soft); font-size: 14px; }
.pl-top nav a:hover { color: var(--text); text-decoration: none; }
.pl-top > .pl-btn, .pl-top > a:last-child:not(.pl-mark) { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.pl-top.past > .pl-btn, .pl-top.past > a:last-child:not(.pl-mark) { opacity: 1; pointer-events: auto; }

/* The footer: the layers glyph and the wordmark in mono caps */
.pl-foot { border-top: 1px solid var(--line); padding: 36px max(var(--gutter), calc((100vw - 1180px) / 2)) 42px; }
.pl-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pl-foot .pl-mark { align-items: center; }
.pl-foot .pl-mark span { display: flex; flex-direction: column; gap: 3px; }
.pl-foot .pl-mark small { font: 12.5px var(--body); color: var(--muted); letter-spacing: 0; }
.pl-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pl-foot nav a { color: var(--soft); font-size: 14px; }
.pl-foot-fine { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 12.5px; }
.pl-foot-fine a { color: var(--soft); }

/* Other pages: privacy, notify */
.pl-doc { width: min(760px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; padding: 150px 0 120px; }
.pl-doc h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 16px; }
.pl-meta { color: var(--muted); font: 12.5px var(--mono); letter-spacing: .04em; margin-bottom: 38px; }
.pl-prose h2, .pl-prose h3 { font-size: 26px; letter-spacing: -0.02em; margin: 44px 0 12px; }
.pl-prose p, .pl-prose li { color: var(--soft); line-height: 1.65; }
.pl-prose strong { color: var(--text); }
.pl-prose p + p { margin-top: 12px; }
.pl-prose ul { padding-left: 20px; margin: 10px 0; }
.pl-prose li + li { margin-top: 8px; }
.pl-notify .pl-icon { width: 76px; height: 76px; display: block; margin-bottom: 28px; border-radius: 17px; }
.pl-form { margin-top: 32px; }
.pl-form label { display: block; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pl-form .row { display: flex; gap: 10px; }
.pl-form input[type=email] { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); padding: 0 14px; font: 16px var(--body); }
.pl-form input[type=email]::placeholder { color: var(--muted); }
.pl-form .error { color: var(--needs); margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
.pl-link { font-weight: 600; }

/* 1. Hero: left-aligned and editorial, then the week track full-bleed underneath */
.pl-hero { position: relative; padding: clamp(112px, 14vh, 150px) 0 0; overflow: hidden; }
.pl-hero-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pl-hero-text > .pl-eyebrow { grid-column: 1 / -1; }
.pl-hero h1 { grid-column: 1 / span 8; font-size: clamp(44px, 6.5vw, 94px); line-height: .98; }
.pl-hero h1 em { display: block; font-style: normal; color: var(--accent); }
.pl-hero-side { grid-column: 9 / -1; padding-bottom: 6px; }
.pl-lede { color: var(--soft); font-size: 18px; line-height: 1.5; max-width: 620px; }
.pl-actions { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 28px; }
.pl-price-line { margin-top: 16px; color: var(--muted); font-size: 14px; }
.pl-price-line span { display: block; margin-top: 4px; font: 12.5px var(--mono); }
.js [data-in] { opacity: 0; transform: translateY(14px); animation: rise .9s var(--out) forwards; animation-delay: calc(var(--d) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }

/* The week track: the sample's 11 services as lanes, the vendors' incidents on them, then Tessera's week as one
   thin line. The lanes' hairlines run the full width of the page; the days sit in the editorial grid. */
.pl-week { margin: clamp(56px, 8vh, 84px) 0 0; }
.pl-track { --label: 232px; position: relative; }
.pl-track-in { width: var(--wrap); margin: 0 auto; }
.pl-track-cap { display: flex; gap: 18px; align-items: baseline; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.pl-track-cap b { font-weight: 500; color: var(--soft); }
.pl-track-grid { position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.pl-track-grid::before, .pl-track-grid::after { content: ''; position: absolute; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pl-track-grid::before { top: 0; height: var(--lanes); background: repeating-linear-gradient(180deg, transparent 0 9px, var(--line) 9px 10px, transparent 10px 18px); }
.pl-track-grid::after { top: var(--row); height: 1px; background: var(--line-strong); }
.pl-lanes { list-style: none; margin: 0; padding: 0; grid-column: 1; grid-row: 1; }
.pl-lanes li { height: 18px; font: 11.5px/18px var(--mono); color: var(--muted); white-space: nowrap; }
.pl-lanes li span { position: relative; background: var(--ground); padding-right: 12px; }
.pl-track-name { grid-column: 1; grid-row: 1; align-self: start; margin-top: calc(var(--row) - 27px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pl-track-name b { position: relative; background: var(--ground); padding-right: 12px; }
.pl-track-name small { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pl-track-name b { font: 500 19px/1 var(--head); letter-spacing: -0.02em; color: var(--text); }
.pl-plot { grid-column: 2; grid-row: 1; position: relative; padding-bottom: 46px; }
.pl-track-svg { display: block; width: 100%; overflow: visible; }
.pl-track-svg line { vector-effect: non-scaling-stroke; fill: none; }
.pl-track-svg .day { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 5; }
.pl-track-svg .m { stroke: #6765A3; stroke-width: 6; stroke-linecap: round; }
.pl-track-svg .m.yours { stroke: var(--needs); }
.pl-track-svg .link { stroke: var(--needs); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; transform-box: fill-box; transform-origin: 50% 0; }
.pl-track-svg .c { stroke: var(--normal); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; }
.pl-track-svg .c.needs { stroke: var(--needs); stroke-width: 7; }
.pl-track-days { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: calc(var(--row) + 20px); display: grid; grid-template-columns: repeat(8, 1fr); }
.pl-track-days li { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: 2px; display: flex; flex-direction: column; }
.pl-track-days li.today { color: var(--accent); }
.pl-track-days li b { order: 2; font-weight: 500; }
.pl-track-flag { position: absolute; top: calc(var(--row) - 34px); right: calc(20.2% + 10px); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--needs); white-space: nowrap; }
.pl-track-flag i { font-style: normal; }
.pl-track-days li i { font-style: normal; }
.pl-track-you { display: none; position: absolute; top: calc(var(--row) - 34px); left: 0; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pl-sweep { position: absolute; top: -10px; left: 0; height: calc(var(--row) + 20px); width: 1px; background: var(--accent); opacity: 0; pointer-events: none; }
.pl-sweep::before { content: ''; position: absolute; right: 1px; top: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, rgba(155, 153, 255, 0), rgba(155, 153, 255, .09)); }
.pl-track.calm .pl-track-grid { grid-template-columns: minmax(0, 1fr); }
.pl-track.calm .pl-plot { grid-column: 1; }
.pl-track.calm .pl-track-name { display: none; }

.pl-week-cap { display: grid; grid-template-columns: var(--label, 232px) minmax(0, 1fr) minmax(0, .9fr); gap: 0 40px; align-items: start; margin-top: 18px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.pl-week-why { display: flex; flex-direction: column; gap: 6px; }
.pl-week-what { font-size: 16px; line-height: 1.5; }
.pl-week-what span { color: var(--soft); }
.pl-week-foot { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* The sweep, once, when the track comes into view: a hairline turns the vendors' colours into Tessera's verdicts.
   Each change takes 360 ms, eased out. Without script, or with Reduce Motion, the judged week is simply there. */
.pl-track { --t0: 1.05s; --sweep: 1.7s; }
@media (prefers-reduced-motion: no-preference) {
  .js .pl-track:not(.calm) .m { animation: mark-in .5s var(--out) both, judge .36s var(--out) both; animation-delay: calc(var(--at) * .3s), calc(var(--t0) + var(--at) * var(--sweep)); }
  .js .pl-track:not(.calm) .c { animation: cell-in .36s var(--out) both; animation-delay: calc(var(--t0) + var(--i) * var(--sweep) / 8); }
  .js .pl-track:not(.calm) .link { animation: link-in .36s var(--out) both; animation-delay: calc(var(--t0) + .8 * var(--sweep)); }
  .js .pl-track:not(.calm) .pl-track-flag, .js .pl-week-cap { animation: fade-in .5s var(--out) both; animation-delay: calc(var(--t0) + .8 * var(--sweep) + .2s); }
  .js .pl-week-cap { animation-delay: calc(var(--t0) + var(--sweep) + .1s); }
  .js .pl-track:not(.calm) .pl-sweep { animation: sweep var(--sweep) linear both; animation-delay: var(--t0); }
  .js .pl-track:not(.calm) :is(.m, .c, .link, .pl-track-flag, .pl-sweep), .js .pl-week-cap { animation-play-state: paused; }
  .js .pl-track.go :is(.m, .c, .link, .pl-track-flag, .pl-sweep), .js .pl-week.go .pl-week-cap { animation-play-state: running; }
}
@keyframes mark-in { from { opacity: 0; } }
@keyframes judge { from { stroke: #BDBBE6; } }
@keyframes cell-in { from { opacity: 0; transform: scaleX(0); } }
@keyframes link-in { from { opacity: 0; transform: scaleY(0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sweep { 0% { left: 0; opacity: 0; } 5%, 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

@media (max-width: 1100px) {
  .pl-hero h1, .pl-hero-side { grid-column: 1 / -1; }
  .pl-hero-side { margin-top: 26px; padding: 0; max-width: 620px; }
}
@media (max-width: 900px) {
  .pl-track { --label: 0px; }
  .pl-lanes, .pl-track-name { display: none; }
  .pl-track-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-plot { grid-column: 1; }
  .pl-track-you { display: block; }
  .pl-week-cap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .pl-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pl-track-cap { flex-direction: column; gap: 2px; }
  .pl-track-days li i { display: none; }
}

/* 2. Only what's yours: pinned on wide screens while the ledger goes from noise, to verdicts, to the answer */
.pl-scene { position: relative; }
.pl-sticky { padding: 140px 0 60px; }
.pl-scene-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.pl-steps { grid-column: 1 / span 5; display: grid; padding-right: 24px; }
.pl-step { grid-area: 1 / 1; }
.pl-step .pl-eyebrow { display: flex; gap: 14px; }
.pl-step .pl-eyebrow span { color: var(--accent); }
.pl-step h2 { font-size: clamp(36px, 4vw, 54px); }
.pl-step + .pl-step { display: none; }
.js .pl-step + .pl-step { display: block; }
.js .pl-step { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--out), transform .4s var(--out); pointer-events: none; }
.js .pl-step.on { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .pl-steps { gap: 48px; }
html:not(.js) .pl-step { grid-area: auto; }
html:not(.js) .pl-step:nth-child(2) { display: block; }
.pl-ticks { display: none; list-style: none; margin: 40px 0 0; padding: 0; gap: 6px; grid-area: 2 / 1; }
.pl-ticks li { width: 28px; height: 2px; background: var(--line-strong); transition: background .35s var(--out); }
.pl-ticks li.on { background: var(--accent); }

/* The ledger: dates in mono, the vendor's words, and each verdict as a mark with its word */
.pl-feed { grid-column: 6 / -1; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px 6px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
.pl-feed-head { padding-bottom: 16px; }
.pl-answer { display: grid; margin-top: 10px; min-height: 2.3em; align-items: start; }
.pl-answer p { grid-area: 1 / 1; font: 500 clamp(21px, 1.8vw, 25px)/1.18 var(--head); letter-spacing: -0.02em; transition: opacity .35s var(--out); }
.pl-answer .a0 { opacity: 0; }
.pl-feed ol { list-style: none; margin: 0; padding: 0; }
.pl-event { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 124px; gap: 14px; padding: 13px 0 12px; border-top: 1px solid var(--line); transition: opacity .35s var(--out); }
.pl-event::before { content: ''; position: absolute; left: -28px; top: -1px; bottom: 0; width: 2px; background: var(--needs); opacity: 0; transition: opacity .35s var(--out); }
.pl-event-when { font: 500 11.5px/20px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pl-event-vendor { font-weight: 600; font-size: 14px; line-height: 20px; transition: color .35s var(--out); }
.pl-event-title { font-size: 14.5px; line-height: 1.38; margin-top: 1px; transition: color .35s var(--out); }
.pl-event-why { font-size: 13px; color: var(--soft); margin-top: 5px; line-height: 1.42; }
.pl-event-why b { color: var(--text); font-weight: 600; }
.pl-event-verdict { text-align: right; line-height: 20px; }
.pl-event-verdict .pl-v { font-size: 13.5px; }
.pl-event-why, .pl-event-verdict { transition: opacity .36s var(--out), transform .36s var(--out); transition-delay: calc(var(--i) * 70ms); }
/* The final state (also without script): verdicts shown, what wasn't yours set back, what was marked in amber */
.pl-feed .pl-event.notyou :is(.pl-event-vendor, .pl-event-title) { color: var(--soft); font-weight: 400; }
.pl-feed .pl-event.affecting::before { opacity: 1; }
.js .pl-feed:not([data-stage="2"]) .pl-event::before { opacity: 0; }
.js .pl-feed:not([data-stage="2"]) .pl-event :is(.pl-event-vendor, .pl-event-title) { color: var(--text); }
.js .pl-feed:not([data-stage="2"]) .pl-event-vendor { font-weight: 600; }
.js .pl-feed:not([data-stage="2"]) .a0 { opacity: 1; }
.js .pl-feed:not([data-stage="2"]) .a1 { opacity: 0; }
.js .pl-feed[data-stage="0"] :is(.pl-event-why, .pl-event-verdict) { opacity: 0; transform: translateY(4px); }

/* Every "not you" says why: a rule row with hairline tops */
.pl-reasons { padding: 70px 0 150px; }
.pl-reasons h2 { font-size: clamp(26px, 2.4vw, 32px); }
.pl-reasons ul { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 10px 24px; }
.pl-reasons li { grid-row: span 3; display: grid; grid-template-rows: subgrid; justify-items: start; border-top: 1px solid var(--line-strong); padding-top: 18px; }
.pl-reason-what { font: 11.5px/1.5 var(--mono); color: var(--muted); }
.pl-reasons .pl-v { font-size: 13.5px; }
.pl-reason-why { font: 500 20px/1.28 var(--head); letter-spacing: -0.015em; }

@media (min-width: 901px) {
  .js .pl-scene { height: 300vh; }
  .js .pl-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 76px 0 24px; }
  .js .pl-ticks { display: flex; }
}
@media (max-width: 900px) {
  .pl-sticky { padding: 110px 0 20px; }
  .pl-scene-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .pl-steps, .pl-feed { grid-column: 1; }
  .pl-steps { gap: 44px; padding: 0; }
  .js .pl-step { opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .js .pl-step:nth-child(3) { display: none; }
  .pl-steps > .pl-step { grid-area: auto; }
  .pl-reasons ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pl-feed { padding: 20px 18px 6px; margin: 0 -2px; }
  .pl-event { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; }
  .pl-event::before { left: -18px; }
  .pl-event-when { grid-column: 1; grid-row: 1; }
  .pl-event-verdict { grid-column: 2; grid-row: 1; }
  .pl-event-body { grid-column: 1 / -1; }
  .pl-reasons { padding: 40px 0 100px; }
  .pl-reasons ul { grid-template-columns: 1fr; row-gap: 8px; }
  .pl-reasons li + li { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pl-step, .pl-event, .pl-event::before, .pl-event-why, .pl-event-verdict, .pl-answer p, .pl-ticks li { transition: none !important; }
  .js .pl-scene { height: auto !important; }
  .js .pl-sticky { position: static !important; min-height: 0 !important; display: block !important; padding: 140px 0 60px !important; }
  .js .pl-steps { gap: 48px; }
  .js .pl-step { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .js .pl-step:nth-child(3), .js .pl-ticks { display: none !important; }
}

/* Splits */
.pl-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.pl-split.flip .pl-split-text { order: 2; }
.pl-split h2 { font-size: clamp(36px, 4.2vw, 56px); }

/* 3. Releases: the card is code-forward, a mono gutter and the quoted line marked in amber */
.pl-releases { padding: 40px 0 140px; }
.pl-change { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
.pl-change-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pl-change-top > span:last-child { font: 12px var(--mono); color: var(--muted); }
.pl-change h3 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.025em; margin: 14px 0 6px; }
.pl-change h3 span { font: 500 .62em var(--mono); letter-spacing: 0; color: var(--soft); margin-left: 6px; white-space: nowrap; }
.pl-change blockquote { margin: 0 0 10px; padding: 2px 0 2px 16px; border-left: 2px solid var(--needs); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.pl-change mark { background: var(--hit); color: var(--text); padding: 2px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pl-change blockquote code { color: var(--needs); }
.pl-code { background: var(--ground); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font: 12.5px/2 var(--mono); }
.pl-code-file { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pl-code-lines { overflow-x: auto; padding: 6px 0; scrollbar-width: thin; }
.pl-code-lines p { display: grid; grid-template-columns: 44px max-content; min-width: max-content; padding-right: 16px; }
.pl-code-lines span { text-align: right; padding-right: 14px; margin-right: 14px; color: var(--muted); border-right: 1px solid var(--line); }
.pl-code-lines code { font-size: 1em; white-space: pre; color: var(--soft); }
.pl-code-lines p.hit { background: var(--hit); box-shadow: inset 2px 0 0 var(--needs); }
.pl-code-lines p.hit span { color: var(--needs); }
.pl-code-lines p.hit code { color: var(--text); }
.pl-code-lines mark { background: none; color: var(--needs); }
.pl-summary { font-size: 16px; color: var(--text); }
.pl-card-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: 15px; }

/* A rule row: each verdict under its own coloured rule */
.pl-rules { list-style: none; margin: 90px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pl-rules li { border-top: 2px solid var(--line-strong); padding-top: 18px; }
.pl-rules li.breaks { border-color: var(--needs); }
.pl-rules li.look { border-color: var(--might); }
.pl-rules b { display: block; }
.pl-rules .pl-v { font: 500 21px var(--head); letter-spacing: -0.015em; }
.pl-rules .pl-v.clear { color: var(--text); }
.pl-rules span:not(.pl-v) { display: block; color: var(--soft); font-size: 15px; line-height: 1.5; margin-top: 10px; }

/* 4. Calendar: a hairline year across the whole page, mono months, amber dates and indigo today */
.pl-calendar { padding: 30px 0 150px; }
.pl-cal-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pl-cal-head h2 { grid-column: 1 / span 7; }
.pl-cal-head .pl-sub { grid-column: 8 / -1; margin: 0; font-size: 17px; }
.pl-year { margin: 70px 0 0; }
.pl-year-in { position: relative; width: var(--wrap); margin: 0 auto; height: 150px; }
.pl-year-in::before { content: ''; position: absolute; top: 96px; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line-strong);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pl-year-months { list-style: none; margin: 0; padding: 0; }
.pl-year-months li { position: absolute; top: 96px; padding: 14px 0 0 7px; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pl-year-months li::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 8px; background: var(--line-strong); }
.pl-year-date, .pl-year-today { position: absolute; top: 0; height: 97px; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; white-space: nowrap; }
.pl-year-date i, .pl-year-today i { position: absolute; bottom: -5px; left: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--needs); box-shadow: 0 0 0 4px var(--ground); }
.pl-year-date::before { content: ''; position: absolute; left: 0; top: 0; bottom: 6px; width: 1px; background: linear-gradient(rgba(255, 179, 64, .0), rgba(255, 179, 64, .55)); }
.pl-year-date b { font: 500 15px var(--head); letter-spacing: -0.01em; color: var(--text); }
.pl-year-date em, .pl-year-today em { font: 500 11px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--needs); }
.pl-year-date.right { padding-left: 12px; }
.pl-year-date.left { align-items: flex-end; padding-right: 12px; transform: translateX(-100%); }
.pl-year-date.left::before { left: auto; right: 0; }
.pl-year-date.left i { left: auto; right: -6px; }
.pl-year-date.lv0 { padding-top: 30px; }
.pl-year-date.lv1 { padding-top: 0; }
.pl-year-today { left: 0; padding: 30px 0 0 12px; }
.pl-year-today::before { content: ''; position: absolute; left: 0; top: 30px; bottom: 6px; width: 1px; background: var(--indigo); }
.pl-year-today i { background: var(--indigo); }
.pl-year-today b { font: 500 15px var(--head); color: var(--accent); }
.pl-year-today em { color: var(--accent); }
.pl-cal-list { margin-top: 70px; }
.pl-cal-list h3 { font-size: clamp(24px, 2.4vw, 32px); }
.pl-cal-list .pl-muted { margin-top: 8px; }
.pl-dates { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pl-dates li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.pl-dates li b { font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--needs); white-space: nowrap; }
.pl-dates li p { font-size: 16px; }
.pl-dates li p.pl-mono { font-size: 12.5px; margin-top: 3px; }
.pl-dates li > span { font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.pl-dates.missing li b { color: var(--muted); }
.pl-dates.missing li p { color: var(--soft); }

@media (max-width: 900px) {
  .pl-releases { padding: 20px 0 100px; }
  .pl-rules { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 60px; }
  .pl-cal-head { grid-template-columns: minmax(0, 1fr); }
  .pl-cal-head h2, .pl-cal-head .pl-sub { grid-column: 1; }
  .pl-cal-head .pl-sub { margin-top: 20px; }
  .pl-calendar { padding: 20px 0 100px; }
}
@media (max-width: 600px) {
  .pl-change { padding: 20px 18px 22px; margin: 0 -2px; }
  .pl-change-top { flex-direction: column; gap: 6px; }
  .pl-change h3 span { display: block; margin: 6px 0 0; font-size: .7em; }
  .pl-code-lines p { grid-template-columns: 34px max-content; }
  .pl-code-lines span { padding-right: 10px; margin-right: 10px; }
  .pl-year-in { height: 172px; }
  .pl-year-in::before, .pl-year-months li { top: 118px; }
  .pl-year-date, .pl-year-today { height: 119px; }
  .pl-year-date.lp0 { padding-top: 54px; }
  .pl-year-date.lp1 { padding-top: 0; }
  .pl-year-today { padding-top: 54px; }
  .pl-year-today::before { top: 54px; }
  .pl-year-months li:nth-child(even), .pl-year-months li span { display: none; }
  .pl-year-date b, .pl-year-today b { font-size: 13.5px; }
  .pl-dates li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .pl-dates li div { grid-column: 1 / -1; grid-row: 2; }
}

/* 5. The film: its own indigo frame, the night the rest of the page is built in */
.pl-film { position: relative; padding: 40px 0 150px; }
.pl-film::before { content: ''; position: absolute; inset: 120px 0 40px; background: radial-gradient(60% 55% at 50% 55%, rgba(36, 35, 92, .55), rgba(13, 12, 36, 0) 70%); pointer-events: none; }
.pl-film .pl-wrap { position: relative; }
.pl-film h2 { max-width: 12em; }
.pl-film-frame { position: relative; margin-top: 48px; border-radius: 18px; overflow: hidden; background: var(--film); border: 1px solid var(--line-strong); box-shadow: 0 60px 140px -50px #000, 0 0 200px -60px rgba(155, 153, 255, .3); }
.pl-film video { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--film); }
.pl-film video.tall { aspect-ratio: 9 / 16; }
.pl-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: var(--indigo); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 10px rgba(88, 86, 214, .18); transition: transform .25s var(--out), background .2s; }
.pl-play:hover { transform: scale(1.05); background: #6260E0; }
.pl-play svg { width: 32px; height: 32px; margin-left: 4px; }

/* 6. When it's you, and when it isn't: one spread, the drafted all-clear beside the quiet state */
.pl-spread { padding: 20px 0 150px; }
.pl-spread-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-spread-you { padding-right: 56px; }
.pl-spread-not { padding-left: 56px; border-left: 1px solid var(--line); }
.pl-spread h2 { font-size: clamp(34px, 3.6vw, 50px); }
.pl-spread .pl-sub { font-size: 17px; }
.pl-draft { margin-top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 22px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
.pl-draft-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.pl-draft-head h3 { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-draft-head span { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.pl-field { border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 12px; font-weight: 600; font-size: 15px; }
.pl-field.body { margin-top: 10px; border-color: var(--line); background: var(--ground); border-radius: 10px; padding: 14px 16px; min-height: 96px; font-weight: 400; color: var(--soft); }
.pl-seg { display: inline-flex; gap: 2px; margin-top: 16px; padding: 3px; border-radius: 9px; background: var(--raised); font-size: 13px; }
.pl-seg span { padding: 5px 14px; border-radius: 6px; color: var(--soft); }
.pl-seg span.on { background: var(--indigo); color: #fff; }
.pl-draft-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pl-draft-foot .pl-muted.small { margin: 0; }
.pl-strong { font: 500 19px/1.35 var(--head); letter-spacing: -0.01em; margin-top: 28px; }
.pl-quiet-h { font-size: clamp(48px, 6.4vw, 92px) !important; color: var(--accent); letter-spacing: -0.035em; line-height: .98; }
.pl-calm { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 34px 0 6px; max-width: 420px; }
.pl-calm i { height: 4px; border-radius: 2px; background: var(--normal); }
.pl-calm-cap { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pl-banners { margin: 34px 0 0; }
.pl-banners div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pl-banners div:last-child { border-bottom: 1px solid var(--line); }
.pl-banners dt { font: 500 11.5px/22px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pl-banners dd { margin: 0; font-size: 15px; color: var(--soft); }

/* 7. How it looks: a numbered list beside one framed screen that changes as you scroll (wide screens, with motion).
   Without script, with Reduce Motion, or on a phone, each step simply shows its own screen. */
.pl-looks { padding: 40px 0 120px; }
.pl-looks-in { width: var(--wrap); margin: 0 auto; }
.pl-looks-text h2 { max-width: 10em; }
.pl-looks-steps { list-style: none; margin: 40px 0 0; padding: 0; }
.pl-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.pl-looks-steps .n { font: 500 12.5px var(--mono); color: var(--accent); padding-top: 6px; }
.pl-looks-steps h3 { font-size: 22px; }
.pl-looks-steps p { color: var(--soft); font-size: 15px; margin-top: 6px; max-width: 34em; }
.pl-look-pic { grid-column: 1 / -1; margin-top: 16px; }
.pl-looks-pic { display: none; }
.pl-win { position: relative; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 50px 110px rgba(0, 0, 0, .5); line-height: 0; }
.pl-win img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .pl-looks-steps li { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; padding: 26px 0; }
  .pl-looks-steps li > div:not(.pl-look-pic) { grid-column: 2; }
  .pl-look-pic { grid-column: 3; grid-row: 1; margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .pl-looks { height: 420vh; padding: 0; }
  .js .pl-looks-in { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; gap: 56px; padding: 84px 0 30px; }
  .js .pl-looks-text { flex: 0 0 35%; }
  .js .pl-looks-text h2 { font-size: clamp(34px, 3.6vw, 50px); }
  .js .pl-looks-text .pl-sub { font-size: 15.5px; margin-top: 16px; }
  .js .pl-looks-steps { margin-top: 26px; }
  .js .pl-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; opacity: .38; transition: opacity .4s var(--out); }
  .js .pl-looks-steps li.on { opacity: 1; }
  .js .pl-looks-steps h3 { font-size: 19px; }
  .js .pl-looks-steps p { font-size: 14px; margin-top: 3px; }
  .js .pl-look-pic { display: none; }
  .js .pl-looks-pic { display: block; flex: 1; }
  .js .pl-looks-pic .pl-win { aspect-ratio: 1.6; }
  .js .pl-looks-pic img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .5s var(--out); }
  .js .pl-looks-pic img.on { opacity: 1; }
}

@media (max-width: 900px) {
  .pl-spread-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-spread-you { padding: 0 0 70px; }
  .pl-spread-not { padding: 60px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pl-film { padding: 20px 0 100px; }
  .pl-spread { padding: 0 0 100px; }
  .pl-looks { padding: 20px 0 90px; }
}
@media (max-width: 600px) {
  .pl-looks-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .pl-draft { padding: 18px 16px; margin-left: -2px; margin-right: -2px; }
  .pl-seg span { padding: 5px 10px; }
  .pl-banners div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pl-play { width: 76px; height: 76px; }
}

/* 8. What it reads: the connections as hairline rows, then the catalogue as a dense mono board */
.pl-reads { padding: 20px 0 150px; }
.pl-conn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.pl-conn-grid > div:first-child { grid-column: 1 / span 5; }
.pl-conn-grid > div:last-child { grid-column: 7 / -1; }
.pl-conn-grid h2 { font-size: clamp(34px, 3.6vw, 50px); }
.pl-conns { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pl-conns li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.pl-conns h3 { font-size: 21px; grid-row: span 2; }
.pl-conns .pl-mono { color: var(--accent); }
.pl-conn-body { font-size: 15px; color: var(--soft); }
.pl-catalogue { margin-top: 120px; }
.pl-catalogue-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.pl-catalogue-head h3 { grid-column: 1 / span 6; font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.025em; }
.pl-catalogue-head .pl-sub { grid-column: 7 / -1; margin: 0; font-size: 16px; }
.pl-board { margin-top: 44px; columns: 4 220px; column-gap: 24px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.pl-board dl { break-inside: avoid; margin: 0 0 26px; }
.pl-board dt { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-board dt span:last-child { color: var(--accent); letter-spacing: .06em; }
.pl-board dd { margin: 0; font: 12.5px/1.95 var(--mono); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 9. Private, then the price */
.pl-private { padding: 40px 0 150px; }
.pl-promises { list-style: none; margin: 0; padding: 0; }
.pl-promises li { font: 500 clamp(40px, 6.4vw, 92px)/1.02 var(--head); letter-spacing: -0.035em; }
.pl-promises li:last-child { color: var(--accent); }
.js .pl-private .pl-promises li { opacity: 0; transform: translateY(14px); }
.js .pl-private.seen .pl-promises li { animation: rise .8s var(--out) forwards; animation-delay: calc(var(--i) * 240ms); }
.pl-private .pl-sub { margin-top: 40px; }
.pl-price { padding: 20px 0 150px; }
.pl-price h2 { max-width: 13em; }
.pl-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.pl-plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; display: flex; flex-direction: column; }
.pl-plan.main { border-color: rgba(155, 153, 255, .5); background: linear-gradient(180deg, rgba(155, 153, 255, .07), rgba(155, 153, 255, 0) 60%), var(--panel); }
.pl-plan.main .pl-caps { color: var(--accent); }
.pl-plan .amount { font: 500 56px/1.05 var(--head); letter-spacing: -0.03em; margin: 12px 0 20px; }
.pl-plan .amount em { font: 500 12.5px var(--mono); color: var(--muted); font-style: normal; margin-left: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pl-plan ul { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--line); }
.pl-plan li { position: relative; padding: 10px 0 10px 22px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.pl-plan li::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--muted); }
.pl-plan.main li::before { background: var(--accent); }
.pl-plan .pl-btn { margin-top: auto; align-self: flex-start; }

/* 10. Questions, what's new, and the close: the week track returns, all calm */
.pl-faq { padding: 20px 0 140px; }
.pl-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.pl-faq-grid > div:first-child { grid-column: 1 / span 4; }
.pl-faq-grid > div:last-child { grid-column: 6 / -1; }
.pl-qs details, .pl-new details { border-top: 1px solid var(--line); padding: 18px 0; }
.pl-qs details:last-child { border-bottom: 1px solid var(--line); }
.pl-qs summary, .pl-new summary { cursor: pointer; font: 500 19px/1.35 var(--head); letter-spacing: -0.012em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pl-qs summary::-webkit-details-marker, .pl-new summary::-webkit-details-marker { display: none; }
.pl-qs summary::after { content: '+'; color: var(--muted); font: 400 18px var(--mono); }
.pl-qs details[open] summary::after { content: '−'; }
.pl-qs details p { color: var(--soft); margin-top: 10px; max-width: 40em; }
.pl-new { padding: 0 0 100px; }
.pl-new summary span { font: 12.5px var(--mono); color: var(--muted); }
.pl-new details div { color: var(--soft); margin-top: 8px; }
.pl-end { padding: 110px 0 0; overflow: hidden; }
.pl-end-text { text-align: center; }
.pl-end .pl-caps { color: var(--accent); }
.pl-end h2 { font-size: clamp(44px, 6.6vw, 96px); margin-top: 18px; }
.pl-end .pl-actions { justify-content: center; }
.pl-week-calm { margin: 90px 0 0; padding-bottom: 40px; }

/* Sections that rise in */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js [data-reveal].seen { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .pl-top nav { display: none; }
  .pl-top > .pl-btn, .pl-top > a:last-child:not(.pl-mark) { margin-left: auto; }
  .pl-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pl-split.flip .pl-split-text { order: 0; }
  .pl-conn-grid, .pl-catalogue-head, .pl-faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pl-conn-grid > div, .pl-catalogue-head > *, .pl-faq-grid > div { grid-column: 1 !important; }
  .pl-catalogue-head .pl-sub { margin-top: 0; }
  .pl-reads, .pl-private, .pl-price, .pl-faq { padding-bottom: 100px; }
  .pl-catalogue { margin-top: 80px; }
  .pl-end { padding-top: 100px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .pl-head .pl-reading { white-space: normal; text-align: right; }
  .pl-conns li { grid-template-columns: minmax(0, 1fr); }
  .pl-board { columns: 2 140px; column-gap: 16px; }
  .pl-board dd { font-size: 11.5px; }
  .pl-plans { grid-template-columns: 1fr; }
  .pl-plan { padding: 24px 22px; }
  .pl-end .pl-actions { flex-direction: column; align-items: center; }
  .pl-form .row { flex-direction: column; }
  .pl-form input[type=email] { flex: none; width: 100%; }
  .pl-foot-fine { flex-direction: column; }
}

/* Reduce Motion: every section shows its final state, and changes are instant */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-in], .js [data-reveal], .js .pl-private .pl-promises li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .pl-btn, .pl-play, .pl-top { transition: none; }
}