/* ============================================================
   Call Astro — Graphology Report
   Premium redesign — theme tokens
   ============================================================ */
:root{
    color-scheme:light;
    --gr-orange:#E65100;
    --gr-orange-light:#FF8F00;
    --gr-navy:#1B2A4A;
    --gr-navy-2:#132038;
    --gr-gold:#C9962C;
    --gr-bg:#FFF8E1;
    --gr-bg-soft:#FFEFC2;
    --gr-panel:#FFFDF6;
    --gr-text:#2A1A05;
    --gr-muted:#7A5C2E;
    --gr-line:rgba(230,81,0,0.18);
    --gr-line-strong:rgba(230,81,0,0.3);
    --gr-radius-lg:22px;
    --gr-radius:16px;
    --gr-radius-sm:10px;
    --gr-shadow-sm:0 8px 20px rgba(74,46,0,0.06);
    --gr-shadow:0 18px 40px rgba(74,46,0,0.09);
    --gr-shadow-lg:0 30px 70px rgba(27,42,74,0.16);
}

*{ box-sizing:border-box; }

body{
    margin:0;
    background:var(--gr-bg);
    color:var(--gr-text);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height:1.65;
    overflow-x:hidden;
}

.gr-page h1, .gr-page h2, .gr-page h3{ font-family:Georgia, "Times New Roman", serif; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.gr-page{ overflow-x:hidden; position:relative; }

.gr-container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(1rem, 4vw, 2rem);
    box-sizing:border-box;
}

.gr-section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.gr-section-header{ max-width:680px; margin:0 auto 2.75rem; text-align:center; }
.gr-kicker{
    display:inline-flex; align-items:center; gap:0.5rem;
    color:var(--gr-orange); font-weight:800; text-transform:uppercase;
    letter-spacing:.1em; font-size:0.8rem; margin:0 0 0.65rem;
}
.gr-kicker .gr-dot{ width:8px; height:8px; border-radius:50%; background:var(--gr-orange); }
.gr-section-header h2{ font-size:clamp(1.7rem, 3.6vw, 2.4rem); margin:0; color:var(--gr-navy); font-weight:700; }
.gr-section-header p{ color:var(--gr-muted); margin:0.85rem 0 0; font-size:1.05rem; }
.gr-section-header.light .gr-kicker{ color:var(--gr-gold); }
.gr-section-header.light h2{ color:#fff; }
.gr-section-header.light p{ color:rgba(255,255,255,0.75); }

.gr-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
    padding:0.95rem 1.85rem; border-radius:12px; font-weight:800; font-size:1.02rem;
    text-decoration:none; cursor:pointer; border:none; min-height:54px;
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
    font-family:inherit;
}
.gr-btn-primary{
    background:linear-gradient(135deg, var(--gr-orange-light), var(--gr-orange));
    color:#fff; box-shadow:0 14px 28px rgba(230,81,0,.28);
}
.gr-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(230,81,0,.34); }
.gr-btn-secondary{
    background:#fff; color:var(--gr-navy); border:1.5px solid var(--gr-line-strong);
}
.gr-btn-secondary:hover{ border-color:var(--gr-orange); color:var(--gr-orange); }

/* ============================================================
   TOP — compact intro (form is one scroll away, not a big hero)
   ============================================================ */
.gr-top{
    position:relative;
    background:linear-gradient(180deg, #FFF3DA 0%, var(--gr-bg) 100%);
    padding:clamp(2.25rem, 5vw, 3.25rem) 0 clamp(1.5rem, 4vw, 2.25rem);
    text-align:center;
}
.gr-top-inner{ max-width:760px; margin:0 auto; }
.gr-hero-eyebrow{
    display:inline-flex; align-items:center; gap:0.5rem;
    background:#fff; border:1px solid var(--gr-line-strong);
    color:var(--gr-orange); font-weight:800; font-size:0.8rem;
    letter-spacing:.06em; text-transform:uppercase;
    padding:0.45rem 1rem; border-radius:999px; margin-bottom:1.1rem;
    box-shadow:var(--gr-shadow-sm);
}
.gr-h1{
    font-size:clamp(2rem, 4.4vw, 3.05rem); line-height:1.15;
    color:var(--gr-navy); font-weight:700; margin:0 0 1rem;
}
.gr-h1 em{ font-style:normal; color:var(--gr-orange); }
.gr-top-lede{
    color:var(--gr-muted); font-size:1.12rem; max-width:56ch; margin:0 auto 1.5rem;
}
.gr-top-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem; margin-bottom:0.75rem; }
.gr-top-trust span{
    display:inline-flex; align-items:center; gap:0.4rem;
    font-size:0.85rem; font-weight:600; color:var(--gr-muted);
}
.gr-top-trust svg{ color:var(--gr-orange); flex-shrink:0; }

