/* Product-specific palettes keep the shared identity, controls, and layout stable. */
.product-home {
  --page: #f6f2e9; --ink: #302724; --muted: #70615a; --accent: #a9363d;
  --surface: #eee5d8; --line: #cec2b4; --brand-ink: var(--ink); --forest-soft: var(--muted);
  --heading-font: Georgia, 'Times New Roman', serif;
  background: var(--page); color: var(--ink);
  transition: background-color 420ms ease, color 420ms ease;
}
.product-home[data-product="keating"] { --page: #eef0e4; --ink: #203c2d; --muted: #536252; --accent: #356044; --surface: #d7dfc5; --line: #adbca0; --heading-font: Georgia, 'Times New Roman', serif; }
.product-home[data-product="interleave"] { --page: #fcf0e9; --ink: #442f35; --muted: #70535b; --accent: #9d4155; --surface: #edd6cc; --line: #d6b8b3; --heading-font: Georgia, 'Times New Roman', serif; }
.product-home[data-product="stich"] { --page: #edf0f7; --ink: #202e49; --muted: #485a75; --accent: #3f568b; --surface: #cbd6e8; --line: #b5c1d5; --heading-font: 'Avenir Next', 'Segoe UI', sans-serif; }
:root[data-theme="dark"] .product-home { --page: #252020; --ink: #f4eade; --muted: #d0bdb3; --accent: #f69a97; --surface: #493333; --line: #65504c; }
:root[data-theme="dark"] .product-home[data-product="keating"] { --page: #192c23; --ink: #eaf0db; --muted: #b4c6ab; --accent: #bcda8d; --surface: #314b37; --line: #546d51; }
:root[data-theme="dark"] .product-home[data-product="interleave"] { --page: #302229; --ink: #f9e7e1; --muted: #d1b4be; --accent: #f2a4b4; --surface: #523641; --line: #73505e; }
:root[data-theme="dark"] .product-home[data-product="stich"] { --page: #111a2c; --ink: #e6eafa; --muted: #aebcda; --accent: #f4b586; --surface: #213452; --line: #405778; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product-home { --page: #252020; --ink: #f4eade; --muted: #d0bdb3; --accent: #f69a97; --surface: #493333; --line: #65504c; }
  :root:not([data-theme="light"]) .product-home[data-product="keating"] { --page: #192c23; --ink: #eaf0db; --muted: #b4c6ab; --accent: #bcda8d; --surface: #314b37; --line: #546d51; }
  :root:not([data-theme="light"]) .product-home[data-product="interleave"] { --page: #302229; --ink: #f9e7e1; --muted: #d1b4be; --accent: #f2a4b4; --surface: #523641; --line: #73505e; }
  :root:not([data-theme="light"]) .product-home[data-product="stich"] { --page: #111a2c; --ink: #e6eafa; --muted: #aebcda; --accent: #f4b586; --surface: #213452; --line: #405778; }
}
.product-home .site-header, .product-home main > section, .product-home footer { width: min(1320px, calc(100% - 80px)); }
.product-home .site-header { min-height: 100px; border-bottom: 1px solid var(--line); }
.product-home .site-header nav { gap: 28px; }
.product-home .account-link { gap: 16px; border-radius: 5px; }
.product-home .wordmark .brand-mark { width: 45px; height: 45px; }
.product-home a:focus-visible, .product-home .theme-toggle:focus-visible, .product-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.directory-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 30px 0 22px; }
.directory-heading h1 { margin: 0; font-size: 1rem; letter-spacing: -.01em; font-weight: 600; }
.directory-heading p { margin: 0; color: var(--muted); font-size: .85rem; }
.product-picker { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-tab { display: flex; min-width: 0; gap: 16px; align-items: center; position: relative; padding: 21px 26px; text-decoration: none; border-right: 1px solid var(--line); transition: background-color 250ms ease; }
.product-tab:first-child { padding-left: 16px; }
.product-tab:last-child { border-right: 0; }
.product-tab .app-logo { width: 48px; height: 48px; transition: transform 240ms ease; }
.product-tab .twyne-logo { background: #9f1c1f; }
:root[data-theme="dark"] .product-tab .twyne-logo { background: #f3a0a4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .product-tab .twyne-logo { background: #f3a0a4; } }
.product-tab strong { display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; }
.product-tab small { display: block; margin-top: 5px; color: var(--muted); font-size: .78rem; font-weight: 400; }
.product-tab .tab-arrow { margin-left: auto; opacity: .45; font-size: 20px; }
.product-tab:hover, .product-tab[aria-selected="true"] { background: var(--surface); text-decoration: none !important; }
.product-tab[aria-selected="true"]::after { content: ''; position: absolute; height: 3px; background: var(--accent); bottom: -1px; left: 0; right: 0; }
.product-tab[aria-selected="true"] .tab-arrow { opacity: 1; transform: rotate(45deg); }
.product-tab:hover .app-logo { transform: translateY(-3px) rotate(-4deg); }
.product-stage { position: relative; }
.product-panel { display: grid; grid-template-columns: .9fr 1.25fr; gap: 32px; min-height: 580px; padding: 48px 0; align-items: center; }
.product-panel[hidden] { display: none; }
.product-panel + .product-panel { border-top: 1px solid var(--line); }
.showcase-ready .product-panel { border-top: 0; }
.product-copy { padding: 0 0 0 16px; min-width: 0; }
.product-category { margin: 0 0 28px; color: var(--muted); font-size: .76rem; display: flex; align-items: center; gap: 20px; }
.product-number { font: 10px ui-monospace, monospace; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 100px; padding: 5px 10px; }
.product-copy h2 { margin: 0; font-family: var(--heading-font); font-size: clamp(42px,4.9vw,70px); line-height: 1.035; font-weight: 400; letter-spacing: -.035em; }
.product-copy h2 em { color: var(--accent); font-weight: inherit; }
.product-description { max-width: 355px; margin: 26px 0 28px; font-size: 1rem; line-height: 1.7; color: var(--muted); }
.product-visit { display: inline-flex; align-items: center; gap: 50px; min-height: 48px; padding: 0 0 6px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); font-size: 1rem; font-weight: 600; }
.product-visit > span:last-child { font-size: 24px; transition: transform 200ms; }
.product-visit:hover > span:last-child { transform: translate(3px,-3px); }
[data-product-panel="stich"] .product-copy h2 { font-size: clamp(40px,4.3vw,61px); font-weight: 700; letter-spacing: -.04em; }
[data-product-panel="keating"] .product-category { font-family: ui-monospace, monospace; font-size: .7rem; }
.preview-scene { margin: 0; min-width: 0; position: relative; background: var(--surface); height: 470px; border-radius: 8px; overflow: hidden; transition: background-color 450ms ease; isolation: isolate; }
.preview-art { position: relative; height: 425px; perspective: 1400px; transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)); transition: transform 500ms ease-out; }
.preview-scene figcaption { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 10px; color: var(--muted); background: var(--surface); z-index: 1; border-top: 1px solid var(--line); letter-spacing: .025em; }
.preview-scene figcaption span { opacity: 1; }
/* Twyne: a manuscript, a pencil line, and an editor in the margin. */
.scene-twyne { background-image: repeating-linear-gradient(0deg,transparent 0 29px,color-mix(in srgb,var(--line) 35%,transparent) 30px); }
.manuscript { position: absolute; left: 9%; top: 34px; width: 66%; min-height: 380px; padding: 20px 30px 17px; background: #fcf8ef; color: #3e302c; box-shadow: 0 16px 30px #37282024; transform: rotate(-5deg); font-family: Georgia, serif; }
.paper-toolbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d6cec0; padding-bottom: 14px; font: 9px ui-monospace,monospace; color: #786255; }
.paper-toolbar > span:first-child { font: italic bold 22px Georgia,serif; color: #a9363d; }
.manuscript .manuscript-label { font: 8px ui-monospace,monospace; letter-spacing: .1em; margin-top: 24px; color: #8e574c; }
.manuscript h3 { font-size: 37px; line-height: 1; font-weight: 400; margin: 14px 0 20px; letter-spacing: -.04em; }
.manuscript > p { font-size: 12px; line-height: 1.65; max-width: 245px; }
.manuscript mark { background: #f4d2ad; color: inherit; }
.paper-bottom { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 10px; border-top: 1px solid #d6cec0; font: 7px ui-monospace,monospace; }
.editor-note { position: absolute; width: 210px; right: 5%; top: 185px; padding: 23px 25px; background: #a9363d; color: #fff0dc; transform: rotate(5deg); box-shadow: 0 12px 20px #44232624; }
.note-index { font: italic 35px Georgia,serif; }
.note-label { font: 8px ui-monospace,monospace; letter-spacing: .07em; margin: 12px 0; }
.editor-note > p:not(.note-label) { font: 21px/1.2 Georgia,serif; margin: 10px 0; }
.note-rule { display: block; width: 42px; height: 1px; background: #eea697; margin: 20px 0 12px; }
.note-footer { font: 9px ui-monospace,monospace; }
/* Keating: terminal-green study desk and a concrete Socratic exchange. */
.scene-keating { background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.study-window { position: absolute; top: 30px; left: 7%; width: 82%; border: 1px solid #778867; border-radius: 12px; background: #f7f5dc; color: #284635; box-shadow: 8px 10px 0 #23443125; transform: rotate(-2deg); overflow: hidden; }
.study-toolbar { display: flex; gap: 8px; align-items: center; padding: 14px 18px; background: #304e37; color: #e6edba; font: 10px ui-monospace,monospace; letter-spacing: .08em; }
.study-toolbar > span:last-child { margin-left: auto; font-size: 8px; }
.status-dot { width: 7px; height: 7px; background: #cbe375; border-radius: 50%; }
.study-body { position: relative; padding: 18px 24px 24px; }
.study-label { font: 8px ui-monospace,monospace; letter-spacing: .1em; margin: 0 0 12px; }
.study-body h3 { font: 29px/1.12 Georgia,serif; margin: 0 0 26px; letter-spacing: -.04em; }
.orbit-sketch { position: absolute; right: 17px; top: 23px; width: 135px; height: 100px; }
.orbit-path { position: absolute; inset: 8px 6px; border: 1px dashed #779166; border-radius: 50%; transform: rotate(-28deg); }
.planet { position: absolute; width: 42px; height: 42px; top: 33px; left: 42px; border-radius: 50%; background: #688450; box-shadow: inset -10px -4px 0 #385934; }
.moon { position: absolute; width: 12px; height: 12px; right: 9px; top: 15px; border-radius: 50%; background: #ad8745; }
.gravity-arrow { position: absolute; right: 28px; top: 13px; font-size: 24px; color: #6f7345; }
.tutor-line { display: flex; gap: 10px; align-items: center; max-width: 295px; }
.tutor-line img { object-fit: contain; flex: none; }
.tutor-line p { font: 13px/1.5 ui-monospace,monospace; margin: 0; }
.student-line { margin: 18px 0 16px 45px; padding: 13px 12px; border-radius: 5px; background: #e4e8c5; font: 11px/1.4 ui-monospace,monospace; }
.tutor-reply { font: 11px/1.5 ui-monospace,monospace; padding-left: 52px; margin: 0; }
.study-note { position: absolute; bottom: 5px; right: 20px; background: #e6c677; color: #3e3f26; padding: 15px 23px; font: italic 20px/1.1 Georgia,serif; transform: rotate(5deg); box-shadow: 0 6px 10px #1734271a; }
.study-note > span { float: left; font: 32px Georgia,serif; margin-right: 15px; }
/* Interleave: the same photography and gecko mark as the relationship app. */
.scene-interleave::before, .scene-interleave::after { content: ''; position: absolute; width: 480px; height: 260px; border: 1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius: 50%; transform: rotate(-40deg); left: -130px; top: 190px; z-index: -1; }
.scene-interleave::after { left: 160px; top: 0; transform: rotate(40deg); }
.relationship-window { position: absolute; top: 24px; left: 10%; width: 67%; background: #fff8f1; color: #6b3c47; border-radius: 14px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 15px 25px #4c233621; }
.relationship-top { display: flex; gap: 7px; align-items: center; padding: 8px 16px; font: 22px Georgia,serif; }
.relationship-photo { height: 150px; overflow: hidden; }
.relationship-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.relationship-body { padding: 18px 24px 22px; }
.relationship-label { font: 8px ui-monospace,monospace; letter-spacing: .06em; margin: 0 0 13px; }
.relationship-body h3 { font: 30px/1.1 Georgia,serif; margin: 0 0 12px; letter-spacing: -.035em; }
.relationship-body > p:last-child { font-size: 11px; margin: 0; }
.relationship-note { position: absolute; top: 193px; right: 5%; padding: 20px 23px; width: 197px; background: #9d4155; color: #fff1dc; transform: rotate(6deg); border-radius: 50% 50% 10px 10px / 20% 20% 10px 10px; box-shadow: 0 12px 20px #44232624; text-align: center; }
.relationship-note > span { font: 38px/1 Georgia,serif; }
.relationship-note p { margin: 12px 0 18px; font: 24px/1.1 Georgia,serif; }
.relationship-note > div { display: flex; gap: 9px; justify-content: center; font-size: 8px; border-top: 1px solid #d3949a; padding-top: 12px; }
/* Stich: the app's LCARS-inspired mail, calendar, and contacts. */
.scene-stich { background-image: linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--line) 30%,transparent) 50%,transparent 50.3%); background-size: 44px 44px; }
.mail-window { position: absolute; top: 33px; left: 6%; width: 85%; display: flex; gap: 12px; padding: 16px; background: #111b2e; border-radius: 18px; color: #e2eaf8; box-shadow: 0 15px 30px #0b12292a; transform: rotate(-3deg); }
.mail-rail { display: flex; flex: none; width: 37px; flex-direction: column; gap: 6px; }
.mail-rail span:first-child { background: #eaaa7a; height: 100px; border-radius: 30px 0 0 0; }
.mail-rail span:nth-child(2) { background: #92bae0; height: 90px; }
.mail-rail span:last-child { background: #d197bb; flex: 1; border-radius: 0 0 0 20px; }
.mail-main { flex: 1; min-width: 0; }
.mail-toolbar { display: flex; gap: 8px; align-items: center; border-top: 9px solid #eaaa7a; border-radius: 0 14px 0 0; padding-top: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #eaaa7a; }
.mail-toolbar > span:last-child { margin-left: auto; font-size: 8px; }
.mail-title { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 15px; }
.mail-title h3 { font: 30px/1 'Segoe UI',sans-serif; letter-spacing: -.035em; margin: 0; }
.mail-title > span { color: #91badf; font: 20px ui-monospace,monospace; }
.mail-row { display: flex; align-items: center; gap: 10px; padding: 13px 8px; border-top: 1px solid #34425a; }
.sender-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; background: #293c58; color: #9ec6ef; border-radius: 9px; font-size: 11px; }
.mail-row strong { font-size: 10px; }
.mail-row p { margin: 5px 0 0; font-size: 10px; color: #b1c0d8; }
.mail-row time { font: 8px ui-monospace,monospace; margin-left: auto; align-self: flex-start; color: #b1c0d8; }
.mail-unread { border-left: 2px solid #93bce9; background: #203047; }
.mail-bottom { display: flex; gap: 17px; margin-top: 16px; padding: 11px 0 2px; border-top: 4px solid #d197bb; color: #d8a5ca; font: 8px ui-monospace,monospace; }
.calendar-note { position: absolute; bottom: -1px; right: 5%; width: 310px; background: #efb78a; color: #22283a; display: grid; grid-template-columns: 42px 1fr; column-gap: 15px; padding: 15px 18px; border-radius: 18px 4px 18px 4px; transform: rotate(3deg); box-shadow: 0 8px 15px #0c1e3326; }
.calendar-note > span { font: 9px ui-monospace,monospace; text-align: center; }
.calendar-note > strong { grid-column: 1; grid-row: 2; font: 33px/1 ui-monospace,monospace; text-align: center; }
.calendar-note > div { grid-column: 2; grid-row: 1 / 3; padding-left: 12px; border-left: 1px solid #936e57; }
.calendar-note div > span { font: 7px ui-monospace,monospace; }
.calendar-note p { font-size: 14px; margin: 6px 0 5px; font-weight: 600; }
.calendar-note small { font-size: 8px; }
/* A single short account line replaces the former company essay. */
.product-home .account-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-block: 1px solid var(--line); padding: 26px 16px; }
.account-strip p { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; font-size: .83rem; }
.account-strip p > span { color: var(--muted); }
.account-strip > a { font-size: .85rem; white-space: nowrap; text-decoration: none; font-weight: 650; padding-block: 12px; }
.account-strip > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.product-home .showcase-footer { display: flex; align-items: center; gap: 22px; padding: 30px 0; border: 0; color: var(--ink); background: transparent; }
.showcase-footer .wordmark { font-size: .95rem; }
.product-home .showcase-footer .brand-mark { width: 30px; height: 30px; }
.showcase-footer p { font-size: .75rem; margin: 0; color: var(--muted); }
.showcase-footer nav { margin-left: auto; gap: 22px; }
.showcase-footer nav a { font-size: .75rem; font-weight: 400; min-height: 44px; display: inline-flex; align-items: center; }
.showcase-footer .language-links { flex-basis: 100%; }
.product-home .showcase-footer:has(.language-links) { flex-wrap: wrap; }
.product-panel.is-entering .product-copy { animation: copy-arrives 440ms cubic-bezier(.2,.7,.2,1) both; }
.product-panel.is-entering .preview-art { animation: preview-arrives 560ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes copy-arrives { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes preview-arrives { from { opacity: 0; transform: translateX(35px) rotate(2deg) scale(.97); } to { opacity: 1; transform: none; } }
@media (min-width: 1500px) { .product-panel { min-height: 620px; } .preview-scene { height: 490px; } .preview-art { height: 445px; } }
@media (max-width: 1100px) {
  .product-home .site-header, .product-home main > section, .product-home footer { width: calc(100% - 48px); }
  .product-tab { padding: 19px 16px; gap: 10px; }
  .product-tab .app-logo { width: 40px; height: 40px; }
  .product-panel { gap: 24px; grid-template-columns: .9fr 1.1fr; }
  .product-copy { padding-left: 0; }
  .product-category { gap: 10px; }
  .preview-scene { height: 440px; }
  .preview-art { height: 397px; }
  .manuscript { padding: 16px 22px; left: 6%; width: 75%; }
  .editor-note { width: 180px; padding: 20px; right: 3%; }
  .study-window { left: 4%; width: 89%; }
  .study-body { padding-inline: 16px; }
  .orbit-sketch { transform: scale(.7); transform-origin: top right; right: 4px; }
  .study-body h3 { font-size: 25px; }
  .relationship-window { left: 5%; width: 78%; }
  .relationship-note { width: 170px; right: 3%; padding-inline: 15px; }
  .relationship-note p { font-size: 21px; }
  .mail-window { left: 4%; width: 92%; gap: 8px; padding: 12px; }
  .mail-rail { width: 23px; }
  .mail-row { gap: 7px; }
  .mail-bottom { gap: 13px; }
  .calendar-note { width: 285px; right: 3%; }
  .showcase-footer p { display: none; }
}
@media (max-width: 800px) {
  .product-home .site-header { gap: 14px; }
  .product-home .site-header nav { gap: 18px; }
  .product-home .site-header nav > a:not(.account-link) { display: none; }
  .product-home .site-header nav { margin-left: auto; }
  .product-panel { grid-template-columns: 1fr; min-height: 0; gap: 32px; padding: 32px 0; }
  .product-copy h2, [data-product-panel="stich"] .product-copy h2 { font-size: clamp(44px,8vw,65px); }
  .product-description { max-width: 490px; margin: 20px 0 16px; }
  .product-category { margin-bottom: 20px; }
  .product-copy { padding: 0 12px; }
  .preview-scene { height: 470px; }
  .preview-art { height: 425px; max-width: 620px; margin: 0 auto; }
  .product-tab { gap: 8px; padding: 17px 10px; }
  .product-tab strong { font-size: .9rem; }
  .product-tab small { font-size: .65rem; }
  .product-tab .tab-arrow { display: none; }
  .product-tab .app-logo { width: 36px; height: 36px; }
  .product-home .account-strip { align-items: flex-start; padding: 22px 12px; }
  .account-strip p { max-width: 350px; }
  .account-strip p > span { line-height: 1.6; }
  .product-home .showcase-footer { flex-wrap: wrap; gap: 10px 20px; }
  .showcase-footer nav { margin: 0; flex: 1; justify-content: flex-end; gap: 16px; }
  .orbit-sketch { transform: none; right: 17px; }
  .study-body h3 { font-size: 29px; }
}
@media (max-width: 520px) {
  .product-home .site-header, .product-home main > section, .product-home footer { width: calc(100% - 32px); }
  .product-home .site-header { min-height: 83px; gap: 9px; flex-wrap: nowrap; }
  .product-home .site-header .wordmark { font-size: .95rem; gap: 8px; }
  .product-home .site-header .wordmark .brand-mark { width: 36px; height: 36px; }
  .product-home .site-header nav { display: none; }
  .product-home .theme-control { margin-left: auto; }
  .directory-heading { display: block; padding: 25px 0 20px; }
  .directory-heading h1 { font-size: .92rem; }
  .directory-heading p { font-size: .75rem; margin-top: 8px; }
  .product-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .product-tab, .product-tab:first-child { flex-direction: column; align-items: center; text-align: center; padding: 13px 3px; gap: 8px; }
  .product-tab .app-logo { width: 35px; height: 35px; }
  .product-tab strong { font-size: .74rem; letter-spacing: -.02em; }
  .product-tab small { font-size: .59rem; margin-top: 4px; white-space: nowrap; }
  .product-copy { padding: 0 8px; }
  .product-category { font-size: .7rem; }
  .product-copy h2, [data-product-panel="stich"] .product-copy h2 { font-size: clamp(40px,11vw,56px); }
  .product-description { font-size: .92rem; line-height: 1.6; }
  .product-visit { min-height: 44px; font-size: .92rem; }
  .preview-scene { height: 410px; }
  .preview-art { width: 410px; max-width: none; height: 435px; position: absolute; left: 50%; top: 0; margin-left: -205px; transform: scale(.86); transform-origin: top center; }
  .preview-scene figcaption { font-size: 8px; padding: 14px 12px; gap: 5px; }
  .manuscript { min-height: 385px; }
  .relationship-note { display: none; }
  .relationship-window { left: 9%; width: 82%; }
  .study-window { top: 28px; }
  .study-note { bottom: 15px; }
  .orbit-sketch { transform: scale(.72); transform-origin: top right; right: 8px; }
  .calendar-note { bottom: 17px; }
  .product-home .account-strip { display: block; padding: 22px 8px 12px; }
  .account-strip p { display: grid; gap: 8px; }
  .account-strip > a { display: inline-flex; gap: 20px; margin-top: 8px; }
  .product-home .showcase-footer { padding: 24px 8px; }
  .showcase-footer nav { flex-basis: 100%; justify-content: flex-start; gap: 17px; }
  .product-panel.is-entering .preview-art { animation: mobile-preview-arrives 500ms ease both; }
  @keyframes mobile-preview-arrives { from { opacity: 0; transform: scale(.83) translateY(10px); } to { opacity: 1; transform: scale(.86); } }
}
@media (max-width: 360px) { .preview-art { transform: scale(.73); } .preview-scene { height: 355px; } .product-panel.is-entering .preview-art { animation: none; } .preview-scene figcaption { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-home, .product-home *, .product-home *::before, .product-home *::after { transition: none !important; animation: none !important; }
  .product-tab:hover .app-logo { transform: none; }
}

/* The product's photographic ground and shader travel with its palette. */
.product-home { position: relative; isolation: isolate; --product-image: url('/textures/fiber.webp'); }
.product-home[data-product='keating'] { --product-image: url('/textures/canopy.webp'); }
.product-home[data-product='interleave'], .product-home[data-product='stich'] { --product-image: url('/textures/creek.webp'); }
.product-home::before, .product-home::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
.product-home::before { z-index: -3; background: var(--product-image) center/cover no-repeat; }
.product-home::after { z-index: -2; background: linear-gradient(90deg, color-mix(in srgb, var(--page) 92%, transparent), color-mix(in srgb, var(--page) 72%, transparent)); }
.product-background-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; opacity: .72; }
.product-background-canvas:not([data-ready]) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .product-background-canvas { display: none; } }
@media print { .product-home::before, .product-home::after, .product-background-canvas { display: none; } }

.product-account-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.product-account-actions a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 5px; font-weight: 650; }
.product-account-actions a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }