/* MEMO figures. Visual system: what you cannot see is redacted. What we reveal is typed. */

.fig{margin-top:44px;}
.fig-cap{font-size:13px;color:var(--text-soft);margin-top:16px;max-width:60ch;}
.s-dark .fig-cap{color:var(--on-dark-soft);}

/* redaction bars */
.rd{display:inline-block;height:11px;border-radius:3px;background:rgba(26,18,8,0.16);vertical-align:middle;}
.s-dark .rd,.chat .rd,.kan .rd{background:rgba(255,255,255,0.18);}
.rd-t{height:13px;background:rgba(26,18,8,0.22);}
.s-dark .rd-t{background:rgba(255,255,255,0.26);}

/* ---------- timeline strip (hero signature) ---------- */
.tl{margin-top:64px;position:relative;z-index:2;}
.tl-label{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:26px;}
.tl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.tl-row::before{content:'';position:absolute;top:9px;left:8%;right:8%;height:1px;background:linear-gradient(to right,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.16) 70%,var(--orange) 70%,var(--orange) 100%);}
.tl-step{position:relative;padding:0 12px;}
.tl-dot{width:18px;height:18px;border-radius:50%;border:1px dashed rgba(255,255,255,0.34);background:var(--ink);position:relative;z-index:2;}
.tl-step.on .tl-dot{border:1px solid var(--orange);background:var(--orange);box-shadow:0 0 0 6px rgba(255,139,18,0.16);}
.tl-step b{display:block;margin-top:22px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,0.66);line-height:1.4;max-width:19ch;}
.tl-step.on b{color:#fff;}
.tl-step small{display:block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,255,255,0.34);}
.tl-step.on small{color:var(--orange);}
.tl-note{margin-top:34px;font-size:14px;color:var(--on-dark-soft);max-width:56ch;}
@media(max-width:820px){
  .tl-row{grid-template-columns:1fr;gap:22px;}
  .tl-row::before{top:0;bottom:0;left:9px;right:auto;width:1px;height:auto;background:linear-gradient(to bottom,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.16) 70%,var(--orange) 70%,var(--orange) 100%);}
  .tl-step{padding:0 0 0 38px;}
  .tl-dot{position:absolute;left:0;top:3px;}
  .tl-step b{margin-top:0;}
}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.door{position:relative;height:150px;border-radius:80px 80px 10px 10px;border:1.5px solid var(--room);background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;}
.door::after{content:'';position:absolute;right:16px;top:56%;width:7px;height:7px;border-radius:50%;background:var(--room);opacity:0.8;}
.door span{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--room);}
.door em{position:absolute;top:26px;font-size:26px;font-weight:800;color:var(--room);opacity:0.9;font-style:normal;}
@media(max-width:820px){.doors{grid-template-columns:1fr 1fr;}}

/* ---------- chat answer mock ---------- */
.chat{background:#12100d;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;max-width:640px;}
.chat-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,0.09);}
.chat-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.16);}
.chat-bar span{margin-left:8px;font-size:11px;letter-spacing:0.13em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.34);}
.chat-body{padding:22px 22px 24px;}
.chat-q{background:rgba(255,255,255,0.06);border-radius:12px;padding:14px 16px;font-size:14.5px;color:#fff;line-height:1.5;}
.chat-a{margin-top:18px;font-size:14.5px;color:rgba(255,255,255,0.72);line-height:1.6;}
.chat-list{list-style:none;margin-top:16px;}
.chat-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,0.07);}
.chat-list li b{width:18px;font-size:12px;color:rgba(255,255,255,0.34);font-weight:700;}
.chat-you{margin-top:14px;border:1px dashed var(--orange);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--orange);font-weight:600;}

/* score line */
.score{margin-top:26px;}
.score-line{height:6px;border-radius:6px;background:rgba(255,255,255,0.12);position:relative;}
.score-fill{position:absolute;left:0;top:0;bottom:0;width:19%;border-radius:6px;background:var(--orange);}
.score-mark{position:absolute;left:19%;top:-7px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:2px solid var(--orange);background:var(--ink);}
.score-ends{display:flex;justify-content:space-between;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.34);}

/* ---------- browser + editor mock ---------- */
.br{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 22px 60px rgba(26,18,8,0.10);}
.br-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--cream);border-bottom:1px solid var(--line);}
.br-bar i{width:9px;height:9px;border-radius:50%;background:#d9cfc3;}
.br-url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px 14px;font-size:12px;color:var(--text-soft);}
.br-body{padding:30px 30px 34px;position:relative;}
.br-body h4{font-size:22px;font-weight:800;letter-spacing:-0.025em;margin-bottom:14px;}
.br-p{font-size:14.5px;color:var(--text-soft);line-height:1.7;}
.br-sel{position:relative;border:2px solid var(--orange);border-radius:10px;padding:14px 16px;margin-top:16px;background:rgba(255,139,18,0.05);}
.br-tag{position:absolute;top:-13px;left:14px;background:var(--orange);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;}
.br-dock{margin:22px 0 0;background:var(--ink);border-radius:100px;padding:11px 12px 11px 20px;display:flex;align-items:center;gap:14px;}
.br-dock span{font-size:13px;color:rgba(255,255,255,0.72);flex:1;}
.br-dock b{background:var(--orange);color:var(--ink);font-size:12px;font-weight:700;border-radius:100px;padding:7px 15px;}

