/* ===========================================================================
   parleynotes.com — 2026-08 motion design.

   Loaded ONLY by the generated index/features pages. styles.css is deliberately
   left in place and untouched because demo.html still links it and depends on
   ~35 of its class names (.wrap, .btn, .hero, .nav, .foot, .tpl-card ...) that
   this file redefines with different meanings. Merging the two would silently
   break /demo, which is where every shared summary and launch link lands.

   Ported verbatim from the approved motion prototype; palette and type are the
   same tokens the app uses, so site and app cannot drift.
=========================================================================== */
/* ============================================================================
   PARLEY SITE MOTION PROTOTYPE

   ALL WRITTEN COPY IS THE LIVE parleynotes.com COPY, VERBATIM. Nothing here is
   rewritten. Every heading, kicker and paragraph is lifted from the site as it
   stands, because the copy is already good and only the motion is in question.
   The only new strings are inside the product panels, and those come from the
   app's own en.json, not from invention.

   Motion follows granola.ai's approach, which ships NO animation library at
   all: no GSAP, no Lenis, no Framer Motion. Plain CSS plus native scroll-driven
   timelines. So does this.

   FIVE TECHNIQUES
   1. GENERATING SWEEP. Gold runs through the glyphs once as text appears, so a
      write-up reads as being written. Parley's own generating state replayed.
   2. SCROLL REVEAL on native animation-timeline: view(), with an
      IntersectionObserver fallback for Safari.
   3. STEPPED SEQUENCE. Panels build line by line on a timer, the same
      progressive-disclosure mechanic as the ad-cards pipeline.
   4. OCCASION MORPH. The centrepiece. One recording, re-rendered as a client
      briefing, a lecture and a journal entry. This is not decoration: it is
      literally the sentence the site already makes, "you can change your mind
      afterwards and have the same recording rewritten", shown instead of told.
   5. LINE DRAW on the mood trend, via stroke-dashoffset.

   NOT USED, deliberately: perpetual idle float. Motion triggers and resolves.

   Tokens are lifted from src/index.css so site and app cannot drift.
============================================================================ */

:root {
  --canvas:        #EEF0EA;
  --surface:       #FFFFFF;
  --surface-muted: #E9ECE4;
  --ink:           #1F3F28;
  --ink-muted:     #5B6B5E;
  --ink-subtle:    #8A968C;
  --accent:        #C9A84C;
  --accent-strong: #B0913C;
  --line:          rgba(31, 63, 40, 0.10);
  --line-soft:     rgba(31, 63, 40, 0.07);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* granola's easeOutQuint */
  --ease-mid: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); }

/* ---- 1. GENERATING SWEEP ------------------------------------------------ */
@keyframes sweep { from { background-position: 220% 0; } to { background-position: -120% 0; } }
.writes {
  background-image: linear-gradient(100deg, var(--ink) 42%, var(--accent) 50%, var(--ink) 58%);
  background-size: 260% 100%; background-position: -120% 0;
  -webkit-background-clip: text; background-clip: text;
  /* -webkit-text-fill-color, NOT just color. `color` alone loses the cascade to
     any later same-specificity rule, which leaves a solid fill on top of the
     gradient and the sweep invisible. This holds regardless of cascade order. */
  -webkit-text-fill-color: transparent; color: transparent;
}
.on .writes { animation: sweep 1.05s var(--ease-out) both; }
.on .writes:nth-of-type(2) { animation-delay: .5s; }

/* ---- 2. SCROLL REVEAL --------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; }
@supports (animation-timeline: view()) {
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
}
/* Already on screen at first paint: opt out of the reveal completely.
   A view() timeline needs an "entry" phase, and an element that starts in the viewport never gets
   one (there is no scrolling above offset 0), so its timeline stays inactive and `fill: both`
   pins it at the `from` keyframe, i.e. opacity 0, permanently. That is what made the hero mock
   invisible. site.js stamps .rise-static on those elements before first paint. */
.rise.rise-static { animation: none !important; opacity: 1 !important; transform: none !important; }

