/* orey.ai home page on direction G "Midnight". Built on tokens/tokens.css; the page runs
   on the Midnight theme from top to bottom (html[data-theme="dark"]). Mirrors the Figma
   frame "Home, direction G" in "OREY website (G tokens)". */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * 16px); margin: 0 auto; padding: 0 16px; }
.band { padding: var(--space-6) 0; --band-bg: var(--surface); }
/* Sections alternate midnight and deep down the page, so every new section starts
   with a change of ground. Inside a deep band, raised elements flip to midnight
   so they still stand off their background. */
.band-raised { background: var(--surface-raised); --band-bg: var(--surface-raised); }
.band-raised .card-raised, .band-raised .contact-field { background: var(--surface); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* Type */
.label { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--label); }
.label-muted { color: var(--muted); }
.hero-title { font: var(--type-hero-weight) clamp(42px, 6.4vw, var(--type-hero-size))/var(--type-hero-line) var(--font-sans); letter-spacing: var(--type-hero-tracking); color: var(--muted); max-width: 1100px; text-wrap: balance; }
.section-title { font: var(--type-section-weight) clamp(32px, 4.6vw, var(--type-section-size))/var(--type-section-line) var(--font-sans); letter-spacing: var(--type-section-tracking); color: var(--ink); text-wrap: balance; }
.section-title .dim, .hero-title .dim { color: var(--muted); }
.hero-title .ink { color: var(--ink); }
.human { font-family: var(--font-name); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--rose-deep); }
.title { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--ink); }
.subtitle { font: var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-line) var(--font-sans); letter-spacing: var(--type-subtitle-tracking); color: var(--ink); }
.lede { font: var(--type-lede-weight) var(--type-lede-size)/var(--type-lede-line) var(--font-sans); color: var(--muted); max-width: 640px; }
.body { color: var(--muted); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-line); color: var(--muted); }
.eyebrow { display: flex; flex-direction: column; gap: var(--space-3); }

/* Buttons: three heights (control-sm 32, control-md 40, control-lg 44) with a label
   size each, as in the Figma Button set. Hover lightens the fill, active darkens it,
   disabled sits at 45%; focus is the page-wide 2px ring. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--control-md); padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent; font: var(--type-button-weight) var(--type-button-size)/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.btn-sm { min-height: var(--control-sm); padding: 0 14px; font-size: var(--type-button-sm-size); }
.btn-lg { min-height: var(--control-lg); padding: 0 24px; font-size: var(--type-button-lg-size); }
.btn-accent { background: var(--rose); color: var(--on-rose); }
.btn-accent:hover { background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); }
.btn-accent:active { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)); }
.btn-ghost { border-color: var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--steel-deep); }
.btn-ghost:active { border-color: var(--steel-deep); background: var(--surface-raised); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: .42em; font: var(--type-wordmark-weight) var(--type-wordmark-size)/1 var(--font-name); letter-spacing: var(--type-wordmark-tracking); color: var(--ink); text-decoration: none; }
.wordmark .ear { width: .72em; height: .9em; color: var(--rose-deep); flex: none; }

html { scroll-padding-top: 88px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Hero */
.hero { padding: 72px 0 var(--space-6); }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-copy .lede { max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); padding-top: var(--space-2); }
/* Hero, after the Figma Make direction for orey.ai. The first screen is one centred
   column: headline, intro, assurances, waveform, then the next step. The headline,
   intro, assurance row and waveform share one width (the 1180px column), so their
   edges line up. That screen fills the window under the top bar. The quotes sit
   under the problem boxes in 01 and fade in once scrolled into view (g-home.js). */
.hero { padding: 0; }
/* Home hero: a soft midnight to violet to rose glow running on a diagonal, after the
   gradient on the LinkedIn launch posts, with a fine grain over it. g-home.js sets
   --glow-shift on scroll and the glow drifts along that diagonal, slower than the page. */
