/* winwrx.com - the creator-facing site.

   The app's own look: near-black navy, white type, the mark's teal for the one thing
   worth noticing. Poppins for headings because it is the wordmark's shape; Inter for
   everything else. Phone-first; the two-column bands go single under 860px. */

:root {
    --ground: #0b1220;
    --ground-2: #0f1a2e;
    --surface: #141f33;
    --line: rgba(255, 255, 255, 0.10);
    --ink: #ffffff;
    --muted: #a7b2c4;
    --dim: #6b7787;
    --teal: #1ec1c9;
    --teal-ink: #06262a;
    --coral: #ff6b6b;
    --gold: #c48600;
    --radius: 14px;
    --font-display: "Poppins", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -0.02em; }
h1 em { font-style: normal; color: var(--teal); }
h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.kicker {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}
.lede { font-size: 1.2rem; color: var(--muted); max-width: 48ch; }
.lede + .lede { margin-top: 14px; }
.lede strong { color: var(--ink); font-weight: 600; }
.lede.is-full { max-width: none; }
.fine { font-size: 0.85rem; color: var(--dim); }
.fine a { color: var(--dim); text-decoration: underline; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .wrap { padding: 0 20px; } }
/* The picture's column a little wider than the words', the hero's own proportion. */
.wrap.two { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 88px; align-items: center; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.three.is-two { grid-template-columns: repeat(2, 1fr); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) {
    .wrap.two, .three, .three.is-two, .grid { grid-template-columns: 1fr; }
    .wrap.two { gap: 40px; }
    /* Stacked, the words come first and the picture after - whichever side the picture
       was on at full width. */
    .wrap.two > figure { order: 1; }
}
@media (min-width: 861px) and (max-width: 1000px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: var(--teal-ink);
    font: inherit;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-ghost { background: none; color: var(--ink); border: 1px solid var(--line); }
/* A brightness filter does nothing to a clear button, so the ghost gets a faint fill and a
   brighter edge instead. */
.btn-ghost { transition: background-color 0.15s, border-color 0.15s; }
.btn-ghost:hover { filter: none; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); }
.btn-sm { padding: 10px 16px; font-size: 0.9rem; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 14px; }

/* ---------- top ----------
   Brand left, the two menus and the plain links beside it, sign in and the offer on the
   right. "Why winwrx" and "Products" open a panel on hover or click; on a phone the
   whole menu drops down and the panels open in place. */
.top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 32px;
    /* The bar runs edge to edge, but its logo and buttons line up with .wrap's gutters:
       40px in, plus whatever centers the 1320px column on a wider screen (2026-10-19). */
    padding: 14px max(40px, calc((100% - 1320px) / 2 + 40px));
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.brand { flex: none; }
.brand img { width: 140px; height: auto; }
.menu { display: flex; align-items: center; gap: 28px; flex: 1; }
.menu > a, .drop-btn { color: var(--muted); font: inherit; font-weight: 500; font-size: 0.95rem; }
.menu > a:hover, .drop-btn:hover { color: var(--ink); text-decoration: none; }
.menu-end { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.menu-end .signin { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.menu-end .signin:hover { color: var(--ink); text-decoration: none; }
/* Eight items across now (Streams, Store, Games, Giveaways back in, 2026-10-12): never wrap a
   label onto two lines, and close the gaps up on the narrower desktops. */
.menu > a, .drop-btn, .menu-end .signin { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1279px) { .menu { gap: 18px; } .menu-end { gap: 14px; } }
@media (min-width: 1001px) and (max-width: 1099px) { .menu { gap: 13px; } .menu > a, .drop-btn, .menu-end .signin { font-size: 0.9rem; } .brand img { width: 124px; } }
/* The menu in three groups - the overview, the features, then pricing and help - with a
   wider step between them. */
@media (min-width: 1001px) { .menu > a[href="streams.html"], .menu > a[href="pricing.html"] { margin-left: 24px; } }
@media (min-width: 1001px) and (max-width: 1279px) { .menu > a[href="streams.html"], .menu > a[href="pricing.html"] { margin-left: 12px; } }
.btn-light { background: #fff; color: var(--ground); border-radius: 999px; }
.menu .btn-light { color: var(--ground); }
/* White can't get brighter either: a soft tint on hover. */
.btn-light { transition: background-color 0.15s; }
.btn-light:hover { filter: none; background: #dde6f0; }

.drop { position: relative; }
.drop-btn { background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.drop-btn::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 160ms;
}
.drop-panel {
    position: absolute; top: calc(100% + 14px); left: -24px;
    display: none;
    padding: 18px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* The gap between the button and the panel still counts as hovering. */
.drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.drop-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.drop-panel a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.drop-panel b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.drop-panel span { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
/* The admin's icons (Font Awesome 5, as the admin loads it), beside the title and the line under it. */
.drop-panel a:has(> i) { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
.drop-panel a > i { grid-row: 1 / span 2; justify-self: center; margin-top: 3px; color: var(--teal); font-size: 1rem; }
/* Why winwrx: the whole panel is one link to the top of the page, so every row lights
   together and none of them drops you halfway down under the header. */
.drop-why { width: 380px; }
.drop-panel a.why-all { display: block; padding: 4px 0; }
.hl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px 12px; }
.hl-row > i { grid-row: 1 / span 2; justify-self: center; margin-top: 3px; color: var(--teal); font-size: 1rem; }
.drop-products { width: 820px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drop-head { margin: 4px 12px 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
@media (min-width: 1001px) {
    .drop:hover .drop-panel, .drop:focus-within .drop-panel, .drop.is-open .drop-panel { display: block; }
    .drop:hover .drop-products, .drop:focus-within .drop-products, .drop.is-open .drop-products { display: grid; }
    .drop:hover .drop-btn::after, .drop.is-open .drop-btn::after { transform: rotate(225deg); margin-top: 3px; }
}

.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after {
    content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform 160ms;
}
.burger span { top: 21px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
@media (max-width: 1000px) {
    .top { padding: 12px 40px; }
    .burger { display: block; }
    .menu {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding: 8px 20px 20px;
        background: var(--ground);
        border-bottom: 1px solid var(--line);
    }
    .menu.is-open { display: flex; }
    .menu > a, .drop-btn { padding: 14px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-size: 1.05rem; }
    .drop-btn { justify-content: space-between; }
    .drop-panel { position: static; width: auto; box-shadow: none; border: 0; background: none; padding: 6px 0 10px; }
    .drop-panel::before { display: none; }
    .drop.is-open .drop-panel { display: block; }
    .drop.is-open .drop-btn::after { transform: rotate(225deg); margin-top: 3px; }
    .menu-end { margin: 18px 0 0; justify-content: space-between; }
}
/* On a phone the gutter narrows with .wrap's. */
@media (max-width: 700px) { .top { padding-left: 20px; padding-right: 20px; } }

/* ---------- foot ---------- */
.foot { padding: 72px 0 40px; border-top: 1px solid var(--line); background: var(--ground-2); }
/* The brand, then Highlights with room for its longer links, then Solutions and
   Company a little closer together. */
.foot-cols { display: grid; grid-template-columns: 1.6fr 1.3fr 0.75fr 0.75fr; gap: 40px; }
.foot-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.foot-brand img { width: 130px; }
.foot-brand p { margin: 0; color: var(--muted); max-width: 34ch; font-size: 0.95rem; }
.foot nav { display: grid; gap: 10px; align-content: start; }
.foot nav a { color: var(--muted); font-size: 0.93rem; }
.foot nav a:hover { color: var(--ink); text-decoration: none; }
.foot-head { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.foot-fine { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.foot-fine p { margin: 0; }
/* The demo brand's note, lower right of every page. */
.foot-demo { text-align: right; }
@media (max-width: 700px) { .foot-demo { text-align: left; } }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- hero ---------- */
.hero {
    max-width: 1320px;
    margin: 0 auto;
    padding: 88px 40px 72px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding: 36px 20px 48px; }
}

/* The phone: a frame around the live app. The iframe is swapped in by site.js; the
   still holds the shape until then. 9:19.5, a modern phone. */
.hero-phone { display: grid; justify-items: center; gap: 12px; }
.phone {
    width: min(360px, 80vw);
    aspect-ratio: 9 / 19.2;
    padding: 12px;
    border-radius: 44px;
    background: #1b2233;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #2b3548;
    position: relative;
}
.phone-screen {
    width: 100%; height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: #111;
}
.phone-screen img, .phone-screen iframe { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; display: block; }
.phone-cap { margin: 0; font-size: 0.85rem; color: var(--dim); }

/* ---------- bands ---------- */
.band { padding: 104px 0; }
@media (max-width: 860px) { .band { padding: 72px 0; } }
.band-alt { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-cta { background: linear-gradient(180deg, var(--ground-2), var(--ground)); }
.band p { color: var(--muted); }
.band p strong { color: var(--ink); font-weight: 600; }
.band h2 + .three, .band h2 + .grid { margin-top: 24px; }
.band h2 { max-width: 22ch; }
/* A title of three sentences, one under the other, left. */
.band h2.stack { max-width: none; display: grid; }
.band .kicker + h2 { margin-top: 0; }

.card {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
}
.card h3 { color: var(--ink); }
.card p { font-size: 0.97rem; }

/* the curve */
.curve { margin: 0; }
.curve svg { width: 100%; height: auto; }
.curve .axis { stroke: var(--line); stroke-width: 1.5; }
.curve .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.curve .line-video { stroke: var(--gold); }
.curve .line-app { stroke: var(--teal); }
.curve .lab { font-family: var(--font-body); font-size: 12px; fill: var(--dim); }
.curve .lab-video { fill: var(--gold); font-weight: 600; }
.curve .lab-app { fill: var(--teal); font-weight: 600; }
.curve .lab-big { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
/* One line under the chart - the chart has the color. The viewBox is
   cropped to the plot (the axis at 38, the end at 502), so the chart's left edge is
   the figure's and the text's. Never wraps: the size follows the figure's width
   (container units), between a floor and the size it wants. */
.curve { container-type: inline-size; }
.curve figcaption { margin-top: 14px; padding: 0; font-family: var(--font-display); font-size: clamp(0.7rem, 3.9cqw, 1.2rem); font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap; }

/* On a light card, the page color of the screenshots above it (2026-10-13): the line under it centered and in black, and the axis
   and the small labels darkened so they hold on it. */
.curve { background: #f4f8fb; border-radius: var(--radius); padding: 16px 22px 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.curve .axis { stroke: #0b0f17; }
.curve .lab:not(.lab-big) { fill: #4a5466; }
.curve figcaption { color: #0b0f17; text-align: center; margin-top: 6px; }

/* A line break only where the line would not fit: wide screens read it as one line. */
@media (min-width: 1280px) { br.br-narrow { display: none; } h2:has(> br.br-narrow) { max-width: none; } }

/* the loop: the words and the ring side by side, the six cards in three columns under */
.loop-wrap {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 72px;
    align-items: center;
    margin-bottom: 36px;
}
.loop-wrap p { max-width: none; }
@media (max-width: 860px) {
    .loop-wrap { grid-template-columns: 1fr; gap: 28px; }
}
.loop {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    counter-reset: step;
}

/* the ecosystem ring: eight stops on a dashed circle, winwrx in the
   middle. The ring turns slowly - the point is that it never stops. */
.eco { margin: 0; max-width: 400px; justify-self: center; width: 100%; }
.eco svg { width: 100%; height: auto; overflow: visible; }
.eco-ring {
    fill: none;
    stroke: var(--teal);
    stroke-opacity: 0.55;
    stroke-width: 2;
    /* 55 dashes around the ring exactly, so the loop has no seam - and four of them in
       each gap between the stops, which are placed to leave equal gaps (index.html). */
    stroke-dasharray: 7 11.278;
    transform-origin: 220px 220px;
    animation: eco-turn 60s linear infinite;
}
.eco-node rect { fill: var(--surface); stroke: var(--teal); stroke-width: 1.5; }
.eco-node text { fill: var(--ink); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; }
.eco-mid { fill: var(--ink); font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.eco-sub { fill: var(--teal); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes eco-turn { to { transform: rotate(360deg); } }
/* A small flame under "every day": the fire the videos feed. It flickers from its base. */
.eco-flame path { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite alternate; }
.eco-flame path + path { animation-duration: 1.1s; animation-delay: -0.4s; }
@keyframes flicker {
    0% { transform: scale(1, 1) skewX(0deg); }
    40% { transform: scale(0.96, 1.06) skewX(-3deg); }
    70% { transform: scale(1.03, 0.95) skewX(2deg); }
    100% { transform: scale(0.98, 1.04) skewX(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .eco-ring, .eco-flame path { animation: none; } }
.loop li { position: relative; padding: 22px 22px 22px 64px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.loop li p { font-size: 0.97rem; }
/* The home page's cards: the same cards, with no number to make room for. */
.loop.is-plain li { padding-left: 22px; }
/* The admin's icons (Font Awesome), in teal ahead of each card's title. */
.loop h3 > i,
.grid .card h3 > i,
.includes h3 > i { color: var(--teal); margin-right: 10px; width: 1.2em; text-align: center; }
.n {
    position: absolute;
    left: 20px; top: 22px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--teal);
    color: var(--teal-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
}
.steps .card { position: relative; padding-left: 64px; }
.steps .n { left: 20px; top: 22px; }
@media (max-width: 860px) { .loop { grid-template-columns: 1fr; } }
.loop-phones {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 24px;
}
.loop-phones img {
    width: min(260px, 42vw);
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* under the hood */
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--muted); }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before {
    content: "";
    position: absolute; left: 0; top: 7px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(#000 0 0);
            mask-composite: exclude;
}
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.stat b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--teal); line-height: 1; }
.stat span { color: var(--muted); font-size: 0.92rem; }

/* faq */
details { border-top: 1px solid var(--line); padding: 14px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--teal); font-weight: 700; }
details[open] summary::after { content: "–"; }
details p { margin-top: 10px; }

/* invite */
.form-note { grid-column: 1 / -1; margin: 0; }

.invite { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.invite label { display: grid; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.invite label.wide { grid-column: 1 / -1; }
.invite input, .invite select, .invite textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}
.invite input:focus, .invite select:focus, .invite textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
.invite .btn { grid-column: 1 / -1; justify-self: start; }
/* The field only a bot fills in - see ApplicationsController. */
.invite .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .invite { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- pricing ---------- */
.price-hero { padding: 72px 0 24px; }
.price-hero h1 { max-width: 20ch; }
.price-hero .lede { max-width: 60ch; }

/* The curve beside the words needs room under it that a text-only hero does not. */
.price-hero:has(.curve) { padding-bottom: 56px; }

/* More of the row than a band's usual 1.15/0.85: a hero line set at 70px needs it,
   and "Turn pay-per-post" is seven pixels too wide for the narrower column - which
   costs a whole third line, not a tidier wrap. The curve reads fine at this width;
   its caption is the thing that would complain, and it has room to spare. */
.price-hero .wrap.two { grid-template-columns: 1.25fr 0.75fr; }

/* Two columns need more room here than the usual 860px: the hero's h1 is twice the
   size of a band's h2, so it takes a third line long before a band would suffer, and
   the curve's caption is one nowrap line that shrinks with its card. Stack both early
   rather than cram them. */
@media (max-width: 1100px) {
    .price-hero .wrap.two { grid-template-columns: 1fr; gap: 40px; }
}

/* A heading that reads as one line: no measure, and no wrapping where there is room
   for it. A phone still wraps it rather than scroll sideways. */
.band h2.one-line { max-width: none; }
.band h2 em { font-style: normal; color: var(--teal); }
@media (min-width: 700px) { .band h2.one-line { white-space: nowrap; } }

/* The four numbers: the figure big, the words under it. The two zeros - what the
   creator never pays - carry the teal. */
.deal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.deal-card { padding: 24px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.deal-card > b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--ink); }
.deal-card.is-yours { border-color: var(--teal); }
.deal-card.is-yours > b { color: var(--teal); }
.deal-card h3 { margin: 6px 0 2px; }
.deal-card p { font-size: 0.95rem; }
.deal-fine { margin-top: 16px; }
@media (max-width: 1000px) { .deal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .deal { grid-template-columns: 1fr; } }

/* Who it's for: the words beside the three steps. */
.who-steps { display: grid; gap: 14px; }
.ticks + p { margin-top: 18px; }
.who-steps .card { position: relative; padding-left: 64px; }

/* Add-ons: the price first, like the deal. */
.addon > b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 12px; color: var(--ink); }
.addon > b small { font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; color: var(--ink); }

/* ---------- the pages ---------- */

/* The page you are on, in the menu; and the quiet way in for creators already here. */
.menu a[aria-current="page"] { color: var(--ink); }

/* A feature page opens like the home page: the words, and the app beside them. */
.feature-hero { padding-bottom: 56px; }
.feature-hero .lede { max-width: 50ch; }

/* How it feeds the rest: a card per other feature, the whole card the link. */
.feeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.feed-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.feed-card:hover { text-decoration: none; border-color: var(--teal); }
.feed-card .kicker { margin: 0; }
.feed-card p { margin: 0; color: var(--muted); }
.feed-card .go { color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-top: 4px; }
@media (max-width: 860px) { .feeds { grid-template-columns: 1fr; } }

/* The closing call to action: the offer on the left, the buttons on the right. */
.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.next .cta-row { margin: 0; }
.next h2 { margin-bottom: 8px; }

/* The home page's loop cards lead to their pages. */
.h-link { color: var(--ink); }
.h-link:hover { color: var(--teal); text-decoration: none; }
.h-link::after { content: " →"; color: var(--teal); }

/* Four steps: four across where there is room, two by two where there is not. */
.loop.is-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .loop.is-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .loop.is-four { grid-template-columns: 1fr; } }

/* store: everything it does - a card per area, a tick per thing it does */
.lede-wide { font-size: 1.1rem; max-width: 64ch; margin: 12px 0 0; }
.band .lede-wide + .grid { margin-top: 28px; }
.feature-grid .card h3 { margin: 0; }
.feature-grid .ticks { margin-top: 14px; gap: 8px; font-size: 0.95rem; }

/* ---------- the bigger, picture-led pieces ---------- */

/* A screenshot of a real partner's website, framed - no browser chrome, no window dots. */
.frame {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #1b2233;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shot-phone { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* The strip: websites and phones sliding past, edge to edge. Twice the set, moved by
   half, so it loops without a seam. */
.strip { overflow: hidden; padding: 8px 0 32px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* The demo-brand note under a scrolling band of screens, close under it. */
.strip-note { margin: -8px 0 0; }
.strip-track { display: flex; align-items: center; gap: 24px; width: max-content; animation: strip 80s linear infinite; }
.strip-track .frame { flex: none; width: 600px; }
/* A little room above each website's header, in the screenshots' own page color. */
.strip-track .frame { padding-top: 14px; background: #f4f7fb; }
/* With script, site.js moves the strip instead, so it can be dragged too. */
.strip.is-draggable { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.strip.is-draggable .strip-track { animation: none; will-change: transform; }
.strip.is-dragging { cursor: grabbing; }
.strip-track .shot-phone { flex: none; width: auto; height: 400px; }
/* A phone's bezel, scaled to the strip: a near-black frame and its light edge, darker
   than the hero's so it holds against the navy band and the white screens read as
   phones, not cards. */
.strip-track .shot-phone {
    box-sizing: border-box;
    padding: 8px;
    border: 0;
    border-radius: 20px;
    background: #05070c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #3a4660;
}
@keyframes strip { to { transform: translateX(calc(-50% - 12px)); } }

/* One screen on both surfaces: the website in its frame, the app's phone over its lower
   right corner (giveaways.html, under How it works). The phone wears the strip's bezel. */
.devices { position: relative; margin: 56px 0 40px; padding-right: 19%; }
.devices .frame { padding-top: 14px; background: #f4f7fb; }
.devices .shot-phone {
    position: absolute; right: 0; bottom: -40px; width: 24%;
    box-sizing: border-box; padding: 8px; border: 0; border-radius: 22px;
    background: #05070c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #3a4660;
}
@media (max-width: 700px) {
    .devices { padding-right: 24%; margin-bottom: 32px; }
    .devices .shot-phone { width: 32%; padding: 5px; border-radius: 14px; bottom: -28px; }
}
@media (max-width: 700px) {
    .strip-track .frame { width: 400px; }
    .strip-track .shot-phone { height: 270px; }
}
@media (prefers-reduced-motion: reduce) { .strip:not(.is-draggable) { overflow-x: auto; } .strip-track { animation: none; } }

/* The stream library's logos (streams.html): rows of the app's round logos sliding past,
   every other row the other way. The same strip as the home page's, smaller and slower. */
.logo-strips { display: grid; gap: 14px; }
#library h2 { max-width: none; }
.logo-strip { padding: 0; }
.logo-strip .strip-track { gap: 14px; animation: logo-strip 240s linear infinite; }
.logo-strip[data-reverse] .strip-track { animation-direction: reverse; }
.logo-strip img { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
@keyframes logo-strip { to { transform: translateX(calc(-50% - 7px)); } }
@media (max-width: 700px) { .logo-strip img { width: 44px; height: 44px; } .logo-strips, .logo-strip .strip-track { gap: 10px; } }

.center { text-align: center; }
.center h2, .center .lede, .center .lede-wide { margin-left: auto; margin-right: auto; }
.band h2.wide { max-width: 24ch; }
/* A long line that reads as two on a wide screen: smaller, and as wide as it needs. */
.band h2.two-line { max-width: none; font-size: clamp(1.6rem, 3.2vw, 2.8rem); }
.section-head { margin-bottom: 48px; }
.section-head .lede-wide { color: var(--muted); }

/* Bento: three cards, a picture on top, a few lines under it - the first one wider. */
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; }
.bento-card {
    display: grid; grid-template-rows: auto 1fr;
    border-radius: 22px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
a.bento-card:hover { text-decoration: none; border-color: var(--teal); }
.bento-pic {
    height: 340px; overflow: hidden;
    display: grid; place-items: end center; padding: 32px 32px 0;
    background: radial-gradient(120% 90% at 50% 100%, rgba(30, 193, 201, 0.22), transparent 60%), var(--ground-2);
}
/* The picture runs off the bottom of its box, so every card's picture starts at the
   same height whatever its width. */
.bento-pic { align-items: start; }
.bento-pic .frame { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr; border-radius: 12px 12px 0 0; border-bottom: 0; }
.bento-pic .frame img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top left; }
.bento-pic .shot-phone { width: 200px; border-radius: 16px 16px 0 0; border-bottom: 0; align-self: start; }
.bento-pic .pair { display: flex; gap: 14px; align-items: flex-start; align-self: start; }
.bento-pic .pair .shot-phone { width: 150px; }
.bento-body { padding: 24px 26px 28px; }
.bento-body h3 { color: var(--ink); font-size: 1.25rem; }
.bento-body p { margin: 0; font-size: 0.98rem; }
.go { display: inline-block; margin-top: 12px; color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
@media (max-width: 1000px) { .bento { grid-template-columns: 1fr; } }

/* Hosting icons: a small list of what every site comes with. */
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 8px; }
.includes > div { border-top: 1px solid var(--line); padding-top: 22px; }
.includes h3 { color: var(--ink); }
.includes p { font-size: 0.97rem; }
@media (max-width: 860px) { .includes { grid-template-columns: 1fr; gap: 24px; } }

/* A feature row: the words on one side, a big picture on the other, alternating. */
.rows { display: grid; gap: 128px; }
.row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
.row.flip { grid-template-columns: 1.15fr 0.85fr; }
.row.flip > :first-child { order: 2; }
.row h2 { max-width: 18ch; }
.row p { max-width: 50ch; }
.row .ticks { margin-top: 22px; }
.row-pic { position: relative; }
.row-pic .shot-phone { position: absolute; right: -16px; bottom: -48px; width: 28%; max-width: 200px; }
.row.flip .row-pic .shot-phone { right: auto; left: -16px; }
/* A row whose picture needs the room - a screenshot with its own margin, and text short
   enough to sit in a narrower column beside it. */
.row.is-wide-pic { grid-template-columns: 0.85fr 1.35fr; gap: 56px; }
.row.flip.is-wide-pic { grid-template-columns: 1.35fr 0.85fr; }
@media (max-width: 1000px) {
    .rows { gap: 96px; }
    .row, .row.flip, .row.is-wide-pic, .row.flip.is-wide-pic { grid-template-columns: 1fr; gap: 40px; }
    .row.flip > :first-child { order: 0; }
    .row-pic .shot-phone, .row.flip .row-pic .shot-phone { left: auto; right: 8px; bottom: -32px; }
}

/* The offer: one line, one button, a lot of room. */
.offer {
    overflow: hidden;
    padding: 128px 0;
    text-align: center;
    background:
        radial-gradient(60% 80% at 50% 120%, rgba(30, 193, 201, 0.35), transparent 70%),
        linear-gradient(180deg, var(--ground), var(--ground-2));
    border-top: 1px solid var(--line);
}
.offer h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto 18px; }
.offer h2 em { font-style: normal; color: var(--teal); }
/* Two lines, the first to the left and the second to the right, the pair centered. */
.offer h2.staggered { display: grid; width: fit-content; max-width: 100%; }
.offer h2.staggered span { justify-self: start; margin-right: 1.4em; }
.offer h2.staggered em { justify-self: end; margin-left: 1.4em; }
.offer p { color: var(--muted); font-size: 1.2rem; max-width: 66ch; margin: 0 auto; }
/* Small enough on a phone that the pricing keeps to one line, even at 360 wide. */
@media (max-width: 500px) { .offer p { font-size: clamp(0.8rem, 3.9vw, 1rem); } }
.offer .cta-row { justify-content: center; margin-top: 32px; }
.offer .fine { margin-top: 18px; font-size: 0.9rem; color: var(--dim); }
.offer .kicker { font-size: 0.8rem; color: var(--teal); margin-bottom: 14px; }
.btn-lg { padding: 18px 34px; font-size: 1.1rem; }

/* Numbered steps: big quiet numbers over short lines. */
.big-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; counter-reset: bs; margin-top: 40px; }
.big-steps > div { border-top: 1px solid var(--line); padding-top: 22px; }
.big-steps > div::before { counter-increment: bs; content: counter(bs, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--teal); line-height: 1; margin-bottom: 14px; }
.big-steps h3 { color: var(--ink); }
.big-steps p { font-size: 0.97rem; }

/* The themes: a real home page in each, then its name and what makes it different.
   Three across, then two - each wide enough to see the layout, not just the colors. */
.themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 28px; }
.theme-card { grid-column: span 2; display: grid; gap: 8px; align-content: start; }
.theme-card .frame { margin-bottom: 10px; }
.theme-card .kicker { margin: 0; }
.theme-card h3 { margin: 0; color: var(--ink); font-size: 1.3rem; }
.theme-card p { margin: 0; font-size: 0.95rem; }
@media (max-width: 1000px) {
    .themes { grid-template-columns: 1fr 1fr; }
    .theme-card { grid-column: auto; }
}
@media (max-width: 640px) { .themes { grid-template-columns: 1fr; } }

/* The home page builder: the five row shapes as little diagrams. */
.shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 28px; }
.shape { display: grid; gap: 10px; }
.shape-box { display: grid; gap: 6px; height: 84px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.shape-box i { border-radius: 6px; background: rgba(30, 193, 201, 0.22); border: 1px solid rgba(30, 193, 201, 0.55); }
.shape span { font-size: 0.85rem; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .shapes { grid-template-columns: repeat(3, 1fr); } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips span { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 0.9rem; }

/* Why winwrx: a big number or word, then the reason. */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 40px; }
.why-card { padding: 28px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; color: var(--muted); }
a.why-card:hover { text-decoration: none; border-color: var(--teal); }
.why-card b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--teal); }
.why-card h3 { margin: 6px 0 0; color: var(--ink); }
.why-card p { margin: 0; font-size: 0.95rem; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }

/* A page that opens with one big centered line, then a big picture. */
.page-hero { padding: 112px 0 40px; text-align: center; }
.page-hero h1 { max-width: 18ch; margin: 0 auto 20px; }
.page-hero .lede { margin: 0 auto; max-width: 58ch; }
.page-hero .cta-row { justify-content: center; }
.page-hero-pic { margin: 56px auto 0; position: relative; max-width: 1120px; }
.page-hero > .strip { margin-top: 48px; }
.strip-caption { margin: 0; font-size: 0.95rem; color: var(--muted); }
.page-hero-pic .shot-phone { position: absolute; right: -28px; bottom: -56px; width: 22%; max-width: 230px; }

/* The Why page opens left instead: its lede argues a case over several lines, and a
   centered paragraph that long is harder to read than a ragged-right one. The stat
   cards under it keep their own centering - a big number reads better centered. */
.page-hero.is-left { text-align: left; }
.page-hero.is-left h1,
.page-hero.is-left .lede { margin-left: 0; margin-right: 0; }
.page-hero.is-left .cta-row { justify-content: flex-start; }
.page-hero.is-left .why-card { text-align: center; }
/* Room under the five highlight cards before the first band starts. */
.page-hero:has(.why-grid) { padding-bottom: 96px; }
@media (max-width: 700px) { .page-hero:has(.why-grid) { padding-bottom: 64px; } }
@media (max-width: 700px) { .page-hero { padding-top: 64px; } .page-hero-pic .shot-phone { right: 4px; bottom: -24px; } }

.phones { display: flex; justify-content: center; align-items: flex-start; gap: 28px; margin-top: 56px; }
.phones img { width: min(250px, 28vw); }
.phones img:nth-child(2) { margin-top: 40px; }
@media (max-width: 700px) { .phones { gap: 12px; } .phones img:nth-child(2) { margin-top: 20px; } }

/* Why winwrx page: a section per reason, the anchor under the sticky header. */
.anchor { scroll-margin-top: 90px; }
.why-row .ticks { margin-top: 18px; }


/* ---- the legal pages: privacy, terms, delete --------------------------------
   Long text rather than a landing page. One column, set for reading, with the
   headings a policy numbers itself by. */

.prose { max-width: 70ch; margin-top: 28px; }
.prose h2 {
    font-size: 1.15rem;
    margin: 32px 0 10px;
    color: var(--ink);
    /* A section title in a policy, not a band headline: .band h2's 22ch is for the big
       two-line headlines, and wrapped "3. How We Use Your Information" at a third of the column. */
    max-width: none;
}
.prose h3 { font-size: 1rem; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--muted); line-height: 1.75; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; }

/* The one boxed thing on those pages - the two ways to delete an account. */
.prose .note {
    margin: 20px 0;
    padding: 14px 20px;
    border-left: 3px solid var(--teal);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 0 10px 10px 0;
}
.prose .note p:last-child { margin-bottom: 0; }

/* The platforms a stream can sync from (streams.html, under How it works): each one's
   own mark, in its own color where it has one, with its name - twelve cards of one
   size, two rows of six (three across on a phone). House Feeds is the partner's own:
   the store, the games, the giveaways and their own posts. */
.platforms { margin-top: 44px; }
.platforms .kicker { margin-bottom: 14px; }
.platform-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.platform-card {
    height: 128px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}
.platform-card i { font-size: 2.4rem; }
/* House Feeds wears the winwrx mark itself, sized to sit level with the icons. */
.platform-card .platform-mark { width: 58px; height: 58px; margin: -10px 0; object-fit: contain; }
@media (max-width: 860px) {
    .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .platform-card { height: 108px; }
    .platform-card i { font-size: 2rem; }
}

/* An icon ahead of a feed card's label (streams.html, Nothing stands alone). */
.feed-card .kicker > i { color: var(--teal); margin-right: 8px; font-size: 0.95rem; }

/* The referee (2026-10-13): a drawing record - the thing winwrx actually produces - on a
   paper card with a sheet tucked behind it, stamped with an ink seal. Light, like the curve. */
.loop-wrap.is-figure-first { grid-template-columns: 420px minmax(0, 1fr); gap: 56px; }
/* The heading holds one line beside the record on desktop, and wraps rather than
   overflow where the column gets narrow. */
#trust h2.one-line { font-size: clamp(1.8rem, 3.3vw, 3rem); }
@media (max-width: 1100px) { #trust h2.one-line { white-space: normal; } }
@media (max-width: 860px) { .loop-wrap.is-figure-first { grid-template-columns: 1fr; } }
.record { position: relative; margin: 30px 30px 28px 0; max-width: 390px; width: 100%; justify-self: center; }
.record::before {
    content: ""; position: absolute; inset: 10px -12px -12px 12px; border-radius: var(--radius);
    background: #dfe6ee; transform: rotate(2.5deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.record-card {
    position: relative; background: #f4f8fb; color: #0b0f17; border-radius: var(--radius);
    padding: 22px 24px 18px; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px rgba(0, 0, 0, 0.3);
    font-family: var(--font-body);
}
.record-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.record-brand { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7787; }
.record-brand span { color: #c9d0da; }
.record-card .record-title { color: #0b0f17; max-width: none; margin: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.record-card .record-meta { max-width: none; margin: 2px 0 16px; font-size: 0.8rem; color: #6b7787; }
.record-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dfe6ee; border-bottom: 1px solid #dfe6ee; padding: 12px 0; margin-bottom: 12px; }
.record-stats div + div { border-left: 1px solid #dfe6ee; padding-left: 14px; }
.record-stats b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.record-stats span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7787; }
.record-draw { list-style: none; margin: 0; padding: 0; }
.record-draw li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; }
.record-draw li + li { border-top: 1px dashed #dfe6ee; }
.record-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 600; color: #6b7787; border: 1px solid #c9d0da; }
.record-who { font-weight: 600; font-size: 0.92rem; line-height: 1.2; }
.record-who small { display: block; font-weight: 400; font-size: 0.75rem; color: #6b7787; }
.record-tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7787; }
.record-draw .is-winner .record-n { background: var(--gold); border-color: var(--gold); color: #fff; }
.record-draw .is-winner .record-tag { color: var(--gold); }
.record-spec { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #dfe6ee; display: grid; gap: 3px; }
.record-spec div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 0.72rem; line-height: 1.45; }
.record-spec dt { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7787; font-size: 0.64rem; padding-top: 1px; }
.record-spec dd { margin: 0; color: #0b0f17; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.7rem; }
/* The stamp: teal ink, a little crooked, over the card's top corner. */
.record-seal { position: absolute; right: -40px; top: -40px; width: 124px; height: 124px; transform: rotate(-14deg); opacity: 0.92; }
.seal-outer { fill: rgba(244, 248, 251, 0.9); stroke: #0b9aa1; stroke-width: 2.5; }
.seal-inner { fill: none; stroke: #0b9aa1; stroke-width: 1.5; }
.seal-text { fill: #0b9aa1; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.seal-tick { fill: none; stroke: #0b9aa1; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .record { margin: 20px 20px 0 0; } .record-seal { right: -18px; top: -30px; width: 104px; height: 104px; } }

/* A heading phrase that holds one line wherever it fits, and wraps on a phone rather than
   run past the edge. */
@media (min-width: 481px) { .keep-line { white-space: nowrap; } }

/* The store page's admin screenshot: the creator's side, dark as the admin is, framed like
   the site shots but at its own shape. */
.admin-shot { margin: 32px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.admin-shot img { width: 100%; height: auto; }
.band .admin-shot + .grid { margin-top: 32px; }
/* The store's feature cards in four labeled rows: what you sell, where, checkout, after. */
.band .admin-shot + .feature-group { margin-top: 40px; }
.feature-group + .feature-group { margin-top: 44px; }
.feature-group > .kicker { margin-bottom: 14px; }
.section-head + .admin-shot { margin-top: 0; }

/* The demo-brand note just under a website shot, on the side away from the phone that
   hangs off its corner, and narrow enough never to run under it. */
.pic-stack { position: relative; }
.row-pic .pic-note { margin: 14px 0 0; max-width: 62%; }
.row.flip .row-pic .pic-note { margin-left: auto; text-align: right; }
@media (min-width: 1280px) { .row-pic .pic-note { max-width: none; white-space: nowrap; } }
@media (max-width: 860px) { .row-pic .pic-note, .row.flip .row-pic .pic-note { margin-left: 0; text-align: left; max-width: 62%; } }

/* The footer's links carry the main menu's icons (2026-10-20). */
.foot nav a { display: inline-flex; align-items: center; gap: 10px; }
.foot nav a > i { width: 1.1em; text-align: center; color: var(--teal); font-size: 0.9em; }