/* Bluedify. Paper white and ice blue, one blue pen. DM Serif Display for headings, Instrument Sans for words, IBM Plex Mono for data, Caveat for the few handwritten notes. */
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(fonts/dm-serif-display.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(fonts/caveat-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #12263A; --ink-2: #33495E; --mut: #4A5E72;
  --paper: #FBFDFF; --white: #FFFFFF;
  --ice-0: #F2F9FE; --ice-1: #E8F5FE; --ice: #DCF1FF; --sky: #AFDAF7; --sky-2: #A8E0FF;
  --pen: #2F7BEA; --pen-text: #1E66D0;
  --line: #D3E5F2; --line-2: #AECBE0;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --top-h: 60px;
  --gut: clamp(16px, 4vw, 56px);
  --sec: clamp(28px, 4vw, 58px);
  --lift: 0 1px 0 var(--line), 0 18px 40px -24px rgba(18, 38, 58, .34);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size-adjust: from-font; font-size: 1.0625rem; line-height: 1.5; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--pen-text); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100%, 1320px); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--ice); color: var(--ink); padding: 10px 14px; }
.skip:focus { top: 8px; }

.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pi { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.h2 { font-family: var(--serif); font-size: clamp(2.125rem, 1.35rem + 2.7vw, 3.75rem); font-weight: 400; line-height: 1.05; letter-spacing: -.008em; text-wrap: balance; }
.h3 { font-family: var(--serif); font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.h2-soft { color: var(--mut); }
.lab { font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.lab-hand { font-family: var(--hand); font-weight: 600; font-size: 1.5rem; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--pen-text); }
.head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 56px; align-items: end; margin-bottom: clamp(20px, 2.8vw, 40px); }
.head p { max-width: 58ch; color: var(--mut); text-wrap: pretty; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 12px 22px; border-radius: 4px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; transition: background-color .18s, color .18s, border-color .18s; }
.btn-sm { min-height: 40px; padding: 8px 15px; font-size: .9375rem; }
.btn-ice, .btn-ink { background: var(--pen-text); color: var(--white); }
.btn-ice:hover, .btn-ink:hover { background: #1856B4; }
.btn-line, .btn-line-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover, .btn-line-ink:hover { background: var(--ice); }

.motion-btn { display: inline-flex; align-items: center; gap: 7px; min-width: 30px; min-height: 30px; padding: 4px 8px; font-family: var(--mono); font-size: .6875rem; color: var(--mut); border-radius: 2px; }
.motion-btn:hover { color: var(--ink); }
.motion-btn::before { content: ""; flex: none; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.motion-paused .motion-btn::before { width: 0; height: 0; border-inline: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }
.motion-btn[hidden] { display: none; }

/* pen: ovals and underlines drawn by site.js in the host's own pixel box; no script, no pen, and the words read the same */
[data-pen] { position: relative; display: inline-block; }
.pen-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pen-svg.drawing path { transition: stroke-dashoffset 1.05s cubic-bezier(.45, .05, .3, 1); }
.note { font-family: var(--hand); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .5vw, 1.625rem); line-height: 1.08; color: var(--pen-text); }
@media (prefers-reduced-motion: no-preference) {
  .js .note:not(.in) { clip-path: inset(-10% 100% -10% 0); }
  .js .note { transition: clip-path .85s cubic-bezier(.4, .1, .3, 1); }
  .motion-paused .note { clip-path: none !important; transition: none; }
}

/* entry: tied to scroll by the browser, on a fixed distance so a tall block is whole early; absent support or under reduced motion, everything just shows */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0px entry 110px; }
  }
}
@keyframes rv-in { from { opacity: .001; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(251, 253, 255, .94); backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .top::after { animation: grow-x linear both; animation-timeline: scroll(root); }
  }
}
@keyframes grow-x { to { transform: scaleX(1); } }
.top-in { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.logo-img { display: block; object-fit: contain; }
.brand-lockup { display: block; width: auto; height: 68px; margin-block: -9px; }
.nav { display: none; gap: 18px; margin-left: 8px; font-size: .9375rem; white-space: nowrap; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 8px 0; }
.nav a:hover { color: var(--pen-text); }
.top-label { display: none; margin-left: auto; font-family: var(--hand); font-weight: 600; font-size: 1.4375rem; line-height: 1; color: var(--pen-text); transition: opacity .2s; white-space: nowrap; }
.top-label.swap { opacity: 0; }
.motion-btn { margin-left: auto; }
.motion-btn[hidden] + .top-cta, .brand + .top-cta { margin-left: auto; }
@media (min-width: 1120px) { .nav { display: flex; } }
.top-cta { white-space: nowrap; }
@media (max-width: 1499px) { .motion-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (min-width: 1240px) { .top-label { display: block; } .top-label + .motion-btn { margin-left: 0; } .top-label + .motion-btn[hidden] + .top-cta { margin-left: 0; } }

/* ---- first screen ---- */
.hero { position: relative; overflow: clip; isolation: isolate; background: radial-gradient(70% 90% at 82% 22%, var(--ice) 0, rgba(220, 241, 255, .42) 46%, transparent 74%), var(--paper); padding-bottom: clamp(22px, 2.6vw, 38px); }
.contour { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(28px, 5vw, 84px); align-items: center; padding-top: clamp(24px, 3.4vw, 50px); padding-bottom: clamp(16px, 2vw, 28px); }
.hero-kick { display: inline-block; font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); margin-bottom: 16px; }
.hero h1 { font-family: var(--serif); font-size: clamp(2.5rem, 1.35rem + 3.2vw, 4.625rem); font-weight: 400; line-height: 1.02; letter-spacing: -.012em; }
.hero h1 span { display: block; margin-top: .08em; color: var(--pen-text); text-wrap: balance; }
.hero h1 [data-pen] { color: var(--ink); }
.hero-sub { max-width: 46ch; margin-top: 22px; font-size: 1.125rem; color: var(--ink-2); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-route { margin-top: 14px; font-size: .9375rem; color: var(--mut); }
.hero-route a { display: inline-flex; align-items: center; gap: .3em; min-height: 24px; color: var(--ink); }
.hero-frame { position: relative; justify-self: center; width: min(100%, 430px); }
.frame-mat { background: var(--white); padding: 12px; box-shadow: var(--lift); rotate: 1.2deg; }
.hero-photo { width: 100%; height: auto; }
.hero-frame figcaption { margin-top: 12px; font-family: var(--mono); font-size: .6875rem; line-height: 1.35; color: var(--mut); text-align: right; }
.note-a, .note-b { position: absolute; white-space: nowrap; }
.note-a { left: 6px; top: -34px; rotate: -3deg; }
.note-b { right: -36px; top: 83%; rotate: 3deg; background: var(--white); padding: 2px 9px 3px; box-shadow: 0 8px 18px -12px rgba(18, 38, 58, .4); }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .hero-frame .frame-mat { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@keyframes hero-drift { to { translate: 0 -22px; rotate: -.4deg; } }
.docket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-2); margin-top: clamp(10px, 1.4vw, 20px); background: rgba(255, 255, 255, .6); }
.docket > div { padding: 11px 18px 13px 0; }
.docket dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin-bottom: 2px; }
.docket dd { font-size: .9375rem; line-height: 1.3; }
.reel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(14px, 1.6vw, 22px); }
.reel-i { display: block; background: var(--white); border: 1px solid var(--line); padding: 6px; text-decoration: none; color: var(--ink); transition: border-color .2s, translate .25s cubic-bezier(.2, .7, .2, 1); }
.reel-i:hover { border-color: var(--pen); translate: 0 -3px; }
.reel-i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.reel-i span { display: flex; align-items: center; gap: 7px; padding: 7px 2px 2px; font-size: .875rem; font-weight: 500; line-height: 1.15; }
.nb { font-style: normal; white-space: nowrap; }
.reel-i .pi { width: 21px; height: 21px; color: var(--pen-text); }

/* ---- hello ---- */
.short { background: linear-gradient(to bottom, var(--paper), var(--ice-0)); padding-block: var(--sec); }
.short-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 380px); gap: clamp(28px, 6vw, 96px); align-items: start; }
.rows { margin-top: clamp(16px, 2vw, 28px); border-top: 1px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.rows dt { font-family: var(--hand); font-weight: 600; font-size: 1.5625rem; line-height: 1; color: var(--pen-text); }
.rows dd { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.3; font-weight: 500; text-wrap: pretty; }
.short-small { margin-top: 16px; max-width: 62ch; color: var(--mut); text-wrap: pretty; }
.short-small b { color: var(--ink); font-weight: 600; }
.short-slip { position: relative; padding-top: 6px; }
.short-slip .receipt { rotate: 1.4deg; }
.note-slip { position: absolute; right: -10px; top: -14px; rotate: -4deg; }
.receipt { background: var(--white); color: var(--ink); padding: 22px 22px 18px; font-family: var(--mono); font-size: .8125rem; line-height: 1.45; filter: drop-shadow(0 12px 20px rgba(18, 38, 58, .13)); --saw: polygon(0 0, 100% 0, 100% 100%, 95% calc(100% - 5px), 90% 100%, 85% calc(100% - 5px), 80% 100%, 75% calc(100% - 5px), 70% 100%, 65% calc(100% - 5px), 60% 100%, 55% calc(100% - 5px), 50% 100%, 45% calc(100% - 5px), 40% 100%, 35% calc(100% - 5px), 30% 100%, 25% calc(100% - 5px), 20% 100%, 15% calc(100% - 5px), 10% 100%, 5% calc(100% - 5px), 0 100%); }
.rc-brand { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.rc-sub { color: var(--mut); }
.rc-rule { border: 0; border-top: 1px dashed var(--line-2); margin: 11px 0; }
.rc-solid { border-top: 1.5px solid var(--ink); }
.rc-row { display: flex; align-items: baseline; gap: 8px; }
.rc-row i { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); }
.rc-row span:last-child { text-align: right; }
.rc-row .ph { color: var(--mut); }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
.rc-total b { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.rc-foot { color: var(--mut); margin-top: 2px; }
.rc-qr { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: .75rem; color: var(--mut); }
.rc-qr img { width: 76px; height: 76px; }
.rc-code { margin-top: 10px; font-size: .6875rem; color: var(--mut); padding-bottom: 6px; }
.rc-bars { width: 100%; height: 28px; margin-top: 10px; fill: var(--ink); }
.rc-body { color: var(--ink); overflow-wrap: anywhere; }

/* ---- brand shelf ---- */
.shelf { background: var(--ice); padding-block: clamp(18px, 2vw, 28px) 0; overflow: clip; }
.shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 40px; margin-bottom: 12px; }
.shelf-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); line-height: 1.12; }
.shelf-head p { max-width: 62ch; font-size: .9375rem; color: var(--ink-2); }
.marquee { overflow: clip; border-block: 1px solid var(--line-2); background: rgba(255, 255, 255, .55); }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.label { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 182px; padding: 8px 20px; border-right: 1px solid var(--line-2); }
.label b { font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; line-height: 1.2; }
.label:nth-child(3n+2) b { font-family: var(--hand); font-weight: 600; font-size: 1.4375rem; line-height: 1.04; color: var(--pen-text); }
.label:nth-child(3n) b { font-family: var(--mono); font-weight: 500; font-size: .8125rem; line-height: 1.8; letter-spacing: .06em; text-transform: uppercase; }
.label small { font-size: .78125rem; color: var(--ink-2); }
@keyframes mq { to { transform: translateX(-50%); } }
.motion-paused .mq-track, .motion-paused .pc-status i { animation-play-state: paused; }
/* Without motion the shelf is a plain grid: eight, four or two across, so no label is left alone on a row. */
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: auto; }
  .label { min-width: 0; }
  .label[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1239px) { .mq-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 559px) { .mq-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- what we buy ---- */
.buy { padding-block: var(--sec); }
.cat-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ct { position: relative; display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 7px 28px 7px 9px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); text-align: left; font-size: .875rem; font-weight: 500; line-height: 1.15; border-radius: 6px; transition: background-color .15s, border-color .15s, color .15s; }
.ct:hover { background: var(--ice-0); border-color: var(--pen); }
.ct[aria-selected="true"] { background: var(--ice); border-color: var(--pen); color: var(--ink); }
.ct::after { content: ""; position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; background: var(--white); border: 1.5px solid var(--line-2); border-radius: 3px; }
.ct[aria-selected="true"]::after { background: var(--pen); border-color: var(--pen); }
.ct[aria-selected="true"]::before { content: ""; position: absolute; z-index: 1; top: 9px; right: 12px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; rotate: 45deg; }
.cp-art-ico { display: grid; place-items: center; margin: 12px; padding: 0; background: var(--ice-0); border: 1px solid var(--line); }
.cp-art-ico .pi { width: 96px; height: 96px; color: var(--pen-text); }
.cp-ex-lab { margin-top: 16px; }
.cp-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-ex a { display: inline-flex; align-items: center; gap: 5px; font-size: .9375rem; }
.cp-ex .ico { flex: none; }
.cat-note { margin: 10px 0 0; font-size: .8125rem; color: var(--mut); }
.reel-note { margin: 8px 0 0; font-size: .8125rem; color: var(--mut); }
.ct .pi { color: var(--pen-text); }
.cp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); gap: 0; background: var(--white); border: 1px solid var(--line); border-top: 0; }
.cp[hidden] { display: none; }
.cp-art { padding: 12px; }
.cp-art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.cp-lines, .cp-need { padding: clamp(16px, 2vw, 26px); }
.cp-lines .lab { margin-bottom: 10px; }
.cp-need .lab { margin-bottom: 8px; }
.types li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.22; }
.types li:last-child { border-bottom: 1px solid var(--line); }
.types .pi { color: var(--pen-text); }
.cp-need { border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--ice-0); }
.cp-need .btn { margin-top: auto; align-self: flex-start; }
.ticks li { position: relative; padding: 0 0 9px 22px; line-height: 1.3; font-size: 1rem; }
.ticks li::before { content: ""; position: absolute; left: 1px; top: .32em; width: 11px; height: 6px; border-left: 1.8px solid var(--pen); border-bottom: 1.8px solid var(--pen); transform: rotate(-45deg); }
.cp-need .ticks { margin-bottom: 12px; }

