:root {
    /* Fluid type scale */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-nav: 18px;
    --fs-h1: clamp(28px, 4vw + 1rem, 36px);

    /* Fixed spacing scale (component-internal) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Fluid spacing (page-level, scales continuously — no breakpoint jumps) */
    --gutter: clamp(16px, 5vw, 32px);
    --section-gap: clamp(24px, 1vw, 48px);
    --form-padding: clamp(14px, 1vw, 20px);
    --dropzone-padding-y: clamp(20px, 5vw, 32px);

    /* Color system — the original warm-beige / blue scheme, restored.
       Dropzone, drag-hover, and the icon now pull from the same
       --color-accent instead of separate blue/cyan/green hues. */
    --color-bg: rgb(245, 238, 231);
    --color-surface: rgb(255, 255, 255);
    --color-surface-alt: rgb(236, 235, 235);

    --color-text: rgb(51, 51, 61);
    --color-text-muted: rgb(100, 100, 115);   /* 4.5:1 or better on every surface it sits on */

    --color-border: rgb(148, 147, 147);
    --color-border-light: rgb(228, 228, 228);

    --color-link: rgb(21, 101, 207);   /* 4.8:1 on the page background, 5.5:1 on white */
    --color-link-hover: rgb(13, 83, 187);

    --color-accent: rgb(33, 83, 204);
    --color-accent-hover: rgb(9, 57, 168);
    --color-accent-soft: rgba(33, 83, 204, 0.08);
    --color-accent-soft-strong: rgba(33, 83, 204, 0.16);
    --color-accent-shadow: rgba(33, 83, 204, 0.25);
    --color-icon: rgb(33, 83, 204);

    --color-danger: rgb(220, 53, 53);
    --color-danger-soft: rgba(220, 53, 53, 0.1);
    --color-danger-ring: rgba(220, 53, 53, 0.18);
    --color-success: rgb(22, 181, 82);
    --color-success-soft: rgba(22, 181, 82, 0.1);
    --color-success-text: rgb(12, 106, 47);   /* green words: 5.3:1 on its soft tint, 6.7:1 on white */
    --color-success-ring: rgba(22, 181, 82, 0.18);
    --color-disabled: rgb(128, 128, 128);

    --color-footer-bg: rgb(38, 38, 53);
    --color-footer-text: rgb(255, 255, 255);

    --color-instructions-bg: rgb(46, 82, 117);
    --color-instructions-text: rgb(242, 251, 255);

    /* neutral, warm-tinted shadow tied to --color-text rather than a cool navy */
    --shadow-color: rgba(51, 51, 61, 0.16);

    /* ---- second spacing scale -------------------------------------
       The application is laid out on a 4px grid (--space-1..6 above).
       The landing page, FAQ and content sections were laid out on a
       5px grid. Both are preserved exactly; naming the 5px steps here
       means the two can be reconciled later in one place instead of
       forty. Nothing below this line changes any rendered value. */
    --gap-1: 5px;
    --gap-2: 10px;
    --gap-3: 15px;
    --gap-4: 20px;
    --gap-5: 25px;
    --gap-6: 30px;
    --gap-7: 35px;
    --gap-8: 50px;

    /* ---- type sizes used by the content pages ---- */
    --fs-body: 14px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-display: 48px;

    /* ---- radii, as currently used ---- */
    --radius-sm: 5px;
    /* callouts, small buttons, nav hover */
    --radius-md: 8px;
    /* landing cards */

    /* ---- icon sizes ---- */
    --icon-lg: 50px;
    /* landing card + "how to" step icons */

    /* ---- surfaces and lines previously written as literals ---- */
    --color-text-inverse: rgb(255, 255, 255);
    --color-surface-sunken: rgb(94, 103, 110);
    /* "How to use" slab */
    --color-divider: rgb(63, 60, 63);
    /* FAQ item rule */
    --color-nav-bg: rgb(255, 255, 255);
    --color-nav-hover: rgba(144, 183, 201, 0.267);
    /* Deliberately NOT --color-accent: the active-tab underline is a
       lighter blue than the button fill. Point this at --color-accent
       if you ever want the two unified — it is a one-line change. */
    --color-nav-active: rgb(31, 114, 223);
    --color-footer-link: wheat;
    --color-footer-link-hover: rgb(211, 164, 76);
    --color-callout-link: rgb(242, 251, 255);
    --color-callout-link-hover: rgb(127, 224, 255);   /* light cyan, 5.4:1 on the instructions box */

    /* ---- shadows, as currently used ---- */
    --shadow-nav: 0 1px 0 rgba(51, 51, 61, 0.08), 0 2px 8px -4px rgba(51, 51, 61, 0.12);
    --shadow-card: 0 0 0 1px rgba(51, 51, 61, 0.06), 0px 2px 4px -1px rgba(128, 128, 128, 0.4);
    --shadow-card-hover: 0 0 0 1px rgba(51, 51, 61, 0.08), 0px 10px 28px -8px rgba(51, 51, 61, 0.18);
    --shadow-slab: 1px 12px 38px -18px rgb(54, 51, 51);
    --shadow-video: 0 24px 48px -18px gray;
    --shadow-form: 0 0 0 1px rgba(51, 51, 61, 0.06), 0 12px 32px -16px var(--shadow-color);

    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --focus-ring: 0 0 0 3px var(--color-accent-soft);
}

