/* ==========================================================================
   WARP-IT Marketing Site Styles
   ========================================================================== */

:root {
    --wi-orange: #F7941D;
    --wi-orange-light: #FFB347;
    --wi-orange-dark: #E07D0A;
    --wi-navy: #0f172a;
    --wi-navy-light: #1e293b;
    --wi-slate: #475569;
    --wi-gray: #94a3b8;
    --wi-light: #f8fafc;
    --wi-white: #ffffff;
    /* Palest tint of --wi-orange, for bands that need to feel warmer than
       --wi-light without introducing a second hue. Written as a literal
       because color-mix() is not used in app CSS. */
    --wi-tint: #fef6ec;
    --wi-font-body: 'Instrument Sans', -apple-system, sans-serif;
    --wi-font-display: 'Fraunces', Georgia, serif;
    --wi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --wi-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Label text that only assistive technology needs. Kept in the flow (not
   display:none) so screen readers still announce it; clipped to a single
   pixel so it never affects layout. */
.wi-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reset for marketing pages */
.wi-page { font-family: var(--wi-font-body); font-size: 16px; line-height: 1.6; color: var(--wi-navy); }
.wi-page *, .wi-page *::before, .wi-page *::after { box-sizing: border-box; }
.wi-page img { max-width: 100%; height: auto; display: block; }

/* Typography */
.wi-page h1, .wi-page h2, .wi-page h3, .wi-page h4 {
    font-family: var(--wi-font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.wi-page h1 { font-size: clamp(2.5rem, 8vw, 5rem); }
.wi-page h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.wi-page h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
/* The orange single-word <em> accent that used to sit in five homepage headings
   is gone, and so is the rule that coloured it — left in place it would quietly
   re-create the effect the moment anyone reached for <em> again. */

.wi-eyebrow {
    display: inline-block;
    font-family: var(--wi-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wi-orange);
    margin-bottom: 1rem;
}

/* Buttons */
.wi-btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--wi-orange); color: white;
    font-weight: 600; font-size: 0.9375rem;
    border-radius: 100px; border: none; cursor: pointer;
    transition: all 0.3s var(--wi-ease-out);
    box-shadow: 0 4px 20px rgba(247, 148, 29, 0.3);
    text-decoration: none;
}
.wi-btn-primary:hover {
    background: var(--wi-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(247, 148, 29, 0.4);
    color: white;
}

.wi-btn-outline {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent; color: var(--wi-orange);
    font-weight: 600; font-size: 0.9375rem;
    border-radius: 100px; border: 2px solid var(--wi-orange);
    cursor: pointer; transition: all 0.3s var(--wi-ease-out);
    text-decoration: none;
}
.wi-btn-outline:hover { background: var(--wi-orange); color: white; }

.wi-btn-outline-dark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent; color: var(--wi-navy);
    font-weight: 600; font-size: 0.9375rem;
    border-radius: 100px; border: 2px solid var(--wi-navy);
    cursor: pointer; transition: all 0.3s var(--wi-ease-out);
    text-decoration: none;
}
.wi-btn-outline-dark:hover { background: var(--wi-navy); color: white; }

.wi-btn-white {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 1rem 2rem;
    background: white; color: var(--wi-orange);
    font-weight: 600; font-size: 1rem;
    border-radius: 100px; border: none; cursor: pointer;
    transition: all 0.3s var(--wi-ease-out);
    text-decoration: none;
}
.wi-btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,0,0,0.2); }

.wi-btn-ghost-white {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 1rem 2rem;
    background: transparent; color: white;
    font-weight: 600; font-size: 1rem;
    border-radius: 100px; border: 2px solid rgba(255,255,255,0.4);
    cursor: pointer; transition: all 0.3s var(--wi-ease-out);
    text-decoration: none;
}
.wi-btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: white; }

.wi-btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* ---------- Header ---------- */
.wi-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.wi-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1400px; margin: 0 auto; padding: 1rem 2rem;
}
.wi-logo img { height: 36px; width: auto; }
.wi-nav-main { display: none; gap: 2.5rem; }
@media (min-width: 1024px) { .wi-nav-main { display: flex; } }
.wi-nav-main a {
    font-weight: 500; color: var(--wi-slate); transition: color 0.2s;
    position: relative; text-decoration: none;
}
.wi-nav-main a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--wi-orange);
    transition: width 0.3s var(--wi-ease-out);
}
.wi-nav-main a:hover { color: var(--wi-navy); }
.wi-nav-main a:hover::after { width: 100%; }

.wi-nav-actions { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .wi-nav-actions { display: flex; } }
/* The header button reads "Create Your Portal" (Danny, Task ref 12), a little longer than the
   "Start free trial" it replaced: enough to tip the whole header into wrapping at 1280px. Keep the
   actions on one line and tighten the spacing on laptop widths instead. */
.wi-nav-actions a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) {
    .wi-nav-main { gap: 1.75rem; }
    .wi-nav-actions { gap: 1.25rem; }
}

.wi-btn-text { font-weight: 600; color: var(--wi-slate); transition: color 0.2s; text-decoration: none; }
.wi-btn-text:hover { color: var(--wi-navy); }

/* Region picker (flag dropdown) */
.wi-region-picker { position: relative; }
.wi-region-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.65rem; border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px; background: white; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--wi-navy); transition: border-color 0.2s, box-shadow 0.2s;
}
.wi-region-btn:hover { border-color: var(--wi-orange); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wi-region-btn img { display: block; border-radius: 50%; object-fit: cover; }
.wi-region-btn svg { transition: transform 0.2s; opacity: 0.6; }
.wi-region-picker.open .wi-region-btn svg { transform: rotate(180deg); }

.wi-region-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 180px; background: white; border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 0.4rem; opacity: 0; pointer-events: none;
    transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s;
    z-index: 100;
}
.wi-region-picker.open .wi-region-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }

