:root {
--brand-rose: #f43f5e;
--brand-orange: #ea580c;
--brand-gradient: linear-gradient(100deg, #f43f5e 0%, #ea580c 100%);
--paper: #fbfaf6;
--paper-warm: #f5f2ec;
--paper-deep: #e4e2d8;
--surface: #ffffff;
--ink: #1c1914;
--muted: #5f5a52;
--dim: #908879;
--hairline: rgba(20, 16, 10, 0.18);
--forest: #1f4d3a;
--olive: #2f4a2f;
--leaf: #78b85a;
--mist: #e7efe3;
--blue: #5e7f9a;
--blue-ink: #243746;
--blue-wash: #dde8ee;
--terracotta: #c9825a;
--ochre: #e9c76a;
--blush: #f2d8d4;
--shadow-soft: 0 24px 80px rgba(57, 44, 28, 0.12);
--shadow-card: 0 12px 42px rgba(57, 44, 28, 0.1);
--radius: 8px;
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: "Newsreader", Georgia, "Times New Roman", serif;
--container: 1230px;
--page-gutter: 32px;
/* Hero image fade experiment - reversible */
--hero-fade-desktop: linear-gradient(90deg, rgba(255, 253, 248, 1) 0%, rgba(255, 253, 248, 0.98) 30%, rgba(255, 253, 248, 0.82) 45%, rgba(255, 253, 248, 0.28) 62%, rgba(255, 253, 248, 0) 78%);
--hero-fade-tablet: linear-gradient(90deg, rgba(255, 253, 248, 1) 0%, rgba(255, 253, 248, 0.98) 36%, rgba(255, 253, 248, 0.72) 58%, rgba(255, 253, 248, 0.1) 100%);
--hero-fade-mobile: linear-gradient(180deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, 0.12) 28%, rgba(255, 253, 248, 0.92) 52%, rgba(255, 253, 248, 1) 100%);
}
body.font-dm {
--font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(circle at 13% 8%, rgba(233, 199, 106, 0.18), transparent 30%),
radial-gradient(circle at 88% 10%, rgba(221, 232, 238, 0.8), transparent 28%),
linear-gradient(180deg, #fffdf8 0%, var(--paper) 38%, #f6f1e9 100%);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 20;
pointer-events: none;
opacity: 0.07;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
}
button {
cursor: pointer;
}
img {
max-width: 100%;
display: block;
}
.icon-defs {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
h1,
h2,
h3 {
letter-spacing: -0.02em;
}
h1,
h2,
h3,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
:where(a, button, input, summary):focus-visible {
outline: 3px solid rgba(244, 63, 94, 0.45);
outline-offset: 3px;
border-radius: 6px;
}
.container {
width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(251, 250, 246, 0.86);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(20, 16, 10, 0.1);
}
.nav-shell {
height: 76px;
display: grid;
grid-template-columns: minmax(170px, 1fr) auto minmax(250px, 1fr);
align-items: center;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.site-header .brand span {
position: relative;
}
.site-header .brand span::after {
content: "pre-release";
position: absolute;
top: -16px;
right: -54px;
color: #d7261e;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
transform: rotate(18deg);
transform-origin: left center;
pointer-events: none;
white-space: nowrap;
}
.brand img {
width: 24px;
height: 28px;
border-radius: 8px;
}
.site-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
padding: 0;
border: 0;
background: transparent;
}
.site-nav a {
position: relative;
display: inline-flex;
justify-content: center;
padding: 0;
color: var(--muted);
font-size: 14px;
font-weight: 600;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
color: var(--ink);
}
.site-nav a[aria-current="page"]::after {
content: "";
position: absolute;
left: 50%;
bottom: -3px;
width: 32px;
height: 2px;
border-radius: 999px;
background: var(--ink);
transform: translateX(-50%);
}
.nav-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
min-width: 0;
}
.signin {
color: var(--muted);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.signin:hover {
color: var(--ink);
}
.mobile-toggle {
display: none;
--mobile-toggle-bar-width: 24px;
--mobile-toggle-bar-height: 3px;
--mobile-toggle-bar-gap: 4px;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--ink);
cursor: pointer;
}
/* Three-bar hamburger that morphs into an X via the aria-expanded state */
.mobile-toggle-bar {
display: block;
width: var(--mobile-toggle-bar-width);
height: var(--mobile-toggle-bar-height);
margin: 0;
background: currentColor;
border-radius: 2px;
transition: transform 200ms ease, opacity 150ms ease;
transform-origin: center;
}
.mobile-toggle[aria-expanded="true"] .mobile-toggle-bar:nth-child(1) {
width: 26px;
transform: translateY(calc(var(--mobile-toggle-bar-height) + var(--mobile-toggle-bar-gap))) rotate(45deg);
}
.mobile-toggle[aria-expanded="true"] .mobile-toggle-bar:nth-child(2) {
opacity: 0;
}
.mobile-toggle[aria-expanded="true"] .mobile-toggle-bar:nth-child(3) {
width: 26px;
transform: translateY(calc((var(--mobile-toggle-bar-height) + var(--mobile-toggle-bar-gap)) * -1)) rotate(-45deg);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 42px;
padding: 0 18px;
border-radius: var(--radius);
border: 1px solid rgba(20, 16, 10, 0.14);
background: rgba(255, 255, 255, 0.7);
color: var(--ink);
font-weight: 700;
white-space: nowrap;
box-shadow: 0 8px 26px rgba(57, 44, 28, 0.07);
}
.btn-primary {
border: 0;
color: #fff;
background: var(--brand-gradient);
box-shadow: 0 16px 34px rgba(234, 88, 12, 0.22);
}
.btn-primary::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-right: -1px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.48);
}
.btn-dark {
color: #fff;
background: var(--forest);
border-color: transparent;
}
.section {
padding: 125px 0;
}
.section-tight {
padding: 72px 0;
}
.section-surface {
background: color-mix(in srgb, var(--paper-warm) 82%, white);
border-block: 1px solid rgba(20, 16, 10, 0.08);
}
.section-divider {
background: rgba(255, 255, 255, 0.22);
border-block: 1px solid rgba(20, 16, 10, 0.08);
}
.section-footnote {
margin-top: 18px;
color: var(--dim);
font-size: 14px;
line-height: 1.45;
}
.section-head {
margin-bottom: 42px;
}
.section-head-compact {
margin-bottom: 34px;
}
.title-narrow {
max-width: 500px;
}
.lede-spaced {
margin-top: 22px;
}
.lede-spaced-tight {
margin-top: 18px;
}
.stack-spaced {
margin-top: 34px;
}
.actions-centered {
justify-content: center;
}
.footer-blurb {
margin-top: 14px;
max-width: 300px;
}
.text-nowrap {
white-space: nowrap;
}
.dynamic-section-head .lede {
margin-top: 18px;
}
.friction-head {
display: block;
max-width: none;
}
.friction-head .section-title {
max-width: 100%;
font-family: var(--font-sans);
font-size: clamp(26px, 5.6vw, 42px);
line-height: 1.2;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(26px, 5.6vw, 42px);
line-height: 1.15;
font-weight: 600;
}
.title-with-flag {
display: inline-flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.german-flag {
display: inline-block;
width: 54px;
height: 34px;
flex: 0 0 auto;
border: 1px solid rgba(18, 18, 18, 0.14);
border-radius: 3px;
background:
linear-gradient(
to bottom,
#000 0,
#000 33.333%,
#dd0000 33.333%,
#dd0000 66.666%,
#ffce00 66.666%,
#ffce00 100%
);
box-shadow: 0 8px 18px rgba(18, 18, 18, 0.08);
}
.section-title .accent,
.hero-title .accent {
display: block;
color: inherit;
}
.lede {
color: var(--muted);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.58;
}
.muted {
color: var(--muted);
}
.dim {
color: var(--dim);
}
.hero {
position: relative;
overflow: hidden;
padding: 0 0 32px;
border-bottom: 1px solid rgba(20, 16, 10, 0.08);
background:
var(--hero-fade-desktop),
url("assets/images/hero-image.png") right -90px center / auto 100% no-repeat,
var(--paper);
}
.hero-grid {
position: relative;
overflow: visible;
display: grid;
grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr);
min-height: 500px;
padding: 48px 0 36px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
align-items: center;
}
.hero-grid::before {
content: none;
}
.hero-copy {
position: relative;
z-index: 2;
grid-column: 1;
max-width: 515px;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(30px, 6.6vw, 48px);
line-height: 1.04;
font-weight: 600;
max-width: 590px;
}
.hero-title .accent {
font-size: 0.8em;
line-height: 1.05;
}
.hero-body {
margin-top: 22px;
color: var(--muted);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.56;
max-width: 475px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.trust-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.hero .trust-row {
gap: 14px;
margin-top: 34px;
}
.hero .chip {
min-height: auto;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--ink);
}
.hero .chip::before {
width: auto;
height: auto;
border: 0;
background: transparent;
color: var(--forest);
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
font-size: 15px;
font-weight: 800;
line-height: 1;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 13px;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.54);
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--leaf);
}
.hero-visual {
position: relative;
min-height: 620px;
}
.art-card {
position: relative;
overflow: hidden;
border-radius: 16px;
min-height: 520px;
box-shadow: var(--shadow-soft);
background: var(--paper-warm);
border: 1px solid rgba(20, 16, 10, 0.08);
}
.founder-photo-card {
aspect-ratio: 1;
min-height: 0;
}
/* Local ASR models graphic — about-page art card variant.
Soft warm gradient backdrop so the dark PC silhouette and cream model
cards both have something to sit on. SVG fills the container's content
area minus a small inset so the cards do not touch the border. */
.local-models-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 430px;
padding: 22px;
background:
radial-gradient(circle at 18% 16%, rgba(244, 63, 94, 0.10), transparent 38%),
radial-gradient(circle at 84% 84%, rgba(233, 199, 106, 0.14), transparent 42%),
var(--paper-warm);
}
.local-models-graphic {
width: 100%;
height: auto;
max-height: 100%;
display: block;
}
.art-crop {
position: absolute;
inset: 0;
}
.art-founder {
background-image: url("assets/images/about-profile-picture.jpg");
background-position: center;
background-size: cover;
filter: saturate(0.96) contrast(1.02);
}
.founder-photo-card::after {
display: none;
}
.art-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 44%, rgba(251, 250, 246, 0.18)),
radial-gradient(circle at 55% 52%, transparent 40%, rgba(251, 250, 246, 0.15));
pointer-events: none;
}
.mode-panel {
position: absolute;
right: -16px;
bottom: 24px;
width: min(390px, calc(100% - 32px));
padding: 18px;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 14px;
background: rgba(255, 253, 248, 0.88);
box-shadow: var(--shadow-card);
backdrop-filter: blur(14px);
}
.mode-panel h3 {
margin: 0 0 9px;
font-size: clamp(22px, 5vw, 32px);
font-weight: 600;
}
.mode-panel p {
font-size: 15px;
line-height: 1.52;
}
.mode-panel ul {
display: grid;
gap: 7px;
list-style: none;
}
.mode-panel li {
position: relative;
padding-left: 18px;
color: var(--muted);
font-size: 14px;
}
.mode-panel li::before {
content: "";
position: absolute;
left: 0;
top: 0.68em;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--brand-orange);
}
.mode-tabs {
position: absolute;
left: 22px;
right: 22px;
bottom: -52px;
display: flex;
gap: 9px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.tab-button,
.profile-button,
.price-toggle,
.faq-question {
border: 1px solid rgba(20, 16, 10, 0.14);
background: rgba(255, 255, 255, 0.68);
color: var(--muted);
border-radius: 999px;
font-weight: 700;
transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tab-button:hover,
.profile-button:hover,
.price-toggle:hover {
transform: translateY(-1px);
color: var(--ink);
}
.tab-button {
min-height: 38px;
padding: 0 14px;
box-shadow: 0 12px 28px rgba(57, 44, 28, 0.08);
}
.profile-button,
.mode-list .tab-button {
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 48px;
padding: 0 18px;
text-align: left;
}
.tab-button.active,
.profile-button.active,
.price-toggle.active {
color: #fff;
border-color: transparent;
background: var(--brand-gradient);
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.four-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.card,
.soft-card,
.quote-card,
.plan-card {
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.62);
box-shadow: var(--shadow-card);
}
.card,
.soft-card {
padding: 26px;
}
.mindful-rows {
margin: 18px 0 0;
padding: 0;
display: grid;
gap: 0;
}
.mindful-rows > div {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 18px;
padding: 14px 0;
border-top: 1px solid rgba(20, 16, 10, 0.08);
}
/* On phones the 120px label column squeezes the body to ~3 words per
line — stack instead so each dd gets the full card width. */
@media (max-width: 600px) {
.mindful-rows > div {
grid-template-columns: 1fr;
gap: 4px;
}
}
.mindful-rows > div:first-child {
border-top: 0;
padding-top: 4px;
}
.mindful-rows dt {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-orange);
align-self: start;
padding-top: 2px;
}
.mindful-rows dd {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--ink);
}
.card h3,
.soft-card h3 {
font-size: clamp(20px, 3.6vw, 24px);
line-height: 1.12;
font-weight: 600;
margin-bottom: 12px;
}
.card p,
.soft-card p,
.quote-card p,
.plan-card p {
color: var(--muted);
font-size: 15.5px;
line-height: 1.6;
}
.soft-card p + .trust-row,
.card p + .trust-row {
margin-top: 22px;
}
.workflow-card {
display: grid;
align-content: start;
gap: 14px;
}
.workflow-card .step-count {
margin-bottom: 8px;
}
.workflow-card h3 {
margin-bottom: 0;
}
.icon-pill {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: var(--radius);
color: #fff;
font-weight: 650;
background: var(--brand-gradient);
}
.icon-pill.green {
background: var(--forest);
}
.icon-pill.blue {
background: var(--blue-ink);
}
.friction-card {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.34)),
var(--paper);
}
.friction-exploration {
display: grid;
gap: 26px;
}
.friction-variant {
padding: 22px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: var(--radius);
background: rgba(255, 253, 248, 0.58);
box-shadow: 0 14px 48px rgba(57, 44, 28, 0.08);
}
.variant-label {
display: inline-flex;
align-items: center;
min-height: 26px;
margin-bottom: 16px;
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.variant-label::before {
content: "";
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 999px;
background: var(--brand-gradient);
}
.friction-card-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.friction-card-merged,
.friction-surface-card,
.friction-step {
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-card);
}
.friction-card-merged,
.friction-surface-card {
padding: 24px;
}
.friction-card-merged h3,
.friction-surface-card h3,
.friction-step h3 {
margin: 0 0 12px;
font-size: clamp(20px, 3.6vw, 24px);
line-height: 1.12;
font-weight: 600;
}
.friction-card-merged p,
.friction-surface-card p,
.friction-step p {
color: var(--muted);
font-size: 15.5px;
line-height: 1.62;
}
.variant-direct .friction-card-merged {
min-height: 245px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
var(--paper);
}
.variant-relief {
background:
radial-gradient(circle at 12% 12%, rgba(244, 63, 94, 0.08), transparent 34%),
radial-gradient(circle at 88% 6%, rgba(221, 232, 238, 0.75), transparent 36%),
rgba(255, 253, 248, 0.6);
}
.variant-relief .friction-card-merged {
min-height: 240px;
border-color: rgba(20, 16, 10, 0.12);
}
.friction-kicker {
display: block;
margin-bottom: 14px;
color: var(--brand-orange);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.variant-relief .friction-card-merged h3 {
font-family: var(--font-serif);
font-size: clamp(22px, 5vw, 32px);
font-weight: 600;
}
.friction-step-list {
display: grid;
gap: 12px;
}
.friction-step {
display: grid;
grid-template-columns: 70px 1fr;
gap: 22px;
align-items: start;
padding: 24px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
var(--paper);
}
.step-count {
width: clamp(34px, 6vw, 48px);
height: clamp(34px, 6vw, 48px);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: #fff;
font-size: clamp(13px, 2vw, 16px);
font-weight: 800;
background: var(--blue-ink);
}
.friction-step:nth-child(1) .step-count {
background: var(--brand-gradient);
}
.friction-step:nth-child(2) .step-count {
background: var(--forest);
}
.friction-surface-card {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
var(--paper);
}
.friction-card-image {
display: none;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin-bottom: 20px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: var(--radius);
background: var(--paper);
box-shadow: 0 12px 30px rgba(57, 44, 28, 0.08);
}
.friction-card-icon {
display: block;
width: 51px;
height: 51px;
margin-bottom: 18px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 12px;
background-color: color-mix(in srgb, var(--brand-orange) 10%, white);
background-position: center;
background-repeat: no-repeat;
background-size: 28px 28px;
box-shadow: 0 8px 18px rgba(57, 44, 28, 0.07);
}
.friction-card-icon-keyboard {
background-image: url("data:image/svg+xml;utf8,");
}
.friction-card-icon-pencil {
/* Short collar (2 units), wave is a separate ::after layer toggleable
via .no-wave. Wave start position tuned so the pencil tip at (3.5, 19.3)
meets the start of the squiggle. */
position: relative;
background-image: url("data:image/svg+xml;utf8,");
}
/* Wavy "writing trail" — separate layer, toggleable via .no-wave on the icon */
.friction-card-icon-pencil::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: 28px 28px;
pointer-events: none;
}
/* Add .no-wave on the icon span to hide the writing trail:
*/
.friction-card-icon-pencil.no-wave::after {
display: none;
}
.friction-card-icon-transcript {
background-image: url("data:image/svg+xml;utf8,");
}
.surface-mini {
position: relative;
overflow: hidden;
height: 106px;
margin-bottom: 20px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: var(--radius);
background: rgba(251, 250, 246, 0.9);
}
.surface-mini::before {
content: "";
position: absolute;
inset: 16px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.75);
box-shadow: inset 0 0 0 1px rgba(20, 16, 10, 0.08);
}
.surface-mini span {
position: absolute;
z-index: 1;
height: 7px;
border-radius: 999px;
background: rgba(95, 90, 82, 0.32);
}
.surface-keyboard span:nth-child(1) {
left: 32px;
top: 34px;
width: 58%;
background: linear-gradient(90deg, var(--brand-rose), var(--brand-orange));
}
.surface-keyboard span:nth-child(2) {
left: 32px;
top: 55px;
width: 44%;
}
.surface-keyboard span:nth-child(3) {
left: 32px;
top: 76px;
width: 66%;
}
.surface-meeting span:nth-child(1) {
left: 30px;
top: 30px;
width: 54px;
height: 54px;
border-radius: 999px;
background: var(--forest);
}
.surface-meeting span:nth-child(2) {
left: 104px;
top: 38px;
width: 48%;
}
.surface-meeting span:nth-child(3) {
left: 104px;
top: 62px;
width: 62%;
background: rgba(36, 55, 70, 0.24);
}
.surface-output span:nth-child(1) {
left: 34px;
top: 26px;
width: 36%;
background: var(--brand-gradient);
}
.surface-output span:nth-child(2),
.surface-output span:nth-child(3),
.surface-output span:nth-child(4),
.surface-output span:nth-child(5) {
left: 40px;
width: 62%;
}
.surface-output span:nth-child(2) {
top: 49px;
}
.surface-output span:nth-child(3) {
top: 66px;
width: 48%;
}
.surface-output span:nth-child(4) {
top: 83px;
width: 58%;
}
.surface-output span:nth-child(5) {
left: 29px;
top: 49px;
width: 7px;
background: var(--leaf);
}
.proof-split {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
gap: 44px;
align-items: center;
}
.capture-gallery {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
}
.capture-gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow-soft);
}
.capture-gallery img:first-child {
grid-column: 1 / -1;
}
.capture-cycle {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
/* Enable container queries on this visual so inner elements (button,
recap, bubbles) can size as a fraction of the visual itself — making
the whole composition shrink uniformly on narrow viewports. */
container-type: inline-size;
container-name: capture-cycle;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 16px;
background:
radial-gradient(circle at 16% 16%, rgba(56, 189, 248, 0.08), transparent 34%),
radial-gradient(circle at 88% 86%, rgba(108, 203, 95, 0.09), transparent 36%),
var(--paper);
box-shadow: var(--shadow-soft);
}
.capture-cycle-item,
.capture-cycle-source,
.capture-cycle-recap {
position: absolute;
inset: 0;
}
.capture-cycle-item {
opacity: 0;
animation: capture-cycle-item 33s linear infinite;
animation-delay: calc(var(--cycle-index) * 11s);
}
.capture-cycle-source {
animation: capture-cycle-source 11s ease-in-out infinite;
}
.capture-cycle-source img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: saturate(1.02) contrast(1.01);
}
.capture-cycle-source::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(11, 10, 9, 0.02), rgba(11, 10, 9, 0.12)),
radial-gradient(circle at 86% 80%, rgba(251, 250, 246, 0.28), transparent 30%);
}
.capture-cycle-button {
position: absolute;
right: clamp(12px, 2.5%, 22px);
bottom: clamp(12px, 2.5%, 22px);
z-index: 4;
/* Sized as a fraction of the visual itself (cqw) with a px floor and
ceiling — shrinks together with the meeting illustration on phones
instead of dominating the small frame. */
width: clamp(48px, 22cqw, 92px);
aspect-ratio: 1;
filter: drop-shadow(0 16px 28px rgba(57, 44, 28, 0.22));
}
.capture-cycle-button .dt-button {
width: 100%;
height: 100%;
}
.capture-speech-bubble {
position: absolute;
left: var(--bubble-x);
top: var(--bubble-y);
z-index: 3;
display: grid;
gap: 4px;
width: clamp(68px, 17%, 108px);
padding: 10px 13px;
border-radius: 18px;
background: rgba(255, 252, 247, 0.88);
border: 1px solid rgba(20, 16, 10, 0.11);
box-shadow: 0 14px 28px rgba(20, 16, 10, 0.13);
transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(8px);
opacity: 0;
animation: capture-speech-bubble 11s ease-in-out infinite;
animation-delay: var(--bubble-delay);
}
/* Speech-bubble tail — a true CSS down-pointing triangle (not a rotated
square, which produced visible diamond corners on the left and right).
Two stacked pseudo-elements: ::before is the slightly larger outline
in the bubble's hairline color, ::after is the slightly smaller fill
sitting on top. The 1px size difference shows as a thin border along
the diagonals — same visual language as the bubble's perimeter, no
extraneous corners, no overlap with the bubble interior. */
.capture-speech-bubble::before,
.capture-speech-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 38%;
width: 0;
height: 0;
pointer-events: none;
}
.capture-speech-bubble::before {
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid rgba(20, 16, 10, 0.11);
}
.capture-speech-bubble::after {
margin-left: -7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid rgba(255, 252, 247, 0.88);
}
/* .tail-up variant — same triangle, mirrored vertically. The triangle now
sits ABOVE the bubble with its apex pointing up (toward a speaker that
sits above the bubble). Same horizontal anchor (left: 22%), so the
tail's footprint matches the default position. */
.capture-speech-bubble.tail-up::before,
.capture-speech-bubble.tail-up::after {
top: auto;
}
.capture-speech-bubble.tail-up::before {
/* bottom: 100% puts the element's outer-bottom edge at the bubble's
padding-top — which is 1px inside the outer border. The border-bottom
then extends the triangle upward from that edge, so the base sits
1px inside the bubble (mirroring the 1px overlap of the downward tail
for visual consistency) and the apex lands above. No extra offset. */
bottom: 100%;
border-top: 0;
border-bottom: 10px solid rgba(20, 16, 10, 0.11);
}
.capture-speech-bubble.tail-up::after {
bottom: 100%;
border-top: 0;
border-bottom: 9px solid rgba(255, 252, 247, 0.88);
}
.capture-speech-bubble i {
display: block;
height: 3px;
border-radius: 999px;
background: rgba(20, 16, 10, 0.24);
}
.capture-speech-bubble i:nth-child(2) {
width: 82%;
}
.capture-speech-bubble i:nth-child(3) {
width: 58%;
}
.capture-cycle-recap {
left: 7%;
right: 7%;
top: 9%;
bottom: 9%;
height: auto;
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: capture-cycle-recap 11s ease-in-out infinite;
}
.capture-cycle-recap .ms-body {
display: grid;
gap: clamp(8px, 3cqw, 16px);
align-content: start;
/* Container-aware so the recap text shrinks with the visual frame
instead of bursting out on phones. Floor keeps it legible, ceiling
matches the original desktop size. */
font-size: clamp(10px, 3.4cqw, 14px);
}
.capture-cycle-recap h4 {
margin: 0 0 clamp(4px, 1.6cqw, 8px);
font-size: clamp(10px, 3.2cqw, 13px);
font-weight: 800;
}
.capture-cycle-recap ul,
.capture-cycle-recap ol {
margin: 0;
padding-left: 20px;
color: var(--muted);
}
/* Drop the third summary bullet on narrow viewports — the recap window
only has so much vertical room inside the 4:3 visual, and the
"Follow-up points separated from the conversation" line was the one
that consistently spilled out. Two bullets read cleanly; the third
still appears on tablet/desktop where there's room. */
@media (max-width: 600px) {
.capture-cycle-recap ul li:nth-child(3) {
display: none;
}
}
.capture-cycle-recap li + li {
margin-top: 6px;
}
.capture-cycle-progress {
position: absolute;
left: 18px;
right: 18px;
bottom: 14px;
z-index: 10;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 252, 247, 0.62);
box-shadow: 0 0 0 1px rgba(20, 16, 10, 0.08);
}
.capture-cycle-progress span {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(20, 16, 10, 0.42);
transform-origin: left center;
animation: capture-cycle-progress 11s linear infinite;
}
@keyframes capture-cycle-item {
0%, 31.6% { opacity: 1; }
33.3%, 100% { opacity: 0; }
}
@keyframes capture-cycle-source {
/* Source visible 8%–46% (was 8%–52%), fades out 46%–55% (was 52%–61%)
to make room for the longer recap dwell below. */
0% {
opacity: 0;
transform: scale(1.01);
}
8%, 46% {
opacity: 1;
transform: scale(1);
}
55%, 100% {
opacity: 0;
transform: scale(1.018);
}
}
@keyframes capture-cycle-recap {
/* Recap held fully from 60% to 92% (was 67%–88%) — ~3.5s of full
opacity in the 11s loop (was ~2.3s), so the action items have time
to be read. */
0%, 50% {
opacity: 0;
transform: translateY(18px) scale(0.98);
}
60%, 92% {
opacity: 1;
transform: translateY(0) scale(1);
}
99%, 100% {
opacity: 0;
transform: translateY(-8px) scale(0.995);
}
}
@keyframes capture-speech-bubble {
0%, 8% {
opacity: 0;
transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(8px);
}
15%, 28% {
opacity: 1;
transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(0);
}
38%, 100% {
opacity: 0;
transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(-6px);
}
}
/* ============================================================
Shared loop-progress bar — visualises where in the cycle the
user currently is for the major animated scenes on the home
and features pages. Each scene injects an .animation-progress
element via JS and sets --progress-duration to match its own
loop length so the bar stays in sync.
============================================================ */
.animation-progress {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 50;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(20, 16, 10, 0.10);
pointer-events: none;
}
/* In the mode-scene picker on the features page, the notepad output
window sits at a 6% inset from each side of the scene. Pull the
progress bar in to 10% so it renders visibly narrower than the
notepad — consistent width across all 8 mode animations. */
.mode-scene .animation-progress {
left: 10%;
right: 10%;
/* White frame sits at bottom:6%, so the beige strip below is 6% tall.
Centre the 4px bar inside that strip: 3% from bottom puts the bar's
midline on the strip's midline at any container size. */
bottom: calc(3% - 2px);
}
.animation-progress > span {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(20, 16, 10, 0.55);
transform-origin: left center;
transform: scaleX(0);
animation: animation-progress var(--progress-duration, 11s) linear infinite;
}
@keyframes animation-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes capture-cycle-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.speed-visual {
display: flex;
flex-direction: column;
gap: 18px;
padding: 26px 28px;
border-radius: 16px;
background: linear-gradient(145deg, #fff, #f2eadf);
border: 1px solid rgba(20, 16, 10, 0.1);
box-shadow: var(--shadow-soft);
}
.speed-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) 76px;
grid-template-areas: "label field wpm";
gap: 18px;
align-items: center;
}
.speed-label {
grid-area: label;
color: var(--muted);
font-weight: 700;
}
.speed-wpm {
grid-area: wpm;
}
.speed-field {
grid-area: field;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
height: 44px;
padding: 0 14px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(20, 16, 10, 0.12);
box-shadow: inset 0 1px 2px rgba(20, 16, 10, 0.04);
overflow: hidden;
white-space: nowrap;
}
.speed-text {
flex: 0 0 auto;
color: var(--ink);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: pre;
}
.speed-caret {
flex: 0 0 auto;
width: 2px;
height: 60%;
margin-left: 2px;
background: var(--brand-orange);
animation: speed-caret-blink 1s steps(1) infinite;
}
.speed-wpm {
color: var(--brand-orange);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
white-space: nowrap;
text-align: right;
}
.speed-wpm-fast {
color: var(--brand-rose);
}
.speed-footnote {
margin: 0;
font-size: 13px;
}
@keyframes speed-caret-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@media (max-width: 600px) {
.speed-visual {
padding: 28px 22px;
gap: 22px;
}
.speed-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"label wpm"
"field field";
gap: 8px 14px;
}
.speed-label {
align-self: end;
}
.speed-wpm {
text-align: right;
align-self: end;
}
}
.profile-shell {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 26px;
align-items: start;
min-width: 0;
}
.profile-list {
display: grid;
gap: 10px;
align-content: start;
min-width: 0;
}
.profile-button {
box-shadow: 0 12px 28px rgba(57, 44, 28, 0.08);
}
.profile-output {
min-height: 420px;
padding: 34px;
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(221, 232, 238, 0.86), transparent 34%),
rgba(255, 255, 255, 0.68);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(20, 16, 10, 0.1);
min-width: 0;
}
/* ============================================================
Persona panel — stacked value cards + supporting scene
============================================================ */
.persona-detail-layout {
display: grid;
grid-template-columns: minmax(250px, 0.9fr) minmax(360px, 1.35fr);
gap: 26px;
align-items: stretch;
min-width: 0;
}
.persona-stage {
position: relative;
min-width: 0;
display: flex;
align-items: start;
}
.persona-scene {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 1 / 1;
min-height: 0;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(20, 16, 10, 0.1);
box-shadow: var(--shadow-soft);
background-color: var(--paper);
background-image: var(--profile-image);
background-size: cover;
background-position: center;
flex: 0 0 auto;
}
@media (min-width: 701px) {
.profile-founders {
background-position: 42% center;
}
.profile-consultants {
background-position: calc(50% - 25px) center;
}
.profile-managers {
background-position: left center;
}
.profile-researchers {
background-position: calc(50% + 100px) center;
}
.profile-programmers {
background-position: 55% center;
}
}
.persona-scene::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, transparent 68%, rgba(20, 16, 10, 0.08) 100%),
radial-gradient(circle at 82% 14%, rgba(255, 252, 247, 0.18), transparent 36%);
}
.persona-value-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
min-width: 0;
align-content: stretch;
}
.persona-value-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(18px, 2.1vw, 26px);
border-radius: 14px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(20, 16, 10, 0.1);
box-shadow: var(--shadow-soft);
min-width: 0;
justify-content: flex-start;
}
/* Brand-orange accent rail on the left edge — visually ties each card back
to the rose-orange transformation color used in the scene overlay. */
.persona-value-card::before {
content: "";
position: absolute;
top: 22px;
bottom: 22px;
left: 0;
width: 3px;
border-radius: 0 999px 999px 0;
background: var(--brand-gradient);
}
.persona-value-title {
margin: 0;
font-size: 17px;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
}
.persona-value-body {
margin: 0;
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
}
.persona-value-mode {
display: inline-flex;
align-self: flex-start;
margin-top: auto;
padding-top: 4px;
color: var(--dim);
font-size: 11px;
font-weight: 750;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.persona-value-mode::before {
content: "";
width: 6px;
height: 6px;
margin: 0.33em 8px 0 0;
border-radius: 999px;
background: color-mix(in srgb, var(--brand-orange) 68%, var(--paper));
opacity: 0.7;
}
.before-after {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 28px;
}
.sample-box {
min-height: 190px;
padding: 22px;
border-radius: 14px;
border: 1px solid rgba(20, 16, 10, 0.1);
background: rgba(255, 255, 255, 0.64);
}
.sample-label {
margin-bottom: 14px;
color: var(--dim);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sample-box blockquote {
margin: 0;
color: var(--muted);
font-family: var(--font-serif);
font-size: clamp(15px, 2.6vw, 21px);
line-height: 1.36;
font-weight: 500;
font-style: italic;
}
.sample-box h3 {
margin-bottom: 8px;
font-size: clamp(22px, 5vw, 32px);
line-height: 1.18;
font-weight: 600;
}
.sample-box p,
.mode-output-text {
color: var(--ink);
font-size: clamp(14px, 2.4vw, 18px);
line-height: 1.52;
}
.sample-box ul {
display: grid;
gap: 9px;
padding-left: 18px;
color: var(--muted);
}
.workspace-proof {
display: grid;
gap: 125px;
}
.workspace-intro {
max-width: 870px;
}
.workspace-intro .lede {
margin-top: 22px;
}
.workspace-zigzag {
display: grid;
gap: 125px;
}
.workspace-step {
display: grid;
grid-template-columns: minmax(280px, 0.62fr) minmax(420px, 1fr);
gap: 34px;
align-items: center;
}
.workspace-step-reverse {
grid-template-columns: minmax(420px, 1fr) minmax(280px, 0.62fr);
}
.workspace-step-reverse .workspace-copy {
grid-column: 2;
}
.workspace-step-reverse .workspace-visual {
grid-column: 1;
grid-row: 1;
}
.workspace-copy {
padding: 16px 0;
}
.workspace-number {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 18px;
border-radius: var(--radius);
background: var(--brand-gradient);
color: #fff;
font-size: 14px;
font-weight: 850;
letter-spacing: 0.04em;
box-shadow: 0 14px 30px rgba(234, 88, 12, 0.22);
}
.workspace-copy h3 {
max-width: 480px;
margin-bottom: 14px;
font-size: clamp(22px, 5vw, 32px);
line-height: 1.02;
font-weight: 600;
letter-spacing: -0.01em;
}
.workspace-copy p {
max-width: 520px;
color: var(--muted);
font-size: clamp(17px, 1.35vw, 18px);
line-height: 1.55;
}
.workspace-visual {
min-height: 330px;
container-type: inline-size;
border: 1px solid rgba(20, 16, 10, 0.13);
border-radius: 16px;
padding: 28px;
background:
radial-gradient(circle at 8% 10%, rgba(233, 199, 106, 0.18), transparent 28%),
radial-gradient(circle at 92% 18%, rgba(221, 232, 238, 0.85), transparent 32%),
rgba(255, 255, 255, 0.74);
box-shadow: var(--shadow-soft);
}
.mock-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px 40px;
gap: 10px;
margin-bottom: 14px;
padding: 10px;
border-radius: var(--radius);
background: #fff;
box-shadow: 0 12px 28px rgba(57, 44, 28, 0.1);
}
.mock-toolbar span,
.vocab-input {
min-height: 40px;
display: flex;
align-items: center;
padding: 0 14px;
border: 1px solid rgba(20, 16, 10, 0.09);
border-radius: var(--radius);
color: var(--dim);
background: #fff;
font-size: 14px;
}
.toolbar-btn,
.history-action {
display: grid;
place-items: center;
min-height: 40px;
width: 40px;
border: 1px solid rgba(20, 16, 10, 0.08);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 6px 14px rgba(57, 44, 28, 0.08);
color: var(--muted);
}
.toolbar-btn::before,
.history-action::before {
content: "";
display: block;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 0.72;
}
.toolbar-btn-import::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.toolbar-btn-settings::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.history-action-copy::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.history-action-more::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.history-list {
display: grid;
gap: 10px;
}
.history-item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(20, 16, 10, 0.08);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 10px 22px rgba(57, 44, 28, 0.08);
}
.history-body {
display: grid;
gap: 2px;
min-width: 0;
}
.history-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.history-item small {
color: var(--dim);
font-size: 12px;
}
.history-actions {
display: flex;
gap: 6px;
}
.mic-dot {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
color: #22c55e;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vocab-render {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.vocab-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 8px;
}
.vocab-head strong {
font-size: clamp(16px, 3vw, 22px);
line-height: 1;
}
.vocab-head span {
color: var(--dim);
font-size: 14px;
}
.vocab-add {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
gap: 8px;
align-items: stretch;
}
.vocab-add .vocab-input {
min-height: 44px;
}
.vocab-add-btn {
display: grid;
place-items: center;
width: 44px;
min-height: 44px;
padding: 0;
border: 1px solid rgba(20, 16, 10, 0.09);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 6px 14px rgba(57, 44, 28, 0.08);
color: var(--muted);
}
.vocab-add-btn::before {
content: "";
display: block;
width: 16px;
height: 16px;
background-color: currentColor;
opacity: 0.78;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.vocab-pill {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 16px;
border: 1px solid rgba(20, 16, 10, 0.08);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 12px 28px rgba(57, 44, 28, 0.1);
}
.phrase-render {
display: grid;
place-items: center;
overflow: hidden;
}
.phrase-stage {
position: relative;
display: grid;
place-items: center;
width: min(100%, 620px);
min-height: 300px;
border-radius: 14px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.6)),
radial-gradient(circle at 50% 48%, rgba(244, 63, 94, 0.13), transparent 24%),
radial-gradient(circle at 55% 56%, rgba(120, 184, 90, 0.16), transparent 34%);
border: 1px solid rgba(20, 16, 10, 0.1);
}
/* ============================================================
Quick Phrases scene (home page step 02)
9s loop: DT button → notepad fades in with "Meeting 5"
→ strike-through draws across → expansion replaces the keyword.
============================================================ */
/* 1. DT recording button: centered, visible briefly, then fades out
quickly so the notepad can take centre stage. */
.dt-button.phrase-dt-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110px;
height: 110px;
max-width: none;
overflow: visible;
z-index: 3;
animation: phrase-button-fade 12.5s ease-in-out infinite;
}
/* Lock the button to its recording-state look (pulse rings + filled mark) —
idle and spinner layers stay hidden. Higher specificity than the generic
.dt-button rules later in the file. */
.dt-button.phrase-dt-button .dt-idle,
.dt-button.phrase-dt-button .dt-spinner { opacity: 0; }
.dt-button.phrase-dt-button .dt-pulse,
.dt-button.phrase-dt-button .dt-recording { opacity: 1; }
/* 2. Notepad frame: takes up most of the stage and hosts the text content. */
.phrase-notepad {
/* .ms-frame already provides position:absolute + Windows app chrome.
These insets place it inside the stage with margin all round. */
top: 14%;
left: 8%;
right: 8%;
bottom: 14%;
z-index: 1;
opacity: 0;
transform: scale(0.96);
animation: phrase-notepad-show 12.5s ease-in-out infinite;
}
.phrase-notepad .ms-body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 28px;
min-height: 0;
}
/* 3. Keyword text — "Meeting 5". Sits centered inside the notepad body. */
.phrase-keyword-text {
/* Font matches the expansion exactly — same family, weight, size, and
leading — so the keyword reads as "text in the notepad" that gets
crossed out and replaced, rather than as a label of a different type. */
position: relative;
display: inline-block;
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
color: var(--ink);
white-space: nowrap;
opacity: 0;
animation: phrase-keyword-show 12.5s ease-in-out infinite;
}
/* 4. Strike line: absolute overlay across the keyword. Width animates from
0% to 100% to "draw" the line left-to-right (~1.2s draw duration).
Thickness 4px keeps the visual proportion (~24% of cap height) now
that the keyword renders at the smaller body-text size. */
.phrase-strike {
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 4px;
background: var(--brand-orange);
border-radius: 999px;
transform: translateY(-50%);
pointer-events: none;
opacity: 0;
animation: phrase-strike-draw 12.5s ease-in-out infinite;
}
/* 5. Expanded text — replaces the keyword once the strike completes. */
.phrase-expanded-text {
position: absolute;
top: 50%;
left: 50%;
width: 88%;
max-width: 460px;
margin: 0;
padding: 0;
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.5;
text-align: center;
color: var(--ink);
transform: translate(-50%, -50%);
opacity: 0;
animation: phrase-expanded-show 12.5s ease-in-out infinite;
}
/* ----- Keyframes (12.5s loop) -----
Recording-button phase extended by 1.5s; every subsequent phase shifted
by the same +12% (1500ms / 12500ms) so the keyword + strike + expansion
keep their original readable durations.
*/
@keyframes phrase-button-fade {
0%, 19% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
26%, 95% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes phrase-notepad-show {
0%, 23% { opacity: 0; transform: scale(0.96); }
30%, 95% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.96); }
}
@keyframes phrase-keyword-show {
0%, 26% { opacity: 0; }
33%, 63% { opacity: 1; }
68%, 100% { opacity: 0; }
}
@keyframes phrase-strike-draw {
0%, 37% { width: 0; opacity: 0; }
38% { width: 0; opacity: 1; }
50% { width: 100%; opacity: 1; }
63% { width: 100%; opacity: 1; }
68%, 100% { width: 100%; opacity: 0; }
}
@keyframes phrase-expanded-show {
0%, 63% { opacity: 0; }
70%, 95% { opacity: 1; }
100% { opacity: 0; }
}
.trial-band {
min-height: 270px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 38px;
border-radius: 16px;
padding: 44px;
background:
radial-gradient(circle at 88% 18%, rgba(120, 184, 90, 0.25), transparent 30%),
linear-gradient(135deg, var(--forest), #15382a);
color: #fff;
box-shadow: var(--shadow-soft);
}
.trial-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
gap: 44px;
align-items: center;
}
.trial-message {
display: grid;
gap: 20px;
max-width: 780px;
}
.trial-message .lede {
max-width: 620px;
}
.trial-actions {
display: flex;
justify-content: flex-end;
align-items: center;
}
.trial-actions .hero-actions {
justify-content: flex-end;
}
.trial-band .lede,
.trial-band .muted {
color: rgba(255, 255, 255, 0.76);
}
.trial-footnote {
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
line-height: 1.45;
}
.quote-card {
padding: 28px;
background: rgba(255, 255, 255, 0.58);
}
.quote-card p {
min-height: 92px;
color: var(--muted);
font-family: var(--font-serif);
font-size: clamp(18px, 3vw, 22px);
line-height: 1.34;
font-weight: 500;
}
.quote-card .placeholder {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
}
.footer {
padding: 54px 0 36px;
border-top: 1px solid rgba(20, 16, 10, 0.1);
background: rgba(255, 255, 255, 0.4);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(118px, 1fr));
gap: 26px;
align-items: start;
}
.footer h4 {
margin: 0 0 12px;
}
.footer a,
.footer-placeholder {
display: block;
margin: 8px 0;
color: var(--muted);
font-size: 14px;
}
.footer .brand {
display: inline-flex;
margin: 0;
color: var(--ink);
font-size: 16px;
}
.footer-line {
display: block;
margin-top: 36px;
padding-top: 22px;
border-top: 1px solid rgba(20, 16, 10, 0.1);
color: var(--dim);
font-size: 14px;
}
.page-hero {
padding: 86px 0 56px;
}
.page-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr);
gap: 52px;
align-items: center;
}
.page-title {
font-family: var(--font-serif);
font-size: clamp(28px, 6.4vw, 48px);
line-height: 1.05;
font-weight: 600;
}
.legal-page {
background:
radial-gradient(circle at 86% 8%, rgba(120, 184, 90, 0.12), transparent 28%),
linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(245, 242, 236, 0.84));
}
.legal-hero {
padding-bottom: 42px;
}
.legal-hero-inner,
.legal-narrow {
max-width: 900px;
}
.legal-layout {
display: grid;
grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.9fr);
gap: 28px;
align-items: start;
}
.legal-content-stack {
display: grid;
gap: 18px;
}
.legal-card,
.legal-status-card,
.legal-intro-card {
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.76);
box-shadow: var(--shadow-card);
}
.legal-card,
.legal-intro-card {
padding: 30px;
}
.legal-status-card {
position: sticky;
top: 112px;
padding: 24px;
}
.legal-card h3,
.legal-status-card h3,
.legal-intro-card h3 {
margin: 0 0 14px;
font-size: clamp(20px, 3.6vw, 24px);
line-height: 1.16;
font-weight: 600;
}
.legal-card p,
.legal-status-card p,
.legal-intro-card p,
.legal-details {
color: var(--muted);
}
.legal-details {
display: grid;
gap: 18px;
margin: 0;
}
.legal-details div {
display: grid;
grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
gap: 20px;
padding-top: 18px;
border-top: 1px solid rgba(20, 16, 10, 0.1);
}
.legal-details div:first-child {
padding-top: 0;
border-top: 0;
}
.legal-details dt {
color: var(--ink);
font-weight: 700;
}
.legal-details dd {
margin: 0;
}
.legal-placeholder {
color: var(--ink);
font-weight: 600;
}
.legal-date {
color: var(--dim);
font-size: 14px;
}
.legal-faq {
margin-top: 24px;
}
.legal-faq .faq-item {
background: rgba(255, 255, 255, 0.78);
}
.legal-faq .faq-answer {
line-height: 1.62;
}
.legal-faq .faq-answer p {
margin: 0 0 14px;
}
.legal-faq .faq-answer p:last-child,
.legal-card p:last-child,
.legal-status-card p:last-child,
.legal-intro-card p:last-child {
margin-bottom: 0;
}
.legal-faq .faq-answer ul {
margin: 0 0 16px;
padding-left: 22px;
}
.legal-faq .faq-answer li + li {
margin-top: 6px;
}
.feature-flow-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 360px;
container-type: inline-size;
overflow: hidden;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 16px;
background:
linear-gradient(90deg, rgba(255, 253, 248, 0.16), rgba(255, 253, 248, 0.02)),
url("assets/images/features-input-output-watercolor-field.png") center / cover no-repeat,
var(--paper-warm);
box-shadow: var(--shadow-soft);
}
.feature-flow-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.22;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.78), transparent 30%);
}
.flow-connectors {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
overflow: visible;
}
.flow-col {
position: absolute;
top: 0;
bottom: 0;
width: 32%;
z-index: 2;
}
.flow-col-in {
left: 4%;
}
.flow-col-out {
right: 4%;
}
.flow-node,
.flow-output {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 200px;
padding: 10px 13px;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 14px 36px rgba(57, 44, 28, 0.12);
backdrop-filter: blur(8px);
transform: translateY(-50%);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
/* Labels must never wrap — single-line is the design intent. The boxes
are wide enough to hold every label at 14px Instrument Sans, but this
guards against future label changes or font-loading reflow. */
.flow-node strong,
.flow-output strong {
white-space: nowrap;
}
.flow-col-in .flow-node {
left: 0;
right: auto;
}
.flow-col-out .flow-output {
right: 0;
left: auto;
}
/* Inputs use the same gentle right-indent pattern as before (1st and 3rd
pushed in by 5cqw, middle flush left), just with a tighter vertical
spread (32–68% instead of 27.5–72.5%) so the three boxes feel grouped. */
.flow-col-in .flow-node:nth-child(1) { top: 32%; left: 5cqw; }
.flow-col-in .flow-node:nth-child(2) { top: 50%; }
.flow-col-in .flow-node:nth-child(3) { top: 68%; left: 5cqw; }
.flow-col-out .flow-output:nth-child(1) { top: 22%; right: 5cqw; }
.flow-col-out .flow-output:nth-child(2) { top: 40%; }
.flow-col-out .flow-output:nth-child(3) { top: 60%; }
.flow-col-out .flow-output:nth-child(4) { top: 78%; right: 5cqw; }
.flow-output span {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--brand-gradient);
}
.flow-icon,
.source-icon {
position: relative;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 10px;
background: color-mix(in srgb, var(--brand-orange) 14%, white);
color: var(--brand-orange);
}
.flow-icon svg,
.source-icon svg,
.drop-icon svg,
.button-icon {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.flow-core {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 21%;
max-width: 122px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
z-index: 3;
}
.flow-core img {
width: 58%;
height: 58%;
filter: drop-shadow(0 14px 30px rgba(234, 88, 12, 0.28));
}
.record-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.record-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 28px;
align-items: center;
padding: 30px;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-card);
}
.record-copy h3 {
margin-bottom: 12px;
font-size: clamp(20px, 3.6vw, 24px);
line-height: 1.18;
font-weight: 600;
}
.record-copy p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.6;
}
/* Record-choice animated scenes — 4:3 frame, deterministic 12s loop */
.record-scene {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
width: 100%;
/* Container scope for the inner overlay/notepad so their text and
paddings can scale against the scene's own width instead of the
viewport — keeps the composition tight when the card stacks on
mobile. */
container-type: inline-size;
container-name: record-scene;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 16px;
background:
radial-gradient(circle at 18% 12%, rgba(233, 199, 106, 0.16), transparent 32%),
radial-gradient(circle at 90% 22%, rgba(221, 232, 238, 0.82), transparent 36%),
rgba(255, 255, 255, 0.78);
box-shadow: var(--shadow-soft);
font-family: var(--font-sans);
}
/* --- Card 01: shortcut scene -------------------------------------------- */
/* Shortcut scene IS the notepad — drop the cream-card wrapper background so
the window fills the card slot. */
.rs-scene-shortcut {
background: #fff;
padding: 0;
}
.rs-scene-shortcut .rs-notepad {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.rs-scene-shortcut .ms-body {
flex: 1;
padding: 14px 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rs-cursor-row {
/* Block-level so inline text inside wraps at the editor body's width.
The caret sits inline after the text, so it naturally tracks the end
of the wrapped paragraph once the text appears. */
position: relative;
display: block;
width: 100%;
align-self: stretch;
min-height: 1.4em;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
}
.rs-inserted {
/* Inline so the caret follows naturally; font-size collapses to 0 while
hidden so the text occupies no space (caret stays at top-left). At 63%
it snaps to its real size — reads as a paste, not a typewriter reveal. */
font-size: 0;
line-height: 0;
opacity: 0;
animation: rs-inserted 12s ease-in-out infinite;
}
.rs-caret {
/* Caret slides right as the text appears, then resets */
animation: caret-blink 0.9s steps(1) infinite, rs-caret-shift 12s ease-in-out infinite;
}
/* Toast at bottom-center of the scene */
.rs-toast {
/* Centered horizontally in the scene; sits near the bottom of the editor
body (the scene IS the notepad now, so anchor distances are smaller). */
position: absolute;
left: 50%;
bottom: 4%;
transform: translate(-50%, 6px);
display: flex;
align-items: center;
gap: 5px;
padding: 5px 7px;
border-radius: 7px;
background: var(--blue-ink, #243746);
color: #fff;
box-shadow: 0 10px 22px rgba(36, 55, 70, 0.22);
opacity: 0;
animation: rs-toast 12s ease-in-out infinite;
z-index: 3;
}
.rs-toast kbd {
min-width: 22px;
padding: 2px 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.16);
font-size: 9.5px;
font-family: var(--font-sans);
color: #fff;
text-align: center;
}
.rs-toast-label {
font-size: 12px;
letter-spacing: 0.02em;
animation: rs-toast-label 12s ease-in-out infinite;
}
/* DT button in shortcut scene — bottom-right corner of the editor. */
.rs-button-shortcut {
position: absolute;
right: 4%;
bottom: 5%;
width: 56px;
height: 56px;
z-index: 2;
}
/* --- Card 02: floating-button scene ------------------------------------ */
.rs-scene-floating {
background:
radial-gradient(circle at 22% 18%, rgba(244, 63, 94, 0.10), transparent 38%),
linear-gradient(135deg, var(--paper-warm, #fff5e6), #fff8ea);
}
.rs-button-floating {
position: absolute;
top: 12%;
left: 50%;
transform: translate(-50%, 0);
width: 72px;
height: 72px;
z-index: 2;
}
/* Mouse cursor — glides toward the button, performs two clicks.
Positioned by left/top (percent of parent) so it actually reaches the button;
the click is a brief scale-down via the inner transform on .rs-cursor-arrow. */
.rs-cursor {
position: absolute;
width: 22px;
height: 22px;
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
animation: rs-cursor-path 12s ease-in-out infinite;
/* The SVG's tip is near (5,3) of a 24-unit box ≈ top-left corner, so
placing the element's top-left at the target is close enough. */
transform-origin: 25% 15%;
}
/* Transcription overlay — appears under the button after second click */
.rs-overlay {
position: absolute;
left: 50%;
top: 42%;
width: 84%;
max-width: 320px;
transform: translate(-50%, 12px);
border-radius: 10px;
background: #2c2c2f;
color: #fff;
box-shadow: 0 16px 36px rgba(20, 16, 10, 0.22);
opacity: 0;
animation: rs-overlay 12s ease-in-out infinite;
z-index: 3;
}
.rs-overlay-head {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
font-size: 11px;
}
.rs-overlay-head strong { font-weight: 600; }
.rs-overlay-icon {
width: 13px;
height: 13px;
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
}
.rs-overlay-copy { color: rgba(255, 255, 255, 0.72); }
.rs-overlay-close { color: rgba(255, 255, 255, 0.82); }
.rs-overlay-body {
padding: 10px 72px 12px 12px;
font-size: 13px;
white-space: normal;
}
/* Compact the transcription scene only when the record card has stacked on
phone layouts. Desktop side-by-side cards can also have narrow scene
containers, so this must not be a standalone container query. */
@media (max-width: 760px) {
@container record-scene (max-width: 460px) {
.rs-overlay {
width: 86%;
top: 56%;
}
.rs-overlay-head {
padding: 7px 9px 6px;
gap: 8px;
}
.rs-overlay-head strong {
font-size: clamp(10px, 3.2cqi, 13px);
}
.rs-overlay-icon {
width: clamp(9px, 2.8cqi, 13px);
height: clamp(9px, 2.8cqi, 13px);
}
.rs-overlay-body {
padding: 7px 9px 9px;
font-size: clamp(10.5px, 3.5cqi, 13px);
line-height: 1.4;
white-space: nowrap;
}
.rs-inserted,
.rs-scene-shortcut .ms-body {
font-size: clamp(10px, 3.2cqi, 14px);
}
.rs-notepad .ms-title {
font-size: clamp(8px, 2.6cqi, 11px);
}
}
}
/* --- Keyframes (shared 12s timeline) ----------------------------------- */
/*
Shortcut timeline:
0–14% idle / cursor blinking
14–18% toast in (Ctrl+Space → "Recording")
18–46% button recording
46–50% toast back in (Ctrl+Space → "Stopped")
50–62% button processing
62–66% text inserted, caret shifts to end
66–100% linger
*/
@keyframes rs-toast {
/* The visible position floats a few pixels above the resting bottom anchor,
giving the toast a touch of breathing room from the editor's bottom edge. */
0%, 12% { opacity: 0; transform: translate(-50%, 6px); }
16%, 28% { opacity: 1; transform: translate(-50%, -5px); }
32%, 46% { opacity: 0; transform: translate(-50%, 6px); }
50%, 60% { opacity: 1; transform: translate(-50%, -5px); }
64%, 100% { opacity: 0; transform: translate(-50%, 6px); }
}
@keyframes rs-toast-label {
/* swap label content via pseudo-text is impossible; use opacity fade between
visually identical states — the kbd row already communicates the gesture. */
0%, 100% { opacity: 1; }
}
@keyframes rs-inserted {
0%, 62% { opacity: 0; font-size: 0; line-height: 0; }
63% { opacity: 1; font-size: 14px; line-height: 1.45; } /* snap in: paste, not type */
92% { opacity: 1; font-size: 14px; line-height: 1.45; }
99% { opacity: 0; font-size: 14px; line-height: 1.45; } /* fade out at full size */
100% { opacity: 0; font-size: 0; line-height: 0; } /* then collapse offscreen-equivalent */
}
@keyframes rs-caret-shift {
/* Sits at left edge while empty, jumps to end of inserted text, then resets */
0%, 62% { transform: translateX(0); }
66%, 96% { transform: translateX(0); }
100% { transform: translateX(0); }
}
/* Shortcut DT button state machine — same 12s timeline */
.rs-scene-shortcut .dt-idle { animation: rs-btn-idle 12s ease-in-out infinite; }
.rs-scene-shortcut .dt-pulse,
.rs-scene-shortcut .dt-recording { opacity: 0; animation: rs-btn-recording 12s ease-in-out infinite; }
.rs-scene-shortcut .dt-spinner { opacity: 0; animation: rs-btn-spinner 12s ease-in-out infinite; }
@keyframes rs-btn-idle {
0%, 16% { opacity: 1; }
20%, 48% { opacity: 0; }
52%, 100% { opacity: 1; }
}
@keyframes rs-btn-recording {
0%, 16% { opacity: 0; }
20%, 48% { opacity: 1; }
52%, 100% { opacity: 0; }
}
@keyframes rs-btn-spinner {
0%, 48% { opacity: 0; }
52%, 62% { opacity: 1; }
66%, 100% { opacity: 0; }
}
/*
Floating timeline:
0–18% cursor glides toward button
18–22% click (button → recording)
22–48% recording
48–52% cursor returns, click (button → processing)
52–60% processing
60–66% overlay slides in
66–100% linger
*/
@keyframes rs-cursor-path {
/* left/top are percentages of the scene (parent); the cursor tip sits near
the element's top-left, so the target coords approximate the click point.
Click target sits near the visual center of the button (top:12% + ~12%). */
0% { left: 18%; top: 80%; transform: scale(1); }
16% { left: 48%; top: 24%; transform: scale(1); }
20% { left: 48%; top: 24%; transform: scale(0.78); } /* click 1 */
24% { left: 48%; top: 24%; transform: scale(1); }
44% { left: 48%; top: 24%; transform: scale(1); }
48% { left: 48%; top: 24%; transform: scale(0.78); } /* click 2 */
52% { left: 48%; top: 24%; transform: scale(1); }
72% { left: 64%; top: 70%; transform: scale(1); }
100% { left: 18%; top: 80%; transform: scale(1); }
}
@keyframes rs-overlay {
0%, 60% { opacity: 0; transform: translate(-50%, 12px); }
66%, 94% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, 12px); }
}
/* Floating DT button state machine */
.rs-scene-floating .dt-idle { animation: rs-btn-f-idle 12s ease-in-out infinite; }
.rs-scene-floating .dt-pulse,
.rs-scene-floating .dt-recording { opacity: 0; animation: rs-btn-f-recording 12s ease-in-out infinite; }
.rs-scene-floating .dt-spinner { opacity: 0; animation: rs-btn-f-spinner 12s ease-in-out infinite; }
@keyframes rs-btn-f-idle {
/* Idle body stays visible throughout the spinner phase so the orange arc
has a button to orbit (spinner SVG has no body fill of its own). */
0%, 20% { opacity: 1; }
24%, 48% { opacity: 0; }
52%, 100% { opacity: 1; }
}
@keyframes rs-btn-f-recording {
0%, 20% { opacity: 0; }
24%, 48% { opacity: 1; }
52%, 100% { opacity: 0; }
}
@keyframes rs-btn-f-spinner {
0%, 48% { opacity: 0; }
52%, 64% { opacity: 1; }
68%, 100% { opacity: 0; }
}
.audio-source-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.audio-source-asymmetric {
display: grid;
/* Microphone (featured) gets ~58%, the stack ~42% — leans into the
"most common case" without dwarfing the others. */
grid-template-columns: 1.4fr 1fr;
gap: 18px;
align-items: stretch;
}
.source-stack {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 18px;
min-height: 0;
}
.source-card-featured,
.source-card-compact {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid rgba(20, 16, 10, 0.10);
border-radius: 16px;
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* Featured card: roomy, generous icon, more leading body copy */
.source-card-featured {
padding: 36px;
justify-content: space-between;
min-height: 320px;
}
.source-card-featured .source-icon {
width: 64px;
height: 64px;
margin-bottom: 0;
border-radius: 16px;
}
.source-card-featured .source-icon svg {
width: 34px;
height: 34px;
}
.source-card-featured h3 {
margin: 0 0 12px;
font-size: clamp(22px, 4.5vw, 30px);
line-height: 1.1;
font-weight: 600;
}
.source-card-featured p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 1.6;
max-width: 32em;
}
/* Compact cards: icon left of body in a row, tighter padding */
.source-card-compact {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
padding: 22px 24px;
min-height: 0;
}
.source-card-compact .source-icon {
width: 44px;
height: 44px;
margin-bottom: 0;
border-radius: 12px;
}
.source-card-compact .source-icon svg {
width: 24px;
height: 24px;
}
/* DirektText mic capsule — filled head (overrides the inherited fill:none
that .source-icon svg applies for outline icons). */
.source-icon svg .dt-mic-fill {
fill: currentColor;
}
.source-card-compact h3 {
margin: 0 0 6px;
font-size: 19px;
line-height: 1.18;
font-weight: 600;
}
.source-card-compact p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
/* Uniform neutral background for all three asymmetric cards — no per-source
tints. The layout's asymmetry alone signals hierarchy. */
.source-tint-mic,
.source-tint-computer,
.source-tint-mixed {
background: rgba(255, 255, 255, 0.85);
}
.source-card,
.workspace-feature-card {
min-height: 260px;
padding: 26px;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-card);
}
.source-icon {
width: 50px;
height: 50px;
margin-bottom: 28px;
}
.source-card h3,
.workspace-feature-card h3,
.processing-card h3 {
color:var(--ink);
margin-bottom: 10px;
font-size: clamp(20px, 3.6vw, 24px);
line-height: 1.12;
font-weight: 600;
}
.processing-card strong {
color:var(--ink);
margin-bottom: 10px;
font-size: 19px;
line-height: 1.12;
font-weight: 600;
}
.source-card p,
.workspace-feature-card p,
.processing-card p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.62;
}
.file-import-mock {
display: grid;
min-height: 330px;
padding: 30px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-card);
}
.file-import-bg {
position: absolute;
inset: 12px;
z-index: 1;
display: grid;
grid-auto-rows: 42px;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
opacity: 0.38;
}
.file-import-bg li {
border-radius: var(--radius);
background: #fff;
border: 1px solid rgba(20, 16, 10, 0.08);
}
.drop-zone {
position: relative;
z-index: 2;
display: grid;
place-items: center;
align-content: center;
gap: 10px;
padding: 30px 28px;
border: 1.5px dashed rgba(20, 16, 10, 0.4);
border-radius: 16px;
background: transparent;
box-shadow: none;
text-align: center;
overflow: hidden;
}
.drop-arrow {
position: relative;
z-index: 2;
display: block;
width: 36px;
height: 36px;
margin-bottom: 4px;
background-color: var(--ink);
opacity: 0.78;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.drop-zone strong {
position: relative;
z-index: 2;
font-size: 19px;
font-weight: 600;
color: var(--ink);
}
.drop-zone small {
position: relative;
z-index: 2;
display: block;
max-width: 420px;
font-size: 13px;
line-height: 1.5;
color: var(--muted);
}
.feature-workspace-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: auto auto auto;
align-items: stretch;
column-gap: 18px;
row-gap: 24px;
}
.workspace-feature-card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
align-content: stretch;
gap: 0;
height: 100%;
min-height: 405px;
}
.workspace-feature-card > :is(.mini-history-lines, .mini-vocab-tags, .mini-expansion, .cleanup-demo) {
align-self: start;
margin-top: 18px;
}
.mini-history-lines,
.mini-vocab-tags,
.mini-expansion,
.cleanup-demo {
height: 150px;
border-radius: var(--radius);
background: var(--paper-warm);
}
.mini-history-lines {
display: grid;
gap: 9px;
padding: 18px;
}
.mini-history-lines span {
border-radius: 999px;
background: rgba(95, 90, 82, 0.2);
}
.mini-vocab-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: center;
padding: 16px;
}
.mini-vocab-tags span {
padding: 8px 10px;
border-radius: var(--radius);
background: #fff;
box-shadow: 0 8px 18px rgba(57, 44, 28, 0.08);
}
.mini-expansion,
.cleanup-demo {
display: grid;
gap: 9px;
align-content: center;
padding: 16px;
}
.mini-expansion span,
.cleanup-demo span {
color: var(--muted);
text-decoration: line-through;
}
.mini-expansion strong,
.cleanup-demo strong {
width: fit-content;
padding: 8px 10px;
border-radius: var(--radius);
background: #fff;
box-shadow: 0 8px 18px rgba(57, 44, 28, 0.08);
}
.processing-card {
display: grid;
gap: 14px;
padding: 28px;
}
.processing-card > div {
padding: 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--shadow-card);
}
/* Processing-path rows — icon on the left of the title + body */
.processing-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
}
.processing-icon {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--brand-orange) 12%, white);
color: var(--brand-orange);
flex: 0 0 auto;
}
.processing-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.pricing-top {
padding-top: 78px;
}
.pricing-intro {
max-width: 680px;
margin: 0 auto 8px;
text-align: center;
}
.pricing-intro .lede {
margin: 18px auto 0;
color: var(--ink);
}
.mode-proof {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 32px;
align-items: center;
padding: 32px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(20, 16, 10, 0.1);
box-shadow: var(--shadow-soft);
}
.mode-proof-copy {
display: grid;
gap: 22px;
align-content: center;
}
.mode-proof-header {
display: grid;
gap: 14px;
}
.mode-proof-header .section-title {
margin: 0;
}
.mode-proof-header .lede {
margin: 0;
}
.mode-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: start;
}
.mode-list .tab-button {
width: auto;
min-height: 38px;
padding: 0 16px;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.mode-proof-panel {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
/* Container queries let the inner mode-scene scale against the panel's
own width — independent of viewport — so the same fix works whether
the panel sits beside copy or full-width on mobile. */
container-type: inline-size;
container-name: mode-panel;
border-radius: 14px;
border: 1px solid rgba(20, 16, 10, 0.1);
background: linear-gradient(135deg, #fffbf3 0%, #f4ebdc 60%, #efe3d0 100%);
box-shadow: 0 18px 42px rgba(57, 44, 28, 0.1);
padding: 0;
}
.mode-scene {
position: absolute;
inset: 0;
font-family: var(--font-sans);
/* Drive every descendant's font-size off this base when the panel is
narrow. Most inner text uses px today; the @container rule below
re-binds those to em so they all ride this one variable. */
font-size: 14px;
}
/* When the mode-proof-panel gets narrow in a side-by-side tablet layout,
shrink the scene's base font-size — and rebind the px-set descendants
to em so they follow. Phone layouts use a full-scene transform below,
which keeps every animation in this section scaling as one object. */
@media (min-width: 571px) {
@container mode-panel (max-width: 460px) {
.mode-scene {
font-size: clamp(8.5px, 3cqi, 14px);
}
.mode-scene .ms-title { font-size: 0.95em; }
.mode-scene .ms-body { font-size: 1em; }
.mode-scene .ms-stage-frame .ms-body { font-size: 1em; }
.mode-scene .ms-stage-text,
.mode-scene .ms-stage-empty { padding: 0.95em 1.2em; }
.mode-scene .ms-recap-section h4 { font-size: 1em; }
.mode-scene .ms-recap-section li { font-size: 0.95em; }
.mode-scene.mode-scene-email .ms-email-row {
grid-template-columns: 4.7em 1fr;
gap: 0.7em;
padding: 0.45em 0;
font-size: 0.95em;
}
.mode-scene.mode-scene-email .ms-email-label { font-size: 0.85em; }
.mode-scene.mode-scene-email .ms-email-placeholder,
.mode-scene.mode-scene-email .ms-email-field,
.mode-scene.mode-scene-email .ms-email-line { font-size: 1em; }
.mode-scene.mode-scene-email .ms-email-body { margin-top: 0.7em; }
.mode-scene.mode-scene-email .ms-email-greeting { margin-bottom: 0.65em; }
.mode-scene.mode-scene-email .ms-email-signoff { margin-top: 0.65em; }
.mode-scene .ms-custom-headline { font-size: 1.2em; }
.mode-scene .ms-custom-bullets li { font-size: 0.95em; }
.mode-scene .ms-sop-pill { font-size: 0.8em; }
.mode-scene .ms-refined-text { font-size: 1em; }
.mode-scene .ms-refined-callouts li { font-size: 0.85em; }
.mode-scene .ms-r-strike { font-size: 1em; }
}
}
/* Soft warm watermark behind every scene */
.ms-watermark {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(circle at 18% 22%, rgba(233, 199, 106, 0.18), transparent 32%),
radial-gradient(circle at 82% 78%, rgba(221, 232, 238, 0.32), transparent 36%);
pointer-events: none;
}
/* ----- DirektText button (state-driven SVG) ----- */
.dt-button {
position: absolute;
width: 22%;
aspect-ratio: 1;
z-index: 3;
overflow: visible;
}
.dt-button .dt-idle,
.dt-button .dt-pulse,
.dt-button .dt-recording,
.dt-button .dt-spinner {
opacity: 0;
}
/* Per-mode visibility is driven by keyframe animations below */
.dt-button.is-idle .dt-idle { opacity: 1; }
.dt-button.is-recording .dt-pulse,
.dt-button.is-recording .dt-recording { opacity: 1; }
.dt-button.is-processing .dt-idle,
.dt-button.is-processing .dt-spinner { opacity: 1; }
.dt-button.is-done .dt-idle { opacity: 1; }
.dt-button .dt-pulse {
pointer-events: none;
}
.dt-button .dt-pulse-glow,
.dt-button .dt-pulse-ring {
transform-box: view-box;
transform-origin: 50px 50px;
}
.dt-button .dt-pulse-glow {
animation: dt-pulse-glow 1.4s ease-in-out infinite alternate;
}
.dt-button .dt-pulse-ring {
animation: dt-pulse-ring 2.6s ease-out infinite;
}
.dt-button .dt-pulse-ring-b {
animation-duration: 3s;
animation-delay: 0.7s;
}
.dt-button .dt-spinner circle {
animation: ms-spinner 1.5s linear infinite;
transform-origin: 50px 50px;
}
@keyframes ms-spinner {
to { transform: rotate(360deg); }
}
@keyframes dt-pulse-glow {
/* Scale deltas from 1.0 cumulatively reduced (now ~81% of original spread). */
from { opacity: 0.45; transform: scale(0.960); }
to { opacity: 0.8; transform: scale(1.146); }
}
@keyframes dt-pulse-ring {
0% { opacity: 0.9; transform: scale(0.935); }
72% { opacity: 0; transform: scale(1.446); }
100% { opacity: 0; transform: scale(1.446); }
}
/* ----- Windows-style app frame ----- */
.ms-frame {
position: absolute;
display: flex;
flex-direction: column;
border-radius: 10px;
border: 1px solid rgba(20, 16, 10, 0.12);
background: #fff;
overflow: hidden;
box-shadow: 0 18px 42px rgba(20, 16, 10, 0.14);
font-family: var(--font-sans);
}
.ms-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
border-bottom: 1px solid rgba(20, 16, 10, 0.08);
background: linear-gradient(180deg, #faf7f0, #f4ede0);
flex: 0 0 auto;
}
.ms-title {
font-size: 11px;
font-weight: 600;
color: rgba(20, 16, 10, 0.7);
letter-spacing: 0.01em;
}
.ms-controls { display: flex; gap: 12px; }
.ms-ctrl {
display: inline-block;
width: 11px;
height: 11px;
position: relative;
}
.ms-ctrl-min::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 1.2px;
background: rgba(20, 16, 10, 0.55);
}
.ms-ctrl-max::before {
content: "";
position: absolute;
inset: 1px;
border: 1.2px solid rgba(20, 16, 10, 0.55);
}
.ms-ctrl-close::before,
.ms-ctrl-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 1.2px;
background: rgba(20, 16, 10, 0.55);
border-radius: 1px;
}
.ms-ctrl-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ms-ctrl-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ms-body {
flex: 1 1 auto;
padding: 14px 16px;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
overflow: hidden;
}
/* ----- Recording waveform ----- */
.ms-wave {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
z-index: 2;
}
.ms-wave-bar {
display: block;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, #F43F5E, #EA580C);
transform-origin: center;
animation: ms-wave-bar var(--dur, 800ms) ease-in-out infinite;
animation-delay: var(--delay, 0ms);
}
@keyframes ms-wave-bar {
0%, 100% { transform: scaleY(0.18); }
50% { transform: scaleY(var(--peak, 1)); }
}
/* ----- Iris wipe (recording-state mark bursting from center) ----- */
.ms-iris {
position: absolute;
top: 50%;
left: 50%;
width: 18%;
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
z-index: 9;
pointer-events: none;
}
/* ============================================================
SHARED "WINDOW-THROUGHOUT" MODES (Refined, Dictation, Notes, Email)
The Windows-style frame is visible the whole time; the DT button
at center-bottom cycles idle → recording → processing → idle.
The frame body fades from empty placeholder to filled output.
============================================================ */
.ms-stage-frame {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
}
.ms-stage-frame .ms-body {
position: relative;
font-size: 14px;
line-height: 1.5;
}
.ms-stage-empty,
.ms-stage-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 28%;
padding: 16px 20px;
overflow: hidden;
}
.ms-stage-empty {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
animation: stage-empty 14s ease-in-out infinite;
}
.ms-stage-text {
opacity: 0;
animation: stage-text 14s ease-in-out infinite;
}
.ms-caret {
display: inline-block;
width: 2px;
height: 1.2em;
background: var(--brand-orange);
border-radius: 2px;
vertical-align: -0.16em;
flex: 0 0 auto;
animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes stage-empty {
0%, 48% { opacity: 1; }
55%, 100% { opacity: 0; }
}
@keyframes stage-text {
0%, 52% { opacity: 0; }
57%, 95% { opacity: 1; }
100% { opacity: 0; }
}
/* Bottom-center DT button (translateY(-33%) lifts it by 33% of its own height) */
.ms-button-bottom {
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -33%);
width: 16%;
max-width: 70px;
}
/* Per-state visibility for window-throughout modes */
.mode-scene-refined .dt-idle,
.mode-scene-dictation .dt-idle,
.mode-scene-notes .dt-idle,
.mode-scene-email .dt-idle {
animation: btn-idle 14s ease-in-out infinite;
}
.mode-scene-refined .dt-pulse,
.mode-scene-dictation .dt-pulse,
.mode-scene-notes .dt-pulse,
.mode-scene-email .dt-pulse,
.mode-scene-refined .dt-recording,
.mode-scene-dictation .dt-recording,
.mode-scene-notes .dt-recording,
.mode-scene-email .dt-recording {
opacity: 0;
animation: btn-recording 14s ease-in-out infinite;
}
.mode-scene-refined .dt-spinner,
.mode-scene-dictation .dt-spinner,
.mode-scene-notes .dt-spinner,
.mode-scene-email .dt-spinner {
opacity: 0;
animation: btn-spinner 14s ease-in-out infinite;
}
@keyframes btn-idle {
0%, 8% { opacity: 1; }
11%, 34% { opacity: 0; }
38%, 100% { opacity: 1; }
}
@keyframes btn-recording {
0%, 8% { opacity: 0; }
11%, 34% { opacity: 1; }
38%, 100% { opacity: 0; }
}
@keyframes btn-spinner {
0%, 34% { opacity: 0; }
38%, 51% { opacity: 1; }
55%, 100% { opacity: 0; }
}
/* Mode-specific filled-state content styling */
.mode-scene-dictation .ms-stage-text {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
.mode-scene-refined .ms-refined-correction {
display: flex;
flex-direction: column;
gap: 14px;
}
.mode-scene-refined .ms-refined-text {
margin: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
.mode-scene-refined .ms-r-strike {
color: rgba(20, 16, 10, 0.38);
text-decoration: line-through;
text-decoration-color: var(--brand-orange);
text-decoration-thickness: 1.5px;
}
.mode-scene-refined .ms-refined-callouts {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 5px;
}
.mode-scene-refined .ms-refined-callouts li {
position: relative;
padding-left: 22px;
font-size: 14px;
font-weight: 600;
color: var(--brand-orange);
letter-spacing: 0.01em;
line-height: 1.5;
}
.mode-scene-refined .ms-refined-callouts li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 100% no-repeat,
var(--brand-orange);
transform: translateY(-50%);
}
.mode-scene-email .ms-email-row {
display: grid;
grid-template-columns: 64px 1fr;
gap: 10px;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid rgba(20, 16, 10, 0.08);
}
.mode-scene-email .ms-email-label {
color: var(--muted);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mode-scene-email .ms-email-placeholder {
color: rgba(20, 16, 10, 0.34);
font-size: 14px;
}
.mode-scene-email .ms-email-field {
color: var(--ink);
font-size: 14px;
}
.mode-scene-email .ms-email-body-placeholder {
padding-top: 10px;
}
.mode-scene-email .ms-email-body {
margin-top: 10px;
display: grid;
gap: 0;
}
.mode-scene-email .ms-email-line {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ink);
}
.mode-scene-email .ms-email-short-question {
display: none;
}
.mode-scene-email .ms-email-greeting {
margin-bottom: 10px;
}
.mode-scene-email .ms-email-signoff {
margin-top: 10px;
}
.mode-scene-notes .ms-notes-filled {
font-size: 14px;
}
.mode-scene-notes .ms-notes-bullets {
margin: 0;
padding-left: 18px;
display: grid;
gap: 3px;
color: rgba(20, 16, 10, 0.78);
font-size: 14px;
line-height: 1.5;
}
/* ============================================================
SHARED: iris wipe firing per-mode
============================================================ */
/* Iris wipe only fires for modes that transform between contexts */
/* Meeting scene runs on a 13s loop (matching SOP). It uses its own
iris keyframe so the wipe stays in sync with the scene rather than
drifting against an 11s default. */
.mode-scene-meeting .ms-iris { animation: meet-iris-fire 13s ease-in-out infinite; }
/* SOP scene runs on a 13s loop, so it gets its own iris keyframe with
percentages re-aligned to fire AFTER bubbles + image have faded and
BEFORE the SOP doc emerges. (Meeting scene stays on the 11s version.) */
.mode-scene-sop .ms-iris { animation: sop-iris-fire 13s ease-in-out infinite; }
@keyframes iris-fire {
0%, 28% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
30% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.05);
animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
39% { opacity: 1; transform: translate(-50%, -50%) scale(14); }
42% { opacity: 0; transform: translate(-50%, -50%) scale(14); }
43%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}
/* Dictation, Refined, Notes, Email: see "SHARED WINDOW-THROUGHOUT MODES" section above */
/* ============================================================
MEETING RECAP
============================================================ */
.mode-scene-meeting .ms-conf {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
animation: meet-conf 13s ease-in-out infinite;
}
.mode-scene-meeting .ms-conf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
height: calc(100% - 22px);
}
.mode-scene-meeting .ms-conf-tile {
position: relative;
border-radius: 6px;
background: linear-gradient(135deg, #e9e2d3, #d9cfb9);
overflow: hidden;
}
.mode-scene-meeting .ms-conf-active {
box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.65);
animation: meet-tile-pulse 1.6s ease-in-out infinite;
}
.mode-scene-meeting .ms-conf-avatar {
position: absolute;
top: 50%;
left: 50%;
width: 28%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(20, 16, 10, 0.35);
transform: translate(-50%, -60%);
}
.mode-scene-meeting .ms-conf-avatar::after {
content: "";
position: absolute;
top: 100%;
left: -40%;
right: -40%;
height: 140%;
border-radius: 50% 50% 0 0;
background: rgba(20, 16, 10, 0.35);
}
.mode-scene-meeting .ms-conf-name {
position: absolute;
left: 6px;
bottom: 5px;
font-size: 9px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mode-scene-meeting .ms-conf-badge {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
padding: 2px 8px;
border-radius: 999px;
background: rgba(244, 63, 94, 0.14);
color: #B83A4F;
font-size: 9px;
font-weight: 600;
}
.mode-scene-meeting .ms-recap {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
opacity: 0;
animation: meet-recap 13s ease-in-out infinite;
}
.mode-scene-meeting .ms-recap .ms-body {
font-size: 14px;
padding: 14px 18px;
padding-bottom: 28%;
display: grid;
gap: 10px;
align-content: start;
}
.mode-scene-meeting .ms-recap h4 {
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.mode-scene-meeting .ms-recap-actions {
margin-top: 10px;
padding-top: 10px;
}
.mode-scene-meeting .ms-recap ul,
.mode-scene-meeting .ms-recap ol {
margin: 0;
padding-left: 18px;
display: grid;
gap: 3px;
color: rgba(20, 16, 10, 0.78);
font-size: 14px;
line-height: 1.5;
}
/* Meeting first scene: video-conference photo + speech bubbles.
Same structural pattern as the SOP scene's image holder — absolute
inset:0 stage holding an ![]()
+ the bubbles, gradient overlay for
visual depth. Animation timing matches sop-scene-out so the loop
boundary becomes a crossfade rather than a jump cut. */
.mode-scene-meeting .ms-meet-scene {
position: absolute;
inset: 0;
animation: meet-scene-out 13s ease-in-out infinite;
}
.mode-scene-meeting .ms-meet-source {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.mode-scene-meeting .ms-meet-source img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.02) contrast(1.01);
}
.mode-scene-meeting .ms-meet-source::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(11, 10, 9, 0.02), rgba(11, 10, 9, 0.1)),
radial-gradient(circle at 86% 80%, rgba(251, 250, 246, 0.22), transparent 30%);
}
.mode-scene-meeting .ms-meet-speech-bubble {
animation: meet-speech-bubble 13s ease-in-out infinite;
animation-delay: var(--bubble-delay);
}
/* Meeting scene timeline (13s):
0–0.5s photo fades in
0.5–4.2s photo holds, bubbles appear staggered (delays 0.4/1.2/2.0s)
4.2–5.5s photo fades out
4.9–6.4s iris-fire DirektText wipe transitions to recap
6.0–12.5s recap visible
12.5–13s recap fades out
Photo fade-in at 0–4% matches recap fade-out at 96–100% on the
previous loop, producing a smooth crossfade across the boundary. */
@keyframes meet-scene-out {
0% { opacity: 0; }
4%, 32% { opacity: 1; }
42%, 100%{ opacity: 0; }
}
@keyframes meet-speech-bubble {
0% { opacity: 0; transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(8px) scale(0.96); }
8%, 22% { opacity: 1; transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(0) scale(1); }
28%, 100%{ opacity: 0; transform: translate(calc(-50% + var(--bubble-nudge-x, 0%)), -50%) translateY(-6px) scale(0.98); }
}
@keyframes meet-iris-fire {
0%, 36% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
38% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.05);
animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
46% { opacity: 1; transform: translate(-50%, -50%) scale(14); }
48% { opacity: 0; transform: translate(-50%, -50%) scale(14); }
49%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}
@keyframes meet-recap {
0%, 44% { opacity: 0; transform: scale(0.96); }
52%, 96% { opacity: 1; transform: scale(1); }
100% { opacity: 0; }
}
/* Email: see "SHARED WINDOW-THROUGHOUT MODES" section above */
/* ============================================================
SOP DRAFT
============================================================ */
.mode-scene-sop .ms-sop-scene {
position: absolute;
inset: 0;
animation: sop-scene-out 13s ease-in-out infinite;
}
.mode-scene-sop .ms-sop-source {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.mode-scene-sop .ms-sop-source img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.02) contrast(1.01);
}
.mode-scene-sop .ms-sop-source::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(11, 10, 9, 0.02), rgba(11, 10, 9, 0.1)),
radial-gradient(circle at 86% 80%, rgba(251, 250, 246, 0.22), transparent 30%);
}
.mode-scene-sop .ms-sop-speech-bubble {
animation: sop-speech-bubble 13s ease-in-out infinite;
animation-delay: var(--bubble-delay);
}
.mode-scene-sop .ms-sop-doc {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
opacity: 0;
animation: sop-doc 13s ease-in-out infinite;
}
.mode-scene-sop .ms-sop-doc .ms-body {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
align-items: flex-start;
padding: 14px 18px;
padding-bottom: 28%;
}
.mode-scene-sop .ms-sop-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: rgba(244, 63, 94, 0.14);
color: #B83A4F;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
flex: 0 0 auto;
}
.mode-scene-sop .ms-sop-steps {
margin: 0;
padding-left: 24px;
color: var(--ink);
font-size: 14px;
line-height: 1.55;
}
.mode-scene-sop .ms-sop-steps li {
margin-bottom: 7px;
}
.mode-scene-sop .ms-sop-steps li:last-child {
margin-bottom: 0;
}
.mode-scene-sop .ms-sop-steps li::marker {
color: var(--brand-orange);
font-weight: 700;
}
/* SOP scene timeline at 13s:
0–4.2s image of two people in conversation visible
1.6–5.3s bubble 1 appears, dwells, fades (per delay)
2.8–6.0s bubble 2 appears, dwells, fades (per delay)
4.2–5.5s image fades out
4.9–6.5s iris-fire wipe transitions to next state
6.0s+ SOP doc fades in, holds through 12.5s
The keyframes below put image, bubbles, iris, and doc in that strict
sequence — Codex had iris running on an 11s loop while everything
else was 13s, so the iris drifted across the cycle each loop. */
@keyframes sop-scene-out {
/* 0% starts invisible so the loop boundary becomes a crossfade with
the previous loop's doc fade-out (96–100%) instead of a jump cut.
Image fades in over 0–4%, holds 4–32%, fades out 32–42%. */
0% { opacity: 0; }
4%, 32% { opacity: 1; }
42%, 100%{ opacity: 0; }
}
@keyframes sop-speech-bubble {
0% { opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(0.96); }
8%, 30% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
38%, 100%{ opacity: 0; transform: translate(-50%, -50%) translateY(-6px) scale(0.98); }
}
@keyframes sop-iris-fire {
0%, 36% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
38% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.05);
animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
46% { opacity: 1; transform: translate(-50%, -50%) scale(14); }
48% { opacity: 0; transform: translate(-50%, -50%) scale(14); }
49%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}
@keyframes sop-doc {
0%, 44% { opacity: 0; transform: scale(0.96); }
52%, 96% { opacity: 1; transform: scale(1); }
100% { opacity: 0; }
}
/* Notes: see "SHARED WINDOW-THROUGHOUT MODES" section above */
/* ============================================================
FILE TRANSCRIPTION
============================================================ */
.mode-scene-file .ms-file-drop {
position: absolute;
top: 16%;
left: 50%;
transform: translate(-50%, 0);
width: 60%;
display: grid;
place-items: center;
gap: 6px;
padding: 18px;
border: 1.5px dashed rgba(20, 16, 10, 0.32);
border-radius: 12px;
animation: file-drop 9s ease-in-out infinite;
}
.mode-scene-file .ms-file-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 8px;
background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(234, 88, 12, 0.16));
color: var(--brand-orange);
font-size: 18px;
}
.mode-scene-file .ms-file-name {
font-size: 11px;
color: rgba(20, 16, 10, 0.7);
font-weight: 600;
}
.mode-scene-file .dt-button {
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
width: 18%;
opacity: 0;
animation: file-button 9s ease-in-out infinite;
}
.mode-scene-file .dt-pulse,
.mode-scene-file .dt-recording {
animation: file-button-active 9s ease-in-out infinite;
}
.mode-scene-file .ms-file-doc {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
opacity: 0;
animation: file-doc 9s ease-in-out infinite;
}
.mode-scene-file .ms-file-doc .ms-body {
display: grid;
gap: 8px;
font-size: 14px;
}
.mode-scene-file .ms-file-block {
display: grid;
gap: 2px;
}
.mode-scene-file .ms-file-speaker {
font-size: 16px;
font-weight: 700;
color: var(--brand-orange);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mode-scene-file .ms-file-block p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(20, 16, 10, 0.78);
}
@keyframes file-drop {
0%, 30% { opacity: 1; transform: translate(-50%, 0) scale(1); }
40% { opacity: 1; transform: translate(-50%, 40%) scale(0.7); }
48%, 100%{ opacity: 0; transform: translate(-50%, 60%) scale(0.4); }
}
@keyframes file-button {
0%, 40% { opacity: 0; }
46%, 56% { opacity: 1; }
62%, 100%{ opacity: 0; }
}
@keyframes file-button-active {
0%, 40% { opacity: 0; }
46%, 56% { opacity: 1; }
62%, 100%{ opacity: 0; }
}
@keyframes file-doc {
0%, 56% { opacity: 0; transform: scale(0.96); }
64%, 96% { opacity: 1; transform: scale(1); }
100% { opacity: 0; }
}
/* ============================================================
CUSTOM
============================================================ */
.mode-scene-custom .dt-button {
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 18%;
animation: custom-button 9s ease-in-out infinite;
}
.mode-scene-custom .dt-pulse,
.mode-scene-custom .dt-recording {
animation: custom-button-active 9s ease-in-out infinite;
}
.mode-scene-custom .ms-custom-ring {
position: absolute;
top: 42%;
left: 50%;
width: 70%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: custom-ring 9s ease-in-out infinite;
}
.mode-scene-custom .ms-custom-chip {
position: absolute;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, #F43F5E, #EA580C);
color: #fff;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(244, 63, 94, 0.25);
}
.mode-scene-custom .ms-custom-chip-0 { top: 0; left: 50%; transform: translate(-50%, 0); }
.mode-scene-custom .ms-custom-chip-1 { top: 50%; right: 0; transform: translate(0, -50%); }
.mode-scene-custom .ms-custom-chip-2 { bottom: 0; left: 50%; transform: translate(-50%, 0); }
.mode-scene-custom .ms-custom-chip-3 { top: 50%; left: 0; transform: translate(0, -50%); }
.mode-scene-custom .ms-custom-doc {
top: 6%;
left: 6%;
right: 6%;
bottom: 6%;
opacity: 0;
animation: custom-doc 9s ease-in-out infinite;
}
.mode-scene-custom .ms-custom-doc .ms-body {
display: grid;
gap: 6px;
font-size: 14px;
}
.mode-scene-custom .ms-custom-headline {
margin: 0;
font-size: 16px;
font-weight: 700;
font-family: var(--font-sans);
}
.mode-scene-custom .ms-custom-bullets,
.mode-scene-custom .ms-custom-actions {
margin: 0;
padding-left: 14px;
display: grid;
gap: 2px;
color: rgba(20, 16, 10, 0.78);
}
.mode-scene-custom .ms-custom-summary {
margin: 0;
font-size: 14px;
color: var(--muted);
font-style: italic;
}
@keyframes custom-button {
0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
14%, 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
58%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes custom-button-active {
0%, 8% { opacity: 0; }
14%, 50% { opacity: 1; }
58%, 100%{ opacity: 0; }
}
@keyframes custom-ring {
0%, 50% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
58%, 100%{ opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0.4); }
}
@keyframes custom-doc {
0%, 56% { opacity: 0; transform: scale(0.96); }
64%, 96% { opacity: 1; transform: scale(1); }
100% { opacity: 0; }
}
/* ============================================================
Mobile fallback
============================================================ */
@media (max-width: 760px) {
.mode-proof {
grid-template-columns: 1fr;
gap: 24px;
padding: 22px;
}
}
@media (max-width: 570px) {
.mode-proof-panel .ms-titlebar {
padding: clamp(5px, 1.9cqw, 7px) clamp(8px, 3.2cqw, 12px);
}
.mode-proof-panel .ms-title {
font-size: clamp(8.5px, 2.8cqw, 11px);
}
.mode-proof-panel .ms-controls {
gap: clamp(7px, 2.6cqw, 12px);
}
.mode-proof-panel .ms-ctrl {
width: clamp(8px, 2.8cqw, 11px);
height: clamp(8px, 2.8cqw, 11px);
}
.mode-proof-panel .ms-body,
.mode-proof-panel .ms-stage-frame .ms-body,
.mode-proof-panel .ms-recap .ms-body,
.mode-proof-panel .ms-sop-doc .ms-body,
.mode-proof-panel .ms-file-doc .ms-body,
.mode-proof-panel .ms-custom-doc .ms-body {
padding: clamp(9px, 3.2cqw, 14px) clamp(10px, 3.8cqw, 16px);
font-size: clamp(10px, 3.5cqw, 14px);
line-height: 1.42;
}
.mode-proof-panel .ms-stage-empty,
.mode-proof-panel .ms-stage-text {
padding: clamp(9px, 3.2cqw, 16px) clamp(10px, 3.8cqw, 20px);
}
.mode-proof-panel .mode-scene-email .ms-email-row {
grid-template-columns: clamp(38px, 15cqw, 64px) 1fr;
gap: clamp(5px, 2.2cqw, 10px);
padding: clamp(4px, 1.7cqw, 6px) 0;
}
.mode-proof-panel .mode-scene-email .ms-email-label {
font-size: clamp(8.5px, 2.8cqw, 11px);
}
.mode-proof-panel .mode-scene-email .ms-email-placeholder,
.mode-proof-panel .mode-scene-email .ms-email-field,
.mode-proof-panel .mode-scene-email .ms-email-line {
font-size: clamp(10px, 3.4cqw, 14px);
line-height: 1.35;
}
.mode-proof-panel .mode-scene-email .ms-email-body {
margin-top: clamp(6px, 2.4cqw, 10px);
}
.mode-proof-panel .mode-scene-email .ms-email-greeting {
margin-bottom: clamp(6px, 2.4cqw, 10px);
}
.mode-proof-panel .mode-scene-email .ms-email-signoff {
margin-top: clamp(6px, 2.4cqw, 10px);
}
.mode-proof-panel .ms-recap h4,
.mode-proof-panel .ms-recap-section h4,
.mode-proof-panel .ms-custom-headline {
font-size: clamp(11px, 3.8cqw, 16px);
}
.mode-proof-panel .mode-scene-meeting .ms-recap .ms-body {
gap: clamp(4px, 1.5cqw, 7px);
}
.mode-proof-panel .mode-scene-meeting .ms-recap-actions {
margin-top: clamp(2px, 0.8cqw, 5px);
padding-top: clamp(2px, 0.8cqw, 5px);
}
.mode-proof-panel .ms-recap li,
.mode-proof-panel .ms-sop-steps li,
.mode-proof-panel .ms-file-block p,
.mode-proof-panel .ms-custom-bullets li,
.mode-proof-panel .ms-custom-actions li,
.mode-proof-panel .ms-custom-summary,
.mode-proof-panel .ms-refined-text,
.mode-proof-panel .ms-refined-callouts li,
.mode-proof-panel .ms-notes-bullets li {
font-size: clamp(9.5px, 3.2cqw, 14px);
line-height: 1.35;
}
.mode-proof-panel .ms-sop-pill,
.mode-proof-panel .ms-file-speaker,
.mode-proof-panel .ms-custom-chip {
font-size: clamp(7.5px, 2.5cqw, 11px);
}
}
@media (max-width: 570px) {
.capture-cycle .ms-titlebar {
padding: clamp(5px, 1.9cqw, 7px) clamp(8px, 3.2cqw, 12px);
}
.capture-cycle .ms-title {
font-size: clamp(8.5px, 2.8cqw, 11px);
}
.capture-cycle .ms-controls {
gap: clamp(7px, 2.6cqw, 12px);
}
.capture-cycle .ms-ctrl {
width: clamp(8px, 2.8cqw, 11px);
height: clamp(8px, 2.8cqw, 11px);
}
.capture-cycle .capture-speech-bubble {
width: clamp(54px, 15cqw, 82px);
padding: clamp(6px, 1.9cqw, 10px) clamp(8px, 2.4cqw, 13px);
gap: clamp(2px, 0.8cqw, 4px);
border-radius: clamp(12px, 4cqw, 18px);
}
.capture-cycle .capture-speech-bubble i {
height: clamp(2px, 0.8cqw, 3px);
}
.capture-cycle .capture-speech-bubble::before {
margin-left: -6px;
border-left-width: 6px;
border-right-width: 6px;
border-top-width: 8px;
}
.capture-cycle .capture-speech-bubble::after {
margin-left: -5px;
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 7px;
}
.capture-cycle .capture-speech-bubble.tail-up::before {
border-top-width: 0;
border-bottom-width: 8px;
}
.capture-cycle .capture-speech-bubble.tail-up::after {
border-top-width: 0;
border-bottom-width: 7px;
}
.capture-cycle .capture-cycle-recap .ms-body {
padding: clamp(9px, 3.2cqw, 14px) clamp(10px, 3.8cqw, 16px);
gap: clamp(5px, 1.8cqw, 9px);
font-size: clamp(9.5px, 3.2cqw, 14px);
line-height: 1.35;
}
.capture-cycle .capture-cycle-recap h4 {
margin-bottom: clamp(2px, 0.8cqw, 4px);
font-size: clamp(10px, 3.4cqw, 13px);
}
.capture-cycle .capture-cycle-recap ul,
.capture-cycle .capture-cycle-recap ol {
padding-left: clamp(14px, 4.8cqw, 20px);
}
.capture-cycle .capture-cycle-recap li + li {
margin-top: clamp(2px, 0.8cqw, 6px);
}
.capture-cycle .capture-cycle-progress {
left: clamp(10px, 3.2cqw, 18px);
right: clamp(10px, 3.2cqw, 18px);
bottom: clamp(8px, 2.6cqw, 14px);
height: clamp(3px, 1cqw, 4px);
}
}
@media (max-width: 530px) {
.mode-proof-panel .mode-scene-email .ms-email-greeting,
.mode-proof-panel .mode-scene-email .ms-email-signoff {
display: none;
}
.mode-proof-panel .mode-scene-email .ms-email-body .ms-email-line:not(.ms-email-short-question) {
display: none;
}
.mode-proof-panel .mode-scene-email .ms-email-short-question {
display: block;
}
}
@media (prefers-reduced-motion: reduce) {
.mode-scene *,
.ms-iris,
.ms-wave-bar,
.dt-pulse-glow,
.dt-pulse-ring,
.dt-spinner circle {
animation: none !important;
}
.mode-scene .ms-frame,
.mode-scene .ms-refined-clean {
opacity: 1 !important;
}
}
.capability-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.capability-list div {
padding: 18px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(20, 16, 10, 0.09);
}
.decision-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.plan-switch {
display: flex;
width: max-content;
gap: 8px;
padding: 6px;
margin: 26px auto 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(20, 16, 10, 0.1);
}
.price-toggle {
min-height: 42px;
padding: 0 18px;
}
.price-toggle.active {
color: var(--ink);
border-color: rgba(20, 16, 10, 0.1);
background: var(--surface);
box-shadow: 0 8px 20px rgba(57, 44, 28, 0.08);
}
.badge-small {
margin-left: 6px;
color: var(--brand-orange);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
/* Keep "Yearly" and its "2 mo free" badge on one line in the toggle, no
matter how narrow the pill gets — the label is short enough to fit if
we don't let it word-wrap. */
.price-toggle {
white-space: nowrap;
}
.plan-notice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
max-width: 760px;
margin: 0 auto 34px;
padding: 14px 18px;
border: 1px solid rgba(31, 77, 58, 0.18);
border-radius: 16px;
background: rgba(226, 239, 229, 0.72);
box-shadow: 0 12px 32px rgba(57, 44, 28, 0.08);
color: var(--forest);
}
.plan-notice-icon {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
color: #fff;
font-size: 18px;
font-weight: 800;
line-height: 1;
background: var(--forest);
}
.plan-notice p {
margin: 0;
font-size: 15.5px;
line-height: 1.45;
font-weight: 600;
}
.plan-notice-warning {
border-color: rgba(234, 88, 12, 0.24);
background: rgba(255, 244, 232, 0.86);
color: var(--ink);
}
.plan-notice-warning .plan-notice-icon {
background: var(--brand-orange);
}
.plan-set {
display: none;
}
.plan-set.active {
display: grid;
}
@media (min-width: 761px) {
.plan-set.active {
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}
.plan-set.active > .plan-card {
grid-row: span 6;
grid-template-rows: subgrid;
}
}
.one-time-grid.active {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: calc((100% - 36px) / 3 * 2 + 18px);
margin-inline: auto;
}
.one-time-note {
grid-column: 1 / -1;
max-width: 820px;
margin: 0 auto 8px;
text-align: center;
color: var(--ink);
font-size: 15px;
line-height: 1.55;
}
.one-time-note strong {
display: block;
margin-top: 8px;
font-weight: 700;
}
.plan-card {
padding: 28px;
position: relative;
display: grid;
grid-template-rows: auto auto minmax(2.8em, auto) auto 1fr auto;
row-gap: 16px;
background: rgba(255, 255, 255, 0.7);
}
.plan-card.featured {
border-color: var(--brand-orange);
box-shadow: 0 0 0 1px var(--brand-orange), 0 24px 60px -30px rgba(234, 88, 12, 0.35);
}
.plan-card .badge {
display: inline-flex;
position: absolute;
top: -12px;
left: 24px;
padding: 4px 10px;
border-radius: 999px;
background: var(--brand-gradient);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.plan-name {
grid-row: 1;
color: var(--dim);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.price {
grid-row: 2;
margin: 0;
font-family: var(--font-sans);
font-size: clamp(28px, 4.6vw, 36px);
line-height: 1;
font-weight: 500;
letter-spacing: -0.03em;
}
.price small {
display: inline;
margin-top: 0;
color: var(--muted);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
}
.billing-note {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
letter-spacing: 0;
}
.plan-card .for {
grid-row: 3;
margin: 0 0 4px;
color: var(--muted);
font-size: 14px;
}
.plan-note {
grid-row: 5;
font-size: 13px;
line-height: 1.45;
}
.plan-card ul {
grid-row: 4;
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
color: var(--ink);
font-size: 14px;
list-style: none;
}
.plan-card li {
position: relative;
padding-left: 18px;
}
.plan-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.58em;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--brand-orange);
opacity: 0.72;
}
.plan-card > .btn {
grid-row: 6;
align-self: end;
margin-top: 0;
}
/* Trust pills now live in a single centered row below the pricing grid
(.plan-trust-row). Two variants share the row — subscription pills shown
when monthly/yearly is active, onetime pills when "One-time" is active.
JS toggles .active on the matching variant via initPricing(). */
.plan-trust-row {
display: flex;
justify-content: center;
margin-top: 38px;
}
.plan-trust-row .plan-trust-pills {
display: none;
}
.plan-trust-row .plan-trust-pills.active {
display: flex;
}
.plan-trust-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 2px;
}
.plan-trust-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(31, 77, 58, 0.18);
background: rgba(232, 243, 235, 0.74);
color: var(--forest);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.plan-trust-pill span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--forest);
color: #fff;
font-size: 11px;
line-height: 1;
}
.compare-table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
box-shadow: var(--shadow-card);
}
.table-scroll {
max-width: 100%;
overflow-x: auto;
border-radius: 14px;
box-shadow: var(--shadow-card);
}
.table-scroll .compare-table {
min-width: 760px;
box-shadow: none;
}
.compare-table th,
.compare-table td {
padding: 16px;
text-align: left;
border-bottom: 1px solid rgba(20, 16, 10, 0.1);
}
.compare-table th {
color: var(--forest);
background: var(--mist);
}
/* Centre plan columns (2+) — leaves the Feature label column left-aligned */
.feature-matrix th:not(:first-child),
.feature-matrix td:not(:first-child) {
text-align: center;
}
/* Feature matrix — green ticks, red crosses, group headers */
.feature-matrix .tick-yes,
.feature-matrix .tick-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.feature-matrix .tick-yes {
background: color-mix(in srgb, var(--leaf) 22%, white);
color: var(--forest);
}
.feature-matrix .tick-no {
background: color-mix(in srgb, var(--brand-rose) 16%, white);
color: var(--brand-rose);
}
.feature-matrix .tick-dependent {
background: color-mix(in srgb, #f59e0b 24%, white);
color: #b45309;
}
.feature-matrix tr.matrix-group th {
background: color-mix(in srgb, var(--mist) 60%, white);
color: var(--forest);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid rgba(20, 16, 10, 0.1);
}
.feature-matrix tr.matrix-group:first-child th {
border-top: 0;
}
/* Footnote marker sits next to the green tick, outside the disc.
width:0 + overflow:visible means the marker takes no layout width,
so centering the cell aligns the tick on the column axis instead
of treating tick+marker as one wider block. */
.feature-matrix .tick-footnote-marker {
display: inline-block;
width: 0;
overflow: visible;
white-space: nowrap;
margin-left: 2px;
color: var(--forest);
font-size: 11px;
font-weight: 700;
vertical-align: super;
line-height: 1;
}
/* Footnote line below the table — sits outside the table-scroll card */
.feature-matrix-footnote {
margin: 16px 0 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.feature-matrix-footnote sup {
margin-right: 4px;
color: var(--forest);
font-size: 11px;
font-weight: 700;
vertical-align: super;
line-height: 1;
}
/* Row label with optional info tooltip */
.feature-matrix .row-label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.feature-matrix .row-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--forest) 35%, white);
border-radius: 50%;
background: color-mix(in srgb, var(--mist) 70%, white);
color: var(--forest);
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: help;
}
.feature-matrix .row-info:hover,
.feature-matrix .row-info:focus-visible {
background: var(--mist);
outline: none;
}
.feature-matrix .row-tip {
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%);
width: max-content;
max-width: 320px;
padding: 10px 12px;
border-radius: 8px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-sans);
font-style: normal;
font-size: 12.5px;
font-weight: 400;
line-height: 1.45;
text-align: left;
box-shadow: var(--shadow-card);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 5;
}
.feature-matrix .row-tip::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: var(--ink);
}
.feature-matrix .row-info:hover .row-tip,
.feature-matrix .row-info:focus-visible .row-tip {
opacity: 1;
}
.calculator-head {
margin: 0 0 34px;
text-align: left;
}
.calculator-head .lede {
margin: 18px 0 0;
}
.calculator {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr);
overflow: hidden;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-soft);
}
.calc-controls,
.calc-result {
display: flex;
flex-direction: column;
padding: 36px;
}
.calc-controls {
border-right: 1px solid rgba(20, 16, 10, 0.1);
}
.calc-controls h3,
.calc-result h3 {
margin: 0 0 22px;
font-size: clamp(22px, 5vw, 32px);
font-weight: 600;
}
.calc-result > p {
margin: -12px 0 26px;
color: var(--muted);
}
.calc-field {
display: grid;
gap: 10px;
margin-bottom: 28px;
}
.calc-field label {
display: flex;
justify-content: space-between;
gap: 16px;
color: var(--muted);
font-weight: 700;
}
.compact-field {
margin-bottom: 20px;
}
.calc-assumption,
.calc-footnote {
color: var(--dim);
font-size: 13px;
line-height: 1.45;
margin-top: auto;
padding-top: 34px;
}
input[type="range"] {
accent-color: var(--brand-orange);
width: 100%;
}
.impact-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
margin-bottom: 18px;
color: var(--ink);
}
.impact-card > div {
min-height: 0;
padding: 0;
}
.impact-card > div + div {
border-left: 1px solid rgba(20, 16, 10, 0.1);
padding-left: 36px;
}
.impact-card span {
display: block;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.impact-card strong {
display: block;
margin-top: 8px;
font-family: var(--font-serif);
font-size: clamp(30px, 5.4vw, 62px);
line-height: 0.95;
font-weight: 700;
}
.impact-card small {
display: block;
margin-top: 10px;
color: var(--dim);
font-size: 14px;
}
.result-line {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(20, 16, 10, 0.1);
}
.calc-footnote {
margin-bottom: 0;
}
.faq-list {
display: grid;
gap: 12px;
}
.faq-item {
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.64);
overflow: hidden;
}
.faq-question {
width: 100%;
min-height: 58px;
padding: 16px 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) 24px;
align-items: start;
gap: 18px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink);
text-align: left;
line-height: 1.35;
}
.faq-question span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
line-height: 1;
transition: transform 160ms ease;
}
.faq-item.open .faq-question span {
transform: rotate(45deg);
}
.faq-answer {
display: none;
padding: 0 58px 20px 20px;
color: var(--muted);
}
.faq-item.open .faq-answer {
display: block;
}
.story-stack {
display: grid;
gap: 18px;
}
.story-card {
position: relative;
padding: 30px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.66);
box-shadow: var(--shadow-card);
}
/* Brand-gradient accent rail — matches the persona-value-card pattern on
home so the about story cards read in the same visual vocabulary. */
.story-card::before {
content: "";
position: absolute;
top: 22px;
bottom: 22px;
left: 0;
width: 3px;
border-radius: 0 999px 999px 0;
background: var(--brand-gradient);
}
.workspace-collage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
gap: 48px;
align-items: center;
}
.about-workspace-copy .lede {
margin-top: 22px;
max-width: 760px;
}
.about-workspace-copy .lede + .lede {
margin-top: 18px;
}
.app-window {
overflow: hidden;
border: 1px solid rgba(20, 16, 10, 0.12);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-card);
}
.app-top {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 0 18px;
border-bottom: 1px solid rgba(20, 16, 10, 0.1);
background: color-mix(in srgb, var(--paper-warm) 84%, white);
}
.app-top .dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--brand-gradient);
box-shadow: 0 0 0 5px rgba(244, 63, 94, 0.1);
}
.app-top strong {
color: var(--ink);
font-size: 14px;
font-weight: 700;
}
.app-body {
padding: 18px;
}
.mini-nav {
display: grid;
gap: 10px;
}
.mini-row {
display: grid;
grid-template-columns: 94px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 13px 14px;
border: 1px solid rgba(20, 16, 10, 0.1);
border-radius: var(--radius);
background: var(--paper);
}
.mini-row strong {
color: var(--ink);
font-size: 14px;
font-weight: 700;
}
.mini-row span {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.philosophy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.cta-block {
text-align: center;
padding: 62px 28px;
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-soft);
}
.cta-white-blue-diagonal {
background:
linear-gradient(135deg, #ffffff 0%, #ffffff 46%, rgba(222, 237, 248, 0.92) 100%);
}
.cta-white-green-diagonal {
background:
linear-gradient(135deg, #ffffff 0%, #ffffff 46%, rgba(226, 239, 229, 0.94) 100%);
}
.cta-block h2 {
max-width: 820px;
margin: 0 auto 18px;
font-family: var(--font-serif);
font-size: clamp(26px, 5.6vw, 42px);
line-height: 1.06;
font-weight: 600;
}
.cta-block p {
max-width: 650px;
margin: 0 auto 26px;
color: var(--muted);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.58;
}
@media (min-width: 1700px) {
.hero {
background:
var(--hero-fade-desktop),
url("assets/images/hero-image.png") right center / auto 100% no-repeat,
var(--paper);
}
}
@media (min-width: 1920px) {
.hero {
background: var(--paper);
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 66.666vw;
z-index: 0;
height: 100%;
width: auto;
aspect-ratio: 1672 / 941;
transform: translateX(-50%);
pointer-events: none;
background: url("assets/images/hero-image-fade-in-both-sides.png") center / 100% 100% no-repeat;
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.hero-grid {
z-index: 1;
}
}
@media (max-width: 1020px) {
.hero-grid,
.page-hero-grid,
.proof-split,
.calculator {
grid-template-columns: 1fr;
}
.hero-visual {
min-height: 570px;
}
.hero {
background:
var(--hero-fade-tablet),
url("assets/images/hero-image.png") right -170px center / auto 100% no-repeat,
var(--paper);
}
.hero-grid {
min-height: 500px;
background: transparent;
}
.trial-content {
grid-template-columns: 1fr;
gap: 24px;
}
.trial-actions,
.trial-actions .hero-actions {
justify-content: flex-start;
}
.card-grid,
.four-grid,
.friction-card-row,
.trial-list,
.philosophy-grid,
.record-choice-grid,
.audio-source-grid,
.feature-workspace-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.capability-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-shell {
grid-template-columns: 1fr;
}
.persona-detail-layout {
grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1fr);
gap: 20px;
}
.mode-proof {
padding: 26px;
}
.feature-flow-visual {
aspect-ratio: 600 / 470;
}
.flow-node,
.flow-output {
padding: 9px 11px;
font-size: 13px;
gap: 8px;
}
.flow-icon {
width: 26px;
height: 26px;
}
.flow-icon svg {
width: 15px;
height: 15px;
}
.workspace-step,
.workspace-step-reverse {
grid-template-columns: 1fr;
gap: 18px;
}
.workspace-proof {
gap: 100px;
}
.workspace-zigzag {
gap: 100px;
}
.workspace-step-reverse .workspace-copy,
.workspace-step-reverse .workspace-visual {
grid-column: auto;
grid-row: auto;
}
.workspace-step-reverse .workspace-copy {
order: 1;
}
.workspace-step-reverse .workspace-visual {
order: 2;
}
.profile-list {
position: static;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
overflow: visible;
padding-bottom: 0;
width: 100%;
}
.profile-button {
flex: 0 1 auto;
width: auto;
max-width: 100%;
white-space: normal;
}
.footer-grid {
grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(130px, 1fr));
}
.footer-grid > div:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 860px) {
.nav-shell {
grid-template-columns: 1fr auto;
height: 70px;
min-height: 70px;
align-items: center;
padding: 0;
}
.mobile-toggle {
/* Lift above the open overlay so the X stays tappable when the menu
is showing. Column direction so the three bars stack vertically. */
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--mobile-toggle-bar-gap);
position: relative;
z-index: 30;
}
/* The site-header has backdrop-filter on desktop, which creates a
containing block for position:fixed descendants — that would trap the
full-screen mobile overlay inside the 76px header box. Remove the
filter on mobile so .site-nav.fixed actually fills the viewport. */
.site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(251, 250, 246, 0.98);
}
/* ===== Full-screen mobile nav overlay =====
Fixed to the whole viewport so the menu blankets the page; the header
(with its sticky z-index: 10) stays visible above the overlay so the
hamburger/X button is always tappable. */
.site-nav {
position: fixed;
inset: 0;
z-index: 20;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
min-height: 100dvh;
max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 96px 24px 180px; /* bottom padding clears fixed menu actions */
background: #fdfaf3;
/* Hidden by default — visibility + opacity transition feels smoother
than display:none, which clips animations. */
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
pointer-events: none;
}
.site-nav.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
pointer-events: auto;
}
.site-nav a {
display: block;
padding: 16px 18px;
border-radius: var(--radius);
text-align: left;
color: var(--ink);
font-size: 22px;
font-weight: 600;
line-height: 1.2;
}
.site-nav a[aria-current="page"]::after {
display: none;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
background: rgba(234, 88, 12, 0.08);
color: var(--ink);
}
/* ===== Sign-in + trial actions inside the open menu =====
The .nav-actions block sits as a sibling of .site-nav in the markup.
When the menu opens, surface those actions pinned to the bottom of the
full-screen overlay using the sibling combinator. */
.nav-actions {
display: none;
}
.site-nav.open ~ .nav-actions {
display: flex;
position: fixed;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 21;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.site-nav.open ~ .nav-actions .signin {
/* Make the sign-in a proper button-sized tap target on mobile, while
keeping its visual hierarchy below the primary CTA. */
text-align: center;
padding: 14px 18px;
border: 1px solid rgba(20, 16, 10, 0.18);
border-radius: var(--radius);
font-size: 15px;
font-weight: 600;
color: var(--ink);
order: 2;
}
.site-nav.open ~ .nav-actions .btn {
width: 100%;
text-align: center;
order: 1;
}
.legal-layout {
grid-template-columns: 1fr;
}
.legal-status-card {
position: static;
}
.legal-hero-inner,
.legal-narrow {
max-width: none;
}
}
@media (max-width: 760px) {
:root {
/* Halve the page gutter on phones so 360px viewports stop pinching the
column. Anything reading off var(--page-gutter) — .container, the
nav-shell, sticky bars — picks this up automatically. */
--page-gutter: 16px;
}
.container {
width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
}
.plan-switch {
width: 100%;
gap: 4px;
}
.price-toggle {
flex: 1 1 0;
min-width: 0;
padding: 6px 8px;
font-size: 13px;
line-height: 1.1;
/* Let the badge stack under "Yearly" on phones where one line is too
tight for "Yearly 2 mo free" inline. */
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.price-toggle .badge-small {
margin-left: 0;
font-size: 9px;
}
.one-time-grid.active {
grid-template-columns: 1fr;
max-width: none;
}
.calculator-head {
margin-bottom: 20px;
}
.calculator-head .lede {
margin-top: 12px;
}
.calc-controls,
.calc-result {
padding: 28px 24px;
}
.calc-controls {
border-right: 0;
border-bottom: 1px solid rgba(20, 16, 10, 0.1);
}
.calc-controls h3,
.calc-result h3 {
margin-bottom: 18px;
font-size: 28px;
line-height: 1.05;
}
.calc-result > p {
margin: -6px 0 22px;
}
.legal-card,
.legal-intro-card {
padding: 24px;
}
.legal-status-card {
padding: 22px;
}
.legal-details div {
grid-template-columns: 1fr;
gap: 8px;
}
.legal-faq .faq-answer {
padding-right: 20px;
}
.calc-field {
gap: 8px;
margin-bottom: 22px;
}
.compact-field {
margin-bottom: 18px;
}
.calc-assumption,
.calc-footnote {
margin-top: 0;
padding-top: 18px;
}
.impact-card {
gap: 20px;
margin-bottom: 14px;
}
.impact-card > div + div {
padding-left: 20px;
}
.impact-card span {
font-size: 11px;
letter-spacing: 0.06em;
}
.impact-card strong {
margin-top: 6px;
}
.impact-card small {
margin-top: 8px;
font-size: 13px;
}
.faq-question {
padding: 15px 18px;
grid-template-columns: minmax(0, 1fr) 22px;
gap: 14px;
}
.faq-question span {
width: 22px;
height: 22px;
}
.faq-answer {
padding: 0 18px 18px;
}
.processing-card {
padding: 0;
}
.badge-small {
margin-left: 3px;
font-size: 8px;
letter-spacing: 0.1em;
}
.hero {
padding: 0 0 42px;
background:
var(--hero-fade-mobile),
url("assets/images/hero-image.png") 65% top / 130% auto no-repeat,
var(--paper);
}
.hero-grid {
gap: 22px;
min-height: auto;
padding: clamp(220px, 56vw, 340px) 0 30px;
align-items: start;
background: transparent;
border-radius: 0;
}
.hero-copy {
max-width: none;
}
/* Headline sizes are now fluid via clamp() at the base declarations, so
no mobile-specific font-size overrides are needed here. The hard
in the hero copy is tuned for desktop column width, though — hide it
on phones so "Turn spoken work into structured text." reflows cleanly
instead of forcing breaks the narrower column can't honour. */
.hero-title br {
display: none;
}
.hero-title .accent {
margin-top: 0.4em;
}
.hero-body {
margin-top: 18px;
}
/* Centre the primary CTAs and the trust row on phones — the hero copy
left-aligns naturally, but the buttons read as a clearer "call to
action" stack when they sit centred under the body. */
.hero .hero-actions {
justify-content: center;
align-items: stretch;
}
.hero .hero-actions .btn {
flex: 0 1 auto;
min-width: 220px;
text-align: center;
}
.hero .trust-row {
justify-content: center;
}
.hero .trust-row {
margin-top: 26px;
}
.hero-visual {
min-height: 500px;
}
/* Shrink to mode-tab proportions on phones — the home persona row had
44px chunky buttons that turned into a wall of pills; match the
features-page .mode-list .tab-button sizing instead so the selector
reads as a quick chip strip, not a list. */
.profile-button {
min-height: 34px;
padding: 0 12px;
font-size: 13px;
line-height: 1.18;
text-align: center;
}
.mode-list .tab-button {
min-height: 34px;
padding: 0 12px;
font-size: 13px;
}
/* The default .card-grid → 1fr override allows the column to size to
min-content. The plan-card's "Subscribe to Professional" button has
white-space: nowrap, which makes its min-content the full label width
and pushes the card past the container. Force minmax(0, 1fr) to clamp
the column, tighten card padding, and let the button text wrap. */
.plan-set.active,
.card-grid {
grid-template-columns: minmax(0, 1fr);
}
.plan-card {
padding: 22px;
min-width: 0;
}
.plan-card > .btn {
white-space: normal;
line-height: 1.2;
padding: 12px 14px;
}
.art-card {
min-height: 440px;
}
/* On phones the local-models card spans the full column — drop the tall
desktop min-height and switch to a square aspect so the monitor sits
centred in a balanced frame instead of a tall rectangle. */
.local-models-card {
min-height: 0;
aspect-ratio: 1 / 1;
}
.founder-photo-card {
min-height: 0;
}
.mode-panel {
left: 14px;
right: 14px;
bottom: 18px;
width: auto;
}
.mode-tabs {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin-top: 14px;
}
.section {
padding: 74px 0;
}
.friction-exploration {
gap: 20px;
}
.friction-variant {
padding: 16px;
}
.card-grid,
.two-col,
.four-grid,
.friction-card-row,
.before-after,
.trial-list,
.decision-grid,
.workspace-collage,
.philosophy-grid,
.record-choice-grid,
.audio-source-grid,
.audio-source-asymmetric,
.feature-workspace-grid {
grid-template-columns: 1fr;
}
.profile-output {
padding: 22px;
}
.persona-detail-layout {
grid-template-columns: 1fr;
}
.persona-value-grid {
order: 1;
grid-template-columns: 1fr;
}
.persona-stage {
order: 2;
}
.persona-scene {
aspect-ratio: 4 / 3;
min-height: 0;
}
/* When stacked, ALL three cards adopt the compact layout (icon-left, body-
right) and the compact card's sizing — no featured visual hierarchy on
mobile, where the asymmetric grid no longer exists. */
.source-card-featured,
.source-card-compact {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
padding: 22px 24px;
min-height: 0;
justify-content: start;
}
.source-card-featured .source-icon,
.source-card-compact .source-icon {
width: 44px;
height: 44px;
border-radius: 12px;
}
.source-card-featured .source-icon svg,
.source-card-compact .source-icon svg {
width: 24px;
height: 24px;
}
.source-card-featured h3,
.source-card-compact h3 {
margin: 0 0 6px;
font-size: 19px;
line-height: 1.18;
}
.source-card-featured p,
.source-card-compact p {
font-size: 14px;
line-height: 1.55;
}
.mini-row {
grid-template-columns: 1fr;
gap: 4px;
}
.flow-node,
.flow-output {
padding: 7px 9px;
font-size: 11px;
gap: 6px;
}
.flow-node strong,
.flow-output strong {
min-width: 0;
word-break: break-word;
}
.flow-icon {
width: 22px;
height: 22px;
border-radius: 8px;
}
.flow-icon svg {
width: 13px;
height: 13px;
}
.flow-output span {
width: 7px;
height: 7px;
}
.record-card {
grid-template-columns: 1fr;
min-height: auto;
padding: 24px;
}
.record-scene {
/* Wider, shorter ratio when stacked — saves vertical space on mobile
without cropping content. */
aspect-ratio: 16 / 10;
}
.file-row {
flex-direction: column;
gap: 4px;
}
.friction-card-merged,
.friction-surface-card,
.friction-step {
min-height: auto;
}
.friction-step {
grid-template-columns: 1fr;
gap: 14px;
}
.workspace-proof {
gap: 100px;
}
.workspace-zigzag {
gap: 100px;
}
.workspace-visual {
min-height: 270px;
padding: 18px;
}
.workspace-copy {
padding: 0;
}
.workspace-copy h3 {
max-width: none;
}
.history-item {
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 10px;
padding: 10px 12px;
}
.history-action {
width: 34px;
min-height: 34px;
}
.phrase-stage {
min-height: 260px;
}
/* Tighten notepad margins + button size on narrow screens so the scene
stays readable inside a smaller stage. */
.phrase-notepad {
top: 10%;
left: 5%;
right: 5%;
bottom: 10%;
}
.dt-button.phrase-dt-button {
width: 88px;
height: 88px;
}
.phrase-keyword-text,
.phrase-expanded-text {
font-size: 15px;
}
.phrase-expanded-text {
width: calc(100% - 36px);
}
}
@media (max-width: 570px) {
.workspace-visual {
min-height: 230px;
padding: clamp(12px, 4.5cqw, 18px);
}
.mock-toolbar {
grid-template-columns: minmax(0, 1fr) clamp(30px, 11cqw, 40px) clamp(30px, 11cqw, 40px);
gap: clamp(6px, 2.2cqw, 10px);
margin-bottom: clamp(8px, 3cqw, 14px);
padding: clamp(7px, 2.6cqw, 10px);
}
.mock-toolbar span,
.vocab-input {
min-height: clamp(30px, 11cqw, 40px);
padding: 0 clamp(9px, 3.2cqw, 14px);
font-size: clamp(10px, 3.5cqw, 14px);
}
.toolbar-btn,
.history-action {
width: clamp(28px, 10cqw, 34px);
min-height: clamp(28px, 10cqw, 34px);
border-radius: clamp(8px, 3cqw, 12px);
}
.toolbar-btn::before,
.history-action::before,
.vocab-add-btn::before {
width: clamp(12px, 4.4cqw, 16px);
height: clamp(12px, 4.4cqw, 16px);
}
.history-list {
gap: clamp(6px, 2.2cqw, 10px);
}
.history-item {
grid-template-columns: clamp(18px, 7cqw, 24px) minmax(0, 1fr) auto;
gap: clamp(6px, 2.4cqw, 10px);
padding: clamp(7px, 2.6cqw, 10px) clamp(8px, 3cqw, 12px);
border-radius: clamp(8px, 3cqw, 12px);
}
.history-title {
font-size: clamp(10px, 3.5cqw, 14px);
}
.history-item small {
font-size: clamp(8px, 2.7cqw, 12px);
}
.history-actions {
gap: clamp(4px, 1.8cqw, 6px);
}
.mic-dot {
width: clamp(17px, 6.5cqw, 24px);
height: clamp(17px, 6.5cqw, 24px);
}
.vocab-render {
gap: clamp(9px, 3.2cqw, 14px);
}
.vocab-head {
gap: clamp(6px, 2.3cqw, 10px);
margin-bottom: clamp(4px, 1.8cqw, 8px);
}
.vocab-head strong {
font-size: clamp(13px, 4.5cqw, 20px);
}
.vocab-head span {
font-size: clamp(10px, 3.4cqw, 14px);
}
.vocab-add {
grid-template-columns: minmax(0, 1fr) clamp(32px, 12cqw, 44px);
gap: clamp(5px, 2cqw, 8px);
}
.vocab-add .vocab-input,
.vocab-add-btn {
min-height: clamp(32px, 12cqw, 44px);
}
.vocab-add-btn {
width: clamp(32px, 12cqw, 44px);
border-radius: clamp(8px, 3cqw, 12px);
}
.vocab-pill {
min-height: clamp(34px, 12.5cqw, 48px);
padding: 0 clamp(10px, 3.8cqw, 16px);
font-size: clamp(10px, 3.5cqw, 14px);
border-radius: clamp(8px, 3cqw, 12px);
}
.phrase-stage {
min-height: 220px;
}
.dt-button.phrase-dt-button {
width: clamp(66px, 24cqw, 88px);
height: clamp(66px, 24cqw, 88px);
}
.phrase-notepad .ms-body {
padding: clamp(14px, 5cqw, 24px) clamp(16px, 5.8cqw, 28px);
}
.phrase-keyword-text,
.phrase-expanded-text {
font-size: clamp(11px, 4cqw, 15px);
}
.phrase-strike {
height: clamp(2px, 0.9cqw, 4px);
}
}
@media (max-width: 760px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-grid > div:first-child {
grid-column: 1 / -1;
}
.capability-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trial-band {
padding: 30px;
min-height: 360px;
gap: 28px;
}
.footer-line {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}