/* CH 05 · 5-6-7-8 — light, clean, editorial. White ground, plum ink, the count as the hero device. */
.ch5{
  --bg:#FFFFFF; --bg-2:#FFF4F9; --ink:#210014; --muted:#6B5462; --line:rgba(33,0,20,.12);
  --pink:#F9AADB; --pink-l:#FFD0EB; --mint:#96F2B0; --pink-ink:#B3266F;
  --logo-color:var(--ink);
  background:var(--bg);color:var(--ink);color-scheme:light;
}
.c5-wrap{max-width:1280px;margin-inline:auto;padding-inline:max(16px,4vw)}
.c5-label{font:400 italic 14px/1.3 var(--f-sub);letter-spacing:.2em;text-transform:uppercase;color:var(--pink-ink)}

/* top bar */
.c5-top{display:flex;align-items:center;gap:28px;padding-block:22px}
.c5-top .logo{width:150px;flex:none}
.c5-top nav{display:flex;gap:28px;margin-left:auto;font:600 15px/1 var(--f-body)}
.c5-top nav a{text-decoration:none;padding-block:6px;background:linear-gradient(var(--pink),var(--pink)) 0 100%/0 2px no-repeat;transition:background-size .25s}
.c5-top nav a:hover{background-size:100% 2px}

/* buttons: sharp, ink, decisive */
.c5-btn{display:inline-flex;align-items:center;gap:10px;padding:19px 28px;background:var(--ink);color:#fff;text-decoration:none;
  font:700 16px/1 var(--f-body);letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease}
.c5-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--pink)}
.c5-btn--sm{padding:12px 18px;font-size:14px}
.c5-link{font:700 16px/1 var(--f-body);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:7px}
.c5-link:hover{text-decoration-color:var(--ink)}

