/* So'rah case study · Step 06 · Iterations (iterate.html)
   Chapter layer on top of sorah.css. Prefixes: ih hero · vs/vr home-version scrubber · va/vt table · ts/kit/rv usability testing ·
   ba before/after · sh/st/bd screens, strips, boards · lg log in · su/sm/sol/pr/sp set-up · hf/hp/hn home flow · mp my plan ·
   sn search + notifications · pf/ia/lv profile · of/lane/tip/ins order flow · dk dark mode · en closing. */

main > section.sec > .wrap > * + * { margin-top: var(--s-6); }
main > section.sec > .wrap > .hd + * { margin-top: 0; }
.hd--sm { margin-bottom: var(--s-4); }
.hd--sm .hd__title, .hd--sm h3 { max-width: 24ch; }
.ul { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ul:hover { color: var(--accent); }
.t-ar { font-size: var(--t-lead); line-height: 1.6; }

/* team notes as they appear on the canvas (informational: fill, no stroke) */
.note { display: block; width: fit-content; max-width: 46ch; padding: .65em .95em; border-radius: 12px; background: var(--tile); font: 500 var(--t-small)/1.4 var(--font); color: var(--fg); }
.th-white .note, .th-paper .note { background: rgba(24,24,24,.05); }
.note--red { color: var(--s-error); background: rgba(214,0,0,.07) !important; font-weight: 600; }

/* ---------- hero ---------- */
.ih__media { max-width: 820px; }
.ih__media img { border-radius: var(--r-panel); filter: drop-shadow(0 40px 60px rgba(7,30,4,.18)); }
.ih__tag { position: absolute; z-index: 2; }
.ih__tag--a { left: 14%; top: 30%; }
.ih__tag--b { left: 43%; top: 21%; }
.ih__tag--c { left: 70%; top: 15%; }
@media (max-width: 600px) { .ih__tag .ptr__label { font-size: 11px; } .ih__tag--c { left: 58%; } }

/* ---------- 1 · home versions: pinned scrubber ---------- */
.vs { padding: 0; }
.vs__pin { display: none; }
.vs.is-scrub .vs__pin { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 2vh, 24px); height: 100vh; height: 100svh; padding: calc(var(--bar-h) + 4px) 0 clamp(14px, 3vh, 32px); }
.vs.is-scrub .vr { display: none; }
.vs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.vs__head .sec-num { color: rgba(255,255,255,.7); margin-bottom: .6em; }
.vs__head .t-h2 { font-size: clamp(28px, calc(56 * var(--fx)), 56px); }
.vs__hint { max-width: 44ch; font-size: var(--t-small); color: var(--fg-soft); }
.vs__hint b { color: #fff; font-weight: 600; }
.vs__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-6); align-items: center; min-height: 0; }
.vs__info { align-self: center; }
.vs__count { font-size: var(--t-small); color: var(--fg-soft); }
.vs__count span { color: var(--s-lime); font-weight: 600; }
.vs__label { margin: .1em 0 .35em; font: 300 clamp(40px, calc(104 * var(--fx)), 104px)/.95 var(--font); letter-spacing: -.045em; color: #fff; }
.vs__label.is-swap { animation: vs-in .6s var(--ease) both; }
@keyframes vs-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.vs__eb { color: var(--s-lime); margin-bottom: .7em; }
.vs__what { max-width: 42ch; font-size: clamp(14px, calc(18 * var(--fx)), 18px); line-height: 1.5; color: rgba(255,255,255,.82); }
.vs__what.is-swap { animation: vs-in .6s var(--ease) .05s both; }
.vs__device { position: relative; height: min(100%, 780px); aspect-ratio: 430 / 932; justify-self: center; }
.vs__phone { position: absolute; inset: 0; background: #fff; }
.vs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(.985); filter: blur(3px); transition: opacity .45s var(--ease), transform .7s var(--ease), filter .45s; }
.vs__img.is-on { opacity: 1; transform: none; filter: none; }
.vs__marks { position: absolute; inset: 0; pointer-events: none; }
.vs__mk { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.vs__mk.is-on { opacity: 1; transition: opacity .5s .25s; }
.vs__box { position: absolute; border-radius: 12px; background: rgba(141,219,29,.10); box-shadow: 0 0 0 2px var(--s-lime), 0 0 34px rgba(141,219,29,.45); transform: scale(.96); transition: transform .7s var(--ease-back) .25s; }
.vs__mk.is-on .vs__box { transform: none; }
.vs__tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-6px, -4px) scale(.85); opacity: 0; transition: transform .6s var(--ease-back), opacity .4s; }
.vs__mk.is-on .vs__tag { transform: none; opacity: 1; transition-delay: .4s; }
.vs__mk.is-on .vs__tag:nth-of-type(3) { transition-delay: .55s; }
.vs__mk.is-on .vs__tag:nth-of-type(4) { transition-delay: .7s; }
.vs__tag .ptr__label { font-size: clamp(11px, calc(15 * var(--fx)), 15px); }
.vs__keeps { align-self: center; max-width: 360px; justify-self: end; width: 100%; }
.vs__keeps dl { margin: 0; display: grid; gap: 2px; }
.vs__k { display: grid; gap: .2em; padding: .62em .9em; border-radius: 12px; background: rgba(255,255,255,.04); transition: background .4s; }
.vs__k dt { font: 600 var(--t-micro)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vs__k dd { margin: 0; font-size: clamp(13px, calc(16 * var(--fx)), 16px); line-height: 1.35; color: #fff; }
.vs__k.is-ch { background: rgba(141,219,29,.14); }
.vs__k.is-ch dt::after, .vs__legend i { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .55em; border-radius: 50%; background: var(--s-lime); vertical-align: middle; box-shadow: 0 0 0 3px rgba(141,219,29,.25); }
.vs__legend { margin-top: .9em; font-size: var(--t-micro); color: var(--fg-soft); display: flex; align-items: center; gap: .55em; }
.vs__legend i { margin: 0; }
.vs__time { position: relative; }
.vs__track { position: relative; height: 26px; margin: 0 calc(100% / 20); cursor: pointer; touch-action: none; border-radius: 999px; }
.vs__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; background: rgba(255,255,255,.16); }
.vs__fill { position: absolute; left: 0; top: 50%; height: 3px; width: 100%; transform: translateY(-50%) scaleX(var(--p, 0)); transform-origin: 0 50%; border-radius: 3px; background: var(--grad-brand); }
.vs__thumb { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 24px; height: 24px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--s-lime); box-shadow: 0 0 0 5px rgba(141,219,29,.25), 0 6px 16px rgba(0,0,0,.4); transition: box-shadow .25s; }
.vs__track:hover .vs__thumb, .vs__track:focus-visible .vs__thumb, .vs__track.is-drag .vs__thumb { box-shadow: 0 0 0 9px rgba(141,219,29,.3), 0 6px 16px rgba(0,0,0,.4); }
.vs__ticks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 6px; }
.vs__tick { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 4px 2px; border-radius: 10px; font: 500 clamp(11px, calc(14 * var(--fx)), 14px)/1.15 var(--font); color: rgba(255,255,255,.55); text-align: center; transition: color .25s; }
.vs__tick i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.vs__tick:hover { color: #fff; }
.vs__tick[aria-pressed="true"] { color: var(--s-lime); }
.vs__tick[aria-pressed="true"] i { opacity: 1; transform: scale(1.4); }
/* fallback rail (≤900px, reduced motion, no JS) */
.vr { padding-block: var(--s-7) var(--s-6); }
.vr__head .sec-num { color: rgba(255,255,255,.7); }
.vr__head .vs__hint { margin-top: var(--s-2); }
.vr__rail { margin-top: var(--s-5); padding-inline: var(--gutter); gap: var(--s-4); scroll-padding-inline: var(--gutter); }
.vr__card { width: clamp(220px, 64vw, 290px); display: grid; gap: var(--s-3); align-content: start; }
.vr__phone { aspect-ratio: 430 / 932; }
.vr__phone img { height: 100%; object-fit: cover; object-position: top; }
.vr__card figcaption { display: grid; gap: .3em; }
.vr__n { font-size: var(--t-micro); color: var(--s-lime); }
.vr__card b { font: 600 var(--t-h4)/1.1 var(--font); }
.vr__what { font-size: var(--t-small); line-height: 1.45; color: rgba(255,255,255,.75); }
.vr__card.is-hot .vr__phone { box-shadow: 0 0 0 clamp(4px, .45vw, 8px) var(--s-lime), 0 30px 60px -24px rgba(0,0,0,.6); }
@media (max-width: 1180px) { .vs__keeps { display: none; } .vs__stage { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- 1b · strip + table ---------- */
.va__strip img { width: 100%; height: auto; border-radius: var(--r-card); background: #fff; }
.vt { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-card); background: #fff; }
.vt:focus-visible { outline-offset: 2px; }
.vt__t { width: 100%; min-width: 860px; border-collapse: collapse; font-size: clamp(13px, calc(16 * var(--fx)), 16px); line-height: 1.35; }
.vt__t th, .vt__t td { padding: .8em 1em; text-align: left; vertical-align: top; }
.vt__t thead th { font: 600 var(--t-micro)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); background: rgba(24,24,24,.035); }
.vt__t tbody tr + tr > * { box-shadow: inset 0 1px 0 rgba(24,24,24,.07); }
.vt__t td.is-ch { background: rgba(141,219,29,.16); }
.vt__t tbody tr { transition: background .3s; }
.vt__t tbody tr.is-on { background: rgba(141,219,29,.1); }
.vt__t--3 { min-width: 640px; }
.vt__go { padding: .45em .8em; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.vt__go:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
tr.is-on .vt__go { background: var(--s-night); color: #fff; box-shadow: none; }

/* ---------- shared: screens, strips, boards, rails ---------- */
.sh { display: grid; gap: .7em; align-content: start; width: clamp(150px, calc(230 * var(--fx)), 230px); position: relative; }
.sh--sm { width: clamp(120px, calc(170 * var(--fx)), 170px); }
.sh__s img { width: 100%; height: auto; }
.sh figcaption { font-size: var(--t-micro); line-height: 1.35; color: var(--fg-soft); }
.sh__note { position: absolute; left: 72%; top: 38%; z-index: 2; }
.sh__note .ptr__label { display: block; width: max-content; max-width: 12em; white-space: normal; border-radius: 12px; padding: .55em .8em; line-height: 1.25; font-size: clamp(11px, calc(14 * var(--fx)), 14px); }
.sh__note--lv { left: 79%; top: 13%; }
.sh-rail { gap: var(--s-4); padding-block: var(--s-2) var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.st { display: grid; gap: .5em; }
.st img { width: 100%; height: auto; border-radius: 14px; background: #fff; }
.st figcaption { font-size: var(--t-micro); color: var(--fg-soft); }
.bd { display: grid; gap: .6em; align-content: start; }
.bd__i { border-radius: var(--r-card); overflow: hidden; background: var(--tile); }
.bd__i img { width: 100%; height: auto; }
.bd figcaption { font-size: var(--t-micro); color: var(--fg-soft); }
.bd--thumb .bd__i { aspect-ratio: 4 / 3; }
.bd--thumb .bd__i img { height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.bd--thumb:hover .bd__i img { transform: scale(1.03); }
.bd--tall .bd__i { aspect-ratio: 3 / 4; }
.bd--tall .bd__i img { height: 100%; object-fit: cover; object-position: top; }
.bd--inline { max-width: 420px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.bd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mp .bd-grid--2 { grid-template-columns: minmax(0, 1fr) auto; }
.sh--edited { width: clamp(160px, calc(260 * var(--fx)), 260px); }
.bd-grid--3 { grid-template-columns: 1.2fr 1.2fr .6fr; align-items: start; }
.bd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit__hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
@media (max-width: 900px) { .bd-grid--2, .bd-grid--3 { grid-template-columns: 1fr; } .bd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- before / after slider ---------- */
.ba { display: grid; gap: var(--s-3); justify-items: center; align-content: start; margin: 0; }
.ba__title { justify-self: start; font: 600 var(--t-h4)/1.1 var(--font); }
.ba__frame { position: relative; width: 100%; aspect-ratio: var(--ar); border-radius: clamp(16px, 2vw, 30px); overflow: hidden; background: #fff; box-shadow: 0 24px 50px -26px rgba(7,30,4,.45), 0 0 0 1px rgba(24,24,24,.06); user-select: none; -webkit-user-select: none; }
.ba__frame:focus-within { outline: 2.5px solid var(--s-green); outline-offset: 4px; }
.ba__a, .ba__b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.ba__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); }
.ba.is-anim .ba__b { transition: clip-path .6s var(--ease); }
.ba.is-anim .ba__line { transition: left .6s var(--ease); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--s-lime); box-shadow: 0 0 12px rgba(7,30,4,.35); pointer-events: none; }
.ba__line b { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--s-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23071E04' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 8px 18px rgba(7,30,4,.35); }
.ba__lab { position: absolute; top: 12px; padding: .4em .75em; border-radius: 999px; font: 600 var(--t-micro)/1 var(--font); pointer-events: none; transition: opacity .3s; }
.ba__lab--a { left: 12px; background: rgba(24,24,24,.78); color: #fff; }
.ba__lab--b { right: 12px; background: var(--s-lime); color: var(--s-forest); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ba__seg button { font-size: var(--t-micro); }
.ba--wide { width: 100%; }
.ba--wide .ba__frame { max-width: calc(var(--r) * min(500px, 58vh)); }

/* ---------- 2 · usability testing ---------- */
.ts__set { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.ts__dev { position: relative; width: clamp(220px, calc(330 * var(--fx)), 330px); }
.ts__phone { aspect-ratio: 425 / 921; }
.ts__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(14px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.ts__img.is-on { opacity: 1; transform: none; }
.ts__tag { position: absolute; left: 78%; top: -3%; z-index: 2; }
.ts__count { margin: .6em 0 .5em; font-size: var(--t-lead); }
.ts__count b { color: var(--s-green); }
.ts__bar { height: 6px; border-radius: 6px; background: rgba(11,73,7,.12); overflow: hidden; }
.ts__bar i { display: block; height: 100%; width: calc(var(--sp, 1) / 9 * 100%); border-radius: inherit; background: var(--grad-brand); transition: width .6s var(--ease); }
.ts__qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--s-4); }
.ts__q { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start; width: 100%; height: 100%; padding: .75em .9em; border-radius: 14px; text-align: left; font-size: clamp(13px, calc(16 * var(--fx)), 16px); line-height: 1.3; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--ease); }
.ts__q .t-mono { font-size: .85em; color: var(--fg-soft); padding-top: .1em; }
.ts__q:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ts__q[aria-pressed="true"] { background: var(--s-forest); color: #fff; box-shadow: none; }
.ts__q[aria-pressed="true"] .t-mono { color: var(--s-lime); }
.ts__ctrl { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.ts__ctrl svg { width: 1.1em; }
.kit__rail { gap: var(--s-3); padding-block: var(--s-2) var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.kit__c { width: clamp(130px, calc(180 * var(--fx)), 180px); display: grid; gap: .55em; align-content: start; }
.kit__g { font: 600 var(--t-micro)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--s-forest); white-space: nowrap; }
.kit__s img { width: 100%; height: auto; }
.kit__c figcaption { font-size: var(--t-micro); line-height: 1.35; color: var(--fg-soft); }
.kit__c figcaption .t-mono { color: var(--fg); }
.kit__c.is-hot .kit__s { box-shadow: 0 0 0 3px var(--s-green), 0 24px 50px -26px rgba(7,30,4,.4); }
.ts__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; }
.ts__ref img { width: 100%; height: auto; border-radius: var(--r-card); background: #fff; }
.ts__ref figcaption { margin-top: .6em; }
.ts__notes { display: grid; gap: var(--s-2); justify-items: start; }
.ts__notes .note { background: rgba(255,255,255,.7); font-style: italic; }
.ts__after { margin-top: var(--s-4); }
.ts__link { display: grid; grid-template-columns: 7em 1fr auto; gap: var(--s-3); align-items: center; width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1.5px var(--line); font-size: var(--t-small); line-height: 1.35; transition: box-shadow .25s, transform .4s var(--ease); }
.ts__link:hover { box-shadow: inset 0 0 0 1.5px var(--fg); transform: translateY(-2px); }
.ts__link svg { width: 1.2em; }
.ts__notes .bd { width: 100%; margin-top: var(--s-3); }
.rv { padding-top: var(--s-6); }
.rv__board img { width: 100%; height: auto; border-radius: var(--r-card); background: #fff; }
.rv__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--s-4); }
.rv__steps li { display: grid; grid-template-columns: auto 1fr; gap: .8em; padding: .8em 1em; border-radius: 14px; background: rgba(255,255,255,.62); font-size: var(--t-small); line-height: 1.35; }
.rv__steps .t-mono { color: var(--s-green); font-weight: 600; }
.rv__caps { margin-top: var(--s-4); align-items: center; }
.rv__caps .chip { background: rgba(255,255,255,.62); }
@media (max-width: 1000px) { .ts__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ts__set { grid-template-columns: 1fr; justify-items: center; gap: var(--s-5); }
  .ts__side { width: 100%; }
  .ts__qs { grid-template-columns: 1fr; }
  .ts__more { grid-template-columns: 1fr; }
  .rv__steps { grid-template-columns: 1fr; }
  .ts__link { grid-template-columns: 1fr auto; }
  .ts__link span { grid-column: 1 / -1; grid-row: 2; }
  .ts__tag { left: 30%; top: -4%; }
}

/* ---------- 3 · log in ---------- */
.lg__cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.lg__txt { align-self: center; display: grid; gap: var(--s-3); }
.lg__states .sh { width: clamp(140px, calc(200 * var(--fx)), 200px); }
.sh--note { margin-right: clamp(40px, 6vw, 110px); }
.bd--wide .bd__i img { max-height: 70vh; object-fit: cover; object-position: top; }
@media (max-width: 900px) { .lg__cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .lg__txt { grid-column: 1 / -1; } }
@media (max-width: 640px) { .lg__cmp { grid-template-columns: minmax(0, 300px); justify-content: center; } }
.ba__seg { flex-wrap: wrap; justify-content: center; }

/* ---------- 4 · set-up ---------- */
.sm { display: grid; gap: var(--s-4); }
.sm__hint { margin-bottom: -.4em; }
.sm__row { display: grid; gap: var(--s-2); align-content: start; }
.sm__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .8em; font-size: var(--t-small); }
.sm__h b { font: 600 var(--t-h4)/1.1 var(--font); }
.sm__h span { color: var(--fg-soft); font-size: var(--t-micro); }
.sm__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.sm__l--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.sm__c { display: grid; align-content: start; gap: .45em; width: 100%; height: 100%; padding: .75em .85em; border-radius: 14px; text-align: left; font-size: clamp(12px, calc(15 * var(--fx)), 15px); line-height: 1.3; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .25s, opacity .25s, box-shadow .25s, transform .35s var(--ease); }
.sm__c .t-mono { font-size: .82em; color: var(--s-green); font-weight: 600; }
.sm__c:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sm__def { font-style: normal; font-size: .82em; color: var(--fg-soft); }
.sm.is-tracing .sm__c:not(.is-hot) { opacity: .32; }
.sm__c.is-hot { background: var(--s-lime-2); box-shadow: none; transform: translateY(-2px); }
.sm__c[aria-pressed="true"] { background: var(--s-lime); box-shadow: none; }
.sm__split { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-5); padding-top: var(--s-3); }
.sm__split .sm__l { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.sm__cap { max-width: 60ch; }
.sm__done { color: var(--fg-soft); }
.sm__done span { color: var(--s-green); font-weight: 700; }
@media (max-width: 1100px) { .sm__l--9 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); } .sm__split { grid-template-columns: 1fr; } }
.sol__g { display: grid; grid-template-columns: 2fr 3fr; gap: var(--gap); }
.sol__c { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-radius: var(--r-card); background: var(--s-paper); }
.sol__t .note { font-size: var(--t-h4); }
.sol__phones { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sol__phones .sh { width: clamp(110px, calc(170 * var(--fx)), 170px); }
@media (max-width: 900px) { .sol__g { grid-template-columns: 1fr; } }
.pr__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) 0; }
.pr__row + .pr__row { box-shadow: inset 0 1px 0 var(--line); }
.pr__c { display: grid; gap: var(--s-2); align-content: start; }
.pr__lab { justify-self: start; padding: .4em .75em; border-radius: 999px; font: 600 var(--t-micro)/1 var(--font); background: rgba(24,24,24,.07); color: var(--fg); }
.pr__lab--cur { background: var(--s-lime-2); color: var(--s-forest); }
@media (max-width: 900px) { .pr__row { grid-template-columns: 1fr; } }
.su__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: start; }
.sp { background: var(--s-paper); }
.sp h3 { margin-bottom: var(--s-3); max-width: 26ch; }
.sp__l { display: grid; gap: 6px; }
.sp__r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2.5em; gap: var(--s-2); align-items: center; width: 100%; padding: .55em .7em; border-radius: 12px; text-align: left; font-size: var(--t-micro); line-height: 1.3; box-shadow: inset 0 0 0 1.5px transparent; transition: background .25s, box-shadow .25s; }
.sp__r:hover, .sp__r:focus-visible { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.sp__bar { height: 10px; border-radius: 4px; background: rgba(24,24,24,.06); overflow: hidden; }
.sp__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--s-green); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease); }
.sp.is-in .sp__bar i { transform: none; }
.sp__r:hover .sp__bar i { background: var(--s-lime); }
.sp__r b { text-align: right; font-size: var(--t-small); }
.sp__src { margin-top: var(--s-3); }
.su__boards .bd-grid { margin-top: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .su__foot { grid-template-columns: 1fr; } }

/* ---------- 5 · home flow ---------- */
.hp { display: grid; }
.hp__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-4) 0; }
.hp__row + .hp__row { box-shadow: inset 0 1px 0 var(--line); }
.hp__c { display: grid; grid-template-columns: clamp(110px, calc(170 * var(--fx)), 170px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s-2) var(--s-3); align-items: start; }
.hp__c .pr__lab { grid-column: 1 / -1; }
.hp__s img { width: 100%; height: auto; }
.hp__ph { display: grid; place-items: center; aspect-ratio: 430 / 932; border-radius: clamp(14px, 1.4vw, 26px); background: rgba(24,24,24,.06); }
.hp__ph span { font: 600 var(--t-micro)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }
@media (max-width: 900px) { .hp__row { grid-template-columns: 1fr; gap: var(--s-3); } }
.hn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.hn__c { display: grid; gap: var(--s-3); align-content: start; }
.hn__eq { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5em .7em; margin-top: var(--s-2); }
.hn__eq span { display: grid; }
.hn__eq b { font: 700 clamp(24px, calc(36 * var(--fx)), 36px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hn__eq small { font-size: var(--t-micro); color: var(--fg-soft); }
.hn__eq i { font: 300 clamp(22px, calc(32 * var(--fx)), 32px)/1 var(--font); font-style: normal; color: var(--fg-soft); padding-bottom: .55em; }
.hn__res b { color: var(--s-green); }
.hn__sl { display: grid; gap: .5em; }
.hn__sl input { width: 100%; accent-color: var(--s-green); cursor: pointer; }
.hn__ends { display: flex; justify-content: space-between; }
.hn__out { font-size: var(--t-small); line-height: 1.4; min-height: 2.8em; }
.hn__out b { color: var(--s-green); }
.hn__steps { display: grid; gap: .45em; }
.hn__steps li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: .6em; align-items: center; }
.hn__steps i { height: 8px; background: radial-gradient(circle, var(--s-green) 0 3px, transparent 3.5px) 0 50% / 18px 8px repeat-x; opacity: .7; }
.hn__ar { font-size: var(--t-h4); line-height: 1.5; }
@media (max-width: 1200px) { .hn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .hn { grid-template-columns: 1fr; } }
.hf__ix { align-items: center; }
.hf__g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.hf__long { display: grid; gap: .6em; width: clamp(200px, calc(260 * var(--fx)), 260px); }
.hf__scroll { aspect-ratio: 430 / 932; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hf__long figcaption { font-size: var(--t-micro); }
.hf__g .sh-rail { margin-inline: 0 calc(var(--gutter) * -1); padding-inline: 0 var(--gutter); }
.hf__g .sh { width: clamp(140px, calc(200 * var(--fx)), 200px); }
.st--wide { margin-top: var(--s-5); }
@media (max-width: 700px) { .hf__g { grid-template-columns: 1fr; } .hf__g .sh-rail { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .hf__long { justify-self: center; } }

/* ---------- 6 · my plan ---------- */
.mp__set { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.mp__dev { display: grid; gap: .6em; justify-items: center; width: clamp(230px, calc(330 * var(--fx)), 330px); }
.mp__phone { width: 100%; aspect-ratio: 430 / 932; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mp__phone::-webkit-scrollbar { display: none; }
.mp__img { display: none; width: 100%; height: auto; }
.mp__img.is-on { display: block; animation: mp-in .55s var(--ease) both; }
@keyframes mp-in { from { opacity: 0; transform: translateY(10px); } }
.mp__whats { margin: var(--s-2) 0 var(--s-4); }
.mp__what { display: none; font-size: var(--t-lead); line-height: 1.4; max-width: 44ch; }
.mp__what.is-on { display: block; animation: mp-in .55s var(--ease) both; }
.mp__bs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.mp__b { display: grid; gap: .6em; width: 100%; height: 100%; align-content: start; padding: .6em; border-radius: 18px; text-align: left; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .25s, box-shadow .25s, transform .35s var(--ease); }
.mp__b:hover { box-shadow: inset 0 0 0 1.5px var(--fg); transform: translateY(-2px); }
.mp__b[aria-pressed="true"] { background: var(--s-forest); color: #fff; box-shadow: none; }
.mp__th { display: block; aspect-ratio: 430 / 600; overflow: hidden; border-radius: 12px; background: #fff; }
.mp__th img { width: 100%; height: auto; }
.mp__bt { display: grid; gap: .2em; font-size: var(--t-micro); line-height: 1.3; }
.mp__bt b { font-size: clamp(13px, calc(15 * var(--fx)), 15px); }
.mp__bt small { opacity: .7; }
.mp__steps { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.mp__arrow { display: grid; justify-items: center; gap: .5em; }
.mp__arrow svg { width: 34px; color: var(--s-green); }
.mp__opts { align-self: center; }
.mp__opts .check-list { margin-top: var(--s-3); }
@media (max-width: 1000px) { .mp__bs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .mp__set { grid-template-columns: 1fr; justify-items: center; gap: var(--s-5); }
  .mp__side { width: 100%; }
  .mp__steps { grid-template-columns: auto auto; justify-content: start; }
  .mp__arrow { display: none; }
  .mp__opts { grid-column: 1 / -1; }
}

/* ---------- 7 · search + notifications ---------- */
.sn { padding: 0; }
.sn__p { padding-block: var(--s-7); }
.sn__w { display: grid; align-content: start; }
.sn .wrap { padding-inline: clamp(20px, calc(80 * var(--fx)), 80px); }
.sn__w > * + * { margin-top: var(--s-4); }
.sn__w > .sec-num + * { margin-top: 0; }
.sn__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.sn__row .sh { width: auto; }
.sn__txt { max-width: 52ch; }
.sn__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }


/* ---------- 8 · profile ---------- */
.ia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.ia__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: ia; }
.ia__b { padding: var(--s-3); border-radius: 18px; background: var(--s-mint); font-size: var(--t-micro); line-height: 1.4; transition: opacity .25s, transform .35s var(--ease), box-shadow .25s; }
.ia__b--dark { background: var(--s-green); color: #fff; }
.ia__t { font: 600 clamp(14px, calc(17 * var(--fx)), 17px)/1.2 var(--font); margin-bottom: .6em; }
.ia__b ul { display: grid; gap: .15em; }
.ia__b ul li::before { content: "· "; opacity: .6; }
.ia__b ul ul { margin: .2em 0 .3em .8em; }
.ia__b:focus-visible { outline-offset: 2px; }
.ia.is-tracing .ia__b:not(.is-hot) { opacity: .35; }
.ia__b.is-hot { box-shadow: 0 0 0 3px var(--s-lime), 0 18px 40px -20px rgba(7,30,4,.5); transform: translateY(-3px); }
.ia__side { position: sticky; top: calc(var(--bar-h) + 16px); display: grid; gap: var(--s-3); }
.ia__labs { display: flex; flex-wrap: wrap; gap: 8px; }
.ia__lab { padding: .55em .85em; border-radius: 999px; font: 500 var(--t-micro)/1.1 var(--font); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .25s, opacity .25s, box-shadow .25s; }
.ia__lab:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ia.is-tracing .ia__lab:not(.is-hot) { opacity: .4; }
.ia__lab.is-hot { background: var(--s-lime-2); box-shadow: none; }
@media (max-width: 1100px) { .ia { grid-template-columns: 1fr; } .ia__side { position: static; } .ia__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ia__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv__l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.lv__b { display: grid; gap: var(--s-3); width: 100%; text-align: left; border-radius: 18px; padding: 8px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s; }
.lv__b:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.lv__b[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.lv__step { display: grid; place-items: start center; padding-top: 14px; height: calc(60px + var(--i) * clamp(14px, 1.8vw, 28px)); border-radius: 16px 16px 6px 6px; background: rgba(24,24,24,.05); transition: background .5s var(--ease), transform .5s var(--ease-back); }
.lv__emo { font-size: clamp(26px, calc(40 * var(--fx)), 40px); line-height: 1; transition: transform .5s var(--ease-back); }
.lv__i.is-reached .lv__step { background: var(--s-lime-2); }
.lv__i.is-top .lv__step { background: var(--s-lime); }
.lv__i.is-top .lv__emo { transform: scale(1.25) translateY(-4px); }
.lv__tx { display: grid; gap: .25em; padding: 0 .3em; }
.lv__tx b { font: 600 var(--t-h4)/1.1 var(--font); }
.lv__tx .t-mono { font-size: var(--t-micro); color: var(--s-green); }
.lv__tx .t-small { color: var(--fg-soft); }
@media (max-width: 800px) { .lv__l { grid-template-columns: 1fr; align-items: stretch; } .lv__b { grid-template-columns: 76px 1fr; align-items: center; } .lv__step { height: calc(54px + var(--i) * 8px); align-self: end; } }
.pf__cmp { display: grid; gap: var(--s-5); }
.pf__tbl { max-width: 1000px; }
.pf__screens .sh { width: clamp(140px, calc(190 * var(--fx)), 190px); }
.pf__screens .sh--note { margin-right: clamp(60px, 7vw, 120px); }
.pf__tbl .vt { margin-top: var(--s-2); background: var(--s-paper); }


/* ---------- 9 · order flow ---------- */
.of__labs { align-items: center; }
.lanes { display: grid; gap: var(--s-6); }
.lane { display: grid; gap: var(--s-3); }
.lane__h { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; }
.lane__h .t-mono { color: var(--s-green); font-weight: 600; }
.lane__note { font-size: var(--t-micro); }
.lane .ba { justify-items: start; }
.lane .ba__seg { justify-self: start; }
.of__add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); align-items: start; }
.tip { display: grid; gap: var(--s-3); }
.tip .st img { max-width: 520px; }
.tip__l { display: grid; gap: .5em; counter-reset: t; }
.tip__l li { counter-increment: t; display: grid; grid-template-columns: 1.8em 1fr; }
.tip__l li::before { content: counter(t); font: 600 var(--t-micro)/1.6 var(--font-mono); color: var(--s-green); }
.ins { display: grid; gap: var(--s-3); }
.ins__q { position: relative; margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 1.6em); border-radius: var(--r-card); background: #fff; font-size: var(--t-small); line-height: 1.55; }
.ins__q::before { content: "“"; position: absolute; left: var(--s-3); top: .1em; font: 700 3.2em/1 var(--font); color: var(--s-lime); }
@media (max-width: 900px) { .of__add { grid-template-columns: 1fr; } }

/* ---------- 10 · dark mode ---------- */
.dk .hd__aside a { color: #fff; }
.dk__g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.dk__dev { display: grid; gap: var(--s-3); justify-items: center; width: clamp(270px, calc(360 * var(--fx)), 360px); }
.dk__phone { position: relative; width: 100%; aspect-ratio: 430 / 860; background: #111; box-shadow: 0 0 0 clamp(4px, .45vw, 8px) #2a2a2a, 0 30px 70px -24px rgba(0,0,0,.7); }
.dk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s var(--ease); }
.dk__img.is-on { opacity: 1; }
.dk__seg { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.dk__seg button { display: inline-flex; align-items: center; gap: .45em; padding: .55em .7em; white-space: nowrap; color: rgba(255,255,255,.7); font-size: var(--t-micro); }
@media (max-width: 480px) { .dk__sw { display: none; } }
.dk__seg button[aria-pressed="true"] { background: #fff; color: var(--s-night); }
.dk__sw { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.dk__sw--0 { background: #fff; }
.dk__sw--1 { background: #1F2A33; }
.dk__sw--2 { background: #0B3307; }
.dk__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.dk__boards .bd:last-child { grid-column: 1 / -1; max-width: 50%; }
.dk .bd figcaption { color: rgba(255,255,255,.66); }
@media (max-width: 900px) { .dk__g { grid-template-columns: 1fr; justify-items: center; } .dk__boards { width: 100%; grid-template-columns: 1fr; } .dk__boards .bd:last-child { max-width: none; } }

/* ---------- closing ---------- */
.en { padding-block: var(--s-8); }
.en__t { max-width: 22ch; font: 300 clamp(30px, calc(80 * var(--fx)), 80px)/1.1 var(--font); letter-spacing: -.03em; }
.en__t b { font-weight: 700; }
.en__next { display: grid; grid-template-columns: 1fr auto; gap: .5em var(--s-4); align-items: center; max-width: 760px; margin-top: var(--s-7) !important; padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--s-night); color: #fff; transition: transform .5s var(--ease); }
.en__next .t-micro { grid-column: 1 / -1; color: rgba(255,255,255,.6); }
.en__nt { font-size: var(--t-lead); line-height: 1.35; }
.en__nt b { color: var(--s-lime); }
.en__next svg { width: 34px; color: var(--s-lime); transition: transform .45s var(--ease); }
.en__next:hover { transform: translateY(-4px); }
.en__next:hover svg { transform: translateX(8px); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .vs__head { flex-direction: column; align-items: flex-start; }
  .sh { width: clamp(140px, 42vw, 200px); }
  .lg__states .sh, .hf__g .sh, .pf__screens .sh { width: clamp(140px, 42vw, 200px); }
  .sn__boards { grid-template-columns: 1fr; }
  .ba--wide .ba__frame { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs__img, .ts__img, .dk__img { transition: none; }
}