/* =========================================================
   DEMO-ONLY STYLES
   Everything in this file exists for Trenton's pitch to the
   restaurant and is NOT part of the deliverable site. Before
   handing the project off, delete this file, delete demo-fab.js,
   delete proposal.html, and remove the two <link>/<script> tags
   that reference them on each page.
   ========================================================= */

/* ---------- Floating "See Proposal" button ----------
   Rebuilt: the previous version used a rotating conic-gradient ring
   clipped by overflow:hidden inside a fixed+transformed ancestor —
   that combination made Chrome's clipping unreliable and the ring
   rendered as a stray rotating line instead of a clean circle. This
   version has no rotating element at all: a static multicolor glow
   sits behind a semi-transparent rectangular button via box-shadow,
   which is simpler and can't misrender the same way. */
.demo-fab-wrap{
  position:fixed;
  left:22px; bottom:22px;
  z-index:260;
}
.demo-fab{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.4rem;
  border-radius:14px;                 /* rectangular, not pill */
  border:1px solid rgba(247,237,224,0.16);
  background:rgba(20,17,13,0.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--cream);
  font-family:'Work Sans', sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:
    0 0 22px rgba(194,59,59,0.34),
    0 0 42px rgba(243,167,18,0.24),
    0 0 68px rgba(47,179,217,0.20),
    0 10px 26px rgba(0,0,0,0.4);
  animation:demoFabGlow 6s ease-in-out infinite;
  transition:transform .25s ease, background-color .25s ease;
}
.demo-fab:hover{
  transform:translateY(-3px);
  background:rgba(28,22,16,0.68);
}
.demo-fab .demo-fab-icon{
  width:17px; height:17px; flex:0 0 17px;
  color:var(--marigold);
}
@keyframes demoFabGlow{
  0%,100%{
    box-shadow:
      0 0 22px rgba(194,59,59,0.34),
      0 0 42px rgba(243,167,18,0.24),
      0 0 68px rgba(47,179,217,0.20),
      0 10px 26px rgba(0,0,0,0.4);
  }
  33%{
    box-shadow:
      0 0 24px rgba(243,167,18,0.34),
      0 0 46px rgba(123,63,160,0.24),
      0 0 70px rgba(194,59,59,0.20),
      0 10px 26px rgba(0,0,0,0.4);
  }
  66%{
    box-shadow:
      0 0 24px rgba(47,179,217,0.32),
      0 0 46px rgba(194,59,59,0.22),
      0 0 70px rgba(243,167,18,0.20),
      0 10px 26px rgba(0,0,0,0.4);
  }
}
@media (prefers-reduced-motion: reduce){
  .demo-fab{ animation:none; }
}
@media (max-width:640px){
  .demo-fab-wrap{ left:14px; bottom:14px; }
  .demo-fab{ padding:.75rem 1.1rem; font-size:.74rem; }
}

/* ---------- Proposal page ---------- */
.proposal-back{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(247,237,224,0.55);
  margin-bottom:1.8rem;
  transition:color .2s ease;
}
.proposal-back:hover{ color:var(--marigold); }

