/* Education: Reputation management (/education/reputation-management). Prefix edrep.
   The Google profile look-alike is always light, like a screenshot, and carries no logos. The review inbox,
   report and message mock follow the theme. Every mock-up is labelled as an illustration on the page.
   Motion (src/js/edu-reputation.js) is transform and opacity only, gated by html.motion. */

/* ---------- Hero */
.edrep-hero__promise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.edrep-hero__promise li { display: inline-flex; align-items: center; gap: 7px; font: 600 14.5px/1.3 var(--font-body); color: var(--ink); }
.edrep-hero__promise .psg-ic { font-size: 18px; color: var(--trust); stroke-width: 2.4; }

.edrep-vis { position: relative; display: grid; gap: 14px; min-width: 0; }
.edrep-vis__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.edrep-vis__hint { font: 500 13.5px/1.3 var(--font-body); color: var(--ink-2); }
.edrep-switch { margin: 0; padding: 4px; border: 0; display: inline-flex; gap: 4px; border-radius: 9999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.edrep-switch label { position: relative; display: block; cursor: pointer; }
.edrep-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.edrep-switch span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 9999px; font: 600 14.5px/1 var(--font-body); color: var(--ink-2); transition: background-color 0.25s, color 0.25s; }
.edrep-switch label:hover span { color: var(--ink); }
.edrep-switch input:checked + span { background: var(--ink); color: var(--bg); }
.edrep-switch input:focus-visible + span { outline: 2px solid var(--gold-line); outline-offset: 2px; }

.edrep-gp { position: relative; min-width: 0; }
.edrep-gm { padding: 14px 16px 12px; }
.edrep-gm .psg-ic { fill: none; }

