/* Single-service pages, reviews and accounts. Loaded after tru.css.
   sv- is the service template, rv- is reviews, ac- is accounts. */

/* ───────── Shared small parts ───────── */
.sv-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--quiet); }
.sv-crumb li + li::before { content: "/"; margin-right: 10px; color: var(--faint); }
.sv-crumb a { text-decoration: none; }
.sv-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sv-crumb [aria-current] { color: var(--ink); font-weight: 500; }
.sv a.in, .rv a.in, .ac a.in { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv a.in:hover, .rv a.in:hover, .ac a.in:hover { text-decoration-color: var(--ink); }
.textlink svg { width: 16px; height: 16px; flex: none; }
.tell { font-size: clamp(17px, 1.4vw, 19px); color: var(--text); max-width: 31em; text-wrap: pretty; }
.tell + .tell { margin-top: 1em; }
.sv-lab { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-deep); }

/* ───────── Hero: the search question, and its answer on the glass ───────── */
.sv-hero { padding: clamp(22px, 3vw, 40px) 0 0; }
.sv-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.sv-h1 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.022em; line-height: 1.05; font-size: clamp(36px, 4.7vw, 66px); text-wrap: balance; margin-top: clamp(18px, 2.4vw, 30px); }
.sv-h1.is-long { font-size: clamp(34px, 4vw, 56px); }
.sv-hero .lede { margin-top: 22px; max-width: 32em; }
.sv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.sv-pic { position: relative; margin: 0; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 5; max-height: min(700px, calc(100svh - 104px)); width: 100%; background: var(--panel); justify-self: end; }
.sv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,15,0) 48%, rgba(8,11,15,.5)); }
.js .sv-pic img { animation: settle 1.1s cubic-bezier(.2,.7,.2,1) both; }
.sv-tick { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; color: #fff; background: rgba(15,20,26,.6); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.sv-tick > div { padding: 16px 18px 18px; min-width: 0; }
.sv-tick > div + div { border-left: 1px solid rgba(255,255,255,.18); }
.sv-tick dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.sv-tick dd { margin: 0; }
.sv-tick dd b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 31px); letter-spacing: -0.02em; line-height: 1.08; margin-top: 8px; text-wrap: balance; }
.sv-tick dd span { display: block; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.86); margin-top: 7px; }
.js .sv-tick { opacity: 0; transform: translateY(12px); animation: rise .8s cubic-bezier(.2,.7,.2,1) .5s forwards; }

/* On this page: a quiet row of jumps for the long pages */
.sv-jump { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.sv-jump span { font-size: 13px; color: var(--quiet); margin-right: 6px; }
.sv-jump a { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; background: var(--panel); padding: 7px 12px; border-radius: 8px; transition: background .2s ease; }
.sv-jump a:hover { background: var(--amber-wash); }
.sv [id] { scroll-margin-top: 88px; }

/* ───────── The point of view: one plain statement, and what is on the list beside it ───────── */
.sv-fact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.sv-fact.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
.sv-say > * { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.sv-say > * + * { margin-top: .6em; color: var(--quiet); }
.sv-say b { font-weight: 400; color: var(--ink); }
.sv-inc { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); padding: 22px 22px 14px; transform: rotate(1.1deg); }
.sv-inc > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sv-inc > header :first-child { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--ink); }
.sv-inc > header span { flex: none; font-size: 12px; color: var(--quiet); }
.sv-inc li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ink); }
.sv-inc li:last-child { border-bottom: 0; }
.sv-inc li::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: var(--amber-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23a9691c' stroke-width='2.2'%3E%3Cpath d='M3 7.4l2.7 2.7L11 4'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sv-inc .note { margin: 0; padding: 12px 0 6px; border-top: 1px solid var(--line); }
.js .sv-inc li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.js .seen .sv-inc li { opacity: 1; transform: none; }
.js .seen .sv-inc li:nth-child(2) { transition-delay: .1s; } .js .seen .sv-inc li:nth-child(3) { transition-delay: .2s; }
.js .seen .sv-inc li:nth-child(4) { transition-delay: .3s; } .js .seen .sv-inc li:nth-child(5) { transition-delay: .4s; }

/* ───────── Editorial rows: the question on the left, the answer and its proof on the right ───────── */
.sv-rows { border-top: 1px solid var(--ink); }
.sv-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); padding: clamp(40px, 5.2vw, 72px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.sv-row > h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.sv-show { margin-top: 28px; }
.sv-row > div > .sv-show:first-child { margin-top: 0; }
.sv-show + .tell { margin-top: 26px; }

/* A calm list */
.sv-list li { position: relative; padding: 13px 0 13px 26px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink); }
.sv-list li:first-child { border-top: 0; padding-top: 2px; }
.sv-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--amber-deep); }
.sv-list li:first-child::before { top: 11px; }

