/* ===========================================================================
   The merchant app's stylesheet.

   Every page under app.tullunprint.com used to carry its own <style> block,
   and every one of them opened by declaring the same dozen rules: the page
   grey, Figtree, a 22px h1, a muted lead, a white card at 14px radius, a
   pill, a table. Twenty copies of one design, which meant twenty places to
   change it and twenty chances for two pages to disagree — and they did:
   main was 860, 880, 900, 1020 or 1080 wide depending on which page you had
   walked into, and a "Connected" pill was a different green on Stores than
   the same word was on Home.

   This is that design, said once. It is deliberately written against the
   class names the pages ALREADY use — .card, .pill, .empty, .flash, .field,
   table — so a page joins it by deleting rules rather than by being rewritten,
   and nothing has to be renamed to be inherited.

   The .mh-* half below is the newer vocabulary the home page introduced —
   band, tiles, rows, monograms, illustrated empties. It lives here so any
   page can reach for it, and so the home page stops being the only room in
   the building that has it.

   Loaded by hand in each page's <head>, after a11y.css. It is not part of the
   admin's app.css: this side of the house is always light, never themed, and
   never seen by Turbo.

   Contrast: --muted is the lightest grey allowed to carry words. Most of the
   type it colours is 12–13px, where WCAG 2.1 AA asks for 4.5:1, and the EAA
   has applied since June 2025 — so #52525b, not the #6b7280 the pages grew.
   =========================================================================== */

/* ---- Tullun design system, v1 ---------------------------------------------
   The same set the public site (www.tullunprint.com) is drawn in, so the two
   halves of the product read as one place: near-black ink, off-white paper,
   one cobalt accent, Manrope for headings and Geist for everything else.
   Documented in docs/design-system.md — change it there and here together. */
:root {
    --ink:     #0A0A0B;
    --ink-2:   #1C1C1F;
    --muted:   #6B6B72;   /* 4.5:1 on white and on paper — the lightest grey allowed to carry words */
    --paper:   #F6F6F3;   /* the page */
    --card:    #FFFFFF;   /* panels on the page */
    --panel:   #EFEFEB;   /* a tint inside a panel */
    --line:    #E3E3DE;
    --edge:    #D2D2CC;
    /* One accent, said four ways: --accent is a fill with white on it; --accent-ink is
       the same hue as text on paper (.mh-band em); --accent-bright is the hue lifted
       for text or icons on ink; --accent-soft is its tint. */
    --accent:        #2C5BFF;   /* cobalt: fills, with white on them */
    --accent-2:      #1E47E6;   /* hover */
    --on-accent:     #FFFFFF;
    --accent-ink:    #1A3FD6;   /* the accent as text on paper */
    --accent-bright: #7D9BFF;   /* the accent as text or icon on ink */
    --accent-soft:   #DFE7FF;   /* its tint */
    --sage:       #7FD1C4;   /* the secondary hue the site's visuals use; icons and dots, not words */
    /* Semantic colours for inline page styles: --bad/--good/--warn are fills and
       icons, the -ink variants are the same hue dark enough for text, the -bg
       variants their tints. Same values as the tone classes below. */
    --bad:      #c03a30;  --bad-ink:  #7b241d;  --bad-bg:  #f7e6e3;
    --good:     #1a7f4b;  --good-ink: #0f4d2d;  --good-bg: #e7f2ec;
    --warn:     #9a6a10;  --warn-ink: #5e4109;  --warn-bg: #f3ecd9;
    --dark:       #0B0B0D;
    --dark-line:  #26262C;
    --dark-muted: #8B8B94;
    --font-display: "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    "Geist", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;
    --r:       16px;
    --r-sm:    11px;
    --shadow:  0 1px 2px rgba(0, 0, 0, .04);
    --lift:    0 16px 34px -20px rgba(10, 10, 11, .35);
    /* The band behind every page's title. Light: the same paper the site's
       sections stand on. Anything that assumed white text on it has been
       turned over with it — see .mh-hero and .mh-band below. */
    --mh-band: linear-gradient(180deg, var(--panel) 0%, var(--paper) 100%);
}

