/* Brand kit hooks — site-elements illustrations applied as decoration.
   The cropped PNGs live in /img/brand/. Heights are tuned so each motif sits
   on the page at roughly the same scale as the original kit (50–80px tall).
   Designed to layer on top of site.css without redefining anything. */

/* ─── Section dividers (SVG, transparent bg) ───────────────────────────── */
/* Hand-drawn-style SVGs inlined as data URLs so they don't carry a white
   background and inherit whatever section they sit in. Each divider sits at
   the natural end of its section's content with comfortable margin — no
   negative-margin trick (which was getting clipped by overflow / padding). */

.brand-divider {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 40px;
    margin: 32px auto 0;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* Hand-drawn separators with transparent backgrounds — four variants that
   rotate through the existing divider class names. Old class names retained
   so any markup that references them keeps working. */
.brand-divider.dv-pencil-purple { background-image: url("/img/brand/divider-crayon-purple.png"); }
.brand-divider.dv-heart-pink    { background-image: url("/img/brand/divider-heart-row.png"); }
.brand-divider.dv-heart-green   { background-image: url("/img/brand/divider-crayon-blue.png"); }
.brand-divider.dv-pencil-blue   { background-image: url("/img/brand/divider-squiggle-orange.png"); }
.brand-divider.dv-wave-orange   { background-image: url("/img/brand/divider-heart-row.png"); }

/* Explicit names for the new asset set (preferred for new markup). */
.brand-divider.dv-crayon-blue    { background-image: url("/img/brand/divider-crayon-blue.png"); }
.brand-divider.dv-crayon-purple  { background-image: url("/img/brand/divider-crayon-purple.png"); }
.brand-divider.dv-squiggle-orange{ background-image: url("/img/brand/divider-squiggle-orange.png"); }
.brand-divider.dv-heart-row      { background-image: url("/img/brand/divider-heart-row.png"); }

/* ─── Step badges (How It Works + landing) ─────────────────────────────── */

/* Hand-drawn shapes inlined as data URLs — match the kit's badge shapes
   (rosette, ribbon, sunburst, sun) without depending on imprecise PNG crops.
   Each shape uses a brand colour as fill; the step number sits on top via flex. */

.step-badge {
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}

/* 1. Rosette — scalloped circle (pink) */
.step-badge.bg-rosette {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 L57 11 L66 6 L70 16 L80 14 L80 25 L90 27 L86 37 L95 43 L88 51 L95 59 L86 65 L90 75 L80 77 L80 88 L70 86 L66 96 L57 91 L50 98 L43 91 L34 96 L30 86 L20 88 L20 77 L10 75 L14 65 L5 59 L12 51 L5 43 L14 37 L10 27 L20 25 L20 14 L30 16 L34 6 L43 11 Z' fill='%23e2007a' stroke='%23b80064' stroke-width='2' stroke-linejoin='round'/></svg>");
}

/* 2. Ribbon — green flag with notch */
.step-badge.bg-ribbon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 25 H82 L92 50 L82 75 H10 L20 50 Z' fill='%233aaa35' stroke='%232a8a26' stroke-width='3' stroke-linejoin='round'/></svg>");
}

/* 3. Sunburst — spiky purple circle */
.step-badge.bg-burst {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 L56 10 L65 4 L68 14 L78 11 L78 21 L88 21 L84 30 L94 34 L87 41 L96 49 L87 56 L94 64 L84 68 L88 77 L78 77 L78 87 L68 84 L65 94 L56 88 L50 96 L44 88 L35 94 L32 84 L22 87 L22 77 L12 77 L16 68 L6 64 L13 56 L4 49 L13 41 L6 34 L16 30 L12 21 L22 21 L22 11 L32 14 L35 4 L44 10 Z' fill='%235b2d8e' stroke='%23401d63' stroke-width='2' stroke-linejoin='round'/></svg>");
}

/* 4. Sun — circle with rays (orange) */
.step-badge.bg-sun {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23f47920' stroke-width='4' stroke-linecap='round'><line x1='50' y1='6' x2='50' y2='16'/><line x1='80' y1='20' x2='73' y2='27'/><line x1='94' y1='50' x2='84' y2='50'/><line x1='80' y1='80' x2='73' y2='73'/><line x1='50' y1='94' x2='50' y2='84'/><line x1='20' y1='80' x2='27' y2='73'/><line x1='6' y1='50' x2='16' y2='50'/><line x1='20' y1='20' x2='27' y2='27'/></g><circle cx='50' cy='50' r='28' fill='%23f47920' stroke='%23c25e15' stroke-width='2'/></svg>");
}

/* ─── Sparkles (inline SVG; pick up currentColor) ───────────────────────── */

.sparkle {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    color: currentColor;
}

/* Larger decorative bursts that flank a CTA */
.sparkle-flank {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin: 0 6px;
    color: var(--c-yellow);
}

/* ─── Pencil bullets (FAQ + Step 1 helper notes) ───────────────────────── */

ul.brand-list {
    list-style: none;
    padding-left: 0;
}

ul.brand-list > li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 10px;
    line-height: 1.55;
}

ul.brand-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 26px;
    height: 26px;
    background-image: url("/img/brand/pencil-blue.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-15deg);
}

