/* showcase */
#cs{--lib:#4E3E31; --cream:#F6F0E4; --mar:#5A1414; --gold:#FFC552}
.sc-hero{background:var(--lib); color:#FBF7EE; padding:64px 0 0; overflow:hidden; text-align:center}
.sc-hero h1{font-size:clamp(44px,7vw,96px); margin:28px 0 16px; font-weight:700}
.sc-hero p{max-width:52ch; margin:0 auto 56px; color:#E8DCCB; font-size:clamp(17px,1.8vw,21px)}
.back.light{color:#E8DCCB}
.laptop{max-width:1000px; margin:0 auto}
.laptop .screen{background:#1B1B1D; border-radius:18px 18px 0 0; padding:2.2% 2.2% 2.6%; box-shadow:inset 0 0 0 2px #3A3A3E}
.laptop .screen img{border-radius:4px; width:100%; aspect-ratio:16/9; object-fit:cover}
.laptop .base{height:18px; background:linear-gradient(#D5D6DA,#A9ABB1); border-radius:0 0 22px 22px; margin:0 -6%; position:relative; box-shadow:0 30px 50px -20px rgba(0,0,0,.5)}
.laptop .base::before{content:""; position:absolute; left:50%; top:0; width:16%; height:7px; transform:translateX(-50%); background:#9C9EA4; border-radius:0 0 10px 10px}
.hero-lap{margin-bottom:-4px}
.sc-facts{background:var(--cream); color:#2E2620; border-bottom:1px solid #E3D8C4}
.sc-facts .wrap{display:grid; grid-template-columns:repeat(5,1fr); gap:28px; padding-top:40px; padding-bottom:40px; font-size:16px}
.sc-facts span{display:block; font-size:14px; color:#7A6A58; margin-bottom:4px}
.sc-band{padding:104px 0}
.sc-band.cream{background:var(--cream); color:#2E2620}
.sc-band.paper{background:#FBF9F4; color:#2E2620}
.sc-band.brown{background:var(--lib); color:#FBF7EE}
.sc-band.maroon{background:var(--mar); color:#FBF7EE}
.narrow{max-width:760px; text-align:center}
.narrow h2{font-size:clamp(28px,3vw,38px); margin-bottom:16px}
.narrow p{font-size:clamp(18px,1.8vw,21px); margin:0}
.cap{text-align:center; max-width:640px; margin:0 auto 56px}
.cap h2{font-size:clamp(30px,3.6vw,48px); margin-bottom:14px}
.cap p{margin:0; color:#6B5B4A}
.cap.light p{color:#E8DCCB}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.browser{background:#FFFDF8; border-radius:12px; padding:30px 10px 10px; position:relative; box-shadow:0 24px 48px -30px rgba(46,38,32,.55)}
.browser i{position:absolute; top:11px; left:14px; width:9px; height:9px; border-radius:50%; background:#E0CFB6; box-shadow:15px 0 0 #E0CFB6, 30px 0 0 #E0CFB6}
.browser img{border-radius:6px; width:100%; aspect-ratio:16/9; object-fit:cover}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end}
.pair figure{margin:0}
.pair figcaption{text-align:center; margin-top:28px; color:#EBD9C8; font-size:16px}
.sheet{background:#FFFDF8; border-radius:16px; padding:clamp(16px,3vw,40px); display:grid; gap:10px; max-width:1000px; margin:0 auto; box-shadow:0 24px 48px -30px rgba(46,38,32,.5)}
.sheet img{width:100%}
img.flat{border-radius:12px; width:100%; background:#fff}
img.wide{max-width:1000px; margin:0 auto}
.plan figure{margin:0}
.plan img{aspect-ratio:4/3; object-fit:contain; border:1px solid #E3D8C4}
.plan figcaption{text-align:center; color:#7A6A58}
.build2{display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; max-width:1000px; margin:0 auto}
.build2 ul{list-style:none; margin:0; padding:0}
.build2 li{padding:18px 0 18px 22px; border-left:3px solid var(--gold); margin-bottom:12px; color:#E8DCCB; font-size:16px}
.build2 b{display:block; color:#FBF7EE; font-family:var(--display); font-size:21px; margin-bottom:2px}
#cs .next{border-top:none}
@media (max-width:900px){
  .sc-facts .wrap{grid-template-columns:1fr 1fr}
  .grid2,.pair,.build2{grid-template-columns:1fr}
  .pair{gap:48px}
  .sc-band{padding:72px 0}
}

.res-row{display:grid; grid-template-columns:repeat(3,1fr); max-width:1000px; margin:0 auto; border-top:1px solid rgba(251,247,238,.25)}
.res-row > div{padding:32px 20px 8px; text-align:center}
.res-row > div + div{border-left:1px solid rgba(251,247,238,.25)}
.res-row span{display:block; font-size:16px; color:#EBD9C8; min-height:3em}
.res-row strong{display:block; font-family:var(--display); font-weight:750; font-size:clamp(56px,7vw,96px); line-height:1; color:var(--gold); letter-spacing:-0.03em; margin:14px 0 10px}
.res-row em{font-style:normal; font-size:16px; color:#FBF7EE}
.res-note{text-align:center; font-size:14px; color:#D9C3B0; margin:40px auto 0; max-width:60ch}
@media (max-width:900px){.res-row{grid-template-columns:1fr}.res-row > div + div{border-left:none; border-top:1px solid rgba(251,247,238,.25)}.res-row span{min-height:0}}

.sg{max-width:1040px; margin:0 auto; background:#FFFDF8; border-radius:20px; padding:clamp(22px,4vw,52px); box-shadow:0 24px 48px -30px rgba(46,38,32,.5); color:#372F2B; display:grid; gap:48px}
.sg h3{font-family:var(--body); font-size:15px; font-weight:600; letter-spacing:0; color:#8A7864; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid #EADFCD}
.sg-swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.sg-swatches i{display:block; aspect-ratio:3/4; border-radius:12px; border:1px solid #E3D8C4; margin-bottom:12px}
.sg-swatches b{display:block; font-size:15px}
.sg-swatches code{display:block; font-family:var(--body); font-size:13px; color:#8A7864; margin:2px 0 4px}
.sg-swatches span{font-size:13px; color:#6B5B4A; line-height:1.4; display:block}
.sg-split{display:grid; grid-template-columns:1.15fr 1fr; gap:48px}
.pf{font-family:"Playfair Display", Georgia, serif}
.gar{font-family:"EB Garamond", Georgia, serif}
.sg-type{display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start; margin-bottom:28px}
.sg-aa{font-size:72px; line-height:1; color:#8F0000}
.sg-aa.pf{font-weight:700}
.sg-name{margin:0 0 6px; font-size:13px; color:#8A7864}
.sg-head{font-size:34px; font-weight:700; margin:0 0 6px; line-height:1.15}
.sg-body{font-size:21px; line-height:1.45; margin:0 0 6px}
.sg-body b{color:#8F0000}
.sg-use{font-size:14px; color:#6B5B4A; margin:0}
.sg-btns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.sg-btns span{font-family:"EB Garamond", Georgia, serif; font-weight:600; font-size:16px; padding:9px 20px}
.b-gold{background:#FFC552; color:#372F2B; border-radius:999px}
.b-dark{background:#372F2B; color:#FBF7EE; border-radius:6px; letter-spacing:.04em}
.sg-gap{margin-top:34px!important}
.sg-tiles{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.sg-tiles div{width:46px; height:46px; border:1.5px solid #D9CBB4; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#FBF7EE}
.sg-tiles b{font-family:"EB Garamond", Georgia, serif; font-size:20px}
.sg-tiles div.on{width:auto; padding:0 16px 0 0; gap:12px; border-color:#8F0000; background:#fff}
.sg-tiles div.on b{width:44px; text-align:center; color:#fff; background:#8F0000; height:100%; display:flex; align-items:center; justify-content:center; border-radius:6px 0 0 6px}
.sg-tiles div.on span{font-family:"EB Garamond", Georgia, serif; font-size:16px; color:#8F0000}
@media (max-width:900px){.sg-swatches{grid-template-columns:repeat(3,1fr)}.sg-split{grid-template-columns:1fr}}


.res-row .ba{display:flex; justify-content:center; align-items:flex-end; gap:clamp(16px,2.4vw,32px); margin-top:18px}
.res-row .ba p{margin:0; display:flex; flex-direction:column; align-items:center}
.res-row .ba small{font-size:14px; color:#D9C3B0; margin-bottom:4px}
.res-row .ba strong{margin:0; font-size:clamp(48px,5.6vw,80px)}
.res-row .ba strong.was{color:#FBF7EE; opacity:.9}
.res-row .ba strong em{font-style:normal; font-family:var(--body); font-size:.3em; font-weight:600; margin-left:4px; letter-spacing:0}
.res-row > div{padding-bottom:28px}
.bna{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; max-width:1080px; margin:0 auto}
.bna-col{background:#FFFDF8; border-radius:20px; padding:clamp(22px,3vw,36px); box-shadow:0 24px 48px -30px rgba(46,38,32,.5); color:#372F2B; display:flex; flex-direction:column}
.bna-tag{align-self:flex-start; margin:0 0 14px; font-size:14px; font-weight:600; padding:4px 14px; border-radius:999px}
.bna-tag.was{background:#EDE5D8; color:#6B5B4A}
.bna-tag.now{background:#8F0000; color:#FBF7EE}
.bna-col h3{font-size:22px; margin:0 0 22px; line-height:1.25}
.bna-list{list-style:none; padding:0; margin:26px 0 0; font-size:16px; color:#5A4B3D}
.bna-list li{padding:10px 0 10px 26px; border-top:1px solid #EADFCD; position:relative}
.bna-list li::before{content:""; position:absolute; left:4px; top:18px; width:9px; height:9px; border-radius:50%; background:#C9B9A2}
.bna-col:last-child .bna-list li::before{background:#8F0000}
/* video mock */
.vid{border-radius:12px; overflow:hidden; background:#0F0F10}
.vid-screen{aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; gap:10px}
.play{width:0; height:0; border-left:26px solid #FBF7EE; border-top:16px solid transparent; border-bottom:16px solid transparent; margin-bottom:8px; opacity:.9}
.vid-title{margin:0; color:#FBF7EE; font-family:var(--display); font-size:clamp(15px,1.6vw,19px); line-height:1.3}
.vid-sub{margin:0; color:#9A9CA2; font-size:13px}
.vid-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1B1B1D}
.vid-bar .t{color:#9A9CA2; font-size:12px; font-variant-numeric:tabular-nums}
.vid-bar .track{flex:1; height:4px; background:#3A3A3E; border-radius:2px; position:relative}
.vid-bar .track i{position:absolute; left:0; top:0; bottom:0; width:38%; background:#C4302B; border-radius:2px}
/* book mock */
.book{position:relative; display:grid; grid-template-columns:1fr 1fr; background:#5C4A3A; border-radius:12px; padding:38px 14px 14px; aspect-ratio:16/10}
.book .tab{position:absolute; top:9px; font-family:"EB Garamond", Georgia, serif; font-size:12px; font-weight:600; background:#FFC552; color:#372F2B; padding:3px 11px; border-radius:999px}
.book .tab.l{left:14px} .book .tab.r{right:14px}
.pg{background:#FBF7EE; padding:14px 14px 12px; display:flex; flex-direction:column; gap:6px; font-family:"EB Garamond", Georgia, serif}
.pg:first-of-type{border-radius:6px 0 0 6px; box-shadow:inset -8px 0 10px -8px rgba(0,0,0,.25)}
.pg + .pg{border-radius:0 6px 6px 0; box-shadow:inset 8px 0 10px -8px rgba(0,0,0,.25)}
.pg-h{margin:0; font-family:"Playfair Display", Georgia, serif; font-weight:700; font-size:clamp(13px,1.4vw,17px); color:#372F2B}
.pg-h.sm{font-size:14px}
.pg-s{margin:-4px 0 4px; font-size:12px; color:#8F0000}
.ln{display:block; height:4px; border-radius:2px; background:#DCD2C2}
.ln.s{width:70%} .ln.m{width:85%}
.pens{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:auto}
.pens b{color:#8F0000; font-size:clamp(14px,1.5vw,18px)}
.pens em{font-size:12px; color:#6B5B4A}
.blank{margin:0; font-size:12px; color:#372F2B; line-height:1.4}
.blank u{display:inline-block; width:26px; height:12px; background:#E3DACB; border-radius:2px; vertical-align:middle; text-decoration:none}
.blank u.w{width:60px}
.chk{margin-top:auto; align-self:center; background:#372F2B; color:#FBF7EE; font-size:11px; letter-spacing:.05em; padding:5px 12px; border-radius:4px}
@media (max-width:900px){.bna{grid-template-columns:minmax(0,1fr)}}