: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);
    transform: translate3d(0, 0, 0);
    transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.2s ease;
    will-change: transform;
    z-index: 0;
}

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

/* which option is on comes from js/switch.js (data-pick), not :has():
   Safari does not reliably re-style a ::before when a :has() changes */
.settingsDiv[data-pick="1"]::before {
    transform: translate3d(calc(100% + var(--space-1)), 0, 0);
}

.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);
}

.settingsDiv[data-pick="0"] .radio:nth-of-type(1),
.settingsDiv[data-pick="1"] .radio:nth-of-type(2) {
    color: white;
}

.settingsDiv.isOff .radio {
    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: 960px;   /* room for the tips on a 320px phone; the hide below animates from it */
    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);
}

/* 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);
}

/* (the FAQ styles are at the end of this file, "FAQ: questions that open") */

.noBreak { white-space: nowrap; }

/* ---------------- 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;
    }


    /* !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;
    }

}

@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 guide on a card page ---------------- */

/* Under the tool, on a white band across the page: where to get the PDF,
   printing, questions and about the card, with a short contents list that
   stays beside them on wide screens and turns into a row of pills on phones. */
article[id="aboutInfo"] {
    width: 100%;
    background-color: var(--color-surface);
    padding: clamp(32px, 4vw, 56px) var(--gutter) clamp(40px, 5vw, 72px);
    border-top: 1px solid var(--color-border-light);
}

.guideWrap {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 56px;
    width: min(1040px, 100%);
    margin: 0 auto;
    text-align: left;
}

/* an aside, so the top menu's nav styles never reach it */
.guideToc {
    position: sticky;
    top: 24px;
    align-self: start;
    width: auto;
    background: none;
    box-shadow: none;
}

.guideToc p {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.guideToc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--color-border-light);
}

.guideToc a {
    display: block;
    margin-left: -2px;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    font-size: 14px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.guideToc a:hover,
.guideToc a:focus-visible,
.guideToc a.isOn {
    border-left-color: var(--color-accent);
    color: var(--color-accent);
}

.guideToc a.isOn { font-weight: 600; }

.guideBody {
    display: grid;
    gap: 40px;
    max-width: 720px;
}

.guideBody section {
    scroll-margin-top: 16px;
}

.guideBody section + section {
    padding-top: 40px;
    border-top: 1px solid var(--color-border-light);
}

#aboutInfo .guideBody h2 {
    margin: 0 0 14px;
    font-size: clamp(26px, 1.6vw + 14px, 32px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--color-text);
}

.guideBody h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

#aboutInfo .guideBody p {
    margin: 0;
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-align: left;
}

#aboutInfo .guideBody a { color: var(--color-link); }

#aboutInfo .guideBody .guideIntro { margin: -4px 0 20px; }

/* the places to get the PDF, numbered and joined by a dotted thread */
.guideSources {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: src;
}

.guideSources li {
    position: relative;
    padding-left: 46px;
    counter-increment: src;
}

.guideSources li::before {
    content: counter(src);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px rgba(33, 83, 204, 0.25);
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
}

.guideSources li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: -16px;
    border-left: 2px dotted rgba(33, 83, 204, 0.25);
}

.guideSources h3 { margin-bottom: 2px; }

.guideTicks {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guideTicks li {
    position: relative;
    padding-left: 32px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.guideTicks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

#guide-faq .faqItem:first-of-type { border-top: 1px solid var(--color-border-light); }

.guideAbout h3 {
    margin: 22px 0 6px;
    font-size: 18px;
}

.guideAbout h2 + h3 { margin-top: 4px; }

#aboutInfo .guideAbout p + p { margin-top: 10px; }

@media (max-width: 860px) {
    .guideWrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .guideToc { position: static; }

    .guideToc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border: 0;
    }

    .guideToc a {
        margin: 0;
        padding: 6px 12px;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-pill);
    }

    .guideToc a:hover,
    .guideToc a:focus-visible,
    .guideToc a.isOn { border-color: var(--color-accent); }
}

/* ---------------- 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%;
    /* a clear gap after the tips, and flush with the guide's white band
       below: the negative bottom cancels the container's 24px row gap */
    margin: clamp(24px, 4vw, 48px) 0 -24px;
    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; }
}

/* 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;
    }
}

/* =========================================================
   Home: the promises under the title
   ========================================================= */
.Home .heroLead {
    max-width: 58ch;
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.promises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
}