/* ---- two product pages ---- */
.listing { background: linear-gradient(to bottom, var(--paper), var(--ice-1) 110px, var(--ice-1) calc(100% - 110px), var(--paper)); padding-block: var(--sec); }
.lp-switch { display: none; }
.lp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.lp { position: relative; border: 1px solid var(--line-2); background: var(--white); font-family: Arial, Helvetica, sans-serif; font-size: .875rem; line-height: 1.35; color: #0F1111; display: flex; flex-direction: column; box-shadow: var(--lift); }
.lp-weak { background: #FAFAFA; border-color: #D5D8DB; box-shadow: none; }
.lp-tag { padding: 5px 12px; font-family: var(--mono); font-size: .6875rem; line-height: 1.2; color: var(--mut); background: var(--ice-0); border-bottom: 1px solid var(--line); }
.lp-weak .lp-tag { background: #F1F2F3; border-color: #E1E3E5; }
.lp-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--ice); color: var(--ink); }
.lp-weak .lp-bar { background: #E9EBED; }
.lp-search { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 7px 0 9px; background: #fff; border: 1px solid var(--line-2); border-radius: 3px; color: #5A646E; font-size: .75rem; }
.lp-cart { width: 20px; height: 20px; }
.lp-crumb { padding: 7px 14px; font-size: .71875rem; color: #565959; border-bottom: 1px solid #EDEFF1; }
.lp-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
.lp-gal { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-content: start; }
.lp-thumbs { display: grid; gap: 6px; align-content: start; }
.lp-thumbs i, .lp-thumbs button { display: block; width: 42px; height: 42px; padding: 0; border: 1px solid #C9CDD2; border-radius: 3px; overflow: hidden; background: #F4F5F6; }
.lp-thumbs .on { border-color: var(--pen); box-shadow: 0 0 0 1px var(--pen); }
.lp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lp-main { position: relative; align-self: start; }
.lp-main img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.lp-title { font-size: 1rem; font-weight: 400; line-height: 1.28; position: relative; }
.lp-by { margin-top: 3px; font-size: .78125rem; color: #565959; }
.lp-link { color: var(--pen-text); }
.lp-bul { margin-top: 9px; padding-left: 15px; list-style: disc; font-size: .8125rem; }
.lp-bul li { margin-bottom: 3px; position: relative; }
.lp-buy { margin-top: 11px; padding: 10px 11px 11px; border: 1px solid #D5D9D9; border-radius: 6px; }
.lp-price { font-size: .71875rem; color: #565959; }
.lp-stock { margin-top: 3px; font-size: 1rem; line-height: 1.2; position: relative; }
.lp-stock.is-ok { color: #0B6E3B; }
.lp-stock.is-bad { color: #9A4500; font-size: .875rem; }
.lp-facts { margin-top: 7px; font-size: .75rem; }
.lp-facts div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); }
.lp-facts dt { color: #565959; }
.lp-facts dd { position: relative; }
.lp-add { margin-top: 9px; padding: 6px; text-align: center; border-radius: 16px; background: var(--pen-text); color: #fff; font-size: .8125rem; }
.lp-add.is-off { background: #E7E9EC; color: #565B62; }
.pin { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50% 46% 54% 48% / 48% 54% 46% 52%; border: 1.7px solid var(--pen); background: var(--white); color: var(--pen-text); font: 600 1.0625rem/1 var(--hand); rotate: -6deg; flex: none; }
.lp .pin { position: absolute; }
.lp-main .pin { right: 4px; top: 4px; }
.lp-title .pin { position: relative; margin-left: 6px; vertical-align: 1px; }
.lp-bul .pin, .lp-stock .pin, .lp-facts .pin { position: relative; margin-left: 6px; vertical-align: 1px; }
.cmp { width: 100%; margin-top: clamp(16px, 2.2vw, 30px); border-collapse: collapse; background: var(--white); border: 1px solid var(--line); text-align: left; font-size: .9375rem; line-height: 1.34; }
.cmp thead th { padding: 11px 16px 9px; font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; border-bottom: 1.5px solid var(--ink); }
.cmp thead th:last-child { color: var(--pen-text); background: var(--ice-0); }
.cmp tbody th { width: 17%; padding: 8px 16px; font-weight: 600; white-space: nowrap; vertical-align: top; }
.cmp tbody th .pin { margin-right: 9px; vertical-align: -5px; }
.cmp td { padding: 9px 16px; vertical-align: top; text-wrap: pretty; }
.cmp td:nth-child(2) { width: 34%; color: var(--mut); }
.cmp td:last-child { background: var(--ice-0); font-weight: 500; }
.cmp tbody tr + tr > * { border-top: 1px solid var(--line); }

/* ---- run it yourself, and what it adds up to ---- */
.vs { padding-block: var(--sec); }
.vs-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 36px; margin-bottom: 18px; }
.sl { display: block; }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; font-size: .9375rem; color: var(--ink-2); }
.sl output { font-family: var(--mono); font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
input[type="range"] { --f: 20%; width: 100%; height: 28px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--pen) var(--f), var(--ice) var(--f)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ice); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--pen); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--white); border: 2px solid var(--pen); box-shadow: 0 2px 6px rgba(18, 38, 58, .22); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--pen); box-shadow: 0 2px 6px rgba(18, 38, 58, .22); }
.vs-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.scene { padding: clamp(14px, 2.2vw, 28px); border: 1px solid var(--line); background: var(--white); }
.scene-us { background: var(--ice-1); border-color: var(--sky); }
.scene-who { font-family: var(--mono); font-size: .8125rem; color: var(--mut); }
.scene-us .scene-who { color: var(--ink); }
.scene-big { margin-top: clamp(8px, 1.4vw, 18px); font-family: var(--serif); font-size: clamp(2rem, 1rem + 3.6vw, 4.25rem); line-height: 1.04; font-variant-numeric: tabular-nums; color: var(--mut); }
.scene-us .scene-big { color: var(--ink); }
.scene-cap { margin-top: 6px; max-width: 30ch; font-size: clamp(.8125rem, .75rem + .35vw, 1rem); line-height: 1.28; }
.waffle { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; margin-top: clamp(12px, 1.6vw, 20px); }
.waffle i { aspect-ratio: 1; border: 1px solid var(--line); }
.waffle i.on { border-color: var(--line-2); background: var(--ice-0); }
.waffle.is-paid i.on { background: var(--pen); border-color: var(--pen); }
.scene-rows { margin-top: clamp(10px, 1.4vw, 18px); }
.scene-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: clamp(.78125rem, .72rem + .35vw, .9375rem); line-height: 1.22; }
.scene-rows dd { font-family: var(--mono); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-sum { margin-top: clamp(8px, 1.2vw, 16px); padding: 13px clamp(14px, 2.2vw, 28px); background: var(--ice); color: var(--ink); font-size: clamp(1rem, .95rem + .4vw, 1.25rem); font-weight: 500; line-height: 1.28; text-wrap: pretty; }
.vs-note { margin-top: 10px; max-width: 80ch; font-size: .8125rem; color: var(--mut); }
.ledger-h { margin-top: clamp(26px, 3.4vw, 46px); font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.08; }
.bars2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); margin-top: 14px; }
.bcard { background: var(--white); border: 1px solid var(--line); padding: clamp(14px, 2vw, 24px); --lab: 7.75rem; }
.bcard h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; }
.brow { display: grid; grid-template-columns: var(--lab, 7.75rem) minmax(0, 1fr) 4.4em; align-items: center; gap: 10px; padding: 6px 0; font-size: .9375rem; }
.brow b { font-family: var(--mono); font-weight: 500; font-size: .8125rem; text-align: right; white-space: nowrap; }
.track { height: 12px; background: var(--ice-1); position: relative; border-radius: 2px; }
.fill { display: block; height: 100%; background: var(--pen); transform-origin: 0 50%; border-radius: 2px; }
.fill-mute { background: var(--line-2); }
.w100 { width: 100%; } .w22 { width: 22.2%; } .w18 { width: 18%; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .fill { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 100% cover 34%; }
  }
}
.jobs { margin-top: 8px; font-size: .9375rem; }
.jobs summary { cursor: pointer; font-weight: 500; padding: 6px 0; color: var(--pen-text); }
.jobs ol { columns: 2; column-gap: 20px; margin-top: 6px; font-size: .875rem; }
.jobs li { padding: 3px 0; break-inside: avoid; color: var(--mut); }
.jobs li.keep { color: var(--ink); font-weight: 600; }
.jobs p { margin-top: 8px; font-size: .875rem; color: var(--mut); }
.axis-wrap { position: relative; margin-top: 26px; }
.brow-axis { grid-template-columns: var(--lab) minmax(0, 1fr); }
.axis { position: absolute; top: -8px; bottom: -6px; left: calc(var(--lab) + 10px + (100% - var(--lab) - 10px) * .25); border-left: 1.5px solid var(--ink); pointer-events: none; }
.axis i { display: none; }
.axis span { position: absolute; left: 6px; top: -14px; font-family: var(--mono); font-size: .6875rem; white-space: nowrap; background: var(--white); padding-right: 4px; }
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 0 calc(var(--lab) + 10px); font-family: var(--mono); font-size: .6875rem; line-height: 1.2; color: var(--mut); }
.stages li { padding: 5px 4px 0 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.bcard-note { margin-top: 10px; font-size: .875rem; color: var(--mut); }
.src { margin-top: 12px; max-width: 86ch; font-family: var(--mono); font-size: .75rem; line-height: 1.5; color: var(--mut); }

/* ---- where your stock goes ---- */
.route { background: linear-gradient(to bottom, var(--paper), var(--ice) 34%, var(--ice) 74%, var(--paper)); view-timeline: --route block; }
.route-in { padding-block: var(--sec) calc(var(--sec) * .85); }
.road { margin-top: clamp(14px, 2vw, 26px); container-type: inline-size; }
.road-line { position: relative; height: 44px; border-bottom: 2px dashed var(--line-2); }
.truck { position: absolute; left: 0; bottom: -2px; width: 72px; height: 40px; overflow: visible; translate: calc(62cqw) 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .truck { animation: drive linear both; animation-timeline: --route; animation-range: entry 70% exit 12%; }
    .steps li::before { animation: dot-on linear both; animation-timeline: --route; }
    .steps li:nth-child(1)::before { animation-range: entry 70% entry 74%; }
    .steps li:nth-child(2)::before { animation-range: entry 88% entry 92%; }
    .steps li:nth-child(3)::before { animation-range: contain 6% contain 14%; }
    .steps li:nth-child(4)::before { animation-range: contain 44% contain 54%; }
  }
}
@keyframes drive { from { translate: 0 0; } to { translate: calc(100cqw - 72px) 0; } }
@keyframes dot-on { from { background: var(--white); scale: .7; } to { background: var(--pen); scale: 1; } }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.steps li { position: relative; padding-top: 18px; }
.steps li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pen); background: var(--pen); }
.steps b { display: block; font-size: 1.125rem; font-weight: 600; margin-bottom: 2px; }
.steps span { display: block; font-size: .9375rem; line-height: 1.32; color: var(--ink-2); text-wrap: pretty; }