/* Typical ranges: a table, set as a ladder */
.sv-ladder { display: block; width: 100%; }
.sv-ladder thead { position: absolute; left: -9999px; }
.sv-ladder tbody { display: grid; gap: 6px; }
.sv-ladder tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "s r"; column-gap: 18px; align-items: center; background: var(--panel); border-radius: 12px; padding: 14px 18px; }
.sv-ladder th { grid-area: n; text-align: left; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); padding: 0; }
.sv-ladder td { padding: 0; }
.sv-ladder .r { grid-area: r; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.sv-ladder .s { grid-area: s; font-size: 13.5px; line-height: 1.4; color: var(--quiet); margin-top: 2px; }
.sv-ours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; background: var(--amber-wash); border-radius: 12px; padding: 16px 18px; margin-top: 6px; }
.sv-ours b { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 25px); letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.sv-ours span { font-size: 14px; line-height: 1.45; color: var(--text); }

/* Two or three plain cells */
.sv-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-cells.is-3 { grid-template-columns: repeat(3, 1fr); }
.sv-cells > div { border-radius: 12px; padding: 18px; background: var(--panel); }
.sv-cells > div.warm { background: var(--amber-wash); }
.sv-cells b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.018em; line-height: 1.1; color: var(--ink); }
.sv-cells span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--text); margin-top: 8px; }

/* Steps of a visit, as a line */
.sv-steps { position: relative; counter-reset: st; }
.sv-steps li { position: relative; padding: 0 0 20px 34px; font-size: 16px; line-height: 1.45; color: var(--ink); border-left: 2px solid var(--line); margin-left: 7px; }
.sv-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.sv-steps li::before { content: ""; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--amber-deep); box-sizing: border-box; }
.sv-steps li:last-child::before { background: var(--amber-deep); }