* {
    font-family: "Google Sans Flex", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Tags */

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    color: var(--color-link-hover);
}

/* a link inside running text is underlined, not told apart by colour alone */
p a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

li a {
    color: var(--color-text);
}

nav li a {
    letter-spacing: 0.01em;
}

ul {
    list-style: none;
}

h1,
.Home h2,
#faq header h2,
.itemCard h2,
#about header h2,
#aboutInfo header h2 {
    font-size: var(--fs-h1);
    line-height: 1.3;
    color: var(--color-text);
    font-weight: 400;
}

p {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-text-muted);
    padding: 0;
}

/* Layout */

article {
    display: grid;
    text-align: center;
    justify-items: center;
}

.container {
    display: grid;
    width: 100%;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: 24px;
}

.container>header {
    padding-inline: var(--gutter);
}

.container>header>h1 {
    margin-top: 36px;
    letter-spacing: -0.02em;
}

header p {
    color: var(--color-text-muted);
}

/* Buttons */

button,
.button {
    color: var(--color-text-inverse);
    cursor: pointer;
    font-size: var(--fs-md);
    border: none;
    outline: none;
    padding: var(--space-3) var(--space-5);
    border-radius: 6px;
    background-color: var(--color-accent);
    transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}

button:hover,
.button:hover {
    background-color: var(--color-accent-hover);
}

button:active,
.button:active {
    transform: scale(0.98);
}

button:disabled {
    cursor: default;
    background-color: var(--color-disabled);
    transform: none;
}

/* Upload form */

.picker {
    display: grid;
    overflow: hidden;
    gap: var(--space-2);
    width: 100%;
    max-width: 320px;
    padding: var(--form-padding);
    justify-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-form);
}

.picker i {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.DragDrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 210px;
    padding: var(--dropzone-padding-y) var(--space-4);
    gap: var(--space-3);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-accent-soft);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.DragDrop:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px -12px var(--color-accent-shadow);
}

/* Until the app can work, the dropzone should not look or act clickable.

   This used to key on `#cropButton:disabled`, which deadlocked: Crop was
   disabled until a file was chosen, and the dropzone was the way to choose
   one. Everything could load correctly and the picker still be dead.

   `.essentialsReady` is set on the form by applyEssentials() in app.js and
   means exactly one thing — every essential arrived — which is the condition
   this rule actually wants. */
.picker:not(.essentialsReady) .DragDrop {
    cursor: default;
    pointer-events: none;
}

