/* ==========================================================================
   VERANDA FILMS — websites.html page styles (F30 site builder, F31 auto demo, F32 what's in the box)
   Loaded after site.css. Only page-specific rules live here.
   ========================================================================== */

/* ---------- Builder layout (F30) ------------------------------------------ */
.builder-grid{
  display:grid;grid-template-columns:minmax(320px, 420px) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 4.5rem);align-items:start;
}
@media (max-width:1023px){.builder-grid{grid-template-columns:1fr}}

.builder-form{display:grid;gap:1.35rem}
.builder-form fieldset{border:0;padding:0;margin:0;min-width:0}
.builder-form legend{padding:0;margin-bottom:.55rem;float:left;width:100%}
.builder-form .chips{clear:both}
.chips--palette .chip{padding:.45rem .7rem;font-size:var(--fs-xs, .8rem)}
.builder-form .field--typing .input{border-color:var(--teal);box-shadow:0 0 0 3px rgba(91,240,225,.12)}
.chip{position:relative}
.chip.is-pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid var(--teal);
  animation:chipPulse .9s var(--ease-out) forwards;pointer-events:none;
}
@keyframes chipPulse{0%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
.chip-swatch{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.chip:has(input:checked) .chip-swatch{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 2px rgba(10,15,30,.4)}

.builder-status{
  display:flex;align-items:center;gap:.7rem;min-height:1.6em;
  color:var(--cream-60);
}
.builder-status .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 0 rgba(91,240,225,.5);animation:statusDot 1.4s ease-out infinite}
.builder-status.is-ready .dot{background:var(--gold);animation:none;box-shadow:0 0 12px rgba(255,208,138,.6)}
.builder-status .txt{transition:opacity .35s}
.builder-status.is-swap .txt{opacity:0}
@keyframes statusDot{0%{box-shadow:0 0 0 0 rgba(91,240,225,.55)}100%{box-shadow:0 0 0 10px rgba(91,240,225,0)}}

.builder-hint{margin-top:-.4rem}
.builder-actions{display:grid;gap:.7rem;padding-top:.6rem;border-top:1px solid var(--line)}
.builder-actions .fine{max-width:34ch}
.builder-reset{justify-self:start}

/* stage: laptop + overlapping phone */
.builder{overflow-x:clip}
.builder-preview{min-width:0}
.builder-stage{position:relative;padding-bottom:9%}
.builder-stage .device-laptop{width:83%}
.builder-stage .device-phone{position:absolute;right:0;bottom:0;width:22%;min-width:140px;max-width:220px;margin:0;z-index:2}
.builder-stage .device-phone .device-screen{width:100%;height:100%}
.builder-labels{display:grid;grid-template-columns:1fr auto;justify-items:start;margin-top:.6rem;color:var(--cream-50)}
.builder-labels span:last-child{justify-self:end}
.builder-labels span{display:inline-flex;align-items:center;gap:.5rem}
.builder-labels i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
@media (max-width:1023px){
  .builder-stage{padding-bottom:0;display:grid;gap:2rem;justify-items:center}
  .builder-stage .device-laptop{width:100%}
  .builder-stage .device-phone{position:relative;right:auto;bottom:auto;width:52%;max-width:220px;min-width:0}
}
@media (max-width:639px){
  .builder-stage .device-phone{width:60%}
}

/* the frames are containers so the mini site scales itself */
.builder .device-screen{container-type:size;container-name:screen}

/* ---------- Mini landing page inside the frames --------------------------- */
.mini{
  --m-bg:#0A0F1E;--m-surface:#10172B;--m-fg:#F4EFE6;--m-muted:rgba(244,239,230,.62);
  --m-line:rgba(244,239,230,.12);--m-acc:#FFD08A;--m-acc2:#FF6A4A;--m-on-acc:#0A0F1E;
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--m-bg);color:var(--m-fg);
  font-family:var(--font-body);
  transition:background-color .9s var(--ease-out),color .9s var(--ease-out);
  overflow:hidden;
}
.mini[data-palette="ocean"]{--m-bg:#06161E;--m-surface:#0B222C;--m-fg:#EEF7F5;--m-muted:rgba(238,247,245,.62);--m-line:rgba(238,247,245,.12);--m-acc:#5BF0E1;--m-acc2:#2D7CFF;--m-on-acc:#06161E}
.mini[data-palette="sand"]{--m-bg:#F3EADB;--m-surface:#FFFDF8;--m-fg:#241C12;--m-muted:rgba(36,28,18,.62);--m-line:rgba(36,28,18,.12);--m-acc:#C97A3D;--m-acc2:#E9A66A;--m-on-acc:#FFFDF8}
.mini[data-palette="night"]{--m-bg:#050710;--m-surface:#0B0F1C;--m-fg:#E9EDF7;--m-muted:rgba(233,237,247,.58);--m-line:rgba(233,237,247,.12);--m-acc:#9AD7FF;--m-acc2:#5BF0E1;--m-on-acc:#050710}

.mini *{box-sizing:border-box;transition:background-color .9s var(--ease-out),color .9s var(--ease-out),border-color .9s var(--ease-out)}

/* pieces assemble one by one (F31) */
.mini .piece{opacity:0;transform:translateY(6cqw);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),background-color .9s var(--ease-out),color .9s var(--ease-out),border-color .9s var(--ease-out)}
.mini .piece.on{opacity:1;transform:none}

/* nav */
.mini-nav{
  display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  padding:2.2cqw 3.6cqw;font-size:1.9cqw;border-bottom:1px solid var(--m-line);
  flex:none;
}
.mini-brand{font-family:var(--font-display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.mini-links{display:flex;gap:3cqw;color:var(--m-muted);font-size:1.7cqw;letter-spacing:.06em}
.mini-btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--m-acc);color:var(--m-on-acc);border-radius:999px;
  padding:.55em 1.3em;font-weight:600;font-family:var(--font-display);letter-spacing:.04em;white-space:nowrap;
  background-image:linear-gradient(135deg,var(--m-acc),var(--m-acc2));
}
.mini-btn--sm{font-size:1.7cqw}

/* hero */
.mini-hero{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--m-surface)}
.mini-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease-out);transform:scale(1.02)}
.mini-hero-img.is-front{opacity:1;animation:miniKen 14s linear infinite alternate}
@keyframes miniKen{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.mini-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,18,.05) 0%,rgba(6,9,18,.15) 45%,rgba(6,9,18,.78) 100%)}
.mini[data-palette="sand"] .mini-hero-shade{background:linear-gradient(180deg,rgba(36,28,18,.02) 0%,rgba(36,28,18,.12) 45%,rgba(36,28,18,.72) 100%)}
.mini-film-tag{
  position:absolute;top:3cqw;right:3.6cqw;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase;
  color:#F4EFE6;background:rgba(6,9,18,.5);border:1px solid rgba(244,239,230,.2);border-radius:999px;padding:.45em 1em;
}
.mini-film-tag i{width:.9em;height:.9em;border-radius:50%;background:var(--m-acc);display:inline-block;box-shadow:0 0 0 0 var(--m-acc);animation:miniRec 1.6s ease-out infinite}
@keyframes miniRec{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m-acc) 60%,transparent)}100%{box-shadow:0 0 0 .8em transparent}}
.mini-hero-copy{position:absolute;left:3.6cqw;right:3.6cqw;bottom:3cqw;color:#F4EFE6;display:grid;gap:1cqw;justify-items:start}
.mini-h1{
  font-family:var(--font-display);font-weight:500;font-size:4.4cqw;line-height:1.05;letter-spacing:-.02em;
  max-width:78%;text-wrap:balance;margin:0;
}
.mini-h1 .mini-line{display:inline-block;transition:opacity .45s,transform .6s var(--ease-out)}
.mini-h1 .mini-line.is-out{opacity:0;transform:translateY(.4em)}
.mini-h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--m-acc)}
.mini-sub{font-size:1.8cqw;color:rgba(244,239,230,.78);margin:0;letter-spacing:.02em}
.mini-hero .mini-btn{font-size:1.8cqw;margin-top:.4cqw}
.mini-caret{display:inline-block;width:.06em;height:.9em;background:currentColor;vertical-align:-.1em;margin-left:.08em;animation:miniCaret 1s steps(2) infinite}
@keyframes miniCaret{50%{opacity:0}}

