/* ============================================================
   Squanto marketing site — shared styles
   ============================================================ */
:root{
  --obsidian:#16150F;--ink:#1F1D16;--pine:#2A352A;--pine-deep:#1E281E;
  --clay:#BC5A33;--ember:#A23E28;--sun:#D7A24A;--sage:#8E9B79;--bone:#EFE8D7;--paper:#FBF8F1;
  --line:rgba(239,232,215,0.14);--dim:rgba(239,232,215,0.6);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--obsidian);color:var(--bone);font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55;}
a{color:inherit;}
.wrap{max-width:1160px;margin:0 auto;padding:0 36px;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(22,21,15,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1160px;margin:0 auto;padding:0 36px;height:66px;display:flex;align-items:center;gap:28px;}
.nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:8px;}
.nav .brand svg{width:34px;height:34px;color:var(--sun);}
.nav .brand .nm{font-family:'Oswald';font-weight:600;font-size:17px;letter-spacing:0.18em;text-transform:uppercase;color:var(--bone);}
.nav .links{display:flex;gap:4px;flex:1;}
.nav .links a{font-family:'Space Grotesk';font-weight:600;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:9px 13px;border-radius:8px;}
.nav .links a:hover{color:var(--bone);background:rgba(239,232,215,0.06);}
.nav .links a.on{color:var(--sun);background:rgba(215,162,74,0.12);}
.nav .cta{font-family:'Space Grotesk';font-weight:600;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bone);text-decoration:none;background:var(--clay);padding:11px 20px;border-radius:10px;}
.nav .cta:hover{background:var(--ember);}

/* stepped clay divider */
.steps{height:6px;color:var(--clay);}
.steps svg{display:block;width:100%;height:6px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:104px 0 96px;background:#10140C;}
.hero .terr{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero .wrap{position:relative;z-index:2;}
.ey{font-family:'Space Grotesk';font-size:11.5px;font-weight:600;letter-spacing:0.32em;text-transform:uppercase;color:var(--sun);}
.hero h1{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(40px,5.4vw,68px);line-height:1.02;margin:18px 0 0;max-width:640px;text-wrap:balance;}
.hero .tag{font-family:'Marcellus';font-size:19px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage);margin-top:22px;}
.hero .sub{max-width:520px;color:var(--dim);font-size:16px;margin:20px 0 34px;}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:600;font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border-radius:12px;color:var(--bone);}
.btn svg{width:16px;height:16px;}
.btn.primary{background:var(--clay);}
.btn.primary:hover{background:var(--ember);}
.btn.ghost{border:1px solid var(--line);background:rgba(239,232,215,0.05);}
.btn.ghost:hover{background:rgba(239,232,215,0.09);}