.fileDragIn {
    background-color: var(--color-accent-soft-strong);
    border-color: var(--color-accent);
    box-shadow: 0 4px 24px -10px var(--color-accent-shadow);
}

.DragDrop img {
    height: 35px;
    pointer-events: none;
}

.DragDrop p {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--color-text);
    pointer-events: none;
}

/* the "or" becomes a proper divider — short rules either side, tying its
   color back into the --color-border-light token used elsewhere in the form */
.DragDrop p:nth-of-type(2) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.DragDrop p:nth-of-type(2)::before,
.DragDrop p:nth-of-type(2)::after {
    content: "";
    width: 26px;
    height: 1px;
    background-color: var(--color-border-light);
}

.DragDrop button {
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    /* button remains its own click target inside the now-clickable zone */
    position: relative;
    z-index: 1;
}

.hiddenFileInput {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

#cropButton {
    width: 100%;
    font-size: var(--fs-sm);
    padding: var(--space-3);
    letter-spacing: 0.3px;
}

/* Password input */

.passInput {
    font-size: var(--fs-sm);
    padding: var(--space-2);
    width: 100%;
    height: 32px;
    text-align: center;
    outline: none;
    border-radius: 6px;
    border: none;
    background-color: var(--color-surface-alt);
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 0 0 0 transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.passInput::placeholder {
    color: var(--color-text-muted);
}

.passInput:focus {
    border-bottom-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.passInput:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.passInput:disabled::placeholder {
    color: var(--color-text-muted);
}

.wrongPass,
.passInput.wrongPass,
.passInput.wrongPass:focus {
    animation: shake 0.45s ease-in-out 1;
    border-bottom-color: var(--color-danger);
    background-color: var(--color-danger-soft);
    box-shadow: 0 0 0 3px var(--color-danger-ring);
}

/* the verdict outranks focus: a password shown as right (or wrong) stays
   green (or red) when the field is clicked or Crop is pressed */
.rightPass,
.passInput.rightPass,
.passInput.rightPass:focus {
    animation: successPop 0.45s ease-out 1;
    border-bottom-color: var(--color-success);
    background-color: var(--color-success-soft);
    box-shadow: 0 0 0 3px var(--color-success-ring);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

@keyframes successPop {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 var(--color-success-ring);
    }

    60% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px var(--color-success-ring);
    }
}

/* Format / Quality settings */

.settingsTitle {
    display: inline-block;
    width: 100%;
}

.settingsTitle::before,
.settingsTitle::after {
    display: inline-block;
    content: "";
    width: 20%;
    transform: translateY(-4px);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(66deg, rgba(227, 227, 231, 0) 0%, rgba(200, 202, 212, 1) 37%);
    border-image-slice: 1;
}

.settingsTitle::before {
    margin-right: var(--space-1);
}

.settingsTitle::after {
    margin-left: var(--space-1);
    border-image: linear-gradient(66deg, rgba(200, 202, 212, 1) 74%, rgba(227, 227, 231, 0) 100%);
    border-image-slice: 1;
}

/* Segmented pill toggle (Format / Quality) */

.settingsDiv {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-alt);
}

/* sliding indicator — sits behind whichever .radio is checked and glides
   across on change instead of the fill just snapping into place. Its width
   matches a grid column exactly because both .radio options are now forced
   to equal width (see .radio below) rather than sizing to their own text. */
.settingsDiv::before {
    content: "";
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    bottom: var(--space-1);
    width: calc(50% - var(--space-1) - (var(--space-1) / 2));
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 0;
}

.settingsDiv:has(input:disabled)::before {
    background-color: var(--color-disabled);
}

.settingsDiv:has(.radio:nth-of-type(2) input:checked)::before {
    transform: translateX(calc(100% + var(--space-1)));
}

