.hosted-banner{text-align:center;padding:9px;background:#e8f1ee;color:#215c54;font:14px Arial,sans-serif}.hosted-page{max-width:920px;padding:60px 24px 90px;min-height:60vh}.hosted-page h1{font-size:clamp(32px,5vw,50px);margin-bottom:24px}.hosted-page section{margin:30px 0}.hosted-page h2{font-size:24px}.hosted-page p{font-size:17px;line-height:1.7;margin:16px 0}.hosted-page label{display:block;font-size:17px}.hosted-page input{display:block;width:100%;max-width:420px;border:1px solid #bbcfc9;padding:13px;border-radius:8px;margin:9px 0 20px;font:17px Arial,sans-serif}.hosted-payment>div{margin-bottom:18px}#tv-payment-status{font-size:15px;line-height:1.5}.hosted-payment .text-button{margin-top:14px}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}
.hosted-page{overflow-wrap:anywhere}.hosted-page input{box-sizing:border-box}.hosted-page .site-button{max-width:100%}

/* Hosted mobile builder: one header row and an opaque, full-width sticky tab bar. */
@media (max-width:880px) {
  #app-shell { --topbar:calc(68px + env(safe-area-inset-top, 0px)); }
  #app-shell .topbar .brand { display:none; }
  #app-shell .builder-mode-switch { top:calc(10px + env(safe-area-inset-top, 0px)); }
  #app-shell[data-builder-mode="customize"] .editor-pane { overflow:hidden; }
  #app-shell[data-builder-mode="customize"] .customize-tabs { margin-inline:-16px; padding-inline:16px; }
}

/* Public mobile navigation keeps the two resume actions in their own row. */
.site-nav .hosted-login-mobile { display:none; }
@media (max-width:960px) {
  .site-header-actions .hosted-login-desktop { display:none; }
  .site-nav .hosted-login-mobile { display:flex; align-items:center; min-height:44px; }
  .site-header-actions { gap:12px; }
  .site-header-actions > .site-resumes-link { min-height:46px; flex-shrink:0; }
  .site-header-actions > .site-button { padding-inline:16px; }
}
/* Readable footer groups and comfortable touch targets on small screens. */
@media (max-width:600px) {
  .site-footer .site-footer-main { grid-template-columns:minmax(0,1fr); gap:28px; padding-block:32px; }
  .site-footer .site-footer-brand { grid-column:1; }
  .site-footer .site-footer-brand > p { font-size:15px; line-height:1.7; }
  .site-footer .brand-label { display:none; }
  .site-footer .site-footer-main nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; align-content:start; }
  .site-footer .site-footer-main nav h2 { grid-column:1/-1; grid-row:1; font-size:15px; margin:0 0 8px; }
  .site-footer .site-footer-main nav a { display:flex; align-items:center; min-height:44px; margin:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
  .site-footer .site-footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; padding-block:20px; }
  .site-footer .site-footer-bottom .site-text-link { min-height:44px; text-align:left; }
}

