:root {
  color-scheme: light;
  --ink: #20232a; --paper: #f6f7f9; --white: #ffffff; --blue: #305adc;
  --blue-deep: #274cbc; --orange: #bbcdff; --muted: #606772; --line: #dfe2e8;
  --display: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; font-size: 1rem; line-height: 1.65; }
a { color: inherit; text-underline-offset: .25em; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1, h2 { text-wrap: balance; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.shell { width: min(1152px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 20; padding: .8rem; background: white; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-weight: 650; line-height: 1.4; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; color: white; background: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.07em; }
.brand-caption { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }
nav { display: flex; align-items: center; gap: .75rem; }
nav a { padding: .6rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 550; text-decoration: none; }
nav a:hover, .nav-active { background: #e9ecf1; }
.kicker { color: var(--muted); font-size: .8rem; font-weight: 550; letter-spacing: .025em; }
.gallery-intro { text-align: center; padding-block: 55px 45px; }
.gallery-intro .kicker { margin-bottom: 1.4rem; }
.gallery-intro h1 { margin-bottom: 1.4rem; font-size: clamp(3.2rem, 6.8vw, 5.75rem); line-height: 1.08; font-weight: 650; letter-spacing: -.065em; }
.gallery-intro h1 span { color: var(--blue); }
.gallery-intro > p:not(.kicker) { margin-bottom: 1.4rem; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.intro-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; font-size: .8rem; color: var(--muted); }
.intro-platforms span + span::before { content: "/"; margin-right: .7rem; color: #afb6c2; }
.catalog { padding-bottom: 90px; }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.catalog-heading h2 { font-size: 1.15rem; font-weight: 650; margin: 0; letter-spacing: -.025em; }
.catalog-heading > span { font-size: .875rem; color: var(--muted); }
.app-grid { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 0 18px; scrollbar-width: thin; scrollbar-color: #bdc6d9 transparent; }
.app-grid > .catalog-card { flex: 0 0 47%; scroll-snap-align: start; display: flex; flex-direction: column; }
.app-grid .card-details { flex: 1; display: flex; flex-direction: column; }
.app-grid .card-footer { margin-top: auto; }
.catalog-controls { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; gap: 8px; margin: 22px auto 0; padding: 6px; border: 1px solid #e1e5ed; border-radius: 999px; background: #ffffffed; box-shadow: 0 6px 24px #202a4310; }
.catalog-controls[hidden] { display: none; }
.catalog-controls button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.2rem; transition: background .2s, color .2s; }
.catalog-controls button:hover:not([aria-disabled="true"]) { background: #edf1fb; color: var(--blue); }
.catalog-controls button[aria-disabled="true"] { opacity: .3; cursor: default; }
.catalog-dots { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.catalog-dots button { width: 32px; border-radius: 12px; }
.catalog-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #b6bdca; transition: width .25s, background .25s; }
.catalog-dots button[aria-current="step"]::before { width: 24px; background: var(--blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.catalog-ready .app-grid { scrollbar-width: none; }
.catalog-ready .app-grid::-webkit-scrollbar { display: none; }
button:focus-visible, .app-grid:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.app-grid a:focus-visible { outline-offset: -4px; }
.theme-placeholder-one { --stage-bg: #e1eeeb; --stage-ink: #377367; }
.theme-placeholder-two { --stage-bg: #f5e8dc; --stage-ink: #9a6341; }
.theme-placeholder-three { --stage-bg: #e5eaf2; --stage-ink: #526986; }
.placeholder-art { display: grid; place-items: center; width: 220px; height: 220px; max-width: 100%; margin: 50px auto 0; border: 1px solid currentColor; border-radius: 28%; font-family: var(--display); font-size: 6rem; font-weight: 600; letter-spacing: -.07em; opacity: .5; transform: rotate(-8deg); }
.theme-placeholder-two .placeholder-art { transform: rotate(8deg); }
.placeholder-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--stage-bg); color: var(--stage-ink); font-size: 1.3rem; font-weight: 600; }
.theme-asudoku { --app-color: #3158c8; --stage-bg: #e8edff; --stage-ink: #294cb4; }
.theme-summetry { --app-color: #7555cb; --stage-bg: #ebe5ff; --stage-ink: #6246a7; }
.catalog-card { min-width: 0; background: white; border: 1px solid #e1e5ec; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 18px #1a315d06; transition: border-color .25s, box-shadow .25s; }
.catalog-card:focus-within { border-color: #8da8eb; }
@media (hover: hover) { .catalog-card:has(a):hover { border-color: #c6d2ed; box-shadow: 0 10px 22px #1a315d12; } }
.card-stage { position: relative; height: 485px; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 34px; background: var(--stage-bg); color: var(--stage-ink); text-align: center; text-decoration: none; }
.stage-category { display: block; font-size: .8rem; margin-bottom: 12px; }
.stage-topline { display: flex; align-self: stretch; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 12px; text-align: left; }
.stage-topline .stage-category { margin-bottom: 0; }
.stage-status { flex: none; padding: .25rem .65rem; border: 1px solid #ffffffb8; border-radius: 999px; background: #ffffffde; color: var(--stage-ink); font-size: .75rem; font-weight: 650; line-height: 1.4; }
.card-stage h3 { margin: 0; font-size: clamp(1.8rem, 3.1vw, 2.9rem); font-weight: 600; line-height: 1.13; letter-spacing: -.045em; }
.stage-phone { flex: none; width: 240px; margin-top: 32px; transform: rotate(-5deg); transition: transform .4s ease; }
.stage-screen { width: 100%; height: auto; }
.theme-summetry .stage-phone { transform: rotate(5deg); }
.card-stage:hover .stage-phone { transform: translateY(-8px) rotate(0); }
.stage-label { position: absolute; right: 22px; bottom: 22px; border: 1px solid #ffffffb3; background: #ffffffde; padding: .4rem .85rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.card-details { padding: 28px 30px 23px; }
.card-identity { display: flex; align-items: center; gap: 15px; }
.card-identity > div { flex: 1; min-width: 0; }
.card-identity img { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 2px 8px #20232a0d; }
.card-identity h3 { font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 5px; }
.card-identity h3 a { text-decoration: none; }
.card-identity p { margin: 0; color: var(--muted); font-size: .875rem; }
.device-availability { display: inline-flex; align-items: center; flex: none; gap: 2px; margin-left: auto; padding: 5px 7px; border: 1px solid #e2e8f2; border-radius: 999px; background: #f7f9fd; color: var(--app-color, var(--ink)); }
.device-icon { display: block; width: 22px; height: 22px; }
.card-description { margin: 20px 0 24px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #edf0f4; padding-top: 20px; }
.card-footer-link { justify-content: flex-end; }
.release-label { font-size: .8rem; color: var(--muted); }
.card-footer a { text-decoration: none; color: var(--app-color); font-size: .875rem; font-weight: 600; }
.card-footer a:hover { text-decoration: underline; }
.card-footer a span { margin-left: .4rem; }
.catalog-outlook { display: flex; align-items: center; gap: 20px; margin-top: 28px; padding: 26px 30px; border: 1px dashed #cbd1dc; border-radius: 20px; }
.outlook-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: #e9ecf2; color: #757e8e; border-radius: 13px; font-size: 1.5rem; }
.catalog-outlook h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 600; }
.catalog-outlook p { margin: 0; color: var(--muted); font-size: .875rem; }
.outlook-note { margin-left: auto; font-size: .8rem; color: var(--muted); }
.maker-section { padding-block: 65px 80px; border-top: 1px solid var(--line); }
.maker-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.maker-layout h2 { font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.2; margin: 0; }
.maker-layout h2 span { color: #828894; }
.maker-layout p { color: var(--muted); }
.maker-layout p:last-child { margin-bottom: 0; }
.site-footer { min-height: 105px; padding-block: 25px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.site-footer p { margin: 0; }
.site-footer div { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* Compact home spacing; product pages keep their existing rhythm. */
.home .gallery-intro { padding-block: 28px 23px; }
.home .gallery-intro h1 { margin-bottom: .7rem; }
.home .catalog { padding-bottom: 45px; }
.home .site-footer { min-height: 80px; padding-block: 18px; }
@media (max-width: 640px) {
  .home .gallery-intro { padding-block: 25px; }
  .home .catalog { padding-bottom: 28px; }
}

/* Shared product layout: brand color changes per app; navigation stays global. */
.product-page { --app-color: var(--blue); }
.product-page.summetry-page { --blue: #7555cb; --blue-deep: #6445b7; --app-color: #7555cb; }
.app-icon { width: 72px; border-radius: 18px; }
.product-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding-block: 75px 90px; }
.product-hero-copy { min-width: 0; container-type: inline-size; }
.product-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.875rem, 3cqi, 1.5rem); }
.product-title-row .app-icon { flex: none; width: clamp(3rem, 14cqi, 4.5rem); border-radius: 25%; }
.product-hero .product-title-row h1 { min-width: 0; margin: 0; font-size: clamp(2rem, 4.4vw, 4.5rem); font-size: clamp(2rem, 12cqi, 4.5rem); overflow-wrap: anywhere; }
.product-title-row + .app-overline { margin: 14px 0 26px; font-size: 1rem; }
.product-title-row + .product-lead { margin-top: 28px; }
.hero-release { width: fit-content; margin: 18px 0 14px; padding: .35rem .8rem; border: 1px solid color-mix(in srgb, var(--app-color) 18%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--app-color) 8%, white); color: var(--app-color); font-size: .875rem; font-weight: 650; line-height: 1.4; }
.app-overline + .hero-release { margin-top: -8px; }
.app-overline { color: var(--muted); font-size: .875rem; margin: 22px 0 15px; }
.product-hero h1 { margin-bottom: 24px; font-size: clamp(2.75rem, 4.4vw, 4.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -.06em; }
.product-hero h1 span { color: var(--blue); }
.product-lead { color: var(--muted); font-size: 1.075rem; max-width: 34rem; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.store-button { display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border: 0; border-radius: 12px; color: white; background: var(--ink); line-height: 1.3; font-size: 1rem; text-decoration: none; }
.store-button small { display: block; font-size: .75rem; font-weight: 400; }
.store-button svg { width: 26px; fill: currentColor; }
.hero-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(.75rem, 2vw, 1.25rem); margin-top: 34px; padding: clamp(14px, 3cqi, 22px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.hero-download-main { min-width: 0; }
.hero-download-main > p { margin: 10px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.store-pending { display: inline-flex; align-items: center; min-height: 48px; max-width: 100%; padding: .65rem .9rem; border: 1px dashed #bac3d1; border-radius: 10px; color: var(--muted); background: #f5f7fa; font: inherit; font-weight: 600; font-size: .875rem; line-height: 1.3; text-align: left; cursor: default; }
.app-store-badge { display: inline-block; max-width: 100%; line-height: 0; }
.app-store-badge img { display: block; width: auto; height: 48px; max-width: 100%; }
.hero-qr { align-self: center; }
.hero-qr .qr-surface { width: 110px; height: 110px; margin-bottom: 7px; border-radius: 12px; }
.hero-qr .qr-surface img { width: 88px; height: 88px; }
.hero-qr figcaption { color: var(--muted); font-size: .75rem; font-weight: 500; }
.soft-link { font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--blue-deep); }
.hero-devices { min-height: 590px; position: relative; overflow: hidden; border-radius: 28px; background: #e8edff; }
.summetry-page .hero-devices { background: #ebe5ff; }
.iphone-frame {
  position: relative;
  border: 7px solid #161719;
  border-radius: 35px;
  background: #161719;
  box-shadow: 0 0 0 1px #979a9f, 0 0 0 2px #44474d, 0 24px 45px #17223d30;
}
.iphone-screen { overflow: hidden; border-radius: 28px; background: #161719; }
.iphone-frame::before {
  content: ""; position: absolute; left: -10px; top: 80px;
  width: 3px; height: 26px; border-radius: 2px 0 0 2px; background: #55585f;
  box-shadow: 0 36px 0 #55585f;
}
.iphone-frame::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 27%; height: 8px; border-radius: 999px; background: #101113;
  box-shadow: inset -7px 0 0 -3px #252936;
}
.device img { width: 100%; height: auto; }
.hero-devices .device { width: 245px; position: absolute; }
.device-front { left: 10%; top: 65px; transform: rotate(-6deg); z-index: 2; }
.device-back { right: 0; top: 125px; transform: rotate(7deg); }
.summetry-page .device-front { left: 50%; top: 65px; width: 270px; transform: translateX(-50%) rotate(5deg); }
.floating-tile { display: none; }
.promise-strip { background: white; border-block: 1px solid var(--line); padding-block: 26px; }
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.promise-grid-expanded { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.promise-grid p { margin: 0; }
.promise-grid strong, .promise-grid span { display: block; }
.promise-grid strong { font-size: 1rem; font-weight: 600; }
.promise-grid span { color: var(--muted); font-size: .875rem; margin-top: 4px; }
.promise-grid.promise-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; }
.help-strip { padding-block: 32px; background: white; border-bottom: 1px solid var(--line); }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.help-grid > div + div { border-left: 1px solid var(--line); padding-left: 2rem; }
.help-grid h2 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.help-grid p { margin: 0; max-width: 56ch; font-size: 1rem; color: var(--muted); }
.utility-strip { padding-block: 32px; background: white; border-bottom: 1px solid var(--line); }
.utility-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.utility-grid > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.utility-grid h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.utility-grid p { margin: 0; color: var(--muted); font-size: 1rem; }
@media (max-width: 900px) {
  .promise-grid.promise-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utility-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .promise-grid.promise-highlights p + p { border: 0; padding-top: 0; }
  .help-grid { grid-template-columns: 1fr; gap: 24px; }
  .help-grid > div + div { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .utility-grid { grid-template-columns: 1fr; }
  .utility-grid > div + div { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
}
.story-section { padding-block: 85px; }
.story-heading { margin-bottom: 45px; }
.story-heading h2, .section-heading h2, .everywhere-section h2, .faq-layout h2 { margin: 0; font-size: clamp(2.1rem, 3.8vw, 3.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.story-heading h2 em { font-style: normal; color: var(--blue); }
.story-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 6rem; }
.training-device { width: 260px; justify-self: center; }
.large-copy { font-size: 1.4rem; line-height: 1.6; letter-spacing: -.015em; margin-bottom: 2rem; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding-block: 20px; border-top: 1px solid var(--line); }
.lesson-list li > span { font-size: .8rem; color: var(--blue-deep); }
.lesson-list p { margin: 4px 0 0; color: var(--muted); }
.screenshot-gallery { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.gallery-visual, .gallery-choices { min-width: 0; }
.gallery-viewport { display: grid; gap: 32px; }
.gallery-ready .gallery-viewport { grid-auto-flow: column; grid-auto-columns: 100%; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: none; cursor: grab; margin-block: -24px -48px; }
.gallery-ready .gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 12px; }
.gallery-ready .gallery-viewport.gallery-dragging { scroll-snap-type: none; }
.gallery-dragging, .gallery-dragging * { cursor: grabbing !important; user-select: none; }
.gallery-slide { display: grid; justify-items: center; gap: 22px; margin: 0; }
.gallery-slide[hidden], .gallery-controls[hidden] { display: none; }
.gallery-ready .gallery-slide { min-width: 0; align-self: start; scroll-snap-align: start; padding-block: 24px 48px; }
.gallery-slide .device { width: min(100% - 20px, 280px); }
.gallery-slide .iphone-screen { aspect-ratio: 1206 / 2622; }
.gallery-slide .device img { width: 100%; height: 100%; object-fit: contain; background: #f6f2e8; user-select: none; }
.gallery-slide figcaption { font-size: .875rem; color: var(--muted); text-align: center; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.gallery-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-size: 1.25rem; cursor: pointer; transition: background .18s, border-color .18s; }
.gallery-controls button:hover { background: #e8edff; border-color: var(--blue); }
.gallery-controls button[aria-disabled="true"] { opacity: .3; cursor: default; }
.gallery-count { min-width: 42px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.gallery-choices { display: grid; gap: 12px; }
.gallery-choice { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px 24px; border: 1px solid transparent; border-left: 3px solid var(--line); border-radius: 0 16px 16px 0; text-decoration: none; transition: background .18s, border-color .18s; }
.gallery-choice:hover { background: #eef1f8; }
.gallery-choice[aria-current="true"] { background: #e8edff; border-color: #dce3f3; border-left-color: var(--blue); }
.gallery-marker { display: block; width: 10px; height: 10px; margin: 7px 0 0 2px; border: 2px solid #9aa8bf; border-radius: 50%; background: transparent; transition: background .18s, border-color .18s, box-shadow .18s; }
.gallery-choice:hover .gallery-marker { border-color: var(--blue); }
.gallery-choice strong { display: block; font-size: 1.2rem; font-weight: 650; line-height: 1.35; }
.gallery-choice[aria-current="true"] strong { color: var(--blue-deep); }
.gallery-choice[aria-current="true"] .gallery-marker { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px #315bd626; }
.gallery-description { display: block; margin-top: 8px; color: var(--muted); line-height: 1.55; }
.gallery-copy { min-width: 0; }
.gallery-editorial .gallery-choices { gap: 0; margin-left: 20px; }
.gallery-editorial .gallery-choice { padding: 22px 0; gap: 24px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.gallery-editorial .gallery-choice:hover { background: #eef1f866; }
.gallery-editorial .gallery-choice[aria-current="true"] { border-top-color: var(--blue); }
@media (max-width: 800px) {
  .screenshot-gallery { gap: 28px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .gallery-choice { padding: 16px 12px; gap: 10px; }
  .gallery-choice strong { font-size: 1.0625rem; }
}
@media (max-width: 640px) {
  .screenshot-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gallery-slide .device { width: min(65vw, 220px); }
  .gallery-choices { gap: 8px; }
  .gallery-choice { padding: 14px 16px; }
  .gallery-ready .gallery-choice:not([aria-current="true"]) .gallery-description { display: none; }
  .gallery-editorial .gallery-choices { margin-left: 10px; }
  .gallery-editorial .gallery-choice { gap: 14px; padding-block: 18px; }
  .gallery-editorial.gallery-ready .gallery-choice .gallery-description { display: block; }
}
.features-section { padding-block: 75px; background: #edf0f5; }
.section-heading { margin-bottom: 36px; }
.feature-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-card { min-width: 0; padding: 30px; background: white; border: 1px solid #e0e4ec; border-radius: 20px; }
.feature-index { font-size: .8rem; color: var(--blue-deep); }
.feature-card h3 { font-size: 1.65rem; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; margin: 14px 0; }
.feature-card p { color: var(--muted); margin: 0; }
.calendar-art, .value-row, .x-grid, .scan-symbol { display: none; }
.insights-section { padding-block: 75px; }
.story-section + .insights-section { border-top: 1px solid var(--line); }
.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.insight-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight-card { min-width: 0; display: flex; flex-direction: column; }
.insight-copy { padding: 0 4px 20px; }
.insight-copy h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; margin-bottom: 16px; }
.insight-copy p { color: var(--muted); margin-bottom: 14px; }
.insight-copy p:last-child { margin-bottom: 0; }
.insight-figure { margin: auto 0 0; }
.insight-stage { display: grid; place-items: center; padding: 34px 25px; border: 1px solid #dce3f3; border-radius: 24px; background: #e8edff; }
.summetry-page .insight-stage { background: #ebe5ff; border-color: #e0d7f5; }
.insight-stage .device { width: min(100%, 260px); }
.insight-grid-three .device { width: min(100%, 240px); }
.iphone-native-island::after { display: none; }
.insight-figure figcaption { padding: 16px 4px 0; color: var(--muted); font-size: .8rem; }
.insights-section + .everywhere-section { border-top: 1px solid var(--line); }
.feature-illustrated { display: flex; flex-direction: column; }
.feature-illustrated .insight-figure { padding-top: 28px; }
.value-comparison { margin: 28px 0 0; }
.value-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 24px; background: #f6f2e8; border-radius: 20px; }
.value-sample h4 { margin: 0 0 12px; font-size: .875rem; font-weight: 600; text-align: center; }
.sample-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 2px solid #20232a; border-radius: 6px; background: #65686e; }
.sample-cell { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; background: #fff; color: #141a21; font-size: clamp(1rem, 2.4vw, 1.8rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.sample-colored .sample-cell, .sample-shapes .sample-cell { color: var(--value-color); }
.sample-cell img { width: 100%; height: 100%; object-fit: contain; }
.value-comparison figcaption { margin-top: 16px; color: var(--muted); font-size: .875rem; }
.everywhere-section { padding-block: 80px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
.everywhere-copy { color: var(--muted); }
.platform-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 25px; }
.platform-pills span { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; color: var(--ink); font-size: .8rem; }
.faq-section { padding-block: 75px; background: white; border-block: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; position: relative; padding: 20px 2rem 20px 0; font-weight: 550; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; color: var(--blue); font-size: 1.25rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); margin-bottom: 20px; }
.closing-section { padding-block: 60px; }
.closing-inner { display: flex; gap: 2rem; align-items: center; }
.closing-inner > p { flex: 1; margin: 0; font-family: var(--display); font-size: 2.5rem; font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.closing-inner > p strong { color: var(--blue); font-weight: inherit; }
.related-app { margin-top: 3rem; padding-top: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.related-app a { color: var(--blue-deep); }
.download-section { padding-block: 65px; }
.download-panel { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 45px 50px; background: white; border: 1px solid var(--line); border-radius: 24px; }
.download-copy h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; margin-bottom: 16px; }
.download-copy > p:not(.kicker) { color: var(--muted); max-width: 30rem; }
.download-platform { display: inline-block; margin-left: 15px; font-size: .8rem; color: var(--muted); }
.qr-card { margin: 0; text-align: center; }
.qr-surface { display: grid; place-items: center; width: 162px; height: 162px; border: 1px dashed #c8ced8; border-radius: 16px; background: #f9fafc; margin: 0 auto 13px; }
.qr-surface img { width: 128px; height: 128px; }
.qr-card figcaption { font-size: .875rem; font-weight: 600; }
.qr-card > span { font-size: .75rem; color: var(--muted); }
.shared-page { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: #e8edff; }
.shared-card { max-width: 600px; padding: clamp(25px, 6vw, 55px); border: 1px solid var(--line); border-radius: 24px; background: white; }
.shared-brand { margin-bottom: 45px; }
.shared-brand img { width: 48px; border-radius: 12px; }
.shared-card h1, .legal-content > h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }
.shared-card p, .legal-content section p { color: var(--muted); }
.shared-button { display: inline-block; padding: .8rem 1rem; color: white; background: var(--blue); border-radius: 10px; text-decoration: none; }
.shared-note { font-size: .875rem; margin-top: 20px; }
.legal-content { max-width: 820px; padding-block: 70px; }
.legal-lead { font-size: 1.2rem; color: var(--muted); margin: 25px 0 50px; }
.legal-content section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 30px; }
.legal-content h2 { font-size: 1.5rem; font-weight: 600; }
.legal-date { margin-top: 35px; font-size: .875rem; color: var(--muted); }
.support-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-block: 24px 8px; }
.support-app { display: flex; align-items: center; gap: 16px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.support-app:hover { border-color: var(--blue); }
.support-app img { flex: none; width: 56px; border-radius: 14px; }
.support-app strong, .support-app span span { display: block; }
.support-app span span { margin-top: 4px; color: var(--muted); font-size: .875rem; }
.legal-content li { color: var(--muted); margin-bottom: 8px; }
.legal-draft { padding: 20px 24px; border: 1px solid #d9c79f; border-left: 4px solid #aa7a2c; border-radius: 12px; background: #faf5e9; margin-bottom: 32px; }
.legal-draft strong { display: block; margin-bottom: 6px; }
.legal-draft p { color: var(--muted); margin: 0; }
.contact-form { display: grid; gap: .65rem; padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 14px 35px #24304a08; }
.contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .65rem; }
.contact-preview-note { margin: 0 0 .5rem; color: var(--muted); }
.contact-form fieldset[disabled] .contact-submit { opacity: .45; cursor: default; }
.contact-form label { font-weight: 600; margin-top: .55rem; }
.contact-optional { font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid #cfd5df; border-radius: 10px; color: var(--ink); background: var(--white); font: inherit; }
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid #305adc55; outline-offset: 2px; border-color: var(--blue); }
.contact-privacy { margin: .8rem 0 0; color: var(--muted); font-size: .875rem; }
.contact-submit { justify-self: start; margin-top: .3rem; padding: .8rem 1.2rem; border: 0; border-radius: 10px; color: var(--white); background: var(--blue); font-weight: 600; cursor: pointer; }
.contact-submit:hover:not(:disabled) { background: var(--blue-deep); }
.contact-submit:disabled { cursor: wait; opacity: .7; }
.contact-status { margin: .65rem 0 0; padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; line-height: 1.55; }
.contact-status.is-pending { color: var(--muted); background: #f2f4f8; }
.contact-status.is-success { color: #246b55; background: #e6f4ee; }
.contact-status.is-error { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "icon title" "icon message" "icon action"; gap: .18rem .8rem; padding: 1rem 1.1rem; color: #8f3d4a; border: 1px solid #efbdc7; border-left: 4px solid #b44559; background: #fbecef; }
.contact-status.is-error::before { content: '!'; grid-area: icon; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .05rem; border-radius: 50%; color: var(--white); background: #b44559; font-weight: 750; }
.contact-status.is-error strong { grid-area: title; color: #7a2e3d; }
.contact-status.is-error span { grid-area: message; }
.contact-status.is-error a { grid-area: action; width: fit-content; margin-top: .2rem; color: #7a2e3d; text-decoration-thickness: 1.5px; }
.contact-status a { font-weight: 600; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-response-page { min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); }
.form-response { flex: 1; display: grid; place-items: center; padding-block: clamp(48px, 9vw, 112px); }
.form-response-card { width: min(100%, 640px); padding: clamp(30px, 6vw, 56px); border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: 0 18px 45px #24304a10; }
.form-response-mark { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 30px; border-radius: 16px; font-size: 1.65rem; font-weight: 650; line-height: 1; }
.form-response-card--error .form-response-mark { color: #a33c50; background: #fbecef; }
.form-response-card--success .form-response-mark { color: #24705a; background: #e6f4ee; }
.form-response-card .kicker { margin-bottom: 12px; }
.form-response-card h1 { margin-bottom: 18px; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; }
.form-response-card > p:not(.kicker) { max-width: 36rem; margin-bottom: 30px; color: var(--muted); font-size: 1.1rem; }
.form-response-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.response-mail-link { color: var(--blue-deep); font-size: .9rem; font-weight: 600; }
.legal-app-link { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--blue-deep); text-decoration: none; }
.legal-app-link img { width: 40px; border-radius: 10px; }
.legal-content .faq-list { margin-top: 12px; }
.feature-card > h3:first-child { margin-top: 0; }
@media (min-width: 901px) {
  .feature-bento-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature-bento-five > .feature-card { grid-column: span 2; }
  .feature-bento-five > .feature-illustrated { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .feature-bento-five > .feature-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .shell { width: calc(100% - 48px); }
  .card-stage { height: 440px; padding: 30px 18px; }
  .stage-phone { width: 215px; }
  .card-details { padding: 23px; }
  .outlook-note { display: none; }
  .product-hero { gap: 25px; }
  .hero-devices { min-height: 510px; }
  .hero-devices .device { width: 215px; }
  .device-front { left: 5%; }
  .device-back { right: -70px; }
  .story-layout { gap: 3rem; }
  .insight-grid-three { grid-template-columns: 1fr; gap: 45px; }
  .insight-grid-three .insight-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .insight-grid-three .insight-figure { margin: 0; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 36px); }
  .site-header { min-height: 88px; gap: .7rem; }
  .brand { font-size: .875rem; gap: .6rem; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 1.2rem; }
  .brand-caption { display: none; }
  nav { gap: 0; }
  nav a { padding: .55rem .7rem; }
  .gallery-intro { padding-block: 50px; }
  .gallery-intro h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .gallery-intro > p:not(.kicker) { font-size: 1rem; }
  .gallery-intro .kicker { font-size: .75rem; }
  .desktop-break { display: none; }
  .catalog-heading > span { display: none; }
  .app-grid { gap: 16px; }
  .app-grid > .catalog-card { flex-basis: 90%; }
  .catalog-count { display: none; }
  .card-stage { height: 440px; }
  .card-stage h3 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .stage-phone { width: 225px; }
  .catalog-outlook { padding: 22px; gap: 14px; }
  .catalog { padding-bottom: 50px; }
  .maker-section { padding-block: 45px; }
  .maker-layout { grid-template-columns: 1fr; gap: 25px; }
  .site-footer { gap: 1rem; flex-wrap: wrap; }
  .site-footer div { gap: 1rem; }
  .product-header nav a:not(:first-child):not(:last-child) { display: none; }
  .product-hero { grid-template-columns: 1fr; padding-block: 40px; gap: 40px; }
  .product-hero h1 { font-size: clamp(2.7rem, 10vw, 4rem); }
  .hero-devices { min-height: 510px; }
  .hero-devices .device { width: 235px; }
  .device-front { left: 8%; top: 35px; }
  .device-back { right: -5%; top: 90px; }
  .promise-grid { grid-template-columns: 1fr; gap: 20px; }
  .promise-grid p + p { padding-top: 16px; border-top: 1px solid var(--line); }
  .story-section, .features-section, .everywhere-section, .faq-section, .insights-section { padding-block: 50px; }
  .insight-grid { grid-template-columns: 1fr; gap: 40px; }
  .value-samples { padding: 16px; gap: 20px 12px; }
  .sample-cell { font-size: clamp(1rem, 5vw, 1.8rem); }
  .insight-grid-three .insight-card { grid-template-columns: 1fr; gap: 0; }
  .story-layout, .feature-bento, .everywhere-section, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .story-copy { order: -1; }
  .training-device { width: 240px; }
  .large-copy { font-size: 1.2rem; }
  .closing-inner { flex-wrap: wrap; gap: 20px; }
  .closing-inner > p { min-width: 180px; font-size: 1.85rem; }
  .closing-inner .app-icon { width: 56px; border-radius: 14px; }
  .closing-inner .store-button { margin: 0; }
  .download-section { padding-block: 40px; }
  .download-panel { grid-template-columns: 1fr; padding: 26px; gap: 30px; }
  .download-platform { display: block; margin: 12px 0 0; }
  .qr-card { justify-self: start; text-align: left; }
  .qr-surface { margin-inline: 0; }
  .hero-qr { justify-self: end; text-align: center; }
  .hero-qr .qr-surface { margin-inline: auto; }
}
/* Interactive display and import chapters share the established gallery controls. */
.display-chapter { padding-bottom: 0; }
.value-gallery .gallery-visual { min-width: 0; padding: 0; background: radial-gradient(ellipse 54% 50% at 50% 43%, #dce5f8 0, #dce5f855 52%, transparent 100%); }
.value-gallery .gallery-slide figcaption { margin-top: 6px; }
.import-chapter .screenshot-gallery { gap: 40px; }
.import-chapter .large-copy { font-size: 1.2rem; }
.import-chapter .gallery-slide .device { width: min(100% - 20px, 260px); }
.import-chapter .gallery-slide figcaption { max-width: 28ch; }
.import-chapter :focus-visible { outline-color: #b9ccff; }
.feature-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .import-chapter .screenshot-gallery { gap: 24px; }
}
@media (max-width: 640px) {
  .import-chapter .gallery-slide .device { width: min(62vw, 230px); }
  .feature-tools { grid-template-columns: 1fr; }
  .catalog-controls { gap: 2px; }
  .catalog-dots button { width: 28px; }
}
/* Alternating product chapters: editorial learning, dark daily play, tactile feature grid. */
.chapter-learning { padding-block: 100px 110px; }
.chapter-learning .section-heading { margin-bottom: 54px; }
.chapter-learning .section-heading h2 span { color: var(--blue); }
.chapter-learning .gallery-visual { padding: 0; background: radial-gradient(ellipse 54% 50% at 50% 43%, #dce5ff 0, #dce5ff55 52%, transparent 100%); }
.chapter-learning .gallery-slide .device { width: min(100% - 24px, 270px); }
.chapter-learning .gallery-copy .large-copy { margin-bottom: 36px; }
.chapter-night { color: #f8faff; background: radial-gradient(ellipse at 80% 45%, #233d78 0, #121e3c 44%, #0c1326 85%); padding-block: 90px; }
.chapter-label { font-size: .875rem; color: #afc4ff; letter-spacing: .08em; margin-bottom: 18px; }
.chapter-night .section-heading h2 { font-size: clamp(2.3rem, 4.5vw, 4rem); }
.chapter-night .section-heading h2 span { color: #afc4ff; }
.gallery-reversed { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.gallery-reversed > .gallery-visual { grid-column: 2; grid-row: 1; }
.gallery-reversed > .gallery-copy { grid-column: 1; grid-row: 1; }
.chapter-night .gallery-visual { padding-block: 20px; }
.chapter-night .gallery-slide .device { width: min(100% - 24px, 295px); box-shadow: 0 0 0 1px #979a9f, 0 0 0 2px #44474d, 0 30px 70px #0006; }
.chapter-night .gallery-choices { gap: 0; }
.chapter-night .gallery-choice { border: 0; border-top: 1px solid #ffffff24; border-radius: 0; padding: 23px 12px; }
.chapter-night .gallery-choice:hover { background: #ffffff06; }
.chapter-night .gallery-choice[aria-current="true"] { background: #ffffff09; border-top-color: #aac2ff; }
.chapter-night .gallery-choice[aria-current="true"] strong { color: #b9ccff; }
.chapter-night .gallery-marker { border-color: #9eacd0; }
.chapter-night .gallery-choice[aria-current="true"] .gallery-marker { background: #b9ccff; border-color: #b9ccff; box-shadow: 0 0 0 4px #b9ccff30; }
.chapter-night .gallery-description, .chapter-night .gallery-slide figcaption, .chapter-night .gallery-count { color: #c3cce0; }
.chapter-night .gallery-controls button { border-color: #ffffff40; background: #ffffff0b; color: white; }
.chapter-night .gallery-controls button:hover { background: #ffffff20; border-color: #afc4ff; }
.chapter-features { background: #f0f3f9; }
.chapter-features .feature-bento { gap: 24px; }
.chapter-features .feature-card { padding: 34px; border: 1px solid #e0e5ed; border-radius: 28px; box-shadow: 0 5px 16px #1d355204; }
.chapter-features .feature-ways { background: white; }
.chapter-features .feature-ways h3 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); max-width: 14ch; }
.chapter-features .value-samples { background: #f6f7fb; padding: 20px; gap: 24px; }
.chapter-features .feature-import { background: #e0e8fc; border-color: #d1dcf5; }
.chapter-features .feature-import .insight-stage { background: transparent; border: 0; padding: 20px 0 0; }
.chapter-features .feature-import .device { width: min(100% - 16px, 220px); }
.feature-symbol { width: 30px; height: 30px; color: var(--blue-deep); margin-bottom: 22px; }
.chapter-features .feature-compact { background: transparent; border: 0; border-top: 1px solid #cfd8e7; border-radius: 0; box-shadow: none; padding: 30px 12px 10px; }
.chapter-features .feature-compact h3 { font-size: 1.3rem; margin-top: 0; }
@media (min-width: 901px) {
  .chapter-features .feature-bento-five { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .chapter-features .feature-bento-five > .feature-card { grid-column: span 4; }
  .chapter-features .feature-bento-five > .feature-ways { grid-column: span 7; }
  .chapter-features .feature-bento-five > .feature-import { grid-column: span 5; }
}
@media (max-width: 900px) {
  .chapter-features .feature-card { padding: 24px; }
  .chapter-features .value-samples { gap: 18px 12px; padding: 12px; }
}
@media (max-width: 640px) {
  .chapter-learning { padding-block: 55px 65px; }
  .chapter-learning .section-heading { margin-bottom: 32px; }
  .chapter-learning .gallery-slide .device { width: min(62vw, 230px); }
  .chapter-learning .gallery-copy .large-copy { margin-bottom: 24px; }
  .chapter-night { padding-block: 50px; }
  .gallery-reversed { display: flex; flex-direction: column; gap: 30px; }
  .gallery-reversed > .gallery-copy { order: -1; width: 100%; }
  .gallery-reversed > .gallery-visual { width: 100%; }
  .chapter-night .gallery-slide .device { width: min(62vw, 245px); }
  .chapter-night .gallery-choice { padding: 18px 8px; }
  .chapter-features .feature-card { border-radius: 22px; }
  .chapter-features .feature-compact { border-radius: 0; padding: 24px 4px 4px; }
  .feature-symbol { margin-bottom: 12px; }
}
/* One navigation language for the app catalog and all feature galleries. */
.gallery-controls { width: fit-content; max-width: 100%; gap: 8px; margin: 22px auto 0; padding: 6px; border: 1px solid #e1e5ed; border-radius: 999px; background: #ffffffed; box-shadow: 0 6px 24px #202a4310; }
.gallery-controls button { flex: none; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.2rem; }
.gallery-controls button:hover { background: #edf1fb; color: var(--blue); }
.gallery-controls .gallery-count { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gallery-dots { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gallery-dots button { width: 32px; border-radius: 12px; }
.gallery-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #b6bdca; transition: width .25s, background .25s; }
.gallery-dots button[aria-current="step"]::before { width: 24px; background: var(--blue); }
.chapter-night .gallery-controls { background: #1e2b48; border-color: #ffffff30; box-shadow: 0 6px 24px #0002; }
.chapter-night .gallery-controls button { background: transparent; color: #e6edff; }
.chapter-night .gallery-controls button:hover { background: #ffffff12; color: white; }
.chapter-night .gallery-dots button::before { background: #7b8cae; }
.chapter-night .gallery-dots button[aria-current="step"]::before { background: #b9ccff; }
@media (max-width: 640px) {
  .gallery-controls { gap: 2px; }
  .gallery-dots button { width: 28px; }
}
/* Keep a complete phone and its controls within the available viewport height.
   Text stays in normal flow: small screens and enlarged text may still scroll. */
.screenshot-gallery { --gallery-phone-width: clamp(130px, calc((100svh - 300px) * .46), 280px); }
.screenshot-gallery .gallery-slide .device { width: min(100% - 24px, var(--gallery-phone-width)); }
.screenshot-gallery .gallery-slide { gap: 12px; }
.screenshot-gallery .gallery-controls { margin-top: 12px; }
.chapter-learning, .chapter-night, .features-section.chapter-features { padding-block: clamp(28px, 5svh, 56px); }
.chapter-learning .section-heading, .chapter-night .section-heading { margin-bottom: 24px; }
.chapter-learning .gallery-copy .large-copy, .gallery-copy .large-copy { margin-bottom: 20px; font-size: 1.15rem; line-height: 1.5; }
.gallery-editorial .gallery-choice, .chapter-night .gallery-choice { padding-block: 14px; }
.gallery-choice strong { font-size: 1.05rem; }
.gallery-description { margin-top: 5px; line-height: 1.45; }
.display-chapter .section-heading { margin-bottom: 24px; }
.import-chapter .section-heading { margin-bottom: 24px; }
.screenshot-gallery .gallery-copy .section-heading { margin-bottom: 20px; }
.screenshot-gallery .gallery-copy .section-heading h2 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); text-wrap: balance; }
.value-gallery .iphone-frame { margin-inline: auto; }
.home .catalog-card { container-type: inline-size; }
.home .card-stage { --card-stage-height: clamp(240px, calc(100svh - 380px), 380px); height: auto; min-height: var(--card-stage-height); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto 1fr; column-gap: 12px; text-align: left; }
.home .card-stage .stage-category { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 10px; }
.home .card-stage h3 { grid-column: 1; grid-row: 2; font-size: clamp(1.25rem, 5.5cqi, 2rem); overflow-wrap: anywhere; hyphens: auto; }
.home .card-stage .stage-phone { grid-column: 2; grid-row: 1 / 4; width: min(40cqi, calc((var(--card-stage-height) - 62px) * .46)); max-width: 100%; margin: 0; transform: none; transition: transform .65s cubic-bezier(.22, 1, .36, 1); transform-origin: center 55%; border-width: 5px; border-radius: 24px; }
@media (hover: hover) and (pointer: fine) {
  .home .theme-asudoku .card-stage .stage-phone { transform: rotate(-5deg); }
  .home .theme-summetry .card-stage .stage-phone { transform: rotate(5deg); }
  .home .card-stage:is(:hover, :focus-visible) .stage-phone { transform: translateY(-8px) rotate(0deg); }
}
.home .stage-phone .iphone-screen { border-radius: 19px; }
.home .stage-label { left: 24px; right: auto; bottom: 22px; padding: .25rem .6rem; }
.home .placeholder-art { grid-column: 2; grid-row: 1 / 4; width: clamp(82px, 12vw, 155px); height: auto; aspect-ratio: 1; margin: 0 12px 0 0; font-size: clamp(3rem, 7vw, 5rem); }
.home .card-details { padding: 18px 22px; }
.home .card-identity img, .home .placeholder-icon { width: 44px; height: 44px; border-radius: 11px; }
.home .card-description { margin: 14px 0; line-height: 1.5; }
.home .card-footer { padding-top: 12px; }
.home .catalog-controls { margin-top: 12px; }
@media (max-width: 640px) {
  .screenshot-gallery { --gallery-phone-width: clamp(130px, calc((100svh - 200px) * .46), 250px); }
  [data-screenshot-gallery] { display: flex; flex-direction: column; }
  [data-screenshot-gallery] > .gallery-copy { order: -1; width: 100%; }
  [data-screenshot-gallery] > .gallery-visual { width: 100%; }
  .screenshot-gallery .gallery-slide .device { width: min(70vw, 100% - 24px, var(--gallery-phone-width)); }
  .chapter-learning, .chapter-night { padding-block: 32px; }
  .home .card-stage { padding: 18px; column-gap: 10px; }
  .home .card-stage h3 { font-size: 1.35rem; }
  .home .stage-label { left: 18px; bottom: 18px; }
  .home .card-details { padding: 16px 18px; }
}
/* Tap targets preserve the existing phone geometry; the modal reuses native swipe. */
.display-chapter .section-heading h2 span { color: var(--blue); }
/* Make the current feature clear without washing out the other readable choices. */
[data-screenshot-gallery].gallery-ready .gallery-choice { padding-inline: 16px; border-radius: 10px; transition: background .18s, border-color .18s, box-shadow .18s; }
[data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]) strong { color: #626b79; }
[data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]) .gallery-description { color: #636d7c; }
[data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] { background: #e4ebff; border-top-color: #9bb1ef; box-shadow: inset 4px 0 var(--blue); }
[data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] strong { color: var(--blue-deep); }
[data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] .gallery-description { color: #303e5d; }
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]) strong,
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]) .gallery-description { color: #adb8ce; }
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] { background: #ffffff12; border-top-color: #6f8dc7; box-shadow: inset 4px 0 #b9ccff; }
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] strong { color: #c9d8ff; }
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice[aria-current="true"] .gallery-description { color: #f3f6ff; }
[data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]):hover { background: #768fc014; }
.chapter-night [data-screenshot-gallery].gallery-ready .gallery-choice:not([aria-current="true"]):hover { background: #ffffff09; }
.screenshot-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
.screenshot-open:focus-visible { outline: 3px solid #7596ff; outline-offset: 7px; }
.screenshot-lightbox { box-sizing: border-box; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border: 0; background: #0c1326f5; color: #f8faff; overflow: hidden; overscroll-behavior: contain; }
.screenshot-lightbox:not([open]) { display: none; }
.screenshot-lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; gap: 8px; animation: lightbox-enter .18s ease-out; }
.screenshot-lightbox::backdrop { background: #0c1326d9; backdrop-filter: blur(12px); }
.lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 1100px); margin-inline: auto; }
.lightbox-header h2 { margin: 0; font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: #dae3f7; }
.lightbox-close { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; background: #ffffff0d; color: white; cursor: pointer; }
.lightbox-close::before, .lightbox-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox-close:hover { background: #ffffff20; }
.screenshot-lightbox.gallery-ready .gallery-viewport { --lightbox-gap: 20px; position: relative; display: flex; gap: var(--lightbox-gap); min-height: 0; height: 100%; margin: 0; }
.screenshot-lightbox.gallery-ready .gallery-viewport::before, .screenshot-lightbox.gallery-ready .gallery-viewport::after { content: ""; flex: 0 0 max(0px, calc(var(--lightbox-gutter) - var(--lightbox-gap))); }
.screenshot-lightbox.gallery-ready .gallery-slide { flex: 0 0 var(--lightbox-slide-width); scroll-snap-align: center; box-sizing: border-box; height: 100%; min-height: 0; align-self: stretch; grid-template-rows: minmax(0, 1fr) 3em; align-items: center; gap: 10px; padding: 8px 12px 0; }
.screenshot-lightbox .gallery-slide .device { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1206 / 2622; box-sizing: border-box; border-width: 5px; border-radius: 30px; box-shadow: 0 12px 30px #0005; }
.screenshot-lightbox .gallery-slide .device { transform: scale(.84); opacity: .46; filter: blur(1px); transition: transform .24s ease, opacity .24s ease, filter .24s ease; }
.screenshot-lightbox .gallery-slide[data-gallery-active] .device { transform: scale(1); opacity: 1; filter: none; }
.screenshot-lightbox .gallery-slide:not([data-gallery-active]) figcaption { visibility: hidden; }
.lightbox-select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.lightbox-select[hidden] { display: none; }
.screenshot-lightbox .iphone-screen { height: 100%; width: 100%; border-radius: 25px; }
.screenshot-lightbox .gallery-slide figcaption { align-self: center; max-width: 42ch; margin: 0; color: #c3cce0; text-align: center; font-size: .9rem; line-height: 1.5; }
.screenshot-lightbox .gallery-controls { margin: 0 auto; background: #1e2b48; border-color: #ffffff30; box-shadow: none; }
.screenshot-lightbox .gallery-controls button { color: #e6edff; }
.screenshot-lightbox .gallery-controls button:hover { background: #ffffff12; }
.screenshot-lightbox .gallery-dots button::before { background: #7b8cae; }
.screenshot-lightbox .gallery-dots button[aria-current="step"]::before { background: #b9ccff; }
.screenshot-lightbox :focus-visible { outline: 2px solid #b9ccff; outline-offset: 3px; }
@keyframes lightbox-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}