/* MYNIFEST splash. Plain CSS, no outside files. */
:root{
  --navy:#0B1F3A; --navy2:#0E2A4A; --navy-deep:#07162B;
  --cream:#F5EBD7; --cream2:#EFE3CC; --paper:#FBF6EA;
  --gold:#C9A24B; --gold-d:#A67C1E; --gold-l:#E8C766; --gold-text:#8A6416;
  --red:#C8102E; --red-d:#8B0000;
  --ink:#1A1A1A; --brown:#6B4F2A;
  --serif:Georgia,"Times New Roman","Noto Serif","DejaVu Serif",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --focus:#0B1F3A;
  --teal:#3FB8AE; --teal-l:#8FE0D6; --coral:#F08A74; /* small secondary accents, used sparingly */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
h2,h3{text-wrap:balance}
ul,ol{padding:0;list-style:none}
sup{font-size:.4em;vertical-align:super;line-height:0;letter-spacing:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.bar.solid :focus-visible,.foot :focus-visible,.cta-card :focus-visible{outline-color:var(--gold-l)}
.bar:not(.solid) :focus-visible{outline-color:var(--navy);outline-offset:3px}
.skip:focus-visible{outline-color:var(--gold-l);outline-offset:-6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.bar.solid{background:rgba(7,22,43,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(201,162,75,.45),0 10px 30px rgba(0,0,0,.25)}
.bar-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.bar.solid .brand{color:#fff}
.brand img{width:38px;height:38px;flex:none}
.brand-word{font-family:var(--serif);font-weight:700;letter-spacing:.2em;font-size:17px}
.bar-nav{display:flex;align-items:center;gap:6px}
.bar-link{text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.04em;padding:8px 12px;border-radius:999px;color:var(--ink);transition:background .2s,color .2s}
.bar-link:hover{background:rgba(166,124,30,.15)}
.bar.solid .bar-link{color:#F1E6CF}
.bar.solid .bar-link:hover{background:rgba(232,199,102,.16)}
.bar:not(.solid) .btn-ghost{color:var(--ink);border-color:var(--gold-d)}
.bar.solid .btn-ghost{color:var(--gold-l);border-color:var(--gold)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s,color .25s}
.btn-gold{color:var(--ink);background:linear-gradient(180deg,#F3D98A 0%,#E8C766 18%,#C9A24B 58%,#A67C1E 100%);border-color:#A67C1E;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 24px -6px rgba(166,124,30,.7),0 2px 0 #8A6416}
.btn-gold::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 16px 30px -8px rgba(166,124,30,.8),0 2px 0 #8A6416}
.btn-gold:hover::after{left:130%}
.btn-gold:active{transform:translateY(0)}
.btn-outline{color:var(--navy);border-color:var(--gold-d);background:rgba(255,255,255,.35)}
.btn-outline:hover{background:var(--navy);color:var(--gold-l);border-color:var(--navy);transform:translateY(-2px)}
.btn-ghost{color:var(--gold-l);border-color:var(--gold);background:transparent}
.btn-ghost:hover{background:rgba(232,199,102,.14)}
.btn-sm{min-height:40px;padding:0 20px;font-size:13px}
.btn-outline-dark{color:var(--cream);border-color:var(--gold);background:transparent}
.btn-outline-dark:hover{background:var(--gold-l);color:var(--ink);border-color:var(--gold-l)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 30%,#FFF8E6 0%,var(--cream) 55%,var(--cream2) 100%);padding:128px 0 170px;text-align:center;isolation:isolate}
.hero-back{position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:translate}
.hero-back{transition:transform .5s ease-out}
.hero-rays{position:absolute;left:50%;top:230px;width:1500px;height:1500px;margin:-750px 0 0 -750px;background:repeating-conic-gradient(from 0deg,rgba(201,162,75,.2) 0 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:spin 160s linear infinite;opacity:.8}
.hero-dust{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:transform .5s ease-out}
.hero-dust i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#E8C766,rgba(232,199,102,0) 70%);animation:float 9s ease-in-out infinite}
.hero-dust i:nth-child(1){left:12%;top:30%;animation-delay:0s}
.hero-dust i:nth-child(2){left:22%;top:62%;animation-delay:-2s;width:9px;height:9px}
.hero-dust i:nth-child(3){left:78%;top:24%;animation-delay:-4s;width:8px;height:8px}
.hero-dust i:nth-child(4){left:88%;top:58%;animation-delay:-1s}
.hero-dust i:nth-child(5){left:68%;top:74%;animation-delay:-5s;width:10px;height:10px}
.hero-dust i:nth-child(6){left:7%;top:80%;animation-delay:-3s;width:5px;height:5px}
.hero-dust i:nth-child(7){left:50%;top:12%;animation-delay:-6s;width:5px;height:5px}
.hero-in{display:grid;grid-template-columns:1fr;gap:34px;justify-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:center;min-width:0}
.logo-stage{perspective:700px;animation:bob 7s ease-in-out infinite;position:relative;width:min(240px,62vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:26px}
.logo-stage::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(232,199,102,.65) 0%,rgba(232,199,102,.22) 42%,rgba(232,199,102,0) 70%);animation:glow 5.5s ease-in-out infinite}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgba(166,124,30,.55)}
.ring-a{inset:-12%}
.ring-b{inset:-26%;border-color:rgba(166,124,30,.28);border-style:dashed}
.shine{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--mx,32%) var(--my,22%),rgba(255,255,255,.5),rgba(255,255,255,0) 46%);mix-blend-mode:soft-light;transform:translateZ(0)}
.hero-logo{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;width:78%;height:auto;filter:drop-shadow(0 18px 24px rgba(139,0,0,.38)) drop-shadow(0 0 22px rgba(232,199,102,.5))}
.caps-line{font-size:13px;letter-spacing:.42em;text-transform:uppercase;font-weight:700;color:var(--gold-text);margin-bottom:10px;padding-left:.42em}
.wordmark{font-family:var(--serif);font-weight:700;font-size:clamp(40px,10.5vw,92px);letter-spacing:.2em;padding-left:.2em;line-height:1.05;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.7),0 14px 30px rgba(166,124,30,.25)}
.wordmark sup{font-size:.22em;letter-spacing:0;margin-left:.15em;vertical-align:super;position:relative;top:-.15em}
.tagline{font-family:var(--serif);font-size:clamp(19px,3.6vw,28px);line-height:1.45;color:var(--brown);max-width:640px;margin:20px auto 26px}
.tagline em{font-style:italic;color:var(--red-d);white-space:nowrap}
.free-line{display:inline-flex;align-items:center;gap:12px;justify-content:center;text-align:left;font-weight:600;color:var(--ink);background:rgba(255,255,255,.55);border:1px solid rgba(166,124,30,.45);border-radius:999px;padding:8px 20px 8px 10px;margin-bottom:30px;box-shadow:0 8px 24px -12px rgba(139,100,22,.5)}
.free-badge{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(180deg,#D6232F,#8B0000);border:1.5px solid var(--gold);box-shadow:0 4px 10px -3px rgba(139,0,0,.6)}
.free-badge svg{width:16px;height:16px;fill:none;stroke:var(--gold-l);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-note{margin-top:22px;font-size:15px;color:var(--brown)}
.hero-curve{position:absolute;left:0;bottom:-1px;width:100%;height:90px;z-index:1}

/* ---------- shared section bits ---------- */
.dark{background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--navy2) 0%,var(--navy) 60%,var(--navy-deep) 100%);color:#EFE6D2}
.light{background:var(--cream)}
section{position:relative}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head-left{text-align:left;margin-bottom:28px}
.eyebrow{font-size:13px;letter-spacing:.38em;text-transform:uppercase;font-weight:700;color:var(--gold-text);margin-bottom:12px}
.dark .eyebrow{color:var(--gold-l)}
h2{font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(25px,4.6vw,42px);line-height:1.2;color:var(--ink)}
.dark h2{color:#fff}
.rule{display:block;width:150px;height:2px;margin:22px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--red);border:1.5px solid var(--gold);transform:rotate(45deg)}
.sec-head-left .rule{margin-left:0;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head-left .rule::after{left:5px;margin-left:0}

/* ---------- how it works ---------- */
.how{padding:100px 0 110px;margin-top:-1px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:44px;left:16.6%;right:16.6%;height:2px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold-d));opacity:.7}
.step{position:relative;text-align:center;padding:0 8px}
.step-no{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:0 auto 26px;border-radius:50%;font-family:var(--serif);font-size:38px;font-weight:700;color:var(--gold-l);background:radial-gradient(circle at 35% 30%,#17406e,var(--navy) 70%);border:2px solid var(--gold);box-shadow:0 0 0 7px rgba(201,162,75,.14),0 16px 34px -10px rgba(0,0,0,.7),inset 0 0 20px rgba(232,199,102,.18)}
.step h3{font-family:var(--serif);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.3;margin-bottom:12px}
.step p{color:#D9CFB9;max-width:330px;margin:0 auto}

/* ---------- features ---------- */
.feat{padding:100px 0 110px;background:radial-gradient(ellipse 70% 50% at 50% 0%,#FFF8E6,var(--cream) 60%,var(--cream2))}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.card{grid-column:span 2;position:relative;background:linear-gradient(180deg,#FFFDF7,var(--paper));border:1px solid rgba(201,162,75,.55);border-radius:20px;padding:34px 30px 32px;box-shadow:0 1px 0 #fff inset,0 2px 4px rgba(107,79,42,.08),0 22px 44px -22px rgba(107,79,42,.5);transition:transform .35s ease,box-shadow .35s ease}
.card::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold-d))}
.card-wide{grid-column:span 3}
.card:hover{transform:translateY(-6px);box-shadow:0 1px 0 #fff inset,0 4px 8px rgba(107,79,42,.1),0 34px 54px -22px rgba(107,79,42,.6)}
.ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:22px;background:radial-gradient(circle at 35% 30%,#17406e,var(--navy) 72%);border:2px solid var(--gold);box-shadow:0 10px 20px -8px rgba(11,31,58,.7)}
.ico svg{width:32px;height:32px;fill:none;stroke:var(--gold-l);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico svg .f{fill:var(--gold-l)}
.card:nth-child(5) .ico svg{fill:rgba(232,199,102,.25)}
.num{position:absolute;top:26px;right:28px;font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--gold-text);font-weight:700}
.card h3{font-family:var(--serif);font-size:21px;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);line-height:1.3;margin-bottom:10px}
.card p{color:#3b3226}


/* ---------- install ---------- */
.inst{padding:100px 0 110px;overflow:hidden}
.inst-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.lead{font-size:19px;line-height:1.7;color:#E6DCC6;margin-bottom:26px}
.how-list{display:grid;gap:14px}
.how-list li{display:grid;gap:3px;padding:16px 20px 16px 22px;border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(232,199,102,.1),rgba(232,199,102,0));border-radius:0 12px 12px 0}
.how-list strong{font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:var(--gold-l)}
.how-list span{color:#E6DCC6;font-size:16px}
.small-note{margin-top:20px;font-size:15px;color:#BFB59E}
.art{position:relative;min-height:420px;display:grid;place-items:center}
.art-glow{position:absolute;width:480px;height:480px;max-width:110%;border-radius:50%;background:radial-gradient(circle,rgba(232,199,102,.3),rgba(232,199,102,0) 65%);animation:glow 6s ease-in-out infinite}

/* ---------- closing panel ---------- */
.cta{padding:90px 0 100px;background:linear-gradient(180deg,var(--cream2),var(--cream))}
.cta-card{position:relative;overflow:hidden;text-align:center;padding:64px 32px 66px;border-radius:28px;background:radial-gradient(ellipse 90% 80% at 50% 0%,#17406e 0%,var(--navy) 55%,var(--navy-deep));color:#F1E6CF;border:2px solid var(--gold);box-shadow:0 0 0 7px rgba(201,162,75,.18),0 40px 70px -28px rgba(11,31,58,.85)}
.cta-ring{position:absolute;left:50%;top:-250px;width:560px;height:560px;margin-left:-280px;border-radius:50%;border:1.5px dashed rgba(232,199,102,.2);animation:spin 120s linear infinite}
.cta-logo{position:relative;width:84px;height:84px;margin:0 auto 18px;filter:drop-shadow(0 0 18px rgba(232,199,102,.6))}
.cta-card h2{color:#fff;font-size:clamp(24px,4.2vw,38px);max-width:760px;margin:0 auto 14px}
.cta-card p{font-size:18px;margin-bottom:30px;color:#E6DCC6}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:#D9CFB9;padding:50px 0 44px;border-top:2px solid var(--gold);text-align:center}
.foot-in{display:grid;gap:8px;justify-items:center}
.brand-foot{color:#fff;margin-bottom:10px}
.foot-line{font-size:16px}
.foot a{color:var(--gold-l);text-underline-offset:3px}
.foot-copy{font-size:14px;color:#A99F89;margin-top:10px}

/* ---------- motion ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes float{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-22px);opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 10px rgba(232,199,102,.5)}50%{box-shadow:0 0 22px rgba(232,199,102,.95)}}
.js-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s)}
.js-ready .reveal.in{opacity:1;transform:none}
.js-ready .card.reveal.in:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-ready .reveal{opacity:1;transform:none}
}

/* ---------- screens ---------- */
@media (max-width:1000px){
  .card,.card-wide{grid-column:span 3}
  .card:last-child{grid-column:span 6}
  .inst-grid{grid-template-columns:1fr;gap:70px}
  .art{min-height:360px;margin-bottom:30px}
}
@media (max-width:820px){
  .bar-link{display:none}
  .steps{grid-template-columns:1fr;gap:44px}
  .steps::before{display:none}
  .step:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-40px;width:2px;height:36px;margin-left:-1px;background:linear-gradient(180deg,var(--gold),rgba(201,162,75,0))}
  .how{padding:80px 0 90px}
  .feat,.inst{padding:80px 0 90px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .bar-in{padding:10px 16px}
  .hero{padding:104px 0 140px}
  .cards{grid-template-columns:1fr;gap:22px}
  .card,.card-wide,.card:last-child{grid-column:auto}
  .btn{width:100%;max-width:340px}
  .btn-row{flex-direction:column;align-items:center;width:100%}
  .sec-head{margin-bottom:44px}
  .cta{padding:70px 0 80px}
  .cta-card{padding:48px 22px 52px;border-radius:22px}
  .inst-grid{gap:56px}
  .art{min-height:300px}
  .brand-word{font-size:15px;letter-spacing:.16em}
  .brand img{width:32px;height:32px}
  .tagline em{white-space:normal}
  .free-line{font-size:15px;padding-right:16px}
}
@media (max-width:360px){
  .wrap{padding:0 16px}
  .brand-word{font-size:14px;letter-spacing:.1em}
  .btn-sm{padding:0 14px;min-height:38px}
  h2{letter-spacing:.09em}
  .card{padding:30px 22px 28px}
  .card h3,.step h3{letter-spacing:.04em}
  .wordmark{letter-spacing:.13em;padding-left:.13em}
  .caps-line{letter-spacing:.3em;padding-left:.3em}
}

/* ---------- depth and layers ---------- */
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>.logo-stage{animation:pop 1.1s cubic-bezier(.2,.8,.2,1) both,bob 7s ease-in-out 1.1s infinite}
.hero-copy>.caps-line{animation-delay:.25s}.hero-copy>.wordmark{animation-delay:.35s}.hero-copy>.tagline{animation-delay:.5s}.hero-copy>.free-line{animation-delay:.65s}.hero-copy>.btn-row{animation-delay:.8s}.hero-copy>.hero-note{animation-delay:.95s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.7) rotateX(30deg)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes sway{0%,100%{--ry:-9deg}50%{--ry:9deg}}
@media (hover:none){.hero-logo{animation:swayy 9s ease-in-out infinite}}
@keyframes swayy{0%,100%{transform:rotateY(-10deg) rotateX(3deg)}50%{transform:rotateY(10deg) rotateX(-3deg)}}
.orb{position:absolute;border-radius:50%;pointer-events:none}
.orb-gold{width:420px;height:420px;left:-140px;top:8%;background:radial-gradient(closest-side at 50% 50%,rgba(232,199,102,.2),rgba(201,162,75,.07) 55%,rgba(201,162,75,0) 100%)}
.orb-red{width:300px;height:300px;right:-90px;bottom:6%;background:radial-gradient(closest-side at 50% 50%,rgba(200,16,46,.26),rgba(139,0,0,.09) 55%,rgba(139,0,0,0) 100%)}
.orb-r{left:auto;right:-160px;top:6%;bottom:auto}
.orb-l{right:auto;left:-100px;bottom:4%;top:auto}
.how,.inst{overflow:hidden}
.how>.wrap,.inst>.wrap{position:relative;z-index:1}
/* steps line draws itself */
.js-ready .steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.3,.7,.2,1) .35s}
.js-ready .steps.in::before{transform:none}
.step-no{transform-style:preserve-3d}
.js-ready .step.reveal{transform:perspective(800px) rotateX(18deg) translateY(30px);transform-origin:50% 100%}
.js-ready .step.reveal.in{transform:none}
.js-ready .step.reveal .step-no{transform:scale(.6);transition:transform .9s cubic-bezier(.2,1.4,.3,1) calc(var(--d,0s) + .15s)}
.js-ready .step.reveal.in .step-no{transform:none}
/* cards: layered 3D */
.cards{perspective:1400px}
.card{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.js-ready .card.reveal{--rx:16deg;--ty:34px;transform-origin:50% 100%}
.js-ready .card.reveal.in{--rx:0deg;--ty:0px}
.js-ready .card.reveal.done{transition:transform .22s ease-out,box-shadow .35s;transform-origin:50% 50%}
.card .ico,.card h3{transition:transform .3s ease-out}
.card.tilting .ico{transform:translateZ(38px)}
.card.tilting h3{transform:translateZ(18px)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.75),rgba(232,199,102,.18) 40%,rgba(255,255,255,0) 70%)}
.card.tilting::after{opacity:1}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.js-ready .card.reveal.in:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
/* install art: layered 3D */
.art{perspective:1300px}
.art-glow{translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-10px)}
.cta-card{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.js-ready .cta-card.reveal{--rx:10deg;--ty:30px;transform-origin:50% 100%}
.js-ready .cta-card.reveal.in{--rx:0deg;--ty:0px}
.js-ready .cta-card.reveal.done{transition:transform .25s ease-out}
.cta-glint{position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(232,199,102,.16),transparent);transform:skewX(-20deg);animation:sweep 7s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,55%{left:-40%}100%{left:140%}}
.cta-logo{animation:bob 6s ease-in-out infinite}
@media (max-width:1000px){
}
@media (max-width:640px){
  .orb-gold{width:280px;height:280px}.orb-red{width:200px;height:200px}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.vis{animation:none!important;opacity:1}
  .js-ready .card.reveal,.js-ready .cta-card.reveal,.js-ready .step.reveal{--rx:0deg;--ty:0px;transform:none}
  .js-ready .steps::before{transform:none}
  .js-ready .step.reveal .step-no{transform:none}
}

/* ---------- small secondary accent (teal, a touch of coral) ---------- */
.ico svg .f{fill:var(--teal-l)}
.ico{box-shadow:0 10px 20px -8px rgba(11,31,58,.7),inset 0 0 0 3px rgba(63,184,174,.18)}
.card.tilting .ico{box-shadow:0 18px 24px -10px rgba(11,31,58,.75),inset 0 0 0 3px rgba(63,184,174,.3)}
.card:nth-child(3n+2) .ico svg{stroke:#F6DC95}
.card .num::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:var(--teal);vertical-align:middle;position:relative;top:-1px}
.hero-dust i:nth-child(3),.hero-dust i:nth-child(6){background:radial-gradient(circle,#5CCFC3,rgba(63,184,174,0) 70%)}
.hero-dust i:nth-child(5){background:radial-gradient(circle,#F6A08C,rgba(240,138,116,0) 70%)}
.orb-teal{width:360px;height:360px;right:6%;top:-120px;background:radial-gradient(closest-side at 50% 50%,rgba(63,184,174,.18),rgba(63,184,174,.05) 55%,rgba(63,184,174,0) 100%)}
.orb-teal.orb-b{right:auto;left:8%;top:auto;bottom:-140px}
.step-no::after{content:"";position:absolute;right:6px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 10px var(--teal)}
.steps::before{background:linear-gradient(90deg,var(--gold-d),var(--gold-l) 35%,#9fdcd3 50%,var(--gold-l) 65%,var(--gold-d))}
.how-list li:nth-child(2){border-left-color:var(--teal-l)}
.how-list li:nth-child(2) strong{color:var(--teal-l)}
@media (max-width:640px) and (max-height:760px){
  .hero{padding-top:84px}
  .logo-stage{width:min(170px,48vw);margin-bottom:18px}
  .tagline{margin:14px auto 18px}
  .free-line{margin-bottom:20px}
}

/* =========================================================
   HERO: text on the left, a floating dashboard picture on the right
   ========================================================= */
.hero{padding:112px 0 150px}
.hero-copy .logo-stage{width:min(150px,40vw);margin-bottom:22px}
.wordmark{font-size:clamp(38px,10.5vw,64px)}
.hero-note{max-width:420px}
.hero-rays{left:50%}
.vis{text-align:left;position:relative;width:100%;max-width:640px;margin:0;container-type:inline-size;animation:pop 1.2s cubic-bezier(.2,.8,.2,1) .35s both}
.vis-glow{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(circle,rgba(232,199,102,.55),rgba(232,199,102,0) 68%);filter:blur(6px);animation:glow 6s ease-in-out infinite;translate:calc(var(--px,0)*-18px) calc(var(--py,0)*-12px)}
.vis-stage{position:relative;aspect-ratio:1.18;perspective:1400px;transform-style:preserve-3d}

/* laptop */
.lap{position:absolute;left:0;top:9%;width:88%;container-type:inline-size;transform-style:preserve-3d;transform:rotateY(calc(8deg + var(--px,0)*4deg)) rotateX(calc(3deg + var(--py,0)*-3deg));transition:transform .3s ease-out;animation:bobl 8s ease-in-out infinite}
@keyframes bobl{0%,100%{translate:0 0}50%{translate:0 -8px}}
.lap-screen{position:relative;aspect-ratio:16/10;border-radius:14px 14px 4px 4px;background:#07162B;border:6px solid #1b2b44;outline:2px solid var(--gold);outline-offset:-1px;overflow:hidden;box-shadow:0 40px 70px -26px rgba(11,31,58,.85),0 0 0 1px rgba(255,255,255,.25) inset}
.lap-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%)}
.lap-base{height:14px;margin:0 -4%;border-radius:0 0 20px 20px;background:linear-gradient(180deg,#e2cf97,#8e6d22);box-shadow:0 24px 34px -12px rgba(11,31,58,.7)}


/* phone */


/* desktop: two columns */
@media (min-width:1001px){
  .hero{padding:118px 0 160px;min-height:min(100svh,900px);display:flex;align-items:center}
  .hero>.wrap{width:100%}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:44px;align-items:center;justify-items:stretch}
  .hero-copy{align-items:flex-start;text-align:left}
  .hero-copy .logo-stage{margin-left:22px;margin-bottom:34px}
  .wordmark{font-size:clamp(52px,5.2vw,74px);padding-left:0}
  .caps-line{padding-left:0}
  .tagline{margin-left:0;margin-right:0}
  .hero-copy .btn-row{justify-content:flex-start}
  .hero-rays{left:70%;top:50%}
  .vis{justify-self:end}
}
@media (min-width:1001px) and (max-height:760px){.hero{min-height:0}}
/* tablet and phone: text first, picture right under it */
@media (max-width:1000px){
  .vis{max-width:560px}
  .hero-rays{top:300px}
}
@media (max-width:640px){
  .hero{padding:92px 0 112px}
  .hero-copy .logo-stage{width:min(104px,30vw);margin-bottom:14px}
  .logo-stage::before{inset:-40%}
  .wordmark{font-size:clamp(34px,10.5vw,52px)}
  .tagline{margin:12px auto 16px;font-size:clamp(18px,5vw,22px)}
  .free-line{margin-bottom:18px;font-size:14px;padding:7px 14px 7px 8px}
  .hero-note{display:none}
  .hero-in{gap:30px}
  .vis{width:min(100%,420px)}
  .caps-line{font-size:12px;margin-bottom:6px}
}
@media (max-width:360px){ .hero-copy .logo-stage{width:92px} }

/* ---------- install art: the app icon ---------- */
.art{perspective:1000px;min-height:440px;align-content:start;gap:0;justify-items:center;padding-top:6px}
.addr{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:min(320px,86%);padding:9px 10px 9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1.5px solid rgba(232,199,102,.55);box-shadow:0 18px 30px -14px rgba(0,0,0,.7);font-size:15px;color:#EFE6D2}
.addr svg{width:18px;height:18px;fill:none;stroke:#BFB59E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.addr-url{flex:1}
.addr-inst{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#F3D98A,#C9A24B);box-shadow:0 0 0 0 rgba(232,199,102,.7);animation:ping 2.6s ease-out infinite}
.addr-inst svg{stroke:#1A1A1A;stroke-width:2.6}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(232,199,102,.7)}70%,100%{box-shadow:0 0 0 14px rgba(232,199,102,0)}}
.drop{width:min(320px,86%);height:auto;margin:6px 0 -4px;position:relative;z-index:1}
.icon-wrap{position:relative;width:290px;height:290px;display:grid;place-items:center;transform:rotateX(calc(var(--py,0)*-8deg)) rotateY(calc(var(--px,0)*10deg));transition:transform .3s ease-out;transform-style:preserve-3d}
.app-tile{position:relative;width:170px;height:170px;border-radius:38px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#1b4a80,#0B1F3A 70%);border:2.5px solid var(--gold);box-shadow:0 36px 50px -18px rgba(0,0,0,.85),0 0 40px rgba(232,199,102,.35),inset 0 0 0 1px rgba(255,255,255,.12);transform:translateZ(40px);animation:bob 6s ease-in-out infinite}
.app-tile img{width:78%;height:78%}
.orbit{position:absolute;border-radius:50%;border:1.5px dashed rgba(232,199,102,.35);inset:0}
.orbit.o2{inset:-38px;border-style:solid;border-color:rgba(143,224,214,.2)}
.orbit.o1{animation:spin 60s linear infinite}
.dev{position:absolute;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#17406e,#0B1F3A 70%);border:2px solid var(--gold);box-shadow:0 16px 24px -10px rgba(0,0,0,.8);transform:translateZ(80px);animation:bob 5s ease-in-out infinite}
.dev svg{width:30px;height:30px;fill:none;stroke:var(--gold-l);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dev-phone{left:-30px;bottom:6px;animation-delay:-1s}
.dev-lap{right:-30px;top:20px;animation-delay:-3s}
.dev-lap svg{stroke:var(--teal-l)}
@media (max-width:1000px){.art{min-height:420px;margin-bottom:20px}}
@media (max-width:480px){.icon-wrap{width:220px;height:220px}.app-tile{width:130px;height:130px;border-radius:30px}.dev{width:54px;height:54px}.dev-phone{left:-18px}.dev-lap{right:-18px}}
@media (prefers-reduced-motion:reduce){.lap,.ph,.chip,.app-tile,.dev{animation:none!important}.vis-glow{animation:none}}

/* keep the floating picture inside the screen edges */
.vis{padding:0 14px}
.vis-stage{margin:0 auto}
@media (max-width:1000px){.vis-stage{width:94%}}
@media (min-width:1001px){.vis{padding:0 18px 0 6px}}

.art,.art{min-height:0}
@media (max-width:1000px){.art{min-height:0}}

/* =========================================================
   PHONES (640px and below): text first, then the dashboard right under the buttons.
   The logo emblem is hidden (the logo already sits in the top bar). Tablet and desktop unchanged.
   ========================================================= */
@property --px{syntax:"<number>";inherits:true;initial-value:0}
@property --py{syntax:"<number>";inherits:true;initial-value:0}
@keyframes swaytouch{from{--px:-.7;--py:.2}to{--px:.7;--py:-.2}}
@media (max-width:640px){
  .hero-copy .logo-stage{display:none}
  .hero{padding:74px 0 100px}
  .hero-in{gap:24px}
  .vis{width:min(100%,420px);padding:0 10px}
  .hero-rays{top:420px}
  .caps-line{margin:0 0 6px}
  .tagline{margin:10px auto 14px}
  .free-line{margin-bottom:16px}
  .btn-row{gap:12px}
  .btn{min-height:50px}
  .lap{top:15%;width:88%}
}
@media (max-width:640px) and (hover:none){
  .vis{animation:pop 1.2s cubic-bezier(.2,.8,.2,1) .2s both,swaytouch 7s ease-in-out 1.4s infinite alternate}
}
@media (max-width:640px) and (max-height:620px){
  .hero{padding-top:70px}
  .tagline{margin:8px auto 10px}
  .free-line{margin-bottom:12px}
  .btn{min-height:46px}
  .wordmark{font-size:clamp(32px,9.5vw,44px)}
}
@media (prefers-reduced-motion:reduce){.vis{animation:none!important}}


/* =========================================================
   NO LOGO EMBLEM IN THE HERO (the logo is in the top bar).
   Bigger name and tagline, left column balanced with the dashboard.
   ========================================================= */
.hero-copy>.caps-line{animation-delay:.1s}
.hero-copy>.wordmark{animation-delay:.2s}
.hero-copy>.tagline{animation-delay:.35s}
@media (min-width:1001px){
  .hero>.wrap{max-width:1280px}
  .hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px}
  .wordmark{font-size:clamp(52px,6.2vw,92px);letter-spacing:.17em;line-height:1.02;margin-bottom:2px}
  .caps-line{font-size:clamp(13px,1.05vw,16px);letter-spacing:.42em;margin-bottom:16px}
  .tagline{font-size:clamp(23px,2.4vw,36px);line-height:1.38;max-width:640px;margin:22px 0 30px}
  .free-line{font-size:clamp(15px,1.15vw,18px)}
  .hero-note{margin-top:20px;font-size:16px}
}
@media (min-width:641px) and (max-width:1000px){
  .wordmark{font-size:clamp(56px,12vw,96px);letter-spacing:.17em;padding-left:.17em}
  .caps-line{font-size:14px}
  .tagline{font-size:clamp(24px,4vw,32px);max-width:640px}
  .hero{padding-top:104px}
}

.free-text{max-width:21.5em}

/* =========================================================
   LEGAL PAGES (terms.html, privacy.html)
   ========================================================= */
.legal-page{background:var(--cream)}
.legal-wrap{max-width:820px}
.legal-hero{padding:128px 0 48px;text-align:center;background:radial-gradient(ellipse 70% 80% at 50% 0%,#FFF8E6 0%,var(--cream) 60%,var(--cream2) 100%)}
.legal-hero h1{font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(30px,6.6vw,54px);line-height:1.1;color:var(--ink);text-wrap:balance;text-shadow:0 2px 0 rgba(255,255,255,.7),0 12px 26px rgba(166,124,30,.22)}
.legal-hero .rule{margin-bottom:24px}
.l-meta{font-size:15px;color:var(--brown);margin-top:6px;overflow-wrap:anywhere}
.fill{background:linear-gradient(180deg,rgba(232,199,102,.5),rgba(232,199,102,.35));border:1px dashed var(--gold-d);border-radius:6px;padding:1px 7px;color:#4a3410;font-weight:600;font-size:.95em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.summary{margin:34px auto 0;text-align:left;padding:28px 30px 22px;border-radius:22px;background:radial-gradient(ellipse 90% 80% at 50% 0%,#17406e 0%,var(--navy) 60%,var(--navy-deep));color:#F1E6CF;border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(201,162,75,.16),0 30px 50px -26px rgba(11,31,58,.8)}
.summary h2{font-size:15px;letter-spacing:.3em;color:var(--gold-l);margin-bottom:14px}
.summary ul{display:grid;gap:10px}
.summary li{position:relative;padding-left:26px;line-height:1.55}
.summary li::before{content:"";position:absolute;left:3px;top:.6em;width:9px;height:9px;background:var(--red);border:1.5px solid var(--gold-l);transform:rotate(45deg)}
.summary-note{margin-top:16px;font-size:14px;color:#BFB59E}
.legal-body{padding:30px 0 90px}
.l-toc{margin:0 0 34px;padding:20px 24px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(201,162,75,.5)}
.l-toc p{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--gold-text);margin-bottom:10px}
.l-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 28px;list-style:none;counter-reset:t}
.l-toc li{counter-increment:t;font-size:15.5px}
.l-toc li::before{content:counter(t) ".";display:inline-block;width:1.8em;color:var(--gold-text);font-weight:700}
.l-toc a{text-decoration:none;color:var(--navy)}
.l-toc a:hover{text-decoration:underline;text-underline-offset:3px}
.l-sec{padding:30px 0;border-top:1px solid rgba(166,124,30,.35);scroll-margin-top:84px}
.l-sec h2{display:flex;align-items:center;gap:14px;font-size:clamp(19px,3.4vw,24px);letter-spacing:.08em;margin-bottom:14px;color:var(--navy)}
.l-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:16px;letter-spacing:0;color:var(--gold-l);background:radial-gradient(circle at 35% 30%,#17406e,var(--navy) 72%);border:2px solid var(--gold)}
.l-sec p,.l-sec li{font-size:17px;line-height:1.75;color:#2b241a;overflow-wrap:anywhere}
.l-sec p+p,.l-sec p+ul,.l-sec ul+p{margin-top:14px}
.l-sec ul{display:grid;gap:9px;padding-left:4px}
.l-sec li{position:relative;padding-left:24px}
.l-sec li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;background:var(--gold);border:1.5px solid var(--gold-d);transform:rotate(45deg)}
.l-sec a,.l-back a{color:var(--navy);text-decoration-color:var(--gold-d);text-underline-offset:3px;font-weight:600}
.l-sec strong{color:var(--navy)}
.l-back{margin-top:30px;padding-top:26px;border-top:1px solid rgba(166,124,30,.35);text-align:center;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.l-sep{width:8px;height:8px;background:var(--red);border:1.5px solid var(--gold);transform:rotate(45deg);align-self:center}
.foot-links{display:flex;gap:22px;justify-content:center}
.foot-links a{font-weight:600;letter-spacing:.06em}
@media (max-width:640px){
  .legal-hero{padding:102px 0 36px}
  .summary{padding:22px 20px 18px;border-radius:18px}
  .l-toc ol{grid-template-columns:1fr}
  .l-sec p,.l-sec li{font-size:16px}
  .l-sep{display:none}
}

/* =========================================================
   HERO PICTURE: two real app screenshots in a laptop and a phone frame.
   (To update later: replace /assets/app-desktop.* and /assets/app-phone.*, keep the same shapes.)
   ========================================================= */
.vis-stage{aspect-ratio:1.3}
.lap{left:0;top:3%;width:88%;transform:rotateY(calc(6deg + var(--px,0)*4deg)) rotateX(calc(2deg + var(--py,0)*-3deg))}
.lap-screen{background:#F3E8D2}
.lap-screen img{display:block;width:100%;height:100%;object-fit:cover}
.ph{position:absolute;right:0;bottom:0;width:27%;container-type:inline-size;border-radius:17% / 8%;padding:1.7%;background:linear-gradient(160deg,#F0D27E,#8e6d22);box-shadow:0 40px 60px -18px rgba(11,31,58,.9),0 0 0 1px rgba(255,255,255,.3) inset;transform:translateZ(70px) rotateY(calc(-7deg + var(--px,0)*6deg)) rotateX(calc(2deg + var(--py,0)*-4deg));transition:transform .3s ease-out;animation:bob 6.5s ease-in-out -2s infinite}
.ph-screen{position:relative;border-radius:14% / 6.4%;overflow:hidden;background:#FFF8EA;line-height:0}
.ph-screen img{display:block;width:100%;height:auto}
.ph-screen::after{content:"";position:absolute;left:50%;top:1.3%;width:26%;height:1.3%;margin-left:-13%;border-radius:9px;background:rgba(3,11,23,.9)}
.vis{padding:0}
@media (min-width:1001px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}
  .wordmark{font-size:clamp(46px,5.1vw,92px)}
  .vis{max-width:760px;padding:0 16px 0 0}
  .vis-stage{aspect-ratio:1.36}
  .ph{width:28%}
}
@media (min-width:1280px){.vis{margin-right:-36px;padding:0}}
@media (min-width:1700px){
  .hero>.wrap{max-width:1500px}
  .vis{max-width:820px;margin-right:0}
  .wordmark{font-size:84px}
}
@media (max-width:1000px){.vis{max-width:600px;padding:0}.vis-stage{width:100%}}
@media (max-width:640px){
  .vis{width:min(100%,430px);padding:0}
  .lap{top:3%;width:90%}
  .ph{width:30%}
}

.vis figcaption{margin-top:16px;text-align:center;font-size:13px;color:var(--brown);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
@media (max-width:640px){.vis figcaption{margin-top:14px;font-size:12px}}

/* tap targets: at least 44px tall on phones, without changing how the links look */
@media (max-width:1000px){
  .brand-foot{min-height:44px}
  .foot-links a,.l-toc a,.l-back a,.foot-line a{display:inline-flex;align-items:center;min-height:44px}
  .l-toc ol{gap:0 28px}
  .foot-links{gap:10px}
  .foot-links a{padding:0 12px}
  .foot-line a{padding:0 4px}
}

/* =========================================================
   HERO LINE UP AND PHONE TAP SIZES
   On computers the hero text starts at the same left edge as the logo in the top bar,
   and the picture always stays inside the window. 50cqw is half the width of the hero.
   ========================================================= */
@media (min-width:1001px){
  .hero{container-type:inline-size}
  .hero-copy{padding-left:clamp(0px,calc(50cqw - 590px),50px);margin-right:calc(-1 * clamp(0px,calc(50cqw - 640px),50px))}
  .wordmark{font-size:clamp(46px,5.1vw,74px)}
}
@media (min-width:1280px){.vis{margin-right:0;left:min(36px,calc(max(0px,50cqw - 640px) - 7px))}}
@media (min-width:1700px){
  .hero>.wrap{max-width:none;padding-left:calc(50cqw - 566px);padding-right:calc(50cqw - 726px)}
  .hero-copy{padding-left:0;margin-right:0}
  .hero-in{gap:32px}
  .vis{left:0}
  .wordmark{font-size:76px}
}
/* phones: the logo link and the Sign in button in the top bar get a 44px tap area, with no change to how they look */
@media (max-width:1000px){
  .bar .brand{min-height:44px;margin:-6px 0}
  .bar .btn-sm{overflow:visible}
  .bar .btn-sm::before{content:"";position:absolute;inset:-3px -2px}
}

/* Page not found (404.html) */
.nf{padding-bottom:96px;min-height:calc(100svh - 260px)}
.nf-text{font-size:18px;line-height:1.7;color:var(--brown);max-width:34em;margin:0 auto 30px}
@media (max-width:640px){.nf{padding-bottom:72px}.nf-text{font-size:17px}}

/* =========================================================
   PHONES HELD SIDEWAYS
   Only for short landscape screens up to 1000px wide (phones on their side).
   Portrait phones, tablets and computers do not match this rule.
   The hero is tighter so Sign up free sits on the first screen,
   and the top bar links get a 44px tap area with no change to how they look.
   ========================================================= */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .hero{padding-top:66px}
  .hero-in{gap:24px}
  .caps-line{font-size:11px;margin:0 0 2px}
  .wordmark{font-size:clamp(30px,10.5vh,46px);line-height:1.05}
  .tagline{font-size:clamp(17px,4.6vh,21px);line-height:1.4;max-width:720px;margin:6px auto 10px}
  .free-line{font-size:13px;gap:10px;padding:5px 14px 5px 6px;margin-bottom:12px}
  .free-badge{width:24px;height:24px}
  .free-badge svg{width:13px;height:13px}
  .free-text{max-width:none;text-wrap:balance}
  .hero .btn-row{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:12px;width:auto}
  .hero .btn-row .btn{width:auto;min-height:46px;padding:0 26px}
  .hero-note{margin-top:12px;font-size:14px;max-width:none}
}
/* the How it works, What you get and Install links only show from 821px wide */
@media (orientation:landscape) and (max-height:500px) and (min-width:821px) and (max-width:1000px){
  .bar .bar-link{display:inline-flex;align-items:center;min-height:44px;margin:-2.5px 0}
}
/* 0.3.17: the address-bar pill in Install is a real button (see site.js) */
a.addr{text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
a.addr:hover{background:rgba(255,255,255,.14);border-color:var(--gold-l);box-shadow:0 18px 30px -14px rgba(0,0,0,.7),0 0 0 4px rgba(232,199,102,.18);transform:translateY(-1px)}
a.addr:focus-visible{outline:3px solid var(--gold-l);outline-offset:4px;border-radius:999px}
a.addr:active{transform:translateY(0)}
.addr-cta{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l)}
a.addr.is-installed .addr-inst{animation:none;background:linear-gradient(180deg,#8FE0D6,#3FB8AE)}
.how-list li:focus{outline:none}
.how-list li.flash{animation:howflash 2.4s ease-out 1}
@keyframes howflash{0%,30%{background:linear-gradient(90deg,rgba(232,199,102,.38),rgba(232,199,102,.06));box-shadow:0 0 0 2px var(--gold-l)}100%{box-shadow:0 0 0 0 rgba(232,199,102,0)}}
@media (prefers-reduced-motion:reduce){a.addr{transition:none}a.addr:hover{transform:none}.how-list li.flash{animation:none;box-shadow:0 0 0 2px var(--gold-l)}}
/* 0.3.17: the logo sits in the exact middle of the square app tile */
.app-tile picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.app-tile img{width:78%;height:auto;aspect-ratio:1/1;object-fit:contain;flex:none}

/* 0.3.19: small site credit under the copyright line */
.foot-credit{font-size:13px;color:#A99F89;margin-top:-2px}
.foot .foot-credit a{color:#C9BFA8;text-decoration:underline;text-decoration-color:rgba(201,191,168,.45);text-underline-offset:3px}
.foot .foot-credit a:hover{color:var(--gold-l);text-decoration-color:currentColor}
@media (max-width:1000px){.foot-credit a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}.foot-credit{margin-top:-10px}}

/* 0.3.21: shorter footer, same words and links.
   Computers and tablets (861px and up): three columns on two rows.
     left: logo, then "Goal Task Tracking. Free to use."   middle: Terms Privacy, then Questions? Contact us   right: copyright, then Website by LISB
   Phones (860px and down): short centered rows. Logo; tagline; Terms Privacy + Contact us (wraps on very narrow phones); copyright + Website by LISB.
   Phone links keep their 44px tap height from the rules above. */
@media (min-width:861px){
  .foot{padding:24px 0 22px;text-align:left}
  .foot-in{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;grid-auto-flow:column;gap:2px 40px;align-items:center;justify-items:start}
  .brand-foot{margin-bottom:0}
  .foot-line{font-size:15px}
  .foot-in>:nth-child(3),.foot-in>:nth-child(4){justify-self:center}
  .foot-in>:nth-child(5),.foot-in>:nth-child(6){justify-self:end;text-align:right}
  .foot-copy,.foot-credit{margin-top:0}
}
@media (min-width:1001px){.foot-links a,.foot-line a,.foot-credit a,.foot-copy a{display:inline-flex;align-items:center;min-height:28px}}
@media (max-width:860px){
  .foot{padding:14px 0 12px}
  .foot-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 14px}
  .foot-in::before{content:"";flex-basis:100%;height:0;order:5}
  .brand-foot{margin-bottom:0;order:1}
  .foot-in>:nth-child(2){order:2;flex-basis:100%;font-size:15px;line-height:1.4}
  .foot-links{order:3;gap:2px}
  .foot-in>:nth-child(4){order:4;font-size:15px}
  .foot-copy{order:6;margin-top:0;font-size:13px}
  .foot-credit{order:7;margin-top:0}
  .foot-links a{padding:0 10px}
}
@media (max-width:1000px){.foot-copy a{display:inline-flex;align-items:center;min-height:44px}}

/* ---------- shop strip (tees on mynifest.com) ---------- */
.shop{padding:100px 0 110px;overflow:hidden}
.shop-grid{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:"copy tees" "cta tees";column-gap:64px;align-items:center}
.shop-copy{grid-area:copy;align-self:end}
.shop-cta{grid-area:cta;align-self:start;margin-top:6px}
.shop-cta .btn{width:auto;max-width:none;gap:10px}
.shop-cta .arr{font-size:18px;line-height:1;transition:transform .25s}
.shop-cta .btn:hover .arr{transform:translateX(4px)}
.shop-gold{color:var(--gold-l)}
@media (min-width:641px){.shop-gold{white-space:nowrap}}
.shop-motto{font-family:var(--serif);font-style:italic;color:var(--gold-l);white-space:nowrap}
.shop .lead{max-width:520px}
.tees{grid-area:tees;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tee{display:flex}
.tee-link{display:flex;flex-direction:column;width:100%;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#FFFDF7,var(--paper));border:1px solid rgba(201,162,75,.55);border-radius:20px;padding:10px;box-shadow:0 1px 0 #fff inset,0 0 0 6px rgba(201,162,75,.1),0 30px 50px -26px rgba(0,0,0,.75);transition:transform .25s ease,box-shadow .25s ease}
.tee-link:hover{transform:translateY(-6px);box-shadow:0 1px 0 #fff inset,0 0 0 6px rgba(201,162,75,.22),0 38px 60px -26px rgba(0,0,0,.85)}
.tee-img{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--navy)}
.tee-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tee-link:hover .tee-img img{transform:scale(1.04)}
.tee-body{position:relative;display:grid;gap:2px;padding:16px 12px 10px}
.tee-coll{font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.tee-name{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);line-height:1.3}
.tee-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:4px;padding-right:44px}
.tee-meta b{font-family:var(--serif);font-size:20px;color:var(--red)}
.tee-ship{font-size:13px;font-weight:600;color:var(--brown)}
.tee-dots{position:absolute;right:12px;bottom:14px;display:flex;gap:5px}
.tee-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--gold);box-shadow:0 0 0 1.5px #fff}
.tee-dots .dot-black{background:#141213}
.tee-dots .dot-navy{background:#1C2541}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tee-link:focus-visible{outline-color:var(--gold-l);outline-offset:4px;border-radius:20px}
@media (max-width:1000px){
  .shop-grid{grid-template-columns:1fr;grid-template-areas:"copy" "tees" "cta";row-gap:8px}
  .shop .lead{max-width:640px}
  .tees{margin-top:10px}
  .shop-cta{margin-top:34px;text-align:center}
}
@media (max-width:640px){
  .shop{padding:76px 0 84px}
  .tees{gap:12px}
  .tee-link{padding:6px;border-radius:16px}
  .tee-img{border-radius:11px}
  .tee-body{padding:12px 6px 6px}
  .tee-coll{font-size:10px;letter-spacing:.22em}
  .tee-name{font-size:15px;letter-spacing:.04em}
  .tee-meta{padding-right:0;gap:0 8px}
  .tee-meta b{font-size:17px}
  .tee-ship{font-size:11.5px;line-height:1.35}
  .tee-dots{position:static;margin-top:8px}
  .tee-dots i{width:12px;height:12px}
  .shop-cta .btn{width:100%;max-width:340px}
  .shop-motto{white-space:normal}
}
@media (max-width:340px){
  .tees{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .tee-link,.tee-img img,.shop-cta .arr{transition:none}
  .tee-link:hover,.tee-link:hover .tee-img img{transform:none}
}