/*
 * calico.css — styles for the consolidated Calico product page (Task #29).
 * Template: page-templates/page-calico-new-tpl.php ("Calico Product Page (new)").
 * Enqueued template-gated + filemtime()-versioned in
 * custom-functions/enqueue-scripts-and-styles.php (depends on webstick-css for
 * .ti-btn / .ti-eyebrow / .section-container).
 *
 * Covers all sections: hero, problem, solution, tech stack, CTA, editions,
 * capabilities.
 */

/* Page-wide H2 treatment (Task #29): heavier weight + tighter tracking. Scoped to
 * this template's body class so the global .section-title is untouched elsewhere. */
.page-template-page-calico-new-tpl .section-title {
    font-weight: 900;
    letter-spacing: -1.25px;
}

/* Shared section primitives — the centered header (eyebrow + H2 [+ intro]) and
 * the intro paragraph repeat across the Problem / Solution / Customer-proof /
 * Editions / Capabilities sections. The cross-section base lives here; each
 * section keeps its own max-width / gap / margin / text-align with its rules. */
.calico-problem__header,
.calico-solution__header,
.calico-customers__header,
.calico-editions__header,
.calico-caps__header {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.calico-problem__intro,
.calico-solution__intro,
.calico-customers__intro,
.calico-editions__intro {
    margin: 16px 0 0;   /* +16 over the 16px flex gap = 32px H2→intro */
    font-size: var(--font-size-md, 18px);
    line-height: 1.5;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}

.calico-hero {
    position: relative;
    overflow: hidden; /* clip the soft decorative glows so they never cause horizontal scroll */
    isolation: isolate; /* local stacking context for the ::before/::after glows */
    background: var(--color-bg-body, #fff);
    padding: 80px 0 80px;
    text-align: center;
}
/* Decorative ambient glows (Figma "Ellipse" blobs): a soft brand-orange
 * radial-gradient behind the content. Corner-anchored (right:/left:) so they
 * track the viewport edge at any width; the hero's overflow:hidden clips the
 * soft edge so they never widen the page. Replaces a filter:blur(250px) on a
 * 252px circle (task #29) — the gradient renders the same faint glow at a
 * fraction of the paint cost (no large blur texture / no filter pass). */
.calico-hero::before,
.calico-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 820px;
    height: 820px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 109, 44, .10) 0%, rgba(255, 165, 0, .05) 45%, rgba(255, 165, 0, 0) 72%);
    pointer-events: none;
}
.calico-hero::before { top: -43px; right: -154px; } /* 820px box; glow center ≈ y367 / 256px from right (Figma "Ellipse" upper-right) */
.calico-hero::after  { top: 422px; left: -324px; }  /* 820px box; glow center ≈ y832 / 86px from left (Figma "Ellipse 5") */
.calico-hero .section-container {
    position: relative;
    z-index: 1; /* keep hero content above the ::before/::after glows */
    max-width: 1140px; /* fits Figma H1 width 1089 → 2-line title (was 1000 → 3 lines) */
}
.calico-hero__intro {
    margin-top: 60px;
}
.calico-hero__eyebrow {
    display: inline-block;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 18px;
    padding: 7px 18px;
}
.calico-hero__logo {
    margin: 0 0 20px;
}
.calico-hero__logo img {
    display: inline-block;
    width: 210px;
    height: auto;
}
.calico-hero__title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -2px;
    color: var(--color-text-main, #231f1f);
    margin: 0 auto 20px;
    max-width: 1089px;
}
.calico-hero__title b {
    font-weight: inherit;
    background: var(--color-link-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.calico-hero__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
    max-width: 974px;
    margin: 0 auto 32px;
}
.calico-hero .btns-wrapper {
    gap: 24px;
}

/* Trust stats bar */
.calico-hero__stats {
    display: flex;
    align-items: stretch;
    max-width: 1089px;
    margin: 0 auto 38px;
    padding: 16px;
    border: 3px solid #fff;
    /* Glassmorphism per Figma: translucent white gradient + soft drop-shadow + backdrop blur. */
    background: linear-gradient(112.91deg, rgba(255, 255, 255, .51) 3.51%, rgba(255, 255, 255, 0) 111.71%);
    filter: drop-shadow(50px 60px 100px rgba(0, 0, 0, .05));
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    border-radius: 32px;
}
.calico-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
}
.calico-stat + .calico-stat {
    border-left: 1px solid var(--color-border-default, rgba(31, 31, 31, .12));
}
.calico-stat__icon {
    height: 34px;
    width: auto;
}
.calico-stat__num {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 50px;
    line-height: 1;
    background: var(--color-link-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.calico-stat__label {
    font-size: 18px;
    color: var(--color-text-main, #231f1f);
}

/* ------------------------------------------------------------------ *
 * Section 2 — The Problem
 * Intro header + two stacked callouts ("The integration tax" = orange
 * highlight, "The alternative" = white). .section-title sizing comes from
 * the global h2 rule; .intro-text is styled locally (not global).
 * ------------------------------------------------------------------ */
.calico-problem {
    padding: 80px 0;
    text-align: center;
    background-color: var(--color-bg-light, #f5f7fa);
}
/* Widen the container so the callouts can reach their 1310px design width
 * (global .section-container caps at 1224 → content 1184, too narrow). */
.calico-problem .section-container { max-width: 1350px; }
.calico-problem__header {
    max-width: 1088px;
    margin: 0 auto 48px;
    gap: 16px;
}
.calico-problem__header .section-title {
    margin: 0;
    padding: 0;
    max-width: 937px;
    line-height: 1.3;
}
.calico-problem__intro {
    max-width: 1088px;
}
/* WYSIWYG field wraps content in <p>; strip its UA margins so the 32px
 * header gap stays exact, and space multi-paragraph intros evenly. */
.calico-problem__intro p { margin: 0; }
.calico-problem__intro p + p { margin-top: 16px; }
.calico-problem__intro strong {
    font-weight: 700;
    background: var(--color-link-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.calico-problem__callouts {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1310px;
    margin: 0 auto;
}
.calico-problem__callout {
    padding: 32px;
    text-align: center;
    border: none;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
}
/* Callouts stack flush (gap:0) and read as one unit: round the outer corners. */
.calico-problem__callout:first-child { border-radius: 26px 26px 0 0; }
.calico-problem__callout:last-child { border-radius: 0 0 26px 26px; }
.calico-problem__callout-title {
    margin: 0;
    text-align: center;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-text-main, #231f1f);
}
.calico-problem__callout-text {
    margin: 0 auto;
    max-width: 1088px;
    font-size: var(--font-size-md, 18px);
    line-height: 1.6;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}
/* Highlight variant — orange gradient card, white text */
.calico-problem__callout--highlight {
    background: var(--color-link-gradient);
}
.calico-problem__callout--highlight .calico-problem__callout-title,
.calico-problem__callout--highlight .calico-problem__callout-text {
    color: #fff;
}

/* ------------------------------------------------------------------ *
 * Section 3 — The Solution
 * Centered header + 4 benefit cards (colored circular icon + title +
 * description) on per-card tinted backgrounds (set inline from ACF).
 * ------------------------------------------------------------------ */
.calico-solution {
    padding: 80px 0;
    text-align: center;
    background-color: var(--color-white, #fff);
}
/* Widen the container so the cards row can reach its 1313px design width
 * (global .section-container caps at 1224). */
.calico-solution .section-container { max-width: 1353px; }
.calico-solution__header {
    max-width: 1061px;
    margin: 0 auto 48px;
    gap: 16px;
}
.calico-solution__header .section-title {
    margin: 0;
    padding: 0;
    max-width: 720px;
    line-height: 1.3;
}
.calico-solution__intro {
    max-width: 1061px;
}
/* Reactive card row: flex wrap + center so the layout re-balances when cards
 * are added/removed in ACF. Cards grow to the 314px design width; with 4 cards
 * the row is pixel-identical to the original 4-col grid, but with fewer cards
 * the remaining ones re-center with even spacing instead of leaving a gap. */
.calico-solution__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 19px;
    width: 1313px;
    max-width: 100%;   /* shrink to fit the container on narrower viewports */
    margin: 0 auto;
}
.calico-solution__card {
    flex: 1 1 180px;       /* grow toward the design width; wrap + center when fewer cards */
    max-width: 314px;      /* never exceed the 4-up design card width */
    box-sizing: border-box;
    border-color: transparent;
    border-radius: 24px;
    padding: 28px;
    text-align: left;
    gap: 14px;
}
.calico-solution__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.calico-solution__icon svg,
.calico-solution__icon img {
    width: 40px;
    height: 40px;
    display: block;
}
.calico-solution__card-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -1.5px;
    line-height: 1.3;
    padding-bottom: 0;
    color: var(--color-text-main, #231f1f);
}
.calico-solution__card-text {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.5px;
    line-height: 1.35;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}

@media (max-width: 980px) {
    /* 2-up: each card half the row minus half the 19px gap. */
    .calico-solution__card { flex-basis: calc(50% - 9.5px); max-width: calc(50% - 9.5px); }
}
@media (max-width: 560px) {
    .calico-solution__card { flex-basis: 100%; max-width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Section 4 — Technology Stack (interactive split layout)
 * Left: intro (eyebrow + H2 + body) on white. Right: orange-gradient
 * showcase with a vertical 4-item tech nav + detail panel + note bar.
 * WAI-ARIA vertical tablist; JS in the partial.
 * ------------------------------------------------------------------ */
.calico-techstack {
    padding: 80px 0;
    background-color: var(--color-white, #fff);
}
.calico-techstack .section-container {
    display: flex;
    gap: 6.85%; /* ≈90px at the 1313 design width; fluid (% of the row) so the gap shrinks with the columns on tablet instead of holding 90px */
    align-items: flex-start;
    max-width: 1353px; /* content 1313 = intro 354 + 6.85% gap + 66.2% showcase */
}
.calico-techstack__intro {
    /* intro keeps a fixed 354px basis; the gap (6.85%) and showcase (66.2%) are now
     * fluid, so on narrower viewports the gap shrinks and the intro gets the room back
     * (flex-shrink:1 still trims it past the design width). */
    flex: 0 1 354px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.calico-techstack__eyebrow {
    /* Figma: plain left-aligned orange eyebrow — strip the .ti-eyebrow pill
       (which otherwise stretches to full column width as a flex item). */
    margin: 0;
    align-self: flex-start;
    padding: 0;
    text-align: left;
    background: none;
    border-radius: 0;
}
.calico-techstack__intro .section-title {
    margin: 0;
    padding: 0;
    font-size: 36px;
    line-height: 1.2;
}
.calico-techstack__body {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}

/* Showcase (orange gradient area) */
.calico-techstack__showcase {
    flex: 0 1 66.2%; /* orange area = 66.2% of the row (≈869px at the 1313 design width); fluid so it scales with the viewport on tablet */
    min-width: 0;
    background: linear-gradient(135deg, #FFA500 0%, #E76D2C 100%); /* page brand gradient (== --color-link-gradient colors) at 135°; CSS can't re-angle the gradient token, and --color-orange-500 (#F89C1D) is a different orange */
    border-radius: 24px;
    padding: 28px 33px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
}

/* Vertical nav: white icon tile + label; active row gets a translucent highlight. */
.calico-techstack__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 282px;
}
.calico-techstack__tab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px 8px 8px;
    background: transparent;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 17px;
    color: #fff;
    transition: background .2s;
    white-space: nowrap;
    text-align: left;
}
.calico-techstack__tab:hover {
    background: rgba(255, 255, 255, .12);
}
.calico-techstack__tab.is-active {
    background: rgba(255, 255, 255, .18);
}
.calico-techstack__tab-tile {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calico-techstack__tab-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.calico-techstack__tab-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 24px;
}

/* Detail panel (white card) — fills the showcase height; content vertically centered. */
.calico-techstack__panels {
    flex: 0 0 474px;
    width: 474px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.calico-techstack__panel {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
}
.calico-techstack__panel:not([hidden]) {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.calico-techstack__panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.calico-techstack__panel-lockup {
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.calico-techstack__panel-tile {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-bg-light, #faf7f3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.calico-techstack__panel-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.calico-techstack__panel-name {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-text-main, #231f1f);
}
.calico-techstack__panel-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}

/* Open-source note bar: white icon tile + italic note on a faint bordered panel. */
.calico-techstack__note {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    padding: 16px 20px;
}
.calico-techstack__note-tile {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calico-techstack__note-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    font-style: italic;
    color: rgba(255, 255, 255, .92);
}
.calico-techstack__note-text strong {
    font-weight: 700;
    font-style: normal;
    color: #fff;
}

@media (max-width: 1199px) {
    /* Tablet: shrink the showcase internals so the nav + detail panel stay on ONE row
       down to the 980px stack point, instead of the panel wrapping below the nav. */
    .calico-techstack__showcase { padding: 24px 28px; gap: 16px 22px; }
    .calico-techstack__nav { flex: 0 0 180px; }
    .calico-techstack__panels { flex: 1 1 0; width: auto; min-width: 0; }
    .calico-techstack__panel { padding: 24px; }
    .calico-techstack__tab { gap: 10px; }
    .calico-techstack__tab-label { font-size: 20px; }
    .calico-techstack__panel-desc p { font-size: 16px; }
    .calico-techstack__note-text { font-size: 15px; }
}

@media (max-width: 980px) {
    .calico-techstack .section-container {
        flex-direction: column;
        gap: 32px;
        align-items: stretch;   /* override the desktop align-items:flex-start; otherwise the showcase sizes to its max-content (the tab row) and overflows the viewport */
    }
    .calico-techstack__intro {
        flex: none;
        text-align: center;
        align-items: center;
    }
}
@media (max-width: 560px) {
    .calico-techstack__showcase {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 20px;
    }
    .calico-techstack__nav {
        flex: 0 0 auto;   /* reset desktop's fixed 282px basis; in this stacked column it would otherwise become a fixed HEIGHT */
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;   /* shrink below content width so overflow-x scrolls the tab row instead of widening the showcase past the viewport */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .calico-techstack__panels {
        flex: none;
        width: 100%;
    }
    .calico-techstack__tab {
        flex: 0 0 auto;   /* keep natural width; scroll the row rather than squashing tabs */
        font-size: 14px;
        padding: 8px 14px 8px 8px;
    }
    .calico-techstack__tab-tile {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .calico-techstack__tab-icon {
        width: 24px;
        height: 24px;
    }
    .calico-techstack__panel-lockup {
        height: 40px;
    }
}

/* ------------------------------------------------------------------ *
 * Section 8 — Closing CTA (dark band)
 * Dark rounded band on white: gradient-phrase H2 + intro + 2 buttons.
 * Secondary button is white-filled on the dark band (theme default is outlined).
 * ------------------------------------------------------------------ */
.calico-cta {
    padding: 80px 0;
    background-color: var(--color-white, #fff);
}
/* Widen the container so the band reaches the 1313px design width. */
.calico-cta .section-container { max-width: 1353px; }
.calico-cta__band {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 72px 40px;
    text-align: center;
    /* Dark charcoal base + warm orange glow rising from bottom-center */
    background:
        radial-gradient(120% 140% at 50% 130%, rgba(231, 109, 43, .45) 0%, rgba(231, 109, 43, 0) 42%),
        linear-gradient(180deg, #2b2724 0%, #211d1b 100%);
}
.calico-cta__title {
    margin: 0 auto;
    max-width: 800px;
    font-family: var(--font-family-heading);
    font-weight: 900;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1.25px;
    color: #fff;
}
.calico-cta__title b {
    font-weight: inherit;
    background: var(--color-link-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.calico-cta__intro {
    margin: 16px auto 0;
    max-width: 772px;
    font-size: var(--font-size-md, 18px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}
.calico-cta .calico-cta__buttons {
    margin-top: 32px;
    gap: 24px; /* beat the .btns-wrapper.flex default (20px) */
}
/* White-filled secondary on the dark band (theme default ti-btn-secondary is outlined) */
.calico-cta .ti-btn-secondary,
.calico-cta a.ti-btn-secondary {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-text-main, #231f1f);
}
.calico-cta .ti-btn-secondary:hover,
.calico-cta a.ti-btn-secondary:hover {
    background-color: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .88);
    color: var(--color-text-main, #231f1f);
}

/* ------------------------------------------------------------------ *
 * Section 6 — Customer Proof
 * Centered header (eyebrow + H2) then a full-bleed, auto-scrolling
 * grayscale logo marquee. Logos come from the Theme Settings options page
 * (logo_wall_logos) — same source as the Logo Wall widget. Pure-CSS
 * marquee: two identical lists, animate translateX(0 → -50%) so one
 * list-width loops seamlessly with no JS.
 * ------------------------------------------------------------------ */
.calico-customers {
    padding: 80px 0;
    text-align: center;
    background-color: #f5f5f5;
}
.calico-customers__header {
    max-width: 900px;
    margin: 0 auto 48px;
    gap: 16px;
}
.calico-customers__header .section-title {
    margin: 0;
    padding: 0;
    max-width: 820px;
    line-height: 1.3;
}
.calico-customers__intro {
    max-width: 820px;
}
@keyframes calico-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.calico-customers__strip {
    overflow: hidden;
    width: 100%;   /* section is already full-bleed; 100vw would overflow by the scrollbar width on mobile */
}
.calico-customers__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: calico-logos-scroll 54s linear infinite;
}
.calico-customers__strip:hover .calico-customers__track {
    animation-play-state: paused;
}
.calico-customers__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
}
.calico-customers__slide {
    width: 181px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    box-sizing: border-box;
}
.calico-customers__slide img {
    display: block;
    max-height: 80px;
    max-width: 100%;
    width: auto;
    height: auto;
}
@media (prefers-reduced-motion: reduce) {
    .calico-customers__track { animation: none; }
}
@media (max-width: 767px) {
    .calico-customers {
        padding: 56px 0;
    }
    .calico-customers__header {
        margin-bottom: 36px;
    }
    .calico-customers__slide {
        padding: 12px 10px;
    }
    .calico-customers__slide img {
        max-height: 58px;
    }
}

/* ------------------------------------------------------------------ *
 * Section 7 — Get Started (3 editions)
 * Light peach section; centered header; 3 white edition cards (thin orange
 * border) each: title + tier label + description + tick-circle bullet list +
 * 2 buttons pinned to the card bottom.
 * ------------------------------------------------------------------ */
.calico-editions {
    padding: 80px 0;
    background: linear-gradient(180deg, #fdf6ef 0%, #fbeede 100%);
}
/* Widen the container so the cards row reaches the 1313px design width. */
.calico-editions .section-container { max-width: 1353px; }
.calico-editions__header {
    max-width: 1088px;
    margin: 0 auto 48px;
    gap: 16px;
    text-align: center;
}
.calico-editions__header .section-title {
    margin: 0;
    padding: 0;
    max-width: 760px;
    line-height: 1.3;
}
.calico-editions__intro {
    max-width: 1088px;
}
.calico-editions__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
    width: 1313px;
    max-width: 100%;   /* shrink to fit the container on narrower viewports */
    margin: 0 auto;
}
.calico-editions__card {
    display: flex;
    flex-direction: column;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-orange-600);
    border-radius: 16px;
    padding: 32px;
    text-align: left;
}
.calico-editions__card-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    color: var(--color-text-main, #231f1f);
}
.calico-editions__card-tier {
    margin: 6px 0 0;
    font-size: 14px;
    letter-spacing: .04em;
    color: #757F9D;
}
.calico-editions__card-desc {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}
.calico-editions__list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calico-editions__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-text-body, rgba(35, 31, 31, .8));
}
.calico-editions__tick {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}
/* Buttons pinned to the card bottom; equal width, side by side */
.calico-editions__actions {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    gap: 16px;
}
.calico-editions__actions .ti-btn {
    flex: 1;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
}

@media (max-width: 1199px) {
    /* Tablet: tighten the 3-up cards so they don't crowd before the 980px 1-col stack. */
    .calico-editions__cards { gap: 22px; }
    .calico-editions__card { padding: 24px; }
}

@media (max-width: 980px) {
    .calico-editions__cards { grid-template-columns: 1fr; width: 100%; max-width: 560px; margin: 0 auto; gap: 24px; }
}
@media (max-width: 460px) {
    .calico-editions__actions { flex-direction: column; }
}

/* ------------------------------------------------------------------ *
 * Section 5 — Capabilities (6-tab switcher + per-tab accordion)
 * Matched to Figma "Capabilities" frames: centered eyebrow/H2; a single white
 * SEGMENTED tab bar (active =
 * orange-gradient pill); centered peach badge + headline; two-column body
 * (product image | "Key capabilities" accordion). Accordion = native <details>
 * — the open row is an elevated white card, closed rows are flat with a divider
 * and a dashed-circle icon. Per-tab images + real glyphs land as assets export.
 * ------------------------------------------------------------------ */
.calico-caps {
    padding: 80px 0;
    background-color: var(--color-bg-light, #f5f7fa);
}
/* Widen the section so the tab bar + body reach the 1313px design width
 * (global .section-container caps at 1224). */
.calico-caps .section-container { max-width: 1353px; }
.calico-caps__header {
    max-width: 760px;
    margin: 0 auto 40px;
    gap: 12px;
    text-align: center;
}
.calico-caps__header .section-title {
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

/* Segmented tab bar — one white pill containing all tabs; active = orange pill */
.calico-caps__rail {
    display: flex;
    gap: 4px;
    justify-content: space-between;   /* full-width segmented bar: spread the tabs across the 1313px width */
    align-items: center;
    width: 100%;
    height: 62px;
    margin: 0 auto 40px;
    padding: 6px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-default, #e3e6ea);
    border-radius: 16px;
    overflow-x: auto;   /* when the tabs don't fit (≤~1024px) space-between collapses to flex-start and the row scrolls */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox: hide the scrollbar (scroll still works) */
}
.calico-caps__rail::-webkit-scrollbar { display: none; }   /* WebKit/Blink: hide the scrollbar */
.calico-caps__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-body, rgba(35, 31, 31, .72));
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.calico-caps__tab:hover { color: var(--color-text-main, #231f1f); }
.calico-caps__tab.is-active {
    background: var(--color-link-gradient);
    color: #fff;
    border-radius: 12px;
    width: 214px;
    height: 50px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Panel */
.calico-caps__panel { margin: 0 auto; max-width: 1313px; }
.calico-caps__panel[hidden] { display: none; }
.calico-caps__panel-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    text-align: center;
}
.calico-caps__badge {
    display: inline-block;
    background: #fceede;                     /* light peach */
    color: #b5481a;                          /* AA-safe brand orange on peach */
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    padding: 7px 16px;
    border-radius: 999px;
}
.calico-caps__headline {
    margin: 0;
    max-width: 1000px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -1px;
    color: var(--color-text-main, #231f1f);
}

/* Two-column body: product image | key-capabilities accordion */
.calico-caps__body {
    display: grid;
    grid-template-columns: 757fr 508fr;   /* media 757px : list 508px at the 1313 panel width (gap 48); scales below */
    gap: 48px;
    align-items: start;
}
.calico-caps__media {
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-bg-subtle, #eef1f5);
    border: 1px solid var(--color-border-default, #e3e6ea);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .06);
    min-height: 340px;          /* placeholder height until images land */
    display: flex;
    align-items: center;
    justify-content: center;
    /* drop the media to line up with the first capability card; the
     * "Key capabilities" label (27px + 18px margin) sits above the row. */
    margin-top: 45px;
}
.calico-caps__media img {
    width: 100%;
    height: auto;
    display: block;
}
/* Arcade interactive-demo embed (per-tab media). Lazy-mounted: only the active
 * tab renders an <iframe> on load; others mount on first activation (see the
 * partial's inline JS). Reuses the rounded/clipped .calico-caps__media frame. */
.calico-caps__embed {
    position: relative;
    flex: 1 1 100%;
    width: 100%;
    height: 0;
    padding-bottom: 61.9%;          /* Arcade's default embed aspect ratio */
}
.calico-caps__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    color-scheme: light;
}
.calico-caps__list-title {
    margin: 0 0 18px;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -1px;
    color: var(--color-text-main, #231f1f);
}

/* Accordion — open row = elevated white card; closed rows = flat + divider */
.calico-caps__item {
    width: 500px;
    max-width: 100%;
    border-bottom: 1px solid var(--color-border-default, #e3e6ea);
}
.calico-caps__item:last-child { border-bottom: 0; }
.calico-caps__item[open] {
    border-bottom: 0;
    background: var(--color-white, #fff);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
    padding: 22px 24px;
    margin-bottom: 6px;
}
.calico-caps__item-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0 16px 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-main, #231f1f);
}
.calico-caps__item[open] > .calico-caps__item-summary { padding: 0; }
.calico-caps__item-summary::-webkit-details-marker { display: none; }
.calico-caps__item-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px dashed #9db8e8;            /* dashed circle (placeholder + Figma motif) */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calico-caps__item-icon img { width: 22px; height: 22px; display: block; }
.calico-caps__item-title { flex: 1 1 auto; }
.calico-caps__item-desc {
    padding: 10px 0 2px 54px;   /* align under title: icon 40 + gap 14 */
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-body, rgba(35, 31, 31, .75));
}

@media (max-width: 980px) {
    .calico-caps__body { grid-template-columns: 1fr; gap: 28px; }
    .calico-caps__item { width: 100%; }   /* drop desktop's fixed 500px so the stacked list can't force horizontal overflow */
    .calico-caps__media { min-height: 220px; margin-top: 0; }   /* no label offset when stacked */
    .calico-caps__headline { font-size: 26px; }
}
/* ------------------------------------------------------------------ *
 * Mobile — all sections
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Hero */
    .calico-hero { padding: 56px 0 40px; }
    .calico-hero__title { font-size: 34px; line-height: 39px; letter-spacing: -1px; }
    .calico-hero__subtitle { font-size: 16px; }
    .calico-hero__logo img { width: 170px; }
    .calico-hero__stats { flex-direction: column; gap: 20px; padding: 24px; }
    .calico-stat { padding: 0; }
    .calico-stat + .calico-stat {
        border-left: 0;
        border-top: 1px solid var(--color-border-default, rgba(31, 31, 31, .12));
        padding-top: 20px;
    }
    .calico-stat__num { font-size: 36px; }

    /* Problem */
    .calico-problem { padding: 56px 0; }
    .calico-problem__header { margin-bottom: 32px; gap: 14px; }
    .calico-problem__intro { font-size: 16px; }
    .calico-problem__callout { padding: 22px 22px 24px; }
    .calico-problem__callout-title { font-size: 18px; }
    .calico-problem__callout-text { font-size: 16px; }

    /* Solution */
    .calico-solution { padding: 56px 0; }
    .calico-solution__header { margin-bottom: 36px; gap: 14px; }
    .calico-solution__intro { font-size: 16px; }

    /* CTA */
    .calico-cta { padding: 56px 0; }
    .calico-cta__band { padding: 48px 24px; border-radius: 20px; }
    .calico-cta__title { font-size: 28px; letter-spacing: -.5px; }
    .calico-cta__intro { font-size: 16px; }
    .calico-cta .calico-cta__buttons { flex-direction: column; gap: 16px; }
    .calico-cta__buttons .ti-btn { width: 100%; }

    /* Editions */
    .calico-editions { padding: 56px 0; }
    .calico-editions__header { margin-bottom: 36px; gap: 14px; }
    .calico-editions__intro { font-size: 16px; }
    .calico-editions__card { padding: 24px; }

    /* Technology Stack */
    .calico-techstack { padding: 56px 0; }
    .calico-techstack__intro .section-title { font-size: 28px; }
    .calico-techstack__body { font-size: 15px; }
    .calico-techstack__panel-name { font-size: 22px; }
    .calico-techstack__panel-desc { font-size: 14px; }

    /* Capabilities */
    .calico-caps { padding: 56px 0; }
    .calico-caps__header { margin-bottom: 28px; }
    .calico-caps__rail {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .calico-caps__headline { font-size: 22px; }
    .calico-caps__tab { font-size: 14px; padding: 9px 14px; }
}

/* === DESIGN OVERLAY — staging-only dev aid (Task #29) ===============
 * Overlays the Figma "Web 2.0" artboard (dist/debug/debug-calico.png,
 * 1512x6727) so the build can be pixel-matched against the design. View at a
 * 1512px-wide viewport so 1 design px = 1 page px. Nudge the vertical position
 * (the `0` in `center 0` below) to line the hero up under the WP header; tune
 * `body > *` opacity to taste. Comment this block out (or delete) to turn the
 * overlay off. NOT promoted to src/ — tracked in STAGING.md "Open temp changes".
 * ------------------------------------------------------------------ */
body.debug-overlay {
    background: url(../debug/debug-calico.png) center 0 / 1512px auto no-repeat;
}
body.debug-overlay > * {
    opacity: .5;
}
body.debug-overlay #wpadminbar { display: none !important; }
html.debug-overlay.wp-toolbar { margin-top: 0 !important; }