/* =============================================================================
   how-it-works.css — /how-it-works only.

   This page is built ON TOP of home-next-v10.css, not beside it. That file is
   loaded first and supplies every token (--ink, --pink, --card, --line, --sp,
   the spacing scale, --ease) plus the whole shared component set the page
   reuses verbatim: .v10-wrap, .v10-h1/h2/h3/h4, .v10-kicker, .v10-lede,
   .v10-dek, .v10-btn, .v10-link, .v10-sec, .v10-head, .v10-journey/.v10-jcard,
   .v10-panel, .v10-set, .v10-tag, .v10-badge, .v10-chip, .v10-surf, .v10-faq
   and .v10-close.

   Everything below is ONLY what this page adds and the homepage has no use
   for. Nothing here restates a token or re-skins a shared component — a second
   definition of .v10-btn on one page is how two buttons start to differ.

   The page body carries `body.v10` so all of the above applies. Rules here are
   scoped under `body.hiw` as well, so a class name can never leak onto the
   homepage or onto the 241 other pages that load the shared chrome.

   RAW <link>, so app.js:389 stamps it immutable for a year. Bump the ?v= token
   in how-it-works.pug on EVERY edit to this file, or returning visitors keep
   the old bytes and the page renders half-styled.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 · HERO STRIP — one product, the photo you took, then what came back.
   Four tiles, the first badged Original. Same anatomy as the homepage's
   .v10-set but full-bleed inside the wrap and captioned, so it reads as a
   sequence rather than a gallery.
   -------------------------------------------------------------------------- */
body.hiw .hiw-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1vw, 14px);
    margin-top: clamp(34px, 4vw, 56px);
}
body.hiw .hiw-strip > figure {
    position: relative;
    margin: 0;
    border-radius: var(--r-img);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line-img);
    aspect-ratio: 4 / 5;
}
body.hiw .hiw-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The label sits ON the image, bottom-left, same treatment as .v10-set__t so
   the two read as one system. figcaption rather than a span: each tile is a
   figure and the caption is its real caption. */
body.hiw .hiw-strip figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: var(--r-pill);
}
body.hiw .hiw-strip__cap {
    margin-top: 14px;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   2 · THE COMPARISON — writing prompts vs picking the job.
   Two panels, never a table: the two sides are not the same shape (one is a
   loop, one is a list), and forcing them into paired rows would invent an
   equivalence that is not there.
   -------------------------------------------------------------------------- */
body.hiw .hiw-cmp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
}
body.hiw .hiw-cmp__col {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(24px, 2.6vw, 36px);
}
/* The DesignerBox side is the pink one. One hue, flat fill, ink text — never
   pink text and never white on pink (the identity rule in home-next-v10.css). */
body.hiw .hiw-cmp__col--ours {
    background: var(--pink-2);
    border-color: transparent;
}
body.hiw .hiw-cmp__k {
    display: inline-flex;
    align-items: center;
    font-family: var(--fm);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--paper);
    padding: 5px 12px;
    border-radius: var(--r-pill);
}
body.hiw .hiw-cmp__col--ours .hiw-cmp__k {
    background: #fff;
    color: var(--ink);
}
body.hiw .hiw-cmp__col .v10-h3 {
    margin-top: var(--s-2);
    max-width: 18ch;
}
body.hiw .hiw-cmp__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--s-3);
}
body.hiw .hiw-cmp__list li {
    display: flex;
    gap: 11px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
}
body.hiw .hiw-cmp__col--ours .hiw-cmp__list li { color: var(--ink); }
/* Marker glyphs are CSS, not characters in the markup: a screen reader should
   read the sentence, not "dot, dot, dot". */
body.hiw .hiw-cmp__list li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--ink-3);
}
body.hiw .hiw-cmp__col--ours .hiw-cmp__list li::before { background: var(--ink); }

/* -----------------------------------------------------------------------------
   3 · THE FLOW — what the page does between your click and the download.
   Four stages in order, connected. No durations: nothing here is timed, and a
   number nobody measured is exactly the claim the truthfulness gates exist to
   stop.
   -------------------------------------------------------------------------- */
body.hiw .hiw-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 16px);
    counter-reset: hiw-stage;
}
body.hiw .hiw-flow__i {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(22px, 2.2vw, 30px);
}
body.hiw .hiw-flow__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pink);
    color: var(--ink);
    font-family: var(--fd);
    font-weight: 620;
    font-size: 14px;
}
body.hiw .hiw-flow__i .v10-h4 { margin-top: var(--s-2); }
body.hiw .hiw-flow__i .v10-sub { margin-top: 8px; }
/* The connector. Decorative, so it is hidden from assistive tech by being a
   pseudo-element, and it is dropped on the last card and at every width where
   the cards stop sitting in one row. */
