/* ============================================================
   Grypes Rutgers 1.2.2 — standalone landing / verify / confirm
   Mobile-first. Bricolage Grotesque display, system-ui body.
   Accent: Grypes electric blue #cc0033.
   ============================================================ */

:root {
    --gyr-scarlet: #cc0033;
    --gyr-scarlet-dark: #a5002a;
    --gyr-scarlet-deep: #7e0020;
    --gyr-ink: #131a2e;
    --gyr-body: #3f465c;
    --gyr-muted: #6b7288;
    --gyr-faint: #9aa1b5;
    --gyr-line: #e7eaf3;
    --gyr-soft: #f5f7ff;
    --gyr-bg: #ffffff;
    --gyr-radius: 20px;
    --gyr-shadow: 0 10px 30px rgba(19, 26, 46, 0.07);
    --gyr-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gyr-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- standalone document shell ---- */

html.gyr-doc { -webkit-text-size-adjust: 100%; }

body.gyr-page {
    margin: 0;
    background: var(--gyr-bg);
    color: var(--gyr-body);
    font-family: var(--gyr-font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.gyr-page *,
body.gyr-page *::before,
body.gyr-page *::after { box-sizing: border-box; }

.gyr-shell { min-height: 100vh; display: flex; flex-direction: column; }
.gyr-main { flex: 1 0 auto; }

.gyr-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---- slim sticky header ---- */

.gyr-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gyr-header.is-scrolled {
    border-bottom-color: var(--gyr-line);
    box-shadow: 0 4px 18px rgba(19, 26, 46, 0.05);
}

.gyr-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gyr-wordmark {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--gyr-ink);
    text-decoration: none;
}

.gyr-wordmark span { color: var(--gyr-scarlet); }

.gyr-header-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gyr-ink);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--gyr-line);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.gyr-header-link:hover { border-color: var(--gyr-scarlet); color: var(--gyr-scarlet); }

/* ---- hero ---- */

.gyr-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 88px 20px 72px;
    background:
        radial-gradient(640px 420px at 12% 8%, rgba(204, 0, 51, 0.10), transparent 62%),
        radial-gradient(720px 480px at 88% 14%, rgba(124, 93, 250, 0.08), transparent 60%),
        radial-gradient(560px 420px at 50% 108%, rgba(204, 0, 51, 0.07), transparent 60%);
}

.gyr-hero-inner { max-width: 820px; margin: 0 auto; position: relative; }

.gyr-kicker {
    display: inline-block;
    font-family: var(--gyr-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gyr-scarlet);
    background: rgba(204, 0, 51, 0.09);
    border: 1px solid rgba(204, 0, 51, 0.18);
    border-radius: 999px;
    padding: 7px 18px;
    margin: 0 0 22px;
}

.gyr-hero h1 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: var(--gyr-ink);
    font-size: clamp(2.75rem, 7vw + 1rem, 4.75rem);
    margin: 0 0 20px;
    text-wrap: balance;
}

.gyr-lede {
    font-size: clamp(1.08rem, 1.5vw + 0.9rem, 1.3rem);
    line-height: 1.55;
    color: var(--gyr-body);
    max-width: 36rem;
    margin: 0 auto 34px;
    text-wrap: balance;
}

.gyr-cta-row { margin: 0 0 16px; }

