/* White and gray surfaces, with blue reserved for interaction and selection. */
:root {
  --harmony-blue: #3568b0;
  --harmony-blue-hover: #285796;
  --harmony-blue-soft: #f0f5fc;
  --accent: var(--harmony-blue);
  --teal: var(--harmony-blue);
  --green: var(--harmony-blue);
  --ink: #202329;
  --muted: #858b95;
  --line: #eaecf0;
}
.harmony-app {
  --paper: #f8f9fb;
  --line: #eaecf0;
  --muted: #858b95;
  --sidebar-width: 252px;
  background: var(--paper);
}
.harmony-app > main { max-width: 1640px; padding: 36px 48px 64px; }
.harmony-app > header { min-height: 52px; height: 52px; padding: 0 48px; border-color: #eff0f3; }
.shell-page-title { flex: 1; color: #6f7580; font-size: 13px; font-weight: 500; }
.shell-header-tools select { border-color: transparent !important; background: transparent !important; }
.app-sidebar { border-color: #edf0f2; padding: 0 18px; }
.sidebar-brand { height: 62px; margin-bottom: 31px; }
.sidebar-brand > a { gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -.6px; }
.sidebar-brand > a > svg { width: 24px; height: 24px; }
.harmony-app .sidebar-toggle { opacity: .65; }
.sidebar-navigation { gap: 5px !important; }
.shell-link { height: 43px; padding: 10px 12px; color: #7b8890 !important; border-radius: 7px; }
.shell-link > span { font-size: 13px; font-weight: 400; }
.shell-link svg { width: 17px; height: 17px; opacity: .75; }
.shell-link.is-active { background: var(--harmony-blue-soft); color: var(--harmony-blue) !important; }
.shell-link.is-active > span { font-weight: 600; }
.sidebar-bottom { padding: 26px 0 18px; }
.sidebar-resources { margin-bottom: 5px; }
.sidebar-resources > summary { display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 10px 12px; min-height: 41px; color: #8a969e; font-size: 11px; list-style: none; }
.sidebar-resources > summary::-webkit-details-marker { display: none; }
.sidebar-resources > summary svg { width: 16px; height: 16px; }
.sidebar-resources[open] > summary svg { transform: rotate(45deg); }
.harmony-app.sidebar-collapsed { --sidebar-width: 80px; }
.sidebar-collapsed .sidebar-brand { padding-top: 20px; gap: 8px; }
.sidebar-collapsed .sidebar-resources > summary { justify-content: center; padding: 10px 0; }
.sidebar-collapsed .sidebar-resources > summary span { display: none; }
.harmony-app .card, .harmony-app .detail-card, .harmony-app .sim-card,
.harmony-app .guide-card, .harmony-app .point-editor, .harmony-app .reference-card,
.harmony-app .canvas-card, .harmony-app .auth-card, .harmony-app .upload-box,
.harmony-app .results-column, .harmony-app .ratios-card, .harmony-app .ratio-reference,
.harmony-app .ratio-explanation, .harmony-app .summary { box-shadow: 0 2px 6px #1f293704; border-radius: 22px; border-color: var(--line); }
.harmony-app .eyebrow { letter-spacing: 1px; color: #8c989e; }
.harmony-app .secondary { background: #fff; border-color: #e4e7ed; color: #737985; font-weight: 500; border-radius: 999px; }
.harmony-app .secondary:hover { background: #f6f8fb; border-color: #c5d3e7; }
.harmony-app .analysis-viewbar { padding: 0 0 18px; margin: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; gap: 5px; }
.harmony-app .analysis-viewbar > a { font-size: 12px; padding: 7px 14px; }
.harmony-app .analysis-viewbar > a[aria-current=page] { background: var(--harmony-blue-soft); color: var(--harmony-blue); }
.harmony-app .review-bar { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 22px; margin-bottom: 26px; }
.harmony-app .review-bar h2 { font-size: 22px; font-weight: 500; }
.harmony-app .canvas-toolbar, .harmony-app .zoom-toolbar, .harmony-app .canvas-footer { background: #fff; }
.harmony-app .zoom-toolbar { border-top: 0; }
.harmony-app .zoom-toolbar .secondary { border-color: transparent; background: transparent; }
.harmony-app .zoom-toolbar .secondary:hover { background: #f1f4f9; }
.harmony-app .point-instruction { background: #f8f9fb; color: #818995; border-top-color: #eff1f5; }
.harmony-app .point-instruction.active { background: #fcf7eb; color: #967b40; }
.harmony-app .message:not(.error) { background: transparent; border: 0; padding: 0 0 18px; margin-bottom: 12px; color: #8a989f; font-size: 11px; }
.harmony-app .ratio { min-height: 66px; }
.harmony-app .ratio-name small { color: #8b979e; }
.harmony-app .ratio-score { font-size: 17px; color: #65758c; }
.harmony-app > footer { padding: 20px 40px; background: transparent; border-color: #edf0f2; font-size: 10px; color: #9ba5ac; }
.harmony-app > footer > span { font-family: inherit; letter-spacing: 0; line-height: 1.7; }

/* Dashboard: one primary work area, with additional context on demand. */
.home-dashboard .dashboard-heading { padding: 0 0 30px; gap: 24px; }
.home-dashboard .dashboard-heading > div { min-width: 0; flex: 1; }
.home-dashboard .dashboard-heading h1 { font-size: 29px; font-weight: 500; letter-spacing: -.9px; margin-bottom: 9px; }
.home-dashboard .dashboard-heading .lede { font-size: 13px; color: #829097; }
.home-dashboard .new-analysis { min-height: 39px; font-size: 11px; }
.home-dashboard .start-demo { border-radius: 24px; box-shadow: 0 3px 14px #19213403; border-color: var(--line); }
.home-dashboard .start-demo > .section-heading { padding: 24px 28px; border-color: #eff0f3; }
.home-dashboard .demo-title h2 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
.home-dashboard .demo-title p { color: #8d999f; font-size: 11px; }
.home-dashboard .demo-heading-actions .secondary { border-color: #e9ebf0; background: #fff; padding: 8px 14px; }
.home-dashboard .start-controls { padding-top: 23px; }
.home-dashboard .start-controls label { color: #7f8d95; }
.home-dashboard .start-controls select { background: #fff !important; }
.home-dashboard #movement-note { color: #8e9a9f; }
.home-dashboard #example-result { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
.home-dashboard .preview-column { border-right: 0; padding-bottom: 23px; }
.home-dashboard .preview-heading { justify-content: flex-end; margin-bottom: 14px; }
.home-dashboard .example-pair { gap: 14px; }
.home-dashboard .example-pair figure { border-color: #e5e8ed; border-radius: 17px; }
.home-dashboard .example-pair canvas { height: 370px; background: #f0f1f4; }
.home-dashboard .example-pair figcaption { padding: 14px 12px; }
.home-dashboard .example-pair figcaption strong { font-size: 11px; font-weight: 500; }
.home-dashboard .example-pair figcaption small { font-size: 9px; }
.home-dashboard .preview-score { font-size: 23px; font-weight: 500; color: #486b9d; }
.home-dashboard .preview-note { font-size: 10px; color: #93a098; margin-top: 13px; }
.home-dashboard .preview-note svg { display: none !important; }
.home-dashboard .results-column-home { padding-top: 29px; }
.home-dashboard .affected-heading h3 { font-size: 15px; margin-bottom: 16px; font-weight: 600; }
.home-dashboard .example-table th, .home-dashboard .example-table td { background: transparent; padding-top: 13px; padding-bottom: 13px; }
.home-dashboard .example-table tbody th { font-weight: 500; color: #71828c; }
.home-dashboard .example-table tbody td { color: #8a979e; }
.home-dashboard .example-table tbody td:last-child { color: #5274a5; }
.home-dashboard .simulation-note { border-top: 0; padding-top: 0; font-size: 10px; color: #95a0a6; }
.home-dashboard .results-column-home #open-editor { background: var(--harmony-blue); border-color: var(--harmony-blue); font-size: 12px; border-radius: 999px; min-height: 42px; padding: 10px 19px; }
.home-dashboard .start-continue { justify-content: flex-end; background: #fff; border-color: #edf0f2; padding-top: 14px; padding-bottom: 14px; }
.home-dashboard .share-actions { color: #8e9da4; gap: 18px; }
.home-dashboard .share-actions button { border-color: transparent !important; }
.dashboard-info { margin-top: 27px; border-top: 1px solid var(--line); padding-top: 16px; }
.dashboard-info > summary { cursor: pointer; color: #85939a; font-size: 11px; display: flex; justify-content: space-between; align-items: center; padding: 7px 0; list-style: none; }
.dashboard-info > summary::-webkit-details-marker { display: none; }
.dashboard-info > summary::after { content: '+'; font-size: 18px; color: #97a5a9; }
.dashboard-info[open] > summary::after { content: '−'; }
.dashboard-info .start-included { border: 0; padding: 24px 0; background: transparent; margin: 0; border-radius: 0; }
.dashboard-info .start-faq { padding-top: 24px; border-top: 1px solid var(--line); }

/* Landing: fewer repeated pitches and decorative frames. */
.landing-header .logo { font-size: 17px; font-weight: 600; }
.landing-header.is-scrolled { box-shadow: none; border-color: #edf0f2; }
body:has(.landing-header) .hero { padding-top: 240px; background: radial-gradient(ellipse at 77% 25%,#e5f0fc 0,transparent 53%),radial-gradient(ellipse at 20% 12%,#fff 0,transparent 48%),linear-gradient(140deg,#f7f8fc,#eef3fb 68%,#e8eef8); }
body:has(.landing-header) h1 { max-width: 896px; margin: 0 auto 32px; font-size: 60px; line-height: 1; letter-spacing: -1.5px; color: #18181b; }
body:has(.landing-header) .hero-description { max-width: 512px; font-size: 20px; line-height: 28px; color: #989ba5; margin-bottom: 40px; }
body:has(.landing-header) .hero-note { color: #989da7; margin-top: 20px; font-size: 11px; line-height: 18px; }
.product-window { max-width: 1024px; margin-top: 100px; border: 1px solid #e7e9ee; border-radius: 28px 28px 0 0; box-shadow: 0 0 0 5px #ffffff60,0 20px 65px #314f7a0b; }
.product-content { background: #fafbfc; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 22px; padding: 24px; }
.ratios-panel { border-color: #eaecf0; border-radius: 22px; padding: 28px; box-shadow: none; }
.ratios-panel h2 { margin-top: 0; font-size: 21px; font-weight: 500; }
.preview-bottom { margin: 17px 0; }
.preview-bottom p { font-size: 9px; }
.perspectives { padding-top: 80px; padding-bottom: 74px; }
.section-intro h2, .centered-heading h2 { font-size: 37px; }
.section-intro > p, .centered-heading p:last-child { color: #89979f; }
.perspective-card, .side-perspective { border-color: #eaecf0; background: #fafbfc; border-radius: 23px; min-height: 280px; box-shadow: 0 2px 5px #29324203; }
.perspective-card:hover { box-shadow: none; transform: none; border-color: #c3d2e8; }
.perspective-copy h3 { margin-top: 0; font-size: 28px; }
.perspective-art, .side-perspective .perspective-art { opacity: .4; }
.perspective-copy .text-link { color: #5b78a3; }
.how-section { padding-top: 68px; padding-bottom: 72px; border-top: 1px solid #edf0f2; }
.steps-grid { gap: 42px; }
.step-title { flex-direction: column; align-items: flex-start; gap: 18px; }
.step-title > span { border: 0; background: transparent; border-radius: 0; color: #8498b4; font-size: 12px; width: auto; height: auto; }
.step-title h3 { font-size: 17px; }
.steps-grid article > p { font-size: 13px; color: #8a98a0; }
.how-action { margin-top: 35px; }
.faq-section { padding-top: 62px; padding-bottom: 72px; }
.final-cta { padding-top: 64px; padding-bottom: 66px; background: #f7f9fb; }
.final-cta h2 { font-size: 44px; }
.landing-footer { padding-top: 28px; }

/* Blue marks interaction; the remaining surfaces stay white and gray. */
.harmony-app .primary, .harmony-app .button:not(.secondary) { background: var(--harmony-blue); border-color: var(--harmony-blue); border-radius: 999px; box-shadow: 0 4px 12px #3568b014; }
.harmony-app .primary:hover, .harmony-app .button:not(.secondary):hover, .home-dashboard .results-column-home #open-editor:hover { background: var(--harmony-blue-hover); border-color: var(--harmony-blue-hover); }
.harmony-app :focus-visible { outline: 2px solid #7ca2d6; outline-offset: 4px; }
.harmony-app .upload-label { background: #fafbfc; border-color: #d5dfed; color: #6d819d; border-radius: 16px; }
.harmony-app .upload-label:hover { background: #f3f6fb; }
.harmony-app .upload-label strong, .harmony-app .upload-icon { color: var(--harmony-blue); }
.harmony-app .point-option.selected, .harmony-app .ratio.selected { background: var(--harmony-blue-soft); border-left-color: var(--harmony-blue); color: var(--harmony-blue); }
.harmony-app .point-option.selected { border-color: #bfd0e8; }
.harmony-app .point-option.selected .point-number { background: var(--harmony-blue); color: #fff; }
.harmony-app .ratio-point-guide button[aria-pressed=true] { background: var(--harmony-blue-soft); border-color: #bfd0e8; color: var(--harmony-blue); }
.harmony-app .criterion-categories .selected { color: var(--harmony-blue); }
.harmony-app .point-number { background: #eef1f5; color: #8995a5; }
.harmony-app .related button { background: #f6f7f9; border-color: #e9ecf1; color: #7a8698; }
.harmony-app .method summary, .harmony-app .tabs button[aria-selected=true] { color: var(--harmony-blue); }
.harmony-app .tabs button[aria-selected=true] { border-color: var(--harmony-blue); }
.harmony-app .active-movements span, .harmony-app .badge, .harmony-app .library-revision-state { background: #f0f4fa; color: #6f84a3; }
.harmony-app .legend span:first-child { color: #7c899b; }
.harmony-app .legend span:last-child { color: var(--harmony-blue); }
.harmony-app .ratio:hover { background: #f7f9fc; }
.harmony-app .ratio-directory a[aria-current=page] { background: var(--harmony-blue-soft); border-color: #c4d3e9; color: var(--harmony-blue); }
.harmony-app .ratio-explanation a, .harmony-app .ratio-formula { color: #5c78a0; }
.harmony-app .ratio-formula { background: #f6f8fb; }
.harmony-app .notice:not(.error), .harmony-app .community-status { background: #f4f7fc; border-color: #c5d4e9; color: #6f83a1; }
.harmony-app .guide-note { background: #f7f8fa; color: #8a929e; }
.harmony-app .side-field input, .harmony-app .side-field select { border-color: #e3e7ee; color: #5f6978; }
.harmony-app .guide-card h2, .harmony-app .results-column h2, .harmony-app .ratios-card h2 { font-weight: 500; }
.harmony-app .results-column-home #changes td:last-child { color: #6785af; }
.harmony-app input[type=checkbox] { accent-color: var(--harmony-blue); }
.harmony-app input[type=range] { appearance: none; background: transparent; height: 20px; min-height: 20px; padding: 0; border: 0; border-radius: 0; box-shadow: none; accent-color: var(--harmony-blue); }
.harmony-app input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: #e4e8ef; }
.harmony-app input[type=range]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--harmony-blue); border: 2px solid #fff; box-shadow: 0 0 0 1px #3568b025; }
.harmony-app input[type=range]::-moz-range-track { height: 4px; background: #e4e8ef; border-radius: 10px; }
.harmony-app input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--harmony-blue); border: 2px solid #fff; }
.home-dashboard .start-controls select { border-radius: 9px; min-height: 41px; }
.home-dashboard .amount-control output { color: #6886ae; }
.home-dashboard .example-pair figcaption strong { color: #626b77; }
.home-dashboard .example-table tbody th { color: #707888; }
.home-dashboard .example-table tbody td { color: #939aa6; }
.home-dashboard .example-table tbody th, .home-dashboard .example-table tbody td { font-size: 12px; }
.home-dashboard .example-table thead th { color: #9ca3ad !important; letter-spacing: .4px; }
.home-dashboard .start-continue { border-top-color: #f0f1f4; }
.home-dashboard .demo-heading-actions .secondary { font-size: 11px; }
.landing-header { max-width: 1792px; padding-left: 40px; padding-right: 40px; }
.landing-header .header-login { background: #242a35; font-weight: 500; }
.landing-header.is-scrolled { border-radius: 999px; background: #fffffff0; border-color: #eef0f4; }
body:has(.landing-header) .hero-copy { max-width: 1024px; }
body:has(.landing-header) .hero-actions { margin-top: 0; gap: 20px; }
body:has(.landing-header) .pill-button { background: var(--harmony-blue); border-color: var(--harmony-blue); box-shadow: 0 5px 18px #3568b014; }
body:has(.landing-header) .pill-button:hover { background: var(--harmony-blue-hover); border-color: var(--harmony-blue-hover); }
body:has(.landing-header) .hero .pill-button { min-height: 52px; padding: 14px 32px; border: 0; font-size: 16px; line-height: 24px; gap: 16px; }
body:has(.landing-header) .quiet-link { font-size: 14px; color: #9297a2; }
body:has(.landing-header) .status-dot { background: #7f9dc5; }
.portrait-panel { border-radius: 21px; border-color: #e7eaf0; }
.portrait-frame { height: 406px; background: #f1f2f5; }
.portrait-frame canvas { object-fit: cover; object-position: 50% 40%; }
.preview-tabs button[aria-pressed=true] { background: #f1f4f9; color: var(--harmony-blue); }
.preview-tabs button:hover { background: #f7f8fb; }
.preview-ratio { padding: 15px 10px; font-size: 11px; color: #8a929e; }
.preview-ratio > span:last-child { color: #778ca9; }
.preview-ratio:hover, .preview-ratio[aria-pressed=true] { background: #f3f6fb; color: #5e7da9; }
.preview-cta { border-radius: 999px; background: var(--harmony-blue); color: #fff; padding: 11px 16px; font-weight: 500; }
.preview-cta:hover { background: var(--harmony-blue-hover); }
.portrait-label { color: #8b929e; background: #ffffffdf; }
.portrait-label i { background: #7290b8; }
.portrait-caption { color: #9ca3ad; }
.portrait-caption > span:last-child { color: #a6b4c7; }
.faq-list a { color: var(--harmony-blue); }
.retry-button { color: var(--harmony-blue); background: #f5f7fb; border-color: #c9d6e8; }

/* Gentle entrance, navigation and hover motion; no continuous decorative loops. */
.analysis-result-pending { display: none !important; }
.is-building-analysis .ratio-peek { visibility: hidden !important; }
.analysis-build-stage { margin: 24px auto 40px; padding: 30px 24px 22px; max-width: 760px; border: 1px solid #e6ebf2; border-radius: 24px; background: #fff; text-align: center; scroll-margin-top: 80px; }
.analysis-build-stage h2 { margin: 0; font-family: GeistSans, Arial, sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.5px; color: #334359; }
.analysis-build-stage > p { margin: 8px 0 24px; font-size: 12px; color: #8994a3; }
.analysis-build-frame { position: relative; width: min(100%,380px); margin: 0 auto; border-radius: 18px; overflow: hidden; background: #f5f7fa; }
.analysis-build-frame > img { display: block; width: 100%; height: 100%; }
.analysis-build-frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.analysis-build-skip { margin-top: 17px; padding: 6px 12px; border: 0; background: transparent; color: #74839a; font: inherit; font-size: 11px; cursor: pointer; }
.analysis-build-skip:hover { color: var(--harmony-blue); }
@media (max-width: 500px) { .analysis-build-stage { padding: 22px 16px 16px; } .analysis-build-stage h2 { font-size: 18px; } .analysis-build-stage > p { font-size: 11px; } }
.ratio-preview-line.measurement-line { filter: none; }
.measurement-landmark { filter: drop-shadow(0 0 2px #a7dcf080); }
.harmony-app .photo-viewport{height:clamp(480px,72vh,860px)}
@media(max-width:760px){.harmony-app .photo-viewport{height:clamp(420px,68dvh,680px)}}
.measurement-line-casing { animation: ratio-preview-trace .24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .measurement-line-casing { animation: none; } }
.perspective-art.portrait-photo { filter: none; opacity: 1; right: 0; top: 0; width: 48%; }
.perspective-art.portrait-photo img { object-fit: cover; object-position: 50% 35%; }
.portrait-frame canvas { mix-blend-mode: normal; border-radius: 14px; }
.landing-header { transition: top .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),right .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1),max-width .5s cubic-bezier(.4,0,.2,1),background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1); }
.landing-header.is-scrolled { max-width: 1760px; left: 40px; right: 40px; top: 16px; padding: 10px 24px; min-height: 48px; }
.perspective-card { transition: transform .3s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .3s; }
.portrait-panel, .preview-tabs button, .preview-ratio { transition: background .2s,color .2s,border-color .2s; }
.pill-button, .harmony-app .primary, .harmony-app .button { transition: background .2s,border-color .2s,box-shadow .25s,transform .25s cubic-bezier(.16,1,.3,1); }
.pill-button > span:last-child, .preview-cta > span:last-child { transition: transform .25s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .perspective-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px #29466f08; }
  .pill-button:hover, .harmony-app .primary:hover, .harmony-app .button:hover { transform: translateY(-1px); }
  .pill-button:hover > span:last-child, .preview-cta:hover > span:last-child { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 1500px) {
  .harmony-app { --sidebar-width: 320px; }
  .harmony-app > main { max-width: none; padding: 40px 80px 64px; }
}
@media (max-width: 1100px) {
  .harmony-app > main { padding-left: 27px; padding-right: 27px; }
  .harmony-app > header { padding-left: 27px; padding-right: 27px; }
  .home-dashboard #example-result { grid-template-columns: minmax(0,1fr); }
  .home-dashboard .example-pair canvas { height: 300px; }
  .home-dashboard .results-column-home { padding-top: 21px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .landing-header { padding: 18px 24px; }
  .landing-header.is-scrolled { left: 14px; right: 14px; top: 10px; padding: 10px 16px; min-height: 54px; }
  body:has(.landing-header) .hero { padding-top: 150px; }
  body:has(.landing-header) h1 { font-size: 48px; line-height: 1.08; }
  body:has(.landing-header) .hero-description { font-size: 16px; line-height: 25px; max-width: 430px; margin-bottom: 30px; }
  .product-window { margin-top: 65px; }
  .product-content { padding: 16px; gap: 15px; }
  .ratios-panel { padding: 22px; }
  .portrait-frame { height: 350px; }

  .harmony-app, .harmony-app.sidebar-collapsed { --sidebar-width: 244px; padding-left: 0; }
  .harmony-app > main { padding: 25px 21px 40px; }
  .harmony-app > header { padding: 0 21px; gap: 14px; }
  .app-sidebar, .sidebar-collapsed .app-sidebar { width: 244px; }
  .sidebar-brand { height: 76px; margin-bottom: 19px; }
  .shell-page-title { font-size: 12px; }
  .harmony-app .analysis-viewbar { margin-bottom: 23px; }
  .harmony-app .analysis-viewbar > a { padding-left: 11px; padding-right: 11px; }
  .harmony-app > footer { padding-left: 21px; padding-right: 21px; }
  .home-dashboard .dashboard-heading h1 { font-size: 28px; }
  .home-dashboard .dashboard-heading .lede { font-size: 12px; }
  .home-dashboard .start-demo > .section-heading { padding: 20px; }
  .home-dashboard .example-pair canvas { height: 285px; }
  .perspectives { padding-top: 58px; padding-bottom: 57px; }
  .steps-grid { gap: 29px; }
  .step-title h3 { font-size: 15px; }
  .steps-grid article > p { font-size: 12px; }
  .final-cta h2 { font-size: 37px; }
}
@media (max-width: 500px) {
  .landing-header { padding-left: 20px; padding-right: 20px; }
  body:has(.landing-header) .hero .pill-button { min-height: 47px; font-size: 13px; line-height: 21px; padding: 13px 24px; }
  body:has(.landing-header) .hero-description { font-size: 15px; line-height: 24px; }
  body:has(.landing-header) .quiet-link { font-size: 12px; }
  body:has(.landing-header) .hero-note { font-size: 9px; }
  .product-content { display: block; padding: 12px; }
  .portrait-frame { height: 270px; }
  .portrait-frame canvas { object-fit: contain; }
  .ratios-panel { padding: 20px; }
  .preview-ratio { padding: 13px 8px; font-size: 10px; }

  .harmony-app > main { padding-left: 16px; padding-right: 16px; }
  .home-dashboard .dashboard-heading { padding-bottom: 24px; }
  .home-dashboard .new-analysis { margin-top: 4px; }
  .home-dashboard .start-demo > .section-heading { padding: 19px 15px; }
  .home-dashboard .demo-title h2 { font-size: 16px; }
  .home-dashboard .example-pair { gap: 10px; }
  .home-dashboard .example-pair canvas { height: 225px; }
  .home-dashboard .example-pair figcaption { padding: 12px 9px; }
  .home-dashboard .example-pair figcaption strong { font-size: 10px; }
  .home-dashboard .preview-score { font-size: 17px; }
  .home-dashboard .affected-heading h3 { margin-bottom: 13px; }
  .home-dashboard .share-actions { gap: 12px; font-size: 9px; }
  body:has(.landing-header) .hero { padding-top: 121px; }
  body:has(.landing-header) h1 { font-size: 43px; line-height: 1.18; letter-spacing: -1.5px; }
  body:has(.landing-header) .hero-description { font-size: 13px; max-width: 300px; }
  .product-window { margin-top: 36px; }
  .perspective-card { min-height: 268px; }
  .perspective-copy h3 { font-size: 25px; }
  .section-intro h2, .centered-heading h2 { font-size: 31px; }
  .step-title { gap: 12px; }
  .step-title h3 { font-size: 17px; }
  .steps-grid { gap: 31px; }
  .steps-grid article > p { font-size: 12px; }
  .how-section { padding-top: 53px; padding-bottom: 58px; }
  .final-cta h2 { font-size: 35px; }
}

img[src="/assets/looksmath-logo.png"]{object-fit:contain;flex-shrink:0}

/* Give portrait cards separate text and image columns at every screen size. */
.perspective-card:has(.portrait-photo){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;padding:0}
.perspective-card:has(.portrait-photo) .perspective-copy{width:auto;max-width:none;min-width:0;padding:28px;align-self:center;overflow-wrap:break-word}
.perspective-card .perspective-art.portrait-photo{position:relative;inset:auto;width:100%;height:auto;min-height:280px;opacity:1}
.perspective-card .portrait-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
@media(max-width:540px){
  .perspective-card:has(.portrait-photo){grid-template-columns:minmax(0,1fr)}
  .perspective-card:has(.portrait-photo) .perspective-copy{padding:26px}
  .perspective-card .perspective-art.portrait-photo{min-height:0;aspect-ratio:4/3}
}

/* Point review: one instruction next to the example, a compact action row under the photo. */
.harmony-app .guide-step { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; padding: 14px; border-radius: 12px; background: #fff5f5; border: 1px solid #f6d4d6; }
.harmony-app .guide-number { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e0262f; color: #fff; font-weight: 600; font-size: 13px; }
.harmony-app .guide-step h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.harmony-app .guide-step p { margin: 0; font-size: 13px; line-height: 1.6; color: #4d5966; }
.harmony-app .point-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.harmony-app .point-actions .coordinate-row, .harmony-app .point-actions .edit-actions { gap: 6px; border: 0; padding: 0; }
.harmony-app .point-actions .edit-actions { margin-left: auto; }
.harmony-app .review-grid .canvas-footer { display: none; }
.requires-manual-review .persistence-panel { display: none !important; }