/* Keep renewal terms together with the offer, without emphasis inside the copy. */
.purchase-offer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px 20px; }
.purchase-offer .purchase-eyebrow { letter-spacing:.4px; }
.purchase-offer .purchase-renewal { grid-column:1/-1; margin:0; font-size:15px; line-height:1.65; font-weight:400; color:#415c50; }
.purchase-consent { margin:0 0 16px; font-size:15px; line-height:1.65; font-weight:400; color:#415c50; }
.purchase-ready { background:#ceeee2; color:#1c624e; }
.purchase-ready svg { color:#237857; }
/* Preserve focus indicators on controls, not non-interactive layout surfaces. */
#workspace:focus, #editor-scroll:focus { outline:none; }
.editor-primary-action { position:relative; display:inline-flex; flex-shrink:0; }
.editor-footer.has-signup-note { display:grid; grid-template-columns:minmax(0,1fr) auto; height:auto; min-height:122px; gap:10px 14px; }
.builder-signup-note { grid-column:1/-1; margin:0; color:#586f62; font-size:13px; line-height:1.5; }
.builder-signup-note a { text-underline-offset:3px; }
.builder-action-notice { position:absolute; bottom:0; right:0; z-index:3; width:max(100%,240px); max-width:calc(100vw - 32px); min-height:100%; padding:12px 16px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#873e30; color:white; font-size:14px; line-height:1.45; text-align:center; box-shadow:0 5px 20px #873e3020; }
@media(max-width:600px){ .editor-footer.has-signup-note { padding-block:12px; } .purchase-offer { gap:14px 12px; } }

/* Slightly clearer builder guidance, with the original spacing and type scale. */
#workspace .info-box{background:#f1f6f2;border-color:#d3e0d7;color:#38594b}
#workspace .info-box.blue{background:#edf4f7;border-color:#d4e1e7;color:#36586a}
#workspace .field-hint,#workspace .section-helper{color:#456255}

/* Isolated in-memory preview; the decoded server PNG remains below it. */
.live-preview-viewport{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#fff;z-index:1}
.live-preview-canvas{transform-origin:top left;pointer-events:none}

.tv-card-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.tv-card-field{padding:15px 12px;border:1px solid #bbcfc9;background:#fff;border-radius:5px;min-height:50px}.tv-card-field.StripeElement--focus{border-color:#24645e;box-shadow:0 0 0 2px #24645e24}.tv-card-field.StripeElement--invalid{border-color:#a44032}.hosted-payment .field{min-width:0}.hosted-payment label{display:block;margin-bottom:8px}.tv-card-field iframe{max-width:100%}

/* Studio branding stays visible while ordinary customer navigation is preserved. */
.purchase-header-inner:has(.studio-brand){justify-content:flex-start;gap:clamp(24px,8vw,120px)}

/* Give Studio a quiet band above every page, including fixed builder and download views. */
.studio-account{--studio-top-space:55px;padding-top:var(--studio-top-space)}
.studio-account::before{content:"";position:fixed;inset:0 0 auto;height:var(--studio-top-space);background:#fff;z-index:46;pointer-events:none}
.studio-account .site-header,.studio-account #app-shell .topbar,.studio-account #checkout-screen{top:var(--studio-top-space)}
.studio-account #app-shell .sidebar,.studio-account #app-shell .workspace,.studio-account #app-shell .preview-pane.mobile-open{top:calc(var(--topbar) + var(--studio-top-space))}
.studio-account .site-header .site-brand,.studio-account #app-shell .topbar .brand,.studio-account #checkout-screen .purchase-header .brand{transform:translateX(15%)}
@media(max-width:960px){.studio-account{--studio-top-space:48px}}
@media(max-width:640px){.studio-account{--studio-top-space:46px}}
@media(max-width:880px){
 .studio-account #app-shell{--topbar:calc(118px + env(safe-area-inset-top, 0px))}
 .studio-account #app-shell .topbar .brand{display:flex}
 .studio-account #app-shell .builder-mode-switch{top:calc(60px + env(safe-area-inset-top, 0px))}
}

.tv-card-field,.hosted-payment label{cursor:text}

/* Fill the mobile preview evenly; page controls float on the resume itself. */
@media (max-width:880px) {
  #app-shell[data-builder-mode="customize"] {
    --mobile-preview-height:min(49.5dvh, clamp(246.4px, calc(33.88dvh + 28.6px), 325.6px));
  }
  #app-shell[data-builder-mode="customize"] .workspace {
    grid-template-rows:var(--mobile-preview-height) minmax(0, 1fr);
  }
  #app-shell[data-builder-mode="customize"] .preview-pane {
    justify-content:center; padding:10px 16px;
  }
  #app-shell[data-builder-mode="customize"] .preview-sheet-container {
    max-width:min(100%, calc((var(--mobile-preview-height) - 20px) * var(--mobile-preview-ratio, .773)));
  }
  #app-shell[data-builder-mode="customize"] .preview-toolbar {
    left:50%; right:auto; bottom:8px; transform:translateX(-50%); z-index:3;
    width:max-content; min-height:0; padding:0;
    border:0; border-radius:999px; background:#fffffff2;
    box-shadow:inset 0 0 0 1px #dbe5df, 0 2px 8px #19342a14;
  }
  #app-shell[data-builder-mode="customize"] .page-navigation .icon-button { width:36px; height:36px; background:transparent; border-color:transparent; box-shadow:none; }
  #app-shell[data-builder-mode="customize"] .page-navigation span { min-width:28px; font-size:10px; }
  #app-shell[data-builder-mode="customize"] .page-navigation svg { width:14px; height:14px; }
  #app-shell[data-builder-mode="customize"] .page-navigation .icon-button:disabled { cursor:default; }
  #app-shell[data-builder-mode="customize"] .template-filters {
    order:2; margin-block:4px 14px;
  }
  #app-shell[data-builder-mode="customize"] #form-content .template-grid { order:1; }
}

/* Keep examples secondary to entered values; subtly strengthen field labels. */
#app-shell { --ui-placeholder:#c7cec9; }
#app-shell .input::placeholder, #app-shell textarea::placeholder { color:var(--ui-placeholder); -webkit-text-fill-color:var(--ui-placeholder); opacity:1; }
#app-shell .field > label, #app-shell .field-label { color:#556e5a; }

/* The sidebar/footer already communicate progress on desktop. */
@media (min-width:881px) {
  #app-shell[data-builder-mode="edit"] .step-heading .step-kicker { display:none; }
}