/* Semantic tones. Set on a block, consumed by whatever it contains.
   --tone      icons, rules, arcs, bars — never words, so 3:1 is the bar
   --tone-bg   the tint those sit on
   --tone-ink  the same colour darkened, for TEXT on --tone-bg */
.mh-crit, .pill.off, .flash.bad, .errors { --tone: #c03a30; --tone-bg: #f7e6e3; --tone-ink: #7b241d; }
.mh-warn, .pill.warn, .pill.invited      { --tone: #9a6a10; --tone-bg: #f3ecd9; --tone-ink: #5e4109; }
.mh-info, .pill.work                     { --tone: #2f4bb3; --tone-bg: #e8ebf7; --tone-ink: #1d2e6e; }
.mh-good, .pill.good, .pill.connected,
.flash, .said                            { --tone: #1a7f4b; --tone-bg: #e7f2ec; --tone-ink: #0f4d2d; }
.mh-cash                                 { --tone: #5b4bd6; --tone-bg: #ecebfd; --tone-ink: #372a93; }
.mh-mute, .pill.wait, .pill.disconnected { --tone: #64748b; --tone-bg: #eef0f3; --tone-ink: #3c4655; }

/* ---- Entrance -------------------------------------------------------------
   One keyframe, staggered by --i where a page sets it, so a screen assembles
   top-down in about a third of a second instead of arriving as a wall. Every
   animation here is an entrance: nothing loops in front of somebody who has
   this open all day. */
@keyframes mh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mh-arc  { from { stroke-width: 0; opacity: 0; } to { stroke-width: 11; opacity: 1; } }
@keyframes mh-fill { from { width: 0; } }

/* ---- The page ------------------------------------------------------------ */
body { font-family: var(--font-body); margin: 0; background: var(--paper); color: var(--ink);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { max-width: 1080px; margin: 0 auto; padding: 26px 24px 80px; }
a    { color: var(--ink); }

/* Headings and figures are Manrope, as on the site; running text stays Geist. */
h1, h2, h3, .mh-h1, .mh-val, .fact b, .mh-ring-n, .mh-band h1, .cstep__price { font-family: var(--font-display); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 26px 0 10px; }
code, pre, kbd, .mono { font-family: var(--font-mono); }
p.lead { color: var(--muted); margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; }

/* A title with something on the other end of the line — "New order", "Create
   a product". The page's own button and the account chrome used to collide
   in the corner; this row is where a page's own action belongs. */
.headrow, .top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.headrow h1, .top h1 { margin: 0; }
.headrow > form, .headrow > a:last-child, .top > form, .top > a:last-child { margin-left: auto; }

.back { font-size: 14px; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: 14px; }
.back:hover { color: var(--ink); }

/* ---- Ribbons -------------------------------------------------------------
   Something the page has to say before the page itself: saved, failed,
   published, parked. One shape, tinted by tone. */
.flash, .errors, .said, .went, .mh-ribbon {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--tone-bg); color: var(--tone-ink);
    border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
    border-radius: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.5;
    margin: 0 0 16px;
    animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: .05s;
}
.went { --tone: #c03a30; --tone-bg: #f7e6e3; --tone-ink: #7b241d; }
.flash a, .errors a, .said a, .went a, .mh-ribbon a { color: inherit; font-weight: 600; }
.flash svg, .errors svg, .said svg, .mh-ribbon svg { width: 18px; height: 18px; flex: none; color: var(--tone); }
.mh-ribbon .mh-say { flex: 1; min-width: 220px; }
.went ul { margin: 6px 0 0; padding-left: 18px; width: 100%; }

/* ---- Cards ---------------------------------------------------------------
   The skin only. A page that needs padding, or a flex column, says so itself —
   a card wrapping a table wants neither. */
.card, .mh-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow); overflow: hidden;
}
.mh-card { padding: 16px 20px 18px; animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both;
           animation-delay: calc(.3s + var(--i, 0) * .07s); }
.card > h2, .card h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.card h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.card p  { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }

/* The head of a panel: a toned icon, the title, and a way to the whole list. */
.mh-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.mh-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.mh-head-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
               border-radius: 9px; color: var(--tone); background: var(--tone-bg); flex: none; }
.mh-head-ico svg { width: 16px; height: 16px; }
.mh-all { margin-left: auto; font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.mh-all:hover { color: var(--ink); text-decoration: underline; }
.mh-more { font-size: 12.5px; color: var(--muted); padding-top: 10px; }

/* ---- Rows ---------------------------------------------------------------- */
.mh-row { display: flex; align-items: center; gap: 11px; padding: 10px 8px; margin: 0 -8px;
          border-top: 1px solid var(--line); border-radius: var(--r-sm); color: inherit; text-decoration: none;
          transition: background .14s ease, transform .14s ease; }
.mh-row:first-of-type { border-top: 0; }
a.mh-row:hover { background: color-mix(in srgb, var(--tone) 7%, transparent); transform: translateX(2px); }

/* A monogram rather than a number in the eye-line: it is the fastest thing on
   a row to recognise, and the number is right beside it anyway. */
.mh-mono { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px;
           border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--tone-ink); background: var(--tone-bg);
           box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent); }
.mh-who { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
.mh-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-who em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
     color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); }
td { padding: 13px 18px; border-bottom: 1px solid var(--panel); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper); }
td a { text-decoration: none; font-weight: 500; }
.when { color: var(--muted); font-variant-numeric: tabular-nums; }
.pager { margin-top: 18px; }

/* ---- Pills --------------------------------------------------------------- */
.pill, .mh-pill {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    color: var(--tone-ink); background: var(--tone-bg);
}
.pill::before, .mh-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Buttons -------------------------------------------------------------
   One black button, one quiet one, one that means harm. Sized the same
   wherever it lands, because a "Save" that is 9px tall on one page and 13px
   on the next is two buttons as far as anybody's eye is concerned. */
/* Pills, as on the site: the primary is ink, the accent one is cobalt with white on
   it (the site's "Start Selling"), the quiet one is an outline. */
.go, .use, .neworder, .save, .keep, .button, .cta, .mh-cta, .connect button, .topup button {
    display: inline-block; background: var(--ink); color: #fff; border: 1px solid var(--ink);
    border-radius: 999px; padding: 10px 20px; font: inherit; font-family: var(--font-display);
    font-size: 14px; font-weight: 700; letter-spacing: -.005em;
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.go:hover, .use:hover, .neworder:hover, .save:hover, .keep:hover, .button:hover,
.cta:hover, .mh-cta:hover, .connect button:hover, .topup button:hover {
    background: var(--ink-2); color: #fff; box-shadow: 0 10px 24px -14px rgba(10, 10, 11, .5);
}
.go:active, .use:active, .save:active, .keep:active { transform: scale(.985); }
.go[disabled], .use[disabled], .save[disabled] {
    background: #c9c9cf; border-color: #c9c9cf; cursor: not-allowed; transform: none; box-shadow: none;
}
.accent, .go.accent, .cta.accent, .mh-cta.accent {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.accent:hover, .go.accent:hover, .cta.accent:hover, .mh-cta.accent:hover {
    background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2);
    box-shadow: 0 10px 24px -14px rgba(44, 91, 255, .7);
}
.quiet, .read-all {
    display: inline-block; background: var(--card); color: var(--ink); border: 1px solid var(--edge);
    border-radius: 999px; padding: 9px 16px; font: inherit; font-family: var(--font-display);
    font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.quiet:hover, .read-all:hover { border-color: var(--ink); }
.danger, .quiet.gone, .drop {
    background: var(--card); color: #a5322a; border: 1px solid #f3d4d1; border-radius: 999px;
    padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.danger:hover, .quiet.gone:hover, .drop:hover { background: #fdf2f1; border-color: #e6b3ad; }

/* ---- Fields -------------------------------------------------------------- */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus,
.filters input:focus, .filters select:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
/* iOS Safari zooms into any field under 16px when it is tapped. */
@media (max-width: 640px) { .field input, .field select, .field textarea { font-size: 16px; } }

/* ---- Filter row ---------------------------------------------------------- */
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
           padding: 14px 16px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600;
                 letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.filters input, .filters select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line);
                                  border-radius: 9px; background: var(--card); min-width: 0; }
.filters button { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 16px; border: 1px solid var(--ink);
                  border-radius: 9px; background: var(--ink); color: #fff; cursor: pointer; }
.filters a.reset { font-size: 13px; color: var(--muted); align-self: center; padding-bottom: 2px; }

/* ---- Tabs ---------------------------------------------------------------- */
.tabs, .ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.tabs > *, .ptabs a { padding: 9px 14px; font-size: 14px; text-decoration: none; color: var(--muted);
                      border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs > a:hover, .ptabs a:hover { color: var(--ink); }
.tabs > .on, .ptabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* ---- Empty states --------------------------------------------------------
   A room with nothing in it should say what it is for and hold the door open,
   not apologise. */
.empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 30px 24px 26px; color: var(--muted); font-size: 13.5px; text-align: center; line-height: 1.55;
}
.empty h2 { font-size: 16px; margin: 0; color: var(--ink); }
.empty p  { color: var(--muted); margin: 0; font-size: 14px; }
.mh-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 20px;
            color: var(--muted); font-size: 13.5px; text-align: center; line-height: 1.5; }
.mh-empty-ico, .empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
                            border-radius: 50%; color: var(--tone); background: var(--tone-bg); }
.mh-empty-ico svg, .empty-ico svg { width: 21px; height: 21px; }
.mh-cta { margin-top: 4px; }

/* ---- The band ------------------------------------------------------------
   A page that opens on something. Drawn — gradients, one turbulence grain —
   so there is no image here to fetch, 404 or go stale. */
.mh-hero { position: relative; overflow: hidden; border-radius: 22px; color: var(--ink); margin-bottom: 14px;
           background: var(--mh-band); border: 1px solid var(--line);
           box-shadow: 0 14px 28px -26px rgba(23, 22, 20, .5);
           animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.mh-art { position: absolute; inset: 0; pointer-events: none; }
.mh-blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .16; }
/* The three blobs are the site's own hues: the cobalt accent, its mint partner,
   and a breath of the ink, so the band is recognisably the same weather as the
   hero on www.tullunprint.com. */
.mh-blob-a { width: 340px; height: 340px; top: -140px; left: -60px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: .16; }
.mh-blob-b { width: 300px; height: 300px; bottom: -160px; left: 34%; background: radial-gradient(circle, var(--sage) 0%, transparent 70%); opacity: .22; }
.mh-blob-c { width: 380px; height: 380px; top: -110px; right: -90px; background: radial-gradient(circle, var(--ink) 0%, transparent 70%); opacity: .07; }
.mh-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .035; mix-blend-mode: multiply; }

.mh-hero-body { position: relative; display: flex; align-items: center; justify-content: space-between;
                gap: 28px; padding: 30px 34px; flex-wrap: wrap; }
.mh-hero-copy { min-width: 0; }
.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500;
              letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono);
              background: rgba(255, 255, 255, .6); border: 1px solid var(--line);
              border-radius: 999px; padding: 5px 12px 5px 10px; }
