/* ==========================================================================
   Product page components
   --------------------------------------------------------------------------
   The reusable furniture of a long-form product page: gallery sub-headings,
   checked and bulleted lists, the numbered request flow, the screenshot
   gallery, the specification table, the pricing card, the notes and the fine
   print.

   These used to live inside vibecash.css, which worked while VibeCash was the
   only product page using them. The Preads page needs the same components, so
   they were lifted here rather than copied: two product pages must not each
   carry their own divergent copy of a pricing card.

   Both pages/vibecash.blade.php and pages/preads.blade.php load this file.
   Anything specific to one product belongs in that product's own stylesheet
   (vibecash.css, preads.css) - see the portrait-capture overrides in
   vibecash.css for the pattern.

   No colour is hardcoded to a fixed hex where the theme already provides one:
   the CSS custom properties the theme defines are used throughout, so these
   components follow light and dark mode without a second set of rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section sub-headings, used to separate the screenshot galleries and the
   accounts sub-list within a section.
   -------------------------------------------------------------------------- */

.hs-gallery-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 2.25rem 0 1rem;
    color: var(--hs-text, inherit);
}

.hs-gallery-title:not(:first-of-type) {
    margin-top: 2.75rem;
}

/* --------------------------------------------------------------------------
   Checked and plain lists
   -------------------------------------------------------------------------- */

.hs-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-check-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    line-height: 1.65;
    color: var(--hs-muted, inherit);
}

.hs-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--hs-primary, currentColor);
    opacity: 0.75;
}

.hs-check-list strong {
    color: var(--hs-text, inherit);
}

.hs-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-plain-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.6;
    color: var(--hs-muted, inherit);
}

.hs-plain-list li::before {
    content: "\2022";
    position: absolute;
    left: 0.25rem;
    color: var(--hs-primary, currentColor);
    font-weight: 700;
}

.hs-plain-list strong {
    color: var(--hs-text, inherit);
}

/* --------------------------------------------------------------------------
   How It Works: the numbered flow
   -------------------------------------------------------------------------- */

.hs-flow {
    list-style: none;
    counter-reset: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

@media (min-width: 768px) {
    .hs-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .hs-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hs-flow li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem;
    line-height: 1.6;
    color: var(--hs-muted, inherit);
    border-top: 1px solid var(--hs-border, rgba(128, 128, 128, 0.2));
    background: var(--hs-primary-light);
    border-radius: 8px;
}

.hs-flow li:first-child,
.hs-flow li:nth-child(2),
.hs-flow li:nth-child(3) {
    border-top: 0;
}

@media (min-width: 768px) {
    .hs-flow li:nth-child(2),
    .hs-flow li:nth-child(3) {
        border-top: 0;
    }
}

@media (min-width: 1200px) {
    .hs-flow li:nth-child(2),
    .hs-flow li:nth-child(3) {
        border-top: 1px solid var(--hs-border, rgba(128, 128, 128, 0.2));
    }

    .hs-flow li:nth-child(-n+3) {
        border-top: 0;
    }
}

.hs-flow-n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--hs-primary, currentColor);
}

.hs-flow code {
    font-size: 0.85em;
    white-space: nowrap;
}

/* On a narrow screen the nowrap above has to go. An inline box with
   white-space: nowrap cannot be broken, so one long token - GET /api/v1/offers,
   AllowOverride - widens every ancestor and pushes the whole document past the
   viewport. Measured at 320px: 332px of scrollWidth against a 320px viewport.
   The nowrap is kept at wider sizes, where it stops identifiers breaking across
   lines in the flow diagram, and relaxed only where there is no room.

   This block lists .hs-flow code only. A relaxation for .hs-spec-table td code
   belongs next to that rule instead, which is further down this file: it has the
   same specificity as the media query, so whichever comes last wins, and a
   relaxation written here was silently overridden by the nowrap below. */
@media (max-width: 575.98px) {
    .hs-flow code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   Screenshot gallery
   -------------------------------------------------------------------------- */

.hs-shot {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hs-border, rgba(128, 128, 128, 0.22));
    background: var(--hs-surface, transparent);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hs-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

/* Portrait captures read better uncropped than letterboxed. The generic rule
   lives here so any product page can opt in; vibecash.css adds its own
   file-specific overrides for the captures it knows about. */
.hs-shot--portrait img {
    aspect-ratio: 4 / 5;
}

.hs-shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.55);
}

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

    .hs-shot:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Requirements table
   -------------------------------------------------------------------------- */