@supports not (animation-timeline: view()) {
  .rise { transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .rise.seen { opacity: 1; transform: none; }
}

/* ---- 3. STEPPED SEQUENCE ------------------------------------------------ */
.stage > * { opacity: 0; transition: opacity .45s var(--ease-out); }
.stage[data-step="1"] > *:nth-child(-n+1), .stage[data-step="2"] > *:nth-child(-n+2),
.stage[data-step="3"] > *:nth-child(-n+3), .stage[data-step="4"] > *:nth-child(-n+4),
.stage[data-step="5"] > *:nth-child(-n+5), .stage[data-step="6"] > *:nth-child(-n+6) { opacity: 1; }

/* ---- nav, with the compact globe ---------------------------------------- */
header.nav { position: sticky; top: 0; z-index: 40; background: rgba(238,240,234,0.84); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; }
.lockup { display: inline-flex; align-items: center; gap: 10px; font-family: "Playfair Display", serif; font-weight: 700; font-size: 19px; color: inherit; text-decoration: none; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-muted); text-decoration: none; }
.nav-links a:hover { color: var(--accent-strong); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.btn { font-family: inherit; font-size: 14px; font-weight: 600; background: var(--ink); color: var(--canvas); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: background .18s ease, transform .18s var(--ease-out); }
.btn:hover { background: #24462E; transform: translateY(-1px); }
.btn:focus-visible, .lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* THE GLOBE. A <details> disclosure, so it opens and closes with no JS and is
   keyboard operable for free. Collapsed it is a 34px circle: the icon plus a
   two-letter code, which is the whole footprint in the bar. The live site
   currently spends five separate nav slots on EN DE FR ES PT. */
.lang { position: relative; }
.lang > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-muted);
  transition: border-color .18s ease, color .18s ease;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--ink); border-color: rgba(31,63,40,0.24); }
.lang svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 148px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px -16px rgba(31,63,40,0.30); padding: 6px; overflow: hidden;
  animation: pop .18s var(--ease-out) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--surface-muted); }
.lang-menu a[aria-current="true"] { color: var(--accent-strong); font-weight: 600; }
.lang-menu code { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-subtle); }

/* ---- hero --------------------------------------------------------------- */
.hero { padding-top: 104px; text-align: center; }   /* padding-top only, so .wrap keeps the 32px sides */
.hero h1 { font-size: clamp(38px, 5.6vw, 70px); line-height: 1.05; }
.hero .lede { font-size: 18px; line-height: 1.65; color: var(--ink-muted); max-width: 700px; margin: 24px auto 0; }   /* 700, not 620: the line measures 645px and was wrapping */