/* ---- standards + who we buy from ---- */
.rules { padding-block: var(--sec); }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); margin-top: clamp(14px, 2vw, 26px); }
.rules-grid h3 { font-family: var(--hand); font-weight: 600; font-size: 1.875rem; line-height: 1; color: var(--pen-text); padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.ticks-lg li { padding: 9px 0 9px 28px; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
.ticks-lg li::before { left: 3px; top: 1em; }
.ticks-no li::before { top: 1.28em; left: 2px; width: 13px; height: 0; border-left: 0; border-bottom: 1.8px solid var(--ink); transform: rotate(-4deg); }
.who-tabs { margin-top: clamp(24px, 3vw, 44px); padding: clamp(14px, 2vw, 26px); background: var(--ice-0); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 8px 40px; }
.who-h { grid-row: span 2; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.08; }
.wt-list { display: flex; flex-wrap: wrap; gap: 0 22px; border-bottom: 1px solid var(--line-2); }
.wt { padding: 8px 0; font-weight: 500; color: var(--mut); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.wt[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pen); }
.wp { padding-top: 12px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px 32px; }
.wp[hidden] { display: none; }
.wp-text { font-size: 1.0625rem; line-height: 1.36; text-wrap: pretty; }
.wp-list li { padding: 2px 0; font-family: var(--mono); font-size: .8125rem; color: var(--mut); }

/* ---- how you get paid: a desk with two sheets of paper on it ---- */
.paper { background: linear-gradient(to bottom, var(--paper), var(--ice-1) 110px, var(--ice-1) calc(100% - 110px), var(--paper)); padding-block: var(--sec); }
.deal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.deal-copy > p { margin-top: 14px; max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.deal-facts { margin-top: 18px; border-top: 1px solid var(--ink); }
.deal-facts > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.deal-facts dt { font-family: var(--hand); font-weight: 600; font-size: 1.5625rem; line-height: 1; color: var(--pen-text); }
.deal-desk { position: relative; display: grid; justify-items: start; }
.receipt-po { width: min(68%, 390px); rotate: -2deg; clip-path: var(--saw); }
.receipt-po .rc-total { justify-content: flex-start; gap: 18px; }
.receipt-paid { justify-self: end; width: min(54%, 310px); margin-top: -104px; rotate: 2.6deg; z-index: 1; }
.receipt-paid .rc-sub { color: var(--ink); font-weight: 500; }
.stamp { color: var(--pen-text); }
.note-paid { justify-self: end; margin: 8px 12px 0 0; rotate: -2deg; }
.paper-head { margin-top: clamp(26px, 3.4vw, 46px); margin-bottom: clamp(26px, 2.6vw, 36px); }
.folder-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, .8vw, 12px); align-items: end; }
.folder { position: relative; display: block; width: 100%; padding: 20px clamp(10px, 1.6vw, 22px) 12px; text-align: left; background: var(--ice); color: var(--ink); border-radius: 0 6px 0 0; transition: padding-top .2s, background-color .2s; }
.fd-tab { position: absolute; left: 0; top: -13px; width: 42%; height: 14px; background: inherit; border-radius: 5px 8px 0 0; clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
.fd-name { display: block; font-family: var(--serif); font-size: clamp(1.0625rem, .95rem + .75vw, 1.5rem); line-height: 1.1; }
.fd-meta { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.24; color: var(--mut); }
.folder:hover { background: var(--sky); }
.folder[aria-selected="true"] { background: var(--white); padding-top: 28px; box-shadow: 0 -1px 0 var(--line-2); }
.fp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: start; background: var(--white); padding: clamp(10px, 1.6vw, 22px); box-shadow: var(--lift); }
.fp-3col, #fp-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp[hidden] { display: none; }
.sheet { background: var(--ice-0); padding: clamp(14px, 1.8vw, 24px); font-size: .9375rem; line-height: 1.36; min-width: 0; }
.sheet h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.12; margin-bottom: 8px; }
.sheet > p + p { margin-top: 9px; }
.sheet-wide { grid-column: 1 / -1; }
.sheet-note { margin-top: 10px; font-family: var(--mono); font-size: .75rem; color: var(--mut); }
.terms > div { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.terms dt { font-family: var(--hand); font-weight: 600; font-size: 1.25rem; line-height: 1.05; color: var(--pen-text); }
.terms dd { overflow-wrap: anywhere; }
.month { margin-top: 12px; font-family: var(--mono); font-size: .8125rem; }
.month > div { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-2); }
.month-h { font-weight: 500; border-top-color: var(--ink) !important; }

/* ---- guide tile, the bookshelf ---- */
.guide { background: linear-gradient(to bottom, var(--paper), #CFEBFD 90px, #C3E6FC calc(100% - 90px), var(--paper)); padding-block: var(--sec); }
.guide-in { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: center; }
.guide-copy p { margin: 12px 0 16px; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.book-tile { display: block; width: 100%; padding: 6px 0; perspective: 1200px; }
.book3d { position: relative; display: block; width: min(100%, 220px); aspect-ratio: 3 / 4; margin-inline: auto; transform-style: preserve-3d; transform: rotateY(-20deg) rotateX(3deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.book-tile:hover .book3d, .book-tile:focus-visible .book3d { transform: rotateY(-6deg) rotateX(1deg); }
.book3d-cover { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px; background: var(--white); color: var(--ink); text-align: left; border-radius: 1px 4px 4px 1px; box-shadow: inset 7px 0 0 var(--ice), 14px 18px 34px rgba(18, 38, 58, .3); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.2, .7, .2, 1); z-index: 1; }
.book-tile:hover .book3d-cover, .book-tile:focus-visible .book3d-cover { transform: rotateY(-26deg); }
.book3d-cover .logo-img { width: 36px; height: 39px; }
.book3d-cover b { margin-top: auto; font-family: var(--serif); font-weight: 400; font-size: 1.9375rem; line-height: 1.02; }
.book3d-cover small { font-size: .78125rem; line-height: 1.24; color: var(--mut); }
.book3d-page { position: absolute; inset: 3px 3px 3px 2px; background: repeating-linear-gradient(to bottom, var(--white) 0 3px, var(--line) 3px 4px); border-radius: 0 3px 3px 0; transform: translateZ(-6px); }
.read h3 { font-family: var(--hand); font-weight: 600; font-size: 1.625rem; line-height: 1.05; color: var(--ink); margin-bottom: 8px; }
.read h3:not(:first-child) { margin-top: 16px; }
.read-list li { width: fit-content; max-width: 100%; margin-bottom: 3px; padding: 4px 12px; font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; background: var(--white); border-left: 5px solid var(--pen); box-shadow: 0 1px 2px rgba(18, 38, 58, .12); }
.read-list li:nth-child(2) { rotate: .5deg; margin-left: 12px; background: var(--ice-0); border-left-color: var(--ink); }
.read-list li:nth-child(3) { rotate: -.4deg; background: var(--paper); border-left-color: var(--sky); }
.read-list li:nth-child(4) { margin-left: 22px; background: var(--ice-1); border-left-color: var(--pen); }
.read-list li:nth-child(5) { rotate: .3deg; margin-left: 4px; background: var(--white); border-left-color: var(--ink); }
.read-tools { margin-top: 8px; font-size: .8125rem; color: var(--ink-2); }
.read-tools b { font-weight: 600; color: var(--ink); }
.brow-sm { grid-template-columns: 7.5rem minmax(0, 1fr) 5.2rem; padding: 3px 0; font-size: .875rem; line-height: 1.2; }
.brow-sm .track { height: 8px; background: rgba(255, 255, 255, .7); }

/* ---- who you'll talk to ---- */
.people { padding-block: var(--sec); }
.people-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 270px) minmax(320px, 460px); grid-template-areas: "head fig card"; gap: clamp(16px, 2.6vw, 36px); align-items: center; }
.people-head { grid-area: head; }
.pcard { grid-area: card; }
.portrait { grid-area: fig; background: var(--white); padding: 10px 10px 8px; box-shadow: var(--lift); rotate: -1.4deg; }
.portrait img { width: 100%; aspect-ratio: 5 / 5.4; object-fit: cover; object-position: 50% 34%; }
.portrait figcaption { padding: 8px 2px 0; }
.portrait b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; line-height: 1.15; }
.portrait a { display: block; padding-block: 3px; min-height: 24px; font-family: var(--mono); font-size: .6875rem; line-height: 1.3; color: var(--mut); }
.people-lead { margin-top: 12px; max-width: 34ch; font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.3; color: var(--ink-2); text-wrap: pretty; }
.pcard { background: var(--white); border: 1px solid var(--line); padding: clamp(14px, 1.8vw, 22px); }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-who { min-width: 0; flex: 1; }
.pc-name { font-weight: 600; font-size: 1.125rem; line-height: 1.18; }
.pc-role { font-size: .875rem; line-height: 1.2; color: var(--mut); }
.pc-clock { text-align: right; font-family: var(--mono); line-height: 1.12; }
.pc-clock b { font-weight: 500; }
.pc-clock small { display: block; font-size: .6875rem; color: var(--mut); }
.pc-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .875rem; }
.pc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--pen); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pc-status i { animation: none; } }
.pc-tabs { display: flex; gap: 18px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.pc-tab { padding: 7px 0; font-size: .9375rem; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.pc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pen); }
.pc-panel { padding-top: 10px; font-size: .9375rem; line-height: 1.38; min-height: 84px; }
.pc-panel[hidden] { display: none; }
.pc-rows > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.pc-rows dt { color: var(--mut); }
.copy { margin-left: 4px; padding: 2px 8px; min-height: 24px; font-size: .75rem; font-family: var(--mono); border: 1px solid var(--line-2); border-radius: 2px; }
.pc-qr { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); text-decoration: none; }
.pc-qr img { width: 52px; height: 52px; }
.pc-qr b { display: block; font-weight: 500; line-height: 1.2; }
.pc-qr small { font-size: .8125rem; color: var(--mut); }

