/* Shule's own site: Koko & Co's plum, purple, lavender and gold. Fraunces for headings, Poppins for text. */
:root {
    --plum: #1a0f1e;
    --plum-raised: #261a2d;
    --purple: #7b6baa;
    --purple-dark: #5f4f8f;
    --lavender: #c9bde0;
    --mist: #f6f3fa;
    --gold: #c9a961;
    --ink: #1d1622;
    --muted: #5d5466;
    --line: #e7e1ee;
    --radius: 20px;
    --serif: "Fraunces", Georgia, serif;
    --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.12; }
a { color: var(--purple-dark); }
.container { width: min(74rem, 100% - 2.5rem); margin-inline: auto; }
.visuallyhidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.85rem 1.5rem; border: 0; border-radius: 999px;
    background: var(--purple); color: #fff; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 24px rgb(123 107 170 / 0.35); transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.button:hover { background: var(--purple-dark); transform: translateY(-1px); box-shadow: 0 12px 28px rgb(123 107 170 / 0.45); }
.button--small { padding: 0.55rem 1.15rem; font-size: 0.9rem; white-space: nowrap; box-shadow: none; }
.button--block { width: 100%; }

.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: inherit; text-decoration: none; font: 600 1.4rem/1 var(--sans); letter-spacing: -0.03em; }
/* The emblem: a school under a jacaranda (shule/static/shule/brand). Wider than tall. */
.logo-mark { width: auto; height: 2.75rem; }
.logo--small { font-size: 1.1rem; }
.logo--small .logo-mark { width: auto; height: 2.2rem; }

