/* Plando's public site, direction А «Віяло» on coral (picked 31.10.2026).
   design/site/pages.mjs appends the fan's geometry and the day's times. Fixel by
   MacPaw and Inter Tight (the letters of «Plando» only): SIL OFL 1.1, the
   licences are next to the fonts. Flat like the mark: no shadows, no gradients,
   square slats; rounded only where the app is (chips, buttons). */
@font-face { font-family: 'Fixel Display'; font-weight: 600; font-display: swap; src: url(/assets/fonts/FixelDisplay-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Display'; font-weight: 700; font-display: swap; src: url(/assets/fonts/FixelDisplay-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Text'; font-weight: 300; font-display: swap; src: url(/assets/fonts/FixelText-Light.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Text'; font-weight: 400; font-display: swap; src: url(/assets/fonts/FixelText-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Text'; font-weight: 500; font-display: swap; src: url(/assets/fonts/FixelText-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Fixel Text'; font-weight: 600; font-display: swap; src: url(/assets/fonts/FixelText-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 700; font-display: block; src: url(/assets/fonts/InterTight-Bold-Plando.woff2) format('woff2'); }

:root {
  /* The coral (--coral, --coral-deep: carries white text 5:1, --coral-text: sits on
     cream and white, --coral-soft) and the areas' colours (--a-<area>, with an
     .a-<area> class each) come from the app's palette: pages.mjs appends them. */
  /* The icon's tile (depth.mjs CREAM) */
  --cream: #F6EEE6; --paper: #FFFFFF;
  --ink: #221A17; --ink-2: #63544E; --line: #E4D8CE;
  --display: 'Fixel Display', 'Segoe UI', system-ui, sans-serif;
  --text: 'Fixel Text', 'Segoe UI', system-ui, sans-serif;
  --mark: 'Inter Tight', 'Fixel Display', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1184px;
  /* Motion: the fan's curve for things arriving, a symmetric one for things
     travelling, and a spring for small things that pop in */
  --ease-out: cubic-bezier(.2, .75, .15, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
    1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  interpolate-size: allow-keywords;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
code { font: 0.92em/1 Consolas, 'Cascadia Mono', monospace; padding: 0.1em 0.3em; border-radius: 4px; background: rgba(34, 26, 23, .06); }

/* Shared pieces ------------------------------------------------------------ */
.lockup { display: inline-flex; align-items: center; gap: 10px; font: 700 23px/1 var(--mark); letter-spacing: -0.02em; text-decoration: none; }
.lockup img { width: 32px; height: 32px; }
.btn { display: inline-flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 9px 24px 10px; border-radius: 14px; text-decoration: none;
  font-weight: 600; font-size: 17px; line-height: 1.25; background: var(--coral-deep); color: #fff;
  transition: background-color .2s ease, transform .18s var(--ease-out); }
.btn small { font-size: 13px; font-weight: 400; opacity: .9; }
.btn:hover { background: #A84119; }
.btn:active { transform: scale(.97); }
.dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--a-other)); }
.when { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-text); font-weight: 500; white-space: nowrap; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.aside { font-size: 15px; color: var(--ink-2); max-width: 40em; }
kbd { display: inline-block; min-width: 1.9em; padding: 0.05em 0.45em; border: 1.5px solid currentColor; border-radius: 6px; box-shadow: 0 2px 0 currentColor;
  font: 600 0.82em/1.4 var(--text); text-align: center; vertical-align: 0.12em; }

/* The language menu: the current language by its own name; open, every language
   by its own name, each to the same page in that language. No flags (languages
   aren't countries), no «EN»/«UK». <details> works without the script; site.js
   closes it on Esc, on a click outside and when focus leaves. Past ~10 languages
   it wants a search field at the top of the list. */
.langs { position: relative; }
.langs summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 500; border-radius: 8px; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ''; width: 7px; height: 7px; margin: -3px 2px 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s ease; }
.langs[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.globe { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.langs ul { position: absolute; z-index: 50; inset-inline-end: 0; top: calc(100% + 6px); min-width: 220px; max-height: min(70vh, 480px); overflow-y: auto;
  padding: 6px; list-style: none; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; transform-origin: 100% 0; }
.motion .langs[open] ul { animation: menu-in .22s var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.langs li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 16px; }
.langs li a:hover { background: var(--cream); }
.langs li a[aria-current] { font-weight: 600; }
.langs li a[aria-current]::after { content: ''; width: 12px; height: 7px; margin-top: -4px; border: solid var(--coral-deep); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.langs li a:focus-visible { outline-offset: -2px; }

/* А «Віяло»: the first screen ----------------------------------------------
   Plando's mark at full size: five flat slats with square corners, turned about
   the bottom centre, nothing below it, each clearing a gap round itself in the
   slats under it (a spread shadow in the field's colour), as foldingMark draws
   the mark. A size container, so the fan scales with the screen, not the text. */
.hero-frame { container-type: size; position: relative; height: clamp(700px, 100svh, 980px); overflow: hidden; background: var(--coral-deep); }
.hero { --pad: var(--gutter); position: absolute; inset: 0; color: #fff; }
.top { position: absolute; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--pad); }
.ha-copy { position: absolute; z-index: 15; left: var(--pad); top: clamp(120px, 21cqh, 190px); width: min(720px, 56cqw); display: flex; flex-direction: column; gap: 22px; }
.ha-copy h1 { font: 700 clamp(44px, 5.5cqw, 84px)/0.98 var(--display); letter-spacing: -0.03em; }
.ha-copy h1 span { display: block; }
.ha-copy h1 .ln { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.motion .ha-copy h1 .ln > span { transform: translateY(108%); transition: transform 1s var(--ease-out); }
.motion .ha-copy h1 .ln + .ln > span { transition-delay: .09s; }
.motion .ha-copy > p, .motion .hero .get { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out) .4s, transform .9s var(--ease-out) .4s; }
.motion .hero .get { transition-delay: .5s; }
.motion .hero-a.in .ha-copy h1 .ln > span, .motion .hero-a.in .ha-copy > p, .motion .hero-a.in .get { opacity: 1; transform: none; }
.ha-copy p { max-width: 25em; font-size: 19px; color: rgba(255, 255, 255, .94); }
.hero .get { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 10px; }
/* White on the coral: the hero's and the download section's */
.hero .btn, .sec-get .btn { background: #fff; color: var(--ink); }
.hero .btn:hover, .sec-get .btn:hover { background: var(--cream); }
.soon { font-size: 15px; font-weight: 500; }
.ha-fan { --h: 62cqh; --w: calc(var(--h) * var(--ratio)); position: absolute; z-index: 1; left: 72cqw; bottom: 0; width: 0; height: 0; }
.ha-slat {
  position: absolute; left: calc(var(--w) / -2); bottom: 0; width: var(--w); height: var(--h); overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: var(--cream); color: var(--ink);
  transform-origin: 50% 100%; transform: rotate(var(--a));
  box-shadow: 0 0 0 calc(var(--w) * var(--gap)) var(--coral-deep);
  transition: transform 1.1s var(--ease-out) var(--d);
}
/* With the script the fan starts folded and opens once; without it, it's open */
.js .hero-a:not(.open) .ha-slat { transform: translateY(36px) rotate(0deg); }
.motion .ha-slat { will-change: transform; }
/* The front card, as Plando makes it: the words, then the title, the time, the area */
.motion .ha-slat.is-front q .w { opacity: 0; filter: blur(4px); transition: opacity .35s ease, filter .35s ease; transition-delay: calc(var(--i, 0) * 120ms); }
.motion .ha-slat.is-front q::before, .motion .ha-slat.is-front q::after { opacity: 0; transition: opacity .3s ease; }
.motion .hero-a.typing .ha-slat.is-front q .w { opacity: 1; filter: none; }
.motion .hero-a.typing .ha-slat.is-front q::before, .motion .hero-a.typing .ha-slat.is-front q::after { opacity: 1; }
.motion .ha-slat.is-front > :not(q) { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 110ms); }
.motion .ha-slat.is-front > .when { transform: scale(.6); transform-origin: 0 50%; transition: opacity .25s ease calc(var(--k, 0) * 110ms), transform .7s var(--spring) calc(var(--k, 0) * 110ms); }
.motion .hero-a.carded .ha-slat.is-front > :not(q) { opacity: 1; transform: none; }
/* The other cards' kinds: a habit, the shopping list, a task with details and a photo */
.ico { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-details { font-size: 14px; line-height: 1.35; color: var(--ink-2); margin: 0; }
.fc-remind { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--coral-text); }
.fc-attach { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: rgba(34, 26, 23, .07); font-size: 13px; color: var(--ink-2); }
.fc-group { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fc-group span { font-weight: 400; }
.k-habit b { display: inline-flex; align-items: center; gap: 8px; }
.fc-tick { flex: none; position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #B9AAA4; transition: background-color .3s ease, box-shadow .3s ease; }
.fc-tick::after { content: ''; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--spring); }
.fc-list { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 5px; font-size: 14px; line-height: 1.3; }
.fc-list li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fc-list i { flex: none; position: relative; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #B9AAA4; transition: background-color .3s ease, box-shadow .3s ease; }
.fc-list i::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .4s var(--spring); }
.fc-list span { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size .45s var(--ease-out) .1s, color .3s ease; }
/* After the front card is made, the list ticks off an item and the habit is done for today */
.hero-a.ticked .fc-list .li-tick span { color: var(--ink-2); background-size: 100% 1px; }
.hero-a.ticked .fc-list .li-tick i { background-color: var(--coral-deep); box-shadow: none; }
.hero-a.ticked .fc-list .li-tick i::after, .hero-a.ticked .fc-tick::after { transform: rotate(45deg) scale(1); }
.hero-a.ticked .k-habit .fc-tick { background-color: var(--a-health); box-shadow: none; }
.ha-slat.is-right { text-align: right; align-items: flex-end; }
.ha-slat:not(.is-front) > * { max-width: 72%; }
.ha-slat[data-at="-1"] > *, .ha-slat[data-at="1"] > * { max-width: 88%; }
/* The screen's edge cuts the outer slats (the right one on a PC, both on a phone): they stay blank */
.ha-slat[data-at="2"] > * { display: none; }
.ha-slat b { font-weight: 600; font-size: 18px; line-height: 1.25; }
.ha-slat .meta { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.ha-slat.is-front { gap: 10px; }
.ha-slat q { font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid rgba(34, 26, 23, .16); text-wrap: balance; }
.ha-slat.is-front b { font-size: 22px; }
.ha-slat .when { align-self: flex-start; background: rgba(189, 74, 31, .12); }
.ha-slat.is-right .when { align-self: flex-end; }
@container (max-width: 759px) {
  .top { padding-block: 14px; }
  .lockup { font-size: 21px; }
  .lockup img { width: 28px; height: 28px; }
  .ha-copy { top: 84px; right: var(--pad); width: auto; gap: 16px; }
  .ha-copy h1 { font-size: clamp(40px, 12cqw, 52px); }
  .ha-copy p { font-size: 16px; }
  .hero .get { margin-top: 4px; gap: 12px; }
  .ha-fan { --h: min(300px, 38cqh); left: 50cqw; }
  .ha-slat { padding: 12px 10px; gap: 4px; }
  .ha-slat[data-at="-2"] > * { display: none; }
  .ha-slat b { font-size: 14px; }
  .ha-slat .meta { font-size: 12px; gap: 5px; }
  .ha-slat q { font-size: 12px; padding-bottom: 8px; }
  .ha-slat.is-front b { font-size: 16px; }
  .ha-slat .when { padding: 2px 7px; }
  .ha-slat .fc-details, .ha-slat:not(.is-front) .fc-attach, .fc-list li:nth-child(n+3), .fc-group { display: none; }
  .fc-list { font-size: 12px; gap: 3px; }
  .fc-remind { font-size: 11px; }
}

/* Sections ----------------------------------------------------------------- */
.sec { padding-block: clamp(72px, 10vw, 136px); }
.sec h2 { font: 700 clamp(34px, 4.6vw, 60px)/1.04 var(--display); letter-spacing: -0.025em; max-width: 15em; text-wrap: balance; }
.sec h2 + .lead { margin-top: 18px; }
.sec h3 { font: 600 15px/1.3 var(--text); color: var(--ink-2); }

/* One phrase, several things: three said phrases, what Plando heard in each,
   and the app on the right filling up with the cards. Without motion every
   phrase is listed with its underlines and chips, and the app is full. */
.sec-phrase { background: var(--paper); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); align-items: center; gap: 40px clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 56px); }
.ph-col { min-width: 0; }
.ph + .ph { margin-top: 44px; }
.said { font: 300 clamp(28px, 3.4vw, 46px)/1.6 var(--text); letter-spacing: -0.02em; }
.seg { position: relative; white-space: nowrap; background: linear-gradient(var(--u), var(--u)) 0 88% / 100% 3px no-repeat; --u: var(--ink); --u-text: var(--ink-2); }
.seg-time { --u: var(--coral); --u-text: var(--coral-text); }
.seg-kind, .seg-note { --u: var(--a-family); --u-text: #A3305D; }
.lab { position: absolute; left: 0; top: calc(100% - 4px); font: 500 14px/1 var(--text); letter-spacing: 0; color: var(--u-text); white-space: nowrap; }
@media (max-width: 700px) { .said { line-height: 1.95; } .lab { top: 100%; font-size: 13px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.chip { padding: 5px 12px; border-radius: 999px; background: var(--cream); font-size: 14px; font-weight: 500; white-space: nowrap; }
.chip:first-child { background: var(--ink); color: #fff; }
.sec-phrase .aside { margin-top: 32px; }
/* The app: Plando's own look, its sections, rows and the field at the bottom */
.mk { justify-self: center; width: min(340px, 100%); }
.mk-screen { display: flex; flex-direction: column; height: clamp(430px, 60vh, 560px); padding: 18px 14px 14px; border: 8px solid var(--ink); border-radius: 34px; background: #F8F3F1; }
.mk-top { display: flex; align-items: center; gap: 8px; padding: 0 6px; font: 700 18px/1 var(--mark); letter-spacing: -0.02em; }
.mk-top img { width: 20px; height: 20px; }
.mk-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; overflow: hidden; }
.mk-label { display: block; margin: 0 0 4px 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.mk-list { padding: 2px 12px; border-radius: 14px; background: #fff; }
.mk-row { display: flex; align-items: center; gap: 9px; min-height: 38px; font-size: 14px; }
.mk-check, .mk-box { flex: none; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #9A8C86; }
.mk-box { border-radius: 4px; }
.mk-doc { flex: none; width: 17px; height: 17px; fill: none; stroke: #9A8C86; stroke-width: 1.4; stroke-linejoin: round; }
.mk-time { font-weight: 600; }
.mk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row .ico { color: var(--ink-2); }
.mk-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #fff; font-size: 14px; color: var(--ink-2); }
.mk-mic { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--coral-deep); }
.mk-mic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.mk-mic::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--coral); border-radius: 50%; opacity: 0; }
.mk-mic.is-rec::after { animation: rec-ring 1.2s ease-out infinite; }
@media (max-width: 860px) {
  .ph-grid { grid-template-columns: 1fr; gap: 28px; }
  .mk-screen { height: auto; min-height: 330px; }
}

/* Played like a video (phrase.js on player.js): one phrase at a time, the cards fly into the app */
.caret { display: none; }
.motion .ph-stack { position: relative; }
.motion .ph { position: absolute; inset: 0 0 auto 0; margin: 0; }
.motion .scene-phrase .said { font-size: clamp(24px, min(3.4vw, 6vh), 46px); }
.motion .said .w, .motion .said .q { opacity: 0; filter: blur(6px); transition: opacity .25s ease, filter .3s ease; }
.motion .said .w.on, .motion .said .q.on { opacity: var(--dim, 1); filter: none; }
/* --ul (phrase.js): how far the underline is drawn; --gone: how far the part has flown out, leaving it dimmed */
.motion .said .seg { opacity: calc(1 - .6 * var(--gone, 0)); background-size: calc(var(--ul, 0) * 100%) 3px; }
.motion .said .lab { opacity: var(--ul, 0); transform: translateY(calc((1 - var(--ul, 0)) * -4px)); }
.motion .chip { opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s ease, transform .5s var(--spring); }
.motion .chip.on { opacity: 1; transform: none; }
.motion .caret { display: block; position: absolute; left: 0; top: 0; width: 3px; height: 1em; margin-top: .14em; background: var(--coral); opacity: 0; transition: transform .14s ease, opacity .2s ease; }
.motion .caret.on { opacity: 1; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.motion .fly-to { display: inline-block; transform-origin: 0 0; will-change: transform, opacity; position: relative; z-index: 5; }
.motion .mk-title.fly-to { flex: 0 1 auto; }
.motion .mk-sec .mk-label { opacity: var(--in, 0); }
.motion .mk-sec .mk-list { background: rgba(255, 255, 255, var(--in, 0)); }
.motion .mk-row > :not(.fly-to) { opacity: var(--in, 0); }
.motion .mk, .motion .mk-screen, .motion .mk-body, .motion .mk-list { overflow: visible; }
@media (max-width: 700px) {
  .motion .mk-screen { min-height: 0; height: 374px; padding: 12px 10px 10px; border-width: 6px; border-radius: 26px; }
  .motion .mk-body { gap: 6px; margin-top: 10px; }
  .motion .mk-row { min-height: 32px; font-size: 13px; }
  .motion .mk-top { font-size: 16px; }
  .motion .chips { margin-top: 14px; }
  .motion .chip { font-size: 13px; padding: 4px 10px; }
}

/* Write it down where it comes to mind: the gesture is the headline */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 64px); }
.way-group ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 26px; }
.way-group li { display: grid; gap: 4px; }
.way-group li b { font: 600 clamp(21px, 2vw, 25px)/1.25 var(--display); letter-spacing: -0.01em; }
/* The gestures play (small.js): a key held while the voice comes in, a key tapped, tapped twice, the bubble recording */
.wave { display: inline-flex; align-items: center; gap: 3px; height: .72em; margin-left: .25em; vertical-align: -.02em; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--coral-deep); transform: scaleY(.35); }
.wave i:nth-child(2), .wave i:nth-child(4) { transform: scaleY(.7); }
.wave i:nth-child(3) { transform: scaleY(1); }
.motion .wave i { opacity: 0; transform: scaleY(.3); }
.motion .play .wave i { animation: wave-talk 2.6s ease-in-out both; }
.motion .play .wave i:nth-child(2) { animation-delay: .07s; } .motion .play .wave i:nth-child(3) { animation-delay: .14s; }
.motion .play .wave i:nth-child(4) { animation-delay: .04s; } .motion .play .wave i:nth-child(5) { animation-delay: .11s; }
@keyframes wave-talk {
  0%, 8% { opacity: 0; transform: scaleY(.3); } 14% { opacity: 1; transform: scaleY(1); } 22% { transform: scaleY(.4); } 30% { transform: scaleY(.9); }
  38% { transform: scaleY(.5); } 46% { transform: scaleY(1); } 54% { transform: scaleY(.35); } 62% { transform: scaleY(.85); }
  70% { opacity: 1; transform: scaleY(.3); } 80%, 100% { opacity: 0; transform: scaleY(.3); }
}
.motion [data-demo="hold"].play kbd { animation: key-hold 2.6s var(--ease-out) both; }
.motion [data-demo="tap"].play kbd { animation: key-tap .42s ease .2s both; }
.motion [data-demo="double"].play kbd { animation: key-tap .32s ease .2s 2 both; }
@keyframes key-hold { 6%, 74% { transform: translateY(2px); box-shadow: 0 0 0 currentColor; background: var(--coral-soft); } 84%, 100% { transform: none; } }
@keyframes key-tap { 40% { transform: translateY(2px); box-shadow: 0 0 0 currentColor; background: var(--coral-soft); } }
.rec { position: relative; display: inline-block; width: .42em; height: .42em; margin-left: .3em; border-radius: 50%; background: var(--coral-deep); vertical-align: .12em; }
.rec::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--coral); border-radius: 50%; opacity: 0; }
.motion .play .rec::after { animation: rec-ring 1.3s ease-out 3; }
@keyframes rec-ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
.way-group li span { color: var(--ink-2); max-width: 30em; }
.also { margin-top: 40px; max-width: 40em; }
.also a { color: var(--coral-text); }
.sync { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.sync p { font-size: clamp(18px, 1.6vw, 21px); max-width: 38em; flex: 1 1 22em; }
/* A card travels from the phone to the PC */
.sync-demo { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--ink); }
.dev { display: block; border: 2px solid currentColor; }
.dev-phone { width: 18px; height: 30px; border-radius: 5px; }
.dev-pc { position: relative; width: 40px; height: 26px; border-radius: 3px; margin-bottom: 6px; }
.dev-pc::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 3px; background: currentColor; transform: translateX(-50%); }
.sync-path { position: relative; display: block; width: 110px; height: 2px; background: repeating-linear-gradient(90deg, #CDBFB5 0 5px, transparent 5px 10px); }
.sync-card { position: absolute; left: 0; top: -5px; width: 16px; height: 12px; background: var(--coral-deep); }
.motion .sync-card { opacity: 0; }
.motion .sync-demo.play .sync-card { animation: sync-go 2.4s var(--ease-in-out) 3 both; }
.motion .sync-demo.play .dev-pc { animation: sync-land 2.4s ease 3; }
@keyframes sync-go { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 70% { opacity: 1; transform: translateX(94px); } 80%, 100% { opacity: 0; transform: translateX(94px); } }
@keyframes sync-land { 0%, 70% { background: transparent; } 78% { background: var(--coral-soft); } 100% { background: transparent; } }

/* Reminds until done: one day, and when Plando speaks up in it */
/* The day runs with the scroll (day.js): a «now» line, the clock, the latest notification */
.day-live, .day-now, .toast { display: none; }
.motion .scene-day { height: 340vh; padding-block: 0; }
.motion .scene-day .stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.motion .scene-day .notif-still { display: none; }
.motion .scene-day .day { margin-top: min(24px, 3vh); }
.motion .scene-day .day-track { height: min(176px, 21vh); }
.motion .scene-day .day figcaption { margin-top: 44px; }
.motion .day-live { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-top: min(32px, 4vh); }
.motion .day-clock { display: block; font: 700 clamp(56px, min(9vw, 14vh), 128px)/.86 var(--display); letter-spacing: -0.04em; transition: color .5s ease; white-space: nowrap; }
.day-clock i { display: inline-block; width: .62em; font-style: normal; text-align: center; }
.day-clock b { display: inline-block; width: .3em; font-weight: inherit; text-align: center; }
.motion .scene-day.is-night .day-clock { color: var(--ink-2); }
.motion .day-slot { position: relative; width: min(400px, 100%); height: 124px; }
.motion .toast { display: block; position: absolute; inset: 0 0 auto; width: 100%; margin: 0; opacity: 0; transform: translateY(-16px) scale(.98); }
.motion .toast.on { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .6s var(--spring); animation: buzz .3s linear .5s 2; }
.motion .toast.off { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s ease, transform .3s ease; }
@keyframes buzz { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.toast p { font-size: 15px; color: var(--ink-2); }
.motion .day-now { display: block; position: absolute; z-index: 3; left: var(--now, 0%); top: -14px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink); }
.motion .day-now::before { content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); }
.motion .day-mark { opacity: .25; filter: grayscale(1); transition: opacity .35s ease, filter .35s ease; }
.motion .day-mark b { display: inline-block; transform-origin: 0 100%; transform: scale(.88); transition: transform .5s var(--spring); }
.motion .day-mark.passed { opacity: 1; filter: none; }
.motion .day-mark.passed b { transform: none; }
.motion .day-quiet { opacity: .3; transition: opacity .6s ease; }
.motion .day-quiet.passed { opacity: 1; }
/* A screen too low to pin a scene: it scrolls as a plain section, at its last frame */
@media (max-height: 560px) {
  .motion .scene-day { height: auto; padding-block: clamp(72px, 10vw, 136px); }
  .motion .scene-day .stick { position: static; height: auto; display: block; }
}
.day { margin-top: clamp(48px, 6vw, 72px); }
.day-track { position: relative; height: 176px; border-bottom: 2px solid var(--ink); }
.day-hour { position: absolute; left: var(--x); bottom: -30px; transform: translateX(-50%); font-size: 13px; color: var(--ink-2); }
.day-hour::before { content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 8px; background: var(--ink); }
.day-quiet { position: absolute; left: var(--x); right: 0; top: 0; bottom: 0; display: flex; align-items: flex-start; padding: 10px 12px;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(34, 26, 23, .07) 7px 8px); font-size: 14px; color: var(--ink-2); }
.day-mark { position: absolute; left: var(--x); bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 0 12px 10px;
  border-left: 3px solid var(--coral-deep); font-size: 14px; line-height: 1.25; }
.day-mark b { font: 600 18px/1.1 var(--display); }
.day-mark span { color: var(--ink-2); white-space: nowrap; }
.day-task { height: 150px; }
.day-again { height: 88px; }
.day-plan { height: 116px; border-left-color: var(--ink); }
.day-nudge { height: 52px; border-left-color: var(--coral); }
.day figcaption { margin-top: 52px; font-size: 15px; color: var(--ink-2); max-width: 40em; }
.notif { width: min(400px, 100%); margin-top: 40px; padding: 14px 18px 12px; border-radius: 20px; background: var(--cream); }
.notif-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.notif-head img { width: 16px; height: 16px; }
.notif-head span::before { content: '• '; }
.notif b { display: block; margin-top: 8px; font-weight: 600; font-size: 17px; }
.notif-acts { display: flex; gap: 26px; margin-top: 10px; padding-top: 8px; font-weight: 600; font-size: 14px; color: var(--coral-text); }
@media (max-width: 700px) {
  .day { overflow-x: auto; padding-bottom: 8px; }
  .day-track { min-width: 640px; }
  /* With motion the day slides under «now» instead of scrolling sideways; the lead says what the caption says */
  .motion .scene-day .day { overflow: hidden; padding-block: 16px 34px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .motion .scene-day .day figcaption { display: none; }
  .motion .day-slot { height: 118px; }
}

/* Your data: plain statements, the policy behind them */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 36px clamp(32px, 5vw, 72px); margin-top: clamp(40px, 6vw, 64px); }
.facts li { display: grid; gap: 6px; align-content: start; }
.facts b { font: 600 21px/1.3 var(--display); }
.facts span { color: var(--ink-2); }
.more { margin-top: 40px; font-weight: 600; }
.more a { color: var(--coral-text); }

/* A video scene's controls (player.js): pause/play and the chapters filling like stories */
.pl-ui { display: none; }
.motion .pl-ui { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.pl-toggle { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; transition: background-color .2s ease, transform .18s var(--ease-out); }
.pl-toggle:hover { background: #EDE2D8; }
.pl-toggle:active { transform: scale(.92); }
.pl-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.pl-toggle .pl-i-pause, .pl-toggle.is-playing .pl-i-play { display: none; }
.pl-toggle.is-playing .pl-i-pause { display: block; }
.pl-bars { display: flex; gap: 6px; flex: 1; max-width: 320px; }
.pl-bar { position: relative; flex: 1; height: 24px; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.pl-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--line); }
.pl-bar i { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--coral-deep); transform: scaleX(0); transform-origin: 0 50%; }
.pl-bar:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; border-radius: 4px; }

/* Sections alternate paper and cream, so each reads as its own sheet */
.sec-screens, .sec-remind, .sec-ai, .sec-faq { background: var(--cream); }
.sec-capture, .sec-more, .sec-data { background: var(--paper); }
.sec-remind .notif { background: var(--paper); }

/* Here's what it looks like: the real screens, the PC window with the phone in front */
.scr-tabs { display: none; }
.js .scr-tabs { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.scr-tabs button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 600 15px var(--text); color: var(--ink-2); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.scr-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.scr-tabs button:focus-visible { outline-offset: 2px; }
.scr-stage { position: relative; margin-top: clamp(28px, 4vw, 44px); padding-right: clamp(40px, 11vw, 150px); padding-bottom: clamp(32px, 5vw, 64px); }
.scr-pc, .av-pc { position: relative; overflow: hidden; aspect-ratio: 1280 / 800; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); background: #F8F3F1; }
.scr-phone { position: absolute; right: 0; bottom: 0; width: clamp(150px, 24%, 290px); }
.scr-phone-in { position: relative; overflow: hidden; aspect-ratio: 600 / 1333; border: 7px solid var(--ink); border-radius: 30px; background: #F8F3F1; }
.scr-pc img, .scr-phone-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .45s ease; }
.scr-pc img.on, .scr-phone-in img.on { opacity: 1; }
.sec-screens .aside { margin-top: 8px; }
@media (max-width: 700px) {
  .scr-stage { padding-right: 0; padding-bottom: 0; }
  .scr-pc { width: 100%; }
  .scr-phone { position: relative; right: auto; bottom: auto; width: 62%; margin: -28% 0 0 auto; }
  .js .scr-tabs { display: flex; }
  .scr-tabs button { flex: 1; padding: 0 8px; }
}

/* The app rebuilt for the video (screens.js): sizes in px of the real 1280×800
   window and the 412×915 phone, scaled to the page by transform. Colours and
   type follow the app's goldens. Shown only with motion; otherwise the real
   screenshots above stand in. */
.scr-video-box { display: none; }
.motion .scr-video-box { display: block; margin-top: clamp(24px, 3vw, 36px); }
.motion .scr-still { display: none; }
.scr-video { position: relative; padding-right: clamp(60px, 17vw, 230px); padding-bottom: clamp(32px, 5vw, 64px); }
.av-pc-in { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; will-change: transform; contain: layout paint; background: #F8F3F1; color: #221A17;
  font: 400 15px/1.35 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.av-phone { position: absolute; right: 0; bottom: 0; width: clamp(150px, 21%, 250px); aspect-ratio: 412 / 915; box-sizing: content-box; overflow: hidden; border: 7px solid var(--ink); border-radius: 30px; background: #F8F3F1; }
.av-phone-in { position: absolute; left: 0; top: 0; width: 412px; height: 915px; overflow: hidden; transform-origin: 0 0; will-change: transform; contain: layout paint; background: #F8F3F1; color: #221A17;
  font: 400 16px/1.35 Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.av-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.av-check { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #6E5F59; transition: background-color .3s ease, box-shadow .3s ease; }
.av-check::after { content: ''; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .45s var(--spring); }
.av-time { flex: none; width: 52px; font-weight: 600; white-space: nowrap; }
.av-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s ease; }
.av-date { display: block; font-size: 14px; color: #63544E; }
.av-h { display: block; margin-top: 4px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.av-sum { display: block; margin-top: 8px; font-size: 15px; color: #63544E; }
.av-sum b { color: #221A17; font-weight: 600; }
.av-label { display: block; margin: 34px 0 8px; font-size: 14px; font-weight: 600; color: #63544E; }
.av-mic { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--coral-deep); }
.av-mic::before { content: ''; position: absolute; left: 50%; top: 9px; width: 8px; height: 12px; margin-left: -4px; border: 2px solid #fff; border-radius: 5px; box-sizing: border-box; }
.av-mic::after { content: ''; position: absolute; left: 50%; top: 23px; width: 2px; height: 4px; margin-left: -1px; background: #fff; }
.av-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #F1E9E5; font-size: 15px; }
.av-seg b, .av-seg span { padding: 6px 16px; border-radius: 999px; font-weight: 400; color: #63544E; }
.av-seg b { background: #fff; color: #221A17; font-weight: 500; }
.done .av-check { background: var(--coral-deep); box-shadow: none; }
.done .av-check::after { transform: rotate(45deg) scale(1); }
.done .av-title { color: #9A8C86; text-decoration: line-through; }

/* PC: title bar, sidebar, the list (or the week), the card pane, the voice strip, the cursor */
.pc-titlebar { position: absolute; left: 0; top: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding-left: 16px; background: #F1E9E5; font-size: 14px; z-index: 3; }
.pc-titlebar img { width: 16px; height: 16px; }
.pc-ctl { display: flex; margin-left: auto; }
.pc-ctl i { position: relative; width: 46px; height: 36px; }
.pc-ctl i::before { content: ''; position: absolute; left: 18px; top: 17px; width: 10px; height: 1px; background: #221A17; }
.pc-ctl i:nth-child(2)::before { top: 13px; height: 10px; box-sizing: border-box; border: 1px solid #221A17; background: none; }
.pc-ctl i:nth-child(3)::before, .pc-ctl i:nth-child(3)::after { content: ''; position: absolute; left: 17px; top: 17px; width: 12px; height: 1px; background: #221A17; transform: rotate(45deg); }
.pc-ctl i:nth-child(3)::after { transform: rotate(-45deg); }
.pc-side { position: absolute; left: 0; top: 36px; bottom: 0; width: 252px; display: flex; flex-direction: column; padding: 14px 10px 12px; background: #F1E9E5; }
.pc-nav { display: flex; align-items: center; gap: 12px; height: 39px; flex: none; padding: 0 12px; border-radius: 10px; transition: background-color .3s ease, box-shadow .3s ease; }
.pc-nav em { margin-left: auto; font-style: normal; font-size: 14px; color: #63544E; }
.pc-nav .dot { width: 9px; height: 9px; margin: 0 5.5px; }
.pc-nav.on { background: #fff; box-shadow: 0 1px 2px rgba(34, 26, 23, .08); font-weight: 600; }
.pc-side-label { margin: 16px 12px 6px; font-size: 13px; font-weight: 600; color: #63544E; }
.pc-side-end { margin-top: auto; }
.pc-main { position: absolute; left: 252px; top: 36px; right: 0; bottom: 0; transition: right .55s var(--ease-out); }
.av-pc-in.pane-open .pc-main { right: 420px; }
.pc-today, .pc-week { position: absolute; inset: 26px 32px 0; transition: opacity .35s ease; }
.pc-week { opacity: 0; }
.av-pc-in.view-week .pc-today { opacity: 0; }
.av-pc-in.view-week .pc-week { opacity: 1; }
.pc-composer { display: flex; align-items: center; gap: 14px; height: 48px; margin-top: 22px; padding: 0 6px 0 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(34, 26, 23, .06); color: #63544E; }
.pc-plus { font-size: 22px; line-height: 1; color: #221A17; }
.pc-composer em { margin-left: auto; padding: 2px 8px; border: 1px solid #E4D8CE; border-radius: 6px; font-style: normal; font-size: 12px; }
.pc-rows { display: flex; flex-direction: column; }
.pc-row { display: flex; align-items: center; gap: 14px; height: 46px; flex: none; padding: 0 12px; border-radius: 10px; overflow: hidden; transition: background-color .35s ease; }
.pc-row .dot { width: 9px; height: 9px; }
.pc-row.is-selected { background: #FBE6DD; }
.pc-row.is-new { height: 0; opacity: 0; transition: height .55s var(--ease-out), opacity .4s ease .15s, background-color 1.2s ease; }
.pc-row.is-new.in { height: 46px; opacity: 1; }
.pc-row.is-new.fresh { background: #FBE6DD; transition: height .55s var(--ease-out), opacity .4s ease .15s, background-color .2s ease; }
.pc-week-nav { position: absolute; right: 0; top: 20px; display: flex; align-items: center; gap: 14px; font-size: 18px; color: #63544E; }
.pc-week-nav em { padding: 4px 12px; border-radius: 999px; background: #EFE6E1; font-style: normal; font-size: 14px; font-weight: 600; color: #221A17; }
.pc-days { position: absolute; left: -4px; right: 0; top: 104px; height: 520px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.pc-day { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 8px; border-radius: 12px; background: #fff; }
.pc-day.is-weekend { background: #F1E9E5; }
.pc-day.is-today { box-shadow: inset 0 0 0 1.5px var(--coral-deep); }
.pc-day.drop { box-shadow: inset 0 0 0 1.5px #9A8C86; }
.pc-day-h { padding: 0 6px 4px; font-size: 14px; color: #63544E; white-space: nowrap; }
.pc-day-h b { margin-right: 3px; font-size: 22px; color: #221A17; }
.pc-day.is-today .pc-day-h, .pc-day.is-today .pc-day-h b { color: var(--coral-deep); }
.pc-wcard { position: relative; z-index: 1; padding: 8px 10px; border-radius: 8px; background: #F3ECE9; font-size: 14px; line-height: 1.3; transition: box-shadow .25s ease; }
.pc-wcard span { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 13px; font-weight: 600; }
.pc-wcard .dot { width: 8px; height: 8px; }
.pc-wcard.lifted { z-index: 5; box-shadow: 0 14px 30px -10px rgba(34, 26, 23, .4); }
.pc-add { margin-top: auto; padding: 6px; font-size: 14px; color: #63544E; }
.pc-hint { position: absolute; right: 0; top: 640px; font-size: 13px; color: #63544E; }
.pc-pane { position: absolute; top: 36px; right: 0; bottom: 0; width: 420px; padding: 16px 20px; background: #fff; border-left: 1px solid #EBE2DE; transform: translateX(100%); transition: transform .55s var(--ease-out); }
.av-pc-in.pane-open .pc-pane { transform: none; }
.pc-pane-top { display: flex; align-items: center; justify-content: space-between; }
.pc-x { position: relative; flex: none; width: 16px; height: 16px; }
.pc-x::before, .pc-x::after { content: ''; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.5px; background: #63544E; transform: rotate(45deg); }
.pc-x::after { transform: rotate(-45deg); }
.pc-pane-title { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-size: 22px; }
.pc-pane-title b { font-weight: 500; }
.pc-pane-details { margin: 6px 0 16px 36px; font-size: 15px; color: #63544E; }
.pc-pane-row { display: flex; align-items: center; gap: 14px; height: 54px; border-top: 1px solid #EBE2DE; font-size: 16px; }
.pc-pane-row .dot { width: 10px; height: 10px; margin: 0 5px; }
.pc-pane-row > i:last-child { margin-left: auto; font-style: normal; color: #63544E; font-size: 20px; }
.pc-pane-more { display: block; padding-top: 14px; border-top: 1px solid #EBE2DE; font-size: 15px; color: var(--coral-text); }
.pc-strip { position: absolute; left: 50%; bottom: 44px; z-index: 6; display: flex; align-items: center; gap: 14px; width: 580px; height: 64px; margin-left: -290px; padding: 0 22px; border-radius: 18px; background: #fff;
  box-shadow: 0 16px 44px -14px rgba(34, 26, 23, .4), 0 0 0 1px rgba(34, 26, 23, .06); font-size: 16px; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .3s ease, transform .45s var(--ease-out); }
.pc-strip.on { opacity: 1; transform: none; }
.pc-strip img { width: 22px; height: 22px; }
.ps-wave { display: flex; align-items: center; gap: 3px; height: 24px; transition: opacity .3s ease, width .3s ease; }
.ps-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--coral-deep); transform: scaleY(.3); }
.pc-strip.listen .ps-wave i, .pc-strip.said .ps-wave i { animation: hc-talk .45s ease-in-out infinite alternate; }
.ps-wave i:nth-child(2n) { animation-delay: -.2s !important; } .ps-wave i:nth-child(3n) { animation-delay: -.35s !important; }
.pc-strip.made .ps-wave { width: 0; opacity: 0; }
.ps-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.ps-text > span { display: none; }
.pc-strip.listen .ps-listen { display: inline; color: #63544E; }
.pc-strip.said .ps-said { display: inline; }
.pc-strip.said .ps-said::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--coral); animation: caret-blink 1s steps(1) infinite; }
.pc-strip.made .ps-made { display: inline; font-weight: 500; animation: msg-in .35s var(--ease-out); }
@keyframes hc-talk { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.pc-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 26px; height: 26px; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.pc-cursor.on { opacity: 1; }
.pc-cursor svg { display: block; width: 26px; height: 26px; fill: #221A17; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; transition: transform .12s ease; transform-origin: 3px 2px; }
.pc-cursor.down svg { transform: scale(.82); }
.pc-cursor::after { content: ''; position: absolute; left: -12px; top: -12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(189, 74, 31, .35); opacity: 0; transform: scale(.3); }
.pc-cursor.down::after { animation: click-ring .5s ease-out; }
@keyframes click-ring { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }

/* Phone: Today, the month, the field and the tabs; the sheet and the notification over them */
.ph-today, .ph-month { position: absolute; left: 0; right: 0; top: 24px; bottom: 140px; padding: 22px 20px 0; transition: opacity .35s ease; }
.av-phone-in .av-date { font-size: 16px; }
.av-phone-in .av-h { font-size: 34px; margin-top: 2px; }
.av-phone-in .av-sum { font-size: 17px; }
.ph-month { opacity: 0; }
.av-phone-in.view-month .ph-today { opacity: 0; }
.av-phone-in.view-month .ph-month { opacity: 1; }
.ph-chips { display: flex; gap: 8px; margin-top: 24px; overflow: hidden; }
.ph-chips span { flex: none; padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px #E4D8CE; font-size: 15px; }
.ph-chips span.on { background: #221A17; color: #fff; box-shadow: none; }
.ph-chips em { font-style: normal; color: #9A8C86; }
.ph-list { margin-top: 8px; padding: 0 14px; border-radius: 16px; background: #fff; }
.ph-row { display: flex; align-items: center; gap: 12px; height: 54px; border-bottom: 1px solid #F0E8E4; font-size: 16px; }
.ph-row:last-child { border-bottom: 0; }
.ph-row .dot { width: 9px; height: 9px; }
.ph-composer { position: absolute; left: 12px; right: 12px; bottom: 84px; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 6px 0 20px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #EBE2DE; color: #63544E; }
.ph-composer .av-mic { border-radius: 50%; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding-top: 8px; background: #F8F3F1; font-size: 12px; color: #63544E; text-align: center; }
.ph-tabs span { display: grid; justify-items: center; gap: 4px; }
.ph-tabs .av-ico { width: 52px; height: 30px; padding: 4px 15px; border-radius: 999px; transition: background-color .3s ease, color .3s ease; }
.ph-tabs span.on .av-ico { background: #FBE6DD; color: var(--coral-deep); }
.ph-tabs b { font-weight: 500; white-space: nowrap; }
.ph-tabs span.on b { color: #221A17; }
.ph-seg { margin-top: 18px; }
.mo-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 0 6px; font-size: 17px; }
.mo-nav i { font-style: normal; font-size: 22px; color: #63544E; }
.mo-nav b { font-weight: 500; }
.mo-wd, .mo-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mo-wd { margin-top: 20px; font-size: 13px; color: #63544E; }
.mo-grid { row-gap: 4px; margin-top: 8px; }
.mo-cell { display: grid; justify-items: center; gap: 2px; height: 46px; font-size: 16px; color: #63544E; }
.mo-cell b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 400; transition: box-shadow .25s ease, background-color .25s ease; }
.mo-cell.is-today b { background: var(--coral-deep); color: #fff; font-weight: 600; }
.mo-cell.is-pick b { box-shadow: inset 0 0 0 2px #221A17; }
.mo-cell em { display: flex; gap: 3px; height: 5px; }
.mo-cell em .dot { width: 5px; height: 5px; }
.ph-month .av-label { margin-top: 18px; }
.ph-l-pick, .ph-list-pick { display: none; }
.av-phone-in.picked .ph-l-today, .av-phone-in.picked .ph-list-today { display: none; }
.av-phone-in.picked .ph-l-pick { display: inline; }
.av-phone-in.picked .ph-list-pick { display: block; animation: msg-in .35s var(--ease-out); }
.ph-dim { position: absolute; inset: 0; z-index: 4; background: rgba(34, 26, 23, .34); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.av-phone-in.sheet .ph-dim { opacity: 1; }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 420px; padding: 10px 22px; border-radius: 28px 28px 0 0; background: #fff; transform: translateY(102%); transition: transform .55s var(--ease-out); }
.av-phone-in.sheet .ph-sheet { transform: none; }
.ph-handle { display: block; width: 34px; height: 4px; margin: 4px auto 16px; border-radius: 2px; background: #E4D8CE; }
.ph-sheet .pc-pane-title { font-size: 22px; }
.ph-notif { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 7; padding: 14px 18px 12px; border-radius: 22px; background: #fff;
  box-shadow: 0 12px 30px -10px rgba(34, 26, 23, .35), 0 0 0 1px rgba(34, 26, 23, .05); transform: translateY(-135%); transition: transform .5s var(--ease-out); }
.av-phone-in.notif .ph-notif { transform: none; }
.ph-notif-h { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #63544E; }
.ph-notif b { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; }
.ph-notif-b { display: block; font-size: 15px; color: #63544E; }
.ph-notif-acts { display: flex; gap: 30px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--coral-text); }
.ph-tap { position: absolute; left: 0; top: 0; z-index: 8; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(34, 26, 23, .22); opacity: 0; transform: scale(.3); pointer-events: none; }
.ph-tap.go { animation: tap-ring .55s ease-out; }
@keyframes tap-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 700px) {
  .scr-video { padding-right: 0; padding-bottom: 0; }
  .av-phone { position: relative; right: auto; bottom: auto; width: 62%; margin: -30% 0 0 auto; }
}

/* Plando also does: a gallery like Apple's. The first card sits on the text's
   line and the strip runs off the right edge; no native scrollbar, a thin
   progress line within the text's width and the buttons under it. A mouse can
   drag it (small.js): it follows the hand, coasts, then snaps to a card. */
.more-strip { display: flex; gap: 20px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 4px max(var(--gutter), calc((100vw - var(--max)) / 2)) 8px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
  scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.more-strip::-webkit-scrollbar { display: none; }
.more-strip.dragging { scroll-snap-type: none; cursor: grabbing; }
.more-strip.dragging * { pointer-events: none; }
.more-strip:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: -2px; }
.more-card { flex: 0 0 clamp(270px, 28vw, 340px); height: clamp(400px, 34vw, 450px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--cream); }
.more-text { padding: 28px 28px 0; }
.more-card h3 { font: 600 clamp(21px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.more-card p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.more-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.more-progress { position: relative; flex: 0 1 240px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.more-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--size, 30%); border-radius: 2px; background: var(--ink); transform: translateX(var(--at, 0%)); }
.more-nav { display: flex; align-items: center; gap: 10px; }
.more-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; transition: background-color .2s ease, transform .18s var(--ease-out), opacity .2s ease; }
.more-btn:hover:not(:disabled) { background: #EDE2D8; }
.more-btn:active:not(:disabled) { transform: scale(.94); }
.more-btn:disabled { opacity: .35; cursor: default; }
.more-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viz { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 24px 28px; }
.viz > div { transform: scale(1.12); transform-origin: 50% 50%; }
@media (max-width: 700px) { .viz > div { transform: none; } .more-text { padding: 22px 22px 0; } }
/* Each drawing: the app's own pieces, small */
.viz i { font-style: normal; }
.v-list, .v-note, .v-habit { display: grid; gap: 8px; width: 100%; max-width: 210px; padding: 14px 16px; border-radius: 14px; background: var(--paper); font-size: 14px; }
.v-list span, .v-note span, .v-habit span { display: flex; align-items: center; gap: 9px; }
.v-list i, .v-note i { flex: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #A99B95; }
.v-habit span:not(.v-head) i { flex: none; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #A99B95; }
.v-list .done, .v-note .done, .v-habit .done { color: var(--ink-2); }
.v-list .done i, .v-note .done i { background: var(--coral-deep); box-shadow: none; }
.v-habit .done i { background: var(--a-health); box-shadow: none; }
.v-list .done, .v-note .done { text-decoration: line-through; }
.v-note b { font: 600 15px var(--display); }
.v-note em { font-style: normal; color: var(--coral-deep); }
.v-head { font-size: 12px; color: var(--ink-2); }
.v-head b { color: var(--ink); }
.v-ask { display: grid; gap: 8px; width: 100%; max-width: 230px; font-size: 14px; line-height: 1.35; }
.v-me { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; }
.v-it { max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--paper); }
.v-plan { display: grid; gap: 4px; width: 100%; max-width: 230px; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 14px; }
.v-plan .v-head { display: flex; align-items: center; gap: 6px; }
.v-plan span:last-child { color: var(--ink-2); }
.v-attach { display: grid; grid-template-columns: 76px 1fr; gap: 8px; width: 100%; max-width: 230px; font-size: 13px; }
.v-photo { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 6px; border-radius: 10px; background: linear-gradient(160deg, #F2B88F, #D9532B 60%, #8F3416); color: #fff; font-size: 11px; }
.v-photo i { flex: 1; }
.v-file, .v-voice { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--paper); white-space: nowrap; overflow: hidden; }
.v-play { flex: none; width: 0; height: 0; border-left: 8px solid var(--coral-deep); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.v-bars { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1; min-width: 0; }
.v-bars i { width: 2px; height: 40%; border-radius: 1px; background: #B9AAA4; }
.v-bars i:nth-child(3n) { height: 90%; } .v-bars i:nth-child(3n+1) { height: 60%; } .v-bars i:nth-child(-n+5) { background: var(--coral-deep); }
.v-widgets { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 220px; }
.v-w1 { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 12px 14px; border-radius: 20px; background: var(--paper); }
.v-w1 em { grid-column: 2; font-style: normal; font-size: 13px; color: var(--ink-2); }
.v-w2 { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; color: var(--ink-2); }
.v-w2 i { width: 28px; height: 28px; border-radius: 50%; background: var(--coral-deep); }
.v-keys { display: grid; gap: 12px; justify-items: center; font-size: 22px; font-weight: 600; }
.v-keys span { display: flex; align-items: center; gap: 8px; }
.v-keys kbd { min-width: 2.6em; padding: .15em .6em; background: var(--paper); }
.v-themes { display: grid; grid-template-columns: repeat(3, 56px); gap: 12px; }
.v-themes i { position: relative; display: block; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--bg) 50%, var(--bg-d) 50%); box-shadow: inset 0 0 0 1px rgba(34, 26, 23, .08); }
.v-themes b { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: linear-gradient(135deg, var(--ac) 50%, var(--ac-d) 50%); }
/* Motion: a card's drawing plays when it scrolls into view (small.js) */
.motion .viz-shop .v-list span:first-child, .motion .viz-notes .v-note span:nth-child(2) { text-decoration-color: transparent; transition: text-decoration-color .4s ease .5s; }
.motion .viz-shop.play .v-list span:first-child, .motion .viz-notes.play .v-note span:nth-child(2) { text-decoration-color: currentColor; }
.motion .viz-shop .v-list .done i, .motion .viz-notes .v-note .done i, .motion .viz-habit .v-habit .done i { transform: scale(.4); opacity: 0; transition: transform .5s var(--spring) .3s, opacity .2s ease .3s; }
.motion .viz.play .done i { transform: none; opacity: 1; }
.motion .viz-habit .v-habit .done + .done i { transition-delay: .6s; }
.motion .viz-ask .v-me, .motion .viz-ask .v-it, .motion .viz-plan .v-plan { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ease-out); }
.motion .viz-ask .v-it { transition-delay: .55s; }
.motion .viz.play .v-me, .motion .viz.play .v-it, .motion .viz.play .v-plan { opacity: 1; transform: none; }
.motion .viz-keys kbd { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.motion .viz-keys.play span:nth-child(1) kbd { animation: key-tap .45s ease .3s both; }
.motion .viz-keys.play span:nth-child(2) kbd { animation: key-tap .45s ease .8s both; }
.motion .viz-keys.play span:nth-child(3) kbd { animation: key-tap .45s ease 1.3s both; }
.motion .viz-themes .v-themes i { transform: scale(.7); opacity: 0; transition: transform .6s var(--spring), opacity .3s ease; }
.motion .viz-themes.play .v-themes i { transform: none; opacity: 1; }
.motion .viz-themes.play .v-themes i:nth-child(2) { transition-delay: .06s; } .motion .viz-themes.play .v-themes i:nth-child(3) { transition-delay: .12s; }
.motion .viz-themes.play .v-themes i:nth-child(4) { transition-delay: .18s; } .motion .viz-themes.play .v-themes i:nth-child(5) { transition-delay: .24s; }
.motion .viz-themes.play .v-themes i:nth-child(6) { transition-delay: .3s; }
.motion .viz-attach .v-bars i:nth-child(-n+5) { background: #B9AAA4; transition: background-color .1s linear; }
.motion .viz-attach.play .v-bars i { animation: bar-play .12s linear calc(.3s + var(--n, 0) * 140ms) both; }
@keyframes bar-play { to { background: var(--coral-deep); } }
.motion .viz-widgets .v-w1, .motion .viz-widgets .v-w2 { opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .55s var(--spring); }
.motion .viz-widgets .v-w2 { transition-delay: .2s; }
.motion .viz-widgets.play .v-w1, .motion .viz-widgets.play .v-w2 { opacity: 1; transform: none; }

/* Your Claude or ChatGPT: the copy, and a chat that plays like a video (blocks.js
   on player.js): the question types itself into the field and is sent, the
   assistant «types», Plando's action chip spins then ticks, the answer and
   Plando's cards come in. Without motion the whole chat stands, done. */
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); align-items: center; gap: 40px clamp(32px, 6vw, 96px); }
.ai-points { display: grid; gap: 12px; margin-top: 28px; padding: 0; list-style: none; }
.ai-points li { position: relative; padding-left: 26px; max-width: 32em; }
.ai-points li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 7px; height: 14px; background: var(--coral-deep); transform: rotate(30deg); }
.ai-box .pl-ui { margin: 16px 0 0; }
.ai-chat { border-radius: 24px; background: var(--paper); overflow: hidden; }
.ai-chat-in { display: flex; flex-direction: column; }
.ai-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-name { display: grid; font-weight: 600; }
.ai-name b { grid-area: 1 / 1; transition: opacity .4s ease; }
.ai-name b + b { opacity: 0; }
.ai-chat[data-name="1"] .ai-name b:first-child { opacity: 0; }
.ai-chat[data-name="1"] .ai-name b + b { opacity: 1; }
.ai-conn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--cream); font-size: 13px; font-weight: 500; }
.ai-conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-health); box-shadow: 0 0 0 3px rgba(46, 158, 106, .18); }
.ai-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.msg-me { align-items: flex-end; }
.msg p { max-width: 86%; padding: 10px 14px; font-size: 15px; line-height: 1.4; }
.msg-me p { border-radius: 18px 18px 4px 18px; background: var(--ink); color: #fff; }
.msg-ai p { border-radius: 18px 18px 18px 4px; background: var(--cream); }
.msg-dots { display: none; }
.msg-tool { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.msg-spin { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--a-health); }
.msg-spin::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.msg-run { display: none; }
.msg-cards { display: grid; gap: 6px; width: 92%; }
.msg-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; background: var(--paper); }
.msg-card b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-card em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--coral-text); white-space: nowrap; }
.ai-input { display: none; }
/* Motion: everything waits for its moment */
.motion .ai-thread { height: 400px; overflow: hidden; padding-top: 40px; -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.motion .msg { display: none; }
.motion .msg.shown { display: flex; animation: msg-in .45s var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px); } }
.motion .msg-ai > :not(.msg-dots) { display: none; }
.motion .msg-ai.typing .msg-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: var(--cream); }
/* «Typing» dots, the chat's and the FAQ's */
.motion .msg-dots i, .faq-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: dot-bounce 1s ease-in-out infinite; }
.motion .msg-dots i:nth-child(2), .faq-dots i:nth-child(2) { animation-delay: .15s; }
.motion .msg-dots i:nth-child(3), .faq-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.motion .msg-ai.tool .msg-tool { display: inline-flex; animation: msg-in .35s var(--ease-out); }
.motion .msg-ai.tool:not(.done) .msg-spin { background: none; box-shadow: inset 0 0 0 2px var(--line); border-top: 2px solid var(--coral-deep); animation: spin .7s linear infinite; }
.motion .msg-ai.tool:not(.done) .msg-spin::after { display: none; }
.motion .msg-ai.tool:not(.done) .msg-run { display: inline; }
.motion .msg-ai.tool:not(.done) .msg-done { display: none; }
.motion .msg-ai.done .msg-spin { animation: tick-pop .45s var(--spring); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tick-pop { from { transform: scale(.4); } }
.motion .msg-ai.text p, .motion .msg-ai.text .msg-cards { display: block; }
.motion .msg-ai.text p { animation: msg-in .4s var(--ease-out); }
.motion .msg-ai.text .msg-cards { display: grid; }
.motion .msg-card { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .3s ease, transform .55s var(--spring); }
.motion .msg-card.shown { opacity: 1; transform: none; }
.motion .ai-input { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 6px 6px 6px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.ai-field { position: relative; flex: 1; min-width: 0; height: 22px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.ai-typed:not(:empty)::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--coral); animation: caret-blink 1s steps(1) infinite; }
.ai-ph { position: absolute; left: 0; top: 0; color: var(--ink-2); opacity: .7; }
.ai-typed:not(:empty) + .ai-ph { display: none; }
.ai-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--line); transition: background-color .2s ease, transform .2s var(--ease-out); }
.ai-send svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-chat.can-send .ai-send { background: var(--ink); }
.ai-chat.sent .ai-send { transform: scale(.86); }
@media (max-width: 860px) { .ai-grid { grid-template-columns: 1fr; } }

/* Frequently asked, as a conversation (faq.js): the questions are buttons,
   asking one puts it in the chat on the right, Plando «types» and answers.
   Without the script every question stands with its answer, in order. */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px clamp(32px, 6vw, 88px); align-items: start; }
.faq-side .lead { margin-top: 16px; }
.faq-asks { display: none; }
.js .faq-asks { display: grid; gap: 26px; margin-top: 32px; }
.faq-gt { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip { padding: 10px 16px; border: 0; border-radius: 18px 18px 4px 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1.3 var(--text); color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .18s var(--ease-out); }
.faq-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.faq-chip:active { transform: scale(.97); }
.faq-chip.asked { color: var(--ink-2); }
.faq-chip.current { background: var(--ink); color: #fff; box-shadow: none; }
.faq-thread { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 24px; background: var(--paper); }
.js .faq-thread { height: clamp(440px, 64vh, 600px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D8CCC2 transparent; }
/* Pushes the conversation to the bottom, as a chat sits */
.faq-spacer { flex: 1 0 0; }
.faq-pair { display: grid; gap: 10px; }
.js .faq-pair { display: none; }
.js .faq-pair.shown { display: grid; }
.faq-me { justify-self: end; max-width: 85%; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: #fff; font-weight: 500; line-height: 1.4; }
.faq-it { display: flex; align-items: flex-end; gap: 10px; }
.faq-it img { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--cream); }
.faq-bubble { display: grid; gap: 8px; max-width: 88%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--cream); line-height: 1.5; }
.faq-bubble a { color: var(--coral-text); }
.faq-dots { display: none; }
.js .faq-pair.typing .faq-bubble > p { display: none; }
.js .faq-pair.typing .faq-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.motion .faq-pair.shown .faq-me { animation: msg-in .4s var(--ease-out); }
.motion .faq-pair.shown .faq-it { animation: msg-in .4s var(--ease-out) .15s both; }
.motion .faq-pair.answered .faq-bubble > p { animation: msg-in .35s var(--ease-out); }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .js .faq-thread { height: min(520px, 70vh); padding: 18px; }
}

/* Download: coral again, the page's other bookend, and the fan opens once more at its foot */
.sec-get { --efh: 170px; position: relative; overflow: hidden; background: var(--coral-deep); color: #fff; padding-bottom: calc(clamp(72px, 10vw, 136px) + var(--efh)); }
.end-fan { --h: var(--efh); --w: calc(var(--h) * var(--ratio)); position: absolute; left: 50%; bottom: 0; width: 0; height: 0; }
.ef-slat { position: absolute; left: calc(var(--w) / -2); bottom: 0; width: var(--w); height: var(--h); background: var(--cream); transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--open, 1)) * 55%)) rotate(calc(var(--a) * var(--open, 1)));
  box-shadow: 0 0 0 calc(var(--w) * var(--gap)) var(--coral-deep); }
@media (max-width: 700px) { .sec-get { --efh: 120px; } }
.motion .steps::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.motion .steps[open]::details-content { block-size: auto; }
.sec-get h3 { color: rgba(255, 255, 255, .86); font-size: 16px; }
.get-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 48px clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 64px); }
.get-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.get-col p { color: rgba(255, 255, 255, .94); max-width: 30em; }
.soon-big { font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--display); }
.sec-get a:not(.btn) { color: #fff; }
.steps { max-width: 34em; }
.steps summary { cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; list-style: none; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary::after { content: ''; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.steps[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.steps ol { margin-top: 8px; padding-left: 1.3em; display: grid; gap: 10px; color: rgba(255, 255, 255, .94); }
.steps code { background: rgba(255, 255, 255, .16); }

/* The policy and account deletion: one quiet column on cream */
.doc-top { padding-block: 20px; }
.doc-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.doc-top .lockup img { width: 28px; height: 28px; }
.doc-in { max-width: calc(44em + 2 * var(--gutter)); padding-block: clamp(32px, 6vw, 72px) clamp(64px, 8vw, 112px); }
.doc h1 { font: 700 clamp(36px, 5vw, 56px)/1.05 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.doc-date { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.doc .lead { margin-top: 28px; }
.doc h2 { margin-top: 48px; font: 600 clamp(24px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -0.01em; scroll-margin-top: 24px; }
.doc h3 { margin-top: 28px; font: 600 19px/1.3 var(--display); }
.doc p, .doc ul, .doc ol { margin-top: 14px; line-height: 1.65; }
.doc ul, .doc ol { padding-left: 1.3em; display: grid; gap: 8px; }
.doc a { color: var(--coral-text); }
.doc strong { font-weight: 600; }
.doc .aside { margin-top: 18px; padding: 14px 18px; background: var(--paper); border-left: 3px solid var(--coral-deep); font-size: 16px; max-width: none; }
.doc mark { background: #FFE58A; color: var(--ink); padding: 0 .2em; }

/* Footer */
.foot { padding-block: 48px 40px; border-top: 1px solid var(--line); background: var(--cream); }
.page-home .foot { border-top: 0; }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 40px; }
.foot .lockup { font-size: 21px; }
.foot .lockup img { width: 28px; height: 28px; }
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-links a { font-weight: 500; }
.foot-langs { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.foot-langs a[aria-current] { color: var(--ink); font-weight: 600; }
.foot-note { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: 1fr; }
}

/* Between pages and languages the logo and the language menu stay, the rest crossfades with a small lift */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.top .lockup, .doc-top .lockup { view-transition-name: lockup; }
.langs summary { view-transition-name: langs; }
::view-transition-old(root) { animation: vt-out .2s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* The app's palette (design/prototype/palettes.json; pages.mjs writes this) */
:root { --coral: #D9532B; --coral-deep: #BD4A1F; --coral-text: #A33E17; --coral-soft: #FBE6DD;
  --a-work: #3D6FE0; --a-home: #D9821C; --a-family: #D6457E; --a-health: #2E9E6A; --a-finance: #8B5CF6; --a-learning: #0E9FB0; --a-other: #9A968E; }
.a-work { --c: var(--a-work); } .a-home { --c: var(--a-home); } .a-family { --c: var(--a-family); } .a-health { --c: var(--a-health); } .a-finance { --c: var(--a-finance); } .a-learning { --c: var(--a-learning); } .a-other { --c: var(--a-other); }

/* The mark's fan, from design/brand/depth.mjs (pages.mjs writes this) */
.ha-fan, .end-fan { --ratio: 0.4231; --gap: 0.1818; }
.ha-slat[data-at="-2"], .ef-slat[data-at="-2"] { --a: -60deg; --d: 180ms; z-index: 8; }
.ha-slat[data-at="-1"], .ef-slat[data-at="-1"] { --a: -30deg; --d: 90ms; z-index: 9; }
.ha-slat[data-at="0"], .ef-slat[data-at="0"] { --a: 0deg; --d: 0ms; z-index: 10; }
.ha-slat[data-at="1"], .ef-slat[data-at="1"] { --a: 30deg; --d: 90ms; z-index: 9; }
.ha-slat[data-at="2"], .ef-slat[data-at="2"] { --a: 60deg; --d: 180ms; z-index: 8; }
/* Times on the day (pages.mjs writes this) */
[data-x="6.25"] { --x: 6.25%; }
[data-x="12.5"] { --x: 12.5%; }
[data-x="18.75"] { --x: 18.75%; }
[data-x="31.25"] { --x: 31.25%; }
[data-x="37.5"] { --x: 37.5%; }
[data-x="43.75"] { --x: 43.75%; }
[data-x="50"] { --x: 50%; }
[data-x="56.25"] { --x: 56.25%; }
[data-x="68.75"] { --x: 68.75%; }
[data-x="81.25"] { --x: 81.25%; }
[data-x="87.5"] { --x: 87.5%; }
[data-x="93.75"] { --x: 93.75%; }
/* The app's colour themes (design/prototype/palettes.json) */
.v-themes [data-p="classic"] { --bg: #F8F3F1; --ac: #BD4A1F; --bg-d: #171211; --ac-d: #FF9068; }
.v-themes [data-p="blue"] { --bg: #F5F4F0; --ac: #2E5BCC; --bg-d: #141412; --ac-d: #82A4FF; }
.v-themes [data-p="sage"] { --bg: #F2F4F0; --ac: #2D7550; --bg-d: #121512; --ac-d: #7FCBA0; }
.v-themes [data-p="sand"] { --bg: #F7F3EC; --ac: #9C5A16; --bg-d: #16130F; --ac-d: #E9A85E; }
.v-themes [data-p="lavender"] { --bg: #F5F3F8; --ac: #6A4EC2; --bg-d: #141219; --ac-d: #B59CFF; }
.v-themes [data-p="graphite"] { --bg: #F3F3F3; --ac: #1F1F1F; --bg-d: #111111; --ac-d: #EDEDED; }