/* ---- wall ---- */
.wall { padding-block: 0 var(--sec); }
.wall-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 14px); }
.wc { padding: clamp(14px, 1.6vw, 20px); background: var(--ice-0); border-left: 3px solid var(--sky); display: flex; flex-direction: column; }
.wc p { font-family: var(--serif); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.26; text-wrap: pretty; }
.wc footer { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: .6875rem; color: var(--mut); }
.wc-empty { background: transparent; border: 1.5px dashed var(--line-2); justify-content: center; }
.wc-empty p { font-family: var(--hand); font-size: 1.4375rem; line-height: 1.1; }

/* ---- questions ---- */
.faq { background: linear-gradient(to bottom, var(--paper), var(--ice-1) 90px, var(--ice-1) calc(100% - 90px), var(--paper)); padding-block: var(--sec); }
.faq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 14px clamp(24px, 5vw, 80px); align-items: start; }
.faq-in > div > p { margin-top: 10px; color: var(--mut); }
.qa details { border-top: 1px solid var(--line-2); }
.qa details:last-child { border-bottom: 1px solid var(--line-2); }
.qa summary { position: relative; padding: 11px 34px 11px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.24; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 5px; top: 16px; width: 10px; height: 10px; border-right: 1.8px solid var(--pen); border-bottom: 1.8px solid var(--pen); transform: rotate(45deg); transition: transform .18s; }
.qa details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.qa details p { padding: 0 34px 13px 0; color: var(--ink-2); text-wrap: pretty; }