.promises li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 9px;
    border: 1px solid rgba(33, 83, 204, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.promises svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   Home: for CSC, e-Mitra and cyber cafe operators
   ========================================================= */
/* The section is a window in the page with a sheet of cards feeding up
   behind it. Faint cards drift past and scissors cut down both sides. One speed drives the paper, the dashes and
   the snips, so they stay in step. */
.Home .shopBand {
    --feed-speed: 16;   /* px per second */
    position: relative;
    margin: clamp(40px, 6vw, 88px) 0;
    overflow: hidden;
    isolation: isolate;
    padding: var(--gap-7) var(--gutter);
    background: linear-gradient(135deg, rgb(22, 48, 122), rgb(33, 83, 204));
}

.rollTexture {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("/icons/roll-cards.svg") 0 0 / 460px 300px repeat;
    opacity: 0.06;
    animation: rollDrift calc(300s / var(--feed-speed)) linear infinite;
}

@keyframes rollDrift { to { background-position: 0 -300px; } }

/* The cut lines. Below the scissors the paper is still whole (dashes moving
   up with it); above them it has been cut (a fine slit). The scissors drift
   a little up and down, and the slit and dashes meet them wherever they are. */
@property --bob { syntax: "<length>"; inherits: true; initial-value: 0px; }

.rollLine {
    --at: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    pointer-events: none;
    animation: rollBob 7s ease-in-out infinite alternate;
}

.rollLine.isLeft { left: 26px; }
.rollLine.isRight { right: 26px; --at: 62%; animation-delay: -3.5s; }

@keyframes rollBob { from { --bob: -14px; } to { --bob: 14px; } }

.rollLine::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5px;
    height: calc(var(--at) + var(--bob));
    background: rgba(4, 10, 35, 0.6);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.18);
}

.rollDash {
    position: absolute;
    left: 0;
    top: calc(var(--at) + var(--bob));
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 10px, transparent 10px 18px);
    animation: rollFeed calc(18s / var(--feed-speed)) linear infinite;
}

@keyframes rollFeed { to { background-position: 0 -18px; } }

/* handles up, blades pointing down into the paper still to be cut */
.rollScissors {
    position: absolute;
    left: -16px;
    top: calc(var(--at) + var(--bob) - 16px);
    width: 34px;
    height: 34px;
}

.rollScissors svg { display: block; width: 100%; height: 100%; }
.rollScissors .ring { fill: none; stroke: #fff; stroke-width: 1.6; }
.rollScissors .edge { fill: #fff; }
.rollScissors .pin { fill: rgb(30, 70, 180); stroke: #fff; stroke-width: 0.8; }

/* each half turns on the pivot: one snip for every dash that feeds past */
.rollScissors .bladeA,
.rollScissors .bladeB {
    transform-origin: 12px 12px;
    animation: snipA calc(9s / var(--feed-speed)) ease-in-out infinite alternate;
}

.rollScissors .bladeB { animation-name: snipB; }

@keyframes snipA { from { transform: rotate(-7deg); } to { transform: rotate(2deg); } }
@keyframes snipB { from { transform: rotate(7deg); } to { transform: rotate(-2deg); } }

/* off screen (set by the page's script) the paper stops */
.rollWaits .rollTexture,
.rollWaits .rollLine,
.rollWaits .rollDash,
.rollWaits .rollScissors g { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .rollTexture,
    .rollLine,
    .rollDash,
    .rollScissors g { animation: none; }
}

@media (max-width: 760px) {
    .rollLine.isLeft { left: 8px; }
    .rollLine.isRight { right: 8px; }
    .rollScissors { left: -12px; top: calc(var(--at) + var(--bob) - 12px); width: 26px; height: 26px; }
}

.shopBandInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-7);
    width: min(1040px, 100%);
    text-align: left;
}

.shopCopy {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.Home .shopBand h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(30px, 3vw + 12px, 42px);
    color: var(--color-text-inverse);
}

.Home .shopBand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.Home .shopBand .eyebrow {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-text-inverse);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.shopList {
    display: grid;
    gap: 10px;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.shopList li {
    position: relative;
    padding-left: 30px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.shopList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.shopList strong {
    color: var(--color-text-inverse);
    font-weight: 600;
}

/* the sheet: an A4 page at true proportions, five card pairs on it.
   Every length is a fraction of the page's width, in millimetres over 210. */
.sheetArt {
    --sheet: clamp(210px, 24vw, 290px);
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin: 0;
}

.sheetPaper {
    --mm: calc(var(--sheet) / 210);
    display: grid;
    align-content: start;
    gap: calc(2.5 * var(--mm));
    width: var(--sheet);
    aspect-ratio: 210 / 297;
    padding: calc(8.5 * var(--mm)) calc(17.9 * var(--mm));
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 30px 50px -22px rgba(8, 20, 60, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4);
    transform: rotate(-3deg);
}

.sheetPair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(3 * var(--mm));
    transition: transform 0.22s var(--ease, ease), filter 0.22s;
}

.sheetPair img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 85.6 / 54;
    border-radius: calc(3.2 * var(--mm));
    background: rgb(236, 240, 248);
    box-shadow: 0 0 0 0.5px rgba(30, 40, 70, 0.22);
}

/* a pair rises a little under the pointer */
.sheetPair:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 6px rgba(11, 26, 72, 0.32));
}