/* ---------- sections ---------- */
section.blk{padding:84px 0;}
section.blk.alt{background:#12160E;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sec-ey{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--sun);}
h2.sec{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.04em;font-size:clamp(26px,3vw,38px);margin:12px 0 10px;}
.sec-sub{color:var(--dim);font-size:15px;max-width:620px;margin:0 0 44px;}

/* feature trio / cards */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.card{background:rgba(239,232,215,0.04);border:1px solid var(--line);border-radius:16px;padding:28px;}
.card .ic{width:44px;height:44px;border-radius:12px;background:rgba(215,162,74,0.14);display:grid;place-items:center;margin-bottom:18px;}
.card .ic svg{width:22px;height:22px;color:var(--sun);}
.card h3{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.05em;font-size:17px;margin:0 0 8px;}
.card p{font-size:13.5px;color:var(--dim);margin:0;}

/* tech feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:44px 0;border-bottom:1px solid rgba(239,232,215,0.08);}
.frow:last-child{border-bottom:0;}
.frow.rev .fviz{order:2;}
.frow h3{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.04em;font-size:24px;margin:14px 0 10px;}
.frow p{color:var(--dim);font-size:14.5px;margin:0 0 16px;max-width:440px;}
.frow ul{margin:0;padding-left:18px;color:var(--dim);font-size:13.5px;}
.frow li{margin-bottom:7px;}
.frow li b{color:var(--bone);font-weight:600;}
.fviz{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#1a2014;min-height:260px;position:relative;}
.fviz svg.fill{position:absolute;inset:0;width:100%;height:100%;}
.fviz video.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.tier{background:rgba(239,232,215,0.04);border:1px solid var(--line);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;position:relative;}
.tier.hot{border-color:rgba(215,162,74,0.5);background:rgba(215,162,74,0.06);}
.tier .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:'Space Grotesk';font-weight:600;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;background:var(--sun);color:var(--obsidian);padding:5px 13px;border-radius:14px;white-space:nowrap;}
.tier .tn{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.06em;font-size:16px;color:var(--sun);}
.tier .pr{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px;}
.tier .pr .n{font-family:'Oswald';font-weight:600;font-size:44px;line-height:1;}
.tier .pr .per{font-family:'Space Grotesk';font-size:12px;color:var(--dim);}
.tier .pr .was{font-family:'Space Grotesk';font-size:12px;color:rgba(239,232,215,0.5);margin-left:4px;letter-spacing:0.02em;}
.tier .pr .was s{color:rgba(239,232,215,0.4);}
.tier .pd{font-size:12.5px;color:var(--dim);margin:0 0 22px;}
.tier ul{list-style:none;margin:0 0 26px;padding:0;flex:1;}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(239,232,215,0.8);padding:7px 0;border-bottom:1px solid rgba(239,232,215,0.07);}
.tier li svg{width:15px;height:15px;color:var(--sage);flex-shrink:0;margin-top:2px;}
.tier li.no{color:rgba(239,232,215,0.35);}
.tier li.no svg{color:rgba(239,232,215,0.25);}
.tier .btn{justify-content:center;}

/* ---------- culture ---------- */
.quote{font-family:'Marcellus';font-size:clamp(22px,2.6vw,30px);line-height:1.45;color:var(--bone);max-width:760px;margin:0;}
.quote em{color:var(--sun);font-style:normal;}
.pill-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.pill{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:20px;padding:8px 15px;color:var(--dim);}

/* ---------- merch ---------- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.prod{background:rgba(239,232,215,0.04);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.prod .ph{height:190px;display:grid;place-items:center;position:relative;}
.prod .ph svg{width:74px;height:74px;}
.prod .inf{padding:16px 18px 18px;}
.prod .pn{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.05em;font-size:14.5px;}
.prod .ps{font-family:'Space Grotesk';font-size:11px;color:var(--dim);margin-top:2px;}
.prod .pp{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.prod .pp .m{font-family:'Oswald';font-weight:600;font-size:17px;color:var(--sun);}
.prod .pp .add{font-family:'Space Grotesk';font-weight:600;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;background:var(--clay);color:var(--bone);border-radius:8px;padding:8px 13px;text-decoration:none;}

/* ---------- CTA band + footer ---------- */
.band{background:linear-gradient(160deg,#2A352A,#16150F);border-top:1px solid var(--line);padding:74px 0;text-align:center;}
.band h2{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:0.04em;font-size:clamp(26px,3.4vw,40px);margin:0 0 10px;}
.band p{color:var(--dim);margin:0 0 30px;}
.band .btnrow{justify-content:center;}
footer{border-top:1px solid var(--line);padding:46px 0 60px;background:#111409;}
.f-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.f-brand{display:flex;align-items:center;gap:11px;}
.f-brand svg{width:30px;height:30px;color:var(--sun);}
.f-brand .nm{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:0.18em;text-transform:uppercase;}
.f-tag{font-family:'Marcellus';font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--sage);margin-top:5px;}
.f-links{display:flex;gap:40px;flex-wrap:wrap;}
.f-col .h{font-family:'Space Grotesk';font-weight:600;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(239,232,215,0.4);margin-bottom:10px;}
.f-col a{display:block;font-size:13px;color:var(--dim);text-decoration:none;padding:3px 0;}
.f-col a:hover{color:var(--bone);}
.f-legal{margin-top:36px;font-family:'Space Grotesk';font-size:11px;color:rgba(239,232,215,0.35);}

/* right-hand glass sidenav — individual icon tiles */
.sidenav{position:fixed;right:18px;top:18px;z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:stretch;}
.sidenav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:78px;padding:12px 4px 10px;border-radius:14px;
  background:rgba(20,19,13,0.92);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,0.35);
  font-family:'Space Grotesk';font-weight:600;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;text-align:center;}
.sidenav a svg{width:20px;height:20px;}
.sidenav a:hover{background:rgba(34,32,22,0.96);color:var(--bone);}
.sidenav a.on{background:rgba(215,162,74,0.14);color:var(--sun);border-color:rgba(215,162,74,0.4);}
.sidenav a.sn-cta{background:var(--clay);color:var(--bone);border-color:transparent;}
.sidenav a.sn-cta:hover{background:var(--ember);}
.sidenav .sn-brand{background:#16150F;padding:14px 4px 11px;}
.sidenav .sn-brand svg{width:36px;height:36px;color:var(--sun);}
.sidenav .sn-brand span{color:var(--bone);letter-spacing:0.16em;font-size:9.5px;}
/* mobile: the sidenav collapses into a hamburger-triggered slide-in drawer.
   (It was display:none with NO fallback — phones/tablets lost all nav + the /app
   sign-in CTA.) The hamburger + scrim are hidden on desktop. */
.navtoggle,.navscrim{display:none;}
.f-brand{text-decoration:none;color:inherit;}
@media(max-width:920px){
  .navtoggle{display:flex;align-items:center;justify-content:center;position:fixed;top:14px;right:14px;z-index:70;
    width:46px;height:46px;border-radius:13px;background:rgba(22,21,15,0.96);backdrop-filter:blur(10px);
    border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,0.35);color:var(--bone);cursor:pointer;}
  .navtoggle svg{width:24px;height:24px;}
  .sidenav{display:flex;top:70px;right:14px;transform:translateX(150%);opacity:0;pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s ease;}
  body.nav-open .sidenav{transform:none;opacity:1;pointer-events:auto;}
  .navscrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(6,8,4,0.55);
    opacity:0;pointer-events:none;transition:opacity .28s ease;}
  body.nav-open .navscrim{opacity:1;pointer-events:auto;}
}

