{} *{} /*endBaseStyles*/
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 :root { --navy: #0f1f3d; --navy-mid: #1a3260; --gold: #c9a84c; --gold-light: #e8c97a; --white: #ffffff; --off-white: #f8f6f1; --text: #1a1a2e; --muted: #6b7280; --border: #e5e0d5; --stage1: #2d6a4f; --stage2: #1d5f8a; --stage3: #8b2fc9; --stage1-bg: #e8f5ee; --stage2-bg: #e3f0f8; --stage3-bg: #f3e8fd; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; background: var(--off-white); color: var(--text); min-height: 100vh; } .lang-bar { background: #0a1628; padding: 10px 48px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lang-label { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; } .lang-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; letter-spacing: 0.04em; } .lang-btn:hover { background: rgba(255,255,255,0.14); color: var(--white); } .lang-btn.active { background: var(--gold); border-color: var(--gold); color: var(--navy); } .header { background: var(--navy); padding: 40px 48px 36px; position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%); border-radius: 50%; } .header-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .header h1 { font-family: 'DM Serif Display', serif; font-size: 36px; color: var(--white); line-height: 1.15; margin-bottom: 10px; } .header p { color: rgba(255,255,255,0.6); font-size: 15px; max-width: 540px; line-height: 1.6; } .nav { background: var(--navy-mid); display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; } .nav-tab { padding: 16px 28px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; font-family: 'DM Sans', sans-serif; } .nav-tab:hover { color: rgba(255,255,255,0.8); } .nav-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); } .content { max-width: 900px; margin: 0 auto; padding: 40px 32px 60px; } .lang-page { display: none; } .lang-page.active { display: block; } .section { display: none; } .section.active { display: block; } .stage-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; } .stage-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .stage-header { padding: 20px 28px; display: flex; align-items: center; gap: 16px; cursor: pointer; user-select: none; } .stage-header.s1 { background: var(--stage1-bg); border-bottom: 2px solid var(--stage1); } .stage-header.s2 { background: var(--stage2-bg); border-bottom: 2px solid var(--stage2); } .stage-header.s3 { background: var(--stage3-bg); border-bottom: 2px solid var(--stage3); } .stage-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--white); flex-shrink: 0; } .s1 .stage-num { background: var(--stage1); } .s2 .stage-num { background: var(--stage2); } .s3 .stage-num { background: var(--stage3); } .stage-title { flex: 1; } .stage-title h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; } .stage-title p { font-size: 13px; color: var(--muted); } .stage-toggle { font-size: 18px; color: var(--muted); transition: transform 0.2s; } .stage-card.open .stage-toggle { transform: rotate(180deg); } .stage-body { display: none; padding: 28px; } .stage-card.open .stage-body { display: block; } .message-block { margin-bottom: 24px; } .message-block:last-child { margin-bottom: 0; } .msg-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .msg-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .msg-purpose { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 10px; padding-left: 14px; border-left: 2px solid var(--border); } .msg-box { background: var(--off-white); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px 18px 20px; font-size: 14px; line-height: 1.75; color: var(--text); position: relative; white-space: pre-wrap; padding-right: 70px; } .copy-btn { position: absolute; top: 10px; right: 10px; background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 5px 12px; font-size: 11px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; letter-spacing: 0.04em; transition: background 0.15s; } .copy-btn:hover { background: var(--navy-mid); } .copy-btn.copied { background: var(--stage1); } .tip-box { background: #fffbf0; border: 1px solid #f0dfa0; border-radius: 10px; padding: 14px 18px; margin-top: 20px; font-size: 13px; color: #7a6020; line-height: 1.6; } .tip-box strong { color: #5a4510; } .tracker-intro { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 28px; } .tracker-intro h3 { font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 8px; } .tracker-intro p { color: var(--muted); font-size: 14px; line-height: 1.7; } .tracker-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--white); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,0.04); } .tracker-table th { background: var(--navy); color: var(--gold-light); padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .tracker-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--muted); } .tracker-table tr:last-child td { border-bottom: none; } .tracker-table tr:nth-child(even) td { background: var(--off-white); } .stage-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .pill-s1 { background: var(--stage1-bg); color: var(--stage1); } .pill-s2 { background: var(--stage2-bg); color: var(--stage2); } .pill-s3 { background: var(--stage3-bg); color: var(--stage3); } .playbook-steps { display: flex; flex-direction: column; gap: 16px; } .playbook-step { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px 26px; display: flex; gap: 20px; align-items: flex-start; box-shadow: 0 1px 6px rgba(0,0,0,0.04); } .step-num { width: 34px; height: 34px; background: var(--navy); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 2px; } .step-body h4 { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .step-body p { font-size: 13px; color: var(--muted); line-height: 1.65; } .step-body ul { margin-top: 8px; padding-left: 18px; } .step-body ul li { font-size: 13px; color: var(--muted); line-height: 1.7; } .section-heading { font-family: 'DM Serif Display', serif; font-size: 26px; margin-bottom: 6px; color: var(--navy); } .section-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; } .divider { height: 1px; background: var(--border); margin: 32px 0; } .highlight-bar { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: 14px; padding: 22px 26px; color: var(--white); margin-bottom: 28px; display: flex; align-items: center; gap: 16px; } .highlight-bar .icon { font-size: 28px; } .highlight-bar h4 { font-size: 15px; font-weight: 600; margin-bottom: 3px; } .highlight-bar p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; } /* SHEET DOWNLOAD BOX */ .sheet-download-box { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .sheet-download-header { background: linear-gradient(135deg, #1a7a4a 0%, #0f5c35 100%); padding: 20px 26px; display: flex; align-items: center; gap: 14px; } .sheet-icon { font-size: 28px; flex-shrink: 0; } .sheet-download-header h3 { color: var(--white); font-size: 16px; font-weight: 600; margin-bottom: 2px; } .sheet-download-header p { color: rgba(255,255,255,0.7); font-size: 13px; } .sheet-download-body { background: var(--white); padding: 22px 26px; } .warning-box { background: #fff8e6; border: 1.5px solid #f5c842; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; display: flex; gap: 12px; align-items: flex-start; } .warning-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .warning-text { font-size: 13px; color: #7a5500; line-height: 1.6; } .warning-text strong { color: #5a3d00; display: block; margin-bottom: 3px; font-size: 13px; } .how-to-copy { margin-bottom: 20px; } .how-to-copy h4 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; letter-spacing: 0.02em; } .copy-steps { display: flex; flex-direction: column; gap: 8px; } .copy-step { display: flex; gap: 12px; align-items: flex-start; } .copy-step-num { width: 22px; height: 22px; background: var(--navy); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .copy-step p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; } .copy-step p strong { color: var(--text); } .sheet-open-btn { display: inline-flex; align-items: center; gap: 8px; background: #1a7a4a; color: var(--white); text-decoration: none; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif; transition: background 0.15s; border: none; cursor: pointer; } .sheet-open-btn:hover { background: #0f5c35; } .sheet-open-btn .btn-icon { font-size: 16px; } @media (max-width: 600px) { .lang-bar { padding: 10px 16px; } .header { padding: 28px 20px; } .header h1 { font-size: 26px; } .content { padding: 24px 16px 48px; } .stage-body { padding: 20px 16px; } .tracker-table { font-size: 11px; } .tracker-table th, .tracker-table td { padding: 9px 10px; } .sheet-download-body { padding: 18px 16px; } }