/* peekamoney.app · what every page of the owner's design shares. The pages
   themselves carry the design's inline styles; this file holds the fonts, the
   keyframes and hover rules it declares in <helmet>, and the narrow-screen
   rules the design does not have. */

/* The design names "Google Sans" and "Roboto Mono". Both are served from this
   site (SIL OFL): Google Sans Flex stands in for Google Sans. */
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSansFlex-Variable-latin.woff2?v=95c78cb1ea") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSansFlex-Variable-latin-ext.woff2?v=37f5ed9c94") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; src: url("/assets/fonts/RobotoMono-Variable-latin.woff2?v=877722deef") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; src: url("/assets/fonts/RobotoMono-Variable-latin-ext.woff2?v=8810246488") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Variable-latin.woff2?v=87c506d88b") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Variable-latin-ext.woff2?v=0bb2ef2eda") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html { background: #EFE7DD; }
body { margin: 0; background: #EFE7DD; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } a:hover { color: #C04D21; }
input, button { font-family: inherit; }
::selection { background: #D7582B; color: #FFFFFF; }
:focus-visible { outline: 2px solid #D7582B; outline-offset: 3px; border-radius: 4px; }
#try textarea::placeholder, #try input::placeholder { color: rgba(255, 255, 255, .55); }

@keyframes lineUp { 0% { transform: translateY(105%); } 100% { transform: none; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes fieldIn { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .55; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes growX { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes peek { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-8px) rotate(-2deg); } 70% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dots { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes swapIn { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.s-lang-opt:hover { background: #F6DDD0 !important; }
/* The header's Blog link (tools/dc-fixes.json) hovers like the design's own links. */
.s-blog:hover { color: #D7582B !important; }

/* The app's pairing (the owner, 2026-09-28): Space Grotesk for headlines,
   figures and the wordmark, Google Sans for everything that is read. */
h1, h2, h3, [style*="font-weight:700"], [style*="font-weight: 700"], .doc-main h1, .doc-main h2 { font-family: "Space Grotesk", "Google Sans", ui-sans-serif, system-ui, sans-serif; }
/* Space Grotesk's descenders and capitals need a full line: stacked lines never touch. */
h1, h2, h3, .doc-main h1, .doc-main h2 { line-height: 1 !important; }
/* Space Grotesk sets wider than Google Sans: the home headline keeps its four lines. */
#top h1 { font-size: clamp(28px, min(11cqw, 9.6vh), 116px) !important; }

/* The capture headline's mask: room for descenders at every size. */
.s-cap-mask { padding-bottom: .28em !important; }

/* The close and the footer: one modest size on every page (the owner, 2026-09-28:
   "too big … decent and standardised across the pages"). */
#get > div { padding-top: clamp(56px, 8vh, 88px) !important; align-items: center !important; gap: 12px 40px !important; }
#get > div > div:first-child { padding-bottom: 48px !important; gap: 20px !important; flex-basis: 480px !important; }
#get h2 { font-size: clamp(40px, 4.6vw, 72px) !important; }
#get h2 > span { display: inline-block !important; margin-right: .22em; }
#get > div > div:last-child { flex: 0 1 220px !important; min-width: 140px !important; align-self: flex-end; }
#get > div > div:last-child img { width: clamp(140px, 13vw, 210px) !important; margin-bottom: -14px !important; }
footer > div { gap: 16px !important; padding-bottom: 26px !important; }
footer > div > div:first-child { padding-top: 26px !important; padding-bottom: 18px !important; align-items: center !important; }
.s-foot-mark { font-size: clamp(30px, 2.6vw, 40px) !important; line-height: 1 !important; }
footer nav { font-size: clamp(12px, .82vw, 13.5px) !important; gap: 10px 24px !important; }
.s-foot-tag { font-size: 14px !important; }

/* The language menu: a globe and the language's own name, on a card. */
.s-lang > button { display: inline-flex; align-items: center; gap: 7px; font-family: 'Google Sans', ui-sans-serif, system-ui, sans-serif !important; font-size: 14px !important; letter-spacing: 0 !important; font-weight: 500; opacity: 1 !important;
  padding: 6px 12px 6px 10px !important; border-radius: 100px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important; background: color-mix(in srgb, currentColor 5%, transparent) !important; }
.s-lang > button:hover { border-color: color-mix(in srgb, currentColor 45%, transparent) !important; }
.s-lang .s-code { display: none; }

/* ── Narrow screens (the design is drawn for desktop only) ──────────── */
@media (max-width: 760px) {
  .s-nav { gap: 16px !important; }
  .s-nav > a:not(:last-child) { display: none !important; }
  .s-lang .s-name { display: none; }
  .s-lang .s-code { display: inline; }
}
/* The four ways in, as tabs: phones only (home.jsx, capVals). */
/* The numbered tabs (home.jsx, tabBar): phones only. */
.s-tabs { display: none; }

/* ── Phones (the owner, 2026-09-29: "things are a bit squeezed and not coherent …
   let us rework that"). One 20px gutter, one type scale, 72px between sections,
   44px tap targets, and each pinned section inside one screen. Desktop and
   tablet widths never see these rules. ─────────────────────────────────── */
@media (max-width: 700px) {
  /* The gutter */
  .s-wrap, .vs-wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* The type scale: section headings 38, panel headings 26, body 16–17 */
  #try h2, #faq h2, #get h2, .vs-title, .s-hz-intro h2 { font-size: 38px !important; line-height: 1 !important; }
  .s-hz-panel h3 { font-size: 26px !important; max-width: none !important; }

  /* Tap targets: the hit area grows, the drawing does not */
  .s-head a, .s-lang > button, .s-webapp, footer nav a, #faq > div > a { position: relative; }
  .s-head a::after, .s-lang > button::after, .s-webapp::after { content: ''; position: absolute; inset: -6px -4px; }
  footer nav { row-gap: 22px !important; }
  footer nav a::after, #faq > div > a::after { content: ''; position: absolute; inset: -11px -6px; }
  /* Links that stand on their own line (not inside a sentence) */
  .s-wrap a:not(.s-head a):not(p a):not(li a) { position: relative; }
  .s-wrap a:not(.s-head a):not(p a):not(li a):not(.s-webapp):not(.s-quick a)::after { content: ''; position: absolute; inset: -11px -4px; }
  .s-quick { gap: 0 !important; }
  .s-quick > a { padding: 9px 0; }
  .s-wrap input { min-height: 44px; }

  /* Header: logo, language, Get the app, on one row */
  .s-head > .s-wrap { gap: 12px !important; }
  .s-nav { gap: 10px !important; }

  /* Hero: the headline, then the phone and Peeka, centred, with room */
  .s-hero-row { flex-direction: column !important; align-items: stretch !important; gap: 36px !important; padding: 28px 0 24px !important; }
  .s-hero-text { flex: 0 0 auto !important; max-width: none !important; gap: 22px !important; }
  #top h1 { font-size: clamp(28px, 12.4cqw, 128px) !important; }
  #top > .s-wrap { min-height: 0 !important; padding-bottom: 24px !important; }
  #top [data-reveal="200"] { width: min(100%, 360px) !important; height: min(100vw, 420px) !important; margin: 0 auto; }

  /* Why tracking stops: the three lines and the close, read in steps */
  /* Pinned under the header like How it works, so the gap before it is the site's rhythm */
  /* Why tracking stops: centred in the pinned screen, under the header */
  .s-why > div { height: 100svh !important; align-items: center !important; }
  .s-why-inner { padding-top: 62px !important; gap: 24px !important; }

  /* How it works: tabs over the words over the phone, in one screen */
  .s-cap-sticky { height: 100svh !important; }
  .s-cap-col { border-right: 0 !important; pointer-events: none; }
  .s-cap-col > div { display: none !important; }
  .s-cap-eyebrow { display: none !important; }
  .s-cap-txt p { min-height: 2.9em; max-width: none !important; }
  /* The numbered tabs: four equal segments in one bar, divided by hairlines, the
     active one on the section's own ground with an ember line along its foot */
  .s-tabs { display: flex; flex: none; height: 52px; pointer-events: auto; border-bottom: 1px solid rgba(17,29,53,.12); }
  .s-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    margin: 0; padding: 0 2px; border: 0; border-right: 1px solid rgba(17,29,53,.1); border-radius: 0; background: #EFE7DD; color: #6F6A73; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .s-tab:last-child { border-right: 0; }
  .s-tab-n { font-family: 'Roboto Mono', monospace; font-size: 11px; line-height: 1; letter-spacing: .08em; color: #8C8279; }
  .s-tab-l { font-family: 'Space Grotesk', 'Google Sans', sans-serif; font-size: clamp(12px, 3.5vw, 15px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
  .s-tab.done { color: #111D35; }
  .s-tab.done .s-tab-n, .s-tab.on .s-tab-n { color: #C04D21; }
  .s-tab.on { background: #FFFBF6; color: #111D35; }
  .s-tab-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #C04D21; transform-origin: 0 50%; }
  .s-tabs-dark { border-bottom-color: rgba(242,236,228,.14); }
  .s-tabs-dark .s-tab { background: #0C1528; color: #8C93A6; border-right-color: rgba(242,236,228,.12); }
  .s-tabs-dark .s-tab-n { color: #8C93A6; }
  .s-tabs-dark .s-tab.done { color: #F2ECE4; }
  .s-tabs-dark .s-tab.on { background: #111D35; color: #F2ECE4; }
  .s-tabs-dark .s-tab.on .s-tab-n, .s-tabs-dark .s-tab.done .s-tab-n { color: #F0774A; }
  .s-tabs-dark .s-tab-bar { background: #F0774A; }
  /* How it works: the bar runs edge to edge at the top of the pinned screen */
  .s-cap-panel .s-tabs { margin: 0 -20px 6px; }

  /* Try it: one column, the filed records under the field */
  #try > .s-wrap { padding-top: 56px !important; padding-bottom: 72px !important; gap: 16px !important; }
  /* Step 01 in about one screen: a smaller heading, less space between the parts */
  #try h2 { font-size: 30px !important; }
  .s-try-in { padding: 16px 0 0 !important; gap: 14px !important; }
  .s-try-in > div:first-child > div > span:first-child, .s-try-files > div:first-child > div > div > span:first-child { font-size: 20px !important; }
  .s-try-in > div:first-child > div > span:last-child, .s-try-files > div:first-child > div > div > span:last-child { font-size: 14.5px !important; }
  .s-try-in textarea { font-size: 15px !important; line-height: 1.4 !important; }
  .s-try-in > div:nth-child(3) { gap: 8px !important; }
  /* The examples: one row that scrolls sideways inside itself */
  .s-try-chips { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .s-try-chips::-webkit-scrollbar { display: none; }
  .s-try-chip { flex: none; white-space: nowrap; }
  /* Peeka reads: tighter, smaller figures */
  .s-try-card { padding: 14px 16px !important; gap: 10px !important; border-radius: 16px !important; }
  .s-try-card > div:nth-child(2) { gap: 8px 16px !important; }
  .s-try-card > div:nth-child(2) > div > span:first-child { font-size: 11px !important; }
  .s-try-card > div:nth-child(2) > div > span:last-child { font-size: 16px !important; }
  .s-try-card > span:last-child { margin-top: 2px !important; }
  .s-try-files { padding: 28px 0 0 !important; margin-top: 28px; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.3); }
  .s-try-chip { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px !important; }
  .s-try-clear { display: flex; align-items: center; min-height: 44px; }
  .s-rec { display: grid !important; grid-template-columns: minmax(0,1fr) auto; column-gap: 14px !important; row-gap: 2px !important; }
  .s-rec > :nth-child(1) { grid-row: 1 / 3; }
  .s-rec > :nth-child(2) { grid-column: 2; grid-row: 2; text-align: right; }
  .s-rec > :nth-child(3) { grid-column: 2; grid-row: 1; min-width: 0 !important; }

  /* Once it's in: four panels one after another, the walker in the band at the foot */
  /* Once it's in: pinned like How it works. Under the header, the tabs; then the
     intro or one panel at a time, sliding across as the page scrolls (home.jsx);
     the walking Peeka keeps the band at the foot (WALK_H). */
  .s-hz-sticky { display: flex; flex-direction: column; padding-top: 62px; box-sizing: border-box; }
  .s-hz-track { flex: 1 1 auto; min-height: 0; height: auto !important; transition: transform .6s cubic-bezier(.65,0,.25,1); }
  .s-hz-intro, .s-hz-panel { padding: 28px 20px calc(clamp(84px, 12svh, 112px) + 48px) !important; border-left: 0 !important; }
  .s-hz-intro { gap: 20px !important; justify-content: center !important; }
  .s-hz-panel { gap: 16px !important; }
  .s-hz-panel > div:first-child { flex-wrap: wrap; gap: 4px 16px; }
  [data-ask] { max-width: none !important; }
  /* The lists follow their heading; the chat keeps its newest line at the foot */
  .s-hz-panel > div:last-child:not([data-ask]) { justify-content: flex-start !important; padding-top: 8px; }
  .s-fan { grid-template-columns: minmax(0,1fr) !important; }
  .s-fan > :last-child { text-align: left !important; max-width: none !important; }
  /* Friends board: the records count sits under the name, so nothing collides. */
  .s-board-row { grid-template-columns: 30px minmax(0,1fr) auto !important; gap: 2px 12px !important; }
  .s-board-row > :nth-child(4) { grid-column: 2 / -1; font-size: 12.5px !important; }

  /* FAQ, voices, the close */
  #faq > .s-wrap { padding-top: 72px !important; padding-bottom: 72px !important; gap: 36px !important; }
  .vs-wrap { padding-top: 72px; padding-bottom: 72px; }
  .s-faq-a { padding-right: 34px !important; font-size: 16.5px !important; }
  #get > .s-wrap { padding-top: 72px !important; }

  /* Support and pricing questions: the topic under the question */
  .s-sq { display: grid !important; grid-template-columns: minmax(0,1fr) 22px; gap: 6px 16px !important; }
  .s-sq > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .s-sq > :nth-child(2) { grid-column: 1; grid-row: 2; white-space: normal !important; }
  .s-sq > :last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .s-clear { display: flex; align-items: center; min-height: 44px; }

  /* Pricing: the comparison in three columns under each line, the plan names pinned */
  .s-cmp-scroll { overflow: visible !important; }
  .s-cmp { min-width: 0 !important; }
  .s-cmp-head, .s-cmp-row { grid-template-columns: repeat(3, minmax(0,1fr)) !important; row-gap: 10px; }
  .s-cmp-head > :first-child, .s-cmp-row > :first-child { grid-column: 1 / -1; }
  .s-cmp-head { position: sticky; top: 62px; z-index: 2; background: #FFFBF6; padding-top: 14px !important; }
  .s-cyc { padding: 11px 20px !important; }

  /* Privacy: the contents run the full width */
  .s-wrap > nav { flex: 1 1 100% !important; }
}

/* In their words (voices.jsx): real people's quotes, on the navy, before the FAQ.
   Solid cards, no transparency, so nothing shows through where they sit. */
.s-voices { background: #111D35; color: #F2ECE4; border-top: 1px solid rgba(242,236,228,.08); }
.vs-wrap { max-width: 1440px; margin: 0 auto; padding: clamp(72px, 11vh, 120px) 24px clamp(72px, 11vh, 120px); box-sizing: border-box; display: flex; flex-direction: column; gap: clamp(28px, 4.4vh, 44px); }
.vs-eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: 'Roboto Mono', monospace; font-size: clamp(12px, .82vw, 13.5px); letter-spacing: .08em; text-transform: uppercase; color: #A3AABB; padding-bottom: 14px; border-bottom: 1px solid rgba(242,236,228,.16); }
.vs-title { margin: 0; font-size: clamp(34px, 4.2vw, 72px); letter-spacing: -.045em; font-weight: 700; max-width: 14ch; text-wrap: balance; }
.vs-preview { margin: 0; align-self: flex-start; font-size: 14.5px; line-height: 1.5; color: #111D35; background: #F2C9A0; border-radius: 12px; padding: 10px 14px; max-width: 70ch; }
.vs-grid { columns: 3 300px; column-gap: 20px; }
.vs-grid[data-n="2"] { columns: 2 300px; }
.vs-grid[data-n="1"] { columns: 1; max-width: 860px; }
.vs-card { break-inside: avoid; margin: 0 0 20px; display: flex; flex-direction: column; gap: 22px; background: #1B2846; border: 1px solid #2A3757; border-radius: 24px; padding: clamp(22px, 2vw, 30px); box-sizing: border-box; }
.vs-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vs-uses, .vs-sample { font-family: 'Roboto Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vs-uses { color: #F0774A; }
.vs-sample { color: #111D35; background: #F2C9A0; border-radius: 100px; padding: 3px 9px; }
.vs-card blockquote { margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.5; font-weight: 450; letter-spacing: -.01em; color: #F2ECE4; }
.vs-mark { display: block; font-family: "Space Grotesk", "Google Sans", sans-serif; font-weight: 700; font-size: 56px; line-height: .6; height: .4em; color: #F0774A; margin-bottom: 14px; }
.vs-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid #2A3757; }
.vs-card figcaption img, .vs-face { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.vs-face { display: grid; place-items: center; background: #3A2A2E; color: #F0774A; font-family: "Space Grotesk", "Google Sans", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.vs-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-who b { font-weight: 600; font-size: 16px; }
.vs-who span { font-size: 14.5px; color: #A3AABB; }
/* The first of three or more is the lead: cream on the navy, a size larger. */
.vs-lead { background: #F2ECE4; border-color: #F2ECE4; color: #111D35; }
.vs-lead blockquote { color: #111D35; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.38; font-weight: 500; letter-spacing: -.02em; }
.vs-lead .vs-mark, .vs-lead .vs-uses { color: #C04D21; }
.vs-lead figcaption { border-top-color: rgba(17,29,53,.14); }
.vs-lead .vs-who span { color: #4A5268; }
.vs-lead .vs-face { background: #F6DDD0; color: #C04D21; }
/* Before the first real quote: the promise, and the way to send words in. */
.vs-first { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .vs-first { grid-template-columns: 1fr; } }
.vs-first .vs-card { margin: 0; }
.vs-first .vs-lead blockquote { font-size: clamp(20px, 1.9vw, 30px); }
.vs-ask { justify-content: center; gap: 12px; }
.vs-ask img { width: 64px; height: 64px; object-fit: contain; }
.vs-ask b { font-family: "Space Grotesk", "Google Sans", sans-serif; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.vs-ask span { font-size: 15.5px; line-height: 1.5; color: #A3AABB; }
.vs-btn { align-self: flex-start; margin-top: 6px; background: #D7582B; color: #FFFFFF !important; font-weight: 600; font-size: 15px; border-radius: 100px; padding: 11px 20px; }
.vs-btn:hover { background: #C04D21; }
/* The loop of real quotes (three or more): the cards run past at a reading
   pace, stop under the pointer or keyboard focus, and fade at both edges. */
.vs-marquee { position: relative; overflow: hidden; padding: 4px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vs-marquee:focus-visible { outline: 2px solid #D7582B; outline-offset: -2px; }
.vs-track { display: flex; gap: 20px; width: max-content; padding-left: 20px; animation: vsLoop var(--vs-time, 60s) linear infinite; }
.vs-marquee:hover .vs-track, .vs-marquee:focus-within .vs-track { animation-play-state: paused; }
.vs-track .vs-card { width: clamp(280px, 30vw, 380px); margin: 0; flex-shrink: 0; }
@keyframes vsLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } /* one copy exactly: n cards and n gaps, with the padding */ }
@media (prefers-reduced-motion: reduce) {
  .vs-marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .vs-track { animation: none !important; } .vs-track .vs-card { scroll-snap-align: start; }
  .vs-track .vs-card[aria-hidden="true"] { display: none; }
}
.s-voices .vs-wrap:has(+ .vs-marquee) { padding-bottom: 36px; }
.vs-wrap-foot { padding-top: 28px !important; }
.vs-write { margin: 0; font-size: 16px; color: #A3AABB; }
.vs-write a { color: #F0774A; font-weight: 600; border-bottom: 1px solid currentColor; }

/* Phones are pointed at the stores, not the web app (the owner, 2026-09-29:
   "remove the Web app option ... to push users to download the app"). */
.post-app-store { display: none; }
@media (max-width: 760px) {
  .s-webapp { display: none !important; }
  .post-app-web { display: none; }
  .post-app-store { display: inline; }
}

/* The phone menu (shell.jsx NavMenu): a button at the end of the header, a panel from the right. */
.s-menu-btn { display: none; }
@media (max-width: 760px) {
  /* On phones the header is the logo, the language and the menu (the owner, 2026-09-29):
     Get the app lives in the menu and in the page's own download section. */
  .s-head .s-nav > a[href*="#get"] { display: none !important; }
  .s-head .s-nav { justify-content: flex-end; }
  .s-menu-btn { display: inline-flex; order: 10; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -6px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 12px; }
  .s-menu-btn:hover { background: rgba(17, 29, 53, .06); }
}
.s-menu-wrap { position: fixed; inset: 0; z-index: 200; }
.s-menu-scrim { position: absolute; inset: 0; background: rgba(17, 29, 53, .42); animation: sFade .2s ease both; }
.s-menu { font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: #FFFBF6; color: #111D35; display: flex; flex-direction: column; gap: 22px; padding: max(18px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); box-sizing: border-box; box-shadow: -24px 0 60px rgba(17, 29, 53, .22); overflow-y: auto; animation: sSlide .28s cubic-bezier(.2, .8, .2, 1) both; }
.s-menu-top { display: flex; align-items: center; justify-content: space-between; }
.s-menu-eyebrow { font-family: 'Roboto Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3D4761; }
.s-menu-x { width: 44px; height: 44px; margin-right: -10px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #111D35; border-radius: 12px; cursor: pointer; }
.s-menu-x:hover { background: rgba(17, 29, 53, .06); }
.s-menu-links { display: flex; flex-direction: column; border-top: 1px solid rgba(17, 29, 53, .12); }
.s-menu-big { display: block; padding: 14px 0; border-bottom: 1px solid rgba(17, 29, 53, .12); font-family: "Space Grotesk", "Google Sans", sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; color: #111D35; }
.s-menu-big[aria-current="page"] { color: #C04D21; }
.s-menu-links.small { flex-direction: row; gap: 22px; border-top: 0; }
.s-menu-small { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #3D4761; }
.s-menu-small[aria-current="page"] { color: #C04D21; }
.s-menu-get { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 100px; background: #C04D21; color: #FFFFFF !important; font-weight: 600; font-size: 16px; }
.s-menu-get:hover { background: #A8421B; }
.s-menu-peeka { margin-top: auto; align-self: flex-end; width: 56px; height: 56px; object-fit: contain; }
.s-menu a:focus-visible, .s-menu button:focus-visible, .s-menu-btn:focus-visible { outline: 2px solid #D7582B; outline-offset: 2px; }
@keyframes sSlide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sFade { from { opacity: 0; } to { opacity: 1; } }


/* The document pages (terms, the full privacy policy, delete account, the
   invite pages, 404) inside the owner's handoff design. Their content comes
   from tools/i18n/build_pages.py; every value here is taken from the privacy
   design (privacy.dc.html) so the pages read as one site. */

.doc-main { display: block; font-family: 'Google Sans', ui-sans-serif, system-ui, sans-serif; color: #111D35; }
.doc-main section { box-sizing: border-box; }
.doc-main .g-cream { background: #EFE7DD; }
.doc-main .g-paper { background: #FFFBF6; }
.doc-main .g-ember { background: #C04D21; color: #FFFFFF; }
.doc-main .wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.doc-main .section > .wrap { padding-top: clamp(64px, 10vh, 110px); padding-bottom: clamp(64px, 10vh, 110px); }
.doc-main .page-hero > .wrap { padding-top: 86px; padding-bottom: clamp(48px, 8vh, 88px); display: flex; flex-direction: column; gap: clamp(36px, 7vh, 80px); }

/* [ Label ] … detail, with the hairline under it */
.doc-main .label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 14px; border-bottom: 1px solid rgba(17, 29, 53, .16);
  font-family: 'Roboto Mono', monospace; font-size: clamp(12px, .82vw, 13.5px); letter-spacing: .08em; text-transform: uppercase; color: #3D4761; }
.doc-main .label > :first-child::before { content: '[ '; }
.doc-main .label > :first-child::after { content: ' ]'; }
.doc-main .g-ember .label { color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .3); }
.doc-main .doc-nav .label { border-bottom: 0; padding-bottom: 12px; }

/* Headlines slide up line by line, with room kept for descenders */
.doc-main h1, .doc-main h2 { margin: 0; font-weight: 700; }
.doc-main .h-xl { font-size: clamp(44px, 6.4vw, 120px); line-height: .92; letter-spacing: -.06em; }
.doc-main .h-lg { font-size: clamp(40px, 5.6vw, 100px); line-height: .92; letter-spacing: -.06em; }
.doc-main .lines .ln { display: block; overflow: hidden; padding: 0 .2em .26em 0; margin-bottom: -.22em; }
.doc-main .lines .ln > span, .doc-main .lines .ln:not(:has(span)) { display: block; animation: lineUp 1.1s cubic-bezier(.2, .8, .2, 1) .05s both; }
.doc-main .lines .ln:nth-child(2) > span { animation-delay: .18s; }
.doc-main .accent { color: #C04D21; }
.doc-main .g-ember .accent { color: #FFFFFF; }
.doc-main .rise { animation: rise .8s ease .4s both; }

/* Hero: headline left, the short version or a side note right */
.doc-main .ph-grid, .doc-main .legal-hero .wrap { }
.doc-main .ph-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.doc-main .ph-side { flex: 0 1 460px; display: flex; flex-direction: column; gap: 16px; }
.doc-main .lead { margin: 0; font-size: clamp(18px, 1.4vw, 23px); line-height: 1.45; color: #3D4761; }
.doc-main .ph-side p:not(.lead) { margin: 0; font-size: clamp(16px, 1.1vw, 18.5px); line-height: 1.55; color: #3D4761; }
.doc-main .eyebrow { margin: 0; font-family: 'Roboto Mono', monospace; font-size: clamp(13.5px, .95vw, 16px); letter-spacing: .08em; text-transform: uppercase; color: #C04D21; font-weight: 400; }
.doc-main .short { display: flex; flex-direction: column; gap: 10px; max-width: 980px; margin-left: auto; }
.doc-main .short-list { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 40px; }
.doc-main .short-list li { counter-increment: s; display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(17, 29, 53, .16);
  font-size: clamp(17px, 1.3vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
.doc-main .short-list li::before { content: counter(s, decimal-leading-zero); font-family: 'Roboto Mono', monospace; font-size: clamp(13.5px, .95vw, 16px); letter-spacing: .08em; color: #C04D21; font-weight: 400; flex-shrink: 0; }

/* Paper: sticky contents on the left, the text on the right */
.doc-main .doc { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 120px); align-items: flex-start; }
.doc-main .doc-nav { flex: 0 1 280px; position: sticky; top: 90px; display: flex; flex-direction: column; }
.doc-main .doc-nav ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.doc-main .doc-nav li { counter-increment: toc; }
.doc-main .doc-nav a { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(17, 29, 53, .1); color: #111D35; font-size: clamp(15.5px, 1.05vw, 17.5px); transition: color .2s; }
.doc-main .doc-nav a::before { content: counter(toc, decimal-leading-zero); font-family: 'Roboto Mono', monospace; font-size: 12.5px; letter-spacing: .08em; color: #8C8279; }
.doc-main .doc-nav a.on, .doc-main .doc-nav a.on::before { color: #C04D21; font-weight: 600; }
.doc-main .doc-body { flex: 1 1 440px; min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: clamp(32px, 5vh, 48px); }
.doc-main .doc-body > section { display: flex; flex-direction: column; gap: 16px; padding-bottom: clamp(32px, 5vh, 48px); border-bottom: 1px solid rgba(17, 29, 53, .12); }
.doc-main .doc-body h2 { scroll-margin-top: 90px; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.05; letter-spacing: -.04em; }
.doc-main .doc-body p, .doc-main .doc-body li { margin: 0; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.6; color: #3D4761; max-width: 62ch; }
.doc-main .doc-body strong { color: #111D35; font-weight: 600; }
.doc-main .doc-body a:not(.btn) { color: #C04D21; border-bottom: 1px solid rgba(192, 77, 33, .4); }
.doc-main .doc-body .aside { font-size: clamp(15.5px, 1.05vw, 17.5px); color: #5E5A63; }
.doc-main .steps-list { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; }
.doc-main .steps-list li { counter-increment: st; display: flex; gap: 18px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(17, 29, 53, .12); }
.doc-main .steps-list li::before { content: counter(st, decimal-leading-zero); font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .08em; color: #C04D21; flex-shrink: 0; }
.doc-main .dot-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.doc-main .dot-list li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(17, 29, 53, .12); }
.doc-main .dot-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #D7582B; flex-shrink: 0; transform: translateY(-2px); }
.doc-main .doc-foot { display: flex; flex-direction: column; gap: 8px; }
.doc-main .doc-foot p { font-size: clamp(15.5px, 1.05vw, 17.5px); }
.doc-main .cross a, .doc-main .text-link { align-self: flex-start; font-family: 'Roboto Mono', monospace; font-size: clamp(13.5px, .95vw, 16px); letter-spacing: .08em; text-transform: uppercase; color: #C04D21 !important; border-bottom: 1px solid #C04D21 !important; padding-bottom: 3px; }

/* Ember: "Questions about your data?" and friends */
.doc-main .contact .wrap { display: flex; flex-direction: column; gap: clamp(28px, 5vh, 48px); }
.doc-main .contact-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.doc-main .contact-grid h2 { max-width: 12ch; }
.doc-main .contact-side { flex: 0 1 420px; display: flex; flex-direction: column; gap: 20px; }
.doc-main .contact-side p { margin: 0; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; color: rgba(255, 255, 255, .9); }
.doc-main .contact-side .sub { font-size: clamp(15px, 1.05vw, 17px); }
.doc-main .contact-side .text-link { color: #FFFFFF !important; border-bottom-color: rgba(255, 255, 255, .6) !important; font-size: 13.5px; }
.doc-main .btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; font-size: 16px; font-weight: 600; border-radius: 100px; padding: 13px 22px; }
.doc-main .btn-light { color: #C04D21; background: #FFFFFF; }
.doc-main .btn-light:hover { background: #111D35; color: #FFFFFF; }
.doc-main .btn-ember { color: #FFFFFF; background: #C04D21; }
.doc-main .btn-ember:hover { background: #A9431B; color: #FFFFFF; }

/* A single screen: the invite pages and 404 */
.doc-main .stage > .wrap { min-height: calc(100vh - 62px); padding-top: 110px; padding-bottom: 80px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; }
.doc-main .peek-over { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.doc-main .peek-over .peek { width: 180px; height: auto; margin-left: 12px; margin-bottom: -18px; animation: peek 5s ease-in-out infinite; }
.doc-main .stage .lead { max-width: 34ch; }
.doc-main .stores { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-main .store-badge { display: flex; align-items: center; gap: 10px; background: #111D35; color: #FFFFFF; border-radius: 100px; padding: 10px 18px 10px 16px; font-size: 15.5px; font-weight: 500; }
.doc-main .store-badge .soon { font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .06em; color: #F0774A; text-transform: uppercase; }

@media (max-width: 819px) {
  .doc-main .doc-nav { position: static; }
}

/* Phones: the site's one 20px gutter, and the contents full width. */
@media (max-width: 700px) {
  .doc-main .wrap { padding-left: 20px; padding-right: 20px; }
  .doc-main .doc-nav { flex: 1 1 100%; position: static; }
  /* The links that stand on their own line get a 44px tap area */
  .doc-main .doc-foot a, .doc-main .cross a, .doc-main a.text-link { position: relative; }
  .doc-main .doc-foot a::after, .doc-main .cross a::after, .doc-main a.text-link::after { content: ''; position: absolute; inset: -12px -4px; }
}

/* The blog (/blog/ and /blog/<slug>/, src/site/blog.jsx) inside the document
   pages' frame: doc.css gives the hero, the label rows, the paper, the sticky
   contents column and the text; this adds the shelves, the rows, and a post's
   figures, pull quote and "Worth knowing" box in the site's own colours. */

.doc-main .bl-hero .ph-side, .doc-main .post-hero .ph-side { flex: 0 1 480px; }
.doc-main .label a { color: inherit; border-bottom: 1px solid rgba(61, 71, 97, .35); }
.doc-main .label a:hover { color: #C04D21; border-bottom-color: #C04D21; }
.doc-main .bl-peeka { width: 132px; height: 132px; object-fit: contain; margin-bottom: -6px; }
.doc-main .bl-note { margin: 0; font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #5E5A63; }

/* The kicker, the title and the line of a post, wherever it is listed */
.doc-main .bl-kick { font-family: 'Roboto Mono', monospace; font-size: clamp(12px, .82vw, 13px); letter-spacing: .08em; text-transform: uppercase; color: #75573F; }
.doc-main .bl-title { font-family: 'Space Grotesk', 'Google Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(21px, 1.6vw, 27px); letter-spacing: -.03em; line-height: 1.15; color: #111D35; transition: color .2s; }
.doc-main .bl-sum { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.5; color: #3D4761; }
.doc-main .bl-date { font-family: 'Roboto Mono', monospace; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #5E5A63; white-space: nowrap; }
.doc-main .bl-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }

/* Latest: three cards, once the posts are not all from one day */
.doc-main .bl-latest > .wrap { padding-top: clamp(56px, 8vh, 88px); display: flex; flex-direction: column; gap: 20px; }
.doc-main .bl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.doc-main .bl-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 22px; background: #F6EEE4; color: #111D35; }
.doc-main .bl-card .bl-date { margin-top: auto; padding-top: 6px; }
.doc-main .bl-card:hover .bl-title, .doc-main .bl-row:hover .bl-title, .doc-main .post-near:hover .bl-title { color: #C04D21; }

/* The shelves: the shelf's name on the left, its posts on the right */
.doc-main .bl-shelves > .wrap { display: flex; flex-direction: column; }
.doc-main .bl-shelf { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 120px); padding: clamp(40px, 6vh, 64px) 0; border-top: 1px solid rgba(17, 29, 53, .16); scroll-margin-top: 70px; }
.doc-main .bl-shelf:first-child { border-top: 0; padding-top: 0; }
.doc-main .bl-shelf-head { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 12px; }
.doc-main .bl-shelf-n { font-family: 'Roboto Mono', monospace; font-size: 13.5px; letter-spacing: .08em; color: #C04D21; }
.doc-main .bl-shelf-head h2 { font-size: clamp(32px, 3vw, 50px); line-height: 1; letter-spacing: -.05em; }
.doc-main .bl-shelf-head p { margin: 0; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.5; color: #3D4761; }
.doc-main .bl-count { font-family: 'Roboto Mono', monospace; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #5E5A63; }
.doc-main .bl-list { margin: 0; padding: 0; list-style: none; }
.doc-main .bl-list li { border-top: 1px solid rgba(17, 29, 53, .12); }
.doc-main .bl-list li:first-child { border-top: 0; }
.doc-main .bl-row { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; color: #111D35; }
.doc-main .bl-list li:first-child .bl-row { padding-top: 4px; }
.doc-main .bl-num { font-family: 'Roboto Mono', monospace; font-size: 14px; letter-spacing: .06em; color: #C04D21; padding-top: 15px; width: 22px; flex-shrink: 0; }
.doc-main .bl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-main .bl-row .bl-date { padding-top: 3px; }

/* A post */
.doc-main .post-title { flex: 1 1 560px; max-width: 17ch; font-size: clamp(40px, 5vw, 84px); line-height: .98; letter-spacing: -.055em; animation: rise .8s ease .05s both; }
.doc-main .post-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: 'Roboto Mono', monospace; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: #3D4761; }
.doc-main .post-meta > * + *::before { content: '·'; margin: 0 10px; }
.doc-main .post-shelf ol { margin-bottom: 18px; }
.doc-main .post-shelf li a { line-height: 1.35; }
.doc-main .post-shelf a.text-link { display: inline-block; padding: 0 0 3px; border-top: 0; font-size: clamp(13px, .9vw, 15px); }
.doc-main .post-shelf a.text-link::before { content: none; }
.doc-main .post-body { gap: 28px; }
.doc-main .post-icon { width: 64px; height: 64px; object-fit: contain; }

/* The body, as tools/blog.mjs writes it (the same HTML the web app's Learn shows) */
.doc-main .post-prose { --ink: #111D35; --ink-2: #3D4761; --ember-text: #C04D21; --ground: #FFFBF6;
  display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.doc-main .post-prose > h2 { margin-top: 18px; }
.doc-main .post-prose h3 { margin: 10px 0 0; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -.03em; line-height: 1.15; }
.doc-main .post-prose em { font-style: italic; }
.doc-main .post-prose code { font-family: 'Roboto Mono', monospace; font-size: .88em; background: #F4ECE2; border-radius: 6px; padding: 1px 6px; }
.doc-main .post-prose .money { white-space: nowrap; }
.doc-main .post-prose ul, .doc-main .post-prose ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.doc-main .post-prose ul > li, .doc-main .post-prose ol > li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(17, 29, 53, .12); }
.doc-main .post-prose ul > li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #D7582B; flex-shrink: 0; transform: translateY(-2px); }
.doc-main .post-prose ol { counter-reset: pl; }
.doc-main .post-prose ol > li { counter-increment: pl; }
.doc-main .post-prose ol > li::before { content: counter(pl, decimal-leading-zero); font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .08em; color: #C04D21; flex-shrink: 0; }
.doc-main .post-prose .pull { margin: 10px 0; padding: 4px 0 4px 22px; border-left: 3px solid #D7582B; max-width: 30ch;
  font-family: 'Space Grotesk', 'Google Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.25; letter-spacing: -.025em; color: #C04D21; }
.doc-main .post-prose .know { margin-top: 10px; padding: 22px 26px 12px; border-radius: 22px; background: #EFE7DD; display: flex; flex-direction: column; gap: 10px; }
.doc-main .post-prose .know .know-h { margin: 0; font-family: 'Roboto Mono', monospace; font-size: 13.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: #A5421C; }
.doc-main .post-prose .know li { color: #111D35; }
.doc-main .post-prose .know ul > li:first-child { border-top: 0; }

/* A figure (src/shared/learn-figure.jsx), in the site's colours */
.doc-main .post-prose .rd-fig { max-width: 680px; background: #F4ECE2; border-radius: 22px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.doc-main .post-prose .rd-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.doc-main .post-prose .rd-fig .cap { font-size: 15px; line-height: 1.5; color: #3D4761; }
.doc-main .post-prose .rd-fig .leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; font-weight: 600; color: #5E5A63; }
.doc-main .post-prose .rd-fig .leg span { display: inline-flex; align-items: center; gap: 6px; }
.doc-main .post-prose .rd-fig .leg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.doc-main .post-prose .rd-piles { display: flex; align-items: flex-end; gap: 6px; }
.doc-main .post-prose .rd-piles div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.doc-main .post-prose .rd-piles img { height: 90px; width: 100%; object-fit: contain; object-position: bottom; }
.doc-main .post-prose .rd-piles span { font-size: 12.5px; font-weight: 600; color: #5E5A63; text-align: center; }

/* After the text: not advice, the app, the pieces either side */
.doc-main .post-advice { padding-top: 20px; border-top: 1px solid rgba(17, 29, 53, .12); font-size: clamp(15px, 1vw, 16.5px) !important; color: #5E5A63 !important; }
.doc-main .post-app { display: flex; align-items: center; gap: 18px; padding: 16px 22px 16px 16px; border-radius: 22px; background: #EFE7DD; }
.doc-main .post-app img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.doc-main .post-app p { font-size: clamp(16px, 1.05vw, 17.5px) !important; max-width: none !important; }
.doc-main .post-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doc-main .post-near { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 22px; border: 1px solid rgba(17, 29, 53, .16); color: #111D35; }
.doc-main .post-near.next { text-align: right; align-items: flex-end; }
.doc-main .post-near:hover { border-color: #C04D21; }
.doc-main .post-near.empty { border: 0; padding: 0; }

@media (max-width: 900px) {
  .doc-main .bl-shelf { grid-template-columns: minmax(0, 1fr); }
  .doc-main .bl-shelf-head { position: static; }
}
/* Phones: the shelf's contents after the post, rows without the date, one card per row */
@media (max-width: 700px) {
  .doc-main .bl-hero .bl-mid { display: none; }
  .doc-main .bl-peeka { width: 104px; height: 104px; }
  .doc-main .bl-row .bl-date { display: none; }
  .doc-main .bl-row { gap: 14px; padding: 18px 0; }
  .doc-main .bl-icon { width: 40px; height: 40px; }
  .doc-main .bl-num { padding-top: 11px; width: 20px; }
  .doc-main .post-doc { flex-direction: column; }
  .doc-main .post-body { order: 1; }
  .doc-main .post-shelf { order: 2; }
  .doc-main .post-prose .rd-fig { padding: 16px 14px 14px; }
  .doc-main .post-prose .know { padding: 18px 18px 8px; }
  .doc-main .post-pn { grid-template-columns: 1fr; }
  .doc-main .post-near.next { text-align: left; align-items: flex-start; }
  .doc-main .post-near.empty { display: none; }
  .doc-main .post-app { align-items: flex-start; }
  .doc-main .post-app img { width: 56px; height: 56px; }
}

/* hover rules from the design */
.hv-0:hover{color:#D7582B !important}
.hv-1:hover{color:#D7582B !important}
.hv-2:hover{color:#D7582B !important}
.hv-3:hover{background:#A9431B !important;color:#FFFFFF !important}
.hv-4:hover{color:#C04D21 !important}
.hv-5:hover{background:#111D35 !important;color:#FFFFFF !important}
.hv-6:hover{color:#F0774A !important;border-color:#F0774A !important}
.hv-7:hover{color:#F0774A !important;border-color:#F0774A !important}
.hv-8:hover{color:#F0774A !important;border-color:#F0774A !important}
.hv-9:hover{color:#F0774A !important;border-color:#F0774A !important}