/* ---- hero: CTAs, the product mock, floating chips, claim strip ----------- */
.cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.btn-lg { font-family: inherit; font-size: 15.5px; font-weight: 600; border-radius: 999px; padding: 14px 28px; cursor: pointer; border: 0; }
.btn-lg.primary { background: var(--ink); color: var(--canvas); }
.btn-lg.primary:hover { background: #24462E; }
.btn-lg.ghost { background: rgba(255,255,255,0.55); color: var(--ink); border: 1px solid var(--line); }
.btn-lg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.platforms { font-size: 13px; color: var(--ink-subtle); margin-top: 16px; }

.heromock { position: relative; margin-top: 128px; }   /* room for the chips above the card */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 44px 96px -34px rgba(31,63,40,0.30); overflow: hidden; text-align: left; }
.mock-top { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.mock-top .title { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-subtle); }
.mock-top .pill-dev { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--ink); background: rgba(201,168,76,0.20); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.mock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mock-l { padding: 30px 32px; border-right: 1px solid var(--line-soft); }
.mock-r { padding: 30px 32px; background: #FAFAF7; }
.mock-l .h1x { font-family: "Playfair Display", serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.mock-l .meta { font-size: 12.5px; color: var(--ink-subtle); margin: 3px 0 24px; }
.dec { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.dec span.d { color: var(--accent); flex-shrink: 0; }
.arow { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; margin-top: 8px; }
.arow .box { width: 15px; height: 15px; border: 1.6px solid #C1C8BE; border-radius: 4px; flex-shrink: 0; }
.arow .txt { font-size: 13.5px; flex: 1; }
.arow .due { font-size: 11.5px; color: var(--ink-subtle); }
.tline { margin-bottom: 15px; }
.tline b { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.tline p { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
.askrow { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; margin-top: 22px; }
.askrow span { font-size: 13.5px; color: var(--ink-subtle); }

/* Floating chips. They rise in once, then hold a slow float.
   Two separate animations rather than one: chipIn finishes at 0.85s and bobf
   starts at 1s, so they never fight over `transform`. bobf is listed second, so
   once both are live it is the one that wins. */
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bobf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* top: -76px, not -34px. They used to hang over the card's top edge and cover
   its chrome; now they sit fully clear of it, and the 8px float never dips them
   back onto it. */
.chipf { position: absolute; z-index: 3; border-radius: 14px; padding: 13px 16px; opacity: 0;
  box-shadow: 0 20px 44px -16px rgba(31,63,40,0.30); }
.chipf.l { left: 6px; bottom: calc(100% + 14px); background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; }
.chipf.r { right: 6px; bottom: calc(100% + 14px); background: var(--ink); color: var(--canvas); }
.chipf .t1 { font-size: 12.5px; font-weight: 600; }
.chipf .t2 { font-size: 11px; color: var(--ink-subtle); }
.chipf.r .t2 { color: rgba(238,240,234,0.6); }
.on .chipf.l { animation: chipIn .7s var(--ease-out) .15s both, bobf 5.2s ease-in-out 1s infinite; }
.on .chipf.r { animation: chipIn .7s var(--ease-out) .35s both, bobf 6.1s ease-in-out 1.3s infinite; }
@media (max-width: 820px) { .chipf { display: none; } }

.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px;
  margin-top: 72px; text-align: left; }
.claims div { display: flex; gap: 13px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.claims svg { flex-shrink: 0; margin-top: 2px; }
.claims strong { color: var(--ink); font-weight: 600; }

/* ---- shared panel ------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 70px -32px rgba(31,63,40,0.26); overflow: hidden; }
.p-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-subtle); }
.p-body { padding: 24px 26px; }
.head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 9px; }
.body { font-size: 14px; line-height: 1.6; margin: 0; }
.row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-top: 7px; }
.tick { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); flex: 0 0 auto; }
.who { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent-strong); }
.pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(201,168,76,0.16); color: var(--accent-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
@keyframes blink { 50% { opacity: .25; } }
.on .dot { animation: blink 1.4s ease-in-out infinite; }

/* ---- section scaffold --------------------------------------------------- */
/* section.wrap, NOT section. These elements carry both, and a bare element
   selector loses to .wrap's `padding: 0 32px` on specificity, which silently
   discarded every bit of vertical rhythm and glued the sections together. */
section.wrap { padding-top: 156px; }
/* 860, not 660. At 660 the intro paragraphs stopped well short of the right
   edge on the full-width sections and left an obvious hole. 860 is about 107
   characters, wide for body copy but fine for a two-line intro, and it is the
   measure at which these paragraphs set as two FULL lines. The split sections
   are unaffected: their grid column is narrower than this cap anyway. */
.sec-head { max-width: 860px; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; margin: 12px 0 14px; }
.sec-head p { font-size: 16px; line-height: 1.7; color: var(--ink-muted); }
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 78px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 46px; } }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-muted); }
.ticks svg { flex: 0 0 auto; margin-top: 3px; }

/* ---- RECORD: agenda then recording -------------------------------------- */
.agenda { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.agenda .t { font-weight: 700; font-size: 13px; }
.agenda .mid { flex: 1; }
.agenda .ttl { font-size: 14px; font-weight: 600; }
.agenda .src { font-size: 11.5px; color: var(--ink-subtle); margin-top: 2px; }
.rec-btn { font-size: 11.5px; font-weight: 700; color: var(--canvas); background: var(--ink); border-radius: 999px; padding: 7px 15px; white-space: nowrap; }
.synced { font-size: 11px; color: var(--ink-subtle); margin-top: 9px; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 4px; }
.wave i { flex: 1; background: #DCE3DA; border-radius: 2px; height: 28%; }
.on .wave i { animation: bob 1.05s ease-in-out infinite alternate; }
@keyframes bob { to { height: 100%; } }
.line { font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin-top: 9px; }
.line b { color: var(--accent-strong); font-weight: 600; display: block; font-size: 11px; letter-spacing: .04em; }

/* ---- 4. OCCASION MORPH -------------------------------------------------- */
.occ-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface-muted); }
.occ-chips button {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  border-radius: 999px; padding: 6px 13px;
  transition: background .22s var(--ease-out), color .22s ease, border-color .22s ease;
}
.occ-chips button[aria-selected="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.occ-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* GRID stacking, not absolute positioning. Every pane occupies the same grid
   cell, so the container sizes itself to the TALLEST pane and the panel height
   never jumps as the occasion changes. Absolute panes with inset:0 would each
   be locked to the first pane's height instead, which clipped the Lecture
   write-up: it carries three sections where the briefing carries two. */
.occ-stack { display: grid; }
.occ-pane {
  grid-area: 1 / 1;
  padding: 24px 26px;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-out);
}
.occ-pane.live { opacity: 1; visibility: visible; }

/* ---- JOURNAL ------------------------------------------------------------ */
/* aspect-ratio 1.9, not 1. The square grid ate the whole panel and left no
   room for the supplements and patterns block underneath. */
.mood { position: relative; aspect-ratio: 1.9; border: 1px solid var(--line); border-radius: 14px; background:
  linear-gradient(135deg, rgba(201,168,76,0.10), rgba(31,63,40,0.05)); }
.jdiv { height: 1px; background: var(--line-soft); margin: 17px 0 15px; }
/* The journal used the split layout, but its card ran ~770px tall against ~200px
   of text, which left a large void down the right. Breaking the one tall card
   into two side by side under a full-width heading uses the measure properly,
   and it puts the section in the same shape as Occasions, so the page alternates
   split, full, split, full. */
.jgrid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .jgrid { grid-template-columns: 1fr; } }
.jgrid .panel { display: flex; flex-direction: column; }
.jgrid .p-body { flex: 1; display: flex; flex-direction: column; }
.jgrid .spacer { flex: 1; min-height: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--ink-subtle); }
.chips span.done { background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.34); color: var(--accent-strong); }
.foot { font-size: 10.5px; color: var(--ink-subtle); margin-top: 9px; }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.prow:last-of-type { border-bottom: 0; }
.prow em { font-style: normal; font-size: 11px; color: var(--ink-subtle); }
.pnote { font-size: 12.5px; line-height: 1.6; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--accent); }
.mood span { position: absolute; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.mood .tl { top: 9px; left: 11px; } .mood .tr { top: 9px; right: 11px; }
.mood .bl { bottom: 9px; left: 11px; } .mood .br { bottom: 9px; right: 11px; }
.mood i { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(201,168,76,0.22); left: 62%; top: 34%; opacity: 0; transform: scale(.4); }
.on .mood i { animation: drop .6s var(--ease-out) .35s both; }
@keyframes drop { from { opacity: 0; transform: scale(.4) translateY(-14px); } to { opacity: 1; transform: scale(1); } }
.trend { width: 100%; height: 66px; margin-top: 14px; }
.trend path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.on .trend path { animation: draw 1.5s var(--ease-mid) .5s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- ASK ---------------------------------------------------------------- */
.dark { background: var(--ink); color: var(--canvas); border-color: transparent; }
.dark .p-head { color: rgba(238,240,234,0.55); border-color: rgba(238,240,234,0.12); }
.qa { background: rgba(238,240,234,0.09); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.ans { border-left: 2px solid var(--accent); padding-left: 13px; font-size: 13.5px; line-height: 1.65; color: rgba(238,240,234,0.86); margin-top: 11px; }
.cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 11px; font-weight: 600; color: var(--accent); border: 1px solid rgba(201,168,76,0.35); border-radius: 999px; padding: 4px 10px; }

/* ---- feature tiles, web app, pricing, faq -------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: #F5F4EF; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  /* grid-auto-rows: 1fr equalises height ACROSS rows, not just within one. A
     plain grid already stretches cells in a row to match each other, but rows
     still differed from one another, which is what made the block look uneven. */
  grid-auto-rows: 1fr; }
/* Hairlines come from a 1px spread shadow on each tile, NOT from showing the container
   background through the gaps. The old trick assumed the tile count exactly filled the last
   row ("12 tiles at four columns is exactly three rows"); with 14 tiles the two leftover
   slots rendered the line-colour background as one dark empty block. Now the container is
   tile-coloured, so leftover slots read as a clean empty cell, and the shadows still fill
   every 1px gap between real tiles. */
.tile { background: #F5F4EF; padding: 24px 22px; box-shadow: 0 0 0 1px var(--line); }
.tile h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 7px; }
.tile p { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }

.pcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.pccard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.pccard svg.ico { color: var(--accent-strong); margin-bottom: 14px; }
.pccard h3 { font-size: 21px; margin-bottom: 10px; }
.pccard p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
/* Google's SUPPLIED artwork, from the bucket the live site already serves it
   from. The badge must never be retyped or redrawn, so it is an img. */
.pccard img.badge { display: block; height: 52px; width: auto; margin: 18px 0; }
.pccard .req { font-size: 12px; line-height: 1.55; color: var(--ink-subtle); }

.pricing { background: var(--ink); color: var(--canvas); border-radius: 22px; padding: clamp(40px, 5vw, 68px);
  text-align: center; position: relative; overflow: hidden; }
.pricing h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; max-width: 700px; margin: 0 auto 16px; }
.pricing p { font-size: 15.5px; line-height: 1.65; color: rgba(238,240,234,0.72); max-width: 580px; margin: 0 auto; }
.pricing .fine { font-size: 12.5px; color: rgba(238,240,234,0.5); margin-top: 22px; }
.pricing .ghostP { position: absolute; right: -40px; bottom: -120px; font-family: "Playfair Display", serif;
  font-size: 320px; line-height: 1; color: rgba(238,240,234,0.05); pointer-events: none; user-select: none; }

