/* Snapto marketing site - brutalist design system (2026 relaunch).
   Loads AFTER the compiled css/app.css in layouts/master.blade.php, so these
   rules win where they overlap. All classes are prefixed bru- to avoid
   colliding with the compiled Tailwind utilities. Light mode only. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;700&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bru-ink: #241f4e;
    --bru-ink-deep: #16122e;
    --bru-paper: #fffdf5;
    --bru-melon: #f74b71;
    --bru-melon-dark: #e03d60;
    --bru-purple: #4a4497;
    --bru-muted: #57547a;
    --bru-faint: #a09dbb;
    --bru-display: 'Bricolage Grotesque', sans-serif;
    --bru-mono: 'JetBrains Mono', monospace;
    --bru-accent: 'Public Sans', sans-serif;
}

body,
.font-sans {
    font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
}

body {
    background: var(--bru-paper);
}

/* ---------- Type ---------- */

.bru-h1 {
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: clamp(46px, 7vw, 84px);
    line-height: 1.0;
    letter-spacing: -.025em;
    color: var(--bru-ink);
    max-width: 880px;
    margin: 38px auto 0;
}

.bru-h1 em {
    font-style: normal;
    display: inline-block;
    background: #fff;
    color: var(--bru-melon);
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--bru-ink);
    padding: 0 16px 4px;
    transform: rotate(-1.5deg);
}

.bru-h2 {
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--bru-ink);
    margin: 0;
}

.bru-h3 {
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--bru-ink);
    margin: 14px 0 0;
}

.bru-h3-lg {
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.01em;
    color: var(--bru-ink);
}

.bru-lead {
    margin: 18px auto 0;
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--bru-muted);
    max-width: 620px;
}

.bru-body {
    margin: 10px 0 0;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--bru-muted);
}

.bru-micro {
    font-family: var(--bru-accent);
    margin-top: 16px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--bru-muted);
}

.bru-center { text-align: center; }
.bru-left { text-align: left; }

.bru-aftergrid {
    margin-top: 48px;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--bru-muted);
}

/* ---------- Layout ---------- */

.bru-section { padding: 80px 24px; }
.bru-container { max-width: 1160px; margin: 0 auto; }
.bru-narrow { max-width: 760px; margin: 0 auto; }