.radio {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    transition: color 0.2s ease 0.05s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.radio input[type="radio"] {
    display: none;
}

/* the dot indicator is replaced by the sliding pill behind the row */
.radio span {
    display: none;
}

.radio:hover {
    color: var(--color-text);
}

.radio:has(input[type="radio"]:checked) {
    color: white;
}

.radio:has(input:disabled) {
    pointer-events: none;
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* Toast notifications */

.toastContainer {
    position: relative;
}

.toast {
    display: grid;
    position: fixed;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--space-2);
    width: min(360px, calc(100vw - (var(--gutter) * 2)));
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 34px);
    left: 50%;
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-danger);
    border-radius: 12px;
    box-shadow: 0 20px 44px -14px var(--shadow-color);
    background-color: var(--color-surface);
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.25s ease, transform 0.25s ease, z-index 0.4s;
}

/* status icon badge — swaps glyph and tint between the error (default)
   and success (.toastGreen) states without needing extra markup */
.toast::before {
    content: "!";
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--fs-sm);
    font-weight: 700;
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.toastGreen::before {
    content: "\2713";
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

.showToast {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.28s ease, transform 0.28s ease, z-index 0.1s;
}

.toast .toastTitle {
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text);
    padding: 0px;
    margin-bottom: var(--space-1);
    border-radius: 3px;
    text-align: left;
    color: var(--color-text);
}

.toast a {
    font-size: var(--fs-sm);
    text-decoration: underline;
}

.toast .toastClose {
    flex: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--color-text-muted);
    line-height: 0;
    font-size: var(--fs-sm);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toast .toastClose:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

.toast p {
    padding: 0;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-align: left;
}

.toastGreen {
    border-left-color: var(--color-success);
}

.toast #toastText {
    white-space: pre-line;
}

/* Spinner (upload/processing) */

.spinner {
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: relative;
    top: 4px;
    margin: -25px 0 0 -25px;
    width: 18px;
    height: 18px;
}

.spinner .path {
    stroke: rgb(188, 203, 240);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* ---------------- INSTRUCTIONS / INFO BOX ---------------- */
#about {
    gap: 12px;
    width: min(68ch, calc(100% - 40px));
    margin-inline: auto;
    overflow: hidden;
    max-height: 640px;
    transition: opacity 0.25s ease, max-height 0.3s ease;
}

#about > p {
    max-width: none;
    padding: 0;
    line-height: 1.6;
}

#about .infoBox {
    width: 100%;
    max-width: none;
    padding: 0;
    letter-spacing: 0;
    font-size: inherit;
}

#about ul {
    margin: 0;
    padding: 20px 24px 20px 2em;
    display: grid;
    gap: 12px;
    border-radius: 12px;
    color: var(--color-instructions-text);
    background-color: var(--color-instructions-bg);
    text-align: left;
    list-style: disc;
}

#about ul li {
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: disc;
    text-align: left;
    font-size: var(--fs-md);
    line-height: 1.65;
    letter-spacing: 0;
}

#about ul li::marker {
    color: rgba(242, 251, 255, 0.7);
}

#about a {
    padding: 0;
    letter-spacing: 0;
    color: var(--color-callout-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#about a:hover {
    color: var(--color-callout-link-hover);
}

/* On a card page .infoBox is a transparent wrapper around the dark <ul>
   above; on the landing page it is itself the dark callout (see the FAQ
   section). Same class, two jobs — left as-is, flagged here. */
.infoBox {
    padding: var(--space-4);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    letter-spacing: 0;
    max-width: 80ch;
}

.infoBox a {
    font-weight: bolder;
}

/* ---------------- NAVIGATION ---------------- */

nav {
    display: block;
    width: 100%;
    box-shadow: var(--shadow-nav);
    background-color: var(--color-nav-bg);
}

/* Six columns for a nav that currently renders four items: the extra
   `auto` tracks collapse to zero, and are here for the two entries that
   appear when cards.json sets site.support. */
nav ul {
    display: grid;
    width: 100%;
    overflow: hidden;
    grid-template-columns: 1fr repeat(5, auto);
    margin: 0;
    padding: 0;
}

nav ul li {
    display: grid;
    align-items: center;
}

