/* Round 4 (05-11-2026): two takes on the dot, on top of round2.css (the app's tokens, nav, buttons, keycaps).
   The dot field (dots4.js) is one canvas fixed behind the page. Sections carry a mild tint of their own
   (founder: "mildly differentiate the sections with colour"); the dots draw over the tints and under the words,
   so sections are never positioned (a positioned section would paint over the canvas) – their insides are. */
:root {
  --tint-apps: #E9EFFB; --tint-genius: #EEEBFB; --tint-lists: #E7F2F5; --tint-vocab: #F5F0E6;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tint-apps: #0D1220; --tint-genius: #110F1E; --tint-lists: #0B1518; --tint-vocab: #14120D; } }
:root[data-theme="dark"] { --tint-apps: #0D1220; --tint-genius: #110F1E; --tint-lists: #0B1518; --tint-vocab: #14120D; }

.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.r4 .nav { z-index: 20; background: color-mix(in srgb, var(--bg) 84%, transparent); }
.r4 main > section > *, .r4 .look-end { position: relative; z-index: 1; }
.r4 .btn { border-radius: 999px; }
/* a Mac visitor before the Mac download exists: the button says so, quieter than a download */
.r4 .btn.soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.r4 .btn.soon:hover { background: var(--step); }
.r4 span.also-on { text-decoration: none; color: var(--muted); font-weight: 500; }
.r4 h2 { font-size: clamp(32px, 3.4vw, 50px); font-weight: 750; letter-spacing: -0.032em; line-height: 1.04; }
.r4 .sub { margin-top: 14px; max-width: 48ch; font-size: clamp(17px, 1.3vw, 19px); }
.sec { padding-block: clamp(64px, 7.5vw, 116px) 0; }
.tint-apps { background: var(--tint-apps); } .tint-genius { background: var(--tint-genius); }
.tint-lists { background: var(--tint-lists); } .tint-vocab { background: var(--tint-vocab); }

/* The lane under each demo, where (option 1) the dots become the voice. Empty space otherwise, so it is
   also each section's bottom margin. */
.lane { height: clamp(84px, 9vw, 136px); }

/* Hero */
.hero { padding-block: clamp(20px, 3.5vw, 48px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { display: grid; gap: 18px; }
.hero h1 .say { font-size: clamp(50px, 6.2vw, 98px); font-weight: 800; line-height: .92; letter-spacing: -0.045em; }
.hero h1 .what { font-size: clamp(20px, 1.7vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.hero .lead { margin-top: 22px; max-width: 36ch; font-size: clamp(17px, 1.3vw, 19px); }
.hero .cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero .price { margin-top: 18px; font-size: 16px; color: var(--muted); }
.try { margin-top: 24px; min-height: 2.6em; font-size: 16px; color: var(--muted); }
.try b { color: var(--ink); font-weight: 600; }
/* the line changes with a soft blur (transitions.dev "Text states swap": 150 ms) */
.try { transition: opacity .15s ease, transform .15s ease, filter .15s ease; }
.try.out { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
/* line masks from the headline reveal: room for descenders and accents, so nothing is clipped */
.ln-mask { padding-block: .08em .16em; margin-block: -.08em -.16em; }
:root[data-os="phone"] .try { display: none; }
.demo .kit, .vdemo .kit { border-radius: 18px; }
/* the honest line: money, email addresses and the fuller clean-up come from Advanced formatting, which is off until switched on */
.demo-note { margin-top: 10px; padding-left: 9.4%; font-size: 14px; color: var(--muted); }   /* lined up with the app window inside the demo (150 of 1600) */
@media (max-width: 640px) { .demo-note { padding-left: 2.8%; } }

/* Works wherever you can type: an endless list, three rows that never run out, drifting opposite ways */
.apps .head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 48px; }
.rows { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: clamp(22px, 2.4vw, 34px); }
.marquee { overflow: hidden; }
.track { display: flex; width: max-content; animation: run var(--dur, 70s) linear infinite; }
.marquee:nth-child(even) .track { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
.set { display: flex; gap: clamp(30px, 3.4vw, 52px); padding-right: clamp(30px, 3.4vw, 52px); }
@keyframes run { to { transform: translateX(-50%); } }
.app { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.r4 .app-ico { width: clamp(30px, 2.6vw, 40px); height: clamp(30px, 2.6vw, 40px); color: var(--ink); }
.app-ico[data-app="google-sheets"] { color: #1E8E3E; } .app-ico[data-app="excel"] { color: #217346; } .app-ico[data-app="powerpoint"] { color: #C43E1C; }
.app-ico[data-app="google-slides"] { color: #E8A600; } .app-ico[data-app="evernote"] { color: #00A82D; } .app-ico[data-app="canva"] { color: #00A3AD; }
.app-ico[data-app="substack"] { color: #FF6719; } .app-ico[data-app="calendly"] { color: #006BFF; }
.apps .more { margin-top: clamp(28px, 3vw, 40px); font-size: 16px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; width: auto; } .set + .set { display: none; } .set { flex-wrap: wrap; row-gap: 20px; padding-inline: var(--gutter); }
}

/* Genius Mode: what it does in four words, then a row you scroll sideways; the panel in the middle plays */
.genius, .vocab, .fmt { padding-bottom: clamp(56px, 6vw, 96px); }
/* Genius Mode's panels are tall, so its lane sits between the words and the demo, where it is on screen with it */
.genius .lane, .vocab .lane, .fmt .lane { height: clamp(64px, 6.5vw, 100px); margin-top: 4px; }
.genius .head, .vocab .head, .fmt .head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 48px; }
.genius .says { margin-top: 10px; font-size: clamp(22px, 2vw, 30px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--genius); }
.genius .sub, .vocab .head .sub, .fmt .head .sub { margin-top: 12px; }
/* The tabs are one bar; the purple pill slides to the chosen one (transitions.dev "Tabs sliding": 250 ms, cubic-bezier(0.22, 1, 0.36, 1)) */
.tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.tabs button { position: relative; z-index: 1; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px var(--font); cursor: pointer; transition: color .25s cubic-bezier(.22, 1, .36, 1), transform .16s var(--ease-out); }
.tabs button:active { transform: scale(.97); }
.tabs button[aria-pressed="true"] { color: #fff; }
.tabs:not(.has-pill) button[aria-pressed="true"] { background: #6C5CE7; }
/* while the examples move on by themselves, the pill fills as its demo plays; it stops once the visitor takes over */
.tab-prog { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .2); transform-origin: left center; transform: scaleX(0); transition: transform .1s linear; }
.tabs.manual .tab-prog { display: none; }
.tab-pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; overflow: hidden; background: #6C5CE7; transition: transform .25s cubic-bezier(.22, 1, .36, 1), width .25s cubic-bezier(.22, 1, .36, 1), height .25s cubic-bezier(.22, 1, .36, 1); }
.row { margin-top: 0; display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gutter), calc((100vw - 1240px) / 2)) 10px; scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.panel { margin: 0; flex: 0 0 min(980px, 84vw); scroll-snap-align: center; opacity: .32; transform: scale(.96); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.panel.lit { opacity: 1; transform: none; }
.panel .kit { pointer-events: none; border-radius: 18px; }
.panel figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.panel figcaption b { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.panel figcaption span { font-size: 16px; color: var(--muted); }

/* Lists: counted out loud, written as a numbered list */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.card { border-radius: 22px; background: var(--surface); padding: clamp(20px, 2.4vw, 32px); }
.speech { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-radius: 18px; background: var(--field); font-size: 17px; line-height: 1.5; color: var(--muted); min-height: 82px; }
.mic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; transition: background-color .2s ease; } /* taste-skill-ignore: the mic dot's own white ring, as the app draws it */
.mic svg { width: 14px; height: 14px; color: #fff; }
.mic.listening { background: var(--red); } .mic.working { background: #2C5BE0; } .mic.ready { background: var(--green); }
/* Words arrive the way speech does: each one comes into focus (transitions.dev "Streaming text": 350 ms out of a 1 px blur) */
.said .w { opacity: 0; filter: blur(1px); transition: opacity .35s cubic-bezier(.22, 1, .36, 1), filter .35s cubic-bezier(.22, 1, .36, 1); }
.said .w.in { opacity: 1; filter: none; }
.speech .count { color: var(--ink); font-weight: 600; background: var(--accent-soft); border-radius: 6px; padding: 0 3px; }
.doc { margin-top: 18px; min-height: 196px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.doc p { opacity: 0; transform: translateY(8px); }
.doc .num { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; margin-right: .35em; }
.replay { margin-top: 16px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.note-small { margin-top: 14px; font-size: 15px; color: var(--muted); }

/* Vocabulary: a real take in a real app – wrong name, add it, right name */
.vdemo { margin-top: clamp(32px, 4vw, 52px); width: min(980px, 100%); margin-inline: auto; }
.vdemo figcaption { margin-top: 14px; font-size: 16px; color: var(--muted); text-align: center; }

.r4 .look-end { padding-block: 72px 96px; }

@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .hero .demo { margin-top: 8px; }
  .panel { flex-basis: 88vw; }
  .row { padding-inline: var(--gutter); gap: 14px; }
  .genius .head, .vocab .head, .fmt .head { align-items: start; }
}
@media (max-width: 520px) {
  .r4 .nav .btn.small { padding: 0 14px; }
}
.app-ico[data-app="hubspot"] { color: #FF7A59; } .app-ico[data-app="webflow"] { color: #146EF5; }

/* ---- Advanced formatting: one card, four spoken examples */
.fmt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fmt-tabs { margin-top: 26px; }
.fmt-card .speech { min-height: 108px; }
.fmt-card .doc { min-height: 210px; }
.doc p { transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); }
.doc p.in { opacity: 1; transform: none; }
.doc .n { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; margin-right: .35em; }
.doc mark { padding: 0 4px; border-radius: 6px; background: var(--accent-soft); color: var(--ink); font-weight: 600; }

/* ---- Why Talkativ exists: said once, briefly, in the founder's own words (from the app's Welcome screen) */
.story { padding-bottom: clamp(64px, 7.5vw, 116px); }
.story-in { max-width: 1000px; }
.r4 .story-h { font-size: clamp(18px, 1.4vw, 21px); font-weight: 650; letter-spacing: -0.01em; color: var(--muted); }
.story-q { margin: 16px 0 0; }
.story-q p { font-size: clamp(28px, 3.3vw, 50px); font-weight: 650; line-height: 1.14; letter-spacing: -0.028em; text-wrap: balance; }
.story-q footer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 17px; }
.story-q footer img { width: 36px; height: 36px; border-radius: 10px; }
.story-q footer .link { margin-left: 6px; }

/* ---- Pricing summary: the dated price line on the homepage (SEO brief); the full comparison lives on /pricing */
.pricing { padding-bottom: clamp(64px, 7.5vw, 116px); }
.pricing .head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 48px; }
.bill .tab-pill { background: var(--btn); }
.bill:not(.has-pill) button[aria-pressed="true"] { background: var(--btn); }
.bill button i { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 12.5px var(--font); font-style: normal; }
.bill button[aria-pressed="true"] i { background: rgba(255, 255, 255, .22); color: #fff; }
.plans { margin-top: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); padding: clamp(22px, 2.4vw, 32px); }
.plan h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.plan .amt { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.plan .num { font-size: clamp(44px, 4.4vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan .num .dg { display: inline-block; }
.plan .unit { font-size: 17px; color: var(--muted); }
.plan .per { margin-top: 10px; min-height: 1.5em; font-size: 15px; color: var(--muted); }
.plan ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 16px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.plan-max { outline: 2px solid var(--genius); outline-offset: -2px; }
.plan-max li svg { color: var(--genius); }
.trial { margin-top: auto; padding-top: 20px; font-size: 15px; font-weight: 600; color: var(--genius); }
.plans-end { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* ---- Questions: real answers, visible to people and to search engines (FAQ hidden code built from the same text) */
.faq { padding-bottom: clamp(64px, 7.5vw, 116px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.qas { display: grid; gap: 10px; }
.qa { border-radius: 18px; background: var(--surface); }
.qa h3 { margin: 0; font-size: inherit; }
.qa-q { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: 600 18px/1.35 var(--font); text-align: left; cursor: pointer; }
.qa-q svg { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.qa.open .qa-q svg { transform: rotate(180deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s cubic-bezier(.22, 1, .36, 1); }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { max-width: 62ch; padding: 0 22px 20px; font-size: 17px; color: var(--muted); }

/* ---- The last word: the brand line again, one button */
.final-in { display: grid; justify-items: center; text-align: center; }
.r4 .final h2 { font-size: clamp(46px, 5.8vw, 88px); font-weight: 800; line-height: .95; letter-spacing: -0.045em; }
.final .sub { margin-inline: auto; }
.final .cta { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.lane.short { height: clamp(72px, 8vw, 120px); }

/* ---- Footer: every page the homepage hands on to */
.foot { position: relative; z-index: 1; padding-block: clamp(48px, 6vw, 80px) 28px; background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 28px 32px; }
.foot-brand p { margin-top: 12px; max-width: 26ch; font-size: 15px; color: var(--muted); }
.foot-col h3 { margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.foot-col a { display: block; padding: 5px 0; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .18s ease; }
.foot-col a:hover { color: var(--ink); }
.foot-end { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.r4 .foot .look-end { padding-block: 24px 0; font-size: 14px; }

@media (max-width: 860px) {
  .fmt-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---- Phones: the top bar keeps the logo, one action and a menu button (founder 05-11: "Email me the link" must fit on
   one line); the links and the light/dark switch open under the bar (transitions.dev "Menu dropdown": 250 ms in, 150 ms out) */
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: var(--step); color: var(--ink); cursor: pointer; transition: transform .16s var(--ease-out); }
.menu-btn:active { transform: scale(.94); }
.menu-btn svg { width: 20px; height: 20px; }
.nav .btn.small { white-space: nowrap; }
.nav-sheet { position: absolute; left: 0; right: 0; top: 100%; padding-block: 6px 22px; background: var(--surface); transform-origin: top center;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1); }
.nav-sheet.closing { opacity: 0; transform: translateY(-6px) scale(.98); transition-duration: .15s; }
.nav-sheet.opening { opacity: 0; transform: translateY(-6px) scale(.98); }
/* (round2.css lays out every .wrap inside the bar as one 68 px row; the sheet's own rows undo that) */
.nav .nav-sheet .wrap { height: auto; }
.nav .nav-sheet .sheet-links { display: grid; gap: 0; }
.sheet-links a { padding: 12px 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.nav .nav-sheet .sheet-end { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sheet-end .theme-btn { width: auto; padding: 0 16px; gap: 8px; border-radius: 999px; display: inline-flex; align-items: center; height: 48px; font: 600 15px var(--font); }
@media (max-width: 760px) {
  .nav .theme-btn#themeBtn { display: none; }
  .menu-btn { display: grid; }
  .nav .wrap { gap: 12px; }
  .nav-end { gap: 8px; }
}
@media (min-width: 761px) { .nav-sheet { display: none !important; } }

/* ---- Phones: every bar of tabs is one full-width control with equal, centred segments (founder 05-11) */
@media (max-width: 560px) {
  .r4 .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 2px; padding: 3px; }
  .r4 .tabs button { padding: 0 4px; font-size: 13.5px; min-height: 42px; white-space: nowrap; text-align: center; justify-content: center; }
  .bill button i { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: 11.5px; }
}

/* App icons, one style (founder 05-11: "have you used consistency across the board?"): flat one-colour marks from Simple Icons
   (Microsoft apps from Material Design Icons), each in its brand colour. Black marks use the text colour; very pale ones are
   deepened on light grounds, very dark ones lifted on dark grounds, so every mark reads in both modes. Generated from
   scratchpad mono-got.txt (brand colours: simple-icons data). */
.r4 .app-ico[data-app="gmail"] { color: #EA4335; }
.r4 .app-ico[data-app="outlook"] { color: #0078D4; }
.r4 .app-ico[data-app="slack"] { color: #4A154B; }
.r4 .app-ico[data-app="teams"] { color: #6264A7; }
.r4 .app-ico[data-app="whatsapp"] { color: color-mix(in srgb, #25D366 72%, #000); }
.r4 .app-ico[data-app="zoom"] { color: #0B5CFF; }
.r4 .app-ico[data-app="google-meet"] { color: #00897B; }
.r4 .app-ico[data-app="telegram"] { color: #26A5E4; }
.r4 .app-ico[data-app="messenger"] { color: #0866FF; }
.r4 .app-ico[data-app="signal"] { color: #3B45FD; }
.r4 .app-ico[data-app="linkedin"] { color: #0A66C2; }
.r4 .app-ico[data-app="x"] { color: var(--ink); }
.r4 .app-ico[data-app="reddit"] { color: #FF4500; }
.r4 .app-ico[data-app="intercom"] { color: color-mix(in srgb, #6AFDEF 72%, #000); }
.r4 .app-ico[data-app="zendesk"] { color: #03363D; }
.r4 .app-ico[data-app="hubspot"] { color: #FF7A59; }
.r4 .app-ico[data-app="salesforce"] { color: #00A1E0; }
.r4 .app-ico[data-app="google-docs"] { color: #4285F4; }
.r4 .app-ico[data-app="word"] { color: #2B579A; }
.r4 .app-ico[data-app="notion"] { color: var(--ink); }
.r4 .app-ico[data-app="asana"] { color: #F06A6A; }
.r4 .app-ico[data-app="jira"] { color: #0052CC; }
.r4 .app-ico[data-app="google-sheets"] { color: #34A853; }
.r4 .app-ico[data-app="excel"] { color: #217346; }
.r4 .app-ico[data-app="powerpoint"] { color: #D24726; }
.r4 .app-ico[data-app="google-slides"] { color: color-mix(in srgb, #FBBC04 72%, #000); }
.r4 .app-ico[data-app="confluence"] { color: #172B4D; }
.r4 .app-ico[data-app="trello"] { color: #0052CC; }
.r4 .app-ico[data-app="linear"] { color: #5E6AD2; }
.r4 .app-ico[data-app="clickup"] { color: #7B68EE; }
.r4 .app-ico[data-app="airtable"] { color: color-mix(in srgb, #18BFFF 72%, #000); }
.r4 .app-ico[data-app="basecamp"] { color: #1D2D35; }
.r4 .app-ico[data-app="todoist"] { color: #E44332; }
.r4 .app-ico[data-app="evernote"] { color: #00A82D; }
.r4 .app-ico[data-app="obsidian"] { color: #7C3AED; } /* taste-skill-ignore: Obsidian's own brand colour */
.r4 .app-ico[data-app="google-calendar"] { color: #4285F4; }
.r4 .app-ico[data-app="google-keep"] { color: color-mix(in srgb, #FFBB00 72%, #000); }
.r4 .app-ico[data-app="onenote"] { color: #7719AA; }
.r4 .app-ico[data-app="miro"] { color: var(--ink); }
.r4 .app-ico[data-app="figma"] { color: #F24E1E; }
.r4 .app-ico[data-app="canva"] { color: color-mix(in srgb, #00C4CC 72%, #000); }
.r4 .app-ico[data-app="chatgpt"] { color: var(--ink); }
.r4 .app-ico[data-app="claude"] { color: #D97757; } /* taste-skill-ignore: Claude's own brand colour */
.r4 .app-ico[data-app="gemini"] { color: #8E75B2; }
.r4 .app-ico[data-app="perplexity"] { color: #1FB8CD; }
.r4 .app-ico[data-app="copilot"] { color: var(--ink); }
.r4 .app-ico[data-app="cursor"] { color: var(--ink); }
.r4 .app-ico[data-app="windsurf"] { color: var(--ink); }
.r4 .app-ico[data-app="vscode"] { color: #007ACC; }
.r4 .app-ico[data-app="github"] { color: var(--ink); }
.r4 .app-ico[data-app="gitlab"] { color: #FC6D26; }
.r4 .app-ico[data-app="replit"] { color: #F26207; }
.r4 .app-ico[data-app="google-chrome"] { color: #4285F4; }
.r4 .app-ico[data-app="wordpress"] { color: #21759B; }
.r4 .app-ico[data-app="medium"] { color: var(--ink); }
.r4 .app-ico[data-app="substack"] { color: #FF6719; }
.r4 .app-ico[data-app="shopify"] { color: #7AB55C; }
.r4 .app-ico[data-app="webflow"] { color: #146EF5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .r4 .app-ico[data-app="slack"] { color: color-mix(in srgb, #4A154B 45%, #fff); }
  :root:not([data-theme="light"]) .r4 .app-ico[data-app="zendesk"] { color: color-mix(in srgb, #03363D 45%, #fff); }
  :root:not([data-theme="light"]) .r4 .app-ico[data-app="confluence"] { color: color-mix(in srgb, #172B4D 45%, #fff); }
  :root:not([data-theme="light"]) .r4 .app-ico[data-app="basecamp"] { color: color-mix(in srgb, #1D2D35 45%, #fff); }
}
:root[data-theme="dark"] .r4 .app-ico[data-app="slack"] { color: color-mix(in srgb, #4A154B 45%, #fff); }
:root[data-theme="dark"] .r4 .app-ico[data-app="zendesk"] { color: color-mix(in srgb, #03363D 45%, #fff); }
:root[data-theme="dark"] .r4 .app-ico[data-app="confluence"] { color: color-mix(in srgb, #172B4D 45%, #fff); }
:root[data-theme="dark"] .r4 .app-ico[data-app="basecamp"] { color: color-mix(in srgb, #1D2D35 45%, #fff); }

/* the formatting carousel heading wraps to two lines so its tabs sit beside it, as in the other carousels */
.fmt .head > div:first-child { max-width: 640px; }