:root {
  --ink: #13211d;
  --muted: #61706a;
  --paper: #f5f6f1;
  --surface: #ffffff;
  --line: rgba(19, 33, 29, .12);
  --brand: #0d5f50;
  --brand-dark: #073d34;
  --accent: #dcff6b;
  --radius: 28px;
  --shadow: 0 24px 70px rgba(20, 49, 40, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 40; padding: 14px 0; background: rgba(245, 246, 241, .82); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.scrolled { border-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 780; text-decoration: none; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 11px; background: var(--brand); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.brand-mark svg { width: 20px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--muted); font-size: .92rem; font-weight: 650; text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.menu-button { display: none; border: 0; border-radius: 12px; padding: 9px 12px; color: var(--ink); background: white; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--brand); color: white; font-weight: 750; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); background: var(--brand-dark); }
.button.secondary { border-color: var(--line); background: rgba(255,255,255,.7); color: var(--ink); }
.button.secondary:hover { background: white; }
.button.light { background: white; color: var(--brand-dark); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent); }
.hero { position: relative; overflow: hidden; padding: 96px 0 80px; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 500px; height: 500px; top: -220px; right: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(220,255,107,.75), rgba(220,255,107,0) 68%); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 60px; }
h1, h2, h3 { margin: 0; letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 760px; font-size: clamp(3.5rem, 7vw, 6.8rem); font-weight: 790; }
h2 { font-size: clamp(2.5rem, 5vw, 4.7rem); }
h3 { font-size: 1.5rem; line-height: 1.12; }
.hero h1 span, .section-title span { color: var(--brand); }
.hero-copy { max-width: 610px; margin: 26px 0 32px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; color: var(--muted); font-size: .86rem; font-weight: 650; }
.trust-line span { display: flex; align-items: center; gap: 7px; }
.trust-line span::before { content: "✓"; color: var(--brand); font-weight: 900; }

.orbit { position: relative; min-height: 520px; }
.orbit-card { position: absolute; display: flex; align-items: center; gap: 13px; width: 210px; padding: 14px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: var(--shadow); backdrop-filter: blur(12px); animation: drift 6s ease-in-out infinite; }
.orbit-card:nth-child(1) { top: 2%; left: 4%; }
.orbit-card:nth-child(2) { top: 3%; right: 0; animation-delay: -1s; }
.orbit-card:nth-child(3) { top: 39%; left: -2%; animation-delay: -2s; }
.orbit-card:nth-child(4) { top: 38%; right: -4%; animation-delay: -3s; }
.orbit-card:nth-child(5) { bottom: 1%; left: 7%; animation-delay: -4s; }
.orbit-card:nth-child(6) { bottom: 0; right: 1%; animation-delay: -5s; }
.orbit-core { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 170px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--brand); transform: translate(-50%, -50%); box-shadow: 0 0 0 26px rgba(13,95,80,.06), 0 0 0 54px rgba(13,95,80,.035); font-size: 1.1rem; font-weight: 800; letter-spacing: -.04em; }
.app-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 14px; color: var(--app-color, #fff); background: var(--app-soft, #e9eee9); font-weight: 850; }
.app-icon svg { width: 25px; height: 25px; }
.orbit-card strong { display: block; font-size: .88rem; }
.orbit-card small { color: var(--muted); }
@keyframes drift { 50% { transform: translateY(-7px); } }

.section { padding: 100px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 44px; }
.section-title { max-width: 760px; margin-top: 13px; }
.section-lede { max-width: 470px; color: var(--muted); line-height: 1.65; }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.app-card { position: relative; min-height: 360px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.app-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.app-card .app-icon { width: 58px; border-radius: 17px; }
.app-card h3 { margin: 62px 0 12px; }
.app-card p { max-width: 270px; color: var(--muted); line-height: 1.6; }
.card-link { position: absolute; bottom: 28px; font-size: .9rem; font-weight: 800; }
.card-link::after { content: " ↗"; }
.app-card::after { content: ""; position: absolute; right: -55px; bottom: -75px; width: 190px; height: 190px; border-radius: 50%; background: var(--app-soft); opacity: .7; }

.manifesto { overflow: hidden; border-radius: 42px; color: white; background: var(--brand-dark); }
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; }
.manifesto-copy { padding: 70px; }
.manifesto h2 { margin: 16px 0 24px; }
.manifesto p { color: rgba(255,255,255,.7); line-height: 1.7; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12); }
.principle { padding: 34px; background: rgba(255,255,255,.035); }
.principle span { color: var(--accent); font-size: 2.1rem; font-weight: 300; }
.principle h3 { margin: 24px 0 8px; font-size: 1.12rem; letter-spacing: -.03em; }
.principle p { margin: 0; font-size: .9rem; }