nav ul li a {
    padding: var(--space-3) var(--gap-3);
    font-size: var(--fs-base);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
    text-decoration: none;
    color: var(--color-text);
}

nav ul li:not(:first-child) a:hover {
    border-radius: var(--radius-sm);
    background-color: var(--color-nav-hover);
}

nav ul li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-lg);
    padding-left: var(--gap-4);
    color: var(--color-text);
    letter-spacing: 0.04em;
}

/* Snip, the mascot, as the site's mark. The image clips him at its bottom
   edge, and the ledge drawn along that edge is the wall he hides behind:
   he rises over it, looks left and right, and ducks back down.
   The box is 26px tall, the height the old mark had, so the navigation
   keeps its height and the active tab's underline stays where it was; the
   image is a little taller and rises out of the top of the box. */
nav .brandPeek {
    position: relative;
    flex: none;
    display: block;
    width: 60px;
    height: 26px;
}

nav .brandPeek img {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 60px;
    height: 30px;
}

nav .brandPeek::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 1.5px;
    border-radius: 1px;
    background: var(--color-text);
}

.activeTab {
    display: grid;
    margin-top: 2px;
    border-radius: var(--radius-sm);
}

.activeTab::after {
    display: grid;
    content: "";
    margin: 11px 0 -15px 0;
    border-radius: var(--radius-md);
    border-top: 6px solid var(--color-nav-active);
}

/* ---------------- FOOTER ---------------- */

/* !important removed from display / justify-content / padding /
   background-color. The narrow-screen override further down is later in
   the file at equal specificity, so it still wins without it. */
footer {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-3) var(--gap-4);
    padding: var(--gap-6);
    background-color: var(--color-footer-bg);
}

/* `p` sets a horizontal padding globally, which still applies here. */
footer p {
    font-size: var(--fs-xl);
    color: var(--color-footer-text);
    margin: 0;
}

footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-sm);
    margin: 0;
    padding: 0 var(--gap-2);
    color: var(--color-footer-link);
    transition: color 0.2s;
    text-decoration: none;
}

footer a:hover {
    color: var(--color-footer-link-hover);
}

/* ---------------- LANDING PAGE ---------------- */

.Home {
    display: grid;
    justify-items: center;
    width: 100%;
}

.Home article {
    display: grid;
    grid-gap: var(--gap-2);
    padding: var(--gap-6) var(--gap-4);
    justify-items: center;
    /* full width, so the card grid inside can measure itself against the
       page rather than against its own content */
    width: 100%;
    box-sizing: border-box;
}

.Home h1,
.Home h2 {
    font-size: var(--fs-display);
    max-width: 24ch;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.Home p {
    max-width: 62ch;
}

/* The card grid. As many columns as fit at 270px or more each: three on a
   laptop, two on a tablet, one on a phone, with no width at which a title
   or a button has to wrap to fit. */
.itemGroup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: var(--gap-4);
    width: min(1120px, 100%);
}

/* Every tile the same shape: logo, title, text, then the actions pinned to
   the bottom, so tiles side by side line up whatever their text length. */
.itemCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2);
    min-width: 0;
    margin: 0;
    padding: var(--gap-4) var(--gap-4) var(--gap-3);
    text-align: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
}

.itemCard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.itemCard img {
    flex: none;
    width: auto;
    max-width: 140px;
    height: var(--icon-lg);
    object-fit: contain;
}

.itemCard h2 {
    padding: 0;
    margin: 0;
    font-size: clamp(20px, 1.2vw + 12px, 24px);
    line-height: 1.25;
    text-wrap: balance;
}

.itemCard p {
    flex: 1 0 auto;
    max-width: 34ch;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* the actions: the video link and the button side by side, or the button
   alone in the middle when a card has no video */
.itemCardBottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-3);
    margin-top: var(--gap-2);
}

.itemCardBottom.isSingle {
    justify-content: center;
}

.itemCardBottom a {
    font-size: var(--fs-body);
    white-space: nowrap;
}

.itemCardBottom .button {
    flex: none;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
}

