/* =========================================================================
   Merci Tasks Diary — home page, matched to merciglobal.com/tasks-diary
   (near-black, gold, Inter; the diary itself is a cream paper page in Kalam).
   ========================================================================= */
.i{display:inline-block;vertical-align:middle;flex:0 0 auto}
.home-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.home-hero h1{max-width:15ch}
.hero-ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:rgba(250,250,250,.62)}
.hero-ticks li{display:flex;align-items:center;gap:8px}
.hero-ticks li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- a static diary page (hero + sections) ---------- */
.pp{--ink:#1b2a4a;--soft:#4a5875;--faint:#6f7a8f;--blue:#1f5fbf;--green:#1f8a4c;--green2:#166a3a;--red:#b3261e;--amber:#8a6100;
  position:relative;background:#fffaf0;color:var(--ink);border-radius:6px 14px 14px 6px;padding:18px 16px 18px 58px;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(201,168,76,.25);font-family:'Kalam',cursive;margin:0}

.pp::after{content:"";position:absolute;left:46px;top:0;bottom:0;width:1.5px;background:rgba(214,64,64,.55)}
.pp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;position:relative;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid rgba(214,64,64,.35)}
.pp-h small{font:700 10.5px 'Public Sans',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pp-h b{font-size:22px;font-weight:700}
.pp-h .pill{margin-left:auto;font:700 11px 'Public Sans',Arial,sans-serif;padding:3px 9px;border-radius:999px;background:rgba(240,193,62,.25);color:var(--amber)}
.pp ul{list-style:none;margin:0;padding:0;position:relative}
.pp li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:38px;font-size:18px;line-height:1.3;padding:5px 0;
  border-bottom:1px solid rgba(70,120,190,.22)}
.pp .bx{position:absolute;left:-46px;top:6px;width:26px;height:26px;border:2px solid var(--soft);border-radius:5px;display:flex;align-items:center;
  justify-content:center;font:700 14px/1 'Public Sans',Arial,sans-serif;letter-spacing:-3px;padding-right:2px}