.wi-region-option {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.7rem; border-radius: 6px;
    color: var(--wi-navy); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    transition: background 0.15s;
}
.wi-region-option:hover { background: var(--wi-light); }
.wi-region-option.active { background: rgba(255, 107, 0, 0.08); color: var(--wi-orange); font-weight: 600; }
.wi-region-option img { display: block; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.wi-mobile-toggle {
    display: flex; flex-direction: column; gap: 6px;
    width: 32px; height: 32px; justify-content: center;
    background: none; border: none; cursor: pointer;
}
@media (min-width: 1024px) { .wi-mobile-toggle { display: none; } }
.wi-mobile-toggle span { display: block; height: 2px; background: var(--wi-navy); border-radius: 2px; transition: 0.3s; }

/* Mobile menu */
.wi-mobile-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: white; border-top: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 1.5rem 2rem;
}
.wi-mobile-menu.open { display: block; }
.wi-mobile-menu a {
    display: block; padding: 0.75rem 0; color: var(--wi-navy);
    font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--wi-light);
}
.wi-mobile-menu a:last-child { border-bottom: none; }

/* ---------- Hero ---------- */
.wi-hero { background: linear-gradient(180deg, var(--wi-light) 0%, var(--wi-white) 100%); }
.wi-hero-inner {
    display: grid; grid-template-columns: 1fr; gap: 3rem;
    max-width: 1300px; margin: 0 auto; padding: 4rem 2rem; align-items: center;
}
@media (min-width: 1024px) {
    .wi-hero-inner { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 2rem; }
}
.wi-hero-content { text-align: center; }
@media (min-width: 1024px) { .wi-hero-content { text-align: left; } }
.wi-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); color: var(--wi-navy); margin-bottom: 1.25rem; line-height: 1.15; }
.wi-hero-sub { font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--wi-slate); max-width: 520px; margin-bottom: 2rem; line-height: 1.6; }
.wi-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (min-width: 1024px) { .wi-hero-actions { justify-content: flex-start; } }

.wi-video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15); background: var(--wi-navy);
}
.wi-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Stats Bar */
.wi-stats-bar { background: var(--wi-navy); padding: 2.5rem 2rem; }
.wi-stats-inner {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2rem 3rem; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 640px) { .wi-stats-inner { flex-direction: column; align-items: center; gap: 1.25rem; } }
.wi-stat { text-align: center; min-width: 140px; }
.wi-stat-value {
    display: block; font-family: var(--wi-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
    color: var(--wi-orange); line-height: 1; margin-bottom: 0.375rem;
    /* Figures sit in a row and are read against each other, so they need to
       occupy equal width — proportional digits make the row look ragged. */
    font-variant-numeric: tabular-nums;
}
.wi-stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.7); letter-spacing: 0.02em; }

/* ---------- Logos Strip ---------- */
.wi-logos { padding: 5rem 2rem; background: var(--wi-light); text-align: center; }
.wi-logos > p { font-size: 1.125rem; color: var(--wi-slate); margin-bottom: 2.5rem; font-weight: 500; }
.wi-logos-strip {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 2.5rem 4rem; max-width: 1100px; margin: 0 auto;
}
.wi-logos-strip img {
    height: 50px; width: auto; object-fit: contain;
    filter: grayscale(100%); opacity: 0.7; transition: all 0.3s;
}
@media (min-width: 768px) { .wi-logos-strip img { height: 60px; } }
.wi-logos-strip img:hover { filter: grayscale(0%); opacity: 1; }

/* ---------- Impact Section ---------- */
.wi-impact { padding: 6rem 2rem; background: var(--wi-navy); color: white; }
.wi-impact-header { text-align: center; max-width: 600px; margin: 0 auto 4rem; }
.wi-impact-header h2 { color: white; }

.wi-impact-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    max-width: 1200px; margin: 0 auto;
}
@media (min-width: 768px) { .wi-impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .wi-impact-grid { grid-template-columns: repeat(3, 1fr); }
    .wi-impact-hero-stat { grid-row: span 2; }
}
.wi-impact-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px; padding: 2rem; transition: all 0.3s var(--wi-ease-out);
}
.wi-impact-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }

.wi-impact-hero-stat {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(247, 148, 29, 0.2) 0%, rgba(247, 148, 29, 0.05) 100%);
    border-color: rgba(247, 148, 29, 0.3); overflow: hidden;
}
.wi-impact-hero-stat .wi-impact-label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wi-orange-light); margin-bottom: 0.5rem; }
.wi-impact-hero-stat .wi-impact-value { font-family: var(--wi-font-display); font-size: clamp(3rem, 10vw, 5rem); font-weight: 700; line-height: 1; color: white; font-variant-numeric: tabular-nums; }
.wi-impact-hero-stat .wi-impact-value span { display: block; font-size: 1.5rem; font-weight: 400; color: var(--wi-orange-light); }
.wi-impact-hero-stat .wi-impact-context { font-size: 1rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }

