:root { --ink: #11111a; --ink-soft: #565563; --muted: #8e8a96; --paper: #f7f4ee; --paper-2: #efebe3; --dark: #101019; --dark-2: #1a1a26; --coral: #f48172; --coral-deep: #d75b61; --lilac: #c9c1ff; --mint: #dcefe7; --yellow: #f4d78c; --line: rgba(17,17,26,.14); --line-light: rgba(255,255,255,.18); --serif: 'Fraunces', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif; --mono: 'DM Mono', monospace; --radius-lg: 28px; --radius-md: 18px; --shadow-deep: 0 35px 80px rgba(8,8,15,.22); --ease: cubic-bezier(.22,.75,.22,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow-x: hidden; }
body.modal-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--dark); background: var(--coral); }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 50; opacity: .035; mix-blend-mode: multiply; background-image: url('data:image/svg+xml,%3Csvg viewBox=%27180 0 180 180%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%27.85%27/%3E%3C/svg%3E'); }
.site-shell { position: relative; overflow: hidden; }
.section-pad { width: min(1240px, calc(100% - 96px)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(1240px, calc(100% - 96px)); height: 86px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 24px; height: 24px; display: inline-flex; align-items: center; gap: 4px; transform: rotate(-12deg); }
.brand-mark span { display: block; width: 10px; height: 20px; border: 2px solid currentColor; border-radius: 50% 50% 48% 48%; }
.brand-mark span:first-child { transform: translateX(3px) rotate(26deg); }
.brand-mark span:last-child { transform: translateX(-3px) rotate(-26deg); }
.brand-word { font-size: 20px; }
.brand-word sup { font: 500 8px var(--mono); margin-left: 3px; vertical-align: top; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 31px; margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.nav-links a { transition: color .25s ease; }
.nav-links a:hover { color: var(--coral-deep); }

.button { border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 23px; font-weight: 700; font-size: 13px; letter-spacing: -.01em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--coral-deep); box-shadow: 0 12px 25px rgba(215,91,97,.24); }
.button-primary:hover { background: #c84e56; box-shadow: 0 17px 30px rgba(215,91,97,.31); }
.button-dark { color: var(--paper); background: var(--dark); box-shadow: 0 12px 25px rgba(16,16,25,.15); }
.button-dark:hover { background: #292936; box-shadow: 0 17px 30px rgba(16,16,25,.23); }
.button-ghost { color: var(--ink); background: rgba(255,255,255,.3); border: 1px solid var(--line); }
.button-ghost:hover { border-color: var(--ink); background: #fff; }
.button-small { min-height: 42px; padding: 0 17px; font-size: 12px; gap: 9px; }
.button-large { min-height: 58px; padding: 0 29px; font-size: 14px; }
.button-arrow { font-size: 18px; font-weight: 400; line-height: 1; transition: transform .25s ease; }
.button:hover .button-arrow { transform: translate(3px,-3px); }
.hero { min-height: 700px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); align-items: center; gap: 6vw; padding-top: 60px; padding-bottom: 86px; }
.hero-copy { position: relative; z-index: 2; max-width: 590px; }
.eyebrow, .section-kicker, .wizard-overline { color: var(--coral-deep); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(215,91,97,.22); border-radius: 99px; background: rgba(244,215,140,.2); }
.eyebrow-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(244,129,114,.15); }
.hero h1 { max-width: 650px; margin: 24px 0 24px; font-size: clamp(54px, 6vw, 88px); line-height: .99; letter-spacing: -.075em; font-weight: 500; }
.hero h1 em, h2 em, h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.065em; }
.hero h1 em { color: var(--coral-deep); }
.hero-lede { max-width: 455px; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 35px; }
.text-link, .underlined-link, .text-button { border: 0; padding: 0; color: var(--ink); background: none; font-size: 13px; font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: 10px; }
.text-link:hover, .underlined-link:hover, .text-button:hover { color: var(--coral-deep); }
.play-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; transition: transform .25s ease; }
.text-link:hover .play-mark { transform: scale(1.12); border-color: var(--coral); }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 70px; color: var(--muted); font: 400 10px var(--mono); letter-spacing: .01em; }
.note-line { width: 35px; height: 1px; background: var(--coral); }
.hero-visual { min-width: 0; position: relative; }
.visual-meta { display: flex; justify-content: space-between; padding: 0 14px 12px; color: var(--muted); font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.visual-stage { position: relative; min-height: 575px; display: grid; place-items: center; isolation: isolate; }
.visual-stage::before { content: ''; position: absolute; z-index: -2; width: 80%; height: 78%; border-radius: 48% 52% 55% 45%; background: var(--lilac); transform: rotate(-7deg); opacity: .78; }
.visual-stage::after { content: ''; position: absolute; z-index: -3; inset: 7% 4%; border: 1px solid rgba(17,17,26,.14); border-radius: 44% 56% 50% 50%; transform: rotate(8deg); }
.stage-orb { position: absolute; border-radius: 50%; filter: blur(.2px); z-index: -1; }
.orb-one { top: 10%; right: 2%; width: 80px; height: 80px; background: var(--yellow); }
.orb-two { bottom: 4%; left: 5%; width: 38px; height: 38px; background: var(--coral); }
.phone-frame { position: relative; width: min(290px, 47vw); aspect-ratio: .515; padding: 10px; border: 8px solid #24232e; border-radius: 39px; background: #090910; box-shadow: var(--shadow-deep), 12px 14px 0 rgba(16,16,25,.09); transform: rotate(3deg); z-index: 2; }
.phone-speaker { position: absolute; z-index: 3; top: 16px; left: 50%; width: 58px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.2); transform: translateX(-50%); }
.phone-screen { height: 100%; overflow: hidden; padding: 21px 15px 14px; border-radius: 26px; color: #fff; background: linear-gradient(160deg, #2d2942 0%, #181827 47%, #11111c 100%); }
.phone-status { display: flex; justify-content: space-between; color: rgba(255,255,255,.62); font: 400 8px var(--mono); }
.phone-status i { display: inline-block; width: 7px; height: 5px; margin-left: 2px; border: 1px solid currentColor; border-radius: 1px; opacity: .8; }
.screen-topline { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; color: rgba(255,255,255,.64); font: 400 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.screen-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(244,129,114,.16); }
.screen-hero { position: relative; min-height: 227px; padding: 24px 1px 0; }
.script-label, .preview-script { color: var(--yellow); font: 400 15px var(--serif); font-style: italic; }
.screen-hero h2 { position: relative; z-index: 1; margin: 8px 0 0; font-size: 38px; line-height: .97; letter-spacing: -.08em; font-weight: 500; }
.screen-hero h2 em { color: var(--coral); }
.photo-window { position: absolute; right: -4px; bottom: 4px; width: 116px; height: 153px; overflow: hidden; border: 4px solid rgba(255,255,255,.8); border-radius: 70px 70px 9px 9px; background: linear-gradient(145deg,#bd9d9b,#5b4558 62%,#1d1b2b); transform: rotate(7deg); }
.photo-window::before { content: ''; position: absolute; inset: 0; opacity: .45; background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px); }
.photo-silhouette { position: absolute; left: 20px; bottom: 17px; width: 51px; height: 108px; border-radius: 35px 35px 10px 10px; background: linear-gradient(150deg,#f4d9c0 0 22%,#593e50 23% 65%,#241e32 66%); transform: rotate(-8deg); }
.photo-window span { position: absolute; bottom: 7px; left: 10px; color: rgba(255,255,255,.78); font: 400 8px var(--mono); }
.counter-block { display: flex; align-items: baseline; gap: 8px; padding: 11px 0 13px; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.counter-block span, .counter-block small { color: rgba(255,255,255,.56); font: 400 9px var(--mono); }
.counter-block strong { color: var(--yellow); font: 500 19px var(--serif); letter-spacing: -.05em; }
.music-row { display: flex; align-items: center; gap: 9px; padding-top: 15px; }
.music-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.music-icon span { width: 2px; border-radius: 2px; background: var(--coral); }
.music-icon span:nth-child(1) { height: 6px; }.music-icon span:nth-child(2) { height: 10px; }.music-icon span:nth-child(3) { height: 4px; }
.music-row b, .music-row small { display: block; }.music-row b { font-size: 9px; font-weight: 600; }.music-row small { margin-top: 1px; color: rgba(255,255,255,.5); font: 400 7px var(--mono); }.music-more { margin-left: auto; color: rgba(255,255,255,.5); font-size: 12px; letter-spacing: 2px; }
.screen-footer { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: rgba(255,255,255,.36); font: 400 7px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.footer-line { width: 30px; height: 1px; background: rgba(255,255,255,.35); }

.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.72); box-shadow: 0 13px 30px rgba(63,54,77,.13); backdrop-filter: blur(10px); }
.floating-note strong, .floating-note small { display: block; }.floating-note strong { font-size: 10px; }.floating-note small { margin-top: 2px; color: var(--muted); font: 400 8px var(--mono); }
.note-left { top: 16%; left: -5%; transform: rotate(-7deg); }.note-right { right: -2%; bottom: 17%; transform: rotate(5deg); }
.mini-spark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #936d00; background: var(--yellow); font-size: 15px; }
.lock-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--dark); background: var(--mint); }.lock-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.signal-strip { display: grid; grid-template-columns: repeat(3, 1fr) .95fr; align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-item, .signal-price { min-height: 92px; display: flex; align-items: center; gap: 15px; padding: 18px clamp(18px, 3vw, 47px); border-right: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.signal-item b { color: var(--ink); font-weight: 700; }.signal-number { color: var(--coral-deep); font: 500 10px var(--mono); }
.signal-price { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border-right: 0; background: var(--yellow); }.signal-price span, .signal-price small { color: rgba(17,17,26,.58); font: 400 9px var(--mono); }.signal-price strong { font: 500 25px var(--serif); letter-spacing: -.06em; }
.statement { display: grid; grid-template-columns: 110px 1fr minmax(260px, 390px); align-items: center; gap: 35px; padding-top: 155px; padding-bottom: 155px; }
.statement-mark { width: 74px; height: 74px; position: relative; transform: rotate(17deg); }.statement-mark span { position: absolute; inset: 0; border: 1px solid var(--coral); border-radius: 50% 45% 50% 45%; }.statement-mark span:last-child { inset: 10px -8px -10px 9px; border-color: var(--ink); transform: rotate(-35deg); }
.statement-copy h2, .section-intro h2, .occasions h2, .feature-copy h2 { margin: 16px 0 0; font-size: clamp(42px, 5vw, 72px); line-height: .99; letter-spacing: -.075em; font-weight: 500; }.statement-copy h2 em, .section-intro h2 em, .occasions h2 em, .feature-copy h2 em { color: var(--coral-deep); }
.statement-side { padding-left: 24px; border-left: 1px solid var(--line); }.statement-side p { margin: 0 0 26px; color: var(--ink-soft); line-height: 1.7; }.underlined-link { display: inline-flex; gap: 14px; padding-bottom: 7px; border-bottom: 1px solid currentColor; }.underlined-link span { font-size: 17px; font-weight: 400; }
.how { padding-top: 45px; padding-bottom: 160px; }.section-intro { max-width: 660px; }.section-intro p { max-width: 370px; margin: 26px 0 0; color: var(--ink-soft); }
.journey-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; margin-top: 78px; }.journey-list { border-top: 1px solid var(--line); }
.journey-row { display: grid; grid-template-columns: 46px 1fr 25px; gap: 22px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .25s ease, color .25s ease; }.journey-row.is-active { padding-left: 13px; padding-right: 13px; background: rgba(255,255,255,.35); }
.journey-index { padding-top: 4px; color: var(--coral-deep); font: 400 10px var(--mono); }.journey-row h3 { margin: 0; font-size: 19px; letter-spacing: -.045em; }.journey-row p { max-width: 380px; margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }.journey-arrow { color: var(--coral-deep); font-size: 19px; }
.journey-card { min-height: 440px; padding: 24px; color: var(--paper); background: var(--dark); box-shadow: var(--shadow-deep); transform: rotate(2deg); }.journey-card-top, .journey-card-bottom { display: flex; align-items: center; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }.tiny-label { color: rgba(255,255,255,.4); }
.journey-card-art { position: relative; min-height: 330px; display: grid; place-items: center; }.art-frame { position: relative; width: 73%; height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.46); border-radius: 52% 48% 45% 55%; transform: rotate(-6deg); }.art-frame::before { content: ''; position: absolute; inset: 18px; border: 1px dashed rgba(244,215,140,.62); border-radius: inherit; }
.art-corner { position: absolute; width: 30px; height: 30px; border-color: var(--coral); border-style: solid; }.corner-tl { top: -10px; left: 12px; border-width: 2px 0 0 2px; }.corner-br { right: 13px; bottom: -11px; border-width: 0 2px 2px 0; }.art-script { position: relative; z-index: 1; color: var(--yellow); font: 400 27px var(--serif); line-height: 1.03; text-align: center; }.art-script em { color: var(--coral); }.art-date { position: absolute; bottom: 32px; z-index: 1; color: rgba(255,255,255,.56); font: 400 9px var(--mono); }.art-orbit { position: absolute; width: 92%; height: 72%; border: 1px solid rgba(201,193,255,.36); border-radius: 50%; transform: rotate(28deg); }
.journey-card-bottom { color: rgba(255,255,255,.65); line-height: 1.5; }.journey-card-bottom b { color: #fff; font-weight: 500; }.mini-qr { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; padding: 5px; border: 1px solid rgba(255,255,255,.24); }.mini-qr i { width: 5px; height: 5px; background: var(--paper); }.mini-qr i:nth-child(2), .mini-qr i:nth-child(4), .mini-qr i:nth-child(8) { background: var(--coral); }
.occasions { padding-top: 50px; padding-bottom: 160px; }.occasions-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.occasions-head > p { max-width: 305px; margin: 0 0 5px; color: var(--ink-soft); }
.occasion-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: stretch; margin-top: 80px; }.occasion-list { border-top: 1px solid var(--line); }
.occasion-tab { position: relative; width: 100%; display: grid; grid-template-columns: 35px 1fr 20px; grid-template-rows: auto auto; gap: 3px 12px; padding: 20px 0; border: 0; color: var(--ink); background: none; text-align: left; transition: padding .25s ease, background .25s ease; }.occasion-tab > span { grid-row: span 2; color: var(--coral-deep); font: 400 10px var(--mono); }.occasion-tab strong { font-size: 17px; letter-spacing: -.04em; }.occasion-tab small { color: var(--muted); font-size: 12px; }.occasion-tab b { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--coral-deep); font-size: 18px; font-weight: 400; }.occasion-tab:hover, .occasion-tab.is-selected { padding-left: 13px; padding-right: 13px; background: rgba(255,255,255,.5); }
.occasion-preview { min-height: 440px; overflow: hidden; display: flex; flex-direction: column; color: var(--paper); background: var(--dark); box-shadow: var(--shadow-deep); }.preview-top, .preview-foot { display: flex; align-items: center; justify-content: space-between; padding: 22px 25px; color: rgba(255,255,255,.47); font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.preview-live { color: #a7d8c5; }.preview-live i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #83d6ae; }
.preview-main { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 330px; padding: 40px 11%; background: radial-gradient(circle at 76% 20%, rgba(201,193,255,.28), transparent 37%), radial-gradient(circle at 20% 100%, rgba(244,129,114,.22), transparent 38%); }.preview-main::before { content: 'L'; position: absolute; right: 10%; bottom: 0; color: rgba(255,255,255,.06); font: 500 230px var(--serif); line-height: .7; }.preview-main h3 { position: relative; margin: 10px 0 19px; font-size: clamp(50px, 6vw, 80px); line-height: .89; letter-spacing: -.09em; font-weight: 500; }.preview-main h3 em { color: var(--coral); }.preview-main p { position: relative; max-width: 330px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.65; }.preview-counter { position: relative; margin-top: 43px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }.preview-counter span { color: rgba(255,255,255,.5); font: 400 10px var(--mono); }.preview-counter strong { display: block; margin-top: 2px; color: var(--yellow); font: 500 25px var(--serif); }.preview-foot { border-top: 1px solid rgba(255,255,255,.17); }.preview-foot span:last-child { color: var(--coral); font-size: 18px; }

.feature { display: grid; grid-template-columns: 1.04fr .96fr; gap: 8vw; align-items: center; padding-top: 52px; padding-bottom: 160px; }.feature-visual { min-width: 0; }
.feature-photo { position: relative; min-height: 500px; overflow: hidden; display: flex; align-items: end; padding: 42px; background: linear-gradient(150deg,#cbc0bb,#75666a 48%,#262232); box-shadow: 16px 20px 0 rgba(17,17,26,.07); }.feature-photo::before { content: ''; position: absolute; inset: 0; opacity: .42; background: radial-gradient(circle at 20% 20%,#f3e0cf 0 3%,transparent 4%), linear-gradient(110deg,transparent 28%,rgba(255,255,255,.25) 29% 30%,transparent 31%), linear-gradient(330deg,rgba(11,10,19,.48),transparent 57%); }.feature-photo::after { content: ''; position: absolute; right: -20%; top: 8%; width: 64%; height: 80%; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; transform: rotate(26deg); }
.feature-stamp { position: absolute; z-index: 1; top: 28px; right: 28px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: rgba(255,255,255,.78); font: 400 9px var(--mono); line-height: 1.25; text-align: center; transform: rotate(11deg); }.feature-photo-copy { position: relative; z-index: 1; }.feature-photo-copy span { color: rgba(255,255,255,.68); font: 400 13px var(--serif); font-style: italic; }.feature-photo-copy strong { display: block; margin-top: 12px; color: #fff; font-size: clamp(44px, 5vw, 72px); line-height: .88; letter-spacing: -.08em; font-weight: 500; }.feature-photo-copy em { color: var(--yellow); font-family: var(--serif); font-style: italic; font-weight: 500; }
.feature-caption { display: flex; justify-content: space-between; margin-top: 14px; color: var(--muted); font: 400 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.feature-copy > p { max-width: 400px; margin: 28px 0 30px; color: var(--ink-soft); line-height: 1.75; }
.feature-points { display: grid; gap: 0; margin: 0 0 35px; padding: 0; list-style: none; border-top: 1px solid var(--line); }.feature-points li { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }.feature-points b, .feature-points small { display: block; }.feature-points b { font-size: 13px; }.feature-points small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.line-icon { position: relative; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--ink); border-radius: 9px; }.icon-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--coral-deep); }.icon-music::before { content: ''; position: absolute; left: 10px; top: 8px; width: 8px; height: 9px; border-left: 1px solid var(--coral-deep); border-bottom: 1px solid var(--coral-deep); border-radius: 0 0 0 6px; }.icon-music::after { content: ''; position: absolute; left: 17px; top: 7px; width: 5px; height: 12px; border-top: 1px solid var(--coral-deep); border-right: 1px solid var(--coral-deep); }.icon-share::before { content: '↗'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--coral-deep); font-size: 16px; }
.closing { padding-top: 115px; padding-bottom: 115px; background: var(--dark); }.closing-inner { position: relative; max-width: 770px; margin: 0 auto; text-align: center; }.closing-inner .section-kicker { color: var(--yellow); }.closing-star { display: block; margin-bottom: 23px; color: var(--coral); font-size: 30px; }.closing h2 { margin: 20px 0 20px; color: #fff; font-size: clamp(67px, 10vw, 130px); line-height: .82; letter-spacing: -.1em; font-weight: 500; }.closing h2 em { color: var(--coral); }.closing p { max-width: 350px; margin: 0 auto 33px; color: rgba(255,255,255,.58); }.closing-detail { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 35px; color: rgba(255,255,255,.37); font: 400 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.closing-detail span { width: 30px; height: 1px; background: rgba(255,255,255,.25); }
.footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 25px; width: min(1240px, calc(100% - 96px)); min-height: 100px; margin: 0 auto; color: var(--muted); font-size: 11px; }.footer .brand { color: var(--ink); }.footer > div { display: flex; gap: 19px; }.footer a:not(.brand):hover { color: var(--coral-deep); }.footer small { font: 400 9px var(--mono); }
.wizard-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 25px; background: rgba(10,10,18,.66); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; backdrop-filter: blur(10px); }.wizard-backdrop[aria-hidden="false"] { opacity: 1; visibility: visible; }.wizard { width: min(680px, 100%); max-height: min(780px, calc(100vh - 34px)); overflow: auto; padding: 28px; border-radius: 25px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.35); transform: translateY(18px) scale(.98); transition: transform .35s var(--ease); }.wizard-backdrop[aria-hidden="false"] .wizard { transform: translateY(0) scale(1); }
.wizard-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; }.wizard-header h2 { max-width: 420px; margin: 7px 0 0; font-size: 30px; line-height: 1; letter-spacing: -.06em; font-weight: 500; }.icon-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; }.icon-button span { position: absolute; left: 11px; top: 18px; width: 15px; height: 1px; background: var(--ink); }.icon-button span:first-child { transform: rotate(45deg); }.icon-button span:last-child { transform: rotate(-45deg); }.icon-button:hover { border-color: var(--coral); }
.wizard-progress { height: 4px; margin: 28px 0 30px; overflow: hidden; border-radius: 5px; background: var(--paper-2); }.wizard-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--coral-deep); transition: width .35s var(--ease); }
.wizard-step { display: none; }.wizard-step.is-current { display: block; animation: stepIn .35s var(--ease); }@keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }.wizard-step-number { color: var(--coral-deep); font: 400 10px var(--mono); letter-spacing: .1em; }.wizard-step h3, .wizard-success h3 { margin: 15px 0 7px; font-size: 33px; line-height: .98; letter-spacing: -.07em; font-weight: 500; }.wizard-step > p, .wizard-success > p { max-width: 490px; margin: 0 0 25px; color: var(--ink-soft); font-size: 13px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.choice-card { min-height: 142px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.28); text-align: left; transition: border .2s ease, transform .2s ease, background .2s ease; }.choice-card:hover, .choice-card.is-selected { border-color: var(--coral-deep); background: #fff; transform: translateY(-2px); }.choice-icon { display: grid; place-items: center; width: 33px; height: 33px; margin-bottom: 20px; border-radius: 10px; color: var(--coral-deep); background: rgba(244,129,114,.14); }.choice-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }.star-icon { font-size: 19px; color: #8c75c8; background: rgba(201,193,255,.45); }.choice-card b, .choice-card small { display: block; }.choice-card b { font-size: 14px; }.choice-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.wizard-subchoice { margin-top: 26px; }.wizard-subchoice > span { display: block; margin-bottom: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }.subchoice-row { display: flex; flex-wrap: wrap; gap: 8px; }.pill-choice { padding: 9px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-soft); background: transparent; font-size: 11px; }.pill-choice:hover, .pill-choice.is-selected { border-color: var(--ink); color: var(--paper); background: var(--dark); }.wizard-next { margin-top: 30px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.wizard-step label { display: block; margin-top: 15px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }.wizard-step input, .wizard-step textarea { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--ink); background: rgba(255,255,255,.45); font-size: 13px; transition: border .2s ease, box-shadow .2s ease; }.wizard-step input:focus, .wizard-step textarea:focus { border-color: var(--coral-deep); box-shadow: 0 0 0 4px rgba(215,91,97,.12); }.wizard-step textarea { resize: vertical; min-height: 108px; }
.wizard-hint, .preview-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid rgba(17,17,26,.1); border-radius: 11px; color: var(--ink-soft); background: rgba(244,215,140,.22); font-size: 11px; line-height: 1.45; }.hint-mark, .preview-check { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; color: #765d00; background: var(--yellow); font: 500 11px var(--mono); }.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 28px; }.wizard-actions .wizard-next { margin-top: 0; }
.upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 145px; padding: 18px; border: 1px dashed rgba(215,91,97,.5); border-radius: 16px; color: var(--ink); background: rgba(244,215,140,.12); text-align: center; transition: background .2s ease, border .2s ease; }.upload-zone:hover { border-color: var(--coral-deep); background: rgba(244,215,140,.24); }.upload-zone input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }.upload-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--coral-deep); font-size: 22px; font-weight: 300; }.upload-zone b { margin-top: 8px; font-size: 13px; }.upload-zone small { margin-top: 3px; color: var(--muted); font: 400 10px var(--mono); }.upload-preview { display: flex; gap: 6px; margin-top: 12px; }.upload-preview img { width: 35px; height: 35px; object-fit: cover; border-radius: 6px; }
.summary-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--line); }.summary-card > div { min-height: 70px; padding: 14px; background: rgba(255,255,255,.5); }.summary-card span, .summary-card strong { display: block; }.summary-card span { color: var(--muted); font: 400 9px var(--mono); text-transform: uppercase; }.summary-card strong { margin-top: 6px; font-size: 14px; }.summary-message { grid-column: span 2; }.summary-message strong { color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.wizard-success { text-align: center; padding: 28px 15px 12px; }.wizard-success .wizard-overline { display: block; margin-top: 18px; }.wizard-success h3 { font-size: 48px; }.wizard-success h3 em { color: var(--coral-deep); }.wizard-success > p { margin-left: auto; margin-right: auto; }.success-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; color: #29664d; background: var(--mint); font-size: 28px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 300px; padding: 12px 15px; border-radius: 11px; color: #fff; background: var(--dark); box-shadow: var(--shadow-deep); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; font-size: 12px; }.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr .9fr; gap: 3vw; }.hero h1 { font-size: clamp(50px, 6.5vw, 72px); }.floating-note { transform: scale(.9); }.note-left { left: -10%; }.note-right { right: -10%; }
  .signal-strip { grid-template-columns: repeat(2,1fr); }.signal-item:nth-child(2) { border-right: 0; }.signal-price { border-top: 1px solid var(--line); }.signal-item:nth-child(3) { border-top: 1px solid var(--line); }
  .statement { grid-template-columns: 70px 1fr; }.statement-side { grid-column: 2; padding-left: 0; border-left: 0; }.feature { gap: 5vw; }
}
@media (max-width: 760px) {
  .section-pad, .topbar, .footer { width: min(100% - 40px, 590px); }.topbar { height: 72px; }.nav-links { display: none; }.top-cta { margin-left: auto; }
  .hero { display: block; padding-top: 52px; padding-bottom: 66px; }.hero-copy { max-width: none; }.hero h1 { max-width: 540px; margin-top: 22px; font-size: clamp(47px, 13vw, 73px); }.hero-lede { max-width: 500px; }.hero-note { margin-top: 35px; }.hero-visual { margin: 62px auto 0; max-width: 510px; }.visual-stage { min-height: 530px; }.phone-frame { width: 245px; }
  .floating-note { padding: 10px 11px; }.note-left { left: 1%; top: 12%; }.note-right { right: -1%; bottom: 15%; }.signal-strip { grid-template-columns: 1fr 1fr; }.signal-item, .signal-price { min-height: 83px; padding: 15px 20px; }.signal-item:nth-child(2) { border-right: 0; }.signal-item:nth-child(3), .signal-price { border-top: 1px solid var(--line); }
  .statement { display: block; padding-top: 100px; padding-bottom: 100px; }.statement-mark { margin-bottom: 35px; }.statement-side { max-width: 380px; margin-top: 30px; }.how, .occasions, .feature { padding-bottom: 100px; }.journey-layout, .occasion-layout, .feature { grid-template-columns: 1fr; gap: 52px; margin-top: 55px; }.journey-card { width: min(100%, 520px); justify-self: center; }.occasions-head { display: block; }.occasions-head > p { margin-top: 26px; }.occasion-layout { margin-top: 47px; }.occasion-preview { min-height: 410px; }.feature { padding-top: 0; }.feature-photo { min-height: 410px; }
  .feature-copy h2 { font-size: clamp(45px, 11vw, 67px); }.closing { padding-top: 95px; padding-bottom: 95px; }.footer { grid-template-columns: 1fr 1fr; gap: 18px; padding: 25px 0; }.footer > span { text-align: right; }.footer > div { grid-column: span 2; order: 3; }.footer small { grid-column: span 2; order: 4; }
  .wizard { padding: 23px 18px; }.wizard-header h2 { font-size: 25px; }.wizard-step h3 { font-size: 29px; }.field-grid, .choice-grid { grid-template-columns: 1fr; }.choice-card { min-height: 112px; }.choice-icon { margin-bottom: 12px; }.wizard { max-height: calc(100vh - 20px); }.summary-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .top-cta { padding: 0 12px; font-size: 11px; }.top-cta .button-arrow { display: none; }.hero h1 { font-size: 48px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.visual-stage { min-height: 475px; }.phone-frame { width: 215px; border-width: 7px; border-radius: 31px; }.phone-screen { border-radius: 21px; }.floating-note { transform: scale(.78); }.note-left { left: -17%; }.note-right { right: -17%; }.signal-item { gap: 9px; padding: 14px 12px; font-size: 10px; }.signal-number { font-size: 9px; }.signal-price strong { font-size: 21px; }.journey-card { min-height: 390px; padding: 18px; }.journey-card-art { min-height: 285px; }.art-frame { height: 215px; }.art-script { font-size: 22px; }.preview-main { padding-left: 9%; padding-right: 9%; }.preview-main h3 { font-size: 53px; }.feature-photo { min-height: 365px; padding: 28px; }.feature-photo-copy strong { font-size: 56px; }.closing h2 { font-size: 76px; }.closing-detail { gap: 6px; font-size: 8px; }.closing-detail span { width: 15px; }.wizard-actions { align-items: stretch; }.wizard-actions .button { padding: 0 16px; }.wizard-success h3 { font-size: 39px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }


/* ── Premium device system ─────────────────────────────────────────────── */
.hero-device-stage { position: relative; min-height: 610px; overflow: visible; isolation: isolate; perspective: 1500px; border-radius: 42px; background: radial-gradient(circle at 63% 36%, rgba(201,193,255,.62), transparent 35%), linear-gradient(145deg, #e8e4ec 0%, #d5d0df 54%, #bcb6ce 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 28px 70px rgba(55,48,78,.12); }
.hero-device-stage::before { content: ''; position: absolute; z-index: -2; inset: 7%; border: 1px solid rgba(255,255,255,.58); border-radius: 48% 52% 40% 60%; transform: rotate(-8deg); }
.hero-device-stage::after { content: ''; position: absolute; z-index: -3; inset: 0; opacity: .32; background-image: linear-gradient(rgba(16,16,25,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,25,.07) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent); }
.scene-grid { position: absolute; z-index: -1; inset: 10% 5% 7%; border: 1px solid rgba(255,255,255,.48); border-radius: 18px; transform: rotate(-3deg); }
.scene-grid::before, .scene-grid::after { content: ''; position: absolute; background: rgba(255,255,255,.48); }
.scene-grid::before { top: 18%; bottom: 18%; left: 50%; width: 1px; }.scene-grid::after { left: 18%; right: 18%; top: 50%; height: 1px; }
.studio-caption { position: absolute; z-index: 1; color: rgba(17,17,26,.54); font: 400 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.caption-a { left: 7%; top: 8%; }.caption-b { right: 7%; bottom: 7%; }
.macbook { position: absolute; transform-style: preserve-3d; }
.hero-macbook { z-index: 1; top: 86px; left: 9%; width: min(555px, 88%); transform: rotate(-3deg) rotateY(-8deg) rotateX(2deg); }
.macbook-screen { position: relative; overflow: hidden; padding: 9px; border: 1px solid #a5a7b5; border-bottom-color: #676976; border-radius: 18px 18px 8px 8px; background: linear-gradient(145deg, #f1f1f6, #b6b8c4); box-shadow: 0 28px 38px rgba(37,32,51,.26), inset 0 1px 1px rgba(255,255,255,.9); }
.macbook-camera { position: absolute; z-index: 3; top: 4px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #4f5160; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
.browser-chrome, .browser-window-bar, .mini-browser-bar { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 10px; color: #747482; background: #f4f3f5; font: 400 8px var(--mono); letter-spacing: .01em; }
.browser-chrome { border-radius: 9px 9px 0 0; }.traffic { display: inline-flex; gap: 4px; flex: 0 0 auto; }.traffic i { width: 6px; height: 6px; border-radius: 50%; background: #db8886; }.traffic i:nth-child(2) { background: #e2c27c; }.traffic i:nth-child(3) { background: #8bb49e; }
.browser-url, .journey-window-url { flex: 1; min-width: 0; overflow: hidden; padding: 5px 12px; border: 1px solid rgba(17,17,26,.08); border-radius: 99px; color: #8b8992; background: #ebe9ee; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.browser-actions, .window-tools { color: #9d9ba5; white-space: nowrap; }
.desktop-app { display: grid; grid-template-columns: 90px 1fr; min-height: 316px; overflow: hidden; border-radius: 0 0 9px 9px; background: #f8f5f0; }.desktop-sidebar { display: flex; flex-direction: column; gap: 10px; padding: 15px 10px; color: #918d98; background: #eeebe5; font: 400 7px var(--mono); }.desktop-brand { display: flex; align-items: center; gap: 4px; margin-bottom: 17px; color: var(--ink); font: 700 11px var(--sans); letter-spacing: -.04em; }.desktop-brand .brand-mark { width: 15px; height: 15px; gap: 2px; transform: rotate(-12deg); }.desktop-brand .brand-mark span { width: 6px; height: 12px; border-width: 1px; }.sidebar-active { padding: 6px; border-radius: 5px; color: var(--ink); background: #fff; }.desktop-sidebar small { margin-top: auto; color: #aaa5ae; font-size: 6px; line-height: 1.4; }
.desktop-main { position: relative; overflow: hidden; padding: 17px 22px 14px; background: radial-gradient(circle at 82% 12%, rgba(201,193,255,.42), transparent 37%), #fbfaf8; }.desktop-announce, .workspace-top { display: flex; justify-content: space-between; color: #9994a0; font: 400 7px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.desktop-announce i, .workspace-top i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #83c09e; }.desktop-copy { position: relative; z-index: 1; margin-top: 28px; }.desktop-copy > span, .workspace-hero > span { color: #c56d68; font: 400 12px var(--serif); font-style: italic; }.desktop-copy h3 { margin: 7px 0 5px; color: #22212d; font-size: 38px; line-height: .88; letter-spacing: -.08em; font-weight: 500; }.desktop-copy h3 em, .workspace-hero h3 em, .link-window-body h3 em, .mini-browser-body strong em { color: var(--coral-deep); font-family: var(--serif); font-style: italic; font-weight: 500; }.desktop-copy p { max-width: 220px; margin: 0; color: #85818b; font-size: 8px; line-height: 1.5; }.desktop-memory-grid { position: absolute; right: 19px; bottom: 16px; left: 22px; display: grid; grid-template-columns: 1.15fr .8fr .75fr; gap: 6px; align-items: end; }.desktop-photo { position: relative; height: 58px; overflow: hidden; border-radius: 6px; }.desktop-photo::before, .showcase-thumb::before, .mini-browser-image::before, .mobile-memory-photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 28%, rgba(250,218,188,.7) 0 9%, transparent 10%), linear-gradient(145deg, #d79f91 0 28%, #7d6172 29% 67%, #27233a 68%); }.desktop-photo::after, .showcase-thumb::after, .mini-browser-image::after, .mobile-memory-photo::after { content: ''; position: absolute; left: 24%; right: 16%; bottom: -16%; height: 75%; border-radius: 50% 50% 8px 8px; background: linear-gradient(145deg, rgba(245,214,192,.92), #49384e 45%, #201b31); transform: rotate(-10deg); }.desktop-photo span, .showcase-thumb span, .mini-browser-image span { position: absolute; z-index: 1; right: 7px; bottom: 5px; color: rgba(255,255,255,.76); font: 400 7px var(--mono); }.photo-b::before, .thumb-two::before { background: radial-gradient(circle at 30% 24%, rgba(250,218,188,.65) 0 10%, transparent 11%), linear-gradient(135deg, #9dabb6, #9d7375 48%, #2d2b45); }.desktop-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px; border-left: 1px solid rgba(17,17,26,.12); }.desktop-stat small, .desktop-stat span { color: #9994a0; font: 400 7px var(--mono); }.desktop-stat strong { color: #313044; font: 500 20px var(--serif); letter-spacing: -.06em; }
.macbook-base { position: relative; width: 108%; height: 16px; margin: -1px -4% 0; border: 1px solid #9b9daa; border-radius: 0 0 8px 8px; background: linear-gradient(#d1d2da, #9b9daa); box-shadow: 0 12px 15px rgba(37,32,51,.15); }.macbook-base::before { content: ''; position: absolute; left: 38%; top: 3px; width: 24%; height: 3px; border-radius: 0 0 4px 4px; background: #777987; }.macbook-base span { position: absolute; left: 15%; right: 15%; bottom: -4px; height: 4px; border-radius: 50%; background: rgba(37,32,51,.18); filter: blur(4px); }
.hero-phone { position: absolute; z-index: 4; left: 8%; bottom: 35px; width: 190px; aspect-ratio: .49; padding: 7px; border: 6px solid #b9bac5; border-top-color: #f1f2f5; border-right-color: #d3d4dd; border-radius: 34px; background: #11121c; box-shadow: -17px 28px 35px rgba(37,32,51,.34), inset 0 0 0 1px rgba(255,255,255,.55); transform: rotate(8deg) rotateY(-8deg); }.phone-glass { position: absolute; z-index: 5; inset: 7px; border-radius: 27px; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.2), transparent 24%, transparent 72%, rgba(255,255,255,.09)); }.phone-camera { position: absolute; z-index: 6; top: 12px; left: 50%; width: 42px; height: 10px; border-radius: 99px; background: #161721; box-shadow: inset 0 1px 2px rgba(255,255,255,.12); transform: translateX(-50%); }.phone-shell-screen { position: relative; z-index: 2; height: 100%; overflow: hidden; padding: 17px 12px 11px; border-radius: 25px; color: #fff; background: linear-gradient(154deg, #3a314b 0%, #1c1b2b 49%, #10111b 100%); }.mobile-status, .mobile-appbar { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.58); font: 400 7px var(--mono); }.mobile-appbar { justify-content: flex-start; gap: 7px; margin-top: 23px; color: rgba(255,255,255,.74); font-size: 7px; text-transform: uppercase; letter-spacing: .04em; }.mobile-mark { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font: 500 11px var(--serif); font-style: italic; }.mobile-menu { margin-left: auto; color: rgba(255,255,255,.4); letter-spacing: 1px; }.mobile-cover { position: relative; min-height: 182px; padding-top: 28px; }.mobile-cover > span { color: var(--yellow); font: 400 12px var(--serif); font-style: italic; }.mobile-cover h3 { position: relative; z-index: 1; margin: 10px 0 0; color: #fff; font-size: 29px; line-height: .9; letter-spacing: -.09em; font-weight: 500; }.mobile-cover h3 em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 500; }.cover-orbit { position: absolute; border: 1px solid rgba(201,193,255,.48); border-radius: 50%; transform: rotate(27deg); }.orbit-1 { top: 39px; left: -13px; width: 167px; height: 95px; }.orbit-2 { top: 51px; left: -1px; width: 153px; height: 96px; border-style: dashed; }.mobile-cover small { position: absolute; bottom: 8px; left: 2px; color: rgba(255,255,255,.46); font: 400 7px var(--mono); }.mobile-memory { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }.mobile-memory-photo { position: relative; width: 46px; height: 40px; overflow: hidden; flex: 0 0 46px; border-radius: 7px; }.mobile-memory small, .mobile-memory strong { display: block; }.mobile-memory small { color: rgba(255,255,255,.47); font: 400 7px var(--mono); }.mobile-memory strong { margin-top: 2px; color: #fff; font: 500 12px var(--serif); line-height: .93; }.mobile-track { display: flex; align-items: center; gap: 7px; padding-top: 13px; }.track-icon { display: flex; align-items: center; justify-content: center; gap: 1px; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }.track-icon i { width: 2px; border-radius: 2px; background: var(--coral); }.track-icon i:nth-child(1) { height: 5px; }.track-icon i:nth-child(2) { height: 9px; }.track-icon i:nth-child(3) { height: 4px; }.mobile-track b, .mobile-track small { display: block; }.mobile-track b { font-size: 8px; }.mobile-track small { margin-top: 1px; color: rgba(255,255,255,.45); font: 400 6px var(--mono); }.track-play { margin-left: auto; color: var(--yellow); font-size: 13px; }.mobile-bottom { display: flex; justify-content: space-between; margin-top: 17px; color: rgba(255,255,255,.38); font: 400 6px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.hero-device-stage .floating-note { z-index: 7; }.hero-device-stage .note-left { top: 13%; left: -6%; transform: rotate(-7deg); }.hero-device-stage .note-right { right: -5%; bottom: 13%; transform: rotate(5deg); }

/* Product cards use browser chrome + real app interiors, not flat placeholders. */
.showcase-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,310px); align-items: end; gap: 50px; }.showcase-heading h2 { margin: 16px 0 0; font-size: clamp(44px, 5.2vw, 76px); line-height: .96; letter-spacing: -.08em; font-weight: 500; }.showcase-heading h2 em { color: var(--coral-deep); }.showcase-heading p { margin: 0 0 5px; color: var(--ink-soft); line-height: 1.7; }.device-showcase { padding-top: 150px; padding-bottom: 155px; }.showcase-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 68px; }.showcase-card { position: relative; overflow: hidden; border: 1px solid rgba(17,17,26,.12); border-radius: 26px; box-shadow: 0 20px 46px rgba(17,17,26,.08); }.showcase-desktop-card { grid-column: span 7; min-height: 515px; padding: 22px 22px 20px; background: #e9e5de; }.showcase-phone-card { grid-column: span 5; min-height: 515px; padding: 22px 22px 20px; color: #fff; background: radial-gradient(circle at 74% 26%, rgba(201,193,255,.25), transparent 34%), #171723; border-color: rgba(255,255,255,.1); }.showcase-editorial-card { grid-column: span 5; min-height: 445px; padding: 23px 24px 20px; color: #fff; background: #11111a; border-color: rgba(255,255,255,.1); }.showcase-link-card { grid-column: span 7; min-height: 445px; padding: 22px 22px 20px; background: #f1ede7; }.showcase-card-meta, .editorial-card-top { position: relative; z-index: 2; display: flex; justify-content: space-between; color: rgba(17,17,26,.52); font: 400 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.showcase-phone-card .showcase-card-meta, .showcase-editorial-card .editorial-card-top { color: rgba(255,255,255,.48); }.showcase-window { margin: 38px -2px 0; transform: rotate(-1.5deg); }.browser-window { overflow: hidden; border: 1px solid rgba(17,17,26,.16); border-radius: 16px; background: #f8f6f1; box-shadow: 0 23px 35px rgba(27,25,36,.18); }.browser-window-bar { border-bottom: 1px solid rgba(17,17,26,.08); }.showcase-window-app { display: grid; grid-template-columns: 92px 1fr; min-height: 335px; }.showcase-sidebar { display: flex; flex-direction: column; gap: 11px; padding: 15px 11px; color: #938f97; background: #ebe7e0; font: 400 7px var(--mono); }.showcase-brand { display: flex; align-items: center; gap: 4px; margin-bottom: 17px; color: var(--ink); font: 700 11px var(--sans); }.showcase-brand .brand-mark { width: 15px; height: 15px; gap: 2px; }.showcase-brand .brand-mark span { width: 6px; height: 12px; border-width: 1px; }.showcase-sidebar-active { padding: 6px; border-radius: 5px; color: var(--ink); background: #fff; }.showcase-sidebar small { margin-top: auto; font-size: 6px; line-height: 1.4; }.showcase-workspace { position: relative; overflow: hidden; padding: 17px 24px 16px; background: radial-gradient(circle at 76% 15%, rgba(201,193,255,.4), transparent 37%), #fbfaf8; }.workspace-top { position: relative; z-index: 2; display: flex; justify-content: space-between; color: #9994a0; font: 400 7px var(--mono); text-transform: uppercase; }.workspace-top i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #83c09e; }.workspace-hero { position: relative; z-index: 1; margin-top: 45px; }.workspace-hero > span { color: #c56d68; font: 400 12px var(--serif); font-style: italic; }.workspace-hero h3 { margin: 8px 0 7px; color: #252431; font-size: clamp(40px, 5.2vw, 62px); line-height: .85; letter-spacing: -.09em; font-weight: 500; }.workspace-hero h3 em { color: var(--coral-deep); font-family: var(--serif); font-style: italic; font-weight: 500; }.workspace-hero p { max-width: 230px; margin: 0; color: #817d87; font-size: 9px; line-height: 1.5; }.workspace-orbit { position: absolute; z-index: -1; top: -34px; right: -12%; width: 56%; height: 185px; border: 1px solid rgba(215,91,97,.28); border-radius: 50%; transform: rotate(-28deg); }.workspace-thumbs { position: absolute; right: 24px; bottom: 16px; left: 24px; display: grid; grid-template-columns: 1.1fr .8fr .72fr; gap: 6px; align-items: end; }.showcase-thumb { position: relative; height: 61px; overflow: hidden; border-radius: 6px; }.showcase-card-foot { position: absolute; right: 22px; bottom: 18px; left: 22px; display: flex; justify-content: space-between; color: rgba(17,17,26,.54); font: 400 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.showcase-phone-card .showcase-card-foot { color: rgba(255,255,255,.48); }.showcase-card-foot b { color: var(--coral-deep); font-size: 15px; font-weight: 400; }.showcase-phone-stage { position: relative; display: grid; place-items: center; min-height: 414px; }.showcase-phone { position: relative; z-index: 2; left: auto; bottom: auto; width: 195px; transform: rotate(7deg) rotateY(-8deg); }.phone-shadow { position: absolute; bottom: 34px; width: 190px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(15px); transform: rotate(-5deg); }.showcase-editorial-card::before { content: ''; position: absolute; inset: 0; opacity: .28; background: radial-gradient(circle at 18% 20%, rgba(201,193,255,.5), transparent 30%), radial-gradient(circle at 90% 82%, rgba(244,129,114,.32), transparent 31%); }.editorial-art { position: relative; min-height: 345px; display: grid; place-items: center; overflow: hidden; }.editorial-orbit { position: absolute; width: 81%; height: 55%; border: 1px solid rgba(201,193,255,.58); border-radius: 50%; transform: rotate(27deg); }.editorial-orbit-two { width: 76%; height: 49%; border-style: dashed; transform: rotate(-17deg); }.editorial-copy { position: relative; z-index: 2; text-align: center; }.editorial-copy > span { color: var(--yellow); font: 400 13px var(--serif); font-style: italic; }.editorial-copy strong { display: block; margin-top: 10px; color: #fff; font-size: clamp(32px, 4vw, 50px); line-height: .9; letter-spacing: -.08em; font-weight: 500; }.editorial-copy em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 500; }.editorial-copy small { display: block; margin-top: 20px; color: rgba(255,255,255,.46); font: 400 8px var(--mono); }.editorial-corner { position: absolute; z-index: 3; width: 31px; height: 31px; border-color: var(--coral); border-style: solid; }.corner-one { top: 25px; left: 19%; border-width: 2px 0 0 2px; }.corner-two { right: 19%; bottom: 21px; border-width: 0 2px 2px 0; }.editorial-card-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; color: rgba(255,255,255,.62); font: 400 9px var(--mono); line-height: 1.45; text-transform: uppercase; }.editorial-card-bottom b { color: #fff; font-weight: 500; }.editorial-grid-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; padding: 5px; border: 1px solid rgba(255,255,255,.25); }.editorial-grid-mark i { width: 7px; height: 7px; background: rgba(255,255,255,.84); }.editorial-grid-mark i:nth-child(2), .editorial-grid-mark i:nth-child(3) { background: var(--coral); }.link-window { margin: 38px 0 0; transform: rotate(1.2deg); }.link-window-body { position: relative; min-height: 330px; overflow: hidden; padding: 49px 50px 23px; color: #fff; background: radial-gradient(circle at 81% 19%, rgba(201,193,255,.38), transparent 35%), linear-gradient(145deg, #282638, #10111b 72%); }.link-window-body::before { content: ''; position: absolute; right: -8%; bottom: -55%; width: 65%; height: 135%; border: 1px solid rgba(201,193,255,.24); border-radius: 50%; transform: rotate(-25deg); }.link-overline { color: var(--yellow); font: 400 13px var(--serif); font-style: italic; }.link-window-body h3 { position: relative; z-index: 1; margin: 12px 0 10px; font-size: clamp(36px, 4vw, 57px); line-height: .87; letter-spacing: -.09em; font-weight: 500; }.link-window-body h3 em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 500; }.link-window-body p { position: relative; z-index: 1; max-width: 230px; margin: 0; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.55; }.link-window-bottom { position: absolute; right: 50px; bottom: 23px; left: 50px; display: flex; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.48); font: 400 8px var(--mono); text-transform: uppercase; }.link-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #82d3ab; }.link-share { color: var(--coral); }.whatsapp-bubble { position: absolute; right: 27px; top: 42px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(130,211,171,.52); border-radius: 50%; background: rgba(130,211,171,.12); }.whatsapp-bubble span { position: relative; width: 13px; height: 13px; border: 1px solid #8ee0b8; border-radius: 50%; }.whatsapp-bubble span::after { content: ''; position: absolute; left: -3px; bottom: -2px; width: 5px; height: 5px; border-left: 1px solid #8ee0b8; transform: rotate(22deg); }
.journey-window { min-height: 440px; overflow: hidden; padding: 0; color: #fff; background: #171723; border-radius: 16px; box-shadow: var(--shadow-deep); transform: rotate(2deg); }.journey-window-bar { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 12px; color: rgba(255,255,255,.47); background: #2b2a39; font: 400 8px var(--mono); }.journey-window-bar .tiny-label { margin-left: auto; }.journey-window-url { flex: 1; color: rgba(255,255,255,.48); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }.journey-window-body { display: grid; grid-template-columns: 48px 1fr; min-height: 409px; }.journey-window-side { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 18px; background: #11111a; }.journey-window-side > span:not(.journey-window-logo) { width: 14px; height: 1px; background: rgba(255,255,255,.3); }.journey-window-logo { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font: 500 13px var(--serif); font-style: italic; }.journey-window-active { width: 23px !important; height: 23px !important; border: 1px solid rgba(201,193,255,.5); border-radius: 7px; background: rgba(201,193,255,.12); }.journey-window-content { position: relative; overflow: hidden; padding: 49px 28px 20px; background: radial-gradient(circle at 70% 24%, rgba(201,193,255,.25), transparent 36%), #1e1d2a; }.journey-window-kicker { color: var(--yellow); font: 400 14px var(--serif); font-style: italic; }.journey-window-content h3 { position: relative; z-index: 1; margin: 12px 0 0; color: #fff; font-size: 42px; line-height: .88; letter-spacing: -.09em; font-weight: 500; }.journey-window-content h3 em { color: var(--coral); }.journey-window-orbit { position: absolute; top: 71px; left: 10%; width: 90%; height: 185px; border: 1px solid rgba(201,193,255,.4); border-radius: 50%; transform: rotate(25deg); }.journey-window-date { display: block; margin-top: 28px; color: rgba(255,255,255,.48); font: 400 8px var(--mono); }.journey-window-footer { position: absolute; right: 27px; bottom: 20px; left: 27px; display: flex; justify-content: space-between; align-items: end; color: rgba(255,255,255,.55); font: 400 8px var(--mono); line-height: 1.45; text-transform: uppercase; }.journey-window-footer .mini-qr { margin-left: 12px; flex: 0 0 auto; }
.feature-device-board { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(17,17,26,.12); background: radial-gradient(circle at 12% 15%, rgba(201,193,255,.68), transparent 31%), #e7e3dc; box-shadow: 16px 20px 0 rgba(17,17,26,.06); }.feature-device-board::after { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(17,17,26,.12); border-radius: 50%; transform: rotate(-18deg); }.feature-board-top { position: absolute; z-index: 3; top: 24px; right: 27px; left: 27px; display: flex; justify-content: space-between; color: rgba(17,17,26,.5); font: 400 9px var(--mono); text-transform: uppercase; letter-spacing: .05em; }.feature-board-top i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #83c09e; }.feature-mini-browser { position: absolute; z-index: 2; top: 82px; left: 8%; width: 77%; transform: rotate(-4deg); box-shadow: 0 22px 30px rgba(37,32,51,.19); }.mini-browser-body { position: relative; min-height: 285px; overflow: hidden; padding: 32px 25px; color: #fff; background: radial-gradient(circle at 83% 17%, rgba(201,193,255,.35), transparent 35%), #20202d; }.mini-browser-body > span { color: var(--yellow); font: 400 13px var(--serif); font-style: italic; }.mini-browser-body strong { position: relative; z-index: 1; display: block; margin-top: 10px; font-size: 48px; line-height: .88; letter-spacing: -.09em; font-weight: 500; }.mini-browser-body strong em { color: var(--coral-deep); font-family: var(--serif); font-style: italic; font-weight: 500; }.mini-browser-image { position: absolute; right: 22px; bottom: 20px; width: 92px; height: 115px; overflow: hidden; border: 3px solid rgba(255,255,255,.75); border-radius: 50px 50px 8px 8px; transform: rotate(7deg); }.mini-browser-line { position: absolute; right: 18px; bottom: 15px; left: 25px; height: 1px; background: rgba(255,255,255,.22); }.feature-mini-phone { position: absolute; z-index: 4; right: 5%; bottom: 27px; width: 125px; height: 245px; padding: 6px; border: 5px solid #b5b6c0; border-top-color: #f0f0f3; border-radius: 25px; background: #11121b; box-shadow: -10px 15px 25px rgba(37,32,51,.24); transform: rotate(8deg); }.mini-phone-camera { position: absolute; z-index: 2; top: 9px; left: 50%; width: 30px; height: 7px; border-radius: 99px; background: #171722; transform: translateX(-50%); }.mini-phone-screen { position: relative; height: 100%; overflow: hidden; padding: 31px 9px 8px; border-radius: 18px; color: #fff; background: linear-gradient(154deg, #383149, #141522 78%); }.mini-phone-screen > span { color: rgba(255,255,255,.58); font: 400 6px var(--mono); text-transform: uppercase; }.mini-phone-screen strong { position: relative; z-index: 1; display: block; margin-top: 30px; font-size: 25px; line-height: .88; letter-spacing: -.08em; font-weight: 500; }.mini-phone-screen strong em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 500; }.mini-phone-orbit { position: absolute; top: 62px; left: -18px; width: 153px; height: 91px; border: 1px solid rgba(201,193,255,.5); border-radius: 50%; transform: rotate(26deg); }.mini-phone-screen small { position: absolute; bottom: 16px; color: rgba(255,255,255,.42); font: 400 7px var(--mono); }.feature-stamp { position: absolute; z-index: 5; top: 28px; left: 26px; padding: 11px 13px; border: 1px solid rgba(17,17,26,.35); border-radius: 50%; color: rgba(17,17,26,.7); font: 400 9px var(--mono); line-height: 1.25; text-align: center; transform: rotate(-9deg); }.feature-board-note { position: absolute; z-index: 5; right: 28px; bottom: 22px; left: 28px; display: flex; align-items: center; justify-content: space-between; color: rgba(17,17,26,.52); font: 400 9px var(--mono); text-transform: uppercase; }.feature-board-note b { color: var(--coral-deep); font-size: 16px; font-weight: 400; }.occasion-preview { border-radius: 24px; box-shadow: 0 25px 55px rgba(17,17,26,.19); }.preview-top { border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 1000px) { .hero-device-stage { min-height: 560px; }.hero-macbook { left: 5%; width: 90%; }.hero-phone { left: 4%; width: 177px; }.hero-device-stage .note-left { left: -10%; }.hero-device-stage .note-right { right: -10%; }.showcase-grid { gap: 14px; }.showcase-window-app { grid-template-columns: 74px 1fr; }.showcase-sidebar { padding-left: 8px; padding-right: 8px; }.showcase-workspace { padding-left: 16px; padding-right: 16px; }.workspace-thumbs { right: 16px; left: 16px; }.feature-mini-browser { width: 80%; left: 6%; }.feature-mini-phone { right: 3%; } }
@media (max-width: 760px) { .hero-device-stage { min-height: 560px; margin-right: -3px; margin-left: -3px; border-radius: 31px; }.hero-macbook { top: 81px; left: 7%; width: 91%; transform: rotate(-3deg) rotateY(-5deg); }.hero-phone { bottom: 25px; left: 2%; width: 170px; transform: rotate(7deg); }.hero-device-stage .note-left { top: 11%; left: -6%; }.hero-device-stage .note-right { right: -6%; bottom: 10%; }.studio-caption { display: none; }.device-showcase { padding-top: 105px; padding-bottom: 105px; }.showcase-heading { display: block; }.showcase-heading p { max-width: 360px; margin-top: 25px; }.showcase-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 48px; }.showcase-desktop-card, .showcase-phone-card, .showcase-editorial-card, .showcase-link-card { grid-column: auto; min-height: 470px; }.showcase-window { margin-top: 37px; }.showcase-window-app { min-height: 300px; }.showcase-phone-stage { min-height: 382px; }.showcase-phone { width: 183px; }.editorial-art { min-height: 307px; }.link-window-body { min-height: 300px; padding-left: 32px; padding-right: 32px; }.link-window-bottom { right: 32px; left: 32px; }.journey-window { transform: none; }.feature-device-board { min-height: 455px; }.feature-mini-browser { top: 78px; }.mini-browser-body { min-height: 250px; }.feature-mini-phone { bottom: 24px; width: 111px; height: 215px; }.feature-stamp { top: 23px; left: 20px; }.feature-board-note { right: 20px; bottom: 17px; left: 20px; } }
@media (max-width: 430px) { .hero-device-stage { min-height: 485px; }.hero-macbook { top: 65px; left: 4%; width: 96%; }.hero-phone { bottom: 16px; left: -4%; width: 145px; padding: 5px; border-width: 5px; border-radius: 27px; }.phone-shell-screen { padding: 14px 9px 8px; border-radius: 20px; }.hero-device-stage .note-left { left: -16%; transform: scale(.78) rotate(-7deg); }.hero-device-stage .note-right { right: -17%; transform: scale(.78) rotate(5deg); }.browser-chrome, .browser-window-bar { height: 25px; padding: 0 7px; gap: 7px; }.showcase-card { border-radius: 21px; }.showcase-desktop-card, .showcase-phone-card, .showcase-editorial-card, .showcase-link-card { min-height: 425px; padding: 17px; }.showcase-window { margin: 28px -5px 0; }.showcase-window-app { grid-template-columns: 52px 1fr; min-height: 272px; }.showcase-sidebar { gap: 9px; padding: 11px 6px; font-size: 6px; }.showcase-sidebar > span:not(.showcase-brand):not(.showcase-sidebar-active), .showcase-sidebar small { display: none; }.showcase-brand { margin-bottom: 17px; font-size: 9px; }.showcase-brand .brand-mark { width: 13px; height: 13px; }.showcase-brand .brand-mark span { width: 5px; height: 10px; }.showcase-sidebar-active { padding: 5px 3px; font-size: 6px; }.showcase-workspace { padding: 12px; }.workspace-hero { margin-top: 36px; }.workspace-hero h3 { font-size: 40px; }.workspace-thumbs { right: 12px; bottom: 11px; left: 12px; }.showcase-thumb { height: 47px; }.workspace-stat { padding: 5px; }.workspace-stat strong { font-size: 16px; }.showcase-phone-stage { min-height: 340px; }.showcase-phone { width: 161px; }.showcase-card-foot { right: 17px; bottom: 14px; left: 17px; font-size: 8px; }.editorial-art { min-height: 273px; }.editorial-copy strong { font-size: 34px; }.link-window { margin-top: 28px; }.link-window-body { min-height: 273px; padding: 36px 23px 18px; }.link-window-body h3 { font-size: 38px; }.link-window-bottom { right: 23px; bottom: 18px; left: 23px; }.whatsapp-bubble { top: 28px; right: 19px; }.journey-window-content { padding: 39px 20px 17px; }.journey-window-content h3 { font-size: 34px; }.journey-window-footer { right: 19px; bottom: 17px; left: 19px; font-size: 7px; }.feature-device-board { min-height: 385px; }.feature-mini-browser { top: 66px; left: 5%; width: 87%; }.mini-browser-body { min-height: 212px; padding: 24px 17px; }.mini-browser-body strong { font-size: 35px; }.mini-browser-image { right: 14px; bottom: 14px; width: 70px; height: 89px; }.feature-mini-phone { right: 3%; bottom: 21px; width: 91px; height: 178px; padding: 4px; border-width: 4px; }.mini-phone-screen { padding: 23px 7px 7px; border-radius: 14px; }.mini-phone-screen strong { margin-top: 21px; font-size: 18px; }.feature-stamp { padding: 8px 9px; font-size: 7px; }.feature-board-top { top: 17px; right: 18px; left: 18px; font-size: 7px; }.feature-board-note { right: 17px; bottom: 14px; left: 17px; font-size: 7px; } }
/* END LUME DEVICE SHOWCASE */

/* ── App interior pass: dashboard quality, real imagery, less poster ───── */
.dashboard-main { min-height: 316px; padding: 14px 18px 11px; color: #252431; background: #f6f5f1; }.dashboard-top { display: flex; align-items: center; justify-content: space-between; }.dashboard-eyebrow { color: #9a97a0; font: 400 6px var(--mono); letter-spacing: .05em; text-transform: uppercase; }.dashboard-top h3 { margin: 3px 0 0; color: #282632; font-size: 17px; line-height: 1; letter-spacing: -.06em; font-weight: 600; }.dashboard-profile { display: flex; align-items: center; gap: 5px; color: #797681; font: 400 7px var(--mono); }.dashboard-profile i { width: 4px; height: 4px; border-radius: 50%; background: #80c49d; }.dashboard-avatar, .mobile-avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c86f75; font: 600 7px var(--sans); }.dashboard-avatar { width: 18px; height: 18px; }.dashboard-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 7px; margin-top: 12px; }.dashboard-primary-card { padding: 10px; border: 1px solid rgba(17,17,26,.09); border-radius: 8px; background: #fff; box-shadow: 0 5px 13px rgba(17,17,26,.05); }.dashboard-card-top { display: flex; align-items: center; justify-content: space-between; color: #9b98a1; font: 400 6px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.dashboard-live { color: #5da27b; }.dashboard-live i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #80c49d; }.dashboard-story-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 12px; }.dashboard-story-copy > span { color: #c66f73; font: 400 8px var(--serif); font-style: italic; }.dashboard-story-copy h4 { margin: 4px 0 3px; color: #262431; font-size: 19px; line-height: .86; letter-spacing: -.09em; font-weight: 500; }.dashboard-story-copy h4 em { color: #c86167; font-family: var(--serif); font-style: italic; font-weight: 500; }.dashboard-story-copy small { color: #9a97a0; font: 400 6px var(--mono); }.dashboard-story-image { position: relative; width: 70px; height: 82px; overflow: hidden; flex: 0 0 70px; border-radius: 7px 7px 22px 22px; background: linear-gradient(135deg, rgba(24,24,39,.08), rgba(24,24,39,.42)), url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=420&q=85') center/cover; }.dashboard-story-image span, .mobile-card-photo span { position: absolute; right: 6px; bottom: 5px; color: rgba(255,255,255,.78); font: 400 6px var(--mono); }.dashboard-progress { margin-top: 12px; }.dashboard-progress > div { display: flex; justify-content: space-between; color: #94909a; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-progress strong { color: #2b2935; font-weight: 600; }.dashboard-progress > i { display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #eae6e1; }.dashboard-progress > i b { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c86f75, #e6b878); }.dashboard-side-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 7px; }.dashboard-mini-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 9px; border-radius: 8px; color: #312e3b; background: #eee8dc; }.dashboard-mini-card.is-dark { color: #fff; background: #272638; }.dashboard-label { color: #8f8a91; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-mini-card.is-dark .dashboard-label { color: rgba(255,255,255,.47); }.dashboard-mini-card strong { margin-top: 4px; font: 500 21px var(--serif); letter-spacing: -.06em; }.dashboard-mini-card small { color: #9b969c; font: 400 6px var(--mono); }.dashboard-mini-card.is-dark small { color: rgba(255,255,255,.45); }.dashboard-mini-card > b { position: absolute; right: 8px; top: 8px; color: #c86f75; font-size: 11px; font-weight: 400; }.dashboard-heart { position: absolute; right: 8px; bottom: 5px; color: #e4ac9e; font-size: 19px; }.dashboard-footer { display: grid; grid-template-columns: 1fr .78fr; gap: 7px; margin-top: 8px; }.dashboard-timeline, .dashboard-share { min-width: 0; padding: 8px 9px; border-top: 1px solid rgba(17,17,26,.1); }.dashboard-timeline span, .dashboard-share span { display: block; color: #9a97a0; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-timeline strong { display: block; overflow: hidden; margin-top: 4px; color: #3a3744; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.dashboard-timeline small { color: #aaa6ae; font: 400 6px var(--mono); }.dashboard-share { text-align: right; }.dashboard-share button { margin-top: 5px; padding: 4px 6px; border: 0; border-radius: 99px; color: #fff; background: #c86f75; font: 600 6px var(--sans); }
.dashboard-mobile-screen { padding: 15px 11px 8px; color: #292633; background: #f6f5f1; }.mobile-dashboard-top { display: flex; align-items: center; justify-content: space-between; }.mobile-dashboard-brand { display: flex; align-items: center; gap: 5px; color: #292633; font: 700 12px var(--sans); letter-spacing: -.05em; }.mobile-dashboard-brand .mobile-mark { width: 17px; height: 17px; font-size: 11px; }.mobile-avatar { width: 22px; height: 22px; font-size: 7px; }.mobile-greeting { margin-top: 15px; }.mobile-greeting small { color: #9b97a0; font: 400 6px var(--mono); text-transform: uppercase; }.mobile-greeting h3 { margin: 3px 0 0; color: #282532; font-size: 20px; line-height: 1; letter-spacing: -.08em; font-weight: 600; }.mobile-published-card { margin-top: 13px; padding: 10px 10px 8px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #303049, #1e1e2d); box-shadow: 0 10px 20px rgba(30,30,45,.2); }.mobile-card-top, .mobile-card-meta { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.56); font: 400 6px var(--mono); text-transform: uppercase; letter-spacing: .04em; }.mobile-card-top > span:last-child { color: #98d0af; }.mobile-card-top i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #8ed4ab; }.mobile-public-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 17px; }.mobile-public-row > div:first-child > span { color: #e9b774; font: 400 10px var(--serif); font-style: italic; }.mobile-public-row strong { display: block; margin-top: 5px; color: #fff; font-size: 23px; line-height: .86; letter-spacing: -.09em; font-weight: 500; }.mobile-public-row strong em { color: #f4867b; font-family: var(--serif); font-style: italic; font-weight: 500; }.mobile-card-photo { position: relative; width: 58px; height: 73px; overflow: hidden; flex: 0 0 58px; border: 2px solid rgba(255,255,255,.72); border-radius: 28px 28px 8px 8px; background: linear-gradient(135deg, rgba(24,24,39,.1), rgba(24,24,39,.45)), url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=420&q=85') center/cover; transform: rotate(5deg); }.mobile-card-meta { margin-top: 14px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.16); }.mobile-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; padding: 0 0 10px; border-bottom: 1px solid rgba(17,17,26,.1); }.mobile-stat-row > div { padding-left: 8px; border-left: 1px solid rgba(17,17,26,.1); }.mobile-stat-row > div:first-child { padding-left: 0; border-left: 0; }.mobile-stat-row strong, .mobile-stat-row small { display: block; }.mobile-stat-row strong { color: #363240; font: 500 16px var(--serif); letter-spacing: -.06em; }.mobile-stat-row small { margin-top: 1px; color: #9b97a0; font: 400 6px var(--mono); text-transform: uppercase; }.mobile-action-card { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px; border: 1px solid rgba(17,17,26,.08); border-radius: 10px; background: #fff; box-shadow: 0 5px 11px rgba(17,17,26,.04); }.action-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: #c86f75; font-size: 13px; }.mobile-action-card b, .mobile-action-card small { display: block; }.mobile-action-card b { color: #35313d; font-size: 8px; }.mobile-action-card small { margin-top: 2px; color: #9b97a0; font: 400 6px var(--mono); }.mobile-action-card > span:last-child { margin-left: auto; color: #c86f75; font-size: 13px; }.mobile-dashboard-nav { display: flex; justify-content: space-around; margin-top: 16px; color: #9c98a0; font: 400 6px var(--mono); text-align: center; text-transform: uppercase; }.mobile-dashboard-nav span { display: grid; gap: 3px; justify-items: center; }.mobile-dashboard-nav i { display: block; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 2px; }.mobile-dashboard-nav .is-active { color: #c86f75; }.mobile-dashboard-nav .is-active i { background: #c86f75; }
.desktop-photo::before, .showcase-thumb::before, .mobile-memory-photo::before, .mini-browser-image::before { z-index: 0; background-size: cover; background-position: center; opacity: .96; }.desktop-photo::after, .showcase-thumb::after, .mobile-memory-photo::after, .mini-browser-image::after { display: none; }.desktop-photo.photo-a::before, .showcase-thumb.thumb-one::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=720&q=85'); }.desktop-photo.photo-b::before, .showcase-thumb.thumb-two::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=720&q=85'); }.mobile-memory-photo::before, .mini-browser-image::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=720&q=85'); }
@media (max-width: 430px) { .dashboard-main { padding: 11px 12px 8px; }.dashboard-grid { gap: 5px; margin-top: 9px; }.dashboard-story-image { width: 58px; height: 68px; flex-basis: 58px; }.dashboard-story-copy h4 { font-size: 16px; }.dashboard-mini-card { padding: 7px; }.dashboard-mini-card strong { font-size: 17px; }.dashboard-footer { gap: 4px; margin-top: 5px; }.dashboard-timeline, .dashboard-share { padding: 5px 6px; }.dashboard-share button { font-size: 5px; }.dashboard-mobile-screen { padding: 12px 9px 6px; }.mobile-greeting { margin-top: 11px; }.mobile-greeting h3 { font-size: 18px; }.mobile-published-card { margin-top: 10px; padding: 8px; }.mobile-public-row { margin-top: 12px; }.mobile-public-row strong { font-size: 20px; }.mobile-card-photo { width: 49px; height: 62px; flex-basis: 49px; }.mobile-stat-row { margin-top: 9px; padding-bottom: 7px; }.mobile-stat-row strong { font-size: 14px; }.mobile-action-card { margin-top: 8px; padding: 7px; }.mobile-dashboard-nav { margin-top: 10px; } }

/* ── Premium device v2: closer to the supplied iPhone / MacBook product shots ── */
.hero-device-stage {
  min-height: 650px;
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 68% 22%, rgba(68, 105, 143, .34), transparent 32%),
    radial-gradient(ellipse at 20% 85%, rgba(22, 53, 80, .38), transparent 35%),
    linear-gradient(145deg, #07111d 0%, #0b1725 58%, #102438 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 35px 90px rgba(7, 17, 29, .32);
}
.hero-device-stage::before { inset: 7% 8%; border-color: rgba(175, 205, 228, .13); }
.hero-device-stage::after { opacity: .11; background-size: 42px 42px; }
.hero-device-stage .scene-grid { opacity: .36; border-color: rgba(175,205,228,.12); }
.hero-device-stage .scene-grid::before,
.hero-device-stage .scene-grid::after { background: rgba(175,205,228,.11); }
.hero-device-stage .studio-caption,
.hero-device-stage .floating-note { display: none; }

.hero-macbook {
  top: 84px;
  left: 0;
  width: min(650px, 101%);
  transform: rotate(-3deg) rotateY(-11deg) rotateX(1deg);
  filter: drop-shadow(0 34px 30px rgba(0,0,0,.36));
}
.macbook-screen {
  padding: 10px;
  border-radius: 22px 22px 10px 10px;
  border-color: #303945;
  border-bottom-color: #171d25;
  background: linear-gradient(145deg, #687380 0%, #404a56 58%, #232b35 100%);
  box-shadow: 0 29px 44px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.96);
}
.macbook-base {
  width: 118%;
  height: 100px;
  margin: -1px -9% 0;
  border-radius: 0 0 17px 17px;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #68727e 0%, #3f4853 45%, #20262d 100%);
  box-shadow: 0 18px 27px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.82);
  transform: perspective(560px) rotateX(4deg);
  transform-origin: top center;
}
.macbook-base::before { left: 42%; top: 5px; width: 16%; height: 3px; background: #1c232b; }
.macbook-base::after {
  left: 13%; right: 13%; top: 9px; height: 34px;
  border-radius: 5px;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(28,35,43,.78) 6% 94%, transparent 94%),
    repeating-linear-gradient(90deg, rgba(22,29,37,.88) 0 5px, transparent 5px 7px),
    repeating-linear-gradient(180deg, rgba(22,29,37,.84) 0 4px, transparent 4px 7px);
  transform: perspective(170px) rotateX(18deg);
}
.macbook-base span {
  left: 38%; right: 38%; bottom: 8px; height: 14px;
  border: 1px solid rgba(20,27,34,.54);
  border-radius: 5px;
  background: rgba(161,173,184,.24);
  filter: none;
}

.desktop-app { grid-template-columns: 112px 1fr; min-height: 360px; background: #f7f9fb; }
.desktop-sidebar {
  gap: 6px;
  padding: 16px 10px 12px;
  border-right: 1px solid #e2e7ed;
  background: #f1f4f7;
}
.desktop-sidebar span[data-mac-tab] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 7px;
  white-space: nowrap;
}
.desktop-sidebar span[data-mac-tab]::before {
  content: '';
  width: 7px; height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .68;
}
.desktop-sidebar .sidebar-active {
  color: #1b334a;
  background: #e1ebf4;
  box-shadow: inset 2px 0 0 #2f77ae;
}
.desktop-sidebar .sidebar-active::before { background: #2f77ae; border-color: #2f77ae; }
.dashboard-main {
  min-height: 360px;
  padding: 18px 20px 14px;
  background: #f8fafc;
}
.dashboard-top { padding-bottom: 11px; border-bottom: 1px solid #e4e9ee; }
.dashboard-eyebrow { color: #84909b; letter-spacing: .08em; }
.dashboard-top h3 { color: #172638; font-size: 19px; letter-spacing: -.045em; }
.dashboard-profile { color: #64717d; }
.dashboard-avatar { background: #2f77ae; }
.dashboard-grid { gap: 10px; margin-top: 14px; grid-template-columns: 1.52fr .78fr; }
.dashboard-primary-card { padding: 12px; border-color: #e3e8ed; border-radius: 11px; box-shadow: 0 8px 20px rgba(28,45,61,.07); }
.dashboard-card-top { color: #87929d; }
.dashboard-story-row { margin-top: 15px; }
.dashboard-story-copy > span { color: #2f77ae; font-family: var(--sans); font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-story-copy h4 { color: #1b2b3b; font-family: var(--sans); font-size: 18px; line-height: .96; letter-spacing: -.06em; font-weight: 700; }
.dashboard-story-copy h4 em { color: #2f77ae; font-family: var(--sans); font-style: normal; font-weight: 700; }
.dashboard-story-copy small { color: #8b96a1; }
.dashboard-story-image { width: 76px; height: 90px; flex-basis: 76px; border-radius: 8px 8px 24px 24px; }
.dashboard-progress { margin-top: 14px; }
.dashboard-progress > i { background: #e6ebef; }
.dashboard-progress > i b { background: linear-gradient(90deg, #2f77ae, #69b1c4); }
.dashboard-activity { margin-top: 12px; padding-top: 9px; border-top: 1px solid #e8edf1; }
.dashboard-activity > div:first-child { display: flex; align-items: center; justify-content: space-between; color: #85919c; font: 600 6px var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.dashboard-activity small { color: #a5afb8; font-weight: 400; }
.dashboard-bars { display: flex; align-items: end; gap: 4px; height: 25px; margin-top: 6px; }
.dashboard-bars i { display: block; flex: 1; min-width: 4px; border-radius: 3px 3px 1px 1px; background: #c9dce5; }
.dashboard-bars i:nth-child(1) { height: 9px; }.dashboard-bars i:nth-child(2) { height: 15px; }.dashboard-bars i:nth-child(3) { height: 12px; }.dashboard-bars i:nth-child(4) { height: 20px; background: #79b7c8; }.dashboard-bars i:nth-child(5) { height: 16px; }.dashboard-bars i:nth-child(6) { height: 23px; background: #2f77ae; }.dashboard-bars i:nth-child(7) { height: 18px; }
.dashboard-mini-card { padding: 10px; border: 1px solid #e5e9ed; border-radius: 11px; background: #fff; }
.dashboard-mini-card.is-dark { border-color: #1d3349; background: #16293b; }
.dashboard-label { color: #8b96a1; }
.dashboard-mini-card strong { color: #1b2b3b; font-family: var(--sans); font-size: 21px; font-weight: 700; }
.dashboard-mini-card.is-dark strong { color: #fff; }
.dashboard-mini-card > b { color: #2f77ae; }
.dashboard-heart { color: #8cc7da; }
.dashboard-timeline, .dashboard-share { border-color: #e1e7eb; }
.dashboard-timeline span, .dashboard-share span { color: #87929d; }
.dashboard-timeline strong { color: #2a3b4c; }
.dashboard-share button { background: #2f77ae; }

.hero-phone {
  left: 4%;
  bottom: 18px;
  width: 218px;
  border-color: #718092;
  border-radius: 41px;
  background: linear-gradient(145deg, #fbfcfd 0%, #c9d1da 15%, #727f8e 58%, #283441 100%);
  box-shadow: -19px 34px 42px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.84), inset -5px -10px 13px rgba(24,33,44,.44);
  transform: rotate(6deg) rotateY(-10deg);
}
.phone-shell-screen.dashboard-mobile-screen {
  padding: 7px 13px 10px;
  color: #1d2b39;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(26,45,64,.08);
}
.mobile-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #293845;
  font: 600 7px var(--mono);
  letter-spacing: .01em;
}
.mobile-dashboard-top {
  margin-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e5eaee;
}
.mobile-dashboard-brand { color: #172638; }
.mobile-dashboard-brand .mobile-mark { border-color: #2f77ae; color: #2f77ae; }
.mobile-avatar { background: #2f77ae; }
.mobile-greeting { margin-top: 14px; }
.mobile-greeting small { color: #87929d; }
.mobile-greeting h3 { color: #172638; font-size: 20px; }
.mobile-published-card {
  margin-top: 13px;
  border-radius: 16px;
  background: linear-gradient(145deg, #17334d 0%, #122335 100%);
  box-shadow: 0 12px 25px rgba(17,42,66,.22);
}
.mobile-card-top, .mobile-card-meta { color: rgba(255,255,255,.6); }
.mobile-public-row > div:first-child > span { color: #91cbd9; font-family: var(--sans); font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mobile-public-row strong { font-family: var(--sans); font-weight: 700; letter-spacing: -.065em; }
.mobile-public-row strong em { color: #8fc6d4; font-family: var(--sans); font-style: normal; font-weight: 700; }
.mobile-card-photo { border-color: rgba(255,255,255,.82); }
.mobile-stat-row { border-color: #e1e7eb; }
.mobile-stat-row > div { border-color: #e1e7eb; }
.mobile-stat-row strong { color: #1d2b39; font-family: var(--sans); font-weight: 700; }
.mobile-stat-row small { color: #87929d; }
.mobile-action-card { border-color: #e1e7eb; background: #fff; box-shadow: 0 7px 14px rgba(24,43,60,.07); }
.action-icon { background: #2f77ae; }
.mobile-action-card b { color: #1d2b39; }
.mobile-action-card > span:last-child { color: #2f77ae; }
.mobile-dashboard-nav { color: #8b96a1; }
.mobile-dashboard-nav .is-active { color: #2f77ae; }
.mobile-dashboard-nav .is-active i { background: #2f77ae; }

.showcase-phone { width: 215px; transform: rotate(6deg) rotateY(-10deg); }
.showcase-phone-stage { min-height: 414px; background: radial-gradient(ellipse at 50% 90%, rgba(89,148,190,.22), transparent 44%); }

@media (max-width: 1000px) {
  .hero-macbook { left: 1%; width: 99%; }
  .hero-phone { width: 205px; left: 2%; }
}
@media (max-width: 760px) {
  .hero-device-stage { min-height: 610px; }
  .hero-macbook { top: 87px; left: 3%; width: 96%; }
  .hero-phone { bottom: 21px; left: 1%; width: 190px; }
}
@media (max-width: 430px) {
  .hero-device-stage { min-height: 505px; }
  .hero-macbook { top: 70px; left: 3%; width: 96%; }
  .hero-phone { bottom: 14px; left: -4%; width: 154px; }
  .macbook-base { height: 56px; }
  .macbook-base::after { top: 6px; height: 23px; }
  .macbook-base span { bottom: 4px; height: 9px; }
  .desktop-app { grid-template-columns: 70px 1fr; min-height: 286px; }
  .dashboard-main { min-height: 286px; padding: 12px 12px 9px; }
  .dashboard-story-image { width: 61px; height: 70px; flex-basis: 61px; }
  .dashboard-story-copy h4 { font-size: 15px; }
  .phone-shell-screen.dashboard-mobile-screen { padding-left: 9px; padding-right: 9px; }
  .mobile-statusbar { font-size: 6px; }
  .mobile-dashboard-top { margin-top: 7px; }
}

/* Hardware realism pass: product-shot devices with a real interface inside. */
.hero-device-stage {
  overflow: visible;
  background:
    radial-gradient(circle at 70% 34%, rgba(91, 113, 157, .34), transparent 28%),
    linear-gradient(145deg, #0b1422 0%, #111d2d 54%, #182a3d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 76px rgba(20,27,44,.24);
}
.hero-device-stage::before {
  inset: 8%;
  border-color: rgba(190,209,232,.24);
}
.hero-device-stage::after {
  opacity: .18;
  background-image: linear-gradient(rgba(192,211,235,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(192,211,235,.14) 1px, transparent 1px);
}
.hero-device-stage .scene-grid { border-color: rgba(190,209,232,.2); }
.hero-device-stage .scene-grid::before,
.hero-device-stage .scene-grid::after { background: rgba(190,209,232,.18); }
.hero-device-stage .studio-caption { color: rgba(235,242,249,.52); }

.hero-macbook {
  top: 76px;
  left: 8%;
  width: min(575px, 90%);
  filter: drop-shadow(0 28px 24px rgba(0,0,0,.28));
}
.macbook-screen {
  padding: 8px;
  border-color: #c7cbd4;
  border-bottom-color: #777d89;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(145deg, #f3f5f8 0%, #bcc2cc 56%, #8d95a2 100%);
  box-shadow: 0 28px 38px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.92);
}
.macbook-screen::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: inherit;
  pointer-events: none;
}
.macbook-camera {
  top: 4px;
  width: 4px;
  height: 4px;
  background: #28303d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 5px rgba(87,132,181,.45);
}
.macbook-base {
  width: 114%;
  height: 27px;
  margin: -1px -7% 0;
  border-color: #a2a8b3;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #dfe2e7 0%, #b4bac4 47%, #828a97 100%);
  box-shadow: 0 15px 22px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.72);
}
.macbook-base::before {
  left: 42%;
  top: 4px;
  width: 16%;
  height: 3px;
  background: #707986;
}
.macbook-base::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 7px;
  height: 8px;
  border-radius: 4px;
  opacity: .34;
  background: repeating-linear-gradient(90deg, #626b78 0 4px, transparent 4px 6px);
}
.macbook-base span {
  left: 40%;
  right: 40%;
  bottom: 4px;
  height: 5px;
  border: 1px solid rgba(83,91,103,.38);
  border-radius: 4px;
  background: rgba(245,247,249,.25);
  filter: none;
}

.hero-phone,
.showcase-phone {
  padding: 7px;
  border: 1px solid #687281;
  border-radius: 38px;
  background: linear-gradient(145deg, #f4f5f6 0%, #b8c0cb 18%, #6e7785 58%, #252d39 100%);
  box-shadow: -18px 29px 36px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.72), inset -4px -8px 10px rgba(28,34,44,.4);
}
.hero-phone::before,
.showcase-phone::before {
  content: '';
  position: absolute;
  top: 20%;
  right: -3px;
  width: 3px;
  height: 52px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#7c8795 0 29%, transparent 29% 36%, #7c8795 36% 68%, transparent 68% 74%, #7c8795 74%);
  box-shadow: 1px 0 2px rgba(255,255,255,.32);
}
.hero-phone::after,
.showcase-phone::after {
  content: '';
  position: absolute;
  top: 21%;
  left: -3px;
  width: 3px;
  height: 34px;
  border-radius: 3px 0 0 3px;
  background: #76808d;
  box-shadow: 0 13px 0 #76808d;
}
.phone-glass {
  inset: 6px;
  border-radius: 31px;
  background: linear-gradient(120deg, rgba(255,255,255,.27), transparent 21%, transparent 70%, rgba(255,255,255,.1));
}
.phone-camera {
  top: 12px;
  width: 47px;
  height: 13px;
  background: #11151e;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12), 0 0 0 1px rgba(8,11,16,.24);
}
.phone-camera::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7891a9 0 20%, #202c3d 38%, #090c13 70%);
}
.phone-shell-screen {
  border-radius: 29px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.showcase-phone { width: 205px; }
.showcase-phone-stage {
  background: radial-gradient(ellipse at 50% 88%, rgba(255,255,255,.13), transparent 40%);
}

@media (max-width: 1000px) {
  .hero-macbook { left: 5%; width: 92%; }
  .hero-phone { width: 190px; }
}
@media (max-width: 760px) {
  .hero-macbook { top: 81px; left: 6%; width: 92%; }
  .hero-phone { left: 2%; width: 178px; }
}
@media (max-width: 430px) {
  .hero-macbook { top: 65px; left: 3%; width: 97%; }
  .hero-phone { left: -4%; width: 150px; padding: 5px; border-radius: 29px; }
  .phone-glass { inset: 5px; border-radius: 23px; }
  .phone-camera { top: 9px; width: 38px; height: 10px; }
  .phone-shell-screen { border-radius: 22px; }
  .showcase-phone { width: 167px; }
}

/* Wizard dark mode: the overlay follows the same ink/coral system as the app. */
.wizard-header-actions { display: flex; align-items: center; gap: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.locale-toggle { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: transparent; font: 500 10px var(--mono); cursor: pointer; }
.locale-toggle:hover { color: var(--ink); border-color: var(--ink); background: rgba(255,255,255,.55); }
.wizard-theme-toggle {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: transparent;
  font: 500 10px var(--mono);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.wizard-theme-toggle:hover { color: var(--ink); border-color: var(--ink); background: rgba(255,255,255,.55); }
.wizard-backdrop.is-dark .wizard {
  color: #f6f5f1;
  background: #181824;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.wizard-backdrop.is-dark .wizard-theme-toggle {
  color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.18);
}
.wizard-backdrop.is-dark .wizard-theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.wizard-backdrop.is-dark .icon-button { border-color: rgba(255,255,255,.18); }
.wizard-backdrop.is-dark .icon-button span { background: #fff; }
.wizard-backdrop.is-dark .wizard-step > p,
.wizard-backdrop.is-dark .wizard-step label,
.wizard-backdrop.is-dark .wizard-subchoice > span { color: rgba(255,255,255,.66) !important; }
.wizard-backdrop.is-dark .wizard-step input,
.wizard-backdrop.is-dark .wizard-step textarea {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}
.wizard-backdrop.is-dark .wizard-step input::placeholder,
.wizard-backdrop.is-dark .wizard-step textarea::placeholder { color: rgba(255,255,255,.4); }
.wizard-backdrop.is-dark .choice-card,
.wizard-backdrop.is-dark .theme-card { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.wizard-backdrop.is-dark .choice-card:hover,
.wizard-backdrop.is-dark .choice-card.is-selected,
.wizard-backdrop.is-dark .theme-card:hover,
.wizard-backdrop.is-dark .theme-card.is-selected { border-color: var(--coral); background: rgba(244,129,114,.11); }
.wizard-backdrop.is-dark .choice-card small,
.wizard-backdrop.is-dark .theme-card small { color: rgba(255,255,255,.52); }
.wizard-backdrop.is-dark .wizard-hint { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.12); background: rgba(244,215,140,.12); }
.wizard-backdrop.is-dark .summary-card,
.wizard-backdrop.is-dark .checkout-box { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.wizard-backdrop.is-dark .summary-card span,
.wizard-backdrop.is-dark .checkout-box label { color: rgba(255,255,255,.58); }
.wizard-backdrop.is-dark .text-button { color: rgba(255,255,255,.72); }
@media (max-width: 520px) {
  .wizard-header-actions { gap: 6px; }
  .wizard-theme-toggle { padding: 0 8px; font-size: 9px; }
}



/* ── App interior pass: dashboard quality, real imagery, less poster ───── */
.dashboard-main { min-height: 316px; padding: 14px 18px 11px; color: #252431; background: #f6f5f1; }.dashboard-top { display: flex; align-items: center; justify-content: space-between; }.dashboard-eyebrow { color: #9a97a0; font: 400 6px var(--mono); letter-spacing: .05em; text-transform: uppercase; }.dashboard-top h3 { margin: 3px 0 0; color: #282632; font-size: 17px; line-height: 1; letter-spacing: -.06em; font-weight: 600; }.dashboard-profile { display: flex; align-items: center; gap: 5px; color: #797681; font: 400 7px var(--mono); }.dashboard-profile i { width: 4px; height: 4px; border-radius: 50%; background: #80c49d; }.dashboard-avatar, .mobile-avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c86f75; font: 600 7px var(--sans); }.dashboard-avatar { width: 18px; height: 18px; }.dashboard-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 7px; margin-top: 12px; }.dashboard-primary-card { padding: 10px; border: 1px solid rgba(17,17,26,.09); border-radius: 8px; background: #fff; box-shadow: 0 5px 13px rgba(17,17,26,.05); }.dashboard-card-top { display: flex; align-items: center; justify-content: space-between; color: #9b98a1; font: 400 6px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.dashboard-live { color: #5da27b; }.dashboard-live i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #80c49d; }.dashboard-story-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 12px; }.dashboard-story-copy > span { color: #c66f73; font: 400 8px var(--serif); font-style: italic; }.dashboard-story-copy h4 { margin: 4px 0 3px; color: #262431; font-size: 19px; line-height: .86; letter-spacing: -.09em; font-weight: 500; }.dashboard-story-copy h4 em { color: #c86167; font-family: var(--serif); font-style: italic; font-weight: 500; }.dashboard-story-copy small { color: #9a97a0; font: 400 6px var(--mono); }.dashboard-story-image { position: relative; width: 70px; height: 82px; overflow: hidden; flex: 0 0 70px; border-radius: 7px 7px 22px 22px; background: linear-gradient(135deg, rgba(24,24,39,.08), rgba(24,24,39,.42)), url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=420&q=85') center/cover; }.dashboard-story-image span, .mobile-card-photo span { position: absolute; right: 6px; bottom: 5px; color: rgba(255,255,255,.78); font: 400 6px var(--mono); }.dashboard-progress { margin-top: 12px; }.dashboard-progress > div { display: flex; justify-content: space-between; color: #94909a; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-progress strong { color: #2b2935; font-weight: 600; }.dashboard-progress > i { display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #eae6e1; }.dashboard-progress > i b { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c86f75, #e6b878); }.dashboard-side-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 7px; }.dashboard-mini-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 9px; border-radius: 8px; color: #312e3b; background: #eee8dc; }.dashboard-mini-card.is-dark { color: #fff; background: #272638; }.dashboard-label { color: #8f8a91; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-mini-card.is-dark .dashboard-label { color: rgba(255,255,255,.47); }.dashboard-mini-card strong { margin-top: 4px; font: 500 21px var(--serif); letter-spacing: -.06em; }.dashboard-mini-card small { color: #9b969c; font: 400 6px var(--mono); }.dashboard-mini-card.is-dark small { color: rgba(255,255,255,.45); }.dashboard-mini-card > b { position: absolute; right: 8px; top: 8px; color: #c86f75; font-size: 11px; font-weight: 400; }.dashboard-heart { position: absolute; right: 8px; bottom: 5px; color: #e4ac9e; font-size: 19px; }.dashboard-footer { display: grid; grid-template-columns: 1fr .78fr; gap: 7px; margin-top: 8px; }.dashboard-timeline, .dashboard-share { min-width: 0; padding: 8px 9px; border-top: 1px solid rgba(17,17,26,.1); }.dashboard-timeline span, .dashboard-share span { display: block; color: #9a97a0; font: 400 6px var(--mono); text-transform: uppercase; }.dashboard-timeline strong { display: block; overflow: hidden; margin-top: 4px; color: #3a3744; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.dashboard-timeline small { color: #aaa6ae; font: 400 6px var(--mono); }.dashboard-share button { margin-top: 5px; padding: 4px 6px; border: 0; border-radius: 99px; color: #fff; background: #c86f75; font: 600 6px var(--sans); }.dashboard-share { text-align: right; }
.dashboard-mobile-screen { padding: 15px 11px 8px; color: #292633; background: #f6f5f1; }.mobile-dashboard-top { display: flex; align-items: center; justify-content: space-between; }.mobile-dashboard-brand { display: flex; align-items: center; gap: 5px; color: #292633; font: 700 12px var(--sans); letter-spacing: -.05em; }.mobile-dashboard-brand .mobile-mark { width: 17px; height: 17px; font-size: 11px; }.mobile-avatar { width: 22px; height: 22px; font-size: 7px; }.mobile-greeting { margin-top: 15px; }.mobile-greeting small { color: #9b97a0; font: 400 6px var(--mono); text-transform: uppercase; }.mobile-greeting h3 { margin: 3px 0 0; color: #282532; font-size: 20px; line-height: 1; letter-spacing: -.08em; font-weight: 600; }.mobile-published-card { margin-top: 13px; padding: 10px 10px 8px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #303049, #1e1e2d); box-shadow: 0 10px 20px rgba(30,30,45,.2); }.mobile-card-top, .mobile-card-meta { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.56); font: 400 6px var(--mono); text-transform: uppercase; letter-spacing: .04em; }.mobile-card-top > span:last-child { color: #98d0af; }.mobile-card-top i { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #8ed4ab; }.mobile-public-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 17px; }.mobile-public-row > div:first-child > span { color: #e9b774; font: 400 10px var(--serif); font-style: italic; }.mobile-public-row strong { display: block; margin-top: 5px; color: #fff; font-size: 23px; line-height: .86; letter-spacing: -.09em; font-weight: 500; }.mobile-public-row strong em { color: #f4867b; font-family: var(--serif); font-style: italic; font-weight: 500; }.mobile-card-photo { position: relative; width: 58px; height: 73px; overflow: hidden; flex: 0 0 58px; border: 2px solid rgba(255,255,255,.72); border-radius: 28px 28px 8px 8px; background: linear-gradient(135deg, rgba(24,24,39,.1), rgba(24,24,39,.45)), url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=420&q=85') center/cover; transform: rotate(5deg); }.mobile-card-meta { margin-top: 14px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.16); }.mobile-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; padding: 0 0 10px; border-bottom: 1px solid rgba(17,17,26,.1); }.mobile-stat-row > div { padding-left: 8px; border-left: 1px solid rgba(17,17,26,.1); }.mobile-stat-row > div:first-child { padding-left: 0; border-left: 0; }.mobile-stat-row strong, .mobile-stat-row small { display: block; }.mobile-stat-row strong { color: #363240; font: 500 16px var(--serif); letter-spacing: -.06em; }.mobile-stat-row small { margin-top: 1px; color: #9b97a0; font: 400 6px var(--mono); text-transform: uppercase; }.mobile-action-card { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px; border: 1px solid rgba(17,17,26,.08); border-radius: 10px; background: #fff; box-shadow: 0 5px 11px rgba(17,17,26,.04); }.action-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: #c86f75; font-size: 13px; }.mobile-action-card b, .mobile-action-card small { display: block; }.mobile-action-card b { color: #35313d; font-size: 8px; }.mobile-action-card small { margin-top: 2px; color: #9b97a0; font: 400 6px var(--mono); }.mobile-action-card > span:last-child { margin-left: auto; color: #c86f75; font-size: 13px; }.mobile-dashboard-nav { display: flex; justify-content: space-around; margin-top: 16px; color: #9c98a0; font: 400 6px var(--mono); text-align: center; text-transform: uppercase; }.mobile-dashboard-nav span { display: grid; gap: 3px; justify-items: center; }.mobile-dashboard-nav i { display: block; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 2px; }.mobile-dashboard-nav .is-active { color: #c86f75; }.mobile-dashboard-nav .is-active i { background: #c86f75; }

/* Replace abstract placeholders with photographic texture; gradients remain as fallbacks. */
.desktop-photo::before, .showcase-thumb::before, .mobile-memory-photo::before, .mini-browser-image::before { z-index: 0; background-size: cover; background-position: center; opacity: .96; }.desktop-photo::after, .showcase-thumb::after, .mobile-memory-photo::after, .mini-browser-image::after { display: none; }.desktop-photo.photo-a::before, .showcase-thumb.thumb-one::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=720&q=85'); }.desktop-photo.photo-b::before, .showcase-thumb.thumb-two::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=720&q=85'); }.mobile-memory-photo::before, .mini-browser-image::before { background-image: linear-gradient(145deg, rgba(30,25,42,.04), rgba(30,25,42,.24)), url('https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=720&q=85'); }
@media (max-width: 430px) { .dashboard-main { padding: 11px 12px 8px; }.dashboard-grid { gap: 5px; margin-top: 9px; }.dashboard-story-image { width: 58px; height: 68px; flex-basis: 58px; }.dashboard-story-copy h4 { font-size: 16px; }.dashboard-mini-card { padding: 7px; }.dashboard-mini-card strong { font-size: 17px; }.dashboard-footer { gap: 4px; margin-top: 5px; }.dashboard-timeline, .dashboard-share { padding: 5px 6px; }.dashboard-share button { font-size: 5px; }.dashboard-mobile-screen { padding: 12px 9px 6px; }.mobile-greeting { margin-top: 11px; }.mobile-greeting h3 { font-size: 18px; }.mobile-published-card { margin-top: 10px; padding: 8px; }.mobile-public-row { margin-top: 12px; }.mobile-public-row strong { font-size: 20px; }.mobile-card-photo { width: 49px; height: 62px; flex-basis: 49px; }.mobile-stat-row { margin-top: 9px; padding-bottom: 7px; }.mobile-stat-row strong { font-size: 14px; }.mobile-action-card { margin-top: 8px; padding: 7px; }.mobile-dashboard-nav { margin-top: 10px; } }

/* ── INTERATIVIDADE TOTAL: Temas, Checkout MCX, Prévia e Mockups ───── */

/* Mockup Tabs & Clickables */
.desktop-sidebar span[data-mac-tab],
.showcase-sidebar span[data-showcase-tab],
.mobile-dashboard-nav span[data-phone-tab] {
  cursor: pointer;
  transition: all 0.2s ease;
}
.desktop-sidebar span[data-mac-tab]:hover,
.showcase-sidebar span[data-showcase-tab]:hover {
  color: var(--dark);
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
}
.mobile-dashboard-nav span[data-phone-tab]:hover {
  color: #c86f75;
}

/* Ferramentas do Construtor */
.helper-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mini-action-btn {
  background: none;
  border: 1px dashed var(--line);
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 11px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.mini-action-btn:hover {
  border-color: var(--coral-deep);
  color: var(--coral-deep);
  background: rgba(215, 91, 97, 0.06);
}

/* Seletor de Trilha Sonora */
.audio-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.audio-choice-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
}
.audio-choice-card:hover,
.audio-choice-card.is-selected {
  border-color: var(--coral-deep);
  background: #fff;
  transform: translateY(-2px);
}
.audio-choice-card strong {
  font-size: 12px;
  display: block;
}
.audio-choice-card small {
  font-size: 10px;
  color: var(--muted);
}
.audio-provider-chip { display:inline-block; margin-top:5px; color:#d33b3b; font:700 8px var(--mono); font-style:normal; letter-spacing:.04em; text-transform:uppercase; }
.audio-preview-toggle {
  align-self: flex-end;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: none;
  color: var(--coral-deep);
}

/* Seletor de Temas Visuais */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.theme-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-card:hover,
.theme-card.is-selected {
  border-color: var(--coral-deep);
  background: #ffffff;
  transform: translateY(-2px);
}
.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.theme-card strong {
  display: block;
  font-size: 12px;
}
.theme-card small {
  font-size: 10px;
  color: var(--muted);
}

/* YouTube audio + Instagram-style memory ordering */
.audio-youtube-note { display:flex; align-items:center; gap:7px; margin:9px 0 0; color:var(--muted); font:400 10px var(--mono); line-height:1.4; }.audio-youtube-note span { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; color:#fff; background:#d75b61; font-size:8px; }
.youtube-custom-track { margin-top:12px; padding:11px; border:1px solid rgba(215,91,97,.18); border-radius:12px; background:rgba(255,255,255,.55); }.youtube-custom-track label { display:block; margin:0 0 7px; color:var(--ink-soft); font-size:10px; font-weight:650; }.youtube-custom-input { display:flex; gap:6px; }.youtube-custom-input input { min-width:0; flex:1; padding:8px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font-size:10px; }.youtube-custom-input button { padding:0 11px; border:0; border-radius:8px; color:#fff; background:#d75b61; font-size:10px; font-weight:700; }.youtube-custom-input button:hover { background:#b94a53; }.youtube-custom-track small { display:block; margin-top:6px; color:var(--muted); font:400 9px var(--mono); line-height:1.35; }.youtube-custom-track.is-error { border-color:#c94752; background:#fff2f3; }
.youtube-search-results { display:grid; gap:6px; margin-top:9px; }.youtube-search-result { display:grid; grid-template-columns:62px 1fr; gap:8px; width:100%; padding:5px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }.youtube-search-result:hover,.youtube-search-result.is-selected { border-color:#d75b61; background:#fff7f7; }.youtube-search-result img { display:block; width:62px; aspect-ratio:16/9; border-radius:5px; object-fit:cover; background:#eee; }.youtube-search-result strong,.youtube-search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.youtube-search-result strong { font-size:10px; }.youtube-search-result small { margin-top:3px; color:var(--muted); font-size:8px; }.youtube-search-fallback { display:block; margin-top:8px; color:#c94752; font-size:9px; text-decoration:underline; }.youtube-direct-link { display:flex; align-items:center; gap:5px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(17,17,26,.08); }.youtube-direct-link span { flex:0 0 auto; color:var(--muted); font-size:8px; }.youtube-direct-link input { min-width:0; flex:1; padding:6px 7px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; font-size:9px; }.youtube-direct-link button { padding:6px 7px; border:1px solid var(--line); border-radius:7px; color:#c94752; background:#fff; font-size:8px; font-weight:700; }
.youtube-audio-preview { margin-top:11px; overflow:hidden; border:1px solid rgba(215,91,97,.22); border-radius:10px; background:#141414; }.youtube-audio-preview-heading { display:flex; align-items:center; gap:7px; padding:8px 9px; color:#fff; font-size:10px; }.youtube-audio-preview-heading a { margin-left:auto; color:#ffb3b3; font-size:9px; }.youtube-logo-mark { display:grid; place-items:center; width:17px; height:17px; border-radius:5px; color:#fff; background:#ff0000; font-size:8px; }.youtube-audio-preview iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
.photo-order-note { margin:8px 0 0; color:var(--muted); font:400 10px var(--mono); line-height:1.45; }
.photo-preview-item { position:relative; cursor:grab; user-select:none; touch-action:pan-y; transition:transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease, box-shadow .2s ease; }.photo-preview-item:active { cursor:grabbing; }.photo-preview-item.is-dragging { opacity:.45; transform:scale(.97); }.photo-preview-item.is-drag-over { transform:translateY(-3px); box-shadow:0 0 0 2px var(--coral-deep), 0 8px 18px rgba(33,25,29,.12); }.photo-preview-item:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; }.photo-preview-item::after { content:'arrasta'; position:absolute; right:4px; bottom:22px; padding:3px 5px; border-radius:99px; color:#fff; background:rgba(28,25,23,.65); font:500 7px var(--mono); opacity:0; transition:opacity .2s ease; }.photo-preview-item:hover::after,.upload-preview[data-reordering="true"] .photo-preview-item::after { opacity:1; }
.premium-template-library { margin-top:24px; padding:18px; border:1px solid rgba(17,17,26,.1); border-radius:16px; background:rgba(255,255,255,.48); }.premium-library-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.premium-library-kicker { display:block; color:var(--coral-deep); font:700 9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.premium-library-heading h4 { margin:5px 0 0; color:var(--ink); font-size:17px; letter-spacing:-.035em; }.premium-library-count { flex:0 0 auto; padding:6px 8px; border-radius:99px; color:var(--coral-deep); background:rgba(215,91,97,.1); font:600 9px var(--mono); }.premium-library-intro { margin:8px 0 14px; color:var(--muted); font-size:11px; line-height:1.45; }.template-filter-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }.template-filter { padding:7px 9px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:transparent; font-size:9px; font-weight:650; }.template-filter:hover,.template-filter.is-active { border-color:var(--coral-deep); color:var(--coral-deep); background:#fff6f6; }.template-occasion-filter { padding-top:9px; border-top:1px solid rgba(17,17,26,.08); }.template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }.template-card { position:relative; display:grid; grid-template-columns:54px 1fr; gap:9px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; text-align:left; transition:transform .2s cubic-bezier(.22,1,.36,1), border-color .2s ease, box-shadow .2s ease; }.template-card:hover,.template-card.is-selected { border-color:var(--template-tone); box-shadow:0 7px 16px rgba(35,26,29,.08); transform:translateY(-2px); }.template-card-visual { position:relative; display:block; overflow:hidden; min-height:66px; border-radius:8px; background:var(--template-paper); }.template-card-visual::before { content:''; position:absolute; inset:8px 8px 19px; border-radius:3px; background:linear-gradient(135deg,rgba(255,255,255,.9),var(--template-tone)); }.template-card-visual i,.template-card-visual b,.template-card-visual span { position:absolute; display:block; border-radius:99px; background:var(--template-tone); }.template-card-visual i { left:13px; bottom:12px; width:27px; height:3px; }.template-card-visual b { left:13px; bottom:7px; width:18px; height:2px; opacity:.45; }.template-card-visual span { right:8px; bottom:8px; width:7px; height:7px; background:var(--template-tone); }.template-card-copy { min-width:0; padding-right:28px; }.template-card-copy strong,.template-card-copy small,.template-card-copy em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.template-card-copy strong { font-size:11px; }.template-card-copy small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.3; white-space:normal; }.template-card-copy em { margin-top:7px; color:var(--template-tone); font:600 8px var(--mono); font-style:normal; }.template-premium-badge { position:absolute; top:6px; right:6px; padding:3px 5px; border-radius:99px; color:var(--template-tone); background:var(--template-paper); font:700 7px var(--mono); text-transform:uppercase; }
.wizard-backdrop.is-dark .premium-template-library { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); }.wizard-backdrop.is-dark .premium-library-heading h4,.wizard-backdrop.is-dark .template-card { color:#fff; }.wizard-backdrop.is-dark .template-card { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }.wizard-backdrop.is-dark .template-occasion-filter { border-top-color:rgba(255,255,255,.12); }
@media (max-width:600px) { .template-grid { grid-template-columns:1fr; }.premium-library-heading { display:block; }.premium-library-count { display:inline-block; margin-top:10px; }.template-filter { font-size:8px; }.photo-preview-item::after { display:none; } }
@media (prefers-reduced-motion:reduce) { .photo-preview-item,.template-card { transition:none; }.photo-preview-item.is-drag-over,.template-card:hover,.template-card.is-selected { transform:none; } }

/* Slug Input Box */
.slug-input-wrapper {
  display: flex;
  align-items: center;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,0.45);
  overflow: hidden;
}
.slug-prefix {
  padding: 0 12px;
  color: var(--muted);
  font: 400 12px var(--mono);
  background: rgba(0,0,0,0.03);
  border-right: 1px solid var(--line);
  line-height: 42px;
}
.slug-input-wrapper input {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  background: transparent !important;
}

/* Checkout Angolano (MCX, Referência, Banco) */
.checkout-tabs {
  display: flex;
  gap: 6px;
  margin: 16px 0 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.checkout-tab-btn {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all 0.2s ease;
}
.checkout-tab-btn.is-active {
  background: var(--dark);
  color: var(--paper);
}
.checkout-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.mcx-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-radius: 10px;
  color: #c2410c;
  font-size: 12px;
  margin-bottom: 14px;
}
.ref-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ref-item {
  background: #faf6f0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.ref-item span {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.ref-item strong {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--dark);
  margin-top: 3px;
  display: block;
}
.sandbox-alert {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  color: #065f46;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sandbox-instant-btn {
  background: #059669;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sandbox-instant-btn:hover {
  background: #047857;
}

/* Visualização do QR Code no Wizard Sucesso */
.qr-preview-box {
  width: 140px;
  height: 140px;
  margin: 16px auto;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-url-display {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--coral-deep);
  background: rgba(215, 91, 97, 0.08);
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-block;
  margin: 8px auto 16px;
  word-break: break-all;
}
.success-action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Modal de Prévia em Tela Cheia */
.preview-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 16, 25, 0.85);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.preview-modal-backdrop.is-open {
  display: flex;
}
.preview-modal-window {
  width: min(960px, 100%);
  height: min(85vh, 760px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 35px 80px rgba(0,0,0,0.4);
}
.preview-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #f4f3f5;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.preview-modal-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* Final hardware + product UI calibration. Keep this block last so the
   product-shot treatment wins over the earlier exploratory mockup rules. */
.hero-device-stage {
  background:
    radial-gradient(ellipse at 68% 22%, rgba(68,105,143,.34), transparent 32%),
    radial-gradient(ellipse at 20% 85%, rgba(22,53,80,.38), transparent 35%),
    linear-gradient(145deg, #07111d 0%, #0b1725 58%, #102438 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 35px 90px rgba(7,17,29,.32);
}
.hero-device-stage::before { border-color: rgba(175,205,228,.13); }
.hero-device-stage::after { opacity: .11; background-size: 42px 42px; }
.hero-device-stage .scene-grid { border-color: rgba(175,205,228,.12); opacity: .36; }
.hero-device-stage .scene-grid::before,
.hero-device-stage .scene-grid::after { background: rgba(175,205,228,.11); }
.hero-device-stage .studio-caption,
.hero-device-stage .floating-note { display: none; }

.hero-macbook {
  top: 84px;
  left: 0;
  width: min(650px, 101%);
  transform: rotate(-3deg) rotateY(-11deg) rotateX(1deg);
  filter: drop-shadow(0 34px 30px rgba(0,0,0,.36));
}
.macbook-screen {
  padding: 10px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(145deg, #f4f6f8 0%, #c4cad2 58%, #8e98a5 100%);
  box-shadow: 0 29px 44px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.96);
}
.macbook-base {
  width: 118%;
  height: 100px;
  margin: -1px -9% 0;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(180deg, #e2e6eb 0%, #bbc2cb 45%, #858f9c 100%);
  box-shadow: 0 18px 27px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.82);
  transform: perspective(560px) rotateX(4deg);
  transform-origin: top center;
}
.macbook-base::before { left: 42%; top: 5px; width: 16%; height: 3px; background: #6e7886; }
.macbook-base::after {
  left: 13%; right: 13%; top: 9px; height: 34px;
  border-radius: 5px;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(98,108,121,.55) 6% 94%, transparent 94%),
    repeating-linear-gradient(90deg, rgba(88,99,112,.82) 0 5px, transparent 5px 7px),
    repeating-linear-gradient(180deg, rgba(88,99,112,.78) 0 4px, transparent 4px 7px);
  transform: perspective(170px) rotateX(18deg);
}
.macbook-base span {
  left: 38%; right: 38%; bottom: 8px; height: 14px;
  border: 1px solid rgba(92,101,112,.48);
  border-radius: 5px;
  background: rgba(237,241,245,.42);
  filter: none;
}

.desktop-app { grid-template-columns: 112px 1fr; min-height: 360px; background: #f7f9fb; }
.desktop-sidebar {
  gap: 6px;
  padding: 16px 10px 12px;
  border-right: 1px solid #e2e7ed;
  background: #f1f4f7;
}
.desktop-sidebar span[data-mac-tab] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 7px;
  white-space: nowrap;
}
.desktop-sidebar span[data-mac-tab]::before {
  content: '';
  width: 7px; height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .68;
}
.desktop-sidebar .sidebar-active {
  color: #1b334a;
  background: #e1ebf4;
  box-shadow: inset 2px 0 0 #2f77ae;
}
.desktop-sidebar .sidebar-active::before { background: #2f77ae; border-color: #2f77ae; }
.dashboard-main {
  min-height: 360px;
  padding: 18px 20px 14px;
  background: #f8fafc;
}
.dashboard-top { padding-bottom: 11px; border-bottom: 1px solid #e4e9ee; }
.dashboard-eyebrow { color: #84909b; letter-spacing: .08em; }
.dashboard-top h3 { color: #172638; font-size: 19px; letter-spacing: -.045em; }
.dashboard-profile { color: #64717d; }
.dashboard-avatar { background: #2f77ae; }
.dashboard-grid { gap: 10px; margin-top: 14px; grid-template-columns: 1.52fr .78fr; }
.dashboard-primary-card { padding: 12px; border-color: #e3e8ed; border-radius: 11px; box-shadow: 0 8px 20px rgba(28,45,61,.07); }
.dashboard-story-row { margin-top: 15px; }
.dashboard-story-copy > span { color: #2f77ae; font-family: var(--sans); font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-story-copy h4 { color: #1b2b3b; font-family: var(--sans); font-size: 18px; line-height: .96; letter-spacing: -.06em; font-weight: 700; }
.dashboard-story-copy h4 em { color: #2f77ae; font-family: var(--sans); font-style: normal; font-weight: 700; }
.dashboard-story-image { width: 76px; height: 90px; flex-basis: 76px; border-radius: 8px 8px 24px 24px; }
.dashboard-progress > i { background: #e6ebef; }
.dashboard-progress > i b { background: linear-gradient(90deg, #2f77ae, #69b1c4); }
.dashboard-mini-card { padding: 10px; border: 1px solid #e5e9ed; border-radius: 11px; background: #fff; }
.dashboard-mini-card.is-dark { border-color: #1d3349; background: #16293b; }
.dashboard-label { color: #8b96a1; }
.dashboard-mini-card strong { color: #1b2b3b; font-family: var(--sans); font-size: 21px; font-weight: 700; }
.dashboard-mini-card.is-dark strong { color: #fff; }
.dashboard-mini-card > b { color: #2f77ae; }
.dashboard-heart { color: #8cc7da; }
.dashboard-timeline, .dashboard-share { border-color: #e1e7eb; }
.dashboard-timeline span, .dashboard-share span { color: #87929d; }
.dashboard-timeline strong { color: #2a3b4c; }
.dashboard-share button { background: #2f77ae; }

.hero-phone {
  left: 4%;
  bottom: 18px;
  width: 218px;
  border-color: #718092;
  border-radius: 41px;
  background: linear-gradient(145deg, #fbfcfd 0%, #c9d1da 15%, #727f8e 58%, #283441 100%);
  box-shadow: -19px 34px 42px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.84), inset -5px -10px 13px rgba(24,33,44,.44);
  transform: rotate(6deg) rotateY(-10deg);
}
.phone-shell-screen.dashboard-mobile-screen {
  padding: 7px 13px 10px;
  color: #1d2b39;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(26,45,64,.08);
}
.mobile-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #293845;
  font: 600 7px var(--mono);
}
.mobile-dashboard-top { margin-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #e5eaee; }
.mobile-dashboard-brand { color: #172638; }
.mobile-dashboard-brand .mobile-mark { border-color: #2f77ae; color: #2f77ae; }
.mobile-avatar { background: #2f77ae; }
.mobile-greeting { margin-top: 14px; }
.mobile-greeting small { color: #87929d; }
.mobile-greeting h3 { color: #172638; font-size: 20px; }
.mobile-published-card { margin-top: 13px; border-radius: 16px; background: linear-gradient(145deg, #17334d 0%, #122335 100%); box-shadow: 0 12px 25px rgba(17,42,66,.22); }
.mobile-public-row > div:first-child > span { color: #91cbd9; font-family: var(--sans); font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mobile-public-row strong { font-family: var(--sans); font-weight: 700; letter-spacing: -.065em; }
.mobile-public-row strong em { color: #8fc6d4; font-family: var(--sans); font-style: normal; font-weight: 700; }
.mobile-card-photo { border-color: rgba(255,255,255,.82); }
.mobile-stat-row { border-color: #e1e7eb; }
.mobile-stat-row > div { border-color: #e1e7eb; }
.mobile-stat-row strong { color: #1d2b39; font-family: var(--sans); font-weight: 700; }
.mobile-stat-row small { color: #87929d; }
.mobile-action-card { border-color: #e1e7eb; background: #fff; box-shadow: 0 7px 14px rgba(24,43,60,.07); }
.action-icon { background: #2f77ae; }
.mobile-action-card b { color: #1d2b39; }
.mobile-action-card > span:last-child { color: #2f77ae; }
.mobile-dashboard-nav { color: #8b96a1; }
.mobile-dashboard-nav .is-active { color: #2f77ae; }
.mobile-dashboard-nav .is-active i { background: #2f77ae; }
.showcase-phone { width: 215px; transform: rotate(6deg) rotateY(-10deg); }
.showcase-phone-stage { background: radial-gradient(ellipse at 50% 90%, rgba(89,148,190,.22), transparent 44%); }

@media (max-width: 1000px) {
  .hero-macbook { left: 1%; width: 99%; }
  .hero-phone { width: 205px; left: 2%; }
}
@media (max-width: 760px) {
  .hero-device-stage { min-height: 610px; }
  .hero-macbook { top: 87px; left: 3%; width: 96%; }
  .hero-phone { bottom: 21px; left: 1%; width: 190px; }
}
@media (max-width: 430px) {
  .hero-device-stage { min-height: 505px; }
  .hero-macbook { top: 70px; left: 3%; width: 96%; }
  .hero-phone { bottom: 14px; left: -4%; width: 154px; }
  .macbook-base { height: 56px; }
  .macbook-base::after { top: 6px; height: 23px; }
  .macbook-base span { bottom: 4px; height: 9px; }
  .desktop-app { grid-template-columns: 70px 1fr; min-height: 286px; }
  .dashboard-main { min-height: 286px; padding: 12px 12px 9px; }
  .dashboard-story-image { width: 61px; height: 70px; flex-basis: 61px; }
  .dashboard-story-copy h4 { font-size: 15px; }
  .phone-shell-screen.dashboard-mobile-screen { padding-left: 9px; padding-right: 9px; }
  .mobile-statusbar { font-size: 6px; }
}
@media (max-width: 430px) { .dashboard-activity { display: none; } }

/* Last-pass overrides: these are intentionally after every legacy mockup rule. */
.macbook-screen {
  border-color: #303945;
  border-bottom-color: #171d25;
  background: linear-gradient(145deg, #687380 0%, #404a56 58%, #232b35 100%);
}
.macbook-base {
  height: 100px;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #68727e 0%, #3f4853 45%, #20262d 100%);
}
.macbook-base::before { background: #1c232b; }
.macbook-base::after {
  left: 13%; right: 13%; top: 9px; height: 34px;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(28,35,43,.78) 6% 94%, transparent 94%),
    repeating-linear-gradient(90deg, rgba(22,29,37,.88) 0 5px, transparent 5px 7px),
    repeating-linear-gradient(180deg, rgba(22,29,37,.84) 0 4px, transparent 4px 7px);
  transform: perspective(170px) rotateX(18deg);
}
.macbook-base span { left: 38%; right: 38%; bottom: 8px; height: 14px; border-color: rgba(20,27,34,.54); background: rgba(161,173,184,.24); filter: none; }
.dashboard-main { min-height: 360px; padding: 18px 20px 14px; background: #f8fafc; }
.dashboard-top { padding-bottom: 11px; border-bottom-color: #e4e9ee; }
.dashboard-top h3 { color: #172638; font-size: 19px; }
.dashboard-grid { gap: 10px; margin-top: 14px; grid-template-columns: 1.52fr .78fr; }
.dashboard-primary-card { padding: 12px; border-color: #e3e8ed; border-radius: 11px; box-shadow: 0 8px 20px rgba(28,45,61,.07); }
.dashboard-story-copy > span { color: #2f77ae; font-family: var(--sans); font-style: normal; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.dashboard-story-copy h4 { color: #1b2b3b; font-family: var(--sans); font-size: 18px; line-height: .96; font-weight: 700; }
.dashboard-story-copy h4 em { color: #2f77ae; font-family: var(--sans); font-style: normal; font-weight: 700; }
.dashboard-story-image { width: 76px; height: 90px; flex-basis: 76px; }
.dashboard-progress > i b { background: linear-gradient(90deg, #2f77ae, #69b1c4); }
.dashboard-mini-card { border-color: #e5e9ed; border-radius: 11px; background: #fff; }
.dashboard-mini-card.is-dark { border-color: #1d3349; background: #16293b; }
.dashboard-mini-card strong { color: #1b2b3b; font-family: var(--sans); font-weight: 700; }
.dashboard-mini-card.is-dark strong { color: #fff; }
.dashboard-timeline, .dashboard-share { border-color: #e1e7eb; }
.dashboard-share button { background: #2f77ae; }
.dashboard-activity { margin-top: 12px; padding-top: 9px; border-top: 1px solid #e8edf1; }
.dashboard-activity > div:first-child { display: flex; justify-content: space-between; color: #85919c; font: 600 6px var(--mono); text-transform: uppercase; }
.dashboard-activity small { color: #a5afb8; font-weight: 400; }
.dashboard-bars { display: flex; align-items: end; gap: 4px; height: 25px; margin-top: 6px; }
.dashboard-bars i { display: block; flex: 1; min-width: 4px; border-radius: 3px 3px 1px 1px; background: #c9dce5; }
.dashboard-bars i:nth-child(1) { height: 9px; }.dashboard-bars i:nth-child(2) { height: 15px; }.dashboard-bars i:nth-child(3) { height: 12px; }.dashboard-bars i:nth-child(4) { height: 20px; background: #79b7c8; }.dashboard-bars i:nth-child(5) { height: 16px; }.dashboard-bars i:nth-child(6) { height: 23px; background: #2f77ae; }.dashboard-bars i:nth-child(7) { height: 18px; }
.phone-shell-screen.dashboard-mobile-screen { padding: 7px 13px 10px; color: #1d2b39; background: #f8fafc; }
.mobile-dashboard-top { margin-top: 9px; padding-bottom: 9px; border-bottom-color: #e5eaee; }
.mobile-dashboard-brand { color: #172638; }.mobile-dashboard-brand .mobile-mark { border-color: #2f77ae; color: #2f77ae; }.mobile-avatar { background: #2f77ae; }
.mobile-greeting { margin-top: 14px; }.mobile-greeting small { color: #87929d; }.mobile-greeting h3 { color: #172638; }
.mobile-published-card { margin-top: 13px; border-radius: 16px; background: linear-gradient(145deg, #17334d 0%, #122335 100%); box-shadow: 0 12px 25px rgba(17,42,66,.22); }
.mobile-public-row > div:first-child > span { color: #91cbd9; font-family: var(--sans); font-style: normal; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.mobile-public-row strong { font-family: var(--sans); font-weight: 700; }.mobile-public-row strong em { color: #8fc6d4; font-family: var(--sans); font-style: normal; font-weight: 700; }
.mobile-stat-row { border-color: #e1e7eb; }.mobile-stat-row > div { border-color: #e1e7eb; }.mobile-stat-row strong { color: #1d2b39; font-family: var(--sans); font-weight: 700; }
.mobile-action-card { border-color: #e1e7eb; box-shadow: 0 7px 14px rgba(24,43,60,.07); }.action-icon { background: #2f77ae; }.mobile-action-card > span:last-child { color: #2f77ae; }
.mobile-dashboard-nav { color: #8b96a1; }.mobile-dashboard-nav .is-active { color: #2f77ae; }.mobile-dashboard-nav .is-active i { background: #2f77ae; }
@media (max-width: 430px) {
  .macbook-base { height: 56px; }
  .macbook-base::after { top: 6px; height: 23px; }
  .macbook-base span { bottom: 4px; height: 9px; }
  .dashboard-main { min-height: 286px; padding: 12px 12px 9px; }
  .dashboard-story-image { width: 61px; height: 70px; flex-basis: 61px; }
  .dashboard-story-copy h4 { font-size: 15px; }
  .dashboard-activity { display: none; }
  .phone-shell-screen.dashboard-mobile-screen { padding-left: 9px; padding-right: 9px; }
}