/* product.css — the marketing/product pages (Logo Generator, Website Builder). Sits on the
   sky look (bodyClass="sky" + sky.css) and adds sectioned, comic-styled content: a hero, a
   how-it-works strip, feature cards, FAQ, and CTA bands. Backgrounds vary section to section
   (sky, white, royal blue, yellow) so the page reads like a comic, not a wall of text. */

.product {
    position: relative;
    z-index: 2;                              /* above the fixed sky, like .page */
    width: var(--col-width);
    margin: 0 auto;
    color: #1a2230;
}

/* ---------- The reusable button: uppercase, yellow, thick comic border, presses on hover ---------- */
.btn {
    display: inline-block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #000;
    background: var(--herosite-yellow);
    border: 3px solid #000;
    border-radius: 14px;
    padding: 14px 26px;
    box-shadow: 5px 5px 0 #000;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover,
.btn:focus-visible {
    transform: translate(5px, 5px);          /* presses into where the shadow was */
    box-shadow: 0 0 0 #000;
}
.btn--blue { background: var(--herosite-blue); color: #fff; }
.btn--lg   { font-size: 1.2rem; padding: 16px 34px; }

/* ---------- Hero (on the open sky) ---------- */
.product__hero {
    text-align: center;
    padding: 1rem 0 2.5rem;
}

/* ---------- Hero as a white card (opt-in with .product__hero--card) ----------
   On the logo page this block sits mid-scroll rather than up on the open sky, so centred text
   floating on the drifting clouds reads as messy. This turns it into the same white comic card
   as the panels below it, left-aligned, so the copy is on a solid ground and the clouds only
   show in the column's side margins. Kept as a modifier so the website-builder hero (still up
   on the sky) is unaffected. */
.product__hero--card {
    text-align: left;
    background: #fff;
    border: 2px solid #000;
    border-radius: 18px;
    box-shadow: var(--comic-shadow);
    padding: clamp(1.6rem, 3.5vw, 3rem);
    margin: 0 0 clamp(1.6rem, 3vw, 2.5rem);
    /* Copy on the left, the logo slideshow on the right; stacks on a phone. */
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.4rem, 3vw, 2.8rem);
    align-items: center;
}
.product__hero--card .product__title { text-shadow: none; }   /* the cream glow was for the sky */
.product__hero--card .product__lede { max-width: none; margin-left: 0; margin-right: 0; }
.product__hero--card .product__cta-row { justify-content: flex-start; }
.product__hero--card .product__cta-note { color: #2a3a55; }
/* Right column of the hero card: slideshow + the note that sits under it. min-width:0 stops a
   grid item refusing to shrink below its content's intrinsic width on narrow screens. */
.product__hero-media { min-width: 0; }
.product__hero-media .product__cta-note { margin: .7rem 0 0; }
@media (max-width: 760px) {
    .product__hero--card { grid-template-columns: 1fr; }
}

/* ---------- Logo slideshow (in the hero card) ----------
   Stacked <li> slides cross-fade; logo-slideshow.js toggles .is-active and only starts once
   the box is scrolled into view. The box holds the images' own 650:615 shape so nothing crops. */
.logo_slideshow {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    aspect-ratio: 650 / 615;
    overflow: hidden;
    background: #fff;
    box-shadow: 4px 4px 0 #000;
}
.logo_slideshow > li {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.logo_slideshow > li.is-active { opacity: 1; }
.logo_slideshow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .logo_slideshow > li { transition: none; }
}
.product__title {
    color: var(--herosite-blue);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1;
    margin: 0;
    text-shadow: 0 2px 0 #fff, 0 0 22px rgba(255, 247, 224, .95);
}
/* Archivo 800 is the site's "black" weight (the buttons use it) — Archivo Black proper is a
   separate Google family and would cost another font download for the same look. Size is a step
   down from the old Bangers value: Bangers is optically light for its point size, so carrying
   2.1rem across to a real 800 weight made the sub compete with the title above it. */
.product__sub {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.25;
    color: #15243a;
    margin: .5rem 0 0;
}
.product__lede {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    max-width: 640px;
    margin: 1.1rem auto 1.6rem;
    color: #15243a;
}
.product__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.product__cta-note { font-size: .9rem; color: #2a3a55; width: 100%; margin: .4rem 0 0; }

/* ---------- Comic panel: the section container, varied by modifier ---------- */
.panel {
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #000;
    border-radius: 18px;
    box-shadow: var(--comic-shadow);
    padding: clamp(1.6rem, 3.5vw, 3rem);
    margin: 0 0 clamp(1.6rem, 3vw, 2.5rem);
}
.panel--blue   { background: var(--herosite-blue); color: #fff; }
.panel--blue a { color: #fff; }
.panel--sky    { background: rgba(255, 255, 255, .82); backdrop-filter: blur(2px); }  /* lets a hint of sky through */
/* Plain black Archivo. The old treatment was yellow fill + a 1px black -webkit-text-stroke,
   which at this size read as a shadowed outline rather than a colour (Clarke, 2026-07-25). */
.panel__kicker {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .3px;
    color: #000;
    font-size: 1.2rem;
    margin: 0 0 .35rem;
}
.panel h2 {
    color: var(--herosite-blue);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}
.panel--blue h2 { color: #fff; }
.panel h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 1.4rem 0 .4rem; color: #15243a; }
.panel--blue h3 { color: var(--herosite-yellow); }
/* Body copy in a panel. The :not() list keeps this off the panel's own helper paragraphs —
   .panel p is more specific than .panel__kicker / .panel__sources, so without it those two
   silently lost their declared font-size and margin to this rule. Same trap as .panel a vs .btn:
   add any new helper <p> class inside .panel to this list. */
.panel p:not(.panel__kicker):not(.panel__sources)  { font-size: 1.12rem; line-height: 1.7; margin: 0 0 1rem; }
.panel p:not(.panel__kicker):not(.panel__sources):last-child { margin-bottom: 0; }
.panel strong { color: inherit; font-weight: 800; }
/* Body links inside a panel read as links (blue + underlined). :not(.btn) keeps that styling
   off buttons: .panel a is more specific than .btn, so without the exclusion a button dropped
   into a panel loses its black uppercase label and comes out blue and underlined. */
.panel a:not(.btn) { color: var(--herosite-blue); text-decoration: underline; text-underline-offset: 2px; }
.panel a:not(.btn):hover { color: #0030d0; }

/* ---------- How it works: numbered comic steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 22px);
    margin-top: 1.25rem;
}
.step {
    background: #fff;
    border: 2px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;
    padding: 1.4rem 1.3rem;
}
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    font-family: 'Bangers', system-ui, cursive;
    font-size: 1.7rem;
    color: #000;
    background: var(--herosite-yellow);
    border: 2.5px solid #000;
    border-radius: 50%;
    margin-bottom: .7rem;
}
.step h3 { margin: 0 0 .4rem; color: var(--herosite-blue); font-size: 1.3rem; }
.step p  { margin: 0; font-size: 1.02rem; line-height: 1.6; }

/* ---------- Feature cards ---------- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin-top: 1.25rem;
}
.feature {
    background: #fff;
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 4px 4px 0 #000;
    padding: 1.25rem 1.3rem;
}
.feature h3 { margin: 0 0 .35rem; color: var(--herosite-blue); font-size: 1.2rem; }
.feature p  { margin: 0; font-size: 1rem; line-height: 1.55; color: #2a3a55; }

/* ---------- Image placeholder (swap for real art; caption says what goes here) ---------- */
.placeholder {
    border: 3px dashed #6b7b95;
    border-radius: 16px;
    background: repeating-linear-gradient(45deg, #eef2f8, #eef2f8 12px, #e4eaf3 12px, #e4eaf3 24px);
    color: #41506b;
    text-align: center;
    padding: 2rem 1.5rem;
    margin: 1.25rem 0;
}
.placeholder__tag {
    display: inline-block;
    font-family: 'Bangers', system-ui, cursive;
    letter-spacing: .5px;
    background: var(--herosite-yellow);
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 2px 10px;
    margin-bottom: .6rem;
}
.placeholder p { margin: .25rem 0 0; font-size: .98rem; line-height: 1.55; }
.placeholder em { color: #2a3a55; }

/* Footnote sources under a panel's CTA. Same .9rem as .product__cta-note so the two read as
   the same class of small print. Its links pick up .panel a:not(.btn) — blue + underlined. */
.panel__sources {
    font-size: .9rem;
    line-height: 1.6;
    color: #2a3a55;
    margin: 1.1rem 0 0;
}

/* ---------- FAQ (native details/summary, comic-styled) ----------
   Held to half the panel so the question rows don't stretch into long, hard-to-scan bars on a
   wide monitor. Released to full width once the panel itself is narrow. */
.faq { margin-top: 1rem; max-width: 50%; }
@media (max-width: 860px) {
    .faq { max-width: none; }
}
.faq details {
    border: 2px solid #000;
    border-radius: 12px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
    margin: 0 0 .85rem;
    overflow: hidden;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: #15243a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* The open/close affordance: a soft grey coin with a +/- in it, pinned to the right of the row
   by the summary's space-between. flex:0 0 auto so a long question can't squash it. */
.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d8dce2;
    color: #33405a;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq details[open] summary::after { content: "\2013"; }   /* en-dash minus */
.faq details > div { padding: 0 1.2rem 1.1rem; }
.faq details p { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.65; }
.faq details p:last-child { margin-bottom: 0; }
.faq details a { color: var(--herosite-blue); text-decoration: underline; }

/* ---------- Final CTA band ---------- */
.cta-band {
    text-align: center;
    background: var(--herosite-yellow);
    border: 3px solid #000;
    border-radius: 20px;
    box-shadow: var(--comic-shadow);
    padding: clamp(1.8rem, 4vw, 3rem);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.cta-band h2 {
    color: #000;
    font-family: 'Bangers', system-ui, cursive;
    font-size: clamp(1.9rem, 5vw, 3rem);
    letter-spacing: .5px;
    margin: 0 0 .5rem;
}
.cta-band p { font-size: 1.15rem; margin: 0 0 1.3rem; color: #1a2230; }

/* ---------- Inline lists inside panels reuse the global star-list; tighten spacing ---------- */
.panel .star-list { margin: 1rem 0; }
.panel--blue .star-list > li::before { color: var(--herosite-yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .steps { grid-template-columns: 1fr; }
}