.wi-impact-card .wi-impact-icon { margin-bottom: 1rem; color: var(--wi-orange); }
.wi-impact-card .wi-impact-icon svg { width: 32px; height: 32px; }
.wi-impact-value-sm { font-family: var(--wi-font-display); font-size: 2.5rem; font-weight: 700; color: var(--wi-orange); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.wi-impact-card .wi-impact-stat-label { font-size: 0.9375rem; color: rgba(255,255,255,0.7); }

.wi-impact-cta { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; background: transparent; border-style: dashed; }
.wi-impact-cta p { font-size: 1.125rem; color: rgba(255,255,255,0.8); }

/* ---------- How It Works Bento ---------- */
.wi-how { padding: 6rem 2rem; }
.wi-section-intro { text-align: center; max-width: 600px; margin: 0 auto 4rem; }

.wi-bento-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) { .wi-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

.wi-bento-card {
    background: var(--wi-light); border-radius: 24px; padding: 2rem;
    position: relative; overflow: hidden;
}
/* No hover lift: nothing in these cards is clickable, so a card that rises to
   meet the pointer promises a link that isn't there. */
.wi-bento-card h3 { margin-bottom: 0.75rem; }
.wi-bento-card p { color: var(--wi-slate); font-size: 0.9375rem; line-height: 1.6; }

/* Bento card variants — the four cards used to arrive in grey, yellow, blue and
   purple, four hues that carry no meaning and belong to no other part of the
   brand. They share one quiet surface now; the demo inside each card is what
   tells them apart. The classes stay so the markup keeps its hooks. */
.wi-bento-share,
.wi-bento-track,
.wi-bento-network { background: var(--wi-light); }

.wi-search-demo { margin-top: 1.5rem; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); overflow: hidden; }
.wi-search-bar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--wi-light); color: var(--wi-gray); }
.wi-search-results { padding: 0.5rem; }
.wi-result-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 12px; transition: background 0.2s; }
.wi-result-item:hover { background: var(--wi-light); }
.wi-result-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.wi-result-item div { flex: 1; display: flex; flex-direction: column; }
.wi-result-item strong { font-size: 0.875rem; }
.wi-result-item span { font-size: 0.75rem; color: var(--wi-gray); }
.wi-result-price { background: #dcfce7; color: #166534; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 100px; }

.wi-upload-preview { margin-top: 1.5rem; padding: 2rem; background: rgba(255,255,255,0.7); border: 2px dashed #d97706; border-radius: 16px; text-align: center; }
.wi-upload-icon { color: #d97706; margin-bottom: 0.75rem; display: flex; justify-content: center; }
.wi-upload-preview span { font-size: 0.875rem; color: #92400e; }

.wi-mini-chart { margin-top: 1.5rem; }
.wi-chart-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 100px; gap: 0.5rem; }
/* Bars were blue on an orange-and-navy brand, the last stray hue in this card. */
.wi-bar { flex: 1; height: var(--height); background: var(--wi-orange); border-radius: 6px 6px 0 0; position: relative; min-height: 20px; }
.wi-bar span { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 0.6875rem; color: var(--wi-slate); }

.wi-network-visual { position: relative; height: 120px; margin-top: 1rem; }
.wi-node { position: absolute; width: 16px; height: 16px; background: #9333ea; border-radius: 50%; }
.wi-node-center { width: 24px; height: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--wi-orange); }
.wi-node-1 { top: 15%; left: 20%; }
.wi-node-2 { top: 10%; right: 20%; }
.wi-node-3 { bottom: 10%; left: 22%; }
.wi-node-4 { bottom: 15%; right: 22%; }

/* ---------- Leagues Teaser ---------- */
.wi-leagues-teaser {
    display: grid; grid-template-columns: 1fr; gap: 3rem;
    max-width: 1300px; margin: 0 auto; padding: 6rem 2rem; align-items: center;
}
@media (min-width: 1024px) { .wi-leagues-teaser { grid-template-columns: 1fr 1.4fr; } }
.wi-leagues-content h2 { margin-bottom: 1rem; }
.wi-leagues-content > p { color: var(--wi-slate); font-size: 1.125rem; margin-bottom: 1.5rem; max-width: 450px; }
.wi-league-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.wi-league-categories span {
    display: inline-block; padding: 0.375rem 0.875rem;
    background: var(--wi-light); color: var(--wi-slate);
    font-size: 0.8125rem; font-weight: 500; border-radius: 100px; transition: all 0.2s;
}
.wi-league-categories span:hover { background: var(--wi-orange); color: white; }

.wi-leagues-preview { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .wi-leagues-preview { grid-template-columns: 1fr 1fr; } }

.wi-league-table { background: white; border-radius: 20px; box-shadow: 0 25px 80px rgba(0,0,0,0.1); overflow: hidden; }
.wi-league-header-row { padding: 1.25rem 1.5rem; background: var(--wi-navy); color: white; font-weight: 600; }
.wi-league-row {
    display: grid; grid-template-columns: 36px 1fr auto; align-items: center;
    gap: 0.75rem; padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--wi-light); transition: background 0.2s; font-size: 0.875rem;
}
.wi-league-row:hover { background: var(--wi-light); }
.wi-league-row:last-child { border-bottom: none; }
.wi-league-row .wi-position {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; border-radius: 50%;
    background: var(--wi-light); color: var(--wi-slate);
}
.wi-league-row.gold .wi-position { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
.wi-league-row.silver .wi-position { background: linear-gradient(135deg, #9ca3af, #6b7280); color: white; }
.wi-league-row.bronze .wi-position { background: linear-gradient(135deg, #d97706, #b45309); color: white; }
.wi-league-row .wi-org-name { font-weight: 500; }
.wi-league-row .wi-value { font-weight: 700; color: var(--wi-orange); font-variant-numeric: tabular-nums; }
.wi-league-row.gold { background: linear-gradient(90deg, #fef9c3 0%, white 100%); }
.wi-league-row.silver { background: linear-gradient(90deg, #f1f5f9 0%, white 100%); }
.wi-league-row.bronze { background: linear-gradient(90deg, #fed7aa 0%, white 100%); }

.wi-league-charity .wi-league-header-row { background: linear-gradient(135deg, #ec4899, #be185d); }
.wi-league-charity .wi-league-row .wi-value { color: #be185d; }

/* ---------- Testimonial ---------- */
.wi-testimonial-section { padding: 6rem 2rem; background: var(--wi-light); }
.wi-testimonial-card-large { max-width: 900px; margin: 0 auto; text-align: center; }
.wi-testimonial-card-large blockquote p {
    font-family: var(--wi-font-display); font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400; line-height: 1.4; color: var(--wi-navy);
}
.wi-testimonial-card-large blockquote strong { color: var(--wi-orange); }
.wi-testimonial-author {
    display: inline-flex; align-items: center; gap: 1rem;
    margin-top: 2.5rem; text-align: left;
}
.wi-testimonial-author img { width: 56px; height: 56px; object-fit: contain; background: white; border-radius: 12px; padding: 8px; }
.wi-testimonial-author strong { display: block; font-weight: 600; }
.wi-testimonial-author span { color: var(--wi-gray); font-size: 0.875rem; }

/* ---------- Features Grid ---------- */
.wi-features { padding: 6rem 2rem; }
.wi-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .wi-features-grid { grid-template-columns: repeat(3, 1fr); } }
.wi-feature-card { padding: 2rem; background: var(--wi-light); border-radius: 20px; transition: all 0.3s var(--wi-ease-out); }
.wi-feature-card:hover { background: white; box-shadow: 0 20px 50px rgba(0,0,0,0.08); transform: translateY(-4px); }
.wi-feature-icon { margin-bottom: 1rem; color: var(--wi-orange); }
.wi-feature-card h3 { font-family: var(--wi-font-body); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; }
.wi-feature-card p { font-size: 0.875rem; color: var(--wi-slate); line-height: 1.5; }

/* ---------- Final CTA ---------- */
.wi-final-cta {
    position: relative; padding: 8rem 2rem;
    background: linear-gradient(135deg, var(--wi-orange) 0%, var(--wi-orange-dark) 100%);
    text-align: center; overflow: hidden;
}
.wi-cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.wi-final-cta h2 { color: white; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.wi-final-cta .wi-cta-sub { font-size: 1.25rem; color: rgba(255,255,255,0.9); margin-bottom: 2.5rem; }
.wi-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.wi-cta-note { font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.wi-cta-pattern {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* ---------- Footer ---------- */
.wi-footer { background: var(--wi-navy); color: white; padding: 5rem 2rem 2rem; }
.wi-footer-main {
    display: grid; grid-template-columns: 1fr; gap: 3rem;
    max-width: 1200px; margin: 0 auto; padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .wi-footer-main { grid-template-columns: 2fr 3fr 1.5fr; } }
.wi-footer-logo { height: 36px; width: auto; }
.wi-footer-brand p { color: var(--wi-gray); font-size: 0.9375rem; margin-top: 1.5rem; max-width: 280px; }
.wi-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.wi-footer-col h4 {
    font-family: var(--wi-font-body); font-size: 0.8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--wi-gray); margin-bottom: 1rem;
}
.wi-footer-col a { display: block; color: rgba(255,255,255,0.8); font-size: 0.9375rem; padding: 0.375rem 0; transition: color 0.2s; text-decoration: none; }
.wi-footer-col a:hover { color: white; }
.wi-footer-cta { text-align: left; }
@media (min-width: 768px) { .wi-footer-cta { text-align: right; } }
.wi-footer-cta h4 { font-family: var(--wi-font-body); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wi-gray); margin-bottom: 0.5rem; }
.wi-footer-cta p { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-bottom: 1rem; }
.wi-footer-bottom {
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 1200px; margin: 0 auto; padding-top: 2rem; align-items: center;
}
@media (min-width: 768px) { .wi-footer-bottom { flex-direction: row; justify-content: space-between; } }
.wi-footer-bottom p { font-size: 0.875rem; color: var(--wi-gray); }

/* ---------- Content Pages ---------- */
.wi-page-header { padding: 5rem 2rem 3rem; background: var(--wi-light); text-align: center; }
.wi-page-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.wi-page-header p { font-size: 1.125rem; color: var(--wi-slate); max-width: 600px; margin: 0 auto; }
.wi-content { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; }
.wi-content h2 { margin-top: 3rem; margin-bottom: 1rem; }
.wi-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.wi-content p { color: var(--wi-slate); margin-bottom: 1.5rem; line-height: 1.8; }
.wi-content ul, .wi-content ol { color: var(--wi-slate); margin-bottom: 1.5rem; padding-left: 1.5rem; }
.wi-content li { margin-bottom: 0.5rem; line-height: 1.6; }

/* ---------- Pricing ---------- */
.wi-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
@media (min-width: 768px) { .wi-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wi-pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.wi-pricing-card { background: white; border: 2px solid var(--wi-light); border-radius: 24px; padding: 2.5rem; transition: all 0.3s var(--wi-ease-out); }
.wi-pricing-card:hover { border-color: var(--wi-orange); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.wi-pricing-card.featured { border-color: var(--wi-orange); background: linear-gradient(180deg, #fff7ed 0%, white 30%); }
.wi-pricing-card h3 { font-family: var(--wi-font-body); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.wi-pricing-card .wi-price { font-family: var(--wi-font-display); font-size: 2.5rem; font-weight: 700; color: var(--wi-navy); margin: 1rem 0; }
.wi-pricing-card .wi-price span { font-size: 1rem; font-weight: 400; color: var(--wi-slate); }
.wi-pricing-card ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.wi-pricing-card li { padding: 0.5rem 0; color: var(--wi-slate); font-size: 0.9375rem; border-bottom: 1px solid var(--wi-light); }
.wi-pricing-card li:last-child { border-bottom: none; }
.wi-pricing-card li::before { content: '✓ '; color: var(--wi-orange); font-weight: 700; }

/* Instant price (Task 108, job 9c4102c1): number of employees -> one price. Stacks on a phone (390px). */
.wi-price-calc { max-width: 760px; margin: 2.5rem auto 0; padding: 0 1rem; }
.wi-price-calc-box { background: white; border: 2px solid var(--wi-light); border-radius: 24px; padding: 1.5rem; }
.wi-price-calc h2 { font-family: var(--wi-font-body); font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
.wi-price-calc form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.wi-price-calc .wi-field { flex: 1 1 220px; min-width: 0; }
.wi-price-calc label { display: block; font-size: 0.875rem; color: var(--wi-slate); margin-bottom: 0.35rem; }
.wi-price-calc input[type=number] { width: 100%; box-sizing: border-box; font-size: 1.125rem; padding: 0.7rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 12px; color: var(--wi-navy); }
.wi-price-calc input[type=number]:focus { outline: 2px solid var(--wi-orange); outline-offset: 1px; }
.wi-price-calc form .wi-btn-primary { flex: 0 0 auto; }
.wi-price-calc-result { margin-top: 1.25rem; border-top: 1px solid var(--wi-light); padding-top: 1.25rem; }
.wi-price-calc [hidden] { display: none !important; }
.wi-price-calc-figure { font-family: var(--wi-font-display); font-size: 2.25rem; font-weight: 700; color: var(--wi-navy); line-height: 1.2; }
.wi-price-calc-figure span { font-family: var(--wi-font-body); font-size: 1rem; font-weight: 400; color: var(--wi-slate); }
.wi-price-calc-sub { color: var(--wi-slate); margin: 0.35rem 0 1rem; }
.wi-price-calc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 480px) {
    .wi-price-calc form .wi-btn-primary, .wi-price-calc-actions a { width: 100%; justify-content: center; }
}
/* Self-serve quote (job b177b485): the form stacks one field per row; the preview is the document's own lines. */
.wi-quote-form { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 640px) { .wi-quote-form { grid-template-columns: 1fr 1fr; } .wi-quote-form .wi-btn-primary { grid-column: 1 / -1; justify-self: start; } }
.wi-quote-form label { display: block; font-size: 0.875rem; color: var(--wi-slate); margin-bottom: 0.35rem; }
.wi-quote-form input[type=number], .wi-quote-form input[type=text], .wi-quote-form input[type=email], .wi-quote-form input[type=tel] {
    width: 100%; box-sizing: border-box; font-size: 1rem; padding: 0.65rem 0.85rem; border: 1px solid #cbd5e1; border-radius: 12px; color: var(--wi-navy); }
.wi-quote-form input:focus { outline: 2px solid var(--wi-orange); outline-offset: 1px; }
@media (max-width: 480px) { .wi-quote-form .wi-btn-primary { width: 100%; justify-content: center; } }
.wi-quote-preview { margin-bottom: 1.5rem; }
.wi-quote-lines { width: 100%; border-collapse: collapse; }
.wi-quote-lines td { padding: 0.45rem 0; border-bottom: 1px solid var(--wi-light); vertical-align: top; }
.wi-quote-lines td + td { text-align: right; padding-left: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wi-quote-lines tr:last-child td { font-weight: 600; border-bottom: none; }
.wi-procurement { max-width: 760px; margin: 1.5rem auto 0; padding: 0 1rem; color: var(--wi-slate); text-align: center; }

/* FAQ */
.wi-faq-list { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; }
.wi-faq-item { border-bottom: 1px solid var(--wi-light); }
.wi-faq-q {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 0; cursor: pointer; font-weight: 600; font-size: 1.0625rem;
    color: var(--wi-navy); background: none; border: none; width: 100%; text-align: left;
    font-family: var(--wi-font-body);
}
.wi-faq-q:hover { color: var(--wi-orange); }
.wi-faq-q svg { flex-shrink: 0; transition: transform 0.3s; }
.wi-faq-item.open .wi-faq-q svg { transform: rotate(180deg); }
.wi-faq-a { display: none; padding: 0 0 1.5rem; color: var(--wi-slate); line-height: 1.7; }
.wi-faq-item.open .wi-faq-a { display: block; }

/* Contact Form */
.wi-contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
@media (min-width: 768px) { .wi-contact-grid { grid-template-columns: 1fr 1fr; } }
.wi-form-group { margin-bottom: 1.5rem; }
.wi-form-group label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--wi-navy); margin-bottom: 0.5rem; }
.wi-form-group input, .wi-form-group textarea, .wi-form-group select {
    width: 100%; padding: 0.75rem 1rem; border: 2px solid #e2e8f0;
    border-radius: 12px; font-family: var(--wi-font-body); font-size: 1rem;
    transition: border-color 0.2s; background: white;
}
.wi-form-group input:focus, .wi-form-group textarea:focus, .wi-form-group select:focus {
    outline: none; border-color: var(--wi-orange);
}
.wi-form-group textarea { min-height: 150px; resize: vertical; }

/* Tour Steps */
.wi-tour-steps { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
.wi-tour-step {
    display: grid; grid-template-columns: 1fr; gap: 3rem;
    padding: 4rem 0; border-bottom: 1px solid var(--wi-light); align-items: center;
}
@media (min-width: 768px) { .wi-tour-step { grid-template-columns: 1fr 1fr; } }
.wi-tour-step:nth-child(even) .wi-tour-visual { order: -1; }
.wi-tour-step h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.wi-tour-step p { color: var(--wi-slate); line-height: 1.7; margin-bottom: 1rem; }
.wi-tour-visual {
    background: var(--wi-light); border-radius: 24px; padding: 3rem;
    display: flex; align-items: center; justify-content: center; min-height: 250px;
    color: var(--wi-orange);
}
/* A panel still holding only an icon (the real visuals are not made yet - front-end job
   3dec2821). On a phone the grid stacks, and a full-width 250px grey card per step was five
   big empty gaps down How It Works (Simon, 13 Oct 2026). There it becomes a small badge
   above the heading instead. A panel given a real picture or clip drops this class. */
@media (max-width: 767px) {
    .wi-tour-step:has(.wi-tour-visual-icon) { gap: 1rem; padding: 2.5rem 0; }
    .wi-tour-visual-icon {
        order: -1; justify-self: start; min-height: 0; padding: .9rem; border-radius: 16px;
    }
    .wi-tour-visual-icon svg { width: 36px; height: 36px; }
}
/* A panel holding its step's looping clip (_TourClip, job 3dec2821): the clip fills the card edge
   to edge at its own 5:3, so there is no padding or minimum height to leave empty space. On a
   phone it goes above the step's text, the same for every step. */
.wi-tour-visual-clip { padding: 0; min-height: 0; aspect-ratio: 5 / 3; overflow: hidden; background: var(--wi-navy); }
.wi-tour-visual-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .wi-tour-visual-clip { order: -1; } }

/* Tour Sub-page Navigation */
.wi-tour-nav { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem 0; }
.wi-tour-nav-links {
    display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0;
    border-bottom: 2px solid var(--wi-light);
}
.wi-tour-nav-links a {
    display: block; padding: 0.75rem 1.25rem; text-decoration: none;
    color: var(--wi-slate); font-size: 0.9rem; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s;
    white-space: nowrap;
}
.wi-tour-nav-links a:hover { color: var(--wi-dark); border-bottom-color: var(--wi-slate); }
.wi-tour-nav-links a.active { color: var(--wi-orange); border-bottom-color: var(--wi-orange); }
.wi-tour-back { margin-top: 1rem; display: inline-block; font-size: 0.85rem; color: var(--wi-slate); text-decoration: none; }
.wi-tour-back:hover { color: var(--wi-orange); }

/* Tour Sub-page Content Sections */
.wi-tour-content { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
.wi-tour-content h2 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--wi-dark); }
.wi-tour-content p { color: var(--wi-slate); line-height: 1.7; margin-bottom: 1rem; }
.wi-tour-section {
    padding: 2.5rem 0; border-bottom: 1px solid var(--wi-light);
}
.wi-tour-section:last-child { border-bottom: none; }
.wi-tour-section h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--wi-dark); }
.wi-tour-grid {
    display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem;
}
@media (min-width: 768px) { .wi-tour-grid { grid-template-columns: repeat(2, 1fr); } }
.wi-tour-card {
    background: var(--wi-light); border-radius: 16px; padding: 2rem;
}
.wi-tour-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--wi-dark); }
.wi-tour-card p { color: var(--wi-slate); line-height: 1.6; margin-bottom: 0; font-size: 0.95rem; }
.wi-tour-highlight {
    background: linear-gradient(135deg, var(--wi-orange), #ff8a50);
    color: #fff; border-radius: 16px; padding: 2rem; margin: 2rem 0;
}
.wi-tour-highlight h3, .wi-tour-highlight p { color: #fff; }
.wi-tour-list { list-style: none; padding: 0; margin: 1rem 0; }
.wi-tour-list li {
    padding: 0.75rem 0; border-bottom: 1px solid var(--wi-light);
    color: var(--wi-slate); line-height: 1.6; padding-left: 1.5rem; position: relative;
}
.wi-tour-list li::before {
    content: ''; position: absolute; left: 0; top: 1.1rem;
    width: 8px; height: 8px; border-radius: 50%; background: var(--wi-orange);
}
.wi-tour-list li:last-child { border-bottom: none; }
.wi-tour-quote {
    background: var(--wi-light); border-left: 4px solid var(--wi-orange);
    padding: 1.5rem 2rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0; font-style: italic;
}
.wi-tour-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-weight: 600; color: var(--wi-dark); font-size: 0.9rem; }

/* The seven Tour sub-pages on a phone (front-end job 3dec2821, after How It Works got the
   same pass in c8cba64). At 390px the seven tabs wrapped into four ragged rows, so the
   first screen held a header and a menu and no content; the 2rem gutters squeezed the
   quote cards on How This Helps to a ~240px text column; and the header, sections and
   closing banner kept desktop-sized padding. Every rule is phone-only and scoped to the
   sub-pages (they are the only pages with .wi-tour-nav), so desktop is unchanged. */
@media (max-width: 767px) {
    .wi-page-header:has(+ .wi-tour-nav) { padding: 2.5rem 1.25rem 2rem; }
    .wi-tour-nav { padding: 1.25rem 1.25rem 0; }
    .wi-tour-nav-links { gap: .4rem; border-bottom: none; }
    .wi-tour-nav-links a {
        padding: .4rem .75rem; font-size: .85rem; margin-bottom: 0;
        border: 1px solid #e2e8f0; border-radius: 999px;
    }
    .wi-tour-nav-links a:hover { border-color: var(--wi-slate); }
    .wi-tour-nav-links a.active { border-color: var(--wi-orange); }
    .wi-tour-back { margin-top: .75rem; }
    .wi-tour-content { padding: 1rem 1.25rem 2rem; }
    .wi-tour-section { padding: 1.75rem 0; }
    .wi-tour-content h2 { font-size: 1.35rem; margin-bottom: .75rem; }
    .wi-tour-quote { padding: 1rem 1.1rem; margin: 1rem 0 0; }
    .wi-tour-quote p:last-child { margin-bottom: 0; }
    .wi-tour-highlight { padding: 1.25rem; margin: 1rem 0 0; }
    .wi-tour-highlight p:last-child { margin-bottom: 0; }
    .wi-tour-content + .wi-final-cta { padding: 4rem 1.25rem; }
    .wi-tour-content + .wi-final-cta .wi-cta-sub { font-size: 1.1rem; margin-bottom: 1.75rem; }
}

/* Leagues Full Page */
.wi-leagues-full { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
.wi-leagues-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .wi-leagues-grid { grid-template-columns: repeat(2, 1fr); } }

/* Clients Page */
.wi-clients-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
@media (min-width: 768px) { .wi-clients-grid { grid-template-columns: repeat(2, 1fr); } }
.wi-testimonial-card {
    background: white; border: 1px solid var(--wi-light); border-radius: 20px; padding: 2rem;
    transition: all 0.3s var(--wi-ease-out);
}
.wi-testimonial-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.08); transform: translateY(-4px); }
.wi-testimonial-card .wi-stars { color: var(--wi-orange); margin-bottom: 1rem; font-size: 1.25rem; }
.wi-testimonial-card p { color: var(--wi-slate); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1rem; font-style: italic; }
.wi-testimonial-card .wi-author { font-weight: 600; font-size: 0.875rem; color: var(--wi-navy); }
.wi-testimonial-card .wi-org { font-size: 0.8125rem; color: var(--wi-gray); }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
    .wi-bento-card, .wi-feature-card, .wi-impact-card, .wi-pricing-card, .wi-testimonial-card {
        opacity: 0; transform: translateY(30px);
    }
    .wi-animate { animation: wiFadeUp 0.6s var(--wi-ease-out) forwards; }
}
@keyframes wiFadeUp { to { opacity: 1; transform: translateY(0); } }

/* CMS Content Columns */
.wi-cms-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
@media (min-width: 768px) { .wi-cms-columns { grid-template-columns: 1fr 1fr 1fr; } }
.wi-col3 { }
.wi-col3 h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--wi-navy); }
.wi-col3 p { color: var(--wi-slate); line-height: 1.7; }
.wi-col3 a { color: var(--wi-orange); text-decoration: none; }
.wi-col3 a:hover { text-decoration: underline; }

/* ---------- Sign-up page (Danny, Task ref 12) ----------
   Pages/Auth/_SignUpJourney.cshtml. One solid button ("Create Your Portal"); the participation
   routes are text links in cards and "Talk to Us" / "Sign in" are plain links, so the hierarchy is
   visibly unequal. Also loaded inside the portal shell on the country portals, where Tailwind's
   reset is present: every rule below sets its own margins and sizes rather than relying on the
   browser defaults. */
.wi-signup { color: var(--wi-navy); }
.wi-signup-framed { background: var(--wi-white); border: 1px solid #e5e7eb; border-radius: 24px; overflow: hidden; }
/* Keyboard focus keeps the site-wide ring from _AccessibilityHead (blue #2563eb, about 5:1 on
   white). An orange ring here measured about 2.3:1 on these white and light backgrounds, under the
   3:1 a focus indicator needs, so it is only thickened, never recoloured. */
.wi-signup a:focus-visible { outline-width: 3px; outline-offset: 3px; }

.wi-signup-hero {
    background: linear-gradient(180deg, var(--wi-light) 0%, var(--wi-white) 100%);
    padding: 3.5rem 1rem 3rem; text-align: center;
}
.wi-signup-hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.wi-signup-hero h1 {
    font-size: clamp(1.875rem, 5.5vw, 3.25rem); line-height: 1.12; color: var(--wi-navy);
    margin-top: 0; margin-bottom: 1.25rem; text-wrap: balance;
}
.wi-signup-lead { font-size: clamp(1.0625rem, 2.2vw, 1.1875rem); color: var(--wi-slate); line-height: 1.6; margin-top: 0; margin-bottom: 0.75rem; max-width: 620px; }
.wi-signup-audience { font-size: 0.9375rem; color: var(--wi-slate); line-height: 1.55; margin-top: 0; margin-bottom: 2rem; max-width: 620px; }
.wi-signup-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; }
@media (max-width: 480px) { .wi-signup-actions a { width: 100%; justify-content: center; } }
.wi-signup-reassure {
    list-style: none; padding: 0; margin-top: 1.25rem; margin-bottom: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem;
    font-size: 0.875rem; color: var(--wi-slate);
}
.wi-signup-reassure li { display: inline-flex; align-items: center; gap: 0.375rem; }
.wi-signup-reassure svg { color: var(--wi-orange); flex-shrink: 0; }

/* The assessment period (CRM job 3aa86c3f): Danny's supporting line above the buttons, then a small
   three-step explainer under the hero, in the route cards' own card style. The day labels are navy on
   the warm tint, never orange text: orange on white is about 2.2:1. */
.wi-signup-assessment-lead { font-size: 1rem; color: var(--wi-navy-light); line-height: 1.6; margin-top: -0.75rem; margin-bottom: 1.5rem; max-width: 620px; }
.wi-signup-assessment { padding: 0 1rem 2.75rem; }
.wi-signup-assessment-inner {
    max-width: 1100px; margin: 0 auto;
    background: var(--wi-tint); border: 1px solid #fde3c2; border-radius: 16px; padding: 1.5rem 1.25rem 1.375rem;
}
@media (min-width: 768px) { .wi-signup-assessment-inner { padding: 1.75rem 2rem 1.5rem; } }
.wi-signup-assessment h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); color: var(--wi-navy); margin: 0 0 0.375rem; text-align: center; }
.wi-signup-assessment-why { font-size: 0.9375rem; color: var(--wi-slate); line-height: 1.55; margin: 0 auto 1.25rem; max-width: 640px; text-align: center; }
.wi-signup-assessment-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 768px) { .wi-signup-assessment-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.wi-signup-assessment-steps li { background: var(--wi-white); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.125rem 1.125rem; }
.wi-signup-assessment-days {
    display: inline-block; font-size: 0.8125rem; font-weight: 700; color: var(--wi-navy);
    background: var(--wi-tint); border: 1px solid var(--wi-orange); border-radius: 999px; padding: 0.125rem 0.625rem; margin-bottom: 0.5rem;
}
.wi-signup-assessment-steps h3 {
    font-family: var(--wi-font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0;
    line-height: 1.3; color: var(--wi-navy); margin: 0 0 0.25rem;
}
.wi-signup-assessment-steps p { font-size: 0.9375rem; color: var(--wi-slate); line-height: 1.55; margin: 0; }
.wi-signup-assessment-po { text-align: center; font-size: 0.9375rem; color: var(--wi-slate); margin: 1.25rem 0 0; }
.wi-signup-assessment-po a { color: var(--wi-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wi-signup-assessment-po a:hover { color: var(--wi-orange-dark); }

.wi-signup-routes { background: var(--wi-light); padding: 2.5rem 1rem 2.75rem; }
.wi-signup-routes-inner { max-width: 1100px; margin: 0 auto; }
.wi-signup-routes h2 { font-size: clamp(1.375rem, 3.5vw, 1.875rem); text-align: center; color: var(--wi-navy); margin: 0 0 1.5rem; }
/* The Pricing page's free row links to this heading: land it below the sticky header, not under it. */
.wi-signup-routes h2[id] { scroll-margin-top: 6rem; }
.wi-signup-route-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .wi-signup-route-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.wi-signup-route {
    display: flex; flex-direction: column;
    background: var(--wi-white); border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem 1.25rem 1.375rem;
}
.wi-signup-route h3 {
    font-family: var(--wi-font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0;
    line-height: 1.3; color: var(--wi-navy); margin: 0 0 0.375rem;
}
.wi-signup-route p { font-size: 0.9375rem; color: var(--wi-slate); line-height: 1.55; margin: 0 0 1rem; }
.wi-signup-route-link {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-top: auto;
    font-weight: 600; font-size: 0.9375rem; color: var(--wi-navy);
    text-decoration: underline; text-decoration-color: rgba(15, 23, 42, 0.3); text-underline-offset: 3px;
}
.wi-signup-route-link:hover { color: var(--wi-orange-dark); text-decoration-color: currentColor; }
.wi-signup-route-link svg { flex-shrink: 0; }
.wi-signup-route .wi-signup-route-note { font-size: 0.8125rem; margin: 0.625rem 0 0; }

.wi-signup-support { text-align: center; font-size: 0.9375rem; color: var(--wi-slate); margin: 1.75rem 0 0; }
.wi-signup-support + .wi-signup-support { margin-top: 0.5rem; }
.wi-signup-returning { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 2.75rem; text-align: center; font-size: 0.9375rem; color: var(--wi-slate); }
.wi-signup-returning p { margin: 0 0 0.375rem; }
.wi-signup-support a, .wi-signup-returning a, .wi-signup-route-note a {
    color: var(--wi-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.wi-signup-support a:hover, .wi-signup-returning a:hover, .wi-signup-route-note a:hover { color: var(--wi-orange-dark); }

/* The one/many question each of the school and charity routes asks first (point 3). */
.wi-signup-question { max-width: 720px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.wi-signup-back {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 1.5rem;
    font-size: 0.875rem; font-weight: 600; color: var(--wi-slate); text-decoration: none;
}
.wi-signup-back:hover { color: var(--wi-navy); }
.wi-signup-question .wi-eyebrow { display: block; }
.wi-signup-question h1 {
    font-size: clamp(1.625rem, 4.5vw, 2.5rem); line-height: 1.15; color: var(--wi-navy);
    margin: 0 0 1.75rem; text-wrap: balance;
}
.wi-signup-answers { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .wi-signup-answers { grid-template-columns: 1fr 1fr; } }
.wi-signup-answer {
    display: flex; flex-direction: column; gap: 0.375rem;
    background: var(--wi-white); border: 2px solid #e2e8f0; border-radius: 16px; padding: 1.25rem 1.375rem;
    color: var(--wi-navy); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.wi-signup-answer:hover { border-color: var(--wi-orange); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.wi-signup-answer-title { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.wi-signup-answer-text { font-size: 0.9375rem; color: var(--wi-slate); line-height: 1.55; }