.pp .done .bx{color:var(--green);border-color:var(--green)}
.pp .ver .bx{color:#fff;background:var(--green2);border-color:var(--green2)}
.pp .drop .bx{color:var(--red);border-color:var(--red);letter-spacing:0;padding:0}
.pp .car .bx{color:var(--faint);border-style:dashed;letter-spacing:0;padding:0}
.pp .ver .t{color:var(--soft);text-decoration:line-through;text-decoration-color:var(--green)}
.pp .drop .t,.pp .car .t{color:var(--faint);text-decoration:line-through}
.pp .car .t{text-decoration:none}
.pp .who{color:var(--blue);font-weight:700;font-size:16px}
.pp .tm{font:700 12px 'Public Sans',Arial,sans-serif;color:var(--amber)}
.pp .star{color:var(--amber)}
.pp .grp{font:700 11px 'Public Sans',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);min-height:30px}
.pp .grp.in{color:var(--amber);text-transform:none;letter-spacing:.02em}
.tg{display:inline-block;font:700 10.5px/17px 'Public Sans',Arial,sans-serif;padding:0 7px;border-radius:9px;background:#f3ead7;border:1px solid #e2d4b6;color:var(--soft);white-space:nowrap}
.tg.warn{color:var(--amber);border-color:var(--amber)}.tg.hot{color:var(--red);border-color:var(--red)}
.tg.loc{color:var(--blue);border-color:var(--blue)}.tg.from{color:var(--amber);border-color:var(--amber)}
.pp .n{position:absolute;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#0a0a0a;
  font:700 11.5px/22px Inter,Arial,sans-serif;text-align:center;box-shadow:0 0 0 3px rgba(201,168,76,.25)}
.pp-cap{margin:12px 0 0;font-size:12.5px;color:rgba(250,250,250,.55);text-align:center}

/* ---------- stat strip ---------- */
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.stats4 div{background:var(--bg);padding:26px 20px;text-align:center}
.stats4 b{display:block;font-size:34px;font-weight:300;color:var(--gold);letter-spacing:-.02em;line-height:1.1}
.stats4 span{font-size:13px;color:rgba(250,250,250,.62)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.steps li{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.steps em{font-style:normal;font-size:11px;letter-spacing:.3em;color:var(--gold)}
.steps b{display:block;font-size:18px;font-weight:500;margin:6px 0 6px}
.steps p{margin:0;font-size:13px;color:rgba(250,250,250,.62);line-height:1.5}

/* ---------- sample diary frame ---------- */
.demo-frame{position:relative;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:#f4f5f7}
.demo-frame iframe{display:block;width:100%;height:880px;border:0}
.demo-open{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:rgba(250,250,250,.6)}

/* ---------- legend grids ---------- */
.legend2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.leg{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:22px}
.leg h3{margin:0 0 14px;font-size:17px}
.leg dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start}
.leg dt{display:flex;align-items:center;justify-content:center;min-width:40px}
.leg dd{margin:0;font-size:14px;color:rgba(250,250,250,.72);line-height:1.5}
.leg dd b{color:var(--ink)}
.kbx{width:28px;height:28px;border-radius:6px;border:2px solid #a1a1aa;display:flex;align-items:center;justify-content:center;font:700 14px/1 Inter,Arial,sans-serif;color:#fafafa;letter-spacing:-3px;padding-right:2px}
.kbx.d{border-color:#4ade80;color:#4ade80}.kbx.v{background:#16a34a;border-color:#16a34a;color:#fff}.kbx.x{border-color:#f87171;color:#f87171;letter-spacing:0;padding:0}
.leg .note{margin:16px 0 0;font-size:13px;color:rgba(250,250,250,.55)}
.dtg{display:inline-block;font:700 11px/19px Inter,Arial,sans-serif;padding:0 8px;border-radius:9px;border:1px solid rgba(255,255,255,.2);color:#d4d4d8;white-space:nowrap}
.dtg.warn{color:#fbbf24;border-color:#fbbf24}.dtg.hot{color:#f87171;border-color:#f87171}.dtg.loc{color:#93c5fd;border-color:#93c5fd}.dtg.from{color:var(--gold);border-color:var(--gold)}

/* ---------- show rows (copy + visual) ---------- */
.show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.show-grid.rev .show-copy{order:2}
.checks{list-style:none;margin:0 0 8px;padding:0}
.checks li{position:relative;padding:7px 0 7px 28px;font-size:15px;color:rgba(250,250,250,.8);line-height:1.55}
.checks li::before{content:"✓";position:absolute;left:2px;top:7px;color:var(--gold);font-weight:700}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.cf{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px;min-width:700px}
.cf .pp{padding:12px 10px 12px 44px;border-radius:6px 10px 10px 6px}
.cf .pp::after{left:34px}
.cf .pp .bx{left:-36px;width:22px;height:22px;top:6px;font-size:12px}
.cf .pp li{font-size:15px;min-height:34px}
.cf .pp-h b{font-size:17px}
.pages{display:grid;gap:10px}
.pages .pp{padding:12px 14px 12px 50px}
.pages .pp::after{left:38px}
.pages .pp .bx{left:-40px}
.pages .pp li{font-size:16px}
.cap{margin:10px 0 0;font-size:12.5px;color:rgba(250,250,250,.5)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:14px;min-width:560px}

/* ---------- telegram mockups ---------- */
.tgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tgw{background:#0e1621;border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.08)}
.tgw .when{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.tgb{background:#182533;color:#e9eef3;border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:14px;line-height:1.55;max-width:420px}
.tgb b{color:#fff}.tgb a{color:#6ab3f3}
.tgb .gap{height:8px}
.tgb .btnr{margin-top:10px;display:flex;justify-content:center;background:rgba(106,179,243,.12);border-radius:8px;padding:7px;color:#6ab3f3;font-weight:600}

/* ---------- a day + roles ---------- */
.day{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.day li{border-top:2px solid var(--gold);padding:14px 4px 0}
.day em{font-style:normal;font-size:12px;color:var(--gold);letter-spacing:.08em}
.day b{display:block;font-weight:500;font-size:16px;margin:4px 0 6px}
.day p{margin:0;font-size:13px;color:rgba(250,250,250,.62);line-height:1.5}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.roles div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:18px}
.roles b{display:block;font-weight:500;margin-bottom:6px}
.roles p{margin:0;font-size:13.5px;color:rgba(250,250,250,.64);line-height:1.55}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feats div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.feats em{font-style:normal;font-size:12px;color:var(--gold);font-weight:600}
.feats b{display:block;font-weight:500;font-size:16px;margin:4px 0 6px}
.feats p{margin:0;font-size:13.5px;color:rgba(250,250,250,.62);line-height:1.55}

/* ---------- pricing toggle ---------- */
.bill{display:inline-flex;border:1px solid var(--gold);border-radius:2px;margin:0 0 26px}
.bill a{padding:9px 18px;font-size:13px;font-weight:600;color:var(--gold);min-height:40px;display:inline-flex;align-items:center}
.bill a.on{background:var(--gold);color:#0a0a0a}
.bill a:hover{text-decoration:none}

/* ---------- faq ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-size:16px;font-weight:500;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--gold);font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:rgba(250,250,250,.7);line-height:1.65}
.closing{text-align:center}
.closing h2{max-width:24ch;margin-left:auto;margin-right:auto}
.closing .sub{margin-left:auto;margin-right:auto}
.closing .cta{justify-content:center}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .home-hero .hero-grid,.show-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .show-grid.rev .show-copy{order:0}
  .legend2,.tgs{grid-template-columns:minmax(0,1fr)}
  .stats4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .steps,.day,.feats,.roles{grid-template-columns:minmax(0,1fr)}
  .stats4 b{font-size:28px}
  .pp{padding:14px 12px 14px 48px}
  .pp::after{left:38px}
  .pp .bx{left:-40px}
  .pp li{font-size:16px}
  .pp .n{right:-4px}
  .demo-frame iframe{height:760px}
}
/* grid children never grow past their track (the sideways-scrolling samples stay inside their box) */
.hero-grid>*,.show-grid>*,.legend2>*,.tgs>*{min-width:0}
.scroll-x{max-width:100%}