/* ============================================================
   IQ Suite landing polish — shared by the six landing pages.
   Adds: the "For when" line under a product's cover headline,
   a hero entrance, staggered reveals for card grids, and the
   count-up on cover statistics. Everything here is additive and
   motion-safe: with reduced motion nothing moves and nothing hides.
   ============================================================ */

/* The one line that says WHEN a product is for you.
   .hero--enter opts any other hero (the suite page) into the same line and entrance. */
.hero--cover .hero__when,
.hero--enter .hero__when {
    max-width: 640px;
    margin: clamp(16px, 2vw, 24px) auto 0;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2.1vw, 23px);
    line-height: 1.35;
    color: var(--brand, var(--ink-2, #3d3d3d));
}
.hero--cover .hero__when strong,
.hero--enter .hero__when strong { font-style: normal; font-weight: 500; color: var(--ink, #1a1a1a); }

/* A shorter, plainer cover: the wordmark stays large, the headline beneath it
   is the plain-English promise, and the page gets on with it sooner. */
.hero.hero--cover { min-height: 0; padding-bottom: clamp(56px, 7vw, 96px); }
.hero--cover .hero__anchor { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero--cover .hero__stats { margin-top: clamp(40px, 5vw, 64px); }

/* Sibling and step cards: the same "when" line, smaller */
.when-line {
    margin: 6px 0 10px;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-2, #3d3d3d);
}

/* ---- Hero entrance (JS adds html.iq-polish once it is safe to animate) */
@keyframes iqRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
html.iq-polish .hero--cover .hero__eyebrow,
html.iq-polish .hero--cover .hero__wordmark,
html.iq-polish .hero--cover h1,
html.iq-polish .hero--cover .hero__anchor,
html.iq-polish .hero--cover .hero__when,
html.iq-polish .hero--cover .hero__dek,
html.iq-polish .hero--cover .hero__actions,
html.iq-polish .hero--cover .hero__stats {
    animation: iqRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.iq-polish .hero--cover .hero__eyebrow  { animation-delay: 0.05s; }
html.iq-polish .hero--cover .hero__wordmark,
html.iq-polish .hero--cover h1              { animation-delay: 0.15s; }
html.iq-polish .hero--cover .hero__anchor   { animation-delay: 0.30s; }
html.iq-polish .hero--cover .hero__when     { animation-delay: 0.40s; }
html.iq-polish .hero--cover .hero__dek      { animation-delay: 0.48s; }
html.iq-polish .hero--cover .hero__actions  { animation-delay: 0.58s; }
html.iq-polish .hero--cover .hero__stats    { animation-delay: 0.72s; }

/* ---- Staggered card reveals (JS marks grid children .stg with --d) */
html.iq-polish .stg {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease var(--d, 0s), transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s);
}
html.iq-polish .stg.stg--in { opacity: 1; transform: none; }

/* ---- Buttons and cards get a consistent, quiet lift on hover */
html.iq-polish .hero--cover .hero__actions .btn { transition: transform 0.2s ease, box-shadow 0.2s ease; }
html.iq-polish .hero--cover .hero__actions .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(26, 26, 26, 0.45); }

/* ---- Nothing moves for people who asked for that */
@media (prefers-reduced-motion: reduce) {
    html.iq-polish .hero--cover .hero__eyebrow,
    html.iq-polish .hero--cover .hero__wordmark,
    html.iq-polish .hero--cover h1,
    html.iq-polish .hero--cover .hero__anchor,
    html.iq-polish .hero--cover .hero__when,
    html.iq-polish .hero--cover .hero__dek,
    html.iq-polish .hero--cover .hero__actions,
    html.iq-polish .hero--cover .hero__stats { animation: none; }
    html.iq-polish .stg { opacity: 1; transform: none; transition: none; }
}

/* Suite page hero (.hero--enter): the same entrance sequence */
html.iq-polish .hero--enter .hero__eyebrow,
html.iq-polish .hero--enter h1,
html.iq-polish .hero--enter .hero__anchor,
html.iq-polish .hero--enter .hero__when,
html.iq-polish .hero--enter .hero__dek,
html.iq-polish .hero--enter .hero__actions,
html.iq-polish .hero--enter .hero__stats { animation: iqRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.iq-polish .hero--enter .hero__eyebrow { animation-delay: 0.05s; }
html.iq-polish .hero--enter h1             { animation-delay: 0.15s; }
html.iq-polish .hero--enter .hero__anchor  { animation-delay: 0.30s; }
html.iq-polish .hero--enter .hero__when    { animation-delay: 0.40s; }
html.iq-polish .hero--enter .hero__dek     { animation-delay: 0.48s; }
html.iq-polish .hero--enter .hero__actions { animation-delay: 0.58s; }
html.iq-polish .hero--enter .hero__stats   { animation-delay: 0.72s; }
.hero--enter .hero__when a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero--enter .hero__when a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) {
    html.iq-polish .hero--enter .hero__eyebrow,
    html.iq-polish .hero--enter h1,
    html.iq-polish .hero--enter .hero__anchor,
    html.iq-polish .hero--enter .hero__when,
    html.iq-polish .hero--enter .hero__dek,
    html.iq-polish .hero--enter .hero__actions,
    html.iq-polish .hero--enter .hero__stats { animation: none; }
}

/* The cover's plain-English headline is the page's <h1> (the old second hero
   carried it before). Sized as the anchor line, not as the wordmark. */
.hero--cover h1.hero__anchor,
.hero--enter h1.hero__anchor {
    margin: clamp(18px, 2.6vw, 30px) auto 0;
    max-width: 18ch;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: clamp(21px, 3vw, 34px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink-2, #3d3d3d);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.hero--cover h1.hero__anchor em { font-style: italic; }

/* Phones: a cover only needs to be as tall as its content */
@media (max-width: 760px) {
    .hero.hero--cover { min-height: 0 !important; }
}

/* ============================================================
   v2 · the page below the cover keeps itself
   Everything here is additive and JS-gated (html.iq-polish): with no JS,
   or with reduced motion, nothing is hidden and nothing moves. Motion is
   transform/opacity only, and uses the individual `translate` / `scale`
   properties so it composes with each page's own .reveal transforms.
   ============================================================ */
:root { --iq-ease: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---- 1. Section heads: eyebrow, then the title, then the standfirst */
html.iq-polish .iqh__eb { opacity: 0; translate: -10px 0; transition: opacity .55s ease, translate .7s var(--iq-ease); }
html.iq-polish .iqh__t  { opacity: 0; translate: 0 16px;  transition: opacity .6s ease .08s, translate .8s var(--iq-ease) .08s; }
html.iq-polish .iqh__d  { opacity: 0; translate: 0 10px;  transition: opacity .6s ease .22s, translate .8s var(--iq-ease) .22s; }
html.iq-polish .iqh--in .iqh__eb,
html.iq-polish .iqh--in .iqh__t,
html.iq-polish .iqh--in .iqh__d { opacity: 1; translate: 0 0; }

/* ---- 2. Cards: one finish for every grid on every page */
html.iq-polish .iqc { position: relative; }
html.iq-polish .iqc:not(.stg) { opacity: 0; translate: 0 18px; scale: .985; transition: opacity .6s ease var(--d, 0s), translate .8s var(--iq-ease) var(--d, 0s), scale .8s var(--iq-ease) var(--d, 0s), box-shadow .35s ease; }
html.iq-polish .iqc.iqc--in { opacity: 1; translate: 0 0; scale: 1; }
/* the accent hairline that draws across the top on hover (an element, not a
   pseudo, so a card's own ::before/::after decoration is never overwritten) */
html.iq-polish .iqc__rule {
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--brand, var(--ink-3));
    transform: scaleX(0); transform-origin: left center;
    transition: transform .55s var(--iq-ease);
    pointer-events: none;
}
@media (hover: hover) {
    html.iq-polish .iqc.iqc--in:hover { translate: 0 -3px; box-shadow: 0 22px 40px -30px color-mix(in srgb, var(--brand, #1a1a1a) 55%, transparent); }
    html.iq-polish .iqc:hover .iqc__rule { transform: scaleX(1); }
}
/* the little number or label inside a card arrives a beat after the card */
html.iq-polish .iqc > .k:first-child,
html.iq-polish .iqc > .n:first-child,
html.iq-polish .iqc > .no:first-child,
html.iq-polish .iqc > .num:first-child,
html.iq-polish .iqc > .eyebrow:first-child,
html.iq-polish .iqc > .flow__stage-num,
html.iq-polish .iqc > .src__head { transition: opacity .5s ease calc(var(--d, 0s) + .25s), translate .6s var(--iq-ease) calc(var(--d, 0s) + .25s); }
html.iq-polish .iqc:not(.iqc--in) > .k:first-child,
html.iq-polish .iqc:not(.iqc--in) > .n:first-child,
html.iq-polish .iqc:not(.iqc--in) > .no:first-child,
html.iq-polish .iqc:not(.iqc--in) > .num:first-child,
html.iq-polish .iqc:not(.iqc--in) > .eyebrow:first-child,
html.iq-polish .iqc:not(.iqc--in) > .flow__stage-num,
html.iq-polish .iqc:not(.iqc--in) > .src__head { opacity: 0; translate: -6px 0; }

/* ---- 3. Step rails: the accent line that walks the steps as you scroll */
html.iq-polish .iqrail-host { position: relative; padding-top: 18px; }
html.iq-polish .iqrail { position: absolute; left: 0; right: 0; top: 17px; height: 2px; pointer-events: none; z-index: 2; }
html.iq-polish .iqrail::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, currentColor 14%, transparent); }
html.iq-polish .iqrail__fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--brand, currentColor); transform: scaleX(var(--p, 0)); transform-origin: left center; will-change: transform; }
html.iq-polish .iqrail__dot {
    position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--brand, currentColor);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, currentColor) 18%, transparent);
    translate: calc(var(--p, 0) * var(--w, 0px)) 0; will-change: translate;
}
html.iq-polish .iqrail-host > .iqrail--lit .flow__stage-num,
html.iq-polish .iqrail-host > .iqrail--lit > .num,
html.iq-polish .iqrail-host > .iqrail--lit > .no,
html.iq-polish .iqrail-host > .iqrail--lit > .subscription-step__no { color: var(--brand, inherit); transition: color .4s ease; }
html.iq-polish .iqrail[hidden] { display: none; }

/* ---- 4. Figures and screenshots settle into place once */
html.iq-polish .iqp { opacity: 0; translate: 0 22px; scale: .975; transition: opacity .7s ease, translate .95s var(--iq-ease), scale .95s var(--iq-ease); }
html.iq-polish .iqp.iqp--in { opacity: 1; translate: 0 0; scale: 1; }

/* CodeIQ review table: rows code themselves in sequence */
html.iq-polish .iqp .shot__table tbody tr { transition: opacity .4s ease calc(var(--i, 0) * 90ms); }
html.iq-polish .iqp:not(.iqp--in) .shot__table tbody tr { opacity: 0; }
html.iq-polish .iqp .shot__table .tag-pill { transition: opacity .35s ease calc(var(--i, 0) * 90ms + .18s), scale .45s cubic-bezier(.34, 1.4, .5, 1) calc(var(--i, 0) * 90ms + .18s); }
html.iq-polish .iqp:not(.iqp--in) .shot__table .tag-pill { opacity: 0; scale: .7; }
html.iq-polish .iqp .shot__table .conf__fill { transform-origin: left center; transition: scale .7s var(--iq-ease) calc(var(--i, 0) * 90ms + .3s); }
html.iq-polish .iqp:not(.iqp--in) .shot__table .conf__fill { scale: 0 1; }

/* CodeIQ ten parallel sessions: each bar runs, staggered, on a loop */
html.iq-polish .obj-session { position: relative; overflow: hidden; }
html.iq-polish .obj-session::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--brand, currentColor); transform-origin: left center;
    animation: iqSessionRun 6s var(--iq-ease) infinite; animation-delay: calc(var(--i, 0) * -0.55s);
}
@keyframes iqSessionRun { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 85%, 100% { transform: scaleX(1); opacity: 0; } }
html.iq-polish .obj-session.iq-paused::after { animation-play-state: paused; }

