:root {
            --resource-accent: #c8ff28;
            --resource-card: #0d1412;
            --resource-border: #24332b;
            --resource-muted: #a1aca5;
        }

        .ps-page {
            overflow: hidden;
        }

        .ps-page [hidden] {
            display: none !important;
        }

        .ps-page .container {
            width: min(1180px, calc(100% - 40px));
            margin-inline: auto;
        }

        /* ---------- Hero (same pattern as resources.html) ---------- */
        .ps-hero {
            position: relative;
            padding: 84px 0 40px;
            background:
                radial-gradient(ellipse at 78% 10%, rgba(200, 255, 40, .09), transparent 34%),
                radial-gradient(ellipse at 5% 75%, rgba(200, 255, 40, .045), transparent 36%);
        }

        .resource-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 12px;
            border: 1px solid rgba(200, 255, 40, .25);
            border-radius: 999px;
            background: rgba(200, 255, 40, .055);
            color: var(--resource-accent);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .resource-eyebrow::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--resource-accent);
            box-shadow: 0 0 12px rgba(200, 255, 40, .5);
        }

        .ps-hero h1 {
            max-width: 850px;
            margin: 22px 0 18px;
            font-size: clamp(38px, 5.4vw, 64px);
            line-height: 1.06;
            letter-spacing: -2.2px;
            font-weight: 800;
        }

        .ps-hero h1 span {
            color: var(--resource-accent);
        }

        .ps-hero .hero-copy {
            max-width: 680px;
            color: var(--resource-muted);
            font-size: 18px;
            line-height: 1.8;
            margin: 0;
        }

        .ps-points {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 24px;
            margin-top: 26px;
        }

        .ps-point {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #d9e2dc;
            font-size: 14px;
        }

        .ps-point span {
            color: var(--resource-accent);
            font-weight: 800;
        }

        /* ---------- Calculator ---------- */
        .ps-tool {
            padding: 24px 0 72px;
        }

        .ps-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
            gap: 20px;
            align-items: start;
        }

        .ps-panel {
            padding: 28px;
            border: 1px solid var(--resource-border);
            border-radius: 22px;
            background: linear-gradient(145deg, #101814, #0a0e0c);
        }

        .ps-panel h2 {
            margin: 0 0 6px;
            font-size: 23px;
            letter-spacing: -.45px;
        }

        .ps-panel .ps-sub {
            margin: 0 0 22px;
            color: var(--resource-muted);
            font-size: 14px;
        }

        .ps-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .ps-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 16px;
        }

        .ps-field label,
        .ps-label {
            display: block;
            color: #e2e9e4;
            font-size: 13px;
            font-weight: 700;
        }

        .ps-field label em,
        .ps-label em {
            color: #7f8c85;
            font-style: normal;
            font-weight: 500;
        }

        .ps-field input,
        .ps-field select {
            width: 100%;
            min-height: 46px;
            padding: 12px 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #080c0a;
            color: #fff;
            font: inherit;
            font-size: 15px;
            outline: none;
            transition: border-color .2s;
        }

        .ps-field input:focus,
        .ps-field select:focus {
            border-color: var(--resource-accent);
            box-shadow: 0 0 0 3px rgba(200, 255, 40, .12);
        }

        .ps-field input::placeholder {
            color: #55625b;
        }

        .ps-field select option,
        .ps-field select optgroup {
            background: #0d1412;
            color: #fff;
        }

        .ps-field small {
            color: #7f8c85;
            font-size: 12px;
        }

        .ps-seg {
            display: inline-flex;
            margin: 7px 0 18px;
            padding: 4px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: #080c0a;
        }

        .ps-seg button {
            padding: 9px 15px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: #aebbb5;
            font: inherit;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: .2s;
        }

        .ps-seg button:hover {
            color: #fff;
        }

        .ps-seg button[aria-pressed="true"] {
            background: var(--resource-accent);
            color: #071000;
        }

        .ps-seg button:focus-visible,
        .ps-btn:focus-visible,
        .ps-adv summary:focus-visible {
            outline: 2px solid var(--resource-accent);
            outline-offset: 2px;
        }

        .ps-adv {
            margin-top: 6px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, .07);
        }

        .ps-adv summary {
            margin-bottom: 16px;
            color: #d1dad3;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }

        .ps-adv > small {
            color: #7f8c85;
            font-size: 12px;
            line-height: 1.7;
        }

        /* Result */
        .ps-result {
            position: sticky;
            top: 96px;
        }

        .ps-lots {
            margin-bottom: 18px;
            padding: 24px;
            border: 1px solid rgba(200, 255, 40, .35);
            border-radius: 18px;
            background:
                radial-gradient(ellipse at 95% 0%, rgba(200, 255, 40, .1), transparent 45%),
                #0c120e;
        }

        .ps-lots .lbl {
            color: var(--resource-muted);
            font-size: 13px;
        }

        .ps-lots .val {
            margin: 4px 0;
            color: var(--resource-accent);
            font-size: clamp(38px, 5vw, 54px);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -1.5px;
        }

        .ps-lots .units {
            color: #b7c1ba;
            font-size: 14px;
        }

        .ps-rows {
            margin: 0;
        }

        .ps-rows > div {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            font-size: 14px;
        }

        .ps-rows > div:last-child {
            border-bottom: 0;
        }

        .ps-rows dt {
            color: var(--resource-muted);
        }

        .ps-rows dd {
            margin: 0;
            color: #fff;
            font-weight: 800;
            text-align: right;
        }

        .ps-rows .good {
            color: var(--resource-accent);
        }

        .ps-msg {
            margin-bottom: 14px;
            padding: 13px 16px;
            border: 1px solid rgba(255, 215, 90, .25);
            border-radius: 12px;
            background: rgba(255, 215, 90, .06);
            color: #ffe28a;
            font-size: 13px;
            line-height: 1.65;
        }

        .ps-msg.err {
            border-color: rgba(255, 77, 77, .3);
            background: rgba(255, 77, 77, .07);
            color: #ff9a9a;
        }

        .ps-empty {
            color: var(--resource-muted);
            font-size: 14px;
        }

        .ps-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .ps-btn {
            min-height: 44px;
            padding: 11px 18px;
            border: 1px solid var(--resource-border);
            border-radius: 10px;
            background: rgba(255, 255, 255, .025);
            color: #e3eae5;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: .2s;
        }

        .ps-btn:hover {
            border-color: #66736a;
        }

        .ps-btn.primary {
            border-color: var(--resource-accent);
            background: var(--resource-accent);
            color: #10150a;
        }

        .ps-btn.primary:hover {
            background: #ddff85;
            border-color: #ddff85;
        }

        /* ---------- How it works ---------- */
        .ps-how {
            padding: 76px 0;
            border-top: 1px solid rgba(255, 255, 255, .06);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            background: #080c0a;
        }

        .ps-how h2 {
            margin: 14px 0 28px;
            font-size: clamp(28px, 4vw, 40px);
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .ps-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .ps-step {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 20px;
            border: 1px solid var(--resource-border);
            border-radius: 16px;
            background: var(--resource-card);
        }

        .ps-num {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            border-radius: 12px;
            background: rgba(200, 255, 40, .09);
            color: var(--resource-accent);
            font-size: 13px;
            font-weight: 800;
        }

        .ps-step h3 {
            margin: 1px 0 6px;
            font-size: 16px;
        }

        .ps-step p {
            margin: 0;
            color: var(--resource-muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .ps-formula {
            margin-top: 18px;
            padding: 16px 20px;
            overflow-x: auto;
            border: 1px solid var(--resource-border);
            border-radius: 14px;
            background: rgba(255, 255, 255, .018);
            color: #e2e9e4;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 14px;
            white-space: nowrap;
        }

        .ps-note {
            margin: 18px 0 0;
            color: var(--resource-muted);
            font-size: 13px;
            line-height: 1.75;
        }

        .ps-note strong {
            color: #e2e9e4;
        }

        /* ---------- CTA ---------- */
        .ps-cta {
            padding: 82px 0;
        }

        .ps-cta-panel {
            position: relative;
            overflow: hidden;
            padding: 52px 28px;
            border: 1px solid rgba(200, 255, 40, .24);
            border-radius: 24px;
            background:
                radial-gradient(ellipse at 95% 0%, rgba(200, 255, 40, .09), transparent 38%),
                #0c120e;
            text-align: center;
        }

        .ps-cta-panel h2 {
            max-width: 700px;
            margin: 15px auto;
            font-size: clamp(28px, 4.5vw, 44px);
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .ps-cta-panel > p {
            max-width: 640px;
            margin: 0 auto;
            color: var(--resource-muted);
            line-height: 1.8;
        }

        .ps-cta-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }

        .resource-btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 9px;
            min-height: 46px;
            padding: 12px 20px;
            border: 1px solid var(--resource-border);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: .2s ease;
        }

        .resource-btn.primary {
            border-color: var(--resource-accent);
            background: var(--resource-accent);
            color: #10150a;
        }

        .resource-btn.primary:hover {
            background: #ddff85;
            border-color: #ddff85;
        }

        .resource-btn.secondary {
            color: #e3eae5;
            background: rgba(255, 255, 255, .025);
        }

        .resource-btn.secondary:hover {
            border-color: #66736a;
        }

        .ps-disclaimer {
            margin-top: 25px;
            color: #77837a;
            font-size: 12px;
            line-height: 1.8;
            text-align: center;
        }

        @media (max-width: 900px) {
            .ps-layout {
                grid-template-columns: 1fr;
            }

            .ps-result {
                position: static;
            }

            .ps-steps {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .ps-page .container {
                width: min(100% - 28px, 1180px);
            }

            .ps-hero {
                padding: 60px 0 30px;
            }

            .ps-hero h1 {
                letter-spacing: -1.4px;
            }

            .ps-hero .hero-copy {
                font-size: 16px;
            }

            .ps-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .ps-panel {
                padding: 22px;
            }

            .ps-seg {
                display: flex;
            }

            .ps-seg button {
                flex: 1;
                padding: 9px 8px;
            }

            .ps-how {
                padding: 58px 0;
            }

            .ps-cta {
                padding: 55px 0;
            }

            .ps-cta-panel {
                padding: 38px 20px;
            }

            .ps-cta-actions {
                flex-direction: column;
            }

            .resource-btn,
            .ps-btn {
                width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .ps-btn,
            .resource-btn,
            .ps-seg button {
                transition: none;
            }
        }

        /* ---------- Risk-to-reward additions ---------- */
        .pos { color: var(--resource-accent); }
        .neg { color: #ff7373; }

        .rr-targets {
            margin-bottom: 8px;
        }

        .rr-target {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) 96px 40px;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .rr-target .rr-tn {
            color: #aebbb5;
            font-size: 12px;
            font-weight: 800;
        }

        .rr-target input {
            width: 100%;
            min-height: 44px;
            padding: 10px 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #080c0a;
            color: #fff;
            font: inherit;
            font-size: 15px;
            outline: none;
            transition: border-color .2s;
        }

        .rr-target input:focus {
            border-color: var(--resource-accent);
            box-shadow: 0 0 0 3px rgba(200, 255, 40, .12);
        }

        .rr-target input::placeholder {
            color: #55625b;
        }

        .rr-target .rr-del {
            width: 40px;
            height: 40px;
            border: 1px solid var(--resource-border);
            border-radius: 10px;
            background: transparent;
            color: #8a978f;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: .2s;
        }

        .rr-target .rr-del:hover {
            color: #ff7373;
            border-color: rgba(255, 77, 77, .4);
        }

        .rr-target .rr-del:focus-visible {
            outline: 2px solid var(--resource-accent);
            outline-offset: 2px;
        }

        .rr-thead {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) 96px 40px;
            gap: 10px;
            margin-bottom: 6px;
            color: #7f8c85;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .6px;
        }

        .rr-addrow {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 18px;
        }

        .rr-addrow .ps-btn {
            min-height: 40px;
            padding: 8px 14px;
            font-size: 13px;
        }

        .rr-addrow small {
            color: #7f8c85;
            font-size: 12px;
        }

        .rr-bar {
            display: flex;
            height: 46px;
            margin: 0 0 8px;
            overflow: hidden;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 800;
        }

        .rr-bar div {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 54px;
            white-space: nowrap;
        }

        .rr-bar .risk {
            background: rgba(255, 77, 77, .88);
            color: #1c0707;
        }

        .rr-bar .reward {
            background: var(--resource-accent);
            color: #10150a;
        }

        .rr-barlabels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;
            color: #7f8c85;
            font-size: 11px;
        }

        .rr-mini {
            width: 100%;
            margin-top: 6px;
            border-collapse: collapse;
            font-size: 13px;
        }

        .rr-mini th {
            padding: 8px 6px;
            border-bottom: 1px solid var(--resource-border);
            color: #7f8c85;
            font-size: 11px;
            font-weight: 700;
            text-align: left;
        }

        .rr-mini td {
            padding: 9px 6px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            color: #cbd5cf;
        }

        .rr-mini th:not(:first-child),
        .rr-mini td:not(:first-child) {
            text-align: right;
            white-space: nowrap;
        }

        .rr-ladder {
            margin-top: 20px;
        }

        .rr-table-wrap {
            overflow: auto;
            border: 1px solid var(--resource-border);
            border-radius: 18px;
            background: #080c0a;
        }

        .rr-table {
            width: 100%;
            min-width: 560px;
            border-collapse: collapse;
            font-size: 14px;
        }

        .rr-table th {
            padding: 14px 16px;
            border-bottom: 1px solid #33483c;
            background: #111a17;
            color: var(--resource-accent);
            font-size: 11px;
            letter-spacing: .08em;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .rr-table td {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            color: #cbd5cf;
            white-space: nowrap;
        }

        .rr-table tr:last-child td {
            border-bottom: 0;
        }

        .rr-table td:first-child {
            color: #fff;
            font-weight: 800;
        }

        .rr-empty {
            padding: 26px 12px;
            color: var(--resource-muted);
            font-size: 14px;
            text-align: center;
        }

        .rr-note {
            margin-top: 16px;
            color: #7f8c85;
            font-size: 12px;
            line-height: 1.7;
        }

        .rr-links {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, .07);
            font-size: 13px;
        }

        .rr-links a {
            color: var(--resource-accent);
            font-weight: 700;
            text-decoration: none;
        }

        .rr-links a:hover {
            color: #e1ff8c;
        }

        @media (max-width: 600px) {
            .rr-target,
            .rr-thead {
                grid-template-columns: 36px minmax(0, 1fr) 76px 38px;
                gap: 8px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .rr-target input {
                transition: none;
            }
        }