/* SlotFlow — one-page site. Look and vocabulary reused from the approved sales kit
   (sales_kit/work_v2/src/common.css): ivory canvas, 1px hairlines, 2-3px corners,
   copper as the only accent, Cormorant Garamond (display) + Manrope (body).
   Fonts are self-hosted from ./fonts — no CDN, no tracking, no JavaScript. */
@font-face{font-family:Corm;src:url(fonts/CormorantGaramond-subset.woff) format("woff"),url(fonts/CormorantGaramond.ttf) format("truetype");font-display:swap}
@font-face{font-family:Man;src:url(fonts/Manrope-subset.woff) format("woff"),url(fonts/Manrope.ttf) format("truetype");font-display:swap}

:root{
  --ink:#2A2622; --soft:#7A6F64; --muted:#9A938C;
  --copper:#B8733F; --copper-ink:#9C6531;
  --ivory:#FAF7F2; --white:#FFFFFF; --charcoal:#1C1B1A;
  --line:#E6DED3; --line-2:#D9CFC2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Man,sans-serif;color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.6;
  padding-bottom:5.75rem;            /* keeps the fixed mobile bar off the content */
}
img{max-width:100%;display:block;height:auto}
a{color:var(--copper-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Corm,serif;font-weight:400;letter-spacing:.005em;line-height:1.15}
h1{font-size:2.1rem}
h2{font-size:1.65rem;margin-bottom:.5rem}
h3{font-size:1.15rem;margin-bottom:.25rem}
.kicker{font-family:Man;color:var(--copper-ink);letter-spacing:.22em;font-size:.72rem;
  text-transform:uppercase;margin-bottom:.6rem;font-weight:600}
.lead{font-size:1.02rem;color:var(--soft);margin-bottom:1.25rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
section{padding:2.25rem 0}
.hairline{border-top:1px solid var(--line)}

/* ---- top bar ---- */
.topbar{background:var(--charcoal);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.85rem;padding-bottom:.85rem}
.brand img{height:26px;width:auto;display:block}
.band-logo{display:block;height:22px;width:auto;margin-bottom:1.1rem}
.topbar a{color:#fff;font-size:.85rem;border:1px solid rgba(255,255,255,.35);
  border-radius:2px;padding:.35rem .8rem;white-space:nowrap}
.topbar a:hover{text-decoration:none;border-color:var(--copper);color:#fff}

/* ---- hero ---- */
.hero{padding-top:2rem}
.hero h1 span{display:block;color:var(--copper-ink)}
.hero .shots{margin-top:1.5rem}
.hero .shot{border:1px solid var(--line);border-radius:2px;width:100%}
.hero .phone{border:3px solid var(--charcoal);border-radius:3px;width:100%;margin-top:1rem}
.hero picture{display:block}
.enlarge{display:block}
.enlarge:hover{text-decoration:none}
.cap{font-size:.78rem;color:var(--muted);margin:.45rem 0 .9rem}
.cap a{color:var(--copper-ink)}
.phone-wrap{display:block;margin-top:1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.btn{display:inline-block;font-family:Man;font-size:.92rem;font-weight:600;
  border-radius:2px;padding:.75rem 1.15rem;border:1px solid var(--copper-ink)}
.btn-primary{background:var(--copper);border-color:var(--copper);color:#fff}
.btn-primary:hover{text-decoration:none;background:var(--copper-ink)}
.btn-ghost{background:transparent;color:var(--copper-ink)}
.btn-ghost:hover{text-decoration:none;background:var(--ivory)}

/* ---- W-5b · phones: the booking screenshot is shown smaller and centred ----------
   About 70 % of the content width; desktop keeps the W-5 over-the-corner layout. */
@media (max-width:899px){
  .hero .phone-wrap{width:70%;margin-left:auto;margin-right:auto}
}

/* ---- proof (W-5: ONE card per statistic) ----------------------------------
   The old rule was `.stats div`, which also matched the inner `.num` <div> and drew a
   second border around every number.  Now only the direct children (the cards) carry
   the box: big number + small label, one card each. */
.proof{background:var(--ivory)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.5rem}
.stats > div{background:var(--white);border:1px solid var(--line);border-radius:2px;padding:1rem 1.15rem}
.num{font-family:Corm,serif;font-size:2.15rem;color:var(--copper-ink);line-height:1.05}
.stats small{display:block;font-size:.82rem;color:var(--soft);margin-top:.35rem;line-height:1.35}

/* ---- what you get ---- */
.grid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:.5rem}
.grid > div{border-top:2px solid var(--copper-ink);padding-top:.7rem}
.grid p{font-size:.92rem;color:var(--soft)}

/* ---- price ---- */
.plans{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.75rem}
.plan{border:1px solid var(--line);border-radius:2px;padding:1.1rem 1.15rem}
.plan.main{border:2px solid var(--copper);background:var(--ivory)}
.price{font-family:Corm,serif;font-size:2.1rem;color:var(--copper-ink);line-height:1}
.price small{font-size:1rem;color:var(--soft);font-family:Man}
ul.ticks{list-style:none;margin-top:.6rem}
ul.ticks li{padding-left:1.1rem;position:relative;margin-bottom:.35rem;font-size:.92rem;color:var(--ink)}
ul.ticks li:before{content:"";position:absolute;left:0;top:.62rem;width:.42rem;height:.42rem;background:var(--copper)}
.box{background:var(--ivory);border:1px solid var(--line);border-radius:2px;padding:1.1rem 1.15rem;margin-top:1rem}
.note{border-left:3px solid var(--copper);padding:.35rem 0 .35rem 1rem;margin-top:1rem;font-size:.92rem}
.steps{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.75rem}
.steps div{background:var(--ivory);border-radius:2px;padding:.85rem 1rem;font-size:.9rem}
.steps b{font-family:Corm,serif;font-size:1.05rem;color:var(--copper-ink);display:block;margin-bottom:.15rem}
.fineprint{font-size:.78rem;color:var(--muted);margin-top:1rem}

/* ---- contact band ---- */
.contact{background:var(--charcoal);color:#fff;margin-top:1.5rem}
.contact h2{color:#fff}
.contact p{color:#B8B1A9}
.contact a{color:var(--copper)}
.contact-inner{display:block}
.qr{display:none}                     /* desktop only, as briefed */
.contact-list{margin-top:.9rem;font-size:1rem;line-height:1.9}
.contact-list b{font-family:Corm,serif;font-size:1.15rem;color:#fff;display:block}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;padding:1.1rem 0 1.5rem}

/* ---- the small fixed button on phones ---- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--charcoal);
  padding:.6rem .9rem;display:flex;justify-content:center;
  box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.mobile-bar a{background:var(--copper);color:#fff;border-radius:2px;padding:.7rem 1.1rem;
  font-weight:600;font-size:.95rem;width:100%;text-align:center}
.mobile-bar a:hover{text-decoration:none;background:var(--copper-ink)}

/* ---- brochure page ---- */
.docs{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:.75rem}
.doc{border:1px solid var(--line);border-radius:2px;padding:1rem 1.15rem;background:var(--white)}
.doc h3{margin-bottom:.2rem}
.doc p{font-size:.9rem;color:var(--soft)}

/* ---- desktop: same order, wider, the flyer's proportions ---- */
@media (min-width:900px){
  body{padding-bottom:0;font-size:17px}
  .mobile-bar{display:none}
  h1{font-size:3.1rem}
  h2{font-size:2rem}
  /* W-5: the text column starts at the TOP (it used to be centred against two stacked
     screenshots, which left a large empty gap above the headline on wide screens).
     The dashboard shot is the large one; the phone sits smaller, overlapping its
     lower-right corner instead of stacking under it. */
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;
    align-items:start;max-width:1200px}
  .hero .shots{margin-top:0;position:relative}
  .hero .shot{width:100%}
  .hero .phone{margin-top:0}
  .hero .phone-wrap{position:absolute;right:-14px;bottom:-14px;width:30%;max-width:190px;margin-top:0}
  /* W-5b: this caption used to be a white bordered chip.  Every "Tap to enlarge"
     caption is now the same plain small text (.cap above), desktop and phone. */
  section{padding:3rem 0}
  .stats{grid-template-columns:repeat(4,1fr)}
  .grid{grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}
  .plans{grid-template-columns:1fr 1fr;gap:1.5rem}
  .steps{grid-template-columns:repeat(4,1fr);gap:.75rem}
  .contact-inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem}
  .qr{display:block;width:132px;height:132px;background:#fff;border-radius:3px;padding:.5rem;flex:0 0 auto}
  .qr img{width:100%;height:100%}
  .docs{grid-template-columns:1fr 1fr}
}
@media print{.mobile-bar{display:none}}

/* ---- W-5 · tap to enlarge: a CSS-only lightbox ---------------------------------
   No JavaScript.  The overlay IS a :target panel: a real link opens it (Tab to the
   thumbnail, Enter opens) and the "✕ Close" link is a real link that clears the target.
   The enlarged <img> is the high-resolution copy and carries loading="lazy", so it is
   fetched only when the overlay is displayed (a display:none image is never loaded). */
.lb{display:none}
.lb:target{display:flex;position:fixed;inset:0;z-index:60;background:#0C0B0A;
  align-items:flex-start;justify-content:center;padding:1.1rem;overflow:auto;
  -webkit-overflow-scrolling:touch}
.lb img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 2.2rem);
  margin:0 auto;border:1px solid rgba(255,255,255,.16);border-radius:2px}
.lb-close{position:fixed;top:.75rem;right:.75rem;z-index:61;background:var(--copper);color:#fff;
  font-family:Man;font-weight:600;font-size:.9rem;line-height:1;padding:.6rem .8rem;
  border-radius:2px;border:1px solid var(--copper)}
.lb-close:hover{background:var(--copper-ink);border-color:var(--copper-ink);color:#fff;text-decoration:none}
/* phones: the enlarged copy keeps its NATURAL size inside the scroller, so the page can be
   pinch-zoomed and panned to read it */
@media (max-width:899px){
  .lb:target{display:block;padding:3.4rem .6rem 1.2rem}
  .lb img{max-width:none;max-height:none;margin:0}
}

/* W-5b · phones (<=600 px): the enlarged copy is FITTED to the screen width first, so the whole
   image is visible without panning, and the overlay centres it on the dark background.  The auto
   margins (image top, hint bottom) do the centring and collapse when the image is taller than the
   screen, which keeps the overlay scrollable — pinch-zoom and panning still work. */
.lb-hint{display:none;font-family:Man;font-size:.82rem;line-height:1.4;color:#B8B1A9;
  text-align:center;margin:.6rem 0 auto}
@media (max-width:600px){
  .lb:target{display:flex;flex-direction:column;align-items:center;padding:3.4rem .75rem 1.2rem;
    overflow:auto;-webkit-overflow-scrolling:touch}
  .lb img{width:100%;max-width:100%;max-height:none;margin:auto 0 0}
  .lb-hint{display:block}
}

/* ---- W-5 · contact band: one clear button; the text links stay ----------------- */
.contact .band-cta{color:#fff;border-color:var(--copper);margin-top:1.1rem}
.contact .band-cta:hover{background:var(--copper-ink);border-color:var(--copper-ink);
  color:#fff;text-decoration:none}