/* quick-win.html */
.qw-hide-sm { display: none; }
@media (min-width: 560px) { .qw-hide-sm { display: inline-flex; } }

.qw-hero { padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.qw-hero::before { /* ruled paper: quiet, CPA-adjacent texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 80% 30%, #000 0%, transparent 70%);
}
.qw-hero__in { position: relative; }
.qw-exhibit { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.qw-exhibit__tab { display: inline-block; padding: 6px 12px 6px 14px; border-radius: 4px 999px 999px 4px; background: var(--sel-bg); color: var(--sel-fg); letter-spacing: 0.08em; }
.qw-title { max-width: 15ch; margin-bottom: 20px; }
@media (min-width: 900px) { .qw-title { max-width: 18ch; } }
.qw-sub { max-width: 40rem; margin-bottom: 28px; }
.qw-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.qw-facts { list-style: none; margin: 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px 40px; border-top: 1px solid var(--line); max-width: 44rem; color: var(--fg-2); font-size: var(--text-body-small); }
.qw-facts .num { display: block; font-size: var(--text-h3); color: var(--fg); line-height: 1.2; }

.qw-hero__in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1040px) { .qw-hero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.qw-art { display: none; position: relative; height: 500px; }
@media (min-width: 1040px) { .qw-art { display: block; } }
.qw-sheet { position: absolute; width: 300px; padding: 18px 20px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); font-size: 13px; line-height: 1.5;
  transition: transform 700ms var(--ease-out); }
.qw-sheet p { margin: 0; }
.qw-sheet__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px !important; display: flex; justify-content: space-between; }
.qw-sheet__label span { text-transform: none; letter-spacing: 0; padding: 0 8px; border-radius: 999px; background: var(--bg-sunk); color: var(--fg-2); }
.qw-sheet--email { left: 0; top: 10px; transform: rotate(-4deg); z-index: 3; }
.qw-sheet--letter { right: 0; top: 165px; transform: rotate(3deg); z-index: 2; }
.qw-sheet--tasks { left: 6%; top: 310px; transform: rotate(-1deg); z-index: 1; }
.qw-sheet__subj { font-weight: 600; margin-bottom: 12px !important; }
.qw-bar { display: block; height: 7px; border-radius: 4px; background: var(--bg-sunk); width: var(--w); margin-bottom: 8px; }
.qw-sheet__sign { margin-top: 12px !important; font-size: 12px; color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
.qw-sheet__sign::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.qw-sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.qw-sheet dt { color: var(--fg-3); font-size: 12px; }
.qw-sheet dd { margin: 0; font-weight: 500; }
.qw-sheet__flag { margin-top: 12px !important; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 500; }
.qw-sheet__row { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.qw-sheet__row:last-child { border: 0; }
.qw-sheet__row b { font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--sel-bg); color: var(--sel-fg); font-weight: 600; }
.qw-sheet__row b.b2 { background: var(--bg-sunk); color: var(--fg-2); }
.qw-sheet__row i { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.qw-art:hover .qw-sheet--email { transform: rotate(-6deg) translate(-18px, -10px); }
.qw-art:hover .qw-sheet--letter { transform: rotate(5deg) translate(18px, -4px); }
.qw-art:hover .qw-sheet--tasks { transform: rotate(-2deg) translate(-6px, 14px); }
@media (prefers-reduced-motion: no-preference) {
  .qw-sheet { animation: qw-deal 1100ms var(--ease-out) both; }
  .qw-sheet--email { animation-delay: 520ms; }
  .qw-sheet--letter { animation-delay: 380ms; }
  .qw-sheet--tasks { animation-delay: 240ms; }
}
@keyframes qw-deal { from { opacity: 0; transform: translate(40px, 60px) rotate(8deg) scale(0.96); } }

@media (prefers-reduced-motion: no-preference) {
  .qw-hero__copy > * { animation: qw-rise 800ms var(--ease-out) both; }
  .qw-hero__copy > *:nth-child(2) { animation-delay: 80ms; }
  .qw-hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  .qw-hero__copy > *:nth-child(4) { animation-delay: 240ms; }
  .qw-hero__copy > *:nth-child(5) { animation-delay: 320ms; }
}
@keyframes qw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.qw-demo { background: var(--bg-elev); }
.qw-demo .ob-notes { background: var(--bg); }
.qw-note { margin-top: 16px; }

/* Prompt */
.qw-prompt-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .qw-prompt-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } .qw-prompt-head { position: sticky; top: 96px; } }
.qw-guard { display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--bg-elev); border-left: 3px solid var(--signal); margin: 24px 0; }
.qw-guard svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.qw-guard p { margin: 0 0 4px; font-size: var(--text-body-small); }
.qw-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.qw-copy__icon { position: relative; width: 16px; height: 16px; display: inline-block; }
.qw-copy__icon svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity var(--d-state), transform var(--d-move) var(--ease-spring); }
.qw-copy .i-ok { opacity: 0; transform: scale(0.6); }
.qw-copy .i-ok path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.qw-copy.is-copied .i-copy { opacity: 0; transform: scale(0.6); }
.qw-copy.is-copied .i-ok { opacity: 1; transform: none; }
.qw-copy.is-copied .i-ok path { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-out) 80ms; }