.eyebrow { margin: 0 0 0.9rem; color: var(--purple); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.section-title { font: 500 clamp(2rem, 3.8vw, 3rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.section-lede { max-width: 36rem; margin: 1.1rem 0 0; color: var(--muted); font-size: 1.08rem; }
.section-head { max-width: 44rem; margin-bottom: 3.5rem; }
.section { padding-block: 7rem; }
.section--tint { background: var(--mist); }
.section--dark { background: var(--plum); color: #f4f0f8; }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .section-lede { color: rgb(244 240 248 / 0.72); }

/* Top bar: see-through over the hero, then solid once the page scrolls */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; color: #f4f0f8; transition: background 0.2s, box-shadow 0.2s; }
.topbar.is-scrolled { background: rgb(26 15 30 / 0.88); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgb(201 189 224 / 0.12); }
.topbar-inner { display: flex; align-items: center; gap: 1.75rem; padding-block: 1rem; }
.topnav { display: flex; gap: 2rem; margin-left: auto; font-size: 0.92rem; }
.topnav a, .signin { color: rgb(244 240 248 / 0.75); text-decoration: none; transition: color 0.15s; }
.topnav a:hover, .signin:hover { color: #fff; }
.signin { font-size: 0.92rem; }

/* Hero */
.hero {
    position: relative; overflow: hidden; color: #f4f0f8; padding-block: 9.5rem 6.5rem;
    background:
        radial-gradient(50rem 30rem at 80% 30%, rgb(123 107 170 / 0.35), transparent 65%),
        radial-gradient(30rem 20rem at 10% 90%, rgb(201 169 97 / 0.12), transparent 70%),
        var(--plum);
}
.hero-tree { position: absolute; right: -6rem; top: 2rem; width: 34rem; opacity: 0.35; filter: saturate(1.2); pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.kicker {
    display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.35rem 0.9rem 0.35rem 0.7rem;
    border: 1px solid rgb(201 169 97 / 0.35); border-radius: 999px; color: var(--gold); font-size: 0.82rem; font-weight: 500;
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(201 169 97 / 0.2); }
.hero h1 { font: 500 clamp(2.8rem, 5.6vw, 4.6rem)/1.02 var(--serif); letter-spacing: -0.03em; }
.hero h1 em { font-style: italic; color: var(--lavender); }
.hero-lede { max-width: 32rem; margin: 1.6rem 0 2.2rem; color: rgb(244 240 248 / 0.75); font-size: 1.12rem; }

/* School name box: type a name, then on to sign-up */
.namebox {
    display: flex; gap: 0.4rem; max-width: 30rem; padding: 0.4rem; border-radius: 999px;
    background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(201 189 224 / 0.25);
}
.namebox input {
    flex: 1; min-width: 0; padding: 0 1rem; border: 0; background: none; color: #fff;
    font: 500 1rem var(--sans); outline: none;
}
.namebox input::placeholder { color: rgb(244 240 248 / 0.5); }
.namebox:focus-within { box-shadow: inset 0 0 0 2px var(--lavender); }
.namebox .button { box-shadow: none; white-space: nowrap; }
.hero-points { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: rgb(244 240 248 / 0.6); font-size: 0.86rem; }
.hero-points li::before { content: "✓"; margin-right: 0.45rem; color: var(--gold); }

.hero-preview { position: relative; }
.hero-preview .browser { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.swatches { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding-left: 0.5rem; }
.swatches-label { margin-right: 0.4rem; color: rgb(244 240 248 / 0.6); font-size: 0.85rem; }
.swatch {
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.15); transition: transform 0.15s, box-shadow 0.15s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--plum), 0 0 0 4px #fff; }

/* A website in a browser frame */
.browser {
    container-type: inline-size; overflow: hidden; border-radius: 14px; background: #fff;
    box-shadow: 0 40px 80px rgb(10 7 9 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.browser-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem; background: #efebf3; }
.browser-bar span { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #d4cbe0; }
.browser-bar code {
    flex: 1; margin-left: 0.8rem; padding: 0.2rem 0.85rem; border-radius: 999px; background: #fff;
    color: var(--muted); font: 0.78rem/1.5 var(--sans);
}
.browser-bar code b { color: var(--ink); font-weight: 600; }
.browser--small { border-radius: 12px; box-shadow: 0 20px 45px rgb(26 15 30 / 0.14), 0 0 0 1px rgb(26 15 30 / 0.06); }
.browser--small .browser-bar { padding: 0.45rem 0.7rem; }
.browser--small .browser-bar span { width: 0.5rem; height: 0.5rem; }

/* Mock school homepages, sized in container units so they scale with the frame */
/* Registered as colours so the hero preview can fade between palettes (landing.js). */
@property --m-primary { syntax: "<color>"; inherits: true; initial-value: #7b6baa; }
@property --m-dark { syntax: "<color>"; inherits: true; initial-value: #1a0f1e; }
@property --m-accent { syntax: "<color>"; inherits: true; initial-value: #c9a961; }
.hero-preview .mock { transition: --m-primary 0.8s ease, --m-dark 0.8s ease, --m-accent 0.8s ease; }
@media (prefers-reduced-motion: reduce) { .hero-preview .mock { transition: none; } }

.mock {
    --m-primary: #7b6baa; --m-dark: #1a0f1e; --m-accent: #c9a961;
    position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden;
    background: #fff; color: #2a2430; font: 400 1.5cqw/1.35 var(--sans);
}
.mock * { transition: background-color 0.3s, color 0.3s, fill 0.3s, stroke 0.3s; }
.mock-head { display: flex; align-items: center; gap: 2cqw; padding: 1.7cqw 3.2cqw; }
.mock-brand { display: flex; align-items: center; gap: 1.1cqw; color: var(--m-dark); font-size: 1.75cqw; font-weight: 600; white-space: nowrap; }
.mock-brand b { overflow: hidden; text-overflow: ellipsis; max-width: 30cqw; }
.mock-crest { width: 3.4cqw; height: auto; flex: none; }
.mock-crest text { fill: #fff; font: 600 15px var(--sans); }
.mock-nav { display: flex; gap: 2.2cqw; margin-left: auto; color: #5c566a; font-size: 1.25cqw; }
.mock-nav i { font-style: normal; }
.mock-login { padding: 0.55cqw 1.3cqw; background: var(--m-dark); color: #fff; font-size: 1.1cqw; }
.mock-btn { align-self: flex-start; padding: 0.85cqw 1.7cqw; border-radius: 0.4cqw; font-size: 1.2cqw; font-weight: 600; background: #fff; color: var(--m-primary); }
/* Real school photos (small copies of the landing page's, see photos/CREDITS.md); cards vary them. */
.mock-photo { background: #b9b0a4 url("/static/shule/photos/mock-classroom.b3d522329d06.jpg") center 35% / cover no-repeat; }
.mock-cards span:nth-child(3n+2) .mock-photo, .mock-gallery .mock-photo:nth-child(3n+2) { background-image: url("/static/shule/photos/mock-students.26fb5272c341.jpg"); }
.mock-cards span:nth-child(3n) .mock-photo, .mock-gallery .mock-photo:nth-child(3n) { background-image: url("/static/shule/photos/mock-kids-table.239e5ca98c50.jpg"); background-position: center 40%; }
/* A different photo of schoolchildren for each design's big picture, so the four previews don't look alike. */
.mock--bold .mock-hero .mock-photo { background-image: url("/static/shule/photos/mock-kids-table.239e5ca98c50.jpg"); background-position: center 40%; }
.mock--utility .mock-photo--full { background-image: url("/static/shule/photos/mock-kids-sweaters.2ad2d7d9bacd.jpg"); background-position: center 30%; }
.mock--classic .mock-photo--full { background-image: url("/static/shule/photos/mock-students.26fb5272c341.jpg"); background-position: center 30%; }
.mock--photo .mock-photo--full { background-image: url("/static/shule/photos/mock-classroom.b3d522329d06.jpg"); background-position: center 40%; }

.mock-hero { display: grid; grid-template-columns: 2fr 3fr; flex: 1; min-height: 0; margin-inline: 3.2cqw; }
.mock-panel { display: flex; flex-direction: column; justify-content: center; gap: 1.3cqw; padding: 3cqw 3.4cqw; background: var(--m-primary); color: #fff; }
.mock-panel b { font: 600 3.9cqw/1.05 var(--sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.mock-panel small { font-size: 1.35cqw; opacity: 0.85; }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; padding: 1.6cqw 3.2cqw 2.2cqw; }
.mock-tiles span { display: grid; gap: 0.2cqw; padding: 1.2cqw 1.4cqw; background: color-mix(in srgb, var(--m-primary) 11%, white); color: #5c566a; font-size: 1.1cqw; }
.mock-blank { display: grid; align-content: start; gap: 1.6cqw; min-height: 28cqw; padding: 4cqw 3.4cqw; background: #fff; }
.mock-blank b { color: var(--m-dark); font: 600 3cqw/1.1 var(--sans); }
.mock-blank span:not(.mock-add) { display: grid; gap: 0.8cqw; max-width: 60%; }
.mock-blank i { display: block; height: 0.9cqw; border-radius: 1cqw; background: #e9e6ef; }
.mock-blank i:last-child { width: 70%; }
.mock-add {
    display: grid; place-items: center; min-height: 9cqw; margin-top: 1cqw; border: 0.25cqw dashed color-mix(in srgb, var(--m-primary) 45%, white);
    border-radius: 1cqw; color: var(--m-primary); font-size: 1.3cqw; font-weight: 600;
}
.mock-tiles b { color: var(--m-dark); font-size: 1.4cqw; }

.mock-photo--full { position: relative; display: flex; align-items: center; flex: 1; min-height: 0; }
.mock-photo--full::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.55), transparent 70%); }
.mock-overlay { position: relative; display: grid; gap: 1.3cqw; max-width: 50%; padding-inline: 6cqw; color: #fff; }
.mock-overlay b { font: 500 4.3cqw/1.08 var(--serif); }
.mock-overlay small { font-size: 1.3cqw; opacity: 0.9; }
.mock-overlay .mock-btn { color: var(--m-dark); }
.mock-intro { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3cqw; padding: 2.6cqw 6cqw 3cqw; }
.mock-intro b { color: var(--m-dark); font: 500 2.3cqw/1.15 var(--serif); }
.mock-intro span { display: grid; gap: 0.9cqw; align-content: start; }
.mock-intro i { height: 0.75cqw; border-radius: 1cqw; background: #e8e3ee; }
.mock-intro i:last-child { width: 65%; }

.mock--classic .mock-brand { color: var(--m-primary); font-family: var(--serif); font-weight: 500; }
.mock--classic .mock-nav { font-family: var(--serif); }

.mock-utility { display: flex; gap: 3cqw; padding: 0.9cqw 3.2cqw; background: var(--m-dark); color: rgb(255 255 255 / 0.75); font-size: 1.05cqw; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.mock-push { margin-left: auto; color: #fff; }
.mock--utility .mock-head { background: var(--m-dark); }
.mock--utility .mock-brand { color: #fff; }
.mock--utility .mock-nav { color: #fff; font-weight: 600; text-transform: uppercase; font-size: 1.05cqw; }
.mock--utility .mock-overlay { max-width: none; margin-inline: auto; text-align: center; justify-items: center; }
.mock--utility .mock-overlay .mock-btn { align-self: center; background: var(--m-accent); color: var(--m-dark); }
.mock--utility .mock-photo--full::before { background: rgb(0 0 0 / 0.4); }

.mock--photo .mock-head { position: absolute; inset: 0 0 auto; z-index: 2; }
.mock--photo .mock-brand, .mock--photo .mock-nav { color: #fff; }
.mock--photo .mock-photo--full::before { background: linear-gradient(rgb(0 0 0 / 0.5), transparent 40%); }
.mock-card { position: relative; display: grid; gap: 1.2cqw; max-width: 44%; margin: 9cqw 0 0 5cqw; padding: 3.2cqw; background: #fff; }
.mock-card small { color: var(--m-primary); font-size: 1.05cqw; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.mock-card b { color: var(--m-dark); font: 500 3.2cqw/1.15 var(--serif); }
.mock-card .mock-btn { background: var(--m-primary); color: #fff; }

/* What parents look for */
.parents { padding-block: 7rem; }
.parents-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.parents-list { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.parents-list li {
    display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.3rem; border-radius: var(--radius);
    background: #fff; box-shadow: 0 0 0 1px var(--line);
    transition: transform 0.15s, box-shadow 0.15s;
}
.parents-list li:hover { transform: translateX(4px); box-shadow: 0 12px 30px rgb(26 15 30 / 0.08), 0 0 0 1px var(--lavender); }
.parents-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px; background: var(--mist); color: var(--purple-dark); font-size: 0.85rem; font-weight: 600; }
.parents-list b { display: block; font-size: 1.08rem; }
.parents-list div span { color: var(--muted); font-size: 0.93rem; }

/* Design gallery */
.designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.design { margin: 0; }
.design .browser { transition: transform 0.2s, box-shadow 0.2s; }
.design:hover .browser { transform: translateY(-6px); box-shadow: 0 30px 60px rgb(26 15 30 / 0.2), 0 0 0 1px rgb(26 15 30 / 0.06); }
.design figcaption { display: grid; gap: 0.2rem; margin-top: 1.1rem; color: var(--muted); font-size: 0.9rem; }
.design figcaption b { color: var(--ink); font-size: 1.02rem; }

/* Features as a bento grid */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tile { display: flex; flex-direction: column; gap: 0.7rem; padding: 2rem; border-radius: var(--radius); background: var(--mist); }
.tile h3 { font: 500 1.45rem/1.2 var(--serif); }
.tile p { margin: 0; color: var(--muted); }
.tile--wide { grid-column: span 2; }
.tile--plum { background: var(--plum); color: #f4f0f8; }
.tile--plum p { color: rgb(244 240 248 / 0.72); }
.tile--lavender { background: linear-gradient(135deg, #e6ddf3, #f6f3fa); }
.tile--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.tile--split > div:first-child { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; }
.editor { display: grid; gap: 0.6rem; padding: 1.25rem; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 20px 40px rgb(0 0 0 / 0.3); transform: rotate(1.5deg); }
.tile--plum .editor-title { margin: 0 0 0.25rem; color: var(--ink); font: 500 1.15rem var(--serif); }
.editor label { display: grid; gap: 0.2rem; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.editor label span { padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--mist); color: var(--ink); font-size: 0.85rem; box-shadow: inset 0 0 0 1px var(--line); }
.editor-publish { justify-self: end; margin-top: 0.3rem; padding: 0.45rem 1rem; border-radius: 999px; background: var(--purple); color: #fff; font-size: 0.82rem; font-weight: 600; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: auto; }
.stat-row span { display: grid; padding: 0.7rem 0.85rem; border-radius: 12px; background: #fff; color: var(--muted); font-size: 0.82rem; }
.stat-row b { color: var(--ink); font-size: 0.92rem; }
.verified { align-self: flex-start; margin-top: auto; padding: 0.4rem 0.9rem; border-radius: 999px; background: #fff; color: #2e7d4f; font-size: 0.85rem; font-weight: 600; box-shadow: 0 0 0 1px #cfe8d8; }
.roles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1rem; }
.roles span { padding: 0.35rem 0.85rem; border-radius: 999px; background: rgb(201 189 224 / 0.14); color: var(--lavender); font-size: 0.82rem; }
.files { display: grid; gap: 0.45rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; font-size: 0.88rem; }
.files li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff; }
.files i { padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--purple); color: #fff; font: 600 0.65rem/1.4 var(--sans); }
.search-pill { margin-top: auto; padding: 0.7rem 1rem; border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.88rem; box-shadow: 0 0 0 1px var(--line); }
.search-pill span::before { content: "⌕"; margin-right: 0.5rem; color: var(--purple); }

/* How it works */
.how { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
.how .section-head { position: sticky; top: 7rem; margin: 0; }
.how .button { margin-top: 2rem; }
.steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
    display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; padding: 1.5rem 1.6rem;
    border-radius: var(--radius); background: var(--plum-raised); counter-increment: step;
}
.steps li::before {
    content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    border-radius: 50%; background: var(--purple); color: #fff; font-weight: 600;
}
.steps b { font-size: 1.08rem; }
.steps span { color: rgb(244 240 248 / 0.65); font-size: 0.95rem; }

/* Pricing */
.pricing { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.price-card { padding: 2.5rem; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px rgb(26 15 30 / 0.12), 0 0 0 1px var(--line); }
.price { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1.5rem; }
.price b { font: 500 3.4rem/1 var(--serif); letter-spacing: -0.03em; white-space: nowrap; }
.price span { color: var(--muted); }
.price-card ul { display: grid; gap: 0.75rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.price-card li { display: flex; gap: 0.7rem; }
.price-card li::before { content: "✓"; color: var(--purple); font-weight: 700; }

/* Questions */
.faq { display: grid; grid-template-columns: 1fr 1.8fr; gap: 4rem; }
.faq-list details { padding-block: 1.25rem; border-bottom: 1px solid #ddd5e7; }
.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--purple); font-size: 1.4rem; line-height: 1; transition: transform 0.2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { margin: 0.7rem 0 0; color: var(--muted); }

/* Closing call to action */
.closing { position: relative; overflow: hidden; padding-block: 7rem; background: var(--plum); color: #f4f0f8; text-align: center; }
.closing-tree { position: absolute; left: 50%; top: -4rem; width: 40rem; transform: translateX(-50%); opacity: 0.18; pointer-events: none; }
.closing-inner { position: relative; display: grid; justify-items: center; gap: 2rem; }
.closing h2 { max-width: 40rem; font: 500 clamp(2.1rem, 4.4vw, 3.4rem)/1.08 var(--serif); letter-spacing: -0.02em; }
.closing .namebox { width: 100%; }

.footer { padding-block: 2rem; background: #120a15; color: rgb(244 240 248 / 0.6); font-size: 0.9rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.footer .logo { color: #f4f0f8; }
.footer p { margin: 0; }
.footer a { color: inherit; }
.footer small { margin-left: auto; }

@media (max-width: 1000px) {
    /* The section links go; Log in stays, so phones can reach it from the header. */
    .topnav { display: none; }
    .topbar-inner { gap: 1.25rem; }
    .signin { margin-left: auto; white-space: nowrap; }
    .topbar .logo { flex: none; }
    .hero { padding-block: 7.5rem 4.5rem; }
    .hero-inner, .parents-inner, .how, .pricing, .faq { grid-template-columns: 1fr; gap: 3rem; }
    .hero-preview .browser { transform: none; }
    .how .section-head { position: static; }
    .designs { grid-template-columns: 1fr 1fr; }
    .bento { grid-template-columns: 1fr 1fr; }
    .tile--split { grid-template-columns: 1fr; }
    .section, .parents { padding-block: 5rem; }
}
@media (max-width: 600px) {
    .namebox { flex-direction: column; border-radius: 22px; padding: 0.5rem; }
    .namebox input { padding: 0.75rem 0.8rem; }
    .designs, .bento { grid-template-columns: 1fr; }
    .tile--wide { grid-column: auto; }
    .tile--split { grid-template-columns: 1fr; }
    .swatches { flex-wrap: wrap; }
    /* Behind the preview, not the headline. */
    .hero-tree { top: auto; bottom: 6rem; right: -8rem; width: 24rem; }
    .price { flex-wrap: wrap; }
    .footer small { margin-left: 0; }
}

/* Error pages on the platform address */
.error-page { display: grid; min-height: 100vh; place-items: center; background: var(--plum); color: #f4f0f8; text-align: center; }
.error-page main { display: grid; justify-items: center; gap: 1rem; }
.error-page h1 { margin-top: 2rem; font: 500 2.4rem var(--serif); }
.error-page p { margin: 0 0 1rem; color: rgb(244 240 248 / 0.75); }

/* ---------- The sign-up preview as a small site (mock_site.html with full=True) ---------- */
.browser-screen { max-height: calc(100vh - 12rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mock--full { aspect-ratio: auto; overflow: visible; }
.mock--full .mock-screen { display: flex; flex-direction: column; height: 52cqw; }
.mock--full button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mock--full .mock-brand { text-align: left; }
.mock--full .mock-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.6cqw; }
.mock--full .mock-nav button:hover, .mock--full .mock-nav button.is-current { color: var(--m-primary); box-shadow: inset 0 -0.25cqw currentColor; }
.mock--utility.mock--full .mock-nav button:hover, .mock--utility.mock--full .mock-nav button.is-current,
.mock--photo.mock--full .mock-nav button:hover, .mock--photo.mock--full .mock-nav button.is-current { color: #fff; }
/* Over the photo: on inner pages there's no photo, so the header gets the dark colour. */
.mock--photo.mock--full:has([data-mock-view="home"][hidden]) .mock-head { position: static; background: var(--m-dark); }
.mock--full .mock-btn { cursor: pointer; }
.mock--full .mock-btn--solid { background: var(--m-primary); color: #fff; justify-self: start; }

.mock-section { padding: 3.4cqw 3.2cqw; }
.mock-section--tint { background: color-mix(in srgb, var(--m-primary) 8%, white); }
.mock-h { display: block; margin-bottom: 1.8cqw; color: var(--m-dark); font: 600 2.2cqw/1.1 var(--sans); }
.mock--classic .mock-h, .mock--classic .mock-page-head b { font-family: var(--serif); font-weight: 500; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; }
.mock-cards span { display: grid; align-content: start; gap: 0.6cqw; }
.mock-cards .mock-photo { display: block; aspect-ratio: 16 / 10; border-radius: 0.6cqw; }
.mock-cards small { color: var(--m-accent); font-size: 0.9cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.mock-cards b { color: var(--m-dark); font-size: 1.3cqw; line-height: 1.25; }
.mock-cards em, .mock-split em, .mock-lines em { display: block; height: 0.8cqw; border-radius: 1cqw; background: #e9e6ef; }
.mock-cards em:last-child, .mock-split em:last-child, .mock-lines em:last-child { width: 65%; }
.mock-cards--icons span { padding: 2cqw; background: #fff; border-radius: 0.8cqw; }
.mock-icon { display: block; width: 3.4cqw; height: 3.4cqw; border-radius: 0.8cqw; background: color-mix(in srgb, var(--m-primary) 18%, white); }
.mock-band { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 3.4cqw 3.2cqw; background: var(--m-primary); color: #fff; }
.mock-band b { font: 600 2.4cqw/1.1 var(--sans); }
.mock-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; padding: 3cqw 3.2cqw; background: var(--m-dark); color: rgb(255 255 255 / 0.75); font-size: 1.1cqw; }
.mock-foot b { color: #fff; font-size: 1.4cqw; }
.mock-foot span { display: flex; flex-wrap: wrap; gap: 0.5cqw 2cqw; }
.mock-foot button:hover { color: #fff; text-decoration: underline; }

.mock-page-head { display: grid; gap: 0.6cqw; padding: 4.5cqw 3.2cqw 3.5cqw; background: color-mix(in srgb, var(--m-primary) 10%, white); }
.mock-page-head small { color: var(--m-accent); font-size: 0.95cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.mock-page-head b { color: var(--m-dark); font: 600 3.6cqw/1.05 var(--sans); }
.mock-page-head span { color: #6b6474; font-size: 1.35cqw; }
.mock-page-body { display: grid; gap: 2.4cqw; min-height: 34cqw; padding: 3cqw 3.2cqw 4cqw; }
.mock-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: center; }
.mock-split .mock-photo { display: block; aspect-ratio: 4 / 3; border-radius: 0.8cqw; }
.mock-split span { display: grid; gap: 1cqw; }
.mock-split b { color: var(--m-dark); font-size: 2cqw; }
.mock-lines { display: grid; gap: 1cqw; max-width: 75%; }
.mock-chips { display: flex; gap: 0.8cqw; }
.mock-chips i { padding: 0.5cqw 1.3cqw; border-radius: 3cqw; background: color-mix(in srgb, var(--m-primary) 10%, white); font-size: 1cqw; font-style: normal; color: var(--m-dark); }
.mock-chips i.is-on { background: var(--m-primary); color: #fff; }
.mock-files { display: grid; }
.mock-files span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5cqw; padding: 1.4cqw 0; border-bottom: 0.15cqw solid #ece8f1; }
.mock-files i { padding: 0.3cqw 0.7cqw; background: var(--m-primary); color: #fff; font: 600 0.9cqw/1.3 var(--sans); font-style: normal; }
.mock-files b { color: var(--m-dark); font-size: 1.3cqw; }
.mock-files small { color: #8a8394; font-size: 1cqw; }
.mock-contact { display: grid; grid-template-columns: 3fr 2fr; gap: 3cqw; align-items: start; }
.mock-form { display: grid; gap: 0.7cqw; }
.mock-form small { color: var(--m-dark); font-size: 1.05cqw; font-weight: 600; }
.mock-form i { display: block; height: 3.2cqw; border: 0.15cqw solid #d9d3e2; border-radius: 0.5cqw; }
.mock-form i.tall { height: 8cqw; }
.mock-form .mock-btn { margin-top: 1cqw; }
.mock-office { display: grid; gap: 0.4cqw; padding: 2.2cqw; border-radius: 0.8cqw; background: color-mix(in srgb, var(--m-primary) 10%, white); font-size: 1.15cqw; }
.mock-office b { color: var(--m-dark); font-size: 1.5cqw; margin-bottom: 0.6cqw; }
.mock-office small { color: #8a8394; font-size: 0.9cqw; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.8cqw; }
.mock-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; }
.mock-gallery .mock-photo { display: block; aspect-ratio: 4 / 3; border-radius: 0.6cqw; }
.mock-gallery .mock-photo:nth-child(2n) { filter: hue-rotate(40deg) saturate(0.8); }
.mock-gallery .mock-photo:nth-child(3n) { filter: hue-rotate(-30deg) brightness(1.05); }
.mock-cards--fees span { padding: 2.2cqw; border: 0.15cqw solid #e3dcea; border-radius: 0.8cqw; }
.mock-cards--fees span.is-on { background: var(--m-primary); border-color: var(--m-primary); }
.mock-cards--fees span.is-on :is(small, b) { color: #fff; }
.mock-cards--fees b { font-size: 2.2cqw; color: var(--m-primary); }
/* The menu stays at the top while the preview scrolls, so it's always there to click.
   (Over the photo keeps its see-through header on the homepage's first screen.) */
.mock--full:not(.mock--photo) .mock-head, .mock--photo.mock--full:has([data-mock-view="home"][hidden]) .mock-head {
    position: sticky; top: 0; z-index: 3;
}
.mock--full:is(.mock--bold, .mock--classic, .mock--scratch) .mock-head { background: #fff; box-shadow: 0 0.15cqw 0 #ece8f1; }

/* Small phones: logo, Log in and Get started on one line. */
@media (max-width: 420px) {
    .topbar-inner { gap: 0.9rem; }
    .topbar .logo img { width: 44px; }
    .topbar .button--small { padding-inline: 0.9rem; }
}
@media (max-width: 359px) {
    .topbar .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}