.bru-grid3 {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

@media (min-width: 768px) {
    .bru-grid3 { grid-template-columns: repeat(3, 1fr); }
}

.bru-grid2 {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

@media (min-width: 768px) {
    .bru-grid2 { grid-template-columns: repeat(2, 1fr); }
}

/* Long unbreakable content (code blocks) must not stretch its grid column. */
.bru-grid3 > div,
.bru-grid2 > div { min-width: 0; }

/* Bold section bands */
.bru-band {
    background: var(--bru-purple);
    border-top: 2px solid var(--bru-ink);
    border-bottom: 2px solid var(--bru-ink);
}

.bru-band-melon {
    background: var(--bru-melon);
    border-top: 2px solid var(--bru-ink);
    border-bottom: 2px solid var(--bru-ink);
}

.bru-band .bru-h2,
.bru-band-melon .bru-h2 { color: #fffdf5; }

.bru-band .bru-lead { color: #d9d6f0; }
.bru-band-melon .bru-lead { color: #ffe3e0; }

.bru-band .bru-micro,
.bru-band-melon .bru-micro { color: #fff; }

/* ---------- Components ---------- */

.bru-sticker {
    font-family: var(--bru-accent);
    display: inline-block;
    background: var(--bru-melon);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 18px;
    border: 2px solid var(--bru-ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--bru-ink);
    transform: rotate(-2deg);
}

.bru-card {
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 6px 6px 0 var(--bru-ink);
}

.bru-card-ink {
    background: var(--bru-ink-deep);
    border-color: var(--bru-ink);
    box-shadow: 6px 6px 0 var(--bru-melon);
}

.bru-pad { padding: 26px; }
.bru-pad-lg { padding: 34px; }

.bru-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bru-melon);
    color: #fff;
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 18px;
    border: 2px solid var(--bru-ink);
    border-radius: 10px;
    box-shadow: 3px 3px 0 var(--bru-ink);
}

.bru-icon {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--bru-melon);
    border: 2px solid var(--bru-ink);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--bru-ink);
}

.bru-pre {
    margin-top: 16px;
    background: var(--bru-ink);
    color: #eceafc;
    font-family: var(--bru-mono);
    font-size: 13px;
    line-height: 1.6;
    padding: 14px 16px;
    border: 2px solid var(--bru-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 #cfcbe8;
    overflow-x: auto;
    text-align: left;
    white-space: pre;
}

.bru-link {
    color: var(--bru-melon);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.bru-link:hover { color: var(--bru-ink); }

.bru-btn {
    --bru-btn-shadow: var(--bru-ink);
    display: inline-block;
    background: var(--bru-melon);
    color: #fff;
    font-family: var(--bru-accent);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.2;
    padding: 12px 26px;
    border: 2px solid var(--bru-ink);
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--bru-btn-shadow);
    transition: transform .12s, box-shadow .12s;
    cursor: pointer;
    text-align: center;
}

.bru-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--bru-btn-shadow);
    color: #fff;
}

/* Ink buttons take a watermelon shadow: an ink shadow on an ink button
   merges into one unreadable silhouette. */
.bru-btn-ink {
    background: var(--bru-ink);
    --bru-btn-shadow: var(--bru-melon);
}
.bru-btn-ink:hover { color: #fff; }

.bru-btn-white {
    background: #fff;
    color: var(--bru-ink);
}

.bru-btn-white:hover { color: var(--bru-ink); }

.bru-btn-sm {
    font-size: 14px;
    padding: 8px 18px;
    box-shadow: 3px 3px 0 var(--bru-btn-shadow);
}

.bru-btn-sm:hover { box-shadow: 1px 1px 0 var(--bru-btn-shadow); }

/* ---------- Logo lockup ---------- */

/* Same icon SVG, brutalist frame: melon sticker tile, white glyph */
.bru-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 6px;
    background: var(--bru-melon);
    color: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 9px;
    box-shadow: 2px 2px 0 var(--bru-ink);
    transform: rotate(-4deg);
    flex: none;
    margin-right: 8px;
}

.bru-logo-word { color: var(--bru-ink); }

/* SVG wordmark has fixed glyph weight: a currentColor stroke fattens it */
.bru-logo-word svg path,
.bru-footer a[href] > div[aria-hidden] svg path {
    stroke: currentColor;
    stroke-width: 3.5;
}

/* Footer sits on deep ink: shadow goes melon, wordmark stays cream */
.bru-footer .bru-logo-tile { box-shadow: 2px 2px 0 #fffdf5; }

/* ---------- Header nav ---------- */

.bru-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bru-paper);
}

.bru-nav-link {
    font-size: 16px;
    font-weight: 700;
    color: var(--bru-ink);
}

.bru-nav-link:hover { color: var(--bru-melon); }

/* Logo block matches the right-side flex-1 so the nav centers between them */
@media (min-width: 768px) {
    .bru-nav-row > div:first-child { flex: 1; }
}

/* ---------- Hero ---------- */

.bru-hero {
    position: relative;
    padding: 88px 24px 0;
    text-align: center;
    overflow: hidden;
}

.bru-hero-content {
    position: relative;
    z-index: 1;
}

/* Flat scatter doodles behind the hero (the confetti spirit, brutalist body) */
.bru-doodle {
    position: absolute;
    z-index: 0;
}

.bru-doodle-star {
    font-size: 34px;
    color: var(--bru-melon);
}

.bru-doodle-star.sm {
    font-size: 22px;
    color: #716bbd;
}

.bru-doodle-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #716bbd;
    border: 2px solid var(--bru-ink);
}

.bru-doodle-dot.melon { background: var(--bru-melon); }

.bru-doodle-square {
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid var(--bru-ink);
    box-shadow: 3px 3px 0 var(--bru-ink);
}

.bru-doodle-cross {
    font-size: 26px;
    color: var(--bru-ink);
    font-weight: 700;
}

@media (max-width: 768px) {
    .bru-doodle { display: none; }
}

.bru-hero-sub {
    margin: 28px auto 0;
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--bru-muted);
    max-width: 560px;
}

.bru-claim {
    margin: 44px auto 0;
    max-width: 520px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 7px 7px 0 var(--bru-ink);
    padding: 8px 8px 8px 20px;
}