.qw-code { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--gradient-depth); color: var(--color-text-inverse); box-shadow: var(--shadow-lift); position: relative; }
.qw-code__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-size: var(--text-caption); color: var(--color-neutral-300); flex-wrap: wrap; }
.qw-code__bar .mono { font-size: 12px; color: var(--color-text-inverse); }
.qw-code__legend { margin-left: auto; }
.qw-dots { display: inline-flex; gap: 6px; }
.qw-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.18); }
.qw-code__scroll { max-height: 440px; overflow: auto; overscroll-behavior: contain; transition: max-height var(--d-move) var(--ease-move); }
.qw-code__scroll.is-open { max-height: 4000px; }
.qw-code__scroll:focus-visible { outline-offset: -3px; }
.qw-pre { margin: 0; padding: 18px 18px 64px; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: #EBEBEB; }
.qw-pre .h { color: var(--color-text-inverse); font-weight: 600; }
mark.paste { background: rgb(91 184 173 / 0.22); color: var(--color-text-inverse); box-shadow: inset 0 -2px 0 var(--color-accent-muted); border-radius: 3px; padding: 0 2px; }
.qw-code__legend mark.paste { color: var(--color-text-inverse); }
.qw-code__more { position: absolute; left: 0; right: 0; bottom: 0; border: 0; padding: 36px 16px 14px; font-size: var(--text-body-small); font-weight: 600; color: var(--color-text-inverse);
  background: linear-gradient(to bottom, rgb(30 42 47 / 0), #1E2A2F 55%); text-align: center; }
.qw-code__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.qw-code__more[aria-expanded="true"] { position: static; background: #1E2A2F; padding: 12px; }

/* Steps */
.qw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 820px) { .qw-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.qw-step { position: relative; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg); }
.qw-step__art { width: 56px; height: 56px; color: var(--fg); margin-bottom: 20px; }
.qw-step__n { position: absolute; top: 24px; right: 24px; color: var(--fg-3); font-size: var(--text-body-small); }
.qw-step h3 { margin-bottom: 8px; }
.qw-step p { margin: 0; color: var(--fg-2); }

/* Sample */
.qw-narrow { max-width: calc(860px + var(--gutter) * 2); }
.qw-details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-bottom: 10px; overflow: hidden; }
.qw-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 600; }
.qw-details summary::-webkit-details-marker { display: none; }
.qw-details summary svg { width: 18px; height: 18px; flex: none; transition: transform var(--d-state) var(--ease-out); }
.qw-details[open] summary svg { transform: rotate(180deg); }
.qw-details summary:hover { background: var(--bg-elev); }
.qw-details__body { padding: 4px 18px 20px; font-size: var(--text-body-small); }
.qw-details__body p { margin-bottom: 10px; }
@supports (interpolate-size: allow-keywords) {
  .qw-details { interpolate-size: allow-keywords; }
  .qw-details::details-content { height: 0; overflow: clip; transition: height var(--d-move) var(--ease-move), content-visibility var(--d-move) allow-discrete; }
  .qw-details[open]::details-content { height: auto; }
  @media (prefers-reduced-motion: reduce) { .qw-details::details-content { transition: none; } }
}
.qw-input { white-space: pre-wrap; background: var(--bg-elev); padding: 14px; border-radius: 8px; font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; }
.qw-mail { max-width: 38rem; }
.qw-mail ol { margin: 0 0 10px; padding-left: 20px; }
mark.confirm { background: var(--warn-bg); color: var(--warn); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.qw-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.qw-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-small); min-width: 560px; }
.qw-table--2 { min-width: 0; }
.qw-table th, .qw-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.qw-table thead th { font-size: var(--text-caption); color: var(--fg-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.qw-table tbody th { font-weight: 600; width: 26%; }
.qw-table td:last-child { color: var(--fg-2); }
.qw-table--2 td:last-child { color: var(--fg); }
.qw-sub-h { margin-top: 8px; }
.qw-ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* Limits */
.qw-limits { display: grid; gap: 16px; }
@media (min-width: 820px) { .qw-limits { grid-template-columns: 1fr 1fr; gap: 24px; } }
.qw-limits .t-h4 { margin: 8px 0 16px; }
.qw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qw-list li { position: relative; padding-left: 28px; }
.qw-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; }
.qw-list--yes li::before { background: var(--signal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A9D8F' stroke-width='3'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.qw-list--no li::before { box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.qw-better { display: grid; gap: 24px; align-items: center; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 820px) { .qw-better { grid-template-columns: 160px 1fr; gap: 40px; } }
.qw-better__meter { width: 140px; height: 140px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--fg) calc(var(--m, 0) * 360deg), var(--bg-sunk) 0); --m: 0; }
.qw-better__meter span { position: absolute; inset: 12px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.qw-better__meter span::after { content: "80%"; font: 500 var(--text-h3) / 1 var(--font-mono); }
.qw-better__meter { transition: --m 1400ms var(--ease-out); }
.qw-better.is-in .qw-better__meter, .qw-better__meter.is-in { --m: 0.8; }
@property --m { syntax: "<number>"; inherits: true; initial-value: 0; }
@media (prefers-reduced-motion: reduce) { .qw-better__meter { --m: 0.8; } }

.qw-end { text-align: center; }
.qw-end__in { display: grid; justify-items: center; gap: 12px; }
.qw-end .t-lead { margin-bottom: 12px; }