.hs-spec-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.hs-spec-table th,
.hs-spec-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hs-border, rgba(128, 128, 128, 0.2));
    line-height: 1.55;
}

.hs-spec-table thead th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hs-muted, inherit);
    opacity: 0.85;
}

.hs-spec-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
    color: var(--hs-text, inherit);
}

.hs-spec-table td code {
    font-size: 0.85em;
    white-space: nowrap;
}

/* Same reasoning as the .hs-flow code relaxation above, and it has to be written
   here rather than up there: this rule and the media query that overrides it have
   identical specificity, so the later one wins. Relaxing .hs-spec-table from the
   earlier block left POST /api/v1/fingerprint unwrappable, which held the
   endpoints table at 310px inside a 280px column at a 320px viewport and pushed
   the whole document to 330px. */
@media (max-width: 575.98px) {
    .hs-spec-table td code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .hs-spec-table tbody td:first-child {
        white-space: normal;
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   Pricing card
   -------------------------------------------------------------------------- */

.hs-price-card {
    border-radius: 20px;
    border: 1px solid var(--hs-border, rgba(128, 128, 128, 0.22));
    background: var(--hs-surface, transparent);
    box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.5);
    overflow: hidden;
}

.hs-price-head {
    padding: 1.75rem 1.75rem 0;
}

.hs-price-head h3 {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.hs-price-head p {
    margin: 0;
    font-size: 0.95rem;
}

.hs-price-body {
    padding: 1.25rem 1.75rem 1.5rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hs-price-now {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--hs-text, inherit);
}

.hs-price-currency {
    font-size: 1.6rem;
    font-weight: 700;
    margin-right: 0.1rem;
    vertical-align: 0.35em;
}

.hs-price-was {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--hs-muted, inherit);
    text-decoration: line-through;
    opacity: 0.75;
}

.hs-price-ends {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    color: #fff;
    background: var(--hs-primary, currentColor);
}

.hs-price-foot {
    padding: 0 1.75rem 1.75rem;
}

.hs-price-includes {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

@media (min-width: 576px) {
    .hs-price-includes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hs-price-includes li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--hs-muted, inherit);
}

.hs-price-includes i {
    color: var(--hs-primary, currentColor);
    font-size: 1.05rem;
    line-height: 1.35;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Notes
   --------------------------------------------------------------------------
   Two kinds, and they must not look alike:

   .hs-note--placeholder  a gap in the commercial terms. Visible to visitors,
                          because a buyer has to know the terms are not set.
   .hs-note--owner        a data fault in the solution record. Only renders while
                          the record is wrong, so a visitor should never see it.
   -------------------------------------------------------------------------- */

.hs-note {
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: 1rem 0;
    font-size: 0.92rem;
    line-height: 1.6;
    border: 1px dashed var(--hs-border, rgba(128, 128, 128, 0.35));
    background: rgba(127, 127, 127, 0.06);
    color: var(--hs-muted, inherit);
}

.hs-note strong {
    color: var(--hs-text, inherit);
}

.hs-note code {
    font-size: 0.85em;
}

.hs-note-meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.hs-note--placeholder {
    border-style: dashed;
}

.hs-note--owner {
    border-style: solid;
    border-color: #b45309;
    background: rgba(180, 83, 9, 0.09);
}

.hs-note--owner strong,
.hs-note--owner .hs-note-meta {
    color: #b45309;
}

/* --------------------------------------------------------------------------
   Hero and final-CTA overflow
   --------------------------------------------------------------------------
   premium.css positions the decorative glow orb at `right: -100px` inside the
   hero, and nothing on the section clips it, so on a 320px viewport the orb
   pushes the document past the screen and the page scrolls sideways. The orb is
   a blurred radial gradient that fades to transparent, so clipping it at the
   viewport edge is visually indistinguishable from letting it run off.

   This was originally scoped to the Preads page alone, where it cost 12px of
   overflow. VibeCash had the same defect at 39px, which is what happens when a
   fix is written for one page instead of for the component both pages share.
   The real fix still belongs in premium.css against .hs-glow-orb's container;
   this is the page-scoped guard until that happens.

   `clip` rather than `hidden`, so no new scroll container is created and any
   sticky descendant keeps working. `hidden` stays as the Safari < 16 fallback. */
.hd-product-page .hd-hero,
.hd-product-page .hs-final-cta {
    overflow-x: hidden;
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Breakable inline code
   --------------------------------------------------------------------------
   A product page quotes full URLs in prose - a documentation host, a postback
   URL, a cron command. A URL is a single unbreakable token by default and
   nothing in the theme sets overflow-wrap, so at a 320px viewport a
   42-character URL is wider than its column and pushes the document sideways.

   `anywhere` rather than `break-word`: the tokens that actually overflow here
   are ones with no punctuation to break on, and break-word leaves those alone.

   This cannot change anything inside .pd-code or .hs-spec-table. Both set
   white-space to pre or nowrap, which wins over overflow-wrap, and horizontal
   scrolling is the behaviour they are there to provide. */
.hd-product-page code {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Counted proof strip
   --------------------------------------------------------------------------
   Replaces the "most powerful / enterprise-grade" register with a row of numbers
   read out of the source. The numbers are the argument, so the styling stays
   quiet: no icons, no gradients, no animation.

   The 1px grid gap over a border-coloured background draws the dividers, which
   is why the cells carry their own surface colour.
   -------------------------------------------------------------------------- */

.pd-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hs-border, rgba(128, 128, 128, 0.2));
    border: 1px solid var(--hs-border, rgba(128, 128, 128, 0.2));
    border-radius: 16px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .pd-proof {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pd-proof-item {
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--hs-primary-light);
    border-radius: 8px;
}

.pd-proof-value {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hs-text, inherit);
}

.pd-proof-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--hs-muted, inherit);
}

