/* ==========================================================================
   SUREFIRE STUDIOS — real homepage, built on the STRIKE / LINE foundation.
   strike-blue.css carries the type scale, palette and layout primitives;
   strike-line.css carries the flame. This file only adds the sections the
   concept never had to model: client logos, the three-step process,
   plans, and the FAQ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION RHYTHM
   The concept gives .manifesto/.work/.caps `padding-block: var(--gap)`, but
   the sections this page adds only carried .shell, which is horizontal only —
   so Plans sat flush against How it works, and FAQ against Plans.
   -------------------------------------------------------------------------- */
.band {
    padding-block: var(--gap);
}

/* --------------------------------------------------------------------------
   WHY SUREFIRE
   Not .manifesto: that is a pull-quote treatment (up to 4rem at 22ch) meant
   for one short line. Long prose in it renders as a tall skinny column of
   oversized text with the heading smaller than the body. Here the display
   line carries the weight and the argument runs at reading size beside it.
   -------------------------------------------------------------------------- */
.why-grid {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: start;
}

.why-grid p {
    color: var(--ash);
    max-width: 54ch;
}

.why-grid p + p {
    margin-top: 1rem;
}

.proof {
    display: grid;
    gap: 1.5rem;
}

.proof div {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.proof dt {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 200;
    line-height: 1;
    color: var(--paper);
    letter-spacing: -0.02em;
}

.proof dd {
    margin-top: 0.5rem;
    color: var(--ash);
    font-size: var(--f-1);
    max-width: 32ch;
}

/* ---------- TRUSTED BY: proof, stated quietly ---------- */
.logos {
    padding-top: clamp(2.5rem, 6vw, 4rem);
}

.logo-row {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.logo-row img {
    width: 100%;
    max-width: 132px;
    height: auto;
    justify-self: center;
    opacity: 0.42;
    filter: grayscale(1);
    transition: opacity 0.5s var(--e), filter 0.5s var(--e);
}

.logo-row img:hover {
    opacity: 0.9;
    filter: grayscale(0);
}

/* ---------- PROCESS ---------- */
.steps {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    counter-reset: step;
}

.step {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.step h3 {
    font-size: var(--f1);
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.step h3::before {
    counter-increment: step;
    content: '0' counter(step);
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--f-1);
    letter-spacing: 0.2em;
    color: var(--cyan);
    margin-bottom: 0.7rem;
}

.step p {
    color: var(--ash);
    font-size: var(--f-1);
}

/* ---------- PLANS ---------- */
.plan-grid {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(45, 125, 255, 0.05), transparent 60%);
    transition: border-color 0.45s var(--e), transform 0.45s var(--e);
}

.plan:hover {
    border-color: rgba(92, 200, 255, 0.42);
    transform: translateY(-3px);
}

/* the one we want them to land on */
.plan.is-lead {
    border-color: rgba(92, 200, 255, 0.42);
    background: linear-gradient(180deg, rgba(45, 125, 255, 0.13), transparent 62%);
}

.plan-badge {
    position: absolute;
    top: -1px;
    right: 1.2rem;
    padding: 0.28rem 0.7rem;
    border-radius: 0 0 8px 8px;
    background: var(--blue);
    color: #04070E;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.plan h3 {
    font-size: var(--f1);
    font-weight: 300;
}

.plan .price {
    font-size: var(--f3);
    font-weight: 200;
    line-height: 1;
    color: var(--paper);
}

.plan .price small {
    font-size: var(--f-1);
    color: var(--ash-dim);
    letter-spacing: 0.04em;
}

.plan .turn {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.plan ul {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    margin-top: 0.2rem;
}

.plan li {
    position: relative;
    padding-left: 1.15rem;
    color: var(--ash);
    font-size: var(--f-1);
    line-height: 1.5;
}

.plan li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 1px;
    background: var(--cyan);
}

.plan .btn {
    margin-top: auto;
    align-self: flex-start;
}

.plan-note {
    margin-top: 1.75rem;
    color: var(--ash-dim);
    font-size: var(--f-1);
}

/* ---------- FAQ ---------- */
.faq-list {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid var(--line);
    max-width: 62rem;
}

.qa {
    border-bottom: 1px solid var(--line);
}

.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--f1);
    font-weight: 300;
    transition: color 0.35s var(--e);
}

.qa summary::-webkit-details-marker {
    display: none;
}

.qa summary:hover {
    color: var(--cyan);
}

/* a plus that becomes a minus — no icon font, no JS */
.qa summary::after {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: 0.45em;
    background:
        linear-gradient(var(--cyan), var(--cyan)) center/100% 1px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) center/1px 100% no-repeat;
    transition: transform 0.4s var(--e);
}

.qa[open] summary::after {
    transform: rotate(90deg);
    background:
        linear-gradient(var(--cyan), var(--cyan)) center/100% 1px no-repeat;
}

.qa p {
    padding: 0 0 1.4rem;
    max-width: 62ch;
    color: var(--ash);
    font-size: var(--f-1);
}