body.hiw .hiw-flow__i:not(:last-child)::after {
    content: '';
    position: absolute;
    top: clamp(22px, 2.2vw, 30px);
    right: -webkit-calc(clamp(10px, 1.2vw, 16px) * -1);
    right: calc(clamp(10px, 1.2vw, 16px) * -1);
    width: clamp(10px, 1.2vw, 16px);
    height: 1px;
    margin-top: 17px;
    background: var(--line);
}

/* -----------------------------------------------------------------------------
   4 · OUTPUTS — what you can ship from one product.
   A photo tile with the job name under it. The tiles are the proof; the words
   only name them.
   -------------------------------------------------------------------------- */
body.hiw .hiw-out {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
}
body.hiw .hiw-out__i {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(10px, 1vw, 14px);
    display: flex;
    flex-direction: column;
    transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
body.hiw .hiw-out__i:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(20, 20, 20, 0.09);
}
@media (prefers-reduced-motion: reduce) {
    body.hiw .hiw-out__i,
    body.hiw .hiw-out__i:hover { transition: none; transform: none; }
}
body.hiw .hiw-out__ph {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--paper);
}
body.hiw .hiw-out__ph img { width: 100%; height: 100%; object-fit: cover; }
body.hiw .hiw-out__txt { padding: var(--s-2) 8px 8px; }
body.hiw .hiw-out__txt .v10-sub { margin-top: 6px; }
/* The studio each output comes from. Reuses the shared .v10-tag pill, so the
   tag on this page is the same object as the tag on the homepage. */
body.hiw .hiw-out__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--s-2);
}

/* -----------------------------------------------------------------------------
   4b · THE STUDIOS BAND. Reuses .v10-sellers, which the homepage sizes at
   repeat(5, 1fr) for its five selling platforms. There are FOUR studios, so
   without this the row renders four cards across five columns and leaves a
   dead sixth of the band empty on the right. Column count only — the card
   itself, its hover and its pink third child all stay the shared component.
   -------------------------------------------------------------------------- */
body.hiw #studios .v10-sellers { grid-template-columns: repeat(4, 1fr); }

/* -----------------------------------------------------------------------------
   5 · COST BAND — the credit arithmetic, inside the shared white .v10-panel.
   Only the number grid is new.
   -------------------------------------------------------------------------- */
body.hiw .hiw-cost {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
    margin-top: var(--s-4);
}
body.hiw .hiw-cost__i {
    border-top: 1px solid var(--line);
    padding-top: var(--s-2);
}
body.hiw .hiw-cost__n {
    display: block;
    font-family: var(--fd);
    font-weight: 620;
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}
body.hiw .hiw-cost__l { display: block; margin-top: 10px; }

/* -----------------------------------------------------------------------------
   6 · RESPONSIVE. Breakpoints match home-next-v10.css (1080 / 940 / 620) so a
   section of this page never reflows at a width the rest of the page does not.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    body.hiw .hiw-out { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
    body.hiw .hiw-cmp { grid-template-columns: 1fr; }
    body.hiw .hiw-flow { grid-template-columns: repeat(2, 1fr); }
    /* Two-up: the connector would point at a card on the row below. */
    body.hiw .hiw-flow__i:not(:last-child)::after { display: none; }
    body.hiw .hiw-cost { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    /* The strip stays four-across on phones on purpose. It is a SEQUENCE — one
       product shown four ways — and breaking it into two rows loses the reading
       order that carries the whole point.

       The LABEL, however, comes off the image. At 375px each tile is ~78px
       wide, so an overlaid pill wraps to two lines and covers most of the
       photo it is labelling — measured, not guessed. Below the image it stays
       readable and the picture stays visible. Moving it out means the figure
       can no longer own the aspect ratio, so the img takes it instead. */
    body.hiw .hiw-strip { gap: 6px; }
    body.hiw .hiw-strip > figure {
        aspect-ratio: auto;
        overflow: visible;
        border: 0;
        background: none;
    }
    /* `height: auto` is required, not cosmetic. The base rule sets height:100%
       against a figure that owned the aspect ratio; with that moved to the img,
       a leftover 100% resolves against an auto-height parent and the caption
       escapes the figure box and lands on top of the sentence below it. */
    body.hiw .hiw-strip img {
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 14px;
        border: 1px solid var(--line-img);
    }
    body.hiw .hiw-strip figcaption {
        position: static;
        background: none;
        padding: 7px 0 0;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--ink-2);
        text-align: center;
    }
    body.hiw .hiw-out { grid-template-columns: 1fr; }
    body.hiw .hiw-flow { grid-template-columns: 1fr; }
}