.itemCardBottom .button:hover {
    background-color: var(--color-accent-hover);
}

/* How it works: five steps on the dark slab, line icons like the app's buttons,
   joined by a dashed cut line. Equal columns, so each connector runs from
   one icon to the next. */
.howToCard {
    --step-icon: 54px;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-6);
    padding: var(--gap-5) var(--gap-7);
    margin: var(--gap-4) 0 0;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-sunken);
    box-shadow: var(--shadow-slab);
}

.howToCardItem {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--gap-2);
    list-style: none;
    text-align: center;
}

.howToCardItem:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--step-icon) / 2);
    left: calc(50% + var(--step-icon) / 2 + 10px);
    width: calc(100% + var(--gap-6) - var(--step-icon) - 20px);
    border-top: 2px dashed rgba(255, 255, 255, 0.3);
}

.howToCard img {
    width: var(--step-icon);
    height: var(--step-icon);
}

.howToCard p {
    max-width: 14ch;
    color: var(--color-text-inverse);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: normal;
}

/* 16:9 from its own width. The old padding-top: 56.25% was a percentage
   of the parent's width, not this box's, so on wide screens the box ran
   ~200px taller than the video and left a gap under it. */
.videoContainer {
    display: grid;
    position: relative;
    width: 80vw;
    max-width: 850px;
    aspect-ratio: 16 / 9;
    margin: var(--gap-4) 0;
}

.videoContainer iframe,
.videoContainer .videoPoster {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-video);
}

/* the tutorial before it is played: its thumbnail and a play button */
.videoContainer .videoPoster {
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    background: #111;
    color: #fff;
    cursor: pointer;
}
.videoContainer .videoPoster:hover,
.videoContainer .videoPoster:active { background: #111; transform: none; box-shadow: var(--shadow-video); }
/* YouTube's 16:9 thumbnail of the video; the player loads on play */
.videoPoster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* YouTube's own play button: a red rounded tab with a white triangle */
.videoPlay {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 48px;
    padding-left: 3px;
    border-radius: 14px;
    background: #ff0000;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.videoPoster:hover .videoPlay,
.videoPoster:focus-visible .videoPlay { transform: scale(1.06); background: #e00000; }
.videoNote {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 3px 8px;
    font-size: var(--fs-xs);
    border-radius: var(--radius-pill);
    background: rgba(17, 17, 17, 0.6);
}

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

.noBreak { white-space: nowrap; }

#faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--gap-8) 24px;
    background-color: var(--color-surface);
}

#faq > header,
.faqItem {
    width: 100%;
    max-width: 65ch;
    box-sizing: border-box;
}

#faq .resetFAQ {
    overflow: hidden;
}

#faq header h2 {
    font-size: var(--fs-display);
}

.faqItem {
    display: grid;
    padding: 16px 0;
    text-align: left;
    overflow: hidden;
    justify-items: stretch;
    border-bottom: 1px solid var(--color-border-light);
}

.faqItem.resetFAQ,
#faq .resetFAQ {
    overflow: hidden;
}

.faqItem .faqQ {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.faqItem .faqQ button {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.015em;
    text-align: left;
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25em;
    align-items: start;
    gap: var(--space-3);
    padding: 0;
    border-radius: 4px;
    background: none;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.faqItem .faqQ button:hover,
.faqItem .faqQ button:active {
    background: none;
    transform: none;
}

.faqItem .faqQ button::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 1.25em;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.faqItem.resetFAQ .faqQ button::after {
    content: "\2212";
}

.faqItem p {
    display: block;
    overflow: hidden;
    max-width: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    font-size: var(--fs-md);
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--color-text);
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease;
}

.faqItem > ul,
.faqItem > .infoBox {
    overflow: hidden;
    max-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease;
}

.faqItem.resetFAQ p,
#faq .resetFAQ p {
    max-height: 24rem;
    padding-top: 10px;
    opacity: 1;
}