/* ---- enquiry ---- */
.apply { padding-block: var(--sec); }
.apply-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px) clamp(20px, 3vw, 44px); align-items: center; }
.apply-head p { margin-top: 12px; max-width: 46ch; color: var(--mut); text-wrap: pretty; }
.collab { background: var(--ice-0); border: 1px solid var(--line); padding: clamp(14px, 1.8vw, 22px); text-align: center; }
.collab-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.8vw, 22px); }
.collab-them { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; padding: 4px 12px; border: 1.5px dashed var(--line-2); max-width: 52%; overflow-wrap: anywhere; }
.collab-them.ph { color: var(--mut); }
.collab-them:not(.ph) { border-color: var(--pen); }
.collab-them.pop { animation: pop .34s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { scale: .94; } 60% { scale: 1.03; } to { scale: 1; } }
.collab-x { font-family: var(--hand); font-weight: 600; font-size: 1.875rem; line-height: 1; color: var(--pen-text); }
.collab-us { width: clamp(106px, 12vw, 158px); height: auto; }
.collab figcaption { margin-top: 8px; font-size: 1.25rem; }
.check { margin-top: 14px; background: var(--ice-0); padding: clamp(12px, 1.5vw, 18px); }
.check-h { font-size: 1.0625rem; font-weight: 600; }
.check-p { font-size: .875rem; color: var(--mut); margin: 2px 0 8px; }
.check-form { display: flex; gap: 6px; }
.check-form input { flex: 1; min-width: 0; min-height: 40px; padding: 7px 10px; background: var(--white); border: 1px solid var(--line-2); border-radius: 3px; }
.check-msg { min-height: 0; margin-top: 6px; font-size: .875rem; }
.check-msg:empty { display: none; }
.check-msg.bad { color: #A02C14; }
.check-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-family: var(--mono); font-size: .8125rem; border-top: 1px solid var(--line); }
.check-list a { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); }
.check-list button { display: grid; place-items: center; margin-left: auto; width: 28px; height: 28px; }
.check-list svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apply-work { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 500; }
.field label span { font-weight: 400; color: var(--mut); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 9px 11px; background: var(--white); border: 1px solid var(--line-2); border-radius: 3px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pen); }
.field textarea { resize: vertical; min-height: 0; }
.field.bad input { border-color: #A02C14; }
.err { font-size: .8125rem; color: #A02C14; }
.receipt-mail { background: var(--ice-0); filter: none; border: 1px solid var(--line); }
.apply-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.apply-actions .btn { padding-inline: 10px; font-size: .9375rem; }
.status { grid-column: 1 / -1; font-size: .875rem; min-height: 0; }
.status:empty { display: none; }
.data-note { grid-column: 1 / -1; padding: 12px clamp(14px, 1.8vw, 22px); background: var(--ice); border-left: 3px solid var(--pen); color: var(--ink); font-size: .9375rem; line-height: 1.4; text-wrap: pretty; }
.data-note b { font-weight: 600; }

/* ---- last screen: pinned; the clouds part, the name is there. Off without scroll timelines or with reduced motion: then it is simply the end of the page. ---- */

/* ---- footer ---- */
.foot { background: #fff; color: var(--ink); padding-block: 14px 36px; font-size: .875rem; line-height: 1.4; }
.foot-name { width: 212px; height: auto; margin-bottom: 8px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 12px; }
.foot-nav a { padding: 4px 0; }
.foot-legal p + p { margin-top: 6px; }
.foot-short { padding-bottom: 28px; background: var(--ice-0); }

/* ---- the guide ---- */
.bk { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #E8F5FE; color: var(--ink); overflow: hidden; opacity: 0; transition-property: opacity, display, overlay; transition-duration: .28s; transition-timing-function: ease-out; transition-behavior: allow-discrete; }
.bk[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 1; }
@starting-style { .bk[open] { opacity: 0; } .bk[open] .bk-book { scale: .93; } }
@media (prefers-reduced-motion: reduce) { .bk { transition-duration: .1s; } @starting-style { .bk[open] .bk-book { scale: 1; } } }
.bk::backdrop { background: rgba(232, 245, 254, .8); }
.bk-top { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gut); }
.bk-count { font-family: var(--mono); font-size: .8125rem; color: var(--mut); }
.bk-close, .bk-btn { display: grid; place-items: center; width: 46px; height: 46px; color: var(--ink); border: 1px solid var(--line-2); border-radius: 50%; background: var(--white); }
.bk-close:hover, .bk-btn:hover:not(:disabled) { background: var(--ice); border-color: var(--pen); }
.bk-btn:disabled { opacity: .3; cursor: default; }
.bk-nav { display: flex; justify-content: center; gap: 12px; padding: 10px 0 14px; }
.bk-stage { display: grid; place-items: center; min-height: 0; padding-inline: var(--gut); perspective: 2200px; overflow: hidden; touch-action: pan-y; user-select: none; }
.bk-book { --pw: min(84vw, calc((100dvh - 150px) * .7)); position: relative; width: var(--pw); height: calc(var(--pw) / .7); transform-style: preserve-3d; transition: translate .5s cubic-bezier(.3, .7, .2, 1), scale .4s ease-out; filter: drop-shadow(0 18px 30px rgba(18, 38, 58, .18)); }
.bk-book.is-spread { --pw: min(42vw, calc((100dvh - 150px) * .7)); width: calc(var(--pw) * 2); }
.bk-book:not(.is-spread) { --pw: min(90vw, 560px); height: min(calc(100dvh - 150px), calc(var(--pw) * 1.72)); }
.bk-book.is-spread.at-start { translate: -25% 0; }
.bk-book.is-spread.at-end { translate: 25% 0; }
.leaf { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-style: preserve-3d; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.bk-book.is-spread .leaf { left: 50%; width: 50%; }
.leaf.is-flipped { transform: rotateY(-180deg); }
.bk-book:not(.is-spread) .leaf.is-flipped { transform: rotateY(-180deg); opacity: 0; transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .1s .55s; }
.leaf-f, .leaf-b { position: absolute; inset: 0; backface-visibility: hidden; background: var(--white); color: var(--ink); overflow: hidden; }
.leaf-f::after, .leaf-b::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.leaf-f::after { background: linear-gradient(to right, rgba(18, 38, 58, .12), transparent 7%); }
.leaf-b { transform: rotateY(180deg); }
.leaf-b::after { background: linear-gradient(to left, rgba(18, 38, 58, .12), transparent 7%); }
@media (prefers-reduced-motion: reduce) { .leaf, .bk-book { transition: none !important; } }
.pg { --pad: clamp(18px, 3.4vmin, 38px); position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--pad); font-size: clamp(.9375rem, .78rem + .62vmin, 1.1875rem); line-height: 1.4; }
.pg-k { font-family: var(--hand); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--pen-text); margin-bottom: 8px; }
.pg h3 { font-family: var(--serif); font-size: clamp(1.75rem, 1.1rem + 2.6vmin, 3rem); font-weight: 400; line-height: 1.04; margin-bottom: 14px; }
.pg p + p { margin-top: 9px; }
.pg-n { position: absolute; right: var(--pad); bottom: calc(var(--pad) * .6); font-family: var(--mono); font-size: .75rem; color: var(--mut); }
.pg-big { margin-top: auto; font-family: var(--serif); font-weight: 400; font-size: clamp(7rem, 28vmin, 14rem); line-height: .8; color: var(--sky); }
.pg-photo > img { flex: none; width: calc(100% + 2 * var(--pad)); max-width: none; height: 36%; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px; object-fit: cover; }
.pg-photo .pg-big { font-size: clamp(5rem, 16vmin, 8rem); }
.pg-rows { margin-top: auto; padding-bottom: 18px; font-size: .875em; }
.pg-rows > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.pg-rows dt { font-family: var(--mono); font-size: .8125em; color: var(--mut); padding-top: .12em; }
.pg-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.pg-shelves li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9em; line-height: 1.15; }
.pg-shelves .pi { color: var(--pen-text); }
.pg-list { margin-top: 2px; }
.pg-list li { padding: clamp(7px, 1.4vmin, 14px) 0; border-top: 1px solid var(--line); line-height: 1.26; }
.pg-list b { display: block; font-weight: 600; }
.pg-stop h3 { font-size: clamp(3rem, 1.4rem + 7vmin, 5.5rem); line-height: .98; margin-bottom: auto; }
.pg-stop { background: var(--ice); height: 100%; }
.pg-stop p:last-of-type { padding-bottom: 26px; }
.pg-cover { background: var(--ice); gap: 4px; }
.pg-cover .iconfield { margin: clamp(18px, 4vmin, 44px) 0 auto; }
.pg-cover h3 { font-size: clamp(2.75rem, 1.6rem + 5.4vmin, 4.75rem); margin-bottom: 6px; }
.pg-cover small { font-family: var(--mono); font-size: .75rem; }
.pg-back .logo-img { margin-bottom: auto; }
.pg-back h3 { font-size: clamp(1.75rem, 1rem + 3.2vmin, 3rem); }
.iconfield { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.8vmin, 18px) 6px; color: var(--pen-text); opacity: .8; }
.iconfield .pi { width: 100%; height: auto; aspect-ratio: 1; max-width: 42px; stroke-width: 1.2; }
.book3d-cover .iconfield { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.book3d-cover .iconfield .pi { max-width: 26px; }

/* ---- plain pages: privacy, 404 ---- */
.legal { background: var(--paper); padding-block: clamp(32px, 5vw, 72px); }
.legal .wrap { max-width: 780px; }
.legal h1 { font-family: var(--serif); font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); font-weight: 400; line-height: 1.04; }
.legal h2 { margin: 28px 0 6px; font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.legal p, .legal li { margin-top: 8px; text-wrap: pretty; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal .meta { font-family: var(--mono); font-size: .8125rem; color: var(--mut); }
.legal .proof { background: var(--ice-0); padding: 14px 16px; border-left: 3px solid var(--pen); }

/* ---- under 1100 ---- */
@media (max-width: 1100px) {
  .note-b { right: -8px; }
  .cat-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cp-art { grid-row: span 2; }
  .cp-need { border-left: 0; border-top: 1px solid var(--line); }
  .guide-in { grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); }
  .people-in { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); grid-template-areas: "head head" "fig card"; }
  .read { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .read h3:not(:first-child) { margin-top: 0; }
  .read h3 { grid-column: span 1; }
  .read { grid-auto-flow: row dense; }
  .read-list { grid-column: 1; grid-row: 2 / span 3; }
  .read-tools { grid-column: 1; }
  .read h3:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .read .brow { grid-column: 2; align-self: start; }
  .wall-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .bars2 { grid-template-columns: minmax(0, 1fr); }
  .lp-body { grid-template-columns: minmax(0, 1fr); }
  .lp-main img { max-height: 280px; }
}

/* ---- under 760: phone ---- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .top-in { height: 54px; gap: 8px; }
  .brand-lockup { height: 56px; margin-block: -8px; }
  .top-cta { min-height: 36px; padding: 6px 10px; font-size: .8125rem; }
  .motion-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .motion-btn { padding: 4px 9px; justify-content: center; }
  .head { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }

  .hero { background: radial-gradient(120% 60% at 70% 62%, var(--ice) 0, rgba(220, 241, 255, .4) 50%, transparent 80%), var(--paper); padding-bottom: 18px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 18px; padding-bottom: 8px; }
  .hero-kick { margin-bottom: 8px; font-size: .75rem; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .hero-sub { margin-top: 12px; font-size: 1rem; }
  .hero-cta { margin-top: 14px; gap: 8px; }
  .hero-cta .btn-store { flex: 1 1 100%; }
  .hero-cta .btn { flex: 1 1 auto; min-height: 48px; padding-inline: 8px; font-size: .9375rem; white-space: nowrap; }
  .hero-cta .ico { display: none; }
  .hero-route { margin-top: 10px; font-size: .875rem; }
  .hero-frame { width: min(70%, 280px); margin-top: 22px; }
  .hero-photo { aspect-ratio: 1 / 1.06; object-fit: cover; }
  .frame-mat { padding: 8px; }
  .hero-frame figcaption { margin-top: 10px; text-align: left; }
  .note-a { top: -28px; font-size: 1.25rem; }
  .note-b { right: -26%; top: 70%; font-size: 1.25rem; }
  .docket { display: none; }
  .reel { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); margin-top: 12px; }
  .reel::-webkit-scrollbar { display: none; }
  .reel-i { flex: 0 0 41%; scroll-snap-align: center; }
  .reel-i span { font-size: .8125rem; gap: 5px; }

  .short-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rows > div { grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; padding: 9px 0; }
  .rows dt { font-size: 1.375rem; }
  .short-small { font-size: .9375rem; margin-top: 12px; }
  .short-slip { width: min(92%, 340px); margin-inline: auto; }
  .note-slip { top: -10px; right: -10px; }
  .short-slip .rc-qr { display: none; }

  .shelf-head p { font-size: .875rem; }
  .label { min-width: 148px; padding: 6px 14px; }

  .cat-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct { min-height: 48px; font-size: .8125rem; }
  .cp { grid-template-columns: minmax(0, 1fr); }
  .cp-art { grid-row: auto; padding: 8px; }
  .cp-art img { aspect-ratio: 2 / 1; }
  .cp-lines, .cp-need { padding: 12px 14px; }
  .types li { padding: 6px 0; font-size: .9375rem; }
  .types .pi { width: 23px; height: 23px; }
  .ticks li { font-size: .9375rem; padding-bottom: 6px; }

  .lp-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; border: 1px solid var(--pen); border-radius: 4px; overflow: hidden; }
  .lp-switch button { min-height: 44px; font-weight: 500; font-size: .9375rem; }
  .lp-switch [aria-pressed="true"] { background: var(--ice); color: var(--ink); }
  .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-pair[data-show="clean"] .lp-weak, .lp-pair[data-show="weak"] .lp-clean { display: none; }
  html:not(.js) .lp-pair .lp { display: flex; }
  .lp-body { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
  .lp-gal { grid-template-columns: minmax(0, 1fr); }
  .lp-thumbs { grid-auto-flow: column; grid-auto-columns: 46px; grid-row: 2; justify-content: start; }
  .lp-thumbs i, .lp-thumbs button { width: 46px; height: 46px; }
  .lp-main img { max-height: 210px; }
  .lp-crumb { display: none; }
  .cmp, .cmp tbody { display: block; }
  .cmp thead { display: none; }
  .cmp tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp tbody tr + tr { border-top: 1px solid var(--line); }
  .cmp tbody tr + tr > * { border-top: 0; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 7px 10px 2px; }
  .cmp td { width: auto !important; padding: 2px 10px 8px; font-size: .8125rem; line-height: 1.3; }
  .cmp td:last-child { background: transparent; }
  .cmp td::before { content: attr(data-h); display: block; font-family: var(--mono); font-size: .625rem; font-weight: 400; color: var(--mut); margin-bottom: 1px; }

  .vs-controls { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 12px; }
  .sl-top { margin-bottom: 0; font-size: .875rem; }
  .scene { padding: 11px 10px; }
  .scene-who { font-size: .6875rem; line-height: 1.2; min-height: 2.4em; }
  .scene-big { margin-top: 6px; font-size: clamp(1.625rem, 8.4vw, 2.5rem); }
  .scene-cap { font-size: .75rem; }
  .waffle { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; margin-top: 8px; }
  .waffle i:nth-child(n+76) { display: none; }
  .scene-rows { margin-top: 6px; }
  .scene-rows div { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0; font-size: .71875rem; }
  .scene-rows dd { font-size: .9375rem; }
  .vs-sum { padding: 11px; font-size: .9375rem; }
  .bars2 { grid-template-columns: minmax(0, 1fr); }
  .src { font-family: var(--sans); }
  .bcard { padding: 12px; }
  .bcard h4 { margin-bottom: 6px; font-size: 1.0625rem; }
  .brow { grid-template-columns: 6.8em minmax(0, 1fr) 3.6em; gap: 6px; font-size: .875rem; padding: 4px 0; }
  .brow-sm { grid-template-columns: 5.6rem minmax(0, 1fr) 5.2rem; }
  /* the row labels sit over the bars here, so the five stages get the whole width and still line up */
  .brow-axis { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .axis { left: 25%; }
  .stages { margin-left: 0; font-size: .625rem; }

  .road-line { height: 34px; }
  .truck { width: 56px; height: 31px; }
  @keyframes drive { from { translate: 0 0; } to { translate: calc(100cqw - 56px) 0; } }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .steps li { padding-top: 14px; }
  .steps li:nth-child(n+3)::before { display: none; }
  .steps li:nth-child(n+3) { padding-top: 0; }
  .steps b { font-size: 1rem; }
  .steps span { font-size: .875rem; }

  .rules-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ticks-lg li { font-size: .9375rem; padding-block: 6px; }
  .ticks-lg li::before { top: .8em; }
  .ticks-no li::before { top: 1.08em; }
  .who-tabs { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .who-h { grid-row: auto; }
  .wt-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 16px; }
  .wt { flex: none; font-size: .9375rem; }
  .wp { grid-template-columns: minmax(0, 1fr); padding-top: 8px; gap: 6px; }
  .wp-text { font-size: 1rem; }

  .deal { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .deal-facts { display: none; }
  .receipt-po { width: 82%; padding: 16px 14px 14px; font-size: .75rem; }
  .receipt-paid { width: 66%; margin-top: -82px; padding: 14px; font-size: .75rem; }
  .rc-total b { font-size: 1.625rem; }
  .fd-meta { display: none; }
  .folder { padding: 14px 8px 8px; }
  .folder[aria-selected="true"] { padding-top: 20px; }
  .fd-tab { top: -9px; height: 10px; }
  .fd-name { font-size: 1rem; }
  .fp, #fp-2 { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .sheet { padding: 12px; font-size: .875rem; }
  .sheet h3 { font-size: 1.1875rem; margin-bottom: 4px; }
  .terms > div { grid-template-columns: 6.4em minmax(0, 1fr); padding: 4px 0; }
  .terms dt { font-size: 1.0625rem; }
  .month { font-size: .6875rem; }

  .guide-in { grid-template-columns: 116px minmax(0, 1fr); gap: 12px 14px; }
  .guide-copy .h2 { font-size: 1.875rem; }
  .guide-copy p { margin: 6px 0 10px; font-size: .9375rem; }
  .guide-copy .btn { min-height: 44px; }
  .book3d-cover { padding: 10px 9px; }
  .book3d-cover .logo-img { width: 24px; height: 26px; }
  .book3d-cover b { font-size: 1.25rem; }
  .book3d-cover small { display: none; }
  .read { display: block; }
  .read h3:nth-of-type(2), .read .brow { display: none; }
  .read h3:not(:first-child) { margin-top: 10px; }
  .read-list li { font-size: .6875rem; padding: 3px 9px; }

  .people-in { grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "fig head" "card card"; gap: 12px; align-items: start; }
  .portrait { padding: 6px 6px 4px; }
  .portrait b { font-size: .9375rem; }
  .portrait a { font-size: .5625rem; }
  .people-head .h2 { font-size: 1.875rem; }
  .people-lead { margin-top: 6px; font-size: .9375rem; }
  .pc-panel { min-height: 0; }

  .wall-cols { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .wall-cols::-webkit-scrollbar { display: none; }
  .wc { flex: 0 0 78%; scroll-snap-align: center; padding: 10px 12px; }
  .wc p { font-size: 1.0625rem; }
  .wc footer { padding-top: 4px; }

  .faq-in { grid-template-columns: minmax(0, 1fr); }
  .qa summary { padding-block: 10px; font-size: 1rem; }
  .qa summary::after { top: 14px; }

  .apply-in, .apply-work { grid-template-columns: minmax(0, 1fr); }
  .form { gap: 8px; }
  .field { justify-content: flex-end; }
  .field label { font-size: .8125rem; line-height: 1.2; }
  .field input, .field select { min-height: 44px; padding-inline: 9px; }
  .field textarea { height: 68px; }
  .receipt-mail .rc-bars { display: none; }
  .data-note { font-size: .875rem; }

  .foot-legal { font-size: .8125rem; }
}


/* ---- trade sheet ---- */
.ts-head { display: flex; align-items: center; gap: 14px; }
.ts-logo { display: none; }
.ts-head .meta { margin-top: 2px; }
.ts-print { margin-left: auto; }
.ts-print[hidden] { display: none; }
.legal.ts .wrap { max-width: 1040px; }
.ts-lead { max-width: 64ch; }
.ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ts-grid section { background: var(--ice-0); padding: clamp(14px, 2vw, 22px); }
.ts-grid h2 { margin: 0 0 8px; }
.ts-grid .terms > div { grid-template-columns: 7.6em minmax(0, 1fr); }
.legal .ts-grid dd { margin-top: 0; }
.ts-foot { font-size: .875rem; color: var(--mut); margin-top: 12px; }
@media (max-width: 760px) { .ts-grid { grid-template-columns: minmax(0, 1fr); } .ts-print { display: none; } }
@media print {
  @page { size: A4; margin: 13mm; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.32; }
  .top, .foot, .ts-print, .skip { display: none !important; }
  .ts-logo { display: block; }
  .legal { background: #fff; padding: 0; }
  .legal.ts .wrap { max-width: none; padding: 0; }
  .legal h1 { font-size: 26pt; }
  .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18pt; margin-top: 8pt; }
  .ts-grid section { padding: 0; break-inside: avoid; background: #fff; }
  .ts-grid h2 { font-size: 13pt; margin: 8pt 0 3pt; }
  .terms > div { padding: 3pt 0; }
  .terms dt { font-size: 10pt; }
  a { text-decoration: none; }
  .rv { animation: none !important; }
}

/* ---- no script: every tab's content simply shows, and controls that need the script go ---- */
@media (scripting: none) {
  .cp[hidden], .fp[hidden], .wp[hidden] { display: grid; margin-top: 2px; }
  .pc-panel[hidden] { display: block; }
  .cat-tabs, .folder-row, .wt-list, .pc-tabs, .lp-switch, .book-tile, .guide-copy .btn, .motion-btn, .collab figcaption { display: none; }
  .mq-track { animation: none; }
}

/* ---- between the site's own pages, a quiet cross-fade ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

.btn-store { display: inline-flex; align-items: center; gap: 12px; min-height: 66px; padding: 9px 18px 9px 14px; background: var(--white); color: var(--ink); border-radius: 4px; text-decoration: none; box-shadow: 0 0 0 1.5px var(--ink); transition: background-color .18s, translate .2s; }
.btn-store:hover { background: var(--ice); translate: 0 -2px; }
.btn-store .pi { width: 34px; height: 34px; color: var(--pen-text); }
.btn-store b { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.15; }
.btn-store small { display: block; font-size: .8125rem; line-height: 1.2; color: var(--mut); }

/* ---- 7 Nov round: first-screen card, who we buy from, seven jobs, the guide tile, the closing ---- */
.hero-side { position: relative; justify-self: center; width: min(100%, 470px); display: flex; flex-direction: column; align-items: flex-end; }
.hero-side .hero-frame { justify-self: auto; width: min(76%, 340px); margin-right: 8px; display: flex; flex-direction: column; }
.hero-side .hero-frame figcaption { order: -1; margin: 0 0 8px; text-align: left; }
.hero-side .note-b { top: 30%; right: auto; left: -78px; rotate: -4deg; }
.scan { position: relative; z-index: 2; width: 100%; margin-top: -72px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; padding: 15px 16px 14px; color: #fff; background: linear-gradient(150deg, #2470DC, #123E86); border-radius: 7px; box-shadow: 0 30px 54px -26px rgba(14, 54, 122, .72); rotate: -1.1deg; }
.scan-tape { position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; translate: -50% 0; rotate: 2deg; background: rgba(255, 196, 214, .9); box-shadow: 0 2px 5px rgba(18, 38, 58, .18); }
.scan-qr { display: grid; justify-items: center; gap: 4px; padding: 6px 6px 5px; color: var(--ink); background: #fff; border-radius: 4px; transition: translate .2s ease; }
.scan-qr:hover, .scan-qr:focus-visible { translate: 0 -2px; }
.scan-qr img { width: 100%; height: auto; }
.scan-qr small { font-size: .6875rem; line-height: 1.1; font-weight: 600; text-align: center; }
.scan-body { min-width: 0; }
.scan-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.08; }
.scan-form { display: flex; gap: 6px; margin-top: 8px; }
.scan-form input { flex: 1 1 auto; min-width: 0; height: 40px; padding-inline: 10px; font: inherit; font-size: .9375rem; color: var(--ink); background: #fff; border: 2px solid #fff; border-radius: 4px; }
.scan-form input::placeholder { color: var(--mut); }
.scan-form input:focus-visible { outline: 3px solid #FFC4D6; outline-offset: 1px; }
.scan-go { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding-inline: 12px; font-weight: 600; font-size: .9375rem; color: var(--ink); background: #FFD3E0; border-radius: 4px; cursor: pointer; transition: background .2s ease; }
.scan-go:hover, .scan-go:focus-visible { background: #fff; }
.scan-msg { margin-top: 6px; font-size: .8125rem; line-height: 1.28; color: #DCEBFF; min-height: 2.1em; }
.scan-msg a { color: #fff; font-weight: 600; text-decoration: underline; }
.scan-msg.bad { color: #FFD3E0; }
.scan-first { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .24); }
.scan-first > span { margin-right: 2px; font-family: var(--hand); font-weight: 600; font-size: 1.1875rem; line-height: 1; }
.scan-first a { padding: 3px 9px 4px; font-size: .8125rem; line-height: 1.2; font-weight: 500; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; transition: background .2s ease, color .2s ease; }
.scan-first a:hover, .scan-first a:focus-visible { color: var(--ink); background: #fff; }

.who { padding-block: clamp(26px, 3.6vw, 52px) clamp(30px, 4vw, 60px); background: linear-gradient(to bottom, var(--paper), var(--ice) 56px, var(--ice) calc(100% - 56px), var(--paper)); }
.who-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 24px; margin-bottom: clamp(12px, 1.6vw, 22px); }
.who-note { rotate: -1.5deg; }
.who .who-tabs { display: block; margin: 0; padding: 0; background: none; border: 0; }
.who .wt-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border: 0; }
.who .wt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 4px 8px; margin: 0; padding: 14px 15px 16px; text-align: left; color: var(--ink); background: #fff; border: 2px solid var(--pen); border-radius: 7px; box-shadow: 0 14px 26px -22px rgba(14, 54, 122, .7); cursor: pointer; transition: translate .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.who .wt b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4375rem, 1.1rem + .9vw, 1.9375rem); line-height: 1.04; }
.who .wt small { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.26; color: var(--ink-2); }
.who .wt .ico { color: var(--pen-text); transition: translate .2s ease; }
.who .wt:hover, .who .wt:focus-visible { translate: 0 -3px; box-shadow: 0 20px 30px -22px rgba(14, 54, 122, .85); }
.who .wt:hover .ico { translate: 3px 0; }
.who .wt[aria-selected="true"] { color: #fff; background: var(--pen-text); border-color: var(--pen-text); }
.who .wt[aria-selected="true"] small { color: #E6F1FF; }
.who .wt[aria-selected="true"] .ico { color: #FFD3E0; rotate: 90deg; }
.who .wt[aria-selected="true"]::after { content: ""; position: absolute; left: 32px; bottom: -10px; width: 18px; height: 18px; background: var(--pen-text); rotate: 45deg; }
.who .wp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: center; gap: 14px clamp(18px, 3vw, 44px); margin-top: 10px; padding: 20px clamp(16px, 2vw, 26px); background: #fff; border: 1px solid var(--line-2); border-radius: 7px; }
.who .wp[hidden] { display: none; }
.who .wp-text { font-size: 1.0625rem; line-height: 1.38; text-wrap: pretty; }
.who .wp-list { margin: 0; }

.jobs { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: start; }
.jobs-lead { margin-top: 8px; max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.todo { position: relative; margin-top: 16px; padding: 18px 20px 18px 44px; background: repeating-linear-gradient(to bottom, #fff 0 33px, #DCEBF7 33px 34px); border-left: 2px solid #FFC4D6; box-shadow: var(--lift); rotate: -.7deg; }
.todo li { position: relative; width: fit-content; max-width: 100%; font-family: var(--hand); font-weight: 600; font-size: 1.4375rem; line-height: 34px; color: var(--ink); }
.todo li:nth-child(1) { --i: 0; }
.todo li:nth-child(2) { --i: 1; }
.todo li:nth-child(3) { --i: 2; }
.todo li:nth-child(4) { --i: 3; }
.todo li:nth-child(5) { --i: 4; }
.todo li:nth-child(6) { --i: 5; }
.todo li:nth-child(7) { --i: 6; }
.todo li.off { color: var(--mut); }
.todo li.off::after { content: ""; position: absolute; left: -4px; right: -6px; top: 54%; height: 2.5px; background: var(--pen); border-radius: 2px; rotate: -.6deg; transform-origin: left center; transition: transform .5s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js .todo:not(.in) li.off::after { transform: scaleX(0); }
.todo li.yours { color: var(--pen-text); }
.todo li.yours::before { content: ""; position: absolute; left: -24px; top: 11px; width: 13px; height: 13px; border: 2.5px solid #F58FB0; border-radius: 50%; }
.todo-note { position: absolute; right: 8px; bottom: 16px; rotate: -3deg; color: #C7527C; }
.jobs-side h3 { font-family: var(--hand); font-weight: 600; font-size: 1.875rem; line-height: 1; color: var(--pen-text); padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.jobs-side h3 + ul { margin-bottom: clamp(16px, 2vw, 26px); }

.route-deal { margin-top: clamp(24px, 3.4vw, 50px); }

.gtile { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(26px, 4vw, 54px); width: 100%; padding: clamp(26px, 3.4vw, 42px) clamp(22px, 4vw, 52px); color: #fff; cursor: pointer; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: radial-gradient(70% 150% at 0% 50%, rgba(47, 123, 234, .62) 0%, rgba(30, 102, 208, .36) 32%, transparent 70%), linear-gradient(135deg, #16273F, #0B1523); box-shadow: 0 30px 60px -34px rgba(12, 22, 40, .72); transition: translate .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease; }
.gtile:hover, .gtile:focus-visible { translate: 0 -4px; box-shadow: 0 40px 70px -34px rgba(12, 22, 40, .8); }
.gtile:focus-visible { outline: 2px solid #AFDAF7; outline-offset: 4px; }
.gtile-book { position: relative; display: block; width: clamp(150px, 18vw, 210px); aspect-ratio: 1800 / 2546; perspective: 1100px; transform: rotateY(-14deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.gtile:hover .gtile-book { transform: rotateY(-4deg) rotateX(2deg) scale(1.03); }
.gtile-inside { position: absolute; inset: 0; border-radius: 3px 6px 6px 3px; background: repeating-linear-gradient(to bottom, #fff 0 13px, #DCEBF7 13px 14px); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7); }
.gtile-edges { position: absolute; top: 3px; bottom: 3px; right: -6px; width: 8px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(90deg, #F4F8FB 0 1px, #CFDBE6 1px 2px); }
.gtile-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; padding: 1rem; border-radius: 3px 6px 6px 3px; background: radial-gradient(90% 60% at 50% 40%, rgba(175, 218, 247, .2), transparent 70%), linear-gradient(165deg, #1B2C45, #0A1320); box-shadow: inset 4px 0 6px -2px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); transform-origin: left center; backface-visibility: hidden; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.gtile:hover .gtile-cover, .gtile:focus-visible .gtile-cover { transform: rotateY(-38deg); }
.gtile-cover img { width: 86%; height: auto; max-width: none; }
.gtile-cover small { font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: #AFDAF7; }
.gtile-text { display: grid; gap: .5rem; justify-items: start; min-width: 0; }
.gtile-eye { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #AFDAF7; }
.gtile-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3rem); line-height: 1.05; }
.gtile-lead { color: #B9C8D8; max-width: 44ch; line-height: 1.5; }
.gtile-cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .85rem 1.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); border-radius: 100px; background: linear-gradient(180deg, #fff, #BFE3FF); box-shadow: 0 14px 30px -14px rgba(175, 218, 247, .75), inset 0 1px rgba(255, 255, 255, .6); transition: translate .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease; }
.gtile-cta span { display: inline-block; transition: translate .5s cubic-bezier(.16, 1, .3, 1); }
.gtile:hover .gtile-cta { translate: 0 -2px; box-shadow: 0 18px 36px -14px rgba(175, 218, 247, .95), inset 0 1px rgba(255, 255, 255, .6); }
.gtile:hover .gtile-cta span { translate: 6px 0; }
.guide .read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 16px; }
.guide .read h3 { margin: 0; }
.guide .read-list { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; }
.guide .read-tools { margin: 0; }

/* the closing: clouds part on a short scroll, a paper plane leaves its pen line, and the last screen has things to use */

@media (max-width: 1120px) {
  .cat-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .who .wp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .who .wp .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 1121px) { .cat-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); } .ct { padding-right: 24px; } }
@media (max-width: 860px) {
  .hero-side { align-items: stretch; width: 100%; max-width: 470px; }
  .hero-side .hero-frame { width: 72%; align-self: center; margin-right: 0; }
  .hero-side .note-b { left: auto; right: -14%; top: 12%; rotate: 4deg; }
  .jobs { grid-template-columns: minmax(0, 1fr); }
  .who .wt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .who .wt { padding: 11px 11px 12px; }
  .who .wt small { font-size: .875rem; }
  .who .wp { grid-template-columns: minmax(0, 1fr); padding: 15px; }
  .gtile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .gtile-text { justify-items: center; }
}
@media (max-width: 440px) {
  .scan { grid-template-columns: 78px minmax(0, 1fr); padding: 13px 12px 12px; margin-top: -46px; }
  .scan-qr small { font-size: .625rem; }
  .scan-h { font-size: 1.125rem; }
}
@media print { .scan { display: none; } }
@media (max-width: 1400px) { .nav { gap: 15px; } }
@media (max-width: 1300px) { .top-label { display: none; } }
@media (max-width: 760px) { .cat-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 8 Nov round (Bulut): a purchase order on the first screen, red pen on the weak page, a crest at the close ---- */
.po { position: relative; width: min(90%, 392px); margin-right: 6px; display: flex; flex-direction: column; }
.po figcaption { margin: 0 0 8px; font-family: var(--mono); font-size: .6875rem; line-height: 1.35; color: var(--mut); }
.po-sheet { position: relative; padding: 18px 20px 40px; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-top: 5px solid var(--pen-text); box-shadow: var(--lift); rotate: -1.4deg; }
.po-sheet::after { content: ""; position: absolute; right: -1px; top: -5px; width: 30px; height: 30px; background: linear-gradient(225deg, var(--paper) 50%, #E3EEF7 50%); box-shadow: -2px 2px 4px -2px rgba(18, 38, 58, .25); }
.po-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.po-kind { font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.po-ref { margin-right: 22px; font-family: var(--mono); font-size: .75rem; color: var(--mut); }
.po-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.po-who dt, .po-terms dt, .po-lines th { font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.po-who dd { font-size: .875rem; line-height: 1.25; }
.po-lines { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: .875rem; }
.po-lines th { text-align: left; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.po-lines th:last-child, .po-lines td:last-child { text-align: right; font-family: var(--mono); }
.po-lines td { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.po-terms { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 12px; }
.po-big { display: flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid var(--line-2); }
.po-big b { font-family: var(--serif); font-weight: 400; font-size: 3.75rem; line-height: .8; color: var(--pen-text); }
.po-big span { font-size: .8125rem; line-height: 1.2; color: var(--ink-2); }
.po-terms dl { display: grid; gap: 5px; }
.po-terms dd { font-size: .875rem; line-height: 1.2; }
.po-steps { display: flex; gap: 6px; margin-top: 14px; padding: 0; list-style: none; counter-reset: po; }
.po-steps li { counter-increment: po; flex: 1 1 0; display: flex; align-items: center; gap: 6px; font-size: .75rem; line-height: 1.15; color: var(--ink-2); }
.po-steps li::before { content: counter(po); flex: none; display: grid; place-items: center; width: 20px; height: 20px; font-family: var(--mono); font-size: .6875rem; border: 1px solid var(--pen-text); border-radius: 50%; color: var(--pen-text); }
.po-steps li:nth-child(-n+2)::before { content: "\2713"; color: #fff; background: var(--pen-text); }
.po-stamp { position: absolute; right: 22px; top: 118px; padding: 2px 14px 4px; font-family: var(--serif); font-size: 2.5rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--pen-text); border: 3px double var(--pen-text); border-radius: 6px; rotate: -13deg; opacity: .86; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 75%, #000 92%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 75%, #000 92%); }
.hero-side .po + .scan { margin-top: -22px; }
@media (prefers-reduced-motion: no-preference) {
  .po-sheet { animation: po-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .po-steps li:nth-child(-n+2)::before { animation: po-tick .35s ease-out both; }
  .po-steps li:nth-child(1)::before { animation-delay: .9s; }
  .po-steps li:nth-child(2)::before { animation-delay: 1.3s; }
  .po-stamp { animation: po-stamp .42s cubic-bezier(.3, 1.5, .5, 1) 1.75s both; }
  .motion-paused .po-sheet, .motion-paused .po-steps li::before, .motion-paused .po-stamp { animation: none; }
}
@keyframes po-in { from { opacity: 0; translate: 0 18px; rotate: 1deg; } }
@keyframes po-tick { from { color: var(--pen-text); background: transparent; scale: .6; } }
@keyframes po-stamp { 0% { opacity: 0; scale: 2.2; rotate: -4deg; } 70% { opacity: .9; scale: .94; } 100% { opacity: .86; scale: 1; rotate: -13deg; } }

/* the weak page, marked up in red pen the way a buyer reads it */
.lp-weak .pen-red .pen-svg { stroke: #C8372D; stroke-width: 2; }
.rn { display: block; width: fit-content; margin: 2px 0 4px; font-size: 1.25rem; color: #C8372D; rotate: -2deg; }
.rn-photo { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 0 8px 2px; background: rgba(255, 255, 255, .9); rotate: -4deg; }
.rn-in { display: inline-block; margin: 0 0 0 4px; font-size: 1.125rem; rotate: -6deg; }
.lp-thumbs img[src$=".svg"] { object-fit: contain; background: #fff; }

/* the closing: a warm sun behind the name, a hairline crest, a keyline round the logo */
@media (max-width: 760px) {
  .po { width: min(94%, 360px); margin: 18px auto 0; }
  .po-sheet { padding: 14px 14px 40px; }
  .po-kind { font-size: 1.25rem; }
  .po-big b { font-size: 3rem; }
  .po-stamp { font-size: 2rem; right: 14px; top: 104px; }
  .rn { font-size: 1.125rem; }
  .po-steps li { font-size: .6875rem; }
}

/* ---- Round 2 (Bulut 8 Nov 13:00): darker small text, a few balanced black details, the moving lines in more sections,
   earlier reveals, red marks that leave the words readable, a clear Tools row, a short bio, and a new closing. ---- */
:root { --ink-2: #1F3247; --mut: #2E4257; }
.nav a { color: var(--ink); font-weight: 500; }
.lab, .docket dt, .hero-kick, .lp-tag, .reel-note, .read-list li, .po-who dt, .po-terms dt, .po-lines th { font-weight: 500; color: var(--ink); }
.head p, .hero-sub, .people-lead { color: var(--ink-2); }

/* the moving contour lines of the first screen, quieter, behind more sections */
.who, .buy, .rules, .people, .apply { position: relative; isolation: isolate; }

/* text and pictures arrive sooner and never start invisible */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .rv { animation-name: rv-soon; animation-range: entry 0px entry 48px; }
  }
}
@keyframes rv-soon { from { opacity: .3; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* black details: a short bar over each section heading, the open shelf, the docket rules, the founder card */
.h2::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: clamp(10px, 1.2vw, 16px); background: var(--ink); }
.ct[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ct[aria-selected="true"] .pi { color: var(--sky); }
.ct[aria-selected="true"]::after { background: var(--white); border-color: var(--white); }
.ct[aria-selected="true"]::before { border-color: var(--ink); }
.docket { border-block: 1.5px solid var(--ink); }
.cmp { border-top: 3px solid var(--ink); }
.pcard { border: 1.5px solid var(--ink); }

/* red pen marks on the weak page: padded, thinner and behind the letters, so every word stays readable */
.lp-weak .pen-red[data-pen="oval"] { isolation: isolate; padding: 3px 9px; margin-inline: -9px; }
.lp-weak .pen-red .pen-svg { z-index: -1; stroke-width: 1.6; opacity: .92; }

/* Tools: a small black label and the tool names as live chips */
.read-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; }
.read-tools b { padding: 4px 9px 3px; background: var(--ink); color: var(--white); font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-radius: 3px; }
.read-tools span { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; background: var(--white); border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; }
.read-tools span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pen); box-shadow: 0 0 0 3px rgba(47, 123, 234, .18); animation: pulse 2.6s ease-in-out infinite; }
.motion-paused .read-tools span::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .read-tools span::before { animation: none; } }

/* the founder's short bio */
.pc-panel .pc-bio { font-weight: 600; color: var(--ink); }
.pc-panel p + p { margin-top: 8px; }
.pc-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pc-points li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 3px; font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); }
.pc-points li::before { content: ""; width: 5px; height: 9px; margin-top: -3px; border: solid var(--pen-text); border-width: 0 2px 2px 0; rotate: 45deg; }

/* closing: the original logo on a framed card, the last word beside it, three ways to reach us below */
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: #000; }
.cinema { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(52px, 7vw, 112px) clamp(40px, 5vw, 76px); border-top: 1.5px solid var(--ink);
  background: radial-gradient(52% 70% at 24% 42%, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, 0) 72%), radial-gradient(40% 60% at 92% 100%, rgba(47, 123, 234, .2) 0, rgba(47, 123, 234, 0) 70%), linear-gradient(165deg, var(--ice-0) 0%, var(--ice) 46%, #BCE0F9 100%); }
.cin-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.cin-brand { position: relative; padding: clamp(24px, 3.2vw, 44px) clamp(22px, 3vw, 44px) clamp(20px, 2.6vw, 34px); background: var(--white); border: 1.5px solid var(--ink); box-shadow: 12px 12px 0 -1.5px var(--white), 12px 12px 0 0 var(--ink), 0 30px 60px -34px rgba(14, 54, 122, .45); }
.cin-logo { display: block; width: 100%; height: auto; }
.cin-est, .cin-tag { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.cin-est::before, .cin-est::after, .cin-tag::before, .cin-tag::after { content: ""; flex: 1 1 0; max-width: 90px; height: 1px; background: var(--ink); }
.cin-est { margin-bottom: clamp(8px, 1.2vw, 16px); }
.cin-tag { margin-top: clamp(8px, 1.2vw, 16px); }
.cin-thanks { width: fit-content; font-family: var(--hand); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.375rem); line-height: 1.1; color: var(--pen-text); rotate: -2deg; }
.cin-copy h2 { margin-top: 6px; font-family: var(--serif); font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem); font-weight: 400; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.cin-sub { max-width: 44ch; margin-top: 14px; font-size: 1.0625rem; color: var(--ink-2); text-wrap: pretty; }
.cin-cta { margin-top: 22px; }
.cin-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(34px, 4.6vw, 64px); }
.cin-card { display: block; min-width: 0; padding: 14px 16px 15px; font-size: .9375rem; line-height: 1.38; color: var(--ink); background: rgba(255, 255, 255, .94); border-top: 3px solid var(--ink); box-shadow: 0 16px 32px -24px rgba(18, 38, 58, .5); text-decoration: none; }
.cin-card .lab { margin-bottom: 4px; }
.cin-card a:not(.cin-card) { color: var(--pen-text); text-decoration: underline; text-underline-offset: 2px; }
.cin-card-qr { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; transition: translate .2s ease; }
.cin-card-qr:hover, .cin-card-qr:focus-visible { translate: 0 -3px; }
.cin-card-qr img { width: 76px; height: 76px; }
.cin-card-qr b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .cin-brand { animation: cin-from-l linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .cin-copy { animation: cin-from-r linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .cin-thanks { animation: cin-write linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
    .cin-card { animation: rv-soon linear both; animation-timeline: view(); animation-range: entry 0px entry 60px; }
  }
}
@keyframes cin-from-l { from { opacity: .25; translate: -48px 22px; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cin-from-r { from { opacity: .25; translate: 48px 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes cin-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@media (max-width: 760px) {
  .cin-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cin-brand { box-shadow: 7px 7px 0 -1.5px var(--white), 7px 7px 0 0 var(--ink); margin-right: 7px; }
  .cin-est, .cin-tag { font-size: .625rem; letter-spacing: .16em; gap: 8px; }
  .cin-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cin-card-qr { grid-template-columns: 60px minmax(0, 1fr); }
  .cin-card-qr img { width: 60px; height: 60px; }
  .h2::before { width: 34px; height: 3px; }
}
@media print { .contour { display: none; } }

/* ---- Round 3 (Bulut 8 Nov 13:20): the flat light-blue bands looked plain, above all on a wide screen. Sections now sit on
   white or on a faint cool grey with a fine dot grid, split by hairlines; blue stays for buttons, links and pen marks.
   Above 1600px the whole page grows with the screen instead of leaving empty sides. ---- */
:root { --wash: #F4F6F9; --dots: rgba(18, 38, 58, .09); --rule: rgba(18, 38, 58, .12);
        --ice-0: #F4F6F9; --ice-1: #ECEFF3; --ice: #E7EBF0; }   /* 8 Nov 14:15: the pale-blue card and footer tints follow the bands to neutral grey */
.who, .short, .shelf, .listing, .route, .paper, .guide, .faq { background: var(--white); }
.who, .shelf, .listing, .paper, .faq {
  background-color: var(--wash);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
main > section + section, main + .foot { border-top: 1px solid var(--rule); }
.shelf { border-bottom: 1px solid var(--rule); }
.listing, .route { position: relative; isolation: isolate; }
.who-tabs, .sheet, .vs-sum { background: var(--white); }
.who-tabs { border-color: var(--rule); box-shadow: 0 18px 40px -30px rgba(18, 38, 58, .4); }
.cp-need { background: var(--wash); }
.folder { background: var(--wash); border: 1px solid var(--rule); border-bottom: 0; }
.folder:hover { background: var(--white); }
.folder[aria-selected="true"] { background: var(--white); box-shadow: inset 0 3px 0 var(--ink); }
.lp, .cmp, .pcard { box-shadow: 0 22px 44px -32px rgba(18, 38, 58, .45); }
.receipt-mail { background: var(--white); }

/* a wide screen: from 1600px the root size follows the screen (16px at 1600, up to 30px), so the text, the column and
   everything sized in rem grow together */
@media (min-width: 1600px) {
  html { font-size: min(1vw, 30px); }
  .wrap { width: min(100%, 82.5rem); }
  .hero-side { width: min(100%, 29.5rem); }
  .ct { min-height: 3.4rem; }
  .receipt-po { width: min(68%, 24.4rem); }
  .receipt-paid { width: min(54%, 19.4rem); margin-top: -6.5rem; }
}
.cp-art img { background: #E9EDF2; }   /* a calm grey while a shelf photo arrives, never an empty white box */

/* ---- Round 4 (Bulut 8 Nov 14:3x): "too white now, the blue's liveliness is gone; find the balance; if blue, add patterns so the
   page does not look plain; small delightful details; a nice sense of transition". White bands alternate with a blueprint-blue
   band (fine grid + a soft light), one deep-blue band carries what we commit to, and its slanted edges make the transition. ---- */
:root { --ice-0: #EEF6FD; --ice-1: #E2EFFB; --ice: #D5E9FA;
        --deep: #0B2340; --deep-2: #12406E; --spark: #5BB8FF;
        --grid-a: rgba(28, 111, 214, .075); --grid-b: rgba(28, 111, 214, .035); }
.who, .paper, .sec-ice-r4 {
  background-color: #EEF6FD;
  background-image:
    radial-gradient(60% 90% at 88% 0%, rgba(91, 184, 255, .22), transparent 70%),
    linear-gradient(var(--grid-a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-a) 1px, transparent 1px),
    linear-gradient(var(--grid-b) 1px, transparent 1px), linear-gradient(90deg, var(--grid-b) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.listing, .faq {
  background-color: #F3F8FE;
  background-image: radial-gradient(rgba(28, 111, 214, .16) 1px, transparent 1.5px), radial-gradient(50% 80% at 8% 100%, rgba(91, 184, 255, .16), transparent 70%);
  background-size: 22px 22px, 100% 100%;
}
.shelf { background: var(--white); }
.who-tabs { box-shadow: 0 22px 46px -30px rgba(18, 64, 110, .5); }

/* the deep band */
.proof { position: relative; isolation: isolate; color: #E9F2FC; padding-block: calc(clamp(64px, 8vw, 120px) + 3vw);
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  background:
    radial-gradient(70% 90% at 92% 0%, rgba(91, 184, 255, .38), transparent 62%),
    radial-gradient(55% 75% at 0% 100%, rgba(28, 111, 214, .5), transparent 64%),
    linear-gradient(160deg, var(--deep), var(--deep-2) 58%, #0E2C4F); }
.proof::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 15px); }
.proof::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%) 0 0 / 250% 100% no-repeat;
  animation: proof-shine 9s ease-in-out infinite; }
@keyframes proof-shine { 0%, 15% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.proof .h2 { color: #fff; }
.proof .h2::before { background: var(--spark); }
.proof-head { display: grid; gap: 14px; max-width: 46rem; }
.proof-k { margin: 0; font-family: var(--mono, monospace); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.proof-lede { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: #C9DBEF; text-wrap: pretty; }
.proof-grid { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pf { position: relative; overflow: hidden; padding: clamp(20px, 2vw, 28px); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .14); transition: translate .25s ease, border-color .25s ease, background-color .25s ease; }
.pf::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--spark), #9AD5FF);
  transition: width .45s ease; }
.pf:hover { translate: 0 -4px; border-color: rgba(91, 184, 255, .6); }
.pf:hover::after { width: 100%; }
.pf-n { display: inline-block; font-family: var(--mono, monospace); font-size: .875rem; color: var(--spark); letter-spacing: .08em;
  padding: 3px 8px; border: 1px solid rgba(91, 184, 255, .45); border-radius: 999px; }
.pf h3 { margin: 14px 0 8px; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); line-height: 1.2; color: #fff; font-weight: 600; }
.pf p { margin: 0; color: #C9DBEF; line-height: 1.5; }
.proof-offer { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: clamp(22px, 2.6vw, 36px) clamp(22px, 3vw, 44px); border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6); border-left: 6px solid transparent;
  border-image: linear-gradient(180deg, var(--spark), #1C6FD6) 1; }
.po-k { margin: 0 0 6px; font-family: var(--mono, monospace); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #1C6FD6; }
.po-text h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.po-text p { margin: 0; color: var(--ink-2, #1F3247); max-width: 44rem; }
.po-cta { white-space: nowrap; }
@media (max-width: 760px) {
  .proof { clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%); padding-block: 72px; }
  .proof-offer { grid-template-columns: 1fr; }
  .po-cta { white-space: normal; }
}

/* small details */
.ct .pi { transition: translate .2s ease, rotate .2s ease; }
.ct:hover .pi { translate: 0 -2px; rotate: -8deg; }
.cp-art { overflow: hidden; }
.cp-art img { transition: scale .6s ease; }
.cp-art:hover img { scale: 1.04; }
.btn { transition: background-color .18s, color .18s, border-color .18s, translate .18s, box-shadow .18s; }
.btn:hover { translate: 0 -1px; box-shadow: 0 10px 22px -14px rgba(28, 111, 214, .7); }
@supports (animation-timeline: view()) {
  .h2::before { transform-origin: left; animation: bar-grow linear both; animation-timeline: view(); animation-range: entry 0px entry 140px; }
  @keyframes bar-grow { from { scale: .1 1; } to { scale: 1 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .proof::after, .h2::before { animation: none !important; }
  .pf, .pf::after, .cp-art img, .btn, .ct .pi { transition: none !important; }
}
.motion-paused .proof::after { animation-play-state: paused; }

/* ---- Round 6 (Bulut 8 Nov 16:1x): "the earlier distance was better after all; keep 'One speaker, two product pages' and the
   How we work booklet at the smaller size; scroll down a little faster". The page is back at 100%; on a laptop or desktop those
   two sections (and the open booklet) are drawn at 80%, their column widened by 1/.8 so it lines up with the rest, and the space
   between sections is a little tighter so each turn of the wheel covers more of the page. Phones and tablets keep their size. ---- */
@media (min-width: 1180px) {
  :root { --sec: clamp(26px, 3vw, 46px); }
  .listing, .guide { zoom: .8; }
  .listing .wrap, .guide .wrap { width: min(100%, 1650px); }
  .bk { zoom: .8; width: 125vw; height: 125dvh; max-width: 125vw; max-height: 125dvh; }
}
@media (min-width: 1600px) { .listing .wrap, .guide .wrap { width: min(100%, 103.125rem); } }
.motion-btn { white-space: nowrap; }
@media (max-width: 1599px) { .top-label { display: none !important; } }   /* 1536px laptop: the nav, the pause button and the CTA need the room */

/* ---- Round 5 details (Bulut 8 Nov 15:2x: "biraz daha güzel detaylar"): a thin progress line under the header as the page
   scrolls, a soft light that follows the pointer over each commitment card, and a live "coming soon" chip on the brand shelf. ---- */
.soon { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 4px 12px; vertical-align: .2em;
        font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #12406E;
        border: 1px solid rgba(28, 111, 214, .35); border-radius: 999px;
        background: linear-gradient(100deg, #EEF6FD 30%, #FFFFFF 50%, #EEF6FD 70%) 0 0 / 250% 100%; animation: soon-sheen 3.6s ease-in-out infinite; }
.soon i { width: 7px; height: 7px; border-radius: 50%; background: #1C6FD6; box-shadow: 0 0 0 0 rgba(28, 111, 214, .5); animation: soon-pulse 1.8s ease-out infinite; }
@keyframes soon-sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
@keyframes soon-pulse { 0% { box-shadow: 0 0 0 0 rgba(28, 111, 214, .45); } 80%, 100% { box-shadow: 0 0 0 8px rgba(28, 111, 214, 0); } }
.pf::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
              background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 184, 255, .2), transparent 65%); }
.pf:hover::before { opacity: 1; }
@supports (animation-timeline: scroll()) {
  body::after { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; pointer-events: none; transform-origin: 0 50%;
                background: linear-gradient(90deg, #1C6FD6, #5BB8FF 70%, #9AD5FF); animation: read-line linear both; animation-timeline: scroll(root); }
  @keyframes read-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.about-portrait { margin: 0; max-width: 300px; border-radius: 12px; overflow: hidden; rotate: 1.4deg; box-shadow: 0 24px 48px -30px rgba(18, 38, 58, .55); transition: rotate .35s ease; }
.about-portrait:hover { rotate: 0deg; }
.about-portrait img { display: block; width: 100%; height: auto; }
.motion-paused .soon, .motion-paused .soon i, .motion-paused body::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .soon, .soon i { animation: none; }
  body::after { display: none; }
  .pf::before { display: none; }
  .about-portrait { rotate: 0deg; transition: none; }
}