/* ---------- CONTACT ---------- */
.contact-grid {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.detail {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.4s var(--e), color 0.4s var(--e);
}

a.detail:hover {
    padding-left: 0.6rem;
    color: var(--cyan);
}

.detail .tag {
    display: block;
    margin-bottom: 0.3rem;
}

.detail strong {
    font-size: var(--f1);
    font-weight: 300;
}

.field {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.field label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--paper);
    font: inherit;
    font-size: var(--f-1);
    transition: border-color 0.35s var(--e), background 0.35s var(--e);
}

.field textarea {
    min-height: 8rem;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(45, 125, 255, 0.06);
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(152, 163, 181, 0.5);
}

/* ---------- the nav wordmark is now the logo ---------- */
.mark img {
    display: block;
    width: auto;
    height: clamp(38px, 4.2vw, 56px);
}

/* ---------- SOCIAL ---------- */
.social {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ash);
    transition: color 0.35s var(--e), border-color 0.35s var(--e), transform 0.35s var(--e);
}

.social a:hover {
    color: var(--core);
    border-color: rgba(92, 200, 255, 0.5);
    transform: translateY(-2px);
}

.social svg {
    width: 17px;
    height: 17px;
}

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

    .plan,
    .detail,
    .social a,
    .qa summary::after,
    .logo-row img {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   SOLID NAV
   The concept used a gradient that faded to transparent, so page content
   showed through the bar as it scrolled under. A fixed bar needs an opaque
   backdrop to stay legible over arbitrary content — and over the flame,
   which is bright.
   -------------------------------------------------------------------------- */
.top {
    background: var(--night);
    border-bottom: 1px solid var(--line);
}

/* the mobile overlay already sits on --night; keep its edge from
   double-drawing against the bar's new border */
@media (max-width: 900px) {
    .menu.is-open {
        border-top: 0;
    }
}

/* --------------------------------------------------------------------------
   SECTION HEADING RHYTHM
   .work and .caps in the concept used a .head block that carried its own
   spacing; these sections use a bare h2, so the tiles and rows sat directly
   under the heading. The other sections were already clear because .steps,
   .plan-grid and .faq-list each have their own margin-top.
   -------------------------------------------------------------------------- */
.work .display,
.caps .display {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* anchored sections must clear the fixed bar as well */
html {
    scroll-padding-top: calc(var(--site-header-h, 86px) + 1rem);
}

/* --------------------------------------------------------------------------
   SOCIAL ICONS — no chrome
   The circles made every difference in glyph proportion obvious: a ring is a
   perfect circle, so any icon that is not optically centerd or not the same
   visual weight reads as wrong. Without them the marks simply sit on the
   page and small differences in silhouette stop mattering.
   -------------------------------------------------------------------------- */
.social {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ash-dim);
    transition: color 0.3s var(--e);
}

.social a:hover {
    color: var(--paper);
    transform: none;
    border-color: transparent;
}

.social svg {
    width: 19px;
    height: 19px;
    display: block;
}

/* ---------- plan groups ---------- */
.plan-group {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 0.4rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* group intro copy runs the full grid width, matching the fine print
   beneath it — a 60ch measure left both floating in the left third */
.plan-group-note {
    max-width: none;
    color: var(--ash-dim);
    font-size: var(--f-1);
}

.plan-grid {
    margin-top: 1.25rem;
}

/* ---------- print track ---------- */
.print-track {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}

.print-track .print-grid {
    margin-top: 0;
    grid-column: span 2;
}

@media (max-width: 900px) {
    .print-track .print-grid {
        grid-column: span 1;
    }
}

.print-menu {
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(45, 125, 255, 0.05), transparent 60%);
}

.print-menu h4 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 1.1rem;
}

.print-menu dl {
    display: grid;
    gap: 0.1rem;
}

.print-menu dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.print-menu dt {
    color: var(--ash);
    font-size: var(--f-1);
}

.print-menu dd {
    margin: 0;
    color: var(--paper);
    font-size: var(--f0);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.menu-note {
    margin-top: 1rem;
    color: var(--ash-dim);
    font-size: var(--f-1);
}

.menu-note a {
    color: var(--cyan);
}

/* the notes that sit UNDER a grid are legal/scope fine print, not intro
   copy — they read better spanning the full grid than at a 60ch measure */
.print-foot {
    margin-top: 1.25rem;
    max-width: none;
}

/* ---------- pricing page: category switch ---------- */
.price-switch {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
}

.switch-btn {
    padding: 0.65rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ash);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s var(--e), color 0.3s var(--e);
}

.switch-btn:hover {
    color: var(--paper);
}

.switch-btn.is-on {
    background: var(--paper);
    color: #05060A;
}

.price-view {
    padding-top: 0;
}

/* ---------- homepage pricing teaser ---------- */
.price-teaser {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
}

.price-teaser .card .tag {
    color: var(--cyan);
}

.price-teaser .card h3 {
    font-size: var(--f2);
    font-weight: 200;
}

/* ---------- printed products index ---------- */
.print-index {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.25rem 1.5rem;
}

.print-index-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.35s var(--e), border-color 0.35s var(--e);
}

.print-index-item:hover {
    padding-left: 0.5rem;
    border-color: rgba(92, 200, 255, 0.45);
}

.pi-name {
    color: var(--paper);
    font-size: var(--f-1);
}

.print-index-item:hover .pi-name {
    color: var(--cyan);
}

.pi-price {
    color: var(--ash-dim);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}