.mh-live { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px rgba(44, 91, 255, .22); }
.mh-h1 { margin: 14px 0 6px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.04em;
         line-height: 1.02; color: var(--ink); }
.mh-lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 48ch; }
.mh-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mh-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
           color: var(--ink); text-decoration: none; background: var(--card);
           border: 1px solid var(--edge); border-radius: 999px; padding: 8px 15px 8px 12px;
           transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.mh-chip svg { width: 16px; height: 16px; opacity: .85; }
.mh-chip:hover { background: var(--panel); border-color: var(--ink); transform: translateY(-1px); }
.mh-chip.mh-lead { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.mh-chip.mh-lead:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* The ring reads on the band's own paper now: an ordinary rule for the track,
   the house edge for what is still to do. */

.mh-ring-wrap { display: flex; align-items: center; gap: 22px; flex: none; }
.mh-ring { width: 132px; height: 132px; transform: rotate(-90deg); flex: none; }
.mh-ring-track { fill: none; stroke: var(--line); stroke-width: 11; }
.mh-ring-seg { fill: none; stroke: var(--tone); stroke-width: 11; stroke-linecap: round;
               animation: mh-arc .55s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(.22s + var(--i, 0) * .1s); }
.mh-ring-seg.mh-todo { stroke: var(--edge); }
/* The counter-rotation puts the text back upright inside the rotated ring. */
.mh-ring text { transform: rotate(90deg); transform-origin: 64px 64px; text-anchor: middle; }
.mh-ring-n { font-size: 30px; font-weight: 700; letter-spacing: -.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.mh-ring-l { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.mh-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mh-key li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.mh-key b { margin-left: auto; padding-left: 14px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mh-key .mh-tick { color: #5fd39b; font-weight: 600; margin-left: auto; padding-left: 14px; }
.mh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, currentColor); flex: none; }
.mh-dot.mh-todo { background: var(--edge); }

/* ---- Figures -------------------------------------------------------------
   A number worth a tile is a number somebody acts on, so every tile is a door.
   .facts/.fact are the older name for the same thing; both are drawn here. */
.mh-kpis, .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.facts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 22px; }
.mh-tile, .fact {
    position: relative; overflow: hidden; display: block; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px;
    color: inherit; text-decoration: none; box-shadow: var(--shadow);
    transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
    animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(.12s + var(--i, 0) * .06s);
}
/* The top edge carries the tone, so tiles are told apart before a word is read. */
.mh-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: .9;
                   background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 45%, transparent)); }