/* Two versions of each part share one grid cell, so switching never changes the card's height. */
.edrep-v { display: grid; min-width: 0; }
.edrep-v > [data-v] { grid-area: 1 / 1; min-width: 0; }
.edrep-v > [data-v="b"] { opacity: 0; visibility: hidden; }
:is(.edrep-vis.is-after, .edrep-vis:has(input[value="after"]:checked)) .edrep-v > [data-v="a"] { opacity: 0; visibility: hidden; }
:is(.edrep-vis.is-after, .edrep-vis:has(input[value="after"]:checked)) .edrep-v > [data-v="b"] { opacity: 1; visibility: visible; }
html.motion .edrep-v > [data-v] { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
html.motion .edrep-v > [data-v="b"] { transform: translateY(8px); transition-delay: 0s, 0s, 0.45s; }
html.motion :is(.edrep-vis.is-after, .edrep-vis:has(input[value="after"]:checked)) .edrep-v > [data-v="a"] { transform: translateY(-8px); transition-delay: 0s, 0s, 0.45s; }
html.motion :is(.edrep-vis.is-after, .edrep-vis:has(input[value="after"]:checked)) .edrep-v > [data-v="b"] { transform: none; transition-delay: 0.1s, 0.1s, 0s; }

/* The outcome flag: a ProjectSG annotation on top of the look-alike. */
.edrep-out { position: absolute; z-index: 3; top: -15px; right: 16px; }
.edrep-out > span { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9999px; font: 700 13.5px/1 var(--font-body); color: #fff; white-space: nowrap; box-shadow: 0 8px 22px rgba(22, 24, 29, 0.24); }
.edrep-out svg { width: 15px; height: 15px; fill: currentColor; }
.edrep-out .psg-ic { fill: none; stroke-width: 2.2; }
.edrep-out__a { background: #c4300b; }
.edrep-out__b { background: #0d7f37; }

/* Map strip */
.edrep-map { position: relative; height: 60px; margin-top: 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, transparent 0 27%, #fff 27% 29.5%, transparent 29.5%),
    linear-gradient(180deg, transparent 0 56%, #fff 56% 63%, transparent 63%),
    linear-gradient(158deg, transparent 0 62%, #fde293 62% 66%, transparent 66%),
    linear-gradient(90deg, transparent 0 79%, #fff 79% 81%, transparent 81%),
    #eef0ea; }
.edrep-map__park { position: absolute; left: 56%; top: 8%; width: 17%; height: 38%; border-radius: 10px; background: #cfe6cc; }
.edrep-map__dot { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%; background: #9aa0a6; box-shadow: 0 0 0 2px #fff; }
.edrep-map__pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 2px; transform: translate(-13px, -22px); }
.edrep-map__pin svg { width: 26px; height: 26px; fill: #ea4335; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.edrep-map__pin b { padding: 3px 7px; border-radius: 6px; background: #fff; font-size: 11.5px; font-weight: 700; color: #1f1f1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

/* Place sheet */
.edrep-pl { display: grid; gap: 10px; padding: 10px 2px 0; }
.edrep-pl__head { display: grid; gap: 3px; }
.edrep-pl__name { font-size: 21px; font-weight: 400; line-height: 1.25; color: #1f1f1f; }
.edrep-pl__rate > span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #4d5156; }
.edrep-pl__rate b { font-weight: 400; color: #1f1f1f; }
.edrep-pl__meta { font-size: 13.5px; line-height: 1.4; color: #4d5156; }
.edrep-open { font-style: normal; font-weight: 700; color: #137333; }
.edrep-warn { font-style: normal; color: #b3261e; }

.edrep-stars { --r: 5; --off: #dadce0; display: inline-block; flex: none; width: 70px; height: 14px; vertical-align: -2px;
  background: linear-gradient(90deg, #fbbc04 calc(var(--r) / 5 * 100%), var(--off) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.7.7-5 4.6 1.4 6.7L12 17l-6 3.4 1.4-6.7-5-4.6 6.7-.7z'/%3E%3C/svg%3E") 0 0 / 14px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.7.7-5 4.6 1.4 6.7L12 17l-6 3.4 1.4-6.7-5-4.6 6.7-.7z'/%3E%3C/svg%3E") 0 0 / 14px 14px repeat-x; }

.edrep-acts { display: flex; gap: 8px; overflow: hidden; }
.edrep-act { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 18px; box-shadow: inset 0 0 0 1px #c4c7c5; color: #0b57d0; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.edrep-act svg { width: 17px; height: 17px; }
.edrep-act--main { background: #0b57d0; color: #fff; box-shadow: none; }
.edrep-tap { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(11, 87, 208, 0.35); opacity: 0; transform: scale(0.4); pointer-events: none; }
html.motion .edrep-vis.is-run.is-after .edrep-tap { animation: edrep-tap 2.4s ease-out 0.7s infinite; }
@keyframes edrep-tap { 0% { opacity: 0; transform: scale(0.4); } 14% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1.7); } }

.edrep-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.edrep-ph__t { position: relative; display: block; height: 66px; border-radius: 10px; overflow: hidden; background: #f1f3f4; }
.edrep-ph__t svg { display: block; width: 100%; height: 100%; }
.edrep-ph__t em { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1.1; }
.edrep-ph__t--dim svg { filter: blur(1.4px) saturate(0.5) brightness(0.85); transform: scale(1.08); }
.edrep-ph__t--empty { display: grid; place-items: center; align-content: center; gap: 3px; background: #f8f9fa; border: 1.5px dashed #dadce0; }
.edrep-ph__t--empty svg { width: 22px; height: 22px; fill: #9aa0a6; }
.edrep-ph__t--empty em { position: static; padding: 0; background: none; color: #5f6368; }

.edrep-none { font-size: 13px; color: #5f6368; }
.edrep-post { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #f3f6fc; font-size: 13.5px; line-height: 1.45; color: #1f1f1f; }
.edrep-post__h { font-size: 12px; font-weight: 700; color: #4d5156; }

.edrep-rvw { padding-top: 10px; border-top: 1px solid #ebebeb; }
.edrep-rvw > span { display: grid; gap: 7px; align-content: start; }
.edrep-rvw__who { display: flex; align-items: center; gap: 10px; }
.edrep-rvw__who > span { display: grid; gap: 1px; font-size: 12.5px; color: #4d5156; }
.edrep-rvw__who > span > span { display: flex; align-items: center; gap: 6px; }
.edrep-rvw__who b { font-size: 13.5px; font-weight: 700; color: #1f1f1f; }
.edrep-rvw__who .edrep-stars { width: 60px; height: 12px; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
.edrep-rvw__t { font-size: 13.5px; line-height: 1.5; color: #1f1f1f; }
.edrep-rvw__own { display: grid; gap: 3px; margin-left: 4px; padding-left: 12px; border-left: 2px solid #dadce0; font-size: 12.5px; color: #4d5156; }
.edrep-rvw__own b { font-weight: 700; color: #1f1f1f; }
.edrep-rvw__own > span:last-child { font-size: 13px; line-height: 1.45; color: #1f1f1f; }

.edrep-av { --c: #5f6368; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font: 700 13px/1 var(--font-body); font-style: normal; }

/* ---------- What parents compare */
.edrep-sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edrep-sig li { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 16px 32px; align-items: center; padding: 22px 26px; border-radius: var(--radius-card); background: var(--panel); }
.edrep-sig__k { display: flex; align-items: center; gap: 14px; }
.edrep-sig__k h3 { font: 700 17px/1.3 var(--font-body); color: var(--ink); }
.edrep-sig p { display: grid; gap: 8px; justify-items: start; padding-left: 16px; box-shadow: inset 2px 0 0 var(--line-2); font: 400 15px/1.5 var(--font-body); color: var(--ink-2); }
.edrep-sig p:last-child { box-shadow: inset 2px 0 0 var(--trust); color: var(--ink); }

/* ---------- Asking for reviews */
.edrep-ask { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.edrep-ask .sec__head { margin-bottom: clamp(24px, 3vw, 36px); }
.edrep-moments { list-style: none; margin: 0; padding: 0; display: grid; }
.edrep-moments li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.edrep-moments li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--gold-line), transparent); opacity: 0.6; }
.edrep-moments__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 13px/1 var(--font-body); }
.edrep-moments h3 { margin-top: 8px; font: 700 17px/1.3 var(--font-body); color: var(--ink); }
.edrep-moments p { margin-top: 3px; font: 400 15px/1.5 var(--font-body); color: var(--ink-2); }
.edrep-fair { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.edrep-fair li { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 9999px; background: var(--trust-wash); color: var(--trust); font: 600 13.5px/1.2 var(--font-body); }
.edrep-fair .psg-ic { font-size: 16px; stroke-width: 2.4; }

.edrep-ask__vis { position: relative; margin: 0; display: grid; gap: 0; }
.edrep-msg { display: grid; gap: 14px; padding: 18px 18px 56px; border-radius: var(--radius-card); background: var(--panel); }
.edrep-msg__top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.edrep-msg__top > span { display: grid; gap: 2px; }
.edrep-msg__top b { font: 700 15px/1.2 var(--font-body); color: var(--ink); }
.edrep-msg__top > span > span { font: 500 12.5px/1.2 var(--font-body); color: var(--muted); }
.edrep-msg__top .edrep-av { width: 36px; height: 36px; background: var(--ink); color: var(--bg); }
.edrep-msg__b { position: relative; justify-self: start; max-width: 92%; display: grid; gap: 8px; padding: 13px 15px 26px; border-radius: 4px 18px 18px 18px; background: var(--chip); font: 400 15px/1.5 var(--font-body); color: var(--ink); }
.edrep-msg__link { justify-self: start; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.edrep-msg__time { position: absolute; right: 13px; bottom: 7px; font: 500 11.5px/1 var(--font-body); color: var(--muted); }
.edrep-qr { position: relative; z-index: 1; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; margin: -40px 18px 0 auto; width: min(100%, 400px); padding: 22px 20px 18px; border-radius: 16px; color: #16181d;
  background: linear-gradient(#e9cf8a 0 7px, #fcfaf5 7px); box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.06), 0 18px 40px rgba(22, 24, 29, 0.2); transform: rotate(-1.6deg); }
.edrep-qr__code { display: block; width: 112px; height: 112px; }
.edrep-qr__t { display: grid; gap: 6px; }
.edrep-qr__t b { font: 700 18px/1.2 var(--font-body); letter-spacing: -0.02em; color: #16181d; }
.edrep-qr__t span { font: 400 14px/1.45 var(--font-body); color: #4b505a; }
.edrep-qr__t em { font: 700 13px/1.2 var(--font-body); font-style: normal; color: #6b5200; }
.edrep-ask__vis .ai-mock__note { margin-top: 18px; }

/* ---------- Review inbox (interactive illustration) */
.edrep-inbox { border-radius: var(--radius-card); background: var(--panel); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.edrep-inbox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.edrep-inbox__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.edrep-inbox__title b { font: 700 16px/1.2 var(--font-body); color: var(--ink); }
.edrep-inbox__title span { font: 500 14px/1.2 var(--font-body); color: var(--muted); }
.edrep-inbox__grid { display: grid; grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.6fr); }
.edrep-inbox__list { display: grid; align-content: start; gap: 6px; padding: 12px; background: var(--bg); border-right: 1px solid var(--line); }
.edrep-inbox .edrep-stars { --off: var(--line-2); width: 60px; height: 12px; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
.edrep-rv { appearance: none; -webkit-appearance: none; margin: 0; border: 0; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 13px 12px; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
.edrep-rv > .psg-status { grid-column: 2; justify-self: start; }
.edrep-rv .edrep-av { width: 34px; height: 34px; }
.edrep-rv:hover { background: var(--panel); }
.edrep-rv[aria-pressed="true"] { background: var(--panel); box-shadow: inset 3px 0 0 var(--gold-line); }
.edrep-rv:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.edrep-rv__main { display: grid; gap: 4px; min-width: 0; }
.edrep-rv__main b { font: 700 15px/1.25 var(--font-body); color: var(--ink); }
.edrep-rv__meta { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--font-body); color: var(--muted); }
.edrep-rv__snip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13.5px/1.4 var(--font-body); color: var(--ink-2); }

.edrep-inbox__panes { min-width: 0; }
.edrep-pane { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 2.8vw, 34px); }
.edrep-pane__who { display: flex; align-items: center; gap: 12px; }
.edrep-pane__who .edrep-av { width: 42px; height: 42px; font-size: 16px; }
.edrep-pane__who > span { display: grid; gap: 3px; }
.edrep-pane__who b { font: 700 16px/1.2 var(--font-body); color: var(--ink); }
.edrep-pane__who > span > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 13px/1.2 var(--font-body); color: var(--muted); }
.edrep-pane__rv { max-width: 62ch; font: 400 17px/1.6 var(--font-body); color: var(--ink); }
.edrep-steps4 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.edrep-steps4 li { padding: 7px 11px; border-radius: 9999px; background: var(--chip); color: var(--muted); font: 600 12.5px/1 var(--font-body); }
.edrep-steps4 li.is-on { background: var(--trust-wash); color: var(--trust); }
.edrep-draft { display: grid; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-line); transition: background-color 0.3s, box-shadow 0.3s; }
.edrep-draft__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.edrep-draft__h b { font: 700 14px/1.2 var(--font-body); color: var(--accent-text); }
.edrep-draft__post { display: none; }
.edrep-draft__t { max-width: 62ch; font: 400 16px/1.6 var(--font-body); color: var(--ink); }
.edrep-draft__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.edrep-draft__checks li { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--font-body); color: var(--ink-2); }
.edrep-draft__checks .psg-ic { font-size: 16px; color: var(--trust); stroke-width: 2.2; }
.edrep-draft__note { padding-top: 12px; border-top: 1px dashed var(--gold-line); font: 400 14px/1.5 var(--font-body); color: var(--ink-2); }
.edrep-draft__note b { color: var(--ink); }
.edrep-draft__load { display: none; gap: 9px; padding: 4px 0; }
.edrep-draft__load i { display: block; height: 10px; border-radius: 6px; background: var(--gold-line); opacity: 0.35; }
.edrep-draft__load i:nth-child(2) { width: 88%; } .edrep-draft__load i:nth-child(3) { width: 62%; }
html.motion .edrep-draft__load i { animation: edrep-pulse 1s ease-in-out infinite alternate; }
html.motion .edrep-draft__load i:nth-child(2) { animation-delay: 0.15s; } html.motion .edrep-draft__load i:nth-child(3) { animation-delay: 0.3s; }
@keyframes edrep-pulse { from { opacity: 0.18; } to { opacity: 0.5; } }
.edrep-pane.is-drafting .edrep-draft__load { display: grid; }
.edrep-pane.is-drafting :is(.edrep-draft__t, .edrep-draft__checks, .edrep-draft__note) { display: none; }
html.motion .edrep-pane.is-fresh :is(.edrep-draft__t, .edrep-draft__checks, .edrep-draft__note) { animation: edrep-in 0.5s cubic-bezier(.2, .7, .2, 1) both; }
html.motion .edrep-pane.is-fresh .edrep-draft__checks { animation-delay: 0.12s; }
html.motion .edrep-pane.is-fresh .edrep-draft__note { animation-delay: 0.2s; }
@keyframes edrep-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.edrep-pane__act, .edrep-pane__done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.edrep-pane__act .you { margin-top: 0; }
.edrep-pane__done { display: none; }
.edrep-pane.is-posted .edrep-draft { background: var(--trust-wash); box-shadow: inset 3px 0 0 var(--trust); }
.edrep-pane.is-posted .edrep-draft__h b { color: var(--trust); }
.edrep-pane.is-posted :is(.edrep-draft__pre, .edrep-draft__by, .edrep-draft__checks, .edrep-draft__note, .edrep-pane__act) { display: none; }
.edrep-pane.is-posted .edrep-draft__post { display: inline; }
.edrep-pane.is-posted .edrep-pane__done { display: flex; }
html.motion .edrep-pane.is-posted .edrep-pane__done { animation: edrep-in 0.45s cubic-bezier(.2, .7, .2, 1) both; }

.edrep-flow { list-style: none; margin: 0; padding: 16px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; border-top: 1px solid var(--line); }
.edrep-flow li { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--font-body); color: var(--muted); transition: color 0.3s; }
.edrep-flow b { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 9999px; background: var(--chip); color: var(--muted); font: 700 12px/1 var(--font-body); transition: background-color 0.3s, color 0.3s; }
.edrep-flow li.is-on { color: var(--ink); }
.edrep-flow li.is-on b { background: var(--gold-grad); color: var(--gold-ink); }
.edrep-inbox__note { margin-top: 14px; }

/* ---------- Negative reviews */
.edrep-flag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
.edrep-flag__c { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--radius-card); background: var(--panel); }
.edrep-flag__c h3 { font: 700 21px/1.25 var(--font-body); letter-spacing: -0.018em; color: var(--ink); }
.edrep-flag__c p { color: var(--ink-2); }
.edrep-flag__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.edrep-flag__chips li { padding: 9px 13px; border-radius: 9999px; background: var(--chip); color: var(--ink); font: 600 13.5px/1 var(--font-body); }
.edrep-flag__no { align-content: center; }
.edrep-flag__no .eyebrow { color: var(--on-sun); opacity: 0.75; }
.edrep-flag__big { font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--font-body); letter-spacing: -0.028em; color: var(--on-sun); text-wrap: balance; }

/* ---------- Rules */
.edrep-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.edrep-rules__c { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-card); background: var(--panel); }
.edrep-rules__c h3 { display: flex; align-items: center; gap: 12px; font: 700 22px/1.2 var(--font-body); letter-spacing: -0.02em; color: var(--ink); }
.edrep-rules__c h3 .psg-ic { stroke-width: 2.2; }
.edrep-rules__list { list-style: none; margin: 0; padding: 0; display: grid; }
.edrep-rules__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font: 500 15.5px/1.45 var(--font-body); color: var(--ink); }
.edrep-rules__list li:first-child { border-top: 0; }
.edrep-rules__list .psg-ic { font-size: 19px; margin-top: 1px; stroke-width: 2.2; }
.edrep-rules__list--do .psg-ic { color: var(--trust); }
.edrep-rules__list--dont .psg-ic { color: var(--price-text); }
.edrep-rules__src { margin-top: 16px; max-width: 80ch; }

/* ---------- Monitoring and the sample report */
.edrep-mon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.edrep-mon .sec__head { margin-bottom: clamp(24px, 3vw, 32px); }
.edrep-chan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.edrep-chan li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 18px; border-radius: 14px; background: var(--panel); }
.edrep-chan b { font: 700 15px/1.3 var(--font-body); color: var(--ink); }
.edrep-chan span { font: 400 14.5px/1.45 var(--font-body); color: var(--ink-2); }
.edrep-mon__note { margin-top: 18px; max-width: 58ch; }

.edrep-rep { margin: 0; display: grid; gap: 12px; }
.edrep-rep__card { display: grid; gap: 24px; padding: clamp(22px, 2.8vw, 34px); border-radius: var(--radius-card); background: var(--panel); }
.edrep-rep__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.edrep-rep__top > span { display: grid; gap: 3px; }
.edrep-rep__top b { font: 700 19px/1.2 var(--font-body); letter-spacing: -0.02em; color: var(--ink); }
.edrep-rep__top > span > span { font: 500 13.5px/1.3 var(--font-body); color: var(--muted); }
.edrep-rep__kpi { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.edrep-rep__kpi div { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.edrep-rep__kpi dt { font: 600 12.5px/1.2 var(--font-body); color: var(--muted); }
.edrep-rep__kpi dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 28px/1.05 var(--font-body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.edrep-rep__kpi small { font: 500 14px/1 var(--font-body); letter-spacing: 0; color: var(--muted); }
.edrep-rep__sec { display: grid; gap: 12px; }
.edrep-rep__h { font: 600 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.edrep-rep__themes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edrep-rep__themes li { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 600 14px/1.2 var(--font-body); color: var(--ink); }
.edrep-rep__themes i { position: relative; display: block; height: 8px; border-radius: 9999px; background: var(--chip); overflow: hidden; }
.edrep-rep__themes i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(var(--w, 1)); }
.edrep-rep__themes i.is-low::after { background: linear-gradient(90deg, var(--flame-1), var(--flame-2)); }
html.motion .edrep-rep__themes i::after { transition: transform 0.9s cubic-bezier(.2, .7, .2, 1); }
html.motion .edrep-rep__themes li:nth-child(2) i::after { transition-delay: 0.12s; }
html.motion .edrep-rep__themes li:nth-child(3) i::after { transition-delay: 0.24s; }
html.motion .edrep-rep.is-wait .edrep-rep__themes i::after { transform: scaleX(0); }
.edrep-rep__next { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font: 500 14.5px/1.45 var(--font-body); color: var(--ink-2); }
.edrep-rep__next li::marker { color: var(--accent-text); font-weight: 700; }

/* ---------- Testimonials with consent, staff guidance */
.edrep-proof { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.edrep-consent { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edrep-consent li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--panel); }
.edrep-consent b { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font: 700 13px/1 var(--font-body); }
.edrep-consent h3 { align-self: center; font: 700 18px/1.3 var(--font-body); color: var(--ink); }
.edrep-consent p { font: 400 15px/1.5 var(--font-body); color: var(--ink-2); }
.edrep-tm { margin: 0; display: grid; gap: 12px; align-content: start; }
.edrep-tm__card { border-radius: var(--radius-card); overflow: hidden; background: var(--panel); }
.edrep-tm__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--chip); }
.edrep-tm__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.edrep-tm__bar span { margin: 0 auto; transform: translateX(-20px); padding: 4px 14px; border-radius: 9999px; background: var(--panel); font: 600 11.5px/1 var(--font-body); color: var(--muted); }
.edrep-tm__body { position: relative; display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px); }
.edrep-tm__body::before { content: "\201C"; position: absolute; top: clamp(4px, 1vw, 14px); right: clamp(18px, 2.4vw, 32px); font: 700 120px/1 Georgia, serif; color: var(--gold-line); opacity: 0.35; pointer-events: none; }
.edrep-tm__k { font: 600 12px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.edrep-tm__q { max-width: 34ch; font: 500 clamp(19px, 1.8vw, 23px)/1.45 var(--font-body); letter-spacing: -0.015em; color: var(--ink); }
.edrep-tm__by { display: flex; align-items: center; gap: 12px; }
.edrep-tm__by .edrep-av { width: 40px; height: 40px; font-size: 15px; }
.edrep-tm__by > span { display: grid; gap: 3px; }
.edrep-tm__by b { font: 700 15px/1.2 var(--font-body); color: var(--ink); }
.edrep-tm__by > span > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 13px/1.3 var(--font-body); color: var(--muted); }
.edrep-tm .edrep-stars { --off: var(--line-2); width: 60px; height: 12px; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
.edrep-tm__tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.edrep-staff { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); align-items: center; margin-top: clamp(16px, 2vw, 24px); padding: clamp(24px, 3.2vw, 44px); border-radius: var(--radius-card); background: var(--panel); }
.edrep-staff__h { display: grid; gap: 10px; justify-items: start; }
.edrep-staff__h .psg-disk { margin-bottom: 4px; }
.edrep-staff__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; }
.sec__head .lead a { color: var(--ink); text-decoration-color: var(--gold-line); text-underline-offset: 3px; }

/* ---------- Light theme: crisp hairlines like the site's other cards */
:root[data-theme="light"] :is(.edrep-sig li, .edrep-flag__c, .edrep-rules__c, .edrep-chan li, .edrep-rep__card, .edrep-consent li, .edrep-staff, .edrep-msg, .edrep-tm__card) { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .edrep-inbox { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
:root[data-theme="light"] .edrep-switch { box-shadow: 0 0 0 1px rgba(22, 24, 29, 0.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .edrep-qr { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 44px rgba(0, 0, 0, 0.5); } }
:root[data-theme="dark"] .edrep-qr { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 44px rgba(0, 0, 0, 0.5); }

/* ---------- Responsive */
@media (max-width: 1100px) {
  .edrep-sig li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .edrep-sig__k { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .edrep-ask, .edrep-mon, .edrep-proof, .edrep-flag, .edrep-rules, .edrep-staff { grid-template-columns: minmax(0, 1fr); }
  .edrep-inbox__grid { grid-template-columns: minmax(0, 1fr); }
  .edrep-inbox__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .edrep-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edrep-ask__vis { max-width: 560px; }
}
@media (max-width: 560px) {
  .edrep-vis__hint { display: none; }
  .edrep-switch { width: 100%; }
  .edrep-switch label { flex: 1; }
  .edrep-switch span { justify-content: center; width: 100%; padding: 0 10px; }
  .edrep-out { right: 10px; }
  .edrep-gm { padding: 12px 12px 10px; }
  .edrep-ph__t { height: 64px; }
  .edrep-sig li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .edrep-chan li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .edrep-rep__themes li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .edrep-rep__themes i { grid-column: 1 / -1; grid-row: 2; }
  .edrep-qr { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; margin: -36px 8px 0 auto; padding: 18px 16px 14px; }
  .edrep-qr__code { width: 88px; height: 88px; }
  .edrep-qr__t b { font-size: 16px; }
  .edrep-msg { padding-bottom: 52px; }
  .edrep-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .edrep-staff__list { grid-template-columns: minmax(0, 1fr); }
  .edrep-consent li { padding: 20px; gap: 4px 14px; }
  .edrep-pane__rv { font-size: 16px; }
  .edrep-inbox__top { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .edrep-switch span, .edrep-rv, .edrep-draft, .edrep-flow li, .edrep-flow b { transition: none; }
}