/* sections row */
.mini-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--m-line);border-top:1px solid var(--m-line);flex:none}
.mini-sec{padding:2cqw 3.6cqw;background:var(--m-bg);display:grid;gap:.9cqw;align-content:start;min-width:0}
.mini-sec-k{font-family:var(--font-mono);font-size:1.3cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--m-acc)}
.mini-sec-t{font-family:var(--font-display);font-weight:500;font-size:2.3cqw;letter-spacing:-.01em;margin:0}
.mini-sec-s{font-size:1.5cqw;line-height:1.4;color:var(--m-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-sec-visual{height:5.6cqw;border-radius:.6cqw;overflow:hidden;position:relative;background:var(--m-surface);margin-top:.4cqw}
.mini-sec-visual img{width:100%;height:100%;object-fit:cover;opacity:.9}
.mini-play{position:absolute;inset:0;display:grid;place-items:center}
.mini-play i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:rgba(244,239,230,.9);display:grid;place-items:center}
.mini-play i::after{content:"";width:0;height:0;border-left:1.1cqw solid #0A0F1E;border-top:.7cqw solid transparent;border-bottom:.7cqw solid transparent;margin-left:.25cqw}
.mini-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;height:100%}
.mini-rooms i{border-radius:.5cqw;background:linear-gradient(135deg,var(--m-acc),var(--m-acc2));opacity:.28;display:block}
.mini-rooms i:nth-child(2){opacity:.5}.mini-rooms i:nth-child(3){opacity:.75}
.mini-map{width:100%;height:100%;display:block}
.mini-map .land{fill:var(--m-acc);opacity:.16}
.mini-map .road{stroke:var(--m-acc);stroke-width:.6;fill:none;opacity:.5}
.mini-map .pin{fill:var(--m-acc2)}
.mini-map .ring{fill:none;stroke:var(--m-acc2);stroke-width:.6;transform-origin:center;transform-box:fill-box;animation:miniPing 2.2s ease-out infinite}
@keyframes miniPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* footer inside frame */
.mini-foot{
  display:flex;justify-content:space-between;align-items:center;gap:2cqw;flex:none;
  padding:1.5cqw 12cqw 1.5cqw 3.6cqw;border-top:1px solid var(--m-line);
  font-family:var(--font-mono);font-size:1.35cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);
}
.mini-foot b{font-weight:400;color:var(--m-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.mini-foot .mini-foot-links{display:flex;gap:2.4cqw;white-space:nowrap}

/* skeleton before assembly: hairline scaffold so the visitor sees the empty page first */
.mini::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--m-line),var(--m-line)) 0 9%/100% 1px no-repeat,
    linear-gradient(var(--m-line),var(--m-line)) 0 75%/100% 1px no-repeat,
    linear-gradient(var(--m-line),var(--m-line)) 0 92%/100% 1px no-repeat;
  transition:opacity .8s;
}
.mini.is-built::before{opacity:0}