.bru-claim span {
    font-family: var(--bru-accent);
    font-weight: 700;
    font-size: 17px;
    color: var(--bru-ink);
    white-space: nowrap;
}

.bru-claim input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--bru-ink);
    padding: 12px 4px;
    box-shadow: none;
}

.bru-claim input:focus {
    outline: 0;
    box-shadow: none;
}

.bru-claim input::placeholder { color: #b9b6cf; }

.bru-claim button {
    border: 2px solid var(--bru-ink);
    cursor: pointer;
    background: var(--bru-melon);
    color: #fff;
    font-family: var(--bru-accent);
    font-weight: 700;
    font-size: 15.5px;
    padding: 11px 22px;
    border-radius: 10px;
    box-shadow: 3px 3px 0 var(--bru-ink);
    transition: transform .12s, box-shadow .12s;
    white-space: nowrap;
}

.bru-claim button:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--bru-ink);
}

/* ---------- Final CTA: claim form on the ink card ---------- */

.bru-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 104px 24px 96px;
}

/* Full-bleed variant: the homepage finale is a band, not a card */
.bru-cta-band {
    background: var(--bru-ink-deep);
    border-top: 2px solid var(--bru-ink);
    padding: 130px 24px 120px;
}

.bru-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

.bru-cta .bru-h2 {
    color: #fff;
    font-size: clamp(40px, 5.5vw, 68px);
    line-height: 1.02;
    letter-spacing: -.025em;
}

.bru-cta .bru-h2 em {
    font-style: normal;
    display: inline-block;
    background: #fff;
    color: var(--bru-melon);
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--bru-melon);
    padding: 0 16px 4px;
    margin-right: 14px;
    transform: rotate(-1.5deg);
}

.bru-cta .bru-lead {
    color: #cac7e2;
    font-size: 20px;
    margin-top: 26px;
}

/* Ink-on-ink shadow disappears, so the claim box casts melon here */
.bru-cta .bru-claim {
    margin-top: 44px;
    max-width: 620px;
    padding: 10px 10px 10px 24px;
    box-shadow: 8px 8px 0 var(--bru-melon);
}

.bru-cta .bru-claim span { font-size: 19px; }

.bru-cta .bru-claim input {
    font-size: 17px;
    padding: 15px 6px;
}

.bru-cta .bru-claim button {
    font-size: 17px;
    padding: 14px 28px;
}

.bru-cta .bru-micro {
    color: #9d99c6;
    margin-top: 20px;
}

