:root{--concrete:#E7E6E1;--navy:#1B2A3A;--navy2:#25384C;--slate:#2E3B49;--steel:#4A5563;--line:#C9C8C1;--white:#FFFFFF;--mist:#C9D0D8;--accent:#F5C518;
--display:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;--body:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
/* Brand colors are fixed on purpose: the site looks the same in light and dark mode. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--concrete:#E7E6E1;--navy:#1B2A3A;--white:#FFFFFF}}
:root[data-theme="dark"]{--concrete:#E7E6E1;--navy:#1B2A3A;--white:#FFFFFF}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 104px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--concrete);color:var(--navy);font-family:var(--body);font-size:17px;line-height:1.6}
img,video{max-width:100%;display:block}
a{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0}
h2{font-size:34px;line-height:1.1}
p{margin:0}
.wrap{padding:0 24px;max-width:1200px;margin:0 auto}
section{padding:64px 0}
.stack{display:flex;flex-direction:column;gap:20px}
.lead{color:#2E3B49}
.kicker{font-size:15px;font-weight:600;color:var(--steel)}
.btn{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:17px;padding:17px 20px;border-radius:10px;border:2px solid var(--navy);min-height:44px}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-accent{background:var(--accent);color:var(--navy);font-weight:700;border-color:var(--accent)}
.textlink{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;align-self:flex-start}
/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--concrete);border-bottom:1px solid var(--line)}
.bar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo svg{display:block;flex:none}
.logo b,.logo em{font-style:normal;font-weight:800}
.bar-r{display:flex;align-items:center;gap:6px}
.bar-r .btn{padding:10px 14px;font-size:14px;border-width:0}
.menu-btn{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:0;cursor:pointer;flex:none}
.logo{min-width:0}
.bar-r{flex:none}
@media (max-width:430px){.wrap{padding:0 16px}.bar{gap:8px}.logo{font-size:16px}.logo svg{width:13px;height:22px}.bar-r{gap:2px}.bar-r .btn{padding:9px 11px;font-size:13px;white-space:nowrap}.menu-btn{width:40px;height:40px}}
nav.panel{display:none;border-top:1px solid var(--line);padding:8px 24px 20px}
nav.panel.open{display:block}
nav.panel a{display:block;padding:14px 0;font-size:18px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
/* hero */
.hero{padding:36px 0 56px}
.hero h1{font-size:40px;line-height:1.05;letter-spacing:-.03em;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero h1 span{padding:6px 14px 10px;border-radius:8px;background:#fff}
.hero h1 span:first-child{background:var(--accent)}
.hero h1 span:last-child{background:var(--navy);color:#fff}
.reels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;padding:4px 24px 8px;margin:0 -24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reels::-webkit-scrollbar{display:none}
.reel{flex:0 0 min(62vw,230px);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.frame{aspect-ratio:9/16;border-radius:20px;border:4px solid var(--navy);overflow:hidden;background:var(--slate)}
.frame video,.frame img{width:100%;height:100%;object-fit:cover}
.meta{text-decoration:none;display:flex;flex-direction:column;gap:1px}
.meta b{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.2}
.meta small{font-size:13px;color:var(--steel);line-height:1.35}
.eng{font-style:normal;font-size:13px;font-weight:600;color:var(--navy);line-height:1.35}
.swipe{font-size:13px;color:var(--steel);display:flex;align-items:center;gap:6px}
.note{font-size:14px;color:var(--steel);text-align:center}
/* trades */
.band{background:var(--navy);color:#fff;padding:48px 0}
.band p{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.25}
.band .bandsub{font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;color:var(--mist)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid #5B6B7C;border-radius:999px;padding:8px 16px;font-size:15px}
/* work */
.work{background:#fff}
.filters{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 84px);display:flex;flex-wrap:wrap;gap:8px}
.filter{font-family:inherit;font-size:15px;font-weight:500;padding:8px 16px;min-height:44px;border-radius:999px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.filter[aria-pressed="true"]{background:var(--navy);color:#fff;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
.tile{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.tile[hidden]{display:none!important}
.tile .frame{border-radius:16px}
.page{padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
.back{background:none;border:0;font-family:inherit;font-size:15px;font-weight:600;color:var(--steel);padding:0;cursor:pointer;align-self:flex-start}
.back:hover{color:var(--navy)}
.tile.pending .frame{display:flex;align-items:flex-end;padding:14px;background:linear-gradient(165deg,#33455A,#141C26)}
.tile.pending .frame span{color:#fff;font-family:var(--display);font-weight:800;font-size:15px;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.tile.pending .frame::before{content:"Still coming";position:absolute;top:10px;left:10px;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.04em;color:var(--navy);background:var(--accent);padding:3px 8px;border-radius:999px}
.ph{display:grid;place-items:center;text-align:center;padding:12px;color:#D5D9DE;font-size:13px;line-height:1.4}
.tile .meta b{font-size:16px}
/* scorecard */
.quiz{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px}
.qtop{display:flex;justify-content:space-between;font-size:14px;color:var(--steel)}
.prog{height:8px;border-radius:4px;background:var(--concrete)}.prog div{width:12.5%;height:8px;border-radius:4px;background:var(--navy);transition:width .25s}
.qback{font-family:inherit;font-size:14px;font-weight:600;color:var(--navy);background:none;border:0;padding:10px 0 10px 16px;min-height:44px;cursor:pointer}
.qback[disabled]{visibility:hidden}
.scorebox{background:var(--navy);color:#fff;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:4px}
.scorebox b{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--accent)}
.scorebox span:last-child{font-size:16px;color:#fff;font-weight:600}
.fixes{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.fixes b{display:block}
.q{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3}
.opt{font-family:inherit;font-size:16px;padding:14px;min-height:52px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--navy);text-align:left;cursor:pointer;width:100%}
.opt[aria-pressed="true"]{border:2px solid var(--navy);background:var(--accent);font-weight:600}
.opts{display:flex;flex-direction:column;gap:10px}
/* steps */
.how{background:#fff}
.steps{display:flex;flex-direction:column;gap:28px}
.step{border-top:4px solid var(--navy);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.step:last-child{border-color:var(--accent)}
.step h3{font-size:20px}
.step p{font-size:16px;color:#2E3B49}
.addon{background:var(--concrete);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;font-size:16px}
/* proof */
.proof{background:var(--navy);color:#fff}
.proof .lead{color:var(--mist)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{background:var(--navy2);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--accent)}
.stat span{font-size:14px;line-height:1.45;color:var(--mist)}
/* testimonial */
.testi{display:flex;flex-direction:column;gap:16px;align-items:center}
.tframe{width:min(240px,70vw);aspect-ratio:9/16;border-radius:20px;border:4px solid #fff;overflow:hidden;background:#000}
.tframe video{width:100%;height:100%;object-fit:cover;display:block}
.testi blockquote{width:100%}
blockquote{margin:0;background:#fff;color:var(--navy);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
blockquote p{font-size:18px;font-weight:500;line-height:1.55}
blockquote footer{font-size:14px;color:var(--steel)}
/* tools */
.tools a{display:flex;gap:16px;padding:20px 0;border-top:1.5px solid var(--line);text-decoration:none}
.tools a:first-child{border-top:2px solid var(--navy)}
.tools a:last-child{border-bottom:1.5px solid var(--line)}
.tools svg{flex-shrink:0}
.tools strong{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.25}
.tools span{font-size:15px;line-height:1.5;color:var(--steel)}
/* hooks */
.hooks{background:var(--concrete)}
.hooklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hook{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:start;padding:16px 0;border-top:1.5px solid var(--line)}
.hook[hidden]{display:none!important}
.hn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--steel);padding-top:2px}
.hook p{font-weight:600;font-size:17px;line-height:1.4}
.hook small{display:block;font-size:13px;color:var(--steel);margin-top:4px}
.copy{font-family:inherit;font-size:14px;font-weight:600;min-height:44px;min-width:64px;padding:8px 12px;border-radius:8px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.copy.done{background:var(--navy);color:#fff}
/* forms and plan builder */
.fld{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.fld input,.fld textarea{font-family:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);width:100%;min-height:48px}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.fmsg{font-size:15px;color:var(--steel);min-height:1em}
.fmsg.ok{color:var(--navy);font-weight:600}
.plan{background:#fff}
.cal{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.calhead{font-family:var(--display);font-weight:800;font-size:18px;margin:0 0 10px}
.caldow,.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.caldow span{text-align:center;font-size:11px;font-weight:700;color:var(--steel);padding-bottom:6px}
.calday{aspect-ratio:1;border:0;background:var(--concrete);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:inherit;cursor:pointer;padding:0}
.calday.empty{background:transparent;cursor:default}
.calday b{font-size:13px;font-weight:800;line-height:1}
.calday i{font-style:normal;font-size:9px;font-weight:800;padding:1px 5px;border-radius:999px;line-height:1.4}
.f-reel{background:var(--reel-bg);color:var(--reel-fg)}
.f-carousel{background:var(--car-bg);color:var(--car-fg)}
.f-story{background:var(--sto-bg);color:var(--sto-fg);box-shadow:inset 0 0 0 1.5px var(--sto-ring)}
.calday[aria-pressed="true"]{outline:3px solid var(--navy);outline-offset:2px}
.callegend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;align-items:center;color:var(--steel)}
.callegend b{font-style:normal;font-size:9px;font-weight:800;padding:1px 5px;border-radius:999px;margin-right:4px}
.calday.locked{background:transparent;border:1.5px dashed var(--line);cursor:pointer}
.calday.locked i{opacity:.35}
.calday.locked b{color:var(--steel)}
.calday.building{animation:calpulse 1.1s ease-in-out infinite}
@keyframes calpulse{50%{opacity:.35}}
.calday.today{box-shadow:inset 0 0 0 2.5px var(--accent)}
.dare{background:var(--navy);color:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.dare .dq{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.2;color:#fff}
.dare p{color:#DDE2E8}
.dayview{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.dayview .dtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dayview .dday{font-family:var(--display);font-weight:800;font-size:18px}
.dayview .dhook{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2}
.dayview .dfilm{color:#2E3B49}
.ideas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.idea{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:16px 0;border-top:1.5px solid var(--line)}
.idea .hn{padding-top:3px}
.idea b{display:block;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3}
.idea p{font-size:15px;color:#2E3B49;margin-top:4px}
.idea .tag{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--concrete)}
.reqs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px}
.reqs li{border-top:1.5px solid var(--line);padding-top:12px}
.reqs b{display:block}
.busy{opacity:.6;pointer-events:none}
.fld select{font-family:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);min-height:48px}
.check{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px}
.check li{padding-left:26px;position:relative;line-height:1.45}
.check li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:4px;background:var(--accent);border:2px solid var(--navy)}
.days{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.day{aspect-ratio:1;border-radius:10px;border:2px solid var(--line);background:#fff;font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy);cursor:pointer;font-family:var(--display)}
.day[aria-pressed="true"]{background:var(--accent);border-color:var(--navy)}
.day:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* reviews */
.reviews{background:var(--navy);color:#fff;padding:56px 0 48px}
.reviews h2{font-size:28px}
.bigstars{color:var(--accent);font-size:28px;letter-spacing:4px;line-height:1;margin-top:6px;display:flex;gap:4px;justify-content:center}
.bigstars span{display:inline-block;opacity:0;transform:scale(.4) rotate(-40deg)}
.starsgo .bigstars span{animation:pop .5s cubic-bezier(.2,1.5,.4,1) forwards}
.starsgo .bigstars span:nth-child(2){animation-delay:.1s}
.starsgo .bigstars span:nth-child(3){animation-delay:.2s}
.starsgo .bigstars span:nth-child(4){animation-delay:.3s}
.starsgo .bigstars span:nth-child(5){animation-delay:.4s}
@keyframes pop{60%{opacity:1;transform:scale(1.25) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.bigstars span{opacity:1;transform:none;animation:none!important}}
.reviews .bandsub{font-size:15px;color:var(--mist)}
.revwrap{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:28px;padding:4px 0}
.revwrap::-webkit-scrollbar{display:none}
.revtrack{display:flex;gap:14px;width:max-content;padding:0 24px}
.revtrack.single{width:100%;justify-content:center}
.rev{margin:0;width:280px;flex:none;background:#fff;color:var(--navy);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.rev .stars{color:var(--accent);font-size:18px;letter-spacing:2px;line-height:1}
.rev blockquote{margin:0;font-size:15px;line-height:1.55;color:#2E3B49}
.rev figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:15px}
.rev figcaption span{display:block;font-size:13px;color:var(--steel)}
.challenge{background:var(--navy);color:#fff;border:0}
.challenge .kicker{color:var(--accent)}
.challenge .q,.challenge p{color:#fff}
.challenge .lede{font-size:17px;line-height:1.55;color:var(--mist)}
.challenge .check li{color:#fff}
.challenge .check li::before{background:var(--accent);border-color:var(--accent)}
.challenge .fld{color:#fff}
.challenge .fmsg{color:var(--mist)}.challenge .fmsg.ok{color:var(--accent)}
.challenge p[style*="--steel"]{color:var(--mist)!important}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:st}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:15px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18)}
.steps b{font-family:var(--display);font-weight:800;color:var(--accent)}
.steps span{color:#fff}
[hidden]{display:none!important}
/* countdown, price, overlays */
.count{display:flex;gap:10px;margin:2px 0 4px}
.count div{background:rgba(255,255,255,.1);border-radius:10px;padding:8px 0;flex:1;text-align:center}
.count b{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.count span{font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:.1em}
.was{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.was s{font-family:var(--display);font-weight:700;font-size:22px;color:var(--mist);text-decoration:none;position:relative}
.was s::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:#E5484D;transform:rotate(-8deg);border-radius:2px}
.was em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#E5484D;color:#fff;padding:4px 8px;border-radius:999px}
.spots{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--navy);font-weight:700;padding:5px 12px;border-radius:999px;font-size:14px}
.spots::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.tile .frame{position:relative;overflow:hidden}
.social{position:absolute;right:8px;bottom:10px;display:flex;flex-direction:column;gap:12px;align-items:center}
.social i{display:flex;flex-direction:column;align-items:center;gap:3px;font-style:normal;color:#fff;font-size:10.5px;font-weight:700;max-width:56px;text-align:center;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.social i svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.tile .frame::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
/* spotlights */
.spot{background:#fff}
/* about */
.photo{width:100%;aspect-ratio:891/1000;object-fit:cover;border-radius:18px;background:var(--line)}
/* offer */
.offer{background:#fff}
.card{background:var(--navy);color:#fff;border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:24px}
.price b{display:block;font-family:var(--display);font-weight:800;font-size:32px;line-height:1.15}
.price span{font-size:16px;color:var(--mist)}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.card li{display:flex;gap:12px}
.card li svg{flex-shrink:0;margin-top:2px}
/* final */
.final{background:var(--navy);color:#fff;border-bottom:1px solid #33475B}
.final .textlink{color:#fff;align-self:center}
footer.site{background:var(--navy);color:var(--mist);font-size:15px;padding:40px 0 48px}
footer.site a{color:var(--mist);text-decoration:none}
footer.site .flogo{display:flex!important;flex-direction:row;align-items:center;gap:12px;margin-bottom:4px}
.flogo strong{display:block;letter-spacing:.01em}
.flogo span{display:block}
.site .row{display:flex;gap:24px;flex-wrap:wrap;margin:18px 0}
footer.site strong{font-family:var(--display);font-weight:800;font-size:20px;color:#fff;display:block}
/* larger screens */
@media (min-width:900px){
 h2{font-size:48px}
 .wrap{padding:0 48px}
 section{padding:100px 0}
 .bar{height:84px}
 .hero h1{font-size:56px}
 .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
 .reels{margin:0;padding:0;overflow:visible;scroll-padding-inline:0}
 .reel{flex:1 1 0}
 .reel:nth-child(1){margin-top:32px}.reel:nth-child(3){margin-top:72px}
 .hero-ctas{flex-direction:row!important}.hero-ctas .btn{padding:17px 28px}
 .swipe{display:none}
 .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
 .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
 .two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
 .rev{width:340px}.reviews h2{font-size:40px}
 .testi{flex-direction:row;align-items:stretch;gap:24px}.testi blockquote{flex:1}
 .band .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}
}
/* ---- Plan page: tags, cards, editing, calendar drag ---- */
[id]{scroll-margin-top:84px}
.tags{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.fmt,.pil{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;line-height:1;padding:5px 9px;border-radius:7px;white-space:nowrap;font-style:normal}
.pil{background:var(--concrete);color:var(--navy)}
.pil svg{width:14px;height:14px;flex:none}
.p-educate svg{color:#3F6E96}.p-entertain svg{color:#C4623F}.p-local svg{color:#6A8F5C}.p-convert svg{color:#6F4A7E}
.legend{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--steel)}
.legend div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.status{font-size:14px;color:var(--steel);display:flex;align-items:center;gap:8px}
.status .spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--navy);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.cards{display:flex;flex-direction:column;gap:12px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s}
.pcard.flash{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.phead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pday{font-family:var(--display);font-weight:800;font-size:16px}
.pdate{font-size:13px;color:var(--steel)}
.phead .tags{margin-left:auto}
.phook{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.25;color:var(--navy);margin:0}
.pfilm{font-size:15px;color:#2E3B49;margin:0}
.pacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.pbtn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;min-height:36px}
.pbtn:hover{border-color:var(--navy)}
.pbtn svg{width:15px;height:15px}
.pbtn.solid{background:var(--navy);border-color:var(--navy);color:#fff}
.pnote{font-size:13px;color:var(--steel);margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pnote button{background:none;border:0;padding:0;font:inherit;color:var(--navy);text-decoration:underline;cursor:pointer}
.pedit{display:flex;flex-direction:column;gap:8px}
.pedit label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--steel)}
.pedit textarea{font:inherit;font-size:15px;color:var(--navy);border:1.5px solid var(--line);border-radius:10px;padding:10px;resize:vertical;min-height:44px}
.pedit textarea:focus{outline:none;border-color:var(--navy)}
.pmove{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pmove select{font:inherit;font-size:14px;padding:7px 8px;border:1.5px solid var(--line);border-radius:8px;color:var(--navy);background:#fff;max-width:100%}
.skel{display:block;height:14px;border-radius:6px;background:var(--concrete);animation:calpulse 1.1s ease-in-out infinite}
.skel.big{height:20px;width:85%}
.calday{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.calday .cm{display:flex;align-items:center;gap:2px}
.calday .cm svg{width:11px;height:11px}
.calday{min-width:0;overflow:hidden}
.calday .pil{padding:0;background:none;gap:0}
@media (max-width:400px){.cal{padding:10px}.caldow,.calgrid{gap:4px}}
.calday.dragging{opacity:.35}
.calday.drop{outline:3px dashed var(--accent);outline-offset:1px}
.dragghost{position:fixed;z-index:60;pointer-events:none;width:52px;height:52px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;transform:translate(-50%,-70%);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.calhint{font-size:13px;color:var(--steel);margin:8px 0 0}
.faq details{border-top:1.5px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer;color:var(--navy)}
.faq details p{margin-top:8px;color:#2E3B49}
.teaser{background:#fff}
/* ---- v4 edits ---- */
html,body{overflow-x:clip;max-width:100%}
/* pillar tags: white with colored outline */
.pil{background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:3.5px 7.5px}
.pil.p-educate{border-color:#3F6E96}.pil.p-entertain{border-color:#C4623F}.pil.p-local{border-color:#6A8F5C}.pil.p-convert{border-color:#6F4A7E}
.calday .pil{border:0;padding:0;background:none}
/* header: play tip lines up with the middle of the words */
.logo svg{position:relative;top:2.3px}
.bar-r .btn{display:inline-flex;align-items:center;justify-content:center;min-height:0;height:38px;padding:0 14px;line-height:1}
@media (max-width:430px){.logo svg{top:1.9px}.bar-r .btn{height:34px;padding:0 12px}}
/* footer: name and city stacked tight, same height as the mark */
footer.site .flogo{align-items:center;gap:12px}
footer.site .flogo>div{display:flex;flex-direction:column;gap:5px}
footer.site .flogo strong{line-height:1}
footer.site .flogo span{line-height:1;font-size:15px}
/* forms: short, quiet examples */
.fld ::placeholder{font-size:14px;color:#9AA0A6;opacity:1}
.fld .optl{font-style:normal;font-weight:500;color:var(--steel)}
#planForm{gap:14px}
#planForm .fld{font-size:15px}
#planForm .fld input{min-height:46px;padding:10px 14px}
/* week strip on the plan page */
.wk-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.wkgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calday.wk{aspect-ratio:auto;height:84px;justify-content:flex-start;padding:7px 0 6px;gap:4px;background:var(--concrete)}
.calday.wk .wd{font-size:10px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;line-height:1}
.calday.wk .wn{font-size:12px;font-weight:700;color:var(--navy);line-height:1}
.calday.wk .fmt{width:26px;height:26px;padding:0;justify-content:center;font-size:13px;border-radius:7px}
.calday.wk .pil svg{width:14px;height:14px}
.calday.wk.building{animation:calpulse 1.1s ease-in-out infinite}
.calday.wk.selected{outline:2px solid var(--navy);outline-offset:-2px}
.dragghost.f-reel{background:var(--reel-bg);color:var(--reel-fg)}.dragghost.f-carousel{background:var(--car-bg);color:var(--car-fg)}.dragghost.f-story{background:var(--sto-bg);color:var(--sto-fg);box-shadow:inset 0 0 0 2px var(--sto-ring),0 8px 20px rgba(0,0,0,.25)}
@media (max-width:400px){.wk-wrap{padding:8px}.wkgrid{gap:4px}.calday.wk{height:80px}}
/* hooks: the 4 C's */
.rules{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:18px 18px 16px}
.rules h2{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2;margin:0 0 12px}
.rules ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rules li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.4;color:#2E3B49}
.rules li b{color:var(--navy)}
.rules li svg{width:30px;height:30px;padding:6px;border-radius:8px;background:var(--concrete);color:var(--navy)}
.rules .say{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--accent);color:var(--navy);font-weight:800;font-family:var(--display);font-size:16px;line-height:1.25}
.rules .rnote{margin:10px 0 0;font-size:13px;color:var(--steel)}
.hook .rt{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rtag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1;padding:4px 8px;border-radius:7px;background:#fff;color:var(--navy);border:1.5px solid var(--line);font-style:normal}
.rtag svg{width:13px;height:13px}
/* ---- format color themes (Kansas City Colors is the default) ---- */
:root{--reel-bg:#E31837;--reel-fg:#fff;--car-bg:#004687;--car-fg:#fff;--sto-bg:#FFD447;--sto-fg:#1B2A3A;--sto-ring:transparent}
[data-theme="classic"]{--reel-bg:#F5C518;--reel-fg:#1B2A3A;--car-bg:#1B2A3A;--car-fg:#fff;--sto-bg:#fff;--sto-fg:#1B2A3A;--sto-ring:#1B2A3A}
[data-theme="pop"]{--reel-bg:#D9306B;--reel-fg:#fff;--car-bg:#16B5C9;--car-fg:#1B2A3A;--sto-bg:#F5C518;--sto-fg:#1B2A3A;--sto-ring:transparent}
[data-theme="ink"]{--reel-bg:#111418;--reel-fg:#fff;--car-bg:#D9306B;--car-fg:#fff;--sto-bg:#16B5C9;--sto-fg:#1B2A3A;--sto-ring:transparent}
[data-theme="candy"]{--reel-bg:#FF8FB1;--reel-fg:#1B2A3A;--car-bg:#FFD84D;--car-fg:#1B2A3A;--sto-bg:#8FD3F2;--sto-fg:#1B2A3A;--sto-ring:transparent}
[data-theme="berry"]{--reel-bg:#D81B60;--reel-fg:#fff;--car-bg:#F8A5C2;--car-fg:#1B2A3A;--sto-bg:#C9B6F2;--sto-fg:#1B2A3A;--sto-ring:transparent}
/* color picker */
.legend .lrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cbtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:5px 10px 5px 6px;font:inherit;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;min-height:32px}
.cbtn[aria-expanded="true"]{border-color:var(--navy)}
.trio{display:inline-flex;gap:2px}.trio i{width:8px;height:16px;border-radius:3px;display:block}
.copt .trio i{width:10px;height:20px}
.cpanel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.cpanel p{margin:0;font-size:13px;color:var(--steel)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:600px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.copt{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;text-align:left;min-height:44px}
.copt[aria-checked="true"]{border:2px solid var(--navy);padding:8.5px 9.5px;background:#F7F6F2}
.copt .ck{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center}
.copt[aria-checked="true"] .ck{background:var(--navy);border-color:var(--navy)}
.copt[aria-checked="true"] .ck::after{content:"";width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
/* header hides on scroll down, returns on scroll up */
header.top{transition:transform .25s ease;will-change:transform}
header.top.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px))}
@media (prefers-reduced-motion:reduce){header.top{transition:none}}
/* ---- Bring it to life ---- */
.lgo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;width:100%;min-height:46px;margin-top:2px;padding:8px 14px;background:var(--accent);color:var(--navy);border:1.5px solid var(--accent);border-radius:10px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.lgo svg{width:18px;height:18px}
.lgo small{font-size:12px;font-weight:500;opacity:.85}
.lgo:hover{filter:brightness(.97)}
.lgo.on{background:#fff;border-color:var(--navy)}
.lgo.lock{background:#fff;border:1.5px dashed var(--line);color:var(--steel)}
.lgo:disabled{cursor:progress;opacity:.8}
.life{border-top:1px solid var(--line);margin-top:4px;padding-top:12px;display:flex;flex-direction:column;gap:10px}
.lstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lslide{flex:0 0 auto;width:min(64vw,230px);height:auto;aspect-ratio:4/5;border-radius:10px;scroll-snap-align:start;box-shadow:0 0 0 1px rgba(27,42,58,.12);background:#fff}
.lsk{flex:0 0 auto;border-radius:12px;background:linear-gradient(90deg,#ECEBE7 0%,#F7F6F3 50%,#ECEBE7 100%);background-size:200% 100%;animation:lshim 1.3s linear infinite}
.lsk.sq{width:min(64vw,230px);aspect-ratio:4/5}.lsk.tall{width:min(44vw,160px);aspect-ratio:9/16}
@keyframes lshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.lsk{animation:none}}
.lhint{font-size:13px;color:var(--steel);margin:-4px 0 0}
.lmsg{font-size:14px;color:var(--navy);background:#FFF6D6;border-radius:8px;padding:8px 10px;margin:0}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--navy);text-decoration:underline;cursor:pointer}
.ljoin{background:var(--navy);color:#fff;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ljoin b{font-family:var(--display);font-size:17px}.ljoin p{margin:0 0 6px;font-size:14px;color:var(--mist);line-height:1.5}
.pbtn.ready{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.lcapw{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.llab{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
.lcap{margin:0;align-self:stretch;background:var(--concrete);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.55;white-space:pre-wrap}
.ltip{margin:0;font-size:13.5px;color:var(--steel)}.ltip b{color:var(--navy)}
.ledit{display:flex;flex-direction:column;gap:10px;background:var(--concrete);border-radius:12px;padding:12px}
.lfld{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--steel)}
.ledit input,.ledit textarea{font:inherit;font-size:15px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;box-sizing:border-box;resize:vertical}
.led{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:10px;padding:10px}
.led b{font-size:13px}
.ledp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.ledp small{font-size:12.5px;color:var(--steel)}
.lframe{flex:0 0 auto;width:min(44vw,160px);display:flex;flex-direction:column;gap:6px;scroll-snap-align:start}
.lphone{aspect-ratio:9/16;background:#14171C;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:6px;color:#fff;overflow:hidden;box-shadow:inset 0 0 0 2px #2A2F37}
.lph-top{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:11px;font-weight:600}
.lph-t{background:var(--reel-bg);color:var(--reel-fg);border-radius:999px;padding:2px 8px;white-space:nowrap}
.lphone.sto .lph-t{background:var(--sto-bg);color:var(--sto-fg)}
.lph-shot{color:var(--mist);font-weight:500;text-align:right;line-height:1.2}
.lph-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0}
.lph-txt{background:#fff;color:#111;font-family:var(--display);font-weight:800;font-size:13px;line-height:1.2;padding:5px 8px;border-radius:6px;text-align:center}
.lph-act{margin:0;font-size:11.5px;line-height:1.35;color:#E7E6E1}
.lsay{margin:0;font-size:13px;line-height:1.45}.lsay b{color:var(--steel);font-weight:600}
.lstk{width:88%;background:#fff;color:#111;border-radius:10px;padding:7px 8px;font-size:11px;font-weight:600;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.lstk svg{width:13px;height:13px}.lstk.k-link{flex-direction:row;justify-content:center;gap:4px;color:#2563EB;border-radius:999px;width:auto;padding:5px 10px}
.lstk .po{display:flex;gap:4px;width:100%}.lstk .po span{flex:1;border:1px solid #DDD;border-radius:6px;padding:3px 2px;font-weight:700}
.lstk .qa{width:100%;background:#F1F1EF;border-radius:6px;padding:4px;font-weight:500;color:#888}
.lstk .cd{font-family:var(--display);font-size:14px;letter-spacing:.04em}
.lstk .sl{width:90%;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--reel-bg),#DDD)}
.lcred{margin:-6px 0 0;font-size:12px;color:var(--steel)}.lcred a{color:var(--steel)}
.lpick{display:flex;flex-direction:column;gap:8px}
.lthumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.lthumb{flex:0 0 auto;width:66px;height:88px;border-radius:8px;border:0;padding:0;overflow:hidden;cursor:pointer;background:#ddd;position:relative}
.lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lthumb.on{box-shadow:0 0 0 3px var(--navy)}
.lthumb.busy{opacity:.5;cursor:progress}
.lthumb.lsk{animation:lshim 1.3s linear infinite;background:linear-gradient(90deg,#ECEBE7 0%,#F7F6F3 50%,#ECEBE7 100%);background-size:200% 100%;cursor:default}
.lmore{background:#fff;border:1.5px dashed var(--line);font:inherit;font-size:13px;font-weight:600;color:var(--navy)}
.lnone{font-size:13px;color:var(--steel);padding:6px 0}
.lsrch{display:flex;gap:6px}.lsrch input{flex:1;min-width:0}
.ledp small a{color:var(--steel)}
.lphone{position:relative}
.lph-ok{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(14,17,22,.55)}
.lph-ok svg{width:44px;height:44px;color:#fff;background:#1E8A4C;border-radius:50%;padding:8px;stroke-width:3}
.lphone.done .lph-ok{display:flex}
.lck{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:38px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer}
.lck svg{width:15px;height:15px}
.lck.on{background:#1E8A4C;border-color:#1E8A4C;color:#fff}
.lhint.good{color:#1E6B3E;font-weight:600}