/* =====================================================================
   OFFER SUBPAGES — booking-engine.html / social.html / ecom.html
   Shared layout + the Booking Engine phone sequence.
   ===================================================================== */

.sub-hero{padding:104px 0 40px}
.sub-hero h1{max-width:18ch}
.included{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow, 0 22px 50px -38px rgba(33,63,120,.5))}
.tier .k{margin-bottom:6px}
.tier .p{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px}
.tier .p small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.tier ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.tier li{font-size:15px;color:var(--ink);padding-left:22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--slate);opacity:.6}
.tier{position:relative}
.tier.rec{border-color:var(--slate);box-shadow:0 0 0 3px rgba(62,78,102,.12)}
/* the recommended tier floats, gently and continuously — the live 1.0 site's bob, verbatim (§9) */
.tier .badge{position:absolute;top:-12px;left:20px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--slate);color:#fff;border-radius:100px;padding:4px 10px}
/* only the recommended card nearest the viewport centre floats (Round 4 §6). motion.js
   sets .float on that one; --amp cross-fades the amplitude on and off instead of snapping. */
@property --amp{syntax:'<number>';inherits:false;initial-value:0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-9px * var(--amp,0)))}}
@media (prefers-reduced-motion:no-preference){
  .tier.rec{--amp:0;animation:bob 2.8s ease-in-out infinite;transition:--amp .7s ease}
  .tier.rec.float{--amp:1}
}
/* /pricing */
.price-sec{padding-top:40px}
.price-sec + .price-sec{padding-top:24px}
.price-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.price-head h2{margin-top:12px;font-size:clamp(23px,3vw,32px)}
.price-sec .included{margin-top:28px}
.plain{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:15.5px;margin-top:22px}
@media (max-width:860px){.included{grid-template-columns:1fr}}

/* =====================================================================
   THE PHONE SEQUENCE = THE HERO (booking-engine.html)
   One pinned section, straight under the nav. Copy on the left (headline,
   "She calls. You're asleep. It gets handled anyway.", what's in it, CTA),
   the phone on the right with the missed call already on its screen.
   b1  copy fades; phone moves LEFT and gets somewhat bigger; the first two
       messages play as it moves.            (one scroll)
   b2  the rest of the messages.             (one more small scroll)
   b3  the spin. The payoff line + mug run on the SAME clock as the spin
       (same start, same duration) so they arrive with it; mid-blur the
       screen becomes the owner's lock screen and the booking lands on it.
   No zoom-to-fullscreen. Round 3 §2/§4/§14.
   ===================================================================== */
.phoneseq{
  --travel:clamp(560px,70vh,900px);   /* px scroll budget for three beats — never vh alone */
  position:relative;padding:0;
}
.phoneseq::after{content:"";display:block;height:var(--travel)}   /* the scroll budget as content, not padding — sticky needs content-box room */
main > section:first-of-type.phoneseq{padding-top:0}   /* it IS the hero; the pin clears the nav itself */
.phoneseq-pin{position:sticky;top:0;min-height:min(100vh,760px);overflow:hidden;box-sizing:border-box;
  padding:88px 0 28px;display:grid;place-items:center;perspective:1400px}   /* content-height pin; capped so it never becomes a tall empty canvas */
