/* Claresto marketing site: "Miami night" chrome for the inner pages (product, pricing).
   Loads after site.css and restyles the nav, hero, pills, cards, CTA strip and footer to match
   /assets/landing/landing.css. Copy and layout classes are unchanged. Ported 2026-10-14. */
:root{--sunset-1:#ff6b6b;--sunset-2:#ff2d95;--sunset-3:#ff9f43;--aqua:#2dd4bf;--mint:#9ff3dc;--blush:#ffc6d9;
  --night:#03040f;--night-2:#0e0b2a;--night-3:#15113a;--soft:#cfcfe0;
  --sunset:linear-gradient(100deg,var(--sunset-3) 0%,var(--sunset-1) 42%,var(--sunset-2) 100%);--ease:cubic-bezier(.2,.8,.2,1)}
::selection{background:var(--sunset-2);color:#fff}
:focus-visible{outline:2px solid var(--accent-3);outline-offset:3px;border-radius:8px}
body::before{background:radial-gradient(900px 500px at 80% -5%,rgba(99,102,241,.16),transparent 60%),radial-gradient(700px 500px at 0% 10%,rgba(255,45,149,.07),transparent 55%)}

/* ---------------- banner + nav ---------------- */
.preview-banner{background:linear-gradient(90deg,rgba(99,102,241,.16),rgba(255,45,149,.10));border-bottom:1px solid rgba(165,180,252,.12);color:#dcdcf5}
.nav{background:rgba(5,5,14,.55);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(165,180,252,.10)}
.nav-inner{height:64px;padding:0 24px;gap:22px}
.brand{min-height:44px;font-size:1.14rem}
.nav-links{gap:2px;margin-left:8px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px}
.nav-links a.active{background:rgba(255,255,255,.06)}
.nav-cta{gap:6px}

/* ---------------- buttons ---------------- */
.btn{min-height:44px;padding:0 20px;font-size:.94rem;letter-spacing:-.005em;background:rgba(22,22,25,.72);transition:transform .25s var(--ease),border-color .2s,background-color .2s,box-shadow .2s}
.btn:hover{transform:none}
.btn-primary{background:var(--accent);box-shadow:0 12px 32px -12px rgba(99,102,241,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:transparent}
.btn-lg{min-height:54px;padding:0 26px;font-size:1rem;border-radius:12px}

/* ---------------- hero: night sky with the gradient mesh ---------------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:72px 0 56px;
  background:
    radial-gradient(900px 620px at 8% -10%,rgba(99,102,241,.38),rgba(99,102,241,0) 70%),
    radial-gradient(760px 560px at 92% 0%,rgba(255,45,149,.26),rgba(255,45,149,0) 70%),
    radial-gradient(820px 420px at 50% 100%,rgba(255,159,67,.14),rgba(255,159,67,0) 70%),
    linear-gradient(180deg,var(--night) 0%,#0a0920 60%,var(--bg) 100%)}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,11,0),var(--bg))}
.hero .display{max-width:none;margin:22px auto 0;color:#fbfbff;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  font-size:clamp(2.2rem,1rem + 3.4vw,3.9rem);line-height:1.02;font-weight:850;letter-spacing:-.042em;word-spacing:.05em;text-wrap:balance}
.hero .display .ln{display:block}
.hero .display .pill{display:inline-block;position:relative;isolation:isolate;margin-top:.12em;padding:.03em .24em .11em;border-radius:.26em;color:#17051a}
.hero .display .pill::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sunset);box-shadow:0 26px 80px -22px rgba(255,45,149,.75),0 0 0 1px rgba(255,255,255,.12) inset;transform-origin:0 50%}
.hero .lead{color:#cdcde0}
.hero-note{color:#9b9bb4}

/* ---------------- pills ---------------- */
.eyebrow{min-height:32px;padding:0 13px 0 10px;border-radius:999px;background:rgba(14,11,42,.62);border:1px solid rgba(165,180,252,.26);color:#e7e7f7;font-size:.74rem;letter-spacing:.12em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sunset);box-shadow:0 0 10px rgba(255,45,149,.8);flex:none}
.plan-tag,.ptag,.badge-ai,.pcard h3 .ptag{background:var(--sunset);color:#1c0718;border:0;border-radius:999px;font-weight:800}
.aud-toggle{background:rgba(14,11,42,.62);border-color:rgba(165,180,252,.26);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.aud-toggle button{min-height:36px;min-width:44px;padding:0 16px}
html:not(.aud-brand) .aud-toggle [data-set-aud="agency"],html.aud-brand .aud-toggle [data-set-aud="brand"]{box-shadow:0 8px 24px -10px var(--accent)}
.jump a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(165,180,252,.16);background:rgba(255,255,255,.025);font-weight:650;color:var(--text)}
.jump a:hover{border-color:var(--accent-2)}
.jump a b{color:var(--accent-2);margin-right:0}

/* ---------------- sections, headings, cards ---------------- */
.band-line{border-top-color:rgba(165,180,252,.10)}
.h2{letter-spacing:-.04em;line-height:1.04}
.shot{border-color:rgba(165,180,252,.16);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 90px -34px rgba(99,102,241,.5)}
.shot-bar{background:#141418}
.ex{border-left-color:var(--sunset-2);background:rgba(255,45,149,.07)}
.ex b{color:var(--blush)}
.cmp-wrap,.faq details,.sblock,.catch,.mcard{border-color:rgba(165,180,252,.12)}
.cmp thead th.us{color:var(--accent-3)}

/* pricing cards: the featured (recommended) card follows the audience toggle and gets the conic border */
.pcard{border-radius:var(--radius-lg)}
.pcard .pop{top:-13px;border-radius:999px;background:var(--sunset);color:#1c0718;font-size:.7rem;letter-spacing:.06em;padding:4px 12px}
.pcard .price{font-size:2.5rem;font-weight:850;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.pcard .price small{font-size:1rem;letter-spacing:0}
.pcard .who{min-height:2.9em;line-height:1.45}
@property --cl-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
html:not(.aud-brand) .pcard[data-plan="agency"],html.aud-brand .pcard[data-plan="brand"]{border-color:transparent;background:transparent;isolation:isolate;box-shadow:0 30px 90px -40px rgba(255,45,149,.55)}
html:not(.aud-brand) .pcard[data-plan="agency"]::before,html.aud-brand .pcard[data-plan="brand"]::before{content:'';position:absolute;inset:-1px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--cl-angle),#6366f1,#ff2d95,#ff9f43,#2dd4bf,#818cf8,#6366f1)}
html:not(.aud-brand) .pcard[data-plan="agency"]::after,html.aud-brand .pcard[data-plan="brand"]::after{content:'';position:absolute;inset:.5px;z-index:-1;border-radius:calc(var(--radius-lg) - 1px);background:linear-gradient(180deg,#191539,#111113 55%)}
.roi-card{border-radius:24px;border-color:rgba(165,180,252,.16);background:linear-gradient(135deg,#101024,#0c0c10 60%)}
.roi-stat.hl{border-color:rgba(165,180,252,.3);background:rgba(99,102,241,.12)}
.roi-field:focus-within{border-color:var(--accent-2)}

/* ---------------- CTA strip: night gradient, the striped sun, the horizon line ---------------- */
.ctastrip{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:92px 28px 150px;background:linear-gradient(180deg,#120f33,#0b0a18);border:1px solid rgba(165,180,252,.18)}
.ctastrip::before{content:'';position:absolute;left:50%;bottom:-392px;width:540px;height:540px;margin-left:-270px;border-radius:50%;z-index:-1;opacity:.92;
  background:linear-gradient(180deg,#ffd27a 0%,#ff9f43 8%,#ff6b6b 17%,#ff2d95 27%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 13%,transparent 13% 14.2%,#000 14.2% 17.4%,transparent 17.4% 19%,#000 19% 21.6%,transparent 21.6% 23.6%,#000 23.6% 25.4%,transparent 25.4% 28%,#000 28%);
  mask-image:linear-gradient(180deg,#000 0 13%,transparent 13% 14.2%,#000 14.2% 17.4%,transparent 17.4% 19%,#000 19% 21.6%,transparent 21.6% 23.6%,#000 23.6% 25.4%,transparent 25.4% 28%,#000 28%)}
.ctastrip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:320px;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,159,67,.7),rgba(255,45,149,.7),transparent) left bottom/100% 2px no-repeat,
             radial-gradient(450px 160px at 50% 100%,rgba(255,45,149,.38),rgba(255,45,149,0))}
.ctastrip .lead{color:var(--muted)}

/* ---------------- footer ---------------- */
.footer{padding:52px 0 36px;margin-top:0}
.footer p{font-size:.88rem;max-width:36ch;line-height:1.55}
.fcol h5{font-size:.8rem;font-weight:650;color:var(--dim);text-transform:none;letter-spacing:0;margin-bottom:6px}
.fcol a{display:flex;align-items:center;min-height:34px;font-size:.92rem;margin-bottom:0}
.footnote{font-size:.8rem}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.aud-brand) .pcard[data-plan="agency"]::before,html.aud-brand .pcard[data-plan="brand"]::before{animation:cl-spin 7s linear infinite}
  @keyframes cl-spin{to{--cl-angle:360deg}}
  .hero .display .pill::before{animation:cl-pill .95s var(--ease) both;animation-delay:.3s}
  @keyframes cl-pill{from{transform:scaleX(0)}to{transform:none}}
  .ctastrip::before{transition:transform 1.2s var(--ease),opacity 1.2s ease}
  .ctastrip.reveal:not(.in)::before{transform:translateY(120px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- responsive ---------------- */
@media(max-width:560px){
  .nav-inner{padding:0 16px;gap:12px}
  .nav-cta .btn-primary{padding:0 14px;font-size:.88rem}
  .hero{padding:48px 0 40px}
  .hero .display{font-size:2rem;max-width:none;letter-spacing:-.04em}
  .aud-toggle button{min-height:44px;padding:0 14px}
  .ctastrip{border-radius:24px;padding:60px 18px 120px}
  .ctastrip::before{width:400px;height:400px;margin-left:-200px;bottom:-292px}
  .fcol a{min-height:44px}
  .footnote a,.credit a,.f-miami{display:inline-flex;align-items:center;min-height:44px}
}