/* ==========================================================================
   Resume Writing service page - loaded only on /services/resume-writing
   Builds on the global tokens and utilities in main.css
   ========================================================================== */

/* ----- shared resume-document skeleton ----- */
.rdoc { background: #fff; color: #101412; font-family: var(--font); }
.rdoc .bar { display: block; height: 7px; border-radius: 4px; background: #dfe5e1; margin: 7px 0; }
.rdoc .bar.strong { background: #101412; height: 8px; }
.rdoc .bar.hl { background: linear-gradient(90deg, #7ED957, #b9f19f); transform-origin: left; animation: rsHl 4.4s ease-in-out infinite; }
.rdoc .bar:nth-of-type(3n).hl { animation-delay: -1.4s; } .rdoc .bar:nth-of-type(3n+1).hl { animation-delay: -2.8s; }
@keyframes rsHl { 0%, 100% { opacity: .55; transform: scaleX(.72); } 50% { opacity: 1; transform: scaleX(1); } }
.w95 { width: 95%; } .w96 { width: 96%; } .w92 { width: 92%; } .w90 { width: 90%; } .w88 { width: 88%; } .w85 { width: 85%; } .w84 { width: 84%; } .w82 { width: 82%; } .w80 { width: 80%; }
.w78 { width: 78%; } .w76 { width: 76%; } .w75 { width: 75%; } .w72 { width: 72%; } .w70 { width: 70%; } .w66 { width: 66%; } .w65 { width: 65%; } .w60 { width: 60%; } .w55 { width: 55%; }
.w50 { width: 50%; } .w46 { width: 46%; } .w44 { width: 44%; }
.rd-av { display: block; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7ED957, #3d8f1f); flex: none; }

/* ============ 1. HERO ============ */
.rs-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 940px);
  padding: calc(var(--header-h) + clamp(36px, 5vw, 72px)) 0 clamp(80px, 9vw, 120px); background: radial-gradient(110% 100% at 85% 0%, #101a13, var(--black) 62%); }
.rs-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(30px, 5vw, 80px); align-items: center; width: 100%; }
.rs-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 22px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(126, 217, 87, .35); background: rgba(126, 217, 87, .07); }
.rs-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: blinkdot 2s ease-in-out infinite; }
.rs-title { font-size: clamp(2.2rem, 4.7vw, 4.1rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; color: #fff; max-width: 13em; text-wrap: balance; }
.rs-rule { display: block; width: 92px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: rsRule 1.4s .8s var(--ease) both; }
@keyframes rsRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rs-lead { margin-top: 22px; }
.rs-cta-row { margin-top: 36px; }

.rs-stage { position: relative; width: min(100%, 500px); aspect-ratio: 1 / 1.08; margin-inline: auto; perspective: 1500px; --rx: 0deg; --ry: 0deg; }
.rs-glow { position: absolute; inset: -10%; background: radial-gradient(closest-side, rgba(126, 217, 87, .38), transparent 72%); filter: blur(22px); animation: rsGlow 6s ease-in-out infinite alternate; }
@keyframes rsGlow { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.rs-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(7deg + var(--rx))) rotateY(calc(-15deg + var(--ry))); transition: transform .5s var(--ease); }
.rs-layer { position: absolute; border-radius: 18px; }
.rs-l1 { inset: 7% 15% 17% -4%; transform: translateZ(-130px) rotate(-7deg); background: linear-gradient(160deg, rgba(126, 217, 87, .2), rgba(126, 217, 87, .02)); border: 1px solid rgba(126, 217, 87, .38); backdrop-filter: blur(6px); animation: rsFloatA 8s ease-in-out infinite; }
.rs-l2 { inset: 3% 9% 13% 4%; transform: translateZ(-65px) rotate(-3.5deg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); animation: rsFloatB 9s ease-in-out infinite; }
.rs-main { inset: 0 4% 6% 8%; transform: translateZ(24px); background: #fff; overflow: hidden; padding: clamp(18px, 2.8vw, 32px); box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .6); animation: rsFloatC 7s ease-in-out infinite; }
@keyframes rsFloatA { 0%, 100% { transform: translateZ(-130px) rotate(-7deg) translateY(0); } 50% { transform: translateZ(-130px) rotate(-6deg) translateY(-12px); } }
@keyframes rsFloatB { 0%, 100% { transform: translateZ(-65px) rotate(-3.5deg) translateY(0); } 50% { transform: translateZ(-65px) rotate(-2.6deg) translateY(-9px); } }
@keyframes rsFloatC { 0%, 100% { transform: translateZ(24px) translateY(0); } 50% { transform: translateZ(24px) translateY(-8px); } }
.rdoc-hero { height: 100%; font-size: clamp(9px, 1.15vw, 12px); }
.rd-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e6ece8; margin-bottom: 14px; }
.rd-head b { display: block; font-size: 1.35em; letter-spacing: -.02em; } .rd-head small { color: #66726b; font-size: 1em; }
.rd-sec { margin-bottom: 12px; }
.rd-sec h5 { margin: 0 0 4px; font-size: .78em; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); font-weight: 800; }
.rd-job { margin-bottom: 10px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .rd-chips span { width: 46px; height: 16px; border-radius: 8px; background: #e8f7df; } .rd-chips span:nth-child(2) { width: 58px; } .rd-chips span:nth-child(4) { width: 38px; }
.rs-tag { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap; background: rgba(8, 8, 8, .6); border: 1px solid rgba(126, 217, 87, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); transform: translateZ(95px); animation: rsTag 6s ease-in-out infinite; }
.rs-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.rs-t1 { top: -2%; left: -7%; } .rs-t2 { top: 21%; right: -9%; animation-delay: -1.2s; } .rs-t3 { top: 52%; left: -11%; animation-delay: -2.4s; }
.rs-t4 { bottom: 17%; right: -7%; animation-delay: -3.6s; } .rs-t5 { bottom: -2%; left: 13%; animation-delay: -4.8s; }
@keyframes rsTag { 0%, 100% { transform: translateZ(95px) translateY(0); } 50% { transform: translateZ(95px) translateY(-10px); } }

/* ============ 2. WHY IT MATTERS + BEFORE / AFTER (combined) ============ */
.rs-story { background: linear-gradient(180deg, var(--soft), #fff 140%); padding-bottom: clamp(36px, 4.5vw, 64px); }
.rs-story-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.rs-story-copy { position: sticky; top: 104px; }
.rs-sub { margin-top: 22px; color: var(--mute-l); font-size: 1.06rem; max-width: 46ch; }
.rs-bene { margin-top: 30px; display: grid; gap: 10px; }
.rs-bene-btn { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 4px 10px; text-align: left; padding: 18px 20px 18px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line-l); transition: border-color .35s, box-shadow .5s, transform .5s var(--ease), background .35s; }
.rs-bene-btn:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .45); box-shadow: 0 22px 40px -28px rgba(8, 8, 8, .4); }
.rs-bene-btn[aria-pressed="true"] { background: var(--black); border-color: var(--black); transform: translateX(10px); box-shadow: 0 30px 50px -28px rgba(8, 8, 8, .6); }
.rs-bene-txt { display: grid; gap: 2px; min-width: 0; } .rs-bene-txt strong { font-size: 1.04rem; letter-spacing: -.015em; line-height: 1.25; transition: color .3s; } .rs-bene-txt em { font-style: normal; color: var(--mute-l); font-size: .9rem; line-height: 1.45; transition: color .3s; }
.rs-bene-btn[aria-pressed="true"] strong { color: #fff; } .rs-bene-btn[aria-pressed="true"] em { color: var(--mute-d); }
.rs-bene-go { width: 18px; height: 18px; color: var(--green-ink); opacity: .5; transition: transform .4s var(--ease), opacity .3s, color .3s; } .rs-bene-btn:hover .rs-bene-go { transform: translate(3px, -3px); opacity: 1; } .rs-bene-btn[aria-pressed="true"] .rs-bene-go { color: var(--green); opacity: 1; }
.rs-hint { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .88rem; font-weight: 600; color: var(--mute-l); } .rs-hint .ic { width: 16px; height: 16px; color: var(--green-ink); }
.rs-story-demo { min-width: 0; }
.rs-demo-title { font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -.035em; line-height: 1.15; font-weight: 800; max-width: 22em; margin-bottom: 18px; }
.rs-story .cmp-tabs { justify-content: flex-start; margin: 0 0 16px; }
.rs-story .cmp-tab { color: var(--text-l); border-color: rgba(8, 8, 8, .25); } .rs-story .cmp-tab:hover { border-color: var(--black); }
.rs-story .cmp-tab[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }
.rs-story .cmp { max-width: none; margin: 0; box-shadow: 0 50px 80px -44px rgba(8, 8, 8, .55); }
.cmp-note { margin-top: 16px; font-size: .88rem; color: var(--mute-l); }
/* benefit spotlight on the improved resume */
.cmp[data-focus] .rd-polished [data-k] { opacity: .3; transition: opacity .5s, box-shadow .5s, background-color .5s; }
.cmp[data-focus="summary"] .rd-polished [data-k="summary"], .cmp[data-focus="bullets"] .rd-polished [data-k="bullets"], .cmp[data-focus="skills"] .rd-polished [data-k="skills"], .cmp[data-focus="format"] .rd-polished [data-k="format"] { opacity: 1; box-shadow: 0 0 0 4px rgba(126, 217, 87, .5); border-radius: 6px; background-color: rgba(126, 217, 87, .12); }
.cmp[data-focus="format"] .rd-polished .rd-top2[data-k="format"] { border-radius: 4px; }
/* ============ 3. BEFORE / AFTER ============ */
.cmp-tabs { display: flex; justify-content: center; gap: 8px; margin: 4px 0 22px; }
.cmp-tab { padding: 11px 26px; border-radius: 999px; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, .25); transition: background .3s, color .3s, border-color .3s; }
.cmp-tab:hover { border-color: var(--green); }
.cmp-tab[aria-pressed="true"] { background: var(--green); color: var(--black); border-color: var(--green); }
.cmp { position: relative; max-width: 940px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, #1b231f, #0d100e); border: 1px solid var(--line-d); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .9);
  --pos: 50%; touch-action: pan-y; container-type: inline-size; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.cmp-grid { display: grid; }
.cmp-pane { grid-area: 1 / 1; min-width: 0; }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.rdoc-text { position: relative; margin: clamp(14px, 3vw, 34px); padding: 3.2em clamp(16px, 3.4cqw, 34px) clamp(16px, 3cqw, 30px); border-radius: 14px; font-size: clamp(11px, 1.7cqw, 15.5px); line-height: 1.5; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); height: calc(100% - clamp(28px, 6vw, 68px)); }
.rdoc-text h5 { margin: 1.1em 0 .25em; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); font-weight: 800; }
.rdoc-text p { margin: 0 0 .3em; color: #2a342e; } .rdoc-text ul { margin: .2em 0 .4em; padding-left: 1.2em; list-style: disc; color: #2a342e; } .rdoc-text li { margin: .15em 0; }
.cmp-chip { position: absolute; top: 14px; left: 16px; z-index: 2; font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .45em 1em; border-radius: 999px; background: #eceeed; color: #55605a; }
.cmp-chip-g { left: auto; right: 16px; background: var(--green); color: var(--black); }
/* messy "before" */
.rd-before-ish { }
.cmp-before .rdoc-text { background: #fdfdfb; }
.rd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rd-top span { font-size: .78em; color: #7a847e; font-style: italic; }
.rd-messy { font-family: Georgia, 'Times New Roman', serif !important; text-transform: none !important; letter-spacing: 0 !important; color: #6b746f !important; font-weight: 700; font-size: 1em !important; }
.cmp-before u { text-decoration-thickness: 1px; }
.cmp-before ul { color: #4b544f; }
/* polished "after" */
.rd-top2 { display: grid; gap: 1px; padding-bottom: .7em; border-bottom: 2px solid var(--green); margin-bottom: .2em; }
.rd-top2 b { font-size: 1.6em; letter-spacing: -.02em; line-height: 1.1; } .rd-top2 span { font-weight: 700; color: var(--green-ink); } .rd-top2 small { color: #66726b; font-size: .85em; }
.rd-role { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rd-role span { color: #66726b; font-size: .85em; }
.rd-skills { display: flex; flex-wrap: wrap; gap: .4em; } .rd-skills span { padding: .2em .8em; border-radius: 999px; background: #e8f7df; font-weight: 600; font-size: .9em; }
.rd-polished .hl { background: linear-gradient(transparent 60%, rgba(126, 217, 87, .5) 60%) no-repeat; background-size: 0% 100%; transition: background-size 1.1s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cmp.on .hl { background-size: 100% 100%; }
.cmp.on .rd-polished .hl2 { transition-delay: .35s; } .cmp.on .rd-polished .rd-skills span { box-shadow: 0 0 0 1.5px rgba(126, 217, 87, .7); } .rd-polished .rd-skills span { transition: box-shadow .8s .6s; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 52px; margin-left: -26px; z-index: 6; display: grid; place-items: center; cursor: ew-resize; outline: none; touch-action: none; }
.cmp-bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--green); box-shadow: 0 0 18px rgba(126, 217, 87, .85); }
.cmp-knob { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); transition: transform .3s var(--ease); }
.cmp-knob .ic { width: 22px; height: 22px; }
.cmp-handle:hover .cmp-knob, .cmp.dragging .cmp-knob { transform: scale(1.12); }
.cmp-handle:focus-visible .cmp-knob { outline: 3px solid #fff; outline-offset: 4px; }
.cmp.gliding .cmp-after, .cmp.gliding .cmp-handle { transition: clip-path .7s var(--ease), left .7s var(--ease); }
.cmp-legend { max-width: 940px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.cmp-legend li { display: flex; gap: 14px; align-items: flex-start; color: var(--mute-d); font-size: .95rem; }
.cmp-legend i { flex: none; width: 10px; height: 10px; margin-top: .5em; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.cmp-legend strong { display: block; color: #fff; font-size: 1rem; }

/* ============ 4. INCLUDED (bento) ============ */
.rs-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.rs-inc { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 300px; padding: clamp(22px, 2.6vw, 32px); border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line-l); transition: transform .6s var(--ease), box-shadow .6s, border-color .4s; }
.rs-inc:hover { transform: translateY(-7px); box-shadow: 0 40px 64px -38px rgba(8, 8, 8, .4); border-color: rgba(47, 125, 23, .4); }
.rs-inc h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.03em; line-height: 1.15; font-weight: 800; position: relative; z-index: 3; }
.rs-inc > p { color: var(--mute-l); max-width: 38ch; position: relative; z-index: 3; }
.rs-inc-n { display: inline-block; font-weight: 800; font-size: .82rem; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(47, 125, 23, .35); color: var(--green-ink); }
.rs-inc-top { position: relative; z-index: 3; }
.rs-vis { flex: 1 1 auto; min-height: 96px; display: flex; align-items: center; position: relative; z-index: 2; margin-block: 6px; }
.rs-inc-structure { grid-column: span 7; background: radial-gradient(120% 100% at 100% 0%, #1c2c21, var(--black) 65%); border-color: var(--line-d); }
.rs-inc-summary { grid-column: span 5; }
.rs-inc-experience { grid-column: span 5; background: var(--green); border-color: var(--green); }
.rs-inc-skills { grid-column: span 7; background: var(--soft); }
.rs-inc-format { grid-column: span 6; background: linear-gradient(165deg, #1a201d, #0d100e 80%); border-color: var(--line-d); }
.rs-inc-review { grid-column: span 6; }
.rs-inc-structure h3, .rs-inc-format h3 { color: #fff; } .rs-inc-structure > p, .rs-inc-format > p { color: var(--mute-d); }
.rs-inc-structure .rs-inc-n, .rs-inc-format .rs-inc-n { color: var(--green); border-color: rgba(126, 217, 87, .45); }
.rs-inc-experience h3, .rs-inc-experience > p { color: var(--black); } .rs-inc-experience > p { opacity: .8; } .rs-inc-experience .rs-inc-n { color: var(--black); border-color: rgba(8, 8, 8, .35); }
.rs-inc-structure:hover, .rs-inc-format:hover { border-color: rgba(126, 217, 87, .4); }
/* 01 structuring: blocks snap into a grid */
.v-structure { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 30px 30px; gap: 8px; width: min(100%, 320px); }
.v-structure i { border-radius: 8px; background: rgba(126, 217, 87, .22); border: 1px solid rgba(126, 217, 87, .5); animation: snapIn 5s var(--ease) infinite; }
.v-structure i:nth-child(1) { grid-column: 1 / 3; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.v-structure i:nth-child(2) { animation-delay: -1s; } .v-structure i:nth-child(3) { animation-delay: -2s; } .v-structure i:nth-child(4) { animation-delay: -3s; }
@keyframes snapIn { 0%, 12% { transform: translate(var(--dx, 14px), var(--dy, -10px)) rotate(var(--r, 4deg)); opacity: .5; } 40%, 85% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx, 14px), var(--dy, -10px)) rotate(var(--r, 4deg)); opacity: .5; } }
.v-structure i:nth-child(2) { --dx: -16px; --dy: 12px; --r: -5deg; } .v-structure i:nth-child(3) { --dx: 12px; --dy: 14px; --r: 6deg; }
/* 02 summary: lines being written */
.v-summary { width: min(100%, 300px); } .v-summary i { display: block; height: 9px; border-radius: 5px; margin: 9px 0; background: linear-gradient(90deg, var(--green), #d2f7bf); transform-origin: left; animation: write 5s ease-in-out infinite; }
.v-summary i:nth-child(2) { animation-delay: .5s; opacity: .8; } .v-summary i:nth-child(3) { animation-delay: 1s; opacity: .6; }
@keyframes write { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* 03 experience: bullets with highlighted lines */
.v-exp { display: grid; gap: 12px; width: min(100%, 300px); } .v-exp li { display: flex; align-items: center; gap: 12px; } .v-exp b { width: 10px; height: 10px; border-radius: 50%; background: var(--black); flex: none; }
.v-exp i { height: 9px; border-radius: 5px; background: rgba(8, 8, 8, .85); animation: rsHl 4s ease-in-out infinite; transform-origin: left; } .v-exp li:nth-child(2) i { animation-delay: -1.3s; } .v-exp li:nth-child(3) i { animation-delay: -2.6s; }
/* 04 skills: floating keyword chips */
.v-skills { display: flex; flex-wrap: wrap; gap: 10px; } .v-skills span { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(8, 8, 8, .14); font-weight: 600; font-size: .88rem; animation: rsFloatTag 5s ease-in-out infinite; }
.v-skills span:nth-child(2n) { animation-delay: -1.7s; background: var(--green-soft); border-color: rgba(47, 125, 23, .35); } .v-skills span:nth-child(3n) { animation-delay: -3.1s; }
@keyframes rsFloatTag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 05 formatting: alignment guides */
.v-format { position: relative; display: grid; gap: 14px; width: min(100%, 300px); padding: 12px 0 12px 14px; }
.v-format i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .85); } .v-format i:nth-child(1) { width: 90%; } .v-format i:nth-child(2) { width: 72%; } .v-format i:nth-child(3) { width: 82%; }
.v-format u { position: absolute; background: var(--green); opacity: .8; animation: guide 4s ease-in-out infinite; } .v-format u:nth-of-type(1) { left: 0; top: 0; bottom: 0; width: 1px; } .v-format u:nth-of-type(2) { left: 0; right: 0; top: 50%; height: 1px; animation-delay: -2s; }
@keyframes guide { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
/* 06 review: checklist */
.v-review { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; width: min(100%, 320px); } .v-review li { position: relative; padding-left: 30px; font-weight: 700; color: var(--text-l); opacity: .35; animation: tickIn 6s ease-in-out infinite; }
.v-review li::before { content: ''; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--green); } .v-review li::after { content: ''; position: absolute; left: 7px; top: .42em; width: 6px; height: 10px; border: solid var(--black); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.v-review li:nth-child(2) { animation-delay: .6s; } .v-review li:nth-child(3) { animation-delay: 1.2s; } .v-review li:nth-child(4) { animation-delay: 1.8s; }
@keyframes tickIn { 0% { opacity: .25; } 25%, 80% { opacity: 1; } 100% { opacity: .25; } }

/* ============ 5. WHO IT'S FOR (premium stage) ============ */
.who2 { position: relative; display: grid; grid-template-columns: minmax(250px, .6fr) minmax(0, 1.4fr); gap: clamp(22px, 4vw, 60px); padding: clamp(24px, 4vw, 56px); border-radius: 36px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 100% at 100% 0%, #1b2a1f, var(--black) 62%); border: 1px solid var(--line-d); box-shadow: 0 60px 100px -50px rgba(8, 8, 8, .75); }
.who2-glow { position: absolute; width: 520px; height: 520px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(126, 217, 87, .26), transparent 65%); filter: blur(10px); z-index: -1; pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
.who2-nav { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 36px; align-self: center; --prog: 0; }
.who2-rail { position: absolute; left: 12px; top: 28px; bottom: 28px; width: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; }
.who2-rail i { position: absolute; inset: 0; background: linear-gradient(var(--green), #bdf3a3); transform-origin: top; transform: scaleY(var(--prog)); transition: transform .9s var(--ease); box-shadow: 0 0 14px rgba(126, 217, 87, .7); border-radius: 2px; }
.who2-tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 15px 14px 15px 4px; text-align: left; color: rgba(255, 255, 255, .48); border-radius: 16px; transition: color .35s, background .35s, transform .5s var(--ease); }
.who2-tab:hover { color: #fff; transform: translateX(4px); }
.who2-tab.is-on { color: #fff; }
.who2-dot { position: absolute; left: -35px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--black); border: 2px solid rgba(255, 255, 255, .3); transition: background .4s, border-color .4s, box-shadow .5s, transform .5s var(--ease); }
.who2-tab.past .who2-dot { border-color: var(--green); background: rgba(126, 217, 87, .28); }
.who2-tab.is-on .who2-dot { background: var(--green); border-color: var(--green); transform: scale(1.12); box-shadow: 0 0 0 8px rgba(126, 217, 87, .16), 0 0 26px rgba(126, 217, 87, .75); }
.who2-idx { font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--green); opacity: .8; }
.who2-name { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.who2-bar { grid-column: 1 / -1; display: block; height: 2px; margin-top: 8px; border-radius: 2px; overflow: hidden; background: transparent; }
.who2-bar b { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.who2.playing .who2-tab.is-on .who2-bar { background: rgba(255, 255, 255, .12); } .who2.playing .who2-tab.is-on .who2-bar b { animation: whybar var(--w2ms, 6500ms) linear forwards; }
.who2.paused .who2-tab.is-on .who2-bar { background: rgba(255, 255, 255, .12); } .who2.paused .who2-tab.is-on .who2-bar b { animation: none; transform: scaleX(1); }
.who2-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(22px, 3vw, 44px); align-items: center; min-width: 0; }
.who2-copy { position: relative; min-height: 320px; display: grid; align-items: center; }
.who2-panel { display: none; } .who2-panel.is-on { display: block; }
.who2-panel.is-on > * { animation: w2In .9s var(--ease) both; } .who2-panel.is-on > :nth-child(2) { animation-delay: .06s; } .who2-panel.is-on > :nth-child(3) { animation-delay: .12s; } .who2-panel.is-on > :nth-child(4) { animation-delay: .2s; } .who2-panel.is-on > :nth-child(5) { animation-delay: .28s; }
@keyframes w2InR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes w2InL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes w2In { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.who2-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--green); } .who2-kicker span { color: var(--mute-d); }
.who2-panel h3 { margin: 12px 0 14px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.04em; line-height: 1.05; font-weight: 800; color: #fff; }
.who2-desc { color: var(--mute-d); font-size: 1.1rem; max-width: 34ch; }
.who2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; padding: 0; list-style: none; }
.who2-chips li { padding: 8px 15px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: #fff; background: rgba(126, 217, 87, .1); border: 1px solid rgba(126, 217, 87, .4); }
.who2-m, .who2-swipe { display: none; }
.who2-card { position: relative; perspective: 1200px; min-width: 0; }
.wcard { padding: clamp(16px, 2.2vw, 24px); border-radius: 18px; font-size: clamp(9px, .95vw, 11px); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .6); transform: rotateY(-9deg) rotateX(4deg); transition: transform .9s var(--ease); animation: w2Float 7s ease-in-out infinite; }
.who2-card:hover .wcard { transform: rotateY(-2deg) rotateX(1deg); }
@keyframes w2Float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.wcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 6px; }
.wb { padding: 9px; margin: -9px -9px 14px; border-radius: 10px; opacity: .36; transition: opacity .6s, box-shadow .6s, background-color .6s, transform .6s var(--ease); }
.wb.is-hot { opacity: 1; background: rgba(126, 217, 87, .12); box-shadow: 0 0 0 1.5px rgba(126, 217, 87, .7), 0 16px 28px -16px rgba(126, 217, 87, .8); transform: translateY(-2px); }
.wb.is-hot .bar { background: linear-gradient(90deg, #7ED957, #b9f19f); } .wb.is-hot .bar.strong { background: #101412; }
.who2-tagfloat { position: absolute; top: -14px; right: -4px; padding: 8px 16px; border-radius: 999px; background: var(--green); color: var(--black); font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 30px -12px rgba(126, 217, 87, .8); animation: rsFloatTag 5s ease-in-out infinite; }
/* ============ 6. PROCESS ============ */
.rs-steps { position: relative; display: grid; gap: clamp(40px, 6vw, 84px); max-width: 1020px; margin-inline: auto; }
.rs-steps-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line-d); border-radius: 2px; }
.rs-steps-line i { position: absolute; inset: 0; background: linear-gradient(var(--green), #bdf3a3); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 16px rgba(126, 217, 87, .7); border-radius: 2px; }
.rs-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(70px, 10vw, 150px); align-items: center; }
.rs-node { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--black); border: 2px solid rgba(255, 255, 255, .3); z-index: 2; transition: background .4s, border-color .4s, box-shadow .5s, transform .5s var(--ease); }
.rs-step.is-on .rs-node { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 9px rgba(126, 217, 87, .18), 0 0 30px rgba(126, 217, 87, .7); transform: scale(1.12); }
.rs-step-body { opacity: .38; transition: opacity .6s, transform .8s var(--ease); transform: translateY(10px); }
.rs-step.is-on .rs-step-body { opacity: 1; transform: none; }
.rs-step.is-on .rs-step-body h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; color: #fff; }
.rs-step-body p { color: var(--mute-d); font-size: 1.05rem; max-width: 40ch; }
.rs-step:nth-of-type(even) .rs-step-body { order: 1; text-align: right; } .rs-step:nth-of-type(even) .rs-step-body p { margin-left: auto; }
.rs-step:nth-of-type(even) .rs-mini { order: 2; justify-self: start; } .rs-step:nth-of-type(odd) .rs-step-body { order: 2; } .rs-step:nth-of-type(odd) .rs-mini { order: 1; justify-self: end; }
.rs-mini { width: 112px; height: 146px; padding: 16px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); display: grid; align-content: start; gap: 11px; animation: rsFloatTag 6s ease-in-out infinite; }
.rs-step:nth-of-type(odd) .rs-mini { animation-delay: -2s; }
.rs-mini i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); transition: background .6s; } .rs-mini i:nth-child(2n) { width: 80%; } .rs-mini i:nth-child(3n) { width: 60%; }
.rs-step.is-on .rs-mini i { background: rgba(255, 255, 255, .34); }
.rs-mini[style*="--fill: 1"] i:nth-child(-n+1), .rs-mini[style*="--fill: 2"] i:nth-child(-n+2), .rs-mini[style*="--fill: 3"] i:nth-child(-n+3), .rs-mini[style*="--fill: 4"] i:nth-child(-n+4), .rs-mini[style*="--fill: 5"] i:nth-child(-n+5) { background: linear-gradient(90deg, var(--green), #c8f6b4); box-shadow: 0 0 10px rgba(126, 217, 87, .45); }

/* ============ 7. SHOWCASE ============ */
.rs-showcase { background: radial-gradient(120% 100% at 50% 0%, #0f1612, var(--black) 65%); }
.rs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.rs-design { margin: 0; }
.rs-paper { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border-radius: 14px; overflow: hidden; background: #fff; container-type: inline-size; cursor: zoom-in; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .7s var(--ease), box-shadow .7s; text-align: left; }
.rs-paper:hover, .rs-paper:focus-visible { transform: translateY(-10px) scale(1.035); box-shadow: 0 60px 90px -34px rgba(126, 217, 87, .38), 0 0 0 1px rgba(126, 217, 87, .5); }
.rs-paper .rdoc, .rs-paper-lg .rdoc { position: absolute; inset: 0; font-size: 3.1cqw; }
.rs-zoom { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease); z-index: 3; }
.rs-paper:hover .rs-zoom, .rs-paper:focus-visible .rs-zoom { opacity: 1; transform: none; }
.rs-design figcaption { margin-top: 18px; display: grid; gap: 4px; } .rs-design figcaption strong { color: #fff; font-size: 1.1rem; } .rs-design figcaption span { color: var(--mute-d); font-size: .95rem; }
.rdoc em { display: block; font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); margin: 1.1em 0 .2em; }
.rdoc b { display: block; font-size: 1.5em; letter-spacing: -.02em; line-height: 1.1; } .rdoc small { display: block; color: #66726b; font-size: .9em; }
.rd-modern { display: grid; grid-template-columns: 34% 1fr; } .rd-modern aside { background: #151A18; padding: 8% 7%; display: grid; align-content: start; } .rd-modern aside .bar { background: rgba(255, 255, 255, .22); } .rd-modern aside em { color: var(--green); } .rd-modern aside .rd-av { margin-bottom: 8%; width: 34%; aspect-ratio: 1; height: auto; } .rd-modern main { padding: 8% 7%; }
.rd-minimal { padding: 9% 10%; } .rd-minimal header { text-align: center; padding-bottom: 5%; margin-bottom: 4%; border-bottom: 1px solid #d7ded9; } .rd-minimal header b { font-family: Georgia, 'Times New Roman', serif; font-size: 1.9em; font-weight: 700; } .rd-minimal header span { display: block; width: 18%; height: 2px; background: var(--green); margin: 4% auto 0; } .rd-minimal em { color: #101412; letter-spacing: .24em; text-align: center; }
.rd-clean header { padding: 8% 8% 6%; background: linear-gradient(120deg, #151A18, #1f2e24); border-bottom: 4px solid var(--green); } .rd-clean header b { color: #fff; font-size: 1.8em; } .rd-clean header small { color: var(--green); font-weight: 700; } .rd-clean .rd-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6%; padding: 6% 8%; }
.rs-dialog { width: min(560px, 92vw); max-height: 94svh; padding: 0; border: 0; border-radius: 26px; background: #0d100e; color: #fff; box-shadow: 0 60px 120px rgba(0, 0, 0, .8), 0 0 0 1px rgba(126, 217, 87, .3); overflow: hidden; }
.rs-dialog::backdrop { background: rgba(8, 8, 8, .78); backdrop-filter: blur(6px); }
.rs-dialog[open] { animation: dlgIn .5s var(--ease) both; } @keyframes dlgIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.rs-dialog-inner { position: relative; padding: 26px 26px 22px; display: grid; gap: 14px; max-height: 94svh; overflow: auto; }
.rs-dialog-x { position: absolute; right: 14px; top: 14px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); transition: transform .3s var(--ease); } .rs-dialog-x:hover { transform: rotate(90deg); }
.rs-dialog-cap { font-weight: 800; font-size: 1.15rem; padding-right: 54px; }
.rs-dialog-body .rs-paper-lg { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #fff; container-type: inline-size; }
.rs-dialog-note { color: var(--mute-d); font-size: .85rem; }

/* ============ 11. CONTACT PANEL ("Start the Conversation") ============ */
.rs-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.rs-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.rs-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .rs-contact-copy .display { margin: 0; } .rs-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.rs-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rs-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; }
.rs-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.rs-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .rs-cw-ic svg { width: 20px; height: 20px; }
.rs-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .rs-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }
@media (max-width: 900px) { .rs-contact-panel { grid-template-columns: 1fr; border-radius: 22px; } .rs-contact-copy .btn { width: 100%; justify-content: center; } }
@media (max-width: 720px) { .rs-contact-ways strong { overflow-wrap: break-word; word-break: normal; font-size: .93rem; } .rs-contact-ways a { padding: 14px 16px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .rs-contact-ways a { transition: none; } }
.rs-related .rs-rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rs-rel-grid a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line-l); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.rs-rel-grid a:hover { transform: translateY(-6px); border-color: rgba(47, 125, 23, .4); box-shadow: 0 30px 50px -32px rgba(8, 8, 8, .4); }
.rs-rel-grid strong { font-size: 1.12rem; letter-spacing: -.02em; position: relative; z-index: 3; } .rs-rel-grid span { color: var(--mute-l); font-size: .94rem; position: relative; z-index: 3; } .rs-rel-grid .ic { margin-top: auto; color: var(--green-ink); transition: transform .4s var(--ease); position: relative; z-index: 3; } .rs-rel-grid a:hover .ic { transform: translate(4px, -4px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .who2 { grid-template-columns: minmax(0, 1fr); }
  .who2-nav { flex-direction: row; overflow-x: auto; padding: 0 0 6px; gap: 8px; scrollbar-width: none; align-self: stretch; } .who2-nav::-webkit-scrollbar { display: none; }
  .who2-rail, .who2-dot { display: none; }
  .who2-tab { flex: 0 0 auto; grid-template-columns: auto; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); white-space: nowrap; }
  .who2-tab:hover { transform: none; } .who2-tab.is-on { background: var(--green); color: var(--black); border-color: var(--green); }
  .who2-tab.is-on .who2-idx { color: var(--black); } .who2-idx { display: none; } .who2-bar { display: none; }
  .who2-stage { grid-template-columns: minmax(0, 1fr); } .who2-copy { min-height: 0; } .who2-card { max-width: 420px; }
  .rs-hero-grid, .rs-story-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-hero { min-height: 0; }
  .rs-stage { width: min(100%, 420px); margin-top: 14px; }
  .rs-story-copy { position: static; }
  .rs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-bento > .rs-inc { grid-column: auto !important; }
  .rs-inc-structure, .rs-inc-skills { grid-column: 1 / -1 !important; }
  .rs-related .rs-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rs-steps-line { left: 11px; margin: 0; } .rs-step { grid-template-columns: minmax(0, 1fr); padding-left: 48px; } .rs-node { left: 11px; top: 14px; margin: -12px 0 0 -11px; }
  .rs-step:nth-of-type(even) .rs-step-body, .rs-step:nth-of-type(odd) .rs-step-body { order: 0; text-align: left; } .rs-step:nth-of-type(even) .rs-step-body p { margin-left: 0; } .rs-mini { display: none; }
}
@media (max-width: 720px) {
  /* Who It's For on phones: swipeable stage card with stepper (arrows, label, dots) instead of a scrolling pill strip */
  .who2 { padding: 20px 18px 22px; border-radius: 28px; gap: 16px; }
  .who2-nav { display: none; }
  .who2-m { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .who2-m-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .05); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
  .who2-m-btn:active { background: var(--green); color: var(--black); border-color: var(--green); transform: scale(.94); }
  .who2-m-mid { display: grid; gap: 12px; justify-items: center; text-align: center; min-width: 0; }
  .who2-m-label { font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green); } .who2-m-label b { color: #fff; font-weight: 800; }
  .who2-m-dots { display: flex; align-items: center; gap: 8px; }
  .who2-m-dot { position: relative; width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .3); transition: width .45s var(--ease), background .3s; }
  .who2-m-dot::before { content: ''; position: absolute; inset: -16px -5px; }
  .who2-m-dot.is-on { width: 28px; background: var(--green); box-shadow: 0 0 14px rgba(126, 217, 87, .7); }
  .who2-stage { gap: 20px; touch-action: pan-y; }
  .who2-kicker { display: none; }
  .who2-panel h3 { margin: 0 0 10px; font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .who2-desc { font-size: 1rem; max-width: none; }
  .who2-chips { margin: 16px 0 18px; gap: 7px; } .who2-chips li { padding: 7px 13px; font-size: .8rem; }
  .who2-card { max-width: none; } .wcard { transform: none; animation: none; font-size: 9px; }
  .who2-tagfloat { top: -12px; right: 10px; }
  .who2-swipe { display: block; text-align: center; margin: -2px 0 0; font-size: .78rem; color: var(--mute-d); letter-spacing: .02em; }
  .who2[data-dir="next"] .who2-panel.is-on > * { animation-name: w2InR; } .who2[data-dir="prev"] .who2-panel.is-on > * { animation-name: w2InL; }
  /* Why It Matters on phones: intro, then the slider, then a compact 2x2 benefit grid right under it */
  .rs-story-grid { display: flex; flex-direction: column; gap: 0; }
  .rs-story-copy { display: contents; }
  .rs-story-copy > .eyebrow { order: 1; } .rs-story-copy > h2 { order: 2; } .rs-story-copy > .rs-sub { order: 3; margin-bottom: 26px; font-size: 1rem; }
  .rs-story-demo { order: 4; }
  .rs-story-copy > .rs-hint { order: 5; margin-top: 22px; margin-bottom: 12px; font-size: .86rem; }
  .rs-story-copy > .rs-bene { order: 6; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rs-bene-btn { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-height: 84px; padding: 14px 14px 12px; align-items: center; border-radius: 18px; }
  .rs-bene-btn:hover, .rs-bene-btn[aria-pressed="true"] { transform: none; }
  .rs-bene-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(126, 217, 87, .45), 0 22px 36px -22px rgba(8, 8, 8, .6); }
  .rs-bene-txt strong { font-size: .9rem; line-height: 1.25; } .rs-bene-txt em, .rs-bene-go { display: none; }
    .rs-demo-title { font-size: 1.3rem; margin-bottom: 14px; }
  .rs-story .cmp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .rs-story .cmp-tab { padding: 13px 10px; text-align: center; }
  .cmp-note { min-height: 2.9em; margin-top: 14px; font-size: .86rem; }
  /* What's Included: swipeable horizontal row (smooth drag + momentum + arrows from main.js) */
  .rs-bento { display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; cursor: grab; align-items: stretch;
    margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 6px clamp(20px, 4vw, 48px) 22px; scroll-padding-inline: clamp(20px, 4vw, 48px); }
  .rs-bento::-webkit-scrollbar { display: none; }
  .rs-bento > .rs-inc { flex: 0 0 min(82%, 340px) !important; grid-column: auto !important; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .rs-bento.dragging { cursor: grabbing; user-select: none; }
  .rs-bento.dragging, .rs-bento.gliding { scroll-snap-type: none !important; }
  .rs-scene { transform: none; } .rs-l1, .rs-t3, .rs-t5 { display: none; } .rs-tag { transform: none; animation-name: rsTagFlat; } .rs-layer { animation: none; } .rs-main { animation: none; transform: none; } .rs-l2 { transform: rotate(-3deg); }
  .rs-t1 { left: 4%; top: -9%; } .rs-t2 { right: -3%; top: 26%; } .rs-t4 { right: -2%; }
  .rs-title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .rs-cta-row .btn { flex: 1 1 100%; }

  .rs-gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 6px clamp(20px, 4vw, 48px) 18px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: clamp(20px, 4vw, 48px); }
  .rs-gallery::-webkit-scrollbar { display: none; } .rs-design { flex: 0 0 min(78%, 300px); scroll-snap-align: start; scroll-snap-stop: always; }
  .rs-gallery.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } .rs-gallery.dragging button { pointer-events: none; }
  .rs-related .rs-rel-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-bene-btn:hover, .rs-bene-btn[aria-pressed="true"] { transform: none; }
  .cmp-handle { width: 60px; margin-left: -30px; } .cmp-knob { width: 52px; height: 52px; }
}
@keyframes rsTagFlat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .rs-scene { transform: none !important; } .rs-layer, .rs-main, .rs-tag { animation: none !important; }
  .cmp .hl { background-size: 100% 100%; } .rs-step-body { opacity: 1 !important; transform: none !important; } .rs-bene-btn:hover { transform: none; }
  .who2-panel.is-on > *, .wcard, .who2-tagfloat, .who2-glow { animation: none !important; } .wcard { transform: none; }
}