/* The Hwb Collective Interview Coach V1.6.2
   Scoped to the interview page so the rest of the website remains unchanged. */
.interview-coach-app {
  --muted: var(--ink-soft);
  --brand: var(--sage);
  --brand-dark: var(--sage-dark);
  --brand-soft: var(--surface-alt);
  --orange: var(--terracotta);
  --warning-bg: color-mix(in srgb, var(--cream) 42%, var(--surface));
  --warning-line: #9b681e;
  --success-bg: color-mix(in srgb, var(--surface-alt) 78%, #dfeede);
  --success-line: #537657;
  --error-bg: color-mix(in srgb, var(--surface) 78%, #ffe0db);
  --error-line: #a84b3b;
  --focus: #1f6fb2;
  color: var(--ink);
  font-family: inherit;
  line-height: 1.6;
}
.interview-coach-app [hidden] { display:none !important; }


  .interview-coach-app *{ box-sizing: border-box; }

  

  

  .interview-coach-app button, .interview-coach-app input, .interview-coach-app select, .interview-coach-app textarea{ font: inherit; }
  .interview-coach-app button{ cursor: pointer; }
  .interview-coach-app button:disabled{ cursor: not-allowed; opacity: .56; }

  

  

  .interview-coach-app .page-shell{
    width: min(1160px, calc(100% - 28px));
    margin: 24px auto 48px;
  }

  .interview-coach-app .app-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
  }

  .interview-coach-app .eyebrow, .interview-coach-app .step-label, .interview-coach-app .question-type, .interview-coach-app .feedback-kicker{
    margin: 0 0 4px;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .interview-coach-app h1, .interview-coach-app h2, .interview-coach-app h3, .interview-coach-app h4{
    margin-top: 0;
    font-family: "Nunito Sans", "Atkinson Hyperlegible", sans-serif;
    line-height: 1.18;
    letter-spacing: -.015em;
  }

  .interview-coach-app h1{ margin-bottom: 4px; font-size: clamp(32px, 5vw, 48px); }
  .interview-coach-app h2{ margin-bottom: 12px; font-size: clamp(28px, 4vw, 38px); }
  .interview-coach-app h3{ margin-bottom: 12px; font-size: 22px; }
  .interview-coach-app h4{ margin-bottom: 8px; font-size: 17px; }

  .interview-coach-app .tagline{ max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; }

  .interview-coach-app .header-actions{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
  }

  .interview-coach-app .version-label{
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 700;
  }

  .interview-coach-app .panel{
    padding: clamp(22px, 5vw, 44px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .interview-coach-app [hidden]{ display: none !important; }

  .interview-coach-app .setup-heading{
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .interview-coach-app .mini-owl{
    display: grid;
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8ef, var(--cream));
    font-size: 44px;
  }

  .interview-coach-app .intro{ max-width: 760px; margin: 0; color: var(--muted); font-size: 17px; }

  .interview-coach-app .field-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px;
    margin-top: 28px;
  }

  .interview-coach-app .compact-grid{ margin-top: 24px; }
  .interview-coach-app .field{ min-width: 0; }
  .interview-coach-app .field.full{ grid-column: 1 / -1; }

  .interview-coach-app label, .interview-coach-app legend{ display: block; margin-bottom: 7px; font-weight: 700; }
  .interview-coach-app .optional{ color: var(--muted); font-size: .9em; font-weight: 400; }

  .interview-coach-app input[type="text"], .interview-coach-app select, .interview-coach-app textarea{
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #748078;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
  }

  .interview-coach-app textarea{ resize: vertical; }

  .interview-coach-app input:focus, .interview-coach-app select:focus, .interview-coach-app textarea:focus, .interview-coach-app button:focus, .interview-coach-app a:focus{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .interview-coach-app .hint, .interview-coach-app .transcript-meta{
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
  }

  .interview-coach-app .choice-block{
    margin: 26px 0 0;
    padding: 0;
    border: 0;
  }

  .interview-coach-app .choice-grid{ display: grid; gap: 10px; }
  .interview-coach-app .choice-grid.four{ grid-template-columns: repeat(4, 1fr); }
  .interview-coach-app .choice-grid.three{ grid-template-columns: repeat(3, 1fr); }

  .interview-coach-app .choice-card{
    position: relative;
    margin: 0;
    cursor: pointer;
  }

  .interview-coach-app .choice-card input{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .interview-coach-app .choice-card span{
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #91a097;
    border-radius: 12px;
    background: #fff;
    text-align: center;
  }

  .interview-coach-app .choice-card input:checked + span{
    border: 2px solid var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
  }

  .interview-coach-app .choice-card input:focus + span{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .interview-coach-app .privacy-box{
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--brand);
    border-radius: 14px;
    background: var(--brand-soft);
  }

  .interview-coach-app .privacy-box h3{ margin-bottom: 8px; }
  .interview-coach-app .privacy-box ul{ margin: 0 0 15px; padding-left: 22px; }
  .interview-coach-app .check-line{ display: flex; gap: 11px; align-items: flex-start; margin: 0; }
  .interview-coach-app .check-line input{ width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--brand-dark); }

  .interview-coach-app .button-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
  .interview-coach-app .button-row.end{ justify-content: flex-end; }
  .interview-coach-app .button-row.spread{ justify-content: space-between; }
  .interview-coach-app .button-cluster{ display: flex; flex-wrap: wrap; gap: 10px; }

  .interview-coach-app .primary-button, .interview-coach-app .secondary-button, .interview-coach-app .quiet-button, .interview-coach-app .record-button{
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
  }

  .interview-coach-app .primary-button{
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
  }

  .interview-coach-app .primary-button:hover:not(:disabled){ background: var(--brand-dark); }

  .interview-coach-app .secondary-button{
    border: 1px solid #66716a;
    background: #fff;
    color: var(--ink);
  }

  .interview-coach-app .quiet-button{
    border: 1px solid var(--line);
    background: rgba(255,255,255,.76);
    color: var(--ink);
  }

  .interview-coach-app .danger-text{ color: #8b1f1f; }

  .interview-coach-app .notice{
    margin: 0 0 18px;
    padding: 13px 15px;
    border-left: 5px solid #777;
    border-radius: 4px;
  }

  .interview-coach-app .notice.warning{ border-color: var(--warning-line); background: var(--warning-bg); }
  .interview-coach-app .notice.error{ border-color: var(--error-line); background: var(--error-bg); }
  .interview-coach-app .answer-card .notice, .interview-coach-app form .notice{ margin-top: 16px; margin-bottom: 0; }

  .interview-coach-app .interview-toolbar{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }

  .interview-coach-app .progress-track{
    width: min(420px, 60vw);
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #e1dfd6;
  }

  .interview-coach-app .progress-track span{
    display: block;
    width: 10%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--orange));
    transition: width .35s ease;
  }

  .interview-coach-app .interview-layout{
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .interview-coach-app .coach-card{
    position: sticky;
    top: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(155deg, #fff9f1 0%, #f2ead8 100%);
    text-align: center;
  }

  .interview-coach-app .coach-card h2{ margin: 7px 0 0; font-size: 27px; }
  .interview-coach-app .coach-role{ margin: 0; color: var(--muted); font-size: 14px; }
  .interview-coach-app .coach-message{ margin: 16px 0 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.72); text-align: left; }

  .interview-coach-app .owl-avatar{ width: min(220px, 100%); margin: 0 auto; }
  .interview-coach-app .owl-avatar svg{ display: block; width: 100%; overflow: visible; }
  .interview-coach-app .owl-shadow{ fill: rgba(36, 51, 44, .13); }
  .interview-coach-app .owl-body{ fill: #9b765c; stroke: #5e493d; stroke-width: 4; }
  .interview-coach-app .owl-wing{ fill: #795b49; stroke: #5e493d; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
  .interview-coach-app .eye-patch{ fill: #f4e9d6; stroke: #5e493d; stroke-width: 3; }
  .interview-coach-app .owl-eye{ fill: #24332c; }
  .interview-coach-app .eye-shine{ fill: white; }
  .interview-coach-app .owl-brow{ fill: none; stroke: #5e493d; stroke-linecap: round; stroke-width: 6; }
  .interview-coach-app .beak-top{ fill: var(--orange); stroke: #9b592b; stroke-width: 3; }
  .interview-coach-app .beak-lower{ fill: #d97942; stroke: #9b592b; stroke-width: 3; transform-box: fill-box; transform-origin: top; }
  .interview-coach-app .owl-belly{ fill: #e8d8bc; }
  .interview-coach-app .belly-mark, .interview-coach-app .owl-foot{ fill: none; stroke: #795b49; stroke-linecap: round; stroke-width: 5; }

  .interview-coach-app .owl-avatar.talking .beak-lower{ animation: beak-talk .25s ease-in-out infinite alternate; }
  .interview-coach-app .owl-avatar.talking .right{ animation: wing-wave .45s ease-in-out infinite alternate; }
  .interview-coach-app .owl-avatar.thinking .owl-brow.left{ transform: translateY(-5px); }
  .interview-coach-app .owl-avatar.thinking svg{ animation: owl-bob 1s ease-in-out infinite; }

  .interview-coach-app .interview-main{ display: grid; gap: 16px; }
  .interview-coach-app .question-card, .interview-coach-app .answer-card, .interview-coach-app .feedback-card{
    padding: clamp(20px, 4vw, 30px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(70, 76, 58, .08);
  }

  .interview-coach-app .speech-bubble{
    position: relative;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--brand-soft);
  }

  .interview-coach-app .speech-bubble::before{
    content: "";
    position: absolute;
    top: 20px;
    left: -12px;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    background: var(--brand-soft);
  }

  .interview-coach-app .speech-bubble p{ position: relative; margin: 0; font-size: clamp(21px, 3.2vw, 30px); font-weight: 700; line-height: 1.35; }

  .interview-coach-app .feedback-card{ border-left: 6px solid var(--success-line); background: var(--success-bg); }
  .interview-coach-app .feedback-card h3{ margin-bottom: 15px; }
  .interview-coach-app .feedback-columns{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .interview-coach-app .feedback-columns ul{ margin: 0; padding-left: 22px; }
  .interview-coach-app .feedback-columns p{ margin: 0; }

  .interview-coach-app .answer-heading{ display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
  .interview-coach-app .timer{ min-width: 74px; padding: 8px 12px; border-radius: 9px; background: #f1eee6; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; }
  .interview-coach-app .record-controls{ display: flex; flex-wrap: wrap; gap: 10px; margin: 7px 0 0; }

  .interview-coach-app .file-picker{
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
  }

  .interview-coach-app .file-input{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .interview-coach-app .file-input:focus + .file-picker{
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .interview-coach-app .file-input:disabled + .file-picker{
    cursor: not-allowed;
    opacity: .56;
  }

  .interview-coach-app .record-button{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #9f2727;
    background: #fff;
    color: #8b1f1f;
  }

  .interview-coach-app .record-button.recording{ background: #9f2727; color: #fff; }
  .interview-coach-app .record-button.recording-window-open{ background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
  .interview-coach-app .record-dot{ width: 13px; height: 13px; border-radius: 50%; background: #b52323; }
  .interview-coach-app .record-button.recording .record-dot{ background: white; animation: pulse 1s ease-in-out infinite; }
  .interview-coach-app .recording-status{ min-height: 24px; margin: 10px 0 18px; color: var(--muted); }
  .interview-coach-app .transcript-meta{ display: flex; justify-content: space-between; gap: 16px; }

  .interview-coach-app .thinking-box{
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-radius: 12px;
    background: var(--brand-soft);
  }

  .interview-coach-app .thinking-dots{ display: flex; gap: 4px; }
  .interview-coach-app .thinking-dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: dot-bounce .8s ease-in-out infinite alternate; }
  .interview-coach-app .thinking-dots i:nth-child(2){ animation-delay: .15s; }
  .interview-coach-app .thinking-dots i:nth-child(3){ animation-delay: .3s; }

  .interview-coach-app .report-panel{ overflow: hidden; }
  .interview-coach-app .report-hero{ display: flex; gap: 20px; align-items: center; margin: -44px -44px 30px; padding: 36px 44px 28px; background: linear-gradient(135deg, var(--brand-soft), rgba(238,219,181,.45)); }
  .interview-coach-app .celebration-owl{ display: grid; width: 92px; height: 92px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: white; font-size: 50px; animation: celebrate .8s ease-out; }
  .interview-coach-app .report-hero h2{ margin-bottom: 7px; }
  .interview-coach-app .report-overall{ max-width: 780px; margin: 0; font-size: 18px; }
  .interview-coach-app .report-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
  .interview-coach-app .report-section{ margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .interview-coach-app .report-section:first-child{ margin-top: 0; }
  .interview-coach-app .strength-section{ background: var(--success-bg); border-color: #c9ddc8; }
  .interview-coach-app .report-section ul, .interview-coach-app .report-section ol{ margin-bottom: 0; padding-left: 24px; }
  .interview-coach-app .priority-item + .priority-item{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .interview-coach-app .priority-item h4, .interview-coach-app .priority-item p{ margin-bottom: 6px; }
  .interview-coach-app .priority-action{ color: var(--brand-dark); }
  .interview-coach-app .highlight-list{ display: grid; gap: 12px; }
  .interview-coach-app .highlight-item{ padding: 15px; border-left: 4px solid var(--brand); background: #f8f9f7; }
  .interview-coach-app .highlight-item p{ margin: 5px 0 0; }
  .interview-coach-app .plan-section{ background: #fff9ef; }
  .interview-coach-app .closing-message{ margin: 22px 0 0; padding: 20px 24px; border-left: 5px solid var(--terracotta); background: #fff5ed; font-size: 18px; }

  .interview-coach-app .app-footer{ margin-top: 22px; color: var(--muted); font-size: 14px; text-align: center; }
  .interview-coach-app .app-footer p{ margin: 4px 0; }
  .interview-coach-app .sr-status{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

  @keyframes beak-talk { to { transform: scaleY(.55) translateY(-3px); } }
  @keyframes wing-wave { to { transform: rotate(-9deg) translateY(-4px); } }
  @keyframes owl-bob { 50% { transform: translateY(-5px); } }
  @keyframes pulse { 50% { transform: scale(.7); opacity: .65; } }
  @keyframes dot-bounce { to { transform: translateY(-5px); opacity: .55; } }
  @keyframes celebrate { 0% { transform: rotate(-12deg) scale(.7); } 60% { transform: rotate(8deg) scale(1.1); } }

  @media (max-width: 850px) {
    .interview-coach-app .choice-grid.four{ grid-template-columns: repeat(2, 1fr); }
    .interview-coach-app .interview-layout{ grid-template-columns: 1fr; }
    .interview-coach-app .coach-card{ position: static; display: grid; grid-template-columns: 110px 1fr; column-gap: 14px; text-align: left; }
    .interview-coach-app .owl-avatar{ grid-row: 1 / 4; width: 110px; }
    .interview-coach-app .coach-card h2{ align-self: end; }
    .interview-coach-app .coach-message{ margin-top: 8px; }
    .interview-coach-app .speech-bubble::before{ display: none; }
    .interview-coach-app .report-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 620px) {
    .interview-coach-app .page-shell{ width: min(100% - 18px, 1160px); margin-top: 14px; }
    .interview-coach-app .app-header{ display: block; }
    .interview-coach-app .header-actions{ justify-content: space-between; }
    .interview-coach-app .field-grid, .interview-coach-app .choice-grid.three, .interview-coach-app .choice-grid.four, .interview-coach-app .feedback-columns{ grid-template-columns: 1fr; }
    .interview-coach-app .field.full{ grid-column: auto; }
    .interview-coach-app .panel, .interview-coach-app .question-card, .interview-coach-app .answer-card, .interview-coach-app .feedback-card{ border-radius: 15px; }
    .interview-coach-app .mini-owl{ width: 60px; height: 60px; font-size: 32px; }
    .interview-coach-app .coach-card{ grid-template-columns: 82px 1fr; }
    .interview-coach-app .owl-avatar{ width: 82px; }
    .interview-coach-app .button-row.spread, .interview-coach-app .report-actions{ align-items: stretch; flex-direction: column; }
    .interview-coach-app .button-row.spread > button, .interview-coach-app .button-cluster, .interview-coach-app .button-cluster button{ width: 100%; }
    .interview-coach-app .transcript-meta{ display: block; }
    .interview-coach-app .transcript-meta span{ display: block; }
    .interview-coach-app .report-hero{ margin: -22px -22px 22px; padding: 24px 22px; align-items: flex-start; }
    .interview-coach-app .celebration-owl{ width: 64px; height: 64px; font-size: 36px; }
  }

  @media (prefers-reduced-motion: reduce) {
    
    .interview-coach-app *, .interview-coach-app *::before, .interview-coach-app *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }

  @media print {
    
    .interview-coach-app .app-header, .interview-coach-app #setup-view, .interview-coach-app #interview-view, .interview-coach-app .app-footer, .interview-coach-app .report-actions, .interview-coach-app #sound-toggle, .interview-coach-app #environment-warning{ display: none !important; }
    .interview-coach-app .page-shell{ width: 100%; margin: 0; }
    .interview-coach-app .report-panel{ padding: 0; border: 0; box-shadow: none; }
    .interview-coach-app .report-hero{ margin: 0 0 20px; padding: 20px; }
    .interview-coach-app .report-section{ break-inside: avoid; }
  }



  .interview-coach-app .setup-section{
    margin: 28px 0 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfa;
  }

  .interview-coach-app .setup-section > legend{
    padding: 0 8px;
    font-family: "Nunito Sans", "Atkinson Hyperlegible", sans-serif;
    font-size: 22px;
  }

  .interview-coach-app .section-help{
    margin: 0;
    color: var(--muted);
  }

  .interview-coach-app .role-grid{ margin-top: 20px; }
  .interview-coach-app .other-sector-wrap, .interview-coach-app .other-role-wrap{ margin-top: 18px; padding-top: 2px; }
  .interview-coach-app .paste-button{
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700;
  }

  .interview-coach-app .preference-block{ padding-top: 4px; }
  .interview-coach-app .preference-explainer{
    margin: 10px 0 20px;
    padding: 16px 18px;
    border-left: 5px solid var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
  }
  .interview-coach-app .preference-explainer p{ margin: 5px 0 0; }
  .interview-coach-app .preference-subheading{ margin: 22px 0 10px; font-size: 18px; }
  .interview-coach-app .preference-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .interview-coach-app .preference-details-panel{
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  .interview-coach-app .preference-details-panel summary{
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 700;
  }
  .interview-coach-app .details-inner{ padding: 0 18px 20px; }
  .interview-coach-app .coaching-style-row{ max-width: 560px; }

  .interview-coach-app .mini-mascot-shell, .interview-coach-app .modal-mascot-badge, .interview-coach-app .privacy-mini-avatar, .interview-coach-app .mascot-avatar-shell{
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: linear-gradient(145deg, #f7f3e9, #e8eee5);
    box-shadow: 0 10px 28px rgba(36, 51, 44, .12);
  }

  .interview-coach-app .mini-mascot-shell{ width: 112px; height: 112px; flex: 0 0 auto; }
  .interview-coach-app .mini-mascot{
    width: 94%;
    height: 94%;
    object-fit: contain;
    object-position: center bottom;
  }

  .interview-coach-app .modal-mascot-row{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
  }
  .interview-coach-app .modal-mascot-row h2{ margin-bottom: 0; }
  .interview-coach-app .modal-mascot-badge{ width: 104px; height: 104px; flex: 0 0 auto; }
  .interview-coach-app .modal-mascot-badge img, .interview-coach-app .privacy-mini-avatar img, .interview-coach-app .mascot-avatar-shell img{
    width: 94%;
    height: 94%;
    object-fit: contain;
    object-position: center bottom;
  }

  .interview-coach-app .privacy-box-heading{ display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
  .interview-coach-app .privacy-box-heading h3, .interview-coach-app .privacy-box-heading p{ margin-bottom: 4px; }
  .interview-coach-app .privacy-mini-avatar{ width: 78px; height: 78px; flex: 0 0 auto; background: #fff; }

  .interview-coach-app .mascot-avatar-shell{
    width: min(220px, 100%);
    height: 220px;
    min-height: 0;
    margin: 0 auto;
  }
  .interview-coach-app .mascot-avatar-shell.talking img{ transform: translateY(-2px) scale(1.02); }
  .interview-coach-app .mascot-avatar-shell.thinking img{ animation: mascotThink 1.2s ease-in-out infinite; }
  @keyframes mascotThink { 50% { transform: translateY(-5px) rotate(1deg); } }

  .interview-coach-app .avatar-image{
    display: block;
    object-fit: contain !important;
    object-position: center bottom !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .interview-coach-app .report-mascot{ width: 132px; height: 132px; object-fit: contain; }

  .interview-coach-app .modal-backdrop{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(36, 51, 44, .72);
    backdrop-filter: blur(5px);
  }
  .interview-coach-app .modal-card{
    width: min(700px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: clamp(22px, 5vw, 38px);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
  }
  .interview-coach-app .analytics-summary{ padding: 16px; border-radius: 14px; background: var(--brand-soft); }
  .interview-coach-app .analytics-summary ul{ padding-left: 22px; }

  .interview-coach-app .loading-card{ text-align: center; }
  .interview-coach-app .loading-card img{
    display: block;
    width: 148px;
    height: 148px;
    margin: 0 auto 12px;
    object-fit: contain;
  }
  .interview-coach-app .loading-bar{ height: 10px; overflow: hidden; border-radius: 99px; background: var(--brand-soft); }
  .interview-coach-app .loading-bar span{ display: block; width: 35%; height: 100%; border-radius: 99px; background: var(--brand); animation: loadMove 1.5s ease-in-out infinite; }
  @keyframes loadMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

  @media (max-width: 700px) {
    .interview-coach-app .setup-section{ padding: 16px; }
    .interview-coach-app .mini-mascot-shell{ width: 84px; height: 84px; }
    .interview-coach-app .modal-mascot-row{ align-items: flex-start; }
    .interview-coach-app .modal-mascot-badge{ width: 82px; height: 82px; }
    .interview-coach-app .mascot-avatar-shell{ width: 150px; height: 150px; }
    .interview-coach-app .privacy-box-heading{ align-items: flex-start; }
    .interview-coach-app .privacy-mini-avatar{ width: 64px; height: 64px; }
  }

/* V1.6 website-hosted Interview Coach */
.interview-coach-app .api-frame, .interview-coach-app .api-form{ position: fixed !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; left: -10000px !important; top: -10000px !important; }
.interview-coach-app .header-home-link{ text-decoration: none; display: inline-flex; align-items: center; }
.interview-coach-app .record-button.recording{ background: #fff1ee; color: #8f2e25; border-color: #c53b30; box-shadow: 0 0 0 4px rgba(197,59,48,.12); }
.interview-coach-app .record-button.recording .record-dot{ animation: recordPulse 1.1s ease-in-out infinite; }
@keyframes recordPulse { 0%,100% { transform: scale(.85); opacity:.55; } 50% { transform:scale(1.15); opacity:1; } }
.interview-coach-app .microphone-help{ margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--ink); }
.interview-coach-app .microphone-help summary{ cursor: pointer; font-weight: 800; }
.interview-coach-app .microphone-help ul{ margin-bottom: 0; }
@media (max-width: 700px) { .interview-coach-app .header-actions{ align-items: flex-end; } .interview-coach-app .header-home-link{ display:none; } }

/* Hwb website integration and visual alignment */
.interview-coach-app .interview-coach-site-hero {
  padding: 64px 0 36px;
  background:
    radial-gradient(circle at 86% 28%, rgba(233,138,82,.18), transparent 28rem),
    radial-gradient(circle at 8% 5%, rgba(216,202,145,.22), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--paper) 94%, #fff), color-mix(in srgb, var(--surface-alt) 86%, #e8eee8));
}
.interview-coach-app .page-shell {
  width: min(var(--max), calc(100% - 36px));
  margin: 0 auto;
}
.interview-coach-app .app-header { margin:0; align-items:center; }
.interview-coach-app .app-header > div:first-of-type { max-width:780px; }
.interview-coach-app .interview-live-status { margin-bottom:18px; }
.interview-coach-app .app-header h1 {
  margin:0;
  max-width:none;
  font-family:inherit;
  font-size:clamp(3rem,7vw,6.4rem);
  font-weight:850;
  line-height:.96;
  letter-spacing:-.05em;
}
.interview-coach-app .tagline { margin-top:18px; max-width:720px; font-size:clamp(1.05rem,1.8vw,1.3rem); }
.interview-coach-app .header-actions { align-self:flex-start; }
.interview-coach-app .version-label { border:1px solid var(--line); background:var(--surface); box-shadow:0 8px 22px rgba(24,37,31,.08); }
.interview-coach-app .interview-coach-workspace { padding-top:54px; }
.interview-coach-app .panel,
.interview-coach-app .question-card,
.interview-coach-app .answer-card,
.interview-coach-app .feedback-card {
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.interview-coach-app .panel { padding:clamp(24px,5vw,50px); }
.interview-coach-app .setup-section {
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-alt) 62%, var(--surface));
}
.interview-coach-app .setup-section > legend,
.interview-coach-app h1,
.interview-coach-app h2,
.interview-coach-app h3,
.interview-coach-app h4 { font-family:inherit; }
.interview-coach-app input[type="text"],
.interview-coach-app select,
.interview-coach-app textarea {
  min-height:50px;
  border-color:var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink);
}
.interview-coach-app textarea { min-height:170px; }
.interview-coach-app .choice-card span {
  border:2px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.interview-coach-app .choice-card input:checked + span {
  border-color:var(--terracotta);
  background:color-mix(in srgb, var(--surface) 72%, #fff0e5);
  color:var(--ink);
  box-shadow:0 0 0 3px rgba(233,138,82,.14);
}
.interview-coach-app .primary-button,
.interview-coach-app .secondary-button,
.interview-coach-app .quiet-button,
.interview-coach-app .record-button,
.interview-coach-app .file-picker {
  min-height:52px;
  padding:13px 20px;
  border-radius:999px;
  font-weight:850;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.interview-coach-app .primary-button {
  border-color:transparent;
  color:#172019;
  background:linear-gradient(135deg,var(--terracotta),#f1a15c);
}
.interview-coach-app .primary-button:hover:not(:disabled),
.interview-coach-app .secondary-button:hover:not(:disabled),
.interview-coach-app .quiet-button:hover:not(:disabled),
.interview-coach-app .record-button:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(25,42,34,.16);
}
.interview-coach-app .secondary-button,
.interview-coach-app .quiet-button { border-color:var(--line); background:var(--surface); color:var(--ink); }
.interview-coach-app .record-button { border-color:#ad302b; background:var(--surface); color:#962b26; }
.interview-coach-app .record-button.recording { color:#fff; background:#a62f2a; }
.interview-coach-app .privacy-box,
.interview-coach-app .analytics-summary,
.interview-coach-app .speech-bubble,
.interview-coach-app .thinking-box,
.interview-coach-app .microphone-help,
.interview-coach-app .preference-explainer { background:var(--surface-alt); }
.interview-coach-app .privacy-box { border-color:var(--line); }
.interview-coach-app .coach-card {
  top:108px;
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 88%,#fff8ef),color-mix(in srgb,var(--surface-alt) 85%,#eadfca));
  box-shadow:0 18px 44px rgba(24,37,31,.09);
}
.interview-coach-app .modal-backdrop { z-index:1400; background:rgba(16,24,20,.72); }
.interview-coach-app .modal-card {
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
}
.interview-coach-app .modal-mascot-badge,
.interview-coach-app .mini-mascot-shell,
.interview-coach-app .privacy-mini-avatar,
.interview-coach-app .mascot-avatar-shell { background:linear-gradient(145deg,var(--paper),var(--surface-alt)); }
.interview-coach-app .app-footer {
  margin:0;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--ink-soft);
  text-align:left;
}
.interview-coach-app .interview-coach-notes { padding-top:44px; padding-bottom:64px; }
.interview-coach-app .app-footer a { color:var(--sage-dark); font-weight:850; }
.interview-coach-app .report-section,
.interview-coach-app .preference-details-panel { background:var(--surface); border-color:var(--line); }
.interview-coach-app .highlight-item { background:var(--surface-alt); }
.interview-coach-app .plan-section,
.interview-coach-app .closing-message { background:color-mix(in srgb,var(--surface) 72%,#fff2e6); }
.interview-coach-app .timer { background:var(--surface-alt); }
[data-theme="dark"] .interview-coach-app .primary-button { color:#172019; }
[data-theme="dark"] .interview-coach-app .choice-card input:checked + span { background:#3a2b25; color:#fffaf0; }
[data-theme="dark"] .interview-coach-app .setup-section,
[data-theme="dark"] .interview-coach-app .preference-details-panel,
[data-theme="dark"] .interview-coach-app .report-section { background:var(--surface); }
[data-theme="dark"] .interview-coach-app .coach-card { background:linear-gradient(155deg,#1e2d25,#26382e); }
[data-theme="dark"] .interview-coach-app .modal-card { background:var(--surface); }
@media (max-width:760px) {
  .interview-coach-app .interview-coach-site-hero { padding:42px 0 28px; }
  .interview-coach-app .app-header h1 { font-size:clamp(2.8rem,14vw,4.8rem); }
  .interview-coach-app .header-actions { align-items:flex-start; flex-wrap:wrap; }
}
@media print {
  .site-header,.site-footer,.accessibility-dock { display:none !important; }
}