/* ==========================================================================
   Brand accents — the logo's colours, in the page
   ==========================================================================

   The mark's four colours (magenta, teal, gold, green) appeared nowhere else
   on the site, so they read as a leftover rather than a choice. This layer
   gives them somewhere to live: the occasion badges, the section kickers, and
   the feature icons. Navy and cream stay exactly as they are — the frame is
   unchanged and the photography is untouched.

   This is warmth and branding, not a decoder ring. The colours are not asked
   to encode anything; they are asked to make the page feel like the logo.

   Dosage rule: badges and small marks only. An earlier version washed each
   occasion card in its hue and it flattened the photography — the eucalyptus
   went pink and the emerald theatre seat went olive. Cards stay untouched.

   Contrast discipline (measured against --ivory #FBF8F3): the logo colours at
   full saturation run 1.75:1 (gold) to 4.78:1 (magenta), so full saturation is
   used ONLY for rules and fills that carry no text. Anything carrying text or
   a glyph uses the -ink sibling, each darkened to clear 4.5:1.

   Linked from all 7 landing pages: /index.html and {ar,de,es,fr,he,pt}/index.html
   — immediately before </head>, so it lands after each page's inline <style>
   and wins on equal specificity. Adding it anywhere earlier silently does
   nothing.

   NOT applied to /tickets or /corporate: those run their own colour themes and
   need a separate decision.
   ========================================================================== */

:root {
    /* full saturation — sampled from the icon master; rules and fills only */
    --acc-1: #CD1D8C;   /* magenta — the left petal   */
    --acc-2: #37BCB6;   /* teal    — the inner bloom  */
    --acc-3: #F3B32F;   /* gold    — the right petal  */
    --acc-4: #62AE56;   /* green   — the stem, which doubles as the Q's tail */

    /* text-safe siblings — >= 4.5:1 on ivory */
    --acc-1-ink: #CD1488;
    --acc-2-ink: #207F7B;
    --acc-3-ink: #946B16;
    --acc-4-ink: #447F3B;

    --bouquet: linear-gradient(90deg,
        var(--acc-1) 0 25%, var(--acc-2) 25% 50%,
        var(--acc-3) 50% 75%, var(--acc-4) 75% 100%);
}

/* Hebrew and Arabic read right-to-left, so the colour sequence mirrors with
   them — otherwise the bar runs backwards relative to everything beside it. */
html[dir="rtl"] {
    --bouquet: linear-gradient(90deg,
        var(--acc-4) 0 25%, var(--acc-3) 25% 50%,
        var(--acc-2) 50% 75%, var(--acc-1) 75% 100%);
}

/* --------------------------------------------------------------------------
   1. The four-stop rule — the recurring signature
   NOTE: .divider is deliberately NOT a hook. Despite the name it is a 1px
   vertical hairline between the hero stat counters, not a section ornament;
   styling it would fatten a separator into a gradient bar.
   -------------------------------------------------------------------------- */

/* Centred section heads suppress .eyebrow::before, so they get a block rule
   underneath the kicker instead. */
.section-head.center .eyebrow { display: block; }
.section-head.center .eyebrow::after {
    content: '';
    display: block;
    width: 88px;
    height: 2px;
    margin: 0.9rem auto 0;
    background: var(--bouquet);
}

/* --------------------------------------------------------------------------
   2. One hue per section
   Left-aligned eyebrows keep their 24px rule, but it carries the section's
   accent instead of gold — and the text moves to the -ink variant, which is
   also a contrast improvement over the existing --gold (#B8985A).
   -------------------------------------------------------------------------- */
.testimonials .eyebrow         { color: var(--acc-3-ink); }
.testimonials .eyebrow::before { background: var(--acc-3); opacity: 1; }

.pricing .eyebrow              { color: var(--acc-4-ink); }
.pricing .eyebrow::before      { background: var(--acc-4); opacity: 1; }

.faq .eyebrow                  { color: var(--acc-2-ink); }
.faq .eyebrow::before          { background: var(--acc-2); opacity: 1; }

.founder .eyebrow              { color: var(--acc-1-ink); }
.founder .eyebrow::before      { background: var(--acc-1); opacity: 1; }

/* The hero kicker gets the whole bouquet — first colour on the page after the
   mark itself. */
.hero .eyebrow::before {
    width: 44px;
    height: 2px;
    background: var(--bouquet);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Feature rows cycle the four hues
   Reads as a set down the page rather than six identical gold kickers.
   -------------------------------------------------------------------------- */
.feature-grid .feature-row:nth-child(4n+1) { --row-acc: var(--acc-1); --row-ink: var(--acc-1-ink); }
.feature-grid .feature-row:nth-child(4n+2) { --row-acc: var(--acc-2); --row-ink: var(--acc-2-ink); }
.feature-grid .feature-row:nth-child(4n+3) { --row-acc: var(--acc-3); --row-ink: var(--acc-3-ink); }
.feature-grid .feature-row:nth-child(4n+4) { --row-acc: var(--acc-4); --row-ink: var(--acc-4-ink); }

.feature-row .eyebrow          { color: var(--row-ink); }
.feature-row .eyebrow::before  { background: var(--row-acc); opacity: 1; height: 2px; }

/* The feature glyph becomes a filled chip — a coloured form inside a round
   frame, which is the logo's own construction. Glyph is ivory on the -ink fill
   so it clears 4.5:1. */
.feature-row .feat-ic {
    background: var(--row-ink);
    color: var(--ivory);
    border-radius: 999px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feature-row .feat-ic svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   4. Occasion badges
   The badge carries the whole idea. The card itself is left alone — no wash,
   no coloured edge — so the photography stays true.

   The card scrim is deliberately NOT touched. It is direction-flipped between
   breakpoints (desktop bottom-anchors the text and darkens downward; <=600px
   top-anchors it and darkens upward), and any unscoped override here lands
   later in the cascade than the media query it shadows. An earlier version
   overrode it and dropped heading contrast from 5.87:1 to 1.58:1 on phones.
   Leaving it alone keeps contrast at the page's own baseline.
   -------------------------------------------------------------------------- */
.usecase-grid .usecase-card:nth-child(1) { --card-ink: var(--acc-1-ink); }
.usecase-grid .usecase-card:nth-child(2) { --card-ink: var(--acc-2-ink); }
.usecase-grid .usecase-card:nth-child(3) { --card-ink: var(--acc-3-ink); }
.usecase-grid .usecase-card:nth-child(4) { --card-ink: var(--acc-4-ink); }

/* The -ink variant carries white text at >=4.5:1, so the translucent black
   pill is no longer doing any work. */
.usecase-content .eyebrow {
    background: var(--card-ink);
    color: #FFFFFF;
}
.usecase-content .eyebrow::before { display: none; }