.faqItem.resetFAQ > ul,
#faq .resetFAQ > ul {
    max-height: 40rem;
    margin: 10px 0 var(--space-4);
    padding: 0 0 0 0.2em;
    opacity: 1;
}

.faqItem.resetFAQ > .infoBox,
#faq .resetFAQ > .infoBox {
    max-height: 24rem;
    padding: var(--gap-3) var(--gap-4);
    margin: 10px 0 var(--space-3);
    opacity: 1;
}

.faqItem.resetFAQ > p.infoBox,
#faq .resetFAQ > p.infoBox {
    max-height: 24rem;
    padding: var(--gap-3) var(--gap-4);
    margin: 10px 0 var(--space-3);
}

.faqItem .infoBox {
    justify-self: stretch;
    font-size: var(--fs-body);
    line-height: 1.55;
    text-align: left;
    letter-spacing: 0;
    color: var(--color-text-inverse);
    background-color: var(--color-instructions-bg);
}

.faqItem .infoBox ul {
    display: grid;
    max-width: none;
    justify-items: left;
    gap: 6px;
    padding-left: 1.15em;
    text-align: left;
    list-style: disc;
}

.faqItem .infoBox ul li a {
    padding-left: 0;
    color: var(--color-callout-link);
    letter-spacing: 0;
    text-decoration: underline;
}

.faqItem .infoBox ul li a:hover {
    color: var(--color-callout-link-hover);
}

/* ---------------- MEDIA QUERIES ---------------- */

/* .li5 and .li6 are inert while cards.json leaves site.support empty —
   they style the "Request Support" entry, which is not emitted. Kept so
   the nav still behaves if that entry comes back. */

@media screen and (max-width:839px) {
    .li5 {
        display: none;
    }
}

@media screen and (max-width:700px) {
    nav ul {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    nav ul li {
        display: grid;
        justify-content: center;
    }

    .li1 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .li2 {
        grid-area: 2 / 1 / 2 / 2;
    }

    .li3 {
        grid-area: 2 / 2 / 2 / 2;
    }

    .li4 {
        grid-area: 2 / 3 / 2 / 4;
    }

    .li6 {
        display: grid;
        justify-self: right;
        max-width: fit-content;
        grid-area: 1 / 3 / 2 / 4;
    }

    .howToCard {
        grid-template-columns: 1fr;
        gap: var(--gap-4);
        padding: var(--gap-4) var(--gap-5);
    }

    .howToCardItem {
        grid-template-columns: var(--step-icon) 1fr;
        align-items: center;
        justify-items: start;
        gap: var(--gap-4);
        text-align: left;
    }

    /* the cut line runs down between the tiles instead */
    .howToCardItem:not(:last-child)::after {
        top: calc(var(--step-icon) + 4px);
        left: calc(var(--step-icon) / 2 - 1px);
        width: 0;
        height: calc(var(--gap-4) - 8px);
        border-top: 0;
        border-left: 2px dashed rgba(255, 255, 255, 0.3);
    }

    .howToCard p { max-width: none; }

    /* !important dropped along with the base rule's; this block is later
       in the file at equal specificity, so it still wins. */
    footer {
        display: grid;
        grid-gap: var(--gap-2);
        justify-content: center;
        text-align: center;
    }

    footer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width:563px) {
    .li1 {
        grid-area: 1 / 1 / 2 / 4;
    }

    .li4 a {
        padding: var(--gap-1) 2px;
    }

    #faq .faqItem .faqQ button {
        margin-top: 0;
        font-size: 18px;
    }
}

@media screen and (max-width:500px) {
    nav ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .li1 {
        grid-area: 1 / 1 / 1 / 3;
    }

    .li2 {
        grid-area: 2 / 1 / 2 / 2;
    }

    .li3 {
        grid-area: 2 / 2 / 2 / 3;
    }

    .li4 {
        display: none;
    }

    .li6 {
        grid-area: 1 / 2 / 2 / 4;
    }

}

/* ---------------- the About section on a card page ---------------- */