.mh-glow { position: absolute; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%;
           background: radial-gradient(circle, var(--tone) 0%, transparent 68%); opacity: .07;
           transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
a.mh-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 34%, var(--line)); box-shadow: var(--lift); }
a.mh-tile:hover .mh-glow { opacity: .16; transform: scale(1.12); }
a.mh-tile:hover .mh-go { opacity: 1; transform: none; }
.mh-tile-ico { position: relative; display: inline-flex; align-items: center; justify-content: center;
               width: 38px; height: 38px; border-radius: 11px; color: var(--tone); background: var(--tone-bg);
               box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 16%, transparent); }
.mh-tile-ico svg { width: 20px; height: 20px; }
.mh-lab, .fact span { position: relative; display: block; margin-top: 14px; font-size: 11.5px; font-weight: 600;
                      letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mh-val, .fact b { position: relative; display: block; margin-top: 6px; font-size: 34px; font-weight: 700;
                   letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact span { margin-top: 0; }
.fact b { margin-top: 0; margin-bottom: 6px; }
.fact.due b { color: #c03a30; }
/* A tile whose headline is a word rather than a figure. */
.fact.word b { font-size: 20px; letter-spacing: -.01em; }
.mh-note { position: relative; display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.mh-go { position: absolute; right: 16px; top: 22px; color: var(--tone); opacity: 0; transform: translateX(-5px);
         transition: opacity .18s ease, transform .18s ease; }
.mh-go svg { width: 17px; height: 17px; display: block; }

/* ---- Panel grid ---------------------------------------------------------- */
.mh-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.mh-col  { display: flex; flex-direction: column; gap: 14px; }
.cols    { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* ---- Narrow -------------------------------------------------------------- */
@media (max-width: 1080px) {
    .mh-kpis { grid-template-columns: repeat(2, 1fr); }
    .mh-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    main { padding: 18px 14px 60px; }
    .mh-hero-body { padding: 24px 20px; }
    .mh-ring-wrap { gap: 16px; }
    .mh-kpis { grid-template-columns: 1fr; }
    th, td { padding: 11px 12px; }
}

/* Switching the animations off alone would leave the entrance rules holding
   everything at opacity 0, so each is put back to its finished state by hand. */
@media (prefers-reduced-motion: reduce) {
    .mh-hero, .flash, .errors, .said, .went, .mh-ribbon, .mh-steps, .mh-tile, .fact, .mh-card {
        animation: none; opacity: 1; transform: none;
    }
    .mh-ring-seg { animation: none; opacity: 1; stroke-width: 11; }
    .mh-steps-bar i { animation: none; }
    a.mh-tile:hover, .mh-step:hover, a.mh-row:hover { transform: none; }
}


/* ---- The page band ------------------------------------------------------
   Every page opens on one, so the app reads as one place rather than as
   twenty documents with the same sidebar. Slimmer than the home page's hero,
   which has a ring to carry; this one carries a title, a sentence and
   whatever the page's own action is.
   Markup: merchant/band-open.blade.php + band-close.blade.php. */
.mh-band {
    position: relative; overflow: hidden; border-radius: 20px; color: var(--ink); margin: 0 0 16px;
    background: var(--mh-band); border: 1px solid var(--line);
    box-shadow: 0 14px 28px -26px rgba(23, 22, 20, .5);
    animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both;
}
.mh-band-body { position: relative; display: flex; align-items: center; justify-content: space-between;
                gap: 20px 24px; padding: 24px 30px; flex-wrap: wrap; }
/* A page's own header markup, whatever shape it is, laid out by the band. */
.mh-band > .mh-band-body > h1 { flex: 1 1 100%; }
.mh-band h1 { color: var(--ink); font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.035em;
              line-height: 1.05; margin: 0; }
.mh-band p.lead, .mh-band .lead { flex: 1 1 100%; color: var(--muted); font-size: 14.5px;
                                  line-height: 1.55; margin: 0; max-width: 68ch; }
.mh-band h1 + p.lead, .mh-band .top + p.lead, .mh-band .headrow + p.lead { margin-top: -4px; }
.mh-band a { color: var(--ink); }
.mh-band .top, .mh-band .headrow { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; flex-wrap: wrap; }
/* An emphasised word sits on the accent rather than being coloured by it —
   the site turns "Our Production." the same cobalt */
.mh-band em { font-style: normal; color: var(--ink);
              background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%);
              padding: 0 .06em; }

/* The page's own button, said the way the band says things: the cobalt pill the
   site uses for its primary action. */
.mh-band .cta, .mh-band .new, .mh-band .neworder, .mh-band .button, .mh-band .read-all, .mh-band .go {
    display: inline-block; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 999px;
    padding: 9px 18px; font: inherit; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; text-decoration: none;
    white-space: nowrap; cursor: pointer; transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.mh-band .cta:hover, .mh-band .new:hover, .mh-band .neworder:hover, .mh-band .button:hover,
.mh-band .read-all:hover, .mh-band .go:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent);
                                               box-shadow: 0 10px 24px -14px rgba(44, 91, 255, .7); }
.mh-band .quiet { background: var(--card); color: var(--ink); border-color: var(--edge); }
.mh-band .quiet:hover { background: var(--panel); border-color: var(--ink); }

@media (max-width: 640px) { .mh-band-body { padding: 20px 18px; } }
@media (prefers-reduced-motion: reduce) { .mh-band { animation: none; opacity: 1; transform: none; } }

/* ---- The road to the first sale (home) ----------------------------------- */
.mh-steps { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
            padding: 18px 20px 20px; margin-bottom: 14px; box-shadow: var(--shadow);
            animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: .08s; }
.mh-steps-head { display: flex; align-items: baseline; gap: 12px; }
.mh-steps-head h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.mh-steps-count { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mh-steps-bar { height: 6px; background: var(--panel); border-radius: 999px; margin: 12px 0 18px; overflow: hidden; }
.mh-steps-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent));
                  animation: mh-fill .8s cubic-bezier(.2, .7, .3, 1) both; animation-delay: .25s; }
.mh-steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.mh-step { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 13px;
           padding: 15px 16px 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px;
           transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; }
.mh-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 34%, var(--line)); box-shadow: var(--lift); }
.mh-step-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
               border-radius: 10px; color: var(--tone); background: var(--tone-bg); flex: none;
               box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 16%, transparent); }
