/* KingLetter 2026 experience layer. Functional selectors stay in the existing styles. */
body {
  background-color: var(--kl-navy-950);
  background-image: none;
}
html, body { overflow-x: clip; }

.page-glow {
  background:
    radial-gradient(circle at 18% 12%, rgba(21, 199, 195, .14), transparent 29%),
    radial-gradient(circle at 82% 34%, rgba(199, 161, 90, .09), transparent 25%),
    linear-gradient(145deg, rgba(5, 12, 22, .97), rgba(8, 25, 42, .95));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 88px;
  padding: 0 clamp(20px, 4.5vw, 76px);
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(5, 13, 23, .82);
  backdrop-filter: blur(20px) saturate(125%);
}

.brand {
  flex: 0 0 auto;
  width: 236px;
  height: 78px;
  overflow: hidden;
  transform: none;
}

.brand img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(5px) scale(1.28); }

.primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 30px); margin-inline: auto; }
.primary-nav a { position: relative; padding: 10px 0; color: #d4deea; font-size: 14px; font-weight: 700; text-decoration: none; transition: color var(--kl-transition); }
.primary-nav a::after { position: absolute; right: 50%; bottom: 2px; left: 50%; height: 2px; border-radius: 2px; background: var(--kl-turquoise-400); content: ""; transition: right var(--kl-transition), left var(--kl-transition); }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #fff; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; left: 0; }

.header-actions { flex: 0 0 auto; }
.header-button { min-height: 44px; border-color: rgba(255, 255, 255, .16); border-radius: 13px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .07); }
.header-button:hover { transform: translateY(-1px); border-color: rgba(67, 226, 220, .6); background: rgba(67, 226, 220, .1); }

.stage { display: block; min-height: calc(100dvh - 88px); padding: 0; overflow: clip; }
.view { width: min(1160px, calc(100% - 40px)); margin-inline: auto; padding: 56px 0 84px; }
.view.active { animation: kl-view-enter .36s ease both; }
@keyframes kl-view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.floating-icon { opacity: .32; filter: drop-shadow(0 8px 18px rgba(21, 199, 195, .18)); }