/* Generated pages carry an About block describing that card type. It is prose
   rather than instructions, so it does not take the boxed treatment #about
   uses — it sits in the page like a paragraph, at a readable measure. */
#aboutInfo p {
    max-width: 65ch;
    margin: 0 auto;
    line-height: 1.7;
    color: var(--color-text-muted);
    text-align: left;
    padding: 0;
    font-size: var(--fs-md);
}

#aboutInfo p+p {
    margin-top: var(--space-3);
}

#aboutInfo strong {
    color: var(--color-text);
}

#aboutInfo i {
    font-style: italic;
}

article[id="aboutInfo"] {
    width: 100%;
    background-color: var(--color-surface);
    padding: var(--space-5) var(--gutter);
}

/* ---------------- card questions and other cards, on a card page ---------------- */

/* Crop another card: a ticker bar. The other cards drift right to left
   between soft fades; it stops under the pointer
   or when a link has keyboard focus. Two copies of the list make the loop. */
.moreCards {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /* flush with the About band above and the footer below: the negative
       top cancels the container's 24px row gap */
    margin: -24px 0 0;
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-surface);
    overflow: hidden;
}

/* soft fades at both ends of the bar, fixed while the stream moves under them */
.moreCards::before,
.moreCards::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
}

.moreCards::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-surface), rgba(255, 255, 255, 0));
}

.moreCards::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-surface), rgba(255, 255, 255, 0));
}

.moreCardsTrack {
    display: flex;
    width: max-content;
    padding: 10px 0;
    animation: moreCardsRun 48s linear infinite;
}

.moreCards:hover .moreCardsTrack,
.moreCards:focus-within .moreCardsTrack {
    animation-play-state: paused;
}

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

.moreCardsRun {
    display: flex;
    flex: none;
    gap: 10px;
    margin: 0;
    padding: 0 10px 0 24px;
}

.moreCards li { list-style: none; }

.moreCards a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    font-size: var(--fs-body);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.moreCards a:hover {
    color: var(--color-link);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-light);
}

.moreCards img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* no motion: a still row that scrolls sideways, and no second copy */
@media (prefers-reduced-motion: reduce) {
    .moreCardsTrack { animation: none; width: auto; overflow-x: auto; }
    .moreCardsRun[aria-hidden="true"] { display: none; }
}

.faqItem>ul {
    display: grid;
    justify-self: stretch;
    gap: 8px;
    list-style: none;
    counter-reset: faq-step;
}

.faqItem>ul>li {
    position: relative;
    padding-left: 1.4em;
    font-size: var(--fs-md);
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--color-text);
    text-align: left;
    counter-increment: faq-step;
}

/* Small, understated step number */
.faqItem>ul>li::before {
    content: counter(faq-step) ".";
    position: absolute;
    left: 0;
    top: 0;

    color: var(--color-accent);
    font-weight: 500;
    font-size: var(--fs-base);
}

/* FAQ links */
.faqItem>ul>li a {
    color: var(--color-link);
    text-decoration: underline;
    letter-spacing: normal;
}

.faqItem>ul>li a:hover {
    color: var(--color-link-hover);
}

/* Container for the hero header to handle its own internal spacing softly */
.Home article:first-of-type header {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    margin-bottom: var(--space-4);
    /* Much smaller, natural spacing */
}

/* The Big H1 */
.Home article:first-of-type header h1 {
    font-size: var(--fs-display);
    color: var(--color-text);
    padding: 0;
}

/* The second <p> - The grayed-out AI/Privacy text */
.Home article:first-of-type header p:nth-of-type(2) {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 62ch;
    margin: 0;
}

/* Privacy pill — shared by the landing hero and About. */
.privacyPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    padding: 7px 14px 7px 8px;

    border: 1px solid rgba(33, 83, 204, 0.12);
    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.65);
    color: var(--color-text);

    font-size: 14px;
    font-weight: 500;
}

/* Small icon bubble */
.privacyIcon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.privacyIcon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}