.faq { border-top: 1px solid var(--line); }
.faq-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px;
  padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq-row h3 { font-size: 17.5px; font-weight: 600; }
.faq-row p { font-size: 14.5px; line-height: 1.7; color: var(--ink-muted); }
@media (max-width: 760px) { .faq-row { grid-template-columns: 1fr; gap: 10px; } }

/* Buttons are anchors now, so they need to behave like buttons visually and
   like links functionally. A <button> with no handler is a dead end. */
.btn, .btn-lg { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---- closing block + real site footer ----------------------------------- */
.closing { padding-top: 150px; padding-bottom: 8px; text-align: center; }
.closing h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; }
.closing p { font-size: 17px; color: var(--ink-muted); margin: 16px 0 30px; }

.sitefoot { border-top: 1px solid var(--line); margin-top: 92px; }
.sitefoot-in { max-width: 1160px; margin: 0 auto; padding: 46px 32px 34px;
  display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; }
.sitefoot .brand { max-width: 262px; }
.sitefoot .brand p { font-size: 13px; color: var(--ink-subtle); line-height: 1.55; margin-top: 11px; }
.sitefoot .col { display: flex; flex-direction: column; gap: 9px; }
.sitefoot .col b { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-subtle); margin-bottom: 3px; }
.sitefoot .col a { font-size: 13.5px; color: var(--ink-muted); text-decoration: none; }
.sitefoot .col a:hover { color: var(--accent-strong); }
.legalnote { border-top: 1px solid var(--line-soft); }
.legalnote div { max-width: 1160px; margin: 0 auto; padding: 18px 32px 36px;
  font-size: 11.5px; color: var(--ink-subtle); line-height: 1.65; }
