/* ============================================================================
   PHASE-2A SECTION SYSTEM (s2-) — the approved v5 design language.
   Numbered editorial sections · type-led aisle index · ledger pulse · one quiet
   motion (pull-quote). All classes prefixed s2- to never collide with mainx.
   Spec: docs/phase2-prototype-v5.html · doc: docs/phase2-experience-design.md
   ========================================================================== */

.s2-sec { position: relative; padding: 64px 0 72px; font-family: var(--atms-font-sans, 'DM Sans', Arial, sans-serif); color: var(--atms-ink, #2E1033); overflow-x: clip; }
.s2-sec, .s2-sec * { box-sizing: border-box; min-width: 0; }
.s2-sec img { max-width: 100%; }
.s2-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; overflow-wrap: break-word; }
.s2-rel { position: relative; }
.s2-rel > *:not(.s2-ghost) { position: relative; z-index: 1; }

.s2-idx { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.s2-no { font-size: 12px; font-weight: 800; color: var(--atms-flame, #C5462B); letter-spacing: .08em; }
.s2-lab { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--atms-text-muted, #7A6F7E); }
.s2-tag { margin-left: auto; font-size: 10px; letter-spacing: .08em; color: var(--atms-orchid, #B89BBE); font-weight: 500; }

.s2-hl { font-weight: 900; letter-spacing: -.022em; line-height: 1.04; margin: 0; }
.s2-hlg { font-size: clamp(27px, 4.6vw, 44px); }
.s2-sub { color: var(--atms-text-muted, #7A6F7E); max-width: 52ch; margin: 14px 0 0; font-size: 15.5px; }
.s2-cta { display: inline-block; background: var(--atms-orange, #FA4616); color: #fff !important; font-weight: 800; font-size: 14px; padding: 13px 26px; border-radius: 3px; text-decoration: none; letter-spacing: .01em; }
.s2-ghost { position: absolute; z-index: 0; font-weight: 900; letter-spacing: -.03em; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--atms-lavender, #E6D2EA); pointer-events: none; user-select: none; font-size: clamp(110px, 18vw, 210px); }

.s2-blush { background: var(--atms-blush, #FAF6F8); }
.s2-ink { background: var(--atms-ink, #2E1033); color: #fff; }
.s2-ink .s2-hl { color: #fff; }
.s2-ink .s2-lab { color: var(--atms-purple-text-muted, #CDBADB); }

/* aisles */
.s2-aisles { margin-top: 34px; }
.s2-aisle { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--atms-ink, #2E1033); border-bottom: 1px solid var(--atms-border, #E9E1EC); padding: 20px 0; transition: padding-left .22s cubic-bezier(.2,.7,.3,1); }
.s2-aisle:first-of-type { border-top: 1px solid var(--atms-border, #E9E1EC); }
.s2-aisle:hover { padding-left: 10px; }
.s2-aisle:hover .s2-aname { color: var(--atms-purple, #6A2C99); }
.s2-ano { font-size: 11px; font-weight: 800; color: var(--atms-orchid, #B89BBE); width: 26px; letter-spacing: .06em; }
.s2-aname { font-size: clamp(22px, 4vw, 34px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.s2-anote { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--atms-text-muted, #7A6F7E); max-width: 40%; }
.s2-asw { width: 44px; height: 44px; border-radius: 3px; flex-shrink: 0; }
.s2-abadge { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #fff; background: var(--atms-purple, #6A2C99); border-radius: 2px; padding: 3px 7px; margin-left: 10px; vertical-align: middle; }

/* plinth */
.s2-pgrid { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: center; margin-top: 26px; }
@media (min-width: 820px) { .s2-pgrid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.s2-pstage { background: linear-gradient(160deg, #fff, var(--atms-lilac-mist, #F3E8F4)); border: 1px solid var(--atms-border, #E9E1EC); border-radius: 4px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.s2-pstage img { max-width: 78%; max-height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.s2-pstage small { position: absolute; bottom: 14px; left: 16px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--atms-orchid, #B89BBE); font-weight: 800; }
.s2-pstats { display: flex; margin-top: 26px; border-top: 1px solid var(--atms-border, #E9E1EC); }
.s2-pstat { flex: 1; padding: 14px 16px 0 0; font-size: 12px; color: var(--atms-text-muted, #7A6F7E); }
.s2-pstat b { display: block; font-size: 19px; color: var(--atms-ink, #2E1033); font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.s2-pquote { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--atms-purple, #6A2C99); font-size: 15.5px; }
.s2-pquote b { display: block; font-size: 11px; color: var(--atms-text-muted, #7A6F7E); margin-top: 6px; font-weight: 500; letter-spacing: .04em; }

/* reel */
.s2-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--atms-border, #E9E1EC); margin: 26px 0; }
.s2-tab { font: inherit; font-size: 13.5px; font-weight: 700; padding: 0 2px 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--atms-text-muted, #7A6F7E); cursor: pointer; letter-spacing: .02em; }
.s2-tab.on { color: var(--atms-ink, #2E1033); border-bottom-color: var(--atms-orange, #FA4616); }
.s2-reel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.s2-reel::-webkit-scrollbar { display: none; }
.s2-pcard { flex: 0 0 172px; scroll-snap-align: start; text-decoration: none; color: var(--atms-ink, #2E1033); }
.s2-pimg { aspect-ratio: 1/1.08; border: 1px solid var(--atms-border, #E9E1EC); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, #fff, var(--atms-lilac-mist, #F3E8F4)); overflow: hidden; }
.s2-pimg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.s2-pbody { display: block; padding: 11px 2px 0; }
.s2-pname { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; min-height: 35px; }
.s2-prow { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.s2-pprice { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.s2-was { color: var(--atms-text-muted, #7A6F7E); text-decoration: line-through; font-weight: 500; font-size: 12px; margin-left: 6px; }
.s2-rv { font-size: 11px; color: var(--atms-text-muted, #7A6F7E); letter-spacing: .03em; }

/* pulse ledger */
.s2-ledger { margin-top: 30px; border-top: 1px solid var(--atms-purple-divider, #5C3F73); font-variant-numeric: tabular-nums; }
.s2-lrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--atms-purple-divider, #5C3F73); font-size: 14px; }
.s2-lt { color: var(--atms-purple-text-muted, #CDBADB); font-size: 12px; letter-spacing: .06em; }
.s2-lp { font-weight: 700; }
.s2-lc { color: var(--atms-purple-text-muted, #CDBADB); font-size: 12.5px; letter-spacing: .04em; }
.s2-searchline { margin-top: 22px; font-size: 12.5px; color: var(--atms-purple-text-muted, #CDBADB); letter-spacing: .03em; }

/* offer + quiz slabs */
.s2-offer { background: radial-gradient(150% 220% at 15% -40%, #7d35b5 0%, #4a1668 48%, #30104a 100%); color: #fff; }
.s2-offer .s2-hl, .s2-quiz .s2-hl { color: #fff; }
.s2-offer .s2-sub, .s2-quiz .s2-sub { color: var(--atms-purple-text-muted, #CDBADB); }
.s2-offer .s2-lab, .s2-quiz .s2-lab { color: var(--atms-purple-text-muted, #CDBADB); }
.s2-ochip { display: inline-block; background: var(--atms-magenta, #DB0A5B); color: #fff; font-weight: 800; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; margin-bottom: 20px; }
.s2-ocode { font-variant-numeric: tabular-nums; border: 1px dashed var(--atms-purple-divider, #5C3F73); border-radius: 3px; padding: 3px 10px; color: #fff; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.s2-quiz { background: radial-gradient(140% 220% at 85% -30%, #6A2C99 0%, #3b1157 55%, #2E1033 100%); color: #fff; }
.s2-qchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.s2-qchip { font-size: 13.5px; font-weight: 700; padding: 11px 20px; border-radius: 3px; border: 1.5px solid var(--atms-purple-divider, #5C3F73); color: #fff; text-decoration: none; transition: border-color .2s; }
.s2-qchip:hover { border-color: var(--atms-orchid, #B89BBE); }

/* discretion */
.s2-fcard { border: 1px solid var(--atms-border, #E9E1EC); background: #fff; border-radius: 4px; padding: 34px 26px; text-align: center; max-width: 560px; margin: 30px auto 0; min-height: 196px; }
.s2-fvis { font-size: 44px; }
.s2-fline { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; background: var(--atms-blush, #FAF6F8); border: 1px solid var(--atms-border, #E9E1EC); border-radius: 3px; padding: 11px 14px; margin: 16px auto 0; max-width: 380px; }
.s2-fnote { font-size: 12.5px; color: var(--atms-text-muted, #7A6F7E); margin-top: 12px; }
.s2-ftabs { justify-content: center; border-bottom: 0; margin: 26px 0 0; }

/* spotlight */
.s2-ss { border-top: 1px solid var(--atms-border, #E9E1EC); }
.s2-ssgrid { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; margin-top: 26px; }
@media (min-width: 820px) { .s2-ssgrid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.s2-ssart { background: radial-gradient(130% 160% at 70% 0%, #9a44cf 0%, var(--atms-purple, #6A2C99) 45%, #2e0f44 100%); border-radius: 4px; aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 20px; }
.s2-ssm { color: #fff; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; opacity: .85; }
.s2-ssrow { display: flex; gap: 10px; margin-top: 22px; }
.s2-ssmini { flex: 1; border: 1px solid var(--atms-border, #E9E1EC); border-radius: 4px; text-align: center; padding: 12px 8px; text-decoration: none; color: var(--atms-ink, #2E1033); }
.s2-ssmini img { width: 54px; height: 54px; object-fit: cover; border-radius: 3px; mix-blend-mode: multiply; }
.s2-ssmini b { font-size: 11.5px; font-weight: 700; display: block; margin-top: 7px; line-height: 1.25; }

/* pull quote */
.s2-pqmark { font-size: 60px; line-height: .6; color: var(--atms-lavender, #E6D2EA); font-weight: 900; margin-top: 10px; }
.s2-pqtext { font-size: clamp(21px, 3.6vw, 31px); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; max-width: 24ch; margin: 10px auto 0; min-height: 3.7em; transition: opacity .6s ease; }
.s2-pqby { font-size: 12px; color: var(--atms-text-muted, #7A6F7E); letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; }
.s2-pqdots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.s2-pqdot { width: 5px; height: 5px; border-radius: 50%; background: var(--atms-lavender, #E6D2EA); transition: background .3s; }
.s2-pqdot.on { background: var(--atms-purple, #6A2C99); }
.s2-pqrating { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--atms-border, #E9E1EC); display: inline-block; font-size: 12px; letter-spacing: .1em; color: var(--atms-text-muted, #7A6F7E); text-transform: uppercase; }

/* duo */
.s2-duo { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 760px) { .s2-duo { grid-template-columns: 1fr 1fr; } }
.s2-ed { border: 1px solid var(--atms-border, #E9E1EC); border-radius: 4px; padding: 24px; text-decoration: none; color: var(--atms-ink, #2E1033); display: flex; flex-direction: column; gap: 44px; transition: border-color .2s; }
.s2-ed:hover { border-color: var(--atms-orchid, #B89BBE); }
.s2-ek { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--atms-flame, #C5462B); }
.s2-ed h4 { margin: 0; font-size: clamp(18px, 3vw, 23px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.s2-ego { font-size: 13px; font-weight: 700; color: var(--atms-purple, #6A2C99); margin-top: auto; }

/* closing */
.s2-close { text-align: center; background: var(--atms-blush, #FAF6F8); border-top: 1px solid var(--atms-border, #E9E1EC); }
.s2-pay { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--atms-text-muted, #7A6F7E); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .s2-pqtext { transition: none; } .s2-aisle { transition: none; } }