.phoneseq-pin > .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px}
.ps-copy h1{margin-top:16px;max-width:15ch;font-size:clamp(32px,4.4vw,52px)}
.ps-line{margin-top:22px;font-size:clamp(19px,2.2vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink);max-width:24ch}
.ps-line .k{display:block;margin-bottom:6px}
.ps-copy .whatsin{display:block;margin-top:24px}
.ps-copy .whatsin .k{display:block;margin:0 0 8px}
.ps-copy .whatsin li{font-size:13.5px;padding:7px 12px 7px 10px}
.ps-cta{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ps-cta .hint{font-size:13.5px;color:var(--muted)}

/* ---------- the device: iPhone 17 (CSS chassis; a real frame PNG can still
   be dropped in as .frame and it will sit on top) ---------- */
.device{position:relative;width:clamp(250px,17vw,320px);aspect-ratio:9/19.5;margin:0 auto;
  transform-origin:50% 50%;will-change:transform,filter;
  border-radius:16.5%/7.6%;
  background:linear-gradient(135deg,#3a3a3c,#1c1c1e 45%,#2c2c2e);
  box-shadow:0 0 0 1.5px #4a4a4c,0 0 0 3px #111,0 40px 80px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.device .frame{position:absolute;inset:-2%;width:104%;height:104%;object-fit:contain;pointer-events:none;z-index:4}
/* side buttons */
.device::before,.device::after{content:"";position:absolute;background:#2a2a2c;border-radius:2px}
.device::before{left:-3px;top:22%;width:3px;height:16%;box-shadow:0 22% 0 0 #2a2a2c}   /* volume */
.device::after{right:-3px;top:27%;width:3px;height:12%}                                  /* side button */
.screen{position:absolute;inset:2.2% 3.2%;background:#000;border-radius:14.5%/6.7%;overflow:hidden;
  color:#fff;font-size:12px;display:flex;flex-direction:column;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif}
/* Dynamic Island */
.island{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:34%;height:3.4%;background:#000;border-radius:100px;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.04)}
/* status bar */
.status{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 0;font-size:11.5px;font-weight:600;height:36px}
.status .sig{display:flex;gap:4px;align-items:center}
.status .sig i{display:inline-block;width:14px;height:8px;background:
  linear-gradient(90deg,#fff 0 20%,transparent 20% 27%,#fff 27% 47%,transparent 47% 54%,#fff 54% 74%,transparent 74% 81%,#fff 81%);
  clip-path:polygon(0 60%,20% 60%,20% 40%,47% 40%,47% 20%,74% 20%,74% 0,100% 0,100% 100%,0 100%)}
.status .bat{width:24px;height:11px;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;position:relative}
.status .bat::after{content:"";position:absolute;inset:1.5px;right:20%;background:#fff;border-radius:2px}
/* iOS Messages header */
.bar{display:flex;flex-direction:column;align-items:center;padding:4px 10px 6px;
  background:rgba(28,28,30,.72);backdrop-filter:blur(20px) saturate(180%);border-bottom:.5px solid rgba(255,255,255,.12)}
.bar .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#8e8e93,#636366);
  display:grid;place-items:center;font-size:14px;font-weight:600;color:#fff}
.bar b{display:block;font-size:11px;font-weight:500;margin-top:3px}
.bar b::after{content:" ›";color:#8e8e93}
.bar span{display:none}
.thread{flex:1;padding:6px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;background:#000;overflow:hidden}
.bub{max-width:80%;padding:5.5px 9px;border-radius:15px;line-height:1.28;opacity:0;transform:translateY(8px);font-size:11.5px}
.bub.in{align-self:flex-start;background:#26252a;color:#fff;border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:5px}
.bub.sys{align-self:center;background:none;color:#8e8e93;font-size:10px;padding:2px 0}
.bub.missed{align-self:center;background:#1c1c1e;color:#ff453a;font-size:10.5px;padding:5px 10px;border-radius:10px}
.delivered{align-self:flex-end;color:#8e8e93;font-size:9.5px;margin:-3px 4px 0 0;opacity:0}
/* iOS composer */
.compose{display:flex;align-items:center;gap:8px;padding:6px 10px 18px;background:rgba(28,28,30,.72);backdrop-filter:blur(20px)}
.compose .plus{width:26px;height:26px;border-radius:50%;background:#3a3a3c;display:grid;place-items:center;font-size:16px;color:#e5e5ea;line-height:1}
.compose .field{flex:1;height:28px;border:1px solid #48484a;border-radius:100px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#8e8e93;font-size:11.5px}
.compose .field i{width:14px;height:14px;border-radius:50%;background:#3a3a3c}
.homebar{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:36%;height:4px;border-radius:100px;background:#fff;opacity:.85}

/* ---- the owner's phone: a lock screen on the same device, hidden until the spin ---- */
.oscreen{position:absolute;inset:2.2% 3.2%;border-radius:14.5%/6.7%;overflow:hidden;opacity:0;color:#fff;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  background:radial-gradient(120% 80% at 30% 0%,#3E4E66 0%,#1E2431 55%,#0d1017 100%)}
.oscreen .ostatus{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 18px 0;font-size:11px;font-weight:600}
.oscreen .olock{position:absolute;top:8.5%;left:50%;transform:translateX(-50%);width:11px;height:9px;border:1.5px solid rgba(255,255,255,.85);border-radius:2px}
.oscreen .olock::before{content:"";position:absolute;left:1.5px;top:-6px;width:5px;height:6px;border:1.5px solid rgba(255,255,255,.85);border-bottom:0;border-radius:4px 4px 0 0}
.oscreen .odate{position:absolute;top:12%;left:0;right:0;text-align:center;font-size:12px;font-weight:600;opacity:.9}
.oscreen .otime{position:absolute;top:15.5%;left:0;right:0;text-align:center;font-size:56px;font-weight:600;letter-spacing:-.02em;line-height:1}
.oscreen .onotif{position:absolute;left:6%;right:6%;top:39%;background:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(160%);
  border-radius:18px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;
  opacity:0;transform:translateY(-18px) scale(.96)}
.oscreen .ico{width:30px;height:30px;border-radius:8px;background:var(--ivory);display:grid;place-items:center}
.oscreen .ico img{width:22px;height:22px}
.oscreen .t{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600}
.oscreen .t span{font-weight:400;opacity:.7;font-size:10.5px}
.oscreen .b{font-size:11.5px;line-height:1.35;opacity:.95;margin-top:1px}

/* ---- the payoff line + the mug, right of the phone ---- */
.coffee{position:absolute;left:47%;right:3%;top:50%;transform:translateY(calc(-50% + 12px));text-align:left;opacity:0;pointer-events:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.coffee h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1}
.coffee-cta{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;pointer-events:auto}
.coffee-cta span{font-size:13.5px;color:var(--muted)}
.mug{width:clamp(200px,15vw,300px);height:auto;overflow:visible;filter:drop-shadow(0 18px 24px rgba(44,56,77,.18))}
.mug .art path{stroke-dasharray:80;stroke-dashoffset:80}
.mug .art{transform-origin:128px 76px;transform:rotate(-30deg) scale(.7);opacity:0}
.mug .steam path{opacity:0}
/* fallback-only owner card (see below); hidden whenever the sequence runs */
.owner{display:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;width:min(400px,80vw);
  box-shadow:0 24px 60px -30px rgba(33,63,120,.6)}
.owner .k{margin-bottom:4px}
.owner b{display:block;font-size:15px}
.owner span{display:block;font-size:13px;color:var(--muted)}

/* ---- keyframes ---- */
/* the spin: violently quick then a long slow tail. Front-loaded via keyframe placement.
   Holds b1's position and size (--cx from JS, --big = --fill × .85). */
@keyframes psSpin{
  0%  {transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(0deg);   filter:none}
  12% {transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(-190deg);filter:url(#mb-spin)}
  28% {transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(-290deg);filter:url(#mb-spin-soft)}
  50% {transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(-335deg);filter:none}
  75% {transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(-354deg)}
  100%{transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1)) rotateY(-360deg)}
}
/* the payoff on the spin's clock: same 2.2s, linear so % = time. Invisible while the
   phone is at its fastest, arriving as the blur clears (~7%–30% of the spin). */
@keyframes coffeeIn{0%,7%{opacity:0;transform:translateY(calc(-50% + 18px))}30%{opacity:1;transform:translateY(-50%)}100%{opacity:1;transform:translateY(-50%)}}
/* latte art: the lines draw themselves while the whole thing settles in from a swirl */
@keyframes latteDraw{to{stroke-dashoffset:0}}
@keyframes latteSwirl{0%{transform:rotate(-30deg) scale(.7);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.55}100%{opacity:0;transform:translateY(-14px)}}
@keyframes notifLand{0%{opacity:0;transform:translateY(-18px) scale(.96)}70%{opacity:1;transform:translateY(3px) scale(1)}100%{opacity:1;transform:none}}

/* ---- beats (motion.js), data-beats="8,30,56" on the section ---- */
@media (prefers-reduced-motion:no-preference) and (min-width:861px){
  .ps-copy{transition:opacity .6s,transform .6s}
  .phoneseq.b1 .ps-copy{opacity:0;transform:translateX(-30px)}
  /* b1: left + somewhat bigger, and the first two messages while it moves */
  .device{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
  .phoneseq.b1 .device{transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1))}
  .bub{transition:opacity .45s ease,transform .45s ease}
  .bub.m0{opacity:1;transform:none}                                  /* the missed call is already there */
  .phoneseq.b1 .m1{opacity:1;transform:none;transition-delay:.35s}
  .phoneseq.b1 .m2{opacity:1;transform:none;transition-delay:1.05s}
  /* b2: the rest */
  .phoneseq.b2 .m3{opacity:1;transform:none;transition-delay:.05s}
  .phoneseq.b2 .m4{opacity:1;transform:none;transition-delay:.75s}
  .phoneseq.b2 .m5{opacity:1;transform:none;transition-delay:1.4s}
  .delivered{transition:opacity .4s ease}
  .phoneseq.b2 .delivered{opacity:1;transition-delay:2.1s}
  /* b3: the spin, the payoff on the same clock, the handoff to the owner's phone */
  .phoneseq.b3 .device{animation:psSpin 2.2s cubic-bezier(.12,.9,.18,1) forwards}
  .phoneseq.b3 .coffee{animation:coffeeIn 2.2s linear forwards;pointer-events:auto}
  .phoneseq.b3 .mug .art{animation:latteSwirl 1.1s cubic-bezier(.16,1,.3,1) 1.4s forwards}
  .phoneseq.b3 .mug .a1{animation:latteDraw .6s ease-out 1.5s forwards}
  .phoneseq.b3 .mug .a2{animation:latteDraw 1s ease-in-out 1.8s forwards}
  .phoneseq.b3 .mug .steam path{animation:steam 3.2s ease-in-out 2.4s infinite}
  .phoneseq.b3 .mug .steam path:nth-child(2){animation-delay:3.2s}
  .phoneseq.b3 .mug .steam path:nth-child(3){animation-delay:2.9s}
  .screen,.oscreen{transition:opacity 0s .05s}
  .phoneseq.b3 .screen{opacity:0}
  .phoneseq.b3 .oscreen{opacity:1}
  .phoneseq.b3 .onotif{animation:notifLand .8s cubic-bezier(.34,1.4,.64,1) 1.75s forwards}
  /* played once, stays played (data-once). Once the spin has finished motion.js
     adds .spun: the end pose becomes a plain transform so it can transition. */
  .phoneseq.spun .device{animation:none;transform:translateX(calc(var(--cx,-25vw) - 16vw)) scale(var(--big,1.1))}
  /* scrolled back to the top: the heading comes back and the phone returns to its
     resting spot — still the owner's lock screen, nothing rewinds or replays */
  .phoneseq.at-top .ps-copy{opacity:1;transform:none}
  .phoneseq.at-top .device{transform:none!important}
  .phoneseq.at-top .coffee{opacity:0!important}
}

/* ---- fallbacks: stacked, static, honest ---- */
@media (prefers-reduced-motion:reduce),(max-width:860px){
  .phoneseq{height:auto;padding:96px 0 72px}
  .phoneseq::after{display:none}
  .phoneseq-pin{position:static;height:auto;padding:0;overflow:visible;display:block;perspective:none}
  .phoneseq-pin > .wrap{grid-template-columns:1fr;gap:26px}
  .device{width:min(300px,80vw)}
  .bub{opacity:1;transform:none}
  .delivered{opacity:1}
  .oscreen{display:none}
  .coffee{position:static;opacity:1;transform:none;margin:22px auto 0;pointer-events:auto;grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .mug{width:180px}
  .mug .art{transform:none;opacity:1}
  .mug .art path{stroke-dashoffset:0}
  .mug .steam path{opacity:.55}
  .owner{display:block;margin:18px auto 0}
  .ps-copy{opacity:1}
}

/* ---- "what's in it": the scannable list under the booking-engine hero ---- */
.whatsin{margin-top:34px;display:flex;align-items:flex-start;gap:16px 22px;flex-wrap:wrap}
.whatsin .k{margin:8px 0 0}
.whatsin ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;max-width:760px}
.whatsin li{font-size:14.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:8px 14px 8px 12px;display:flex;align-items:center;gap:8px}
.whatsin li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--slate);opacity:.7}