/* Techromatic - Pricing
 * Namespace: .trph-*  ·  loaded only on /pricing/
 *
 * The design language is inherited wholesale from brand-tokens.css and the
 * homepage. Nothing here introduces a colour, a face, or a motion primitive
 * that the site does not already use. What is new is the STRUCTURE: this page
 * is a rate sheet - one number, then every rule that moves it, in order.
 *
 * Shared classes restated locally because their definitions live in
 * homepage.css / services-page.css, neither of which is enqueued on this page:
 *   .tr-eyebrow--indigo / --celadon   (--lime comes from pages.css)
 *   .tr-crosssell*
 * .tr-cta-band* and .tr-page-hero* come from pages.css and are NOT restated.
 *
 * BOX MODEL - the theme is box-sizing: content-box globally, and every other
 * section on the site depends on that: `max-width: 1420px; padding: 0 32px`
 * describes a 1420px CONTENT box with the gutter sitting outside it, landing
 * the content edge flush with the header pill and the CTA band inset. Forcing
 * border-box on those wrappers renders the page 64px narrower than the rest
 * of the site. Do not add it to the shared-measure rule below. Inner cards
 * that combine max-width with padding still set it explicitly.
 */

/* ===================================================================
   SHARED - eyebrow colourways (restated; see header note)
   =================================================================== */

/* Eyebrow colourways live in brand-tokens.css - single source. Do not restate here. */

/* ===================================================================
   LOCAL PRIMITIVES
   =================================================================== */

/* Every full-width section shares one measure so the page tracks the
   header pill, the CTA band and the footer exactly. Content-box on
   purpose - see the box-model note in the file header. */
.trph-page .trph-hero__inner,
.trph-page .trph-unit__inner,
.trph-page .trph-covered__inner,
.trph-page .trph-assumes__inner,
.trph-page .trph-outside__inner,
.trph-page .trph-faq__inner {
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* Mono `//` prefix - the site's cell-label motif. */
.trph-page .trph-assumes__prefix {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
}

/* ===================================================================
   S1 - HERO / THE NUMBER
   Dual column: the claim left, the published figure right.
   =================================================================== */

/* Trace field - even across the whole hero, no mask. It was faded toward the
   bottom-left to keep it off the headline, which left the left half looking
   like nothing was there. The elements that actually needed protecting from it
   are the rate card and the stroke button, and those now carry solid ivory
   backgrounds instead. */
.trph-hero__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Flat ivory. A gradient was tried here in several forms - the homepage's
   135deg diagonal, a vertical version, a radial ceiling glow, and a variant
   ordered to hand off into the dark section below. None of them worked on
   this layout: the homepage's gradient reads well because its hero is full
   height with centred content, and neither is true here. Do not re-add one. */
.trph-hero {
    background: var(--mv-color-ivory);
    padding-top: calc(var(--tr-hero-clearance) + var(--tr-hero-gap));
    padding-bottom: var(--tr-hero-gap);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--mv-hairline);
}

/* Centred, single column. The right-hand rate card was a static preview of
   what the estimator below does live - same shape, same big mono figure over
   a hairline over a list - so the two sections read as one idea repeated.
   The card is gone; the estimator is now the only card on the page, which is
   what gives it weight. The rate still leads: the h1 states it at 54px. */
.trph-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.trph-hero__copy .mv-eyebrow {
    margin-bottom: 20px;
}

.trph-hero__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.trph-hero__sub {
    color: var(--tr-text-tertiary);
    margin: 0 auto 36px;
    max-width: 62ch;
}

.trph-hero__copy {
    max-width: 780px;
    margin: 0 auto;
}

.trph-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tr-space-gap-md);
    flex-wrap: wrap;
}

/* Ivory ground → indigo is the hover accent. */
.trph-hero__actions .mv-ascii-btn--stroke,
.trph-faq__actions .mv-ascii-btn--stroke {
    --ascii-color:  var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
    border-color: var(--tr-ev-soft);
    box-shadow: none;
}

/* Solid, not see-through: the trace field would otherwise run straight
   through the button face. brand-tokens sets this with !important. */
