/* ============================================================
   SoloFrameHub — site-2026 custom layer
   Pairs with Tailwind Play CDN + inline tailwind.config.
   Tailwind handles layout/spacing/type utilities;
   this file owns: base, fonts mapping, the LOOP diagram,
   atmosphere (grain + glow), motion, and a few components
   that read cleaner as real CSS than utility soup.
   Palette: warm paper + ember/amber + founder-teal.
   ============================================================ */

:root{
  --paper:#FBF7F1; --panel:#F4ECE0; --line:#E7DDCE;
  --ink:#1C1A17; --ink-2:#4A4540; --ink-3:#8A8178;
  --ember:#E14B2A; --ember-dark:#C23A1E; --amber:#F2A33E;
  --founder:#11A8B0; --founder-dark:#0C8A91;
  --measure:#3E66C4;            /* cool stage accent */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,.font-display{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;}
::selection{background:var(--ember); color:#fff}
a{text-decoration:none}
img{max-width:100%; display:block}

/* ---- atmosphere: subtle film grain over everything ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* warm glow blobs — drop into a section with class .glow-host (position:relative) */
.glow-host{position:relative; isolation:isolate}
.glow-host>.glow{position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.5}
.glow--ember{background:radial-gradient(circle,#F6A07Faa,transparent 70%)}
.glow--amber{background:radial-gradient(circle,#F2A33E99,transparent 70%)}
.glow--founder{background:radial-gradient(circle,#7FD8DD99,transparent 70%)}

/* faint dot grid texture utility */
.dotgrid{
  background-image:radial-gradient(var(--line) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ---- type helpers ---- */
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ember);
  display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{content:""; width:1.6rem; height:1px; background:currentColor; opacity:.6}
.eyebrow--muted{color:var(--ink-3)}
.ink-grad{
  background:linear-gradient(105deg,var(--ember),var(--amber) 60%,var(--founder));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.balance{text-wrap:balance}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  padding:.85rem 1.4rem; border-radius:999px; line-height:1; cursor:pointer;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  font-family:"Hanken Grotesk",sans-serif; font-size:.97rem;
}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--ember); color:#fff; box-shadow:0 10px 24px -10px var(--ember)}
.btn--primary:hover{background:var(--ember-dark); transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--ember)}
.btn--founder{background:var(--founder); color:#fff; box-shadow:0 10px 24px -10px var(--founder)}
.btn--founder:hover{background:var(--founder-dark); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:#fff; border-color:var(--ink-3); transform:translateY(-2px)}
.btn--ink{background:var(--ink); color:var(--paper)}
.btn--ink:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--ink)}

/* ---- cards ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:1.5rem;
  box-shadow:0 1px 2px rgba(28,26,23,.03), 0 18px 40px -28px rgba(28,26,23,.25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card--hover:hover{transform:translateY(-4px); box-shadow:0 26px 52px -28px rgba(28,26,23,.35); border-color:#dcd0bd}

/* product door cards get a top accent rule */
.door{position:relative; overflow:hidden}
.door::before{content:""; position:absolute; inset:0 0 auto 0; height:4px}
.door--gtm::before{background:linear-gradient(90deg,var(--ember),var(--amber))}
.door--founder::before{background:linear-gradient(90deg,var(--founder),#7FD8DD)}

/* chips / tags */
.chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:.85rem; color:var(--ink-2); font-weight:500;
}
.tag-live{background:rgba(17,168,176,.12); color:var(--founder-dark); border-color:transparent}
.tag-free{background:rgba(226,80,46,.1); color:var(--ember-dark); border-color:transparent}

/* ============================================================
   THE LOOP — signature diagram (Learn → Do → Measure → Refine)
   ============================================================ */
.loop{--gap:1rem}
.loop__track{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
  align-items:stretch; list-style:none; margin:0; padding:0;
}
.loop__stage{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:1.25rem; padding:1.5rem 1.4rem 1.6rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.loop__stage:hover{transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(28,26,23,.4)}
/* connecting arrow between stages */
.loop__stage:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:calc(var(--gap)/-2 - 7px); z-index:2;
  width:14px; height:14px; transform:translateY(-50%) rotate(45deg);
  border-top:2px solid var(--ink-3); border-right:2px solid var(--ink-3);
}
.loop__num{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--stage,var(--ember));
}
.loop__stage h3{font-size:1.18rem; margin:.5rem 0 .45rem; line-height:1.15}
.loop__stage p{font-size:.92rem; color:var(--ink-2); line-height:1.5; margin:0}
.loop__dot{width:2.1rem; height:2.1rem; border-radius:.7rem; display:grid; place-items:center;
  background:color-mix(in srgb,var(--stage) 14%, #fff); color:var(--stage); margin-bottom:.9rem}
.loop__stage--learn{--stage:var(--amber)}
.loop__stage--do{--stage:var(--ember)}
.loop__stage--measure{--stage:var(--measure)}
.loop__stage--refine{--stage:var(--founder)}
/* the return arc — closes the loop */
.loop__return{
  margin-top:1.1rem; display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:.85rem 1.2rem; border-radius:999px; border:1px dashed #d8ccb8;
  background:linear-gradient(90deg,rgba(17,168,176,.07),rgba(226,80,46,.07));
  font-size:.92rem; color:var(--ink-2);
}
.loop__return b{color:var(--ink); font-weight:600}
.loop__return .arc{font-size:1.15rem; color:var(--founder)}
@media (max-width:820px){
  .loop__track{grid-template-columns:1fr}
  .loop__stage:not(:last-child)::after{
    top:auto; right:50%; bottom:calc(var(--gap)/-2 - 7px); transform:translateX(50%) rotate(135deg);
  }
}

/* marquee strip for integration names */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:inline-flex; gap:2.5rem; padding-right:2.5rem; animation:marquee 34s linear infinite; white-space:nowrap}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- header / nav ---- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--paper) 82%, transparent); border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s}
.nav.scrolled{border-bottom-color:var(--line); background:color-mix(in srgb,var(--paper) 92%, transparent)}
.nav a.navlink{color:var(--ink-2); font-weight:500; font-size:.95rem; transition:color .2s}
.nav a.navlink:hover{color:var(--ink)}
/* dropdown */
.has-menu{position:relative}
.menu{position:absolute; top:calc(100% + .5rem); left:0; min-width:16rem; background:#fff;
  border:1px solid var(--line); border-radius:1rem; padding:.5rem; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.22s var(--ease); box-shadow:0 24px 50px -24px rgba(28,26,23,.4)}
.has-menu:hover .menu, .has-menu:focus-within .menu{opacity:1; visibility:visible; transform:translateY(0)}
.menu a{display:flex; gap:.75rem; padding:.7rem .8rem; border-radius:.7rem; color:var(--ink); transition:background .15s}
.menu a:hover{background:var(--panel)}
.menu .m-t{font-weight:600; font-size:.95rem}
.menu .m-d{font-size:.82rem; color:var(--ink-3); margin-top:.1rem}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:60; background:var(--paper); padding:1.5rem;
  transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer a{padding:.9rem 0; border-bottom:1px solid var(--line); font-size:1.1rem; font-weight:500; color:var(--ink)}

/* ---- footer ---- */
.site-footer{background:var(--ink); color:#cdc6bd}
.site-footer a{color:#cdc6bd; transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer h4{color:#fff; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}

/* ---- scroll reveal ----
   Visible by DEFAULT. We only hide (then animate in) once JS confirms it can
   reveal them — so no-JS, crawlers, and non-animating renderers all see content.
   The reveal END-STATE is a class toggle (.in), not an animation completing,
   so it shows even where CSS transitions don't run. */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important; transform:none!important; transition:none!important}}

/* misc */
.rule{height:1px; background:var(--line)}
.kicker-num{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; line-height:1}
.link-arrow{display:inline-flex; align-items:center; gap:.35rem; color:var(--ember); font-weight:600}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* =================================================================
   2026b additions — Plasma-borrowed composition on the warm system:
   announcement pill, product-window screenshot frames, feature strip,
   a live "outcomes" dashboard mockup, and an Ask-the-coach prompt.
   All token-driven so a light↔dark flip stays a :root variable swap.
   ================================================================= */

/* ---- announcement pill (hero "what's new") ---- */
.pill-new{display:inline-flex; align-items:center; gap:.6rem; padding:.38rem .9rem .38rem .42rem;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.84rem; color:var(--ink-2);
  box-shadow:0 10px 26px -18px rgba(28,26,23,.5); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.pill-new:hover{transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(28,26,23,.5)}
.pill-new .tag{display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .62rem; border-radius:999px;
  background:linear-gradient(105deg,var(--ember),var(--amber)); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase}
.pill-new b{color:var(--ink); font-weight:600}
.pill-new svg{color:var(--ink-3); transition:transform .25s var(--ease)}
.pill-new:hover svg{transform:translateX(3px)}

/* ---- product-window screenshot frame ---- */
.window{position:relative; border-radius:1.15rem; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 50px 90px -45px rgba(28,26,23,.5), 0 1px 0 rgba(255,255,255,.7) inset}
.window__bar{display:flex; align-items:center; gap:.45rem; padding:.7rem .95rem; background:var(--panel);
  border-bottom:1px solid var(--line)}
.window__dot{width:.7rem; height:.7rem; border-radius:50%; flex:none}
.window__url{margin-left:.55rem; font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--ink-3);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.18rem .8rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.window>img{display:block; width:100%; height:auto}

/* floating stat cards layered over a hero shot */
.float-card{position:absolute; z-index:3; display:flex; align-items:center; gap:.6rem; background:#fff;
  border:1px solid var(--line); border-radius:.85rem; padding:.6rem .8rem; font-size:.82rem; color:var(--ink-2);
  box-shadow:0 26px 54px -30px rgba(28,26,23,.55); animation:floaty 6s var(--ease) infinite}
.float-card b{color:var(--ink); font-weight:700}
.float-card .fc-ico{width:1.9rem; height:1.9rem; border-radius:.6rem; display:grid; place-items:center; flex:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:680px){.float-card{display:none}}

/* ---- feature strip (what's inside the product) ---- */
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1rem; margin:0 -.25rem; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
@media (min-width:760px){.strip{grid-auto-columns:46%}}
@media (min-width:1024px){.strip{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0}}
.fcard{scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:1.15rem; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s}
.fcard:hover{transform:translateY(-4px); box-shadow:0 28px 56px -32px rgba(28,26,23,.42); border-color:#dcd0bd}
.fcard__shot{aspect-ratio:16/10; overflow:hidden; background:var(--panel); border-bottom:1px solid var(--line)}
.fcard__shot img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s var(--ease)}
.fcard:hover .fcard__shot img{transform:scale(1.035)}
.fcard__body{padding:1rem 1.15rem 1.2rem}
.fcard__body h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); margin:0 0 .3rem}
.fcard__body p{font-size:.86rem; color:var(--ink-2); line-height:1.5; margin:0}
.fcard__tag{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.64rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:.18rem .5rem; border-radius:.4rem; margin-bottom:.55rem}

/* ---- outcomes dashboard mockup (the Measure stage, shown not told) ---- */
.dash{background:#fff; border:1px solid var(--line); border-radius:1.4rem; padding:1.3rem 1.4rem 1.5rem;
  box-shadow:0 40px 80px -44px rgba(28,26,23,.4)}
.dash__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem}
.dash__title{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.metric-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.1rem}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:.9rem; padding:.8rem .85rem}
.metric .m-n{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.5rem; line-height:1; color:var(--ink)}
.metric .m-l{font-size:.72rem; color:var(--ink-3); margin-top:.3rem}
.metric .m-up{font-size:.7rem; font-weight:600; color:var(--founder-dark)}
.bars{display:flex; align-items:flex-end; gap:.5rem; height:5.5rem; padding-top:.4rem}
.bars .bar{flex:1; border-radius:.4rem .4rem 0 0; background:linear-gradient(180deg,var(--ember),var(--amber)); opacity:.9}
.bars .bar.alt{background:linear-gradient(180deg,var(--founder),#7FD8DD)}

/* ---- Ask-the-coach prompt pill (Plasma "Ask AI") ---- */
.coach-pill{display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.5rem .55rem .5rem 1.1rem; box-shadow:0 18px 40px -24px rgba(28,26,23,.5)}
.coach-pill .cp-txt{flex:1; font-size:.92rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.coach-pill .cp-go{flex:none; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--paper)}

/* ---- small award / trust row ---- */
.trust{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1.4rem; color:var(--ink-3); font-size:.82rem}
.trust .t-item{display:inline-flex; align-items:center; gap:.5rem}

/* ---- price mini-card extras ---- */
.trial-chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:600;
  color:var(--founder-dark); background:rgba(17,168,176,.1); border-radius:999px; padding:.2rem .65rem}

/* ============================================================
   Screenshot lightbox — click any product screenshot to see it
   full-size (the real screens carry detail that's unreadable at
   the in-page scale). Built by site-2026.js; styles are here.
   ============================================================ */
.zoomable{cursor:zoom-in}
.window>img.zoomable{transition:filter .2s var(--ease)}
.window>img.zoomable:hover{filter:brightness(1.02) saturate(1.03)}
.lightbox{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem); background:rgba(20,18,15,.84); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s var(--ease)}
.lightbox.open{opacity:1; visibility:visible}
.lightbox__img{max-width:min(1400px,95vw); max-height:92vh; width:auto; height:auto; border-radius:.6rem;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.14); background:#fff;
  transform:scale(.97); transition:transform .28s var(--ease); cursor:zoom-out}
.lightbox.open .lightbox__img{transform:scale(1)}
.lightbox__close{position:absolute; top:1rem; right:1.1rem; width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22); cursor:pointer; transition:background .2s}
.lightbox__close:hover{background:rgba(255,255,255,.26)}
.lightbox__cap{position:absolute; bottom:1rem; left:0; right:0; text-align:center; color:rgba(255,255,255,.82);
  font-size:.85rem; line-height:1.4; padding:0 1.4rem; font-family:"Hanken Grotesk",sans-serif; pointer-events:none}
@media (prefers-reduced-motion:reduce){.lightbox,.lightbox__img{transition:opacity .28s linear}}