@media (max-width: 575.98px) {
    .pd-proof-value {
        font-size: 1.75rem;
    }

    .pd-proof-label {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   Disclosure columns ("included" / "not included")
   --------------------------------------------------------------------------
   Stacks to a single column on small screens. The "not included" card is tinted
   rather than greyed, because it is the most-read part of the section: a buyer
   scanning for what they do not get should not have to hunt for it.
   -------------------------------------------------------------------------- */

.pd-not-included {
    border-color: #b45309;
    background: rgba(180, 83, 9, 0.06);
}

.pd-not-included h3 {
    color: #b45309;
}

.pd-not-included .hs-plain-list li::before {
    color: #b45309;
}

/* --------------------------------------------------------------------------
   Stack labels
   --------------------------------------------------------------------------
   Inline definition rows used in the technical section.
   -------------------------------------------------------------------------- */

.pd-stack {
    margin: 0;
    display: grid;
    gap: 0.15rem;
}

.pd-stack div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 34%) 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--hs-border, rgba(128, 128, 128, 0.2));
    font-size: 0.92rem;
    line-height: 1.55;
}

.pd-stack div:first-child {
    border-top: 0;
}

.pd-stack dt,
.pd-stack .pd-stack-key {
    font-weight: 600;
    color: var(--hs-text, inherit);
}

.pd-stack dd,
.pd-stack .pd-stack-val {
    margin: 0;
    color: var(--hs-muted, inherit);
}

@media (max-width: 575.98px) {
    .pd-stack div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* --------------------------------------------------------------------------
   Learn-more cards
   --------------------------------------------------------------------------
   A card that is itself a link, used for the documentation index. The href is
   kept off the visible text so a long URL cannot widen the grid.
   -------------------------------------------------------------------------- */

.pd-learn-more {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.pd-learn-more:hover {
    transform: translateY(-4px);
}

.pd-learn-more h3 {
    font-size: 1.02rem;
    line-height: 1.45;
}

.pd-learn-more .hs-fine-print {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.82rem;
}

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

    .pd-learn-more:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Screenshot lightbox
   --------------------------------------------------------------------------
   A gallery tile carries the small render; clicking one opens the wide render.
   The two widths exist so a gallery of sixteen images costs a fraction of a
   gallery of sixteen full-resolution captures.

   A <dialog> is used rather than a hand-rolled overlay so the browser supplies
   the backdrop, the focus trap, Escape-to-close and the inert background for
   free. [open] is what display:flex keys off, and showModal() sets it. */
.hs-shot-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: inherit;
}

.hs-shot-btn:focus-visible {
    outline: 2px solid var(--hs-primary, currentColor);
    outline-offset: 3px;
}

.hs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(9, 12, 20, 0.82);
    border: 0;
}

.hs-lightbox[open] {
    display: flex;
}

.hs-lightbox img {
    max-width: 100%;
    max-height: 88vh;
    height: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.hs-lightbox figcaption {
    margin-top: 0.9rem;
    max-width: 60rem;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Fine print
   -------------------------------------------------------------------------- */

.hs-fine-print {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--hs-muted, inherit);
    opacity: 0.9;
    margin-top: 1.5rem;
}

.hs-fine-print code {
    font-size: 0.85em;
}