/* phone layout: tall & narrow screens stack the three sections */
@container screen (max-aspect-ratio: 0.8){
  .mini-nav{padding:6cqw 5cqw 3.5cqw;font-size:3.4cqw}
  .mini-brand{max-width:60%;letter-spacing:.14em}
  .mini-links{display:none}
  .mini-btn--sm{font-size:3cqw}
  .mini-hero{flex:0 0 46cqh}
  .mini-hero-copy{left:5cqw;right:5cqw;bottom:5cqw;gap:2.2cqw}
  .mini-h1{font-size:8.6cqw;max-width:100%}
  .mini-sub{font-size:3.4cqw}
  .mini-hero .mini-btn{font-size:3.3cqw;margin-top:1cqw}
  .mini-film-tag{font-size:2.6cqw;top:4cqw;right:5cqw}
  .mini-sections{grid-template-columns:1fr;flex:1 1 auto;min-height:0;overflow:hidden}
  .mini-sec{grid-template-columns:1fr auto;grid-template-areas:"k v" "t v" "s v";column-gap:4cqw;row-gap:1cqw;padding:3.6cqw 5cqw;align-items:center}
  .mini-sec-k{grid-area:k;font-size:2.3cqw}
  .mini-sec-t{grid-area:t;font-size:4.4cqw}
  .mini-sec-s{grid-area:s;font-size:2.9cqw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mini-sec-visual{grid-area:v;width:22cqw;height:15cqw;margin:0;border-radius:1.6cqw}
  .mini-play i{width:6.5cqw;height:6.5cqw}
  .mini-play i::after{border-left-width:2.2cqw;border-top-width:1.4cqw;border-bottom-width:1.4cqw;margin-left:.5cqw}
  .mini-foot{padding:3.4cqw 5cqw 5cqw;font-size:2.4cqw}
  .mini-foot .mini-foot-links{gap:3.6cqw}
  .mini::before{background:
    linear-gradient(var(--m-line),var(--m-line)) 0 12%/100% 1px no-repeat,
    linear-gradient(var(--m-line),var(--m-line)) 0 58%/100% 1px no-repeat,
    linear-gradient(var(--m-line),var(--m-line)) 0 90%/100% 1px no-repeat}
}

/* ---------- What's in the box (F32) --------------------------------------- */
.box-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:1023px){.box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.box-grid{grid-template-columns:1fr}}
.box-card{display:grid;gap:1rem;align-content:start;min-height:100%}
.box-card--dial{grid-row:span 2;display:grid;justify-items:center;text-align:center;align-content:center;gap:1.2rem;background:var(--ink)}
@media (max-width:1023px){.box-card--dial{grid-row:auto;grid-column:span 2}}
@media (max-width:639px){.box-card--dial{grid-column:auto}}
/* fifth small card becomes a full-width closing strip under the 2×2 (no lonely card + hole) */
@media (min-width:640px){
  .box-grid > .box-card:last-child{grid-column:1 / -1;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:1.4rem;padding:1.3rem 1.7rem;min-height:0}
  .box-grid > .box-card:last-child .h3{white-space:nowrap}
  .box-grid > .box-card:last-child .card-icon{margin:0}
}
.box-card .h3{font-size:clamp(1.15rem, 1.6vw, 1.4rem)}
.box-card p{margin:0}

.dial{position:relative;width:clamp(180px, 22vw, 240px);aspect-ratio:1}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.dial .track{fill:none;stroke:var(--line-2);stroke-width:5}
.dial .arc{fill:none;stroke:url(#dial-grad);stroke-width:5;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3}
.dial .glow{fill:none;stroke:var(--teal);stroke-width:14;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;opacity:.12;filter:blur(6px)}
.dial-num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:clamp(3rem, 5vw, 4.4rem);letter-spacing:-.03em;line-height:1;
}
.dial-num small{display:block;font-size:.72rem;letter-spacing:.16em;color:var(--cream-60);margin-top:.6rem;text-transform:uppercase}
.dial-num .grad-text{background:var(--grad-ab);-webkit-background-clip:text;background-clip:text;color:transparent}
html.noanim .dial .arc{stroke-dashoffset:6.8}
html.noanim .dial .glow{stroke-dashoffset:6.8}

.box-price{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:center;margin-top:clamp(2rem, 4vw, 3.5rem);padding-top:clamp(1.5rem, 3vw, 2.5rem);border-top:1px solid var(--line)}
@media (max-width:859px){.box-price{grid-template-columns:1fr}}