:root
{
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --wash: #F8F9FA;
    --ink: #0F1115;
    --ink-soft: #5B6472;
    --line: #E7E9EC;
    --line-strong: #D8DCE2;

    /* Brand accent: the highlighter yellow. Text on it is always ink. */
    --swoop: #FFC400;
    --swoop-soft: #FFD84D;

    /* Heading orange, used for section titles on their tint bands */
    --heading: #F0711C;

    --pink-tint: #FBE7F0;
    --pink-deep: #B23169;
    --peri-tint: #ECEBFB;
    --peri-deep: #5B55C2;
    --green-tint: #E6F6EA;
    --green-deep: #2E7D4F;
    --peach-tint: #FCEEDD;
    --peach-deep: #A96A22;

    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

    --radius-card: 16px;
    --radius-panel: 20px;

    --shadow-raise: 0 20px 44px -28px rgba(15, 17, 21, 0.25);
    --shadow-hover: 0 16px 32px -18px rgba(15, 17, 21, 0.22);
    --shadow-window: 0 24px 60px -24px rgba(15, 17, 21, 0.28), 0 4px 14px -6px rgba(15, 17, 21, 0.08);

    /* One shared length for every demo animation so the beats stay in sync */
    --demo-cycle: 7.5s;
}

/* ---------- Base ---------- */

*,
*::before,
*::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    scroll-behavior: smooth;
}

/* Sticky footer: the page column fills the viewport, so short pages end
   with the footer flush against the bottom edge instead of a white strip */
body
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
    background: var(--paper);
}

main
{
    flex: 1 0 auto;
}