.gyr-btn {
    display: inline-block;
    padding: 16px 40px;
    border: none;
    border-radius: 999px;
    background: var(--gyr-scarlet);
    color: #fff;
    font-family: var(--gyr-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    min-height: 56px;
    box-shadow: 0 12px 28px rgba(204, 0, 51, 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.gyr-btn:hover {
    background: var(--gyr-scarlet-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(204, 0, 51, 0.38);
}

.gyr-btn:active { transform: translateY(0); }

.gyr-btn:focus-visible,
.gyr-header-link:focus-visible,
.gyr-wordmark:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(204, 0, 51, 0.45);
    outline-offset: 3px;
    border-radius: 6px;
}

.gyr-btn-white {
    background: #fff;
    color: var(--gyr-scarlet-deep);
    box-shadow: 0 12px 28px rgba(10, 25, 80, 0.28);
}

.gyr-btn-white:hover { background: #f2f5ff; color: var(--gyr-scarlet-deep); }

.gyr-trust {
    font-size: 0.92rem;
    color: var(--gyr-muted);
    margin: 0;
}

/* ---- ruscrewed strip ---- */

.gyr-ruscrewed {
    background: rgba(204, 0, 51, 0.06);
    border-top: 1px solid rgba(204, 0, 51, 0.14);
    border-bottom: 1px solid rgba(204, 0, 51, 0.14);
    padding: 44px 0;
    text-align: center;
}

.gyr-ruscrewed-kicker {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 2.4vw + 1rem, 2.2rem);
    color: var(--gyr-scarlet);
    margin: 0 0 10px;
}

.gyr-ruscrewed p:last-child {
    margin: 0 auto;
    max-width: 600px;
    color: var(--gyr-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.gyr-ruscrewed-link {
    color: var(--gyr-scarlet);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gyr-ruscrewed-link:hover { color: var(--gyr-scarlet-dark); }

/* ---- sections ---- */

.gyr-section { padding: 72px 0; }
.gyr-section.alt { background: var(--gyr-soft); }

.gyr-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }

.gyr-section-head h2 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--gyr-ink);
    font-size: clamp(1.6rem, 2.6vw + 1rem, 2.4rem);
    margin: 0 0 12px;
    text-wrap: balance;
}

.gyr-section-head p { margin: 0; color: var(--gyr-muted); font-size: 1.05rem; }

/* benefit cards */

.gyr-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 720px) {
    .gyr-cards { grid-template-columns: repeat(3, 1fr); }
}

.gyr-card-item {
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: var(--gyr-radius);
    padding: 30px 26px;
    box-shadow: var(--gyr-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gyr-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(19, 26, 46, 0.10);
}

.gyr-card-num {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--gyr-scarlet);
    margin-bottom: 14px;
}

.gyr-card-item h3 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -0.01em;
    color: var(--gyr-ink);
    margin: 0 0 8px;
}

.gyr-card-item p { margin: 0; font-size: 0.98rem; color: var(--gyr-body); }

/* steps */

.gyr-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
    counter-reset: gyr-step;
}

@media (min-width: 720px) {
    .gyr-steps { grid-template-columns: repeat(3, 1fr); }
}

.gyr-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: var(--gyr-radius);
    padding: 30px 26px 28px;
    box-shadow: var(--gyr-shadow);
}

.gyr-step::before {
    counter-increment: gyr-step;
    content: counter(gyr-step, decimal-leading-zero);
    display: block;
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--gyr-scarlet);
    opacity: 0.9;
    margin-bottom: 12px;
}

.gyr-step h3 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--gyr-ink);
    margin: 0 0 8px;
}

.gyr-step p { margin: 0; font-size: 0.97rem; color: var(--gyr-body); }

/* guidelines */

.gyr-rules {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: var(--gyr-radius);
    padding: 12px 28px;
    box-shadow: var(--gyr-shadow);
    list-style: none;
}

.gyr-rules li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--gyr-line);
    font-size: 1rem;
    color: var(--gyr-body);
}

.gyr-rules li:last-child { border-bottom: none; }

.gyr-rules li::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(204, 0, 51, 0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 3.4 8.5l1.1-1.1 1.7 1.7 5.3-5.3 1.1 1.1z' fill='%23cc0033'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- CTA band ---- */

.gyr-cta-band {
    background: linear-gradient(135deg, var(--gyr-scarlet) 0%, var(--gyr-scarlet-deep) 100%);
    border-radius: 28px;
    padding: 64px 32px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.gyr-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(480px 300px at 18% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
        radial-gradient(520px 340px at 85% 100%, rgba(255, 255, 255, 0.10), transparent 60%);
    pointer-events: none;
}

.gyr-cta-band h2 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 3.4vw + 1rem, 2.9rem);
    line-height: 1.08;
    margin: 0 0 12px;
    position: relative;
    text-wrap: balance;
}