.trph-hero__actions .mv-ascii-btn--stroke,
.trph-hero__actions .mv-ascii-btn--stroke:hover,
.trph-hero__actions .mv-ascii-btn--stroke:focus-visible {
    background: var(--mv-color-ivory) !important;
}
.trph-hero__actions .mv-ascii-btn--stroke:hover,
.trph-hero__actions .mv-ascii-btn--stroke:focus-visible,
.trph-faq__actions .mv-ascii-btn--stroke:hover,
.trph-faq__actions .mv-ascii-btn--stroke:focus-visible {
    border-color: var(--mv-color-indigo);
}
.trph-hero__actions .mv-ascii-btn--stroke span,
.trph-faq__actions .mv-ascii-btn--stroke span {
    color: var(--mv-color-evergreen);
}

/* ===================================================================
   S2 - WHAT COUNTS AS A USER
   Full-bleed Evergreen. Dark ground → lime is the accent.
   =================================================================== */

.trph-unit {
    background: var(--mv-color-evergreen);
    padding: var(--tr-space-section-xl) 0;
    position: relative;
    /* slide-left / slide-right park their content off-axis until revealed;
       clip (not hidden) contains that without disabling sticky descendants. */
    overflow-x: clip;
}

.trph-unit::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--tr-iv-subtle) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.55;
    pointer-events: none;
}

.trph-unit__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 80px;
    align-items: center;
}

.trph-unit__copy .mv-eyebrow {
    margin-bottom: 20px;
}

.trph-unit__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-ivory);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.trph-unit__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-tertiary);
    margin: 0 0 16px;
    max-width: 62ch;
}

.trph-unit__chips {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Ivory, not lime. Five lime pills in a row was most of the glow in this
   section, and they are labels - they neither act nor respond. Lime is
   reserved here for the two things that do: the slider and the CTA. */
.trph-chip {
    display: inline-block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps-sm);
    color: var(--tr-light-secondary);
    background: var(--tr-iv-wash);
    border: 1px solid var(--tr-iv-border);
    border-radius: 100px;
    padding: 7px 16px;
}

/* ===================================================================
   ESTIMATOR
   A rate sheet you fill in, not a configurator: mono figures, one
   control, no animated counters. No floor is published (see the page
   template): below the crossover the script swaps the figure for a
   conversation rather than showing a barrier.
   =================================================================== */

.trph-calc {
    --trph-fill: 20%;
    background: var(--tr-iv-wash);
    border: 1px solid var(--tr-iv-muted);
    border-radius: var(--tr-radius-lg);
    padding: 32px 32px 28px;
    box-sizing: border-box;
}

/* ── Readout ── */

.trph-calc__readout {
    display: flex;
    align-items: baseline;
    gap: 14px;
    /* The slider's 20px top padding supplies this gap now. */
    margin-bottom: 0;
    padding-top: 4px;
}

.trph-calc__count {
    font-family: var(--tr-font-mono);
    font-size: clamp(44px, 5vw, 60px);
    font-weight: var(--tr-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--tr-leading-display);
    color: var(--mv-color-ivory);
}

.trph-calc__count-label {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-light-caption);
}

/* ── Slider ──
   Range inputs cannot style their filled portion, so the track is a
   two-stop gradient driven by --trph-fill, which the script sets. */

.trph-calc__slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    /* 4px track, 44px hit area: the padding is the target, background-clip
       keeps the gradient painting only in the 4px content box. */
    padding: 20px 0;
    margin: 0;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--mv-color-lime) 0%,
        var(--mv-color-lime) var(--trph-fill),
        var(--tr-iv-border) var(--trph-fill),
        var(--tr-iv-border) 100%
    );
    /* MUST come after the `background` shorthand - the shorthand resets
       background-clip to border-box, which paints the gradient across the
       full 44px padding box and turns a hairline track into a thick bar. */
    background-clip: content-box;
    cursor: pointer;
}

.trph-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mv-color-lime);
    border: 3px solid var(--mv-color-evergreen);
    box-shadow: 0 0 0 1px var(--mv-color-lime);
    cursor: grab;
    transition: transform 0.15s var(--tr-ease-out);
}

