/* Page hooks: receipt, steam, calendar, profile check (landing/new-pages) */

/* hero with a side object */
.hero--split .wrap{display:grid;gap:28px}
.hero-side{position:relative;z-index:1;max-width:420px;width:100%;margin-inline:auto}
@media (min-width:1000px){
  .hero--split .wrap{grid-template-columns:1.25fr .75fr;align-items:center;gap:40px}
  .hero--split .vf{margin:0}
}
.js .hero .hero-side.fade{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js.ready .hero .hero-side.fade{opacity:1;transform:none}

/* ---------- receipt ---------- */
.receipt{background:var(--paper);color:var(--ink);padding:22px 20px 18px;font-size:14.5px;position:relative;
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;padding-bottom:30px;transform:rotate(-1.2deg);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.receipt-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed #b9b8b1;padding-bottom:12px}
.receipt-head b{font-size:22px;font-weight:800}
.receipt-head span{font-size:12px;color:var(--muted)}
.receipt ol{list-style:none;margin:6px 0}
.receipt li{border-bottom:1px dashed #d4d3cc}
.receipt summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:10px 0;min-height:44px;align-items:center}
.receipt summary::-webkit-details-marker{display:none}
.receipt summary span::before{content:"+";display:inline-block;width:16px;color:var(--muted);transition:transform .3s}
.receipt details[open] summary span::before{transform:rotate(45deg)}
.receipt summary i{font-style:normal;font-size:12.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.receipt details p{font-size:13.5px;color:var(--muted);padding:0 16px 12px;line-height:1.9}
.receipt-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:2px solid var(--ink);margin-top:4px}
.receipt-total b{font-size:20px;font-weight:800}
.receipt-foot{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- versus ---------- */
.versus{display:grid;gap:18px;margin-top:44px}
@media (min-width:760px){.versus{grid-template-columns:1fr 1fr}}
.vs-col{border:1px solid var(--line);background:var(--white);padding:16px}
.vs-col .ph img{height:100%}
.vs-col ul{list-style:none;margin-top:16px}
.vs-col li{padding:8px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.vs-col .ph img{filter:grayscale(1) contrast(.9) brightness(.9)}
.vs-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;margin-bottom:12px;color:var(--muted)}
.vs-col--on{border-color:var(--ink)}
.vs-col--on li{color:var(--ink)}
.vs-col--on .ph img{filter:grayscale(1) contrast(1.1)}
.vs-col--on .vs-tag{color:var(--ink);font-weight:700}

/* ---------- steam ---------- */
.steam{position:absolute;width:34%;left:50%;bottom:52%;transform:translateX(-50%);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;pointer-events:none;opacity:.9}
.steam path{stroke-dasharray:140;stroke-dashoffset:140;animation:steam 3.6s var(--ease) infinite}
.steam path:nth-child(2){animation-delay:.6s}
.steam path:nth-child(3){animation-delay:1.2s}
@keyframes steam{0%{stroke-dashoffset:140;opacity:0;transform:translateY(12px)}25%{opacity:1}70%{opacity:.8}100%{stroke-dashoffset:-140;opacity:0;transform:translateY(-18px)}}
.steam-cup{aspect-ratio:4/5;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.steam-cup img{height:100%}
.steam-cup .steam{bottom:46%;width:40%}
.steam--sm{width:30%;bottom:48%}
.steam--final{position:relative;display:block;width:70px;height:90px;left:auto;bottom:auto;transform:none;margin:0 auto 6px}

/* ---------- 5 shots ---------- */
.shots{list-style:none;display:grid;gap:22px;margin-top:48px}
@media (min-width:700px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.shots{grid-template-columns:repeat(5,1fr)}}
.shot .ph{aspect-ratio:3/4}
.shot .ph img{height:100%}
.shot h3{font-size:18px;margin-top:14px}
.shot p{color:var(--muted-d);font-size:14.5px;margin-top:4px}

/* ---------- calendar ---------- */
.cal{background:var(--paper);color:var(--ink);padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cal-head b{font-size:22px;font-weight:800}
.cal-head span{font-size:12px;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{font-size:11px;color:var(--muted);text-align:center;padding-bottom:4px}
.cal-d{aspect-ratio:1;border:1px solid var(--line);background:var(--white);position:relative;display:flex;align-items:flex-start;justify-content:flex-start;padding:3px 5px;font-size:11px}
.cal-d em{font-style:normal;color:var(--muted)}
.cal-d--empty{border-color:transparent;background:none}
.cal-d--rec{background:var(--ink);border-color:var(--ink)}
.cal-d--rec em{color:#fff}
.cal-d--rec .dot{position:absolute;inset:0;margin:auto;width:10px;height:10px}
.cal-d--review{border:1.5px dashed var(--ink)}
.reel-mark{position:absolute;inset-inline-end:5px;bottom:5px;width:9px;height:14px;border:1.5px solid var(--ink);border-radius:2px;display:block}
.cal-d--post{border-color:var(--ink)}
.rv-mark{display:inline-block;width:12px;height:12px;border:1.5px dashed var(--ink)}
.cal-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.cal-key span{display:inline-flex;align-items:center;gap:6px}
.cal-key .dot{width:8px;height:8px}
.cal-key .reel-mark{position:static;width:8px;height:12px}
/* fill as you scroll */
.cal--fill .cal-d--post{border-color:var(--line)}
.cal--fill .reel-mark{opacity:0;transform:translateY(6px) scale(.6);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * .18s + .4s)}
.cal--fill .cal-d--post{transition:border-color .5s;transition-delay:calc(var(--i,0) * .18s + .4s)}
.month-cal.in .cal--fill .reel-mark{opacity:1;transform:none}
.month-cal.in .cal--fill .cal-d--post{border-color:var(--ink)}
.month-walk{display:grid;gap:36px;margin-top:48px}
@media (min-width:900px){.month-walk{grid-template-columns:1fr 1fr;align-items:start}.month-cal{position:sticky;top:90px}}
.month-steps{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-d)}
.month-steps li{padding:24px 0;border-bottom:1px solid var(--line-d)}
.month-steps .ltr{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.1em;color:var(--rec)}
.month-steps h3{font-size:20px;margin-top:6px}
.month-steps p{color:var(--muted-d);margin-top:4px}

/* ---------- report ---------- */
.report{background:var(--paper);color:var(--ink);padding:22px 20px;border-top:3px solid var(--rec)}
.report-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.report-head b{font-size:19px}
.report-head span{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:30px}
.report dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.report dt{color:var(--muted)}
.report dd{font-weight:700}
.report-foot{font-size:13px;color:var(--muted);margin-top:10px}

/* ---------- profile check ---------- */
.pchecks{display:grid;gap:18px;margin-top:44px}
@media (min-width:760px){.pchecks{grid-template-columns:1fr 1fr}}
.pcheck{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--white);padding:22px 20px;transition:border-color .4s}
.pcheck header{display:flex;align-items:center;gap:12px}
.pc-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ddd,#999);flex:none}
.pcheck header b{display:block;font-size:16px;text-align:start}
.pcheck header small{color:var(--muted);font-size:12.5px}
.pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.pc-stats div{border:1px solid var(--line);padding:10px 12px}
.pc-stats dt{font-size:12.5px;color:var(--muted)}
.pc-stats dd{font-size:22px;font-weight:800}
.pc-scan{width:100%;justify-content:center}
.pc-result{display:none;margin-top:16px}
.pcheck.scanned .pc-result{display:block;animation:pcin .5s var(--ease)}
.pcheck.scanned .pc-scan{display:none}
@keyframes pcin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pc-verdict{font-weight:800;font-size:17px}
.pc-result ul{list-style:none;margin-top:8px}
.pc-result li{padding:7px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.pcheck--fake.scanned{border-color:var(--rec)}
.pcheck--fake.scanned .pc-verdict{color:var(--rec)}
.pcheck--real.scanned{border-color:var(--ink)}
.pc-scanline{position:absolute;inset-inline:0;top:-4px;height:3px;background:var(--rec);box-shadow:0 0 18px 4px rgba(224,39,31,.5);opacity:0}
.pcheck.scanning .pc-scanline{animation:scan 1s linear}
@keyframes scan{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
/* steam: readable over light photos */
.steam{stroke-width:4.5;filter:drop-shadow(0 0 5px rgba(0,0,0,.55))}
@keyframes steam{0%{stroke-dashoffset:140;opacity:0;transform:translateY(10px)}15%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-140;opacity:0;transform:translateY(-16px)}}
.steam-cup::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,transparent 40%,rgba(0,0,0,.35));pointer-events:none}
.steam-cup .steam{z-index:1}
.receipt summary i{font-family:inherit;letter-spacing:0}