/* Module pages (/calendar, /notifications, /invoices, /booking, /assistant).
   Tokens, nav, footer and the shared sections (hero, stage, FAQ, chat) live
   in /static/site.css — load that first. Each page sets --c on its hero and
   feature cards. */
.mhero .hero-grid{grid-template-columns:540px minmax(0,1fr);padding-bottom:96px}
.mhero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--c);margin-bottom:24px}
.mhero .eyebrow .ico{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 13%,#fff);display:grid;place-items:center;flex:none}
.mhero .eyebrow .ico svg{width:15px;height:15px}
.mh1{font-size:58px;line-height:1.04}
.mh1 span{display:block;white-space:normal}
.mh1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
.mhero .sub{max-width:46ch}

/* feature cards */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 1px 2px rgba(12,42,60,.04)}
.sec.alt{background:var(--mint)}
.sec.alt .feat{border-color:transparent}
.feat .ico{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);display:grid;place-items:center}
.feat .ico svg{width:19px;height:19px}
.feat h3{font-size:21px;letter-spacing:-.02em;margin-top:6px;line-height:1.2}
.feat p{color:var(--body);font-size:15px}

/* split sections: copy + list beside a mockup */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.split .h2{font-size:42px}
.split .lead{margin-top:16px;font-size:17px}
.split ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.split li{display:flex;gap:12px;color:var(--body);font-size:16px;align-items:flex-start}
.split li svg{width:18px;height:18px;color:var(--acc-dk);flex:none;margin-top:4px}
.split .app{position:relative;width:auto;left:auto;top:auto}
/* on desktop the screenshot renders at ~60% of hero size here, so the browser chrome scales with it */
@media(min-width:761px){
  .split .app{border-radius:12px}
  .split .app .bar{height:24px;padding:0 10px;gap:5px}
  .split .app .bar i{width:7px;height:7px}
  .split .app .bar .url{margin-left:6px;font-size:8.5px;padding:2px 7px;border-radius:4px}
}