.trph-calc__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mv-color-lime);
    border: 3px solid var(--mv-color-evergreen);
    box-shadow: 0 0 0 1px var(--mv-color-lime);
    cursor: grab;
}

.trph-calc__slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: transparent;
}

.trph-calc__slider:active::-webkit-slider-thumb {
    transform: scale(1.12);
    cursor: grabbing;
}

.trph-calc__slider:focus-visible {
    outline: 2px solid var(--mv-color-lime);
    outline-offset: 8px;
    border-radius: 2px;
}

.trph-calc__scale {
    display: flex;
    justify-content: space-between;
    /* Pull back under the slider's 20px bottom padding. pointer-events:none
       matters here - without it this row sits on top of the lower 10px of the
       slider's hit area and steals it, cutting the target from 44px to 34px.
       It is aria-hidden decoration, so it has no business catching a tap. */
    margin-top: -10px;
    pointer-events: none;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--tr-light-caption);
}

.trph-calc__hint {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-caption);
    margin: 14px 0 0;
}

/* ── Output ── */

.trph-calc__out {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--tr-iv-border);
}

.trph-calc__price {
    font-family: var(--tr-font-mono);
    font-size: clamp(34px, 4vw, 46px);
    margin-bottom: 16px;
    font-weight: var(--tr-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--tr-leading-display);
    letter-spacing: var(--tr-tracking-h3);
    color: var(--mv-color-ivory);
    margin: 0;
    overflow-wrap: anywhere;
}

.trph-calc__price-unit {
    margin-left: 7px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps-sm);
    color: var(--tr-light-tertiary);
    white-space: nowrap;
}

/* Total and working share a baseline. The price already sat well short of the
   card's right edge, so the working costs no vertical space and reads as the
   figure's counterpart rather than a stray note beneath it. */
.trph-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.trph-calc__math {
    flex-shrink: 0;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-sm);
    font-variant-numeric: tabular-nums;
    color: var(--tr-light-caption);
    margin: 0;
}

.trph-calc__note {
    margin: 0;
    padding: 16px 20px;
    background: var(--tr-iv-subtle);
    border: 1px solid var(--tr-iv-border);
    border-radius: var(--tr-radius-md);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-tertiary);
}

/* Below the crossover the output is an invitation, not a number. */
.trph-calc--quote .trph-calc__price {
    font-family: var(--tr-font-display);
    font-size: clamp(30px, 3.4vw, 40px);
    letter-spacing: var(--tr-tracking-h3);
    color: var(--mv-color-ivory);
}

.trph-calc--quote .trph-calc__price-unit {
    display: none;
}

.trph-calc--quote .trph-calc__note {
    background: var(--tr-iv-wash);
    border-color: var(--tr-iv-muted);
}

/* Persistent CTA - ivory fill. The default evergreen button would vanish
   into the card, and lime made it the loudest thing in a section we had just
   calmed down. Same treatment the Techrobotic box uses on its dark ground. */
.trph-calc__cta {
    --ascii-bg:       var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-indigo);
    display: inline-flex;
    margin-top: 22px;
}

/* ===================================================================
   S3 - INCLUDED IN THE RATE
   Ivory ground → indigo is the accent. Twelve cards in three labelled
   groups of four: equal-weight items read as a wall, and a named group
   gives the reader somewhere to land.
   =================================================================== */

.trph-covered {
    background: var(--mv-color-ivory);
    padding: var(--tr-space-section-lg) 0;
    position: relative;
    border-bottom: 1px solid var(--mv-hairline);
}

.trph-covered__header {
    margin-bottom: 48px;
    max-width: 760px;
}

.trph-covered__header .mv-eyebrow {
    margin-bottom: 18px;
}

.trph-covered__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0 0 18px;
    overflow-wrap: anywhere;
}

.trph-covered__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* ── Groups ── */

.trph-covered__groups {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.trph-group__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mv-hairline-mid);
}

.trph-group__num {
    flex-shrink: 0;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-tracking-wide);
    color: var(--mv-color-indigo);
}

.trph-group__label {
    flex-shrink: 0;
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    margin: 0;
}