/* PrepIQ review notes: flags stamp in one after another */
html.iq-polish .rn .rn__note { transition: opacity .45s ease calc(var(--i, 0) * .32s), translate .6s var(--iq-ease) calc(var(--i, 0) * .32s); }
html.iq-polish .rn:not(.iqp--in) .rn__note { opacity: 0; translate: 0 8px; }
html.iq-polish .rn .rn__flag { display: inline-block; transition: scale .5s cubic-bezier(.34, 1.5, .5, 1) calc(var(--i, 0) * .32s + .25s), rotate .5s cubic-bezier(.34, 1.5, .5, 1) calc(var(--i, 0) * .32s + .25s), opacity .3s ease calc(var(--i, 0) * .32s + .25s); }
html.iq-polish .rn:not(.iqp--in) .rn__flag { scale: 1.6; rotate: -6deg; opacity: 0; }
html.iq-polish .rn .rn__foot { transition: opacity .5s ease 1.3s; }
html.iq-polish .rn:not(.iqp--in) .rn__foot { opacity: 0; }

/* LedgerIQ module index: page numbers walk down the contents */
html.iq-polish .index__group li { transition: opacity .4s ease calc(var(--i, 0) * 45ms), translate .5s var(--iq-ease) calc(var(--i, 0) * 45ms); }
html.iq-polish .index__group:not(.iqp--in) li { opacity: 0; translate: -8px 0; }
/* LedgerIQ carousel: a progress bar under the viewport shows when the next plate comes */
html.iq-polish .lqc__prog { position: relative; height: 2px; margin: 0; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
html.iq-polish .lqc__prog i { position: absolute; inset: 0; background: var(--brand, currentColor); transform-origin: left center; animation: iqProg 5.2s linear both; }
html.iq-polish .lqc:hover .lqc__prog i { animation-play-state: paused; }
@keyframes iqProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 5. Comparison tables: row by row, and our column washes in */
html.iq-polish .vs__grid:not(.vs__head) .vs__cell { transition: opacity .45s ease calc(var(--i, 0) * 60ms), translate .6s var(--iq-ease) calc(var(--i, 0) * 60ms); }
html.iq-polish .iqt:not(.iqt--in) .vs__grid:not(.vs__head) .vs__cell { opacity: 0; translate: 0 6px; }
html.iq-polish .vs__mark { display: inline-flex; transition: scale .5s cubic-bezier(.34, 1.5, .5, 1) calc(var(--i, 0) * 60ms + .2s); }
html.iq-polish .iqt:not(.iqt--in) .vs__mark { scale: 0; }
html.iq-polish .cvt tbody tr { transition: opacity .45s ease calc(var(--i, 0) * 70ms), translate .6s var(--iq-ease) calc(var(--i, 0) * 70ms); }
html.iq-polish .iqt:not(.iqt--in) .cvt tbody tr { opacity: 0; translate: 0 6px; }
html.iq-polish .cvt .cvt__ciq { transition: background-color .8s ease calc(var(--i, 0) * 70ms + .3s); }
html.iq-polish .iqt:not(.iqt--in) .cvt .cvt__ciq { background-color: transparent; }

/* ---- 6. Dark plates get a quiet accent aurora (transform only, paused offscreen) */
html.iq-polish .iqaur-host { position: relative; isolation: isolate; }
html.iq-polish .iqaur { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html.iq-polish .iqaur i {
    position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand, #5b6eae) 22%, transparent) 0%, transparent 62%);
    will-change: transform; animation: iqAurA 46s ease-in-out infinite alternate;
}
html.iq-polish .iqaur i:first-child { top: -30%; right: -18%; }
html.iq-polish .iqaur i:last-child { bottom: -35%; left: -14%; animation-name: iqAurB; animation-duration: 58s; opacity: .8; }
@keyframes iqAurA { from { transform: translate(0, 0) scale(1); } to { transform: translate(-16%, 18%) scale(1.15); } }
@keyframes iqAurB { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(20%, -16%) scale(.92); } }
html.iq-polish .iqaur-host.iq-paused .iqaur i { animation-play-state: paused; }

/* ---- 7. Ticker strips fade at their edges and hold still under the pointer */
html.iq-polish .newsreel, html.iq-polish .ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
@media (hover: hover) {
    html.iq-polish .newsreel:hover .newsreel__track, html.iq-polish .ticker:hover .ticker__track { animation-play-state: paused; }
}

/* ---- 8. Buttons: a consistent, quiet response everywhere */
@media (hover: hover) {
    html.iq-polish .btn { transition: translate .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
    html.iq-polish .btn:hover { translate: 0 -2px; }
    html.iq-polish .btn--solid:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, #1a1a1a) 16%, transparent), 0 14px 26px -18px rgba(26, 26, 26, .55); }
}

/* ---- 9. FAQ answers open with a breath rather than a jump */
html.iq-polish details[open] > summary ~ * { animation: iqAnswer .38s var(--iq-ease) both; }
@keyframes iqAnswer { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
html.iq-polish details > summary { transition: color .2s ease; }

/* ---- Nothing moves, nothing hides, for people who asked for that */
@media (prefers-reduced-motion: reduce) {
    html.iq-polish .iqh__eb, html.iq-polish .iqh__t, html.iq-polish .iqh__d,
    html.iq-polish .iqc:not(.stg), html.iq-polish .iqp, html.iq-polish .iqc > *,
    html.iq-polish .iqp .shot__table tbody tr, html.iq-polish .iqp .shot__table .tag-pill, html.iq-polish .iqp .shot__table .conf__fill,
    html.iq-polish .rn .rn__note, html.iq-polish .rn .rn__flag, html.iq-polish .rn .rn__foot,
    html.iq-polish .index__group li, html.iq-polish .vs__cell, html.iq-polish .vs__mark, html.iq-polish .cvt tbody tr {
        opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; rotate: 0deg !important; transition: none !important;
    }
    html.iq-polish .iqaur, html.iq-polish .iqrail, html.iq-polish .lqc__prog { display: none !important; }
    html.iq-polish .obj-session::after { animation: none; transform: scaleX(1); }
    html.iq-polish details[open] > summary ~ * { animation: none; }
}