.note { max-width: 1160px; margin: 70px auto 0; padding: 22px 32px 0; font-size: 13px; color: var(--ink-subtle); border-top: 1px solid var(--line); line-height: 1.75; }

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .stage > * { opacity: 1 !important; }
  .writes { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
  .mood i { opacity: 1; transform: none; }
  .trend path { stroke-dashoffset: 0; }
  /* every occasion pane readable in sequence rather than cross-fading, so the
     grid cell is released and the panes flow down the page */
  .occ-stack { display: block; }
  .occ-pane { opacity: 1 !important; visibility: visible !important; border-top: 1px solid var(--line-soft); }
}

/* ---- features page only ---- */
/* ---- features page additions ------------------------------------------- */
.subhero { padding-top: 92px; text-align: center; }
.subhero h1 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.06; }
.subhero .lede { font-size: 17.5px; line-height: 1.68; color: var(--ink-muted); max-width: 720px; margin: 22px auto 0; }
.crumb { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.badgerow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.badgerow img { height: 52px; width: auto; display: block; }

.occ-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-subtle); margin-top: 16px; max-width: 640px; }
.occ-note.fine { font-size: 11.5px; margin-top: 8px; }
.occ-pane h4 { font-family: "Playfair Display", serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0; }
.occ-pane .om { font-size: 12px; color: var(--ink-subtle); margin: 3px 0 18px; }
.mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mrow:last-child { border-bottom: 0; }
.mrow b { font-weight: 600; }
.mrow em { font-style: normal; font-size: 11.5px; color: var(--ink-subtle); }