/* Rotate through brand colours so a long list looks rainbow-y */
ul.brand-list > li:nth-child(8n+1)::before { background-image: url("/img/brand/pencil-red.png"); }
ul.brand-list > li:nth-child(8n+2)::before { background-image: url("/img/brand/pencil-orange.png"); }
ul.brand-list > li:nth-child(8n+3)::before { background-image: url("/img/brand/pencil-yellow.png"); }
ul.brand-list > li:nth-child(8n+4)::before { background-image: url("/img/brand/pencil-green.png"); }
ul.brand-list > li:nth-child(8n+5)::before { background-image: url("/img/brand/pencil-teal.png"); }
ul.brand-list > li:nth-child(8n+6)::before { background-image: url("/img/brand/pencil-blue.png"); }
ul.brand-list > li:nth-child(8n+7)::before { background-image: url("/img/brand/pencil-purple.png"); }
ul.brand-list > li:nth-child(8n)::before   { background-image: url("/img/brand/pencil-pink.png"); }

/* ─── Buttons (Option A: hand-drawn squircle, chunky border, baked arrow) ── */
/* Single .btn base + .btn-primary / .btn-outline / .btn-text modifiers. The
   --btn-color CSS variable lets each instance pick a brand colour. Existing
   class names (.btn-p, .btn-s, .btn-wh, .btn-ou, .btn-ideas, .nav-btn) are
   re-pointed here so legacy markup keeps working.                          */

.btn,
.btn-p, .btn-s, .btn-wh, .btn-ou, .btn-ideas, .nav-btn {
    --btn-color:   var(--c-purple);    /* default brand colour */
    --btn-color-2: #5b2d8e;            /* slightly darker for hover/pressed */
    --btn-text:    #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;               /* squircle, not full pill */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 3px solid var(--btn-color);
    background: var(--btn-color);
    color: var(--btn-text);
    box-shadow: none;                  /* drop the SaaS glow */
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
    position: relative;
    isolation: isolate;
    /* Subtle texture: faint diagonal strokes via repeating gradient overlayed
       inside the button's background. Cheap fake-crayon, no asset needed.    */
}
.btn:hover, .btn-p:hover, .btn-s:hover, .btn-wh:hover, .btn-ou:hover, .btn-ideas:hover, .nav-btn:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--btn-color) 80%, white 20%);
    border-color: color-mix(in srgb, var(--btn-color) 80%, white 20%);
}
.btn:active, .btn-p:active, .btn-s:active, .btn-wh:active, .btn-ou:active, .btn-ideas:active, .nav-btn:active {
    background: color-mix(in srgb, var(--btn-color) 70%, black 30%);
    border-color: color-mix(in srgb, var(--btn-color) 70%, black 30%);
}
.btn:disabled, .btn[aria-disabled="true"] {
    background: color-mix(in srgb, var(--btn-color) 25%, white 75%);
    border-color: color-mix(in srgb, var(--btn-color) 25%, white 75%);
    cursor: not-allowed;
}
/* Arrow glyph baked into every button — "do this thing" affordance */
.btn::after,
.btn-p::after, .btn-s::after, .btn-wh::after, .btn-ou::after, .btn-ideas::after, .nav-btn::after {
    content: "→";
    font-weight: 900;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .15s ease;
}
.btn:hover::after,
.btn-p:hover::after, .btn-s:hover::after, .btn-wh:hover::after, .btn-ou:hover::after, .btn-ideas:hover::after, .nav-btn:hover::after {
    transform: translateX(3px);
}
/* Buttons that already include their own SVG/emoji shouldn't get a second arrow */
.btn-no-arrow::after,
.btn[data-no-arrow]::after { content: none !important; }

/* Outline variant: white fill + coloured stroke + coloured text */
.btn-outline,
.btn-s, .btn-ou {
    background: #fff;
    color: var(--btn-color);
}
.btn-outline:hover,
.btn-s:hover, .btn-ou:hover {
    background: color-mix(in srgb, var(--btn-color) 8%, white 92%);
    border-color: var(--btn-color);
    color: var(--btn-color);
}
.btn-outline:active,
.btn-s:active, .btn-ou:active {
    background: color-mix(in srgb, var(--btn-color) 16%, white 84%);
}

/* Text-only variant — looks like a hand-drawn underline */
.btn-text {
    background: none;
    border: none;
    padding: 4px 2px;
    color: var(--btn-color);
    border-bottom: 2px solid var(--btn-color);
    border-radius: 0;
    font-weight: 700;
}
.btn-text:hover {
    background: none;
    border-color: var(--btn-color);
    color: color-mix(in srgb, var(--btn-color) 80%, black 20%);
}

/* Per-class brand colour mapping — keeps existing markup working */
.btn-p,
.nav-btn          { --btn-color: var(--c-blue); }
.btn-ideas        { --btn-color: var(--c-orange); }
.btn-wh           { --btn-color: #fff; --btn-text: var(--c-purple); border-color: #fff; background: #fff; color: var(--c-purple); }
.btn-wh:hover     { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); color: var(--c-purple); }
.btn-ou           { --btn-color: #fff; background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-ou:hover     { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.btn-s            { --btn-color: var(--c-purple); }

/* Size modifiers (kit had Small / Medium / Large) */
.btn-sm { padding: 8px 14px; font-size: 0.82rem; border-width: 2px; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; border-width: 3px; border-radius: 14px; }

/* When the button is the white-on-purple CTA on the bottom dark section,
   the SVG sparkle children should keep their currentColor inheritance */
.btn-wh .sparkle-flank { color: var(--c-yellow); }

/* ─── Heart accent next to a heading ───────────────────────────────────── */

.heart-accent {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background: url("/img/brand/heart-pink.png") center/contain no-repeat;
    vertical-align: -0.18em;
    margin: 0 6px;
}