h1,
h2,
h3
{
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Section headings are full-width bands: a pale tint with a saturated
   inner stripe on the left, one color per section, same palette as the tags */
h2
{
    display: flex;
    align-items: center;
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    color: var(--heading);
    background: #FFF3CC;
    border-left: 5px solid var(--swoop);
    border-radius: 12px;
    padding: 0.45em 0.9em;
}

h3
{
    font-size: 1.18rem;
}

img
{
    display: block;
    max-width: 100%;
}

a
{
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
    transition: text-decoration-color 0.15s ease;
}

a:hover
{
    text-decoration-color: var(--swoop);
}

::selection
{
    color: var(--ink);
    background: var(--swoop);
}

:focus-visible
{
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* One keycap style everywhere: same fill, border, radius and depth.
   Only the demo scene scales it up, since it is illustration. */
kbd
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 30px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 8px;
    padding: 0.3rem 0.55rem 0.35rem;
    box-shadow: 0 1px 0 rgba(15, 17, 21, 0.08);
}

.mono
{
    font-family: var(--font-mono);
}

.container
{
    width: min(100% - 3rem, 1120px);
    margin-inline: auto;
}

.skip-link
{
    position: absolute;
    top: -5rem;
    left: 1rem;
    z-index: 30;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    box-shadow: var(--shadow-hover);
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus
{
    top: 1rem;
}

/* ---------- Buttons ---------- */

/* Store buttons designed like store badges: logo next to a two-line lockup,
   "Add to" over the platform name, mirroring the brand lockup in the header.
   White cards, hairline border, a whisper of inner light; on hover each
   warms toward its store color. */
.btn
{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    color: var(--ink);
    background: #FFFFFF;
    border: 1px solid #DDE1E6;
    border-radius: 12px;
    padding: 0.68rem 1.35rem;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(15, 17, 21, 0.06);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn-text
{
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.btn-kicker
{
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.btn-platform
{
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #54472D;
}

/* Equal width pairs read as a set */
.hero-actions .btn
{
    min-width: 11rem;
    background: #9FAB8A21;
}

.hero-actions .btn:hover
{
    background: #F5F5DC; /* beige */
}

.btn:hover
{
    border-color: #C9CED6;
}

.btn:active
{
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 1px rgba(15, 17, 21, 0.04);
}

/* Store-colored ring on hover: Chrome blue, Firefox orange */
.btn-chrome:hover
{
    box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 4px rgba(66, 133, 244, 0.08);
}

.btn-firefox:hover
{
    box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 4px rgba(255, 220, 72, 0.21);
}

.btn img
{
    flex-shrink: 0;
}

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

/* Sticky glass bar in three zones: brand lockup on the left, section
   navigation in the middle, the five media badges on the right */
.page-head
{
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.page-head-inner
{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 0.6rem;
}

.brand
{
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

/* The logo sits in a tiny framed tile, like an app icon */
.brand-mark
{
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 2px;
}

.brand-icon
{
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.brand-text
{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name
{
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #5F6CDD;
}

.brand-tag
{
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: var(--ink-soft);
}

.head-nav
{
    display: flex;
    justify-content: center;
    gap: 1.7rem;
}

/* A yellow highlighter line grows in under the link on hover */
.head-nav a
{
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
    background-image: linear-gradient(var(--swoop), var(--swoop));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 3px;
    padding-block: 0.25rem;
    text-decoration: none;
    transition: color 0.15s ease, background-size 0.2s ease;
}

.head-nav a:hover
{
    color: var(--ink);
    background-size: 100% 3px;
}

/* What the extension can grab, as a row of app-style badges */
.head-icons
{
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

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

.hero
{
    padding-block: clamp(1.6rem, 3.5vw, 2.75rem) clamp(1.8rem, 4.5vw, 3rem);
}

.hero-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.hero h1
{
    font-size: clamp(2.45rem, 5.4vw, 3.9rem);
    letter-spacing: -0.03em;
}

/* The one highlighter mark on the page: a rounded marker swipe under
   "you point at", drawn once on load. Static by default, so reduced-motion
   still shows the finished highlight. */
.sweep
{
    background-image: linear-gradient(90deg, var(--swoop-soft), var(--swoop));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 0.28em;
    margin: -0.06em -0.18em;
    padding: 0.06em 0.18em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: sweepDraw 0.65s ease-out 0.25s both;
}

@keyframes sweepDraw
{
    from
    {
        background-size: 0% 100%;
    }

    to
    {
        background-size: 100% 100%;
    }
}

.hero-sub
{
    max-width: 34rem;
    margin-top: 1.4rem;
    font-size: 1.06rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

.hero-actions
{
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ---------- Hero demo (decorative, aria-hidden) ---------- */

.demo
{
    position: relative;
    width: 100%;
}

/* Ambient brand glow behind the window, the page's only decoration */
.demo::before
{
    position: absolute;
    top: -12%;
    left: 6%;
    z-index: 0;
    width: 88%;
    aspect-ratio: 1;
    content: "";
    background: radial-gradient(circle, rgba(255, 196, 0, 0.28) 0%, rgba(255, 196, 0, 0) 68%);
}

.demo-window
{
    position: relative;
    z-index: 1;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-window);
    overflow: hidden;
}

.demo-bar
{
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--wash);
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0.9rem;
}

.demo-dot
{
    width: 0.7rem;
    height: 0.7rem;
    background: var(--line-strong);
    border-radius: 50%;
}

.demo-url
{
    overflow: hidden;
    max-width: 65%;
    margin-left: 0.45rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.demo-stage
{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* The mock page: pastel scene with a photo tile placed on it */
.demo-photo
{
    position: absolute;
    inset: 0.9rem;
    z-index: 1;
    background: linear-gradient(160deg, #B7D0F0 0%, #D6E6F8 50%, #EFE3D2 100%);
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.demo-photo::before
{
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    width: 3.6rem;
    height: 3.6rem;
    content: "";
    background: radial-gradient(circle at 35% 35%, #FFE08A 0%, var(--swoop) 75%);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(255, 196, 0, 0.55);
}

.demo-photo::after
{
    position: absolute;
    right: -12%;
    bottom: -40%;
    left: -12%;
    height: 72%;
    content: "";
    background: linear-gradient(180deg, #A7E3AE 0%, #7FCB90 100%);
    border-radius: 50% 50% 0 0;
}

/* The image element on that page, a framed photo tile */
.demo-photo img
{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 46%;
    border: 3px solid #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 10px 20px -10px rgba(15, 17, 21, 0.35);
    transform: translate(-50%, -50%);
}

/* The yellow swoop itself: a skewed marker band crossing the photo once per
   cycle. Hidden in the resting state, so no animation means no band. */
.demo-sweep
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 42%;
    opacity: 0;
    background: linear-gradient(90deg,
        rgba(255, 196, 0, 0) 0%,
        rgba(255, 196, 0, 0.75) 30%,
        rgba(255, 196, 0, 0.75) 70%,
        rgba(255, 196, 0, 0) 100%);
    transform: translateX(-140%) skewX(-12deg);
    animation: swoopSweep var(--demo-cycle) infinite;
}

@keyframes swoopSweep
{
    0%,
    30%
    {
        opacity: 0;
        transform: translateX(-140%) skewX(-12deg);
    }

    36%
    {
        opacity: 1;
        transform: translateX(-60%) skewX(-12deg);
    }

    52%
    {
        opacity: 1;
        transform: translateX(300%) skewX(-12deg);
    }

    52.01%,
    100%
    {
        opacity: 0;
        transform: translateX(300%) skewX(-12deg);
    }
}

/* Cursor and its keycap travel together and rest over the photo tile */
.demo-point
{
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 46%;
    left: 50%;
    z-index: 4;
    gap: 0.3rem;
}

/* Resting state is the end state, so disabling animations leaves a clean still */
.demo-cursor
{
    filter: drop-shadow(0 2px 4px rgba(15, 17, 21, 0.2));
    animation: cursorSwoop var(--demo-cycle) infinite;
}

/* The cursor enters from the lower left edge of the demo screen and
   glides up onto the photo */
@keyframes cursorSwoop
{
    0%,
    6%
    {
        opacity: 0;
        transform: translate(-12rem, 5rem);
    }

    14%
    {
        opacity: 1;
        transform: translate(-12rem, 5rem);
    }

    28%,
    88%
    {
        opacity: 1;
        transform: translate(0, 0);
    }

    96%,
    100%
    {
        opacity: 0;
        transform: translate(0, 0);
    }
}

/* Same keycap, scaled up and riding next to the cursor tip */
.demo-key
{
    margin-top: 0.8rem;
    font-size: 1.1rem;
    padding: 0.5rem 0.85rem 0.55rem;
    animation: keyPress var(--demo-cycle) infinite;
}

/* The keycap only exists around the press: it fades in just before the
   dip, then leaves once the swoop has run */
@keyframes keyPress
{
    0%,
    29%
    {
        opacity: 0;
        transform: translateY(0);
    }

    33%
    {
        opacity: 1;
        transform: translateY(0);
    }

    36%
    {
        opacity: 1;
        transform: translateY(2px);
    }

    41%,
    55%
    {
        opacity: 1;
        transform: translateY(0);
    }

    64%,
    100%
    {
        opacity: 0;
        transform: translateY(0);
    }
}

.demo-toast
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    bottom: 1.3rem;
    left: 1.5rem;
    z-index: 5;
    max-width: calc(100% - 3rem);
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    box-shadow: var(--shadow-hover);
    animation: toastIn var(--demo-cycle) infinite;
}

/* Long renamed filenames ellipsize instead of stretching the toast */
.demo-toast .mono
{
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.demo-check
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--green-deep);
    background: var(--green-tint);
    border-radius: 50%;
}

@keyframes toastIn
{
    0%,
    50%
    {
        opacity: 0;
        transform: translateY(0.8rem);
    }

    60%,
    90%
    {
        opacity: 1;
        transform: translateY(0);
    }

    98%,
    100%
    {
        opacity: 0;
        transform: translateY(0);
    }
}

/* ---------- Sections ---------- */

/* Shared rhythm: sections butt against each other, the hero carries its own top pad */
main > section
{
    /* Leave room for the sticky header when jumping to a section anchor */
    scroll-margin-top: 4.75rem;
    padding-block: clamp(1.5rem, 3.6vw, 2.4rem);
}

.steps h2,
.catch h2,
.details h2,
.faq h2
{
    margin-bottom: 1.7rem;
}

/* One band color per section, from the same tints as the file tags.
   Steps and FAQ keep the brand yellow. */
.catch h2
{
    background: #FBF7E7;
    border-left-color: var(--pink);
}

.details h2
{
    background: #EBF7FB;
    border-left-color: var(--peri);
}

.plain .plain-block:nth-child(1) h2
{
    background: var(--green-tint);
    border-left-color: var(--green);
}

.plain .plain-block:nth-child(2) h2
{
    background: var(--peach-tint);
    border-left-color: var(--peach);
}

/* Steps: a real sequence, so numbers earn their place */

.step-list
{
    display: flex;
    gap: 2.4rem;
}

.step-num
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pink-deep);
    background: var(--pink-tint);
    border-radius: 50%;
}

.step:nth-child(2) .step-num
{
    color: #8A6700;
    background: #FFF3CC;
}

.step:nth-child(3) .step-num
{
    color: var(--green-deep);
    background: var(--green-tint);
}

/* Each step is a column: a head row (number + title) over its paragraph */
.step
{
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem;
}

.step-head
{
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 2.4rem;
}

.step h3
{
    color: #2E6493;
}


.step p
{
    max-width: 22rem;
    font-size: 0.97rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

/* What it catches: four subtle cards that lift on hover */

.file-row
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    list-style: none;
}

.file-card
{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 1.2rem 1.2rem 1.3rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-card:hover
{
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-hover);
}

.file-card p
{
    margin-top: 0.9rem;
    font-size: 0.92rem;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--ink-soft);
}

/* Popup icon + filename tag on one line */
.file-head
{
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.file-head img
{
    flex-shrink: 0;
}

/* The filename as a soft tinted tag, one color per media type */
.file-name
{
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pink-deep);
    background: var(--pink-tint);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
}

.file-card-peri .file-name
{
    color: var(--peri-deep);
    background: var(--peri-tint);
}

.file-card-green .file-name
{
    color: var(--green-deep);
    background: var(--green-tint);
}

.file-card-peach .file-name
{
    color: var(--peach-deep);
    background: var(--peach-tint);
}

.catch-note
{
    margin-top: 1.6rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* OR divider: the second, alternative way to download */
.or-divider
{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block: clamp(1.4rem, 3vw, 2rem);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.or-divider::before,
.or-divider::after
{
    flex: 1;
    height: 1px;
    content: "";
    background: var(--line);
}

/* Hover download: the alternative mode, plain and unboxed.
   Full-width heading, then the two paragraphs side by side. */
.hoverdl
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem 3rem;
}

.hoverdl h3
{
    grid-column: 1 / -1;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    color: var(--heading);
}

/* The two taps sit inline after the heading text */
.hoverdl h3 kbd
{
    margin-left: 0.4rem;
    vertical-align: middle;
}

.hoverdl p
{
    max-width: 34rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}


/* Quiet detail list */

.detail-list
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.7rem 3rem;
}

.detail dt
{
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: #418DD0;
}

.detail dd
{
    max-width: 32rem;
    margin-top: 0.4rem;
    font-size: 0.96rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

/* Accessibility and privacy: two quiet columns, no boxes */

.plain-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.6rem 4rem;
}

.plain-block p
{
    max-width: 34rem;
    margin-top: 1rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

.perm-list
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.6rem 1rem;
    margin-top: 1.3rem;
}

.perm-list dt
{
    justify-self: start;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--wash);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.2rem 0.6rem;
}

.perm-list dd
{
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* FAQ: hairline-separated accordion, the answer unfolds in place */

.faq-list
{
    border-top: 1px solid var(--line);
}

.faq-list details
{
    border-bottom: 1px solid var(--line);
}

.faq-list summary
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #2E6493;
    padding: 1.15rem 0.1rem;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease;
}

.faq-list summary:hover
{
    color: #1F4B70;
}

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

.faq-list summary::after
{
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink-soft);
    content: "+";
    transition: transform 0.25s ease;
}

/* The plus rotates into a close mark; no glyph swap, so it animates */
.faq-list details[open] summary::after
{
    transform: rotate(45deg);
}

.faq-list details p
{
    max-width: 48rem;
    padding: 0 0.1rem 1.3rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.page-foot
{
    color: rgba(255, 255, 255, 0.72);
    background: var(--ink);
    padding-block: 3rem 2.4rem;
}

.foot-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.8rem 2.5rem;
}

.foot-brand
{
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.foot-brand img
{
    border-radius: 12px;
}

.foot-name
{
    font-family: var(--font-display);
    font-weight: 700;
    color: #FFFFFF;
}

.foot-line
{
    font-size: 0.9rem;
}

.foot-actions
{
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

/* Store links in the footer drop the button chrome: on the dark panel
   flat logo + label links look calmer than gradient blocks */
.foot-actions .btn
{
    gap: 0.6rem;
    color: rgba(244, 245, 247, 0.75);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.4rem 0;
    box-shadow: none;
}

.foot-actions .btn:hover
{
    color: #FFFFFF;
}

.foot-actions .btn img
{
    filter: none;
}

.foot-actions .btn-kicker
{
    color: rgba(244, 245, 247, 0.55);
}

.foot-actions .btn-platform
{
    color: #F4F5F7;
}

.foot-fine
{
    grid-column: 1 / -1;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 1.5rem;
}

.foot-fine a
{
    color: var(--swoop);
    text-decoration-color: rgba(255, 196, 0, 0.5);
}

/* Icon attribution, kept quiet at the very bottom */
.foot-credits
{
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.6;
    color: rgba(244, 245, 247, 0.45);
}

.foot-credits p
{
    color: #D0CD43;
}

.foot-credits-list
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 2rem;
    margin-top: 0.4rem;
}

/* Three columns: each link takes a third minus the two gaps */
.foot-credits-list a
{
    flex: 0 1 calc((100% - 4rem) / 3);
}

.foot-credits a
{
    color: rgba(244, 245, 247, 0.55);
    text-decoration-color: rgba(244, 245, 247, 0.2);
    transition: color 0.15s ease;
}

.foot-credits a:hover
{
    color: #FFFFFF;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px)
{
    /* Navigation wins over the decorative media badges on narrow views */
    .head-icons
    {
        display: none;
    }

    .hero-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .file-row
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .plain-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .foot-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px)
{
    .brand-tag
    {
        display: none;
    }

    .head-nav
    {
        gap: 1.2rem;
    }

    .head-nav a
    {
        font-size: 0.85rem;
    }

    .step-list
    {
        flex-direction: column;
        gap: 1.6rem;
    }

    .detail-list
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .hoverdl
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .foot-credits-list a
    {
        flex-basis: 100%;
    }
}

@media (max-width: 480px)
{
    /* Stack the bar: brand on top, navigation underneath */
    .page-head-inner
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }

    .head-nav
    {
        justify-content: flex-start;
    }

    .brand-icon
    {
        width: 30px;
        height: 30px;
    }

    .file-row
    {
        grid-template-columns: 1fr;
    }

    .hero-actions .btn
    {
        flex: 1 1 auto;
    }
}

/* ---------- Reduced motion: keep the still, drop the motion ---------- */

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

    .sweep,
    .demo-cursor,
    .demo-key,
    .demo-sweep,
    .demo-toast
    {
        animation: none;
    }

    .btn,
    .skip-link,
    .file-card,
    .faq-list summary,
    .faq-list summary::after
    {
        transition: none;
    }
}