.sheetArt figcaption {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .sheetPair { transition: none; }
}

@media (max-width: 760px) {
    .shopBandInner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-5);
    }

    .sheetArt { order: -1; --sheet: 210px; }
}

/* =========================================================
   FAQ: questions that open (index.html and about.html)

   Each question is <details name="faq">: one open at a time, and the
   browser opens one itself when find-in-page or a search result's link
   points inside it.
   ========================================================= */
#faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gap-8) var(--gutter);
    text-align: center;
    background-color: var(--color-surface);
}

#faq > header {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    max-width: 60ch;
}

#faq > header p {
    margin: 0;
}

.faqGroup {
    width: min(760px, 100%);
    margin-top: var(--gap-6);
    text-align: left;
}

.faqGroupTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 var(--space-2);
    padding: 0 4px;
    font-size: clamp(22px, 1vw + 16px, 26px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* a short blue bar before each group's title */
.faqGroupTitle::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--color-accent);
}

/* on About the questions sit straight under the heading */
#faq > .faqItem {
    width: min(760px, 100%);
    text-align: left;
}

#faq > header + .faqItem {
    margin-top: var(--gap-4);
}

.faqItem {
    border-bottom: 1px solid var(--color-border-light);
    interpolate-size: allow-keywords;
}

.faqQ {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: var(--space-4);
    padding: 18px 4px;
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text);
    border-radius: 6px;
    transition: color 0.15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.faqQ::-webkit-details-marker { display: none; }
.faqQ::marker { content: ""; }

/* a plus in a soft circle that turns into a cross when open */
.faqQ::after {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        linear-gradient(var(--color-accent), var(--color-accent)) center / 12px 2px no-repeat,
        linear-gradient(var(--color-accent), var(--color-accent)) center / 2px 12px no-repeat,
        var(--color-accent-soft);
    transition: transform 0.25s var(--ease), background-color 0.2s var(--ease);
}

.faqQ:hover { color: var(--color-accent); }

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

.faqItem[open] > .faqQ { color: var(--color-accent); }
.faqItem[open] > .faqQ::after { transform: rotate(45deg); }

.faqA {
    padding: 0 48px 20px 4px;
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--color-text);
}

.faqA p {
    max-width: none;
    margin: 0 0 10px;
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--color-text);
}

.faqA p:last-child { margin-bottom: 0; }

.faqA a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* numbered steps: the number in a small blue circle */
.faqSteps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: faqStep;
}

.faqSteps li {
    position: relative;
    padding-left: 30px;
    counter-increment: faqStep;
}

/* centred on the first line: (26.4px line - 20px circle) / 2 */
.faqSteps li::before {
    content: counter(faqStep);
    position: absolute;
    left: 0;
    top: 3px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent-soft-strong);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.faqList {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
    padding-left: 1.2em;
    list-style: disc;
}

.faqList li::marker { color: var(--color-accent); }

/* opening and closing slide where the browser can animate to auto;
   elsewhere they simply open */
@supports selector(::details-content) {
    .faqItem::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete;
    }

    .faqItem[open]::details-content {
        block-size: auto;
    }
}

@media (max-width: 560px) {
    .faqQ { font-size: 16px; padding: 16px 2px; }
    .faqA { padding: 0 8px 18px 2px; }
}

/* =========================================================
   Home: "Free to use, with no limits" — the comparison table.
   Our column is a pale blue card that stands above the table.
   ========================================================= */
.freeSection > header,
.howSection > header {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.cmpCard {
    --feat: 36%;
    --us: 34%;
    position: relative;
    width: min(960px, 100%);
    margin: calc(var(--gap-5) + 22px) 0 22px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 0 0 1px rgba(51, 51, 61, 0.06), 0 12px 32px -20px rgba(51, 51, 61, 0.3);
}

/* the raised column, behind the cells of column 2 */
.cmpCard::before {
    content: "";
    position: absolute;
    left: var(--feat);
    width: var(--us);
    top: -22px;
    bottom: -22px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(234, 241, 255), rgb(222, 232, 253));
    box-shadow: 0 26px 50px -20px rgba(33, 83, 204, 0.35), 0 0 0 1px rgba(33, 83, 204, 0.2);
}

.cmpTable {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
    font-size: 14px;
}

.cmpColFeat { width: var(--feat); }
.cmpColUs { width: var(--us); }

.cmpTable th,
.cmpTable td {
    padding: 14px 20px;
    vertical-align: middle;
}

.cmpTable thead th {
    padding: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
}

.cmpTable thead th.isUs {
    padding-top: 4px;
    color: var(--color-accent);
    border-bottom-color: rgba(33, 83, 204, 0.18);
}