.trph-group__lede {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    min-width: 0;
}

.trph-group__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.trph-cell {
    padding: 26px 22px;
    box-sizing: border-box;
    border: 1px solid var(--tr-ev-subtle);
    background: var(--mv-bg-surface);
    border-radius: var(--tr-radius-md);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s var(--tr-ease-out), box-shadow 0.3s var(--tr-ease-out), translate 0.3s var(--tr-ease-out);
}

.trph-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    background: linear-gradient(180deg, var(--tr-ind-subtle), var(--tr-ind-wash));
    pointer-events: none;
    z-index: 0;
    transition: height 0.3s var(--tr-ease-out);
}

.trph-cell > * { position: relative; z-index: 1; }

.trph-cell:hover {
    border-color: var(--tr-ind-muted);
    box-shadow: var(--tr-shadow-card-hover);
    translate: 0 -4px;
}

.trph-cell:hover::before { height: 100%; }

/* The stagger reveal ships a transition shorthand at (0,3,0); the hover
   lift needs to match that specificity or it is silently dropped. */
[data-animate="stagger"].is-visible .trph-cell[data-animate-child] {
    transition:
        opacity      0.55s var(--tr-ease-spring),
        transform    0.55s var(--tr-ease-spring),
        border-color 0.3s   var(--tr-ease-out),
        box-shadow   0.3s   var(--tr-ease-out),
        translate    0.3s   var(--tr-ease-out);
}

.trph-cell__prefix {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--mv-color-indigo);
    margin-bottom: 12px;
}

.trph-cell__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.trph-cell__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* ===================================================================
   S4 - WHAT THE RATE ASSUMES
   Indigo Velvet strip. Three conditions, no boxes: the section above is
   twelve cards deep, and a card gives a one-line condition weight it
   does not carry. Also the break between two ivory sections.
   =================================================================== */

.trph-assumes {
    /* Lightest stop must not exceed #382C67 - the lime eyebrow and the mono
       prefixes sit on this band and measured 3.51:1 and 4.05:1 against the old
       #4c4191 stop, both under AA. Do not lighten. */
    background: linear-gradient(150deg, #382C67 0%, #342861 48%, #2a2058 100%);
    padding: var(--tr-space-section-md) 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Texture, not decoration. The same blooms the homepage cross-sell field
   carries, using its two tints verbatim - rgba(160,148,200) lavender and
   rgba(186,213,189) celadon - scattered rather than laid out on a grid.

   These are FLAT DISCS with a defined edge, not soft glows: the homepage
   draws them as SVG <circle fill="…"> at 0.020–0.025, so a radial falloff
   would read as a different motif. The 99.5%→100% stop is a single pixel of
   antialiasing, nothing more. Opacity sits a little above the homepage's
   because these lie on a full-bleed gradient band rather than inside a
   small box, and the ground moves underneath them. */
.trph-assumes::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 250px at 11% 26%, rgba(160, 148, 200, 0.055) 0%, rgba(160, 148, 200, 0.055) 99.5%, rgba(160, 148, 200, 0) 100%),
        radial-gradient(circle 170px at 28% 84%, rgba(186, 213, 189, 0.040) 0%, rgba(186, 213, 189, 0.040) 99.5%, rgba(186, 213, 189, 0) 100%),
        radial-gradient(circle 300px at 51% 12%, rgba(160, 148, 200, 0.045) 0%, rgba(160, 148, 200, 0.045) 99.5%, rgba(160, 148, 200, 0) 100%),
        radial-gradient(circle 150px at 69% 74%, rgba(186, 213, 189, 0.045) 0%, rgba(186, 213, 189, 0.045) 99.5%, rgba(186, 213, 189, 0) 100%),
        radial-gradient(circle 230px at 89% 38%, rgba(160, 148, 200, 0.050) 0%, rgba(160, 148, 200, 0.050) 99.5%, rgba(160, 148, 200, 0) 100%),
        radial-gradient(circle 120px at 40% 56%, rgba(186, 213, 189, 0.035) 0%, rgba(186, 213, 189, 0.035) 99.5%, rgba(186, 213, 189, 0) 100%);
}