.gr-top-arrow{
    display:flex; flex-direction:column; align-items:center; gap:0.35rem;
    margin-top:1.35rem; color:var(--gr-orange); font-weight:800; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:.08em;
}
.gr-top-arrow svg{ animation:gr-bounce 2.2s ease-in-out infinite; }
@keyframes gr-bounce{
    0%, 100%{ transform:translateY(0); opacity:0.65; }
    50%{ transform:translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .gr-top-arrow svg{ animation:none; } }

/* ============================================================
   WHAT IS GRAPHOLOGY
   ============================================================ */
.gr-intro-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem, 5vw, 3.5rem); align-items:start; }
.gr-intro-lead h3{ font-size:1.5rem; color:var(--gr-navy); margin:0 0 0.9rem; }
.gr-intro-lead p{ color:var(--gr-muted); font-size:1.02rem; margin:0 0 1rem; }
.gr-intro-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.1rem; }
.gr-intro-card{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius);
    padding:1.4rem; box-shadow:var(--gr-shadow-sm);
}
.gr-intro-icon{
    width:42px; height:42px; border-radius:11px; background:var(--gr-bg-soft);
    color:var(--gr-orange); display:flex; align-items:center; justify-content:center; margin-bottom:0.85rem;
}
.gr-intro-card h4{ margin:0 0 0.4rem; font-size:0.98rem; color:var(--gr-text); font-family:inherit; font-weight:700; }
.gr-intro-card p{ margin:0; color:var(--gr-muted); font-size:0.88rem; }

/* ============================================================
   WHAT CAN YOU DISCOVER — feature cards (varied sizing)
   ============================================================ */