@media(max-width:920px){
  .g3,.tiers,.prods{grid-template-columns:1fr 1fr;}
  .frow,.g2{grid-template-columns:1fr;}
  .frow.rev .fviz{order:0;}
  .nav .links{display:none;}
}
@media(max-width:560px){.g3,.tiers,.prods{grid-template-columns:1fr;}}

/* ---------- pricing motion (scroll-in + count-up + flag breathe) ---------- */
@keyframes flagBreathe{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.05);}}
.tier.hot .flag{animation:flagBreathe 3.4s ease-in-out infinite;}
body.js-anim .tier{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.25,.8,.25,1);}
body.js-anim .tiers .tier:nth-child(2){transition-delay:.12s;}
body.js-anim .tiers .tier:nth-child(3){transition-delay:.24s;}
body.js-anim .tier li{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s cubic-bezier(.25,.8,.25,1);}
body.js-anim .tier li svg{transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1);}
body.js-anim .tier.in{opacity:1;transform:none;}
body.js-anim .tier.in li{opacity:1;transform:none;}
body.js-anim .tier.in li svg{transform:scale(1);}
body.js-anim .tier.in li:nth-child(1){transition-delay:.35s;}
body.js-anim .tier.in li:nth-child(2){transition-delay:.45s;}
body.js-anim .tier.in li:nth-child(3){transition-delay:.55s;}
body.js-anim .tier.in li:nth-child(4){transition-delay:.65s;}
body.js-anim .tier.in li:nth-child(5){transition-delay:.75s;}
body.js-anim .tier.in li:nth-child(6){transition-delay:.85s;}
body.js-anim .tier.in li:nth-child(7){transition-delay:.95s;}
body.js-anim .tier.in li:nth-child(8){transition-delay:1.05s;}
body.js-anim .tier.in li:nth-child(1) svg{transition-delay:.47s;}
body.js-anim .tier.in li:nth-child(2) svg{transition-delay:.57s;}
body.js-anim .tier.in li:nth-child(3) svg{transition-delay:.67s;}
body.js-anim .tier.in li:nth-child(4) svg{transition-delay:.77s;}
body.js-anim .tier.in li:nth-child(5) svg{transition-delay:.87s;}
body.js-anim .tier.in li:nth-child(6) svg{transition-delay:.97s;}
body.js-anim .tier.in li:nth-child(7) svg{transition-delay:1.07s;}
body.js-anim .tier.in li:nth-child(8) svg{transition-delay:1.17s;}
@media (prefers-reduced-motion: reduce){
  .tier.hot .flag{animation:none;}
  body.js-anim .tier,body.js-anim .tier li{opacity:1;transform:none;transition:none;}
  body.js-anim .tier li svg{transform:scale(1);transition:none;}
  body.js-anim .commit{opacity:1;transform:none;transition:none;}
  body.js-anim .commit .wm path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
  .commit .wm,.commit .ic,.commit h3::after{transition:none;}
}

