/* Mockup composition mapped to the existing app. Pro keeps its original styles. */
body.pr-new-face #appView>.wrap{max-width:800px;width:100%;padding:24px 24px 125px}
#paycheckGuided304{padding:0;border:0;background:transparent;box-shadow:none}
#paycheckGuided304.active~.pr-look-hero{display:none}
#paycheckGuided304 .pg-card{display:flex;flex-direction:column;gap:16px;padding:16px;border:var(--pr-border) solid var(--pr-line);border-radius:24px;box-shadow:var(--pr-shadow);background:var(--pr-card);color:var(--pr-ink);min-width:0}
.pg-card *{box-sizing:border-box}.pg-hero{display:flex;gap:12px;align-items:center;min-width:0}.pg-hero>.coin{width:92px;height:92px;flex:none}.pg-hero h2{min-width:0;flex:1;margin:0!important;padding:14px;border:var(--pr-border) solid var(--pr-line);border-radius:20px;box-shadow:var(--pr-shadow);font:800 18px/1.4 'Nunito',system-ui,sans-serif!important;overflow-wrap:anywhere}
body[data-paycheck-look=simple] .pg-hero>.coin{display:none}body[data-paycheck-look=simple] .pg-hero h2{border:0;box-shadow:none;padding:0;font-family:system-ui,sans-serif!important}
#paycheckGuided304 :is(p,h3){margin:0}.pg-fields{display:flex;flex-direction:column;gap:14px;min-width:0}.pg-choices{display:flex;flex-direction:column;gap:10px}
#paycheckGuided304 .pg-choice{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin:0;padding:12px 14px;gap:4px;border:var(--pr-border) solid var(--pr-line);border-radius:18px;background:var(--pr-card);color:var(--pr-ink);box-shadow:none;min-height:60px}
.pg-choice b{font:800 20px/1.2 var(--pr-display)}.pg-choice span{font-size:14px;color:var(--pr-muted)}#paycheckGuided304 .pg-choice[aria-pressed=true]{background:var(--pr-gold);outline:2px solid var(--pr-line);outline-offset:1px}
.pg-field{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}.pg-field>label{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:800;min-width:0}.pg-field small{display:block;color:var(--pr-muted);font-size:12px;font-weight:600}
#paycheckGuided304 .pg-field :is(input,select){box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:auto;min-height:50px;padding:10px 12px;border:var(--pr-border) solid var(--pr-line);border-radius:14px;background:var(--pr-card);color:var(--pr-ink);font:700 16px/1.3 'Nunito',system-ui,sans-serif}
#paycheckGuided304 .pg-field :is(input,select)[aria-required=true]{border-left:6px solid #cda329;background:color-mix(in srgb,var(--pr-card) 90%,#ffe291 10%)}
.pg-help{margin:0;padding:8px 12px;border:var(--pr-border) solid var(--pr-line);border-radius:14px;background:var(--pr-blue);font-size:14px}.pg-help summary{min-height:32px;font-weight:800;cursor:pointer}.pg-help p{padding-top:10px}.pg-field .pg-help{padding:0;border:0;background:transparent}.pg-field .pg-help summary{font-size:13px;color:var(--pr-muted)}.pg-field .pg-help[open]{padding:8px;background:var(--pr-blue)}
.pg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.pg-two>div{display:flex;flex-direction:column;gap:12px;min-width:0}.pg-two .pg-field label{font-size:14px}.pg-two h3{font-size:17px!important}.pg-confirm{display:flex;align-items:flex-start;gap:10px;font-size:14px}.pg-confirm input{width:22px!important;height:22px;flex:none;margin:2px 0}
.pg-actions{display:flex;gap:10px;flex-wrap:wrap}.pg-actions>button{flex:1;min-width:100px}#paycheckGuided304 button:not(.pg-choice){min-height:50px;border:var(--pr-border) solid var(--pr-line);border-radius:18px;padding:10px 14px;margin:0;background:#ffc83d;color:#1f2d4d;box-shadow:var(--pr-shadow);font:800 18px/1.3 var(--pr-display)}
#paycheckGuided304 button.alt{background:var(--pr-card);color:var(--pr-ink)}#paycheckGuided304 button.pg-link{border:0;background:transparent;box-shadow:none;text-decoration:underline;font-size:14px;color:var(--pr-muted)}
body[data-paycheck-look=simple] #paycheckGuided304 button:not(.pg-choice):not(.alt):not(.pg-link){background:#649fdf;color:#112d52}body[data-paycheck-look=simple] .pr-view-nav button[aria-current=page]{background:#649fdf!important;color:#112d52!important}
.pg-dots{display:flex;justify-content:center;gap:8px}.pg-dots span{width:12px;height:12px;border:2px solid var(--pr-line);border-radius:50%;background:var(--pr-card)}.pg-dots .on{background:#ffc83d}.pg-dots .done{background:#3fbf85}body[data-paycheck-look=simple] .pg-dots :is(.on,.done){background:#649fdf}
.pg-steps{padding:0;list-style:none;counter-reset:pgstep;display:flex;flex-direction:column;gap:10px}.pg-steps li{counter-increment:pgstep;display:flex;gap:10px;align-items:center;padding:10px;border:var(--pr-border) solid var(--pr-line);border-radius:14px}.pg-steps li::before{content:counter(pgstep);display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--pr-gold);border:var(--pr-border) solid var(--pr-line)}
.pg-review{margin:0}.pg-review>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--pr-muted);padding:10px 0}.pg-review dt{color:var(--pr-muted)}.pg-review dd{margin:0;text-align:right;overflow-wrap:anywhere;min-width:0;font-weight:800}.pg-entry-list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:10px}.pg-entry-list li{display:flex;flex-direction:column;gap:4px;padding:12px;border:var(--pr-border) solid var(--pr-line);border-radius:18px;overflow-wrap:anywhere}.pg-entry-list span{font-size:14px;color:var(--pr-muted)}.pg-feedback{color:#b02228;font-weight:800}.pg-feedback:empty{display:none}.pg-note{padding:12px;background:var(--pr-gold);border-radius:14px}
body.pr-new-face .pr-view-nav{width:min(100%,800px)}body.pr-new-face .pr-view-nav button{overflow-wrap:anywhere;min-width:0}
@media(max-width:430px){body.pr-new-face #appView>.wrap{padding:18px 16px 125px}.pg-hero>.coin{width:76px;height:76px}.pg-hero h2{font-size:16px!important;padding:12px}.pg-two{gap:10px}.pg-two .pg-field>label{font-size:13px}.pg-review>div{flex-direction:column;gap:4px}.pg-review dd{text-align:left}}
@media(max-width:350px){.pg-two{grid-template-columns:minmax(0,1fr)}}
@media print{#paycheckGuided304{display:none!important}}
body.pr-new-face #appView>.wrap:has(#paycheckGuided304.active)>.pr-look-hero{display:none}

/* Pro uses the same question flow with its restrained visual treatment. */
body[data-paycheck-look=current] #paycheckGuided304{--pr-border:1px;--pr-line:#c5d7d1;--pr-shadow:none;--pr-card:#fff;--pr-ink:#193e38;--pr-muted:#526660;--pr-gold:#e7f2ec;--pr-blue:#eef4f7;--pr-display:system-ui,sans-serif;max-width:900px;margin-inline:auto}
body[data-paycheck-look=current] #paycheckGuided304 .coin{display:none}
body[data-paycheck-look=current] #paycheckGuided304 :is(.pg-card,.pg-choice,.pg-field input,.pg-field select,.pg-help,button){border-radius:8px}
body[data-paycheck-look=current] #paycheckGuided304 .pg-hero h2{padding:0;border:0;box-shadow:none;font-family:system-ui,sans-serif!important}
body[data-paycheck-look=current] #paycheckGuided304 button:not(.pg-choice):not(.alt):not(.pg-link){background:#246b5d;color:#fff}

/* Keep legacy floating controls outside the approved guide's visual surface. */

#appView > .wrap:has(#paycheckGuided304.active){max-width:none}
#appView > .wrap:has(#paycheckGuided304.active){padding:0!important;max-width:none!important;width:100%}
#paycheckGuided304{padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}

/* Shared-profile connection controls are hidden in all Paycheck Rescue views. */
#planner-connections{display:none!important}

/* Only the website navigation stays above the page scroll. */
.shared-site-navigation{position:sticky;top:0;z-index:1000;background:#f7f8f6;margin-bottom:0;padding-top:8px;padding-bottom:8px;max-width:none}
#appView .tab-strip{position:static}
#paycheckGuided304 iframe{overflow:hidden}