.gr-discover-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:1fr; gap:1.1rem;
}
.gr-discover-card{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius);
    padding:1.5rem; box-shadow:var(--gr-shadow-sm); transition:transform .18s ease, box-shadow .18s ease;
}
.gr-discover-card:hover{ transform:translateY(-4px); box-shadow:var(--gr-shadow); }
.gr-discover-card.featured{
    grid-column:span 2; grid-row:span 2;
    background:linear-gradient(160deg, var(--gr-navy) 0%, var(--gr-navy-2) 100%);
    color:#fff; display:flex; flex-direction:column; justify-content:center;
}
.gr-discover-card.featured .gr-discover-icon{ background:rgba(255,255,255,0.12); color:var(--gr-gold); width:56px; height:56px; }
.gr-discover-card.featured h4{ color:#fff; font-size:1.3rem; }
.gr-discover-card.featured p{ color:rgba(255,255,255,0.78); font-size:0.98rem; }
.gr-discover-icon{
    width:40px; height:40px; border-radius:10px; background:var(--gr-bg-soft);
    color:var(--gr-orange); display:flex; align-items:center; justify-content:center; margin-bottom:0.9rem;
}
.gr-discover-card h4{ margin:0 0 0.4rem; font-size:1.02rem; color:var(--gr-text); font-weight:700; font-family:inherit; }
.gr-discover-card p{ margin:0; color:var(--gr-muted); font-size:0.88rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.gr-steps-band{ background:var(--gr-navy); }
.gr-steps-flow{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; position:relative;
}
.gr-steps-flow::before{
    content:''; position:absolute; top:26px; left:12.5%; right:12.5%; height:2px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0 10px, transparent 10px 18px);
    z-index:0;
}
.gr-step{ position:relative; z-index:1; text-align:center; padding:0 0.5rem; }
.gr-step-num{
    width:52px; height:52px; border-radius:50%; margin:0 auto 1rem;
    background:linear-gradient(135deg, var(--gr-orange-light), var(--gr-orange));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.2rem; font-family:Georgia, serif;
    box-shadow:0 10px 22px rgba(230,81,0,.35);
}
.gr-step h4{ color:#fff; font-size:1.02rem; margin:0 0 0.5rem; font-family:inherit; font-weight:700; }
.gr-step p{ color:rgba(255,255,255,0.72); font-size:0.88rem; margin:0; }

/* ============================================================
   ANALYSIS MODES SHOWCASE (descriptive, below the tool)
   ============================================================ */
.gr-modes-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.1rem; }
.gr-mode-showcase{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius);
    padding:1.4rem; box-shadow:var(--gr-shadow-sm); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gr-mode-showcase:hover{ transform:translateY(-3px); box-shadow:var(--gr-shadow); border-color:var(--gr-line-strong); }
.gr-mode-showcase .gr-discover-icon{ margin-bottom:0.8rem; }
.gr-mode-showcase h4{ margin:0 0 0.4rem; font-size:1rem; color:var(--gr-navy); font-family:inherit; font-weight:700; }
.gr-mode-showcase p{ margin:0; color:var(--gr-muted); font-size:0.86rem; }

/* ============================================================
   WHY USE OUR TOOL — benefits
   ============================================================ */
.gr-benefits-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.1rem; }
.gr-benefit-card{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius);
    padding:1.5rem; box-shadow:var(--gr-shadow-sm); text-align:left;
}
.gr-benefit-icon{
    width:44px; height:44px; border-radius:12px; background:var(--gr-bg-soft);
    color:var(--gr-orange); display:flex; align-items:center; justify-content:center; margin-bottom:0.9rem;
}
.gr-benefit-card h4{ margin:0 0 0.4rem; font-size:1.02rem; color:var(--gr-navy); font-weight:700; font-family:inherit; }
.gr-benefit-card p{ margin:0; color:var(--gr-muted); font-size:0.9rem; }

/* ============================================================
   TOOL SECTION
   ============================================================ */
