@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");
  /* ---- one signature element: the percentile readout. everything else quiet ---- */
  :root {
    color-scheme: light;
    --bg: #fffdf7;
    --surface: #ffffff;
    --ink: #416451;
    --muted: #718878;
    --rule: #d8ead8;
    --mark: #62a777;
    --band: #f6c95d;
    --warn: #c96f85;
    --green: #bfe3bd;
    --green-deep: #5e9e72;
    --yellow: #ffe58c;
    --pink: #f7c3cf;
    --pink-deep: #c86f86;
    --cream: #fff8df;
    --radius: 24px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 "Nunito Sans", "Avenir Next", ui-rounded, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 0 20px 72px;
  }
  .wrap { max-width: 1160px; margin: 0 auto; }
  .site-gate {
    min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 24px 0;
  }
  .site-gate-card {
    width: min(100%, 440px); background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 24px;
  }
  .site-gate-card h1 { margin-bottom: 9px; }
  header { padding: 56px 0 28px; border-bottom: 1px solid var(--rule); }
  h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
  .sub { color: var(--muted); font-size: 14px; margin: 0; max-width: 52ch; }
  .mono { font-family: Georgia, "Times New Roman", serif; }
  .num { font-variant-numeric: tabular-nums; }

  section { padding: 28px 0; border-bottom: 1px solid var(--rule); }
  h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
       color: var(--muted); margin: 0 0 14px; }
  p { margin: 0 0 12px; }
  p:last-child { margin-bottom: 0; }
  .note { color: var(--muted); font-size: 13.5px; }

  /* uploader */
  .drop {
    border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--surface);
    padding: 26px 20px; text-align: center; transition: border-color .15s, background .15s;
  }
  .drop.over { border-color: var(--mark); }
  .drop p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
  .selected-photo {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    max-width: 650px; margin: 20px auto 0; padding: 12px; text-align: left;
    border: 1px solid var(--rule); border-radius: 20px; background: #fff;
  }
  .selected-photo img { width: 72px; height: 72px; border-radius: 15px; object-fit: cover; background: var(--cream); }
  .selected-photo strong, .selected-photo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .selected-photo span { color: var(--muted); font-size: 12px; }
  .selected-photo button:disabled { cursor: wait; opacity: .62; transform: none; }
  button, .filebtn {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 8px 15px; cursor: pointer;
  }
  button:hover, .filebtn:hover { border-color: var(--mark); }
  :focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
  input[type=file]:not(.native-file-picker) { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .native-file-picker {
    position: static; width: min(100%, 390px); height: auto; opacity: 1;
    color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
  }
  .native-file-picker::file-selector-button {
    margin-right: 12px; padding: 11px 20px; cursor: pointer;
    color: #52735d; background: var(--yellow); border: 0; border-radius: 999px;
    box-shadow: 0 6px 0 #efd06e; font: inherit; font-weight: 800;
  }
  .native-file-picker:hover::file-selector-button { background: #ffdb63; }
  /* model picker: the ensemble and the distilled student, side by side */
  .models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
  .model-choice {
    display: block; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  }
  .model-choice:hover { border-color: var(--mark); }
  .model-choice.on { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
  .model-choice .row { display: flex; align-items: baseline; gap: 7px; }
  .model-choice input { margin: 0; }
  .model-choice b { font-weight: 600; font-size: 14px; }
  .model-choice .sub2 { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
  .chip {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; white-space: nowrap;
  }
  .chip.exp { color: var(--warn); border-color: var(--warn); }
  .model-detail { margin: 0 0 14px; }
  .model-detail .msg { border-left-color: var(--warn); }
  .model-detail h4 { margin: 12px 0 3px; font-size: 13px; font-weight: 600; }
  .model-detail h4:first-of-type { margin-top: 10px; }
  .model-detail p { font-size: 13px; color: var(--muted); }
  .context-compare {
    margin: 0 0 14px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .context-compare.off { opacity: .5; }
  .context-compare summary { padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
  .context-compare[open] summary { border-bottom: 1px solid var(--rule); }
  .context-controls { padding: 14px; }
  .college-search {
    width: 100%; margin: 8px 0; padding: 8px 10px; font: inherit; color: var(--ink);
    background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  }
  .college-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px;
    max-height: 190px; overflow-y: auto; padding: 8px 2px; border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .college-choice { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 13px; }
  .college-choice span { overflow-wrap: anywhere; }
  .college-choice.muted { display: none; }
  .selection-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
  .plot-mode { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; }
  .plot-mode label { display: flex; align-items: center; gap: 6px; }

  /* the readout */
  .readout { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
  .headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pct { font-size: 46px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
  .pctlabel { color: var(--muted); font-size: 13.5px; }
  .scale { margin: 26px 0 8px; }
  .track { position: relative; height: 34px; }
  .axis { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--rule); }
  .bandbar {
    position: absolute; top: 10px; height: 12px; background: var(--band); opacity: .22;
    border-radius: 1px;
  }
  .tick { position: absolute; top: 4px; width: 2px; height: 24px; background: var(--mark); }
  /* each ensemble member, drawn on the same axis so the disagreement is visible */
  .member { position: absolute; top: 7px; width: 2px; height: 30px; border-radius: 999px;
    background: var(--mark); opacity: .48; }
  .folds { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
  .folds table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .folds th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px;
              letter-spacing: .05em; text-transform: uppercase; padding: 0 0 6px; }
  .folds td { padding: 4px 0; border-top: 1px solid var(--rule); }
  .folds td.r { text-align: right; }
  .folds .dim { color: var(--muted); }
  .ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
  .bandline { color: var(--muted); font-size: 13.5px; margin-top: 14px; }
  .bandline b { color: var(--ink); font-weight: 600; }
  .meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
          color: var(--muted); font-size: 12.5px; }
  .meta div { margin-bottom: 3px; word-break: break-word; }
  .college-comparison {
    margin-top: 20px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 18px;
  }
  .college-comparison h3 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
  .college-plot-card + .college-plot-card { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .plot-shell { width: 100%; overflow-x: auto; margin-top: 12px; }
  .college-plot { display: block; width: 100%; min-width: 600px; height: auto; }
  .plot-legend { color: var(--muted); font-size: 12px; margin-top: 8px; }

  .msg { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--warn);
         border-radius: var(--radius); padding: 16px 18px; font-size: 14px; }
  .msg h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
  #validatedRegions .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  }
  #validatedRegions .section-head h2 { margin: 0; }
  .validated-link { white-space: nowrap; font-size: 13.5px; }
  .validated-counts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin: 15px 0 16px;
  }
  .validated-count {
    border-top: 2px solid var(--mark); background: var(--surface); padding: 9px 10px;
  }
  .validated-count strong { display: block; font-size: 22px; font-weight: 500; line-height: 1.15; }
  .validated-count span { color: var(--muted); font-size: 12px; }

  /* Review-style cards: the percentile is the headline, the shares sit under it. */
  .vgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px;
  }
  .vcard {
    margin: 0; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); overflow: hidden;
  }
  .vcard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  .vcard figcaption { padding: 9px 11px 11px; }
  .vcard-region {
    margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--mark);
  }
  .vcard-pct { margin: 0; font-size: 12.5px; color: var(--muted); }
  .vcard-pct b { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
  .vcard-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
  #validatedRegions .note { margin-top: 14px; }

  .region-attribution {
    margin-top: 16px; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 16px 18px;
  }
  .region-attribution .section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
  }
  .region-attribution h3 { margin: 0; font-size: 14px; font-weight: 600; }
  .ra-rows { display: grid; gap: 9px; }
  .ra-row {
    display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px;
    font-size: 13px;
  }
  .ra-name { font-weight: 600; text-transform: capitalize; }
  .ra-track {
    position: relative; height: 8px; background: var(--bg); border: 1px solid var(--rule);
    border-radius: 999px; overflow: hidden;
  }
  .ra-fill { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
  .ra-row.is-validated .ra-fill { background: var(--mark); }
  .ra-cut {
    position: absolute; top: -3px; bottom: -3px; left: 75%; width: 1px;
    background: var(--rule-strong, var(--muted)); opacity: .8;
  }
  .ra-value { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
  .ra-value b { color: var(--ink); }
  .ra-tag {
    display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; color: var(--mark);
  }
  .ra-why { grid-column: 2 / -1; margin: -3px 0 0; font-size: 11.5px; color: var(--muted); }
  #raScope { margin: 13px 0 0; }
  @media (max-width: 560px) {
    .ra-row { grid-template-columns: 1fr auto; }
    .ra-track { grid-column: 1 / -1; order: 3; }
    .ra-why { grid-column: 1 / -1; }
  }

  /* An optional coaching note, not a second readout: same surface as the panels
     above, but prose rather than numbers, and never any measurement chrome. */
  .photo-feedback {
    margin-top: 16px; background: var(--surface); border: 1px solid var(--rule);
    border-left: 3px solid var(--mark); border-radius: var(--radius); padding: 16px 18px;
  }
  .photo-feedback h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
  .pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  #pfText { margin: 0; font-size: 14px; line-height: 1.62; white-space: pre-wrap; }
  @media (max-width: 560px) {
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #validatedRegions .section-head { display: block; }
    .validated-link { display: inline-block; margin-top: 4px; }
  }
  .hidden { display: none !important; }
  .spin { color: var(--muted); font-size: 14px; }
  dl { margin: 0; }
  dt { font-weight: 600; font-size: 13.5px; margin-top: 12px; }
  dt:first-child { margin-top: 0; }
  dd { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
  video { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); }
  .gate {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 20px;
  }
  .gate-row { display: flex; gap: 8px; margin-top: 15px; }
  .gate-row input {
    min-width: 0; flex: 1; font: inherit; color: var(--ink); background: var(--bg);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px;
  }
  .gate-error { color: var(--warn); font-size: 13px; margin-top: 10px; }
  .gated-content { display: grid; gap: 26px; }
  .context-note { border-left-color: var(--mark); }
  .demo-video h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
  .demo-video p { margin-top: 8px; }
  .methods {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  }
  .methods summary {
    padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
  }
  .methods[open] summary { border-bottom: 1px solid var(--rule); }
  .methods-body { padding: 18px; }
  .methods-body > p:first-child { font-size: 14px; }
  .method-section { margin-top: 24px; }
  .method-section:first-of-type { margin-top: 20px; }
  .method-section h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
  .method-section p { font-size: 13.5px; }
  .equation {
    overflow-x: auto; margin: 12px 0; padding: 12px 14px; background: var(--bg);
    border-left: 2px solid var(--rule); color: var(--ink); text-align: center;
  }
  .equation math {
    display: inline-block; min-width: max-content;
    font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem;
  }
  .where {
    color: var(--muted); font-size: 12.5px !important; margin-top: -5px !important;
  }
  .gallery { display: grid; gap: 24px; }
  .sheet { margin: 0; }
  .sheet-frame {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    overflow: auto;
  }
  .sheet img { display: block; width: 100%; height: auto; }
  .sheet figcaption { margin-top: 9px; color: var(--muted); font-size: 13px; }
  .sheet figcaption b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
  @media (prefers-reduced-motion: reduce) and (min-width: 821px) {
    * { transition: none !important; animation: none !important; }
  }
  @media (max-width: 520px) {
    .pct { font-size: 38px; } header { padding-top: 36px; }
    .gate-row { align-items: stretch; flex-direction: column; }
    .college-list { grid-template-columns: 1fr; }
    .models { grid-template-columns: 1fr; }
    .validated-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ── CWUPID PRODUCT UI ────────────────────────────────────────────────── */
  html { scroll-behavior: smooth; background: #fffdf7; }
  body { min-height: 100vh; padding: 0 22px 72px; overflow-x: hidden; }
  body::before, body::after {
    content: ""; position: fixed; z-index: -1; border-radius: 999px; filter: blur(2px);
    pointer-events: none;
  }
  body::before { width: 360px; height: 360px; top: -120px; right: -90px; background: #ffd95a; opacity: .7; }
  body::after { width: 330px; height: 330px; bottom: -110px; left: -80px; background: #ff9fc1; opacity: .62; }
  a { color: var(--green-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  h1, .brand, .bubble, .pct { font-family: "Fredoka", "Avenir Next Rounded", ui-rounded, sans-serif; }
  h1 { font-size: clamp(2.6rem, 7vw, 5.9rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
  h2 { color: var(--green-deep); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.12;
    letter-spacing: -.025em; text-transform: none; font-family: "Nunito Sans", "Avenir Next", sans-serif; font-weight: 800; }
  h3 { color: var(--ink); font-family: "Nunito Sans", "Avenir Next", sans-serif; font-weight: 800; letter-spacing: -.015em; }
  section { border: 0; padding: 28px 0; }
  .sub { font-size: 1rem; line-height: 1.55; }
  .note { color: var(--muted); }
  .mono { font-family: "Nunito Sans", "Avenir Next", sans-serif; }

  .site-gate { min-height: 100vh; padding: 28px 0; }
  .site-gate-card {
    position: relative; width: min(100%, 580px); overflow: hidden; text-align: center;
    border: 0; border-radius: 38px; padding: clamp(34px, 8vw, 68px);
    background: linear-gradient(145deg, #fff 0 48%, #fff8d8 100%);
    box-shadow: 0 24px 70px rgba(91, 139, 103, .15);
  }
  .site-gate-card::before, .site-gate-card::after {
    content: ""; position: absolute; border-radius: 999px; z-index: 0;
  }
  .site-gate-card::before { width: 140px; height: 140px; top: -50px; right: -35px; background: var(--pink); }
  .site-gate-card::after { width: 110px; height: 110px; bottom: -45px; left: -25px; background: var(--green); }
  .site-gate-card > * { position: relative; z-index: 1; }
  .site-gate-card h1 { color: var(--pink-deep); font-size: clamp(2.4rem, 7vw, 4.2rem); }
  .site-gate-card .sub { margin: 0 auto 22px; }
  .site-gate-card .gate-purpose { max-width: 50ch; }
  .site-gate-card .gate-oauth { max-width: 52ch; margin: 0 auto 18px; font-size: .88rem; }
  .gate-public-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 18px; font-size: .84rem; }
  .gate-public-links a { color: var(--green-deep); }
  .gate-row { justify-content: center; }
  .gate-row input, .college-search {
    color: var(--ink); background: #fff; border: 2px solid var(--rule); border-radius: 999px;
    padding: 12px 16px;
  }

  button, .filebtn, .hero-actions a {
    font-family: "Nunito Sans", sans-serif; font-weight: 800; color: #52735d;
    background: var(--yellow); border: 0; border-radius: 999px; padding: 11px 20px;
    box-shadow: 0 6px 0 #efd06e; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  button:hover, .filebtn:hover, .hero-actions a:hover { border: 0; background: #ffdb63; transform: translateY(-2px); box-shadow: 0 8px 0 #efd06e; }
  button:active, .filebtn:active { transform: translateY(2px); box-shadow: 0 3px 0 #efd06e; }
  :focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 4px; }

  .app-header {
    position: sticky; top: 14px; z-index: 20; margin: 14px 0 34px; padding: 10px 12px 10px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: rgba(255,255,255,.91); border: 1px solid rgba(191,227,189,.8);
    border-radius: 999px; box-shadow: 0 10px 35px rgba(92, 143, 105, .11); backdrop-filter: blur(16px);
  }
  .brand { color: var(--pink-deep); font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; }
  .site-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  .site-nav a { display: inline-flex; align-items: center; font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: .875rem; line-height: 1.55; border-radius: 999px; text-decoration: none; }
  .site-nav button, .site-nav a, .nav-more summary { color: var(--muted); background: transparent; box-shadow: none; padding: 9px 16px; }
  .site-nav button:hover, .site-nav a:hover, .nav-more summary:hover { color: var(--green-deep); background: #edf8ec; box-shadow: none; transform: none; }
  .site-nav button[aria-current="page"] { color: #fff; background: var(--green-deep); box-shadow: none; }
  .nav-more { position: relative; }
  .nav-more summary { border-radius: 999px; cursor: pointer; font-weight: 800; list-style: none; white-space: nowrap; }
  .nav-more summary::-webkit-details-marker { display: none; }
  .nav-more summary::after { content: "▾"; display: inline-block; margin-left: 7px; font-size: .72em; transition: transform .16s ease; }
  .nav-more[open] summary::after { transform: rotate(180deg); }
  .nav-more.has-current summary { color: #fff; background: var(--green-deep); }
  .nav-more-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; display: grid; min-width: 190px;
    padding: 9px; border: 1px solid rgba(191,227,189,.8); border-radius: 22px; background: rgba(255,255,255,.98);
    box-shadow: 0 16px 42px rgba(65,100,81,.18); }
  .nav-more-menu button { width: 100%; text-align: left; white-space: nowrap; }
  .account-entry { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
  .app-launch { text-decoration: none; white-space: nowrap; background: var(--green-deep); color: #fff; }
  .account-button { flex: 0 0 auto; white-space: nowrap; background: #f5b8c8; color: #fff; box-shadow: none; }
  .account-button:hover { background: #eea9bc; box-shadow: none; }
  .account-button.account-signin { color: var(--green-deep); background: #edf8ec; }
  .account-button.account-signin:hover { background: #dff1dd; }
  .account-button.has-user { padding-left: 9px; background: #edf8ec; color: var(--green-deep); }
  .account-button-avatar, .account-avatar {
    display: inline-block; border-radius: 50%; background: var(--green); object-fit: cover; vertical-align: middle;
  }
  .account-button-avatar { width: 26px; height: 26px; margin-right: 7px; }
  .account-dialog {
    width: min(calc(100% - 30px), 470px); max-height: calc(100dvh - 32px); padding: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: var(--ink);
    border: 0; border-radius: 32px; background: #fff; box-shadow: 0 28px 90px rgba(65,100,81,.25);
  }
  .account-dialog::backdrop { background: rgba(48,72,58,.35); backdrop-filter: blur(5px); }
  .account-dialog-inner { position: relative; padding: 34px; }
  .account-dialog h2 { margin: 0 40px 8px 0; color: var(--green-deep); font-size: 1.9rem; }
  .account-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; padding: 0;
    color: var(--muted); background: #edf8ec; box-shadow: none; font-size: 1.2rem; }
  .account-close:hover { background: #dff1dd; box-shadow: none; }
  .account-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 48px 24px 0;
    padding: 5px; border-radius: 999px; background: #edf8ec; }
  .account-mode-switch button { color: var(--muted); background: transparent; box-shadow: none; }
  .account-mode-switch button[aria-pressed="true"] { color: #fff; background: var(--green-deep); box-shadow: none; }
  .account-mode-switch button:hover { box-shadow: none; }
  .password-form { display: grid; gap: 12px; margin-top: 22px; }
  .password-field { display: grid; gap: 5px; color: var(--ink); font-size: .82rem; font-weight: 800; }
  .password-field input {
    width: 100%; padding: 12px 15px; color: var(--ink); background: #fff;
    border: 2px solid var(--rule); border-radius: 16px; font: inherit;
  }
  .password-field input:focus { border-color: var(--green-deep); }
  .password-field-hint { color: var(--muted); font-size: .74rem; font-weight: 700; line-height: 1.35; }

/* The eye blinks rather than swapping two flat icons: the iris contracts and
   the slash draws itself in, which is the same soft, rounded language as the
   rest of the page. */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 52px; }
/* Every declaration fighting the global `button, .filebtn` rule is deliberate:
   that rule gives buttons a yellow pill, a 6px drop-shadow, and hover/active
   transforms. All of it is right for a call to action and wrong for a 36px icon
   sitting inside a text field. Centred with margin rather than translateY so the
   global transforms cannot knock it off-centre. */
.password-reveal {
  position: absolute; top: 50%; right: 7px; margin-top: -18px;
  display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 50%; box-shadow: none;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.password-reveal:hover,
.password-reveal:active,
.password-reveal:focus-visible { box-shadow: none; transform: none; }
.password-reveal:hover { color: var(--green-deep); background: rgba(120, 168, 133, .15); }
.password-reveal:active { background: rgba(120, 168, 133, .24); }
.password-reveal:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.eye { display: block; width: 21px; height: 21px; }
.eye-lid {
  fill: none; stroke: currentColor; stroke-width: 2.05;
  stroke-linecap: round; stroke-linejoin: round;
}
.eye-iris {
  fill: currentColor; transform-origin: 12px 12px;
  transition: transform .26s cubic-bezier(.34, 1.4, .64, 1), opacity .18s ease;
}
.eye-glint { fill: #fffdf7; transition: opacity .16s ease; }
/* Matches the input behind it, so the slash reads as cut through the eye
   rather than laid across it. */
.eye-slash-bg { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; }
.eye-slash { fill: none; stroke: currentColor; stroke-width: 2.05; stroke-linecap: round; }
.eye-slash, .eye-slash-bg {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset .26s ease;
}
.password-reveal[aria-pressed="true"] { color: var(--green-deep); }
.password-reveal[aria-pressed="true"] .eye-iris { transform: scale(.32); opacity: 0; }
.password-reveal[aria-pressed="true"] .eye-glint { opacity: 0; }
.password-reveal[aria-pressed="true"] .eye-slash,
.password-reveal[aria-pressed="true"] .eye-slash-bg { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .eye-iris, .eye-glint, .eye-slash, .eye-slash-bg, .password-reveal { transition: none; }
}
  .password-submit { width: 100%; margin-top: 4px; }
  .password-submit:disabled { cursor: wait; opacity: .62; transform: none; }
  .password-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: .82rem; }
  .password-status.is-error { color: #a14d62; }
  .password-recover { margin: 0; font-size: .82rem; text-align: center; }
  .password-recover a { color: var(--muted); text-decoration: underline; }
  .password-recover a:hover, .password-recover a:focus-visible { color: var(--ink); }
  .account-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--muted); font-size: .76rem; }
  .account-divider::before, .account-divider::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
  .provider-list { display: grid; gap: 11px; margin-top: 24px; }
  .provider-button { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 10px;
    padding: 13px 18px; border: 2px solid var(--rule); border-radius: 999px;
    color: var(--ink); background: #fff; font-weight: 800; text-align: center; text-decoration: none; }
  .provider-icon { width: 22px; height: 22px; display: block; }
  .instagram-icon { position: relative; border-radius: 6px; background: radial-gradient(circle at 30% 105%,#ffd600 0 22%,#ff7a00 35%,#ff0169 56%,#d300c5 72%,#7638fa 100%); }
  .instagram-icon::before { content: ""; position: absolute; inset: 4px; border: 1.8px solid #fff; border-radius: 5px; }
  .instagram-icon::after { content: ""; position: absolute; width: 3px; height: 3px; right: 5px; top: 5px; border-radius: 50%; background: #fff; }
  .instagram-icon i { position: absolute; width: 6px; height: 6px; left: 8px; top: 8px; border: 1.6px solid #fff; border-radius: 50%; }
  .provider-button:hover { border-color: var(--mark); }
  .provider-button.is-disabled { opacity: .42; pointer-events: none; }
  .account-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: .82rem; }
  .account-links a, .site-footer a { color: var(--green-deep); }
  .account-profile { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; margin: 24px 0; }
  .account-avatar { width: 58px; height: 58px; }
  .account-profile strong, .account-profile span { display: block; overflow-wrap: anywhere; }
  .account-profile span { color: var(--muted); font-size: .9rem; }
  .account-status { margin-top: 16px; color: var(--muted); font-size: .86rem; }
  .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
  .history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
  .history-head h3 { margin: 0; font-size: 1.05rem; }
  .history-list { display: grid; gap: 10px; max-height: 310px; overflow: auto; margin-top: 12px; }
  .history-card { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center;
    padding: 10px; border: 1px solid var(--rule); border-radius: 18px; background: #fffdf7; }
  .history-card img { width: 58px; height: 58px; border-radius: 13px; object-fit: cover; }
  .history-card > div > strong, .history-card > div > span {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .history-card > div > span { color: var(--muted); font-size: .78rem; }
  /* The photo report spans the card's three columns, under the row it belongs
     to. The grid above is image / copy / delete; a fourth item would otherwise
     start a second row beside the thumbnail. */
  .history-photo-report { grid-column: 1 / -1; }
  .history-photo-report .cwpr { margin-top: 10px; }
  .history-delete { width: 34px; height: 34px; padding: 0; background: #fbe0e6; color: var(--pink-deep); box-shadow: none; }
  .history-delete:hover { background: #f5b8c8; color: #fff; box-shadow: none; }
  .save-result { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
  .save-result .note { margin: 0; }
  .site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
  .app-view { display: none; animation: viewIn .32s ease both; }
  .app-view.is-active { display: block; }
  @keyframes viewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  .hero {
    position: relative; z-index: 1; --cross-blob: clamp(150px, 15vw, 215px); --cross-ring: clamp(190px, 26vw, 320px); min-height: min(680px, calc(100vh - 190px)); overflow: visible;
    display: grid; align-content: center; justify-items: start;
    padding: clamp(40px, 7vw, 88px) clamp(40px, 7vw, 88px) clamp(26px, 3.2vw, 40px);
    border-radius: 36px 36px 0 0; isolation: isolate; background:
      linear-gradient(180deg, rgba(255,217,231,0) 58%, rgba(255,217,231,.72) 84%, rgb(255,217,231) 100%),
      radial-gradient(circle at 84% 17%, rgba(255,206,92,.92) 0 5%, transparent 20%),
      radial-gradient(circle at 73% 76%, rgba(255,113,165,.72) 0 4%, transparent 23%),
      linear-gradient(135deg, #a8f0b9 0 43%, #ffec83 43% 67%, #ffb8d0 67% 100%);
    box-shadow: inset 0 1px rgba(255,231,139,.55);
  }
  /* Push the copy down far enough that the last element is always cut by the
     fold, whatever the window height. Without this the whole hero fits above
     the fold on a 1080-tall screen and the page reads as finished. */
  @media (min-width: 821px) {
    .hero { padding-top: max(clamp(40px, 7vw, 88px), calc((100vh - 658px) / 2)); }
    .hero > .hero-copy > .hero-actions { margin-top: max(28px, calc((100vh - 658px) / 2)); }
  }
  .hero::before { content: ""; position: absolute; z-index: -1; width: min(44vw, 530px); aspect-ratio: 1; right: -9%; top: 9%;
    border: 25px solid rgba(255,219,140,.46); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,169,197,.26), 0 0 0 37px rgba(146,213,167,.17); }
  .hero::after { content: ""; position: absolute; z-index: -1; width: var(--cross-blob); aspect-ratio: 1; pointer-events: none;
    left: calc(var(--cross-blob) * -.42); bottom: calc(var(--cross-blob) * -.5);
    border-radius: 42% 58% 51% 49%; background: linear-gradient(145deg, #ffb3ce, #ffe6b4); transform: rotate(24deg); opacity: .7; }
  .hero-copy { position: relative; z-index: 2; max-width: min(100%, 1180px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: clamp(24px, 3.6vw, 64px); align-items: start; }
  .hero-copy > .model-launch, .hero-copy > h1, .hero-copy > .sub, .hero-copy > .hero-actions { grid-column: 1; }
  .model-launch { margin: 0 0 12px; font: 700 clamp(1.45rem, 3vw, 2.25rem)/1 "Fredoka", "Avenir Next Rounded", sans-serif; letter-spacing: -.04em;
    background: linear-gradient(90deg, #d94686 0%, #f76b9d 35%, #5b956b 72%, #3f7851 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .model-launch span { display: inline-block; margin-right: .18em; font-family: "Nunito Sans", sans-serif; font-size: .48em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; vertical-align: .26em; }
  .hero h1 { color: #315c40; max-width: 12.5ch; margin-bottom: 20px; font-size: clamp(3.45rem, 8vw, 6.9rem); text-shadow: 0 2px 0 rgba(255,234,133,.32); }
  .hero h1 .bubble-word { display: inline; background: linear-gradient(100deg, #d83d82, #f269a3 42%, #d83d82); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .sub { max-width: 40ch; font-family: "Fredoka", "Avenir Next Rounded", ui-rounded, sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.28; letter-spacing: -.015em; color: #456a50; font-weight: 600; }
  .hero .sub strong { font-weight: 700; }
  .hero-signals { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: auto; margin-top: 0; }
  .hero-signals div { min-height: 76px; display: grid; align-content: center; gap: 2px; padding: 12px 16px; border: 0; border-radius: 18px;
    background: #fffdf7; box-shadow: 0 10px 26px rgba(62,103,73,.16); }
  .hero-signals strong { color: #315c40; font: 700 1.05rem/1 "Fredoka", "Avenir Next Rounded", sans-serif; letter-spacing: -.02em; }
  .hero-signals span { color: #52735d; font-size: .74rem; font-weight: 800; line-height: 1.2; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
  .hero > .hero-copy > .hero-actions button, .hero > .hero-copy > .hero-actions a { display: inline-flex; align-items: center; text-decoration: none; padding: 14px 26px; font-size: 1.03rem; background: #ffd23f; color: #2f5740; box-shadow: 0 6px 0 #e0af1f; }
  .hero > .hero-copy > .hero-actions button:hover, .hero > .hero-copy > .hero-actions a:hover { background: #ffc81f; box-shadow: 0 8px 0 #e0af1f; }
  .hero > .hero-copy > .hero-actions button:first-child { background: #c9407a; color: #fff; box-shadow: 0 6px 0 #a32e61; }
  .hero > .hero-copy > .hero-actions button:first-child:hover { background: #b93a70; box-shadow: 0 8px 0 #a32e61; }
  .hero-bubble { position: absolute; border-radius: 999px; opacity: .96; box-shadow: 0 12px 25px rgba(76,113,84,.15); }
  .hero-bubble.one { width: 118px; height: 118px; right: 10%; top: 14%; background: linear-gradient(145deg, #ffd052, #ffed8d); }
  .hero-bubble.two { width: var(--cross-ring); height: var(--cross-ring); right: 4%; bottom: calc(var(--cross-ring) * -.44);
    background: none; border: calc(var(--cross-ring) / 13) solid rgba(255,205,150,.3); border-radius: 999px;
    box-shadow: 0 0 0 17px rgba(255,178,203,.2), 0 0 0 34px rgba(150,214,172,.14); }
  .hero-bubble.three { width: 66px; height: 66px; left: 8%; bottom: 12%; background: linear-gradient(145deg, #69ce85, #c4ffce); }
  .home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 10px; }
  .home-card { min-height: 205px; padding: 28px; border-radius: 30px; box-shadow: 0 14px 34px rgba(65,100,81,.09); }
  .home-card:nth-child(1) { background: linear-gradient(145deg, #d6fae0, #f6ffdf); }
  .home-card:nth-child(2) { background: linear-gradient(145deg, #fff1a4, #fff8d7); }
  .home-card:nth-child(3) { background: linear-gradient(145deg, #ffcbdd, #ffe5ec); }
  .home-card .bubble { display: inline-flex; align-items: center; min-width: 44px; padding: 6px 0;
    margin-bottom: 18px; color: var(--green-deep); background: transparent; font-size: 1.15rem; letter-spacing: -.03em; }
  .home-card h3 { font-size: 1.22rem; margin: 0 0 7px; }

  .why-intro { max-width: 760px; }
  .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 16px; }
  .why-card { min-height: 250px; padding: clamp(26px, 4vw, 42px); border-radius: 30px; background: #fff; box-shadow: 0 14px 42px rgba(65,100,81,.08); }
  .why-card-featured { grid-row: span 2; background: linear-gradient(145deg, #527b5e, #315443); color: #fff; }
  .why-card h2 { margin-bottom: 16px; }
  .why-card-featured h2 { color: #fff; font: 700 clamp(2rem, 4vw, 3.4rem)/1.03 "Fredoka", "Avenir Next Rounded", sans-serif; letter-spacing: -.045em; }
  .why-card p { max-width: 46ch; color: #617466; }
  .why-card-featured p { color: rgba(255,255,255,.82); font-size: 1.05rem; }
  .why-kicker { color: #f9dda2 !important; font-weight: 800; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; }
  .why-close { margin: 24px 0 10px; padding: clamp(40px, 7vw, 82px); border-radius: 36px; background: linear-gradient(120deg, #fff3c4, #f8d4dc); text-align: center; }
  .why-close h2 { max-width: 15ch; margin: 0 auto 12px; font: 700 clamp(2rem, 5vw, 4rem)/1.03 "Fredoka", "Avenir Next Rounded", sans-serif; letter-spacing: -.045em; color: #526f5b; }
  .why-close p:not(.eyebrow) { color: #66806e; }
  .why-close .hero-actions { justify-content: center; }

  .page-intro { padding: 54px 6px 20px; max-width: 700px; }
  .page-intro .eyebrow { display: inline-block; margin-bottom: 12px; padding: 7px 13px; border-radius: 999px;
    color: #a84069; background: linear-gradient(100deg, #ffc0d6, #ffe58d); font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
  .page-intro h1 { color: #467b57; font-size: clamp(2.6rem, 6vw, 4.8rem); max-width: 12ch; }
  .page-intro .sub { font-size: 1.1rem; }

  #live, #offline, #status, #error, #result, #validatedRegions, #contactSheets, .technical-intro, .try-access-gate {
    margin: 18px 0 34px; padding: clamp(24px, 4vw, 42px); background: linear-gradient(145deg, rgba(250,255,241,.97), rgba(255,249,215,.94));
    border: 1px solid #cbe6bf; border-radius: 34px; box-shadow: 0 14px 48px rgba(96,145,107,.13);
  }
  .try-access-gate { max-width: 760px; }
  .try-access-gate h2 { margin: 10px 0 10px; color: var(--green-deep); font-size: clamp(1.7rem, 4vw, 2.5rem); }
  .try-access-gate > p:not(.eyebrow) { max-width: 58ch; color: var(--muted); }
  .try-access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
  .try-access-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border-radius: 999px; color: var(--green-deep); background: #fff; border: 1px solid #bcd9bd; font-weight: 800; text-decoration: none; }
  .try-access-actions button + button { color: var(--green-deep); background: #fff; border: 1px solid #bcd9bd; box-shadow: none; }
  .offline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .offline-actions button, .offline-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
  .offline-actions button { color: #fff; background: var(--pink); box-shadow: 0 5px 0 #d989a3; }
  .offline-actions a { color: var(--green-deep); background: var(--yellow); box-shadow: 0 5px 0 #dec35f; }
  #live h2, #result > h2, #validatedRegions h2, #contactSheets > h2 { margin-bottom: 20px; }
  .drop { border: 2px dashed #a9d3ad; border-radius: 28px; background: #f5fbf2; padding: 42px 22px; }
  .drop.over { border-color: var(--pink-deep); background: #fff6f8; }
  .models { gap: 14px; }
  .model-choice { border: 2px solid var(--rule); border-radius: 24px; padding: 18px; }
  .model-choice:hover { border-color: #a8d5af; }
  .model-choice.on { border-color: var(--pink-deep); box-shadow: 0 0 0 4px #fbe1e7; }
  .chip { border: 0; color: var(--green-deep); background: #e8f6e7; }
  .chip.exp { color: var(--pink-deep); background: #fce8ec; }
  .context-compare, .readout, .college-comparison, .region-attribution, .methods, .msg {
    border: 1px solid var(--rule); border-radius: 24px; background: #fff;
  }
  .context-compare summary, .methods summary { border-radius: 24px; }
  .result-presentation { width: min(100%, 760px); margin: 0 auto; }
  .result-photo-stage {
    position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 0;
    border-radius: 42px; background: linear-gradient(145deg, #eef8eb, #fff7d8);
    box-shadow: 0 24px 70px rgba(84,132,97,.19), 0 0 0 1px rgba(191,227,189,.85);
  }
  .result-photo-stage img {
    display: block; width: 100%; height: clamp(390px, 58vh, 620px); object-fit: contain;
    background: #f3f8ef;
  }
  .result-photo-stage::after {
    content: ""; position: absolute; z-index: 1; inset: 38% 0 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(40,62,50,.1) 34%, rgba(38,54,45,.42));
  }
  .readout {
    position: relative; overflow: hidden; margin-top: 18px; padding: clamp(24px, 4vw, 38px);
    background: linear-gradient(145deg, #fff 0 62%, #f4faef); transition: background .35s, box-shadow .35s;
  }
  .score-pedestal {
    position: absolute; z-index: 3; inset: 0; isolation: isolate; display: grid; place-items: end center;
    padding: 0 18px clamp(24px, 6vw, 48px); pointer-events: none;
  }
  .score-pedestal::before, .score-pedestal::after {
    content: ""; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none;
  }
  .score-pedestal::before {
    width: min(82vw, 560px); aspect-ratio: 1; bottom: -31%; opacity: .72;
    background: radial-gradient(circle, rgba(247,195,207,.3), rgba(255,229,140,.12) 48%, transparent 70%);
    filter: blur(3px); animation: scoreBreathe 3.8s ease-in-out infinite;
  }
  .score-pedestal::after {
    width: min(56vw, 390px); height: 42px; bottom: 3%; opacity: .55;
    background: radial-gradient(ellipse, rgba(255,255,255,.82), transparent 68%); filter: blur(9px);
  }
  .headline { position: relative; z-index: 2; justify-content: center; align-items: center; flex-direction: column; gap: 8px; text-align: center; }
  .pct {
    color: #fff; font-size: clamp(7rem, 22vw, 13rem); font-weight: 700;
    letter-spacing: -.07em; line-height: .82; transition: color .35s, filter .35s, text-shadow .35s;
    text-shadow: 0 4px 2px rgba(54,74,62,.18), 0 12px 34px rgba(45,61,51,.44);
  }
  .pctlabel { padding: 7px 13px; border-radius: 999px; color: #53705d; background: rgba(255,255,255,.9);
    box-shadow: 0 6px 22px rgba(53,76,60,.16); font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .result-presentation.score-low .score-pedestal::before { opacity: .38; filter: blur(12px) saturate(.65); }
  .result-presentation.score-low .pct { color: #e9f1ea; text-shadow: 0 3px 1px rgba(60,80,66,.28), 0 0 24px rgba(255,255,255,.35); }
  .result-presentation.score-mid .score-pedestal::before {
    opacity: .82; background: radial-gradient(circle at 42% 42%, rgba(255,244,181,.58) 0 7%, transparent 32%),
      radial-gradient(circle at 61% 58%, rgba(247,195,207,.45) 0 8%, transparent 37%),
      radial-gradient(circle, rgba(191,227,189,.28), transparent 66%);
    animation: warmGlow 2.8s ease-in-out infinite alternate;
  }
  .result-presentation.score-fire .readout { box-shadow: inset 0 0 70px rgba(255,184,102,.15), 0 16px 52px rgba(220,126,118,.12); }
  .result-presentation.score-fire .score-pedestal::before {
    opacity: .98; background:
      radial-gradient(ellipse at 32% 68%, rgba(255,91,94,.43) 0 3%, transparent 26%),
      radial-gradient(ellipse at 69% 63%, rgba(255,187,58,.48) 0 4%, transparent 29%),
      radial-gradient(ellipse at 50% 48%, rgba(70,196,230,.3) 0 3%, transparent 34%),
      radial-gradient(circle at 50% 64%, rgba(255,240,177,.38), transparent 58%);
    filter: blur(2px); animation: fireGlow 1.55s ease-in-out infinite alternate;
  }
  .result-presentation.score-fire .pct { color: #fff3d4; text-shadow: 0 0 14px #ff9e58, 0 0 34px rgba(255,93,104,.9), 0 9px 22px rgba(45,61,51,.4); }
  .result-presentation.score-star .readout { background: radial-gradient(circle at 50% 22%, #fffce5, #fff 48%, #f5faef); }
  .result-presentation.score-star .score-pedestal::before {
    opacity: 1; background: radial-gradient(circle, rgba(255,239,137,.65) 0 6%, rgba(255,205,75,.24) 18%, transparent 59%);
    filter: blur(2px); animation: starPulse 1.8s ease-in-out infinite;
  }
  .result-presentation.score-star .pct { color: #fff9c9; text-shadow: 0 0 8px #fff, 0 0 25px #ffd34d, 0 0 58px rgba(255,211,77,.92); }
  .result-presentation.score-galaxy .readout { background: radial-gradient(circle at 50% 19%, #eefaff, #fff 47%, #f2edff 100%); box-shadow: 0 18px 70px rgba(76,164,224,.2); }
  .result-presentation.score-galaxy .score-pedestal::before {
    opacity: 1; background:
      radial-gradient(ellipse at 36% 54%, rgba(41,195,255,.48) 0 4%, transparent 32%),
      radial-gradient(ellipse at 67% 45%, rgba(134,94,255,.42) 0 5%, transparent 36%),
      radial-gradient(ellipse at 52% 68%, rgba(83,229,255,.36) 0 3%, transparent 39%),
      radial-gradient(circle, rgba(222,250,255,.7) 0 3%, rgba(100,151,255,.2) 24%, transparent 63%);
    filter: blur(4px); animation: nebulaDrift 3.6s ease-in-out infinite alternate;
  }
  .result-presentation.score-galaxy .pct {
    color: #dffaff; text-shadow: 0 0 7px #fff, 0 0 24px #29c3ff,
      0 0 55px rgba(73,94,255,.95), 0 0 88px rgba(50,216,255,.72);
  }
  .result-presentation.score-tier-pop .pct { animation: scoreTierPop .42s cubic-bezier(.2,.9,.28,1.35); }
  @keyframes scoreBreathe { 50% { transform: scale(1.08); opacity: .95; } }
  @keyframes warmGlow { to { transform: translate3d(8px,-5px,0) scale(1.07); filter: blur(4px); } }
  @keyframes fireGlow { to { transform: translate3d(-5px,-9px,0) scale(1.1,1.04); filter: blur(5px) saturate(1.15); } }
  @keyframes nebulaDrift { to { transform: translate3d(11px,-8px,0) scale(1.1,1.04); filter: blur(7px) saturate(1.18); } }
  @keyframes starPulse { 50% { transform: scale(1.13); filter: blur(4px); } }
  @keyframes scoreTierPop { 45% { transform: translateY(-9px) scale(1.075); } 100% { transform: none; } }
  .track { height: 44px; }
  .axis { height: 4px; border-radius: 999px; background: #e2efe1; }
  .bandbar { height: 18px; top: 11px; border-radius: 999px; opacity: .65; }
  .tick { width: 4px; height: 30px; border-radius: 999px; background: var(--pink-deep); }
  .result-presentation.score-revealing .scale,
  .result-presentation.score-revealing .bandline {
    opacity: 0; visibility: hidden; transform: translateY(12px);
  }
  .result-presentation.score-bars-revealed .scale,
  .result-presentation.score-bars-revealed .bandline {
    animation: scoreBarsReveal .68s cubic-bezier(.16,.82,.24,1) both;
  }
  @keyframes scoreBarsReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  .photo-feedback { border: 0; border-radius: 28px; background: #fff4ca; padding: 25px; text-align: left; }
  #pfText { font-size: 1.05rem; line-height: 1.65; }
  .photo-feedback .pf-actions { margin-top: 18px; }
  .validated-counts { gap: 12px; }
  .validated-count { border: 0; border-radius: 20px; background: #eef8eb; padding: 16px; text-align: center; }
  .validated-count:nth-child(even) { background: #fff1bc; }
  .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vcard { border: 0; border-radius: 25px; box-shadow: 0 10px 30px rgba(96,145,107,.11); }
  .vcard img { aspect-ratio: 4 / 5; }
  .vcard figcaption { padding: 14px 16px 17px; }
  .technical-intro { background: linear-gradient(135deg, #f5faef, #fff6cf); }
  .methods-body { color: #536e5b; }
  .equation { border-radius: 18px; background: #fbfdf8; border-color: var(--rule); }
  footer { padding: 30px 8px 10px; color: var(--muted); text-align: center; }

  .business-hero {
    position: relative; overflow: hidden; margin: 18px 0 28px; padding: clamp(36px, 7vw, 80px);
    border-radius: 40px; background: linear-gradient(135deg, #ffb4cd, #ffe47a 58%, #bdf3bf);
  }
  .business-hero h1 { color: var(--green-deep); font-size: clamp(2.8rem, 7vw, 5.2rem); max-width: 11ch; }
  .business-hero .sub { max-width: 47ch; font-size: 1.12rem; }
  .business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .business-card { padding: 27px; border-radius: 28px; background: linear-gradient(145deg, #d9ffe1, #f8ffe0); border: 1px solid #c4eabb; box-shadow: 0 12px 30px rgba(70,123,87,.1); }
  .business-card:nth-child(2) { background: linear-gradient(145deg, #ffe37c, #fff6c5); }
  .business-card:nth-child(3) { background: linear-gradient(145deg, #ffc6d9, #ffecf2); }
  .business-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .business-contact { margin: 26px 0; padding: 28px; border-radius: 28px; text-align: center; background: #f8d5de; }
  .business-contact a { display: inline-block; margin-top: 10px; padding: 11px 20px; border-radius: 999px;
    color: #fff; background: var(--pink-deep); font-weight: 800; text-decoration: none; }

  .processing-card { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: 26px; align-items: center; }
  .processing-preview { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 28px; background: #edf7ea; }
  .processing-preview img { display: block; width: 100%; height: 100%; object-fit: cover; animation: softPixelate 1.5s ease-in-out infinite; }
  .processing-preview::before {
    content: ""; position: absolute; inset: 0; z-index: 2; opacity: .5; mix-blend-mode: screen;
    background-image: linear-gradient(90deg, rgba(255,229,140,.9) 1px, transparent 1px),
      linear-gradient(rgba(247,195,207,.9) 1px, transparent 1px);
    background-size: 18px 18px; animation: pixelGrid 1.5s steps(4) infinite;
  }
  .processing-preview::after {
    content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 26%; top: -30%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.8), transparent);
    animation: scanPhoto 1.8s ease-in-out infinite;
  }
  .processing-copy h3 { margin: 0 0 8px; font-size: 1.45rem; }
  .processing-dots { display: flex; gap: 8px; margin-top: 18px; }
  .processing-dots i { display: block; width: 13px; height: 13px; border-radius: 999px; animation: dotBounce 1s ease-in-out infinite; }
  .processing-dots i:nth-child(1) { background: var(--green); }
  .processing-dots i:nth-child(2) { background: var(--yellow); animation-delay: .14s; }
  .processing-dots i:nth-child(3) { background: var(--pink); animation-delay: .28s; }
  @keyframes softPixelate { 0%,100% { filter: saturate(.9) blur(0); transform: scale(1.01); } 50% { filter: saturate(1.35) blur(3px); transform: scale(1.06); } }
  @keyframes pixelGrid { 0%,100% { background-size: 18px 18px; opacity: .35; } 50% { background-size: 30px 30px; opacity: .72; } }
  @keyframes scanPhoto { from { top: -30%; } to { top: 110%; } }
  @keyframes dotBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

  /* Photo Studio: multi-upload picker and carousel maker. */
  .studio-shell { margin: 18px 0 34px; padding: clamp(22px, 5vw, 46px); border-radius: 38px;
    background: linear-gradient(145deg, #caffd4, #ffea86 54%, #ffbdd2); box-shadow: 0 18px 48px rgba(89,141,100,.13); }
  .studio-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
  .studio-mode { display: block; cursor: pointer; padding: 20px; border: 3px solid transparent;
    border-radius: 27px; background: rgba(247,255,233,.83); transition: transform .18s, border-color .18s; }
  .studio-mode:has(input:checked) { border-color: var(--green-deep); transform: translateY(-2px); }
  .studio-mode input { margin-right: 8px; accent-color: var(--green-deep); }
  .studio-mode b { font-family: "Fredoka", sans-serif; font-size: 1.15rem; }
  .studio-mode span { display: block; margin: 7px 0 0 25px; color: var(--muted); font-size: .91rem; }
  .studio-drop { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px;
    border: 3px dashed #84c98b; border-radius: 31px; background: rgba(245,255,218,.78); text-align: center; }
  .studio-drop.over { border-color: var(--pink-deep); background: #fff; }
  .studio-drop p { margin: 0; }
  .studio-preview-grid, .studio-result-grid { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; }
  .studio-thumb, .studio-result-card { position: relative; overflow: hidden; margin: 0; border-radius: 25px; background: #fff;
    box-shadow: 0 10px 28px rgba(87,133,97,.12); }
  .studio-thumb img, .studio-result-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .studio-thumb figcaption { padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
  .studio-remove { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0;
    color: #fff; background: rgba(200,111,134,.9); box-shadow: none; }
  .studio-remove:hover { color: #fff; background: var(--pink-deep); box-shadow: none; }
  .studio-controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 15px;
    margin-top: 20px; padding: 18px; border-radius: 25px; background: rgba(255,255,255,.72); }
  .studio-controls label { font-weight: 800; }
  .studio-controls select { display: block; margin-top: 6px; padding: 10px 36px 10px 14px; color: var(--ink);
    border: 2px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; }
  .studio-progress { padding: 34px; border-radius: 31px; background: #fff; text-align: center; }
  .studio-progress-orbit { position: relative; width: 110px; height: 110px; margin: 0 auto 22px; border-radius: 50%;
    border: 10px solid #eef7eb; border-top-color: var(--pink); border-right-color: var(--yellow); animation: studioSpin 1.1s linear infinite; }
  .studio-progress-orbit::after { content: "♡"; position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--green-deep); font: 700 2.2rem "Fredoka"; animation: studioSpin 1.1s linear infinite reverse; }
  @keyframes studioSpin { to { transform: rotate(360deg); } }
  .studio-winner { grid-column: span 2; }
  .studio-result-card.is-selected { outline: 4px solid var(--yellow); outline-offset: -4px; }
  .studio-result-card.is-first { outline-color: var(--pink); }
  .studio-rank { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border-radius: 999px;
    color: var(--ink); background: rgba(255,255,255,.94); font-weight: 800; }
  .studio-score { position: absolute; right: 10px; bottom: 92px; min-width: 70px; padding: 8px 10px; border-radius: 18px;
    color: #fff; background: rgba(94,158,114,.94); text-align: center; font: 700 1.35rem "Fredoka"; }
  .studio-result-copy { padding: 15px; }
  .studio-result-copy h3 { margin: 0 0 7px; font-size: 1rem; }
  .studio-result-copy p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
  .studio-post-card { margin: 20px 0; padding: 24px; border-radius: 28px; background: #fff0f4; }
  .studio-post-card h3 { margin: 0 0 8px; }
  .studio-caption { margin-top: 14px; padding: 14px 17px; border-radius: 18px; background: #fff; font-size: 1.05rem; }
  .studio-ranking { margin-top: 24px; padding: 21px; border-radius: 28px; background: rgba(255,255,255,.72); }
  .studio-ranking ol { margin: 12px 0 0; padding-left: 24px; columns: 2; column-gap: 36px; }
  .studio-ranking li { padding: 5px 0; break-inside: avoid; }
  .studio-failures { margin-top: 17px; color: var(--pink-deep); font-size: .9rem; }

  .celebration-layer { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; perspective: 900px; }

  /* Confetti falls with depth, tumbling and changing direction instead of moving as one flat sheet. */
  .confetti-bit { position: absolute; left: var(--x); top: -9vh; width: var(--w); height: var(--h);
    border-radius: var(--radius); background: var(--color); box-shadow: 0 4px 10px rgba(91,111,96,.14);
    transform-style: preserve-3d; animation: confettiPhysics var(--duration) cubic-bezier(.18,.62,.28,1) both var(--delay); }
  .confetti-bit.ribbon { width: 5px; height: 28px; border-radius: 999px; }
  .confetti-bit.dot { border-radius: 50%; }

  /* Fireworks are individual rockets followed by radial sparks with gravity and fading ember trails. */
  .firework-burst { position: absolute; left: var(--x); top: var(--y); width: 1px; height: 1px; }
  .firework-rocket { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 46px; border-radius: 999px;
    background: linear-gradient(to top, transparent, var(--color) 50%, #fff); filter: drop-shadow(0 0 6px var(--color));
    animation: rocketRise .72s cubic-bezier(.15,.72,.25,1) both var(--delay); }
  .firework-flash { position: absolute; inset: -11px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 18px 7px var(--color), 0 0 50px 16px color-mix(in srgb, var(--color) 54%, transparent);
    animation: fireworkFlash .48s ease-out both var(--delay); }
  .firework-spark { position: absolute; width: var(--spark); height: var(--spark); margin: -2px;
    border-radius: 50%; background: #fff; box-shadow: 0 0 5px 2px var(--color), 0 0 12px var(--color);
    animation: sparkFlight var(--duration) cubic-bezier(.13,.58,.3,1) both var(--delay); }
  .firework-spark::after { content: ""; position: absolute; top: 50%; right: 50%; width: var(--trail); height: 2px;
    transform: rotate(var(--angle)); transform-origin: right center; border-radius: 999px;
    background: linear-gradient(to left, var(--color), transparent); opacity: .8; }

  /* Star scores get bright points with lens-like glints, varied depth, and slow upward drift. */
  .star-particle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
    border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, var(--color) 19%, transparent 49%);
    filter: drop-shadow(0 0 8px var(--color)); animation: starDrift var(--duration) ease-in-out both var(--delay); }
  .star-particle::before, .star-particle::after { content: ""; position: absolute; left: 50%; top: 50%;
    border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: translate(-50%,-50%); }
  .star-particle::before { width: 180%; height: 2px; }
  .star-particle::after { width: 2px; height: 180%; background: linear-gradient(transparent, #fff, transparent); }

  /* Galaxy scores layer a soft nebula, deep starfield, glints, and short-lived meteors. */
  .celebration-layer.galaxy { background: radial-gradient(ellipse at 50% 58%, rgba(73,205,255,.18), transparent 48%),
    radial-gradient(ellipse at 30% 34%, rgba(150,112,255,.15), transparent 38%),
    linear-gradient(rgba(241,250,255,.12), rgba(236,231,255,.18)); animation: galaxyFade 5.8s ease both; }
  .nebula-cloud { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1.7;
    border-radius: 50%; opacity: .65; filter: blur(28px); background:
      radial-gradient(ellipse at 35% 48%, var(--color) 0 8%, transparent 48%),
      radial-gradient(ellipse at 68% 54%, var(--color2) 0 6%, transparent 44%);
    animation: nebulaFloat var(--duration) ease-in-out both var(--delay); }
  .galaxy-star { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
    border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px var(--color), 0 0 13px var(--color);
    animation: galaxyTwinkle var(--duration) ease-in-out both var(--delay); }
  .shooting-star { position: absolute; left: var(--x); top: var(--y); width: var(--length); height: 2px;
    border-radius: 999px; opacity: 0; background: linear-gradient(90deg, transparent, var(--color), #fff);
    box-shadow: 0 0 7px var(--color); transform: rotate(var(--angle));
    animation: meteorFlight 1.15s cubic-bezier(.2,.62,.32,1) both var(--delay); }

  @keyframes confettiPhysics {
    0% { opacity: 0; transform: translate3d(0,-8vh,0) rotateX(0deg) rotateY(0deg) rotateZ(var(--rot)); }
    8% { opacity: 1; }
    34% { transform: translate3d(var(--sway),34vh,70px) rotateX(240deg) rotateY(130deg) rotateZ(calc(var(--rot) + 100deg)); }
    68% { transform: translate3d(var(--sway2),73vh,-35px) rotateX(520deg) rotateY(310deg) rotateZ(calc(var(--rot) + 260deg)); }
    100% { opacity: .18; transform: translate3d(var(--sway3),118vh,20px) rotateX(820deg) rotateY(560deg) rotateZ(calc(var(--rot) + 520deg)); }
  }
  @keyframes rocketRise { 0% { opacity: 0; transform: translate3d(0,76vh,0) scaleY(.35); } 16% { opacity: 1; }
    82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0,0,0) scaleY(1); } }
  @keyframes fireworkFlash { 0% { opacity: 0; transform: scale(.08); } 15% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.5); } }
  @keyframes sparkFlight { 0%,28% { opacity: 0; transform: translate3d(0,0,0) scale(.25); }
    34% { opacity: 1; } 76% { opacity: 1; transform: translate3d(var(--dx),var(--dy),0) scale(1); }
    100% { opacity: 0; transform: translate3d(var(--dx2),var(--dy2),0) scale(.18); filter: blur(1px); } }
  @keyframes starDrift { 0% { opacity: 0; transform: translate3d(0,34px,0) scale(.25) rotate(-16deg); }
    28% { opacity: 1; transform: translate3d(var(--drift),0,40px) scale(1.2) rotate(4deg); }
    58% { opacity: .78; transform: translate3d(var(--drift-back),-32px,-15px) scale(.78) rotate(13deg); }
    100% { opacity: 0; transform: translate3d(var(--drift),-105px,20px) scale(.3) rotate(28deg); } }
  @keyframes galaxyFade { 0%,100% { opacity: 0; } 12%,78% { opacity: 1; } }
  @keyframes nebulaFloat { 0% { opacity: 0; transform: translate3d(-5%,8%,0) scale(.8); }
    22%,76% { opacity: .62; } 100% { opacity: 0; transform: translate3d(10%,-9%,0) scale(1.18); } }
  @keyframes galaxyTwinkle { 0%,100% { opacity: 0; transform: scale(.2); } 28% { opacity: .95; transform: scale(1.35); }
    55% { opacity: .42; transform: scale(.68); } 74% { opacity: 1; transform: scale(1.1); } }
  @keyframes meteorFlight { 0% { opacity: 0; transform: translate3d(-18vw,-8vh,0) rotate(var(--angle)) scaleX(.25); }
    18% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate3d(42vw,25vh,0) rotate(var(--angle)) scaleX(1.15); } }

  @media (max-width: 820px) {
    body { padding-inline: 14px; }
    .app-header { position: relative; top: 0; border-radius: 28px; align-items: flex-start; }
    .site-nav { max-width: 70%; }
    .home-cards { grid-template-columns: 1fr; }
    .business-grid, .why-grid { grid-template-columns: 1fr; }
    .why-card-featured { grid-row: auto; }
    .processing-card { grid-template-columns: 1fr; text-align: center; }
    .processing-preview { max-width: 260px; width: 100%; margin: auto; }
    .hero { min-height: 620px; padding: 46px 28px; border-radius: 34px; }
    .hero-signals { max-width: 580px; }
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-winner { grid-column: span 1; }
  }
  @media (max-width: 560px) {
    .app-header { padding: 14px 15px; gap: 10px; flex-wrap: wrap; border-radius: 28px; }
    .brand { font-size: 1.2rem; padding-top: 5px; }
    .site-nav { order: 3; width: 100%; max-width: none; flex-wrap: wrap; justify-content: flex-start; gap: 2px; overflow: visible; }
    .site-nav button, .site-nav a, .nav-more summary { padding: 7px 10px; font-size: .76rem; }
    .nav-more-menu { right: 0; left: auto; }
    .account-entry, .account-button { margin-left: auto; }
    .selected-photo { grid-template-columns: 60px minmax(0, 1fr); }
    .selected-photo img { width: 60px; height: 60px; }
    .selected-photo button { grid-column: 1 / -1; width: 100%; }
    .account-dialog { max-height: calc(100dvh - 20px); }
    .account-dialog-inner { padding: 28px 22px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions button, .hero-actions a { width: 100%; justify-content: center; }
    .hero { min-height: 680px; }
    .hero::before { width: 230px; border-width: 14px; right: -24%; top: 10%; }
    .model-launch { font-size: 1.35rem; }
    .hero h1 { font-size: clamp(3.05rem, 16vw, 4.2rem); }
    .hero-copy { grid-template-columns: minmax(0, 1fr); }
    .hero-signals { grid-column: 1; grid-row: auto; gap: 7px; margin-top: 20px; }
    .hero-signals div { min-height: 0; grid-template-columns: max-content 1fr; align-items: center; gap: 9px; padding: 9px 12px; }
    .vgrid { grid-template-columns: 1fr; }
    .studio-modes { grid-template-columns: 1fr; }
    .studio-preview-grid, .studio-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-ranking ol { columns: 1; }
    #live, #offline, #status, #error, #result, #validatedRegions, #contactSheets, .technical-intro {
      padding: 22px 18px; border-radius: 27px;
    }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 821px) {
    .processing-preview img, .processing-preview::before, .processing-preview::after,
    .processing-dots i, .confetti-bit, .firework-rocket, .firework-flash, .firework-spark,
    .star-particle, .nebula-cloud, .galaxy-star, .shooting-star, .score-pedestal::before,
    .score-tier-pop .pct { animation: none !important; }
    .celebration-layer { display: none !important; }
  }
.app-header a.app-launch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 20px;border-radius:999px;background:var(--green-deep);color:#fff;box-shadow:0 6px 0 #4e865b;font-weight:800}.app-header a.app-launch:hover{background:#4e865b;box-shadow:0 4px 0 #3e714b;transform:translateY(2px)}.drop{padding-bottom:56px}.embedded{background:var(--cream)}.embedded .app-header,.embedded .site-footer,.embedded .page-intro,.embedded .home-cards,.embedded .business-grid,.embedded .technical-intro{display:none!important}.embedded .wrap{width:min(1120px,calc(100% - 24px));padding-top:18px}.embedded #live,.embedded #offline,.embedded #status,.embedded #error,.embedded #result,.embedded #validatedRegions,.embedded #contactSheets{margin-top:8px}.embedded .celebration-layer{display:none}
.drop{display:flex;flex-direction:column;align-items:center;gap:0}.drop>p{order:1}.drop>.file-picker-row{position:relative;z-index:5;order:2;display:flex;align-items:center;justify-content:center;width:min(100%,520px);min-height:64px;margin:0 0 34px;padding:8px 12px;background:#f5fbf2}.drop>.file-picker-row .native-file-picker{position:relative;z-index:6;display:block;width:min(100%,430px);min-height:48px;margin:0;padding:4px;overflow:visible}.drop>.selected-photo{position:relative;z-index:1;order:3;width:min(100%,650px);margin:0 auto}.embedded .drop{padding-bottom:54px}.embedded .drop>.file-picker-row{margin-bottom:40px}

/* ── LANDING NARRATIVE, FOOTER AND CAREERS ─────────────────────────────────
     A long page earns its length by changing rhythm, not by repeating a card
     three times. Each section below sits on its own measure, alternates weight,
     and carries exactly one accent. Motion is one fade-and-rise, once. */

/* Research instruments travel with the contact sheets, not with the product. */
 body:not(.research-unlocked) .research-only{display:none !important}
.hero-scroll{display:none;position:absolute;z-index:2;left:50%;bottom:26px;margin:0;transform:translateX(-50%);color:#3f6c4d;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.hero-scroll span{display:block}
.hero-scroll::after{content:"";display:block;width:1px;height:26px;margin:9px auto 0;background:linear-gradient(#3f6c4d,transparent);animation:scrollHint 2.4s ease-in-out infinite}
@keyframes scrollHint{0%,100%{opacity:.2;transform:scaleY(.6);transform-origin:top}
45%{opacity:1;transform:scaleY(1)}
}
.story{position:relative;isolation:isolate;padding:clamp(44px,6.2vw,84px) 0}
#homeView{position:relative;isolation:isolate}
#homeView::before{content:"";position:absolute;z-index:-2;inset:34vh -18vw 0;pointer-events:none;background:
radial-gradient(circle at 4% 14%,rgba(178,230,192,.5) 0 8%,transparent 22%),
radial-gradient(circle at 96% 30%,rgba(255,228,144,.48) 0 7%,transparent 21%),
radial-gradient(circle at 3% 52%,rgba(255,196,215,.46) 0 8%,transparent 23%),
radial-gradient(circle at 94% 72%,rgba(178,230,192,.42) 0 9%,transparent 25%),
radial-gradient(circle at 7% 88%,rgba(255,228,144,.4) 0 8%,transparent 23%),
linear-gradient(180deg,rgba(255,242,215,.5) 0%,rgba(238,250,229,.44) 20%,rgba(255,236,243,.5) 44%,rgba(252,250,219,.42) 62%,rgba(236,250,229,.46) 80%,rgba(255,241,213,.52) 100%)}
#storyProblem,.reads,.studio-tease,.home-close{overflow:hidden;border-radius:30px;padding-inline:clamp(28px,7vw,84px)}
.reads{border-radius:0}
#storyProblem{margin-top:-1px;border-radius:0;overflow:visible;padding-top:clamp(26px,3vw,40px);background:
linear-gradient(180deg,rgb(255,217,231) 0%,rgba(255,222,228,.9) 9%,rgba(255,234,202,.6) 25%,rgba(252,247,201,.48) 43%,rgba(228,248,219,.5) 62%,rgba(236,250,230,.72) 84%,rgb(241,250,236) 100%),
radial-gradient(circle at 92% 30%,rgba(255,188,213,.7) 0 7%,transparent 24%),
radial-gradient(circle at 82% 88%,rgba(255,223,116,.6) 0 9%,transparent 28%),
linear-gradient(145deg,rgba(240,251,235,.5),rgba(255,251,238,.44))}
/* A ring sitting across the join, drawn by 01 so it paints over the hero above
   it and under 01's own copy below it. The eye follows it across and the join
   stops being a place where one thing ends and another starts. */
#storyProblem::after{content:"";position:absolute;z-index:-1;width:170px;aspect-ratio:1;right:7%;bottom:12%;pointer-events:none;
border:18px solid rgba(150,196,166,.2);border-radius:50%;box-shadow:0 0 0 18px rgba(255,229,140,.16)}
.steps::before{content:"";position:absolute;z-index:-1;width:230px;aspect-ratio:1;right:-74px;top:12%;border-radius:42% 58% 65% 35%;background:linear-gradient(145deg,rgba(255,229,140,.32),rgba(247,195,207,.28));transform:rotate(18deg)}
.reads{margin-top:-1px;border-radius:0 0 30px 30px;background:
linear-gradient(180deg,rgb(241,250,236) 0%,rgba(242,250,237,.88) 8%,rgba(250,252,231,.56) 26%,rgba(255,246,238,.38) 48%,rgba(255,247,246,.22) 72%,rgba(255,250,250,.1) 89%,rgba(255,251,251,0) 100%),
radial-gradient(circle at 94% 22%,rgba(255,229,140,.62) 0 5%,transparent 19%)}
.reads::after{content:"";position:absolute;z-index:-1;right:5%;bottom:9%;width:126px;height:126px;opacity:.34;background-image:radial-gradient(circle,rgba(94,158,114,.55) 2px,transparent 2.5px);background-size:18px 18px;transform:rotate(-8deg)}
.studio-tease{background:
radial-gradient(circle at 88% 25%,rgba(255,196,215,.5) 0 7%,transparent 23%),
radial-gradient(circle at 78% 84%,rgba(178,230,192,.46) 0 9%,transparent 28%),
linear-gradient(135deg,rgba(255,246,214,.5),rgba(255,252,238,.42))}
.studio-tease::after{content:"";position:absolute;z-index:-1;width:150px;aspect-ratio:1;right:8%;top:36%;border:15px solid rgba(255,203,97,.25);border-radius:38% 62% 54% 46%;transform:rotate(24deg)}
.home-close{margin-top:clamp(24px,3.6vw,44px);background:linear-gradient(135deg,rgba(196,235,206,.72),rgba(255,235,163,.68) 52%,rgba(255,201,219,.72));box-shadow:0 24px 64px rgba(96,145,107,.13)}
.story-lede{max-width:62ch}
.story-index{margin:0 0 18px;color:var(--pink-deep);font:700 .82rem/1 "Nunito Sans",sans-serif;letter-spacing:.22em}
.story-index::after{content:"";display:inline-block;width:52px;height:4px;margin-left:14px;vertical-align:.24em;border-radius:999px;background:linear-gradient(90deg,rgba(200,111,134,.8),rgba(255,214,100,.7))}
.story h2{max-width:20ch;margin:0 0 22px;color:#2f5740;font:700 clamp(2.1rem,4.6vw,3.5rem)/1.06 "Fredoka","Avenir Next Rounded",sans-serif;letter-spacing:-.038em}
.story p{max-width:58ch;color:#4a6553;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.62}
.story-aside{position:relative;margin-top:26px !important;padding-left:22px;color:#2f5740 !important;font-weight:800}
.story-aside::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:5px;border-radius:999px;background:linear-gradient(180deg,#8fdca6,#ffd964 52%,#f7a8c0)}

/* 02: the three steps read as a numbered list, not as three equal cards. */
 .step-list{position:relative;display:grid;gap:0;margin:44px 0 0;padding:0;list-style:none;counter-reset:step}
.step-list li{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:0 28px;align-items:start;padding:34px 0}
.step-list li:not(:last-child)::before{content:"";position:absolute;z-index:0;left:24px;top:60px;bottom:-60px;width:5px;border-radius:999px;opacity:.72}
.step-list li:nth-child(1)::before{background:linear-gradient(180deg,#9adfae,#ffd964)}
.step-list li:nth-child(2)::before{background:linear-gradient(180deg,#ffd964,#f7a8c0)}
.step-num{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--green-deep);background:#edf8ec;box-shadow:0 0 0 7px rgba(255,253,247,.92);font:700 1.35rem "Fredoka",sans-serif}
.step-list li:nth-child(1) .step-num{background:linear-gradient(150deg,#b6e8bf,#e9f9e5);color:#2f5740}
.step-list li:nth-child(2) .step-num{background:linear-gradient(150deg,#ffe58c,#fff7d2);color:#8a6410}
.step-list li:nth-child(3) .step-num{background:linear-gradient(150deg,#f9c4d1,#ffe6ec);color:#a8496a}
.step-list h3{grid-column:2;margin:10px 0 8px;font-size:clamp(1.2rem,2.2vw,1.55rem)}
.step-list p{grid-column:2;margin:0;max-width:56ch;color:#46614e}
.step-cta{margin-top:34px}

/* 03: asymmetric, with the argument on the left and the inventory beside it. */
 .reads-grid{display:block}.reads-grid .story-lede{max-width:62ch}
.reads-list{margin:0;padding:0;list-style:none}
.reads-list li{display:grid;gap:4px;padding:20px 0}
.reads-list li:first-child{padding-top:0}
.reads-list b{color:#2f5740;font:700 1.1rem "Fredoka",sans-serif;letter-spacing:-.02em}
.reads-list span{color:#6b8472;font-size:.96rem}

/* 04: the one place a number is allowed to be large. */
 .scored-panel{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(30px,6vw,72px);align-items:center;padding:clamp(30px,5vw,60px);border-radius:40px;background:linear-gradient(158deg,#eefaee,#fffae4 58%,#ffedf3);box-shadow:0 20px 60px rgba(96,145,107,.12)}
.scored-demo{display:grid;justify-items:center;gap:6px}
.scored-demo-num{color:#2f5740;font:700 clamp(5rem,13vw,8.5rem)/.82 "Fredoka",sans-serif;letter-spacing:-.06em}
.scored-demo-label{color:#7b917f;font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.scored-demo-bar{display:block;width:min(100%,260px);height:8px;margin-top:16px;border-radius:999px;background:#e4efe2;overflow:hidden}
.scored-demo-bar i{display:block;width:94%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--yellow) 58%,var(--pink))}
.reveal.is-revealed .scored-demo-bar i{animation:scoreFill 1.25s cubic-bezier(.16,.84,.3,1) both .15s}
@keyframes scoreFill{from{width:0}
}
.home-close{text-align:center}
.home-close h2{max-width:18ch;margin-inline:auto}
.home-close p{margin-inline:auto}
.home-close .hero-actions{justify-content:center}

/* One reveal, once. Everything is visible without JS or with reduced motion. */
 .reveal-ready .reveal{opacity:0;transform:translateY(22px)}
.reveal-ready .reveal.is-revealed{opacity:1;transform:none;transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1)}
.reveal-ready .step-list li.is-revealed:nth-child(2){transition-delay:.07s}
.reveal-ready .step-list li.is-revealed:nth-child(3){transition-delay:.14s}

/* ── Footer ────────────────────────────────────────────────────────────── */
 .site-footer{display:block;margin-top:clamp(48px,8vw,90px);padding-top:0;text-align:left}
.footer-support{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(26px,5vw,60px);align-items:start;padding:clamp(30px,5vw,54px);border-radius:36px;background:linear-gradient(150deg,#f2faee,#fff8dd);box-shadow:0 16px 46px rgba(96,145,107,.11)}
.footer-support h2{max-width:16ch;margin:0 0 10px;font:700 clamp(1.6rem,3vw,2.3rem)/1.1 "Fredoka",sans-serif;letter-spacing:-.035em;color:#2f5740}
.footer-support .sub{max-width:44ch;color:#5d7864}
.support-form{display:grid;gap:14px}
.support-kind{display:flex;flex-wrap:wrap;gap:8px}
.support-kind label{position:relative}
.support-kind input{position:absolute;width:1px;height:1px;opacity:0}
.support-kind span{display:block;padding:8px 15px;border:2px solid transparent;border-radius:999px;background:rgba(255,255,255,.78);color:#5d7864;font-size:.85rem;font-weight:800;cursor:pointer;transition:border-color .16s,color .16s,background .16s}
.support-kind input:checked + span{border-color:var(--green-deep);color:var(--green-deep);background:#fff}
.support-kind input:focus-visible + span{outline:3px solid var(--pink-deep);outline-offset:3px}
.support-field{display:grid;gap:6px;color:#4d6a56;font-size:.82rem;font-weight:800}
.support-field .note{font-weight:600}
.support-field textarea,.support-field input{width:100%;padding:13px 15px;color:var(--ink);background:#fff;font:inherit;border:2px solid rgba(120,168,133,.3);border-radius:18px;resize:vertical}
.support-field textarea:focus,.support-field input:focus{border-color:var(--green-deep);outline:none}
.support-form button{justify-self:start}
.support-status{min-height:1.3em;margin:0;color:#5d7864;font-size:.85rem}
.footer-columns{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px;margin-top:clamp(38px,6vw,62px);padding-top:34px;border-top:1px solid rgba(120,168,133,.26)}
.footer-columns nav{display:grid;justify-items:start;gap:9px}
.footer-columns h3{margin:0 0 4px;color:#2f5740;font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.footer-columns nav a,.footer-columns nav button{padding:0;color:#5d7864;background:none;border:0;border-radius:0;box-shadow:none;font:inherit;font-size:.95rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .16s}
.footer-columns nav a:hover,.footer-columns nav button:hover{color:var(--green-deep);background:none;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:4px}
.footer-brand .brand{margin:0 0 8px;font-size:1.5rem}
.footer-brand .note{max-width:30ch;margin:0 0 6px;font-size:.9rem}
.footer-base{margin:30px 0 0;padding-top:22px;border-top:1px solid rgba(120,168,133,.26);font-size:.84rem}

/* ── Careers ───────────────────────────────────────────────────────────── */
 .roles{display:grid;gap:26px;padding-top:8px}
.role{padding:clamp(28px,4.5vw,52px);border-radius:36px;background:#fff;box-shadow:0 16px 48px rgba(96,145,107,.1)}
.role header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;padding-bottom:22px;border-bottom:1px solid rgba(120,168,133,.26)}
.role-tag{margin:0 0 6px;color:var(--pink-deep);font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.role h2{margin:0;color:#2f5740;font:700 clamp(1.65rem,3.4vw,2.5rem)/1.06 "Fredoka",sans-serif;letter-spacing:-.038em}
.role-meta{margin:0;color:#7b917f;font-size:.9rem;font-weight:700}
.role-lede{max-width:68ch;margin:24px 0 0;color:#4d6a56;font-size:1.06rem;line-height:1.62}
.role-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 46px;margin-top:30px}
.role-cols h3{margin:0 0 12px;font-size:1.02rem}
.role-cols ul{margin:0;padding-left:20px;display:grid;gap:11px}
.role-cols li{color:#5d7864;font-size:.97rem;line-height:1.55}
.role-cols li::marker{color:var(--green-deep)}
.role-nice{margin:26px 0 0;padding:15px 18px;border-radius:18px;background:#f4faf1;color:#5d7864;font-size:.94rem}
.role-nice b{color:#2f5740}
.roles-apply{margin-top:30px;padding:clamp(28px,4.5vw,48px);border-radius:34px;background:linear-gradient(140deg,#fff3c4,#f8d4dc)}
.roles-apply h2{margin:0 0 10px}
.roles-apply p{max-width:60ch;color:#56705d}
@media (max-width:900px){.reads-grid,.scored-panel,.footer-support,.role-cols{grid-template-columns:1fr}
.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.scored-demo{justify-items:start}
}
@media (max-width:560px){.story{padding:44px 0}
#storyProblem,.reads,.studio-tease,.home-close{border-radius:30px;padding-inline:22px}
#storyProblem{margin-top:-1px;border-radius:0}
.reads{margin-top:-1px;border-radius:0 0 30px 30px}
.studio-tease::after{opacity:.52;transform:scale(.72) rotate(18deg);transform-origin:center}
.reads::after{opacity:.2}
.step-list li{grid-template-columns:1fr;gap:12px}
.step-list h3,.step-list p{grid-column:1}
.step-num{width:44px;height:44px;font-size:1.15rem}
.step-list li:not(:last-child)::before{display:none}
.footer-columns{grid-template-columns:1fr}
.footer-support{border-radius:28px}
.role{border-radius:28px}
.hero-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-ready .reveal{opacity:1 !important;transform:none !important}
.hero-scroll::after,.scored-demo-bar i{animation:none !important}
}

/* ── CREATORS ──────────────────────────────────────────────────────────────
     The ambassador note sits above the tiers deliberately: someone who already
     has a DM should be told to stop reading before they fill in a form we do
     not need them to fill in. */
.creator-note{margin:6px 0 30px;padding:clamp(22px,3.5vw,34px);border-radius:28px;background:linear-gradient(140deg,#fff3c4,#ffe0e7);box-shadow:0 12px 34px rgba(96,145,107,.1)}
.creator-note h2{margin:0 0 8px;font:700 clamp(1.3rem,2.4vw,1.75rem)/1.15 "Fredoka",sans-serif;letter-spacing:-.03em;color:#2f5740}
.creator-note p{max-width:66ch;margin:0;color:#5b7563}
.creator-note strong{color:#2f5740}
.creator-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:0}
.creator-tier{padding:clamp(22px,3vw,32px);border-radius:28px;background:#fff;box-shadow:0 14px 38px rgba(96,145,107,.1)}
.creator-tier:nth-child(1){background:linear-gradient(145deg,#e8fbe9,#f9ffe8)}
.creator-tier:nth-child(2){background:linear-gradient(145deg,#fff3ad,#fffae0)}
.creator-tier:nth-child(3){background:linear-gradient(145deg,#ffd3e0,#fff0f4)}
.creator-tier h3{margin:0 0 6px;font-size:1.16rem}
.creator-tier-lede{margin:0 0 10px !important;color:#2f5740 !important;font-weight:800;font-size:.92rem}
.creator-tier p{color:#5b7563;font-size:.96rem;line-height:1.55}
.creator-apply{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,5vw,60px);align-items:start;margin-top:26px;padding:clamp(26px,4.5vw,52px);border-radius:36px;background:linear-gradient(150deg,#f2faee,#fff8dd);box-shadow:0 16px 46px rgba(96,145,107,.11)}
.creator-apply-copy h2{margin:0 0 10px;font:700 clamp(1.7rem,3vw,2.4rem)/1.1 "Fredoka",sans-serif;letter-spacing:-.035em;color:#2f5740}
.creator-apply-copy p{max-width:40ch;color:#5b7563}
.creator-form{display:grid;gap:15px}
.creator-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.creator-field{display:grid;gap:6px;color:#4d6a56;font-size:.82rem;font-weight:800}
.creator-field .note{font-weight:600;font-size:.78rem}
.creator-field input,.creator-field textarea{width:100%;padding:13px 15px;border:2px solid rgba(120,168,133,.3);border-radius:18px;background:#fff;color:var(--ink);font:inherit;resize:vertical}
.creator-field input:focus,.creator-field textarea:focus{border-color:var(--green-deep);outline:none}
.creator-form button{justify-self:start}
.creator-status{min-height:1.3em;margin:0;color:#2f5740;font-size:.9rem;font-weight:800}
@media (max-width:900px){.creator-tiers{grid-template-columns:1fr}
.creator-apply{grid-template-columns:1fr}
}
@media (max-width:560px){.creator-field-row{grid-template-columns:1fr}
.creator-apply,.creator-note{border-radius:28px}
}

/* ── EXAMPLE PHOTOS ────────────────────────────────────────────────────────
     A mosaic rather than eight equal tiles: varied spans keep the eye moving
     and stop the section reading as a stock grid. Cards grow into place on
     entry and say what they want from you on hover. */
.reads-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(230px,19vw,300px);gap:16px;margin-top:40px}
.example-card{position:relative;overflow:hidden;display:block;width:100%;height:100%;padding:0;border:0;border-radius:22px;background:#e9f2e6;box-shadow:0 12px 34px rgba(96,145,107,.14);cursor:pointer;text-align:left;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.example-card.is-wide{grid-column:span 2}
.example-card.is-tall{grid-row:span 2}
.example-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .35s}
.example-card::after{content:"";position:absolute;inset:auto 0 0;height:62%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(28,48,35,.72));transition:opacity .35s}
.example-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(96,145,107,.26)}
.example-card:hover img{transform:scale(1.05)}
.example-score-tag{position:absolute;z-index:2;top:12px;left:12px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--pink-deep);font-size:1.05rem;font-weight:800;line-height:1;box-shadow:0 6px 18px rgba(40,65,49,.2)}
.example-copy{position:absolute;z-index:2;inset:auto 14px 14px;display:grid;gap:4px;color:#fff;transition:transform .35s}.example-copy small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.example-copy b{font:700 1.12rem/1.1 "Fredoka","Avenir Next Rounded",sans-serif;letter-spacing:-.02em}
.example-copy small{font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.86)}
.example-cue{position:absolute;z-index:3;left:14px;bottom:14px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.96);color:#2f5740;font-size:.76rem;font-weight:800;letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:opacity .28s,transform .28s}
.example-card:hover .example-cue,.example-card:focus-visible .example-cue{opacity:1;transform:none}
.example-card:hover .example-copy,.example-card:focus-visible .example-copy{transform:translateY(-34px)}
/* Grow into place: bigger as you reach it, once, never on the way back up. */
.reveal-ready .example-card{opacity:0;transform:translateY(26px) scale(.94)}
.reveal-ready .example-card.is-revealed{opacity:1;transform:none}
.reads-foot{margin-top:20px}
.linkish{padding:0;border:0;background:none;box-shadow:none;color:var(--green-deep);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.linkish:hover{background:none;box-shadow:none;transform:none;color:var(--pink-deep)}

.example-dialog{width:min(96vw,1040px);max-height:92vh;padding:0;overflow:hidden;border:0;border-radius:34px;background:#fff;box-shadow:0 34px 110px rgba(40,65,49,.34)}
.example-dialog::backdrop{background:rgba(38,58,45,.55);backdrop-filter:blur(7px)}
.example-dialog-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;max-height:92vh}
.example-stage{position:relative;margin:0;background:#0f1a13}
.example-stage img{display:block;width:100%;height:100%;max-height:92vh;object-fit:contain}
.example-stage figcaption{position:absolute;inset:auto 0 0;padding:16px 20px;color:rgba(255,255,255,.92);font-size:.86rem;background:linear-gradient(180deg,transparent,rgba(10,20,14,.82))}
.example-read{overflow-y:auto;padding:clamp(24px,3.5vw,40px)}
.example-label{margin:0 0 6px;color:var(--pink-deep);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.example-score{display:flex;align-items:baseline;gap:9px;margin:0 0 18px}
.example-score b{color:#2f5740;font:700 clamp(3rem,7vw,4.6rem)/.85 "Fredoka","Avenir Next Rounded",sans-serif;letter-spacing:-.05em}
.example-score span{color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.example-note p{margin:0 0 12px;color:#55705d;font-size:1rem;line-height:1.62}
.example-close{position:absolute;z-index:5;top:14px;right:14px;width:42px;height:42px;padding:0;border-radius:50%;background:rgba(255,255,255,.94);color:#2f5740;box-shadow:0 6px 20px rgba(40,65,49,.24);font-size:1.3rem}

/* Section 05 shows a gallery instead of describing one. */
.gallery-tease-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:10px;margin-top:30px;overflow-x:auto;padding-bottom:6px}
.gallery-tease-strip img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;box-shadow:0 10px 26px rgba(96,145,107,.16)}
.secondary-cta{margin-left:10px;background:#edf8ec!important;color:var(--green-deep)!important;box-shadow:0 6px 0 #cfe7cd!important}

@media (max-width:900px){.reads-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(200px,34vw,240px)}
.example-dialog-inner{grid-template-columns:1fr;overflow-y:auto}
.example-stage img{max-height:46vh}
}
@media (max-width:560px){.reads-mosaic{grid-auto-rows:clamp(190px,52vw,240px);gap:10px}.example-copy small{-webkit-line-clamp:3}
.example-card.is-wide,.example-card.is-tall{grid-column:span 2;grid-row:span 1}
.example-cue{font-size:.7rem;left:10px;bottom:10px}
.secondary-cta{margin:10px 0 0}
}
@media (prefers-reduced-motion:reduce){.example-card,.example-card img,.example-copy,.example-cue{transition:none!important}
.reveal-ready .example-card{opacity:1!important;transform:none!important}
}

/* ── LOCK THE HORIZONTAL AXIS ──────────────────────────────────────────────
     On a phone the page could be dragged sideways, which slid the layout out
     of alignment and left the reader looking at a margin. Something overflows
     by a few dozen pixels at narrow widths -- a nav button here, a grid child
     there -- and chasing each one is a losing game, because the next section
     added will do it again.

     `clip` rather than `hidden` on purpose: hidden turns the root into a scroll
     container, which breaks position:sticky on the desktop header. clip stops
     the axis without that side effect. hidden is listed first as the fallback
     for browsers that predate clip. Children that scroll horizontally on
     purpose -- the gallery strip, the mobile nav -- are unaffected, because
     this only constrains the root. */
html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
.wrap,.story,.hero,.hero-copy,.step-list,.step-list li,.reads-mosaic{min-width:0;max-width:100%}

/* ── SECTION 02 ────────────────────────────────────────────────────────────
     Only this section uses a narrower centred measure. Every other story
     section keeps the full width of the page, so the panelled boxes on 01, 06
     and the close read wide rather than boxed into a column.

     Here the argument reads first at its own bound, inset from both sides, and
     the photographs follow beneath it on a slightly wider centred column. They
     are the first proof a visitor gets that the model does anything, so they
     get the room; the two-column version squeezed them into half the page and
     pushed the captions under the score. The caption clamp stays for the same
     reason -- two lines cannot reach the score however tight the column gets. */
/* 03 gets the same centred measure as 02. Without it the steps sat hard
   against the page's left edge while the section above them was centred, which
   read as a misalignment rather than a rhythm. */
#storyProblem > *,.story.reads > *,.story.steps > *{width:min(100%,900px);margin-inline:auto}
.reads-grid{display:block}
.reads-grid .story-lede{max-width:62ch;margin-inline:auto}
.reads-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,17vw,255px);gap:16px;margin-top:40px}
@media (max-width:900px){#storyProblem > *,.story.reads > *,.story.steps > *{width:auto;max-width:none}
.reads-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(200px,34vw,240px)}
}
@media (max-width:560px){.reads-mosaic{grid-auto-rows:clamp(190px,52vw,240px);gap:10px}
.example-copy small{-webkit-line-clamp:3}
}

/* The two evidence sections sat too far below the copy above them, so the page
   read as a series of separated slabs rather than one argument. Their tops are
   pulled in further than the rest. */
.story.reads,.story.steps{padding-top:clamp(32px,4.5vw,60px)}
@media (max-width:560px){.story.reads,.story.steps{padding-top:28px}}

  /* Photo Studio's reports live in the full ranking, which lists every scored
     frame -- the winners and the ones that did not make the cut. The winner
     cards are 150px thumbnails and are the wrong place for a 22-row report.
     The list was two CSS columns of "name: score" lines, which is right for a
     list of numbers and wrong for a column of expandable reports: at twenty
     photos it puts two 22-row panels side by side in half the page width. It
     goes to one column once it is carrying reports. */
  .studio-ranking ol:has(.cwpr) { columns: 1; }
  #studioRanking li { display: block; }
  .studio-rank-line { display: block; font-weight: 700; }
  #studioRanking .cwpr { margin-top: 8px; margin-bottom: 16px; }
  .studio-report-only { margin-top: 28px; border-top: 1px solid rgba(74, 112, 83, .2); padding-top: 20px; }
  .studio-report-only h3 { margin: 0 0 8px; }
  #studioReportOnlyGrid { display: grid; gap: 18px; margin-top: 16px; }
  .studio-report-only-card { display: grid; grid-template-columns: minmax(100px, 170px) minmax(0, 1fr);
    gap: 18px; padding: 16px; border-radius: 22px; background: #fff; }
  .studio-report-only-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
  .studio-report-only-card h4 { margin: 0 0 8px; }
  .studio-report-only-card p { line-height: 1.5; }
  .studio-report-note { padding: 12px 14px; border-radius: 14px; background: #fff8ec; }
  .studio-report-only-card .cwpr { margin-top: 12px; }
  @media (max-width: 600px) {
    .studio-report-only-card { grid-template-columns: 1fr; }
    .studio-report-only-card img { max-height: 260px; }
  }

  /* A photograph with nobody in it has no likability score — that score is
     about a person. The percentile readout is removed rather than shown empty
     or at zero; the photo and the photo report carry the result. */
  .result-presentation.no-likability .score-pedestal,
  .result-presentation.no-likability .readout .scale,
  .result-presentation.no-likability .readout .bandline { display: none; }
  .result-presentation.no-likability .result-photo-stage img { border-radius: var(--radius); }

  /* A result with no likability score says why before anything else. That
     reason used to be a 14px line under a heading reading "About this photo",
     the easiest thing on the page to miss; it is now the heading. */
  .msg.msg-unscored { padding: 20px 22px; border-left: 4px solid var(--pink-deep); }
  .msg.msg-unscored h3 { margin: 0 0 8px; color: var(--ink); font-size: clamp(1.12rem, 2.3vw, 1.4rem);
    font-weight: 800; line-height: 1.32; }
  .msg.msg-unscored p { font-size: 15px; }

  /* ── THE SCORER: ONE CONTINUOUS PAGE ───────────────────────────────────────
     The try view, on cwupid.com/#try and in the account app alike. Nothing in
     it looks like a box inside a box: the sections give up their cards and the
     result spreads across the page -- photo on the left, the score and what to
     do about it on the right, the photo report underneath. #tryView scopes it
     (and, at (1,0,0) more than the card rules it replaces, outranks them).

     The html.embedded-inline rules are the app's frame alone. landing.js marks
     the Use Cwupid tab's frame with it and the app sizes that frame to this
     document, so it has no inner scroll bar and lets the app's own background
     show through. */
  html.embedded-inline { overflow: hidden; }
  html.embedded-inline, html.embedded-inline body { background: transparent; }
  html.embedded-inline body { min-height: 0; padding: 0 0 8px; }
  html.embedded-inline body::before, html.embedded-inline body::after { display: none; }
  html.embedded-inline .wrap { width: 100%; max-width: none; padding-top: 10px; }
  #tryView #live, #tryView #offline, #tryView #status,
  #tryView #error, #tryView #result, #tryView .try-access-gate {
    margin: 0 0 clamp(36px, 5vw, 56px); padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; scroll-margin-top: 104px; }
  #tryView #live h2, #tryView #result > h2 { margin-bottom: 18px; }
  /* On cwupid.com the page intro sits above; the app's frame has none. */
  html:not(.embedded) #tryView .page-intro { margin-bottom: clamp(28px, 4vw, 48px); }
  #tryView #error h3 { font-size: clamp(1.15rem, 2.3vw, 1.4rem); font-weight: 800; }
  #tryView .scorer-wake-head { display: flex; align-items: center; gap: 12px; }
  #tryView .scorer-wake-head h2 { margin: 0; }
  #tryView #offlineNote { margin-top: 12px; }
  .scorer-wake-spinner { display: none; flex: 0 0 auto; width: 30px; height: 30px;
    border: 4px solid #dceedd; border-top-color: var(--pink-deep);
    border-right-color: var(--yellow); border-radius: 50%;
    animation: scorerWakeSpin 1s linear infinite; will-change: transform; }
  #offline.is-waking .scorer-wake-spinner { display: block; }
  @keyframes scorerWakeSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  #tryView .drop { min-height: 250px; justify-content: center; }

  #tryView .result-presentation { display: grid; width: 100%; margin: 0;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 18px clamp(24px, 4vw, 56px); align-items: start; }
  #tryView .result-photo-stage { grid-column: 1; grid-row: 1; }
  #tryView .result-side { grid-column: 2; grid-row: 1 / span 2; }
  /* Sized from the viewport so that, once the page scrolls to the result, the
     photo report's control underneath is already showing at the bottom of the
     screen. --host-vh is the app's own viewport height, which the app writes
     into its frame; inside that frame 100vh is the frame, not the screen. */
  #tryView .result-photo-stage img { height: clamp(320px, calc(var(--host-vh, 100vh) - 270px), 640px); }
  #tryView .result-side { display: grid; gap: 18px; min-width: 0; }
  #tryView .result-side > * { margin: 0 !important; }
  #tryView .result-side > .note:empty { display: none; }
  /* (0,3,1): above the score treatments' own `.result-presentation.score-x
     .readout`, which paint a card behind the numbers. */
  #tryView .result-presentation .readout { padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; overflow: visible; }
  #tryView .result-presentation .scale { margin-top: 4px; }
  #tryView .result-presentation .bandline { font-size: 15px; }
  /* With no score, the readout is kept only for the written notes inside it.
     The reason there is no score still comes first, then the notes. */
  #tryView .result-presentation.no-likability .readout:not(:has(#photoFeedback:not(.hidden))) { display: none; }
  #tryView .result-presentation.no-likability #supportMsg { order: -1; }
  #tryView .msg { border: 0; border-radius: 22px; background: #fff; padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(96,145,107,.1); }
  #tryView .msg.msg-unscored { padding: 24px 26px; background: #fff1f4;
    border-left: 5px solid var(--pink-deep); box-shadow: none; }
  #tryView .msg.msg-unscored h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.28; }
  #tryView .msg.msg-unscored p { font-size: 16px; }
  #tryView .save-result { flex-direction: column; align-items: flex-start; gap: 8px; }
  #tryView #saveResult.is-saved:not(:disabled) { color: var(--muted); background: #fff;
    border: 1px solid var(--rule); box-shadow: none; }
  #tryView #saveResult.is-saved:not(:disabled):hover { color: var(--pink-deep);
    border-color: var(--pink-deep); transform: none; }
  html.embedded-inline #saveResultStatus { color: var(--green-deep); font-weight: 700; }

  /* The report sits directly under the photo. It starts open on phones. */
  #tryView .result-presentation > #photoReportMount { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; }
  #tryView #photoReportMount .cwpr { margin: 0; border: 0; border-radius: 0;
    background: none; overflow: visible; }
  #tryView #photoReportMount .cwpr-toggle { display: grid; grid-template-columns: auto auto;
    justify-content: center; align-items: center; gap: 1px 10px; width: auto; max-width: min(100%, 540px);
    margin: 0 auto; padding: 9px 22px; border: 1px solid var(--rule); border-radius: 18px;
    background: #fff; text-align: center; box-shadow: 0 8px 22px rgba(96,145,107,.1); }
  #tryView #photoReportMount .cwpr-toggle-copy { display: contents; }
  #tryView #photoReportMount .cwpr-toggle-copy strong { grid-area: 1 / 1; font-size: 1.02rem; }
  #tryView #photoReportMount .cwpr-chevron { grid-area: 1 / 2; }
  #tryView #photoReportMount .cwpr-toggle-copy span { grid-area: 2 / 1 / 3 / 3; font-size: .8rem; }
  #tryView #photoReportMount .cwpr-body { margin: 20px 0 0; padding: 0; }
  #tryView .region-attribution, #tryView .college-comparison {
    margin-top: clamp(28px, 4vw, 44px); padding: clamp(24px, 3vw, 32px) 0 0; border: 0;
    border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }

  @media (max-width: 900px) {
    #tryView .result-presentation { grid-template-columns: minmax(0, 1fr); }
    #tryView .result-photo-stage, #tryView .result-side,
    #tryView .result-presentation > #photoReportMount { grid-column: 1; grid-row: auto; }
    /* Stacked, the report still follows the photo -- except when there is no
       score, where the reason why comes first and the report, open, after it. */
    #tryView .result-presentation > #photoReportMount { order: 1; }
    #tryView .result-side { order: 2; }
    #tryView .result-presentation.no-likability .result-side { order: 1; }
    #tryView .result-presentation.no-likability > #photoReportMount { order: 2; }
    #tryView .result-photo-stage img { height: clamp(320px, 80vw, 560px); }
  }

  /* The notes' loading state: a pencil writing three lines on a sheet, looping
     until the notes arrive. */
  .pf-busy { display: flex; align-items: center; gap: 14px; margin: 4px 0 2px; color: var(--muted); font-size: 14px; }
  .pf-busy.hidden { display: none; }
  .pf-pencil svg { display: block; overflow: visible; }
  .pf-paper { fill: #fff; stroke: #e9dca0; stroke-width: 1.5; }
  .pf-line { fill: none; stroke: var(--green-deep); stroke-width: 2.2; stroke-linecap: round;
    stroke-dasharray: 28; stroke-dashoffset: 28; animation: pfLine1 2.7s linear infinite; }
  .pf-line-2 { animation-name: pfLine2; }
  .pf-line-3 { stroke-dasharray: 20; stroke-dashoffset: 20; animation-name: pfLine3; }
  .pf-pencil-move { animation: pfPencil 2.7s linear infinite; }
  .pf-lead { fill: #416451; }
  .pf-wood { fill: #f3c99a; }
  .pf-body { fill: #ffd766; stroke: #e2b53c; stroke-width: .8; }
  .pf-band { fill: #b9c9bc; }
  .pf-eraser { fill: #f3a3b8; }
  @keyframes pfPencil {
    0% { transform: translate(13px, 16px); }
    28% { transform: translate(41px, 16px); }
    33% { transform: translate(13px, 24px); }
    61% { transform: translate(41px, 24px); }
    66% { transform: translate(13px, 32px); }
    86% { transform: translate(33px, 32px); }
    100% { transform: translate(33px, 32px); }
  }
  @keyframes pfLine1 { 0% { stroke-dashoffset: 28; } 28%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 28; } }
  @keyframes pfLine2 { 0%, 33% { stroke-dashoffset: 28; } 61%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 28; } }
  @keyframes pfLine3 { 0%, 66% { stroke-dashoffset: 20; } 86%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
  @media (prefers-reduced-motion: reduce) and (min-width: 601px) {
    .pf-line, .pf-pencil-move { animation: none; }
    .pf-line { stroke-dashoffset: 0; }
    .pf-pencil-move { transform: translate(33px, 32px); }
  }

  /* Notes written out by hand (assets/handwriting.js). The drawing is
     decorative; the words beside it are what a screen reader or a copy reads. */
  #pfText .cwhw { display: block; max-width: 100%; height: auto; color: #3f6450; overflow: visible; }
  #pfText .cwhw-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  #pfText .cwhw-word { display: inline-block; }
  #pfText { position: relative; }
  /* The scroll to a finished result stops a little short, so the photo
     report's control under the photo only peeks in at the bottom. */
  #tryView #result { scroll-margin-top: 144px; }

  /* The benchmark stays discoverable in ordinary homepage text; the dialog
     gives human visitors a one-time introduction to the newer model. */
  .hero-copy > .benchmark-proof {
    grid-column: 1; max-width: 58ch; margin: 16px 0 0;
    padding: 12px 16px; border: 1px solid #d9eadb; border-radius: 16px;
    background: rgba(255, 253, 247, .86); color: #456d52;
    font-size: .9rem; font-weight: 700; line-height: 1.45;
  }
  .benchmark-proof a { color: #a14369; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
  .benchmark-proof a:hover { color: #7f3152; }

  .benchmark-announcement {
    width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
    padding: 0; overflow-y: auto; color: #3f624d; background: #fffdf7;
    border: 1px solid #d7e8d7; border-radius: 28px;
    box-shadow: 0 30px 90px rgba(32, 63, 43, .25);
  }
  .benchmark-announcement::backdrop { background: rgba(32, 54, 40, .48); backdrop-filter: blur(4px); }
  .benchmark-announcement-inner { position: relative; padding: clamp(25px, 5vw, 38px); }
  .benchmark-announcement-eyebrow {
    margin: 0 42px 12px 0; color: #a14369; font-size: .75rem;
    font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  }
  .benchmark-announcement h2 {
    margin: 0 28px 17px 0; color: #365a42;
    font: 700 clamp(1.8rem, 5vw, 2.5rem)/1.08 "Fredoka", "Avenir Next Rounded", sans-serif;
    letter-spacing: -.035em; text-transform: none;
  }
  .benchmark-announcement p:not(.benchmark-announcement-eyebrow) {
    margin: 0 0 12px; color: #54705b; font-size: .98rem; line-height: 1.58;
  }
  .benchmark-announcement .benchmark-announcement-scope { font-size: .82rem; color: #718878; }
  .benchmark-announcement-close {
    position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0; border: 1px solid #d9eadb;
    border-radius: 50%; background: #fff; color: #416451; font: 600 1.55rem/1 sans-serif;
  }
  .benchmark-announcement-close:hover { border-color: #9fcaa7; background: #f4fbf2; transform: none; box-shadow: none; }
  .benchmark-announcement-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
  .benchmark-announcement-primary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 10px 20px; border-radius: 999px;
    background: #ffe58c; color: #365a42; font-size: .9rem; font-weight: 800;
    text-decoration: none; box-shadow: 0 5px 0 #efd06e;
  }
  .benchmark-announcement-primary:hover { background: #ffdb63; color: #365a42; }
  .benchmark-announcement-actions button {
    padding: 10px 4px; border: 0; background: transparent;
    color: #647d69; font-size: .85rem; font-weight: 700; box-shadow: none;
  }
  .benchmark-announcement-actions button:hover { background: transparent; color: #365a42; transform: none; box-shadow: none; }