.gyr-cta-band p { margin: 0 0 30px; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; position: relative; }
.gyr-cta-band .gyr-cta-row { position: relative; margin: 0; }

/* ---- footer ---- */

.gyr-footer {
    border-top: 1px solid var(--gyr-line);
    padding: 40px 0 48px;
    margin-top: 24px;
}

.gyr-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gyr-footer-brand {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--gyr-ink);
    text-decoration: none;
}

.gyr-footer-brand span { color: var(--gyr-scarlet); }

.gyr-disclaimer {
    font-size: 0.8rem;
    color: var(--gyr-faint);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

.gyr-copyright { font-size: 0.82rem; color: var(--gyr-faint); margin: 0; }

/* ---- verify / card surfaces ---- */

.gyr-narrow { max-width: 600px; margin: 0 auto; padding: 72px 20px 88px; }

.gyr-wrap {
    font-family: var(--gyr-font-body);
    color: var(--gyr-body);
}

.gyr-card {
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: var(--gyr-shadow);
}

.gyr-card h2 {
    font-family: var(--gyr-font-display);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--gyr-ink);
    margin: 0 0 12px;
    text-wrap: balance;
}

.gyr-card > p { margin: 0 0 12px; }

.gyr-muted { color: var(--gyr-muted); font-size: 0.98rem; line-height: 1.6; }
.gyr-hint { color: var(--gyr-muted); font-size: 0.86rem; margin: 8px 0 0; }
.gyr-fineprint { color: var(--gyr-faint); font-size: 0.82rem; line-height: 1.55; margin: 20px 0 0; }

.gyr-card label {
    display: block;
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--gyr-ink);
    margin: 20px 0 8px;
}