/* the brand and its pill on one line, centred on each other */
.cmpUsHead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cmpBrand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.cmpPill {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* a group's title: small capitals in blue, over all three columns */
.cmpGroup th {
    padding: 22px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.cmpTable tbody tr:not(.cmpGroup) + tr > * {
    border-top: 1px solid var(--color-border-light);
}

.cmpTable tbody tr:not(.cmpGroup) + tr > td.isUs {
    border-top-color: rgba(33, 83, 204, 0.12);
}

.cmpTable tbody th {
    font-weight: 500;
    color: var(--color-text);
}

.cmpIcon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 9px;
    background: rgba(51, 51, 61, 0.05);
}

.cmpIcon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cmpTable td { color: var(--color-text-muted); }

.cmpTable td.isUs {
    color: rgb(20, 40, 100);
    font-weight: 500;
}

/* each answer behind its sign: a green tick for us, a soft red cross elsewhere */
.cmp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    vertical-align: middle;
}

.cmp::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
}

.cmp.yes::before {
    background: var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cmp.no::before {
    background: rgba(214, 64, 64, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64040' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* tablets: a narrower feature column */
@media (max-width: 900px) {
    .cmpCard { --feat: 32%; --us: 36%; }
    .cmpTable th, .cmpTable td, .cmpTable thead th { padding-left: 14px; padding-right: 14px; }
    .cmpIcon { margin-right: 8px; }
}

/* phones: each row becomes a small block, the two answers labelled,
   and our answer sits in its own pale blue box */
@media (max-width: 640px) {
    .cmpCard { margin: var(--gap-5) 0 0; overflow: hidden; }
    .cmpCard::before { display: none; }
    .cmpTable thead { display: none; }

    .cmpTable,
    .cmpTable tbody,
    .cmpTable tr,
    .cmpTable th,
    .cmpTable td { display: block; width: 100%; box-sizing: border-box; }

    .cmpTable tbody tr { padding: 14px 16px; }
    .cmpTable tbody tr:not(.cmpGroup) + tr { border-top: 1px solid var(--color-border-light); }
    .cmpTable tbody tr:not(.cmpGroup) + tr > * { border-top: 0; }
    .cmpGroup { padding-bottom: 0 !important; }
    .cmpGroup th { padding: 8px 0 0; }

    .cmpTable tbody th { padding: 0 0 10px; }

    .cmpTable td {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 10px;
    }

    .cmpTable td.isUs {
        background: linear-gradient(180deg, rgb(234, 241, 255), rgb(226, 235, 253));
        box-shadow: inset 0 0 0 1px rgba(33, 83, 204, 0.16);
    }

    .cmpTable td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-muted);
    }

    .cmpTable td.isUs::before { color: var(--color-accent); }
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =========================================================
   Home: How it works — the lead and a button on the left,
   the five steps as one list in a white card on the right
   ========================================================= */
.Home .howSection { text-align: left; }

.howSplit {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--gap-7);
    width: min(1080px, 100%);
}

.Home .howSection > .howSplit > .howLead {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    text-align: left;
}

.howLead .eyebrow {
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
}

.Home .howLead h2 {
    margin: 0;
    max-width: 14ch;
    text-align: left;
    line-height: 1.12;
}

.Home .howLead p:not(.eyebrow) {
    max-width: 40ch;
    margin: 0;
    text-align: left;
}

.howCta {
    margin-top: var(--space-2);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 22px -12px var(--color-accent-shadow);
}

.howList {
    display: grid;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 22px;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px rgba(51, 51, 61, 0.06), 0 18px 40px -26px rgba(51, 51, 61, 0.45);
}

.howStep {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}

.howStep + .howStep { border-top: 1px solid var(--color-border-light); }

/* a dashed thread from each icon down to the next */
.howStep:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 45px;
    top: 72px;
    bottom: -16px;
    border-left: 2px dashed rgba(33, 83, 204, 0.25);
}

.howIcon {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(33, 83, 204, 0.14), rgba(33, 83, 204, 0.05));
}

.howIcon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the step's number on the tile's corner */
.howIcon b {
    position: absolute;
    right: -6px;
    top: -6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: 700;
}

.howStep h3 {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}

.Home .howStep p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    text-align: left;
}

@media (max-width: 860px) {
    .howSplit {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-5);
        width: min(560px, 100%);
    }

    .Home .howSection > .howSplit > .howLead { justify-items: center; text-align: center; }
    .Home .howLead h2,
    .Home .howLead p:not(.eyebrow) { text-align: center; max-width: none; }
}

@media (max-width: 420px) {
    .howStep { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 14px 12px; }
    .howIcon { width: 48px; height: 48px; border-radius: 14px; }
    .howStep:not(:last-child)::after { left: 35px; top: 64px; }
}