.trph-assumes__inner {
    position: relative;
    z-index: 1;
}

/* Full h2 scale, like every other section heading on the page.
   This was set at h4 back when the section was a small celadon block of
   three cards - "a hinge, not a section". It has since become a full-bleed
   indigo band with its own texture, i.e. a peer of the sections around it,
   but the heading never got promoted with it. A 30px h2 sitting between two
   54px ones is why it read as out of place. */
.trph-assumes__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-ivory);
    margin: 0 0 36px;
    max-width: 20ch;
    overflow-wrap: anywhere;
}

.trph-assumes__header .mv-eyebrow {
    margin-bottom: 20px;
}

.trph-assumes__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--tr-iv-border);
}

.trph-assumes__item {
    padding: 26px 36px 4px 0;
    border-right: 1px solid var(--tr-iv-border);
}

.trph-assumes__item:last-child {
    border-right: none;
    padding-right: 0;
}

.trph-assumes__item + .trph-assumes__item {
    padding-left: 36px;
}

.trph-assumes__prefix {
    color: var(--mv-color-lime);
    margin-bottom: 12px;
}

.trph-assumes__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-ivory);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.trph-assumes__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-tertiary);
    margin: 0;
}

/* ===================================================================
   S5 - WHAT YOU CAN ADD
   A ruled list, not a second card grid. Cards here would read as a
   second product alongside the twelve inclusions; a list is
   subordinate, which is the correct rank for a boundary.
   =================================================================== */

.trph-outside {
    background: var(--mv-color-ivory);
    /* No bottom padding: the cross-sell that follows brings its own 72px
       top padding, and stacking both gave a 168px double gap. */
    padding: var(--tr-space-section-lg) 0 0;
    position: relative;
}

.trph-outside__header {
    margin-bottom: 40px;
}

.trph-outside__header .mv-eyebrow {
    margin-bottom: 16px;
}

.trph-outside__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.trph-outside__sub {
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 78ch;
}

.trph-outside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mv-hairline-mid);
}

.trph-outside__item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: start;
    padding: 24px 16px;
    margin: 0 -16px;
    border-top: 1px solid var(--mv-hairline-mid);
    border-radius: var(--tr-radius-sm);
    transition: background 0.25s var(--tr-ease-out);
}

.trph-outside__item:hover {
    background: var(--tr-ind-wash);
}

[data-animate="stagger"].is-visible .trph-outside__item[data-animate-child] {
    transition:
        opacity    0.55s var(--tr-ease-spring),
        transform  0.55s var(--tr-ease-spring),
        background 0.25s var(--tr-ease-out);
}

.trph-outside__prefix {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--tr-text-tertiary);
    line-height: var(--tr-leading-h5);
    padding-top: 2px;
}

.trph-outside__body {
    min-width: 0;
}

.trph-outside__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

.trph-outside__desc {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 74ch;
}

/* The commercial path for each row, right-aligned - the one thing a
   card grid could not carry cleanly. */
.trph-outside__tag {
    justify-self: end;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps-sm);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-muted);
    border: 1px solid var(--tr-ind-muted);
    border-radius: 100px;
    padding: 6px 14px;
    margin-top: 2px;
}

/* ===================================================================
   TECHROBOTIC CROSS-SELL - restated (see header note).
   Dot-grid stands in for the homepage's hand-drawn line field.
   =================================================================== */

.tr-crosssell {
    background: var(--mv-color-ivory);
    padding: 72px 32px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.tr-crosssell__box {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 48px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(135deg, var(--mv-color-indigo) 0%, #443781 100%);
    border: 1px solid var(--tr-ind-muted);
    border-radius: var(--tr-radius-md);
    position: relative;
    overflow: hidden;
}

/* Matches homepage.css exactly - the field itself is the inline SVG in the
   template, lifted from front-page.php. */
.tr-crosssell__field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.tr-crosssell__content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.tr-crosssell__action {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tr-crosssell__eyebrow {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    color: var(--mv-color-lime);
    margin-bottom: 12px;
}

.tr-crosssell__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-ivory);
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

.tr-crosssell__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-iv-strong);
    margin: 0;
    max-width: 640px;
}