.mh-step-ico svg { width: 18px; height: 18px; }
/* The section's own icon stays; done is a small tick on its corner, so three
   finished steps still read as three different things. */
.mh-step-ico { position: relative; }
.mh-step-ico .mh-tick { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; padding: 2px;
                        border-radius: 50%; background: #2a7d4f; color: #fff; box-shadow: 0 0 0 2px #fff; }

/* ── Popular in the catalogue ── */
.mh-pop-card { margin: 16px 0; }
.mh-pop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .mh-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-pop-item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; border-radius: 13px;
               padding: 8px 8px 12px; border: 1px solid var(--line); background: #fff;
               animation: mh-rise .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 60ms);
               transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; }
.mh-pop-item:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); }
.mh-pop-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mh-pop-shot { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: #f4f4f6;
               margin-bottom: 6px; }
.mh-pop-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.mh-pop-item:hover .mh-pop-shot img { transform: scale(1.04); }
.mh-pop-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
                background: #18181b; color: #fff; }
.mh-pop-name { font-size: 14px; font-weight: 600; padding: 0 4px; }
.mh-pop-meta { font-size: 12.5px; color: var(--muted); padding: 0 4px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .mh-pop-item, .mh-pop-shot img { animation: none; transition: none; } }
.mh-step h3 { font-size: 14px; font-weight: 600; margin: 6px 0 0; }
.mh-step p { font-size: 13px; color: var(--muted); margin: 0; flex: 1; line-height: 1.45; }
.mh-state { font-size: 12px; font-weight: 600; color: var(--tone-ink); display: inline-flex; align-items: center; gap: 6px; }
.mh-step.mh-done { background: linear-gradient(180deg, #eef2ff, #fff); }
.mh-step .mh-num { position: absolute; top: 14px; right: 16px; font-size: 12px; font-weight: 700;
                   color: var(--muted); opacity: .5; font-variant-numeric: tabular-nums; }

/* ── The steps to a first sale, one illustrated card each ── */
.mh-first-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.mh-first { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border-radius: 16px; background: #fff;
         border: 1px solid var(--line); color: inherit; text-decoration: none;
         transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease; }
.mh-first:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--edge); }
.mh-first:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mh-first.is-done { background: #e9f5ee; border-color: #cfe8d9; }
.mh-first-art { display: block; margin: -2px 0 10px; }
.mh-first-art svg { display: block; width: 100%; height: auto; }
.mh-first-art img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.mh-first-step { font-size: 14px; color: var(--muted); }
.mh-first h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.mh-first p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #3f3f46; flex: 1; }
.mh-first-deal { font-weight: 600; color: var(--accent-ink); }
.mh-first-time { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.mh-first-foot { margin-top: 14px; min-height: 44px; display: flex; align-items: center; }
.mh-first-done { display: inline-flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 700; color: #0f4d2d; }
.mh-first-done .mh-tick { width: 34px; height: 34px; flex: none; }
.mh-first-btn { display: block; width: 100%; text-align: center; padding: 12px 16px; border-radius: 10px; font-weight: 700;
             font-size: 15px; border: 1px solid var(--edge); color: var(--ink); background: #fff; }
.mh-first.is-next .mh-first-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mh-first.is-next:hover .mh-first-btn { background: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .mh-first { transition: none; } .mh-first:hover { transform: none; } }

/* ── The corner helper (same panel as the public site) ── */
/* Above whatever the page has fixed to the bottom of the screen, not on top
   of it: on the product wizard the helper sat over "Continue to details".
   A page with a bar of its own says how tall it is in --tp-floor. */
.help { position: fixed; right: 28px; bottom: calc(28px + var(--tp-floor, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
/* The panel swaps halves with the hidden attribute; the flex rules below would otherwise override it. */
.help [hidden] { display: none !important; }
/* Cobalt rather than ink: the page runs through dark bands, and an ink button would vanish on them. */
.help-open { position: relative; width: 60px; height: 60px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 18px 36px -14px rgba(20,40,140,0.6); transition: transform .2s ease, background .2s ease; }
.help-open:hover { transform: translateY(-3px); background: var(--accent-2); }
.help-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.help-panel { width: min(360px, calc(100vw - 40px)); border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(10,10,11,0.45); animation: helpIn 0.35s ease; }
@keyframes helpIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.help-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff; }
.help-head__badge { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.help-head__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-head__who b { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.help-head__who span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-muted); }
.help-head__shut { margin-left: auto; width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; transition: background .2s ease; }
.help-head__shut:hover { background: rgba(255,255,255,0.24); }

.help-list { height: 290px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.help-row { display: flex; }
.help-row--you { justify-content: flex-end; }
.help-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; }
.help-row--them .help-bubble { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.help-row--you .help-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.help-row.is-thinking .help-bubble { letter-spacing: 0.2em; color: var(--muted); }

.help-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 14px; background: var(--paper); }
.help-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); font-size: 12.5px; color: var(--ink); transition: border-color .2s ease; }
.help-chips button:hover { border-color: var(--ink); }
.help-chips .help-ask { width: 100%; margin-top: 4px; border-radius: 12px; padding: 9px 12px; font-weight: 600; color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.help-chips .help-ask:hover { border-color: var(--accent); }

.help-foot { display: flex; gap: 8px; padding: 12px; background: var(--card); border-top: 1px solid var(--line); }
.help-foot input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); font-size: 14px; color: var(--ink); }
.help-foot input:focus { outline: none; border-color: var(--ink); }
.help-foot button { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; }

.help-write { padding: 16px; background: var(--paper); overflow-y: auto; max-height: min(62vh, 470px); }
.help-form { display: flex; flex-direction: column; gap: 4px; }
.help-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.help-form input, .help-form select, .help-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--card); font-size: 14px; color: var(--ink); }
.help-form textarea { resize: vertical; min-height: 92px; }
.help-form input:focus, .help-form select:focus, .help-form textarea:focus { outline: none; border-color: var(--ink); }
/* Off-screen rather than display:none — a field that is not rendered is one nothing fills in. */
.help-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.help-send { margin-top: 14px; width: 100%; padding: 12px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 14px; transition: background .2s ease; }
.help-send:hover:not(:disabled) { background: var(--accent-2); }
.help-send:disabled { background: var(--bg-2); color: var(--muted-2); cursor: not-allowed; }
.help-bad { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #b3261e; }
.help-or { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.help-or a { color: var(--ink); border-bottom: 1px solid var(--edge); }

.help-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 0; }
.help-sent__tick { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 17px; }
.help-sent b { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.help-sent p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.help-again { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--card); font-size: 13px; }
.help-again:hover { border-color: var(--ink); }

@media (max-width: 720px) {
  .help { right: 16px; bottom: 16px; }
  .help-open { width: 54px; height: 54px; }
  .help-list { height: 44vh; }
}
@media (prefers-reduced-motion: reduce) { .help-panel { animation: none; } }

/* ── The two offers under the first-sale steps ── */
.mh-offers { display: grid; gap: 16px; margin: 16px 0; }
.mh-offer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 24px 28px; overflow: hidden; }
.mh-offer:has(> .mh-offer-copy + .mh-offer-art) { grid-template-columns: minmax(0, 1fr) 300px; }
.mh-offer h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.mh-offer p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 44ch; }
.mh-offer-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.mh-offer-btn:hover { background: var(--accent); transform: translateY(-1px); }
.mh-offer-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.mh-offer-perks li { position: relative; padding-left: 28px; }
.mh-offer-perks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); }
.mh-offer-perks li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 3px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg); }
.mh-offer-art { position: relative; margin: -24px -28px -24px 0; align-self: stretch; min-height: 180px; }
.mh-offer-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-offer-tag { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 12px; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; box-shadow: var(--lift); }
@media (max-width: 1100px) { .mh-offer, .mh-offer:has(> .mh-offer-copy + .mh-offer-art) { grid-template-columns: 1fr; } .mh-offer-art { margin: 8px -28px -24px; min-height: 200px; } }

/* ── A picture on its way ──
   The libraries used to sit as blank boxes for the seconds their pictures
   took, which reads as "there is nothing here" rather than "it is coming".
   .tp-skel gives the box the catalogue photograph's sweep (catalog-item
   .shot-skel) instead, and the picture's own onload adds .ready the moment
   it is in.

   Painted with background-image alone, so it works on an <img> as well as on
   the box around one (an <img> cannot carry ::after), whatever colour the
   page gives the box. The gradient is three boxes wide and always covers the
   box; only its position moves. A page rule with the `background` shorthand
   at the same weight would wipe it, so those rules say background-color. */
.tp-skel:not(.ready) {
    background-image: linear-gradient(105deg, var(--line) 32%, rgba(255,255,255,.9) 50%, var(--line) 68%);
    background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
    animation: tp-skel-sweep 1.3s ease-in-out infinite;
}
/* A picture inside a skeleton box fades in rather than snapping over it. */
.tp-skel > img { transition: opacity .2s ease; }
.tp-skel:not(.ready) > img { opacity: 0; }
@keyframes tp-skel-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .tp-skel:not(.ready) { animation: none; }
    .tp-skel > img { transition: none; }
}