:root {
  --cream: #f6f0e6;
  --paper: #fffdf8;
  --sand: #eee6da;
  --lavender: #eee9fb;
  --blue-cream: #e8edf6;
  --ink: #211f1a;
  --muted: #706a60;
  --purple: #6455df;
  --line: rgba(33, 31, 26, .14);
  --max: 72.5rem;
  --header: 4.75rem;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--header); }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--cream); font-family: "Noto Sans SC", "PingFang SC", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { margin: 0; font-family: "Noto Sans SC", "PingFang SC", sans-serif; font-weight: 900; letter-spacing: -.055em; line-height: 1.08; }
h3 { margin: 0; letter-spacing: -.025em; line-height: 1.15; }
p, figure { margin: 0; }
button { border: 0; color: inherit; font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: .2rem solid var(--purple); outline-offset: .25rem; }

.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 1000; padding: .55rem .8rem; border-radius: .6rem; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 3.75rem;
  padding: 0 max(1.5rem, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: rgba(255, 253, 248, 0.85);
  backdrop-filter: blur(1.25rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(180%);
  border-bottom: .0625rem solid rgba(33, 31, 26, 0.06);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 900; letter-spacing: -.02em; font-size: 1.05rem; color: var(--ink); flex-shrink: 0; }
.brand img { width: 2.15rem; height: 2.15rem; aspect-ratio: 1; object-fit: contain; border-radius: .58rem; flex-shrink: 0; transition: transform .25s ease; }
.brand:hover img { transform: scale(1.06); }
.site-header nav { display: flex; align-items: center; gap: 1.85rem; margin-left: auto; }
.site-header nav a { color: rgba(33, 31, 26, 0.62); font-size: .875rem; font-weight: 600; letter-spacing: -.01em; transition: color .15s ease; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-download { padding: .45rem 1.15rem; border-radius: 999px; background: var(--ink); color: white; font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .18s ease, transform .18s ease; }
.header-download:hover { background: var(--purple); transform: translateY(-.05rem); }

.mobile-nav-toggle { display: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; border-radius: .5rem; }
.mobile-nav-toggle svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-nav-toggle .icon-close { display: none; }
body.nav-open .mobile-nav-toggle .icon-menu { display: none; }
body.nav-open .mobile-nav-toggle .icon-close { display: block; }
body.nav-open { overflow: hidden; }
.mobile-drawer { display: none; }

section[id], section {
  scroll-margin-top: 4.5rem;
}

.hero, .layouts-section, .remote-section, .product-section, .how-section, .quick-section, .scenarios-section, .mac-section, .faq-section {
  min-height: 100svh;
  box-sizing: border-box;
  padding: clamp(5.2rem, 8.8vh, 6.8rem) max(1.5rem, calc((100vw - var(--max)) / 2)) clamp(2.8rem, 4.8vh, 4.2rem);
  align-content: center;
}
.pro-section {
  box-sizing: border-box;
  padding: clamp(5.8rem, 9.2vh, 7.2rem) max(1.5rem, calc((100vw - var(--max)) / 2)) clamp(3.8rem, 6.2vh, 5.2rem);
}
.download-section {
  min-height: 22rem;
  box-sizing: border-box;
  padding: clamp(3.2rem, 5.5vh, 4.8rem) max(1.5rem, calc((100vw - var(--max)) / 2));
}
.eyebrow { margin-bottom: .85rem; color: var(--purple); font-size: .8125rem; font-weight: 900; letter-spacing: .04em; }
.button { min-height: 3.25rem; padding: 0 1.4rem; display: inline-flex; align-items: center; justify-content: center; border: .0625rem solid transparent; border-radius: 1rem; font-weight: 800; transition: background .18s ease, transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease; }
.button.primary { background: var(--purple); color: white; box-shadow: 0 .4rem 1.2rem rgba(100,85,223,.24); }
.button.primary:hover { background: #5143c6; box-shadow: 0 .6rem 1.6rem rgba(100,85,223,.34); }
.button.dark { background: var(--ink); color: white; }

.hero { position: relative; display: grid; place-items: center; overflow: visible; isolation: isolate; text-align: center; background: radial-gradient(circle at 50% 46%, #fffaf1 0 20%, var(--cream) 58%); }
.hero::after { position: absolute; z-index: 1; width: min(58rem, 82vw); height: min(30rem, 62vh); border-radius: 50%; background: radial-gradient(ellipse, rgba(246,240,230,.98) 0 42%, rgba(246,240,230,.84) 57%, rgba(246,240,230,0) 76%); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero h1 { font-size: clamp(2.35rem, 4.2vw, 3.85rem); }
.hero-line { display: flex; align-items: center; justify-content: center; width: 100%; margin-inline: auto; white-space: nowrap; }
.hero-line-first { display: inline-flex; align-items: center; justify-content: center; }
.hero-line-first > [data-typewriter] { display: inline; min-width: 0; white-space: nowrap; }
.hero-line-accent { color: var(--purple); font-family: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif; font-weight: 400; letter-spacing: -.035em; }
.hero-paw { width: .88em; height: .88em; aspect-ratio: 1; margin: .04em -.02em -.02em .02em; flex: none; object-fit: contain; }
.type-caret { display: inline-block; width: .08em; height: .85em; margin-left: .05em; vertical-align: -.02em; border-radius: 999px; background: currentColor; transform: translateY(.02em); }
.type-caret.is-done { opacity: 0; }
.hero-actions { margin-top: 1.75rem; }
.platform-download { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.download-platforms { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,248,.5); }
.download-platform { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .5rem .75rem; border-radius: 999px; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 600; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.download-platform svg { width: 1.25rem; height: 1.25rem; flex: none; }
.download-platform:hover { color: var(--ink); background: rgba(255,255,255,.65); }
.download-platform[aria-selected="true"] { color: var(--purple); background: var(--paper); box-shadow: 0 .125rem .5rem rgba(33,31,26,.09); }
.download-panel { display: flex; justify-content: center; }
.download-platforms[hidden], .download-panel[hidden] { display: none; }
.download-badge { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; border-radius: .5rem; }
.download-badge img { width: auto; height: 100%; }
.download-badge-mac { gap: .6rem; padding: 0 1.15rem; border: 1px solid #a6a6a6; background: #000; color: white; font-size: 1rem; font-weight: 700; }
.download-badge-mac svg { width: 1.75rem; height: 1.75rem; }
.download-fallback { font-size: .875rem; text-decoration: underline; text-underline-offset: .2rem; }
.download-actions { grid-area: button; align-self: center; }
.download-actions .download-platforms { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.download-actions .download-platform { color: white; }
.download-actions .download-platform:hover { background: rgba(255,255,255,.16); }
.download-actions .download-platform[aria-selected="true"] { background: var(--cream); color: var(--purple); }
.download-actions :focus-visible { outline-color: white; }
.hero-field { position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; }
.hero-control { position: absolute; display: grid; place-items: center; color: var(--ink); font-weight: 900; line-height: 1.08; will-change: transform, opacity; }
.hero-key { width: clamp(5.8rem, 8.2vw, 7.4rem); aspect-ratio: 1; padding: .8rem; border: .08rem solid rgba(255,255,255,.82); border-radius: 25%; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,235,226,.98)); box-shadow: inset 0 .18rem .25rem rgba(255,255,255,.96), inset 0 -.62rem 0 rgba(33,31,26,.1), 0 1.2rem 2.2rem rgba(80,64,42,.17); font-size: clamp(.9rem, 1.35vw, 1.18rem); letter-spacing: -.04em; }
.hero-key-blue { top: 15%; left: 6%; color: white; background: linear-gradient(145deg, #65a6ff, #2575e9); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.6), inset 0 -.62rem 0 #1763c8, 0 1.2rem 2.2rem rgba(44,102,189,.24); }
.hero-key-lilac { bottom: 13%; left: 14%; background: linear-gradient(145deg, #efd9ff, #d8a9fa); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.72), inset 0 -.62rem 0 #b784d9, 0 1.2rem 2.2rem rgba(111,69,139,.19); }
.hero-key-yellow { top: 18%; right: 6%; background: linear-gradient(145deg, #ffe972, #ffc72f); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.68), inset 0 -.62rem 0 #e0a909, 0 1.2rem 2.2rem rgba(163,113,8,.2); }
.hero-key-coral { right: 13%; bottom: 10%; color: white; background: linear-gradient(145deg, #ff9a91, #ff6861); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.58), inset 0 -.62rem 0 #d84d49, 0 1.2rem 2.2rem rgba(154,57,53,.21); }
.hero-key-cream { top: 54%; right: 1.8%; font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.hero-key-dark { bottom: 3.8%; left: 38%; width: clamp(10rem, 16vw, 14.5rem); aspect-ratio: 2.05; border-radius: 1.6rem; color: white; background: linear-gradient(145deg, #5b5b56, #242522); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.22), inset 0 -.62rem 0 #10110f, 0 1.2rem 2.2rem rgba(24,24,21,.22); }
.hero-key-small { top: 8%; left: 29%; width: clamp(4.6rem, 6.5vw, 5.8rem); }
.hero-key-peach { top: auto; right: 29%; bottom: 8%; left: auto; background: linear-gradient(145deg, #ffe4d1, #ffc8aa); box-shadow: inset 0 .18rem .28rem rgba(255,255,255,.74), inset 0 -.62rem 0 #dfa37d, 0 1.2rem 2.2rem rgba(143,88,54,.18); }
.hero-trackpad { top: 43%; left: -3.5%; width: clamp(9rem, 14vw, 13rem); aspect-ratio: 1; border: .08rem solid rgba(255,255,255,.76); border-radius: 1.8rem; background-color: rgba(239,233,222,.82); background-image: radial-gradient(rgba(125,115,99,.24) .06rem, transparent .07rem); background-size: .75rem .75rem; box-shadow: inset 0 .16rem .24rem rgba(255,255,255,.86), 0 1.2rem 2.4rem rgba(76,62,42,.13); }
.hero-knob { top: 8%; right: 28%; width: clamp(5.3rem, 7vw, 6.4rem); aspect-ratio: 1; border: .08rem solid rgba(255,255,255,.82); border-radius: 50%; background: radial-gradient(circle at 40% 34%, #fffefb, #d8d0c4 72%); box-shadow: inset 0 .18rem .28rem white, 0 .8rem 1.7rem rgba(75,63,48,.18); }
.hero-knob::after { position: absolute; top: 12%; width: .36rem; height: 25%; border-radius: 1rem; background: var(--ink); content: ""; transform: rotate(-13deg); transform-origin: 50% 155%; }
.hero-slider { right: 27%; bottom: 4.8%; width: clamp(8rem, 12vw, 11rem); height: 2.5rem; border-radius: 2rem; background: linear-gradient(#ded8ce, #fdfbf6); box-shadow: inset 0 .14rem .34rem rgba(59,52,44,.22), 0 .7rem 1.5rem rgba(70,57,39,.12); }
.hero-slider::before { position: absolute; right: .65rem; left: .65rem; height: .48rem; border-radius: 2rem; background: linear-gradient(90deg, var(--purple) 0 58%, #d5cfc6 58%); content: ""; }
.hero-slider::after { position: absolute; left: 54%; width: 1.8rem; aspect-ratio: 1; border: .08rem solid #b9b1a5; border-radius: 50%; background: #eee9e1; box-shadow: 0 .25rem .6rem rgba(65,52,37,.18); content: ""; }
.hero-line, .hero-control, .sprite-sequence, .sprite-frame { will-change: transform, opacity; }
.sprite-sequence { position: relative; aspect-ratio: 1; }
.sprite-frame { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.sprite-frame:not(:first-child) { visibility: hidden; opacity: 0; }

.layouts-section { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(17rem, .75fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; background: var(--paper); }
.layout-copy { min-width: 0; }
.layout-copy h2, .quick-copy h2, .faq-section > h2 { max-width: 43rem; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.25; letter-spacing: -.02em; }
.role-panel h2 { max-width: 43rem; font-size: clamp(1.65rem, 2.8vw, 2.3rem); line-height: 1.28; letter-spacing: -.02em; }
.layout-copy > p:not(.eyebrow), .quick-copy > p:not(.eyebrow) { margin-top: .75rem; color: var(--muted); font-size: .98rem; line-height: 1.62; }
.layout-tabs { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.layout-tab { min-width: 0; min-height: 3.85rem; padding: .65rem .85rem; display: grid; grid-template-columns: 2.35rem 1fr; gap: .8rem; align-items: center; border: .0625rem solid rgba(33,31,26,.08); border-radius: 1.15rem; background: #f2ede5; cursor: pointer; text-align: left; transition: border-color .18s ease, background-color .18s ease, transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease; }
.layout-tab:hover { transform: translateY(-.15rem); background: #ece5db; box-shadow: 0 .35rem 1rem rgba(53,42,92,.06); }
.layout-tab[aria-selected="true"] { border-color: var(--purple); background: #eeeaff; box-shadow: 0 .4rem 1.4rem rgba(100,85,223,.14); transform: translateY(-.15rem); }
.layout-tab img { width: 2.35rem; height: 2.35rem; aspect-ratio: 1; border-radius: .65rem; object-fit: contain; flex-shrink: 0; }
.layout-tab-info { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; min-width: 0; }
.layout-tab strong { font-size: .88rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.layout-tab-tag { font-size: .68rem; font-weight: 800; color: var(--purple); background: rgba(100,85,223,.08); padding: .12rem .46rem; border-radius: 999px; transition: background-color .18s ease, color .18s ease; }
.layout-tab[aria-selected="true"] .layout-tab-tag { background: var(--purple); color: white; }

.layout-preview { display: grid; place-items: center; min-width: 0; }
.layout-preview-frame { position: relative; }
.layout-preview-frame img { width: auto; height: auto; max-height: min(54svh, 31rem); max-width: 100%; aspect-ratio: 1206 / 2622; object-fit: contain; border-radius: 1.35rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 1.5rem 4rem rgba(48,38,23,.12); display: block; }
.layout-preview figcaption { width: min(100%, 25rem); margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.layout-preview-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: var(--purple); background: rgba(100,85,223,.08); padding: .22rem .6rem; border-radius: 999px; }
.badge-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 .5rem #10b981; }
.layout-preview figcaption strong { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.layout-preview figcaption span:not(.badge-dot) { color: var(--muted); font-size: .84rem; line-height: 1.55; }

.remote-section { display: flex; flex-direction: column; gap: clamp(2.5rem, 4.5vh, 3.5rem); justify-content: center; overflow: hidden; background: var(--blue-cream); }
.remote-intro { max-width: 52rem; margin: 0 auto; text-align: center; }
.remote-intro h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.25; letter-spacing: -.02em; }
.remote-intro p:not(.eyebrow) { max-width: 38rem; margin: .85rem auto 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }

.remote-showcase { display: grid; grid-template-columns: minmax(18rem, 1.15fr) minmax(16rem, .85fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; max-width: 68rem; margin: 0 auto; width: 100%; }
.remote-nav { display: flex; flex-direction: column; gap: .65rem; }
.remote-nav-item { width: 100%; padding: 1rem 1.25rem; border-radius: 1.2rem; background: rgba(255, 255, 255, 0.45); border: .0625rem solid rgba(33, 31, 26, 0.08); cursor: pointer; text-align: left; transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease; }
.remote-nav-item:hover { background: rgba(255, 255, 255, 0.75); transform: translateX(.25rem); }
.remote-nav-item.is-active { background: rgba(255, 255, 255, 0.95); border-color: rgba(100, 85, 223, 0.35); box-shadow: 0 .75rem 2.2rem rgba(100, 85, 223, 0.12); transform: translateX(.4rem); }
.remote-nav-header { display: flex; align-items: center; gap: .75rem; }
.remote-nav-icon { width: 2.1rem; height: 2.1rem; border-radius: .65rem; background: rgba(100, 85, 223, 0.08); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .2s ease, color .2s ease; }
.remote-nav-item.is-active .remote-nav-icon { background: var(--purple); color: white; }
.remote-nav-header strong { font-size: 1rem; font-weight: 850; color: var(--ink); letter-spacing: -.01em; }
.remote-nav-badge { margin-left: auto; font-size: .6875rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; background: rgba(33, 31, 26, 0.07); color: var(--muted); }
.remote-nav-badge.highlight { background: linear-gradient(135deg, #2563eb, #7c3aed); color: white; }
.remote-nav-item.is-active .remote-nav-badge:not(.highlight) { background: rgba(100, 85, 223, 0.12); color: var(--purple); }
.remote-nav-item p { margin: .4rem 0 0 2.85rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); }

.remote-display { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.remote-display-stage { position: relative; display: grid; place-items: center; }
.remote-display-img { width: auto; height: auto; max-height: min(52svh, 29rem); max-width: 100%; aspect-ratio: 1206 / 2622; object-fit: contain; border-radius: 1.35rem; border: .0625rem solid rgba(33, 31, 26, 0.08); box-shadow: 0 1.75rem 4.5rem rgba(48, 38, 23, 0.14); transition: opacity .18s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1); }
.remote-display-caption { width: min(100%, 25rem); margin-top: 1.15rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.remote-display-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: var(--purple); background: rgba(100, 85, 223, 0.08); padding: .22rem .6rem; border-radius: 999px; }
.remote-display-caption strong { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.remote-display-caption p { color: var(--muted); font-size: .84rem; line-height: 1.55; margin: 0; }

.product-section { display: grid; grid-template-columns: minmax(16rem, .82fr) minmax(0, 1.18fr); gap: clamp(3rem, 8vw, 6.5rem); align-items: center; background: var(--sand); }
.product-shot { display: grid; place-items: center; }
.product-shot > img { width: auto; height: auto; max-height: min(60svh, 34rem); max-width: 100%; aspect-ratio: 1206 / 2622; object-fit: contain; border: .0625rem solid rgba(33,31,26,.08); border-radius: 1.35rem; box-shadow: 0 1.75rem 4.5rem rgba(48,38,23,.14); }
.product-copy h2, .how-section > h2, .mac-section h2, .download-section h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.25; letter-spacing: -.02em; }
.product-copy > p:not(.eyebrow) { max-width: 38rem; margin-top: .85rem; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.product-feature-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.product-feature-item { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.15rem; align-items: start; }
.product-feature-icon { width: 2.75rem; height: 2.75rem; border-radius: .85rem; background: rgba(100,85,223,.08); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; }
.product-feature-text h3 { margin: 0; font-size: 1.05rem; font-weight: 850; color: var(--ink); }
.product-feature-text p { margin-top: .3rem; color: var(--muted); font-size: .86rem; line-height: 1.6; }

.how-section {
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
  background: var(--cream);
}
.connection-art {
  width: min(100%, 25rem);
  aspect-ratio: 1;
  position: relative;
  align-self: center;
  justify-self: center;
}
.how-copy { min-width: 0; }
.how-copy h2 { font-size: clamp(2.6rem, 4.1vw, 3.75rem); }
.steps {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: .0625rem solid var(--line);
}
.steps li {
  min-height: 5.2rem;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 1rem;
  align-items: start;
  border-bottom: .0625rem solid var(--line);
}
.steps li > span {
  padding-top: .1rem;
  color: var(--purple);
  font: 700 .8125rem ui-monospace, "SFMono-Regular", monospace;
}
.steps h3 { font-size: 1.15rem; }
.steps p { margin-top: .35rem; color: var(--muted); font-size: .84rem; }

.quick-section { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; background: var(--blue-cream); }
.quick-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.quick-screens img { width: auto; height: auto; max-height: min(52svh, 29rem); max-width: 100%; aspect-ratio: 1206 / 2622; margin: auto; border-radius: 1.35rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 1.25rem 3rem rgba(48,38,23,.1); object-fit: contain; }
.quick-screens figcaption { margin-top: .8rem; display: grid; gap: .2rem; text-align: center; }
.quick-screens figcaption strong { font-size: .9rem; }
.quick-screens figcaption span { color: var(--muted); font-size: .75rem; }

.scenarios-section { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; overflow: hidden; background: var(--lavender); }
.scenario-copy { min-width: 0; }
.role-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; padding: .35rem; border: .0625rem solid rgba(33,31,26,.08); border-radius: 1.15rem; background: rgba(255,255,255,.34); }
.role-tabs button { min-width: 0; padding: .7rem .45rem; display: grid; gap: .12rem; border-radius: .85rem; background: transparent; cursor: pointer; text-align: center; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.role-tabs button:hover { transform: translateY(-.08rem); }
.role-tabs button[aria-selected="true"] { background: rgba(255,255,255,.88); box-shadow: 0 .35rem 1rem rgba(53,42,92,.1); }
.role-tabs strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.role-tabs span { color: var(--muted); font-size: .72rem; }
.role-panels { display: grid; align-items: start; position: relative; min-height: 21rem; margin-top: 2rem; }
.role-panel { grid-area: 1 / 1; position: relative; width: 100%; }
.role-panel h2 { text-wrap: balance; }
.role-panel:not(.is-active) { visibility: hidden; opacity: 0; }
.role-name { margin-bottom: .7rem; color: var(--purple); font-size: .84rem; font-weight: 900; }
.role-panel > p:not(.role-name) { max-width: 40rem; margin-top: 1rem; color: var(--muted); font-size: 1rem; }
.role-apps { margin: 1.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; }
.role-apps li { min-height: 3rem; padding: .5rem .75rem; display: inline-flex; align-items: center; gap: .6rem; border: .0625rem solid rgba(33,31,26,.1); border-radius: .9rem; background: rgba(255,255,255,.44); transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), background .2s ease, box-shadow .2s ease; }
.role-apps li:hover { transform: translateY(-.15rem); background: rgba(255,255,255,.85); box-shadow: 0 .4rem 1.2rem rgba(53,42,92,.08); }
.role-apps img { width: 2rem; height: 2rem; border-radius: .5rem; object-fit: contain; }
.role-apps span { font-size: .78rem; font-weight: 800; }
.role-links { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1.5rem; }
.role-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--purple); font-size: .85rem; font-weight: 800; text-decoration: underline; text-underline-offset: .25rem; }
.role-links .role-game-link { padding: .55rem 1rem; background: var(--purple); color: white; border-radius: .85rem; text-decoration: none; }
.role-links a:hover { text-decoration-thickness: .15rem; }
.quick-details { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.quick-details summary { cursor: pointer; color: var(--purple); font-size: .875rem; font-weight: 750; }
.quick-details > p { margin-top: .8rem; font-size: .875rem; color: var(--muted); }
.quick-details .quick-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 0; }
.quick-details .quick-screens img { width: auto; height: 14rem; margin: auto; }
.quick-details .quick-screens figcaption { text-align: center; }
.pro-companion { mix-blend-mode: multiply; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pro-companion > img { width: min(100%, 20rem); height: auto; mix-blend-mode: multiply; }
.pro-companion ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .9rem; }
.pro-companion li { display: flex; align-items: baseline; gap: .6rem; }
.pro-companion li::before { content: '✓'; color: var(--purple); font-weight: 800; }
.pro-benefits-details { max-width: 66rem; margin: 2rem auto 0; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.45); }
.pro-benefits-details summary { padding: 1rem 1.4rem; color: var(--purple); font-size: .9rem; font-weight: 800; cursor: pointer; }
.pro-benefits-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; padding: .5rem 1.4rem 1.4rem; }
.pro-benefit-item h3 { font-size: .95rem; line-height: 1.4; }
.pro-benefit-item p { margin-top: .4rem; font-size: .85rem; color: var(--muted); }
.role-stage { position: relative; width: min(100%, 28rem); aspect-ratio: 1; justify-self: center; }
.role-figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 78%; will-change: transform, opacity; }
.role-stage:has(.role-art-white.is-active) { mix-blend-mode: multiply; }
.role-figure:not(.is-active) { visibility: hidden; opacity: 0; }

.pro-section { background: radial-gradient(circle at 85% 15%, rgba(240, 225, 255, 0.75), transparent 45%), radial-gradient(circle at 10% 85%, rgba(255, 240, 220, 0.65), transparent 45%), linear-gradient(145deg, #f5efff 0%, #fff6ec 52%, #fffdf8 100%); }
.pro-heading { max-width: 52rem; margin: 0 auto; text-align: center; }
.pro-heading h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.25; }
.pro-heading > p:not(.eyebrow) { max-width: 38rem; margin: .85rem auto 0; color: #6b6357; font-size: .98rem; line-height: 1.65; }
.pro-purchase { max-width: 66rem; margin: clamp(2.5rem, 4.5vw, 3.75rem) auto 0; display: grid; grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 4.25rem); align-items: center; }
.pro-paywall-preview { justify-self: center; width: min(100%, 20rem); }
.pro-paywall-preview img { display: block; width: 100%; height: auto; border: .0625rem solid rgba(33,31,26,.08); border-radius: 1.35rem; box-shadow: 0 1.75rem 4.5rem rgba(53,42,102,.14); }
.pro-paywall-preview figcaption { margin-top: 1rem; color: #787167; font-size: .78rem; line-height: 1.55; font-weight: 500; text-align: center; }
.pro-plans { display: grid; gap: 1rem; }
.pro-plan-card { position: relative; padding: 1.35rem 1.6rem; border: .0625rem solid rgba(100,85,223,.16); border-radius: 1.35rem; background: rgba(255,255,255,.86); backdrop-filter: blur(1rem); box-shadow: 0 .5rem 1.8rem rgba(64,48,110,.04); transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s ease, border-color .22s ease; }
.pro-plan-card:hover { transform: translateY(-.2rem); box-shadow: 0 1rem 2.8rem rgba(82,64,178,.12); border-color: rgba(100,85,223,.35); }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 1rem 3rem rgba(100,85,223,.16), inset 0 0 0 .0625rem rgba(255,255,255,.9); }
  50% { box-shadow: 0 1.25rem 3.8rem rgba(100,85,223,.25), inset 0 0 0 .0625rem rgba(255,255,255,.98); }
}
.pro-plan-card.is-recommended { border: .125rem solid var(--purple); background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,239,255,.94)); box-shadow: 0 1rem 3rem rgba(100,85,223,.16), inset 0 0 0 .0625rem rgba(255,255,255,.9); animation: pulseGlow 4.5s ease-in-out infinite; }
.pro-plan-badge { position: absolute; top: -.72rem; right: 1.35rem; display: inline-flex; align-items: center; gap: .35rem; padding: .26rem .78rem; border-radius: 999px; background: linear-gradient(135deg, #ff4e50, #f9d423); color: white; font-size: .7rem; font-weight: 900; letter-spacing: .02em; box-shadow: 0 .25rem .85rem rgba(255,78,80,.38); text-shadow: 0 .0625rem .125rem rgba(0,0,0,.15); }
.pro-plan-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pro-plan-name { color: var(--ink); font-size: .96rem; font-weight: 900; letter-spacing: -.01em; }
.pro-plan-tag { padding: .24rem .65rem; border-radius: 999px; background: rgba(100,85,223,.08); color: var(--purple); font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
.pro-plan-tag.highlight { background: linear-gradient(135deg, var(--purple), #7e70e9); color: white; box-shadow: 0 .25rem .75rem rgba(100,85,223,.28); }
.pro-plan-tag.lifetime-tag { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(100,85,223,.08)); color: #b45309; border: .0625rem solid rgba(245,158,11,.24); font-weight: 900; }
.pro-plan-price { margin-top: .45rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; color: var(--ink); }
.pro-plans strong { font-size: clamp(1.85rem, 3.5vw, 2.5rem); line-height: 1; font-weight: 900; letter-spacing: -.03em; }
.pro-plans small { margin-left: .15rem; color: #7a7266; font-size: .88rem; font-weight: 700; }
.pro-plan-subprice { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: .5rem; background: rgba(100,85,223,.08); color: #584cb5; font-size: .74rem; font-weight: 700; }
.pro-plans h3 { margin-top: .5rem; color: #696257; font-size: .85rem; font-weight: 600; line-height: 1.55; }
.pro-trust-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.35rem; margin-top: .85rem; padding: 0 .25rem; color: #726b60; font-size: .78rem; font-weight: 700; }
.pro-trust-badges span { display: inline-flex; align-items: center; gap: .38rem; }
.pro-trust-badges svg { color: var(--purple); flex-shrink: 0; width: 14px; height: 14px; }
.pro-benefits-header { margin-top: clamp(3.5rem, 6.5vw, 5.5rem); text-align: center; }
.pro-benefits-title { margin-top: .5rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 900; letter-spacing: -.02em; }
.pro-benefits-subtitle { max-width: 38rem; margin: .65rem auto 0; color: #6d655a; font-size: .92rem; line-height: 1.62; }
.pro-grid { margin-top: clamp(2.5rem, 5vw, 3.85rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.benefit-card { position: relative; min-height: 11.5rem; padding: 1.5rem 1.6rem; border: .0625rem solid rgba(100,85,223,.12); border-radius: 1.35rem; background: rgba(255,255,255,.86); backdrop-filter: blur(1rem); box-shadow: 0 .5rem 1.8rem rgba(64,48,110,.04); transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s ease, border-color .22s ease, background-color .22s ease; display: flex; flex-direction: column; }
.benefit-card:hover { transform: translateY(-.22rem); background: rgba(255,255,255,.98); border-color: rgba(100,85,223,.3); box-shadow: 0 1rem 2.6rem rgba(100,85,223,.1); }
.benefit-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: rgba(100,85,223,.08); color: var(--purple); transition: transform .22s cubic-bezier(0.16,1,0.3,1); }
.benefit-card:hover .benefit-icon { transform: scale(1.06); }
.benefit-tag { padding: .24rem .65rem; border-radius: 999px; background: rgba(100,85,223,.08); color: var(--purple); font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
.benefit-card h3 { margin: 0; font-size: 1.1rem; font-weight: 850; color: var(--ink); line-height: 1.35; letter-spacing: -.015em; }
.benefit-card p { margin-top: .5rem; color: var(--muted); font-size: .86rem; line-height: 1.6; flex: 1; }

.pro-note { max-width: 46rem; margin: clamp(2.2rem, 4.5vw, 3.2rem) auto 0; color: #726b60; font-size: .82rem; line-height: 1.6; text-align: center; }
.pro-note a { color: #4f40c4; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }

.mac-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; overflow: hidden; background: var(--ink); color: white; }
.mac-copy > p:not(.eyebrow) { max-width: 31rem; margin-top: 1.2rem; color: rgba(255,255,255,.68); font-size: 1rem; }
.mac-copy > a { display: inline-flex; margin-top: 1.5rem; border-bottom: .0625rem solid currentColor; font-weight: 800; transition: color .18s ease, transform .18s ease; }
.mac-copy > a:hover { transform: translateX(.25rem); }
.mac-section > img { width: auto; height: auto; max-height: min(58svh, 33rem); max-width: 100%; justify-self: center; object-fit: contain; }

.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; grid-template-areas: "title list"; column-gap: clamp(3rem, 8vw, 6rem); align-items: start; align-content: center; background: #e9e1d6; }
.faq-header { grid-area: title; display: flex; flex-direction: column; gap: .6rem; }
.faq-header h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.25; margin: 0; }
.faq-header p { color: var(--muted); font-size: .95rem; line-height: 1.62; margin: 0; }
.faq-more-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--purple); font-size: .88rem; font-weight: 850; margin-top: .6rem; text-decoration: underline; text-underline-offset: .2rem; transition: color .18s ease; }
.faq-more-link:hover { color: #4338ca; }
.faq-list { grid-area: list; border-top: .0625rem solid var(--line); }
.faq-list details { border-bottom: .0625rem solid var(--line); transition: background-color .2s ease; }
.faq-list summary { padding: 1.05rem 2rem 1.05rem 0; cursor: pointer; font-size: .98rem; font-weight: 800; transition: color .18s ease; }
.faq-list summary:hover { color: var(--purple); }
.faq-list details p { max-width: 42rem; padding: 0 0 .95rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }

.download-section { display: grid; grid-template-columns: 8rem 1fr auto; grid-template-areas: "icon title button" "icon copy button"; column-gap: 1.5rem; align-content: center; background: var(--purple); color: white; }
.download-art { grid-area: icon; width: 7.5rem; align-self: center; justify-self: center; }
.download-section h2 { grid-area: title; max-width: 45rem; font-size: clamp(2.25rem, 3.5vw, 3.15rem); }
.download-section p { grid-area: copy; margin-top: .45rem; color: rgba(255,255,255,.84); }
.download-copy { max-width: 43rem; }

.look-panda { position: fixed; right: -2.25rem; bottom: -2.6rem; z-index: 45; width: clamp(11rem, 16vw, 14.5rem); display: none; opacity: 0; pointer-events: none; transform-origin: 58% 82%; filter: drop-shadow(0 1rem 1.2rem rgba(28,24,18,.18)); transition: opacity .3s ease; }
.look-panda.is-ready { opacity: 1; }
.look-panda-motion { position: relative; width: 100%; }
.look-panda img { width: 100%; }
.look-pupil { position: absolute; width: 4.2%; aspect-ratio: 1; border-radius: 50%; background: #191816; box-shadow: inset -.08rem -.08rem .12rem rgba(255,255,255,.16); }
.look-pupil::after { content: ""; position: absolute; top: 17%; left: 20%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.88); }
.look-pupil-left { left: 43.5%; top: 51.6%; }
.look-pupil-right { left: 74%; top: 48.6%; }

footer { padding: 3.2rem max(1.5rem, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr auto; gap: .9rem 1.8rem; align-items: center; border-top: .0625rem solid var(--line); background: var(--paper); }
footer > p { color: var(--muted); font-size: .875rem; }
footer nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 1.4rem; color: var(--muted); font-size: .875rem; font-weight: 700; }
footer small { grid-column: 1 / -1; margin-top: 1rem; color: rgba(33,31,26,.48); }

.legal-page { min-height: 100vh; }
.legal-shell { width: min(calc(100% - 2.5rem), 51.25rem); margin: 6.8rem auto; }
.legal-shell .brand { margin-bottom: 4rem; }
.kicker { margin-bottom: .75rem; color: var(--purple); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
.legal-shell h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
.legal-meta { margin: 1rem 0 2.75rem; color: var(--muted); }
.legal-shell h2 { margin-top: 2.6rem; font-size: 1.9rem; }
.legal-shell p, .legal-shell li { color: var(--muted); }
.legal-shell a { color: #4f40c4; text-decoration: underline; text-underline-offset: .2rem; }
.legal-back { display: inline-flex; margin-top: 3rem; font-weight: 800; }

.content-page { background: var(--paper); }
.content-page .site-header nav a[aria-current="page"] { color: var(--ink); }
.content-hero { padding: clamp(4rem, 7vw, 6rem) max(1.5rem, calc((100vw - var(--max)) / 2)); text-align: center; background: radial-gradient(circle at 50% 30%, rgba(240, 230, 255, 0.45), transparent 70%), var(--cream); }
.content-hero-blog { background: radial-gradient(circle at 50% 30%, rgba(230, 220, 255, 0.65), transparent 70%), var(--lavender); }
.content-hero-support { background: radial-gradient(circle at 50% 30%, rgba(215, 235, 255, 0.6), transparent 70%), var(--blue-cream); }
.content-hero h1 { max-width: 52rem; margin: .5rem auto 0; font-size: clamp(2.1rem, 3.8vw, 2.85rem); line-height: 1.25; letter-spacing: -.025em; }
.content-hero > p:not(.eyebrow) { max-width: 38rem; margin: .85rem auto 0; color: var(--muted); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.62; }

/* Blog Hub Layout */
.blog-shell { width: min(calc(100% - 3rem), 72rem); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.blog-categories { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.blog-category-tag { padding: .45rem 1rem; border-radius: 999px; background: rgba(255,255,255,.65); border: .0625rem solid rgba(33,31,26,.08); color: var(--muted); font-size: .84rem; font-weight: 800; cursor: pointer; transition: all .18s ease; text-decoration: none; }
.blog-category-tag:hover { background: white; color: var(--ink); border-color: rgba(100,85,223,.3); transform: translateY(-.1rem); }
.blog-category-tag.is-active { background: var(--purple); color: white; border-color: var(--purple); box-shadow: 0 .25rem .75rem rgba(100,85,223,.25); }

.blog-featured { display: grid; grid-template-columns: minmax(18rem, 1.15fr) minmax(18rem, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 1.75rem; background: rgba(255,255,255,.82); border: .0625rem solid rgba(33,31,26,.08); backdrop-filter: blur(1rem); box-shadow: 0 .75rem 2.5rem rgba(48,38,23,.06); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); text-decoration: none; transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease, border-color .25s ease; }
.blog-featured:hover { transform: translateY(-.25rem); border-color: rgba(100,85,223,.35); box-shadow: 0 1.25rem 3.5rem rgba(100,85,223,.12); }
.blog-featured-img { display: grid; place-items: center; overflow: hidden; border-radius: 1.25rem; background: #f4efe9; padding: 1.25rem; }
.blog-featured-img img { width: auto; height: auto; max-height: 22rem; max-width: 100%; aspect-ratio: 1206 / 2622; object-fit: contain; border-radius: 1.15rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 .75rem 2rem rgba(48,38,23,.1); }
.blog-featured-content { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.blog-featured-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .24rem .65rem; border-radius: 999px; background: rgba(100,85,223,.08); color: var(--purple); font-size: .75rem; font-weight: 850; }
.blog-featured h2 { font-size: clamp(1.45rem, 2.5vw, 1.95rem); line-height: 1.32; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.blog-featured p { color: var(--muted); font-size: .95rem; line-height: 1.65; margin: 0; }
.blog-meta { display: flex; align-items: center; gap: .85rem; color: #857e72; font-size: .8rem; font-weight: 700; margin-top: .4rem; }
.blog-read-btn { display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem; font-size: .9rem; font-weight: 850; color: var(--purple); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.75rem; }
.blog-card { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.5rem; background: rgba(255,255,255,.82); border: .0625rem solid rgba(33,31,26,.08); backdrop-filter: blur(.8rem); box-shadow: 0 .5rem 1.75rem rgba(48,38,23,.04); text-decoration: none; transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s ease, border-color .22s ease; }
.blog-card:hover { transform: translateY(-.25rem); border-color: rgba(100,85,223,.3); box-shadow: 0 1rem 2.8rem rgba(100,85,223,.1); }
.blog-card-thumb { height: 13.5rem; display: grid; place-items: center; overflow: hidden; border-radius: 1.15rem; background: #f4efe9; padding: 1rem; margin-bottom: 1.2rem; }
.blog-card-thumb img { width: auto; height: 100%; max-height: 11.5rem; aspect-ratio: 1206 / 2622; object-fit: contain; border-radius: .85rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 .5rem 1.5rem rgba(48,38,23,.08); }
.blog-card-thumb.mac-thumb img { aspect-ratio: 944 / 1196; }
.blog-card-tag { align-self: flex-start; padding: .2rem .55rem; border-radius: 999px; background: rgba(100,85,223,.08); color: var(--purple); font-size: .72rem; font-weight: 850; margin-bottom: .5rem; }
.blog-card h3 { font-size: 1.15rem; font-weight: 850; line-height: 1.4; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.blog-card p { color: var(--muted); font-size: .86rem; line-height: 1.6; margin: .55rem 0 0; flex: 1; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: .85rem; border-top: .0625rem solid rgba(33,31,26,.06); font-size: .78rem; color: #8a8377; font-weight: 700; }
.blog-card-footer span:last-child { color: var(--purple); font-weight: 850; }

/* Updates Timeline Layout */
.updates-shell { width: min(calc(100% - 3rem), 56rem); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.updates-timeline { display: flex; flex-direction: column; gap: 2rem; position: relative; }
.release-card { position: relative; padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 1.65rem; background: rgba(255,255,255,.86); border: .0625rem solid rgba(33,31,26,.08); backdrop-filter: blur(1rem); box-shadow: 0 .75rem 2.5rem rgba(48,38,23,.05); transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s ease, border-color .22s ease; }
.release-card:hover { transform: translateY(-.2rem); border-color: rgba(100,85,223,.28); box-shadow: 0 1.25rem 3.2rem rgba(100,85,223,.09); }
.release-card-latest { border-color: rgba(100,85,223,.3); box-shadow: 0 .9rem 2.8rem rgba(100,85,223,.08); }
.release-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.release-version-wrap { display: flex; align-items: center; gap: .65rem; }
.release-version-pill { padding: .26rem .75rem; border-radius: 999px; background: var(--purple); color: white; font-size: .84rem; font-weight: 900; letter-spacing: .02em; }
.release-badge-latest { padding: .24rem .65rem; border-radius: 999px; background: rgba(16,185,129,.12); color: #059669; font-size: .72rem; font-weight: 850; }
.release-card-header time { color: #857e72; font-size: .82rem; font-weight: 700; }
.release-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 850; line-height: 1.35; color: var(--ink); letter-spacing: -.02em; margin: .35rem 0 1.25rem; }
.release-groups { display: grid; gap: 1.15rem; }
.release-group { display: flex; flex-direction: column; gap: .55rem; }
.release-group-title { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 850; }
.release-tag-green { color: #059669; }
.release-tag-purple { color: #6d28d9; }
.release-tag-amber { color: #d97706; }
.release-list { margin: 0; padding-left: 1.25rem; color: #5a5449; font-size: .88rem; line-height: 1.68; }
.release-list li { margin-top: .4rem; }
.release-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: .0625rem solid rgba(33,31,26,.06); font-size: .84rem; font-weight: 800; }
.release-card-actions a { color: var(--purple); text-decoration: underline; text-underline-offset: .2rem; transition: color .18s ease; }
.release-card-actions a:hover { color: #4338ca; }
.older-releases-link { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 1.1rem 1.5rem; margin-top: .5rem; border-radius: 1.2rem; background: rgba(255,255,255,.6); border: .0625rem solid rgba(33,31,26,.08); color: var(--ink); font-size: .92rem; font-weight: 800; text-decoration: none; transition: all .18s ease; }
.older-releases-link:hover { background: white; border-color: rgba(100,85,223,.3); color: var(--purple); transform: translateY(-.1rem); }

/* Support Hub Layout */
.support-shell { width: min(calc(100% - 3rem), 68rem); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.5rem); }
.support-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.support-cat-card { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.45rem; background: rgba(255,255,255,.82); border: .0625rem solid rgba(33,31,26,.08); backdrop-filter: blur(1rem); box-shadow: 0 .5rem 1.75rem rgba(48,38,23,.04); text-decoration: none; transition: transform .22s cubic-bezier(0.16,1,0.3,1), box-shadow .22s ease, border-color .22s ease; }
.support-cat-card:hover { transform: translateY(-.25rem); border-color: rgba(100,85,223,.3); box-shadow: 0 1rem 2.8rem rgba(100,85,223,.1); }
.support-cat-icon { width: 2.75rem; height: 2.75rem; border-radius: .95rem; background: rgba(100,85,223,.08); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.support-cat-card h3 { font-size: 1.08rem; font-weight: 850; color: var(--ink); margin: 0; }
.support-cat-card p { color: var(--muted); font-size: .84rem; line-height: 1.55; margin: .45rem 0 0; }

.support-block { display: flex; flex-direction: column; gap: 1.5rem; }
.support-block-header { text-align: center; max-width: 42rem; margin: 0 auto; }
.support-block-header h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 850; color: var(--ink); letter-spacing: -.02em; margin: 0; }
.support-block-header p { color: var(--muted); font-size: .92rem; margin-top: .45rem; }

.status-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.status-card { padding: 1.5rem; border-radius: 1.35rem; background: rgba(255,255,255,.82); border: .0625rem solid rgba(33,31,26,.08); display: flex; flex-direction: column; align-items: center; text-align: center; }
.status-emoji { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 1.65rem; font-weight: 900; padding: .5rem 1.1rem; border-radius: .95rem; margin-bottom: .85rem; }
.status-ready .status-emoji { background: rgba(16,185,129,.12); color: #059669; }
.status-waiting .status-emoji { background: rgba(245,158,11,.12); color: #b45309; }
.status-error .status-emoji { background: rgba(239,68,68,.12); color: #dc2626; }
.status-card strong { font-size: 1rem; font-weight: 850; color: var(--ink); }
.status-card p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-top: .4rem; }

.support-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.support-step-item { padding: 1.6rem; border-radius: 1.35rem; background: rgba(255,255,255,.82); border: .0625rem solid rgba(33,31,26,.08); position: relative; }
.support-step-num { font-size: .78rem; font-weight: 900; color: var(--purple); background: rgba(100,85,223,.1); padding: .2rem .55rem; border-radius: 999px; display: inline-block; margin-bottom: .85rem; }
.support-step-item h3 { font-size: 1.05rem; font-weight: 850; color: var(--ink); margin: 0; }
.support-step-item p { font-size: .84rem; color: var(--muted); line-height: 1.6; margin-top: .45rem; }

.support-faq-list { max-width: 52rem; margin: 0 auto; width: 100%; border-top: .0625rem solid var(--line); }
.support-faq-list details { border-bottom: .0625rem solid var(--line); }
.support-faq-list summary { padding: 1.1rem 1.5rem 1.1rem 0; cursor: pointer; font-size: 1rem; font-weight: 800; color: var(--ink); transition: color .18s ease; }
.support-faq-list summary:hover { color: var(--purple); }
.support-faq-list details p { padding: 0 0 1rem; color: var(--muted); font-size: .88rem; line-height: 1.68; margin: 0; }

.feedback-card { padding: clamp(2rem, 4vw, 3rem); border-radius: 1.75rem; background: linear-gradient(135deg, rgba(238,234,255,.7), rgba(255,248,240,.7)); border: .0625rem solid rgba(100,85,223,.2); text-align: center; max-width: 52rem; margin: 0 auto; width: 100%; }
.feedback-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 850; color: var(--ink); margin: 0; }
.feedback-card p { color: var(--muted); font-size: .92rem; line-height: 1.62; max-width: 36rem; margin: .65rem auto 1.5rem; }
.feedback-card .button { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 56.25rem) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .support-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-guide-grid { grid-template-columns: 1fr; }
  .support-steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  .support-categories { grid-template-columns: 1fr; }
}
.article-shell { width: min(calc(100% - 3rem), 66rem); margin: 0 auto; padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.article-header > a, .article-breadcrumb { display: inline-flex; align-items: center; gap: .35rem; color: var(--purple); font-size: .84rem; font-weight: 850; text-decoration: none; padding: .26rem .75rem; border-radius: 999px; background: rgba(100,85,223,.08); border: .0625rem solid rgba(100,85,223,.14); transition: all .18s ease; }
.article-header > a:hover, .article-breadcrumb:hover { background: rgba(100,85,223,.16); color: #4338ca; transform: translateX(-.15rem); }
.article-header h1 { margin-top: .85rem; font-size: clamp(1.85rem, 3.8vw, 2.75rem); line-height: 1.28; letter-spacing: -.025em; color: var(--ink); }
.article-header p { max-width: 38rem; margin: 1rem auto 0; color: var(--muted); font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.65; }
.article-cover { margin: clamp(2.5rem, 5vw, 4rem) auto; overflow: hidden; border-radius: 1.35rem; background: transparent; }
.article-cover img { width: 100%; height: auto; }
.article-cover-phone { display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); background: transparent; border-radius: 0; box-shadow: none; }
.article-cover-phone img { width: min(100%, 22rem); border-radius: 1.35rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 1.5rem 3.5rem rgba(48,38,23,.12); }
.article-body { width: min(100%, 43rem); margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; }
.article-body p { margin-top: 1.1rem; color: #4e4941; font-size: 1.06rem; line-height: 1.95; }
.article-body .article-lead { margin-top: 0; color: var(--ink); font-size: clamp(1.2rem, 2.3vw, 1.38rem); line-height: 1.8; font-weight: 600; }
.article-body strong { color: var(--ink); }
.article-body mark, .article-highlight mark {
  margin: 0 -.05em;
  padding: .02em .14em .08em;
  border-radius: .18em;
  color: inherit;
  background: linear-gradient(transparent 28%, rgba(255, 220, 72, .72) 28%, rgba(255, 220, 72, .72) 88%, transparent 88%);
  font-weight: 850;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.article-highlight { margin: 2rem 0 2.75rem; padding: 1.25rem 1.4rem; border-left: .3rem solid var(--purple); border-radius: 0 1rem 1rem 0; background: var(--lavender); color: var(--ink); font-size: 1.05rem; line-height: 1.8; }
.article-highlight strong { font-weight: 900; }
.article-body h2 { margin-top: 4.25rem; font-size: clamp(1.85rem, 4vw, 2.6rem); }
.article-figure, .article-gallery { width: min(calc(100vw - 3rem), 52rem); margin: 3.5rem 0 3.75rem 50%; transform: translateX(-50%); }
.article-figure { display: grid; place-items: center; }
.article-figure img, .article-gallery img { display: block; height: auto; border-radius: 1.25rem; border: .0625rem solid rgba(33,31,26,.08); box-shadow: 0 1.25rem 3rem rgba(48,38,23,.1); }
.article-figure img { width: 100%; }
.article-figure-phone img { width: min(100%, 19.5rem); }
.article-figure-mac img { width: min(100%, 32rem); }
.article-figure figcaption, .article-gallery figcaption { margin-top: .9rem; color: var(--muted); font-size: .8rem; line-height: 1.6; text-align: center; }
.article-gallery { width: min(calc(100vw - 3rem), 44rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.article-gallery figure { min-width: 0; }
.article-gallery img { width: 100%; }
.article-steps-list { margin: 1.5rem 0 2rem; padding-left: 1.5rem; line-height: 1.85; }
.article-steps-list li { margin-bottom: .75rem; }
.article-next { width: min(100%, 42rem); margin: 4rem auto 0; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; border-top: .0625rem solid var(--line); font-size: .88rem; font-weight: 800; }

@media (min-width: 64rem) and (pointer: fine) {
  .look-panda { display: block; }
  .remote-gallery { width: calc(100% - 6rem); }
}

@media (max-width: 56.25rem) {
  :root { --header: 3.85rem; }
  .hero, .layouts-section, .remote-section, .product-section, .how-section, .quick-section, .scenarios-section, .pro-section, .mac-section, .faq-section { min-height: 0; padding: 4.25rem 1.25rem; }
  .download-section { min-height: 0; padding: 2.8rem 1.25rem; }
  .site-header {
    top: 0;
    width: 100%;
    height: 3.85rem;
    padding: 0 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .site-header nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 3.85rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(255, 253, 248, 0.98);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    padding: 1.5rem;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease;
  }
  body.nav-open .mobile-drawer {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  .mobile-drawer a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 1rem;
    border-radius: 1rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    border-bottom: .0625rem solid rgba(33, 31, 26, 0.06);
  }
  .mobile-drawer a:active {
    background: rgba(33, 31, 26, 0.05);
  }
  .mobile-drawer .mobile-drawer-download {
    margin-top: 1.8rem;
    width: 100%;
    min-height: 3.4rem;
    border-radius: 1rem;
    background: var(--ink);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
  }
  .brand img { width: 1.95rem; height: 1.95rem; border-radius: .55rem; }
  .header-download { display: none; }
  .hero { min-height: calc(100svh - 4.5rem); padding: 4.5rem 1.25rem 3rem; }
  .hero::after { width: 115vw; height: 32rem; }
  .hero-copy { width: 100%; text-align: center; }
  .hero h1 { width: 100%; max-width: 100%; margin: auto; font-size: clamp(2.1rem, 9.2vw, 3.2rem); }
  .hero-line-first { padding-left: .18em; }
  .hero-actions { justify-content: center; }
  .hero-key { width: clamp(4.7rem, 20vw, 5.8rem); font-size: .82rem; }
  .hero-key-blue { top: 8%; left: -1.2rem; }
  .hero-key-lilac { bottom: 9%; left: 7%; }
  .hero-key-yellow { top: 12%; right: -1.4rem; }
  .hero-key-coral { right: 4%; bottom: 7%; }
  .hero-key-cream { top: 52%; right: -2rem; font-size: 2rem; }
  .hero-key-dark { bottom: 1.5%; left: 34%; width: 8.8rem; }
  .hero-key-small { top: 2%; left: 28%; width: 4.2rem; }
  .hero-key-peach { right: 27%; bottom: 2%; left: auto; }
  .hero-trackpad { display: none; }
  .hero-knob { top: 3%; right: 28%; width: 4.3rem; }
  .hero-slider { right: 25%; bottom: 13%; width: 7rem; height: 2rem; }
  .layouts-section, .product-section, .quick-section, .mac-section { grid-template-columns: 1fr; }
  .layouts-section { gap: 2.25rem; padding-top: 3.9rem; padding-bottom: 3.9rem; overflow: hidden; }
  .layout-tabs { width: 100vw; max-width: none; display: flex; margin: 1.5rem calc(50% - 50vw) 0; padding: .35rem 1.25rem .75rem; gap: .65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-padding-inline: 1.25rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .layout-tabs::-webkit-scrollbar { display: none; }
  .layout-tab { width: max-content; min-width: 10.5rem; min-height: 3.5rem; flex: none; padding: .55rem .75rem; grid-template-columns: 2.1rem auto; gap: .65rem; scroll-snap-align: start; }
  .layout-tab img { width: 2.1rem; height: 2.1rem; border-radius: .55rem; }
  .layout-preview { margin-top: 0; }
  .layout-preview-frame img { width: auto; height: min(48svh, 27rem); max-width: 72vw; border-radius: 1.15rem; }
  .layout-preview figcaption { align-items: center; text-align: center; }
  .remote-section { gap: 2.25rem; padding-top: 3.9rem; padding-bottom: 3.9rem; }
  .remote-intro { grid-template-columns: 1fr; gap: .9rem; text-align: center; }
  .remote-intro p { margin-right: auto; margin-left: auto; }
  .remote-showcase { grid-template-columns: 1fr; gap: 2rem; }
  .remote-display { order: 1; }
  .remote-display-img { width: auto; height: min(48svh, 27rem); max-width: 72vw; }
  .remote-display-caption { align-items: center; text-align: center; }
  .remote-nav {
    order: 2;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1.25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: .35rem 1.25rem .75rem;
    gap: .75rem;
  }
  .remote-nav::-webkit-scrollbar { display: none; }
  .remote-nav-item {
    width: max-content;
    min-width: 15.5rem;
    flex: none;
    scroll-snap-align: start;
  }
  .remote-nav-item:hover, .remote-nav-item.is-active { transform: none; }
  .product-section { gap: 2.5rem; }
  .product-shot { order: 2; margin-top: .5rem; }
  .product-feature-list { margin-top: 1.5rem; text-align: left; }
  .how-section { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "art" "steps"; grid-template-rows: auto; }
  .connection-art { width: min(90vw, 26rem); margin: 0 auto 2.5rem; }
  .how-section > .eyebrow, .how-section > h2 { text-align: center; }
  .quick-screens { margin-top: 2.5rem; }
  .quick-screens img { width: min(100%, 18rem); height: auto; border-radius: 1.15rem; }
  .scenarios-section { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 3.9rem; padding-bottom: 3.9rem; }
  .role-panels { min-height: 15rem; text-align: center; }
  .role-panel > p:not(.role-name) { margin-right: auto; margin-left: auto; }
  .role-apps, .role-links { justify-content: center; }
  .role-stage { width: min(72vw, 19rem); }
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-purchase { grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); }
  .mac-section > img { width: min(90vw, 31rem); height: auto; margin: 2rem auto 0; }
  .faq-section { grid-template-columns: 1fr; grid-template-areas: "title" "list"; }
  .faq-section > h2 { margin-bottom: 2.5rem; }
  .download-section { grid-template-columns: 7rem 1fr; grid-template-areas: "icon title" "icon copy" "button button"; }
  .download-art { width: 6.5rem; }
  .download-section .download-actions { margin-top: 1.35rem; }
  .layout-copy, .product-copy, .quick-copy, .mac-copy, .faq-section > h2 { text-align: center; }
  .layout-copy > p, .quick-copy > p:not(.eyebrow), .product-copy > p:not(.eyebrow), .mac-copy > p:not(.eyebrow) { margin-right: auto; margin-left: auto; }
  .product-copy .eyebrow, .quick-copy .eyebrow, .mac-copy .eyebrow { text-align: center; }
  .mac-copy > a { margin-right: auto; margin-left: auto; }
  .content-hero { padding: 5rem 1.25rem; text-align: center; }
  .content-hero h1, .content-hero > p { margin-right: auto; margin-left: auto; }
  .updates-feed, .post-feed { padding: 4rem 1.25rem; }
  .release-columns { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; text-align: center; }
  .post-card-phone { min-height: 0; }
  .post-card-phone img { width: min(100%, 18rem); }
  .article-cover-phone { padding: 1rem 0; }
  .article-cover-phone img { width: min(100%, 20rem); }
  .article-body { margin-top: 3.5rem; }
  .article-figure, .article-gallery { width: min(calc(100vw - 2.5rem), 44rem); }
  .article-shell { width: min(calc(100% - 2.5rem), 66rem); }
}

@media (max-width: 43.75rem) {
  .header-download { font-size: .75rem; }
  .layout-copy h2, .quick-copy h2, .role-panel h2, .faq-section > h2, .remote-intro h2, .product-copy h2, .how-section > h2, .pro-heading h2, .mac-section h2 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .hero-key-small { display: none; }
  .hero-key-dark { left: 30%; }
  .hero-slider { right: 28%; bottom: 8%; }
  .quick-screens { margin-right: -1.25rem; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(75vw, 18rem); justify-content: start; gap: 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 1.25rem 1rem 0; }
  .quick-screens::-webkit-scrollbar { display: none; }
  .quick-screens figure { scroll-snap-align: start; }
  .product-feature-item { grid-template-columns: 2.4rem 1fr; gap: .9rem; }
  .product-feature-icon { width: 2.4rem; height: 2.4rem; border-radius: .75rem; }
  .role-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; }
  .role-tabs button { padding: .62rem .2rem; }
  .role-tabs strong { font-size: .82rem; }
  .role-tabs span { font-size: .68rem; }
  .role-panels { min-height: 14.75rem; margin-top: 1.45rem; }
  .role-apps li { min-height: 2.75rem; padding: .42rem .58rem; }
  .role-apps img { width: 1.8rem; height: 1.8rem; }
  .role-apps span { font-size: .72rem; }
  .pro-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 1.35rem 1.4rem; min-height: 0; }
  .benefit-top { margin-bottom: .95rem; }
  .benefit-icon { width: 2.5rem; height: 2.5rem; border-radius: .85rem; }
  .pro-purchase { grid-template-columns: 1fr; }
  .pro-companion > img { width: 13rem; }
  .pro-benefits-list { grid-template-columns: 1fr; gap: 1.2rem; }
  .pro-plan-card { padding: 1.25rem 1.25rem; }
  .pro-plan-badge { right: .85rem; top: -.65rem; font-size: .65rem; padding: .2rem .6rem; }
  .pro-paywall-preview { width: min(76vw, 20rem); }
  .download-section { grid-template-columns: 1fr; grid-template-areas: "icon" "title" "copy" "button"; text-align: center; }
  .download-art { width: min(48vw, 8rem); margin: auto; }
  footer { padding: 2.9rem 1.25rem; grid-template-columns: 1fr; }
  footer nav { grid-column: auto; grid-row: auto; flex-wrap: wrap; margin-top: .75rem; }
  footer small { grid-column: auto; }
  .release-entry > header { grid-template-columns: 1fr; gap: .6rem; }
  .release-entry time { grid-row: 1; }
  .release-entry > header > div { grid-row: 2; }
  .article-header h1 { font-size: clamp(2.65rem, 12vw, 3.5rem); }
  .article-gallery { width: calc(100vw - 1.25rem); margin-right: -.625rem; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 19rem); justify-content: start; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 .625rem 1rem; }
  .article-gallery figure { scroll-snap-align: center; }
  .article-next { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .type-caret { display: none; }
}