.conn { display: flex; flex-direction: column; gap: 8px; }
.conn > div { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.conn .tag { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-muted); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink-muted); flex: 0 0 auto; }
.conn .cn { font-size: 13.5px; font-weight: 600; }
.conn .cd { font-size: 11.5px; color: var(--ink-subtle); margin-top: 2px; }

.fold { display: flex; flex-direction: column; gap: 8px; }
.fold > div { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; }
.fold .tpl { font-size: 11px; font-weight: 700; color: var(--accent-strong); background: rgba(201,168,76,0.16);
  border-radius: 999px; padding: 4px 10px; }

.members { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
.members span { font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; color: var(--ink-muted); }
.insight { font-size: 13px; line-height: 1.55; padding-left: 12px; border-left: 2px solid var(--accent); margin-top: 10px; }

.cues { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cues span { font-size: 11.5px; font-weight: 600; border: 1px solid rgba(238,240,234,0.22); border-radius: 999px;
  padding: 5px 11px; color: rgba(238,240,234,0.72); }

.email { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.email .eh { font-size: 11.5px; color: var(--ink-subtle); padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: #FAFAF7; }
.email .er { font-size: 12.5px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
.email .er b { font-weight: 600; }
.email .eb { font-size: 13px; line-height: 1.6; color: var(--ink-muted); padding: 13px 14px; }
.email .ea { display: flex; gap: 8px; padding: 0 14px 14px; }
.email .ea span { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 15px; }
.email .ea .edit { border: 1px solid var(--line); color: var(--ink-muted); }
.email .ea .ok { background: var(--ink); color: var(--canvas); }
.invite { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin-top: 9px; font-size: 12.5px; color: var(--ink-muted); }

.privgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; grid-auto-rows: 1fr; }
.priv { background: var(--surface); padding: 26px 24px; }
.priv h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.priv p { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.priv svg { color: var(--accent-strong); margin-bottom: 13px; display: block; }

.rest { display: flex; flex-wrap: wrap; gap: 8px; }
.rest span { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  background: var(--surface); color: var(--ink-muted); }


/* ---- /compare/otter -------------------------------------------------------
   A three-column comparison cannot be squeezed into 375px and stay readable, so the table gets
   its own horizontal scroll container rather than forcing the page body to scroll sideways. The
   note rows are full-width by design: they carry the concessions and the caveats, which is the
   part that makes the page credible, so they must not be the first thing that gets cropped. */
.cmp-hero { padding-top: 96px; max-width: 860px; }
.cmp-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 10px 0 18px; }
.cmp-hero .lede { font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin: 0; max-width: none; }
.cmp-caveat { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-muted); background: var(--surface-muted); border: 1px solid var(--line); }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 13.5px; }
.cmp thead th { text-align: left; padding: 14px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-subtle); border-bottom: 1px solid var(--line); }
.cmp thead th.c-us { color: var(--accent-strong); }
.cmp th[scope="row"] { text-align: left; width: 20%; padding: 15px 16px; font-weight: 600; color: var(--ink);
  vertical-align: top; border-top: 1px solid var(--line-soft); }
.cmp td { padding: 15px 16px; vertical-align: top; line-height: 1.6; color: var(--ink-muted);
  border-top: 1px solid var(--line-soft); }
.cmp td.c-us { color: var(--ink); background: rgba(201,168,76,0.055); }
.cmp tr.c-note td { padding-top: 0; border-top: 0; font-size: 12.5px; color: var(--ink-subtle); font-style: italic; }
.cmp-verified { margin-top: 14px; font-size: 12px; color: var(--ink-subtle); line-height: 1.6; }
.cmp-legal { max-width: 760px; padding: 22px 24px; border-radius: 16px; background: var(--surface-muted); border: 1px solid var(--line); }
.cmp-legal h2 { font-size: 20px; margin-bottom: 10px; }
.cmp-legal p { font-size: 13px; line-height: 1.7; color: var(--ink-muted); }
.cmp-legal a { color: var(--accent-strong); }

/* ---------- /compare : the all-rivals matrix ------------------------------
 * Six columns instead of three, so .cmp's defaults do not survive: 720px min-width would give
 * each column ~120px. Selectors are doubled (.cmp.cmp-matrix) deliberately - the phone media
 * block further down sets `.cmp { min-width: 660px }`, and a single class would lose to it on
 * source order at exactly the width where the matrix needs the min-width MOST.
 *
 * The attribute column is sticky. On a phone the reader is scrolling a wide table sideways, and
 * without it the row labels leave the screen and the cells become five anonymous verdicts.
 */
.cmp.cmp-matrix { min-width: 1080px; font-size: 12.5px; }
.cmp.cmp-matrix thead th { padding: 13px 14px; white-space: nowrap; }
.cmp.cmp-matrix td { padding: 13px 14px; line-height: 1.5; }
.cmp.cmp-matrix th[scope="row"] {
  width: 148px; min-width: 148px; padding: 13px 14px; font-size: 12.5px;
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  border-right: 1px solid var(--line);
}
/* The Parley column is tinted, not bolded or ticked: it marks which column is ours without
   implying its cells are the good answers. Five of the fourteen rows below are losses. */
.cmp.cmp-matrix td.c-us, .cmp.cmp-matrix thead th.c-us {
  background: rgba(201,168,76,0.075);
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}

.cmp-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cmp-link {
  display: inline-block; padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.cmp-link:hover, .cmp-link:focus-visible { color: var(--accent-strong); border-color: var(--accent-strong); }

@media (max-width: 640px) {
  .cmp-hero { padding-top: 40px; }
  .cmp-caveat { font-size: 13px; }
  .cmp { min-width: 660px; }
  .cmp.cmp-matrix { min-width: 940px; font-size: 12px; }
  .cmp.cmp-matrix th[scope="row"] { width: 124px; min-width: 124px; }
  .cmp-link { font-size: 12.5px; padding: 8px 13px; }
  .cmp-legal { padding: 18px 18px; }
}

/* ==========================================================================
   PHONE PASS (<= 640px)

   Added 2026-08-24. The design was built desktop-first; this is the small-screen
   pass it never had. Additive only: every rule is inside the media block, so the
   desktop layout above is untouched.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- 1. stop the sideways bleed -------------------------------------- */
  /* The page scrolled 10px wider than the viewport. Two causes: the header's
     right cluster, and the decorative Playfair "P" that is deliberately parked
     outside the pricing card (right:-40px). Belt and braces so a future
     overhang cannot reintroduce a horizontal scrollbar on a phone. */
  html, body { overflow-x: hidden; }
  .wrap { padding: 0 20px; }              /* 32px sides are too generous at 375 */
  .pricing .ghostP { display: none; }     /* decorative, and it forced an inner scroll */

  /* ---- 2. the header --------------------------------------------------- */
  /* The web-app button wrapped to four lines inside a 999px radius, which is
     what produced the dark blob in the screenshot. There is no room for it at
     this width, and it is not lost: the hero's "Download free" is the primary
     action and the footer carries the web-app link. */
  .nav-right .btn { display: none; }
  /* padding must be set HERE, not left to .wrap. The base rule is `.nav-in { padding: 13px 0 }`,
     a shorthand at equal specificity that lands after .wrap and therefore zeroes the side
     padding .wrap provides. That is why the logo sat flush against the screen edge and the
     language pill touched the right edge, while the copy below was correctly inset. */
  .nav-in { gap: 10px; padding: 11px 20px; }
  /* The lockup sat at x=0 with the icon visually clipped by the viewport edge.
     .wrap's padding now holds it in, and the wordmark stops wrapping to 2 lines. */
  .lockup { font-size: 16.5px; white-space: nowrap; gap: 7px; }
  .lockup svg { width: 22px; height: 22px; }
  /* Four links (More features / Pricing / Privacy / FAQ) cannot share one row with the logo
     and the language pill at this width. The link row wraps onto its own full-width line under
     the logo row; flex-wrap inside it covers the long DE/FR labels on 320px screens. */
  .nav-in { flex-wrap: wrap; row-gap: 2px; }
  .nav-links { order: 3; flex: 1 1 100%; justify-content: center; flex-wrap: wrap;
    gap: 5px 16px; font-size: 13.5px; padding-bottom: 2px; }
  /* The language control is the one header element you actually tap. 34px was under the
     comfortable touch size, and the EN/DE codes in the open menu were the smallest text on the
     whole page at 10.5px. */
  .lang > summary { padding: 9px 11px; min-height: 40px; box-sizing: border-box; }
  .lang-menu code { font-size: 11.5px; }

  /* ---- 3. vertical rhythm ---------------------------------------------- */
  /* 156px between sections is a desktop measure; on a phone it reads as the page
     having ended. */
  section.wrap { padding-top: 72px; }
  .hero { padding-top: 44px; }
  .closing { padding-top: 76px; }
  .sitefoot { margin-top: 56px; }
  .sec-head { margin-bottom: 30px; }
  .heromock { margin-top: 40px; }         /* 128px existed to clear the floating chips, which are already hidden below 820px */

  /* ---- 4. type ---------------------------------------------------------- */
  .hero .lede { font-size: 16.5px; margin-top: 18px; }
  .sec-head p { font-size: 15.5px; }
  .platforms { font-size: 12.5px; }
  /* Nothing on a phone should sit under ~11px. The panels bottomed out at 10px.
     .head is the same uppercase eyebrow style as .kicker and appears 26 times. */
  /* .foot here is the features-page caption under a panel, not the site footer. */
  .kicker, .head, .foot { font-size: 11px; }
  .mock-top .title, .mock-l .meta { font-size: 12px; }

  /* ---- 5. stacking ------------------------------------------------------ */
  .split { grid-template-columns: 1fr; gap: 34px; }
  .mock-grid { grid-template-columns: 1fr; }
  .mock-l { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .mock-l, .mock-r { padding: 22px 20px; }
  .p-body { padding: 18px 18px; }
  .cta { flex-direction: column; gap: 10px; }
  .cta .btn-lg { width: 100%; }           /* full-width targets beat two cramped pills */
  .sitefoot-in { grid-template-columns: 1fr; gap: 28px; padding: 34px 20px 26px; }
  .sitefoot .brand { max-width: none; }
  .legalnote div { padding: 16px 20px 30px; }

  /* ---- 6. the dense product recreations -------------------------------- */
  /* Desktop illustrations of a phone UI, rendered at 10px on an actual phone.
     Hidden in record / ask / journal only. The hero mock and the occasion morph
     stay: those two are the product shot and the core argument respectively.
     Their sections keep every word of copy. */
  #record .panel,
  #ask .panel,
  #journal .panel,
  #journal .jgrid { display: none; }

  /* With the illustration gone the column has nothing to sit beside, so the
     copy should use the full width rather than hold a gap for an absent image. */
  #record .split, #ask .split, #journal .split { gap: 0; }

  /* ---- 7. touch targets ------------------------------------------------- */
  .occ-chips button { min-height: 40px; }
  .lang-menu a { padding: 11px 10px; }
  .faq-row h3 { font-size: 16px; }
}

/* Tablet / small-laptop range. Same root cause as the phone header: `.nav-in { padding: 13px 0 }`
   cancels the side padding .wrap provides, which is deliberate on a real desktop because .wrap is
   capped at 1160px and centred, so the header aligns to the container edge while the content sits
   32px inside it. Below 1224px (1160 + 2x32) that cap stops applying, the container becomes full
   width, and the header content ends up flush against the screen edge while the copy below is
   still inset. Restore the inset only in that range; the >=1224px desktop layout is untouched. */
@media (min-width: 641px) and (max-width: 1223px) {
  .nav-in { padding-left: 32px; padding-right: 32px; }
}

/* Very narrow phones (iPhone SE and the 360px Android class): the hero headline
   is the only thing that still crowds, and the FAQ two-column grid has already
   collapsed above. */
@media (max-width: 380px) {
  .hero h1 { font-size: 33px; }
  .wrap { padding: 0 16px; }
  .nav-in { padding: 11px 16px; }   /* keep the header inset matched to .wrap, same reason as above */
  /* At 320px the three header items plus their gaps measured 295px against 288px of content box,
     so the language pill pushed 9px into the right padding and the header looked lopsided (16px
     inset on the left, 7px on the right). Trimming the wordmark and the gaps brings it to ~281. */
  .lockup { font-size: 15.5px; }
  .lockup svg { width: 20px; height: 20px; }
  .nav-links { gap: 10px; }
}