.gr-tool-band{ background:linear-gradient(180deg, #FFF3DA 0%, var(--gr-bg) 100%); }
.gr-tool-shell{ display:grid; grid-template-columns:1fr; gap:2rem; }
.gr-tool-card{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius-lg);
    box-shadow:var(--gr-shadow-lg); padding:clamp(1.5rem, 4vw, 2.75rem);
}
.gr-tool-card-header{ text-align:center; max-width:520px; margin:0 auto 2rem; }
.gr-tool-card-header h2{ font-size:1.65rem; color:var(--gr-navy); margin:0 0 0.6rem; }
.gr-tool-card-header p{ color:var(--gr-muted); margin:0; font-size:0.98rem; }

.analysis-form{ display:grid; gap:1.5rem; }
.field-label{ display:block; color:var(--gr-text); font-size:0.92rem; font-weight:700; margin-bottom:0.5rem; }

input[type="text"]{
    width:100%; height:52px; padding:0 16px;
    border:1.5px solid var(--gr-line-strong); border-radius:12px;
    background:#fff; color:var(--gr-text); font-size:16px; outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}
input[type="text"]:focus{ border-color:var(--gr-orange); box-shadow:0 0 0 4px rgba(230,81,0,0.1); }

.mode-card{
    display:grid; gap:0.9rem; padding:1.25rem;
    border:1px solid var(--gr-line); border-radius:var(--gr-radius); background:var(--gr-bg-soft);
}
.mode-card-header{ color:var(--gr-navy); font-size:0.92rem; font-weight:800; }
.segmented-tabs{ display:flex; flex-direction:column; gap:0.75rem; }
.top-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.75rem; }
.bottom-row{ display:grid; grid-template-columns:repeat(3, 1fr); width:100%; margin:auto; gap:0.75rem; }

.mode-tab{
    min-height:56px; border:1.5px solid var(--gr-line-strong); border-radius:12px;
    background:#fff; color:var(--gr-navy); cursor:pointer; font-size:0.86rem; font-weight:700;
    font-family:inherit; padding:0.5rem;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.mode-tab:hover{ border-color:var(--gr-orange); transform:translateY(-1px); }
.mode-tab.active{
    background:linear-gradient(135deg, var(--gr-orange-light), var(--gr-orange));
    border-color:transparent; color:#fff;
    box-shadow:0 10px 20px rgba(230,81,0,.28);
}

/* Modern dropzone */
.gr-dropzone{
    position:relative; border:2px dashed var(--gr-line-strong); border-radius:var(--gr-radius);
    background:#fff; padding:2rem 1.5rem; text-align:center; cursor:pointer;
    transition:border-color .18s ease, background .18s ease;
}
.gr-dropzone:hover, .gr-dropzone.is-dragover{ border-color:var(--gr-orange); background:var(--gr-bg-soft); }
.gr-dropzone input[type="file"]{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.gr-dropzone-icon{
    width:56px; height:56px; border-radius:14px; background:var(--gr-bg-soft); color:var(--gr-orange);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.gr-dropzone-title{ font-weight:800; color:var(--gr-navy); font-size:1rem; margin:0 0 0.35rem; }
.gr-dropzone-sub{ color:var(--gr-muted); font-size:0.86rem; margin:0; }
.gr-dropzone-sub button{
    background:none; border:none; color:var(--gr-orange); font-weight:800; text-decoration:underline;
    cursor:pointer; padding:0; font-size:inherit; font-family:inherit;
}
.gr-file-chip{
    display:none; align-items:center; gap:0.75rem; margin-top:1rem; padding:0.7rem 1rem;
    background:#fff; border:1px solid var(--gr-line-strong); border-radius:12px; text-align:left;
}
.gr-file-chip.is-visible{ display:flex; }
.gr-file-chip img{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.gr-preview-thumb{ display:none; }
.gr-preview-thumb.is-visible{ display:block; }
.gr-file-chip-info{ flex:1; min-width:0; }
.gr-file-chip-name{ font-size:0.88rem; font-weight:700; color:var(--gr-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gr-file-chip-status{ font-size:0.78rem; color:var(--gr-orange); font-weight:700; }
.gr-file-chip-remove{
    flex-shrink:0; background:var(--gr-bg-soft); border:none; color:var(--gr-navy);
    width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:1.1rem; line-height:1;
}
.gr-field-hint{ color:var(--gr-muted); font-size:0.83rem; margin-top:0.6rem; }
.gr-error-text{ color:#b42318; font-size:0.83rem; font-weight:700; margin-top:0.5rem; display:none; }
.gr-error-text.is-visible{ display:block; }

/* Tips checklist */
.gr-tips-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0.75rem; margin-top:0.9rem; }
.gr-tip-chip{
    display:flex; align-items:center; gap:0.5rem; background:#fff; border:1px solid var(--gr-line);
    border-radius:10px; padding:0.55rem 0.8rem; font-size:0.82rem; color:var(--gr-muted); font-weight:600;
}
.gr-tip-chip svg{ color:var(--gr-orange); flex-shrink:0; }

.primary-button{
    width:100%; height:58px; border:none; border-radius:14px;
    background:linear-gradient(135deg, var(--gr-orange-light), var(--gr-orange));
    color:#fff; cursor:pointer; font-size:1.08rem; font-weight:800; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
    box-shadow:0 16px 32px rgba(230,81,0,.28);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary-button:hover{ transform:translateY(-2px); box-shadow:0 20px 38px rgba(230,81,0,.34); }
.primary-button:disabled{ opacity:0.65; cursor:not-allowed; transform:none; }

/* After-submission mini flow */
.gr-flow-strip{
    display:flex; align-items:center; justify-content:center; gap:0.75rem; flex-wrap:wrap;
    margin-top:1.75rem; padding-top:1.5rem; border-top:1px dashed var(--gr-line);
}
.gr-flow-step{ display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; font-weight:700; color:var(--gr-navy); }
.gr-flow-step svg{ color:var(--gr-orange); }
.gr-flow-arrow{ color:var(--gr-line-strong); font-size:1.1rem; }

/* ============================================================
   STICKY / FLOATING CTA
   ============================================================ */
.gr-sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    display:flex; justify-content:center;
    padding:0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, rgba(255,248,225,0.98) 55%, rgba(255,248,225,0));
    pointer-events:none;
    transform:translateY(120%); opacity:0;
    transition:transform .28s ease, opacity .28s ease;
}
.gr-sticky-cta.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.gr-sticky-cta-btn{
    display:inline-flex; align-items:center; gap:0.55rem;
    padding:0.9rem 1.75rem; border-radius:999px; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--gr-orange-light), var(--gr-orange));
    color:#fff; font-weight:800; font-size:0.98rem; font-family:inherit;
    box-shadow:0 14px 32px rgba(230,81,0,.35);
    transition:transform .16s ease, box-shadow .16s ease;
}
.gr-sticky-cta-btn:hover{ transform:translateY(-2px); }

/* ============================================================
   RESULT / REPORT UI
   ============================================================ */
.result-shell{ display:grid; gap:1.5rem; margin-top:2rem; }

.gr-report-header{
    background:linear-gradient(160deg, var(--gr-navy) 0%, var(--gr-navy-2) 100%);
    border-radius:var(--gr-radius-lg); padding:clamp(1.75rem, 4vw, 2.5rem);
    color:#fff; box-shadow:var(--gr-shadow-lg); position:relative; overflow:hidden;
}
.gr-report-header::after{
    content:''; position:absolute; top:-40%; right:-10%; width:280px; height:280px; border-radius:50%;
    background:radial-gradient(circle, rgba(230,81,0,.28), transparent 70%);
}
.gr-report-header-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; position:relative; z-index:1; }
.gr-report-badge{
    display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.12);
    color:var(--gr-gold); font-weight:800; font-size:0.78rem; text-transform:uppercase; letter-spacing:.06em;
    padding:0.4rem 0.9rem; border-radius:999px;
}
.gr-report-title{ font-size:clamp(1.4rem, 3vw, 1.9rem); margin:0.85rem 0 0.35rem; color:#fff; position:relative; z-index:1; }
.gr-report-user{ color:rgba(255,255,255,0.75); font-size:0.95rem; position:relative; z-index:1; }
.gr-report-user strong{ color:#fff; }

.report-card{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius-lg);
    box-shadow:var(--gr-shadow); padding:clamp(1.5rem, 3.5vw, 2.25rem);
}
.section-heading{ margin-bottom:1.4rem; }
.eyebrow{
    margin:0 0 0.4rem; color:var(--gr-orange); font-size:0.78rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.08em;
}
h1,h2,h3,p{ margin-top:0; }
h2{ margin-bottom:0; font-size:1.5rem; color:var(--gr-navy); }
h3{ margin-bottom:8px; font-size:1.05rem; color:var(--gr-text); }

.report-summary{
    color:var(--gr-text); font-size:1.05rem; line-height:1.8;
    background:var(--gr-bg-soft); border-left:4px solid var(--gr-orange);
    border-radius:0 12px 12px 0; padding:1.1rem 1.4rem;
}

.interpretation-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; margin-top:1.5rem; }
.interpretation-list article{
    border:1px solid var(--gr-line); border-radius:var(--gr-radius); background:#fff; padding:1.25rem;
    box-shadow:var(--gr-shadow-sm);
}
.interpretation-list article h3{ color:var(--gr-orange); font-size:0.95rem; }
.interpretation-list p, .screening-card p{ margin-bottom:0; color:var(--gr-muted); line-height:1.7; font-size:0.93rem; }

/* Score / confidence gauges */
.confidence-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; margin-top:1.5rem; }
.metric-tile{
    border:1px solid var(--gr-line); border-radius:var(--gr-radius); background:#fff; padding:1.1rem;
    display:flex; align-items:center; gap:1rem;
}
.gr-gauge{ flex-shrink:0; width:64px; height:64px; }
.gr-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.gr-gauge-track{ fill:none; stroke:var(--gr-bg-soft); stroke-width:8; }
.gr-gauge-fill{ fill:none; stroke:var(--gr-orange); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.gr-gauge-label{ display:flex; align-items:center; justify-content:center; }
.metric-tile span{ display:block; color:var(--gr-muted); font-size:0.78rem; font-weight:700; }
.metric-tile strong{ display:block; margin-top:4px; font-size:1.5rem; color:var(--gr-navy); }

.screening-grid{ display:grid; gap:1rem; margin-top:0.5rem; }
.screening-card{ border:1px solid var(--gr-line); border-radius:var(--gr-radius); background:#fff; padding:1.25rem; }
.screening-header{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.75rem; }
.screening-header h3{ margin:0; }
.screening-header strong{ color:var(--gr-orange); font-size:1.3rem; }
.evidence-block{ margin:0.9rem 0; padding:0.85rem 1rem; border-radius:10px; background:var(--gr-bg-soft); }
.evidence-block span{ display:block; margin-bottom:0.5rem; color:var(--gr-navy); font-size:0.78rem; font-weight:800; }
.evidence-block ul{ margin:0; padding-left:20px; color:var(--gr-muted); }
.evidence-block p{ margin:0; color:var(--gr-muted); }

.disclaimer, .medical-disclaimer{ margin-top:1.4rem; color:var(--gr-muted); font-size:0.86rem; line-height:1.6; }
.medical-disclaimer{
    padding:1rem 1.1rem; border:1px solid #fed7aa; border-radius:var(--gr-radius-sm);
    background:#fff7ed; color:#9a3412; display:flex; gap:0.6rem; align-items:flex-start;
}
.medical-disclaimer p{ margin:4px 0 0; }

.interpretation-card, .collapsible-card{
    margin-top:1.4rem; width:100%; background:#fff;
    border:1px solid var(--gr-line); border-radius:var(--gr-radius); overflow:hidden;
    box-shadow:var(--gr-shadow-sm);
}
.interpretation-card summary, .collapsible-card summary{
    cursor:pointer; display:flex; align-items:center; gap:10px;
    padding:1.1rem 1.25rem; font-size:1rem; font-weight:700; color:var(--gr-navy);
    user-select:none; list-style:none; transition:background .18s ease;
}
.interpretation-card summary:hover, .collapsible-card summary:hover{ background:var(--gr-bg-soft); }
.interpretation-card summary::-webkit-details-marker, .collapsible-card summary::-webkit-details-marker{ display:none; }
.interpretation-card summary::before, .collapsible-card summary::before{
    content:"\25B6"; display:inline-block; font-size:12px; font-weight:700;
    color:var(--gr-orange); transition:transform .18s ease; margin-right:2px;
}
.interpretation-card[open] summary::before, .collapsible-card[open] summary::before{ transform:rotate(90deg); }
.interpretation-card[open] summary, .collapsible-card[open] summary{ border-bottom:1px solid var(--gr-line); }
.interpretation-card p{ margin:0; padding:8px 20px; color:var(--gr-muted); line-height:1.6; }
.interpretation-card strong{ display:inline-block; min-width:90px; color:var(--gr-text); }
.interpretation-card .disclaimer{ margin:16px 20px 20px; padding-top:16px; border-top:1px solid var(--gr-line); }
.collapsible-card .feature-grid, .collapsible-card .letter-grid{ padding:1.25rem; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem; }
.feature-card{ background:var(--gr-bg-soft); border:1px solid var(--gr-line); border-radius:var(--gr-radius-sm); padding:0.9rem 1rem; }
.feature-title{ font-size:0.85rem; color:var(--gr-navy); font-weight:700; margin-bottom:6px; }
.feature-value{ font-size:0.85rem; color:var(--gr-muted); line-height:1.5; }

.letter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem; }
.letter-card{ background:var(--gr-bg-soft); border:1px solid var(--gr-line); border-radius:var(--gr-radius-sm); padding:0.9rem; }
.letter-heading{ font-size:1.05rem; font-weight:700; margin-bottom:8px; color:var(--gr-orange); border-bottom:1px solid var(--gr-line); padding-bottom:6px; }
.letter-feature-list{ margin:0; padding-left:1.1rem; color:var(--gr-muted); font-size:0.88rem; }

.nested-values{ display:grid; gap:4px; }
.nested-row{ display:flex; justify-content:space-between; gap:0.75rem; }
.nested-row span{ color:var(--gr-navy); font-size:0.8rem; font-weight:700; }
.nested-row strong{ color:var(--gr-muted); font-size:0.8rem; font-weight:600; text-align:right; }

.uploaded-handwriting-image{
    width:100%; max-height:900px; object-fit:contain; display:block;
    border:1px solid var(--gr-line); border-radius:var(--gr-radius); background:#fff;
}

.pdf-download-container{ display:flex; justify-content:center; margin:0.5rem 0 0; }
.pdf-download-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.9rem 1.75rem; border-radius:12px; text-decoration:none; font-weight:800;
}

.career-section{ margin-top:1.75rem; padding-top:0.25rem; }
.career-section h2{ margin:0 0 1rem; font-size:1.25rem; color:var(--gr-navy); }
.career-card{
    background:#fff; border:1px solid var(--gr-line); border-radius:var(--gr-radius); box-shadow:var(--gr-shadow-sm);
    padding:1.1rem 1.25rem; margin:0.85rem 0;
}
.career-card h3{ margin:0 0 0.5rem; font-size:1rem; color:var(--gr-orange); }
.career-card p, .career-card li, .report-summary, .interpretation-list p{ line-height:1.7; }
.career-card ul{ margin:0.5rem 0 0 1.25rem; }

.gated-section[hidden]{ display:none !important; }
.section-unlock-gate{ display:grid; gap:1rem; }
.section-unlock-gate p{ color:var(--gr-muted); }
.section-unlock-gate textarea{
    width:100%; min-height:100px; padding:14px 16px;
    border:1.5px solid var(--gr-line-strong); border-radius:12px; background:#fff; color:var(--gr-text);
    font:inherit; resize:vertical;
}
.section-unlock-gate textarea:focus{ border-color:var(--gr-orange); outline:none; box-shadow:0 0 0 4px rgba(230,81,0,0.1); }

.star-row{ display:flex; gap:8px; }
.star-btn{
    width:46px; height:46px; border:1.5px solid var(--gr-line-strong); border-radius:10px;
    background:#fff; color:#d8c39a; font-size:22px; line-height:1; cursor:pointer; transition:transform .12s ease;
}
.star-btn:hover{ transform:translateY(-2px); }
.star-btn::before{ content:"\2605"; }
.star-btn.is-on{ background:var(--gr-orange); border-color:var(--gr-orange); color:#ffe1a8; }
.unlock-error{ margin:0; color:#b42318; font-size:0.85rem; font-weight:700; }

.gr-error-card{ text-align:center; }
.gr-error-card .gr-discover-icon{ margin:0 auto 1rem; background:#fde2e1; color:#c0392b; width:56px; height:56px; }

/* ============================================================
   FAQ
   ============================================================ */
.gr-faq-list{ display:grid; gap:0.85rem; max-width:840px; margin:0 auto; }
.gr-faq-item{
    background:var(--gr-panel); border:1px solid var(--gr-line); border-radius:var(--gr-radius);
    padding:1.1rem 1.4rem; box-shadow:var(--gr-shadow-sm);
}
.gr-faq-item summary{
    cursor:pointer; font-weight:700; color:var(--gr-navy); list-style:none; font-size:1.02rem;
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.gr-faq-item summary::-webkit-details-marker{ display:none; }
.gr-faq-item summary::after{ content:'+'; color:var(--gr-orange); font-weight:800; font-size:1.3rem; flex-shrink:0; }
.gr-faq-item[open] summary::after{ content:'\2212'; }
.gr-faq-item p{ margin:0.9rem 0 0; color:var(--gr-muted); line-height:1.7; }

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
.loading-overlay{
    position:fixed; inset:0; background:rgba(42,26,5,.55); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:9999; padding:1.5rem;
}
.loading-overlay.is-visible{ display:flex; }
.loading-card{
    width:480px; max-width:100%; text-align:center; background:var(--gr-panel);
    border-radius:var(--gr-radius-lg); padding:clamp(1.75rem, 4vw, 2.5rem); box-shadow:var(--gr-shadow-lg);
}
.gr-loading-icon{
    width:72px; height:72px; margin:0 auto 1.25rem; border-radius:50%;
    background:var(--gr-bg-soft); display:flex; align-items:center; justify-content:center; position:relative;
}
.spinner{
    width:72px; height:72px; border:4px solid var(--gr-bg-soft); border-top:4px solid var(--gr-orange);
    border-radius:50%; animation:gr-spin 1s linear infinite; position:absolute; inset:0;
}
.gr-loading-icon svg{ color:var(--gr-orange); position:relative; z-index:1; }
@keyframes gr-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.progress-bar{ width:100%; height:10px; background:var(--gr-bg-soft); border-radius:999px; overflow:hidden; margin:1.25rem 0; }
.progress-fill{ width:6%; height:100%; background:linear-gradient(90deg, var(--gr-orange-light), var(--gr-orange)); transition:width .6s ease; border-radius:999px; }
.fact-box{ margin-top:1.1rem; padding:0.9rem 1.1rem; border-radius:12px; background:var(--gr-bg-soft); color:var(--gr-text); font-size:0.9rem; }
.analysis-status{ margin-bottom:0; color:var(--gr-navy); font-size:1.05rem; font-weight:700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
    .gr-intro-layout{ grid-template-columns:1fr; }
    .gr-intro-cards{ grid-template-columns:1fr 1fr; }
    .gr-discover-grid{ grid-template-columns:repeat(2, 1fr); }
    .gr-discover-card.featured{ grid-column:span 2; grid-row:span 1; }
    .gr-steps-flow{ grid-template-columns:1fr 1fr; gap:2rem; }
    .gr-steps-flow::before{ display:none; }
}

@media (max-width:640px){
    .gr-section{ padding:2.5rem 0; }
    .gr-h1{ font-size:1.85rem; }
    .gr-top-lede{ font-size:1rem; }
    .gr-btn{ width:100%; }
    .gr-intro-cards{ grid-template-columns:1fr; }
    .gr-discover-grid{ grid-template-columns:1fr; }
    .gr-discover-card.featured{ grid-column:span 1; }
    .gr-steps-flow{ grid-template-columns:1fr; }
    .mode-card, .top-row, .bottom-row, .confidence-grid{ grid-template-columns:1fr; width:100%; }
    .interpretation-list{ grid-template-columns:1fr; }
    h1{ font-size:26px; }
    .gr-page-title, .gr-report-title{ font-size:1.5rem; }
    .loading-card{ width:100%; }
    .gr-tool-card{ padding:1.25rem; }
    .report-card{ padding:1.25rem; }
    .gr-sticky-cta-btn{ width:100%; justify-content:center; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .feature-grid{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:12px !important; }
    .letter-grid{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:12px !important; }
    .confidence-grid{ display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
    .feature-card, .letter-card, .screening-card, .metric-tile,
    .interpretation-list article, .medical-disclaimer,
    .interpretation-card, .collapsible-card { page-break-inside: avoid !important; break-inside: avoid !important; margin-bottom:15px; }
    .feature-title{ page-break-after: avoid; }
    .feature-value{ page-break-before: avoid; }
    .medical-disclaimer{ page-break-before: avoid !important; }
    .report-card{ border:none !important; box-shadow:none !important; padding:11px !important; }
    .collapsible-card, .interpretation-card{ break-inside:auto !important; page-break-inside:auto !important; }
    .collapsible-card{ border:none !important; box-shadow:none !important; background:transparent !important; }
    .pdf-page-break{ display:block !important; height:1px !important; page-break-after:always !important; break-after:page !important; }
    body{ margin:0 !important; padding:0 !important; }
    .gr-top, .gr-section:not(.gr-tool-band), .gr-faq-list, .gr-sticky-cta{ display:none !important; }
    .gated-section[hidden]{ display:block !important; }
    .section-unlock-gate{ display:none !important; }
}
@page { size:A4; margin:8mm; }