/* speed bars */
.bars{margin-top:34px;}
.bar-row{margin-bottom:18px;}
.bar-row span{display:block;font-size:13px;font-weight:600;margin-bottom:8px;}
.bar-track{height:14px;border-radius:8px;background:rgba(26,18,8,0.07);overflow:hidden;}
.bar-fill{height:100%;border-radius:8px;background:rgba(26,18,8,0.28);}
.bar-fill.good{background:var(--orange);}

/* ---------- kanban / contact cards ---------- */
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kan-col{background:rgba(255,255,255,0.035);border:1px solid var(--dark-line);border-radius:14px;padding:16px;}
.kan-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--room);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.09);}
.kan-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:11px;padding:14px;margin-top:12px;}
.kan-card.lit{border-color:var(--orange);background:rgba(255,139,18,0.09);}
.kan-name{font-size:14px;font-weight:600;color:#fff;}
.kan-sub{font-size:12px;color:rgba(255,255,255,0.45);margin-top:6px;}
.kan-meta{display:flex;align-items:center;gap:8px;margin-top:12px;}
.pill{font-size:10.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;border-radius:100px;padding:3px 9px;color:var(--room);border:1px solid var(--room);}
.pill-score{color:var(--orange);border-color:var(--orange);}
@media(max-width:820px){.kan{grid-template-columns:1fr;}}

/* ---------- email mock ---------- */
.mail{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:520px;box-shadow:0 18px 50px rgba(26,18,8,0.09);}
.mail-h{padding:16px 20px;border-bottom:1px solid var(--line);}
.mail-h b{display:block;font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.mail-h span{font-size:12px;color:var(--text-soft);}
.mail-b{padding:20px;font-size:14px;color:var(--text-soft);line-height:1.7;}
.mail-f{padding:14px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-soft);background:var(--cream);}

/* two column figure layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.wide-left{grid-template-columns:1.1fr 1fr;}
@media(max-width:900px){.split,.split.wide-left{grid-template-columns:1fr;gap:36px;}}

/* dark panel inside a light section */
.panel-dark{background:var(--ink);border-radius:20px;padding:34px 30px;}
.panel-dark h3{color:#fff;}
.panel-dark .fig{margin-top:0;}
.panel-dark .fig-cap{color:var(--on-dark-soft);}
.book-cover{max-width:250px;border-radius:6px;box-shadow:0 24px 60px rgba(26,18,8,0.22);}

/* product screenshots */
.shot img{width:100%;height:auto;display:block;}
.shot{max-width:760px;}
.s-dark .shot,.panel-light .shot{margin-left:auto;margin-right:auto;}
.shot-wide{max-width:1000px;margin-left:auto;margin-right:auto;}

/* ---------- four rooms floorplan ---------- */
.plan-fig{max-width:none;margin-top:0;}
.s-plan{padding:24px 0 88px;}
.plan-svg{width:100%;height:auto;display:block;}
.plan-v{display:none;max-width:420px;margin:0 auto;}
@media(max-width:860px){
  .plan-h{display:none;}
  .plan-v{display:block;}
}

/* ---------- what happens when, by solution ---------- */
.wgrid{display:grid;grid-template-columns:210px repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:36px;}
.wcell{background:#fff;padding:20px 20px 22px;}
.whead{background:var(--cream);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft);padding:16px 20px;}
.wsol{background:var(--cream);}
.wsol b{display:block;font-size:16px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;}
.wsol span{font-size:13px;color:var(--text-soft);line-height:1.5;}
.wcell p{font-size:14px;line-height:1.6;color:var(--text-soft);}
.wpace{display:block;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--orange);line-height:1.5;}
@media(max-width:900px){
  .wgrid{grid-template-columns:1fr;border-radius:14px;}
  .whead{display:none;}
  .wsol{padding-top:24px;}
  .wcell.m1::before,.wcell.m3::before,.wcell.m12::before{
    display:block;font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--orange);margin-bottom:8px;}
  .wcell.m1::before{content:'Month one';}
  .wcell.m3::before{content:'Month three';}
  .wcell.m12::before{content:'Month twelve';}
}
/* who needs what */
.need{margin-top:26px;list-style:none;}
.need li{position:relative;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;}
.need .who{font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-soft);
  border:1px solid var(--line);border-radius:100px;padding:3px 9px;white-space:nowrap;}

/* emphasised pull quote */
.quote-strong p{font-weight:700;font-style:italic;}

/* real product screenshots on light sections */
.shot-dark img{width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:0 26px 70px rgba(26,18,8,0.22);}
.shot-dark{max-width:none;}