/* A real review beside the claim */
.sv-quote { margin: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--amber); }
.sv-quote p { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.sv-quote footer { margin-top: 12px; font-size: 14px; color: var(--quiet); }

/* The gutter year */
.sv-year ol { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.sv-year li { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--quiet); padding: 14px 0 12px; border-radius: 8px; background: var(--panel); transition: background .5s ease, color .5s ease; }
.sv-year li.wet { background: var(--ink); color: rgba(255,255,255,.82); }
.sv-year li.go { background: var(--amber); color: var(--ink); }
.js .sv-year:not(.seen) li.wet, .js .sv-year:not(.seen) li.go { background: var(--panel); color: var(--quiet); }
.js .sv-year.seen li:nth-child(n+4) { transition-delay: .25s; } .js .sv-year.seen li.go { transition-delay: .9s; }
.sv-year p { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 13.5px; color: var(--quiet); }
.sv-year p span { display: inline-flex; align-items: center; gap: 8px; }
.sv-year p i { width: 12px; height: 12px; border-radius: 4px; background: var(--ink); }
.sv-year p i.go { background: var(--amber); }

/* Where the middle of the screen goes */
.sv-eye { position: relative; height: 230px; border-radius: 16px; background: var(--panel); overflow: hidden; }
.sv-eye .tv { position: absolute; left: 44%; top: 40px; width: 38%; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--ink); box-shadow: 0 12px 30px rgba(15,20,26,.2); }
.sv-eye .tv::after { content: ""; position: absolute; top: 50%; left: -300%; right: -300%; border-top: 2px dashed var(--amber); }
.sv-eye .tv span { position: absolute; right: calc(100% + 14px); top: calc(50% + 9px); width: 7.4em; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--amber-deep); }
.sv-eye .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: #e7e9ec; }
.sv-eye .seat { position: absolute; right: 6%; bottom: 34px; width: 20%; height: 44px; border-radius: 10px 10px 0 0; background: #d5d8dc; }

/* ───────── A panel with something to tap: the picker ───────── */
.sv-feat { background: var(--panel); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 56px); }
.sv-feat-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.sv-pick { margin-top: clamp(28px, 3.4vw, 44px); display: grid; gap: 10px; }
.sv-pick article { background: #fff; border-radius: 14px; padding: 20px 22px; }
.sv-pick h3 { font-size: 17px; font-weight: 600; color: var(--ink); }
.sv-pick article p { font-size: 16px; line-height: 1.5; color: var(--text); margin-top: 8px; max-width: 40em; }
.sv-pick.is-on { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.sv-tabs { display: flex; flex-direction: column; gap: 4px; }
.sv-tabs button { text-align: left; background: transparent; border: 0; border-radius: 12px; padding: 14px 16px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--quiet); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background .2s ease, color .2s ease; }
.sv-tabs button::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .2s ease; }
.sv-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.sv-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(15,20,26,.06); }
.sv-tabs button[aria-selected="true"]::after { opacity: 1; color: var(--amber-deep); }
.sv-pick.is-on .sv-panes { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.08); padding: clamp(24px, 3vw, 40px); display: grid; align-content: center; min-height: 300px; }
.sv-pick.is-on article { padding: 0; background: none; }
.sv-pick.is-on article[hidden] { display: none; }
.sv-pick.is-on h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -0.016em; line-height: 1.12; }
.sv-pick.is-on article p { font-size: clamp(17px, 1.4vw, 19px); margin-top: 14px; max-width: 30em; }
.js .sv-pick.is-on article:not([hidden]) { animation: find-in .4s cubic-bezier(.2,.7,.2,1); }
.sv-feat .sv-sub { margin-top: clamp(28px, 3.4vw, 44px); }
.sv-feat .sv-sub > h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.014em; color: var(--ink); }
.sv-day { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); }
.sv-day li { position: relative; padding: 24px 22px 0 0; border-top: 2px solid var(--ink); font-size: 15px; line-height: 1.45; color: var(--text); }
.sv-day li::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 2px solid var(--amber-deep); box-sizing: border-box; }
.sv-day li:last-child::before { background: var(--amber-deep); }