/* hero */
.c5-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(28px,4vw,56px) clamp(40px,5vw,72px)}
.c5-hero h1{margin:20px 0 22px;font:800 clamp(42px,4.8vw,72px)/.98 var(--f-body);letter-spacing:-.04em}
.c5-hero h1 mark{background:linear-gradient(transparent 62%,var(--pink) 62% 92%,transparent 92%);color:inherit}
.c5-lead{font-size:clamp(18px,1.35vw,20px);color:var(--muted);max-width:44ch}
.c5-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:34px}
.c5-meta{list-style:none;display:flex;flex-wrap:wrap;gap:16px 40px;margin:42px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.c5-meta li{font-size:15px;color:var(--muted)}
.c5-meta b{display:block;margin-bottom:6px;font:200 italic 48px/1 var(--f-display);color:var(--ink)}
.c5-hero__video{position:relative;margin:0 24px 24px 0;isolation:isolate}
.c5-hero__video::before{content:"";position:absolute;inset:24px -24px -24px 24px;z-index:-1;background:var(--pink-l)}
.c5-hero__video video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#120310}
.c5-hero__video figcaption{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:9px;padding:9px 13px;background:#fff;font:700 13px/1 var(--f-body)}
.c5-rec{width:8px;height:8px;border-radius:50%;background:#E8336F;animation:c5-blink 1.2s steps(1) infinite}
@keyframes c5-blink{50%{opacity:.2}}

/* the count band */
.c5-counts{margin-top:clamp(24px,4vw,56px);padding-block:clamp(20px,3vw,40px) clamp(28px,3vw,44px);border-block:1px solid var(--line);overflow:hidden}
.c5-counts__row{display:flex;justify-content:space-between;max-width:1440px;margin:auto;padding-inline:max(16px,4vw)}
.c5-counts__row span{font:200 italic clamp(110px,23vw,340px)/.78 var(--f-display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(33,0,20,.22);transition:color .1s,-webkit-text-stroke-color .1s}
.c5-counts__row span.on{color:var(--pink);-webkit-text-stroke-color:var(--pink)}
.c5-counts p{margin-top:clamp(14px,2vw,26px);font:300 italic clamp(22px,2.4vw,34px)/1.2 var(--f-display)}
.c5-counts em{font-weight:600;color:var(--pink-ink)}

/* sections */
.c5-sec{padding-block:clamp(64px,8vw,120px)}
.c5-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,56px);max-width:760px}
.c5-head h2,.c5-you h2{font:800 clamp(36px,4.4vw,64px)/1 var(--f-body);letter-spacing:-.035em}
.c5-head p:not(.c5-label){color:var(--muted);max-width:56ch}
.c5-head--row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;max-width:none}

/* one eight-count, drawn */
.c5-poses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:1px solid var(--line)}
.c5-poses li{display:grid;justify-items:center;gap:10px;padding:26px 6px 18px;border-right:1px solid var(--line);transition:background .1s}
.c5-poses li:last-child{border-right:0}
.c5-poses svg{width:100%;max-width:84px;height:auto;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.c5-poses svg circle{fill:var(--ink);stroke:none}
.c5-poses b{font:200 italic 36px/1 var(--f-display)}
.c5-poses li.on{background:var(--pink-l)}
.c5-poses li.on svg{transform:translateY(-4px)}
.c5-poses li.on b{color:var(--pink-ink);font-weight:600}
.c5-note{margin-top:16px;font-size:15px;color:var(--muted)}

/* reel */
.c5-reel__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.c5-reel__grid figure{position:relative;margin:0;background:#120310}
.c5-reel__grid .big{grid-row:span 2}
.c5-reel__grid video{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.c5-reel__grid figcaption{position:absolute;left:12px;bottom:12px;padding:7px 11px;background:#fff;font:700 13px/1 var(--f-body)}

/* class steps */
.c5-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink)}
.c5-steps li{padding-top:22px}
.c5-steps li::before{content:"";display:block;height:8px;width:calc(var(--d) / 20 * 100%);margin-bottom:22px;background:var(--pink)}
.c5-steps li:nth-child(even)::before{background:var(--mint)}
.c5-steps b{font:200 italic 56px/1 var(--f-display)}
.c5-steps h3{margin:12px 0 6px;font:700 19px/1.25 var(--f-body)}
.c5-steps p{font-size:16px;line-height:1.5;color:var(--muted)}

/* list */
.c5-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.c5-list li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:18px 8px 18px 0;border-bottom:1px solid var(--line);transition:background .15s,padding .15s}
.c5-list li:hover{background:var(--bg-2);padding-left:10px}
.c5-list b{font:200 italic 30px/1 var(--f-display);color:var(--pink-ink)}
.c5-list span{font:700 19px/1.3 var(--f-body)}
.c5-list i{display:block;margin-top:2px;font:400 15px/1.3 var(--f-body);font-style:normal;color:var(--muted)}
.c5-list em{font:500 14px/1 var(--f-body);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}

/* for you */
.c5-you{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.c5-you ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.c5-you li{display:flex;align-items:center;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);font:600 clamp(19px,1.8vw,24px)/1.3 var(--f-body)}
.c5-you li::before{content:"";flex:none;width:30px;height:30px;
  background:var(--mint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23210014' stroke-width='2.4' stroke-linecap='square'/></svg>") center/18px no-repeat}

/* faq */
.ch5 .faq{max-width:900px;border-top:1px solid var(--ink)}
.ch5 .faq details{border-bottom:1px solid var(--line)}
.ch5 .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 clamp(18px,1.8vw,22px)/1.3 var(--f-body)}
.ch5 .faq summary::after{content:"";flex:none;width:16px;height:16px;transition:transform .2s;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat}
.ch5 .faq details[open] summary::after{transform:rotate(45deg)}
.ch5 .faq summary:hover{color:var(--pink-ink)}
.ch5 .faq details p{padding-bottom:24px;color:var(--muted);max-width:64ch}

/* cta */
.c5-cta{background:var(--pink);padding-block:clamp(72px,10vw,140px)}
.c5-cta__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:end}
.c5-cta__big{font:200 italic clamp(64px,10.5vw,170px)/.88 var(--f-display);letter-spacing:-.035em}
.c5-cta__big em{font-weight:800}
.c5-cta__side p{font-size:19px;margin-bottom:28px;max-width:40ch}
.c5-cta .c5-btn:hover{box-shadow:0 6px 0 #fff}

.c5-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:36px;font-size:15px;color:var(--muted)}
.c5-foot .logo{width:130px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .c5-hero,.c5-you,.c5-cta__grid{grid-template-columns:minmax(0,1fr)}
  .c5-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .c5-steps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
  .c5-steps li::before{grid-column:1/-1;margin-bottom:6px}
  .c5-steps b{font-size:40px}
  .c5-steps h3{margin-top:4px}
  .c5-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .c5-top nav{display:none}
  .c5-top .c5-btn--sm{margin-left:auto}
  .c5-poses{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c5-poses li:nth-child(4){border-right:0}
  .c5-poses li:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .c5-reel__grid{grid-template-columns:minmax(0,1fr)}
  .c5-reel__grid .big{grid-row:auto}
  .c5-hero__video{margin:0 14px 14px 0}
  .c5-hero__video::before{inset:14px -14px -14px 14px}
}