/* ═══════════════════════════════════════════════════════════════════════════
   sk-mobile.css — the mobile correction layer
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      mobile-only corrections to surfaces the redesign has not yet
              rebuilt, plus the mobile sizing of the sk-* components.
   REQUIRES:  sk-tokens.css, sk-buttons.css. Loaded last.
   NEVER:     `!important`.

   WHY THIS FILE EXISTS
   Founder review of the phone layout, and every item in it was measurable:

     - Nine buttons all rendered at 48px, stacked full width. On a 390px screen
       that reads as a column of slabs rather than a hierarchy.
     - The cost table kept a squeezed multi-column layout, so the supporting
       note wrapped mid-phrase and the total wrapped across three lines.
     - The page carried 24 distinct font sizes, many of them fractional rem
       values (12.16, 13.6, 14.4, 15.2) that no scale would ever produce
       deliberately.
     - A call-to-action rendered as underlined body text.

   WHAT IT DOES NOT DO
   It does not attempt to re-typeset all of landing.css. That file is frozen and
   its 36 breakpoints are the reason the fractional sizes exist; unpicking them
   belongs to the full responsive pass, where each section is redesigned per
   breakpoint rather than patched. This file corrects the surfaces the founder
   named, and nothing here needs `!important` to do it.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Buttons ───────────────────────────────────────────────────────────
       48px is a page-level CTA on a wide screen. Stacked full width on a
       phone at that height it read as oversized and boxy — three of them in a
       row is a lot of blue. 40px is still a full, real touch target: `.sk-btn`
       already carries an invisible `::after` overlay at ≤991px (sk-buttons.css)
       that pads the actual hit area out to 44px regardless of the painted
       box, so shrinking the visible button costs nothing in reach. */
    .sk-btn--lg {
        height: var(--sk-btn-h);
        padding: 0 18px;
        font-size: 0.875rem;
    }

    /* The pair of secondary actions (Book a demo / Sign In, See pricing / Book
       a demo) should read as lighter than the primary CTA above them, not the
       same size doubled. Compact, still real buttons, still 44px to the touch
       target via the same ::after overlay. */
    .sk-cta-pair > .sk-btn,
    .prod-hero-cta .sk-btn:not(:first-child) {
        height: var(--sk-btn-h-sm);
        padding: 0 14px;
        font-size: 0.8125rem;
    }

    /* The funnel keeps its own height: it is sized to the 48px input above it,
       and shrinking it would reintroduce the mismatch stage 1C fixed. */
    .sk-btn--field { height: 48px; }

    /* ── The founder credit link ───────────────────────────────────────────
       It was inheriting the default underline and reading as body text. */
    .sk-credit__text a {
        text-decoration: none;
        color: var(--primary);
    }

    /* ── The app switcher ──────────────────────────────────────────────────
       Seven tabs need 734px and the phone gives them 337, so it showed three
       and sliced the fourth mid-word at both edges. A strip cut off like that
       does not read as scrollable, it reads as broken.

       It wraps now. Nothing is hidden, nothing is cut, and the rows centre so
       the block looks composed rather than clipped. The chips lose their long
       padding to keep the wrap to two rows on a 375px screen. */
    .showcase__tabs {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        gap: 6px;
    }

    .showcase__tab {
        padding: 7px 10px;
        font-size: 0.75rem;
        gap: 6px;
    }

    /* 0.75rem, not 0.6875rem. This is an icon glyph rather than read text, so
       the floor is arguably not its business, but the guard cannot tell the
       difference and an exemption is not worth the hole it would leave. */
    .showcase__tab-icon {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }
}

/* ── Inline calls to action ────────────────────────────────────────────────
   An unclassed <a> inside a paragraph inherits the browser's underline and
   reads as a footnote rather than as the action it is. These carry the link
   colour and weight instead, and reveal the underline on hover, which is where
   an underline actually helps.

   Outside the media query on purpose: a link that looks like a citation on a
   laptop and like a button on a phone is worse than either. */