.tr-crosssell__body strong {
    color: var(--mv-color-ivory);
    font-weight: var(--tr-weight-bold);
}

.tr-crosssell__action .mv-ascii-btn {
    --ascii-bg:       var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-indigo);
}

/* ===================================================================
   S7 - QUESTIONS
   Ivory ground, sticky header left, native <details> accordion right.
   =================================================================== */

.trph-faq {
    background: var(--mv-color-ivory);
    /* No rules and no margins on either side. The cross-sell above and the
       CTA band below are both ivory, so a hairline reads as an arbitrary
       line across an unbroken ground - and stacking this section's padding
       on top of their spacing gave a double gap at both ends. The 108px
       padding IS the gap, top and bottom. */
    padding: var(--tr-space-section-xl) 0 0;
}

.trph-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.trph-faq__header {
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 40px);
}

.trph-faq__header .mv-eyebrow {
    margin-bottom: 20px;
}

.trph-faq__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.trph-faq__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

.trph-faq__actions {
    display: flex;
    align-items: center;
    gap: var(--tr-space-gap-md);
    flex-wrap: wrap;
    margin-top: 32px;
}

.trph-faq__item {
    border-bottom: 1px solid var(--mv-hairline-mid);
}

.trph-faq__item:first-child {
    border-top: 1px solid var(--mv-hairline-mid);
}

.trph-faq__item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 16px;
    margin: 0 -16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    background: transparent;
    border-radius: var(--tr-radius-sm);
    transition: color 0.2s var(--tr-ease-out), background 0.15s var(--tr-ease-out);
    user-select: none;
    overflow-wrap: anywhere;
}

.trph-faq__item summary::-webkit-details-marker { display: none; }
.trph-faq__item summary::marker { content: ''; }

/* Chevron - same border-based mark as the homepage accordion. */
.trph-faq__item summary::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--mv-text-40);
    border-bottom: 2px solid var(--mv-text-40);
    transform: rotate(45deg);
    margin-top: 5px;
    transition: transform 0.3s var(--tr-ease-spring), border-color 0.2s var(--tr-ease-out);
}

.trph-faq__item[open] summary          { color: var(--mv-color-indigo); }
.trph-faq__item[open] summary::after   { transform: rotate(-135deg); border-color: var(--mv-color-indigo); }
.trph-faq__item summary:hover          { color: var(--mv-color-indigo); background: var(--tr-ind-wash); }
.trph-faq__item summary:hover::after   { border-color: var(--mv-color-indigo); }

@keyframes trphAccordionReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.trph-faq__answer {
    padding-bottom: 26px;
    animation: trphAccordionReveal 0.35s var(--tr-ease-spring) both;
}

.trph-faq__answer p {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 68ch;
}

/* Longer answers run to two paragraphs; without this they set solid. */
.trph-faq__answer p + p {
    margin-top: 16px;
}

/* ===================================================================
   RESPONSIVE - 1200px
   Four across needs ~300px a card; below that it drops to three.
   =================================================================== */

