:root {
        
        --intro-title: 2.8rem;
    }

    h1, h2, h3 {
        font-family: "Bangers", cursive;
        font-weight: 400;
        letter-spacing: 0.03em;
    }

    .stage {
        
        --tool-top: 35vh;
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        
        height: 100vh;
        
        position: relative;
        display: grid;
        grid-template-rows: var(--tool-top) minmax(0, 1fr) 2.5rem;
    }
    
    body.has-consent .stage {
        height: calc(100vh - var(--consent-h, 0px));
        height: calc(100dvh - var(--consent-h, 0px));
    }
    
    @media (min-width: 768px) {
        .stage { height: 100svh; }
        body.has-consent .stage { height: calc(100svh - var(--consent-h, 0px)); }
    }
    
    body.consent-reclaiming .stage { transition: height 0.26s ease; }
    @media (prefers-reduced-motion: reduce) { body.consent-reclaiming .stage { transition: none; } }

    
    @media (max-width: 767px) {
        .top-row, .nav-row, .bottom-row { display: contents; }
        .title-row { display: none; }
    }

    
    .legal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        font-size: 0.72rem;
        color: #fff;
    }
    .legal a { color: #fff; }

    
    .grecaptcha-badge {
        bottom: calc(2.5rem + 44px) !important;
        z-index: 85 !important;
        
        visibility: hidden !important;
    }

    
    
    
    .canvas[data-boot="hold"]:not(.hs-booted) > * { visibility: hidden; }   
    .canvas {
        padding: 0; 
        overflow-y: auto;
        overflow-x: hidden;   
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.625rem 1.875rem;
        align-content: start;
    }
    
    .fld-wide {
        grid-column: 1 / -1;
        width: 85%;     
        margin: 0 auto;
        gap: 1.25rem;   
    }
    @media (max-width: 767px) {
        .fld-wide { width: 100%; }
    }
    
    @media (min-width: 768px) {
        .canvas:not(.step-mode) {
            
            grid-template-rows: minmax(0, 3.0625rem) auto minmax(0, 2.5rem)
                                auto minmax(0, 2.5rem) auto;
            
            gap: clamp(0.375rem, 2vh, 0.8rem) 1.875rem;
        }
        .canvas:not(.step-mode) > .fld-name { grid-row: 2; }
        .canvas:not(.step-mode) > .fld-desc { grid-row: 4; }
        .canvas:not(.step-mode) > .fld-terms { grid-row: 6; }
        .fld-wide { gap: clamp(0.5rem, 1.6vh, 1.25rem); }
        
        .fld-desc textarea {
            overflow-y: auto;
            height: 8.2rem;   
            line-height: 1.3;
        }
    }
    
    @media (min-width: 768px) and (max-height: 70rem) {
        .canvas:not(.step-mode) {
            grid-template-rows: minmax(0, 0.5rem) auto minmax(0, 1rem) auto minmax(0, 1rem) auto;
        }
        .fld-desc textarea { height: 4.5rem; }
    }
    
    @media (min-width: 768px) and (max-height: 56rem) {
        .fld-desc textarea { height: 4rem; }
        .fld-terms { padding-right: 13rem; }
    }
    
    
    .canvas > .fld-terms { display: none; }
    .fld-desc { position: relative; }
    .vibe-pill {
        position: absolute;
        bottom: 0.75rem;   
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 2px solid #000;
        border-radius: 999px;
        padding: 0.25rem 1rem;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.35;
        color: #00f;
        white-space: nowrap;
        max-width: min(96%, 36rem);
        width: max-content;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }
    .vibe-pill.show { opacity: 1; }
    .vibe-pill.bad { color: #b00020; white-space: normal; text-align: center; }
    
    @media (min-width: 768px) and (max-height: 60rem) {
        .stage { --tool-top: 22vh; }
        
    }
    
    @media (min-width: 768px) and (max-height: 42rem) {
        .fld span {
            font-size: 1.1rem;
            line-height: 1.3;
        }
        .fld input[type="text"], .fld textarea {
            font-size: 1.15rem;
            padding: 0.375rem 0.875rem;
        }
        .chk { font-size: 0.9rem; }
        
        .canvas:not(.step-mode) { row-gap: 0.25rem; }
        .fld-wide { gap: 0.25rem; }
        .fld-desc textarea { height: 4.125rem; }
    }

    
    
    .step {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: clamp(0.625rem, 2.2vh, 1.375rem);
    }
    .step .prompt {
        margin: 0;
        font-size: clamp(1.05rem, 1.9vh, 1.4rem);
        font-weight: 600;
        line-height: clamp(1.5rem, 2.9vh, 2.2rem);
    }
    
    .tc-row { position: relative; }
    .help-btn {
        flex: none;
        width: 2.125rem;
        height: 2.125rem;
        margin-left: 0.75rem;
        position: relative;
        top: -0.9375rem;      
        border-radius: 50%;
        border: 3px solid #1a1a1a;
        background: #fff;
        color: #000;          
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
    }
    
    .bubble {
        display: none;
        position: fixed;
        width: min(18.75rem, calc(100vw - 1rem));
        background: #fff3c6;
        border-radius: 1.5rem;
        padding: 1rem 1.375rem;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        color: #15243a;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        z-index: 85;
    }
    .bubble.open { display: block; }
    
    .canvas.step-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
    }
    
    
    .step-nav {
        position: absolute;
        left: var(--frame);
        
        right: calc(var(--frame) + var(--btn-shadow, 4px));
        
        bottom: calc(var(--frame) * 0.7373);
        display: flex;
        justify-content: space-between;
        
        align-items: flex-end;
        z-index: 3;
    }
    
    .step-nav .btn { align-self: flex-end; }
    
    .step-nav--solo { justify-content: flex-end; }
    
    
    .fr-menu-row.is-legend { cursor: default; box-shadow: none; }
    .fr-menu-row.is-legend:hover, .fr-menu-row.is-legend:active { transform: none; box-shadow: none; }
    
    .step-nav--end {
        justify-content: flex-end;
        bottom: 5.5rem;
    }
    
    @media (min-width: 768px) {
        .step-nav:not(.step-nav--end) {
            justify-content: flex-start;
            gap: 1.25rem;
        }
        .step-nav:not(.step-nav--end) .btn:not(.btn-light) {
            margin-left: auto;
        }
    }
    
    @media (min-width: 768px) {
        .confirm-step {
            width: 100%;
            max-width: 38rem;
            margin: 0 auto;
        }
    }
    
    .canvas.step-mode .step {
        padding-bottom: 3.75rem;
        min-width: 0;
    }

    
    .confirm-head {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.75rem;
        font-weight: 700;
        white-space: nowrap;   
    }
    .confirm-head svg {
        flex: none;
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .confirm-step .chk .chk-text {
        line-height: 1.35;
        margin-left: 0;
    }
    .confirm-step { padding-bottom: 5.5rem; }
    .confirm-name {
        background: #fff;
        border: 3px solid #1a1a1a;
        border-radius: 1.125rem;
        padding: 0.75rem;
    }
    .confirm-name-inner {
        display: block;
        background: #dde3ff;
        border-radius: 0.75rem;
        padding: 0.875rem 1rem;
        text-align: center;
        font-size: 1.75rem;
        font-weight: 700;
        color: #15243a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-light { background: #fff; }

    
    .step-case { display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; }
    .case-lead { margin: 0; font-size: 1.25rem; font-weight: 700; }
    .case-label { margin: 0.2rem 0 0; font-size: 1.1rem; font-weight: 800; }
    .case-select {
        font-family: "Archivo", sans-serif; font-size: 1.2rem; font-weight: 700;
        color: #000; background: #fff; border: 3px solid #000; border-radius: 0.6rem;
        padding: 0.6rem 0.8rem; width: 100%; cursor: pointer;
    }
    .case-hr { width: 100%; border: none; border-top: 3px solid #000; margin: 0.35rem 0; }
    .case-preview {
        
        font-family: "Inter", "Archivo", sans-serif;
        display: block; width: fit-content; max-width: 100%; margin: 0.15rem auto 0;
        border: 3px solid #000; border-radius: 0.5rem; padding: 1rem 1.8rem;
        text-align: center; font-weight: 800; line-height: 1.12;
        font-size: clamp(1.5rem, 6vw, 2.4rem); word-break: break-word;
        text-transform: none;
    }
    .case-warn { margin: 0.25rem 0 0; font-weight: 800; font-size: 1.05rem; }
    
    .btn-yeslooks {
        white-space: normal; text-align: center; line-height: 1.05;
        font-size: 1.5rem; padding: 0.7rem 1.4rem;
    }
    
    .case-nav .btn { align-self: flex-end; }
    
    .step-spell, .step-locale { display: flex; flex-direction: column; gap: 0.6rem; }
    
    .spell-nav .btn, .locale-nav .btn { text-transform: none; }
    
    @media (max-width: 767px) {
        .spell-nav .btn, .locale-nav .btn { font-size: 1.3rem; padding-left: 0.6rem; padding-right: 0.6rem; }
    }
    
    .step-legal { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
    .legal-title { font-weight: 800; font-size: 1.9rem; }
    .legal-hero { width: 42%; max-width: 12rem; height: auto; }
    .legal-body { margin: 0; font-size: 1.1rem; font-weight: 600; max-width: 32rem; }

    
    .tc { display: flex; flex-direction: column; gap: 0.7rem; }
    .tc-row { min-width: 0; }
    .case-radios { display: none; }   
    
    .warn-block { max-width: 720px; margin: 0 auto; display: flex; gap: 1rem; align-items: flex-start; }
    .warn-title { font-family: "Bangers", cursive; font-weight: 400; color: #ff0000; flex: none;
        line-height: 1; letter-spacing: 1px; font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .warn-body { margin-top: 0.35rem; }   
    .warn-body p { margin: 0 0 0.4rem; font-weight: 700; line-height: 1.3; font-size: clamp(0.92rem, 3.4vw, 1.1rem); }
    .warn-body p:last-child { margin-bottom: 0; }
    .warn-body em { color: #ff0000; font-style: italic; font-weight: 800; }

    
    .sp-instr { margin: 0; font-weight: 800; font-size: 1.15rem; }
    .sp-hr { width: 100%; max-width: 1024px; border: none; border-top: 3px solid #000; margin: 0.4rem auto 0; }
    .sp-hi { padding: 0.3rem 0.4rem; border-radius: 0.25rem; }   
    .sp-entered { margin: 0 0 0.9rem; font-weight: 700; font-size: 1.2rem; text-align: center; }
    .sp-word { font-size: 1.6rem; font-weight: 800; padding: 0.12rem 0.5rem; border-radius: 0.3rem; }   
    .sp-radios { display: flex; flex-direction: column; gap: 1rem; }
    .sp-rad-head { display: block; font-weight: 800; line-height: 1.1; }
    .sp-rad-word { display: block; font-weight: 600; line-height: 1.2; }
    .loc-flag { display: inline-block; width: 1.5em; height: auto; vertical-align: -0.2em;
        border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; margin-right: 0.1em; }   
    .btn-fwd svg { margin-right: 0; margin-left: 0.4em; }   

    
    @media (max-width: 767px) {
        .warn-block { flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; }
        .warn-body { margin-top: 0; }
        .desk-only { display: none; }
        
        .canvas.step-mode .step-case { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
        .tc-case { flex: 1 1 auto; min-height: 0; display: grid; gap: 0.5rem;
            grid-template-rows: auto minmax(0, 1fr) auto;
            padding-bottom: clamp(4.5rem, 13vh, 7rem); }
        .tc-case .tc-row { min-height: 0; }
        .tc-case .tc-name { display: flex; align-items: center; justify-content: center; overflow: hidden; }
        
        .btn-yeslooks { font-size: 1.15rem; }
    }

    @media (min-width: 768px) {
        .canvas.step-mode .step-case,
        .canvas.step-mode .step-spell,
        .canvas.step-mode .step-locale { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
        .tc { width: 100%; max-width: 1024px; margin: 0 auto; flex: 1 1 auto; min-height: 0;
            display: grid; gap: 0; padding: clamp(0.4rem, 2vh, 1.5rem) 0 clamp(4rem, 9vh, 6rem); }
        .tc-case { grid-template-rows: minmax(0, 35fr) minmax(0, 43fr) minmax(0, 22fr); }
        
        .tc-row { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
        .tc-opts { justify-content: flex-start; gap: clamp(0.5rem, 2vh, 1.3rem); }
        .tc-warn { justify-content: flex-start; }
        .case-lead { margin: 0; font-weight: 800; text-align: center; font-size: clamp(1.1rem, 2.5vh, 1.5rem); }
        .case-select { display: none; }
        .case-radios { display: grid; width: 100%; gap: clamp(0.5rem, 1.8vh, 1.2rem) 3rem; justify-items: start; }
        .case-radios.cols-2 { grid-template-columns: repeat(2, max-content); justify-content: center; }
        .case-rad { font-size: clamp(1rem, 2.2vh, 1.35rem); }
        .case-rad .dot { width: clamp(2.3rem, 4.4vh, 3.1rem); height: clamp(2.3rem, 4.4vh, 3.1rem); }
        .case-hr { width: 100%; max-width: 1024px; border: none; border-top: 3px solid #000; margin: 0; }
        .warn-body p { font-size: clamp(0.95rem, 2vh, 1.15rem); }

        
        .tc-spell, .tc-locale { grid-template-rows: minmax(0, 10fr) minmax(0, 42fr) minmax(0, 48fr); }
        .tc-instr { align-items: stretch; justify-content: center; }
        .sp-instr { text-align: left; font-size: clamp(1rem, 2.4vh, 1.3rem); }
        .tc-spellopts { justify-content: flex-start; gap: clamp(1rem, 7vh, 4.5rem); }   
        .sp-entered { margin: 0; font-size: clamp(1.05rem, 2.6vh, 1.4rem); }
        .sp-word { font-size: clamp(1.4rem, 4vh, 2.1rem); }
        .sp-radios { flex-direction: row; justify-content: center; gap: clamp(2rem, 8vw, 6rem); align-items: flex-start; }
        .sp-rad { font-size: clamp(1rem, 2.3vh, 1.4rem); }
        .sp-rad .dot { width: clamp(2.3rem, 4.4vh, 3.1rem); height: clamp(2.3rem, 4.4vh, 3.1rem); }
    }

    
    @media (min-width: 768px) {
        .tc-case {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
            column-gap: clamp(1rem, 3vw, 2.5rem);
            row-gap: clamp(0.4rem, 1.5vh, 1rem);
            align-items: stretch;
        }
        .tc-case .tc-opts { grid-column: 1; grid-row: 1 / span 2; justify-content: center; align-items: stretch; }
        .tc-case .tc-name { grid-column: 2; grid-row: 1; }
        .tc-case .tc-warn { grid-column: 2; grid-row: 2; }
        .tc-case .case-lead { text-align: left; font-size: clamp(1rem, 2.2vh, 1.3rem); margin-bottom: clamp(0.4rem, 1.6vh, 1.1rem); }
        
        .tc-case .case-radios, .tc-case .case-radios.cols-2 {
            grid-template-columns: 1fr; justify-content: start; gap: clamp(0.4rem, 1.7vh, 1.1rem);
            padding-left: 6px; }
        .tc-case .case-rad { font-size: clamp(0.92rem, 2vh, 1.2rem); }
        .tc-case .case-rad .dot { width: clamp(1.7rem, 3.6vh, 2.5rem); height: clamp(1.7rem, 3.6vh, 2.5rem); }
        .tc-case .case-hr { display: none; }   
        
        .tc-case .warn-block { flex-direction: column; align-items: flex-start; gap: 0.1rem;
            text-align: left; max-width: 100%; margin: 0; }
        .tc-case .warn-title { font-size: clamp(1.5rem, 4.5vh, 2.1rem); }
        .tc-case .warn-body p { font-size: clamp(0.85rem, 1.8vh, 1.05rem); }
    }

    
    .step-reveal, .step-freepick { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
    .reveal-head { margin: 0; font-size: 1.4rem; font-weight: 800; text-align: center; }
    .reveal-note { margin: 0; font-size: 0.95rem; font-weight: 600; color: #444; text-align: center; }
    .reveal-stage { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
    .concept-card {
        background: #fff; border: 3px solid #000; border-radius: 1rem; padding: 0.6rem;
        box-shadow: 4px 4px 0 #000; width: 9.5rem; display: flex; flex-direction: column; gap: 0.45rem;
    }
    .concept-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 0.5rem; }
    .concept-insp { margin: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: #333; text-align: center; }
    .concept-card.pickable .btn { width: 100%; font-size: 0.95rem; padding: 0.5rem; }
    .reveal-offer { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.4rem; }
    .offer-card {
        border: 3px solid #000; border-radius: 1rem; padding: 0.9rem 1rem;
        box-shadow: 4px 4px 0 #000; display: flex; flex-direction: column; gap: 0.5rem;
    }
    .offer-free { background: #fff; }
    .offer-59 { background: #ffff00; }
    .offer-99 { background: #0000ff; color: #fff; }
    .offer-price { font-size: 1.6rem; font-weight: 800; line-height: 1; }
    .offer-blurb { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
    .offer-99 .btn { background: #fff; color: #000; }
    @media (min-width: 768px) {
        .reveal-offer { flex-direction: row; align-items: stretch; }
        .offer-card { flex: 1 1 0; }
    }
    
    
    
    .step-offer { display: flex; flex-direction: column; gap: 0.45rem; height: 100%;
        overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0.15rem 0.4rem; }
    .oi-titlepill { flex: none; align-self: stretch; background: #fff; border: 3px solid #000;
        border-radius: 999px; box-shadow: 4px 4px 0 #000; padding: 0.25rem 1rem;
        font-family: "Bangers", cursive; font-weight: 400; font-size: clamp(1.7rem, 8vw, 2.6rem);
        letter-spacing: 0.02em; text-align: center; color: #15243a; }
    .oi-sub { flex: none; margin: 0; text-align: center; font-weight: 800;
        font-size: clamp(1rem, 4.2vw, 1.3rem); color: #15243a; }
    .oi-pills { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 0; justify-content: center; }
    .oi-pill { position: relative; border: 3px solid #000; border-radius: 1.1rem; box-shadow: 5px 5px 0 #000;
        background: #fff center / cover no-repeat; overflow: hidden; }
    .oi-circle { flex: none; width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 3px solid #000;
        background: #fff center / cover no-repeat; display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 0.8rem; line-height: 1; text-align: center; color: #15243a; }
    .oi-circle.oi-bangers { font-family: "Bangers", cursive; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.02em; }
    
    .oi-free { display: flex; align-items: center; gap: 0.6rem; width: 88%; align-self: center;
        padding: 0.35rem 0.7rem; min-height: 2.9rem; }
    .oi-free .oi-circle { width: 3rem; height: 3rem; }
    .oi-free .oi-lines { display: flex; flex-direction: column; gap: 0.12rem; }
    .oi-l1, .oi-l2 { font-weight: 800; font-size: clamp(0.88rem, 3.7vw, 1.1rem); line-height: 1.12; white-space: nowrap; }
    
    .oi-standard { color: #fff; padding: 0.5rem 0.95rem 0.6rem; }
    .oi-standard .oi-circle { width: 4.2rem; height: 4.2rem; color: #fff; border-color: #0a1f52; }
    .oi-standard .oi-circle.oi-bangers { font-size: 2rem; }
    
    .oi-pro { color: #15243a; padding: 0.55rem 1rem 0.65rem; }
    .oi-pro .oi-circle { width: 4.4rem; height: 4.4rem; color: #15243a; }
    .oi-pro .oi-circle.oi-bangers { font-size: 2.1rem; }
    
    .oi-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
    .oi-h2 { font-family: "Bangers", cursive; font-weight: 400; text-align: right; line-height: 0.95;
        font-size: clamp(1.7rem, 8vw, 2.7rem); letter-spacing: 0.01em; }
    .oi-standard .oi-h2 { color: #fff; }
    .oi-pro .oi-h2 { color: #15243a; max-width: 64%; }
    .oi-body { margin-top: 0.3rem; }
    .oi-lead { font-weight: 800; text-align: center; font-size: clamp(1.15rem, 5vw, 1.5rem); margin-bottom: 0.3rem; }
    .oi-standard .oi-l1 { text-align: center; font-weight: 800; font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
    .oi-standard .oi-l2 { text-align: center; font-weight: 700; font-size: clamp(0.95rem, 4.2vw, 1.2rem); }
    .oi-feat { display: flex; flex-direction: column; gap: 0.02rem; padding-right: 4.6rem; }
    .oi-feat-l { font-weight: 800; font-size: clamp(0.88rem, 3.7vw, 1.08rem); line-height: 1.18; white-space: nowrap; }
    .oi-starburst { position: absolute; right: 0.25rem; bottom: 0.5rem; width: 5.7rem; height: 5.7rem;
        background: center / contain no-repeat; display: flex; align-items: center; justify-content: center; }
    .oi-sb-txt { font-weight: 800; font-size: 0.72rem; line-height: 1.05; text-align: center; color: #15243a; max-width: 70%; }
    
    
    .oi-group { display: flex; flex-direction: column; gap: 0.35rem; }
    .oi-grouphead { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        color: #15243a; line-height: 1; font-size: clamp(1.3rem, 5.4vw, 1.9rem); }
    .oi-paidrow { display: flex; flex-direction: column; gap: 0.5rem; }
    @media (min-width: 768px) {
        .step-offer { max-width: 46rem; margin: 0 auto; }
        .oi-pills { gap: 1rem; justify-content: center; }
        .oi-free { width: calc(50% - 0.55rem); align-self: flex-start; }   
        
        .oi-paidrow { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
        .oi-paidrow > .oi-pill { flex: 1 1 0; min-width: 0; }
        .oi-grouphead { font-size: 1.9rem; }
        
        .oi-paidrow .oi-feat { padding-right: 0; padding-bottom: 3.4rem; }
        .oi-paidrow .oi-feat-l { font-size: 0.98rem; }
        .oi-paidrow .oi-starburst { width: 4.4rem; height: 4.4rem; right: 0.4rem; bottom: 0.35rem; }
        .oi-paidrow .oi-sb-txt { font-size: 0.62rem; }
    }
    
    @media (min-width: 1024px) {
        .oi-paidrow { align-items: stretch; }
        .oi-free { width: calc(50% - 0.55rem); align-self: flex-start; }   
        .oi-paidrow .oi-feat { padding-bottom: 0; }
        .oi-paidrow .oi-starburst { width: 6.6rem; height: 6.6rem; right: 0.5rem; bottom: auto; top: 46%; }
        .oi-paidrow .oi-sb-txt { font-size: 0.93rem; }
    }
    
    
    .step-confirm1 { display: flex; flex-direction: column; height: 100%; gap: 0; }
    
    .step-confirm1.cf-snap, .step-confirm1.cf-snap * { transition: none !important; animation: none !important; }
    
    .canvas.step-mode .step-confirm1 { padding-bottom: 0.5rem; }
    .cf-sub { margin: -0.7rem 0 0; text-align: center; font-weight: 800; color: #15243a;   
        font-size: clamp(1.05rem, 4.8vw, 1.35rem); }
    .cf-namelabel { margin: 0.75rem 0 0.15rem; font-weight: 800; font-size: 1.1rem; color: #15243a;
        opacity: 0; transition: opacity 0.35s ease; }
    
    
    .cf-namebox { position: relative; z-index: 5; background: #fff; border: 3px solid #000; border-radius: 1rem;
        min-height: 8.5rem; display: flex; align-items: center; justify-content: center;
        padding: 3rem 2rem 3rem 1rem; opacity: 0; transition: opacity 0.35s ease; }
    .step-confirm1.cf-1 .cf-namelabel, .step-confirm1.cf-1 .cf-namebox { opacity: 1; }
    
    .cf-name { margin: -0.4em 0; text-align: center; font-weight: 800; line-height: 1.4; color: #15243a; word-break: break-word; }
    .cf-word { position: relative; z-index: 0; }   
    
    .cf-hl-spell { text-decoration: underline wavy #d40000; text-decoration-skip-ink: none; cursor: pointer; }
    .cf-hl-spell::before, .cf-hl-locale::before { content: ""; position: absolute; left: -0.12em; right: -0.12em;
        top: 0.04em; bottom: 0.04em; z-index: -1; border-radius: 0.25rem;
        transform: scaleX(0); transform-origin: left center; transition: transform 0.34s ease; }
    .cf-hl-spell::before  { background: #f7b9bd; }
    .cf-hl-locale::before { background: #fbf09a; }
    .cf-hl-spell.lit::before, .cf-hl-locale.lit::before { transform: scaleX(1); }
    .cf-hl-locale { cursor: pointer; }
    
    
    .cf-break { position: absolute; top: 1.5rem; right: 0.45rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
        border: 2px solid #000; background: #8ef0a8; display: flex; align-items: center;
        justify-content: center; cursor: pointer; font-size: 0.8rem; font-weight: 800; color: #15243a;
        opacity: 0; transition: opacity 0.3s ease; }
    .cf-break.on { opacity: 1; }
    
    .cf-edit { position: absolute; z-index: 20; bottom: -1.4rem; right: 0.5rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
        border: 3px solid #000; background: #ffff00; box-shadow: 2px 2px 0 #000; display: flex; align-items: center;
        justify-content: center; cursor: pointer; padding: 0; }
    .cf-edit svg { width: 54%; height: 54%; display: block; }
    
    
    .cf-band { position: relative; flex: 1 1 auto; min-height: 0; margin: 0.7rem 0 0;
        display: flex; flex-direction: column;   
        background: #eceef1; padding: 1.5rem; overflow: hidden;
        clip-path: inset(0 100% 0 0); transition: clip-path 0.45s ease; }
    .cf-band.on { clip-path: inset(0 0 0 0); }
    .cf-bandhead { margin: 0 0 0.5rem; font-weight: 800; font-size: 1.05rem; color: #15243a;
        display: flex; align-items: center; gap: 0.5rem;   
        opacity: 0; transition: opacity 0.3s ease; }
    .cf-bandhead.on { opacity: 1; }
    
    .cf-bandhead-ic { flex: none; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; }
    .cf-bandhead-ic:empty { display: none; }
    .cf-bandhead-ic svg { width: 100%; height: 100%; display: block; }
    
    
    .cf-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly;
        clip-path: inset(-8px -8px -8px -8px); transition: clip-path 0.4s ease; }
    .cf-rows.cf-wipe { clip-path: inset(-8px -8px -8px 100%); }
    
    .cf-row { position: relative; display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer;
        clip-path: inset(-8px 100% -8px -8px); transition: clip-path 0.4s ease; }
    .cf-row.on { clip-path: inset(-8px -8px -8px -8px); }
    
    .cf-rowicon { position: absolute; top: 0; right: 0; flex: none; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; }
    .cf-rowicon svg { width: 100%; height: 100%; display: block; }
    
    .cf-rowlabel { font-weight: 800; font-size: clamp(0.8rem, 4.2vw, 1.2rem); white-space: nowrap;
        color: #15243a; padding: 0.25rem 0.75rem; border-radius: 0.55rem;
        background: #fff; border: 2.5px solid #15243a; box-shadow: 2.5px 2.5px 0 #15243a; }
    .cf-row-spell  .cf-rowlabel { background: #f7b9bd; }
    .cf-row-locale .cf-rowlabel { background: #fbf09a; }
    .cf-row-break  .cf-rowlabel { background: #8ef0a8; }
    
    @media (min-width: 768px) {
        .cf-sub { margin-top: 0; }
        
        .cf-row { justify-content: flex-start; gap: 0.9rem; padding-left: 0.75rem; }
        .cf-rowicon { width: 2.4rem; height: 2.4rem; }
        .cf-rowlabel { font-size: 1.75rem; padding: 0.75rem 1.5625rem; border-radius: 0.75rem;
            border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
        
        .cf-bandhead { font-size: 1.9rem; margin-bottom: 1.2rem; }
        .cf-bandhead-ic { width: 2.75rem; height: 2.75rem; }
    }
    
    .cf-topic { flex: 1 1 auto; min-height: 0; position: relative; display: none; flex-direction: column;
        clip-path: inset(0 100% 0 0); transition: clip-path 0.4s ease; }
    .cf-topic.on { clip-path: inset(0 0 0 0); }
    
    .cf-topic-back { position: absolute; z-index: 22; bottom: -1.4rem; right: 0.5rem; width: 2.8rem; height: 2.8rem;
        border-radius: 50%; border: 3px solid #000; background: #fff; box-shadow: 2px 2px 0 #000;
        display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
    .cf-topic-back svg { width: 52%; height: 52%; display: block; }
    .step-confirm1.cf-intopic .cf-topic-back { display: flex; }
    
    .step-confirm1.cf-intopic .cf-edit,
    .step-confirm1.cf-intopic .cf-break { opacity: 0; pointer-events: none; }
    .step-confirm1.cf-intopic .step-nav { pointer-events: none; }   
    
    .step-confirm1.cf-editname .cf-sub,
    .step-confirm1.cf-editname .cf-band,
    .step-confirm1.cf-editname .step-nav { opacity: 0; pointer-events: none; }
    .step-confirm1.cf-editname .cf-break { opacity: 0; pointer-events: none; }   
    .step-confirm1.cf-editname .cf-namebox { min-height: 12rem; }
    
    .cf-nameedit { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; resize: none;
        background: transparent; text-align: center; font-family: inherit; font-weight: 800; color: #15243a;
        line-height: 1.25; font-size: 2rem; white-space: pre; overflow: hidden; }
    .cf-nameedit.cf-ta-nope { animation: cfNope 0.22s ease; }   
    @keyframes cfNope { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
    .cf-topic-body { flex: 1 1 auto; min-height: 0; }
    
    .cf-spell { display: flex; flex-direction: column; justify-content: center; gap: 1rem; height: 100%;
        opacity: 1; transition: opacity 0.26s ease; }
    .cf-spell.cf-spell-out { opacity: 0; }
    .cf-spell-q { margin: 0; font-weight: 800; font-size: 1.05rem; color: #15243a; }
    .cf-spell-opts { display: flex; flex-direction: column; gap: 1rem; padding-left: 0.6rem; }   
    .cf-spell-rad { gap: 0.7rem; font-size: 1.05rem; }
    .cf-spell-rad .dot { width: 2.4rem; height: 2.4rem; }
    .cf-spell-rad .rad-text { font-weight: 700; font-size: clamp(0.95rem, 4.4vw, 1.2rem); }
    .cf-spell-word { font-weight: 800; padding: 0.04em 0.34em; border-radius: 0.3rem; }
    .cf-spell-keep   .cf-spell-word { background: #f7b9bd; }   
    .cf-spell-change .cf-spell-word { color: #0a7d3c; }        
    
    .cf-loc-flag { height: 0.9em; width: auto; vertical-align: -0.08em; margin-right: 0.32em; flex: none;
        border: 1px solid rgba(0,0,0,0.18); border-radius: 2px; }
    .cf-loc-keep   .cf-spell-word { background: #fbf09a; }     
    
    .cf-topic-body { overflow-y: auto; min-height: 10.5rem; }   
    
    
    .cf-lb-arrow { position: absolute; z-index: 19; transform: translateY(-50%); width: 1.2rem; height: 1.2rem;
        display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
        border: none; background: transparent; color: #15243a; }   
    .cf-lb-arrow svg { width: 100%; height: 100%; display: block; }
    .cf-lb-up { left: 0.2rem; }
    .cf-lb-down { right: 0.2rem; }
    
    .step-confirm1.cf-lbedit .cf-namebox { padding-left: 1.8rem; padding-right: 1.8rem; }
    
    .cf-lb { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.1rem;
        height: 100%; text-align: center; cursor: pointer; opacity: 1; transition: opacity 0.26s ease; }
    .cf-lb.cf-spell-out { opacity: 0; }
    .cf-lb-instr { margin: 0; font-weight: 800; font-size: clamp(1rem, 4.6vw, 1.25rem); color: #15243a; }
    .cf-lb-legend { display: flex; gap: 2.5rem; color: #15243a; }
    .cf-lb-legicon { width: 2.4rem; height: 2.4rem; }
    .cf-lb-legicon svg { width: 100%; height: 100%; display: block; }
    .cf-lb-done { margin: 0; font-weight: 800; font-size: clamp(0.9rem, 4.2vw, 1.1rem); color: #56607a; }
    
    @media (min-width: 768px) {
        .cf-lb-arrow { width: 2.5rem; height: 2.5rem; }
        .step-confirm1.cf-lbedit .cf-namebox { padding-left: 3.4rem; padding-right: 3.4rem; }
    }
    
    @media (min-width: 768px) {
        
        .cf-namelabel, .cf-namebox { width: min(calc(75% + 7.5rem), 96%); margin-left: auto; margin-right: auto; margin-top: 1rem; }
        .cf-band, .cf-checks { width: min(calc(75% + 7.5rem), 96%); margin: 3rem auto 0; }
        .cf-spell-q { font-size: 1.5rem; }
        
        .cf-spell-opts { flex-flow: row wrap; align-items: center; justify-content: center;
            column-gap: 3rem; row-gap: 1rem; padding: 0 6%; }
        .cf-spell-rad .rad-text { font-size: 1.45rem; }
        .cf-spell-rad .dot { width: 2.9rem; height: 2.9rem; }
        .cf-lb-instr { font-size: 1.5rem; }
        .cf-lb-done { font-size: 1.3rem; }
        .cf-casebtn { font-size: 1.4rem; }
    }
    @media (min-width: 1024px) {
        
        .cf-band { flex: 0 1 auto; }
        
        .cf-spell-opts { justify-content: space-between; padding: 0 8%; }
        
        .cf-rows {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-content: center;
            align-items: start;
            column-gap: 2rem;
            row-gap: 1.25rem;
            padding: 0 1.75rem;
        }
        .cf-row { padding-left: 0; }
        
        .cf-row-spell  { grid-column: 1; grid-row: 1; }
        .cf-row-locale { grid-column: 1; grid-row: 2; }
        
        .cf-rows:not(:has(.cf-row-spell)) .cf-row-locale { grid-row: 1; }
        .cf-row-case   { grid-column: 2; grid-row: 1; }
        
        .cf-rows:not(:has(.cf-row-spell)):not(:has(.cf-row-locale)) {
            grid-template-columns: auto;
            justify-items: center;
        }
        .cf-rows:not(:has(.cf-row-spell)):not(:has(.cf-row-locale)) .cf-row-case {
            grid-column: 1;
        }
        
        .cf-sub { margin-bottom: 1rem; }
        .cf-namelabel { margin-top: 2.25rem; margin-bottom: 0.4rem; font-size: 1.75rem; }
        .cf-namebox { margin-top: 0; }
        .cf-band, .cf-checks { margin: 3.5rem auto 2rem; }
        .cf-rowicon { position: static; order: 2; width: 2.2rem; height: 2.2rem; }
    }
    
    .cf-case2 { display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; height: 100%;
        padding: 0.3rem 0.5rem;   
        opacity: 1; transition: opacity 0.26s ease; }
    .cf-case2.cf-spell-out { opacity: 0; }
    .cf-case2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    
    .cf-case2-grid > .cf-casebtn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.45rem); }
    .cf-casebtn { padding: 0.55rem 0.7rem; border: 3px solid #000; border-radius: 0.9rem; background: #fff;
        box-shadow: 3px 3px 0 #000; font-weight: 800; font-size: clamp(1rem, 4.6vw, 1.3rem); color: #15243a;
        cursor: pointer; text-align: center; line-height: 1.1; transition: background 0.15s ease; }
    .cf-casebtn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000; }
    .cf-casebtn.is-active { background: #ffff00; }   
    .cf-casebtn-surprise { width: 72%; align-self: center; }
    
    
    .cf-checks { position: relative; flex: 0 0 0; min-height: 0; overflow: hidden; margin-top: 0.7rem;
        display: flex; flex-direction: column; justify-content: space-evenly; gap: 1rem;
        background: #eceef1; padding: 0 1rem; opacity: 0; transition: opacity 0.35s ease 0.2s; }
    .cf-checks.on { flex: 1 1 auto; opacity: 1; padding: 0.8rem 1rem; }
    
    .cf-checks .chk { gap: 0.85rem; font-size: clamp(0.9rem, 3.9vw, 1.1rem); font-weight: 800; color: #15243a; align-items: center; }
    .cf-checks .chk .chk-text { margin-left: 0; line-height: 1.3; }
    
    @media (min-width: 768px) { .cf-checks .chk { font-size: 1.32rem; } }
    .cf-cannot { color: #d40000; font-style: italic; font-weight: 800; }
    
    .step-confirm1.cf-checkstage .cf-edit,
    .step-confirm1.cf-checkstage .cf-break { opacity: 0; pointer-events: none; }
    
    .step-confirm1 .step-nav { opacity: 0; transition: opacity 0.3s ease; z-index: 6; }
    .step-confirm1 .step-nav.on { opacity: 1; }
    .cf-next.is-disabled { background: #cfd4dc !important; color: #8a93a6 !important;
        box-shadow: 3px 3px 0 #aeb4c0 !important; cursor: not-allowed; }
    
    @media (max-width: 767px) {
        .canvas:has(.step-confirm1) {
            grid-template-columns: 1fr;
            padding: calc(var(--pill-h) + 0.875rem) 5px;
            
            height: 100%;
            align-content: stretch;
        }
    }

    
    .step-reveal2 { position: relative; display: flex; flex-direction: column; height: 100%;
        gap: 0.3rem; padding-bottom: 0;
        
        margin-top: -0.6rem; }
    
    .canvas.step-mode .step-reveal2 { padding-bottom: 0; }
    
    .rv-head { flex: none; text-align: center; padding: 0 0 0.25rem; }
    
    .rv-title { font-family: "Bangers", cursive; font-weight: 400; font-size: clamp(1.5rem, 6.4vw, 2rem);
        letter-spacing: 0.03em; color: #15243a; line-height: 1; }
    
    .rv-ybtn { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 3px solid #000;
        background: #ffff00; box-shadow: 2px 2px 0 #000; display: flex; align-items: center; justify-content: center;
        cursor: pointer; padding: 0; }   
    .rv-ybtn-i { width: 56%; height: 56%; object-fit: contain; display: block; }
    .rv-ring { animation: rvRing 0.9s ease-in-out infinite; }
    @keyframes rvRing { 0%,100% { box-shadow: 2px 2px 0 #000, 0 0 0 0 rgba(255,255,0,0.7); }
        50% { box-shadow: 2px 2px 0 #000, 0 0 0 0.9rem rgba(255,255,0,0); } }
    
    
    .rv-logozone { flex: 1 1 0; position: relative; min-height: 0; container-type: size;
        display: flex; align-items: flex-start; justify-content: center; }
    
    .rv-frame { position: relative; width: min(100%, 96cqh); aspect-ratio: 1 / 1;
        background: #fff; border: 4px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
    .rv-content { position: absolute; inset: 0; z-index: 1; overflow: hidden; cursor: zoom-in;
        background: #fff; display: flex; align-items: center; justify-content: center; }
    .rv-inner { position: relative; z-index: 2; width: 98%; height: 98%; display: flex; align-items: center; justify-content: center; }   
    
    .rv-change { position: absolute; right: -0.35rem; bottom: -1.2rem; z-index: 4; }
    
    .rv-edge { position: absolute; z-index: 6; transform: translateY(-50%);
        opacity: 0; transition: opacity 0.35s ease 0.55s; }
    .rv-edge-l { left: 0.15rem; }
    .rv-edge-r { right: 0.15rem; }
    .tool.rv-active .rv-edge { opacity: 1; }
    
    .rv-edge-off { background: #eeeeee; border-color: #aaaaaa; box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
        cursor: default; }
    .rv-edge-off .rv-ybtn-i { filter: grayscale(1) opacity(0.45); }
    
    .rv-wm { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
    
    .rv-wm img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
    
    .rv-lockup { display: inline-flex; align-items: center; gap: 0.7rem; transform-origin: center center; }
    .rv-lockup.rv-stacked { flex-direction: column; gap: 0.35rem; text-align: center; }
    .rv-icon { flex: none; height: 5.5rem; width: auto; object-fit: contain; }
    .rv-stacked .rv-icon { height: 5rem; }
    .rv-word { display: flex; flex-direction: column; }
    .rv-lockup.rv-beside .rv-word { align-items: flex-start; }
    .rv-lockup.rv-stacked .rv-word { align-items: center; }
    .rv-line { white-space: nowrap; line-height: 1.06; font-size: 2.4rem; color: #15243a; }
    
    .rv-content.rv-darkbg .rv-line { color: #fefefe; }
    .rv-content.rv-darkbg .rv-icon { filter: brightness(0) invert(1); }
    
    .rv-content.rv-darkbg .rv-wm img,
    .rv-zoom-panel.rv-darkbg .rv-wm img { filter: invert(1); opacity: 0.7; }
    
    .rv-content.rv-wm-beside .rv-wm { justify-content: center; }
    .rv-content.rv-wm-beside .rv-wm img { width: 100%; height: 100%; margin-left: 0; }
    
    .rv-content.rv-locked .rv-lockup { filter: brightness(0) invert(1); opacity: 0.85; }
    .rv-lock { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column;
        align-items: center; justify-content: center; gap: 0.6rem; }
    .rv-content.rv-locked .rv-lock { display: flex; }
    .rv-lock-i { width: 2.6rem; height: 2.6rem; color: #15243a; }
    .rv-lock-i svg { width: 100%; height: 100%; }
    .rv-lock-msg { background: #ffd400; border: 2px solid #000; border-radius: 0.9rem; padding: 0.5rem 0.8rem;
        font-weight: 800; font-size: 0.92rem; text-align: center; max-width: 80%; color: #15243a; }
    
    .rv-spinner { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0.42rem solid #d7deea;
        border-top-color: #0000ff; animation: rvSpin 0.9s linear infinite; }
    @keyframes rvSpin { to { transform: rotate(360deg); } }
    
    .rv-mascotzone { flex: 0 0 auto; position: relative; }   
    
    .rv-hero { position: absolute; left: 0.85rem; bottom: 0; height: 30%; width: auto; z-index: 1;
        cursor: pointer; transform: translate(-120%, 10%);
        transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }
    .rv-hero.in { transform: translate(0, 10%); }
    .rv-hero img { display: block; height: 100%; width: auto; }
    
    .rv-ctas { position: relative; width: 76%; margin: 0.5rem 0 0.4rem auto; z-index: 4;
        display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
        opacity: 0; transition: opacity 0.3s ease; }
    .rv-cta-cup { position: absolute; left: -0.55rem; top: 50%; transform: translateY(-50%);
        width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #ffff00; border: 3px solid #000;
        box-shadow: 2px 2px 0 #000; display: flex; align-items: center; justify-content: center; }
    .rv-cta-cup img { width: 58%; height: 58%; object-fit: contain; display: block; }
    .rv-cta-free { position: relative; border: 3px solid #000; border-radius: 999px; background: #fff;
        box-shadow: 3px 3px 0 #000; padding: 0.5rem 0.8rem 0.5rem 2.4rem; cursor: pointer;
        font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.15rem, 5vw, 1.5rem); color: #15243a; line-height: 1; text-align: center; }
    .rv-cta-up { position: relative; border: 3px solid #000; border-radius: 1rem; background: #ffff00;
        box-shadow: 4px 4px 0 #000; padding: 0.55rem 0.8rem 0.6rem 2.4rem; cursor: pointer;
        display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; }
    .rv-cta-up .rv-cta-cup { top: 1.35rem; }
    .rv-cta-up-t { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.3rem, 5.6vw, 1.7rem); color: #15243a; line-height: 1; align-self: center; }
    .rv-cta-up-l { font-weight: 700; font-size: clamp(0.78rem, 3.4vw, 0.95rem); color: #15243a; line-height: 1.25; }
    
    .rv-head, .rv-frame, .rv-change { opacity: 0; transition: opacity 0.35s ease; }
    .rv-title-on .rv-head { opacity: 1; }
    
    .rv-frame-on .rv-frame, .rv-frame-on .rv-change { opacity: 1; }
    .rv-words-on .rv-ctas { opacity: 1; }
    
    
    .rv-upsell .rv-change, .rv-upsell .rv-mascotzone { display: none !important; }
    .rv-upsell .rv-content.rv-upsell-card { background: #2b2b2b; }
    .rv-upsell-msg { color: #fff; font-weight: 800; font-size: clamp(1.4rem, 6vw, 1.9rem); text-align: center; line-height: 1.2; }
    
    .rv-upsell .rv-inner { flex-direction: column; align-items: center; gap: clamp(1rem, 4vh, 2rem); }   
    .rv-view { position: static; transform: none; z-index: 5; flex: none; margin: 0 auto; align-self: center;
        width: 80%; max-width: 20rem; background: #ffff00; color: #15243a;   
        border: 3px solid #000; box-shadow: 4px 4px 0 #000; font-size: 1.4rem; font-weight: 800; padding: 0.7rem; }
    
    .rv-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.9); cursor: pointer; }
    
    body.rv-zoom-open .brand { position: relative; z-index: 1001; pointer-events: none; }
    
    .rv-zoom-panel { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
        width: min(100vw, 56vh); aspect-ratio: 1 / 1; background: #fff; }
    .rv-zoom-img { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; }
    .rv-zoom-wm { z-index: 2; }
    .rv-zoom-x { position: absolute; top: -3.9rem; right: 0.5rem; width: 3rem; height: 3rem;
        border-radius: 50%; background: #fff; border: 3px solid #000; color: #000; z-index: 3;
        font-family: "Bangers", cursive; font-weight: 400; font-size: 1.5rem; line-height: 1;
        display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
    .rv-zoom-change { position: absolute; right: 0.4rem; bottom: -1.55rem; z-index: 3; }
    
    .rv-zoom-ethos { position: absolute; left: 4%; right: 4%;
        top: calc(12vh + min(100vw, 56vh) + 2.5vh); bottom: 2.5vh;
        background: #fff; border: 3px solid #000; border-radius: 1.2rem; box-shadow: 4px 4px 0 #000;
        padding: 0.8rem 1rem; overflow: hidden;   
        font-weight: 800; color: #15243a; text-align: center; line-height: 1.3;
        opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
    .rv-zoom-ethos.on { opacity: 1; }
    
    .step-freepick { position: relative; height: 100%; box-sizing: border-box; }
    .fp-title { margin: 0.3rem 0 0; text-align: center; font-family: "Bangers", cursive; font-weight: 400;
        letter-spacing: 0.03em; font-size: clamp(2rem, 8.5vw, 2.7rem); color: #15243a; line-height: 1; }
    .fp-sub { margin: 0.2rem auto 0; max-width: 34ch; text-align: center; font-weight: 800;
        font-size: clamp(1.05rem, 4.6vw, 1.35rem); line-height: 1.35; color: #15243a; }
    .fp-email { margin-top: 0.9rem; font-family: "Archivo", sans-serif; font-weight: 700;
        font-size: clamp(1.3rem, 5.6vw, 1.7rem); border: 4px solid #15243a; border-radius: 1.4rem;
        padding: 0.7rem 1rem; width: 100%; box-sizing: border-box; background: #fff; color: #15243a; }
    .fp-email::placeholder { color: #b9bec9; }
    .fp-confirm { align-self: flex-end; margin-top: 0.5rem; display: inline-flex; align-items: center;
        gap: 0.6rem; background: #c7c7c7; color: #15243a; border: 3px solid #000; border-radius: 0.9rem;
        box-shadow: 4px 4px 0 #000; font-weight: 800; font-size: clamp(1.3rem, 5.4vw, 1.6rem);
        letter-spacing: 0.06em; padding: 0.6rem 1.4rem; cursor: default; }
    .fp-confirm svg { width: 0.85em; height: 0.85em; display: inline-block; }
    .fp-confirm.on { background: #ffff00; cursor: pointer; }   
    .fp-msg { min-height: 1.2em; margin: 0.25rem 0 0; text-align: right; font-weight: 700;
        font-size: 0.95rem; color: #15243a; }
    
    .fp-hero { position: absolute; left: -1.7rem; bottom: -0.9375rem; height: 44%; pointer-events: none; }
    .fp-hero img { height: 100%; width: auto; display: block; }
    .fp-late { position: absolute; right: 0; bottom: 0.5rem; width: 74%; z-index: 2;
        display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; }
    .fp-late-t { margin: 0; text-align: right; padding-right: 1rem; font-weight: 800;
        font-size: clamp(1.15rem, 5vw, 1.45rem); color: #15243a; }   
    
    .fp-late .rv-cta-up { padding-left: 2rem; padding-right: 0.5rem; }
    .fp-late .rv-cta-up-t { white-space: nowrap; }
    .fp-late .rv-cta-up-l { white-space: nowrap; font-size: clamp(0.66rem, 2.75vw, 0.9rem); }
    
    .step-freeconfirm { display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
        height: 100%; min-height: 0; overflow-y: auto; }
    
    .canvas.step-mode .step-freeconfirm { padding-bottom: 0.75rem; }
    .fc-frame { position: relative; flex: 0 0 auto; width: min(84%, 40vh); aspect-ratio: 1 / 1; margin-top: 0.2rem;
        background: #fff; border: 3px solid #000; }
    .fc-img { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; }
    .fc-share { display: flex; align-items: center; justify-content: center; gap: 0.6rem;
        font-weight: 800; font-size: clamp(1.3rem, 5.6vw, 1.7rem); color: #15243a; margin-top: 0.4rem; }
    .fc-share svg { width: 1.2em; height: 1.2em; }
    .fc-socials { display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 5vw, 1.6rem); margin-top: 0.3rem; }
    .fc-soc { width: clamp(3.4rem, 15vw, 4.2rem); height: clamp(3.4rem, 15vw, 4.2rem); border-radius: 50%;
        background: #0000ee; color: #fff; border: none; padding: 0; cursor: pointer;
        display: flex; align-items: center; justify-content: center; }
    .fc-soc svg { width: 58%; height: 58%; display: block; }
    
    .burger-badge { position: absolute; z-index: 2; top: -0.55rem; right: -0.55rem; min-width: 1.7rem; height: 1.7rem;
        border-radius: 50%; background: #e01414; color: #fff; border: 2px solid #000;
        font: 800 1.05rem/1.5rem "Archivo", sans-serif; text-align: center; padding: 0 0.2rem;
        box-sizing: border-box; pointer-events: none; }
    @media (min-width: 768px) {
        
        .rv-ctas { width: 46%; }
        .fp-late { width: 40%; }
        .fp-email, .fp-confirm { max-width: 30rem; }
        .fp-email { margin-left: auto; margin-right: auto; display: block; }
        .fp-confirm { margin-left: auto; margin-right: auto; display: flex; }
    }

    
    .step-upsell, .step-prefs { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
    .offer-29 { background: #fff; }
    .offer-49 { background: #ffff00; }
    .upsell-title { margin: 0; font-size: 1.1rem; font-weight: 800; }
    
    .step-stall { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 3rem 1rem; }
    .stall-line { margin: 0; font-size: 1.3rem; font-weight: 800; text-align: center; }
    .stall-spin { width: 3rem; height: 3rem; }
    .stall-spin span { display: block; width: 100%; height: 100%; border: 5px solid #000; border-top-color: transparent; border-radius: 50%; animation: hsspin 0.8s linear infinite; }
    .step-stall.approved .stall-spin span { border-color: #1a9c4b; animation: none; }
    .step-stall.approved .stall-line { color: #1a9c4b; }
    @keyframes hsspin { to { transform: rotate(360deg); } }
    
    .pref-row { display: flex; flex-direction: column; gap: 0.4rem; }
    .pref-q { margin: 0.3rem 0 0; font-weight: 800; font-size: 1.05rem; }
    .pref-opts { display: flex; gap: 0.6rem; }
    .pref-opts .btn { flex: 1 1 0; font-size: 1rem; }
    .pref-any { font-family: "Archivo", sans-serif; font-size: 1rem; border: 3px solid #000; border-radius: 0.6rem; padding: 0.5rem; width: 100%; }
    
    .concept-card.pickable { cursor: pointer; }
    .concept-card.chosen { outline: 4px solid #0000ff; outline-offset: 2px; }
    .free-email { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
    .free-email-input { font-family: "Archivo", sans-serif; font-size: 1.05rem; border: 3px solid #000; border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
    .step-freeconfirm { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; padding: 1.5rem 1rem; }

    
    .step-account { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
    .acct-box { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; max-width: 280px; width: 100%; margin: 0.2rem auto 0; }

    
    .acct-panel { display: contents; }

    
    
    @media (min-width: 1024px) {
        .tool:has(.step-account, .step-gate) {
            background-image: url("/images/city-main-2026-06.webp");
            background-size: cover;
            background-position: center;
        }
        .canvas.step-mode:has(.step-account, .step-gate) {
            padding: 0;
            align-content: center;
        }
        .canvas.step-mode .step-account { padding-bottom: 0; justify-content: center; align-items: center; }
        .acct-panel {
            display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch;
            background: #fff; border: 4px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
            width: min(31rem, 62%); padding: 2rem 2.25rem 2.25rem;
        }
        
        
        .canvas.step-mode .step.step-gate {
            width: min(40rem, 80%); max-width: none; margin: 0 auto;   
            
            height: auto; align-self: center;
            padding: 2rem 2.25rem 2.25rem; gap: 0.75rem; justify-content: center;
            background: #fff; border: 4px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
        }
        .canvas.step-mode .step-gate .gate-panel {
            background: none; border: 0; box-shadow: none; padding: 0;
        }
        
        .canvas.step-mode .step.step-gate .step-nav {
            position: static; width: 100%; height: auto; margin-top: 0.5rem;
            padding-right: var(--btn-shadow, 4px);
            justify-content: space-between; align-items: flex-end; gap: 1rem;
        }
        .canvas.step-mode .step.step-gate .step-nav .btn { font-size: 1.75rem; padding: 0.75rem 1rem; }
    }
    .acct-google { display: flex; justify-content: center; min-height: 2.6rem; }
    .acct-btn { width: 100%; font-size: 1rem; }
    
    .acct-provider { display: flex; align-items: center; justify-content: center; gap: 10px;
        width: 280px; max-width: 100%; height: 40px; margin: 0 auto; border: 0; border-radius: 20px;
        cursor: pointer; font-family: "Roboto", "Archivo", system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; }
    .acct-provider .acct-ico { width: 16px; height: 16px; flex: 0 0 auto; }
    .acct-apple { background: #000; color: #fff; }
    .acct-fb { background: #1877f2; color: #fff; }
    .acct-provider:hover { filter: brightness(1.07); }
    .acct-stub { opacity: 0.92; }
    .acct-or { margin: 0.3rem 0; text-align: center; font-weight: 700; color: #888; position: relative; }
    .acct-or::before, .acct-or::after { content: ""; position: absolute; top: 50%; width: 38%; height: 2px; background: #ddd; }
    .acct-or::before { left: 0; } .acct-or::after { right: 0; }
    .acct-email { display: flex; flex-direction: column; gap: 0.5rem; }
    .acct-input { font-family: "Archivo", sans-serif; font-size: 1.05rem; border: 3px solid #000; border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
    .acct-msg { margin: 0.1rem 0 0; font-size: 0.9rem; font-weight: 600; color: #1a4ed0; text-align: center; min-height: 1.1rem; }
    
    .btn-text { background: none; border: none; color: #1a4ed0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 0.3rem 0.4rem; text-decoration: underline; }
    .btn-text:hover { color: #0000d0; }
    
    .btn.is-busy, .btn:disabled { opacity: 0.55; cursor: progress; }
    .dash-acct { margin: 0.35rem 0 0; font-size: 0.85rem; color: #5a6678; font-weight: 600; }
    .dash-signout { font-size: 0.85rem; padding: 0 0.2rem; }
    
    .dash-danger { margin: 1.6rem 0 0.4rem; padding-top: 1rem; border-top: 2px dashed #d7dbe3; display: flex; justify-content: center; }
    .dash-del { font-size: 0.9rem; padding: 0.5rem 0.9rem; box-shadow: 2px 2px 0 #000; }
    .dash-del--armed { background: #e02b2b; border-color: #000; color: #fff; }

    
    .step-gate { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
        animation: gateIn 0.24s ease both; }
    .step-gate.gate-out { opacity: 0; transition: opacity 0.17s ease; }
    @keyframes gateIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .gate-title { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.02em;
        margin: 0; text-align: center; font-size: 2.6rem; line-height: 1.05; color: #000; }
    
    .gate-line { margin: 0 0 0.2rem; text-align: center; font-size: 1.05rem; font-weight: 700; color: #2b3350; }

    .gate-panel { background: #fff; border: 4px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
        padding: 1.1rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; }
    .gate-note { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: #1a4ed0; text-align: center; }
    .gate-label { margin: 0; font-size: 1.05rem; font-weight: 700; color: #000; text-align: center; line-height: 1.4; }
    .gate-box { margin-top: 0.1rem; }
    .gate-provider { height: 44px; font-size: 15px; }        
    .gate-google { min-height: 44px; align-items: center; }
    .gate-msg { min-height: 0; }
    .gate-manual { align-self: center; margin-top: 0.2rem; font-size: 1rem; }
    
    .gate-manual--loud { font-size: 1.1rem; font-weight: 800; color: #0000ff;
        border: 3px solid #000; border-radius: 0.6rem; background: #ffff00;
        text-decoration: none; padding: 0.6rem 0.9rem; box-shadow: 3px 3px 0 #000; align-self: stretch; }

    .gate-input { width: 100%; }
    .gate-input--bad { border-color: #e02b2b; }
    
    .gate-err { background: #ffe9e9; border: 3px solid #e02b2b; border-radius: 0.6rem;
        padding: 0.55rem 0.7rem; font-size: 0.95rem; font-weight: 700; color: #a11; line-height: 1.35; }
    
    .gate-suggest { display: flex; align-items: stretch; gap: 0.5rem; }
    
    .gate-sug-note { flex: 1 1 auto; min-width: 0; background: #ffe9e9; border: 3px solid #e02b2b;
        border-radius: 0.6rem; padding: 0.5rem 0.65rem; cursor: pointer;
        display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
    .gate-sug-lead { font-weight: 800; color: #a11; font-size: 0.9rem; }
    .gate-sug-mail { font-weight: 800; color: #000; font-size: 0.98rem; line-height: 1.25;
        overflow-wrap: anywhere; }
    .gate-tick { flex: 0 0 auto; width: 2.9rem; background: #ffff00; border: 3px solid #000; border-radius: 0.4rem;
        box-shadow: 3px 3px 0 #000; cursor: pointer; display: flex; align-items: center; justify-content: center;
        color: #000; padding: 0; }
    .gate-tick svg { width: 1.6rem; height: 1.6rem; }
    .gate-tick:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }

    
    .gate-mailline { margin: -0.15rem 0 0; text-align: center; }
    .gate-mail { background: #ffff00; box-decoration-break: clone; -webkit-box-decoration-break: clone;
        padding: 0.1em 0.3em; font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; }
    .gate-other { align-self: center; font-size: 0.95rem; }
    .gate-code { display: flex; gap: 0.7rem; justify-content: center; margin: 0.2rem 0 0.1rem; }
    .gate-digit { width: 4rem; height: 4.6rem; text-align: center; font-family: "Archivo", sans-serif;
        font-size: 2.4rem; font-weight: 800; color: #000; background: #fff;
        border: 3px solid #000; border-radius: 0.6rem; box-shadow: 3px 3px 0 #000; padding: 0; }
    .gate-digit:focus { outline: none; border-color: #0000ff; box-shadow: 3px 3px 0 #0000ff; }
    .gate-shake { animation: gateShake 0.34s ease; }
    @keyframes gateShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-7px); }
        40% { transform: translateX(7px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(4px); }
    }

    
    
    
    .gate-continue { width: 100%; margin: 0 0 0.2rem; text-transform: none; }
    .gate-or { margin: 0.15rem 0 0.35rem; }
    .gate-promise { margin: 0.55rem 0 0; text-align: center; font-size: 0.9rem; font-weight: 700; color: #5a6678; }
    .gate-never { text-decoration: underline; text-underline-offset: 2px; }

    
    .step-gate .step-nav .btn { font-size: 1.15rem; padding-left: 0.85rem; padding-right: 0.85rem; }

    
    .gate-prior { font-style: italic; font-weight: 800; }
    .gate-pills { margin-top: 0.5rem; }

    @media (min-width: 768px) {
        .step-gate { max-width: 34rem; margin: 0 auto; }
        .gate-title { font-size: 3.2rem; }
        .gate-line { font-size: 1.15rem; }
        .gate-panel { padding: 1.4rem 1.6rem 1.6rem; }
        .step-gate .step-nav .btn { font-size: 1.35rem; }
    }

    
    
    .addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; margin: 14px 0; }
    .addon-card { border: 3px solid #000; border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; display: flex; flex-direction: column; }
    .addon-card.addon-selected { outline: 4px solid #0000ff; outline-offset: 2px; }
    .addon-art { min-height: 124px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; border-bottom: 2px dashed #b9c3d8;
        background: repeating-linear-gradient(45deg, #f4f6fc, #f4f6fc 11px, #eaeff8 11px, #eaeff8 22px); }
    .addon-art-label { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.95rem; color: #6b7892; letter-spacing: 0.2px; }
    .addon-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
    .addon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
    .addon-title { margin: 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1rem; color: #15243a; }
    .addon-price { margin: 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1rem; color: #0000d0; white-space: nowrap; }
    .addon-blurb { margin: 0; font-size: 0.85rem; line-height: 1.4; color: #5a6678; }
    .addon-add { margin-top: 6px; width: 100%; }
    .addon-add.addon-on { background: #0000ff; color: #fff; border-color: #0000ff; }
    
    .addon-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; padding: 12px 4px; margin-top: 6px; background: #fff; border-top: 2px solid #eaeef6; }
    .addon-total { font-family: "Archivo", sans-serif; font-weight: 700; color: #15243a; }
    .addon-checkout:disabled { opacity: 0.45; cursor: default; }
    .addon-more { margin-top: 10px; }

    
    .fontadj-stage, .final-stage { display: flex; align-items: center; justify-content: center; min-height: 220px; margin: 12px 0; border-radius: 14px; padding: 18px; }
    .fontadj-stage { background: #f7f9ff; border: 1px solid #e7ecf6; }
    .fontadj-img, .final-img { max-width: 80%; max-height: 240px; height: auto; transition: transform 0.12s ease; }
    .fontadj-slider { width: 100%; }
    .final-stage.final-light { background: #ffffff; border: 1px solid #e7ecf6; }
    .final-stage.final-dark { background: #15243a; border: 1px solid #15243a; }

    
    .dash-mode { overflow-y: auto; height: auto; }
    .dash { max-width: 900px; margin: 0 auto; padding: 8px 14px 48px; text-align: left; }
    .dash-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
    .dash-mascot { width: 64px; height: 64px; object-fit: contain; flex: none; }
    .dash-title { margin: 0; font-family: "Archivo", sans-serif; font-size: 1.5rem; color: #15243a; }
    .dash-co { margin: 2px 0 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.1rem; }
    .dash-sub { margin: 2px 0 0; font-size: 0.9rem; color: #5a6678; }
    .dash-h2 { font-family: "Archivo", sans-serif; font-size: 1.15rem; color: #15243a; margin: 26px 0 10px; }
    .dash-card { border: 3px solid #000; border-radius: 16px; background: #fff; padding: 20px; }
    .dash-feature { display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .dash-feature-img { max-width: 320px; max-height: 260px; height: auto; }
    .dash-dl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .dash-dlbtn { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
    .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
    .dash-thumb { border: 2px solid #e3e8f0; border-radius: 12px; background: #fff; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .dash-thumb img { max-width: 100%; max-height: 110px; height: auto; }

    
    .hq-apps { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 4px; }
    .hq-app { position: relative; border: 3px solid #000; border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; box-shadow: 5px 5px 0 #000; }
    .hq-app-live { background: #fff; }
    .hq-app-soon { background: #eef1f7; border-color: #aab4c6; box-shadow: 5px 5px 0 #cfd6e3; }
    .hq-app-name { margin: 0; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem; color: #15243a; }
    .hq-app-soon .hq-app-name { color: #8a94a8; }
    .hq-app-blurb { margin: 0; font-size: 0.92rem; color: #5a6678; line-height: 1.35; }
    .hq-cta { width: 100%; max-width: 22rem; }
    .hq-cta-soon { background: #cfd6e3; color: #7a8499; border-color: #aab4c6; box-shadow: none; cursor: default; line-height: 1.15; }
    .hq-cta-soon em { font-style: italic; font-weight: 600; font-size: 0.8em; opacity: 0.85; }
    
    .hq-lock { position: absolute; top: 10px; right: 12px; font-size: 1.15rem; line-height: 1; filter: grayscale(1); opacity: 0.7; }
    .hq-locked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .hq-locked { position: relative; border: 2px dashed #b9c3d8; border-radius: 12px; background: #f4f6fc; padding: 18px 14px; text-align: center; opacity: 0.85; }
    .hq-locked-title { margin: 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.98rem; color: #6b7892; }
    .hq-locked-blurb { margin: 4px 0 0; font-size: 0.82rem; color: #93a0b6; line-height: 1.3; }
    @media (min-width: 768px) {
        .hq-apps { grid-template-columns: 1fr 1fr; }
    }

    

    
    .hsdev-win {
        position: fixed;
        top: 1.125rem;
        bottom: 9.375rem;
        width: 18.75rem;
        background: #fff;
        border: 3px solid #000;
        border-radius: 0.5rem;
        padding: 1rem 1.125rem;
        z-index: 9999;
        display: flex;
        flex-direction: column;
    }
    .hsdev-left { left: 0.75rem; }
    .hsdev-right { right: 0.75rem; }
    .hsdev-win h2 {
        margin: 0 0 0.875rem;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: 0;
    }
    .hsdev-x {
        position: absolute;
        top: -0.875rem;
        right: -0.875rem;
        width: 2.375rem;
        height: 2.375rem;
        border-radius: 50%;
        background: #e60000;
        border: 3px solid #000;
        color: #000;
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
    }
    .hsdev-body {
        flex: 1;
        overflow-y: auto;
        font-size: 0.88rem;
        line-height: 1.5;
    }
    ol.hsdev-body { margin: 0; padding-left: 1.25rem; }
    ol.hsdev-body li { margin: 0 0 0.375rem; }
    
    ol.hsdev-body li.api  { color: #0000d0; }
    ol.hsdev-body li.ok   { color: #1d7d33; }
    ol.hsdev-body li.warn { color: #b00020; }
    ol.hsdev-body li.key  { font-weight: 700; }
    .hsdev-body .kv { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
    .hsdev-body .kv strong { font-weight: 700; }
    #hsdevReset {
        position: fixed;
        right: 0.75rem;
        bottom: 1.5rem;
        width: 18.75rem;
        z-index: 9999;
        font-size: 1.3rem;
        line-height: 1.35;
        text-transform: none;
        padding: 0.75rem 1rem;
    }
    
    #hsdevSpend {
        position: fixed;
        left: 0.75rem;
        bottom: 3.5rem;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background: #1a8f3c;
        border: 3px solid #0c5a24;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        color: #fff;
        z-index: 9999;
    }
    #hsdevSpend svg { width: 1.5rem; height: 1.5rem; fill: #0c5a24; }
    #hsdevSpendAmt {
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 0.8rem;
        line-height: 1;
    }
    @media (max-width: 1279px) {
        .hsdev-win, #hsdevReset, #hsdevSpend { display: none; }
    }

    
    
    @media (min-width: 768px) and (max-width: 1359px) {
        .brand { margin-left: 1.5%; }
        .tool {
            width: auto;
            margin: 0 1.5%;
        }
        .canvas { padding: 0.9375rem 0; }
    }

    
    .rotate-overlay { display: none; }
    @media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
        
        html { background: #FADB0C; }
        .rotate-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;   
            display: block;
            background: url("/images/rotate-portrait.webp") center / cover no-repeat #F8EED5;
        }
        
        .rotate-overlay p {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            margin: 0;
        }
    }

    
    .intro-hero, .intro-balloon { display: none; }

    
    .intro-backer {
        position: absolute;
        
        inset: 2px;
        background: var(--hs-canvas, #fff);
    }

    
    .intro-circle {
        position: absolute;
        display: none;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: var(--hs-circle, #fff);
    }
    .intro-hero.has-circle .intro-circle { display: block; }
    
    .intro-easel { display: none; }

    
    body.bp-snap .intro-hero,
    body.bp-snap .intro-balloon,
    body.bp-snap .intro-balloon::before,
    body.bp-snap .intro-balloon::after,
    body.bp-snap .intro-balloon h2,
    body.bp-snap .intro-balloon .intro-p,
    body.bp-snap .intro-balloon .intro-btn,
    body.bp-snap .canvas,
    body.bp-snap .step-nav { transition: none !important; }


    
    @media (min-width: 768px) {
        
        
        .stage { display: block; max-width: none; height: 100svh; }

        
        .g-mascot-col .intro-hero { display: contents; }

        
        .g-mascot-col .intro-hero.easel { display: block; position: relative; }
        .g-mascot-col .intro-hero.easel img { position: relative; }   
        .g-mascot-col .intro-hero.easel .intro-circle { left: 15.5%; top: 28.13%; width: 23.78%; }

        
        .intro-balloon { display: none; }
        .g-title:empty, .g-balloon:empty { display: none; }

        
        .legal {
            position: absolute;
            
            left: 0; right: 0; bottom: 0; padding-top: 2vh; box-sizing: border-box;
            max-width: var(--maxw); margin: 0 auto;
            height: var(--frame);
            
            padding: 0 calc(var(--frame) * 0.5);
            font-size: 0.8rem; font-weight: 600;
            z-index: 6;   
        }

    }

    
    
    :root { --rail-w: 0.333334; --band: 93px; }
    
    .tool-rail { display: none; }
    @media (min-width: 1024px) {
        
        .tool { overflow: hidden; }
        
        .frame-bl, .frame-bottom, .frame-left { position: relative; z-index: 3; }
        .tool-rail {
            display: flex;
            flex-direction: column;
            
            align-items: flex-start;
            position: absolute;
            top: var(--frame); bottom: var(--frame); left: var(--frame);
            width: calc(var(--rail-w) * (100% - 2 * var(--frame)));
            text-align: left;
            pointer-events: none;   
            z-index: 2;
            
            overflow: visible;
        }
        .rail-title {
            margin: 1.5rem 0 0;
            font-family: "Bangers", cursive;
            font-weight: 400;
            letter-spacing: 0.03em;
            color: #15243a;
            
            font-size: 4.5rem;
            line-height: 1;
        }
        
        .rail-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin-top: auto;
        }
        
        .rail-easel {
            display: none;
            position: absolute;
            
            left: 1%;
            
            bottom: 2px;
            
            height: 64%;
            width: auto;
            z-index: 0;
            pointer-events: none;
        }
        .rail-easel svg { display: block; height: 100%; width: auto; overflow: visible; }
        .tool-rail.cs-rail .rail-easel { display: block; }
        
        .tool-rail.cs-rail .rail-mascot {
            position: relative;
            z-index: 1;
            width: 76%;
            margin-left: auto;
            margin-right: -6%;
            
            transform: translateY(63px);
        }
        
        .tool-rail.cs-rail .rail-mascot.rail-off { transform: translateY(63px) translateY(110%); }
        
        .tool-rail.cs-rail .rail-balloon { transform: translateY(-20px); }
        
        .tool-rail.cs-rail .rail-title { transform: translateY(-20px); }
        .rail-mascot {
            
            width: 102%;
            height: auto;
            
            transform: translateY(43px);
            
            transition: transform 0.45s ease;
        }
        .rail-mascot.rail-off { transform: translateY(43px) translateY(110%); }
        @media (prefers-reduced-motion: reduce) {
            .rail-mascot { transition: none; }
        }
        
        .rail-balloon {
            display: none;   
            position: relative;
            
            z-index: 2;
            width: 90%;
            
            margin: 0 0 1.25rem;
            background: #fff;
            border: 4px solid #000;
            border-radius: 1.1rem;
            padding: 0.85rem 1rem;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
            
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .rail-balloon.rail-show { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
            .rail-balloon { transition: none; }
        }
        .rail-balloon p {
            margin: 0;
            font-weight: 700;
            
            font-size: 1.4rem;
            line-height: 1.35;
            color: #15243a;
            text-align: center;
        }
        
        .rail-balloon-tail {
            position: absolute;
            
            left: 25%;
            
            
            
            bottom: -1.2rem;
            width: 2rem;
            height: 1.2rem;
            transform: translateX(-50%);
            
        }
        .rail-balloon-tail::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
        .rail-balloon-tail::after {
            content: "";
            position: absolute;
            
            
            top: -0.125rem;
            left: 50%;
            width: 1.5583rem;
            height: 0.935rem;
            transform: translateX(-50%);
            background: #fff;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
        .canvas {
            
            padding: var(--band) 2.5rem var(--band) calc(var(--rail-w) * 100% + 2.5rem);
        }
        
        .canvas.step-mode {
            padding-top: clamp(0.25rem, 1.6vh, 1.25rem);
            padding-bottom: calc(var(--band) + clamp(0.25rem, 1.6vh, 1.25rem));
        }
        
        .canvas.step-mode .step { padding-bottom: 0; }
        
        .canvas.step-mode .step.step-fontreco { padding-bottom: 0; }
        
        .canvas.step-mode:has(.step-confirm1.cf-intopic) {
            padding-bottom: clamp(0.25rem, 1.6vh, 1.25rem);
        }
        .step-confirm1.cf-intopic .step-nav { height: 1px; }   
        .canvas:not(.step-mode) {
            
            grid-template-rows: 0 auto 2.75rem auto 2.75rem auto;
            gap: 0 1.875rem;
        }
        
        .fld-wide { width: 100%; margin: 0; }
        
        
        .fld-terms { padding-right: 0; }
        .step-nav {
            
            left: calc(var(--frame) + var(--rail-w) * (100% - 2 * var(--frame)) + 2.5rem);
            bottom: var(--frame);
            height: var(--band);
            align-items: center;   
        }
    }

    
    @media (min-width: 1024px) and (max-height: 50rem) {
        
        :root { --band: 48px; --rail-w: 0.22; }
        .canvas:not(.step-mode) { grid-template-rows: 0 auto 0.5rem auto 0.5rem auto; }
        .rail-title { font-size: 1.7rem; margin-top: 0.6rem; }
        
        .rail-balloon { padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; }
        .rail-balloon p { font-size: 0.85rem; }
        .rail-mascot { width: 98%; }
        
        .fld-desc textarea { height: 8.2rem; }
    }

    @media (max-width: 767px) {
        
        .tool { overflow: hidden; }
        
        
        .tool > div:not(.canvas):where(:not(.intro-hero):not(.rv-hero)) {
            position: relative;
            z-index: 4;
        }
        
        .tool > div.frame-left,
        .tool > div.frame-right { z-index: 2; }
        
        body.hero-under .tool > div.frame-left,
        body.hero-under .tool > div.frame-right { z-index: 4; }
        
        .intro-hero {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: auto;
            transition: transform 0.45s ease;
            z-index: 3;
        }
        .intro-hero.off { transform: translateY(110%); }
        
        .intro-hero img {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
        }
        
        .intro-circle {
            left: 15.5%;
            top: 28.13%;
            width: 23.78%;
        }
        .intro-balloon {
            display: block;
            
            position: absolute;
            
            left: calc(0.625rem + var(--frame) + var(--pad, 0rem));
            right: calc(0.625rem + var(--frame) + var(--pad, 0rem));
            
            top: calc(4.3125rem + 14.47vw);
            margin: 0;
            font-size: 1.05rem;
            font-weight: 600;
            line-height: 1.5;
            
            padding: 0.625rem 1.25rem 1.125rem;
            opacity: 0;           
            pointer-events: none;
            
            z-index: 80;
            transition: opacity 0.3s ease, transform 0.4s ease,
                        padding 0.4s ease, right 0.4s ease, left 0.4s ease;
        }
        
        .pg-arrow {
            
            position: absolute; top: calc(4.3125rem + 14.47vw + (var(--pill-h) - 2.8rem) / 2); width: 2.8rem; height: 2.8rem;
            border-radius: 50%; padding: 0; z-index: 81;
            background: #eeeeee; border: 3px solid #aaaaaa; color: #aaaaaa;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: default;
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
        }
        .pg-arrow svg { width: 58%; height: 58%; display: block; }
        .pg-arrow.pg-active { background: #ffff00; border-color: #000; color: #000; cursor: pointer; box-shadow: 2px 2px 0 #000; }
        .pg-left  { left:  calc(0.625rem + var(--frame) + var(--pad, 0rem)); }
        .pg-right { right: calc(0.625rem + var(--frame) + var(--pad, 0rem)); }
        body.pg-on .pg-arrow { opacity: 1; pointer-events: auto; }
        body.pg-on .intro-balloon.pill {
            left:  calc(0.625rem + var(--frame) + var(--pad, 0rem) + 3.25rem);
            right: calc(0.625rem + var(--frame) + var(--pad, 0rem) + 3.25rem);
        }
        
        body.pg-on .intro-balloon.pill h2 { font-size: clamp(1.25rem, 5.6vw, 1.7rem); white-space: nowrap; }
        
        .intro-balloon.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .intro-balloon::before,
        .intro-balloon::after {
            clip-path: polygon(0 0, 100% 0, 28% 100%);
        }
        
        .intro-spacer {
            float: right;
            width: 2.875rem;
            height: 2.875rem;
        }
        
        .intro-balloon h2,
        .intro-balloon .intro-p,
        .intro-balloon .intro-extra,
        .intro-balloon .intro-btn {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .intro-balloon.words h2,
        .intro-balloon.words .intro-p,
        .intro-balloon.words .intro-extra,
        .intro-balloon.words .intro-btn { opacity: 1; }
        .intro-balloon h2 {
            margin: 0;
            
            
            font-size: var(--intro-fit, var(--intro-title));
            line-height: 1.2;
            
            transform: translateY(0.15em);
        }
        .intro-balloon .intro-p {
            margin: 0.375rem 0 0;
            
            clear: right;
            font-size: clamp(1.15rem, 0.51rem + 3.2vw, 1.35rem);
            line-height: 1.35;
            max-height: 14rem;
            
            transition: opacity 0.15s ease, max-height 0.4s ease, margin 0.4s ease;
        }
        
        .intro-balloon.folding .intro-p { opacity: 0; }
        
        .intro-balloon.pill {
            
            height: var(--pill-h);
            box-sizing: border-box;
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .intro-balloon.pill h2 {
            position: absolute;
            top: 50%;
            
            left: 1.25rem;
            right: 3.75rem;
            text-align: center;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform: translateY(-50%) translateY(var(--pill-nudge));
        }
        
        .intro-balloon.pill .intro-btn {
            width: calc(var(--pill-h) - 0.45rem);
            height: calc(var(--pill-h) - 0.45rem);
            top: calc(0.225rem - 5px);   
        }
        .intro-balloon.pill::before,
        .intro-balloon.pill::after { opacity: 0; }
        .intro-balloon::before,
        .intro-balloon::after { transition: opacity 0.25s ease; }
        .intro-balloon.pill .intro-p {
            opacity: 0;
            max-height: 0;
            margin: 0;
            overflow: hidden;   
        }
        
        .intro-btn {
            position: absolute;
            
            top: 0.5rem;
            right: 0.75rem;
            width: 2.875rem;
            height: 2.875rem;
            border-radius: 50%;
            background: #ffff00;
            border: 3px solid #000;
            color: #000;
            font-size: 1.25rem;
            font-weight: 800;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            
            transition: width 0.25s ease, height 0.25s ease, top 0.25s ease;
        }
        .intro-btn .glyph { transition: opacity 0.15s ease; }
        .intro-btn .glyph svg {
            display: block;
            width: 1.25rem;
            height: 1.25rem;
        }
        .intro-btn.swapping .glyph { opacity: 0; }
        
        @keyframes hs-ring {
            0%        { transform: rotate(0) scale(1); }
            7%        { transform: rotate(30deg) scale(1.2); }
            15%       { transform: rotate(-26deg) scale(1.2); }
            23%       { transform: rotate(20deg) scale(1.2); }
            32%       { transform: rotate(-13deg) scale(1.2); }
            40%       { transform: rotate(6deg) scale(1.2); }
            50%, 100% { transform: rotate(0) scale(1); }
        }
        .intro-btn.ring { animation: hs-ring 3s ease-in-out 2s infinite; }
        @media (prefers-reduced-motion: reduce) {
            .intro-btn.ring { animation: none; }
        }
        
        .canvas, .step-nav { transition: opacity 0.2s ease; }
        body.intro-open .canvas,
        body.intro-open .step-nav {
            opacity: 0;
            pointer-events: none;
        }
        
        .step .prompt { display: none; }
        
        .fld-desc textarea { height: 6.75rem; }
    }

    

    
    @media (max-width: 767px) {
        
        .stage {
            
            grid-template-rows: auto minmax(0, 1fr) 1vh;
            height: 100vh;
            height: 100dvh;
            min-height: 0;
        }
        
        .legal {
            position: absolute;
            left: 0.625rem; right: 0.625rem;   
            bottom: calc(1vh - 7px);           
            height: var(--frame);
            
            padding: 0 calc(var(--frame) * 0.5);
            z-index: 5;
        }
        
        .canvas p {
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.22;
        }
        
        :root {
            
            --intro-title: clamp(1.7rem, 0.74rem + 4.8vw, 2rem);
            
            --pill-cap: 0.72;       
            --pill-air: 0.45rem;    
            --pill-nudge: 0.02em;   
            --pill-h: calc(var(--pill-air) * 2 + 6px + var(--intro-title) * var(--pill-cap));
        }
        .canvas {
            grid-template-columns: 1fr;
            
            padding: calc(var(--pill-h) + 0.875rem) var(--pad) 0.9375rem;
        }
        
        .canvas.no-pill { padding-top: 0.9375rem; }
        
        .canvas.pill-off { padding-top: 0.9375rem; }
        .stage:has(.canvas.pill-off) .intro-balloon { display: none; }
        
        .step-nav {
            left: calc(var(--frame) + var(--pad));
            
            right: calc(var(--frame) + max(var(--pad), var(--btn-shadow, 4px)));
            bottom: var(--frame);
            
            gap: calc(0.875rem + var(--pad));
        }
        
        .step-nav:not(.step-nav--end):not(.step-nav--solo) .btn { flex: 1 1 0; }
        .step-nav--end { justify-content: center; }
        
    }
    

    
    .htip { display: none; }   
    
    @media (min-width: 768px) {
        .gheading, .grouper {
            width: min(100%, 44rem);
            align-self: center;
        }
        
        .gheading {
            text-align: left;
            font-size: 1.25rem;
            font-weight: 600;
        }
        
        .gline .garr { width: 2.25rem; }
        
        .htip {
            display: block;
            margin-top: auto;
            width: min(100%, 44rem);
            align-self: center;
        }
        .htip h2 {
            margin: 0 0 0.25rem;
            color: #0000FF;
            font-size: 1.9rem;
        }
        .htip p {
            margin: 0;
            font-weight: 600;
            font-size: 1.15rem;
        }
    }
    
    .step { min-width: 0; }
    
    .human-err {
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
        font-weight: 700;
        color: #C0182B;
    }
    .gheading {
        margin: 0;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 700;
    }
    .grouper {
        background: #fff;
        border: 3px solid #1a1a1a;
        border-radius: 1.125rem;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        overflow: hidden;
        transition: height 0.3s ease;
    }
    .gline {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        border-radius: 0.75rem;
        padding: 0.75rem 0.875rem;
        min-height: 3.5rem;
        transition: opacity 0.25s ease;
    }
    .gline.gl1, .gline.gl3 { background: #dde3ff; }
    .gline.gl2 { background: #fff4b8; }
    .gline.in { opacity: 0; }   
    .gtxt {
        flex: 1;
        min-width: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: #15243a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .garr {
        flex: none;
        width: 0;            
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        border: 0;
        padding: 0;
        background: none;
        color: #000;
        cursor: pointer;
        transition: width 0.25s ease, opacity 0.25s ease;
    }
    .garr.show {
        width: 2.25rem;
        opacity: 1;
        pointer-events: auto;
    }
    
    .garr.gup { width: 2.25rem; }
    .garr svg {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 auto;
    }

    
    
    @media (max-width: 767px) {
        .intro-hero[data-step="cats"] img { transform: scale(0.9); transform-origin: bottom center; }
        
        .intro-hero[data-step="offer"] img { transform: scale(0.74); transform-origin: bottom center; }
        
        .intro-balloon[data-step="offer"] { padding-left: 0.7rem; padding-right: 0.7rem; padding-bottom: 0.8rem; }
        .intro-balloon[data-step="offer"] h2,
        .intro-balloon[data-step="offer"] .intro-p { padding-left: 0.55rem; }
    }
    .step-cats { align-content: start; }
    .cat-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; margin-bottom: 0.5rem; }
    .cat-head { margin: 0; font-size: 1.25rem; }
    .cat-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem 1.5rem;
        width: 100%;
        align-content: start;
    }
    
    .cat-card {
        display: flex; flex-direction: column; align-items: center;
        border: 6px solid transparent; border-radius: 1.1rem; padding: 0.2rem 0.3rem;
    }
    .cat-card.is-selected { border-color: #0000ff; }
    .cat-imgwrap { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
    .cat-img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: contain;
        transition: opacity 0.28s ease;
    }
    .cat-rec {
        position: absolute;
        top: 0; right: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        background: #ffff00;
        border: 2px solid #000;
        border-radius: 999px;
        padding: 0.2rem 0.65rem 0.2rem 0.4rem;
        font-weight: 800;
        font-size: 0.8rem;
        line-height: 1;
        color: #15243a;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
    }
    
    .cat-rec-legend { position: static; flex: none; white-space: nowrap; }
    .cat-rec-star { width: 0.95rem; height: 0.95rem; display: block; }
    .cat-pickwrap { position: relative; width: 100%; display: flex; justify-content: center; margin-top: -0.1rem; }
    
    .cat-star { position: absolute; top: -0.6rem; right: 6%; z-index: 2; line-height: 0; }
    .cat-star .cat-rec-star { width: 1.3rem; height: 1.3rem; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3)); }
    .cat-pick {
        width: 90%;
        max-width: 14rem;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        color: #15243a;
        background: #fff;
        border: 2px solid #15243a;
        border-radius: 0.8rem;
        padding: 0.45rem 0.6rem;
        cursor: pointer;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }
    .cat-pick:hover { transform: translateY(-1px); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.28); }
    .cat-pick:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); }
    
    .cat-card.is-rec .cat-pick { background: #ffff00; border-color: #000; }
    .cat-confirm { text-transform: none; }
    @media (max-width: 767px) {
        
        .canvas.step-mode .step-cats { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
        .cat-headrow { margin-bottom: 0.35rem; }
        .cat-head { font-size: 1.05rem; }
        .cat-rec-legend { font-size: 0.7rem; padding: 0.15rem 0.5rem 0.15rem 0.3rem; }
        .cat-rec-star { width: 0.8rem; height: 0.8rem; }
        
        .cat-grid {
            flex: 1 1 auto; min-height: 0;
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-template-rows: 1fr 1fr;     
            grid-auto-columns: 100%;         
            gap: 0.7rem 0;
            overflow-x: auto; overflow-y: hidden;
            -webkit-overflow-scrolling: touch; scrollbar-width: none;
            
            padding-bottom: clamp(3.2rem, 8vh, 4.5rem);
        }
        .cat-grid::-webkit-scrollbar { display: none; }
        .cat-card { min-height: 0; border-width: 5px; padding: 0.1rem 0.2rem; }
        .cat-imgwrap { flex: 1 1 auto; min-height: 0; }
        .cat-img { aspect-ratio: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
        .cat-pickwrap { flex: none; }
        
        .cat-pick { font-size: 1rem; padding: 0.5rem 0.6rem; width: 90%; max-width: 18rem; border-radius: 0.7rem; }
        .cat-star { top: -0.5rem; }
        .cat-star .cat-rec-star { width: 1.05rem; height: 1.05rem; }
        
        .step-cats .step-nav .btn { flex: none; }
        .cat-nav .btn-light { font-size: 1rem; padding: 0.5rem 1rem; }
    }

    
    .fontgroup-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
        width: 100%;
        align-content: start;
    }
    .fontgroup-card {
        position: relative;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 0.4rem; min-height: 7rem;
        font-family: inherit;
        background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 1rem 0.75rem; cursor: pointer;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }
    .fontgroup-card:hover { transform: translateY(-1px); box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.22); }
    .fontgroup-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18); }
    .fontgroup-card.is-rec { border-color: #000; box-shadow: 4px 4px 0 #ffd400; }
    .fg-sample { font-size: 2.6rem; line-height: 1; color: #0000ff; }
    .fg-name { font-weight: 800; font-size: 1rem; color: #15243a; text-align: center; line-height: 1.15; }

    .font-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: 0.85rem; width: 100%; align-content: start;
    }
    .fcard {
        position: relative;
        background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 0.85rem 0.9rem 0.65rem; cursor: pointer;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }
    .fcard:hover { transform: translate(1px, 1px); }
    .fcard.on { border-color: #000; box-shadow: 0 0 0 4px #ffff00, 4px 4px 0 rgba(0, 0, 0, 0.2); }
    .fcard .prev {
        font-size: 1.5rem; line-height: 1.2; min-height: 2.6rem;
        display: grid; place-content: center; text-align: center;
        word-break: break-word; color: #15243a;
    }
    .fcard .meta { margin-top: 0.4rem; font-size: 0.72rem; color: #8a96aa; text-align: center; }
    .fcard .badge {
        position: absolute; top: -0.6rem; right: -0.4rem;
        background: #ffff00; border: 2px solid #000; border-radius: 999px;
        padding: 0.12rem 0.5rem; font-size: 0.62rem; font-weight: 800; color: #15243a;
        display: none;
    }
    .fcard.on .badge { display: block; }
    .btn-fontmore {
        align-self: center; margin: 0.25rem auto 0;
        font-family: inherit; font-weight: 800; font-size: 0.95rem; color: #15243a;
        background: #fff; border: 2px solid #15243a; border-radius: 0.9rem;
        padding: 0.5rem 1.1rem; cursor: pointer;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
    }
    @media (max-width: 767px) {
        .fontgroup-grid { gap: 0.6rem; }
        .fontgroup-card { min-height: 5.5rem; padding: 0.75rem 0.5rem; }
        .fg-sample { font-size: 2.1rem; }
        .fg-name { font-size: 0.85rem; }
        .font-grid { grid-template-columns: 1fr; gap: 0.6rem; }
        .fcard .prev { font-size: 1.35rem; min-height: 2.2rem; }
    }

    
    .step-pay { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; }
    
    
    .step-pay .pick-head { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.6rem, 6.4vw, 2.4rem); color: #15243a; line-height: 1; text-align: center;
        margin: 0 0 0.2rem; }
    .pay-tiers { display: flex; flex-direction: column; gap: 0.5rem; }
    .pay-tier { display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
        border: 3px solid #15243a; border-radius: 0.9rem; padding: 0.6rem 0.8rem; background: #fff;
        box-shadow: 0 0 0 0 #0000ff; transition: box-shadow 0.12s ease; }
    .pay-tier input { flex: none; width: 1.15rem; height: 1.15rem; accent-color: #0000ff; margin: 0; }
    .pay-tier:has(input:checked) { box-shadow: 0 0 0 3px #0000ff; }
    .pay-tier-b { display: flex; flex-direction: column; min-width: 0; }
    .pay-tier-top { display: flex; align-items: baseline; gap: 0.5rem; }
    .pay-tier-n { font-weight: 800; font-size: clamp(1rem, 4vw, 1.2rem); color: #15243a; }
    .pay-tier-p { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.1rem, 4.6vw, 1.4rem); color: #0000ff; }
    .pay-tier-d { font-weight: 700; font-size: clamp(0.78rem, 3.2vw, 0.92rem); color: #41506b; line-height: 1.3; }
    
    .pay-toprow { display: contents; }
    .pay-coupon-h { display: none; }   
    .pay-coupon { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
    .pay-coupon-in { flex: 1 1 7rem; min-width: 0; border: 3px solid #000; border-radius: 0.6rem;
        padding: 0.35rem 0.6rem; font-family: "Archivo", sans-serif; font-weight: 700;
        font-size: 0.95rem; text-transform: uppercase; background: #fff; color: #15243a; }
    .pay-coupon-go { flex: none; padding: 0.35rem 0.9rem; font-size: 0.9rem; }
    .pay-coupon-msg { flex: 1 1 100%; font-weight: 700; font-size: 0.8rem; color: #41506b; }
    .pay-coupon-ok .pay-coupon-msg { color: #0a7a34; }
    .pay-amount { margin: 0; font-weight: 800; font-size: 1.25rem; color: #0000ff; text-align: center; }
    .pay-express:not(:empty) { margin: 0 0 0.2rem; }   
    .pay-link:not(:empty) { margin: 0; }               
    .pay-element {
        background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 1rem; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); min-height: 3rem;
    }
    .pay-msg { margin: 0; font-size: 0.95rem; color: #41506b; text-align: center; min-height: 1.2em; }
    .pay-btn { align-self: center; min-width: 14rem; margin-top: 0.25rem; }
    .pay-btn:disabled { opacity: 0.55; cursor: default; }

    
    .step-fontreco { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
    
    .fr-fit-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
    
    .fr-tools { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
    .fr-preview {
        background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 1.5rem 1rem; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
        min-height: 6rem; display: grid; place-content: center; text-align: center;
    }
    
    
    .step-fontreco .fr-preview { min-height: clamp(11rem, 24vh, 18rem); }
    
    .fr-loading { color: #8a96aa; font-weight: 700; }
    
    .fr-block { display: flex; flex-direction: column; align-items: flex-start; }
    
    .fr-eyebrow { margin: 0 0 0.15rem; line-height: 1; position: relative; z-index: 2; }
    .fr-lockup { display: flex; flex-direction: column; gap: 0.1rem; color: #15243a; line-height: 1.05; }
    .fr-line { font-size: 2.4rem; word-break: break-word; }
    .fr-credit { margin-top: 0.9rem; font-size: 0.72rem; color: #8a96aa; font-weight: 700; letter-spacing: 0.02em; }
    
    .canvas.step-mode .step-fontreco { padding-bottom: clamp(4.5rem, 11vh, 6rem); }
    @media (max-width: 767px) {
        .fr-line { font-size: 1.9rem; }
        .fr-preview { padding: 1.1rem 0.75rem; }
    }
    @media (min-width: 768px) {
        
    }

    
    .fr-hint { background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 2.25rem 1.5rem; text-align: center; }
    .fr-hint p { margin: 0 0 1.5rem; font-style: italic; font-weight: 700; color: #41506b; }
    .fr-hint p:last-child { margin-bottom: 0; }
    
    .fr-editor-hint { font-size: 0.85rem; color: #8a96aa; }
    
    .fr-editor-cta { display: block; width: 100%; max-width: 20rem; margin: 1.5rem auto 0;
        font-size: clamp(1.05rem, 4.6vw, 1.3rem); letter-spacing: 0.02em; padding: 0.85rem 1rem; }

    
    
    .fr-icon-btn {
        width: clamp(2.3rem, 13vw, 3.6rem); height: clamp(2.3rem, 13vw, 3.6rem);
        flex: none; border-radius: 50%;
        background: center/contain no-repeat; border: none; padding: 0; cursor: pointer;
        box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    @media (hover: hover) and (pointer: fine) {
        .fr-icon-btn:hover { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }
    }
    .fr-icon-btn:active { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }

    
    .fr-legend-title { background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 0.5rem 0.8rem; text-align: center; font-family: "Archivo", sans-serif; }
    .fr-legend-title b { display: block; font-weight: 800; font-size: 1rem; color: #15243a;
        margin-bottom: 0.1rem; }
    .fr-legend-title span { font-weight: 700; font-size: 0.8rem; color: #15243a;
        display: inline-flex; align-items: center; gap: 0.3rem; }
    .fr-legend-q { display: inline-block; width: 1.25rem; height: 1.25rem; flex: none;
        border-radius: 50%; background: center/contain no-repeat; vertical-align: middle; }
    
    
    

    
    
    .fr-legend-gap { height: 0.75rem; }
    
    .fr-menu-head { grid-column: 1 / -1; text-align: center; font-family: "Archivo", sans-serif;
        font-weight: 800; font-size: 1rem; color: #15243a; }
    .fr-menu-foot { grid-column: 1 / -1; text-align: center; font-family: "Archivo", sans-serif;
        font-weight: 700; font-size: 0.8rem; color: #15243a; }
    .fr-menu-foot .fr-legend-q { vertical-align: middle; margin-left: 0.25rem; }
    
    .fr-menu-legend .fr-icon-btn {
        box-shadow: none;
        cursor: default;
    }
    .fr-menu-legend .fr-icon-btn:hover,
    .fr-menu-legend .fr-icon-btn:active { transform: none; box-shadow: none; }

    
    .fr-menu { background: #fff; border: 3px solid #15243a; border-radius: 1rem;
        padding: 0.7rem 0.7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.5rem; }
    
    .fr-menu-row { display: flex; align-items: center; gap: 0.55rem; background: none;
        border: none; padding: 0; cursor: pointer; text-align: left; min-width: 0; }
    .fr-menu-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .fr-menu-label { font-family: "Archivo", sans-serif; font-weight: 800;
        font-size: clamp(0.9rem, 4vw, 1.15rem); color: #15243a; line-height: 1.15;
        min-width: 0; overflow-wrap: break-word; }
    .fr-menu .fr-icon-btn { width: clamp(2.1rem, 12vw, 3.2rem); height: clamp(2.1rem, 12vw, 3.2rem); }

    
    .fr-icon-row { display: flex; justify-content: center; gap: 0.9rem; padding: 0.15rem 0 0.35rem; }
    .fr-editor-list { background: #fff; border: 3px solid #15243a; border-radius: 1rem; padding: 1.25rem; }
    .fr-editor-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; }
    .fr-editor-row + .fr-editor-row { border-top: 1px solid #e4e7ee; }
    .fr-editor-group { flex: none; width: 4.75rem; font-family: "Archivo", sans-serif;
        font-weight: 800; font-size: 1.05rem; color: #15243a; line-height: 1.15; }
    .fr-editor-sample { flex: 1 1 auto; min-width: 0; }
    
    .fr-editor-sample-text { font-size: 1.9rem; line-height: 1.1; white-space: nowrap; }
    .fr-editor-sample-cap { font-size: 0.8rem; color: #41506b; font-weight: 700; margin-top: 0.15rem; }
    .fr-editor-row .fr-icon-btn { width: 3rem; height: 3rem; margin-top: 0.1rem; }
    
    
    @media (min-width: 1024px) {
        .fr-editor-list {
            width: clamp(18rem, 41.3vh, 31rem);
            max-width: 100%;
            margin-left: auto; margin-right: auto;
        }
        .fr-editor-row { align-items: center; }
        .fr-editor-sample { flex: 1 1 auto; min-width: 0; text-align: center; }
        .fr-editor-sample-text { font-size: clamp(1.6rem, 4.47vh, 3.35rem); }
    }

    
    .fr-tool-label { display: flex; align-items: center; gap: 0.75rem; padding: 0.15rem 0 0.35rem; }
    .fr-icon-static { cursor: default; }
    .fr-icon-static:hover, .fr-icon-static:active { transform: none; box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000; }
    .fr-tool-label-text { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.6rem; color: #15243a; }

    
    .fr-colour-list { display: flex; flex-direction: column; gap: 0.75rem;
        background: #fff; border: 3px solid #15243a; border-radius: 1rem; padding: 1rem; }
    .fr-colour-row { display: flex; align-items: center; gap: 0.75rem; border: 3px solid #15243a;
        border-radius: 0.85rem; padding: 0.85rem 1rem; }
    
    .fr-colour-row-1 { background: var(--hl-lead, #ffff99); }
    .fr-colour-row-2 { background: var(--hl-support, #99d1a7); }
    .fr-colour-row-3 { background: var(--hl-eyebrow, #cc99ff); }
    .fr-colour-row .fr-editor-group { width: auto; flex: 1 1 auto; }
    .fr-swatch-wrap { display: flex; gap: 0.6rem; flex: none; }
    .fr-swatch {
        position: relative; width: 3rem; height: 3rem; border-radius: 0.6rem;
        border: 3px solid #000; cursor: pointer; padding: 0;
    }
    .fr-swatch .fr-star-img { position: absolute; top: -0.6rem; right: -0.6rem;
        width: 1.6rem; height: 1.6rem; object-fit: contain; }

    
    
    .fr-hl { padding: 0; border-radius: 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
    
    
    
    .fr-hl-lead { background: var(--hl-lead, #ffff99); box-shadow: 0 0 0 5px var(--hl-lead, #ffff99); }
    .fr-hl-support { background: var(--hl-support, #99d1a7); box-shadow: 0 0 0 5px var(--hl-support, #99d1a7); }
    .fr-hl-eyebrow, .fr-hl-minor { background: var(--hl-eyebrow, #cc99ff); box-shadow: 0 0 0 5px var(--hl-eyebrow, #cc99ff); }
    
    .fr-align-row.fr-hl { box-shadow: none; }
    
    @media (min-width: 768px) {
        .fr-hl:not(.fr-align-row) { padding: 0 5px; margin: 0 -5px; box-shadow: none;
            background-repeat: no-repeat; background-size: 100% 68%; background-position: center 58%; }
        .fr-hl-lead:not(.fr-align-row) { background-color: transparent; background-image: linear-gradient(var(--hl-lead, #ffff99), var(--hl-lead, #ffff99)); }
        .fr-hl-support:not(.fr-align-row) { background-color: transparent; background-image: linear-gradient(var(--hl-support, #99d1a7), var(--hl-support, #99d1a7)); }
        .fr-hl-eyebrow:not(.fr-align-row), .fr-hl-minor:not(.fr-align-row) { background-color: transparent; background-image: linear-gradient(var(--hl-eyebrow, #cc99ff), var(--hl-eyebrow, #cc99ff)); }
    }

    
    @media (min-width: 1024px) {
        .fr-hint, .fr-menu {
            width: 498px; max-width: 100%; min-height: 330px;
            margin-left: auto; margin-right: auto;
        }
        .fr-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .fr-menu { align-content: center; }
        
        .fr-tool-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.6rem; color: #15243a; }
    }
    

    
    .fr-opt-warming { display: flex; align-items: center; justify-content: center; cursor: default; }
    .fr-spin { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: block;
        border: 0.28rem solid rgba(21, 36, 58, 0.18); border-top-color: #15243a;
        animation: fr-spin 0.7s linear infinite; }
    @keyframes fr-spin { to { transform: rotate(360deg); } }
    .fr-opt-name-warming { visibility: hidden; }
    .fr-opt-name-in { animation: fr-fade-in 0.22s ease both; }
    @keyframes fr-fade-in { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: none; } }
    .fr-slide-in-r { animation: fr-slide-r 0.22s ease both; }
    .fr-slide-in-l { animation: fr-slide-l 0.22s ease both; }
    @keyframes fr-slide-r { from { opacity: 0; transform: translateX(14%); } to { opacity: 1; transform: none; } }
    @keyframes fr-slide-l { from { opacity: 0; transform: translateX(-14%); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
        .fr-spin { animation: none; }
        .fr-opt-name-in, .fr-slide-in-r, .fr-slide-in-l { animation: none; }
    }

    
    .fr-word { cursor: pointer; }
    .fr-group-tag { flex: none; width: 5.5rem; font-family: "Archivo", sans-serif; font-weight: 800;
        font-size: 0.95rem; letter-spacing: 0.02em; color: #15243a; line-height: 1.1; }
    .fr-group-words { flex: 1 1 auto; min-width: 0; font-family: "Archivo", sans-serif;
        font-weight: 700; font-size: 1.15rem; color: #15243a;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fr-group-star { flex: none; width: 2.4rem; height: 2.4rem; display: block; }
    
    .fr-group-star .fr-star-img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .fr-colour-row.fr-row-sel { border-width: 4px; }
    
    
    .fr-align-row { display: flex; align-items: center; gap: 0.4rem; border: 3px solid #15243a;
        border-radius: 0.9rem; padding: 0.5rem 0.55rem; margin: 0 0 0.6rem; min-width: 0; }
    .fr-align-row:last-child { margin-bottom: 0; }
    .fr-align-label { font-family: "Archivo", sans-serif; font-weight: 800;
        font-size: clamp(0.82rem, 3.6vw, 1.05rem); line-height: 1.05; color: #15243a;
        flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .fr-align-btns { display: flex; gap: 0.35rem; margin-left: auto; flex: 0 0 auto; }
    
    .fr-align-row .fr-align-btn {
        border: none; border-radius: 0; background-color: transparent; background-size: contain;
    }
    .fr-align-row .fr-align-btn.on {
        background-color: transparent; filter: saturate(1.7) brightness(1.06) drop-shadow(0 1px 1px rgba(0,0,0,0.35));
    }
    .fr-align-btn { width: clamp(1.85rem, 9.6vw, 2.7rem); height: clamp(1.85rem, 9.6vw, 2.7rem);
        border: 3px solid #000; border-radius: 50%; background-color: #fff; background-repeat: no-repeat;
        background-position: center; background-size: 62%; cursor: pointer; padding: 0; flex: none;
        transition: background-color 0.15s; }
    .fr-align-btn.on { background-color: #ffff00; }
    @media (hover: hover) and (pointer: fine) { .fr-align-btn:hover { background-color: #fffbcc; } }
    .fr-align-btn:focus-visible { outline: 3px solid #1e6fbf; outline-offset: 2px; }
    
    .fr-icon-btn.is-off { filter: grayscale(1); opacity: 0.55; cursor: not-allowed;
        box-shadow: 3px 3px 0 #9a9a9a; }
    @media (hover: hover) and (pointer: fine) { .fr-icon-btn.is-off:hover { transform: none; box-shadow: 3px 3px 0 #9a9a9a; } }

    
    .fr-case-card { background: #fff; border: 3px solid #15243a; border-radius: 1rem; padding: 1.1rem 1rem 1.3rem; }
    .fr-case-prompt { margin: 0 0 1rem; text-align: center; font-family: "Archivo", sans-serif;
        font-weight: 800; font-size: 1.25rem; color: #15243a; }
    .fr-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    .fr-case-btn {
        font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.15rem; color: #15243a;
        background: #fff; border: 3px solid #000; border-radius: 0.75rem; padding: 0.7rem 0.5rem;
        cursor: pointer; box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000;
        transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
    }
    .fr-case-btn.on { background: #ffff00; }
    .fr-case-btn:disabled { background: #d4d4d4; border-color: #9a9a9a; color: #777;
        box-shadow: 3px 3px 0 #9a9a9a; cursor: not-allowed; }
    @media (hover: hover) and (pointer: fine) {
        .fr-case-btn:not(:disabled):hover { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }
    }
    .fr-case-btn:not(:disabled):active { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }
    
    .fr-pick-head { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; }
    .fr-pick-head b { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.5rem; color: #15243a; }
    .fr-pick-head i { font-family: "Archivo", sans-serif; font-style: normal; font-weight: 800;
        font-size: 1.05rem; color: #15243a; }
    .fr-pick-card { display: flex; flex-direction: column; }
    .fr-pick-tag { text-align: center; font-size: 0.82rem; color: #41506b; font-weight: 700; margin-bottom: 0.6rem; }
    .fr-pick-tag b { color: #15243a; }

    
    
    .fr-fam-row { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap;
        margin: auto 0; transition: margin 0.28s ease; }
    .fr-pick-card.fr-picked .fr-fam-row { margin: 0 0 0.8rem; }
    .fr-fam-btn { flex: 0 1 auto; min-width: 0; white-space: nowrap;
        font-size: clamp(0.8rem, 3.4vw, 1.05rem); font-weight: 700; color: #15243a; background: #fff;
        border: 3px solid #000; border-radius: 0.6rem; padding: 0.35rem clamp(0.3rem, 1.8vw, 0.8rem);
        cursor: pointer; box-shadow: 3px 3px 0 #000;
        transition: background 0.15s, transform 0.1s, box-shadow 0.1s; }
    .fr-fam-btn.on { background: #ffff00; }
    .fr-fam-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
    
    .fr-fam-btn.is-empty {
        background: #e6e6e6;
        color: #9aa3b0;
        border-color: #9aa3b0;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.65;
    }
    .fr-fam-btn.is-empty:active { transform: none; box-shadow: none; }
    
    .fr-fade { animation-name: frFadeIn; animation-fill-mode: both; animation-timing-function: ease; }
    @keyframes frFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .fr-opt-area { display: flex; align-items: center; gap: 0.5rem; min-height: 9rem; }
    .fr-opt-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    
    .fr-opt-wrap { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
    .fr-opt { width: 100%; background: #fff; border: 3px solid #000; border-radius: 0.75rem;
        padding: 0.6rem 0.7rem; cursor: pointer; box-shadow: 3px 3px 0 #000;
        display: flex; align-items: center; justify-content: center; min-height: 3.6rem;
        transition: background 0.15s, transform 0.1s, box-shadow 0.1s; }
    .fr-opt.on { background: #ffff00; }
    .fr-opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
    
    .fr-opt-sample { font-size: 1.9rem; line-height: 1.1; white-space: nowrap; }
    .fr-opt-name { font-size: 0.72rem; font-weight: 700; color: #41506b; text-align: center; }
    
    .fr-pager { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #ffff00;
        border: 3px solid #000; cursor: pointer; padding: 0; display: flex; align-items: center;
        justify-content: center; color: #000; }
    .fr-pager svg { width: 1.3rem; height: 1.3rem; }
    .fr-pager:disabled { background: #cccccc; color: #8a8a8a; cursor: not-allowed; }

    
    @media (max-width: 767px) {
        .fr-preview { max-height: 30vh; padding: 0.8rem 0.7rem; }
        .fr-tool-label { gap: 0.55rem; padding: 0; }
        .fr-tool-label-text { font-size: 1.15rem; line-height: 1.1; }
        .fr-tool-label .fr-icon-btn { width: 2.4rem; height: 2.4rem; }
        .fr-colour-list { gap: 0.3rem; padding: 0.45rem; }
        .fr-colour-row { padding: 0.3rem 0.6rem; gap: 0.5rem; border-width: 2px; }
        .fr-colour-row.fr-row-sel { border-width: 3px; }
        .fr-group-tag { width: 4.2rem; font-size: 0.82rem; }
        .fr-group-words { font-size: 0.98rem; }
        .fr-group-star { width: 1.7rem; height: 1.7rem; }
        
        .fr-swatch { width: 2.4rem; height: 2.4rem; border-width: 2px; }
        .fr-swatch .fr-star-img { width: 1.25rem; height: 1.25rem; top: -0.45rem; right: -0.45rem; }
        .fr-swatch-wrap { gap: 0.45rem; }
        .fr-editor-list { padding: 0.55rem; }
        .fr-editor-row { padding: 0.3rem 0; gap: 0.5rem; }
        .fr-editor-group { width: 3.8rem; font-size: 0.88rem; }
        .fr-editor-sample-text { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fr-editor-sample-cap { font-size: 0.7rem; }
        .fr-editor-row .fr-icon-btn { width: 2.3rem; height: 2.3rem; }
        .fr-icon-row { gap: 0.4rem; padding: 0.1rem 0 0.2rem; }
        .fr-case-card { padding: 0.7rem 0.7rem 0.8rem; }
        .fr-case-prompt { font-size: 1.02rem; margin-bottom: 0.6rem; }
        .fr-case-grid { gap: 0.55rem; }
        .fr-case-btn { font-size: 0.98rem; padding: 0.5rem 0.4rem; }
        .fr-hint { padding: 1.2rem 1rem; }
        .fr-menu { padding: 0.8rem 0.7rem; gap: 0.75rem 0.5rem; }
        .fr-pick-head b { font-size: 1.2rem; }
        .fr-pick-head i { font-size: 0.9rem; }
        .fr-opt-sample { font-size: 1.3rem; }
        .fr-opt-area { min-height: 7rem; }
        .fr-pager { width: 2.3rem; height: 2.3rem; }
    }

    
    
    .fr-word-sel { background: linear-gradient(var(--hl-lead, #ffff99), var(--hl-lead, #ffff99))
            no-repeat center / calc(100% + 0.06em) 0.92em;
        border-radius: 0.12em;
        box-decoration-break: clone; -webkit-box-decoration-break: clone; }
    
    .fr-nope { animation: cfNope 0.26s ease; }
    .fr-nope-msg { margin: 0.3rem 0 0; font-size: 0.9rem; font-weight: 700; color: #a7101f;
        text-align: center; opacity: 0; transition: opacity 0.18s ease; }
    .fr-nope-msg.on { opacity: 1; }
    

    
    @media (min-width: 768px) {
        
        .step-confirm1 { max-width: 64rem; margin-inline: auto; width: 100%; }
        
        .step-fontreco, .step-fonts, .step-fontgroups, .step-fontadj { max-width: 58rem; margin-inline: auto; width: 100%; }
        
        .step-pay { max-width: 44rem; margin-inline: auto; width: 100%; padding-bottom: 5.5rem; }
    }
    
    .step-stub {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 10rem;
        text-align: center;
    }
    .stub-note { margin: 0; font-family: "Archivo", sans-serif; color: #15243a; }
    .stub-note strong { display: block; font-size: 1.35rem; font-weight: 800; }
    .stub-note span { display: block; margin-top: 0.5rem; color: #6b7280; font-size: 1rem; }


    
    .step-cs {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.5rem, 2vh, 1rem);
        height: 100%;
        
    }
    
    .cs-art { width: min(100%, 30rem); aspect-ratio: 593 / 247; flex: none; }
    .cs-art svg { display: block; width: 100%; height: 100%; }

    
    
    .cs-ask {
        margin: 0;
        white-space: nowrap;
        max-width: 100%;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        color: #15243a;
        font-size: clamp(0.8rem, 3.4vw, 1.25rem);
        text-align: center;
        flex: none;
    }
    @media (max-width: 599px) { .cs-ask-tail { display: none; } }
    
    .cs-ask-or {
        margin: 0; max-width: 100%;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        color: #15243a;
        font-size: clamp(0.8rem, 3.4vw, 1.25rem);
        text-align: center;
        flex: none;
    }

    .cs-swatches {
        display: grid;
        
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.6rem, 4vw, 1.5rem);
        width: min(100%, 26rem);
        flex: none;
    }
    
    .step-reco .cs-swatches { width: min(100%, 13rem); }
    
    .cs-pickrow { display: contents; }
    .cs-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
    
    .cs-swatches:has(.cs-badge) { padding-bottom: 1.35rem; }
    .cs-sw {
        width: 100%;
        aspect-ratio: 1;
        border: 3px solid #000;
        border-radius: 0.9rem;
        box-shadow: 4px 4px 0 #000;
        cursor: pointer;
        padding: 0;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .cs-sw:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
    
    .cs-cell.sel::after {
        content: "";
        position: absolute;
        top: -0.55rem;
        right: -0.55rem;
        width: clamp(1.6rem, 7vw, 2.4rem);
        aspect-ratio: 1;
        background: url("/images/logo-generator/herosite-star-256.webp") center/contain no-repeat;
        z-index: 3;
        pointer-events: none;
    }
    
    .cs-pending {
        position: relative;
        background: #fff;
        cursor: default;
    }
    
    .cs-pending:active { transform: none; box-shadow: 4px 4px 0 #000; }
    .cs-spin {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 46%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 0.42rem solid #1E2FD8;
        border-top-color: #C6D6FF;      
        animation: cs-spin 0.85s linear infinite;
    }
    @keyframes cs-spin { to { transform: rotate(360deg); } }
    
    @media (prefers-reduced-motion: reduce) {
        .cs-spin { animation-duration: 2.4s; }
    }

    .cs-badge {
        background: #1a8f3c;
        color: #fff;
        font-family: "Archivo", sans-serif;
        font-weight: 700;
        font-size: clamp(0.55rem, 2.4vw, 0.7rem);
        line-height: 1;
        padding: 0.25rem 0.45rem;
        border-radius: 9px;
        white-space: nowrap;
        
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0.4rem;
    }
    
    .cs-name {
        display: none;
        width: min(100%, 30rem);
        background: #fff;
        border: 3px solid #000;
        border-radius: 999px;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        color: #15243a;
        font-size: clamp(1rem, 4.4vw, 1.5rem);
        text-align: center;
        padding: 0.55rem 1rem;
        flex: none;
    }
    .cs-name.on { display: block; }
    
    .cs-acts .btn, .cs-opts { text-transform: none; letter-spacing: 0; }
    
    .cs-own { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
              padding: 0.55rem 0.8rem; line-height: 1.15; }
    .cs-own-img { width: auto; height: clamp(38px, 11vw, 64px); flex: 0 0 auto; }
    .cs-own-tx  { text-align: center; }
    .cs-acts { display: flex; justify-content: center; width: 100%; flex: none; }
    .cs-acts .btn { font-size: clamp(0.95rem, 4vw, 1.35rem); }
    
    
    .cs-nav { gap: 0.5rem; }
    
    
    
    .step-cs .cs-nav .cs-opts { flex: 2 1 0; min-width: 0; white-space: nowrap;
                                padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; }
    
    .step-cs .cs-nav .cs-opts + .cs-next { flex: 0 0 auto; }
    
    @media (max-width: 767px) {
        
        .step-cs .cs-nav .cs-opts + .cs-next { padding-left: 0.4rem; padding-right: 0.4rem; }
    }

    
    .cs-sheet {
        display: none;
        position: absolute;
        
        left: var(--frame);
        right: var(--frame);
        
        top: 46%;
        bottom: calc(var(--frame) * 0.7373 + 4rem);
        background: #fff;
        border: 3px solid #000;
        border-radius: 1.75rem;
        padding: clamp(1rem, 5vh, 2rem) clamp(0.9rem, 4vw, 1.75rem);
        z-index: 6;
        flex-direction: column;
        justify-content: center;
        gap: clamp(1.25rem, 6vh, 3rem);
        
        overflow: visible;
    }
    .step-cs.opts-on .cs-sheet { display: flex; }
    
    .step-cs .cs-ask, .step-cs .cs-ask2, .step-cs .cs-swatches,
    .step-cs .cs-name, .step-cs .cs-acts { transition: opacity 0.18s ease; }
    .step-cs.opts-on .cs-ask, .step-cs.opts-on .cs-ask2, .step-cs.opts-on .cs-swatches,
    .step-cs.opts-on .cs-name, .step-cs.opts-on .cs-acts {
        
        opacity: 0;
        pointer-events: none;
    }
    
    .cs-sheet-x {
        position: absolute;
        top: -1.4rem;
        right: -0.6rem;
        width: 2.9rem;
        height: 2.9rem;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #000;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: 1.35rem;
        color: #15243a;
        cursor: pointer;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .step-cs.mono-on .cs-sheet-x { display: none; }
    .cs-opt { display: flex; align-items: center; gap: clamp(1rem, 6vw, 2.5rem); cursor: pointer; }
    
    .cs-optbox { flex: none; position: relative; width: clamp(2.4rem, 11vw, 3.4rem); aspect-ratio: 1;
                 border: 3px solid #000; border-radius: 0.35rem; display: flex;
                 align-items: center; justify-content: center; background: #fff;
                 box-shadow: 4px 4px 0 #000; transition: background 0.12s; }
    .cs-optbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
                       opacity: 0; cursor: pointer; z-index: 2; }
    .cs-optbox::after { content: ""; width: 62%; height: 34%; margin-top: -12%;
                        border-left: 5px solid #333; border-bottom: 5px solid #333;
                        transform: rotate(-45deg); opacity: 0; transition: opacity 0.12s; }
    .cs-optbox:has(input:checked) { background: #ffff00; }
    .cs-optbox:has(input:checked)::after { opacity: 1; }
    .cs-optlbl { font-family: "Archivo", sans-serif; font-weight: 800; color: #15243a;
                 font-size: clamp(1.05rem, 4.6vw, 1.5rem); }
    
    
    
    .cs-fams { width: min(100%, 22rem); gap: clamp(0.45rem, 2.8vw, 1rem); }
    
    .step-fam .cs-art, .step-shade .cs-art { width: min(100%, 22rem); }
    
    
    .cs-nav-solo { justify-content: flex-end; }

    
    @media (min-width: 768px) {
        .step-nav .btn-next { min-width: 8.75rem; }
        .step-nav .btn-light.btn-next { margin-left: auto; }
    }

    
    .btn-next { margin-right: var(--btn-shadow, 4px); }
    
    .step-nav .btn-next { margin-right: 0; }

    
    .cs-shades { grid-template-columns: repeat(4, 1fr); width: min(100%, 26rem); --sgap: clamp(0.4rem, 2.4vw, 0.9rem); gap: var(--sgap); }
    
    .step-sec2 .cs-shades { width: min(96%, 26rem); }
    
    .cs-jump {
        grid-column: span 2;
        
        
        aspect-ratio: auto;
        height: 0;
        
        padding-bottom: calc(50% - var(--sgap, 0.6rem) / 2 - 6px);
        min-height: 0;
        position: relative;
        overflow: hidden;
        
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    
    .cs-jump-l {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.2rem;
        font-family: "Archivo", sans-serif;
        font-weight: 800;
        font-size: clamp(0.62rem, 2.9vw, 1.05rem);
        line-height: 1.1;
        text-align: center;
    }
    
    .step-shade .cs-name { transition: background 0.12s, color 0.12s; }

    
    .cs-four { grid-template-columns: repeat(4, 1fr); width: min(100%, 22rem); gap: clamp(0.5rem, 3vw, 1.1rem); }
    
    .cs-ask2 { white-space: normal; max-width: min(100%, 26rem); }
    
    .cs-ask-or { display: none; }

    @media (min-width: 768px) {
        .cs-art { width: min(100%, 34rem); }
        .cs-swatches { width: min(100%, 30rem); }
        .cs-fams { width: min(100%, 26rem); }
        
        .step-fam .cs-art, .step-shade .cs-art { width: min(100%, 15rem); }
        .cs-sheet { left: 8%; right: 8%; border-radius: 2rem; }
    }

    
    @media (min-width: 768px) and (max-width: 1023px) {
        
        .step-reco .cs-art {
            box-sizing: content-box;
            
            width: min(100% - 6rem, 24rem, 33vh);
            aspect-ratio: 593 / 247;
            background: #fff;
            border: 3px solid #000;
            border-radius: 1.75rem;
            padding: clamp(0.7rem, 2vh, 1.3rem) clamp(0.9rem, 2.4vw, 1.9rem);
        }
        .step-reco .cs-art svg { width: 100%; height: 100%; }
        
        .step-reco .cs-swatches { width: min(100%, 16rem); gap: 1rem; }
        
        .step-reco { justify-content: center; gap: clamp(0.6rem, 1.8vh, 1.1rem); }
    }

    
    @media (min-width: 768px) and (max-width: 1023px) {
        .g-mascot-col .intro-hero.easel.cs-easel {
            display: flex; align-items: flex-end; justify-content: flex-end;
        }
        
        .intro-hero.cs-easel .intro-backer, .intro-hero.cs-easel .intro-circle { display: none; }
        .intro-hero.cs-easel .intro-easel {
            display: block;
            
            height: 19vh;
            width: auto;
            flex: 0 0 auto;
            margin-right: -8%;   
            pointer-events: none;
        }
        .intro-hero.cs-easel .intro-easel svg { display: block; height: 100%; width: auto; overflow: visible; }
        .intro-hero.cs-easel img { position: relative; z-index: 1; }
    }

    
    
    @media (max-width: 1023px) {
        .step-fam .cs-opts, .step-shade .cs-opts, .step-sec .cs-opts { display: none; }
    }

    
    @media (min-width: 1024px) {
        
        .canvas.step-mode .step.cs-two { padding-bottom: 0; }
        
        
        .canvas.cs-mode { display: block; }
        .cs-two {
            display: grid;
            
            
            
            grid-template-columns: minmax(0, 1fr);
            
            
            grid-template-areas:
                "art"
                "grid";
            
            --cs-sw: clamp(34px, 6.25vh, 75px);
            --cs-gap: clamp(8px, 1.5vh, 18px);
            
            --cs-w3: clamp(118px, 21.75vh, 261px);
            --cs-w4: clamp(160px, 29.5vh, 354px);
            
            
            
            grid-template-rows: minmax(0, 1fr) auto;
            
            row-gap: clamp(10px, 2.4vh, 26px);

            justify-items: center;
            column-gap: clamp(1rem, 4vw, 3rem);
            row-gap: 0;
            height: 100%;
        }
        
        .cs-two .cs-art {
            grid-area: art;
            align-self: center;
            
            box-sizing: border-box;
            
            
            height: 100%;
            width: auto;
            max-width: min(100% - 4rem, 38rem);
            aspect-ratio: 593 / 247;
            background: #fff;
            border: 3px solid #000;
            border-radius: 1.75rem;
            padding: clamp(1rem, 3.4vh, 2.4rem) clamp(1.25rem, 3.2vw, 3rem);
        }
        .cs-two .cs-art svg  { width: 100%; height: 100%; }
        
        
        .cs-two .cs-ask, .cs-two .cs-ask2 { grid-area: ask; align-self: end; text-align: center; }
        .cs-two .cs-ask-or {
            grid-area: askor; display: block; align-self: end; text-align: center;
            margin: 0; white-space: normal;
        }
        
        .cs-two .cs-ask      { white-space: normal; }
        
        
        
        
        
        
        
        .cs-two .cs-pickrow {
            grid-area: grid;
            display: grid;
            
            width: min(100%, var(--cs-cardw, 38rem));
            margin-inline: auto;
            grid-template-columns: minmax(var(--cs-w4), 2fr) minmax(0, 1fr);
            
            grid-template-areas: "ask  askor"
                                 "grid own"
                                 "name own";
            
            
            grid-template-rows: minmax(0, 1fr) auto minmax(2.85rem, auto);
            
            --cs-rgap: clamp(4px, 0.8vh, 8px);
            height: calc(2.9rem + 3 * var(--cs-sw) + 2 * var(--cs-gap) + 2.85rem + 2 * var(--cs-rgap));
            grid-row-gap: var(--cs-rgap);
            grid-column-gap: clamp(1rem, 3vw, 2.5rem);
            justify-items: stretch;
        }
        
        .step-fam.cs-two .cs-pickrow,
        .step-shade.cs-two .cs-pickrow {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: "ask" "grid" "name";
            justify-items: center;
        }
        .cs-two .cs-swatches {
            grid-area: grid;
            grid-template-columns: repeat(3, var(--cs-sw));
            --sgap: var(--cs-gap);
            gap: var(--sgap);
            width: var(--cs-w3);
            justify-self: center; align-self: end; min-height: 0;
        }
        .step-fam.cs-two .cs-swatches,
        .step-shade.cs-two .cs-swatches { justify-self: center; }
        .cs-two .cs-shades, .cs-two .cs-four {
            grid-template-columns: repeat(4, var(--cs-sw));
            width: var(--cs-w4);
        }
        .cs-two .cs-name     { grid-area: name; width: var(--cs-w4); padding: 0.4rem 1rem; align-self: center; justify-self: center; }
        
        .cs-two .cs-acts     { grid-area: own; justify-self: end; align-self: end; width: 100%; }
        
        
        .step-shade.cs-two .cs-swatches { grid-column: 1 / -1; justify-self: center; }
        .cs-two .cs-back {
            grid-area: unset;
            position: absolute;
            
            left: calc(var(--frame) + var(--rail-w) * (100% - 2 * var(--frame)) + 2.5rem);
            bottom: calc(var(--frame) * 0.7373);
        }
        
        
        .cs-two .cs-nav      { display: contents; }
        
        .cs-two .cs-opts {
            grid-area: unset;
            position: absolute;
            
            
            left: calc(var(--frame) + var(--rail-w) * (100% - 2 * var(--frame)) + 2.5rem);
            right: calc(var(--frame) + 2.5rem);
            width: max-content;
            margin-inline: auto;
            bottom: calc(var(--frame) * 0.7373);
        }
        
        
        .cs-two .cs-opts, .cs-two .cs-next, .cs-two .cs-back { z-index: 4; }
        
        .cs-two .cs-next {
            position: absolute;
            right: calc(var(--frame) + var(--btn-shadow, 4px));
            bottom: calc(var(--frame) * 0.7373);
            
        }
        
        .cs-two .cs-next     { grid-area: next; justify-self: end; align-self: center;
                               margin-right: var(--btn-shadow, 4px); }
        
        .cs-two .cs-name:not(.on) { display: block; visibility: hidden; height: 0; padding: 0; border: 0; }

        
        .cs-two .cs-sheet {
            
            position: relative;
            
            grid-column: 1 / -1;
            grid-row: 2 / -1;
            
            width: min(100%, 26rem);
            justify-self: center;
            align-self: center;
            inset: auto;
            border-radius: 1.75rem;
        }
        .cs-two.opts-on .cs-ask,
        .cs-two.opts-on .cs-swatches,
        .cs-two.opts-on .cs-name,
        .cs-two.opts-on .cs-acts,
        .cs-two.opts-on .cs-back { visibility: hidden; }
        .cs-two .cs-sheet-x { top: -1.3rem; right: -1.1rem; }
        
        
        .step-cs.opts-on.cs-two .cs-sheet {
            display: grid;
            grid-template-columns: max-content;
            justify-content: center;
            align-content: center;
            gap: clamp(0.9rem, 3vh, 1.8rem);
        }
        .cs-two .cs-opt { justify-content: flex-start; width: 100%; }
    }

    
    @media (min-width: 1024px) {
        .cs-ask-or { display: block; }
    }

    
    @media (min-width: 1024px) {
        
        .cs-two .cs-jump-l { font-size: 17.75px; }
    }

    
    @media (min-width: 1024px) and (max-width: 1200px) {
        .step-sec.cs-two .cs-opts, .step-shade.cs-two .cs-opts, .step-fam.cs-two .cs-opts {
            left: calc(var(--frame) + var(--rail-w) * (100% - 2 * var(--frame)) + 2.5rem + 12rem);
            right: auto;
            margin-inline: 0;
        }
    }

    
    @media (min-width: 1024px) {
        .rail-balloon.tail-centre .rail-balloon-tail { left: 50%; }
        .rail-balloon.tail-right  .rail-balloon-tail { left: 75%; }
    }

    
    @media (min-width: 1024px) and (max-height: 52rem) {
        
        body.has-consent .stage { height: 100vh; height: 100dvh; }
        
        .tool-rail.cs-rail .rail-mascot { transform: translateY(43px); }
        .tool-rail.cs-rail .rail-mascot.rail-off { transform: translateY(43px) translateY(110%); }
        
        .tool-rail.cs-rail .rail-balloon .rail-balloon-tail { left: 75%; }
        
        .rail-easel { height: 56%; }
        .rail-balloon p { font-size: 1.15rem; }
        
        .step-confirm1.cf-intopic .cf-namebox { padding-top: 6px; padding-bottom: 6px; }
        .step-confirm1.cf-intopic .cf-namelabel { margin-top: 0; margin-bottom: 0; }
        .step-confirm1.cf-intopic .cf-band {
            margin-top: 5px; margin-bottom: 0; padding-top: 4px; padding-bottom: 4px;
        }
        .step-confirm1.cf-intopic .cf-casebtn { padding-top: 0.3rem; padding-bottom: 0.3rem; }
        .canvas.step-mode:has(.step-confirm1.cf-intopic) { padding-top: 4px; }
        
        .cs-two .cs-art { padding: clamp(0.5rem, 1.7vh, 1.2rem) clamp(0.625rem, 1.6vw, 1.5rem);
                          max-width: min(100% - 2rem, 38rem); }
        .cs-ask { font-size: clamp(0.7rem, 2.4vh, 0.875rem); }
        .cs-two { grid-template-rows: minmax(0, 1fr) auto; }   
        .cs-two .cs-pickrow { grid-row-gap: clamp(4px, 1vh, 8px);
                              grid-template-rows: 2rem calc(3 * var(--cs-sw) + 2 * var(--cs-gap)) 2.2rem; }
        .cs-two .cs-name { font-size: clamp(0.7rem, 2.6vh, 0.9rem); padding: 0.3rem 0.8rem; }
        
        .cf-namelabel { margin-top: 0.75rem; font-size: 1.3rem; }
        .cf-band, .cf-checks { margin-top: clamp(0.75rem, 2.2vh, 1.5rem); }
        .cf-bandhead { font-size: 1.5rem; margin-bottom: 0.75rem; }
        .cf-sub { font-size: 0.95rem; }
    }

    
    @media (max-width: 767px) {
        .rec-row, .canvas { scrollbar-width: none; -ms-overflow-style: none; }
        .rec-row::-webkit-scrollbar, .canvas::-webkit-scrollbar { display: none; }
    }



    
    @media (max-width: 767px) and (max-height: 700px) {
        
        
        :root {
            --intro-title: 1.4rem;
            --pill-air: 0.38rem;   
            --pill-h: calc(var(--pill-air) * 2 + 6px + var(--intro-title) * var(--pill-cap));
        }
        .intro-balloon { padding: 0.5rem 1.25rem 1rem; }   
        .intro-btn {
            width: 2.5rem;
            height: 2.5rem;
            top: 0.4rem;   
        }
        .intro-btn .glyph svg {
            width: 1.1rem;
            height: 1.1rem;
        }
        .intro-balloon .intro-p {
            font-size: 1rem;
            line-height: 1.3;
        }
        .intro-hero {
            bottom: auto;
            top: calc(100% - 33vh);   
            top: calc(100% - 33dvh);  
        }
        
        .tool > div.frame-left,
        .tool > div.frame-right { z-index: 4; }
        
        .canvas { padding-top: calc(var(--pill-h) + 0.5rem); }
        .step-nav { bottom: 1.75rem; }
        .btn {
            font-size: 1.15rem;
            padding: 0.625rem 1rem;
        }
        
        .fld span {
            font-size: 1.1rem;
            line-height: 1.35;
        }
        .fld input[type="text"],
        .fld textarea {
            font-size: 1.1rem;
            padding: 0.625rem 1rem;
        }
        
        .fld-desc textarea { height: 5.625rem; }
        .fld-wide { gap: 0.5rem; }
        .canvas { row-gap: 0.75rem; }
        .chk {
            font-size: 0.8rem;
            gap: 0.75rem;
        }
        .chk .box {
            width: 2.5rem;
            height: 2.5rem;
        }
        .chk input:checked + .box::after { font-size: 1.6rem; }
        .chk .chk-text {
            margin-left: 0;
            line-height: 1.4;
        }
        
        .gheading { font-size: 1.2rem; }
        .gtxt { font-size: 1.3rem; }
        .gline {
            padding: 0.5rem 0.75rem;
            min-height: 2.75rem;
        }
    }
    
    .vibe-pill { display: none; }   
    .scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.3s ease; }
    body.mash-on .scrim { background: rgba(0,0,0,0.6); pointer-events: auto; }
    .mash-bubble {
        position: fixed; bottom: 48vh; left: 0; right: 0; margin: 0 auto; z-index: 91;
        width: min(31rem, 90vw); pointer-events: none;
        background: #FFADAD; border: 6px solid #B20000; border-radius: 28px;
        padding: 1.5rem 1.7rem; box-shadow: 6px 6px 0 rgba(0,0,0,0.22);
        opacity: 0; transition: opacity 0.28s ease;
    }
    body.mash-on .mash-bubble { opacity: 1; transition-delay: 0.2s; }
    .mash-bubble p { margin: 0; text-align: center; font-weight: 800; color: #15243a; font-size: clamp(1.5rem, 1rem + 2.6vw, 2.2rem); line-height: 1.22; }
    .mash-hero {
        position: fixed; left: 50%; bottom: 0; width: auto; height: 48vh; z-index: 90;
        transform: translate(-50%, 110%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
        filter: drop-shadow(0 -3px 12px rgba(0,0,0,0.22)); pointer-events: none;
    }
    body.mash-on .mash-hero { transform: translate(-50%, 0); }
    .mash-x {
        position: absolute; top: -1rem; right: -0.7rem; width: 3rem; height: 3rem; border-radius: 50%;
        background: #FF9999; color: #B20000; border: 3px solid #B20000;
        font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; cursor: pointer;
        box-shadow: 3px 3px 0 rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; padding: 0 0 0.15rem;
        pointer-events: none;
    }
    body.mash-on .mash-x { pointer-events: auto; }
    .mash-x:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
    @media (min-width: 768px) {
        .mash-bubble {
            position: absolute; left: 7.5%; right: auto; top: 50%; bottom: auto; z-index: 92;
            width: 85%; height: 64%; overflow: visible; display: flex; align-items: center;
            transform: translateY(-50%) scale(0.9); transform-origin: center;
        }
        body.mash-on .mash-bubble { transform: translateY(-50%) scale(1); }
        .mash-bubble p { width: 40%; margin: 0; font-size: 1.6rem; line-height: 1.22; }
        .mash-hero {
            position: absolute; left: 50%; width: 40%; height: auto; bottom: 0; top: auto;
            transform: none; opacity: 0; transition: opacity 0.3s ease;
        }
        body.mash-on .mash-hero { opacity: 1; transform: none; }
    }

    
    
    .canvas.terms-mode { padding: 0; overflow: visible; }
    .terms-step { position: relative; height: 100%; overflow: visible; }
    .judge-scene { position: absolute; inset: 0; overflow: visible; z-index: 0; pointer-events: none; }
    
    
    .judge-bench { position: absolute; left: 50%; bottom: calc(-0.34 * var(--frame)); width: 119%; aspect-ratio: 1616 / 1409;
        object-fit: cover; object-position: top center; z-index: 2;
        transform: translate(-50%, 110%); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
    
    .judge-hero { position: absolute; left: 50%; top: 1%; bottom: auto; width: 68%; height: auto; z-index: 1;
        transform: translate(-50%, 150%); transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.3, 1);
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
    .terms-step.go .judge-bench { transform: translate(-50%, 0); }
    .terms-step.go .judge-hero { transform: translate(-50%, 0); }
    
    .terms-body { position: absolute; left: 0; right: 0; bottom: 5.5rem; z-index: 3; padding: 0 1.1rem;
        opacity: 0; transition: opacity 0.4s ease 0.6s; }
    .terms-step.go .terms-body { opacity: 1; }
    
    .terms-step .step-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 1rem 0.85rem;
        opacity: 0; transition: opacity 0.4s ease 0.6s; }
    .terms-step.go .step-nav { opacity: 1; }
    
    .terms-step .chk-text, .terms-step .chk-text a { color: #fff; }
    .terms-step .chk-text { line-height: 1.2; }
    
    .tool:has(> .canvas.terms-mode) > div.frame-bl,
    .tool:has(> .canvas.terms-mode) > div.frame-bottom,
    .tool:has(> .canvas.terms-mode) > div.frame-br { z-index: 2; }

    
    .hs-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
        padding: 4rem 1.5rem 1.5rem; background: rgba(0, 0, 0, 0.6); animation: hsModalIn 0.16s ease; }
    .hs-modal-card { width: 100%; max-width: 26rem; padding: 0.5rem 1.5rem 1.6rem; text-align: center;
        background: #fff; border: 3px solid #000; border-radius: 22px 16px 24px 14px / 14px 24px 16px 22px;
        box-shadow: 8px 8px 0 #000; }
    .hs-modal-hero { display: block; width: clamp(7rem, 30vw, 9rem); height: auto; margin: -3.25rem auto 0.4rem;
        pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
    .hs-modal-title { margin: 0 0 0.5rem; font-family: "Bangers", cursive; font-weight: 400;
        font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: 1px; text-transform: uppercase; color: #d12b2b; }
    .hs-modal-body { margin: 0 0 1.2rem; font-family: "Archivo", sans-serif; font-weight: 600;
        font-size: 1.05rem; line-height: 1.4; color: #15243a; }
    .hs-modal-ok { align-self: center; }
    @keyframes hsModalIn { from { opacity: 0; } to { opacity: 1; } }


.step-clock { display: flex; flex-direction: column; height: 100%; }
.canvas.step-mode .step-clock { padding-bottom: clamp(5rem, 14vh, 7rem); }
.clock-help { margin: 0.9375rem 0 0; text-align: center; font-weight: 800; color: #15243a;
    font-size: clamp(1.05rem, 4.8vw, 1.35rem); }
.clock-content { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.clock-pair { display: flex; gap: clamp(0.9rem, 4vw, 1.6rem); }
.clock-chip { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.clock-swatch { width: clamp(5.5rem, 24vw, 8rem); height: clamp(5.5rem, 24vw, 8rem);
    border: 3px solid #000; border-radius: 0.9rem; box-shadow: 4px 4px 0 #000; }
.clock-name { font-weight: 800; color: #15243a; font-size: 0.95rem; text-align: center; max-width: 9rem; }

.cc-cluster { position: relative; width: min(100%, 27rem); margin: 0 auto; }
.cc-cluster--four  { aspect-ratio: 931 / 834; }   
.cc-cluster--three { aspect-ratio: 931 / 782; }   
.cc-cluster--mono  { aspect-ratio: 665 / 768; width: min(100%, 23rem); }  
.cc-cluster .cc-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cc-fill { position: absolute; z-index: 1; }




.cc-cluster--four  .cc-fill--primary   { left: 47%; top: 48.12%; width: 33.9%; height: 40.5%;
    border-radius: 50% 50% 0 0 / 11.84% 11.84% 0 0; }   
.cc-cluster--four  .cc-fill--secondary { left: 16.5%; top: 36.5%; width: 25.9%; height: 35.5%;
    border-radius: 50% 50% 0 0 / 10.54% 10.54% 0 0; }   
.cc-cluster--three .cc-fill--primary   { left: 33.95%; top: 44.85%; width: 30.9%; height: 40.5%;
    border-radius: 50% 50% 0 0 / 12.58% 12.58% 0 0; }   
.cc-label { position: absolute; z-index: 3; background: #fff; color: #15243a; font-weight: 800;
    font-size: clamp(0.8rem, 3.4vw, 1.05rem); line-height: 1.1; text-align: center;
    padding: 0.35em 0.7em; border: 3px solid #0b1a2e; border-radius: 0.7rem;
    box-shadow: 3px 3px 0 #0b1a2e; max-width: 44%; }


.cc-cluster--four  .cc-label--primary   { left: 64%; top: 84%; transform: translateX(-50%); z-index: 4; }
.cc-cluster--four  .cc-label--secondary { left: 29%; top: 72%; transform: translateX(-50%); z-index: 3; }
.cc-cluster--three .cc-label--primary   { left: 50%; top: 80%; transform: translateX(-50%); }
.clock-final { margin: 0.5rem 0 0.1rem; text-align: center; font-weight: 800; color: #15243a;
    font-size: clamp(1rem, 4.4vw, 1.3rem); }
.clock-final .final-red { color: #e01b2e; }
.step-ethos { display: flex; flex-direction: column; height: 100%; }
.canvas.step-mode .step-ethos { padding-bottom: clamp(5rem, 14vh, 7rem); }
.ethos-box { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1.2rem; text-align: center; padding: 0 1rem; }
.ethos-line { margin: 0; font-weight: 800; color: #15243a; font-size: clamp(1.05rem, 4.6vw, 1.3rem);
    opacity: 0; transition: opacity 0.9s ease; min-height: 3.1rem; }
.ethos-line.on { opacity: 1; }

.ethos-clock { position: relative; width: 7.5rem; height: 7.5rem; display: flex; align-items: center; justify-content: center; }
.ethos-donut { position: absolute; inset: 0; border-radius: 50%; --left: 1;
    background: conic-gradient(#0000ff calc(var(--left) * 1turn), #d7deea 0);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 0.6rem), #000 calc(100% - 0.6rem + 1px));
    mask: radial-gradient(closest-side, transparent calc(100% - 0.6rem), #000 calc(100% - 0.6rem + 1px)); }
.ethos-count { font-family: "Bangers", cursive; font-size: 2.6rem; color: #15243a; }
.ethos-sub { margin: 0; min-height: 2.5rem; }

.ethos-stage { display: flex; flex-direction: column; align-items: center; }
.ethos-balloon { position: relative; background: #fff; border: 3px solid #000; border-radius: 1.1rem;
    box-shadow: 4px 4px 0 #000; padding: 0.9rem 1.1rem 1rem; max-width: 23rem; margin-bottom: 1rem; }
.ethos-balloon::before { content: ""; position: absolute; left: 50%; margin-left: -0.85rem; bottom: -0.95rem;
    border-left: 0.85rem solid transparent; border-right: 0.85rem solid transparent; border-top: 0.95rem solid #000; }
.ethos-balloon::after { content: ""; position: absolute; left: 50%; margin-left: -0.55rem; bottom: -0.52rem;
    border-left: 0.55rem solid transparent; border-right: 0.55rem solid transparent; border-top: 0.58rem solid #fff; }
.ethos-lead { font-weight: 800; color: #41506b; font-size: clamp(0.85rem, 3.6vw, 1rem); margin-bottom: 0.4rem; }
.ethos-mascot { font-size: clamp(3.4rem, 16vw, 4.6rem); line-height: 1; }


.step-pn { display: flex; flex-direction: column; height: 100%;
    touch-action: pan-y; }   

.canvas.step-mode:has(.step-pn), .canvas.step-mode:has(.step-reveal2),
.canvas.step-mode:has(.step-freepick), .canvas.step-mode:has(.step-freeconfirm) { grid-template-rows: minmax(0, 1fr); }
.canvas.step-mode .step-pn { padding-bottom: clamp(5rem, 14vh, 7rem); height: 100%; min-height: 0; }
.pn-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pn-copy { margin: 0; font-weight: 800; color: #15243a; line-height: 1.35; white-space: pre-line; }

.pn-rest { color: transparent; }

.pn-copy.pn-typing .pn-seen::after { content: "\258C"; display: inline-block; width: 0; overflow: visible;
    color: #15243a; animation: pnBlink 0.7s step-end infinite; }
@keyframes pnBlink { 50% { opacity: 0; } }


.canvas.step-mode .step-pn { margin-top: -0.5rem; }

.pn-helper { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    font-weight: 800; color: #15243a; font-size: 0.8rem; line-height: 1.3;
    text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }



.canvas.step-mode .step-pn--note { padding-bottom: 0.25rem; }
.pn-box--note { align-items: center; justify-content: flex-start; text-align: center; gap: 0.5rem; padding: 0.1rem 0.6rem 0; overflow: hidden; }
.pn-box--note .pn-copy { margin-top: 0; font-size: clamp(1.15rem, 5vw, 1.5rem); min-height: 6.2rem; }
.pn-hero { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.pn-hero-img { max-height: 100%; max-width: 82%; width: auto; height: auto; object-fit: contain;
    opacity: 0; transition: opacity var(--pn-fade, 600ms) ease; }
.pn-hero-img.on { opacity: 1; }

.pn-box--note .pn-hero { position: relative; }
.pn-box--note .pn-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 90%; }   


.pn-box--counts { align-items: stretch; justify-content: space-evenly; gap: 0.45rem; padding: 0.1rem 0.4rem 0; overflow-y: auto; }
.pn-block { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.pn-box--counts .pn-copy { text-align: center; font-size: clamp(1rem, 4.4vw, 1.28rem); min-height: 1.4em; }

.pn-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; width: 100%; padding-left: 0.4rem; }
.pn-icon { flex: 0 0 auto; width: clamp(46px, 15vw, 64px); display: flex; align-items: center; justify-content: center; }
.pn-icon-img { max-width: 100%; height: auto; opacity: 0; transition: opacity var(--pn-ic, 400ms) ease; }
.pn-icon-img.on { opacity: 1; }

.pn-nums { flex: 1 1 auto; min-width: 0; max-width: 15rem; display: grid;
    grid-template-columns: repeat(6, 1fr); gap: 0.2rem 0.24rem; }
.pn-num { width: 100%; height: auto; opacity: 0; transition: opacity var(--pn-nf, 260ms) ease; }
.pn-num.on { opacity: 1; }


.pn-box--free { align-items: center; justify-content: flex-start; text-align: center;
    gap: 0.55rem; padding: 0.1rem 0.6rem 0; overflow-y: auto; }   

.canvas.step-mode .step-pn--free { padding-bottom: clamp(5.25rem, 14.5vh, 8rem); }   
.pn-freehead { display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    width: 100%; opacity: 0; transition: opacity var(--pn-ic, 450ms) ease; }
.pn-freehead.on { opacity: 1; }
.pn-freeicon { flex: 0 0 auto; width: clamp(52px, 17vw, 84px); height: auto; }
.pn-title { margin: 0; font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
    color: #15243a; font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1;
    white-space: nowrap; }   
.pn-box--free .pn-copy { font-size: clamp(1.02rem, 4.5vw, 1.3rem); }

.pn-box--free .pn-hero { min-height: 5.5rem; }


.pn-fadeout { opacity: 0 !important; transition: opacity 400ms ease; }
.pn-box--paid { gap: 0.45rem; }
.pn-box--paid .pn-hero { min-height: 4.5rem; }


.canvas.step-mode .step-pn--uses { padding-bottom: 0.25rem; }
.pn-box--uses { gap: 0.5rem; overflow: hidden; }   

.pn-box--uses .pn-hero { min-height: 7rem; align-items: flex-end; }
.pn-uses-img { max-width: 100%; }   

.canvas.pn-bleed { overflow: visible; }
.canvas.pn-bleed .step-pn--uses, .canvas.pn-bleed .pn-box--uses,
.canvas.pn-bleed .pn-box--uses .pn-hero { overflow: visible; }

.canvas.pn-bleed .pn-box--uses .pn-hero { position: relative; }
.canvas.pn-bleed .pn-uses-img { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    max-width: 130vw; max-height: none; width: auto; height: 100%; }   
.tool:has(.canvas.pn-bleed) .frame-bl,
.tool:has(.canvas.pn-bleed) .frame-bottom,
.tool:has(.canvas.pn-bleed) .frame-br { position: relative; }   


.pn-box--std { align-items: stretch; justify-content: flex-start; gap: 0.55rem;
    padding: 0.1rem 0.6rem 0; overflow-y: auto; }
.canvas.step-mode .step-pn--std { padding-bottom: clamp(4.2rem, 10vh, 5.5rem); }
.pn-box--std .pn-copy { line-height: 1.28; }
.pn-box--std .pn-intro { text-align: center; font-size: clamp(1rem, 4.4vw, 1.3rem); }
.pn-brow { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding-left: 0.4rem; }
.pn-bicon { flex: 0 0 auto; width: clamp(46px, 13vw, 64px); display: flex;
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--pn-ic, 400ms) ease; }
.pn-bicon.on { opacity: 1; }
.pn-bicon img, .pn-bicon svg { max-width: 100%; height: auto; display: block; }
.pn-brow .pn-copy { flex: 1 1 auto; min-width: 0; text-align: left;
    font-size: clamp(0.95rem, 4.1vw, 1.2rem); }

.pn-val { color: #0a8f2f; font-weight: 800; font-style: italic; white-space: nowrap;
    opacity: 0; transition: opacity 300ms ease; }
.pn-val.on { opacity: 1; }
.pn-fav { color: #1e5fd0; }

.pn-box--std.pn-tight { gap: 0.4rem; }
.pn-box--std.pn-tight .pn-intro { font-size: clamp(0.95rem, 4vw, 1.15rem); }
.pn-box--std.pn-tight .pn-brow .pn-copy { font-size: clamp(0.88rem, 3.8vw, 1.05rem); line-height: 1.24; }
.pn-box--std.pn-tight .pn-bicon { width: clamp(38px, 10.5vw, 54px); }
.pn-box--std.pn-tight .pn-brow { gap: 0.6rem; }
.pn-box--std.pn-tight .pn-freeicon { width: clamp(40px, 12vw, 56px); }
.pn-box--std.pn-tight .pn-title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
.pn-box--std.pn-tighter { gap: 0.28rem; }
.pn-box--std.pn-tighter .pn-brow .pn-copy { font-size: clamp(0.8rem, 3.4vw, 0.95rem); line-height: 1.18; }
.pn-box--std.pn-tighter .pn-bicon { width: clamp(32px, 9vw, 44px); }
.pn-box--std.pn-tighter .pn-brow { gap: 0.5rem; }
.pn-box--std.pn-tighter .pn-freeicon { width: clamp(32px, 9.5vw, 46px); }
.pn-box--std.pn-tighter .pn-title { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
.pn-box--std.pn-tighter .pn-intro { font-size: clamp(0.88rem, 3.7vw, 1.05rem); }
.pn-box--std.pn-tightest { gap: 0.18rem; }
.pn-box--std.pn-tightest .pn-brow .pn-copy { font-size: clamp(0.74rem, 3.1vw, 0.88rem); line-height: 1.14; }
.pn-box--std.pn-tightest .pn-bicon { width: clamp(26px, 7.5vw, 38px); }
.pn-box--std.pn-tightest .pn-freeicon { width: clamp(28px, 8vw, 40px); }
.pn-box--std.pn-tightest .pn-title { font-size: clamp(1.15rem, 4.8vw, 1.5rem); }
.pn-box--std.pn-tightest .pn-intro { font-size: clamp(0.82rem, 3.4vw, 0.98rem); }

@media (min-width: 768px) {
    .pn-box--std { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.6rem;
        align-items: start; max-width: 54rem; width: 100%; margin: 0 auto; }
    .pn-box--std > .pn-freehead { grid-column: 1 / -1; }
    .pn-box--std > .pn-intro { grid-column: 1 / -1; }
    .pn-box--std > .pn-brow:last-of-type { grid-column: 1 / -1; justify-self: center; width: auto; }
    .pn-bicon { width: clamp(44px, 6vw, 64px); }
}

@media (min-width: 1024px) {
    .pn-box--std.pn-box--six { grid-template-columns: repeat(3, 1fr); max-width: 64rem; }
    .pn-box--std.pn-box--six > .pn-freehead, .pn-box--std.pn-box--six > .pn-intro { grid-column: 1 / -1; }
    .pn-box--std.pn-box--six > .pn-brow:last-of-type { grid-column: auto; justify-self: stretch; width: 100%; }
}
@media (max-height: 800px) {   
    
    .pn-box--free { gap: 0.3rem; }
    .pn-box--free .pn-copy { font-size: clamp(0.95rem, 4.1vw, 1.15rem); line-height: 1.24; }
    .pn-box--free .pn-title { font-size: clamp(1.5rem, 6.8vw, 2rem); }
    .pn-box--free .pn-freeicon { width: clamp(40px, 12.5vw, 56px); }
    .pn-box--free .pn-hero { min-height: 3.5rem; }
    .pn-box--paid .pn-hero { min-height: 3.5rem; }
    .pn-box--counts { gap: 0.3rem; }
    .pn-box--counts .pn-copy { font-size: clamp(0.92rem, 4vw, 1.15rem); }
    .pn-block { gap: 0.25rem; }
    .pn-nums { max-width: 11.5rem; }
    .pn-icon { width: clamp(36px, 11vw, 48px); }
}

@media (min-width: 768px) {
    
    .canvas.step-mode .step-pn:not(.step-pn--uses) { padding-bottom: 4.5rem; }
    .pn-box--free:not(.pn-box--paid):not(.pn-box--uses) {
        display: grid; grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        align-items: center; justify-items: center; gap: 0.6rem 0.9rem; }
    .pn-box--free:not(.pn-box--paid):not(.pn-box--uses) > .pn-freehead { grid-row: 1; grid-column: 1 / -1; }
    .pn-box--free:not(.pn-box--paid):not(.pn-box--uses) > p.pn-copy:first-of-type { grid-row: 2; grid-column: 1 / -1; }
    .pn-box--free:not(.pn-box--paid):not(.pn-box--uses) > .pn-hero { grid-row: 3; grid-column: 1; min-height: 0; height: 100%; width: 100%; }
    .pn-box--free:not(.pn-box--paid):not(.pn-box--uses) > p.pn-copy:last-of-type { grid-row: 3; grid-column: 2;
        align-self: center; min-height: 0; max-height: 100%; overflow-y: auto; }   
    .pn-box--paid {
        display: grid; grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        align-items: center; justify-items: center; gap: 0.6rem 0.9rem; }
    .pn-box--paid > .pn-freehead { grid-row: 1; grid-column: 1 / -1; }
    .pn-box--paid > p.pn-copy { grid-row: 2; grid-column: 1 / -1; }
    .pn-box--paid > .pn-hero { grid-row: 3; min-height: 0; height: 100%; width: 100%; }
    
    .pn-box--free .pn-copy { font-size: 1.05rem; line-height: 1.3; }
    .pn-box--counts { gap: 0.35rem; }
    .pn-box--counts .pn-copy { font-size: 1rem; min-height: 1.3em; }
    .pn-nums { max-width: 10rem; }
    .pn-icon { width: 40px; }
    
    .pn-box--counts .pn-block { flex-direction: row; align-items: center; gap: 0.6rem; }
    .pn-box--counts .pn-block .pn-copy { text-align: left; flex: 1 1 auto; min-width: 0; }
    .pn-box--counts .pn-row { flex: 0 0 auto; width: auto; padding-left: 0; }
    .pn-box--counts .pn-nums { max-width: 8.5rem; }
    .pn-box--counts { padding-top: 0; gap: 0.2rem; }   
    .pn-box--uses { gap: 0.35rem; }   
}


.pn-next { opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity var(--pn-next, 450ms) ease, transform var(--pn-next, 450ms) ease; }
.pn-next.on { opacity: 1; transform: none; pointer-events: auto; }



.rv-zoombtn { display: flex; position: absolute; right: -0.35rem; top: -1.2rem; z-index: 4; }


.rv-cta-up-one { display: none; }           


@media (min-width: 1024px) {
    .stage:has(.step-reveal2) .rail-mascot { width: 59.6%; margin-inline: auto; }
}


@media (max-width: 767px) {
    .rv-change { right: auto; left: -0.35rem; }
    .rv-cta-free { font-size: clamp(0.95rem, 4.2vw, 1.2rem); padding: 0.4rem 0.7rem 0.4rem 2.2rem; }
    .rv-cta-up  { padding: 0.45rem 0.7rem 0.5rem 2.2rem; gap: 0.1rem; }
    .rv-cta-up-t { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
    .rv-cta-up-l { font-size: clamp(0.72rem, 3.1vw, 0.88rem); line-height: 1.3; }
    .rv-cta-cup { width: 2.1rem; height: 2.1rem; left: -0.45rem; }
    .rv-cta-up .rv-cta-cup { top: 1.1rem; }
    .rv-ctas { width: 82%; gap: 0.4rem; }
    
    .rv-cta-up-many { display: none; }
    .rv-cta-up-one  { display: block; }
}
@media (min-width: 1024px) {
    
    .canvas.step-mode:has(.step-reveal2) { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    
    .tool.rv-active .rv-hero { display: none; }
    
    .rv-frame { width: min(100cqw - 8.5rem, 96cqh); }
    
    .rv-change { right: auto; left: -0.35rem; bottom: -1.2rem; }
    
    .rv-ctas { width: 100%; margin: 0.9rem 0 0; flex-direction: row; align-items: stretch;
               justify-content: center; gap: 1.25rem; }
    .rv-cta-free { flex: 0 1 15rem; min-width: 0; border-radius: 1rem; box-shadow: 4px 4px 0 #000;
                   display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.8rem 0.6rem 1.6rem; }
    .rv-cta-free .rv-cta-cup { top: 1.35rem; }   
    .rv-cta-up   { flex: 0 1 auto; max-width: 50%; }
    
    .rv-upsell .rv-mascotzone { display: block !important; }
    .rv-upsell .rv-cta-free, .rv-upsell .rv-zoombtn { display: none; }
}



.canvas.step-mode:has(.step-pay) { grid-template-rows: minmax(0, 1fr); }
.step-pay { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0;
    
    overflow-x: hidden;
    
    padding-left: 2.5%; padding-right: 2.5%; }

.step-pay > * { flex: 0 0 auto; }
.canvas.step-mode:has(.step-pay) { padding-bottom: max(var(--band, 0px), 5.5rem); }

.pay-btn-narrow { display: none; }
@media (max-width: 767px) {
    .pay-btn-wide { display: none; }
    .pay-btn-narrow { display: inline; }
}

@media (min-width: 1024px) {
    
    .canvas.step-mode:has(.step-pay) { padding-left: 2.5rem; padding-right: 2.5rem; }
    .tool:has(.step-pay) .step-nav { left: calc(var(--frame) + 2.5rem); }
    .tool:has(.step-pay) .tool-rail { display: none; }
}


@media (min-width: 768px) {
    
    .canvas.step-mode:has(.step-freepick) { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .step-freepick.fp-wide {
        display: flex; flex-direction: column; height: 100%; min-height: 0;
        gap: clamp(0.6rem, 2vh, 1.4rem);
    }
    
    .fp-topbar { position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
    .fp-wide .fp-title { margin: 0; font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.5rem, 3vw, 2.4rem); color: #15243a; line-height: 1; }
    .fp-back { position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; height: fit-content; }   
    
    
    .fp-mid { flex: 1 1 auto; min-height: 0; container-type: size;
        display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); }
    
    .fp-wide .fp-title { visibility: hidden; }
    
    .fp-cardwrap { position: relative; flex: none; width: min(46cqw, 100cqh); aspect-ratio: 1 / 1; }
    .fp-cardwrap .fp-card { width: 100%; height: 100%; }
    .fp-zoom { position: absolute; right: -0.35rem; top: -1.2rem; z-index: 4; }
    .fp-change { position: absolute; left: -0.35rem; bottom: -1.2rem; z-index: 4; }
    .fp-card { flex: none; width: min(46cqw, 100cqh); aspect-ratio: 1 / 1;
        background: #fff; border: 3px solid #15243a; box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
        display: grid; place-items: center; overflow: hidden; }
    .fp-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .fp-mailto { flex: 0 1 auto; min-width: 0; text-align: center; }
    .fp-mailto-lead { margin: 0; font-weight: 700; color: #15243a; line-height: 1.35;
        font-size: clamp(0.95rem, 1.5vw, 1.35rem); }
    .fp-mailto-addr { margin: 1.1em 0 0; font-weight: 800; color: #15243a; overflow-wrap: anywhere;
        font-size: clamp(0.95rem, 1.5vw, 1.35rem); }
    
    .fp-tiers { flex: none; display: grid; grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, 3vw, 2.5rem); align-items: end; }
    .fp-tier { display: flex; flex-direction: column; align-items: center; text-align: center;
        gap: clamp(0.4rem, 1.4vh, 0.9rem); }
    .fp-tier-h { margin: 0; font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
        font-size: clamp(1.3rem, 2.4vw, 2rem); color: #15243a; line-height: 1; }
    .fp-tier-lines { display: flex; flex-direction: column; }
    .fp-tier-lines span { font-weight: 700; color: #15243a; line-height: 1.4;
        font-size: clamp(0.9rem, 1.35vw, 1.2rem); }
    
    .fp-tier .btn { min-width: min(100%, 14rem); align-self: center; }
    .fp-wide .fp-msg { flex: none; margin: 0; text-align: center; font-weight: 700; color: #15243a; }
    
    .fp-wide .fp-paid-confirm { display: inline-flex; margin-top: 1.4em; min-width: 14rem; }
    
    .fp-wide .fp-sub, .fp-wide .fp-confirm, .fp-wide .fp-hero, .fp-wide .fp-late { display: none; }
}

@media (min-width: 768px) and (max-height: 60rem) {
    .step-freepick.fp-wide { gap: 0.5rem; }
    .fp-wide .fp-title { font-size: 1.5rem; }
    .fp-tier { gap: 0.3rem; }
    .fp-tier-h { font-size: 1.25rem; }
    .fp-tier-lines span { font-size: 0.92rem; line-height: 1.25; }
    .fp-tier .btn { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 1rem; }
    .fp-mailto-lead, .fp-mailto-addr { font-size: 1rem; }
    .fp-mailto-addr { margin-top: 0.6em; }
}


.step-store { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.store-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    gap: clamp(0.7rem, 2.4vh, 1.4rem); justify-content: center; align-items: center; overflow-y: auto; }
.store-card { position: relative; width: min(100%, 30rem); flex: 0 1 auto; text-align: left;
    border: 4px solid #000; border-radius: 1.1rem; box-shadow: 6px 6px 0 #000; cursor: pointer;
    padding: 0; background: #fff center/cover no-repeat; overflow: hidden;
    transition: transform 0.08s ease, box-shadow 0.08s ease; }
.store-card:hover  { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #000; }
.store-card:active { transform: translate(6px, 6px); box-shadow: 0 0 0 #000; }
.store-body { background: rgba(255, 255, 255, 0.88); padding: clamp(0.7rem, 2.2vh, 1.2rem) 1rem; }
.store-name { font-family: "Bangers", cursive; font-weight: 400; letter-spacing: 0.03em;
    font-size: clamp(1.4rem, 5vw, 2rem); color: #15243a; line-height: 1; }
.store-lines { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.5rem 0 0.8rem; }
.store-lines span { font-weight: 700; font-size: clamp(0.85rem, 3.4vw, 1rem); color: #15243a; line-height: 1.3; }
.store-go { display: inline-block; background: #ffff00; color: #15243a; border: 3px solid #000;
    box-shadow: 3px 3px 0 #000; border-radius: 0.7rem; padding: 0.45rem 0.9rem;
    font-weight: 800; font-size: clamp(0.9rem, 3.6vw, 1.1rem); }


@media (min-width: 768px) and (max-width: 1023px) {
    
    .stage:has(.step-reveal2) .g-balloon { display: none; }
    .tool.rv-active .rv-hero { display: none; }
}


@media (min-width: 1024px) {
    
    .tool:has(.step-pn) .tool-rail,
    .tool:has(.step-store) .tool-rail { justify-content: flex-start; }
}

.stage:has(.step-pn) .g-mascot-col,
.stage:has(.step-pn) .g-balloon { display: none; }


@media (max-width: 767px) {
    .pn-box .pn-freehead { margin-bottom: 12px; }
    .pn-box--std { gap: 0.85rem; }                 
    .pn-box--std .pn-intro { margin-bottom: 0.2rem; }
    .pn-box--counts { gap: 0.9rem; }               
    .pn-block { gap: 0.55rem; }                    
    .pn-box--free { gap: 0.7rem; }                 
}
@media (min-width: 768px) {
    
    .pn-box .pn-freehead { margin-bottom: 1rem; }
    
    
    .pn-box--std { gap: clamp(0.9rem, 2.6vh, 1.7rem) 2rem; --pn-colgap: 2rem; }
    .pn-box--std.pn-tight    { --pn-colgap: 0.4rem; }
    .pn-box--std.pn-tighter  { --pn-colgap: 0.28rem; }
    .pn-box--std.pn-tightest { --pn-colgap: 0.18rem; }
    .pn-box--std > .pn-brow:last-of-type { width: calc(50% - var(--pn-colgap) / 2); }
    
    .pn-box--std.pn-box--six > .pn-brow:last-of-type { grid-column: auto; justify-self: stretch; width: 100%; }
}

@media (min-width: 1024px) {
    .pn-box--counts { justify-content: space-evenly; gap: 1.2rem; }
    .pn-box--counts .pn-block { justify-content: center; gap: 2.2rem; }
    .pn-box--counts .pn-block .pn-copy { flex: 0 1 26rem; font-size: clamp(1.25rem, 1.55vw, 1.6rem); line-height: 1.35; min-height: 1.35em; }
    .pn-box--counts .pn-row { gap: 1rem; }
    .pn-box--counts .pn-icon { width: clamp(64px, 5.5vw, 84px); }
    .pn-box--counts .pn-nums { max-width: clamp(13rem, 15vw, 16rem); gap: 0.28rem 0.32rem; }
}



@media (min-width: 1024px) {
    .cs-two .cs-own {
        width: 100%;
        flex-direction: row;
        gap: 0.6rem;
        padding: clamp(0.5rem, 1.4vh, 1rem) clamp(0.6rem, 1.2vw, 1.1rem);
    }
    .cs-two .cs-own-img { height: clamp(46px, 9vh, 96px); }
    .cs-two .cs-own-tx  { font-size: clamp(0.95rem, 1.25vw, 1.35rem); }
    
    .cs-two .cs-ask-or { font-size: clamp(0.9rem, 1.1vw, 1.2rem); }
}


@media (max-width: 1023px) {
    .cs-own { padding: 0.4rem 0.7rem; gap: 0.45rem; }
    .cs-own-img { height: clamp(28px, 5.5vw, 40px); }
}


.cs-own-tx { white-space: normal; min-width: 0; }
.cs-own { overflow: hidden; }


.cs-own-tx { text-align: center; }


@media (max-width: 767px) {
    
    .cs-own { min-height: 84px; padding: 0.45rem 0.9rem; gap: 0.7rem; }
    .cs-own-img { height: 70px; }
    .cs-own-tx { font-size: 1.1rem; line-height: 1.2; max-width: 6.2em; }
}


@media (max-width: 1023px) {
    .cs-name { display: block; visibility: hidden; }
    .cs-name.on { visibility: visible; }
    .cs-name:empty::before { content: "\00a0"; }
}
@media (max-width: 767px) {
    .step-cs .cs-art { box-sizing: border-box; max-height: 82px; }
}


@media (min-width: 768px) and (max-width: 1023px) { .step-cs { row-gap: 13px; } }
@media (max-width: 767px)                         { .step-cs { row-gap: 8px; } }


@media (max-width: 767px) {
    .step-shade .cs-shades, .step-sec2 .cs-shades { width: 100%; --sgap: clamp(0.45rem, 2.6vw, 0.9rem); gap: var(--sgap); }
}


@media (max-width: 767px) {
    
    .cf-namebox { padding-top: 0.9rem; padding-bottom: 2.3rem; min-height: 5rem; }
    
    .cf-rows { row-gap: 0.9rem; }
}


@media (min-width: 768px) and (max-width: 1023px) {
    
    .cf-rows { row-gap: 0.9rem; }

    
    
    
    .step-cs .cs-art { margin-bottom: 1.1rem; }
    .step-fam .cs-art, .step-shade .cs-art { margin-bottom: 0.4rem; }   
    
    .step-cs { --csw: 64px; }
    .step-cs .cs-swatches { width: auto; max-width: 100%; gap: 0.8rem;
                            grid-template-columns: none; grid-auto-flow: column;
                            grid-auto-columns: var(--csw);
                            justify-content: center; justify-items: center; }
    .step-cs .cs-swatches .cs-cell { width: var(--csw); }
    .step-cs .cs-swatches .cs-sw   { width: var(--csw); height: var(--csw); }

    
    .step-cs .cs-fams {
        grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, var(--csw));
        width: auto; max-width: 100%; gap: 0.8rem; margin-inline: auto; justify-content: center;
    }
    .step-cs .cs-shades {
        grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, var(--csw));
        width: auto; max-width: 100%; gap: 0.8rem; margin-inline: auto; justify-content: center;
    }
    
    .step-cs .cs-fams, .step-cs .cs-shades { justify-items: stretch; }
    .step-cs .cs-fams .cs-cell, .step-cs .cs-shades .cs-cell { width: 100%; }
    .step-cs .cs-fams .cs-sw,   .step-cs .cs-shades .cs-sw   { width: 100%; height: auto; }

    
    .cs-sheet { left: 16.5%; right: 16.5%; }
    
    .pn-box--counts { justify-content: space-evenly; gap: 1rem; }
    .pn-box--counts .pn-block { gap: 1rem; }
    .pn-box--counts .pn-block .pn-copy { flex: 0 0 calc(50% - 0.5rem); font-size: 1.25rem; line-height: 1.35; min-height: 1.35em; }
    .pn-box--counts .pn-row { flex: 0 0 calc(50% - 0.5rem); width: calc(50% - 0.5rem); gap: 0.8rem; justify-content: flex-start; }
    .pn-box--counts .pn-icon { width: 64px; }
    .pn-box--counts .pn-nums { max-width: 12rem; gap: 0.28rem 0.32rem; }
    
    .rv-ctas { width: 100%; margin: 0.9rem 0 0; flex-direction: row; align-items: stretch;
               justify-content: center; gap: 1rem; }
    .rv-cta-free { flex: 1 1 0; min-width: 0; border-radius: 1rem; box-shadow: 4px 4px 0 #000;
                   display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.8rem 0.6rem 1.6rem; }
    .rv-cta-free .rv-cta-cup { top: 1.35rem; }
    .rv-cta-up { flex: 1 1 0; min-width: 0; max-width: calc(50% - 0.5rem); }
    .rv-logozone > .rv-zoombtn { right: calc((100cqw - min(100cqw - 8.5rem, 96cqh)) / 2 - 0.35rem); }
    .rv-logozone > .rv-change  { right: auto; left: calc((100cqw - min(100cqw - 8.5rem, 96cqh)) / 2 - 0.35rem); bottom: -1.2rem; }
    
    .rv-frame { width: min(100cqw - 8.5rem, 96cqh); }
    
    .rv-ctas { width: calc(100% - 1.6rem); margin-left: auto; margin-right: auto; }
    
    .cr-neither, .cr-both { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 1.2rem; padding: 0.55rem 0.5rem; white-space: nowrap; }
    
    .pay-btn { min-width: 0; padding-left: 1.4rem; padding-right: 1.4rem; font-size: 1.5rem; }
    
    .stage:has(.step-reveal2) .g-title { flex-basis: 34%; font-size: 3.44rem; }
    
    .canvas.step-mode .step.step-freepick.fp-wide { padding-right: 0.5rem; padding-left: 0.5rem; }
    
    .fp-tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
    .fp-tier { min-width: 0; }
    .fp-tier .btn { min-width: 0; width: 100%; max-width: 100%; font-size: 1.2rem; padding: 0.5rem 0.6rem; }
    .fp-tier-lines span { font-size: 0.95rem; }
    
    .fr-preview { padding: 0.6rem 0.75rem; }
    
    .step-fontreco .fr-preview { min-height: clamp(9rem, 24vh - 3rem, 15rem); }
    .fr-editor-row--lead .fr-editor-sample-text { font-size: 2.4rem; }
    .fr-editor-row--support .fr-editor-sample-text { font-size: 1.35rem; }
    
    .g-mascot-col .g-mascot { position: relative; left: 15px; }
    
    .cs-own { min-height: var(--csw); padding: 0.4rem 1rem; gap: 0.6rem; }
    .cs-own-img { height: 44px; }
    .cs-own-tx { font-size: 1.05rem; line-height: 1.2; }

    
    .step-cs .cs-art {
        box-sizing: content-box;
        width: min(100% - 4rem, 24rem, 28vh);   
        aspect-ratio: 593 / 247;
        background: #fff;
        border: 3px solid #000;
        border-radius: 1.75rem;
        
        padding: 0.55rem 1.1rem;
    }
    .step-cs .cs-art svg { width: 100%; height: 100%; }
    
    .step-cs, .step-cs.step-reco, .step-cs.step-sec { justify-content: flex-start; }
    .step-cs { gap: 0.45rem; }
    
    .step-cs .cs-acts { margin-bottom: 0; }

    
    
    
    
    .stage .top-row    { height: 21%; }
    .stage .bottom-row { height: 79%; }
    
    .cc-cluster { width: min(100%, 27rem, 23.5vh); }
    .cc-cluster--mono { width: min(100%, 23rem, 23.5vh); }
    
    .g-mascot-col .g-mascot { height: 17.4vh; }
    .intro-hero.cs-easel .intro-easel { height: 15.8vh; }   
    
    .stage .g-balloon { top: 3.5vh; }


    
    .fld-desc textarea { height: calc(3 * 1.3em + 1.6rem); }

    
    .cf-sub { margin-top: -0.9rem; }                       
    .cf-namebox { min-height: 6rem; padding-top: 1.5rem; padding-bottom: 1.9rem; }  
    .cf-band { padding: 1rem 1.25rem; }
    .cf-bandhead { font-size: 1.35rem; margin-bottom: 0.6rem; }
    .cf-bandhead-ic { width: 2rem; height: 2rem; }
    .cf-rowlabel { font-size: 1.2rem; padding: 0.5rem 1.1rem; }
    .cf-rowicon { width: 1.9rem; height: 1.9rem; }
}


.gate-dash { display: inline-flex; align-items: center; justify-content: center; margin: 0.2rem auto 1.1rem;
             text-decoration: none; max-width: 100%; padding-left: 1.4rem; padding-right: 1.4rem; text-align: center; line-height: 1.15; }
.gate-dash-co { display: block; }

@media (min-width: 768px) {
    .step-freeused .gate-title { display: none; }
    .canvas.step-mode:has(.step-freeused) { padding-top: 0.75rem; }
    .canvas.step-mode .step.step-gate.step-freeused { justify-content: flex-start; padding-top: 0.5rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .step-gate.step-freeused { max-width: 100%; }
    .step-freeused .gate-panel { padding: 0.9rem 1rem 1rem; gap: 0.6rem; }
    .step-freeused .gate-dash { margin: 0.1rem auto 0.5rem; }
    .step-freeused .gate-more { margin-top: 0; }
    .step-freeused .gate-pills { margin-top: 0.3rem; gap: 0.6rem; }
}
.gate-dash { flex-direction: column; }   
.gate-more { font-size: 0.95rem; opacity: 0.85; margin-top: 0.2rem; }




.canvas.addon-mode .addon-grid { grid-template-columns: 1fr; gap: 0; margin: 0; align-items: start; }
.canvas.addon-mode .addon-card { cursor: default; border-radius: 18px; }
.addon-art.addon-art-img { min-height: 0; padding: 0; border-bottom: 0; background: none; }
.addon-art-pic { display: block; width: 100%; height: auto; }

.canvas.addon-mode .addon-body {
    display: flex; flex-direction: row; align-items: center;
    gap: 0.75rem 1rem; padding: 0.85rem 1rem;
}
.canvas.addon-mode .addon-copy { flex: 1 1 12rem; min-width: 0; }
.canvas.addon-mode .addon-title { margin: 0 0 0.15rem; font-weight: 800; }
.canvas.addon-mode .addon-blurb { margin: 0; }
.canvas.addon-mode .addon-add { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }

.canvas.addon-mode .addon-add.addon-on { background: #ffff00; color: #15243a; border-color: #000; }
.canvas.addon-mode .addon-add[disabled] { opacity: 0.65; }


.addon-pagetitle {
    margin: 0 0 0.9rem;
    font-family: "Bangers", cursive;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #15243a;
    line-height: 1;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    text-transform: uppercase;
}


@media (max-width: 767px) {
    
    
    .tool:has(> .canvas.addon-mode) > .intro-hero {
        width: auto;
        height: auto;
        left: -4%;                 
        right: auto;
        bottom: 0;                 
        top: auto;
    }
    .tool:has(> .canvas.addon-mode) > .intro-hero img { width: auto; height: 34vh; display: block;
        transform: translateX(12%); }   
    
    .canvas.addon-mode .addon-card { align-self: start; }
    .canvas.addon-mode .addon-body { padding: 0.6rem 0.7rem; gap: 0.5rem; }
    .canvas.addon-mode .addon-add { font-size: 0.95rem; padding: 0.45rem 0.7rem; }
    .canvas.addon-mode .addon-title { font-size: 0.95rem; }
    .canvas.addon-mode .addon-blurb { font-size: 0.78rem; line-height: 1.3; }
    
    .tool:has(> .canvas.addon-mode) > div.frame-bl,
    .tool:has(> .canvas.addon-mode) > div.frame-bottom { position: relative; z-index: 6; }
    .tool:has(> .canvas.addon-mode) > div.frame-left { position: relative; z-index: 2; }
    
    .tool:has(> .canvas.addon-mode) > .intro-hero .intro-balloon,
    body:has(.canvas.addon-mode) .intro-balloon,
    body:has(.canvas.addon-mode) .intro-btn { display: none !important; }
    
    body.intro-open:has(.canvas.addon-mode) .canvas,
    body.intro-open:has(.canvas.addon-mode) .step-nav { opacity: 1; pointer-events: auto; }
    
    .canvas.addon-mode .step-upsell { padding-bottom: 0; }
    
    .canvas.addon-mode .step-nav--end { justify-content: flex-end; }
}


@media (min-width: 768px) and (max-width: 1023px) {
    
    .addon-pagetitle { display: none; }   
}


@media (min-width: 1024px) {
    .addon-pagetitle { display: none; }   
    
    .tool:has(.rail-mascot[src*="menu.webp"]) > div.frame-left { z-index: 1; }
    
    .tool:has(.rail-mascot[src*="menu.webp"]) .rail-bottom { align-items: flex-start; }
    .rail-mascot[src*="menu.webp"] {
        width: auto;
        height: 60vh;
        
        margin-left: -150px;
        
        
        transform: translateY(7vh) translateX(12%);
    }
    
    .canvas.addon-mode .addon-grid { max-width: 46rem; }
}



.chip-groups { display: flex; flex-direction: column; gap: 1.1rem; }
.chip-head {
    margin: 0 0 0.55rem;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: #15243a;
}
.chip-wrap { display: flex; flex-wrap: wrap; gap: 0.85rem calc(0.85rem + var(--btn-shadow, 4px)); }
.chip {
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    text-align: center;
    
    white-space: normal;
    max-width: 15rem;
    padding: 0.6rem 0.95rem;
    border: 3px solid #000;
    border-radius: 14px;
    background: #fff;
    color: #15243a;
    cursor: pointer;
    box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.chip:focus-visible { outline: 3px solid #0000ff; outline-offset: 3px; }

.chip.chip-on {
    background: #ffff00;
    transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px));
    box-shadow: 0 0 0 #000;
}
.chip-loading { margin: 0; font-size: 1rem; color: #5a6678; }

@media (max-width: 767px) {
    .chip-head { font-size: 1.2rem; }
    .chip { font-size: 0.98rem; max-width: 100%; padding: 0.55rem 0.8rem; }
    
    .canvas .step-prefs .step-nav--end { justify-content: flex-end; }
}


@media (max-width: 767px) {
    
    .addon-pagetitle {
        font-size: clamp(1.75rem, 7.6vw, 2.3rem);
        margin: 0 0 0.5rem;
        white-space: nowrap;
    }
    
    
    
    .canvas.prefs-mode, .canvas.addon-mode { padding-top: calc(var(--pill-h) * 0.92); }
    
    .step-prefs .chip-groups { gap: 0.5rem; }
    .step-prefs .chip-head { font-size: 1rem; margin-bottom: 0.3rem; }
    .step-prefs .chip-wrap { gap: 0.45rem calc(0.45rem + var(--btn-shadow, 4px)); }
    .step-prefs .chip { font-size: 0.85rem; padding: 0.34rem 0.58rem; border-radius: 12px; }
    
    .step-prefs { padding-bottom: 3.5rem; }
}


.step-rate, .step-duel { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding-bottom: 3.5rem; }
.cr-question { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.25; text-align: center; margin: 0.2rem 0 0; color: #15243a; }
.cr-card { background: #fff; border: 3px solid #000; border-radius: 6px; padding: 0.5rem; width: min(76vw, 24rem); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.cr-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cr-opinions { display: flex; gap: 1.1rem; justify-content: center; }

.cr-zoomhint { display: none; }
@media (max-width: 767px) {
    .cr-zoomhint { display: block; margin: 0.35rem 0 0; text-align: center; font-style: italic;
        font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.85rem; color: #5a6678; }
    
    
    .step-frv { position: relative; }
    .step-frv .cr-zoomhint { position: static; order: 1; margin: 0.15rem 0 0; font-size: 0.8rem; }
    .step-frv .frv-band { order: 2; margin-top: 0.3rem; }
    
    .rv-zoom.rv-zoom-full .rv-zoom-panel { width: 100vw; top: 50%; transform: translate(-50%, -50%); }
}
.rv-zoom.rv-zoom-full { z-index: 1200; }
.cr-op {
    background: #fff; border: 3px solid #000; border-radius: 14px; padding: 0.55rem 0.8rem; cursor: pointer;
    box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.cr-op:active { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }
.cr-op:focus-visible { outline: 3px solid #0000ff; outline-offset: 3px; }
.cr-op img { width: 3.6rem; height: 3.6rem; object-fit: contain; display: block; }


.cr-duel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; width: 100%; max-width: 56rem; justify-items: center; }
.cr-duel-col { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.cr-duel-card { min-width: 0; }
.cr-duel-card { width: 100%; max-width: 20rem; }
.cr-pick { margin-top: 0.8rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.cr-tri { width: 0.9em; height: 0.9em; }

.cr-duel-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem;
    justify-items: center; width: 100%; max-width: 56rem; margin: 0.4rem auto 0; }
.cr-neither, .cr-both { color: #000; }
.cr-neither { background: #f7a6a6; }
.cr-both { background: #2fae4a; color: #fff; }
.cr-busy { pointer-events: none; opacity: 0.75; }
.canvas .step-rate .step-nav--end, .canvas .step-duel .step-nav--end { justify-content: flex-end; }

.step-rate .step-nav, .step-duel .step-nav { pointer-events: none; }
.step-rate .step-nav .btn, .step-duel .step-nav .btn { pointer-events: auto; }

@media (max-width: 767px) {
    .canvas.rate-mode, .canvas.duel-mode { padding-top: calc(var(--pill-h) * 0.92); }
    .cr-question { font-size: 1.02rem; }   
    .cr-op img { width: 3rem; height: 3rem; }
    
    .cr-duel-extra { justify-content: space-between; padding: 0; gap: 0.5rem; }
    .cr-neither, .cr-both { font-size: 0.78rem; padding: 0.55rem 0.6rem; white-space: nowrap; }
    
    .step-rate, .step-duel { gap: 0.7rem; }
    
    .step-rate .cr-card { width: auto; height: min(62vw, 31vh); }   
    .cr-duel-card { width: 100%; height: auto; }                    
}

.cr-mstack { display: grid; width: 100%; }
.cr-mstack > img { grid-area: 1 / 1; align-self: end; justify-self: center; }
.cr-mlayer { opacity: 0; transition: opacity 150ms ease; pointer-events: none; width: 98%; }
.cr-mlayer.on { opacity: 1; }

.cr-mstack > img:not(.cr-mlayer) { transition: opacity 150ms ease !important; }
.cr-mstack.cr-hov > img:not(.cr-mlayer) { opacity: 0 !important; }

:root { --frv-bar: 3.2rem; --frv-cream: #FBF5E0; }
.tool.frv-on > .frv-tabs {
    position: absolute;
    left: calc(var(--frame) - 3px);
    right: calc(var(--frame) - 3px);
    top: calc(var(--frame) + 0.3rem);
    height: var(--frv-bar);
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0 0.6rem;
    border-bottom: 4px solid #000;
    
    z-index: 3;
    pointer-events: none;             
}
.tool.frv-on > div.frame-left, .tool.frv-on > div.frame-right { position: relative; z-index: 4; }

.tool.frv-on > div.frame-bottom, .tool.frv-on > div.frame-bl, .tool.frv-on > div.frame-br { position: relative; z-index: 4; }
.tool.frv-on { overflow: hidden; }   
.frv-tab {
    pointer-events: auto;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: #eeeeee;
    border: 3px solid #000;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    color: #000;
    padding: 0 0.2rem;
}
.frv-tab-ic { display: flex; align-items: center; }
.frv-tab-ic img, .frv-tab-ic svg { width: 1.7rem; height: 1.7rem; object-fit: contain; display: block; }
.frv-tab-n { font-size: 1.05rem; }

.frv-tab.frv-tab-on { background: var(--frv-cream); }
.frv-tab.frv-tab-on::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 4px;
    background: var(--frv-cream);
}

.canvas.frv-mode { padding-top: calc(var(--frv-bar) + 0.9rem); display: flex; flex-direction: column; overflow: hidden; }
.step-frv { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding-bottom: 0.3rem; }
.frv-title { font-family: "Bangers", cursive; font-weight: 400; color: #15243a;
    font-size: clamp(1.6rem, 6.4vw, 2.4rem); text-align: center; margin: 0; min-height: 1em; }
.frv-zone { flex: 1 1 0; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: center; }
.frv-card { background: #fff; border: 4px solid #000; box-shadow: 0.55rem 0.55rem 0 rgba(0,0,0,0.35);
    height: 100%; max-height: 100%; aspect-ratio: 1 / 1; width: auto; max-width: 78%; padding: 0.4rem;
    display: flex; align-items: center; justify-content: center; }
.frv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.frv-card { position: relative; }

.frv-card .rv-change { opacity: 1; }
.frv-spin { display: none; position: absolute; width: 3rem; height: 3rem; border-radius: 50%;
    border: 0.38rem solid #d7deea; border-top-color: #0000ff; animation: frvSpin 0.9s linear infinite; }
.frv-card.frv-loading .frv-spin { display: block; }
.frv-card.frv-loading .frv-img { visibility: hidden; }
@keyframes frvSpin { to { transform: rotate(360deg); } }
.frv-empty { font-family: "Archivo", sans-serif; font-weight: 700; color: #5a6678; text-align: center; margin: 2rem 0; }
.frv-opinions { margin-top: 0; flex: none; }
.frv-ctazone { flex: none; }

.frv-band { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (max-width: 767px) {
    :root { --frv-bar: 2.8rem; }
    .canvas.frv-mode { padding-top: calc(var(--frv-bar) + 0.3rem); }
    .step-frv { gap: 0.35rem; padding-bottom: 0.2rem; }
    .frv-title { font-size: 1.25rem; }
    .step-frv .cr-op { padding: 0.35rem 0.55rem; }
    .step-frv .cr-op img { width: 2.1rem; height: 2.1rem; }
    .frv-band { gap: 0.35rem; }
    .frv-cta { padding: 0.35rem 0.7rem 0.35rem 2.2rem; }
    .frv-cta-t { font-size: 0.85rem; }
    .frv-card { max-width: 86%; }
    .frv-tab-ic img, .frv-tab-ic svg { width: 1.45rem; height: 1.45rem; }
    .frv-tab-n { font-size: 0.95rem; }
}
@media (min-width: 768px) {
    .frv-band { flex-direction: row; justify-content: center; align-items: center; gap: 2.2rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .frv-band { gap: 1.2rem; }
    .canvas.frv-mode { padding-top: calc(var(--frv-bar) + 0.5rem); }
    
    .frv-band { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; }
    .frv-band .frv-opinions { grid-column: 2; gap: 0.6rem; }
    .frv-band .frv-ctazone { grid-column: 3; justify-self: end; }
    .step-frv .cr-op { padding: 0.4rem 0.55rem; }
    .step-frv .cr-op img { width: 2.6rem; height: 2.6rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .frv-band { padding-left: 22%; }
}
@media (min-width: 768px) {
    
    .frv-band .frv-ctazone { width: auto; padding: 0; justify-content: center; }
    .frv-band .frv-opinions { margin: 0; width: auto; }
}

.cr-op.cr-op-sel { background: #ffff00; transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }

.frv-ctazone { display: flex; justify-content: flex-end; width: 100%; padding-right: 4%; }
.frv-cta { position: relative; background: #ffff00; border: 3px solid #000; border-radius: 14px;
    box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000; cursor: pointer;
    padding: 0.55rem 0.9rem 0.55rem 2.6rem; }
.frv-cta:active { transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px)); box-shadow: 0 0 0 #000; }
.frv-cta .rv-cta-cup { width: 2.6rem; height: 2.6rem; left: -0.6rem; }
.frv-cta-t { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.15;
    color: #000; display: block; text-align: left; }

@media (max-width: 1023px) {
    .tool.frv-on .rv-hero { display: block !important; opacity: 1; transform: translate(0, 10%) !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    
    .tool.frv-on .rv-hero { display: none !important; }
    
    
    
    .tool.frv-on > .frv-tabs { left: calc(var(--frame) * 0.7 - 2px); right: calc(var(--frame) * 0.7 - 2px); padding: 0; gap: 0.3rem; justify-content: center; z-index: 5; }   
    .frv-tab { flex: 0 1 8.4rem; }
    .frv-tab { padding: 0 0.3rem; gap: 0.25rem; }   
    .frv-tab-ic img, .frv-tab-ic svg { width: 1.6rem; height: 1.6rem; }
    .frv-tab-n { font-size: 1rem; }
    
    .step-frv { gap: 0.75rem; padding-bottom: 0; }
    .frv-title { margin-bottom: 0.15rem; }
    .canvas.frv-mode { padding-bottom: 0.3rem; }
    .frv-card { max-width: 100%; height: min(100%, 30rem); }
    
    .frv-card .rv-zoombtn { right: -0.35rem; top: -1.2rem; left: auto; bottom: auto; }
    .frv-card .rv-change  { left: -0.35rem; bottom: -1.2rem; right: auto; top: auto; }
    
    .frv-band { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 0; }
    .frv-band .frv-opinions { margin: 0 auto; }
    
    .step-frv { position: relative; }
    .frv-band .frv-ctazone { position: absolute; right: 0.6rem; bottom: 0.3rem; width: auto; padding: 0; }
    .frv-cta { padding: 0.4rem 0.7rem 0.4rem 2.3rem; }
    .frv-cta .rv-cta-cup { width: 2.2rem; height: 2.2rem; left: -0.5rem; }
    .frv-cta-t { font-size: 0.95rem; }
}
.frv-tab { max-width: 16rem; }
.tool.frv-on > .frv-tabs { justify-content: center; }
@media (min-width: 768px) {
    :root { --frv-bar: 3.8rem; }
    .frv-tab-ic img, .frv-tab-ic svg { width: 2rem; height: 2rem; }
    .frv-tab-n { font-size: 1.2rem; }
    .frv-card { max-width: 26rem; }
    .canvas.frv-mode { padding-top: calc(var(--frv-bar) + 1rem); padding-bottom: 0.6rem; }
}
@media (min-width: 1024px) {
    :root { --frv-bar: 4.2rem; }
    .frv-card { max-width: 26rem; }
    .frv-title { font-size: 2.6rem; }
    
    .canvas.frv-mode { padding-top: calc(var(--frv-bar) + 1.1rem); padding-bottom: 0.7rem; }
    
    .tool.frv-on .rail-mascot { width: 59.6%; }
    .frv-ctazone { padding-right: 7%; }
    .frv-cta .rv-cta-cup { width: 3rem; height: 3rem; }
    .frv-cta-t { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
    
    body.cr-rate-on .rail-balloon { display: none !important; }
    
    .cr-mlayer { width: 102%; transform: translateY(43px); }
    .cr-card { width: min(44vh, 26rem); }
    .cr-duel-card { max-width: min(38vh, 22rem); }
    .cr-op img { width: 4.2rem; height: 4.2rem; }
    .step-rate, .step-duel { gap: 1.1rem; }
}


.fr-menu-card-btn {
    border: 4px solid #000;
    box-shadow: var(--btn-shadow, 4px) var(--btn-shadow, 4px) 0 #000;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
    width: 100%;
}
.fr-menu-card-btn:active {
    transform: translate(var(--btn-shadow, 4px), var(--btn-shadow, 4px));
    box-shadow: 0 0 0 #000;
}

.fr-menu-card-btn .fr-icon-btn, .fr-menu-card-btn .fr-menu-row { cursor: pointer; }


@media (min-width: 768px) {
    .fr-menu.fr-menu-legend { min-height: 0; padding: 0.85rem 0.9rem; gap: 0.5rem 0.5rem; }
    .fr-menu.fr-menu-legend .fr-menu-head { margin-bottom: 0.1rem; }
}


@media (min-width: 768px) {
    .pay-toprow { display: flex; align-items: stretch; gap: 0.7rem; }
    .pay-toprow .pay-tiers { flex: 1 1 auto; min-width: 0; }
    
    .pay-toprow .pay-coupon {
        flex: 0 0 auto; width: 9.5rem; align-content: center;
        flex-direction: column; align-items: stretch; gap: 0.35rem;
    }
    .pay-toprow .pay-coupon-h {
        display: block; font-family: "Archivo", sans-serif; font-weight: 800;
        font-size: 0.9rem; color: #15243a; text-align: center; line-height: 1.1;
    }
    .pay-toprow .pay-coupon-in { flex: none; width: 100%; text-align: center; }
    .pay-toprow .pay-coupon-go { width: 100%; font-weight: 800; }
    .pay-toprow .pay-coupon-msg { flex: none; text-align: center; font-size: 0.75rem; }
}



.tool.frv-on .rv-hero { pointer-events: none; cursor: default; }
.tool.frv-on .rv-hero img { pointer-events: none; }

.frv-card { height: min(100%, 26rem); width: auto; max-width: 100%; aspect-ratio: 1 / 1; }
@media (min-width: 1024px) {
    
    .frv-band { flex-direction: column; align-items: center; gap: 0.45rem; padding-left: 0; }
    .frv-band .frv-opinions { margin: 0 auto; width: auto; }
    .frv-band .frv-ctazone { width: 100%; justify-content: flex-end; padding: 0 4% 0 0; margin-top: 0.15rem; }
    .frv-card { max-width: 100%; }
    
    .tool.frv-on .rv-hero { left: 0.85rem; bottom: var(--frame); }
}

.frv-making { text-align: center; font-size: 0.82rem; font-weight: 800; color: #fff; background: #e0161c;
    line-height: 1.2; padding: 0.22rem 0.6rem; margin: 0 0 0.15rem; letter-spacing: 0.01em;
    align-self: stretch; width: 100%; box-sizing: border-box; white-space: nowrap; }
.frv-making::before { content: "\25B2"; font-size: 0.7em; margin-right: 0.55rem; position: relative; top: -0.1em; }
@media (max-width: 767px) {
    
    .step-frv { position: relative; }
    .frv-making { position: absolute; top: 0; left: 0; right: 0; order: 0; margin: 0; font-size: 0.7rem;
        padding: 0.18rem 0.4rem; z-index: 3; }
    .step-frv.frv-bar-on .frv-title { margin-top: 1.3rem; }
}

@media (min-width: 1024px) and (max-height: 50rem) {
    .frv-band { flex-direction: row; justify-content: center; align-items: center; gap: 1.6rem; }
    .frv-band .frv-ctazone { width: auto; padding: 0; margin-top: 0; justify-content: center; }
}


@media (min-width: 768px) {
    
    .step-duel .cr-question { display: none; }
}

.cr-duel-col { align-items: center; }
.cr-pick { align-self: center; }
.cr-duel-extra { justify-content: center; }
@media (min-width: 1024px) {
    .cr-duel-col { width: min(100%, 22rem); }
    .cr-duel-card { width: 100%; max-width: 100%; }
}


@media (max-width: 767px) {
    .step-freepick:not(.fp-wide) { gap: 0.6rem; }
    .step-freepick:not(.fp-wide) .fp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .step-freepick:not(.fp-wide) .fp-topbar .fp-title { margin: 0; font-size: clamp(1.5rem, 7vw, 2rem); text-align: left; }
    .step-freepick:not(.fp-wide) .fp-back { padding: 0.35rem 0.8rem; font-size: 1rem; }
    .step-freepick:not(.fp-wide) .fp-mid { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; flex: 0 1 auto; min-height: 0; }
    .step-freepick:not(.fp-wide) .fp-card { width: min(62vw, 34vh); aspect-ratio: 1 / 1; background: #fff; border: 2px solid #15243a; }
    .step-freepick:not(.fp-wide) .fp-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .step-freepick:not(.fp-wide) .fp-mailto-lead { margin: 0; font-size: 0.95rem; font-weight: 700; text-align: center; color: #15243a; line-height: 1.35; }
    .step-freepick:not(.fp-wide) .fp-hero { height: 30%; }
}


@media (max-width: 767px) {
    .step-frv { gap: 0.8rem; }
    .frv-band { gap: 0.9rem; }
    .frv-band .frv-opinions { gap: 0.9rem; }
    .frv-band .frv-ctazone { margin-top: 0.2rem; }
}


@media (max-width: 767px) {
    .tool:has(> .canvas.addon-mode) > .intro-hero { bottom: -8vh; }
}


@media (max-width: 767px) {
    .pay-btn { min-width: 0; }
    .step-gate .step-nav .btn { font-size: 1.3rem; }
}


@media (max-width: 767px) {
    .fr-preview { padding: 0.65rem 0.75rem; }
    .step-fontreco { gap: 0.45rem; }
    .fr-legend-gap { height: 0.35rem; }
    .fr-menu { padding: 0.55rem 0.6rem; gap: 0.5rem 0.4rem; }
    .fr-menu .fr-icon-btn { width: clamp(1.9rem, 9.5vw, 2.6rem); height: clamp(1.9rem, 9.5vw, 2.6rem); }
    .fr-menu-label { font-size: clamp(0.85rem, 3.6vw, 1.05rem); }
}


@media (max-width: 767px) {
    .canvas.step-mode .step-pn--free { padding-bottom: clamp(3.5rem, 8.5vh, 5.5rem); }
}


@media (max-width: 767px) {
    .pn-box--std { gap: 1.5rem; }
}

@media (max-width: 767px) {
    .oi-grouphead { display: none; }
    .oi-group { gap: 0; }
    .oi-starburst { width: 7.7rem; height: 7.7rem; right: 0.15rem; bottom: 2.6rem; }
    .oi-sb-txt { font-size: 0.95rem; }
}


.chip-groups { flex-direction: row; align-items: flex-start; gap: 0.9rem; }
.chip-group { flex: 1 1 0; min-width: 0; }
.chip-wrap { align-content: flex-start; }
@media (max-width: 767px) {
    .step-prefs .chip-groups { gap: 0.6rem; }
    .step-prefs .chip { font-size: 0.82rem; padding: 0.32rem 0.5rem; }
}