/* ───────── What to send: tap your answers and the request writes itself ───────── */
.sv-slip { background: var(--ink); color: rgba(255,255,255,.84); border-radius: var(--r-panel); padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sv-slip .chip { background: rgba(242,178,102,.16); color: var(--amber); }
.sv-slip h2 { color: #fff; margin-top: 20px; }
.sv-slip .lede { color: rgba(255,255,255,.82); margin-top: 16px; }
.sv-qs { margin-top: 26px; display: grid; gap: 18px; }
.sv-qs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sv-qs legend { padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 9px; }
.sv-qs div { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-qs button { background: transparent; border: 1px solid rgba(255,255,255,.26); color: #fff; border-radius: 9px; padding: 9px 13px; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.sv-qs button:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.44); }
.sv-qs button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.sv-slip :focus-visible { outline-color: var(--amber); }
.sv-send { margin-top: 24px; }
.sv-send li { position: relative; padding: 9px 0 9px 22px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.8); }
.sv-send li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 2px; background: var(--amber); }
.sv-send-h { margin-top: 26px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.sv-send-h + .sv-send { margin-top: 6px; }
.js .sv-send li.q { display: none; }
html:not(.js) .sv-qs, html:not(.js) .sv-ticket, html:not(.js) .sv-send-h { display: none; }
html:not(.js) .sv-slip { grid-template-columns: minmax(0, 1fr); }
.sv-ticket { align-self: start; position: sticky; top: 104px; background: #fff; color: var(--text); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 22px 22px 20px; transform: rotate(1.2deg); }
.sv-ticket header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sv-ticket header b { font-size: 15px; color: var(--ink); }
.sv-ticket header span { font-size: 12px; color: var(--quiet); text-align: right; }
.sv-ticket li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sv-ticket li small { font-size: 13px; color: var(--quiet); }
.sv-ticket li span { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.sv-ticket li span.empty { font-weight: 400; color: #a3a8af; }
.js .sv-ticket li span.pop { animation: find-in .35s cubic-bezier(.2,.7,.2,1); }
.sv-ticket .btn { margin-top: 18px; width: 100%; justify-content: center; }
.sv-ticket .note { margin-top: 12px; text-align: center; }

/* ───────── Questions ───────── */
.sv-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.sv-faq-side { position: sticky; top: 104px; }
.sv-faq-side .h3 + p { margin-top: 18px; }
.sv-guides { margin-top: 26px; display: grid; gap: 2px; }
.sv-guides .sv-lab { margin-bottom: 8px; }
.sv-guides a { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.sv-guides a:last-child { border-bottom: 1px solid var(--line); }
.sv-guides a::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid var(--amber-deep); border-right: 2px solid var(--amber-deep); transform: rotate(45deg); transition: transform .2s ease; }
.sv-guides a:hover::after { transform: translateX(3px) rotate(45deg); }
.faqs details { border-top: 1px solid var(--line); }
.faqs details:last-of-type { border-bottom: 1px solid var(--line); }
.faqs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 17.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--amber-deep) 0 0) center / 14px 2px no-repeat, linear-gradient(var(--amber-deep) 0 0) center / 2px 14px no-repeat; transition: transform .25s ease; }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs summary:hover { color: #000; }
.faqs details p { padding: 0 34px 22px 0; font-size: 16.5px; line-height: 1.55; color: var(--text); max-width: 36em; }
.js .faqs details[open] p { animation: find-in .4s cubic-bezier(.2,.7,.2,1); }

/* ───────── The whole list: this job is one line on it ───────── */
.sv-whole { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sv-whole .tell { margin-top: 18px; }
.sv-whole h2 { margin-top: 22px; }
.sv-pro { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 32em; }
.sv-pro p { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.26; letter-spacing: -0.012em; color: var(--ink); margin-top: 8px; text-wrap: pretty; }
.sv-wl { width: min(480px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); padding: 20px 20px 10px; transform: rotate(-1.1deg); }
.sv-wl > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sv-wl > header h3 { font-size: 15px; font-weight: 600; color: var(--ink); }
.sv-wl > header span { flex: none; font-size: 12px; color: var(--quiet); }
.sv-wl-body { display: grid; grid-template-columns: minmax(0, 1fr) 16px auto; column-gap: 12px; align-items: center; }
.sv-wl li { border-bottom: 1px solid var(--line); }
.sv-wl li:last-child { border-bottom: 0; }
.sv-wl li > * { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 8px; margin: 0 -8px; border-radius: 8px; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-decoration: none; transition: background .2s ease; }
.sv-wl li a::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid var(--quiet); border-right: 1.5px solid var(--quiet); transform: rotate(45deg); opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.sv-wl li a:hover { background: var(--panel); }
.sv-wl li a:hover::after { opacity: 1; transform: translateX(2px) rotate(45deg); }
.sv-wl li.here > * { background: var(--amber-wash); font-weight: 600; }
.sv-wl li.here em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--amber-deep); }
.sv-wl .brace { align-self: stretch; margin: 14px 0; border: 2px solid var(--amber-deep); border-left: 0; border-radius: 0 10px 10px 0; }
.sv-wl .one { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.sv-wl .one small { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--quiet); margin-top: 6px; }
.js .sv-wl .brace { clip-path: inset(50% 0 50% 0); transition: clip-path .7s ease .5s; }
.js .seen .sv-wl .brace { clip-path: inset(0); }
.js .sv-wl .one { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease 1s, transform .5s ease 1s; }
.js .seen .sv-wl .one { opacity: 1; transform: none; }
.sv-area { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; font-size: 15px; color: var(--quiet); }
.sv-area b { font-weight: 600; color: var(--ink); }
.sv-area a { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* The close, with the three doors in */
.close .sv-who { margin: clamp(36px, 5vw, 56px) auto 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); max-width: 860px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 28px; text-align: left; }
.close .sv-who a { display: block; text-decoration: none; color: #fff; padding: 6px 0; }
.close .sv-who b { display: block; font-size: 16px; font-weight: 600; }
.close .sv-who span { display: block; font-size: 13.5px; color: rgba(255,255,255,.62); margin-top: 3px; transition: color .2s ease; }
.close .sv-who a:hover span { color: var(--amber); }

/* ───────── Reviews: people, in their own words ───────── */
.rv-head { padding: clamp(48px, 7vw, 104px) 0 0; }
.rv-head-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.rv-head .display { margin-top: 22px; }
.rv-head .lede { margin-top: 24px; }
.rv-score { border-top: 1px solid var(--ink); padding-top: 20px; }
.rv-score b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 9vw, 132px); line-height: .86; letter-spacing: -0.04em; color: var(--ink); }
.rv-score p { margin-top: 14px; font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-stars { display: inline-flex; gap: 2px; color: var(--amber); }
.rv-stars svg { width: 16px; height: 16px; }
.rv-score a { display: inline-block; margin-top: 14px; font-size: 15px; }

.rv-title { margin-top: clamp(48px, 6vw, 84px); }
.rv-hear { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; position: sticky; top: 62px; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }
.rv-hear > span { font-size: 14px; color: var(--quiet); margin-right: 6px; }
.rv-hear button { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.rv-hear button:hover { background: var(--panel); }
.rv-hear button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rv-hear output { margin-left: auto; font-size: 14px; color: var(--quiet); }
html:not(.js) .rv-hear { display: none; }
html:not(.js) .rv-voices { margin-top: 18px; border-top: 1px solid var(--line); }

.rv-voices { counter-reset: v; }
.rv-voice { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(20px, 5vw, 80px); padding: clamp(40px, 6vw, 88px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.rv-voice:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.rv-voice:nth-child(even) .rv-who { order: 2; }
.rv-who { position: sticky; top: 150px; margin: 0; }
.rv-who .mono { width: 56px; height: 56px; border-radius: 14px; background: var(--ink); color: var(--amber); display: grid; place-items: center; font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; }
.rv-who b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.015em; color: var(--ink); margin-top: 18px; }
.rv-who small { display: block; font-size: 14px; color: var(--quiet); margin-top: 6px; }
.rv-who .rv-stars { margin-top: 12px; }
.rv-who .rv-stars svg { width: 14px; height: 14px; }
.rv-who .did { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--text); max-width: 17em; }
.rv-voice blockquote { margin: 0; }
.rv-voice blockquote p { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: clamp(26px, 3.1vw, 44px); line-height: 1.2; letter-spacing: -0.016em; text-wrap: pretty; }
.rv-voice.is-short blockquote p { font-size: clamp(34px, 4.8vw, 68px); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.rv-voice.is-long blockquote p { font-size: clamp(23px, 2.5vw, 34px); line-height: 1.28; }
.rv-voice mark { background: none; color: inherit; background-image: linear-gradient(var(--amber), var(--amber)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 2px; transition: background-size .45s cubic-bezier(.2,.7,.2,1), color .3s ease; padding-bottom: 1px; }
.js .rv-voices.is-pick blockquote p { color: var(--faint); transition: color .3s ease; }
.js .rv-voices.is-pick mark { background-size: 0 2px; }
.js .rv-voices.is-pick mark.on { color: var(--ink); background-image: linear-gradient(var(--amber-wash), var(--amber-wash)); background-size: 100% 88%; background-position: 0 60%; }
.rv-ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 96px); align-items: center; padding: clamp(36px, 5vw, 64px) 0 0; }
.rv-ask p { font-size: 16px; color: var(--text); max-width: 32em; }
.rv-ask .h3 + p { margin-top: 0; }

/* ───────── Accounts ───────── */
.ac .sv-h1 { font-size: clamp(44px, 5.8vw, 84px); }
.ac .sv-h1 span { display: block; color: var(--quiet); font-size: .58em; line-height: 1.12; letter-spacing: -0.016em; margin-top: .3em; }
.ac-first { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; padding: 16px 18px 18px; border-radius: 16px; color: #fff; background: rgba(15,20,26,.58); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.ac-first header { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,.8); }
.ac-first header em { font-style: normal; font-weight: 600; color: var(--ink); background: var(--amber); padding: 3px 8px; border-radius: 6px; }
.ac-first strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 30px); letter-spacing: -0.02em; line-height: 1.1; margin-top: 10px; }
.ac-doors { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 14px; }
.ac-doors i { height: 30px; border-radius: 7px; border: 1.5px dashed rgba(255,255,255,.4); transition: background .4s ease, border-color .4s ease; }
.ac-doors i:first-child { background: var(--amber); border: 1.5px solid var(--amber); }
.js .ac-first.grow .ac-doors i { background: rgba(255,255,255,.2); border-style: solid; border-color: rgba(255,255,255,.5); }
.js .ac-first.grow .ac-doors i:first-child { background: var(--amber); border-color: var(--amber); }
.js .ac-first.grow .ac-doors i:nth-child(3) { transition-delay: .12s; } .js .ac-first.grow .ac-doors i:nth-child(4) { transition-delay: .24s; }
.js .ac-first.grow .ac-doors i:nth-child(5) { transition-delay: .36s; } .js .ac-first.grow .ac-doors i:nth-child(6) { transition-delay: .48s; }
.js .ac-first.grow .ac-doors i:nth-child(7) { transition-delay: .6s; } .js .ac-first.grow .ac-doors i:nth-child(8) { transition-delay: .72s; }
.ac-first p { font-size: 13px; color: rgba(255,255,255,.84); margin-top: 11px; }

.ac-terms { display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.ac-ledger { border-top: 1px solid var(--ink); }
.ac-ledger li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ac-ledger h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.14; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; }
.ac-ledger p { font-size: 16px; line-height: 1.5; color: var(--text); }
.ac-ledger li.is-hot h3 { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ac-side { position: sticky; top: 96px; background: var(--panel); border-radius: var(--r-panel); padding: clamp(20px, 2.6vw, 34px); }
.ac-try { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-try label { display: block; font-size: 12px; font-weight: 600; color: var(--quiet); }
.ac-try input { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.ac-try input::placeholder { color: var(--faint); }
.ac-try input:focus { outline: 2px solid var(--amber-deep); outline-offset: 1px; border-color: transparent; }
html:not(.js) .ac-try { display: none; }
.ac-inv { margin-top: 18px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); padding: 22px; transform: rotate(-1deg); }
html:not(.js) .ac-inv { margin-top: 0; }
.ac-inv header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ac-inv header b { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.015em; color: var(--ink); }
.ac-inv header span { font-size: 12px; font-weight: 600; color: var(--quiet); background: var(--panel); padding: 5px 9px; border-radius: 6px; }
.ac-inv dl { margin: 0; }
.ac-inv dl div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ac-inv dt { font-size: 13px; color: var(--quiet); }
.ac-inv dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.ac-inv .key { background: var(--amber-wash); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; border-bottom-color: transparent; }
.ac-inv .key dd { font-weight: 600; }
.ac-inv dd.typed { font-weight: 600; }
.js .ac-inv dd.pop { animation: find-in .3s cubic-bezier(.2,.7,.2,1); }
.ac-inv p { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--quiet); }

.ac-take { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ac-take figure { margin: 0; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--panel); }
.ac-take figure img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.ac-take h2 { margin-top: 22px; }
.ac-take ul { margin-top: 26px; border-top: 1px solid var(--line); }
.ac-take li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ac-take li b { display: block; font-size: 17.5px; font-weight: 600; color: var(--ink); }
.ac-take li span { display: block; font-size: 15.5px; color: var(--text); margin-top: 4px; max-width: 30em; }
.ac-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ac-old { margin-top: 26px; background: var(--panel); border-radius: 12px; padding: 16px 18px; font-size: 15px; color: var(--text); }

/* ───────── Narrow screens ───────── */
@media (max-width: 900px) {
  .sv-hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-hero-txt { display: contents; }
  .sv-crumb { order: 1; } .sv-h1 { order: 2; } .sv-pic { order: 3; margin-top: 24px; aspect-ratio: 3 / 2; max-height: none; }
  .sv-hero .lede { order: 4; } .sv-act { order: 5; margin-top: 24px; }
  .sv-fact, .sv-row, .sv-feat-head, .sv-slip, .sv-faq, .sv-whole, .rv-head-in, .rv-ask, .ac-terms, .ac-take { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sv-fact { gap: 36px; }
  .sv-inc, .sv-ticket, .sv-wl, .ac-inv { transform: none; }
  .sv-pick.is-on { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sv-tabs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sv-tabs button { padding: 9px 12px; font-size: 14.5px; background: rgba(255,255,255,.6); border-radius: 9px; }
  .sv-tabs button::after { display: none; }
  .sv-pick.is-on .sv-panes { min-height: 0; }
  .sv-day { grid-template-columns: 1fr; }
  .sv-day li { border-top: 0; border-left: 2px solid var(--ink); padding: 0 0 22px 24px; }
  .sv-day li::before { top: 0; left: -9px; }
  .sv-day li:last-child { padding-bottom: 0; }
  .sv-slip { gap: 30px; }
  .sv-faq-side, .ac-side, .rv-who, .sv-ticket { position: static; }
  .sv-whole { gap: 40px; }
  .sv-wl { width: 100%; }
  .sv-area { grid-template-columns: minmax(0, 1fr); }
  .close .sv-who { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .rv-head-in { gap: 40px; }
  .rv-hear { position: static; }
  .rv-hear output { margin-left: 0; width: 100%; }
  .rv-voice, .rv-voice:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rv-voice:nth-child(even) .rv-who { order: 0; }
  .rv-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .rv-who .mono { width: 48px; height: 48px; font-size: 21px; grid-row: span 2; }
  .rv-who b { margin-top: 0; font-size: 22px; } .rv-who small { margin-top: 2px; }
  .rv-who .rv-stars { display: none; }
  .rv-who .did { grid-column: 1 / -1; max-width: none; }
  .ac-ledger li { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .ac-take figure { order: -1; }
}
@media (max-width: 560px) {
  .sv-pic { aspect-ratio: 1 / 1; }
  .sv-tick dd b { font-size: 22px; }
  .sv-tick > div { padding: 14px 14px 16px; }
  .sv-cells, .sv-cells.is-3 { grid-template-columns: minmax(0, 1fr); }
  .sv-ladder tr { padding: 13px 14px; column-gap: 12px; }
  .sv-ours { grid-template-columns: minmax(0, 1fr); }
  .sv-year li { font-size: 10px; padding: 12px 0 10px; border-radius: 6px; }
  .sv-year ol { gap: 3px; }
  .sv-wl-body { grid-template-columns: minmax(0, 1fr); }
  .sv-wl .brace { display: none; }
  .sv-wl .one { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding: 14px 0 8px; border-top: 2px solid var(--amber-deep); }
  .sv-wl .one small { margin-top: 0; }
  .sv-ticket li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); }
  .ac-try { grid-template-columns: minmax(0, 1fr); }
  .faqs summary { font-size: 16.5px; padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sv-pic img, .js .sv-tick { animation: none; opacity: 1; transform: none; }
  .js .sv-inc li, .js .sv-wl .one { opacity: 1; transform: none; transition: none; }
  .js .sv-wl .brace { clip-path: none; transition: none; }
  .js .sv-year:not(.seen) li.wet { background: var(--ink); color: rgba(255,255,255,.82); }
  .js .sv-year:not(.seen) li.go { background: var(--amber); color: var(--ink); }
  .sv-year li, .rv-voice mark, .ac-doors i { transition: none; }
  .js .sv-pick.is-on article:not([hidden]), .js .faqs details[open] p, .js .sv-ticket li span.pop, .js .ac-inv dd.pop { animation: none; }
}