.gyr-card input[type="email"],
.gyr-card select {
    width: 100%;
    font-family: var(--gyr-font-body);
    font-size: 16px; /* no iOS zoom */
    padding: 14px 16px;
    border: 1.5px solid #d4d8e6;
    border-radius: 14px;
    background: #fff;
    color: var(--gyr-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gyr-card input[type="email"]:focus,
.gyr-card select:focus {
    outline: none;
    border-color: var(--gyr-scarlet);
    box-shadow: 0 0 0 4px rgba(204, 0, 51, 0.16);
}

.gyr-card .gyr-btn { width: 100%; margin-top: 24px; }

.gyr-notice {
    border-radius: 14px;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.gyr-ok { background: #e9f7ef; border: 1px solid #bfe6cd; color: #1d6b3c; }
.gyr-err { background: #fdeeee; border: 1px solid #f5c6c6; color: #a32c2c; }

.gyr-preview-banner {
    max-width: 1120px;
    margin: 16px auto 0;
    padding: 0 20px;
}

.gyr-preview-banner span {
    display: block;
    padding: 12px 18px;
    background: #fff8e1;
    border: 1px solid #f0df9e;
    border-radius: 12px;
    font-size: 0.86rem;
    color: #7a5c00;
}

/* status icon on confirm / verified cards */

.gyr-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
}

.gyr-status-ok { background: rgba(204, 0, 51, 0.10); }
.gyr-status-err { background: #fdeeee; }

/* ---- coming soon ---- */

.gyr-soon {
    text-align: center;
    padding: 110px 20px 120px;
    background:
        radial-gradient(640px 420px at 50% 0%, rgba(204, 0, 51, 0.09), transparent 62%);
}

.gyr-soon h1 {
    font-family: var(--gyr-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--gyr-ink);
    font-size: clamp(2.2rem, 6vw + 1rem, 3.75rem);
    margin: 0 0 18px;
    text-wrap: balance;
}

.gyr-soon p { max-width: 34rem; margin: 0 auto; color: var(--gyr-muted); font-size: 1.1rem; }

/* ---- confirm page backdrop ---- */

body.gyr-tinted { background: var(--gyr-soft); }

/* ---- small screens ---- */

@media (max-width: 560px) {
    .gyr-hero { padding: 64px 20px 56px; }
    .gyr-section { padding: 52px 0; }
    .gyr-card { padding: 30px 22px; }
    .gyr-cta-band { padding: 48px 24px; border-radius: 22px; }
    .gyr-btn { width: 100%; padding: 16px 24px; }
    .gyr-header-link { padding: 9px 15px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gyr-btn, .gyr-card-item { transition: none; }
}

/* ============================================================
   Invite page (1.2.0): recognition band, topics, privacy card,
   FAQ accordions, sticky mobile CTA.
   ============================================================ */

.gyr-section-head .gyr-kicker { margin-bottom: 14px; }

/* recognition band */

.gyr-recognition {
    padding: 56px 0 8px;
    text-align: center;
}

.gyr-recognition p {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--gyr-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--gyr-ink);
    font-size: clamp(1.3rem, 2.2vw + 0.9rem, 1.8rem);
    text-wrap: balance;
}

/* topics */

.gyr-topics {
    list-style: none;
    margin: 0 auto 28px;
    padding: 0;
    max-width: 820px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.gyr-topics li {
    font-family: var(--gyr-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--gyr-ink);
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: 999px;
    padding: 10px 20px;
    box-shadow: var(--gyr-shadow);
}

.gyr-inside-note {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    color: var(--gyr-body);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* privacy card */

.gyr-privacy-card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: var(--gyr-radius);
    padding: 34px 32px;
    box-shadow: var(--gyr-shadow);
}

.gyr-privacy-card p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--gyr-body);
}

/* FAQ accordions (native details/summary: collapsed by default) */

.gyr-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gyr-faq-item {
    background: #fff;
    border: 1px solid var(--gyr-line);
    border-radius: 16px;
    box-shadow: var(--gyr-shadow);
    overflow: hidden;
}

.gyr-faq-item summary {
    font-family: var(--gyr-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gyr-ink);
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
}

.gyr-faq-item summary::-webkit-details-marker { display: none; }

.gyr-faq-item summary::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid var(--gyr-scarlet);
    border-bottom: 2.5px solid var(--gyr-scarlet);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.gyr-faq-item[open ] summary::after { transform: rotate(225deg); }

.gyr-faq-item summary:focus-visible {
    outline: 3px solid rgba(204, 0, 51, 0.45);
    outline-offset: -3px;
}

.gyr-faq-a {
    padding: 0 24px 22px;
    border-top: 1px solid var(--gyr-line);
}

.gyr-faq-a p {
    margin: 16px 0 0;
    font-size: 0.99rem;
    line-height: 1.65;
    color: var(--gyr-body);
}

/* invite footer disclaimers: exact lines, readable size */

.gyr-disclaimer-lg {
    font-size: 0.95rem;
    color: var(--gyr-muted);
    max-width: 720px;
}

/* sticky mobile CTA (JS toggles .is-visible once the hero CTA is gone) */

.gyr-sticky-cta {
    display: none;
}

@media (max-width: 720px) {
    .gyr-sticky-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--gyr-line);
        box-shadow: 0 -6px 24px rgba(19, 26, 46, 0.10);
        transform: translateY(110%);
        transition: transform 0.28s ease;
    }

    .gyr-sticky-cta.is-visible { transform: translateY(0); }

    .gyr-sticky-cta .gyr-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 24px;
        min-height: 52px;
    }

    body.gyr-has-sticky .gyr-footer { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    .gyr-sticky-cta { transition: none; }
    .gyr-faq-item summary::after { transition: none; }
}

@media (max-width: 560px) {
    .gyr-privacy-card { padding: 26px 22px; }
    .gyr-recognition { padding-top: 44px; }
}