/* Letter creation wizard */
#composer { width: min(920px, calc(100% - 40px)); padding-top: 48px; }
.composer-card { overflow: hidden; padding: 0 0 44px; border-radius: 30px; }
.composer-card > .card-kicker, .composer-card > h1, .composer-card > p, .composer-card > form { margin-inline: clamp(26px, 6vw, 64px); }
.composer-card > .card-kicker { margin-top: 34px; }
.composer-card > h1 { margin-top: 15px; margin-bottom: 8px; color: var(--kl-navy-950); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(38px, 5vw, 54px); line-height: 1.08; }
.composer-card > p { max-width: 650px; color: var(--kl-muted); font-size: 16px; line-height: 1.7; }
.wizard-progress { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 24px clamp(26px, 6vw, 64px); border-bottom: 1px solid var(--kl-border); background: linear-gradient(180deg, #f9fbfd, #f5f8fb); list-style: none; }
.wizard-progress::before { position: absolute; top: 43px; right: calc(16.666% + 40px); left: calc(16.666% + 40px); height: 2px; background: #d9e2e9; content: ""; }
.wizard-progress li { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; color: #8290a1; }
.wizard-progress li:nth-child(2) { justify-content: center; }
.wizard-progress li:last-child { justify-content: flex-end; }
.wizard-progress li > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 2px solid #d4dee7; border-radius: 50%; background: #fff; color: #7a899a; font-size: 13px; font-weight: 900; transition: all var(--kl-transition); }
.wizard-progress li > div { display: grid; }
.wizard-progress strong { color: #536477; font-size: 13px; }
.wizard-progress small { font-size: 11px; }
.wizard-progress .is-current > span { border-color: var(--kl-turquoise-500); background: var(--kl-turquoise-500); box-shadow: 0 0 0 6px rgba(21, 199, 195, .11); color: #04262c; }
.wizard-progress .is-current strong { color: var(--kl-navy-900); }
.wizard-progress .is-complete > span { border-color: var(--kl-turquoise-600); background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); }
.composer-card .form-grid { gap: 20px; margin-top: 30px; }
.composer-card .field { gap: 9px; color: var(--kl-navy-800); font-size: 14px; }
.composer-card .field > span { display: flex; align-items: center; gap: 7px; }
.composer-card .field input, .composer-card .field textarea { min-height: 52px; padding: 13px 15px; border-radius: 14px; background: #fbfcfe; }
.composer-card .field textarea { min-height: 170px; }
.composer-card .form-actions { padding-top: 8px; border-top: 1px solid #edf1f5; }
.composer-card .form-actions .primary-button { min-width: 220px; }
.tone-picker { gap: 10px; padding: 18px; border: 1px solid var(--kl-border); border-radius: 18px; background: var(--kl-surface); }
.tone-picker button { min-height: 42px; padding: 9px 17px; border-radius: 13px; }
.tone-picker button:hover { transform: translateY(-1px); border-color: var(--kl-turquoise-500); }
.tone-picker button.selected { box-shadow: 0 0 0 3px rgba(21, 199, 195, .12); }
.writer-identity-picker { gap: 16px; margin-top: 24px; }
.writer-identity-picker button { border: 1px solid var(--kl-border); border-radius: 20px; background: #fbfcfe; box-shadow: var(--kl-shadow-sm); }
.writer-identity-picker button.selected { border-color: var(--kl-turquoise-500); box-shadow: 0 0 0 4px rgba(21, 199, 195, .12), var(--kl-shadow-md); }
.composer-card.writing-step, .composer-card.identity-step { animation: none; }
.composer-card.writing-step .form-grid, .composer-card.identity-step .form-grid { animation: kl-step-content .28s ease both; }
@keyframes kl-step-content { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.blocking-loader { background: rgba(8, 20, 34, .88); backdrop-filter: blur(12px); }
.blocking-loader-card { border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; background: rgba(12, 31, 49, .94); box-shadow: var(--kl-shadow-lg); }
.blocking-loader-card h2 { color: var(--kl-turquoise-400); font-family: "Frank Ruhl Libre", Heebo, serif; letter-spacing: 0; }
.blocking-loader-card p { min-height: 24px; color: #c4d0dc; transition: opacity var(--kl-transition); }

/* Professional document workspace */
#studio { width: min(1400px, calc(100% - 32px)); padding-top: 34px; }
.studio-card { padding: clamp(24px, 3vw, 42px); border-radius: 28px; background: #f7f9fb; }
.studio-card > .card-kicker { margin-bottom: 10px; }
.studio-card > h1 { margin: 0 0 18px; color: var(--kl-navy-950); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(36px, 4vw, 52px); line-height: 1.08; }
.studio-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 8px; border: 1px solid var(--kl-border); border-radius: 16px; background: #fff; box-shadow: var(--kl-shadow-sm); }
.studio-mode-nav { display: flex; flex-wrap: wrap; gap: 5px; }
.studio-mode-nav button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: #526477; font-size: 13px; font-weight: 800; transition: background-color var(--kl-transition), color var(--kl-transition); }
.studio-mode-nav button:hover, .studio-mode-nav button:focus-visible { background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); }
.studio-live-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 9px; color: var(--kl-success); font-size: 12px; font-weight: 800; white-space: nowrap; }
.studio-live-state i { font-size: 7px; box-shadow: none; }
.studio-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; margin-top: 0; }
.studio-letter-column { min-width: 0; }
.selection-format-toolbar { position: relative; z-index: 6; margin-bottom: 12px; padding: 13px; border-color: var(--kl-border); border-radius: 16px; background: #fff; box-shadow: var(--kl-shadow-sm); }
.selection-toolbar-title { color: var(--kl-navy-800); }
.selection-toolbar-actions button, .selection-color-control, .selection-shadow-color-control, .selection-font-control { border-color: var(--kl-border); border-radius: 9px; background: var(--kl-surface); }
.selection-toolbar-actions button:hover, .selection-toolbar-actions button:focus-visible, .selection-color-control:hover, .selection-shadow-color-control:hover, .selection-font-control:focus-within { border-color: var(--kl-turquoise-500); background: var(--kl-turquoise-100); }
.studio-paper-viewport { border: 1px solid #d7e0e8; border-radius: 18px; background: #e9edf1; box-shadow: inset 0 1px 9px rgba(22, 43, 64, .08); }
.studio-paper { margin-inline: auto; border-radius: 4px; box-shadow: 0 22px 48px rgba(20, 37, 55, .19); }
.ai-review-notice { border-color: #d7e2ea; border-radius: 14px; background: #fff; color: var(--kl-muted); }
.background-next-step { border-color: #b8e3e0; border-radius: 18px; background: linear-gradient(125deg, #f3fcfb, #f5f9fc); box-shadow: var(--kl-shadow-sm); }

.toolbox { position: sticky; top: 106px; display: block; max-height: calc(100dvh - 128px); overflow-y: auto; padding: 16px; border: 1px solid var(--kl-border); border-radius: 20px; background: #fff; box-shadow: var(--kl-shadow-sm); scrollbar-width: thin; }
.toolbox > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; padding: 2px 4px; color: var(--kl-navy-900); font-size: 16px; }
.toolbox > h3 i { color: var(--kl-turquoise-600); }
.toolbox-save-zone { padding: 12px; border: 1px solid #bce3e0; border-radius: 15px; background: #f2fbfa; }
.toolbox .studio-save-button { margin: 0; }
.toolbox .studio-save-status { margin: 7px 2px 0; text-align: center; }
.tool-group { margin-top: 10px; border: 1px solid var(--kl-border); border-radius: 14px; background: #fff; }
.toolbox .tool-group-toggle { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 12px; border: 0; border-radius: 13px; background: transparent; color: var(--kl-navy-800); text-align: right; }
.tool-group-toggle > span { display: flex; align-items: center; gap: 8px; }
.tool-group-toggle > i { width: auto; color: #8291a2; transition: transform var(--kl-transition); }
.tool-group.is-open .tool-group-toggle > i { transform: rotate(180deg); }
.tool-group.is-open .tool-group-toggle { background: #f7fafc; }
.tool-group-content { display: none; gap: 7px; padding: 0 10px 10px; }
.tool-group.is-open .tool-group-content { display: grid; animation: kl-tool-open .2s ease both; }
@keyframes kl-tool-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.toolbox .tool-group-content > button, .toolbox .tool-group-content > .image-download-control > button { min-height: 43px; margin: 0; border-color: var(--kl-border); border-radius: 10px; background: var(--kl-surface); }
.toolbox .tool-group-content > button:hover, .toolbox .tool-group-content > .image-download-control > button:hover { border-color: var(--kl-turquoise-500); background: var(--kl-turquoise-100); }
.toolbox .typography-tools { margin: 0 0 4px; padding: 10px; border-radius: 11px; background: var(--kl-surface); }
.toolbox .typography-tools select { width: 100%; min-height: 42px; border: 1px solid var(--kl-border); border-radius: 9px; }
.toolbox .paper-template-control { margin: 0; }
.toolbox .paper-template-toggle { min-height: 43px; border-color: var(--kl-border); background: var(--kl-surface); }
.toolbox .logo-size-tools { margin: 2px 0 0; }

/* A short turquoise confirmation shows exactly where the studio navigation arrived. */
#studio .is-studio-focus-highlighted {
  outline: 2px solid rgba(21, 199, 195, 0);
  outline-offset: 4px;
  animation: kl-studio-focus-highlight 3.2s ease-out;
}
#studio .tool-group.is-studio-focus-highlighted .tool-group-content {
  border-radius: 10px;
  animation: kl-studio-focus-options 3.2s ease-out;
}
#studio .tool-group.is-studio-focus-highlighted .tool-group-content > button,
#studio .tool-group.is-studio-focus-highlighted .tool-group-content > .image-download-control > button {
  animation: kl-studio-focus-option 3.2s ease-out;
}
@keyframes kl-studio-focus-highlight {
  0%, 72% { outline-color: rgba(21, 199, 195, .88); box-shadow: 0 0 0 5px rgba(21, 199, 195, .14), 0 16px 34px rgba(8, 87, 95, .13); }
  100% { outline-color: rgba(21, 199, 195, 0); box-shadow: 0 0 0 9px rgba(21, 199, 195, 0); }
}
@keyframes kl-studio-focus-options {
  0%, 72% { background: rgba(218, 250, 247, .72); }
  100% { background: transparent; }
}
@keyframes kl-studio-focus-option {
  0%, 72% { border-color: var(--kl-turquoise-500); background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); }
}

/* Personal workspace */
#personal { width: min(1180px, calc(100% - 40px)); }
.personal-page { min-height: 680px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: #fff; }
.personal-page-header { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 0 26px; border: 0; background: transparent; }
.personal-avatar { display: grid; width: 60px; height: 60px; place-items: center; border: 1px solid #bce6e3; border-radius: 19px; background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); font-size: 23px; }
.personal-page-header h1 { margin: 0; color: var(--kl-navy-950); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(36px, 4vw, 48px); line-height: 1.08; }
.personal-page-header p { margin: 5px 0 0; color: var(--kl-muted); }
.personal-logout-button { min-height: 44px; padding: 0 15px; border: 1px solid var(--kl-border); border-radius: 12px; background: #fff; color: #506276; font-weight: 800; }
.personal-logout-button:hover { border-color: #e3aaa5; background: #fff7f6; color: var(--kl-danger); }
.personal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; }
.personal-summary article { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--kl-border); border-radius: 17px; background: var(--kl-surface); }
.personal-summary article:first-child { border-color: #bce6e3; background: linear-gradient(135deg, #effbf9, #f8fcfc); }
.summary-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #fff; color: var(--kl-turquoise-600); box-shadow: var(--kl-shadow-sm); }
.summary-plan { color: var(--kl-gold-500); }
.summary-status { color: var(--kl-success); }
.personal-summary article > div { min-width: 0; }
.personal-summary small, .personal-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-summary small { color: var(--kl-muted); font-size: 12px; }
.personal-summary strong { margin-top: 3px; color: var(--kl-navy-900); font-size: 20px; }
.personal-tabs { gap: 5px; padding: 5px; border: 1px solid var(--kl-border); border-radius: 15px; background: var(--kl-surface); }
.personal-tabs button { min-height: 46px; border-radius: 11px; color: #607185; }
.personal-tabs button.active { color: var(--kl-turquoise-600); box-shadow: var(--kl-shadow-sm); }
.personal-page-content { min-height: 320px; margin-top: 26px; }
.personal-letters-heading { align-items: flex-end; margin-bottom: 18px; }
.personal-letters-heading small { color: var(--kl-turquoise-600); font-size: 12px; font-weight: 900; }
.personal-letters-heading h2 { margin: 2px 0 0; color: var(--kl-navy-950); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 32px; }
.letters-retention-notice { margin-bottom: 18px; border: 1px solid #e7dfca; border-radius: 13px; background: #fffbf1; color: #6e5b34; }
.personal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.saved-letter { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 15px; padding: 18px; border-color: var(--kl-border); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(8, 25, 43, .055); transition: transform var(--kl-transition), box-shadow var(--kl-transition), border-color var(--kl-transition); }
.saved-letter:hover { transform: translateY(-3px); border-color: #b9d8d6; box-shadow: var(--kl-shadow-md); }
.saved-letter-preview { position: relative; display: grid; width: 72px; height: 96px; align-content: center; gap: 7px; padding: 13px 10px; overflow: hidden; border: 1px solid #e5e0d7; border-radius: 5px; background: var(--kl-paper); box-shadow: 0 7px 17px rgba(23, 39, 55, .1); }
.saved-letter-preview::after { position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: var(--kl-turquoise-500); content: ""; }
.saved-letter-preview i { margin-bottom: 2px; color: var(--kl-gold-500); font-size: 14px; }
.saved-letter-preview span { display: block; width: 100%; height: 3px; border-radius: 2px; background: #d9dee2; }
.saved-letter-preview span:last-child { width: 62%; }
.saved-letter-copy { min-width: 0; }
.saved-letter-copy strong { overflow: hidden; color: var(--kl-navy-900); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.saved-letter-copy small { display: block; margin-top: 7px; color: #778698; }
.saved-letter-copy p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: var(--kl-muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.saved-letter-actions { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #edf1f4; }
.saved-letter-actions button { min-height: 39px; border-radius: 9px; }
.saved-letter-actions button:first-child { flex: 1; background: var(--kl-navy-900); color: #fff; }
.saved-letter-actions button:first-child:hover { background: var(--kl-navy-800); }
.personal-empty-state { display: grid; min-height: 330px; place-items: center; align-content: center; padding: 36px; border: 1px dashed #c9d6e0; border-radius: 22px; background: var(--kl-surface); text-align: center; }
.personal-empty-state > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); font-size: 25px; }
.personal-empty-state h3 { margin: 18px 0 6px; color: var(--kl-navy-900); font-size: 23px; }
.personal-empty-state p { max-width: 430px; margin: 0 0 20px; color: var(--kl-muted); line-height: 1.7; }
.billing-summary > div, .account-detail > div { border-color: var(--kl-border); border-radius: 15px; background: var(--kl-surface); }
.account-edit-form { border-color: var(--kl-border); border-radius: 18px; background: #fff; box-shadow: var(--kl-shadow-sm); }

.auth-box { border-radius: 26px; }
.auth-tabs { border: 1px solid var(--kl-border); border-radius: 13px; background: var(--kl-surface); }
.auth-tabs button { min-height: 42px; }
.auth-form .field input { min-height: 50px; }

@media (min-width: 761px) {
  .studio-paper-viewport { padding: clamp(20px, 2.4vw, 34px); }
}

#home { width: 100%; max-width: none; padding: 0; text-align: right; }
.hero-shell { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: clamp(40px, 6vw, 92px); width: min(1240px, calc(100% - 48px)); min-height: min(780px, calc(100dvh - 88px)); margin-inline: auto; padding: 74px 0 88px; }
.hero-shell::before { position: absolute; top: 6%; right: 53%; width: 360px; height: 360px; border: 1px solid rgba(67, 226, 220, .08); border-radius: 50%; box-shadow: 0 0 100px rgba(67, 226, 220, .04), inset 0 0 80px rgba(67, 226, 220, .025); content: ""; pointer-events: none; }
.hero-card { position: relative; z-index: 2; padding: 0; color: #fff; text-align: right; }
.home-view .eyebrow { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 13px; border: 1px solid rgba(67, 226, 220, .28); border-radius: 999px; background: rgba(21, 199, 195, .08); color: #9ff7f1; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.home-view .eyebrow::before, .home-view .eyebrow::after { display: none; }
.home-view .hero-card h1 { max-width: 640px; margin: 28px 0 22px; color: #fff; font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(54px, 6.3vw, 88px); font-weight: 800; line-height: .96; letter-spacing: -2.5px; }
.home-view .hero-card h1 span { display: inline-block; color: var(--kl-turquoise-400); text-shadow: 0 14px 48px rgba(21, 199, 195, .16); }
.home-view .hero-card > p { max-width: 600px; margin: 0 0 32px; color: #c8d5e2; font-size: clamp(17px, 1.65vw, 20px); line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.start-orb { display: inline-flex; width: auto; height: 54px; min-height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border-radius: 16px; font-size: 16px; }
.start-orb i { font-size: 17px; }
.start-orb.open { transform: none; filter: saturate(.85); }
.hero-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .055); color: #eff5fb; }
.hero-secondary-button:hover { transform: translateY(-2px); border-color: rgba(67, 226, 220, .48); background: rgba(67, 226, 220, .08); }
.start-caption { display: none; }
.hero-trust-list { display: flex; flex-wrap: wrap; gap: 18px; margin: 25px 0 0; padding: 0; color: #aab9c9; font-size: 13px; list-style: none; }
.hero-trust-list li { display: flex; align-items: center; gap: 6px; }
.hero-trust-list i { color: var(--kl-gold-300); font-size: 11px; }

.hero-demo { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); box-shadow: 0 42px 100px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .12); backdrop-filter: blur(14px); }
.hero-demo::before { position: absolute; inset: 0; background: radial-gradient(circle at 75% 16%, rgba(67, 226, 220, .13), transparent 32%); content: ""; pointer-events: none; }
.demo-window-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.demo-window-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.demo-window-bar span:first-child { background: var(--kl-gold-500); }
.demo-window-bar small { margin-inline-start: auto; color: #a8b7c6; font-size: 11px; letter-spacing: .08em; }
.demo-stage { position: relative; display: grid; grid-template-columns: minmax(130px, .72fr) 42px minmax(220px, 1.28fr); align-items: center; gap: 12px; min-height: 430px; padding: 36px; }
.demo-idea-card { align-self: center; padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(7, 19, 32, .66); color: #dfe8f1; box-shadow: var(--kl-shadow-sm); }
.demo-label { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #8ee9e4; font-size: 12px; font-weight: 800; }
.demo-idea-card p { min-height: 72px; margin: 0; font-size: 15px; line-height: 1.65; }
.demo-transform { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(67, 226, 220, .32); border-radius: 50%; background: rgba(21, 199, 195, .1); color: var(--kl-turquoise-400); animation: demo-pulse 2.8s ease-in-out infinite; }
@keyframes demo-pulse { 50% { transform: scale(1.08) rotate(-6deg); box-shadow: 0 0 0 12px rgba(21, 199, 195, 0); } }
.demo-letter-paper { position: relative; min-height: 330px; padding: 42px 36px 34px; border-radius: 6px; background: linear-gradient(145deg, #fffefb, #f7f2e8); box-shadow: 0 24px 50px rgba(0, 0, 0, .26); color: #223248; transform: rotate(-1.2deg); }
.demo-letter-paper::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--kl-gold-500), transparent); content: ""; opacity: .65; }
.demo-paper-mark { position: absolute; top: 18px; left: 20px; color: var(--kl-gold-500); opacity: .7; }
.demo-letter-paper small { display: block; color: var(--kl-turquoise-600); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.demo-letter-paper strong { display: block; margin: 22px 0 12px; font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 21px; }
.demo-letter-paper p { min-height: 104px; margin: 0; font-size: 13px; line-height: 1.9; }
.demo-letter-paper p.is-writing::after { display: inline-block; width: 1px; height: 1em; margin-inline-start: 2px; background: var(--kl-turquoise-600); content: ""; vertical-align: -.15em; animation: caret-blink .7s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.demo-signature { display: block; margin-top: 15px; color: #52647a; font-size: 12px; font-weight: 700; text-align: left; }
.demo-status { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 22px; border-top: 1px solid rgba(255, 255, 255, .1); color: #c7d3df; font-size: 12px; }
.demo-status span { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.demo-status i { color: var(--kl-turquoise-400); }
.demo-status small { color: #8495a8; }

.letter-types { position: relative; z-index: 4; width: min(1000px, calc(100% - 48px)); max-width: 1000px; margin: -42px auto 80px; padding: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .13); border-radius: 26px; background: rgba(9, 24, 40, .96); box-shadow: var(--kl-shadow-lg); backdrop-filter: blur(18px); }
.letter-types.collapsed { max-height: 0; margin-top: -42px; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; }
.type-menu-heading { grid-column: 1 / -1; padding: 6px 4px 14px; }
.type-card { min-height: 132px; padding: 20px; border-color: rgba(255, 255, 255, .11); border-radius: 18px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.type-card:hover, .type-card:focus-visible { transform: translateY(-3px); border-color: rgba(67, 226, 220, .55); background: rgba(67, 226, 220, .09); }
.type-card i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(67, 226, 220, .1); font-size: 17px; }

.home-content { padding-bottom: 72px; overflow: flow-root; background: var(--kl-white); color: var(--kl-text); }
.home-section { width: min(1160px, calc(100% - 48px)); margin-inline: auto; padding: 96px 0; }
.home-section:not(:first-child), .home-final-cta, .site-footer { content-visibility: auto; }
.home-section:not(:first-child) { contain-intrinsic-block-size: 760px; }
.home-final-cta { contain-intrinsic-block-size: 190px; }
.site-footer { contain-intrinsic-block-size: 260px; }
.home-section + .home-section { border-top: 1px solid #edf1f5; }
.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading > span, .privacy-section > div > span { color: var(--kl-turquoise-600); font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.section-heading h2, .privacy-section h2, .home-final-cta h2 { margin: 8px 0 12px; color: var(--kl-navy-950); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.8px; }
.section-heading p { margin: 0; color: var(--kl-muted); font-size: 17px; line-height: 1.75; }
.section-heading-row { display: flex; max-width: none; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading-row > div { max-width: 720px; }
.section-action { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--kl-border); background: #fff; color: var(--kl-navy-700); }
.section-action:hover { transform: translateY(-2px); border-color: var(--kl-turquoise-500); color: var(--kl-turquoise-600); }

.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: process; }
.process-grid li { position: relative; min-height: 250px; padding: 32px; overflow: hidden; border: 1px solid var(--kl-border); border-radius: 22px; background: #fff; box-shadow: var(--kl-shadow-sm); transition: transform var(--kl-transition), box-shadow var(--kl-transition), border-color var(--kl-transition); }
.process-grid li:hover { transform: translateY(-5px); border-color: #b9dedc; box-shadow: var(--kl-shadow-md); }
.process-grid li > i { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 28px; border-radius: 15px; background: var(--kl-turquoise-100); color: var(--kl-turquoise-600); font-size: 20px; }
.process-number { position: absolute; top: 18px; left: 22px; color: #dce4eb; font-size: 28px; font-weight: 900; }
.process-grid h3, .benefits-grid h3 { margin: 0 0 8px; color: var(--kl-navy-900); font-size: 21px; }
.process-grid p, .benefits-grid p { margin: 0; color: var(--kl-muted); line-height: 1.7; }

.examples-section { background: #fff; }
.examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.example-card { position: relative; display: flex; min-height: 220px; align-items: flex-start; gap: 18px; padding: 28px; overflow: hidden; border: 1px solid var(--kl-border); border-radius: 22px; background: linear-gradient(145deg, #fff, #f8fafc); color: var(--kl-text); text-align: right; transition: transform var(--kl-transition), box-shadow var(--kl-transition), border-color var(--kl-transition); }
.example-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: var(--example-accent, var(--kl-turquoise-500)); content: ""; transform: scaleX(.28); transform-origin: right; transition: transform var(--kl-transition); }
.example-card:hover { transform: translateY(-5px); border-color: #bdcfdd; box-shadow: var(--kl-shadow-md); }
.example-card:hover::after { transform: scaleX(1); }
.example-card > span:nth-child(2) { display: grid; gap: 5px; }
.example-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--example-accent, var(--kl-turquoise-500)) 12%, white); color: var(--example-accent, var(--kl-turquoise-600)); font-size: 20px; }
.example-card small { color: var(--kl-muted); font-size: 12px; font-weight: 700; }
.example-card strong { color: var(--kl-navy-900); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 25px; }
.example-card em { color: var(--kl-muted); font-size: 14px; font-style: normal; line-height: 1.6; }
.example-card > i { position: absolute; bottom: 24px; left: 26px; color: var(--example-accent, var(--kl-turquoise-600)); }
.example-formal { --example-accent: #315e92; }
.example-personal { --example-accent: #b87579; }
.example-thanks { --example-accent: #b1853f; }

.before-after-section { --before-after-base-padding:96px; --before-after-overlap:64px; position:relative; z-index:6; isolation:isolate; width:min(1240px,calc(100% - 32px)); max-width:1240px; margin-block:calc(var(--before-after-overlap) * -1); padding:var(--before-after-base-padding) clamp(24px,4.5vw,56px); overflow:hidden; border:1px solid rgba(24,63,88,.11); border-radius:38px; background:var(--kl-surface); box-shadow:0 42px 90px rgba(7,24,39,.18),0 12px 30px rgba(7,24,39,.1),inset 0 1px rgba(255,255,255,.92); transform:translateZ(0); }
.before-after-section::before { position:absolute; top:0; right:8%; left:8%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); content:""; pointer-events:none; }
.before-after-grid { display: grid; grid-template-columns: 1fr 62px 1.25fr; align-items: center; gap: 22px; }
.before-card, .after-card { min-height: 270px; padding: 34px; border-radius: 24px; }
.before-card { display: grid; align-content: center; border: 1px dashed #c6d0db; background: #fff; color: var(--kl-muted); }
.before-card p { margin: 18px 0 0; font-size: 20px; line-height: 1.75; }
.after-card { position: relative; border: 1px solid #e3dbc9; background: var(--kl-paper); box-shadow: var(--kl-shadow-md); }
.after-card::before { position: absolute; inset-block: 22px; right: 0; width: 3px; border-radius: 4px; background: linear-gradient(var(--kl-gold-300), var(--kl-turquoise-500)); content: ""; }
.after-card h3 { margin: 18px 0 12px; color: var(--kl-navy-900); font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 24px; }
.after-card p { color: #3d4d60; font-size: 17px; line-height: 1.9; }
.after-card small { display: block; margin-top: 20px; color: var(--kl-muted); font-weight: 700; text-align: left; }
.comparison-label { color: var(--kl-turquoise-600); font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.comparison-arrow { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--kl-navy-900); color: var(--kl-turquoise-400); box-shadow: var(--kl-shadow-sm); }

.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.benefits-grid article { padding: 28px 24px; border-top: 3px solid transparent; border-radius: 18px; background: var(--kl-surface); transition: transform var(--kl-transition), border-color var(--kl-transition), background-color var(--kl-transition); }
.benefits-grid article:hover { transform: translateY(-3px); border-color: var(--kl-turquoise-500); background: #f1fbfa; }
.benefits-grid i { margin-bottom: 26px; color: var(--kl-turquoise-600); font-size: 23px; }
.benefits-grid h3 { font-size: 19px; }

/* Studio benefits: three quick hover-like pulses, then the remaining cards light together. */
.home-motion-ready .benefits-section.is-motion-visible .benefits-grid > article:first-child {
  animation: kl-benefit-triple-hover .84s .9s cubic-bezier(.22, 1, .36, 1) both;
}
.home-motion-ready .benefits-section.is-motion-visible .benefits-grid > article:nth-child(n + 2) {
  animation: kl-benefit-group-light .24s 1.74s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes kl-benefit-triple-hover {
  0%, 24%, 48% {
    border-color: transparent;
    background: var(--kl-surface);
    box-shadow: none;
    transform: translateY(0);
  }
  12%, 36%, 60%, 100% {
    border-color: var(--kl-turquoise-500);
    background: #f1fbfa;
    box-shadow: 0 14px 30px rgba(8, 87, 95, .12);
    transform: translateY(-3px);
  }
}
@keyframes kl-benefit-group-light {
  0% {
    border-color: transparent;
    background: var(--kl-surface);
    box-shadow: none;
    transform: translateY(0);
  }
  100% {
    border-color: var(--kl-turquoise-500);
    background: #f1fbfa;
    box-shadow: 0 14px 30px rgba(8, 87, 95, .12);
    transform: translateY(-3px);
  }
}

.privacy-section { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 28px; padding: 50px; border-top: 0 !important; border-radius: 28px; background: linear-gradient(135deg, var(--kl-navy-900), #112d45); color: #fff; box-shadow: var(--kl-shadow-md); }
.privacy-icon { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(67, 226, 220, .3); border-radius: 21px; background: rgba(67, 226, 220, .09); color: var(--kl-turquoise-400); font-size: 27px; }
.privacy-section h2 { margin: 5px 0 9px; color: #fff; font-size: clamp(28px, 3vw, 40px); }
.privacy-section p { max-width: 680px; margin: 0; color: #c5d1dd; line-height: 1.75; }
.privacy-section > a { display: inline-flex; align-items: center; gap: 8px; color: #b1f5f1; font-weight: 800; text-decoration: none; white-space: nowrap; }

.faq-section { padding-bottom: 112px; }
.faq-list { display: grid; max-width: 900px; gap: 10px; }
.faq-list details { border: 1px solid var(--kl-border); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(8, 25, 43, .045); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; color: var(--kl-navy-900); font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { color: var(--kl-turquoise-600); transition: transform var(--kl-transition); }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 22px 22px; color: var(--kl-muted); line-height: 1.75; }

.home-final-cta { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 24px; width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 44px 50px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; background: linear-gradient(125deg, #071320, #0d2940); box-shadow: var(--kl-shadow-lg); color: #fff; }
.cta-feather { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; background: rgba(67, 226, 220, .1); color: var(--kl-turquoise-400); font-size: 23px; }
.home-final-cta small { color: #8fdbd7; font-weight: 800; }
.home-final-cta h2 { margin: 4px 0 0; color: #fff; font-size: clamp(28px, 3.2vw, 42px); }

.site-footer { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(260px, 1fr); align-items: start; gap: 28px 70px; width: 100%; margin: 0; padding: 48px max(24px, calc((100% - 1160px) / 2)) 28px; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; background: #050d17; color: #aebdcb; }
.site-footer-main p { max-width: 420px; margin: 14px 0 0; color: #8092a4; font-size: 14px; line-height: 1.7; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.footer-brand img { width: 44px; height: 44px; object-fit: contain; }
.footer-brand span { display: grid; }
.footer-brand strong { font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 21px; }
.footer-brand small { color: #7990a3; font-size: 11px; }
.site-footer-links { align-content: start; justify-content: flex-end; gap: 12px 24px; padding-top: 10px; }
.site-footer-links a { color: #d5e0e9; }
.site-footer-brand { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); color: #718498; font-size: 12px; }

@media (max-width: 1040px) {
  .primary-nav { display: none; }
  .topbar { justify-content: space-between; }
  .hero-shell { grid-template-columns: 1fr 1fr; gap: 36px; }
  .demo-stage { grid-template-columns: 1fr; min-height: 430px; padding: 28px; }
  .demo-idea-card { display: none; }
  .demo-transform { position: absolute; z-index: 2; top: 36px; right: 28px; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .topbar { min-height: 80px; padding: 0 14px; }
  .brand { width: 200px; height: 70px; }
  .header-actions { gap: 6px; }
  .header-button { width: 42px; min-height: 42px; padding: 0; }
  .account-button { width: auto; max-width: 120px; padding: 0 10px; }
  .account-button span { display: inline; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stage { min-height: calc(100dvh - 80px); }
  .view { width: min(100% - 24px, 1160px); padding: 32px 0 64px; }
  #composer { width: calc(100% - 24px); padding-top: 24px; }
  .composer-card { padding-bottom: 28px; border-radius: 22px; }
  .composer-card > .card-kicker, .composer-card > h1, .composer-card > p, .composer-card > form { margin-inline: 18px; }
  .composer-card > .card-kicker { margin-top: 24px; }
  .wizard-progress { padding: 16px 12px; }
  .wizard-progress::before { top: 34px; right: calc(16.666% + 22px); left: calc(16.666% + 22px); }
  .wizard-progress li { justify-content: center !important; }
  .wizard-progress li > span { flex-basis: 34px; width: 34px; height: 34px; }
  .wizard-progress li > div { display: none; }
  .composer-card .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .composer-card .field.full { grid-column: auto; }
  .composer-card .form-actions .primary-button { width: 100%; min-width: 0; }
  #studio { width: calc(100% - 16px); padding-top: 18px; }
  .studio-card { padding: 15px 10px 18px; border-radius: 20px; }
  .studio-card > h1 { margin-inline: 4px; font-size: 34px; }
  .studio-card > .card-kicker { margin-inline: 4px; }
  .studio-workspace-bar { position: sticky; top: 84px; z-index: 16; display: block; margin-bottom: 11px; padding: 6px; overflow-x: auto; border-radius: 13px; scrollbar-width: none; }
  .studio-workspace-bar::-webkit-scrollbar { display: none; }
  .studio-mode-nav { width: max-content; flex-wrap: nowrap; }
  .studio-mode-nav button { min-height: 42px; white-space: nowrap; }
  .studio-live-state { display: none; }
  .studio-grid { grid-template-columns: 1fr; gap: 12px; }
  .selection-format-toolbar { position: relative; padding: 10px; border-radius: 13px; }
  .selection-toolbar-actions { flex-wrap: wrap; }
  .studio-paper-viewport { border-radius: 12px; }
  .toolbox { position: static; z-index: auto; max-height: none; margin-top: 4px; padding: 10px; overflow: visible; border-radius: 17px; box-shadow: var(--kl-shadow-sm); }
  .toolbox > h3 { display: none; }
  .toolbox-save-zone { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 12px; margin-bottom: 7px; padding: 9px; }
  .toolbox .studio-save-button { min-height: 44px; }
  .toolbox .studio-save-status { margin: 0 7px; white-space: nowrap; }
  .tool-group { margin-top: 6px; }
  .toolbox .tool-group-toggle { min-height: 44px; text-align: right; }
  .tool-group-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-group-content .typography-tools, .tool-group-content .paper-template-control, .tool-group-content .logo-size-tools { grid-column: 1 / -1; }
  .tool-group[data-tool-group="export"] .image-download-control { min-width: 0; align-self: start; }
  .tool-group[data-tool-group="export"] .image-download-control > button,
  .tool-group[data-tool-group="export"] #emailStudio { width: 100%; min-width: 0; height: 100%; margin: 0; padding-inline: 8px; font-size: 12px; line-height: 1.35; }
  #personal { width: calc(100% - 16px); padding-top: 18px; }
  .personal-page { min-height: 0; padding: 18px 12px 26px; border-radius: 20px; }
  .personal-page-header { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 18px 4px 20px; }
  .personal-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
  .personal-page-header h1 { font-size: 33px; }
  .personal-page-header p { font-size: 13px; line-height: 1.55; }
  .personal-logout-button { grid-column: 1 / -1; width: 100%; }
  .personal-summary { grid-template-columns: 1fr; gap: 8px; }
  .personal-summary article { min-height: 70px; padding: 13px; }
  .personal-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: visible; }
  .personal-tabs button { min-width: 0; min-height: 66px; flex-direction: column; gap: 5px; padding: 7px 4px; font-size: 11px; white-space: normal; }
  .personal-page-content { margin-top: 18px; }
  .personal-letters-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .personal-letters-heading .primary-button { width: 100%; }
  .personal-list { grid-template-columns: 1fr; }
  .saved-letter { grid-template-columns: 58px minmax(0, 1fr); padding: 14px; }
  .saved-letter-preview { width: 58px; height: 78px; padding: 10px 8px; }
  .saved-letter-copy strong { font-size: 16px; }
  .saved-letter-copy p { display: none; }
  .saved-letter-actions { flex-wrap: nowrap; }
  .saved-letter-actions button:first-child { min-width: 0; }
  .saved-letter-actions :is(.letter-download-button,.rename-letter-button,.delete-letter-button) { flex: 0 0 42px; width: 42px; }
  .personal-empty-state { min-height: 290px; padding: 28px 18px; }
  #home { width: 100%; padding: 0; }
  .home-content { padding-bottom: 48px; }
  .hero-shell { display: flex; width: min(100% - 28px, 620px); min-height: auto; flex-direction: column; gap: 44px; padding: 62px 0 72px; }
  .hero-card { width: 100%; text-align: center; }
  .home-view .eyebrow { margin-inline: auto; }
  .home-view .hero-card h1 { margin: 25px auto 19px; font-size: clamp(47px, 14vw, 68px); letter-spacing: -1.5px; }
  .home-view .hero-card > p { margin: 0 auto 28px; font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .start-orb, .hero-secondary-button { width: 100%; }
  .hero-trust-list { justify-content: center; gap: 9px 16px; }
  .hero-demo { width: 100%; max-width: 520px; }
  .demo-stage { min-height: 360px; padding: 25px; }
  .demo-letter-paper { min-height: 290px; padding: 37px 29px 28px; }
  .letter-types { width: calc(100% - 24px); margin: -42px auto 58px; padding: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .letter-types.collapsed { margin-top: -42px; margin-bottom: 0; }
  .type-card { min-height: 118px; padding: 15px; }
  .home-section { width: calc(100% - 32px); padding: 70px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2, .privacy-section h2, .home-final-cta h2 { font-size: clamp(32px, 10vw, 42px); }
  .section-heading-row { align-items: flex-start; flex-direction: column; }
  .process-grid, .examples-grid, .benefits-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: 218px; }
  .before-after-section { --before-after-base-padding:70px; --before-after-overlap:40px; width:calc(100% - 20px); padding:var(--before-after-base-padding) 16px; border-radius:28px; box-shadow:0 28px 58px rgba(7,24,39,.17),0 9px 22px rgba(7,24,39,.09),inset 0 1px rgba(255,255,255,.92); }
  .before-after-grid { grid-template-columns: 1fr; gap: 15px; }
  .comparison-arrow { margin-inline: auto; transform: rotate(-90deg); }
  .privacy-section { grid-template-columns: 58px 1fr; width: calc(100% - 32px); gap: 18px; padding: 28px 22px; }
  .privacy-icon { width: 54px; height: 54px; border-radius: 16px; font-size: 21px; }
  .privacy-section > a { grid-column: 1 / -1; justify-content: center; min-height: 46px; border: 1px solid rgba(67, 226, 220, .25); border-radius: 13px; }
  .home-final-cta { grid-template-columns: 1fr; width: calc(100% - 32px); padding: 34px 26px; text-align: center; }
  .cta-feather { margin-inline: auto; }
  .home-final-cta .primary-button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; gap: 24px; padding: 38px 22px 24px; }
  .site-footer-links { justify-content: flex-start; }
  .site-footer-brand { grid-column: 1; }
}

@media (max-width: 390px) {
  .brand { width: 176px; }
  .account-button { max-width: 96px; padding: 0 8px; }
  .home-view .hero-card h1 { font-size: 44px; }
  .letter-types { grid-template-columns: 1fr; }
  .demo-stage { padding: 18px; }
  .demo-letter-paper { padding-inline: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo, .demo-letter-paper, .process-grid li, .example-card { transform: none !important; }
}

/* Scroll choreography: replayed on every viewport entry and reversed on upward travel. */
.home-motion-ready .home-motion-section .home-motion-item {
  --motion-x: 0px;
  --motion-y: 30px;
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(var(--motion-x),var(--motion-y),0) scale(.975);
  transition: opacity .62s var(--kl-ease-premium), filter .62s var(--kl-ease-premium), transform .72s var(--kl-ease-premium);
  transition-delay: calc(var(--motion-order,0) * 75ms);
  will-change: opacity, transform;
}
.home-motion-ready .home-motion-section.motion-from-above .home-motion-item { --motion-y: -30px; }
.home-motion-ready .home-motion-section.is-motion-visible .home-motion-item {
  opacity: 1;
  filter: none;
  transform: none;
}
.home-motion-ready .home-motion-section.is-motion-settled .home-motion-item {
  transition-delay: 0ms;
  will-change: auto;
}
.home-motion-ready .before-after-section {
  opacity:.72;
  box-shadow:0 18px 42px rgba(7,24,39,.08),0 5px 14px rgba(7,24,39,.06),inset 0 1px rgba(255,255,255,.92);
  transform:translate3d(0,74px,0) scale(.965);
  transition:opacity .58s var(--kl-ease-premium),transform .82s cubic-bezier(.16,1,.3,1),box-shadow .82s var(--kl-ease-premium);
  will-change:opacity,transform,box-shadow;
}
.home-motion-ready .before-after-section.motion-from-above { transform:translate3d(0,-74px,0) scale(.965); }
.home-motion-ready .before-after-section.is-motion-visible {
  opacity:1;
  box-shadow:0 42px 90px rgba(7,24,39,.18),0 12px 30px rgba(7,24,39,.1),inset 0 1px rgba(255,255,255,.92);
  transform:translate3d(0,0,0) scale(1);
}
.home-motion-ready .before-after-section.is-motion-settled { will-change:auto; }
.home-motion-ready .process-section.is-motion-visible.is-motion-settled .process-grid > li:hover { transform:translateY(-5px); }
.home-motion-ready .benefits-section.is-motion-visible.is-motion-settled .benefits-grid > article:hover { transform:translateY(-3px); }
.home-motion-ready .home-final-cta.is-motion-visible.is-motion-settled .primary-button:hover { transform:translateY(-2px); }

/* Existing hero animation becomes scroll-aware instead of playing only once. */
.home-motion-ready .home-view.active .hero-card .eyebrow,
.home-motion-ready .home-view.active .hero-card h1,
.home-motion-ready .home-view.active .hero-card > p,
.home-motion-ready .home-view.active .hero-actions,
.home-motion-ready .home-view.active .hero-trust-list,
.home-motion-ready .home-view.active .hero-demo { animation: none; }
.home-motion-ready .hero-shell .hero-demo { --motion-x: -22px; --motion-y: 10px; }
.home-motion-ready .hero-shell.motion-from-above .hero-demo { --motion-y: -10px; }

/* The letter chooser unfolds as one polished sequence. */
.letter-types:not(.collapsed) .type-card { animation: kl-type-card-enter .55s var(--kl-ease-premium) backwards; }
.letter-types:not(.collapsed) .type-card:nth-of-type(2) { animation-delay:55ms; }
.letter-types:not(.collapsed) .type-card:nth-of-type(3) { animation-delay:110ms; }
.letter-types:not(.collapsed) .type-card:nth-of-type(4) { animation-delay:165ms; }
.letter-types:not(.collapsed) .type-card:nth-of-type(5) { animation-delay:220ms; }
.letter-types:not(.collapsed) .type-card:nth-of-type(6) { animation-delay:275ms; }
@keyframes kl-type-card-enter { from { opacity:0; transform:translateX(22px) scale(.97); } }

/* A living path connects the three steps; its origin follows scroll direction. */
.process-grid { position:relative; }
.process-grid::before {
  position:absolute;
  top:54px;
  right:calc(16.666% + 48px);
  left:calc(16.666% + 48px);
  z-index:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(21,199,195,.18),var(--kl-turquoise-500),rgba(21,199,195,.18));
  content:"";
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .9s .18s var(--kl-ease-premium);
}
.process-section.motion-from-above .process-grid::before { transform-origin:left; }
.process-section.is-motion-visible .process-grid::before { transform:scaleX(1); }
.home-motion-ready .process-grid > li { z-index:1; }
.process-section.is-motion-visible:not(.is-motion-settled) .process-grid > li > i { animation:kl-icon-arrive .55s calc(170ms + var(--motion-order,0) * 75ms) var(--kl-ease-premium) both; }
@keyframes kl-icon-arrive { 0% { transform:scale(.72) rotate(8deg); } 70% { transform:scale(1.08) rotate(-3deg); } }

/* Gallery entries keep a relaxed editorial rhythm, then straighten on interaction. */
.home-motion-ready .examples-section .gallery-letter.home-motion-item {
  opacity:0;
  filter:blur(6px);
  transform:translateX(var(--gallery-roll-x)) rotate(var(--gallery-roll-angle)) scale(.78);
  transition:opacity .62s var(--kl-ease-premium),filter .62s var(--kl-ease-premium),transform .92s cubic-bezier(.16,1,.3,1);
  transition-delay:140ms;
  will-change:opacity,filter,transform;
}
.home-motion-ready .examples-section .gallery-letter:nth-child(-n+3) { --gallery-roll-x:clamp(320px,58vw,900px); --gallery-roll-angle:38deg; }
.home-motion-ready .examples-section .gallery-letter:nth-child(n+4) { --gallery-roll-x:clamp(-900px,-58vw,-320px); --gallery-roll-angle:-38deg; }
.home-motion-ready .examples-section.is-motion-visible .gallery-letter.home-motion-item {
  opacity:1;
  filter:none;
  transform:none;
}
.home-motion-ready .examples-section.is-motion-settled .gallery-letter.home-motion-item { will-change:auto; }
.letter-gallery .gallery-letter:nth-child(odd) { --gallery-rest:rotate(-1.5deg) translateY(10px); }
.letter-gallery .gallery-letter:nth-child(even) { --gallery-rest:rotate(1.35deg) translateY(-7px); }
.letter-gallery .gallery-letter:nth-child(3n) { --gallery-rest:rotate(.6deg) translateY(17px); }
.letter-gallery .gallery-letter .gallery-a4 { transform:perspective(700px) rotateY(-2deg) var(--gallery-rest,none); }
.letter-gallery .gallery-letter:hover .gallery-a4,
.letter-gallery .gallery-letter:focus-visible .gallery-a4 { transform:perspective(700px) rotateY(0) translateY(-10px) scale(1.035); }

/* Different benefit directions create variety without changing the layout. */
.home-motion-ready .benefits-grid > article:nth-child(odd) { --motion-x:18px; }
.home-motion-ready .benefits-grid > article:nth-child(even) { --motion-x:-18px; }
.benefits-section.is-motion-visible:not(.is-motion-settled) .benefits-grid i,
.privacy-section.is-motion-visible:not(.is-motion-settled) .privacy-icon { animation:kl-icon-arrive .58s calc(180ms + var(--motion-order,0) * 70ms) var(--kl-ease-premium) both; }

/* FAQ and final CTA receive quiet, product-like reactions. */
.faq-list details[open] p { animation:kl-faq-open .28s var(--kl-ease-premium) both; }
.faq-list details[open] summary i { transform:rotate(45deg); }
@keyframes kl-faq-open { from { opacity:0; transform:translateY(-7px); } }
.home-final-cta.is-motion-visible:not(.is-motion-settled) .cta-document { animation:kl-document-settle .72s var(--kl-ease-premium) both; }
.home-final-cta.is-motion-visible:not(.is-motion-settled) .cta-seal { animation:kl-seal-pop .62s .32s var(--kl-ease-premium) both; }
@keyframes kl-document-settle { from { opacity:0; transform:translateY(24px) rotate(10deg) scale(.9); } }
@keyframes kl-seal-pop { 0% { opacity:0; transform:scale(.55) rotate(-25deg); } 72% { transform:scale(1.08) rotate(-5deg); } }

@media (max-width:760px) {
  .home-motion-ready .home-motion-section .home-motion-item { --motion-y:18px; --motion-x:0px; transition-delay:calc(var(--motion-order,0) * 52ms); }
  .home-motion-ready .home-motion-section.motion-from-above .home-motion-item { --motion-y:-18px; }
  .process-grid::before { top:82px; right:50%; bottom:82px; left:auto; width:2px; height:auto; transform:scaleY(0); transform-origin:top; }
  .process-section.motion-from-above .process-grid::before { transform-origin:bottom; }
  .process-section.is-motion-visible .process-grid::before { transform:scaleY(1); }
  .letter-gallery .gallery-letter:nth-child(n) { --gallery-rest:rotate(0deg) translateY(0); }
  .home-motion-ready .examples-section .gallery-letter:nth-child(odd) { --gallery-roll-x:78vw; --gallery-roll-angle:24deg; }
  .home-motion-ready .examples-section .gallery-letter:nth-child(even) { --gallery-roll-x:-78vw; --gallery-roll-angle:-24deg; }
}

@media (prefers-reduced-motion:reduce) {
  .before-after-section { opacity:1 !important; transform:none !important; transition:none !important; }
  .home-motion-section .home-motion-item { opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; animation:none !important; }
  .benefits-section .benefits-grid > article { animation:none !important; }
  .benefits-section.is-motion-visible .benefits-grid > article { border-color:var(--kl-turquoise-500); background:#f1fbfa; box-shadow:0 14px 30px rgba(8,87,95,.12); transform:none !important; }
  .process-grid::before { transform:none !important; transition:none !important; }
  .examples-section .gallery-letter { opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
  .letter-types:not(.collapsed) .type-card,
  .faq-list details[open] p,
  .home-final-cta .cta-document,
  .home-final-cta .cta-seal { animation:none !important; }
}

/* KingLetter WOW layer — visual-only enhancements, isolated from document logic. */
:root {
  --kl-ease-premium: cubic-bezier(.22, 1, .36, 1);
  --kl-gold-soft: #e8cf91;
}

button, a, summary, .type-card, .gallery-letter {
  -webkit-tap-highlight-color: transparent;
}

button:active, .primary-button:active, .section-action:active {
  transform: translateY(1px) scale(.985);
}

.hero-shell {
  isolation: isolate;
}

.hero-shell::after {
  position: absolute;
  inset: 8% -12% 2%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 72% 46%, rgba(71, 233, 222, .13), transparent 31%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 9px);
  content: "";
  pointer-events: none;
}

.hero-ambient-type {
  position: absolute;
  z-index: -1;
  color: rgba(255,255,255,.035);
  font-family: "Frank Ruhl Libre", Heebo, serif;
  font-weight: 800;
  pointer-events: none;
  animation: hero-ambient-drift 14s ease-in-out infinite alternate;
}

.hero-ambient-type-a { top: -42px; right: -55px; font-size: 150px; transform: rotate(8deg); }
.hero-ambient-type-b { right: 68%; bottom: -80px; font-size: 78px; animation-delay: -7s; }
@keyframes hero-ambient-drift { to { transform: translate3d(-8px, 13px, 0) rotate(4deg); } }

.home-view.active .hero-card .eyebrow { animation: hero-copy-enter .65s var(--kl-ease-premium) both; }
.home-view.active .hero-card h1 { animation: hero-copy-enter .72s .06s var(--kl-ease-premium) both; }
.home-view.active .hero-card > p { animation: hero-copy-enter .72s .12s var(--kl-ease-premium) both; }
.home-view.active .hero-actions { animation: hero-actions-enter .72s .18s var(--kl-ease-premium) both; }
.home-view.active .hero-trust-list { animation: hero-copy-enter .72s .24s var(--kl-ease-premium) both; }
.home-view.active .hero-demo { animation: hero-demo-enter .82s .08s var(--kl-ease-premium) both; }
.home-view.active .start-orb i { animation: hero-feather-write .82s .28s var(--kl-ease-premium) both; }
@keyframes hero-copy-enter { from { opacity: 0; transform: translateY(15px); } }
@keyframes hero-actions-enter { from { opacity: 0; transform: translateY(22px); } }
@keyframes hero-demo-enter { from { opacity: 0; filter: blur(7px); transform: translateY(16px) scale(.975); } }
@keyframes hero-feather-write { 0% { opacity: 0; transform: translate(12px,-7px) rotate(18deg); } 65% { transform: translate(-4px,2px) rotate(-8deg); } 100% { opacity: 1; transform: none; } }

/* A4 product demonstration */
.hero-demo {
  contain: paint;
  isolation: isolate;
  box-shadow: 0 44px 110px rgba(0,0,0,.42), 0 0 72px rgba(21,199,195,.08), inset 0 1px rgba(255,255,255,.13);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-demo::after {
  position: absolute;
  inset: 18% 16% 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(67,226,220,.17);
  filter: blur(70px);
  content: "";
}

.demo-a4-stage {
  display: grid;
  grid-template-columns: 150px minmax(250px, 1fr);
  align-items: center;
  gap: clamp(18px,3vw,34px);
  min-height: 500px;
  padding: 28px clamp(24px,4vw,40px);
}

.demo-state-tabs {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  color: #8193a6;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.demo-state-tabs li {
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .25s ease, transform .25s ease;
}

.demo-state-tabs li::after {
  width: 28px;
  height: 1px;
  margin-inline-start: auto;
  background: rgba(255,255,255,.12);
  content: "";
  transition: width .3s ease, background-color .3s ease;
}

.demo-state-tabs li > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  font-size: 10px;
}

.demo-state-tabs li.is-active { color: #c6fffb; transform: translateX(-4px); }
.demo-state-tabs li.is-active::after { width: 42px; background: var(--kl-turquoise-400); }
.demo-state-tabs li.is-active > span { border-color: var(--kl-turquoise-400); background: rgba(67,226,220,.14); color: var(--kl-turquoise-400); }

.demo-a4-shell {
  position: relative;
  width: min(100%, 330px);
  margin-inline: auto;
  perspective: 1200px;
}

.demo-a4-shell::before {
  position: absolute;
  inset: 8% 6% -5%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  filter: blur(28px);
  content: "";
}

.demo-a4-paper {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 4px;
  background: #fffefb;
  box-shadow: 0 28px 58px rgba(0,0,0,.35);
  color: #223248;
  contain: paint;
  backface-visibility: hidden;
  transform: rotateY(-3deg) rotateZ(-.6deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .7s var(--kl-ease-premium), background .7s ease;
}

.demo-a4-layer {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  padding: 15% 12%;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transform: translateY(12px) scale(.985);
  will-change: opacity, transform;
  transition: opacity .45s ease, transform .55s var(--kl-ease-premium), visibility 0s linear .55s;
}

.demo-a4-layer small { color: var(--kl-turquoise-600); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.demo-a4-layer > strong { margin: 12% 0 5%; font-family: "Frank Ruhl Libre", Heebo, serif; font-size: clamp(16px,2vw,21px); }
.demo-a4-layer > p { margin: 0; font-size: clamp(10px,1.15vw,13px); line-height: 2; }
.demo-a4-layer .demo-signature { margin-top: 10%; font-size: 10px; text-align: left; }
.demo-a4-stage[data-demo-state="idea"] [data-demo-panel="idea"],
.demo-a4-stage[data-demo-state="written"] [data-demo-panel="written"],
.demo-a4-stage[data-demo-state="designed"] [data-demo-panel="designed"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.demo-a4-idea { align-content: center; background: linear-gradient(160deg,#fff,#f5f8fa); }
.demo-a4-idea::before { position: absolute; inset: 7%; border: 1px dashed #cbd7e0; border-radius: 8px; content: ""; }
.demo-a4-idea .demo-label { position: relative; color: var(--kl-turquoise-600); }
.demo-a4-idea p { position: relative; padding: 7%; border-radius: 9px; background: #f2f6f8; color: #42566a; font-size: 13px; line-height: 1.7; }
.demo-idea-cursor { position: absolute; right: 20%; bottom: 29%; width: 1px; height: 18px; background: var(--kl-turquoise-600); animation: caret-blink .7s steps(1) infinite; }
.demo-a4-written { background: linear-gradient(145deg,#fffefb,#fbf7ee); }
.demo-a4-designed { background: radial-gradient(circle at 50% 43%,rgba(255,255,255,.98) 0 35%,rgba(255,252,241,.9) 58%,transparent 77%),linear-gradient(145deg,#f8efd8,#fffdf7 46%,#e7d3a8); }
.demo-a4-designed::before, .demo-a4-designed::after { position: absolute; inset: 4%; border: 1px solid rgba(177,133,63,.5); border-radius: 45% 3% 43% 4%; content: ""; pointer-events: none; }
.demo-a4-designed::after { inset: 6%; border-color: rgba(199,161,90,.3); border-radius: 3% 42% 4% 44%; }
.demo-a4-designed small { color:#9a7132; }
.demo-design-ornament { position: absolute; top: 5%; left: 7%; color: #ad8642; font-size: 18px; filter:drop-shadow(0 5px 12px rgba(142,98,31,.16)); transform: rotate(-16deg); }
.demo-a4-stage[data-demo-theme="official"] .demo-a4-designed { background:radial-gradient(circle at 50% 42%,#fff 0 39%,rgba(248,251,255,.94) 62%,transparent 79%),linear-gradient(145deg,#cdd9e8,#fff 48%,#aebfd3); }
.demo-a4-stage[data-demo-theme="official"] .demo-a4-designed::before { inset:5%; border-color:rgba(48,78,117,.5); border-radius:2px; }
.demo-a4-stage[data-demo-theme="official"] .demo-a4-designed::after { inset:7%; border-color:rgba(48,78,117,.2); border-radius:2px; }
.demo-a4-stage[data-demo-theme="official"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="official"] .demo-a4-designed small { color:#345a86; }
.demo-a4-stage[data-demo-theme="blessing"] .demo-a4-designed { background:radial-gradient(circle at 50% 45%,#fff 0 38%,rgba(255,250,250,.9) 63%,transparent 79%),linear-gradient(145deg,#f4dfe2,#fffaf5 48%,#e4c5ba); }
.demo-a4-stage[data-demo-theme="blessing"] .demo-a4-designed::before { border-color:rgba(177,105,111,.45); border-radius:48% 5% 47% 6%; }
.demo-a4-stage[data-demo-theme="blessing"] .demo-a4-designed::after { border-color:rgba(199,161,90,.28); border-radius:6% 48% 7% 46%; }
.demo-a4-stage[data-demo-theme="blessing"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="blessing"] .demo-a4-designed small { color:#aa696f; }
.demo-a4-stage[data-demo-theme="friend"] .demo-a4-designed { background:radial-gradient(circle at 48% 42%,#fff 0 39%,rgba(250,253,251,.91) 64%,transparent 80%),linear-gradient(145deg,#d4e8df,#fffdf8 47%,#c9d9ee); }
.demo-a4-stage[data-demo-theme="friend"] .demo-a4-designed::before { border-color:rgba(71,119,103,.44); border-radius:38% 5% 34% 6%; }
.demo-a4-stage[data-demo-theme="friend"] .demo-a4-designed::after { border-color:rgba(85,119,159,.23); border-radius:5% 37% 6% 36%; }
.demo-a4-stage[data-demo-theme="friend"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="friend"] .demo-a4-designed small { color:#477767; }
.demo-a4-stage[data-demo-theme="wishes"] .demo-a4-designed { background:radial-gradient(circle at 50% 43%,#fff 0 37%,rgba(255,253,247,.91) 63%,transparent 79%),linear-gradient(145deg,#e7def1,#fffdf5 46%,#eedaa8); }
.demo-a4-stage[data-demo-theme="wishes"] .demo-a4-designed::before { border-color:rgba(123,91,151,.38); border-radius:50% 4% 48% 5%; }
.demo-a4-stage[data-demo-theme="wishes"] .demo-a4-designed::after { border-color:rgba(199,161,90,.34); border-radius:4% 50% 5% 48%; }
.demo-a4-stage[data-demo-theme="wishes"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="wishes"] .demo-a4-designed small { color:#806095; }
.demo-a4-stage[data-demo-theme="invitation"] .demo-a4-designed { background:radial-gradient(circle at 50% 43%,#fff 0 38%,rgba(251,254,249,.92) 63%,transparent 79%),linear-gradient(145deg,#cfe3d1,#fffdf5 48%,#d9ca9f); }
.demo-a4-stage[data-demo-theme="invitation"] .demo-a4-designed::before { border-color:rgba(74,112,79,.48); border-radius:45% 3% 45% 3%; }
.demo-a4-stage[data-demo-theme="invitation"] .demo-a4-designed::after { border-color:rgba(163,127,60,.29); border-radius:3% 45% 3% 45%; }
.demo-a4-stage[data-demo-theme="invitation"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="invitation"] .demo-a4-designed small { color:#58785b; }
.demo-a4-stage[data-demo-theme="salary"] .demo-a4-designed { background:radial-gradient(circle at 50% 43%,#fff 0 40%,rgba(249,251,253,.95) 64%,transparent 80%),linear-gradient(145deg,#cad4df,#fff 48%,#d6c394); }
.demo-a4-stage[data-demo-theme="salary"] .demo-a4-designed::before { border-color:rgba(35,57,82,.5); border-radius:3px; }
.demo-a4-stage[data-demo-theme="salary"] .demo-a4-designed::after { inset:6.5%; border-color:rgba(177,133,63,.34); border-radius:3px; }
.demo-a4-stage[data-demo-theme="salary"] .demo-design-ornament, .demo-a4-stage[data-demo-theme="salary"] .demo-a4-designed small { color:#263d58; }
.demo-a4-stage[data-demo-state="designed"] .demo-a4-paper { transform: rotateY(0) rotateZ(.45deg) translateY(-2px); }
.demo-a4-written p.is-writing::after { display:inline-block; width:1px; height:1em; margin-inline-start:2px; background:var(--kl-turquoise-600); content:""; vertical-align:-.15em; animation:caret-blink .7s steps(1) infinite; }
.demo-status b { color: inherit; font: inherit; }

/* Letter cards reveal a branded paper preview. */
.type-card { position: relative; overflow: hidden; perspective: 700px; }
.type-card-front, .type-card-preview { position: absolute; inset: 0; padding: 18px; backface-visibility: hidden; transition: opacity .28s ease, transform .38s var(--kl-ease-premium); }
.type-card-front { display: block; transform: rotateX(0); }
.type-card-preview { display: grid; align-content: center; gap: 5px; margin: 9px; padding: 15px; border: 1px solid rgba(232,207,145,.55); border-radius: 9px; background: #fffdf7; color: #263b50; opacity: 0; transform: rotateX(-14deg) translateY(15px); }
.type-card-preview em { color: #8d6b34; font-family: "Frank Ruhl Libre", Heebo, serif; font-size: 14px; font-style: normal; font-weight: 800; }
.type-card-preview > span { width: 100%; height: 3px; border-radius: 2px; background: #dce2e3; }
.type-card-preview > span:nth-of-type(2) { width: 88%; }
.type-card-preview > span:nth-of-type(3) { width: 62%; }
.type-card-preview strong { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: var(--kl-turquoise-600); font-size: 11px; }
.type-card:hover .type-card-front, .type-card:focus-visible .type-card-front, .type-card.is-previewing .type-card-front { opacity: 0; transform: rotateX(12deg) translateY(-12px); }
.type-card:hover .type-card-preview, .type-card:focus-visible .type-card-preview, .type-card.is-previewing .type-card-preview { opacity: 1; transform: none; }

/* Six-document gallery */
.letter-gallery { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(12px,1.6vw,20px); align-items: end; }
.gallery-letter { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--kl-navy-900); text-align: right; }
.gallery-a4 { position: relative; display: grid; width: 100%; aspect-ratio: 210 / 297; align-content: start; gap: 5px; padding: 18% 12% 12%; overflow: hidden; border: 1px solid #e5dfd2; border-radius: 4px; background: #fffef9; box-shadow: 0 16px 30px rgba(23,39,55,.13); transform: perspective(700px) rotateY(-2deg); transition: transform .28s var(--kl-ease-premium), box-shadow .28s ease; }
.gallery-letter:hover .gallery-a4, .gallery-letter:focus-visible .gallery-a4 { transform: perspective(700px) rotateY(0) translateY(-10px) scale(1.025); box-shadow: 0 26px 46px rgba(23,39,55,.22); }
.gallery-a4::before { position:absolute; inset:5%; border:1px solid var(--gallery-accent,rgba(21,199,195,.3)); border-radius:3px; content:""; }
.gallery-a4 i { position:relative; margin-bottom:12%; color:var(--gallery-accent,#b1853f); font-size:18px; text-align:center; }
.gallery-a4 strong { position:relative; color:#26394c; font-family:"Frank Ruhl Libre",Heebo,serif; font-size:clamp(11px,1.2vw,15px); text-align:center; }
.gallery-a4 > span { position:relative; width:100%; height:3px; border-radius:2px; background:rgba(73,88,101,.2); }
.gallery-a4 > span:nth-of-type(2) { width:89%; }
.gallery-a4 > span:nth-of-type(3) { width:67%; }
.gallery-a4 small { position:relative; align-self:end; margin-top:auto; color:#73808e; font-size:8px; text-align:left; }
.gallery-a4.gallery-a4-image { display:block; padding:0; background:#fff; }
.gallery-a4.gallery-a4-image::before { display:none; }
.gallery-a4.gallery-a4-image img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-letter > b { display:block; margin-top:15px; font-family:"Frank Ruhl Libre",Heebo,serif; font-size:17px; }
.gallery-letter > em { display:block; margin-top:2px; color:var(--kl-muted); font-size:11px; font-style:normal; }
.gallery-birthday { --gallery-accent:#bd7981; }
.gallery-appreciation { --gallery-accent:#b58a3f; }
.gallery-official { --gallery-accent:#3d648f; }
.gallery-invitation { --gallery-accent:#668d73; }
.gallery-gratitude { --gallery-accent:#ae7087; }
.gallery-business { --gallery-accent:#168d93; }
.gallery-birthday .gallery-a4 { background:radial-gradient(circle at 50% 12%,#fff 0 24%,transparent 43%),linear-gradient(150deg,#fff4f4,#fffdfa); }
.gallery-appreciation .gallery-a4 { background:linear-gradient(145deg,#fffef8,#f8f0dc); }
.gallery-official .gallery-a4 { background:linear-gradient(145deg,#f8fbff,#fff); }
.gallery-invitation .gallery-a4 { background:linear-gradient(145deg,#f0f8f1,#fffdf7); }
.gallery-gratitude .gallery-a4 { background:linear-gradient(145deg,#fff6f9,#fff); }
.gallery-business .gallery-a4 { background:linear-gradient(145deg,#effbfa,#fff); }

.letter-showcase-modal { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .2s ease; }
.letter-showcase-modal[hidden] { display:none; }
.letter-showcase-modal.is-open { opacity:1; }
.showcase-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:rgba(3,11,20,.82); backdrop-filter:blur(12px); }
.showcase-dialog { position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,420px) minmax(260px,340px); align-items:center; gap:42px; width:min(860px,100%); max-height:calc(100dvh - 48px); padding:34px; overflow:auto; border:1px solid rgba(255,255,255,.15); border-radius:28px; background:linear-gradient(145deg,#0a1b2b,#102c42); box-shadow:0 38px 100px rgba(0,0,0,.52); transform:translateY(14px) scale(.98); transition:transform .25s var(--kl-ease-premium); }
.letter-showcase-modal.is-open .showcase-dialog { transform:none; }
.showcase-close { position:absolute; top:14px; left:16px; z-index:2; width:42px; height:42px; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font-size:25px; }
.showcase-expand { position:absolute; top:14px; left:68px; z-index:3; display:grid; width:42px; height:42px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font-size:16px; transition:background-color .2s ease,border-color .2s ease,transform .2s ease; }
.showcase-expand:hover,.showcase-expand:focus-visible { border-color:rgba(67,226,220,.7); background:rgba(67,226,220,.16); color:#b9fffa; transform:translateY(-1px); }
.showcase-a4 { position:relative; display:grid; aspect-ratio:210/297; align-content:start; gap:9px; padding:17% 13%; overflow:hidden; border-radius:5px; background:#fffdf8; box-shadow:0 30px 60px rgba(0,0,0,.38); }
.showcase-a4.gallery-birthday { background:radial-gradient(circle at 50% 12%,#fff 0 24%,transparent 43%),linear-gradient(150deg,#fff4f4,#fffdfa); }
.showcase-a4.gallery-appreciation { background:linear-gradient(145deg,#fffef8,#f8f0dc); }
.showcase-a4.gallery-official { background:linear-gradient(145deg,#f8fbff,#fff); }
.showcase-a4.gallery-invitation { background:linear-gradient(145deg,#f0f8f1,#fffdf7); }
.showcase-a4.gallery-gratitude { background:linear-gradient(145deg,#fff6f9,#fff); }
.showcase-a4.gallery-business { background:linear-gradient(145deg,#effbfa,#fff); }
.showcase-a4.showcase-has-image { display:block; padding:0; background:#fff; }
.showcase-a4.showcase-has-image::before { display:none; }
.showcase-a4 > .gallery-example-image { display:block; width:100%; height:100%; object-fit:cover; }
.showcase-a4::before { position:absolute; inset:5%; border:1px solid var(--gallery-accent,rgba(21,199,195,.35)); content:""; }
.showcase-a4 i,.showcase-a4 strong,.showcase-a4 span,.showcase-a4 small { position:relative; }
.showcase-a4 i { margin-bottom:8%; color:var(--gallery-accent,#b1853f); font-size:28px; text-align:center; }
.showcase-a4 strong { font-family:"Frank Ruhl Libre",Heebo,serif; font-size:25px; text-align:center; }
.showcase-a4 > span { height:5px; border-radius:3px; background:#d9dfe2; }
.showcase-a4 > span:nth-of-type(2){width:88%;}.showcase-a4 > span:nth-of-type(3){width:64%;}
.showcase-a4 small { margin-top:auto; color:#647386; text-align:left; }
.showcase-copy { color:#dce7f1; }
.showcase-copy > span { color:var(--kl-turquoise-400); font-size:12px; font-weight:900; }
.showcase-copy h2 { margin:8px 0 12px; color:#fff; font-family:"Frank Ruhl Libre",Heebo,serif; font-size:42px; }
.showcase-copy p { color:#b7c6d4; line-height:1.8; }
.showcase-copy .primary-button { margin-top:18px; }
body.showcase-open { overflow:hidden; }

/* A second enlargement level: the example becomes a complete, viewport-sized A4 page. */
.letter-showcase-modal.is-page-view { padding:0; background:#030b14; }
.letter-showcase-modal.is-page-view .showcase-backdrop { background:radial-gradient(circle at 50% 45%,rgba(29,66,91,.42),rgba(2,8,15,.96) 72%); backdrop-filter:blur(18px); }
.letter-showcase-modal.is-page-view .showcase-dialog { display:grid; grid-template-columns:1fr; grid-template-rows:1fr; width:100%; height:100dvh; max-height:none; place-items:center; padding:12px; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }
.letter-showcase-modal.is-page-view .showcase-a4 { grid-column:1; grid-row:1; width:min(calc(100vw - 24px),calc(70.71dvh - 18px)); height:auto; max-width:none; margin:0; align-self:center; justify-self:center; box-shadow:0 36px 100px rgba(0,0,0,.62); transform:none; }
.letter-showcase-modal.is-page-view .showcase-copy { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.letter-showcase-modal.is-page-view .showcase-close,.letter-showcase-modal.is-page-view .showcase-expand { position:fixed; top:max(14px,env(safe-area-inset-top)); background:rgba(5,18,30,.82); backdrop-filter:blur(12px); }

/* One draggable before/after sheet */
.comparison-stage { position:relative; max-width:920px; margin-inline:auto; }
.comparison-document { position:relative; min-height:420px; overflow:hidden; border:1px solid #ded8cc; border-radius:26px; background:#fffdf8; box-shadow:0 24px 60px rgba(20,37,55,.14); }
.comparison-document::before { position:absolute; inset:18px; z-index:3; border:1px solid rgba(177,133,63,.22); border-radius:18px; content:""; pointer-events:none; }
.comparison-layer { position:absolute; inset:0; padding:clamp(42px,7vw,72px); }
.comparison-after { background:radial-gradient(circle at 48% 44%,#fff 0 36%,rgba(255,253,247,.86) 64%,rgba(228,242,237,.75)); }
.comparison-after h3 { margin:22px 0 12px; color:var(--kl-navy-900); font-family:"Frank Ruhl Libre",Heebo,serif; font-size:29px; }
.comparison-after p { max-width:690px; color:#3d4d60; font-size:18px; line-height:2; }
.comparison-after small { display:block; margin-top:24px; color:#657588; font-weight:700; text-align:left; }
.comparison-before { width:100%; overflow:hidden; border-left:0; background:#eef3f5; color:#657587; clip-path:inset(0 calc(100% - var(--comparison-reveal)) 0 0); will-change:clip-path; }
.comparison-before > * { width:min(680px,calc(100vw - 150px)); }
.comparison-before p { margin-top:90px; padding:24px; border:1px dashed #b7c4ce; border-radius:14px; background:#fff; font-size:19px; line-height:1.75; }
.comparison-handle { position:absolute; top:50%; left:clamp(24px,var(--comparison-reveal),calc(100% - 24px)); z-index:5; display:grid; width:48px; height:48px; place-items:center; border:4px solid #fff; border-radius:50%; background:var(--kl-navy-900); color:var(--kl-turquoise-400); box-shadow:0 8px 24px rgba(7,22,36,.25); transform:translate(-50%,-50%); pointer-events:none; }
.comparison-range-label { position:absolute; inset:0; z-index:7; }
.comparison-range-label input { width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }

/* Lighter, clearly separated final call to action. */
.home-final-cta { position:relative; grid-template-columns:92px 1fr auto; overflow:hidden; border-color:#ddd5c4; background:linear-gradient(125deg,#fffef9,#f7f2e7); color:var(--kl-navy-900); box-shadow:0 24px 60px rgba(20,37,55,.13); }
.home-final-cta::before { position:absolute; inset:-65% auto auto -7%; width:280px; height:280px; border-radius:50%; background:rgba(21,199,195,.09); content:""; }
.home-final-cta h2 { color:var(--kl-navy-950); }
.home-final-cta small { color:var(--kl-turquoise-600); }
.cta-document { position:relative; display:grid; width:78px; aspect-ratio:210/297; align-content:start; gap:5px; padding:17px 12px; border:1px solid #ddd3c0; border-radius:4px; background:#fff; box-shadow:0 13px 25px rgba(24,39,52,.14); transform:rotate(3deg); }
.cta-document i { margin-bottom:6px; color:var(--kl-gold-500); text-align:center; }
.cta-document > span { height:3px; border-radius:2px; background:#dbe1e3; }
.cta-document > span:nth-of-type(2){width:88%;}.cta-document > span:nth-of-type(3){width:66%;}
.cta-document b { width:22px; height:3px; margin-top:auto; margin-inline-start:auto; background:#9db0b9; }
.cta-seal { position:absolute; left:19px; bottom:-18px; display:grid; width:62px; height:62px; place-items:center; border:4px double #f2e2b8; border-radius:50%; background:#b78b3e; color:#fff6dc; box-shadow:0 8px 18px rgba(116,80,22,.2); transform:rotate(-9deg); }

/* Wizard transition and progress fill. */
.wizard-progress::after { position:absolute; top:43px; right:calc(16.666% + 40px); z-index:0; width:0; height:2px; background:var(--kl-turquoise-500); content:""; transition:width .45s var(--kl-ease-premium); }
.composer-card.writing-step .wizard-progress::after { width:calc(33.333% - 8px); }
.composer-card.identity-step .wizard-progress::after { width:calc(66.666% - 8px); }
.wizard-progress .is-complete > span { font-size:0; }
.wizard-progress .is-complete > span { position:relative; line-height:1; }
.wizard-progress .is-complete > span::after { position:absolute; inset:0; display:grid; place-items:center; content:"✓"; font-size:14px; font-weight:900; line-height:1; }
.composer-card.is-stage-transitioning .form-grid { animation:kl-stage-slide .34s var(--kl-ease-premium) both; }
@keyframes kl-stage-slide { from { opacity:0; transform:translateX(18px); } }

/* Professional editor viewport controls. */
.studio-workspace-bar { position:relative; }
.studio-mode-nav button, .studio-view-controls button { position:relative; display:grid; width:42px; height:42px; min-height:42px; place-items:center; padding:0; }
.studio-mode-nav button i { font-size:15px; }
.studio-mode-nav button.is-active, .studio-mode-nav button[aria-current="true"] { background:var(--kl-turquoise-100); color:var(--kl-turquoise-600); box-shadow:inset 0 0 0 1px rgba(21,199,195,.28),0 0 0 3px rgba(21,199,195,.08); }
.studio-view-controls { display:flex; align-items:center; gap:4px; }
.studio-view-controls button { border:0; border-radius:10px; background:transparent; color:#607185; }
.studio-view-controls button:hover, .studio-view-controls button:focus-visible, .studio-view-controls button[aria-pressed="true"] { background:var(--kl-turquoise-100); color:var(--kl-turquoise-600); }
.studio-view-controls output { min-width:48px; color:#607185; font-size:11px; font-weight:900; text-align:center; }
[data-tooltip]::after { position:absolute; top:calc(100% + 8px); right:50%; z-index:30; padding:6px 9px; border-radius:7px; background:#071828; color:#fff; content:attr(data-tooltip); font-size:10px; font-weight:700; opacity:0; pointer-events:none; transform:translate(50%,-3px); transition:opacity .16s ease,transform .16s ease; white-space:nowrap; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity:1; transform:translate(50%,0); }
.studio-paper-viewport { --studio-view-zoom:100%; zoom:var(--studio-view-zoom); transition:zoom .2s ease; }
.studio-paper-viewport.is-capturing-paper { zoom:100% !important; }
#studio.studio-preview-mode .studio-mode-nav, #studio.studio-preview-mode .selection-format-toolbar, #studio.studio-preview-mode .toolbox, #studio.studio-preview-mode .ai-review-notice, #studio.studio-preview-mode .background-next-step, #studio.studio-preview-mode .card-kicker, #studio.studio-preview-mode #studioTitle { display:none !important; }
#studio.studio-preview-mode .studio-grid { grid-template-columns:minmax(0,1fr) 270px; }
#studio.studio-preview-mode .studio-letter-column { grid-column:1; }
#studio.studio-preview-mode .studio-workspace-bar { width:max-content; margin-inline:auto 0; }
@media(max-width:760px) { #studio.studio-preview-mode .studio-grid { grid-template-columns:1fr; } }
.studio-paper.is-revealing-background { animation:king-background-reveal .86s var(--kl-ease-premium) both; }
.studio-paper.is-revealing-background .letter-safe-zone { animation:king-text-settle .75s .18s var(--kl-ease-premium) both; }
@keyframes king-background-reveal { from { opacity:.45; clip-path:inset(0 0 100% 0); filter:saturate(.65); } to { opacity:1; clip-path:inset(0); filter:none; } }
@keyframes king-text-settle { from { opacity:0; transform:translateY(12px); } }

/* Quiet save-state language. */
.studio-save-status { display:flex; align-items:center; justify-content:center; gap:7px; }
.studio-save-status::before { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#95a2ae; content:""; }
.studio-save-status[data-save-state="saving"]::before { border:2px solid #b8c5ce; border-top-color:var(--kl-turquoise-600); background:transparent; animation:kl-save-spin .7s linear infinite; }
.studio-save-status[data-save-state="saved"]::before { background:#2ea56d; box-shadow:0 0 0 4px rgba(46,165,109,.1); }
.studio-save-status[data-save-state="dirty"]::before { background:#98a3ad; }
@keyframes kl-save-spin { to { transform:rotate(360deg); } }

/* Personal library and credits */
.personal-summary .personal-credit-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:13px; }
.credit-ring { --credit-progress:0deg; display:grid; width:58px; height:58px; place-items:center; border-radius:50%; background:conic-gradient(var(--kl-turquoise-500) var(--credit-progress),#dce9e8 0); }
.credit-ring > span { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:#fff; color:var(--kl-gold-500); }
.personal-credit-copy { min-width:0; }
.personal-credit-copy > span { display:block; margin-top:3px; color:#5f7284; font-size:10px; line-height:1.35; }
#personalCreditExpand { align-self:center; min-height:34px; padding:0 10px; border:1px solid #adddd9; border-radius:9px; background:#fff; color:var(--kl-turquoise-600); font-size:10px; font-weight:900; white-space:nowrap; }
.saved-letter-preview { isolation:isolate; padding:0; background:#fffef9; }
.saved-letter-preview::after { display:none; }
.saved-letter-preview-image { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:.92; }
.saved-letter-preview-overlay { position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.54); }
.saved-letter-preview-content { display:grid; width:76%; gap:3px; margin:auto; color:#26384b; text-align:right; }
.saved-letter-preview-content strong { display:block; overflow:hidden; font-family:"Frank Ruhl Libre",Heebo,serif; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.saved-letter-preview-content span { width:100%; height:2px; background:rgba(45,60,72,.34); }
.saved-letter-preview-content span:last-child { width:68%; }
.saved-letter-preview-draft::before { position:absolute; top:5px; right:5px; z-index:2; padding:2px 4px; border-radius:4px; background:#fff5d8; color:#8a652a; content:"טיוטה"; font-size:5px; font-weight:900; }

/* Plan hierarchy while retaining existing price and purchase logic. */
.plan-card { overflow:visible; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.plan-card:hover { transform:translateY(-4px); box-shadow:0 21px 44px rgba(17,42,62,.13); }
.plan-fit-label { display:inline-flex; align-items:center; width:max-content; max-width:100%; margin-top:8px; padding:4px 8px; border-radius:999px; background:#eef7f6; color:#39706f; font-size:10px; font-weight:800; }
.plan-card .plan-minimum { margin-top:15px; }
.plan-card .plan-minimum strong { font-size:14px; font-weight:800; }
.plan-card .plan-price strong { font-size:34px; letter-spacing:-.7px; }
.plan-card.featured { transform:translateY(-5px); }
.plan-card.featured:hover { transform:translateY(-8px); }
.plan-card .plan-saving { width:max-content; max-width:100%; border-radius:999px; }

/* A consistent small brand-icon vocabulary. */
.process-grid li > i, .benefits-grid i, .example-icon, .summary-icon, .privacy-icon {
  position:relative;
}
.process-grid li > i::after, .summary-icon::after {
  position:absolute;
  inset:-4px;
  border:1px solid rgba(21,199,195,.11);
  border-radius:inherit;
  content:"";
  transform:rotate(7deg);
}

/* A half-second spotlight makes the three-step process read as a live sequence. */
.process-grid li > i,
.process-grid li .process-number,
.process-grid li h3 { transition:color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.process-grid li.is-process-active,
.home-motion-ready .process-section.is-motion-visible .process-grid > li.is-process-active {
  z-index:3;
  border-color:var(--kl-turquoise-500);
  background:linear-gradient(145deg,#fff,#f2fffe);
  box-shadow:0 24px 52px rgba(10,54,69,.17),0 0 0 4px rgba(21,199,195,.14);
  transform:translateY(-9px) scale(1.025);
}
.process-grid li.is-process-active > i {
  background:var(--kl-turquoise-500);
  color:#fff;
  box-shadow:0 12px 28px rgba(21,199,195,.34);
  transform:scale(1.12);
}
.process-grid li.is-process-active .process-number { color:var(--kl-turquoise-600); transform:scale(1.08); }
.process-grid li.is-process-active h3 { color:var(--kl-turquoise-600); }

@media (max-width: 1100px) {
  .letter-gallery { grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .gallery-a4 strong { font-size:17px; }
  .demo-a4-stage { grid-template-columns:110px minmax(240px,1fr); }
}

@media (max-width: 760px) {
  .hero-ambient-type { display:none; }
  .demo-a4-stage { grid-template-columns:1fr; min-height:auto; padding:20px; }
  .demo-state-tabs { grid-template-columns:repeat(3,1fr); gap:5px; }
  .demo-state-tabs li { justify-content:center; gap:5px; font-size:10px; }
  .demo-state-tabs li::after { display:none; }
  .demo-state-tabs li.is-active { transform:none; }
  .demo-a4-shell { width:min(100%,260px); }
  .demo-a4-layer > p { font-size:10px; }
  .letter-gallery { grid-template-columns:repeat(2,1fr); gap:26px 12px; }
  .gallery-letter > b { font-size:15px; }
  .gallery-a4 strong { font-size:13px; }
  .showcase-dialog { grid-template-columns:1fr; width:min(440px,100%); gap:22px; padding:48px 20px 24px; }
  .showcase-a4 { width:min(260px,100%); margin-inline:auto; }
  .showcase-copy { text-align:center; }
  .showcase-copy h2 { font-size:34px; }
  .letter-showcase-modal.is-page-view .showcase-a4 { width:min(calc(100vw - 20px),calc(70.71dvh - 18px)); }
  .letter-showcase-modal.is-page-view .showcase-close { left:10px; }
  .letter-showcase-modal.is-page-view .showcase-expand { left:60px; }
  .comparison-document { min-height:470px; }
  .comparison-layer { padding:44px 30px; }
  .comparison-before > * { width:calc(100vw - 92px); }
  .comparison-before p { margin-top:104px; font-size:16px; }
  .comparison-after h3 { font-size:25px; }
  .comparison-after p { font-size:15px; line-height:1.9; }
  .home-final-cta { grid-template-columns:1fr; text-align:center; }
  .cta-document { margin-inline:auto; }
  .cta-seal { opacity:.7; }
  .wizard-progress::after { top:34px; right:calc(16.666% + 22px); }
  #studio .studio-workspace-bar { position:sticky; top:calc(80px + env(safe-area-inset-top, 0px)); z-index:18; display:flex; align-items:center; gap:8px; isolation:isolate; margin-bottom:12px; background:#fff; }
  .studio-mode-nav { flex:1 1 auto; }
  .studio-view-controls { flex:0 0 auto; }
  .studio-view-controls output { display:none; }
  #studioZoomOut, #studioZoomIn { display:none; }
  .studio-paper-viewport { --studio-view-zoom:100% !important; }
  [data-tooltip]::after { display:none; }
  .personal-summary .personal-credit-card { grid-template-columns:52px minmax(0,1fr) auto; }
  .credit-ring { width:52px; height:52px; }
  .credit-ring > span { width:39px; height:39px; }
  #personalCreditExpand { padding-inline:8px; }
  .plan-card.featured { transform:none; }
  #studio .selection-format-toolbar { position:relative; top:auto; z-index:6; display:block; padding:0; overflow:hidden; }
}

@media (max-width: 390px) {
  .letter-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-letter > em { display:none; }
  .personal-summary .personal-credit-card { grid-template-columns:48px minmax(0,1fr); }
  #personalCreditExpand { grid-column:1/-1; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-view.active .hero-card .eyebrow,
  .home-view.active .hero-card h1,
  .home-view.active .hero-card > p,
  .home-view.active .hero-actions,
  .home-view.active .hero-trust-list,
  .home-view.active .hero-demo,
  .home-view.active .start-orb i,
  .hero-ambient-type,
  .demo-idea-cursor,
  .studio-paper.is-revealing-background,
  .studio-paper.is-revealing-background .letter-safe-zone {
    animation:none !important;
  }
  .demo-a4-paper, .demo-a4-layer, .type-card-front, .type-card-preview, .gallery-a4 { transition:none !important; }
  .process-grid li.is-process-active { box-shadow:var(--kl-shadow-sm); transform:none !important; }
  #studio .is-studio-focus-highlighted { outline-color:var(--kl-turquoise-500); box-shadow:0 0 0 5px rgba(21,199,195,.14); animation:none !important; }
  #studio .tool-group.is-studio-focus-highlighted .tool-group-content { background:rgba(218,250,247,.72); animation:none !important; }
  #studio .tool-group.is-studio-focus-highlighted .tool-group-content > button,
  #studio .tool-group.is-studio-focus-highlighted .tool-group-content > .image-download-control > button { border-color:var(--kl-turquoise-500); background:var(--kl-turquoise-100); color:var(--kl-turquoise-600); animation:none !important; }
}

/* Keep a restored Studio route visible while its server-side letter is loading. */
.studio-restore-status { display:none; }
html[data-initial-view="studio"] #home { display:none !important; }
html[data-initial-view="studio"] #studio { display:block !important; }
html[data-initial-view="composer"] #home,
html[data-initial-view="result"] #home { display:none !important; }
html[data-initial-view="composer"] #composer,
html[data-initial-view="result"] #result { display:block !important; }
html[data-initial-view="studio"] #studio > .studio-card,
#studio.studio-restoring > .studio-card { display:none; }
html[data-initial-view="studio"] #studio > .studio-restore-status,
#studio.studio-restoring > .studio-restore-status {
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  min-height:min(70dvh,720px);
  padding:32px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:rgba(247,249,251,.98);
  box-shadow:var(--kl-shadow-lg);
  color:var(--kl-navy-950);
  text-align:center;
}
.studio-restore-indicator {
  width:34px;
  height:34px;
  border:3px solid rgba(21,199,195,.2);
  border-top-color:var(--kl-turquoise-500);
  border-radius:50%;
  animation:studio-restore-spin .72s linear infinite;
}
@keyframes studio-restore-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .studio-restore-indicator { animation:none; border-color:var(--kl-turquoise-500); }
}