/* Melon button on the deep-ink card: ink shadow vanishes, white pops */
.bru-cta .bru-btn { --bru-btn-shadow: #fff; }

.bru-cta .bru-doodle-star { font-size: 46px; }
.bru-cta .bru-doodle-star.sm { font-size: 28px; color: #8a84cf; }
.bru-cta .bru-doodle-dot { width: 22px; height: 22px; }
.bru-cta .bru-doodle-square { width: 20px; height: 20px; }

@media (max-width: 640px) {
    .bru-cta { padding: 72px 18px 64px; }
    .bru-cta .bru-h2 { font-size: 32px; }
    .bru-cta .bru-claim { padding-left: 14px; }
    .bru-cta .bru-claim span,
    .bru-cta .bru-claim input { font-size: 15px; }
    .bru-cta .bru-claim button { font-size: 15px; padding: 12px 16px; }
}

/* ---------- Agent steps ---------- */

.bru-steps { margin-top: 60px; }

.bru-step {
    position: relative;
    padding-top: 34px;
    display: flex;
    flex-direction: column;
}

/* Equal intro-text zones so the three windows start on the same line */
@media (min-width: 768px) {
    .bru-step .bru-body { min-height: 52px; }
}

.bru-step .bru-body { margin-bottom: 18px; }

/* All three windows share the tallest height; short ones keep calm space below */
.bru-step .bru-cc {
    margin-top: auto;
    height: 230px;
}

.bru-step .bru-num {
    position: absolute;
    top: -19px;
    left: 22px;
    transform: rotate(-4deg);
}

.bru-step .bru-h3 { margin-top: 0; }

/* Mini Claude Code terminal inside the Ask step: same component as the
   /mcp hero, one exchange, shorter 12s loop */
.bru-cc-sm {
    margin-top: 16px;
    box-shadow: 5px 5px 0 var(--bru-melon);
}

.bru-cc-sm .bru-cc-bar { padding: 10px 14px; }

.bru-cc-sm .bru-cc-dot { width: 9px; height: 9px; }

.bru-cc-sm .bru-cc-body {
    padding: 14px 16px 16px;
    font-size: 12px;
}

/* Static command inside the same window chrome */
.bru-cc-pre {
    margin: 0;
    padding: 14px 16px 16px;
    font-family: var(--bru-mono);
    font-size: 12px;
    line-height: 1.7;
    color: #eceafc;
    text-align: left;
    white-space: pre;
    overflow-x: auto;
}

.ccs-l1 { animation: ccs-l1 12s linear infinite; }
.ccs-l2 { animation: ccs-l2 12s linear infinite; }
.ccs-l3 { animation: ccs-l3 12s linear infinite; }
.ccs-l4 { animation: ccs-l4 12s linear infinite; }
.ccs-l5 { animation: ccs-l5 12s linear infinite; }
.ccs-l1 b { animation: ccs-t1 12s steps(27, end) infinite; }
.ccs-c1 { animation: ccs-c1 12s linear infinite; }

@keyframes ccs-l1 { 0% { opacity: 0; } 1%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ccs-l2 { 0%, 20% { opacity: 0; transform: translateY(4px); } 22%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ccs-l3 { 0%, 28% { opacity: 0; transform: translateY(4px); } 30%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ccs-l4 { 0%, 36% { opacity: 0; transform: translateY(4px); } 38%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ccs-l5 { 0%, 44% { opacity: 0; transform: translateY(4px); } 46%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@keyframes ccs-t1 { 0%, 1% { max-width: 0; } 14%, 100% { max-width: 27ch; } }

@keyframes ccs-c1 { 0% { opacity: 0; } 1%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } }

/* Step 3: the page itself, new link pops in after step 2's tool call
   (both loops are 12s, so they stay in step) */
.bru-page {
    padding: 14px 16px 16px;
    text-align: left;
}

.bru-page-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.bru-page-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bru-purple);
    color: #fff;
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 12px;
    flex: none;
}

.bru-page-name {
    width: 90px;
    height: 8px;
    border-radius: 4px;
    background: #3a3560;
}

.bru-page-pill {
    font-family: var(--bru-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--bru-ink);
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 999px;
    padding: 7px 12px;
    text-align: center;
    margin-top: 8px;
}

/* Reorder shuffle: pill height 34px + 8px gap = 42px steps. The store pill
   rides from slot 3 to slot 1 when element_reorder lands, the others give way. */
.ccs-shuf1, .ccs-shuf2 { animation: ccs-shuf-down 12s linear infinite; }
.ccs-shuf3 { animation: ccs-shuf-up 12s linear infinite; }

.ccs-shuf3 b {
    font-weight: 700;
    opacity: 0;
    animation: ccs-arrow 12s linear infinite;
}

@keyframes ccs-shuf-down {
    0%, 48% { transform: none; }
    53%, 95% { transform: translateY(42px); }
    99%, 100% { transform: none; }
}

@keyframes ccs-shuf-up {
    0%, 48% { transform: none; background: #fff; color: var(--bru-ink); }
    53%, 95% { transform: translateY(-84px); background: var(--bru-melon); color: #fff; }
    99%, 100% { transform: none; background: #fff; color: var(--bru-ink); }
}

@keyframes ccs-arrow {
    0%, 52% { opacity: 0; }
    56%, 95% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

/* ---------- Mid-page melon claim band ---------- */

.bru-midcta {
    position: relative;
    overflow: hidden;
}

.bru-midcta .bru-doodle-star.ink { color: var(--bru-ink); }
.bru-midcta .bru-doodle-star.white { color: #fff; }
.bru-midcta .bru-doodle-cross.white { color: #fff; }

/* ---------- FAQ accordion ---------- */

.bru-faq-grid {
    display: grid;
    gap: 40px;
    align-items: start;
    text-align: left;
}

@media (min-width: 1024px) {
    .bru-faq-grid {
        grid-template-columns: 5fr 7fr;
        gap: 72px;
    }
}

.bru-faq-head .bru-lead { margin-top: 20px; }

/* Melon on purple is too low-contrast for the head link */
.bru-faq-head .bru-link { color: #fff; }
.bru-faq-head .bru-link:hover { color: var(--bru-melon); }

.bru-faq {
    text-align: left;
    display: grid;
    gap: 16px;
}

.bru-faq details {
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--bru-ink);
}

.bru-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: var(--bru-ink);
}

.bru-faq summary::-webkit-details-marker { display: none; }

.bru-faq summary::after {
    content: '+';
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--bru-ink);
    border-radius: 9px;
    background: var(--bru-melon);
    box-shadow: 2px 2px 0 var(--bru-ink);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 2px;
    transition: transform .15s;
}

.bru-faq details[open] summary::after {
    transform: rotate(45deg);
    box-shadow: 1px 1px 0 var(--bru-ink);
}

.bru-faq details p {
    margin: 0;
    padding: 0 60px 22px 24px;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--bru-muted);
}

/* ---------- MCP hero: split layout with an animated Claude Code terminal ---------- */

.bru-hero-mcp { padding-bottom: 24px; }

.bru-hero-mcp-grid {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .bru-hero-mcp-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }

    .bru-hero-mcp-copy { text-align: left; }

    .bru-hero-mcp-copy .bru-h1 { margin-left: 0; }

    .bru-hero-mcp-copy .bru-hero-sub,
    .bru-hero-mcp-copy .bru-micro { margin-left: 0; }
}

.bru-hero-mcp-copy .bru-h1 { font-size: clamp(42px, 5vw, 64px); }

.bru-hero-mcp-copy .bru-micro { max-width: 480px; }

.bru-hero-cta {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 1024px) {
    .bru-hero-mcp-copy .bru-hero-cta { justify-content: flex-start; }
}

/* Setup cards: both code windows share a height, anchored level */
.bru-setup {
    display: flex;
    flex-direction: column;
}

.bru-setup .bru-cc {
    margin-top: auto;
    height: 230px;
}

.bru-setup .bru-body { margin-bottom: 14px; }

.bru-cc {
    background: var(--bru-ink-deep);
    border: 2px solid var(--bru-ink);
    border-radius: 14px;
    box-shadow: 8px 8px 0 var(--bru-melon);
    overflow: hidden;
}

.bru-cc-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--bru-ink);
}

.bru-cc-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.bru-cc-title {
    margin-left: 8px;
    font-family: var(--bru-mono);
    font-size: 12px;
    color: #8a84cf;
}

.bru-cc-body {
    padding: 20px 22px 24px;
    font-family: var(--bru-mono);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: left;
}

.bru-cc-body > div { margin-top: 11px; }
.bru-cc-body > div:first-child { margin-top: 0; }

.cc-u i { color: var(--bru-melon); font-style: normal; font-weight: 700; }

.cc-u b {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 500;
    color: #fffdf5;
}

.cc-a { color: #cfcbe8; }

.cc-t { color: #fffdf5; }
.cc-t i { color: #28c840; font-style: normal; font-size: 10px; vertical-align: 1px; }

.cc-r { color: #8a84cf; padding-left: 14px; }

.cc-caret {
    display: inline-block;
    width: 7px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -2px;
    background: #fffdf5;
    opacity: 0;
}

/* One shared 18s timeline; each line owns its reveal point */
.cc-l1 { animation: cc-l1 18s linear infinite; }
.cc-l2 { animation: cc-l2 18s linear infinite; }
.cc-l3 { animation: cc-l3 18s linear infinite; }
.cc-l4 { animation: cc-l4 18s linear infinite; }
.cc-l5 { animation: cc-l5 18s linear infinite; }
.cc-l6 { animation: cc-l6 18s linear infinite; }
.cc-l7 { animation: cc-l7 18s linear infinite; }
.cc-l8 { animation: cc-l8 18s linear infinite; }
.cc-l9 { animation: cc-l9 18s linear infinite; }

.cc-l1 b { animation: cc-t1 18s steps(41, end) infinite; }
.cc-l6 b { animation: cc-t2 18s steps(25, end) infinite; }
.cc-c1 { animation: cc-c1 18s linear infinite; }
.cc-c2 { animation: cc-c2 18s linear infinite; }

@keyframes cc-l1 { 0% { opacity: 0; } 1%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc-l2 { 0%, 12% { opacity: 0; transform: translateY(4px); } 14%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l3 { 0%, 17% { opacity: 0; transform: translateY(4px); } 19%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l4 { 0%, 23% { opacity: 0; transform: translateY(4px); } 25%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l5 { 0%, 29% { opacity: 0; transform: translateY(4px); } 31%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l6 { 0%, 40% { opacity: 0; } 41%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc-l7 { 0%, 50% { opacity: 0; transform: translateY(4px); } 52%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l8 { 0%, 56% { opacity: 0; transform: translateY(4px); } 58%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cc-l9 { 0%, 62% { opacity: 0; transform: translateY(4px); } 64%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@keyframes cc-t1 { 0%, 1% { max-width: 0; } 9%, 100% { max-width: 41ch; } }
@keyframes cc-t2 { 0%, 41% { max-width: 0; } 47%, 100% { max-width: 25ch; } }

@keyframes cc-c1 { 0% { opacity: 0; } 1%, 10% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes cc-c2 { 0%, 40% { opacity: 0; } 41%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

/* ---------- Trust strip ---------- */

.bru-trust {
    font-family: var(--bru-accent);
    padding: 28px 24px 64px;
    text-align: center;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--bru-muted);
}

.bru-trust b {
    color: var(--bru-ink);
    font-weight: 700;
}

.bru-trust i {
    font-style: normal;
    color: var(--bru-melon);
    margin: 0 14px;
}

/* ---------- Marquee ---------- */

/* Negative side margins cancel the hero's 24px padding: edge to edge. */
.bru-marquee {
    margin: 72px -24px 0;
    border-top: 2px solid var(--bru-ink);
    border-bottom: 2px solid var(--bru-ink);
    background: var(--bru-ink);
    overflow: hidden;
    white-space: nowrap;
}

.bru-track {
    font-family: var(--bru-accent);
    display: inline-block;
    padding: 17px 0;
    font-size: 17px;
    font-weight: 700;
    color: #fffdf5;
    animation: bru-scroll 48s linear infinite;
}

.bru-track b {
    color: var(--bru-melon);
    font-weight: 500;
    margin: 0 22px;
}

@keyframes bru-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Feature rows ---------- */

.bru-kicker {
    font-family: var(--bru-accent);
    display: inline-block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bru-melon);
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 3px 3px 0 var(--bru-ink);
    transform: rotate(-1deg);
    margin-bottom: 18px;
}

.bru-shot {
    display: inline-block;
    background: #fff;
    padding: 12px;
    border: 2px solid var(--bru-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0 var(--bru-ink);
    transform: rotate(-1.5deg);
    transition: transform .15s;
}

.bru-shot img {
    border-radius: 8px;
    display: block;
}

.bru-shot:hover { transform: rotate(0deg); }

.bru-shot.alt {
    transform: rotate(1.5deg);
    box-shadow: 8px 8px 0 var(--bru-melon);
}

.bru-shot.alt:hover { transform: rotate(0deg); }

/* ---------- Phone mockup (code-built, no bitmap) ---------- */

.bru-phone-stage {
    position: relative;
    display: inline-block;
    padding: 36px 64px 48px;
}

.bru-phone {
    position: relative;
    width: 272px;
    background: #4a4497;
    border: 3px solid var(--bru-ink);
    border-radius: 40px;
    box-shadow: 10px 10px 0 var(--bru-ink);
    overflow: hidden;
    text-align: center;
}

.bru-phone-head {
    background: #716bbd;
    border-bottom: 3px solid var(--bru-ink);
    padding: 34px 20px 22px;
}

.bru-phone-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--bru-melon);
    border: 2px solid var(--bru-ink);
    box-shadow: 3px 3px 0 var(--bru-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 24px;
}

.bru-phone-name {
    margin: 14px auto 0;
    width: 110px;
    height: 12px;
    border-radius: 99px;
    background: #fff;
    border: 2px solid var(--bru-ink);
}

.bru-phone-line {
    margin: 8px auto 0;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 253, 245, .55);
}

.bru-phone-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 0 4px;
}

.bru-phone-socials i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #fffdf5;
    border: 2px solid var(--bru-ink);
    transform: rotate(8deg);
}

.bru-phone-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 34px;
}

.bru-phone-link {
    height: 38px;
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 99px;
    box-shadow: 3px 3px 0 var(--bru-ink);
}

.bru-phone-link.hot {
    background: var(--bru-melon);
}

.bru-app {
    position: absolute;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 2px solid var(--bru-ink);
    box-shadow: 4px 4px 0 var(--bru-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.bru-app svg {
    width: 28px;
    height: 28px;
}

/* Hovering the stage pushes the app icons outward. The individual
   translate/scale properties compose with the inline rotate transforms. */
.bru-app {
    transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), scale .35s cubic-bezier(.34, 1.56, .64, 1);
}

.bru-phone-stage:hover .bru-app { scale: 1.08; }
.bru-phone-stage:hover .bru-app-l { translate: -22px 0; }
.bru-phone-stage:hover .bru-app-r { translate: 22px 0; }

.bru-phone-stage .bru-app:nth-of-type(2),
.bru-phone-stage .bru-app:nth-of-type(6) { transition-delay: .04s; }
.bru-phone-stage .bru-app:nth-of-type(3),
.bru-phone-stage .bru-app:nth-of-type(7) { transition-delay: .08s; }
.bru-phone-stage .bru-app:nth-of-type(4),
.bru-phone-stage .bru-app:nth-of-type(8) { transition-delay: .12s; }

@media (max-width: 420px) {
    .bru-phone-stage { padding: 36px 24px 48px; }
    .bru-app { display: none; }
}

/* Fan of template phones ("Make it yours") */
.bru-fan {
    position: relative;
    display: inline-block;
    padding: 24px 0 36px;
    white-space: nowrap;
}

.bru-fan .bru-phone {
    display: inline-block;
    width: 190px;
    vertical-align: middle;
}

.bru-fan .bru-phone-head { padding: 22px 14px 16px; }
.bru-fan .bru-phone-avatar { width: 44px; height: 44px; font-size: 18px; }
.bru-fan .bru-phone-name { width: 84px; height: 10px; margin-top: 11px; }
.bru-fan .bru-phone-links { padding: 14px 14px 24px; gap: 9px; }
.bru-fan .bru-phone-link { height: 28px; box-shadow: 2px 2px 0 var(--bru-ink); }

.bru-fan-l { transform: rotate(-9deg) translate(30px, 8px); z-index: 0; }
.bru-fan-c { position: relative; z-index: 2; box-shadow: 10px 10px 0 var(--bru-melon); }
.bru-fan-r { transform: rotate(9deg) translate(-30px, 8px); z-index: 1; }

/* On hover-capable screens the side cards start tucked behind the center
   card and fan out on hover. Touch devices keep the fanned pose above. */
@media (hover: hover) and (min-width: 641px) {
    .bru-fan-l,
    .bru-fan-r { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

    .bru-fan-l { transform: rotate(-5deg) translate(96px, 10px); }
    .bru-fan-r { transform: rotate(5deg) translate(-96px, 10px); }

    .bru-fan:hover .bru-fan-l { transform: rotate(-9deg) translate(30px, 8px); }
    .bru-fan:hover .bru-fan-r { transform: rotate(9deg) translate(-30px, 8px); }
}

/* The fan is a fixed-width composition; shrink it on phones or it
   forces horizontal page scroll. */
@media (max-width: 640px) {
    .bru-fan .bru-phone { width: 108px; }
    .bru-fan .bru-phone-head { padding: 14px 10px 10px; }
    .bru-fan .bru-phone-avatar { width: 32px; height: 32px; font-size: 14px; }
    .bru-fan .bru-phone-name { width: 60px; height: 8px; margin-top: 8px; }
    .bru-fan .bru-phone-links { padding: 10px 10px 16px; gap: 7px; }
    .bru-fan .bru-phone-link { height: 20px; }
    .bru-fan-l { transform: rotate(-9deg) translate(18px, 6px); }
    .bru-fan-r { transform: rotate(9deg) translate(-18px, 6px); }
}

.bru-phone-melon { background: var(--bru-melon); }
.bru-phone-melon .bru-phone-head { background: #ffd9de; }
.bru-phone-melon .bru-phone-avatar { background: var(--bru-ink); }

.bru-phone-mint { background: #0d9488; }
.bru-phone-mint .bru-phone-head { background: #99e6dc; }
.bru-phone-mint .bru-phone-avatar { background: var(--bru-purple); }

/* Analytics card ("Easy analytics") */
.bru-stats {
    display: inline-block;
    width: 360px;
    max-width: 100%;
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0 var(--bru-ink);
    padding: 22px;
    transform: rotate(1.5deg);
    text-align: left;
    transition: transform .15s;
}

.bru-stats:hover { transform: rotate(0deg); }

.bru-stats-kicker {
    font-family: var(--bru-accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--bru-muted);
}

.bru-stats-kicker b {
    color: var(--bru-melon);
    font-weight: 500;
    letter-spacing: .04em;
}

.bru-stats-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

.bru-stat {
    flex: 1;
    border: 2px solid var(--bru-ink);
    border-radius: 10px;
    background: var(--bru-paper);
    padding: 10px 14px;
}

.bru-stat b {
    display: block;
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--bru-ink);
    font-variant-numeric: tabular-nums;
}

.bru-stat span {
    font-family: var(--bru-accent);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bru-muted);
}

.bru-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 110px;
    margin-top: 20px;
    border-bottom: 2px solid var(--bru-ink);
}

.bru-bar {
    flex: 1;
    background: #716bbd;
    border: 2px solid var(--bru-ink);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.bru-bar.hot { background: var(--bru-melon); }

/* Agent terminal card ("Your agent does the upkeep") */
.bru-term {
    display: inline-block;
    width: 390px;
    max-width: 100%;
    background: #fff;
    border: 2px solid var(--bru-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0 var(--bru-melon);
    transform: rotate(-1.5deg);
    text-align: left;
    overflow: hidden;
    transition: transform .15s;
}

.bru-term:hover { transform: rotate(0deg); }

.bru-term-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--bru-ink);
    background: var(--bru-paper);
}

.bru-term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bru-ink);
}

.bru-term-name {
    margin-left: 6px;
    font-family: var(--bru-mono);
    font-size: 11.5px;
    color: #8a86a8;
}

.bru-term-chat {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.bru-msg {
    max-width: 88%;
    padding: 10px 14px;
    border: 2px solid var(--bru-ink);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
}

.bru-msg-user {
    align-self: flex-end;
    background: var(--bru-ink);
    color: #fffdf5;
    border-bottom-right-radius: 4px;
}

.bru-msg-bot {
    align-self: flex-start;
    background: var(--bru-paper);
    color: #3a3854;
    border-bottom-left-radius: 4px;
}

.bru-tool {
    align-self: flex-start;
    font-family: var(--bru-mono);
    font-size: 11px;
    color: #8a86a8;
    padding-left: 4px;
}

.bru-tool b {
    color: var(--bru-melon);
    font-weight: 500;
}

/* ---------- Chrome (header / footer) ---------- */

.bru-footer {
    /* A step darker than --bru-ink-deep so it reads apart from the CTA band */
    background: #100d22;
    border-top: 2px solid var(--bru-ink);
}

.bru-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .bru-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.bru-footer-tagline {
    font-family: var(--bru-accent);
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.bru-footer-head {
    font-family: var(--bru-display);
    font-weight: 800;
    font-size: 17.5px;
    letter-spacing: .01em;
    color: #fff;
    margin-bottom: 14px;
}

.bru-footer-links { list-style: none; margin: 0; padding: 0; }
.bru-footer-links li { margin-bottom: 10px; }

.bru-footer-links a {
    color: #fff;
    font-size: 16.5px;
}

.bru-footer-links a:hover {
    color: var(--bru-melon);
}

.bru-footer-social { gap: 20px; }

.bru-footer-social a { color: #fff; }
.bru-footer-social a:hover { color: var(--bru-melon); }

.bru-footer-bar {
    font-family: var(--bru-accent);
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 253, 245, .15);
    font-size: 15.5px;
    color: #fff;
    text-align: center;
}

.bru-footer-bar b {
    color: var(--bru-melon);
    font-weight: 500;
    margin: 0 8px;
}

/* ---------- Legal prose pages (terms, privacy, cookies) ---------- */

.prose h2,
.prose h3 {
    font-family: var(--bru-display);
    font-weight: 800;
    color: var(--bru-ink);
}

.prose {
    color: var(--bru-muted);
}

.prose a {
    color: var(--bru-melon);
    font-weight: 700;
}

/* Old-utility sub text (feature dl rows, section intros) matches bru-body weight */
.text-gray-500 {
    font-weight: 500;
    color: var(--bru-muted);
}