.hero-glow { position: relative; isolation: isolate; overflow: hidden; }
.hero-glow::before, .hero-glow::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: -1; }
.hero-glow::before {
  top: -20%; bottom: 0; left: -30%; right: -10%;
  background:
    radial-gradient(55% 50% at 80% 100%, rgba(214, 140, 150, .22), transparent 70%),
    linear-gradient(150deg, transparent 42%, rgba(52, 58, 112, .34) 66%, rgba(120, 88, 128, .26) 86%, rgba(190, 120, 135, .24) 100%);
  transform: translate3d(calc(var(--glow-shift, 0px) * 0.58), var(--glow-shift, 0px), 0);
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.hero-glow::after {
  inset: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-stage { min-height: calc(100svh - 73px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; }
.hero-copy { align-items: center; text-align: center; width: 100%; }
/* One rhythm down the first screen: 40px between headline, intro, assurances,
   waveform and button. */
.hero-stage, .hero-stage .hero-copy { gap: 40px; }
.hero-stage .assurances { padding-top: 0; }
/* 1028px is the width of the headline's longer line at full size, so the intro,
   the assurance row and the waveform start and end where the headline does. */
.hero-copy, .hero-stage .waveform { max-width: 1028px; }
/* The narrower hero block sits in the middle of the column, so centred heroes are
   centred on the page and not 76px to the left. */
.hero-copy { margin-left: auto; margin-right: auto; }
.hero-title { margin: 0 auto; width: 100%; text-wrap: balance; }
.hero-copy .lede { max-width: none; width: 100%; margin: 0 auto; text-wrap: balance; }
/* The three assurances read on one line in every language. The row is at least as
   wide as the headline column and may grow past it, up to the page column, before
   it wraps; the flex column keeps it centred when it is wider than the headline. */
.hero-copy .assurances { width: max-content; min-width: 100%; max-width: min(100vw - 48px, var(--wrap)); justify-content: space-between; }
.hero-stage .waveform { margin: 0; }
.hero-stage .hero-actions { padding-top: 0; }
.hero-quotes { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); }
.hero-quotes > .label { text-align: center; }
.hero-quotes .quotes { text-align: left; margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-quotes { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
  .js .hero-quotes.is-in { opacity: 1; transform: none; }
}
/* The trust row under the hero: three checkable claims, each with a Lucide icon in
   the label colour (the Figma TrustRow). */
.assurances { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-2); }
.assurances li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-small-size); color: var(--muted); }
.assurances svg { width: 18px; height: 18px; flex: none; color: var(--label); }
.waveform { width: 100%; height: 72px; margin: var(--space-5) 0; }
.waveform rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .waveform rect { animation: breathe var(--breathe) ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }
  @keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
}
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
.quote { border-left: 1px solid var(--rose-deep); padding-left: 16px; font: italic 400 var(--type-quote-size)/var(--type-quote-line) var(--font-name); color: var(--ink); }
/* main.js swaps a new line from quotes.js into each fragment on every cycle of
   `drift` (15s, staggered), and reserves the tallest quote's height in --frag-h
   so the page below never moves. */
.fragment { font: italic 400 var(--type-quote-size)/var(--type-quote-line) var(--font-name); min-height: var(--frag-h, 0); opacity: 0; animation: drift 15s ease-in-out infinite; }
.fragment .quote-mark { display: none; }
.f2 { animation-delay: 1.4s; }
.f3 { animation-delay: 2.8s; }
@keyframes drift {
  0%   { opacity: 0; transform: translateX(-6px); }
  12%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(0); }
  100% { opacity: .25; transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .fragment { opacity: 1; transform: none; animation: none; }
}