.proposal-pill{
  display:inline-block;
  padding:.4rem 1rem;
  border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:1.1rem;
}
.pill-teal    { background:rgba(18,149,143,0.14); border:1px solid rgba(18,149,143,0.4);  color:var(--teal); }
.pill-red     { background:rgba(194,59,59,0.14);  border:1px solid rgba(194,59,59,0.4);   color:#ff8b7a; }
.pill-green   { background:rgba(31,138,61,0.16);  border:1px solid rgba(31,138,61,0.42);  color:#7ee0a0; }
.pill-purple  { background:rgba(123,63,160,0.16); border:1px solid rgba(123,63,160,0.42); color:#d3a6f0; }
.pill-marigold{ background:rgba(243,167,18,0.16); border:1px solid rgba(243,167,18,0.42); color:var(--marigold); }

.proposal-h1{ font-size:clamp(2.4rem,6vw,3.6rem); margin-bottom:1.2rem; }

.proposal-block{ max-width:1040px; margin:0 auto; padding-top:4rem; padding-bottom:4rem; }
.proposal-block h2{ font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:1.1rem; }
.proposal-block > p{
  max-width:720px;
  font-size:1rem; line-height:1.75; color:rgba(247,237,224,0.82); margin-bottom:1.1rem;
}

.proposal-hero-stack{ display:flex; flex-direction:column; gap:1.6rem; max-width:820px; }
.proposal-lede-col p{ font-size:1rem; line-height:1.75; color:rgba(247,237,224,0.82); margin-bottom:1.1rem; }

.why-box{
  padding:1.5rem 1.6rem; border-radius:16px; margin-top:.4rem;
  background:rgba(247,237,224,0.04); border:1px solid var(--line);
}
.why-box h3{ font-family:'Fraunces', serif; font-size:1.15rem; margin-bottom:.6rem; color:var(--cream); }
.why-box p{ font-size:.92rem; line-height:1.6; color:rgba(247,237,224,0.78); margin:0; }

.proposal-benefits{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1rem;
}
.pb-item{
  padding:1.1rem 1.2rem; border-radius:14px;
  background:rgba(247,237,224,0.04); border:1px solid var(--line);
}
.pb-item b{ display:block; font-family:'Fraunces', serif; font-size:.96rem; margin-bottom:.35rem; color:var(--cream); }
.pb-item span{ font-size:.82rem; line-height:1.5; color:rgba(247,237,224,0.68); }

/* ---------- "Live within a week" bordered box ---------- */
.proposal-livebox{
  border:1px solid rgba(247,237,224,0.22);
  border-radius:22px;
  padding:2.4rem 2.4rem 2.2rem;
  background:rgba(247,237,224,0.02);
}
.proposal-livebox p{ max-width:680px; }
.link-btn{
  background:none; border:none; padding:0; margin:0;
  font:inherit; font-weight:700; color:var(--marigold);
  border-bottom:1px solid rgba(243,167,18,0.45);
  cursor:pointer;
}
.link-btn:hover{ color:#ffcf5c; border-color:#ffcf5c; }

/* ---------- Costs ---------- */
.costs-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.1rem; margin-top:1.8rem; align-items:stretch;
}
@media (max-width:900px){ .costs-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .costs-grid{ grid-template-columns:1fr; } }

/* Dream Big sits alone on its own row, one column wide, under the first box */
.costs-bottom-row{ margin-top:1.1rem; }

.cost-box{
  position:relative;
  display:block; text-align:left; width:100%;
  padding:1.5rem 1.4rem; border-radius:18px;
  border:1px solid var(--line); background:rgba(247,237,224,0.03);
  font-family:inherit; color:inherit;
}
.cost-label{
  display:block; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:rgba(247,237,224,0.5); margin-bottom:.6rem;
}
.cost-amount{
  font-family:'Anton'; font-size:1.7rem; color:var(--cream); line-height:1; margin-bottom:.7rem;
}
.cost-amount span{ font-family:'Work Sans'; font-size:.72rem; font-weight:600; opacity:.6; margin-left:.15rem; }
.cost-amount .cost-strike{
  display:block; margin:.4rem 0 0; font-size:.7rem; font-weight:700; color:#7ee0a0; opacity:1;
}
.cost-box ul{ margin:0; padding-left:1.1rem; }
.cost-box ul li{
  font-size:.8rem; line-height:1.55; color:rgba(247,237,224,0.68); margin-bottom:.3rem;
}
.cost-box > p{ font-size:.82rem; line-height:1.55; color:rgba(247,237,224,0.68); margin:0; }

/* =========================================================
   DREAM BIG — expands in place instead of opening a modal
   Collapsed: one column wide, sitting under the first cost box.
   Expanded: widens to the full row, then grows in height to reveal
   the promotion terms, with more of the night sky revealed as it grows.
   ========================================================= */
.cost-dream{
  position:relative;
  width:calc((100% - 2.2rem) / 3);      /* matches one column of the 3-col grid above */
  overflow:hidden; cursor:pointer;
  text-align:left;
  border-color:rgba(243,167,18,0.5);
  background:linear-gradient(160deg, rgba(243,167,18,0.10), rgba(123,63,160,0.08));
  box-shadow:0 0 0 1px rgba(243,167,18,0.08) inset;
  transition:width .55s cubic-bezier(.22,.85,.28,1),
             box-shadow .45s ease,
             border-color .45s ease,
             transform .25s ease;
}
.cost-dream:not(.expanded):hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px -8px rgba(243,167,18,0.35);
}
.cost-dream.expanded{
  width:100%;
  border-color:rgba(243,167,18,0.75);
  box-shadow:0 22px 55px -14px rgba(243,167,18,0.4);
}
@media (max-width:900px){
  .cost-dream{ width:calc((100% - 1.1rem) / 2); }
}
@media (max-width:600px){
  .cost-dream{ width:100%; }
}

/* In normal flow rather than absolutely positioned: .dream-head is a
   positioned ancestor, so an absolute badge would anchor to it and collide
   with the price beneath. Flowing it avoids that class of bug entirely. */
.cost-badge{
  display:inline-block; margin-bottom:.7rem;
  font-family:'Anton'; font-size:.58rem; letter-spacing:.04em;
  padding:.32rem .7rem; border-radius:999px;
  background:linear-gradient(120deg,#f2b705,#e8622a); color:#241503;
  white-space:nowrap;
}

/* Night sky: dim by default, fully revealed on hover and while expanded */
.cost-dream .pc-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 26% 68%, #fff, transparent),
    radial-gradient(1px 1px at 38% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 40%, #fff, transparent),
    radial-gradient(1px 1px at 63% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 74% 24%, #fff, transparent),
    radial-gradient(1px 1px at 84% 58%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 91% 14%, #fff, transparent),
    radial-gradient(1px 1px at 18% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 90%, #fff, transparent),
    radial-gradient(1px 1px at 8% 52%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 33% 36%, #fff, transparent),
    radial-gradient(1px 1px at 57% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 69% 46%, #fff, transparent),
    radial-gradient(1px 1px at 96% 74%, #fff, transparent),
    linear-gradient(165deg, #0b1030 0%, #1a1450 55%, #241a4d 100%);
  opacity:0;
  transition:opacity .55s ease;
  z-index:0;
}
.cost-dream:hover .pc-sky{ opacity:1; }
.cost-dream.expanded .pc-sky{ opacity:1; }

.cost-dream .pc-star{
  position:absolute; top:20%; left:-8%;
  width:3px; height:3px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 2px rgba(255,255,255,0.9), 0 0 24px 6px rgba(255,224,150,0.5);
  opacity:0; z-index:1;
}
/* Trail rotated to match the exact travel angle (atan2(90,230) ~= 21.4deg)
   and pivoted from the end touching the star, so it trails the real path. */
.cost-dream .pc-star::after{
  content:'';
  position:absolute; top:50%; right:100%;
  width:64px; height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.85));
  transform-origin:100% 50%;
  transform:translateY(-50%) rotate(21.4deg);
}
.cost-dream .pc-star-2{ top:58%; }
.cost-dream:hover .pc-star,
.cost-dream.expanded .pc-star{ animation:shootingStar 2.6s ease-in .15s infinite; }
.cost-dream.expanded .pc-star-2{ animation:shootingStar 3.4s ease-in 1.3s infinite; }
@keyframes shootingStar{
  0%   { opacity:0; transform:translate(0,0); }
  4%   { opacity:1; }
  22%  { opacity:1; transform:translate(230px,90px); }
  26%  { opacity:0; transform:translate(240px,94px); }
  100% { opacity:0; }
}

.dream-head, .dream-details{ position:relative; z-index:2; }
.cost-dream .cost-label, .cost-dream .cost-amount, .cost-dream .dream-head p{
  position:relative; z-index:2;
}
.cost-dream .cost-amount{ color:#ffd873; }
.cost-more{
  display:inline-block; margin-top:.7rem;
  font-size:.76rem; font-weight:700; color:var(--marigold);
}

/* Height animation: 0fr -> 1fr grows to the content's natural height,
   which a guessed max-height cannot do reliably. */
.dream-details{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,.85,.28,1);
}
.cost-dream.expanded .dream-details{ grid-template-rows:1fr; }
.dream-details-inner{ overflow:hidden; }

.dream-rule{
  border:none; border-top:1px solid rgba(247,237,224,0.18);
  margin:1.4rem 0 1.2rem;
}
.dream-lede{ font-size:.94rem; color:rgba(247,237,224,0.85); margin-bottom:1rem; }
.dream-details h4{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--marigold);
  margin:1.4rem 0 .6rem;
}
.dream-details p{ font-size:.92rem; line-height:1.6; color:rgba(247,237,224,0.85); margin-bottom:.9rem; }
.dream-details a{ color:var(--marigold); font-weight:700; }
.dream-details a:hover{ color:#ffcf5c; }
.dream-link-line{ margin-bottom:.4rem; }

.dreambig-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 .4rem;
}
@media (max-width:560px){ .dreambig-stats{ grid-template-columns:1fr; } }
.db-stat{
  padding:1.1rem; border-radius:14px;
  background:rgba(243,167,18,0.10); border:1px solid rgba(243,167,18,0.35);
}
.db-stat b{ display:block; font-family:'Anton'; font-size:1.3rem; color:#ffd873; margin-bottom:.3rem; }
.db-stat span{ font-size:.78rem; line-height:1.4; color:rgba(247,237,224,0.8); }
.db-terms{ margin:0 0 1rem; padding-left:1.2rem; }
.db-terms li{ font-size:.88rem; line-height:1.55; color:rgba(247,237,224,0.82); margin-bottom:.5rem; }

@media (prefers-reduced-motion: reduce){
  .cost-dream .pc-star{ animation:none !important; opacity:0; }
  .cost-dream, .dream-details{ transition:none; }
}

.proposal-cta{ text-align:center; padding-top:1rem; padding-bottom:5rem; }
.proposal-cta .btn{ font-size:.9rem; padding:1.05rem 2.6rem; }

/* ---------- Getting Started process popup ---------- */
.process-steps{ margin-top:1.4rem; }
.process-step{ position:relative; display:flex; gap:1rem; padding-bottom:1.5rem; }
.process-step:last-child{ padding-bottom:0; }
.process-step:not(:last-child)::before{
  content:''; position:absolute; left:16px; top:34px; bottom:-2px; width:2px;
  background:linear-gradient(180deg, rgba(243,167,18,0.5), rgba(247,237,224,0.1));
}
.process-num{
  position:relative; z-index:1; flex:0 0 33px; width:33px; height:33px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Anton'; font-size:.95rem; color:#241503;
  background:linear-gradient(140deg, var(--marigold), #e8622a);
}
.process-text b{ display:block; font-family:'Fraunces', serif; font-size:1rem; color:var(--cream); margin-bottom:.2rem; }
.process-text p{ font-size:.86rem; line-height:1.5; color:rgba(247,237,224,0.7); margin:0; }

/* ---------- Dream Big details popup ---------- */
.dreambig-box h4{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--marigold);
  margin:1.4rem 0 .6rem;
}
.dreambig-box p{ font-size:.92rem; line-height:1.6; color:rgba(247,237,224,0.82); margin-bottom:.9rem; }
.dreambig-box a{ color:var(--marigold); font-weight:700; }
.dreambig-box a:hover{ color:#ffcf5c; }
.dreambig-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 .4rem;
}
@media (max-width:480px){ .dreambig-stats{ grid-template-columns:1fr; } }
.db-stat{
  padding:1.1rem 1.1rem; border-radius:14px;
  background:rgba(243,167,18,0.08); border:1px solid rgba(243,167,18,0.3);
}
.db-stat b{ display:block; font-family:'Anton'; font-size:1.3rem; color:#ffd873; margin-bottom:.3rem; }
.db-stat span{ font-size:.78rem; line-height:1.4; color:rgba(247,237,224,0.75); }
.db-terms{ margin:0 0 1rem; padding-left:1.2rem; }
.db-terms li{ font-size:.88rem; line-height:1.55; color:rgba(247,237,224,0.78); margin-bottom:.5rem; }


/* =========================================================
   LANDING / GATEWAY PAGE
   The client's very first touchpoint, sent as a direct link
   before they ever see the real site. Not linked from anywhere
   inside the site itself. Fits one viewport, no scrolling —
   sizes are intentionally compact and vh-aware rather than
   using the site's normal section padding.
   ========================================================= */
.landing-body{ padding-top:0; overflow:hidden; height:100vh; }
.landing-main{
  height:100vh;
  padding-top:var(--banner-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:.9rem;
  padding-left:5vw; padding-right:5vw;
  box-sizing:border-box;
}
.landing-h1{
  font-size:clamp(1.8rem, 4.2vw, 3rem);
  max-width:720px;
  line-height:1.05;
}
.landing-sub{
  max-width:560px;
  font-size:clamp(.85rem, 1.4vw, 1rem);
  line-height:1.55;
  color:rgba(247,237,224,0.75);
  margin:0;
}
.landing-sub b{ color:var(--marigold); }

.landing-frame{
  display:block;
  width:min(58vw, 620px);
  margin-top:.4rem;
  border-radius:14px;
  overflow:hidden;
  background:#0c0a08;
  border:1px solid rgba(247,237,224,0.16);
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.6), 0 0 50px -18px rgba(243,167,18,0.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.landing-frame:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px -12px rgba(0,0,0,0.65), 0 0 60px -14px rgba(243,167,18,0.45);
}
.landing-frame-bar{
  display:flex; align-items:center; gap:6px;
  padding:.55rem .7rem;
  background:#161210;
}
.lfb-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.landing-frame img{ width:100%; display:block; }

.landing-cta{ margin-top:.3rem; font-size:.85rem; padding:.9rem 2.2rem; }

/* Compact fallback for short viewports so nothing gets clipped */
@media (max-height:760px){
  .landing-main{ gap:.6rem; }
  .landing-h1{ font-size:clamp(1.5rem,3.6vw,2.2rem); }
  .landing-sub{ font-size:.82rem; }
  .landing-frame{ width:min(46vw, 460px); }
}
@media (max-width:640px){
  .landing-frame{ width:88vw; }
  .landing-main{ gap:.7rem; }
}