/* ---------- culture commitments ---------- */
.commit{position:relative;overflow:hidden;}
.commit .wm{position:absolute;right:-38px;bottom:-38px;width:200px;height:200px;color:var(--ac,#D7A24A);opacity:0.15;transform:rotate(9deg);transition:opacity .35s ease,transform .6s cubic-bezier(.25,.8,.25,1);pointer-events:none;}
.commit:hover .wm{opacity:0.34;transform:rotate(0deg) scale(1.06);}
.commit .cnum{position:absolute;top:20px;right:24px;font-family:'Space Grotesk';font-weight:600;font-size:12px;letter-spacing:0.2em;color:var(--ac,#D7A24A);opacity:0.8;}
.commit .ic{background:rgba(239,232,215,0.06);transition:transform .25s ease;}
.commit .ic svg{color:var(--ac,#D7A24A);}
.commit:hover .ic{transform:translateY(-3px);}
.commit h3{position:relative;padding-bottom:12px;}
.commit h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:4px;background:var(--ac,#D7A24A);clip-path:polygon(0 100%,0 40%,25% 40%,25% 0,50% 0,50% 40%,75% 40%,75% 100%);transition:width .3s cubic-bezier(.5,.05,.2,1);}
.commit:hover h3::after{width:56px;}
.commit:hover{border-color:var(--ac,#D7A24A);}
body.js-anim .commit{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.25,.8,.25,1) var(--d,0s),border-color .25s ease 0s;}
body.js-anim .commit.in{opacity:1;transform:none;}
body.js-anim .commit .wm path{stroke-dasharray:1;stroke-dashoffset:1;}
body.js-anim .commit.in .wm path{animation:wmDraw 1.5s cubic-bezier(.4,.1,.2,1) forwards;animation-delay:calc(var(--d,0s) + .25s);}
body.js-anim .commit.in .wm path:nth-child(2){animation-delay:calc(var(--d,0s) + .45s);}
body.js-anim .commit.in .wm path:nth-child(3){animation-delay:calc(var(--d,0s) + .65s);}
@keyframes wmDraw{to{stroke-dashoffset:0;}}

/* per-commitment living watermarks */
.wm-bird use{transform-box:fill-box;transform-origin:center;}
body.js-anim .commit .wm-bird use{opacity:0;transition:opacity .9s ease calc(var(--d,0s) + .3s);}
body.js-anim .commit.in .wm-bird use{opacity:1;}
.commit.in .wm-bird use{animation:wmGlide 6s ease-in-out infinite alternate;}
@keyframes wmGlide{from{transform:translate(0.3px,0.35px) rotate(-2deg);}to{transform:translate(-0.3px,-0.5px) rotate(1.5deg);}}
body.js-anim .commit .wm-land .pine{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,1.5,.35,1);}
body.js-anim .commit.in .wm-land .pine{transform:scaleY(1);}
body.js-anim .commit.in .wm-land .pine:nth-of-type(1){transition-delay:calc(var(--d,0s) + .75s);}
body.js-anim .commit.in .wm-land .pine:nth-of-type(2){transition-delay:calc(var(--d,0s) + .95s);}
body.js-anim .commit.in .wm-land .pine:nth-of-type(3){transition-delay:calc(var(--d,0s) + 1.15s);}
body.js-anim .commit .wm .print{opacity:0;}
body.js-anim .commit.in .wm .print{animation:wmSteps 8s linear infinite;animation-delay:calc(var(--d,0s) + .4s + var(--i,0)*.55s);}
@keyframes wmSteps{0%{opacity:0;}5%{opacity:1;}66%{opacity:1;}76%{opacity:0;}100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  body.js-anim .commit .wm-bird use{opacity:1;transition:none;animation:none;}
  .commit.in .wm-bird use{animation:none;}
  body.js-anim .commit .wm-land .pine{transform:none;transition:none;}
  body.js-anim .commit .wm .print{opacity:1;animation:none;}
  body.js-anim .fviz-live .tcontours path{stroke-dasharray:none;stroke-dashoffset:0;transition:none;}
  body.js-anim .fviz-live .trail-rect{transform:none;transition:none;}
  body.js-anim .fviz-live .tmk-pop{transform:none;transition:none;}
  .fviz-live.in .tmk .ring{animation:none;}
  body.js-anim .fviz-topo .ring{opacity:0.35;}
  .fviz-live.in .tmk .glow{animation:none;}
}

/* ---------- technology: decoded topo window ---------- */
.fviz-topo .ring{transform-box:fill-box;transform-origin:center;opacity:0.35;}
body.js-anim .fviz-topo .ring{opacity:0;}
.fviz-live.in .tmk .ring{animation:tping 3.4s ease-out infinite;animation-delay:calc(1.6s + var(--i,0)*.45s);}
@keyframes tping{0%{transform:scale(1);opacity:0.75;}75%{transform:scale(3.4);opacity:0;}100%{transform:scale(3.4);opacity:0;}}
.fviz-topo .tlbl{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;fill:#4a4132;paint-order:stroke;stroke:#EDE6D4;stroke-width:3px;stroke-linejoin:round;}
.fviz-topo .televation{font-family:'Space Grotesk',sans-serif;font-size:9.5px;fill:#8a7a5f;}
body.js-anim .fviz-live .tcontours path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease .1s;}
body.js-anim .fviz-live.in .tcontours path{stroke-dashoffset:0;}
body.js-anim .fviz-live .trail-rect{transform:scaleX(0);transform-box:view-box;transform-origin:left center;transition:transform 2.1s cubic-bezier(.4,.1,.2,1) .35s;}
body.js-anim .fviz-live.in .trail-rect{transform:scaleX(1);}
body.js-anim .fviz-live .tmk-pop{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,1.6,.4,1) calc(.9s + var(--i,0)*.22s);}
body.js-anim .fviz-live.in .tmk-pop{transform:scale(1);}
.fviz-live.in .tmk .glow{animation:tglow 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.45s);}
@keyframes tglow{0%,100%{opacity:0.32;}50%{opacity:0.62;}}