/* Cards */
.card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.card-plate { border-radius: var(--radius-plate); padding: var(--space-5); gap: var(--space-4); }
.card-raised { background: var(--surface-raised); border-top-color: var(--card-highlight); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-2-tight { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

/* Problem */
.point { display: flex; flex-direction: column; gap: var(--space-1); }
.point .glyph { font: var(--type-title-weight) var(--type-title-size)/1.2 var(--font-sans); color: var(--steel); }

/* How it works: the live site's walkthrough on G. The steps scroll past a pinned
   laptop that cross-fades between the real product screens (assets/mockups);
   main.js (#scroller) lights the step crossing the middle of the screen and scales
   each 1520x1160 mockup iframe to its frame. */
/* The section title and the step buttons share one row that stays pinned under the
   top bar while the walkthrough scrolls, so the reader always sees which section
   and which step they are in. */
.how-label + .how-sticky { margin-top: calc(var(--space-2) - var(--space-5)); }
.how-sticky { position: sticky; top: 72px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; background: var(--band-bg); border-bottom: 1px solid var(--hairline); }
.step-jump { display: flex; flex: none; gap: var(--space-2); }
.step-pill { padding: 9px 20px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: transparent; font: 500 14px/1 var(--font-sans); color: var(--muted); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.step-pill:hover:not(.is-on) { border-color: var(--steel); color: var(--ink); }
.step-pill.is-on { border-color: var(--rose); color: var(--ink); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.scroller { display: grid; grid-template-columns: clamp(300px, 32%, 420px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.step-block { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-height: clamp(340px, 45vh, 460px); padding: var(--space-5) 0; opacity: .32; transition: opacity var(--duration-slow) var(--ease-out); }
.step-block:last-child { min-height: max(clamp(340px, 45vh, 460px), var(--walkthrough-last-height, 0px)); }
.step-block.is-on { opacity: 1; }
.step-block > h3.title { font: var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-line) var(--font-sans); letter-spacing: var(--type-subtitle-tracking); }
.step-num { align-self: flex-start; padding-bottom: var(--space-2); border-bottom: 2px solid var(--hairline); transition: border-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out); }
.step-block.is-on .step-num { border-bottom-color: var(--rose); color: var(--rose); }
.scroller-visual { position: sticky; top: 148px; top: max(184px, calc(50vh - 220px)) !important; width: min(100%, calc((100vh - 172px) * 4 / 3)); justify-self: end; }
.laptop-frame { position: relative; padding: 12px; border: 1px solid rgba(201,214,230,.28); border-radius: 18px; background: linear-gradient(145deg, #3d4864, #262f48 62%, #353f5a); box-shadow: 0 0 0 1px rgba(201,214,230,.06), 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.18); }
.laptop-camera { position: absolute; z-index: 4; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 1px rgba(201,214,230,.3); transform: translateX(-50%); }
.shot-stack { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(201,214,230,.2); border-radius: 6px; background: var(--surface); }
.shot { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); pointer-events: none; }
.shot.is-on { opacity: 1; }
.shot-stack iframe { display: block; width: 1520px; height: 1160px; border: 0; transform: scale(var(--shot-scale, .5)) translate(-40px, -40px); transform-origin: top left; }
.shot-stack.is-cropped::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, transparent calc(100% - var(--crop-fade-w, 76px)), var(--surface)), linear-gradient(to bottom, transparent calc(100% - var(--crop-fade-h, 64px)), var(--surface)); }
.step-shot-mobile { display: none; }
.step-shot-mobile .card { background: var(--surface-raised); }
@media (prefers-reduced-motion: reduce) { .step-block { opacity: 1; transition: none; } .shot { transition: none; } }
@media (max-width: 1000px) {
  .how-sticky { position: static; flex-direction: column; align-items: flex-start; }
  .scroller { grid-template-columns: 1fr; gap: 0; }
  .scroller-visual { display: none; }
  .step-block, .step-block:last-child { min-height: 0; opacity: 1; padding: var(--space-4) 0; }
  .step-shot-mobile { display: block; }
}
.finding dt { margin-top: var(--space-2); }
.finding dd { margin: 4px 0 0; color: var(--ink); }

/* Conversation */
.conversation-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: center; }
/* The phone shows the participant call screen as the app draws it (orey-app,
   interview.js renderLive and style.css): porcelain screen, the orb with its outer
   ring, Listening and the timer, then Mute, Pause and End above Withdraw. The orb
   breathes and swells while either side speaks, as in the app. */
.phone { --surface: #f5f6f8; --hairline: #dfe3ea; --ink: #121a2b; --muted: #525b6b; --rose-deep: #8c4f53; width: 300px; height: 620px; border-radius: 46px; border: 7px solid #05080d; outline: 1px solid #2a3553; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-device); padding: 14px 22px 22px; display: flex; flex-direction: column; align-items: center; }
.phone-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; padding: 0 6px; }
.phone-bar .island { width: 90px; height: 26px; border-radius: 13px; background: #05080d; }
.phone-bar .spacer { width: 30px; }
.call-head { margin-top: 26px; }
.call-head .wordmark { font-size: 17px; color: var(--ink); }
.call-centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.call-orb { position: relative; width: 132px; height: 132px; border-radius: 50%; margin: 14px 0 22px; background: radial-gradient(circle at 32% 28%, #f6dede 0%, var(--rose) 26%, var(--steel) 52%, #34496b 74%, var(--midnight) 100%); background-size: 150% 150%; background-position: 30% 30%; box-shadow: 0 0 0 1px rgba(18,26,43,.08), 0 18px 40px -12px rgba(18,26,43,.35); transition: box-shadow 1var(--duration-fast) var(--ease-out); }
.call-orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--hairline); opacity: .8; }
.call-orb.speaking-orey { box-shadow: 0 0 0 1px rgba(18,26,43,.08), 0 0 0 8px rgba(230,163,163,.18), 0 22px 55px -8px rgba(230,163,163,.55); }
.call-orb.speaking-user { box-shadow: 0 0 0 1px rgba(18,26,43,.08), 0 0 0 8px rgba(18,26,43,.12), 0 22px 55px -8px rgba(18,26,43,.45); }
/* Size is driven by g-home.js in one continuous motion (no keyframe swaps, so no
   jumps); the colours drift on their own. */
@media (prefers-reduced-motion: no-preference) {
  .call-orb { animation: orb-drift 11s ease-in-out infinite; will-change: transform; }
  @keyframes orb-drift { 0%, 100% { background-position: 30% 30%; } 33% { background-position: 62% 40%; } 66% { background-position: 40% 66%; } }
}
.call-status { font-size: 16px; color: var(--ink); }
.call-timer { margin-top: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.call-dock { width: calc(100% + 44px); margin: 0 -22px; padding: 18px 16px 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: center; }
.call-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.call-control { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); }
.call-disc { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #e8edf4; border: 1px solid var(--steel); color: var(--ink); }
.call-disc svg { width: 22px; height: 22px; }
.call-end .call-disc { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.call-withdraw { margin-top: 14px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.compare-card { border: 1px solid var(--hairline); border-radius: var(--radius-plate); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
/* The survey scale: 3 is the example answer and is shaded. Moving across the
   scale (or tabbing through it) moves the shade and names the level; leaving
   it returns to 3. */
.rating { display: flex; flex-direction: column; gap: var(--space-2); width: fit-content; }
.scale { display: flex; gap: var(--space-2); }
.scale button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius); font: 500 var(--type-small-size)/1 var(--font-sans); color: var(--muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.scale button.is-on { background: var(--ice); border-color: var(--ice); color: var(--midnight); }
.scale-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.assessment { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
.assessment strong { font-weight: 500; color: var(--ink); }
.said { font: italic 400 var(--type-quote-size)/var(--type-quote-line) var(--font-name); color: var(--ink); }
.asked { color: var(--muted); }

/* Use cases */
.usecase { text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out); }
.usecase:hover { border-color: var(--steel-deep); }
.usecase .more { font-size: var(--type-small-size); color: var(--steel); margin-top: var(--space-2); }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: 380px 1fr; gap: var(--space-6); align-items: start; }
/* FAQ, after the FAQ on vercel.com/pricing: plain-size questions numbered 01, 02 in a
   muted tone, no rules between them, a small chevron, and the answer in smaller muted
   text lined up under the question. Rose only marks the open question's number. */
.faq { counter-reset: faq; }
.faq details { counter-increment: faq; padding: 0; border: 0; }
.faq summary.title { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 0; padding: 20px 0; cursor: pointer; font: 400 17px/1.45 var(--font-sans); letter-spacing: 0; color: var(--ink); transition: color var(--duration-fast) var(--ease-out); }
.faq summary::before { content: counter(faq, decimal-leading-zero); font: 400 14px/1 var(--font-sans); color: var(--muted); font-variant-numeric: tabular-nums; transition: color var(--duration-fast) var(--ease-out); }
.faq summary::after { content: ""; width: 7px; height: 7px; justify-self: end; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details[open] summary::before { color: var(--rose); }
.faq summary:hover { color: var(--ink); }
.faq summary:hover::after { border-color: var(--ink); }
.faq details p { margin: -8px 56px 0 40px; padding-bottom: 20px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.faq details a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Talk to us */
/* Closing call to action, centred like the email capture that ends ramp.com: one
   headline, then the input and button sharing a single field shell. */
.contact { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 760px; margin: 0 auto; padding: var(--space-5) 0; text-align: center; }
.contact .lede { max-width: 680px; text-wrap: balance; }
.contact-form { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; max-width: 520px; margin-top: var(--space-3); }
/* The privacy note under the form stays on one line in every language; it may run
   wider than the 520px form and the flex column keeps it centred. Phones wrap it. */
.contact-form > .small:not(.contact-status) { white-space: nowrap; }
.contact-field { display: flex; align-items: center; gap: 4px; width: 100%; padding: 4px; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-plate); transition: border-color var(--duration-fast) var(--ease-out); }
.contact-field:focus-within { border-color: var(--steel); }
.contact-field input { flex: 1; min-width: 0; padding: 12px 14px; background: transparent; border: 0; font: 400 16px/1.2 var(--font-sans); color: var(--ink); }
.contact-field input:focus { outline: none; }
.contact-field input::placeholder { color: var(--muted); opacity: .8; }
.contact-field:has(input[aria-invalid="true"]) { border-color: var(--rose); }
.contact-field .btn { min-height: var(--control-lg); padding: 0 22px; font-size: var(--type-button-lg-size); }
.contact-form a { color: var(--steel); }
.contact-status { color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* About page, after linear.app/about: a story band, the experience in numbers and
   a grid of where it comes from. No names; the companies carry the proof. */
.about-hero { padding: var(--space-6) 0; }
.about-social { margin: var(--space-2) 0 0; }
.story { align-items: start; }
.story .lede { max-width: none; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); }
.stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4) 0 0; }
.stat + .stat { padding-left: var(--space-4); border-left: 1px solid var(--hairline); }
.stat-number { white-space: nowrap; font: var(--type-number-weight) clamp(30px, 3vw, 44px)/var(--type-number-line) var(--font-sans); letter-spacing: var(--type-number-tracking); color: var(--ink); }
.stat-number.key { color: var(--rose); }
.stat .body, .logo-cards .body { overflow-wrap: break-word; }
.logo-cards > li { min-width: 0; }
.logo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.logo-cards .card { justify-content: space-between; align-items: center; text-align: center; min-height: 200px; }
.logo-cards img { align-self: center; width: auto; filter: brightness(0) invert(1); opacity: .7; transition: opacity var(--duration-fast) var(--ease-out); }
.logo-cards .card:hover img { opacity: 1; }


/* Palette accents. Steel, ice and the heat ramp carry the system; rose stays on the
   human things the brand book allows (quotes, the ear, the one key number). */
.eyebrow > .label { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow > .label::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--steel-deep), var(--ice)); }
.glyph-yes, .point .glyph-yes { color: var(--rose); }
/* The problem marks in rose, so the negative points stand out against the ticks. */
.point .glyph:not(.glyph-yes) { color: var(--rose); }
#solution .card-raised, .compare-card.card-raised { border-top: 1px solid var(--ice); }
.key-number { color: var(--rose); font-weight: 400; }
.found strong { font-weight: 500; color: var(--ice); }
.card, .compare-card { transition: border-color var(--duration-base) var(--ease-out); }
.card:hover, .compare-card:hover { border-color: var(--steel-deep); }
/* Rose accents in use cases, security and FAQ, after how Stripe carries its brand
   colour (links, small markers, the open state) while surfaces stay neutral, and how
   Vercel fades colour out with soft masks instead of hard edges. */
.usecase, #security .card { position: relative; overflow: hidden; isolation: isolate; }
.usecase::before, #security .card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 70%); opacity: .55; transition: opacity var(--duration-base) var(--ease-out); pointer-events: none; }
.usecase:hover::before, #security .card:hover::before { opacity: 1; }
.usecase::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--rose), var(--steel-deep) 55%, transparent); pointer-events: none; }
.usecase:hover { border-color: var(--steel-deep); }
.usecase .more { color: var(--rose); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.usecase:hover .more { transform: translateX(4px); }
/* Security cards after the icon tiles on Linear's and Vercel's security pages: one line
   icon per rule in the accent, in a small tinted tile, the title and text under it. */
#security .card { display: flex; flex-direction: column; gap: var(--space-2); transition: border-color .25s ease; }
#security .card:hover { border-color: color-mix(in srgb, var(--rose) 40%, var(--hairline)); }
.sec-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-3); border-radius: 12px; color: var(--rose); background: color-mix(in srgb, var(--rose) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rose) 28%, transparent); box-shadow: inset 0 1px rgba(255, 255, 255, .06); }
.sec-icon svg { width: 22px; height: 22px; }
.faq-layout .eyebrow .section-title .dim { color: var(--muted); }
/* The FAQ title sits in a narrow column; long German words (Datenverantwortliche) hyphenate rather than spill. */
.faq-layout .eyebrow .section-title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.band-raised { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* Phone and tablet */
@media (max-width: 960px) {
  .grid-3, .quotes { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .conversation-layout, .faq-layout, .logo-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .phone { margin: 0 auto; }
  .contact-form > .small:not(.contact-status) { white-space: normal; }
}
@media (max-width: 640px) {
  .band { padding: 64px 0; }
  .hero-copy .assurances { justify-content: center; }
  .grid-2, .grid-2-tight, .grid-4 { grid-template-columns: 1fr; }
  .card-plate { padding: var(--space-4); }
  .contact-field { flex-direction: column; align-items: stretch; }
}

/* Problem vs With OREY: the two cards share one row grid (subgrid), so the label, the
   lead line, each mark, each point title and each point text start at the same height
   on both sides even when one title wraps. The x and the tick are drawn the same size
   with the same stroke, so they sit on one line too. The intro above runs on one line. */
#solution .lede, #participation .lede { max-width: none; }
/* A subtitle sits closer under its section title than the next block does. */
.eyebrow + .lede { margin-top: calc(var(--space-4) - var(--space-5)); }
.point .glyph { display: block; width: 20px; height: 20px; font-size: 0; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.point .glyph { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.point .glyph-yes { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* About, 04 On LinkedIn: after Supabase's "Join the community" section, a short head
   with one button, then the posts with their LinkedIn visuals on a strip that runs the
   full width of the window, on cards a step lighter than the page, and slides slowly
   sideways (the list is in the markup twice, so moving it by half loops without a
   jump). It stops under the pointer or keyboard focus; with reduced motion it is a plain
   strip people scroll themselves. */
.li-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.li-gallery { overflow: hidden; margin-top: var(--space-6); padding: 4px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.li-track { display: flex; gap: var(--space-3); width: max-content; margin: 0; padding: 0; list-style: none; animation: li-slide 70s linear infinite; }
.li-gallery:hover .li-track, .li-gallery:focus-within .li-track { animation-play-state: paused; }
@keyframes li-slide { to { transform: translateX(calc(-50% - var(--space-3) / 2)); } }
.li-track > li { flex: none; width: 300px; }
.li-post { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 12px 12px 16px; border: 1px solid color-mix(in srgb, var(--hairline) 60%, var(--ice)); border-radius: 20px; background: color-mix(in srgb, var(--surface-raised) 84%, var(--ice)); color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.li-post:hover { border-color: var(--steel); background: color-mix(in srgb, var(--surface-raised) 78%, var(--ice)); }
.li-shot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--deep); }
.li-head { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.li-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.li-avatar-orey { display: grid; place-items: center; background: var(--deep); border: 1px solid var(--hairline); color: var(--rose); }
.li-avatar-orey svg { width: 12px; height: 15px; }
.li-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.3; }
.li-who strong { font-weight: 500; }
.li-who span { font-size: 12px; color: var(--muted); }
.li-head time { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.li-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.li-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 0 6px; font-size: 13px; color: var(--steel); }
.li-tag { padding: 3px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.li-read { margin-left: auto; }
.li-post:hover .li-read { color: var(--rose); }
@media (max-width: 640px) { .li-track > li { width: 260px; } }
@media (prefers-reduced-motion: reduce) {
  .li-gallery { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .li-track { animation: none; }
  .li-track > li { scroll-snap-align: start; }
  .li-track > li[aria-hidden="true"] { display: none; }
}

/* Problem, sites to one ranked view: after the merging lines on linear.app/customer-
   requests. A row of site tiles under two group labels; their lines (drawn by g-home.js)
   join into one line that runs down through a quote, the grouping step and the ranked
   finding. On phones the tiles wrap and the lines are left out. */
.flow { position: relative; margin: 0; }
.flow-groups { display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: var(--space-3); }
.flow-group { display: flex; align-items: center; gap: 10px; margin: 0 14px; font: 600 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.flow-group::before, .flow-group::after { content: ""; flex: 1; height: 7px; border-top: 1px solid var(--hairline); }
.flow-group::before { border-left: 1px solid var(--hairline); }
.flow-group::after { border-right: 1px solid var(--hairline); }
/* One label across all the sites. */
.flow-group { grid-column: 1 / -1; }
.flow-sites { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); margin: 0; padding: 0; list-style: none; }
.flow-site { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flow-tile { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-raised); color: var(--steel); }
.flow-tile svg { width: 22px; height: 22px; }
.flow-name { font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.flow-name span { color: var(--steel-deep); letter-spacing: .06em; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-lines path { fill: none; stroke: color-mix(in srgb, var(--steel-deep) 70%, transparent); stroke-width: 1; }
.flow-lines circle { fill: var(--steel-deep); }
.flow-lines .flow-pulse { stroke: var(--rose); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 28 var(--len); stroke-dashoffset: var(--len); animation: flow-pulse 3.6s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: var(--delay); opacity: .85; }
@keyframes flow-pulse { to { stroke-dashoffset: -28; } }
/* As on Linear, the cards hang off the main line a little left of the middle. */
.flow-out { position: relative; z-index: 1; margin-top: 96px; padding-left: calc(38% - 17px); }
.flow-stack { display: flex; flex-direction: column; gap: 22px; }
/* Starts right of the trunk, which runs through the middle of the 98px OREY pill below. */
.flow-ex { margin: 0 0 -8px 70px; }
.flow-card { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-raised); }
.flow-meta { font-size: 13px; color: var(--muted); }
.flow-said { margin-top: 8px; font: italic 400 var(--type-quote-size)/var(--type-quote-line) var(--font-name); color: var(--ink); }
.flow-event { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.flow-event strong { font-weight: 500; color: var(--ink); margin-right: 4px; }
/* The grouping step is OREY listening: the full logo (ear and the outlined wordmark, as
   in the top bar) on a pill, with a quiet version of the call orb's breathing from
   section 04: the ear swells about 6% and a rose ring widens and fades on the same beat.
   Still, like everything else, under reduced motion. */
.flow-dot { position: relative; display: inline-flex; align-items: center; gap: .42em; flex: none; height: 40px; padding: 0 16px 0 14px; font-size: 15px; letter-spacing: .14em; border: 1px solid color-mix(in srgb, var(--rose) 35%, var(--hairline)); border-radius: 999px; background: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--rose) 20%, var(--deep)), var(--deep) 70%); color: var(--rose); box-shadow: 0 0 0 5px color-mix(in srgb, var(--rose) 8%, transparent); }
.flow-dot svg { width: .72em; height: .9em; flex: none; transform-origin: 50% 55%; }
.flow-dot svg.gc-word { width: 3.24em; height: 1em; color: var(--ink); }
.flow-dot::before { content: ""; position: absolute; inset: -1px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .flow-dot svg:not(.gc-word) { animation: ear-breathe 3.6s ease-in-out infinite; }
  .flow-dot::before { animation: ear-ring 3.6s ease-out infinite; }
  @keyframes ear-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  @keyframes ear-ring { 0% { inset: -1px; opacity: .6; } 75%, 100% { inset: -11px; opacity: 0; } }
}
.flow-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.flow-rank { padding: 3px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--rose); font-size: 12px; }
.flow-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.flow-facts span { padding: 4px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-size: 12px; color: var(--muted); }
@media (max-width: 960px) {
  .flow-out { margin-top: var(--space-5); padding-left: 0; }
  .flow-lines, .flow-groups { display: none; }
  .flow-sites { grid-template-columns: repeat(4, 1fr); row-gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .flow-lines .flow-pulse { display: none; } }



/* 02 With OREY: the With OREY card on the left and the sites on the right, the layout of
   linear.app/customer-requests. */
.pv { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: stretch; }
@media (max-width: 960px) {
  .pv { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* 01 The problem, three steps: the claim, why, and the turn to the people who already
   know, with four of their voices in two columns. Without the pin (phones, reduced
   motion, no script) the steps simply stack. On wide screens g-home.js adds .is-pinned:
   the stage holds still under the header while the track scrolls past. Each statement
   fills the width and its words light up one after another as you scroll, the scroll
   read-through of linear.app and Apple's product pages (--r on the statement, --i and
   --n per word, .pw so the quote words below are left alone). Steps fade up from below and leave upwards the same way (--o, --y), the two columns of voices rise at different speeds (--ly, --ry),
   and a rail of three lines fills with the reading (--f). */
.ps-label { display: inline-flex; align-items: center; gap: 10px; }
.ps-label::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--steel-deep), var(--ice)); }
.ps-scenes { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-4); }
/* The statements share the home hero headline's type, so the page keeps one top size. */
.ps-big { max-width: 1100px; font: var(--type-hero-weight) clamp(42px, 6.4vw, var(--type-hero-size))/var(--type-hero-line) var(--font-sans); letter-spacing: var(--type-hero-tracking); }
.ps-voices > .section-title { font-size: clamp(32px, 4.4vw, 60px); }
.ps-steps { display: none; }
/* The hero's diagonal glow and grain, in the frosted ice of the text instead of violet
   and rose, and fainter. It drifts a little up and left as the steps go by (--ps-p). */
.ps-stage { position: relative; isolation: isolate; overflow: hidden; }
.ps-stage::before, .ps-stage::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.ps-stage::before {
  top: -20%; bottom: -10%; left: -30%; right: -10%;
  background:
    radial-gradient(50% 50% at 82% 100%, rgba(201, 214, 230, .085), transparent 70%),
    linear-gradient(150deg, transparent 40%, rgba(201, 214, 230, .03) 66%, rgba(201, 214, 230, .06) 86%, rgba(214, 224, 238, .09) 100%);
  transform: translate3d(calc(var(--ps-p, 0) * -36px), calc(var(--ps-p, 0) * -56px), 0);
  will-change: transform;
}
.ps-stage::after {
  inset: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ps.is-pinned { padding: 0; }
.ps.is-pinned .ps-track { height: 340vh; }
.ps.is-pinned .ps-stage { position: sticky; top: var(--ps-top, 72px); height: calc(100vh - var(--ps-top, 72px)); overflow: hidden; contain: layout paint; }
.ps.is-pinned .ps-wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ps.is-pinned .ps-label { position: absolute; top: var(--space-6); }
.ps.is-pinned .ps-scenes { display: grid; margin: 0; }
.ps.is-pinned .ps-scene { grid-area: 1 / 1; align-self: center; opacity: var(--o, 0); transform: translate3d(0, var(--y, 0px), 0); will-change: opacity, transform; }
/* Each word fades over the span of two, so the light runs along the line instead of
   stepping word by word. */
.ps.is-pinned .pw { opacity: calc(.14 + .86 * clamp(0, calc((var(--r, 1) * (var(--n, 1) + 2) - var(--i, 0)) / 2), 1)); }
.ps.is-pinned .lost-row:nth-child(odd) { transform: translate3d(0, var(--ly, 0px), 0); }
.ps.is-pinned .lost-row:nth-child(even) { transform: translate3d(0, var(--ry, 0px), 0); }
.ps.is-pinned .ps-steps { position: absolute; bottom: var(--space-6); display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ps-steps li { position: relative; width: 56px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--steel-deep) 45%, transparent); overflow: hidden; }
.ps-steps li::after { content: ""; position: absolute; inset: 0; background: var(--rose); transform: scaleX(var(--f, 0)); transform-origin: left; }
/* The same rail under the How it works laptop, one line per step (g-home.js). */
.how-steps { display: flex; gap: 8px; margin: var(--space-4) 0 0; padding: 0; list-style: none; }

/* The voices: two columns, a hairline over each. main.js reserves the tallest quote's
   height in --frag-h so the grid never jumps; the sizes sit on .fragment so it measures
   with them. */
.lost { margin: var(--space-5) 0 0; padding: 0; }
.lost-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.lost-row { border-top: 1px solid color-mix(in srgb, var(--steel-deep) 45%, transparent); padding-top: var(--space-4); }
.lost-row .fragment { position: relative; margin: 0; padding-left: 44px; border-left: 0; font-size: 24px; line-height: 1.4; color: var(--ink); }
.lost-row .fragment .quote-mark { display: block; position: absolute; left: 0; top: -6px; font: italic 400 56px/1 var(--font-name); color: var(--rose); }
/* No drift here: g-home.js swaps one quote at a time. The outgoing words blur and lift
   away, the new ones come in word by word from a soft blur. The quote mark stays put. */
.lost-row .fragment { opacity: 1; transform: none; animation: none; }
.lost-row .fragment .fragment-text { display: block; transition: opacity .45s ease, filter .45s ease, transform .45s ease; }
.lost-row .fragment.is-out .fragment-text { opacity: 0; filter: blur(6px); transform: translateY(-6px); }
.lost-row .fragment .w { display: inline-block; animation: word-in .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--w) * 32ms); }
@keyframes word-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@media (max-width: 960px) {
  .lost-rows { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .lost-row .fragment { padding-left: 34px; font-size: 21px; }
  .lost-row .fragment .quote-mark { font-size: 44px; top: -4px; }
}

/* With OREY card: titles wrap to two lines at every desktop width */
.pv .card .point .title { max-width: 440px; }

/* Phone sized to the six boxes: g-home.js scales the whole phone (zoom) so it matches their height */
@media (min-width: 961px) { .conversation-layout { grid-template-columns: auto 1fr; } }