.sk-credit__text a,
.sk-inline-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--primary);
}
.sk-credit__text a:hover,
.sk-inline-link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}
.sk-inline-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE COST TABLE ON A PHONE
   ───────────────────────────────────────────────────────────────────────────
   The founder's options were "make it horizontally scrollable, or choose a
   better UI". Horizontal scroll is wrong here: it would push the price out of
   view of the item it belongs to, and comparing the two is the entire purpose
   of the table.

   So each row becomes a block instead. The item and its price sit on one line,
   which is the comparison, and the supporting note gets the full width beneath
   instead of a squeezed column, which is what was wrapping mid-phrase.

   These are landing.css class names, but nothing being overridden here is
   `!important`, so this needs no escalation.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .cmp-table,
    .cmp-table tbody,
    .cmp-table tr { display: block; width: 100%; }

    /* The header row labels columns that no longer exist once rows stack. */
    .cmp-table thead { display: none; }

    .cmp-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 2px 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-light);
    }

    .cmp-table td {
        display: block;
        padding: 0;
        border: 0;
    }

    /* landing.css already hides the "Billed" column on a phone, but with a
       single-class selector. The rule above is more specific, so it silently
       brought the column back as an empty block and added ~30px to every row.
       Restated here at matching specificity. */
    .cmp-table td.cmp-basis { display: none; }

    /* The GST and total rows carry an unclassed empty <td> where the "Billed"
       column sits. It has no class to hide it by, so it claimed column 2 and
       pushed the amount onto a second line, right aligned under the label. */
    .cmp-table td:empty { display: none; }

    /* Item name and price on the first line, note across the full width under
       it. `grid-column: 1 / -1` is what buys the note its own row. */
    .cmp-table td:first-child { grid-column: 1; }
    .cmp-table td.cmp-r { grid-column: 2; text-align: right; white-space: nowrap; }

    .cmp-tool {
        display: block;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .cmp-range {
        display: block;
        grid-column: 1 / -1;
        margin-top: 3px;
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .cmp-amt { font-size: 0.9375rem; font-weight: 700; }

    .cmp-gst td:first-child,
    .cmp-total td:first-child { font-size: 0.875rem; line-height: 1.45; }

    .cmp-total td { font-weight: 700; }

    /* The stepper in the table header. Its controls were 28px, under the touch
       minimum, on the one control a visitor is meant to play with. */
    .cmp-step {
        min-width: 34px;
        min-height: 34px;
    }
}

/* ═══ HERO SCREENSHOT: THE WHOLE IMAGE ON A PHONE ═══════════════════════════
   landing.css crops the hero screenshot to a 4:3 box with `object-fit: cover`
   below 768px. On a 390px screen that throws away roughly a third of every
   screenshot, which is the one thing a product visual cannot afford: the
   founder's standing rule is the full uncropped screenshot, never a crop.

   landing.css is frozen, so this does not edit it. `.sk-stage` / `.sk-shot`
   are second classes on the same elements, at equal specificity, in a file
   that loads after landing.css — so source order settles it and no
   `!important` is needed.

   16 / 10 is the shape of the real screenshots (3024 x 1794 and 3024 x 1898),
   so `contain` letterboxes by a few pixels at most while cutting nothing. The
   stage keeps ONE ratio across all seven shots, because a stage that resizes
   per tab makes the whole page below it jump.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .sk-stage { aspect-ratio: 16 / 10; }
    .sk-shot { object-fit: contain; object-position: center; }
}

/* ═══ HERO SWITCHER: TABS OFF, IMAGE THINNER-FRAMED, ON A PHONE ═══════════════
   Desktop keeps the seven-tab switcher above the frame. On a phone that row
   was seven pill buttons of chrome sitting above the thing they introduce, so
   it comes off entirely; the default screenshot (already the eager, first-
   paint one) just shows on its own. Nothing routes through the tabs that the
   nav, ecosystem section and footer do not already offer as real links.

   The traffic-light bar above the screenshot is also trimmed everywhere: 9px
   of padding and a 10px dot read fine at 1440px and heavy at 390px. */
.sk-tabs { display: none; }
.sk-chrome { padding: 6px 12px; gap: 5px; }
.sk-chrome .showcase__dot { width: 8px; height: 8px; }
.sk-chrome .showcase__path { font-size: 0.75rem; margin-left: 8px; }

@media (min-width: 768px) {
    .sk-tabs { display: flex; }
}