:root {
  color-scheme: dark;
  --ink: #f3edf8;
  --muted: #bcaec9;
  --accent: #d3b9ee;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: #100e14; color: var(--ink); }
h1, p { margin: 0; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
#app { min-height: 100svh; isolation: isolate; overflow: hidden; }
#app > article { position: relative; min-height: 100svh; }
.brand-mark { object-fit: contain; }
.tools { display: flex; align-items: center; gap: 20px; }
.tools > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.tools img { object-fit: contain; flex-shrink: 0; }
.download { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; }
.download-button { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 22px; min-height: 48px; border: 1px solid #ffffff40; border-radius: 10px; background: #d3b9ee; color: #2c2036; font-size: 13px; font-weight: 550; }
.requirements { color: var(--muted); font-size: 10.5px; line-height: 1.7; }
.pricing { font-size: 11px; color: var(--muted); line-height: 1.85; }
.app-screen { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: #17131d; overflow: hidden; cursor: zoom-in; }
.app-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.provider-pair { display: flex; align-items: center; gap: 15px; }
.screen-switch { display: flex; gap: 4px; }
.screen-switch button { background: transparent; border: 1px solid transparent; padding: 9px 15px; font-size: 11px; color: var(--muted); }
.screen-switch button[aria-pressed="true"] { border-color: #ffffff30; background: #ffffff0d; color: var(--ink); }
.image-dialog { padding: 0; max-width: min(1400px, 94vw); max-height: 94svh; border: 1px solid #ffffff40; border-radius: 14px; background: #211a2a; box-shadow: 0 30px 120px #000a; }
.image-dialog::backdrop { background: #09070ee6; backdrop-filter: blur(16px); }
.image-dialog > img { max-width: 100%; max-height: 88svh; object-fit: contain; }
.close-image { position: fixed; top: 17px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff50; background: #32273fe6; font-size: 26px; }

/* 01: oversized editorial typography and an asymmetrical glass composition. */
[data-variant="1"] { background: #17101a; }
.editorial { height: 100svh; min-height: 800px !important; max-height: 1200px; padding: 5vh 6vw; overflow: hidden; background: radial-gradient(ellipse at 80% 95%, #644c692e, transparent 60%), #17101a; }
.editorial h1 { position: relative; z-index: 2; font: 400 clamp(90px, 13.7vw, 210px)/1.05 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.075em; color: #eadce9; }
.editorial-copy { position: absolute; left: 7vw; top: 34%; z-index: 3; }
.editorial-copy > .brand-mark { width: 28px; height: 28px; margin-bottom: 22px; }
.editorial-copy > p { font-size: 17px; line-height: 1.8; color: #c6b4c6; }
.editorial .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-top: 30px; }
.editorial-screen { position: absolute; top: 34%; left: 38%; width: 67%; height: 54%; border-radius: 15px; border: 1px solid #f2d4ea3b; padding: 6px; background: #ffffff0b; backdrop-filter: blur(22px); transform: perspective(1800px) rotateY(-9deg) rotateZ(-4deg); box-shadow: 0 35px 100px #0007, inset 0 1px #ffffff35; z-index: 2; }
.editorial-screen .app-screen { border-radius: 10px; }
.editorial-action { position: absolute; left: 7vw; bottom: 9%; z-index: 3; }
.editorial .download-button { border-radius: 30px; background: #eadce9; color: #291d2a; padding: 0 25px; min-height: 47px; }
.editorial .pricing { margin-top: 25px; }
.editorial-light { position: absolute; width: 90%; height: 75%; left: 30%; top: 0; transform: rotate(-32deg); border-radius: 50%; background: linear-gradient(160deg, #dda5be27, #9f79c22b 45%, transparent 70%); filter: blur(50px); pointer-events: none; }

/* 02: fine grid, monospaced labels, square geometry and a storage diagram. */
[data-variant="2"] { --ink: #e4e4ef; --muted: #9695ad; background: #0c0e15; }
.wireframe { padding: 7vh 7vw 5vh; display: flex; flex-direction: column; background-image: linear-gradient(#8c8aab08 1px, transparent 1px), linear-gradient(90deg, #8c8aab08 1px, transparent 1px); background-size: 32px 32px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.wire-title { display: flex; align-items: center; gap: 18px; }
.wire-title h1 { font-size: clamp(32px, 3.5vw, 50px); letter-spacing: -3px; font-weight: 400; }
.wire-title > img { width: 30px; height: 30px; }
.wire-description { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.wire-content { flex: 1; display: grid; grid-template-columns: 28% 1fr; gap: 7vw; align-items: center; margin: 5vh 0; }
.flow { display: flex; flex-direction: column; align-items: center; }
.flow-tools { width: 100%; border: 1px solid #79758b50; background: #0c0e15a8; padding: 23px; }
.flow-tools .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.flow-tools .tools > span { font-size: 10.5px; }
.flow-tools img { width: 17px; height: 17px; }
.flow-line { display: block; height: 40px; width: 1px; background: #9a86b77a; position: relative; }
.flow-line::after { content: ""; position: absolute; bottom: 0; left: -3px; width: 7px; height: 7px; border-right: 1px solid #b09ac7; border-bottom: 1px solid #b09ac7; transform: rotate(45deg); }
.flow-vault { display: flex; align-items: center; gap: 13px; border: 1px solid #b5a2d2; background: #b89cd711; padding: 17px 28px; font-size: 13px; }
.flow-vault img { width: 26px; height: 26px; }
.flow-storage { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 20px; width: 100%; border: 1px dashed #79758b70; background: #0c0e15a8; font-size: 10.5px; color: var(--muted); }
.wire-preview { min-width: 0; border: 1px solid #79758b50; background: #12121c80; backdrop-filter: blur(16px); }
.wire-preview-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid #79758b40; font-size: 10.5px; color: var(--muted); }
.wire-preview .app-screen { height: clamp(290px, 38vh, 420px); border-radius: 0; }
.wire-caption { display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px; border-top: 1px solid #79758b40; color: var(--muted); font-size: 10.5px; }
.wire-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-top: 25px; border-top: 1px solid #79758b50; }
.wireframe .download { align-items: flex-end; }
.wireframe .download-button { background: #c9b9e0; border-radius: 0; font-family: inherit; font-size: 12px; }
.wireframe .requirements, .wireframe .pricing { font-size: 10.5px; }

/* 03: a large, dimensional version of the existing mark, and heavy display type. */
[data-variant="3"] { background: #120a22; }
.sculpture { height: 100svh; min-height: 800px !important; overflow: hidden; background: radial-gradient(ellipse at 75% 35%, #57308066, transparent 48%), radial-gradient(ellipse at 88% 100%, #26174a, transparent 55%), #120a22; }
.sculpture-copy { position: absolute; left: 9%; top: 10%; z-index: 3; }
.sculpture h1 { font-family: "Arial Black", -apple-system, sans-serif; font-size: clamp(82px, 9vw, 132px); line-height: .88; letter-spacing: -.075em; font-weight: 850; }
.sculpture h1 > span { color: #b794e1; }
.sculpture-copy > p:not(.pricing) { margin-top: 30px; font-size: 16px; line-height: 1.8; color: #c5b0dc; }
.sculpture .tools { margin-top: 24px; gap: 20px; }
.sculpture .tools > span { font-size: 0; gap: 0; }
.sculpture .tools img { width: 25px; height: 25px; }
.sculpture .download { margin-top: 35px; }
.sculpture .download-button { min-height: 52px; background: #ffffff0e; backdrop-filter: blur(24px); border-color: #dfc3ff66; border-radius: 4px; color: #f5eaff; padding: 0 24px; }
.sculpture .pricing { margin-top: 23px; }
.sculpture-object { position: absolute; width: 54vw; height: 63vw; max-height: 820px; right: -2%; top: -7%; pointer-events: none; perspective: 1100px; }
.glass-emblem { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; transform: rotateY(-22deg) rotateZ(10deg); filter: drop-shadow(1px 2px 0 #b99fda) drop-shadow(8px 10px 0 #593a79) drop-shadow(20px 35px 30px #05020b77); }
.object-back { position: absolute; width: 70%; height: 53%; left: 14%; top: 27%; border-radius: 28%; background: radial-gradient(ellipse at 30% 20%, #e6b2ff14, #3b1e6426); filter: blur(35px); }
.object-ring { position: absolute; width: 90%; height: 76%; top: 8%; left: 0; border: 1px solid #bd95ef19; border-radius: 50%; transform: rotateY(-40deg) rotateZ(14deg); }
.object-floor { position: absolute; left: 0; bottom: -1%; width: 100%; height: 20%; border-radius: 50%; background: radial-gradient(ellipse, #a882d322, transparent 67%); filter: blur(22px); }
.sculpture-preview { position: absolute; right: 8%; bottom: 8%; width: 32%; height: 26%; border: 1px solid #e8d0ff55; border-radius: 12px; padding: 5px; background: #a183c61a; backdrop-filter: blur(30px); box-shadow: 0 35px 80px #09031066; transform: rotateZ(-5deg); z-index: 4; }
.sculpture-preview .app-screen { border-radius: 7px; }

/* 04: app footage fills the canvas, with a continuous frosted control strip. */
[data-variant="4"] { --muted: #c4c0c9; background: #070609; }
.cinema { height: 100svh; min-height: 780px !important; overflow: hidden; }
.cinema-screen { position: absolute; top: 0; left: 23%; width: 91%; height: 100%; transform: perspective(1800px) rotateY(-8deg); }
.cinema-screen .app-screen { border-radius: 0; }
.cinema-screen .app-screen img { object-position: 30% top; }
.cinema-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #08070a 0%, #08070af2 13%, #08070a50 53%, #08070a09), linear-gradient(0deg, #08070ac4, transparent 70%); pointer-events: none; }
.cinema-brand { position: absolute; left: 6%; top: 9%; display: flex; align-items: center; gap: 17px; pointer-events: none; }
.cinema-brand .brand-mark { width: 30px; height: 30px; }
.cinema h1 { font-size: 31px; letter-spacing: -1.3px; font-weight: 500; }
.cinema-info { position: absolute; top: 39%; left: 6%; pointer-events: none; }
.cinema-info > p { font-size: clamp(40px, 4.5vw, 68px); font-weight: 350; line-height: 1.07; letter-spacing: -2.5px; }
.cinema .tools { margin-top: 35px; gap: 23px; }
.cinema .tools > span { font-size: 0; gap: 0; }
.cinema .tools img { width: 25px; height: 25px; }
.cinema-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 27px 6%; gap: 30px; background: #19161b69; border-top: 1px solid #ffffff2b; backdrop-filter: blur(38px) saturate(80%); }
.cinema .download-button { border-radius: 28px; background: #ece8ee; color: #17131a; border-color: #fff9; padding: 0 26px; }
.cinema-other { display: flex; align-items: center; gap: 40px; }
.cinema .screen-switch { padding: 5px; border-radius: 8px; border: 1px solid #ffffff26; background: #08070a66; }
.cinema .screen-switch button { border-radius: 5px; }
.cinema .pricing { font-size: 10.5px; }

/* 05: dense modular composition; charcoal surfaces and functional pricing. */
[data-variant="5"] { background: #0a0a0c; --muted: #aaa5b2; }
.modular { display: grid; width: min(1260px, 100%); margin: auto; padding: 7vh 40px; grid-template-columns: 1fr 1fr 1.2fr 1.2fr; grid-template-rows: 1.25fr 1fr .65fr; grid-template-areas: "identity identity search search" "download plan search search" "tools tools backup backup"; gap: 12px; height: 100svh; min-height: 850px !important; }
.module { min-width: 0; overflow: hidden; border: 1px solid #ffffff15; border-radius: 18px; background: #17161b; }
.identity-module { grid-area: identity; padding: 28px 30px; position: relative; background: #17161b; }
.identity-module > .brand-mark { width: 27px; height: 27px; margin-bottom: 25px; }
.identity-module h1 { font-size: clamp(36px, 4.6vw, 66px); font-weight: 550; letter-spacing: -3px; }
.identity-module > p { margin-top: 15px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.search-module { grid-area: search; padding: 6px; background: #211c29; }
.search-module .app-screen { border-radius: 12px; }
.search-module .app-screen img { object-fit: cover; object-position: 25% top; }
.download-module { grid-area: download; padding: 25px 22px; display: flex; align-items: center; background: linear-gradient(145deg, #5b4c6d88, #2d273ba1); backdrop-filter: blur(28px); border-color: #b89ed93d; }
.modular .download { gap: 13px; width: 100%; }
.modular .download-button { border-radius: 7px; font-size: 11px; padding: 0 13px; width: 100%; gap: 10px; background: #d1bee6; }
.modular .requirements { font-size: 10.5px; max-width: 165px; }
.plan-module { grid-area: plan; padding: 22px 19px; }
.plan-switch { display: flex; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ffffff17; }
.plan-switch button { padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: none; font-size: 10.5px; color: var(--muted); }
.plan-switch button[aria-pressed="true"] { color: #e6d4f7; border-bottom-color: #d3b9ee; }
.plan-price { font-size: 34px; letter-spacing: -1.5px; margin-top: 17px; line-height: 1.1; }
.plan-detail { color: var(--muted); font-size: 10.5px; line-height: 1.6; margin-top: 9px; }
.plan-module .provider-pair { margin-top: 17px; gap: 12px; }
.plan-module .provider-pair img { width: 20px; height: 20px; object-fit: contain; }
.tools-module { grid-area: tools; display: flex; align-items: center; padding: 26px 30px; }
.tools-module .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.backup-module { grid-area: backup; padding: 5px; background: #1c1821; }
.backup-module .app-screen { border-radius: 13px; }
.backup-module .app-screen img { object-position: center 8%; }

/* 06: a deliberately small download object in an almost empty black field. */
[data-variant="6"] { --muted: #aaa1b4; background: #08070b; }
.minimal { max-width: 600px; margin: auto; padding: 65px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.minimal::before { content: ""; position: absolute; width: 550px; height: 550px; max-width: 100vw; top: calc(50% - 330px); left: calc(50% - 275px); border-radius: 50%; background: radial-gradient(circle, #6f528717, transparent 65%); z-index: -1; pointer-events: none; }
.minimal-icon { display: grid; place-items: center; width: 80px; height: 80px; background: linear-gradient(150deg, #e0bfff16, #ffffff03); border: 1px solid #ddc1ff32; border-radius: 24px; box-shadow: inset 0 1px #fff2, 0 12px 45px #0006; backdrop-filter: blur(22px); }
.minimal-icon .brand-mark { width: 49px; height: 49px; }
.minimal h1 { font-size: 35px; font-weight: 500; letter-spacing: -1.5px; margin-top: 24px; }
.minimal > p:not(.pricing) { font-size: 13px; color: var(--muted); line-height: 1.85; margin-top: 17px; }
.minimal .tools { gap: 20px; margin-top: 23px; }
.minimal .tools > span { font-size: 0; gap: 0; }
.minimal .tools img { width: 19px; height: 19px; }
.minimal .download { align-items: center; margin-top: 29px; }
.minimal .download-button { min-height: 44px; border-radius: 8px; background: #d5c1eb; padding: 0 22px; font-size: 12px; gap: 25px; }
.minimal-screens { display: flex; gap: 12px; margin-top: 30px; }
.minimal-screens > div { width: 144px; }
.minimal-screens .app-screen { height: 91px; padding: 3px; border: 1px solid #ffffff29; border-radius: 7px; background: #ffffff07; }
.minimal-screens .app-screen img { border-radius: 4px; }
.minimal-screens span { display: block; color: #9a8ea7; font-size: 10.5px; margin-top: 9px; }
.minimal .pricing { margin-top: 27px; font-size: 10.5px; color: #9a8ea7; }

@media (min-width: 761px) and (max-height: 850px) {
  .editorial, .sculpture { min-height: 720px !important; }
  .editorial-copy { top: 32%; }
  .editorial-action { bottom: 7%; }
  .editorial .tools { margin-top: 20px; gap: 15px 25px; }
  .editorial .pricing { margin-top: 17px; }
  .sculpture-copy { top: 8%; }
  .sculpture h1 { font-size: 98px; }
  .sculpture-copy > p:not(.pricing) { margin-top: 24px; }
  .sculpture .download { margin-top: 25px; }
  .sculpture .pricing { margin-top: 18px; }
  .sculpture-object { top: -11%; }
  .cinema { min-height: 720px !important; }
  .modular { min-height: 740px !important; padding-top: 35px; padding-bottom: 35px; }
  .identity-module { padding-top: 22px; padding-bottom: 22px; }
  .identity-module > .brand-mark { margin-bottom: 18px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .editorial h1 { font-size: 14vw; }
  .editorial-screen { left: 42%; top: 38%; width: 72%; height: 47%; }
  .wireframe { padding-left: 5vw; padding-right: 5vw; }
  .wire-content { grid-template-columns: 32% 1fr; gap: 5vw; }
  .flow-tools { padding: 18px 13px; }
  .flow-tools .tools { gap: 20px 12px; }
  .sculpture h1 { font-size: 95px; }
  .sculpture-copy { left: 7%; }
  .sculpture-object { width: 61vw; right: -6%; top: 3%; }
  .sculpture-preview { right: 6%; width: 36%; bottom: 13%; }
  .cinema-other { gap: 22px; }
  .modular { padding-left: 25px; padding-right: 25px; }
  .plan-module { padding-left: 14px; padding-right: 14px; }
  .plan-switch { gap: 9px; }
  .modular .download-button { font-size: 10.5px; padding: 0 10px; }
  .download-module { padding-left: 15px; padding-right: 15px; }
}
@media (max-width: 760px) {
  .tools > span { font-size: 10.5px; }
  .tools img { width: 18px; height: 18px; }
  .download-button { min-height: 47px; }
  .requirements { font-size: 10.5px; }
  .editorial { height: auto; min-height: 100svh !important; max-height: none; padding: 35px 24px; display: flex; flex-direction: column; }
  .editorial h1 { font-size: clamp(56px, 16vw, 106px); letter-spacing: -.075em; white-space: nowrap; }
  .editorial-copy { position: relative; top: auto; left: auto; margin-top: 30px; }
  .editorial-copy > .brand-mark { display: none; }
  .editorial-copy > p { font-size: 14px; }
  .editorial .tools { display: flex; flex-wrap: wrap; margin-top: 20px; gap: 16px 20px; }
  .editorial-screen { position: relative; width: calc(100% + 18px); height: 220px; left: auto; top: auto; margin: 34px 0 0 -5px; transform: rotate(-3deg); border-radius: 10px; padding: 4px; }
  .editorial-screen .app-screen { border-radius: 6px; }
  .editorial-action { position: relative; bottom: auto; left: auto; margin-top: 34px; }
  .editorial .pricing { margin-top: 20px; }
  .editorial-light { width: 140%; left: 0; top: 10%; height: 60%; }
  .wireframe { padding: 35px 22px; }
  .wire-title { gap: 12px; }
  .wire-title h1 { font-size: 32px; letter-spacing: -2px; }
  .wire-title img { width: 25px; height: 25px; }
  .wire-description { font-size: 11px; margin-top: 14px; }
  .wire-content { display: flex; flex-direction: column; gap: 25px; margin: 30px 0; }
  .flow { display: grid; grid-template-columns: 1fr 20px 1fr; width: 100%; align-items: center; }
  .flow-tools { padding: 12px; }
  .flow-tools .tools { display: grid; grid-template-columns: 1fr; gap: 13px; }
  .flow-tools .tools > span { font-size: 10.5px; }
  .flow > .flow-line { height: 1px; width: 100%; }
  .flow > .flow-line::after { right: 0; left: auto; top: -3px; transform: rotate(-45deg); }
  .flow-vault { padding: 16px 10px; justify-content: center; font-size: 10.5px; gap: 8px; }
  .flow-vault img { width: 21px; height: 21px; }
  .flow > .flow-line:nth-of-type(2), .flow-storage { display: none; }
  .wire-preview { width: 100%; }
  .wire-preview .app-screen { height: 225px; }
  .wire-preview-head { padding: 7px; }
  .wire-caption { padding: 12px; font-size: 10.5px; }
  .wire-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 22px; padding-top: 23px; }
  .wireframe .download { align-items: flex-start; }
  .sculpture { height: auto; min-height: 100svh !important; padding: 38px 28px 30px; }
  .sculpture-copy { position: relative; left: auto; top: auto; }
  .sculpture h1 { font-size: 89px; }
  .sculpture-copy > p:not(.pricing) { font-size: 14px; margin-top: 25px; }
  .sculpture .tools { gap: 19px; margin-top: 20px; }
  .sculpture .download { margin-top: 245px; }
  .sculpture .pricing { margin-top: 20px; }
  .sculpture-object { width: 310px; height: 370px; right: -28px; top: 215px; }
  .sculpture-preview { position: absolute; right: auto; left: 27px; top: 390px; bottom: auto; width: 170px; height: 112px; border-radius: 8px; padding: 3px; transform: rotate(-6deg); }
  .sculpture-preview .app-screen { border-radius: 5px; }
  .cinema { min-height: 100svh !important; height: max(844px, 100svh); }
  .cinema-screen { top: 15%; left: 14%; height: 60%; width: 140%; transform: rotateY(-8deg); }
  .cinema-screen .app-screen img { object-position: 25% top; }
  .cinema-shade { background: linear-gradient(90deg, #08070af2, #08070a60 45%, #08070a22), linear-gradient(0deg, #08070af5 18%, transparent 75%); }
  .cinema-brand { left: 26px; top: 35px; gap: 12px; }
  .cinema h1 { font-size: 28px; }
  .cinema-brand .brand-mark { width: 25px; height: 25px; }
  .cinema-info { top: 40%; left: 26px; }
  .cinema-info > p { font-size: 43px; letter-spacing: -1.8px; }
  .cinema .tools { margin-top: 24px; }
  .cinema-controls { padding: 24px 26px; align-items: flex-start; flex-direction: column; gap: 22px; }
  .cinema-other { width: 100%; justify-content: space-between; gap: 17px; align-items: flex-start; }
  .cinema .screen-switch button { padding: 8px 11px; font-size: 10.5px; }
  .cinema .pricing { font-size: 10.5px; max-width: 145px; }
  .modular { min-height: 100svh !important; height: auto; padding: 25px 18px; grid-template-columns: 1fr 1fr; grid-template-rows: auto 220px 216px auto 150px; grid-template-areas: "identity identity" "search search" "download plan" "tools tools" "backup backup"; gap: 9px; }
  .module { border-radius: 12px; }
  .identity-module { padding: 24px; }
  .identity-module > .brand-mark { width: 22px; height: 22px; margin-bottom: 18px; }
  .identity-module h1 { font-size: 42px; letter-spacing: -2px; }
  .identity-module > p { font-size: 12px; margin-top: 12px; }
  .search-module .app-screen { border-radius: 7px; }
  .search-module .app-screen img { object-position: center; object-fit: cover; }
  .download-module { padding: 20px 14px; }
  .modular .download-button { font-size: 10.5px; padding: 0 10px; gap: 8px; min-height: 44px; }
  .modular .requirements { font-size: 10.5px; }
  .plan-module { padding: 19px 13px; }
  .plan-switch { gap: 9px; flex-wrap: wrap; padding-bottom: 7px; }
  .plan-switch button { font-size: 10.5px; }
  .plan-price { font-size: 30px; margin-top: 12px; }
  .plan-detail { font-size: 10.5px; margin-top: 7px; }
  .plan-module .provider-pair { margin-top: 12px; }
  .tools-module { padding: 22px 24px; }
  .tools-module .tools { gap: 18px 30px; }
  .minimal { padding: 50px 25px; }
  .minimal h1 { font-size: 33px; }
  .minimal > p:not(.pricing) { font-size: 12px; }
  .minimal-screens > div { width: 130px; }
  .minimal-screens .app-screen { height: 84px; }
}
@media (max-width: 360px) {
  .editorial { padding-left: 20px; padding-right: 20px; }
  .editorial .tools { display: grid; grid-template-columns: 1fr 1fr; }
  .wireframe { padding-left: 18px; padding-right: 18px; }
  .wire-title h1 { font-size: 28px; }
  .wire-caption { font-size: 10.5px; }
  .sculpture { padding-left: 24px; padding-right: 24px; }
  .sculpture h1 { font-size: 78px; }
  .sculpture-object { width: 270px; right: -38px; }
  .sculpture-preview { width: 150px; left: 23px; }
  .cinema-controls { padding-left: 20px; padding-right: 20px; }
  .cinema-info { left: 22px; }
  .cinema-info > p { font-size: 38px; }
  .cinema-other { flex-direction: column; gap: 15px; }
  .cinema .pricing { max-width: none; }
  .modular { padding-left: 12px; padding-right: 12px; }
  .identity-module h1 { font-size: 37px; }
  .download-module { padding-left: 10px; padding-right: 10px; }
  .modular .download-button { gap: 5px; padding: 0 7px; font-size: 10.5px; }
  .modular .download-button > span { display: none; }
  .minimal-screens > div { width: 118px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .editorial-screen, .wire-preview, .sculpture-preview, .cinema-controls, .minimal-icon { backdrop-filter: none; background-color: #211a2b; } }

/* Full pages for the three selected directions. */
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
.full-page { width: 100%; }
.full-page .wireframe { min-height: 100svh; position: relative; }
.full-page .minimal { min-height: 780px; position: relative; isolation: isolate; }
.full-page .cinema { position: relative; }
.page-sections { width: min(1180px, calc(100% - 100px)); margin: 0 auto; }
.full-section { border-top: 1px solid #ffffff20; padding: 64px 0 70px; }
.full-section h2 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -1px; line-height: 1.2; }
.full-section h3 { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.5; }
.section-description { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 15px; }
.continue-link { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 18px; font-size: 11px; padding: 16px 0; }
.continue-link:hover { color: var(--ink); }
.usage-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; margin-top: 38px; align-items: center; }
.usage-list { padding: 0; margin: 0; list-style: none; counter-reset: usage; }
.usage-list li { counter-increment: usage; position: relative; padding: 0 0 24px 35px; }
.usage-list li::before { content: counter(usage); position: absolute; top: 2px; left: 0; font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
.usage-list li:last-child { padding-bottom: 0; }
.usage-list p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 7px; }
.usage-screen { height: 360px; border: 1px solid #ffffff25; overflow: hidden; }
.usage-prompt { padding: 19px 22px; border: 1px solid #ffffff20; margin-top: 28px; background: #ffffff03; }
.usage-prompt h3 { color: var(--muted); font-size: 11px; font-weight: 450; }
.usage-prompt p { font-size: 13px; line-height: 1.8; margin-top: 8px; color: var(--ink); }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 70px; margin: 34px 0 0; }
.feature-list > div { padding-top: 22px; border-top: 1px solid #ffffff17; }
.feature-list dt { font-size: 14px; font-weight: 550; line-height: 1.5; }
.feature-list dd { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 440px; }
.comparison-wrap { width: 100%; margin-top: 30px; }
.comparison { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
.comparison caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.comparison th, .comparison td { border-bottom: 1px solid #ffffff1b; padding: 18px 20px; text-align: right; line-height: 1.5; }
.comparison thead th { font-size: 11px; font-weight: 450; color: var(--muted); }
.comparison th:first-child { text-align: left; padding-left: 0; font-weight: 450; }
.comparison .vault-column { background: #bb9fdf0a; color: #e4ccff; }
.comparison td { font-size: 18px; }
.comparison th:last-child, .comparison td:last-child { padding-right: 0; }
.timing-note { color: var(--muted); font-size: 10.5px; line-height: 1.8; margin-top: 16px; }
.full-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.full-plan { border: 1px solid #ffffff26; background: #ffffff03; padding: 27px 30px; }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.plan-name h3 { font-size: 14px; }
.plan-name > img { width: 24px; height: 24px; }
.full-price { font-size: 40px; letter-spacing: -1.5px; line-height: 1.25; margin-top: 26px; }
.full-price > span { font-size: 13px; color: var(--muted); letter-spacing: 0; }
.plan-subtitle { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 7px; }
.full-plan ul { list-style: none; padding: 0; margin: 26px 0 0; }
.full-plan li { padding-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.full-plan li::before { content: "–"; margin-right: 10px; color: var(--accent); }
.cloud-full-plan { background: #b79ac90a; border-color: #b79ac94a; }
.page-download { display: flex; justify-content: center; padding: 12px 0 65px; }
.page-download .download { align-items: center; }
.page-footer { min-height: 100px; border-top: 1px solid #ffffff20; display: flex; align-items: center; gap: 9px; font-size: 12px; }
.page-footer .brand-mark { width: 21px; height: 21px; }
.page-footer > span:last-child { margin-left: auto; font-size: 11px; color: var(--muted); }

/* 02 retains its grid, monospaced text and square outlines throughout. */
.theme-wire { font-family: "SFMono-Regular", Menlo, Consolas, monospace; background: #0c0e15; }
.theme-wire .page-sections { width: min(1238px, calc(100% - 14vw)); }
.theme-wire .wireframe { padding-bottom: 20px; }
.theme-wire .wire-content { margin: 5vh 0; }
.theme-wire .continue-link { margin-top: 14px; align-self: flex-start; }
.theme-wire .full-section { border-color: #79758b50; }
.theme-wire .full-section h2 { font-size: 24px; letter-spacing: -1.3px; }
.theme-wire .usage-list h3, .theme-wire .feature-list dt { font-size: 13px; }
.theme-wire .usage-list p, .theme-wire .feature-list dd { font-size: 12px; }
.theme-wire .section-description { font-size: 12px; }
.theme-wire .usage-prompt { padding: 17px; }
.theme-wire .usage-prompt p { font-size: 11px; }
.theme-wire .full-price { font-size: 37px; }
.theme-wire .full-price > span { font-size: 11px; }
.theme-wire .full-plan li, .theme-wire .plan-subtitle { font-size: 11px; }
.theme-wire .page-download .download-button { border-radius: 0; font-family: inherit; font-size: 12px; }
.theme-wire .comparison td { font-size: 17px; }

/* 06 remains a narrow, quiet document with plain lists and compact pricing. */
.theme-minimal { background: #08070b; }
.theme-minimal .minimal { padding-top: 65px; padding-bottom: 65px; }
.theme-minimal .minimal .continue-link { margin-top: 25px; font-size: 10.5px; }
.theme-minimal .page-sections { width: min(700px, calc(100% - 64px)); }
.theme-minimal .full-section { padding: 48px 0 53px; }
.theme-minimal .full-section h2 { font-size: 25px; letter-spacing: -.8px; }
.theme-minimal .usage-list { margin-top: 29px; }
.theme-minimal .usage-list li { padding-bottom: 23px; padding-left: 30px; }
.theme-minimal .usage-list li:last-child { padding-bottom: 0; }
.theme-minimal .usage-list h3 { font-size: 13px; }
.theme-minimal .usage-list p { font-size: 12px; margin-top: 5px; }
.theme-minimal .usage-prompt { border: 0; border-left: 1px solid #cbb2e54a; margin-left: 30px; padding: 0 0 0 20px; background: none; }
.theme-minimal .usage-prompt p { font-size: 12px; }
.theme-minimal .feature-list { display: block; margin-top: 27px; }
.theme-minimal .feature-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 26px; padding: 18px 0; }
.theme-minimal .feature-list > div:last-child { padding-bottom: 0; }
.theme-minimal .feature-list dt { font-size: 12px; }
.theme-minimal .feature-list dd { font-size: 12px; margin: 0; }
.theme-minimal .comparison { font-size: 12px; }
.theme-minimal .comparison th, .theme-minimal .comparison td { padding: 16px 12px; }
.theme-minimal .comparison th:first-child { padding-left: 0; }
.theme-minimal .comparison th:last-child, .theme-minimal .comparison td:last-child { padding-right: 0; }
.theme-minimal .comparison td { font-size: 15px; }
.theme-minimal .comparison .vault-column { background: none; }
.theme-minimal .full-plans { gap: 40px; margin-top: 30px; }
.theme-minimal .full-plan { background: none; border: 0; padding: 0; }
.theme-minimal .plan-name h3 { font-size: 13px; }
.theme-minimal .plan-name > .provider-pair, .theme-minimal .plan-name > .brand-mark { display: none; }
.theme-minimal .full-price { font-size: 30px; margin-top: 16px; }
.theme-minimal .full-price > span { font-size: 11px; }
.theme-minimal .plan-subtitle, .theme-minimal .full-plan li { font-size: 11px; }
.theme-minimal .full-plan ul { margin-top: 16px; }
.theme-minimal .full-plan li { padding-top: 9px; }
.theme-minimal .page-download { padding-top: 0; padding-bottom: 55px; }
.theme-minimal .page-download .download-button { font-size: 12px; min-height: 44px; }
.theme-minimal .page-footer { min-height: 88px; font-size: 11px; }

@media (max-width: 1050px) and (min-width: 761px) {
  .usage-layout { gap: 35px; grid-template-columns: .9fr 1.1fr; }
  .usage-screen { height: 310px; }
  .full-plan { padding: 25px; }
  .theme-cinema .full-plan { padding: 28px; }
}
@media (max-width: 760px) {
  .page-sections, .theme-wire .page-sections, .theme-cinema .page-sections { width: calc(100% - 44px); }
  .full-section { padding: 38px 0 43px; }
  .full-section h2 { font-size: 26px; }
  .section-description { font-size: 12px; margin-top: 13px; }
  .full-page .wireframe { padding-bottom: 12px; }
  .usage-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .usage-list li { padding-left: 28px; }
  .usage-list p { font-size: 12px; }
  .usage-screen { height: auto; aspect-ratio: 1.45; }
  .usage-screen .app-screen img { object-fit: contain; }
  .feature-list { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
  .feature-list > div { padding-top: 20px; }
  .feature-list dt { font-size: 13px; }
  .feature-list dd { font-size: 12px; margin-top: 7px; }
  .comparison-wrap { margin-top: 25px; }
  .comparison th, .comparison td { padding: 15px 7px; }
  .comparison thead th { font-size: 10.5px; }
  .comparison tbody th { font-size: 10.5px; max-width: 90px; }
  .comparison td, .theme-wire .comparison td { font-size: 12px; white-space: nowrap; }
  .comparison th:first-child { max-width: 95px; width: 25%; }
  .timing-note { font-size: 10.5px; line-height: 1.8; margin-top: 15px; }
  .full-plans { grid-template-columns: 1fr; gap: 16px; margin-top: 27px; }
  .full-plan { padding: 24px; }
  .full-price { font-size: 36px; margin-top: 22px; }
  .page-download { padding-top: 0; padding-bottom: 45px; }
  .page-footer { min-height: 85px; font-size: 11px; }
  .page-footer > span:last-child { font-size: 10.5px; }
  .theme-cinema .full-section { padding: 45px 0; }
  .theme-cinema .full-section h2 { font-size: 33px; letter-spacing: -1.1px; }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: 15px; }
  .section-title-row > p { font-size: 12px; }
  .section-title-row > p br { display: none; }
  .theme-cinema .full-plan { padding: 25px; border-radius: 10px; }
  .theme-cinema .full-price { font-size: 38px; }
  .theme-cinema .page-download { padding-bottom: 45px; }
  .full-page .minimal { min-height: 760px; padding-top: 45px; padding-bottom: 45px; }
  .theme-minimal .page-sections { width: calc(100% - 44px); }
  .theme-minimal .full-section { padding: 38px 0 42px; }
  .theme-minimal .full-section h2 { font-size: 24px; }
  .theme-minimal .feature-list > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .theme-minimal .feature-list dt { font-size: 12px; }
  .theme-minimal .feature-list dd { font-size: 12px; }
  .theme-minimal .comparison th, .theme-minimal .comparison td { padding: 15px 7px; }
  .theme-minimal .comparison td { font-size: 12px; }
  .theme-minimal .full-plans { gap: 28px; }
  .theme-minimal .full-plan + .full-plan { padding-top: 25px; border-top: 1px solid #ffffff17; }
  .theme-minimal .full-price { font-size: 30px; }
}
@media (max-width: 360px) {
  .page-sections, .theme-wire .page-sections, .theme-cinema .page-sections, .theme-minimal .page-sections { width: calc(100% - 36px); }
  .comparison th, .comparison td, .theme-minimal .comparison th, .theme-minimal .comparison td { padding-left: 5px; padding-right: 5px; }
  .comparison td, .theme-wire .comparison td, .theme-minimal .comparison td { font-size: 11px; }
}

/* Selected 04: real app steps, visible comparisons, and a persistent download. */
.apple-logo { display: block; flex: 0 0 auto; }
.theme-cinema { background: #08070a; padding-bottom: 120px; }
.theme-cinema .page-sections { width: min(1180px, calc(100% - 12vw)); }
.theme-cinema .full-section { padding: 76px 0; border-color: #ffffff1b; }
.theme-cinema .full-section h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 350; letter-spacing: -1.5px; max-width: 900px; }
.cinema-preview-control { position: absolute; bottom: 135px; right: 6%; }
.cinema-preview-control .screen-switch { backdrop-filter: blur(25px); }
.product-flow { list-style: none; padding: 0; margin: 50px 0 0; }
.flow-step { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 60px; align-items: center; padding: 36px 0; }
.flow-step:first-child { padding-top: 0; }
.flow-step:last-child { padding-bottom: 0; }
.step-number { display: block; margin-bottom: 18px; font-size: 12px; color: #b69fcc; font-variant-numeric: tabular-nums; }
.theme-cinema .step-copy h3 { font-size: 24px; font-weight: 450; letter-spacing: -.6px; line-height: 1.25; }
.step-copy p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 16px; }
.step-copy blockquote { font-size: 13px; line-height: 1.7; padding-left: 16px; margin: 20px 0 0; border-left: 1px solid #b69fcc70; color: #e0d4e9; }
.flow-shot { display: flex; align-items: center; justify-content: center; height: auto; min-width: 0; padding: 28px; border: 1px solid #ffffff16; border-radius: 18px; background: radial-gradient(ellipse at 50% 10%, #b998e117, transparent 80%), #131017; box-shadow: inset 0 1px #ffffff06, 0 16px 45px #0003; }
.screenshot-crop { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px #ffffff12, 0 8px 28px #0005; }
.flow-shot img { position: absolute; display: block; max-width: none; height: auto; object-fit: initial; }
.shot-harnesses .screenshot-crop { aspect-ratio: 1600 / 650; }
.shot-harnesses img { width: 160%; left: -30%; top: -66.9231%; }
.shot-storage .screenshot-crop { aspect-ratio: 1600 / 595; }
.shot-storage img { width: 160%; left: -30%; top: -73.1092%; }
.shot-backup .screenshot-crop { aspect-ratio: 2360 / 510; }
.shot-backup img { width: 108.4746%; left: -4.2373%; top: -50%; }
.shot-mcp .screenshot-crop { aspect-ratio: 2394 / 646; }
.shot-mcp img { width: 106.934%; left: -3.467%; top: -38.3901%; }
.benchmark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; gap: 18px; }
.benchmark-card { padding: 29px 26px; border: 1px solid #ffffff24; border-radius: 14px; background: linear-gradient(145deg, #bfa0dc12, #ffffff03); }
.theme-cinema .benchmark-card h3 { font-size: 14px; font-weight: 500; }
.speed-ratio { font-size: clamp(52px, 5.7vw, 80px); font-weight: 350; line-height: 1.25; letter-spacing: -4px; margin-top: 20px; color: #e2caf5; }
.speed-ratio > span { font-size: .6em; margin-left: 2px; }
.speed-claim { font-size: 14px; margin-top: 6px; }
.speed-claim > span { display: block; color: #aaa0b1; margin-top: 7px; font-size: 11px; }
.benchmark-card dl { margin: 30px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.benchmark-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #ffffff12; color: #aaa0b1; }
.benchmark-card dd { margin: 0; white-space: nowrap; }
.benchmark-card .benchmark-vault { color: #f4e7ff; font-size: 14px; font-weight: 550; }
.simple-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 36px; }
.simple-plan { padding: 30px; border: 1px solid #ffffff25; border-radius: 14px; background: #ffffff04; }
.simple-plan + .simple-plan { background: #b99bd90b; border-color: #b99bd942; }
.theme-cinema .simple-plan h3 { font-size: 16px; font-weight: 500; }
.simple-plan .full-price { font-size: 46px; font-weight: 350; }
.simple-plan > p:last-child { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 15px; }
.shared-features { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 24px; }
.cinema-footer { border-top: 1px solid #ffffff1b; min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #aaa0b1; font-size: 12px; }
.cinema-footer > span:first-child { color: #eee7f4; }
.cinema-footer a { color: inherit; text-decoration: none; }
.cinema-footer a:hover { color: #eee7f4; text-decoration: underline; text-underline-offset: 4px; }
.download-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; padding: 18px 6% max(18px, env(safe-area-inset-bottom)); background: #1b171ec9; backdrop-filter: blur(38px) saturate(80%); border-top: 1px solid #ffffff28; }
.platform-downloads { display: flex; align-items: flex-start; gap: 16px; width: fit-content; max-width: 100%; margin: 0; }
.download-dock .download { flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.download-dock .download-button { width: 100%; white-space: nowrap; gap: 10px; justify-content: center; min-height: 50px; padding: 0 22px; background: #e6e6e6; color: #303133; border: 1px solid #ffffffc9; border-radius: 10px; box-shadow: inset 0 1px #fff8, 0 0 0 3px #ffffff0d, 0 4px 12px #0004; font-size: 15px; }
.download-dock .download-button.unavailable-download { background: #ffffff06; color: #a49aa9; border-color: #ffffff1c; box-shadow: inset 0 1px #ffffff06; }
.download-dock .requirements { font-size: 11px; text-align: center; }
@media (max-width: 1000px) {
  .flow-step { grid-template-columns: 230px minmax(0, 1fr); gap: 32px; }
  .benchmark-card { padding: 24px 19px; }
  .benchmark-card .benchmark-vault { font-size: 12px; }
}
@media (max-width: 760px) {
  .theme-cinema { padding-bottom: 125px; }
  .theme-cinema .page-sections { width: calc(100% - 44px); }
  .theme-cinema .cinema { height: 100svh; min-height: 650px !important; }
  .theme-cinema .cinema-info { top: 42%; }
  .theme-cinema .cinema-screen { top: 15%; }
  .cinema-preview-control { bottom: 140px; right: 22px; }
  .theme-cinema .full-section { padding: 48px 0; }
  .theme-cinema .full-section h2 { font-size: 32px; letter-spacing: -1px; }
  .product-flow { margin-top: 35px; }
  .flow-step { grid-template-columns: 1fr; gap: 24px; padding: 25px 0; }
  .step-number { margin-bottom: 12px; font-size: 11px; }
  .theme-cinema .step-copy h3 { font-size: 23px; }
  .step-copy p { font-size: 13px; margin-top: 10px; max-width: 440px; }
  .step-copy blockquote { margin-top: 15px; font-size: 12px; }
  .flow-shot { border-radius: 12px; padding: 14px; }
  .screenshot-crop { border-radius: 6px; }
  .benchmark-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .benchmark-card { padding: 25px; }
  .speed-ratio { font-size: 68px; margin-top: 12px; }
  .speed-claim > span { display: inline; margin-left: 6px; }
  .benchmark-card dl { margin-top: 22px; }
  .benchmark-card .benchmark-vault { font-size: 14px; }
  .simple-plans { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .simple-plan { padding: 25px; }
  .simple-plan .full-price { font-size: 40px; margin-top: 20px; }
  .cinema-footer { flex-wrap: wrap; justify-content: flex-start; gap: 16px 25px; padding: 28px 0; }
  .cinema-footer > span:first-child { width: 100%; }
  .download-dock { padding: 12px 22px max(12px, env(safe-area-inset-bottom)); }
  .platform-downloads { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); width: min(420px, 100%); gap: 10px; }
  .download-dock .download { gap: 7px; }
  .download-dock .download-button { min-height: 44px; font-size: 12px; padding: 0 10px; gap: 6px; }
  .download-dock .requirements { font-size: 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  .download-dock { backdrop-filter: none; background: #211a2b; }
}

/* Step 05: illustrative Codex conversation, scoped to the live search demo. */
.search-demo { min-width: 0; }
.search-demo .codex-window { overflow: hidden; border: 1px solid #ffffff25; border-radius: 16px; background: #171719; box-shadow: 0 18px 70px #0007, inset 0 1px #ffffff08; color: #e9e9eb; }
.search-demo .window-header { position: relative; height: 46px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff0a; background: #1e1e20; color: #a5a5aa; font-size: 12px; }
.search-demo .window-header > span { position: absolute; left: 50%; transform: translateX(-50%); }
.search-demo .traffic-lights { display: flex; gap: 7px; }
.search-demo .traffic-lights i { height: 10px; width: 10px; border-radius: 50%; background: #ff5f57; }
.search-demo .traffic-lights i:nth-child(2) { background: #febc2e; }
.search-demo .traffic-lights i:nth-child(3) { background: #28c840; }
.search-demo .conversation { padding: 26px 36px 24px; font-size: 14px; line-height: 1.65; }
.search-demo .user-message { margin-left: auto; max-width: max-content; padding: 11px 16px; background: #2a2a2d; border: 1px solid #ffffff05; border-radius: 16px 16px 4px 16px; line-height: 1.5; }
.search-demo .user-message > span { white-space: nowrap; }
.search-demo .agent-message { margin-top: 25px; color: #d2d2d6; }
.search-demo .tool-call { margin-top: 16px; color: #aaaab1; font-size: 12px; }
.search-demo .tool-call summary { display: flex; gap: 9px; align-items: center; list-style: none; cursor: pointer; width: 100%; padding: 6px 0; }
.search-demo .tool-call summary::-webkit-details-marker { display: none; }
.search-demo .tool-call summary strong { font-weight: 450; color: #c3c3c9; font-family: "SFMono-Regular", Menlo, monospace; font-size: 11px; }
.search-demo .tool-call summary img { flex-shrink: 0; }
.search-demo .tool-check { margin-left: auto; color: #a9c4a5; flex-shrink: 0; }
.search-demo .chevron { font-size: 14px; line-height: 1; transform: rotate(-90deg); color: #707076; }
.search-demo .tool-call[open] .chevron { transform: none; }
.search-demo .tool-call summary:focus-visible { outline: 1px solid #b9b1c3; outline-offset: 5px; }
.search-demo .tool-content { margin: 6px 0 0 7px; border-left: 1px solid #ffffff21; padding: 7px 0 6px 16px; }
.search-demo .tool-content code { font: 11px/1.6 "SFMono-Regular", Menlo, monospace; color: #c3c3c9; overflow-wrap: anywhere; }
.search-demo .json-key { color: #b3b3bb; }
.search-demo .json-string { color: #d8c6e6; }
.search-demo .tool-content p { margin-top: 7px; color: #85858d; font-size: 11px; }
.search-demo .agent-response { margin-top: 24px; }
.search-demo .agent-response > p { font-size: 14px; }
.search-demo .agent-response > p strong { font-weight: 550; }
.search-demo .search-results { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 0; }
.search-demo .search-results li { padding: 12px 0; border-bottom: 1px solid #ffffff09; }
.search-demo .search-results li:last-child { border-bottom: 0; padding-bottom: 0; }
.search-demo .result-heading { display: grid; grid-template-columns: 16px 80px minmax(0, 1fr); align-items: center; gap: 8px; }
.search-demo .result-heading img { object-fit: contain; }
.search-demo .result-heading > span { font-size: 11px; color: #a9a9b2; line-height: 1.4; }
.search-demo .result-heading h4 { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: #e3e3e8; }
.search-demo .search-results li > p { font-size: 12px; line-height: 1.6; color: #92929d; margin: 4px 0 0 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-demo .composer { margin-top: 28px; border: 1px solid #ffffff20; background: #212124; border-radius: 15px; padding: 13px 15px 10px; color: #74747c; font-size: 12px; }
.search-demo .composer-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.search-demo .add { font-size: 22px; font-weight: 300; line-height: 1; }
.search-demo .send { width: 23px; height: 23px; border-radius: 50%; background: #49494e; display: grid; place-items: center; color: #a4a4ab; font-size: 16px; line-height: 1; }
.search-demo .tool-spinner { width: 12px; height: 12px; border: 1px solid #73737c; border-top-color: #d6c4e4; border-radius: 50%; margin-left: auto; display: none; }
.search-demo .is-animated .tool-spinner { display: block; animation: demo-spin .8s linear infinite; }
.search-demo .is-animated .tool-check { display: none; }
.search-demo .is-complete .tool-check { display: block; }
.search-demo .is-complete .tool-spinner { display: none; }
.search-demo .is-animated:not(.has-started) .agent-message,
.search-demo .is-animated:not(.has-started) .tool-call,
.search-demo .is-animated:not(.has-started) .agent-response { visibility: hidden; }
.search-demo .has-started .agent-message { animation: demo-appear .32s ease-out .35s both; }
.search-demo .has-started .tool-call { animation: demo-appear .32s ease-out .85s both; }
.search-demo .has-started .agent-response > p { animation: demo-appear .32s ease-out 2.1s both; }
.search-demo .has-started .search-results li:nth-child(1) { animation: demo-appear .35s ease-out 2.3s both; }
.search-demo .has-started .search-results li:nth-child(2) { animation: demo-appear .35s ease-out 2.65s both; }
.search-demo .has-started .search-results li:nth-child(3) { animation: demo-appear .35s ease-out 3s both; }
@keyframes demo-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) {
  .search-demo .conversation { padding: 23px 25px; }
}
@media (max-width: 760px) {
  .search-demo .codex-window { border-radius: 12px; }
  .search-demo .window-header { height: 40px; padding: 0 15px; }
  .search-demo .conversation { padding: 20px 18px; font-size: 12px; }
  .search-demo .user-message { font-size: 12px; padding: 10px 12px; max-width: 100%; }
  .search-demo .agent-message { font-size: 12px; margin-top: 22px; }
  .search-demo .tool-call { font-size: 10px; }
  .search-demo .tool-call summary { gap: 6px; }
  .search-demo .tool-call summary strong, .search-demo .tool-content code { font-size: 9px; }
  .search-demo .tool-content { padding-left: 12px; }
  .search-demo .agent-response > p { font-size: 12px; }
  .search-demo .search-results { margin-top: 12px; }
  .search-demo .result-heading { grid-template-columns: 15px 67px minmax(0, 1fr); gap: 6px; }
  .search-demo .result-heading > span { font-size: 10px; }
  .search-demo .result-heading h4 { font-size: 11px; }
  .search-demo .search-results li > p { font-size: 10px; margin-left: 21px; }
  .search-demo .composer { margin-top: 24px; }
  .search-demo .traffic-lights i { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-demo .has-started .agent-message,
  .search-demo .has-started .tool-call,
  .search-demo .has-started .agent-response > p,
  .search-demo .has-started .search-results li,
  .search-demo .tool-spinner { animation: none; }
}

.theme-cinema .privacy-section { padding: 76px 0; }
.privacy-heading { display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: 90px; }
.privacy-title { display: flex; align-items: center; gap: 24px; }
.privacy-mark { width: 42px; height: 42px; flex: none; object-fit: contain; }
.theme-cinema .privacy-section h2 { line-height: 1.15; font-size: 44px; font-weight: 350; letter-spacing: -1.5px; }
.privacy-heading p { color: #c4c0c9; font-size: 17px; line-height: 1.75; max-width: 490px; }
@media (max-width: 1000px) {
  .privacy-heading { gap: 40px; }
  .theme-cinema .privacy-section h2 { font-size: 38px; }
  .privacy-heading p { font-size: 15px; }
}
@media (max-width: 760px) {
  .theme-cinema .privacy-section { padding: 48px 0; }
  .privacy-heading { grid-template-columns: 1fr; gap: 25px; }
  .theme-cinema .privacy-section h2 { font-size: 32px; letter-spacing: -1px; }
  .privacy-heading p { font-size: 14px; line-height: 1.8; }
  .privacy-title { gap: 18px; }
  .privacy-mark { width: 32px; height: 32px; }
}