.cta { padding: 90px 0; text-align: center; }
.cta-box { padding: 74px 30px; border-radius: 40px; background: var(--accent); }
.cta-box h2 { max-width: 760px; margin: 0 auto 20px; }
.cta-box p { max-width: 560px; margin: 0 auto 30px; color: #4a5630; line-height: 1.6; }

.site-footer { padding: 30px 0 46px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a, .copyright { color: var(--muted); font-size: .84rem; text-decoration: none; }

.consent-panel { position: fixed; z-index: 80; right: 22px; bottom: 22px; left: 22px; display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 920px; margin-inline: auto; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 25px 80px rgba(10,30,24,.24); backdrop-filter: blur(18px); }
.consent-panel strong { display: block; margin-bottom: 5px; font-size: 1.05rem; }
.consent-panel p { max-width: 610px; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.consent-panel p a { font-weight: 700; }
.consent-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.consent-actions .button { min-height: 44px; padding-inline: 17px; cursor: pointer; }

/* Product pages */
.product-page { --app: #53645e; --app-soft: #e4e9e6; }
.product-hero { padding: 78px 0 90px; }
.product-hero-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 80px; }
.product-badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.product-badge .app-icon { width: 56px; background: var(--app-soft); color: var(--app); }
.product-badge strong { display: block; }
.product-badge small { color: var(--muted); }
.product-hero h1 { font-size: clamp(3.4rem, 6vw, 6.2rem); }
.product-hero h1 em { color: var(--app); font-style: normal; }
.phone-stage { position: relative; display: grid; place-items: center; min-height: 600px; border-radius: 42px; background: var(--app-soft); overflow: hidden; }
.phone-stage::before, .phone-stage::after { content: ""; position: absolute; width: 260px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--app) 20%, transparent); border-radius: 50%; }
.phone-stage::before { top: -90px; right: -80px; }
.phone-stage::after { bottom: -150px; left: -80px; width: 360px; }
.phone { position: relative; z-index: 1; width: 270px; height: 540px; padding: 11px; border-radius: 48px; background: #12201c; box-shadow: 0 35px 65px color-mix(in srgb, var(--app) 28%, transparent); transform: rotate(3deg); }
.phone-screen { height: 100%; padding: 18px; border-radius: 38px; overflow: hidden; background: #fbfcfa; }
.phone-notch { width: 84px; height: 20px; margin: -10px auto 30px; border-radius: 0 0 15px 15px; background: #12201c; }
.mock-kicker { color: var(--app); font-size: .64rem; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.mock-title { margin: 8px 0 22px; font-size: 1.45rem; font-weight: 790; letter-spacing: -.06em; }
.mock-stat { padding: 18px; border-radius: 21px; color: white; background: var(--app); }
.mock-stat small { opacity: .7; }
.mock-stat strong { display: block; margin-top: 6px; font-size: 2rem; }
.mock-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 13px; border: 1px solid rgba(0,0,0,.06); border-radius: 17px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.045); }
.mock-dot { width: 28px; height: 28px; border-radius: 9px; background: var(--app-soft); }
.mock-lines { flex: 1; }
.mock-lines i { display: block; width: 75%; height: 6px; border-radius: 5px; background: #26342f; }
.mock-lines i + i { width: 48%; margin-top: 6px; background: #cfd6d2; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.feature-number { color: var(--app); font-size: .78rem; font-weight: 850; }
.feature h3 { margin: 48px 0 12px; font-size: 1.25rem; }
.feature p { margin: 0; color: var(--muted); line-height: 1.6; }
.product-quote { padding: 110px 0; text-align: center; }
.product-quote blockquote { max-width: 930px; margin: 0 auto; font-size: clamp(2.2rem, 5vw, 4.7rem); font-weight: 760; line-height: 1.03; letter-spacing: -.055em; }
.product-quote blockquote span { color: var(--app); }
.product-cta { padding: 75px 30px; border-radius: 40px; color: white; background: var(--app); text-align: center; }
.product-cta p { color: rgba(255,255,255,.75); }
.product-cta .button { margin-top: 15px; background: white; color: var(--app); }

.legal { padding: 70px 0 100px; }
.legal article { max-width: 760px; }
.legal h1 { font-size: clamp(3rem, 6vw, 5rem); }
.legal h2 { margin: 50px 0 16px; font-size: 1.55rem; letter-spacing: -.035em; }
.legal p, .legal li { color: var(--muted); line-height: 1.75; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-grid, .product-hero-grid, .manifesto-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 65px; }
  .orbit { min-height: 480px; }
  .apps-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .manifesto-copy { padding: 50px; }
  .phone-stage { min-height: 580px; }
}
@media (max-width: 680px) {
  .container { width: min(100% - 28px, 1180px); }
  .menu-button { display: block; }
  .nav-links { position: absolute; top: 65px; left: 14px; right: 14px; display: none; align-items: stretch; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-links .button { margin-top: 4px; }
  .hero { padding: 48px 0 56px; }
  h1 { font-size: clamp(3.15rem, 15vw, 4.7rem); }
  .orbit { min-height: 405px; margin-top: 25px; }
  .orbit-core { width: 128px; }
  .orbit-card { width: 155px; padding: 10px; }
  .orbit-card .app-icon { width: 37px; border-radius: 11px; }
  .orbit-card small { display: none; }
  .section { padding: 70px 0; }
  .section-head { display: block; }
  .section-lede { margin-top: 20px; }
  .apps-grid, .feature-grid, .principles { grid-template-columns: 1fr; }
  .app-card { min-height: 320px; }
  .manifesto { border-radius: 28px; }
  .manifesto-copy { padding: 38px 26px; }
  .principle { padding: 30px 26px; }
  .cta-box { padding: 55px 22px; border-radius: 28px; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
  .consent-panel { right: 12px; bottom: 12px; left: 12px; align-items: stretch; flex-direction: column; gap: 17px; padding: 19px; border-radius: 20px; }
  .consent-actions { display: grid; grid-template-columns: 1fr 1.25fr; }
  .product-hero { padding: 50px 0 65px; }
  .product-hero-grid { gap: 48px; }
  .phone-stage { min-height: 500px; border-radius: 28px; }
  .phone { width: 235px; height: 470px; }
  .product-quote { padding: 80px 0; }
}

/* Compact BrickDisplay product page */
.brick-compact { --app: #d93440; background: #fffdf9; }
.brick-compact .site-header { background: rgba(255,253,249,.96); }
.bc-hero { padding: 64px 0 72px; }
.bc-hero-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 58px; }
.bc-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; }
.bc-lockup img { border-radius: 18px; box-shadow: 0 10px 25px rgba(80,35,35,.14); }
.bc-lockup strong, .bc-lockup small { display: block; }
.bc-lockup small { max-width: 300px; margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.bc-copy h1 { max-width: 610px; font-size: clamp(3.4rem,6vw,6rem); line-height: .94; }
.bc-copy h1 span { color: var(--app); }
.bc-copy > p { max-width: 570px; margin: 24px 0 28px; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
.bc-assurances { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 26px 0 0; padding: 0; color: #5f5551; list-style: none; font-size: .82rem; font-weight: 700; }
.bc-assurances li::before { content: "✓ "; color: #08705b; }
.bc-hero-image { margin: 0; padding: 10px; overflow: hidden; border: 1px solid #ddd3cc; border-radius: 26px; background: white; box-shadow: 0 24px 55px rgba(55,35,31,.14); transform: rotate(1deg); }
.bc-hero-image img { display: block; width: 100%; height: auto; max-height: 510px; border-radius: 18px; object-fit: cover; }
.bc-hero-image figcaption, .bc-screen figcaption { padding: 9px 4px 2px; color: var(--muted); font-size: .72rem; text-align: center; }
.bc-explorer { padding: 84px 0; border-block: 1px solid #e9e0da; background: #f8f5f1; }
.bc-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 34px; }
.bc-section-heading h2 { max-width: 760px; margin-top: 10px; font-size: clamp(2.35rem,4vw,4rem); }
.bc-section-heading > p { max-width: 460px; color: var(--muted); line-height: 1.6; }
.bc-gallery { padding: 22px; border: 1px solid #ded5cf; border-radius: 28px; background: white; }
.bc-controls { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 0 0 20px; border-bottom: 1px solid #e8e1dc; }
.bc-control-group > span { display: block; margin-bottom: 8px; color: #756a65; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.bc-segment { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-segment button { min-height: 42px; padding: 9px 15px; border: 1px solid #d9d0ca; border-radius: 12px; color: #433d3a; background: #fff; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.bc-segment button:hover { background: #f7f3f0; }
.bc-segment button[aria-pressed="true"] { border-color: #292426; color: white; background: #292426; }
.bc-segment button:focus-visible { outline: 3px solid #0a79c9; outline-offset: 3px; }
.bc-segment button:disabled { color: #948b87; background: #eeeae7; cursor: not-allowed; }
.bc-gallery-stage { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 48px; min-height: 530px; padding: 32px; }
.bc-gallery-copy h3 { margin: 17px 0 13px; font-size: clamp(2rem,3.5vw,3.4rem); }
.bc-gallery-copy > p { color: var(--muted); line-height: 1.65; }
.bc-tier { display: inline-block; padding: 7px 10px; border-radius: 99px; color: #7f252e; background: #ffe7e6; font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.bc-points { margin: 24px 0 0; padding: 0; list-style: none; }
.bc-points li { margin-top: 9px; padding-left: 24px; color: #514945; font-size: .88rem; }
.bc-points li::before { content: "✓"; float: left; margin-left: -24px; color: #08705b; font-weight: 900; }
.bc-screen { justify-self: center; max-width: 690px; margin: 0; padding: 8px; overflow: hidden; border: 1px solid #d7ceca; border-radius: 22px; background: #f5f2ef; box-shadow: 0 18px 40px rgba(52,35,30,.14); }
.bc-screen img { display: block; width: auto; max-width: 100%; height: 470px; border-radius: 15px; object-fit: contain; }
.bc-screen.ipad-screen img { width: 100%; height: auto; max-height: 470px; }
.bc-gallery-status { margin: 0; padding: 12px 16px; border-radius: 10px; color: #5d504a; background: #f4efeb; font-size: .82rem; }
.bc-summary { padding: 82px 0; }
.bc-how { padding: 82px 0; border-bottom: 1px solid #e9e0da; background: white; }
.bc-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bc-step-grid article { padding: 30px; border: 1px solid #e3dad4; border-radius: 24px; background: #fffdf9; }
.bc-step-grid article > span { color: #b5343e; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.bc-step-grid h3 { margin: 36px 0 13px; font-size: 1.55rem; }
.bc-step-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.bc-guide-link { margin: 25px 0 0; color: var(--muted); text-align: center; }
.bc-guide-link a { color: #8f2630; font-weight: 750; }
.bc-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bc-plan { padding: 30px; border: 1px solid #e3dad4; border-radius: 24px; background: white; }
.bc-plan.pro { color: white; border-color: #2b252f; background: #201c24; }
.bc-plan-label { color: #b5343e; font-size: .67rem; font-weight: 900; letter-spacing: .1em; }
.bc-plan.pro .bc-plan-label { color: #ffc64e; }
.bc-plan h3 { margin: 30px 0 20px; font-size: 1.8rem; }
.bc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 25px; margin: 0; padding: 0; list-style: none; }
.bc-checks li { padding-left: 22px; color: #5f5652; font-size: .88rem; line-height: 1.45; }
.bc-plan.pro .bc-checks li { color: #c6bec9; }
.bc-checks li::before { content: "✓"; float: left; margin-left: -22px; color: #0b795f; font-weight: 900; }
.bc-plan.pro .bc-checks li::before { color: #ffc64e; }
.bc-faq { padding: 84px 0; border-top: 1px solid #e9e0da; background: #f8f5f1; }
.bc-faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; }
.bc-faq-layout h2 { margin-top: 13px; font-size: clamp(2.4rem,4vw,4rem); }
.bc-faq-layout > div:first-child > p { color: var(--muted); line-height: 1.6; }
.bc-faq-list details { border-bottom: 1px solid #dcd2cc; }
.bc-faq-list summary { padding: 22px 36px 22px 0; cursor: pointer; font-size: 1.08rem; font-weight: 780; list-style: none; }
.bc-faq-list summary::-webkit-details-marker { display: none; }
.bc-faq-list summary::after { content: "+"; float: right; margin-right: -30px; color: #9d2832; font-size: 1.4rem; }
.bc-faq-list details[open] summary::after { content: "−"; }
.bc-faq-list details p { margin: -4px 0 22px; color: var(--muted); line-height: 1.7; }
.bc-download { padding: 58px 0; color: white; background: #9d2832; }
.bc-download-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.bc-download-inner > img { border-radius: 18px; }
.bc-download h2 { font-size: clamp(1.8rem,3vw,2.7rem); }
.bc-download p { margin: 7px 0 0; color: rgba(255,255,255,.75); }
.bc-download .store-actions { margin: 0; }
.official-store-actions { align-items: center; gap: 12px; }
.official-store-badge { display: block; flex: 0 0 auto; height: 48px; border-radius: 7px; transition: transform .2s ease; }
.official-store-badge:hover { transform: translateY(-2px); }
.official-store-badge:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.official-store-badge img { display: block; }
.apple-badge { width: 144px; }
.apple-badge img { width: 144px; height: 48px; }
.google-badge { position: relative; width: 144px; overflow: hidden; }
.google-badge img { position: absolute; top: -8px; left: -10px; width: 164px; height: auto; }
.trademark-note { margin: 0 0 18px; color: var(--muted); font-size: .74rem; line-height: 1.5; }

/* BrickDisplay search guides */
.guide-page { --app: #9d2832; background: #fffdf9; }
.guide-page .site-header { background: rgba(255,253,249,.96); }
.guide-hero { padding: 72px 0 58px; border-bottom: 1px solid #e9e0da; }
.breadcrumbs { margin: 0 0 28px; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { font-weight: 700; text-decoration: none; }
.guide-hero h1 { max-width: 900px; font-size: clamp(3.1rem,6vw,5.8rem); }
.guide-standfirst { max-width: 760px; margin: 25px 0 18px; color: var(--muted); font-size: 1.16rem; line-height: 1.7; }
.guide-meta { color: #7b706b; font-size: .8rem; }
.guide-body { padding: 62px 0 88px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; gap: 70px; }
.guide-article h2 { margin: 55px 0 17px; font-size: clamp(2rem,4vw,3rem); }
.guide-article h2:first-child { margin-top: 0; }
.guide-article h3 { margin: 32px 0 12px; font-size: 1.35rem; letter-spacing: -.035em; }
.guide-article p, .guide-article li { color: #514945; line-height: 1.78; }
.guide-article li + li { margin-top: 8px; }
.guide-callout { margin: 38px 0; padding: 26px; border-left: 4px solid #9d2832; border-radius: 0 18px 18px 0; background: #f8f1ec; }
.guide-callout strong { display: block; margin-bottom: 7px; }
.guide-callout p { margin: 0; }
.guide-sidebar { align-self: start; position: sticky; top: 90px; padding: 24px; border: 1px solid #e3dad4; border-radius: 22px; background: white; }
.guide-sidebar img { width: 56px; border-radius: 15px; }
.guide-sidebar h2 { margin: 20px 0 11px; font-size: 1.5rem; }
.guide-sidebar p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.guide-sidebar .button { width: 100%; margin-top: 8px; background: #9d2832; }
.guide-sidebar .button:hover { background: #762029; }

@media (max-width: 900px) {
  .bc-hero-grid { grid-template-columns: 1fr; }
  .bc-hero-image { max-width: 760px; }
  .bc-controls, .bc-section-heading { align-items: flex-start; flex-direction: column; }
  .bc-gallery-stage { grid-template-columns: 1fr; min-height: 0; }
  .bc-screen { max-width: 720px; }
  .bc-download-inner { grid-template-columns: auto 1fr; }
  .bc-download .store-actions { grid-column: 1 / -1; }
  .bc-faq-layout, .guide-layout { grid-template-columns: 1fr; gap: 42px; }
  .guide-sidebar { position: static; }
}
@media (max-width: 680px) {
  .bc-hero { padding: 42px 0 52px; }
  .bc-copy h1 { font-size: clamp(3.1rem,15vw,4.4rem); }
  .bc-explorer, .bc-summary { padding: 62px 0; }
  .bc-gallery { padding: 14px; border-radius: 21px; }
  .bc-controls { gap: 16px; }
  .bc-segment button { min-height: 44px; padding-inline: 12px; }
  .feature-segment { display: grid; grid-template-columns: 1fr 1fr; }
  .bc-gallery-stage { gap: 26px; padding: 28px 7px 10px; }
  .bc-screen img { height: min(55vh, 520px); }
  .bc-screen.ipad-screen img { height: auto; }
  .bc-plan-grid, .bc-checks, .bc-step-grid { grid-template-columns: 1fr; }
  .bc-how, .bc-faq { padding: 62px 0; }
  .guide-hero { padding: 48px 0 42px; }
  .guide-body { padding: 48px 0 68px; }
  .bc-download-inner { display: block; }
  .bc-download-inner > img { margin-bottom: 18px; }
  .bc-download .store-actions { align-items: stretch; flex-direction: column; margin-top: 24px; }
  .bc-download .official-store-actions { align-items: flex-start; }
}
@media (forced-colors: active) {
  .bc-segment button[aria-pressed="true"] { outline: 2px solid ButtonText; }
  .bc-tier { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* BrickDisplay — product-led page */
.brick-page { --app: #ed3d45; --app-soft: #fff0e9; background: #fffdf9; }
.brick-nav { background: rgba(255,253,249,.9); }
.brick-hero { padding: 72px 0 84px; overflow: hidden; background: radial-gradient(circle at 82% 20%, #fff0ca 0, transparent 26%), #fffdf9; }
.brick-hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 72px; }
.brick-product-lockup { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }
.brick-product-lockup img { border-radius: 22px; box-shadow: 0 14px 30px rgba(86,25,67,.16); }
.brick-product-lockup strong, .brick-product-lockup small { display: block; }
.brick-product-lockup strong { font-size: 1.1rem; }
.brick-product-lockup small { margin-top: 3px; color: var(--muted); }
.brick-platforms { display: inline-flex; padding: 8px 12px; border: 1px solid #eadfd7; border-radius: 99px; color: #6d5b56; background: white; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.brick-hero h1 { margin: 19px 0 24px; font-size: clamp(4rem, 7vw, 7.2rem); line-height: .88; }
.brick-hero h1 em { color: #e43c43; font-style: normal; }
.brick-hero-copy > p { max-width: 610px; color: #685f5b; font-size: 1.15rem; line-height: 1.65; }
.store-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.store-button { display: inline-flex; align-items: center; gap: 11px; min-width: 176px; padding: 11px 16px; border-radius: 13px; color: white; background: #18161b; text-decoration: none; transition: transform .2s ease; }
.store-button:hover { transform: translateY(-3px); }
.store-button span:nth-child(2), .store-button small, .store-button strong { display: block; }
.store-button small { font-size: .58rem; letter-spacing: .04em; }
.store-button strong { font-size: 1.08rem; line-height: 1.05; }
.store-symbol { font-size: 1.35rem; }
.play-symbol { color: #6dd5c3; font-size: 1.25rem; }
.brick-showcase { position: relative; min-height: 700px; }
.brick-glow { position: absolute; inset: 7% 3% 3% 4%; border-radius: 48% 52% 45% 55%; background: linear-gradient(135deg, #ffdc5e, #ff6557 48%, #8b38ee); transform: rotate(-7deg); }
.app-shot { position: absolute; z-index: 2; margin: 0; padding: 9px; overflow: hidden; border: 2px solid #27212b; border-radius: 35px; background: #17131a; box-shadow: 0 34px 65px rgba(43,21,45,.3); }
.app-shot img { display: block; width: 100%; border-radius: 27px; }
.shot-main { top: 0; left: 17%; width: 288px; transform: rotate(-4deg); }
.shot-side { right: 2%; bottom: 0; width: 245px; transform: rotate(6deg); }
.showcase-note { position: absolute; z-index: 4; min-width: 190px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.85); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(46,25,39,.17); backdrop-filter: blur(10px); }
.showcase-note strong, .showcase-note span { display: block; }
.showcase-note strong { font-size: .85rem; }
.showcase-note span { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.note-collection { top: 24%; left: 0; }
.note-offline { right: 0; bottom: 11%; }
.brick-proof { overflow: hidden; border-block: 1px solid #e9dfd8; background: white; }
.proof-row { display: flex; justify-content: space-between; gap: 35px; padding-block: 20px; color: #8c7d76; font-size: .68rem; font-weight: 850; letter-spacing: .14em; white-space: nowrap; }
.brick-everyday { background: #fffdf9; }
.everyday-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.everyday-card { position: relative; min-height: 620px; padding: 34px; overflow: hidden; border: 1px solid #e8ded7; border-radius: 34px; background: white; }
.everyday-card h3 { margin: 18px 0 13px; font-size: clamp(2rem, 3vw, 3.25rem); }
.everyday-card p { max-width: 570px; color: var(--muted); line-height: 1.65; }
.management { display: grid; grid-template-columns: 1fr 245px; align-items: end; gap: 25px; background: #fff4ea; }
.management .feature-number { position: absolute; top: 34px; left: 34px; }
.management figure { align-self: end; margin: 65px -4px -120px 0; padding: 8px; border-radius: 29px; background: #242027; transform: rotate(2deg); box-shadow: 0 28px 50px rgba(58,33,32,.24); }
.management figure img { display: block; width: 100%; border-radius: 22px; }
.tick-list { margin: 25px 0 0; padding: 0; list-style: none; }
.tick-list li { position: relative; margin-top: 10px; padding-left: 25px; color: #514844; font-size: .9rem; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: #e43c43; font-weight: 900; }
.wishlist { display: flex; flex-direction: column; justify-content: space-between; background: #f5efff; }
.wishlist-demo { position: relative; margin: 28px 0 45px; padding: 62px 18px 18px; border-radius: 26px; background: #201a29; }
.heart { position: absolute; top: 17px; left: 20px; color: #ff4c7d; font-size: 1.6rem; }
.wish-item { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 13px; border-radius: 15px; background: white; }
.wish-item i { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg,#ffce54,#ff6a4b); }
.wish-item span { flex: 1; }
.wish-item strong, .wish-item small { display: block; }
.wish-item small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.wish-item b { color: #d53269; font-size: .65rem; }
.brick-pro { padding: 110px 0; color: white; background: #17151d; }
.pro-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.pro-heading h2 { margin: 18px 0 0; }
.pro-heading p { max-width: 470px; color: #aaa2ad; line-height: 1.7; }
.pro-pill { display: inline-block; padding: 8px 13px; border: 1px solid #554c5a; border-radius: 99px; color: #ffc64e; font-size: .67rem; font-weight: 900; letter-spacing: .13em; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pro-card { min-height: 630px; overflow: hidden; border: 1px solid #39333e; border-radius: 34px; }
.pro-card-copy { padding: 34px; }
.pro-card .feature-number { color: #ffc64e; }
.pro-card h3 { margin: 44px 0 16px; font-size: clamp(2rem, 3vw, 3.2rem); }
.pro-card p { color: #aaa2ad; line-height: 1.7; }
.collector { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg,#211b28,#2b183a); }
.collector-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 32px; border: 1px solid #483e50; border-radius: 19px; }
.collector-stats div { padding: 16px; }
.collector-stats div + div { border-left: 1px solid #483e50; }
.collector-stats strong, .collector-stats small { display: block; }
.collector-stats strong { font-size: 1.4rem; }
.collector-stats small { margin-top: 4px; color: #9d94a2; font-size: .67rem; }
.theme-progress { margin: 0 34px 34px; padding: 25px; border-radius: 24px; color: #241728; background: #f5d9ff; }
.theme-progress span { display: flex; justify-content: space-between; gap: 20px; }
.theme-progress small { color: #715c75; }
.theme-progress > i { display: block; height: 11px; margin: 16px 0 20px; overflow: hidden; border-radius: 9px; background: rgba(36,23,40,.13); }
.theme-progress > i b { display: block; width: 78%; height: 100%; border-radius: inherit; background: #7c39a4; }
.brick-dots { display: grid; grid-template-columns: repeat(8,1fr); gap: 7px; }
.brick-dots b { aspect-ratio: 1; border-radius: 5px; background: #7c39a4; }
.brick-dots b:nth-last-child(-n+2) { background: rgba(36,23,40,.13); }
.builder { display: flex; flex-direction: column; background: linear-gradient(150deg,#191b20,#182c2c); }
.builder-visual { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 18px; min-height: 290px; padding: 34px; background: radial-gradient(circle at 30% 45%,#145a55,transparent 55%); }
.build-ring { display: grid; place-content: center; width: 170px; aspect-ratio: 1; border: 16px solid #2dd4bf; border-right-color: #304542; border-radius: 50%; text-align: center; transform: rotate(-20deg); }
.build-ring > * { transform: rotate(20deg); }
.build-ring strong { font-size: 2rem; }
.build-ring small { color: #9badaa; }
.build-session { padding: 21px; border: 1px solid #3b5552; border-radius: 19px; background: rgba(11,23,23,.72); }
.build-session span, .build-session strong, .build-session small { display: block; }
.build-session span { color: #2dd4bf; font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.build-session strong { margin: 11px 0 5px; font-size: 1.8rem; }
.build-session small { color: #9badaa; }
.tick-list.dark li { color: #c3bdc6; }
.tick-list.dark li::before { color: #2dd4bf; }
.pro-note { margin: 32px 0 0; color: #938b98; text-align: center; font-size: .82rem; }
.brick-download { background: #fffdf9; }
.download-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 55px; border-radius: 36px; color: white; background: linear-gradient(115deg,#ec3d45,#8b2dd1); }
.download-panel > img { border-radius: 25px; box-shadow: 0 16px 35px rgba(54,15,45,.25); }
.download-panel h2 { margin: 10px 0; font-size: clamp(2.1rem, 4vw, 3.6rem); }
.download-panel p { max-width: 570px; color: rgba(255,255,255,.78); }
.download-panel .eyebrow { color: #ffe06c; }
.download-panel .store-actions { align-content: center; flex-direction: column; margin: 0; }
.store-button.light { color: #17151d; background: white; }

@media (max-width: 980px) {
  .brick-hero-grid, .everyday-grid, .pro-grid { grid-template-columns: 1fr; }
  .brick-showcase { max-width: 650px; width: 100%; margin: auto; }
  .download-panel { grid-template-columns: auto 1fr; }
  .download-panel .store-actions { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 680px) {
  .brick-hero { padding-top: 45px; }
  .brick-hero h1 { font-size: clamp(3.7rem,18vw,5.4rem); }
  .brick-showcase { min-height: 520px; }
  .shot-main { left: 6%; width: 215px; }
  .shot-side { right: 0; width: 180px; }
  .showcase-note { min-width: 155px; padding: 12px; }
  .note-collection { top: 31%; }
  .proof-row { justify-content: flex-start; overflow: hidden; }
  .everyday-card { min-height: 560px; padding: 26px; }
  .management { display: block; }
  .management .feature-number { position: static; }
  .management figure { width: 180px; margin: 35px auto -135px; }
  .pro-heading { display: block; }
  .pro-heading p { margin-top: 25px; }
  .brick-pro { padding: 78px 0; }
  .pro-card { min-height: 570px; }
  .builder-visual { grid-template-columns: 1fr 1fr; padding: 24px; }
  .build-ring { width: 120px; border-width: 12px; }
  .build-ring strong { font-size: 1.5rem; }
  .build-session { padding: 15px; }
  .download-panel { display: block; padding: 34px 25px; }
  .download-panel > img { margin-bottom: 25px; }
  .download-panel .store-actions { flex-direction: column; align-items: stretch; margin-top: 25px; }
  .download-panel .store-button { width: 100%; }
}