/* reminder template + rendered SMS */
.tplwrap{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.tpl{background:var(--ink);color:rgba(255,255,255,.86);border-radius:18px;padding:22px 24px;font-size:15.5px;line-height:1.9;box-shadow:0 30px 60px -36px rgba(12,42,60,.6)}
.tpl em{font-style:normal;color:#5ED6AE;background:rgba(94,214,174,.14);border:1px solid rgba(94,214,174,.35);padding:1px 10px;border-radius:100px;white-space:nowrap;font-weight:600;font-size:.9em}
.tpl .lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px;font-weight:600}
.tplarrow{align-self:center;color:var(--muted2);display:flex;align-items:center;gap:10px;font-size:13px}
.tplarrow svg{width:16px;height:16px}
.smsp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;color:#161616;font-size:13px;box-shadow:0 1px 2px rgba(12,42,60,.04)}
.smsp .row{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:12px;color:#717171}
.smsp .row b{color:#161616;font-size:13px}
.smsp .row .av{width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.smsp .bub{background:#e9e9eb;border-radius:16px;border-bottom-left-radius:5px;padding:11px 13px;font-size:14px;line-height:1.45;color:#111;max-width:92%}
.smsp .bub a{color:#1d4ed8;text-decoration:underline}
.smsp .st{margin-top:10px;font-size:12px;color:#15803d;font-weight:600;display:flex;align-items:center;gap:6px}
.smsp .st svg{width:13px;height:13px}
.smsp.el .bub{text-transform:uppercase;letter-spacing:.01em}

/* invoice pdf */
.pdf{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 36px;box-shadow:0 30px 60px -30px rgba(12,42,60,.35);color:#161616;font-size:13px;max-width:520px;margin:0 auto;position:relative}
.pdf .ph{display:flex;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #eee}
.pdf .ph b{display:block;font-size:16px;font-weight:600}
.pdf .ph small{display:block;color:#717171;font-size:12px;line-height:1.55}
.pdf .ph .r{text-align:right}
.pdf .ph .r b{font-size:14px}
.pdf .bt{padding:14px 0 8px}
.pdf .bt small{display:block;color:#717171;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.pdf table{width:100%;border-collapse:collapse;margin-top:6px}
.pdf th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#717171;text-align:left;padding:10px 0 6px;border-bottom:1px solid #eee;font-weight:600}
.pdf td{padding:10px 0;border-bottom:1px solid #eee;font-variant-numeric:tabular-nums;vertical-align:top}
.pdf td small{display:block;color:#717171;font-size:11.5px}
.pdf th:last-child,.pdf td:last-child{text-align:right}
.pdf .tots{margin-left:auto;width:60%;padding-top:8px}
.pdf .tot{display:flex;justify-content:space-between;padding:5px 0;color:#444;font-variant-numeric:tabular-nums}
.pdf .tot.g{font-weight:700;color:#111;font-size:15px;border-top:1px solid #eee;margin-top:6px;padding-top:12px}
.pdf .bank{margin-top:18px;background:#f6f7f8;border-radius:10px;padding:12px 14px;color:#444;font-size:12px;line-height:1.65}
.pdf .bank b{color:#111;font-weight:600}
.pdf .stamp{position:absolute;top:-13px;right:24px;background:var(--acc-dk);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:7px 12px;border-radius:100px;box-shadow:0 10px 20px -10px rgba(14,143,114,.6)}

/* example sites */
.exgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ex{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(12,42,60,.04);transition:border-color .2s,box-shadow .2s}
.ex:hover{border-color:rgba(12,42,60,.18);color:var(--ink);box-shadow:0 26px 50px -28px rgba(12,42,60,.3)}
.ex img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;border-bottom:1px solid var(--line2)}
.ex .cap{display:block;padding:16px 18px 18px}
.ex .cap b{display:block;font-size:16px;font-weight:600}
.ex .cap span{display:block;color:var(--muted2);font-size:13.5px;margin-top:3px}

/* assistant */
.mhero .stage.chatstage{display:flex;align-items:center;height:auto;min-height:520px}
.chatstage .chat{width:560px;font-size:14px;flex:none}
.soon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--purple),var(--green) 60%,#4CCBA3) border-box;border-radius:22px;padding:36px 40px;box-shadow:0 30px 70px -40px rgba(110,91,232,.35)}
.soon h3{font-size:30px;letter-spacing:-.02em}
.soon p{color:var(--body);font-size:16px;margin-top:10px;max-width:60ch}
.soon .pill-new{margin-bottom:14px;display:inline-block}

/* price strip */
.pstrip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;background:var(--ink);color:#fff;border-radius:28px;padding:48px 56px;box-shadow:0 40px 80px -40px rgba(12,42,60,.5)}
.pstrip .amt{margin-top:18px}
.pstrip .amt b{font-size:56px}
.pstrip .amt s{font-size:24px}
.pstrip p{color:rgba(255,255,255,.72);font-size:15.5px;margin-top:14px;max-width:62ch}
.pstrip .btn-green{background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.pstrip .btn-green:hover{background:var(--mint);color:var(--ink)}
.pstrip .note{color:rgba(255,255,255,.6);margin-top:16px}
.pstrip .note svg{color:#5ED6AE}
.pstrip :focus-visible{outline-color:#fff}

@media(max-width:1100px){
  .mhero .hero-grid{grid-template-columns:420px minmax(0,1fr)}
  .mh1{font-size:56px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{gap:36px}
  .chatstage .chat{width:100%}
}
@media(max-width:760px){
  .mhero .hero-grid{grid-template-columns:1fr;padding-bottom:56px}
  .mhero .eyebrow{margin-bottom:20px}
  .mh1{font-size:42px}
  .mhero .stage{margin-top:40px}
  .mhero .stage.chatstage{min-height:0}
  .chatstage .chat{font-size:13px}
  .feats{grid-template-columns:1fr;gap:14px}
  .feat{padding:22px 20px 24px}
  .split{grid-template-columns:1fr;gap:28px}
  .split .h2{font-size:32px}
  .split li{font-size:15px}
  .exgrid{grid-template-columns:1fr}
  .tpl{font-size:14.5px;padding:18px 18px}
  .pdf{padding:22px 18px}
  .pdf .tots{width:100%}
  .soon{grid-template-columns:1fr;padding:26px 22px;gap:20px}
  .soon h3{font-size:26px}
  .pstrip{grid-template-columns:1fr;padding:30px 22px;gap:24px;border-radius:22px}
  .pstrip .amt b{font-size:48px}
  .pstrip .amt s{font-size:20px}
  .pstrip .btn{width:100%}
}