@media (max-width: 1200px) {
    .trph-group__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The group lede stops fitting on the label line before the cards do. */
    .trph-group__head {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .trph-group__lede {
        flex-basis: 100%;
    }
}

/* ===================================================================
   RESPONSIVE - 1024px
   =================================================================== */

@media (max-width: 1024px) {

    .trph-page .trph-hero__inner,
    .trph-page .trph-unit__inner,
    .trph-page .trph-covered__inner,
    .trph-page .trph-assumes__inner,
    .trph-page .trph-outside__inner,
    .trph-page .trph-faq__inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .tr-crosssell {
        padding-left: 24px;
        padding-right: 24px;
    }

    .trph-hero__inner,
    .trph-unit__inner,
    .trph-faq__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    /* margin-inline: auto is REQUIRED alongside the cap. The base rule sets
       `margin: 0 0 20px`, so a bare max-width leaves a 22ch box pinned to the
       left edge of a centred hero - the text reads centred inside its own box
       while the box itself sits left. */
    .trph-hero__headline {
        max-width: 22ch;
        margin-inline: auto;
    }

    /* No max-width. Once .trph-unit__inner collapses to one column the
       estimator is the only thing on the row, so a 560px cap left it pinned
       to the left of a 976px container with dead space beside it. Full width
       from 1024 down. */

    /* Vertical rules only make sense across a row. */
    .trph-assumes__strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .trph-assumes__item,
    .trph-assumes__item + .trph-assumes__item {
        padding: 22px 0;
        border-right: none;
        border-bottom: 1px solid var(--tr-iv-border);
    }

    .trph-assumes__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Sticky headers need a scroll partner; single column has none. */
    .trph-faq__header {
        position: static;
    }

    .trph-unit,
    .trph-covered,
    .trph-assumes {
        padding: var(--tr-space-section-sm) 0;
    }

    .trph-faq {
        padding: var(--tr-space-section-sm) 0 0;
    }

    .trph-outside {
        padding: var(--tr-space-section-sm) 0 0;
    }

    .trph-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trph-outside__item {
        grid-template-columns: 130px minmax(0, 1fr) auto;
        gap: 20px;
    }
}

/* ===================================================================
   RESPONSIVE - 768px
   =================================================================== */

@media (max-width: 768px) {

    .trph-page .trph-hero__inner,
    .trph-page .trph-unit__inner,
    .trph-page .trph-covered__inner,
    .trph-page .trph-assumes__inner,
    .trph-page .trph-outside__inner,
    .trph-page .trph-faq__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tr-crosssell {
        padding: 56px 16px 0;
    }

    /* Hero field mobile behaviour is global - see brand-tokens.css. It is no
       longer hidden; the render box is shortened so `slice` crops less. */

    .trph-hero__actions .mv-ascii-btn,
    /* Action-button widths are global - see brand-tokens.css. */


    .trph-calc {
        padding: 26px 22px 24px;
    }

    /* Thicker track and a bigger thumb for thumbs. The 44px hit area is
       already on the base rule. */
    .trph-calc__slider {
        height: 6px;
    }

    .trph-calc__slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .trph-calc__slider::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }

    .trph-unit,
    .trph-covered,
    .trph-assumes {
        padding: var(--tr-space-section-xs) 0;
    }

    .trph-faq {
        padding: var(--tr-space-section-xs) 0 0;
    }

    .trph-outside {
        padding: var(--tr-space-section-xs) 0 0;
    }

    .trph-unit__inner,
    .trph-faq__inner {
        gap: 40px;
    }

    .trph-group__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .trph-covered__groups {
        gap: 36px;
    }

    /* The list stacks: prefix, then title + body, then the tag on its
       own line so it never squeezes the description to two words. */
    .trph-outside__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 22px 12px;
        margin: 0 -12px;
    }

    .trph-outside__tag {
        justify-self: start;
        margin-top: 2px;
    }

    .tr-crosssell__box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 28px 24px;
    }

    .trph-faq__item summary {
        font-size: var(--tr-size-h6);
        padding: 22px 12px;
        margin: 0 -12px;
    }
}

/* ===================================================================
   RESPONSIVE - 420px  (375px reference device)
   =================================================================== */

@media (max-width: 420px) {

    .trph-hero__headline {
        font-size: 30px;
    }

    .trph-hero__actions,
    /* Button stacking is global - see brand-tokens.css. */

    .trph-hero__actions .mv-ascii-btn,

    /* The unit stays INLINE here. Breaking it onto its own line made the
       price two lines tall, which knocked the total out of baseline with the
       working beside it. Measured: "$4,225 / month" plus "13 x $325" is ~263px
       inside a 297px row at this size, so it fits without the break. */
    .trph-calc__row {
        gap: 10px;
    }
}

/* ===================================================================
   REDUCED MOTION
   The shared animations.css already neutralises [data-animate];
   this covers the primitives added on this page.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {

    .trph-faq__answer {
        animation: none;
    }

    .trph-faq__item summary,
    .trph-faq__item summary::after,
    .trph-cell,
    .trph-cell::before,
    .trph-outside__item,
    .trph-calc__slider::-webkit-slider-thumb {
        transition: none;
    }

    .trph-cell:hover {
        translate: none;
    }
}