/* Something Lighter "flow" look (October 2026).
   Loads after each page's own styles. Warm paper canvas, floating cards,
   big tight headlines with the serif italic kept for accents, mono pill labels,
   and thin blue flow lines between sections. System fonts only. */

:root{
  --fl-canvas:#ffffff;
  --fl-paper:#ffffff;
  --fl-card:#ffffff;
  --fl-ink:#14181f;
  --fl-text:#2a3138;
  --fl-muted:#5d646c;
  --fl-line:#e3e4e8;
  --fl-blue:#3557d6;
  --fl-blue-soft:#e3e8fb;
  --fl-dark:#17191d;
  --fl-dark-2:#22252a;
  --fl-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fl-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fl-shadow:0 1px 2px rgba(20,24,31,.05),0 24px 48px -28px rgba(20,24,31,.24);
  --fl-radius:22px;
}

/* Canvas */
html,html body{background:var(--fl-canvas)!important;color:var(--fl-text)}
html body:before,html body:after{display:none!important}
html body .page{background:#fff!important;box-shadow:none!important;border:0!important}

/* Headlines: big, tight, sans. The serif italic stays for the soft accent words. */
html body h1,html body h2,html body .welcome h2{font-family:var(--fl-sans)!important;font-weight:500!important;letter-spacing:-.045em!important;color:var(--fl-ink)}
html body h3{font-family:var(--fl-sans)!important;font-weight:500!important;letter-spacing:-.03em!important;color:var(--fl-ink)}
html body h2 em,html body h3 em,html body .welcome em{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif!important;font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--fl-blue)!important;background:none!important;padding:0!important}

/* Mono pill labels */
html body .eyebrow,html body .row-method,html body .rail span:not(.eyebrow){font-family:var(--fl-mono)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase;color:#4a5058!important}
html body .eyebrow,html body .row-method{display:inline-flex!important;align-items:center;gap:7px;background:#f3f4f6!important;border:1px solid #e3e4e8;padding:5px 11px!important;border-radius:99px!important;margin-bottom:14px!important}
html body .eyebrow:before,html body .row-method:before{content:"";width:6px;height:6px;border-radius:2px;background:var(--fl-blue);flex:none}

/* Buttons */
html body .button:not(.outline){background:var(--fl-blue)!important;border-color:var(--fl-blue)!important;color:#fff!important;border-radius:12px!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:500!important;box-shadow:0 8px 20px -10px rgba(53,87,214,.7)!important}
html body .button:not(.outline):hover{background:#2846b8!important}
html body .button.outline{background:#fff!important;border:1px solid var(--fl-line)!important;color:var(--fl-ink)!important;border-radius:12px!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:500!important;box-shadow:0 1px 2px rgba(20,24,31,.06)!important}
html body .textlink{color:var(--fl-ink)}

/* Top bar */
html body .topbar{border-top:0!important;background:transparent!important}
html body .topbar nav a{font-family:var(--fl-mono);font-size:11.5px!important;letter-spacing:.07em!important;border-radius:99px}
html body .topbar nav a:last-child{background:var(--fl-ink)!important;color:#fff!important}

/* Floating cards */
html body #library .fix-row,
html body .feature,
html body #tutorials .side>div,
html body #shop .side>div,
html body #about .side>div,
html body #about .about-copy,
html body .catalog-product,
html body #adaptations>div,
html body :is(#send-mess,#substack)>div,
html body #how-it-works .anatomy-grid article,
html body .fl-never{
  background:var(--fl-card)!important;
  border:1px solid #e9eaee!important;
  border-radius:var(--fl-radius)!important;
  box-shadow:var(--fl-shadow)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body .under-note{background:transparent!important;border:1px dashed #d6d8de!important;border-radius:14px!important;font-family:var(--fl-mono);font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--fl-muted)}

/* One dark card to anchor each run of light ones, like a workspace panel */
html body #library .fix-row:first-child,
html body #substack>div:last-child{
  background:linear-gradient(180deg,var(--fl-dark-2),var(--fl-dark))!important;
  border-color:#000!important;color:#e9eaec!important;
}
html body #library .fix-row:first-child :is(h3,p,.textlink),
html body #substack>div:last-child p{color:#f1f2f4!important}
html body #library .fix-row:first-child p{color:#b9bdc4!important}
html body #library .fix-row:first-child .row-method{background:#2c3036!important;border-color:#3a3f46;color:#c9cdd3!important}
html body #library .fix-row:first-child:before,html body #library .fix-row:first-child:after{display:none!important}
html body #library .fix-row:first-child .textlink{border-color:#5b616a!important}
html body #library .fix-row:first-child .button.outline,html body #library .fix-row:first-child .fix-actions .button{background:var(--fl-blue)!important;border-color:var(--fl-blue)!important;color:#fff!important}

/* "How it works" numbers become small blue step badges */
html body .anatomy-number{display:inline-grid!important;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--fl-blue-soft)!important;color:var(--fl-blue)!important;font-family:var(--fl-mono)!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important}

/* Small steps list becomes a checklist of pills, like a running workflow */
html body #tutorials .side-item{display:flex!important;align-items:center;gap:10px;border:1px solid var(--fl-line)!important;border-radius:99px!important;padding:8px 14px 8px 8px!important;margin:0 0 8px!important;background:#fff!important;text-align:left}
html body #tutorials .side-item:before{content:"✓";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--fl-blue-soft);color:var(--fl-blue);font:600 12px var(--fl-sans)}
html body #tutorials .side-item img{display:none!important}
html body #about .side-item{border:1px solid var(--fl-line)!important;border-radius:99px!important;padding:8px 14px!important;margin:0 0 8px!important;background:#fff!important}

/* Giant soft word behind the welcome, borrowed from big studio sites */
html body .welcome{position:relative;overflow:hidden}
html body .fl-bgword{position:absolute;right:-1%;bottom:-.18em;font:600 clamp(110px,19vw,300px)/1 var(--fl-sans);letter-spacing:-.06em;color:rgba(20,24,31,.045);pointer-events:none;user-select:none;z-index:0;white-space:nowrap}
html body .welcome>*:not(.fl-bgword){position:relative;z-index:1}
html body .welcome h2{font-size:clamp(38px,5.4vw,72px)!important;line-height:1!important}

/* Flow lines between sections: a thin blue line that turns a soft corner and carries a mono label */
.fl-flow{position:relative;height:74px;margin:6px 4.7% -6px;pointer-events:none}
.fl-flow:before,.fl-flow:after{content:"";position:absolute;border:0 solid var(--fl-blue);opacity:.9}
.fl-flow:before{left:0;top:0;width:50%;height:50%;border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:18px}
.fl-flow:after{right:0;top:50%;width:50%;height:50%;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:18px;transform:translateY(-1.5px)}
.fl-flow.r:before{left:auto;right:0;border-left-width:0;border-right-width:1.5px;border-bottom-left-radius:0;border-bottom-right-radius:18px}
.fl-flow.r:after{right:auto;left:0;border-right-width:0;border-left-width:1.5px;border-top-right-radius:0;border-top-left-radius:18px}
.fl-flow span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--fl-paper);padding:4px 14px;font:500 11px/1 var(--fl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fl-ink);white-space:nowrap;z-index:1}

/* Footer word */
html body footer .large-word{font-family:var(--fl-sans)!important;font-weight:600!important;letter-spacing:-.06em!important;color:var(--fl-ink)}
html body footer nav a{font-family:var(--fl-mono);font-size:11.5px;letter-spacing:.05em;background:#efeee8!important;border:1px solid var(--fl-line);border-radius:99px!important}

/* Phone: tighter, same feel */
@media (max-width:760px){
  html body .page{border:0}
  .fl-flow{height:46px;margin:2px 5% -4px}
  .fl-flow:before,.fl-flow:after{border-radius:0!important}
  .fl-flow:before{border-bottom-left-radius:12px!important}
  .fl-flow:after{border-top-right-radius:12px!important}
  .fl-flow.r:before{border-bottom-left-radius:0!important;border-bottom-right-radius:12px!important}
  .fl-flow.r:after{border-top-right-radius:0!important;border-top-left-radius:12px!important}
  html body .welcome h2{font-size:40px!important}
  html body h2{letter-spacing:-.04em!important}
  html body .fl-bgword{font-size:130px;bottom:-.12em}
}
@media (prefers-reduced-motion:reduce){html body *{scroll-behavior:auto}}

/* Welcome sits straight on the canvas, like a big studio hero */
html body .welcome{background:transparent!important;border:0!important;padding:46px 7% 40px!important;margin:0!important}
html body .welcome .welcome-copy,html body .welcome>.actions{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html body .welcome .welcome-description{font-family:var(--fl-sans)!important;font-size:19px!important;line-height:1.5!important;color:var(--fl-text)!important;max-width:560px}
html body .welcome>.actions{flex-direction:column;align-items:stretch;min-width:240px}

/* Side panel titles as mono labels */
html body .side h4,html body .side .aside-title,html body .side-note h4{font-family:var(--fl-mono)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.09em!important;text-transform:uppercase;color:#4a5058!important;margin-bottom:12px!important}

/* The dark guide card shows a small running checklist, like a workspace panel */
.fl-play{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:8px;max-width:440px}
.fl-play li{display:flex;align-items:center;gap:10px;border:1px solid #3a3f46;border-radius:99px;padding:7px 14px 7px 7px;font:500 14px/1.2 var(--fl-sans);color:#e4e6ea}
.fl-play li:before{content:"→";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#cfd3d8;font-size:12px}
.fl-play li.next{color:#8b9098;border-style:dashed}


/* Footer: dark, with the name as a huge soft word */
html body footer{background:var(--fl-dark)!important;color:#c9cdd3!important;border:0!important;border-radius:var(--fl-radius)!important;box-shadow:none!important;overflow:hidden}
html body footer .large-word{color:#2b2f35!important;font-size:clamp(70px,13vw,190px)!important;line-height:.9!important;border-color:#2b2f35!important}
html body footer .brand{color:#fff!important}
html body footer nav a{background:#22252a!important;border-color:#33373d!important;color:#e4e6ea!important}
html body footer .bottom{color:#8b9098!important;border-color:#2b2f35!important}
html body footer .bottom a{color:#c9cdd3!important}
.fl-flow:before,.fl-flow:after{opacity:1}

/* ------------------------------------------------------------------
   Colour from the painting, pictures in the cards, and motion.
   ------------------------------------------------------------------ */
:root{
  --fl-sky:#aed6d2;--fl-mint:#cfe7dc;--fl-cloud:#f7e8d2;--fl-hill:#bdc498;
  --fl-grass:#7f8a3e;--fl-wood:#f4cd98;--fl-peach:#f2c1a6;--fl-teal:#2f8f86;
  --fl-desk:url(/place/img/desk-800-3fc8b2e1.webp);--fl-sky-img:url(/assets/img/cloud-bg-420-6557fc49.webp);--fl-note:url(/assets/img/notebook-1000-0c24870e.webp);
}

/* Colourful accents: the italic words carry the sky into the blue */
html body h2 em,html body .welcome h2 em{background:linear-gradient(100deg,var(--fl-teal),var(--fl-blue) 70%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent}
html body .eyebrow:before,html body .row-method:before{background:linear-gradient(135deg,var(--fl-teal),var(--fl-blue))}

/* Hero: the island floats, clouds drift across the bottom, and it melts into the page */
html body .hero{background:var(--fl-sky)!important}
html body .hero img{will-change:transform;transform-origin:50% 60%}
.fl-clouds{position:absolute;left:-10%;right:-10%;bottom:-2px;height:42%;pointer-events:none;z-index:1;
  background:url(/assets/img/cloud-bg-420-6557fc49.webp) repeat-x 0 100%/auto 100%;opacity:.55;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
.fl-moving .fl-clouds{animation:fl-drift 70s linear infinite}
html body .hero:after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(to bottom,transparent,#fff);z-index:2;pointer-events:none}
@keyframes fl-drift{to{background-position:-840px 100%}}

/* Welcome: a soft painted sky glows behind the words */
html body .welcome:before{content:"";position:absolute;right:-6%;top:-30%;width:62%;height:160%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(174,214,210,.55),rgba(207,231,220,.35) 45%,rgba(247,232,210,.25) 70%,transparent);filter:blur(10px)}
.fl-moving html body .fl-bgword,.fl-moving .fl-bgword{animation:fl-word 26s ease-in-out infinite alternate}
@keyframes fl-word{from{transform:translateX(0)}to{transform:translateX(-7%)}}
html body .fl-bgword{background:linear-gradient(100deg,rgba(174,214,210,.35),rgba(53,87,214,.10));-webkit-background-clip:text;background-clip:text;color:transparent}

/* A slow ribbon of the guides, in painting colours */
.fl-ticker{overflow:hidden;margin:6px 0 4px;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fl-ticker .fl-track{display:flex;gap:10px;width:max-content}
.fl-moving .fl-ticker .fl-track{animation:fl-tick 48s linear infinite}
.fl-ticker:hover .fl-track{animation-play-state:paused}
.fl-ticker span{font:500 12px/1 var(--fl-mono);letter-spacing:.07em;text-transform:uppercase;padding:9px 14px;border-radius:99px;white-space:nowrap;color:#1d2a2a}
.fl-ticker span:nth-child(4n+1){background:var(--fl-mint)}
.fl-ticker span:nth-child(4n+2){background:var(--fl-cloud)}
.fl-ticker span:nth-child(4n+3){background:#dfe6fb}
.fl-ticker span:nth-child(4n){background:#e6ead2}
@keyframes fl-tick{to{transform:translateX(-50%)}}

/* Guide cards: a slice of the painting with the guide's own screen tilted on top */
.fl-pic{position:relative;height:118px;margin:-6px -6px 18px;border-radius:16px;overflow:hidden;background:linear-gradient(120deg,var(--fl-mint),var(--fl-cloud)) center/cover;isolation:isolate}
#library .fix-row.fl-in .fl-pic,.fl-still #library .fl-pic{background-image:var(--pic,var(--fl-sky-img))}
.fl-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35));z-index:0}
.fl-pic img{position:absolute;right:18px;top:16px;width:84px;height:auto;border-radius:12px;border:3px solid #fff;box-shadow:0 18px 30px -12px rgba(20,24,31,.45);transform:rotate(5deg);z-index:1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#library .fix-row:hover .fl-pic img{transform:rotate(1deg) translateY(-6px) scale(1.04)}
#library .fix-row:nth-child(2) .fl-pic{--pic:var(--fl-desk);background-position:30% 70%;background-size:cover}
#library .fix-row:nth-child(3) .fl-pic{--pic:var(--fl-sky-img);background-position:50% 20%;background-size:cover}
#library .fix-row:nth-child(4) .fl-pic{--pic:var(--fl-desk);background-position:85% 25%;background-size:cover}
#library .fix-row:nth-child(5) .fl-pic{--pic:var(--fl-sky-img);background-position:50% 85%;background-size:cover}
#library .fix-row:nth-child(6) .fl-pic{--pic:var(--fl-note);background-position:50% 15%;background-size:cover}
#library .fix-row:nth-child(7) .fl-pic{--pic:var(--fl-desk);background-position:10% 55%;background-size:cover}
#library .fix-row:nth-child(8) .fl-pic{--pic:var(--fl-sky-img);background-position:50% 55%;background-size:cover}
#library .fix-row:nth-child(9) .fl-pic{--pic:var(--fl-note);background-position:50% 70%;background-size:cover}
#library .fix-row{position:relative;overflow:hidden}

/* The planner card becomes a painting card, like a destination card */
html body #library .fix-row:first-child{background:linear-gradient(180deg,#2b3a3c,var(--fl-dark))!important}
html body #library .fix-row.fl-in:first-child,html.fl-still body #library .fix-row:first-child{background:linear-gradient(180deg,rgba(18,28,30,.15) 0%,rgba(18,22,26,.55) 45%,rgba(16,18,22,.92) 100%),var(--fl-desk) 40% 50%/cover!important}
.fl-moving #library .fix-row:first-child{animation:fl-pan 30s ease-in-out infinite alternate}
@keyframes fl-pan{from{background-position:0 0,20% 50%}to{background-position:0 0,75% 50%}}
html body #library .fix-row:first-child .row-method{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important;backdrop-filter:blur(6px)}
html body #library .fix-row:first-child p{color:#e8ecee!important}

/* Its checklist steps through */
.fl-play li{transition:background .4s,border-color .4s,color .4s;background:rgba(16,18,22,.45);backdrop-filter:blur(4px)}
.fl-play li.done:before{content:"✓";background:var(--fl-teal);border:0;color:#fff}
.fl-play li.now{border-color:rgba(174,214,210,.7);color:#fff;border-style:solid}
.fl-play li.now:before{content:"";background:conic-gradient(var(--fl-sky) 0 30%,rgba(255,255,255,.18) 0);box-shadow:inset 0 0 0 5px #1d2126;border:0}
.fl-moving .fl-play li.now:before{animation:fl-spin 1s linear infinite}
@keyframes fl-spin{to{transform:rotate(1turn)}}

/* How it works: each step gets its own colour from the painting */
html body #how-it-works .anatomy-grid article{position:relative;overflow:hidden}
html body #how-it-works .anatomy-grid article:before{content:"";position:absolute;inset:0 0 auto 0;height:6px}
html body #how-it-works .anatomy-grid article:nth-child(1):before{background:linear-gradient(90deg,var(--fl-sky),var(--fl-mint))}
html body #how-it-works .anatomy-grid article:nth-child(2):before{background:linear-gradient(90deg,var(--fl-wood),var(--fl-peach))}
html body #how-it-works .anatomy-grid article:nth-child(3):before{background:linear-gradient(90deg,var(--fl-hill),#9cc7a0)}
html body #how-it-works .anatomy-grid article:nth-child(1) .anatomy-number{background:var(--fl-mint)!important;color:#1f5c56!important}
html body #how-it-works .anatomy-grid article:nth-child(2) .anatomy-number{background:#fbe6d2!important;color:#8a4b1d!important}
html body #how-it-works .anatomy-grid article:nth-child(3) .anatomy-number{background:#e6ead2!important;color:#4f5a1f!important}

/* Substack card: dark with the clouds coming through */
html body #substack>div:last-child{background:linear-gradient(180deg,rgba(23,25,29,.72),rgba(23,25,29,.94)),url(/assets/img/cloud-bg-420-6557fc49.webp) center/cover!important}
/* Share card picks up a soft sky */
html body #send-mess>div:first-child{background:linear-gradient(140deg,#eef7f5,#fff 55%,#fdf6ec)!important}

/* Flow lines draw themselves, and a small light travels along them */
.fl-flow i{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--fl-sky);box-shadow:0 0 0 4px rgba(174,214,210,.35),0 0 14px rgba(53,87,214,.5);z-index:2}
.fl-moving .fl-flow i{animation:fl-run 7s cubic-bezier(.45,0,.55,1) infinite}
.fl-flow.r i{animation-direction:reverse}
@keyframes fl-run{0%{left:2%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:98%;opacity:0}}
.fl-moving .fl-flow.fl-rv:before,.fl-moving .fl-flow.fl-rv:after{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.fl-moving .fl-flow.fl-rv:after{transition-delay:.5s}
.fl-moving .fl-flow.fl-rv.fl-in:before,.fl-moving .fl-flow.fl-rv.fl-in:after{clip-path:inset(0 0 0 0)}
.fl-moving .fl-flow.fl-rv{opacity:1!important;transform:none!important;filter:none!important}

/* Rise-in */
.fl-moving .fl-rv{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.fl-moving .fl-rv.fl-in{opacity:1;transform:none;filter:none}

/* Lean toward the pointer, with a soft light under it */
.fl-moving #library .fix-row.fl-in,.fl-moving #how-it-works .anatomy-grid article.fl-in,.fl-moving .catalog-product.fl-in{
  transform:perspective(900px) rotateX(var(--fl-rx,0deg)) rotateY(var(--fl-ry,0deg));transition:transform .35s ease,box-shadow .35s ease,opacity .8s,filter .8s}
.fl-moving #library .fix-row:not(:first-child):hover,.fl-moving #how-it-works .anatomy-grid article:hover{
  box-shadow:0 1px 2px rgba(20,24,31,.05),0 34px 60px -28px rgba(47,143,134,.45)!important;
  background-image:radial-gradient(400px circle at var(--fl-mx,50%) var(--fl-my,50%),rgba(174,214,210,.22),transparent 60%)!important}

/* Buttons: the arrow nudges forward */
html body .button svg,html body .button:after{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html body .button:hover svg,html body .button:hover:after{transform:translateX(4px)}
.fl-moving html body .eyebrow:before,.fl-moving .eyebrow:before{animation:fl-pulse 2.6s ease-in-out infinite}
@keyframes fl-pulse{50%{transform:scale(.6);opacity:.6}}

@media (max-width:760px){
  .fl-pic{height:104px}
  .fl-pic img{width:70px;right:14px;top:12px}
  html body .welcome:before{width:120%;right:-30%;top:-10%}
  .fl-ticker span{font-size:11px;padding:8px 12px}
}
.fl-still .fl-rv{opacity:1!important;transform:none!important;filter:none!important}
html body .welcome>.actions{overflow:visible!important}
html body .welcome>.actions .textlink{align-self:flex-start;margin-left:2px}

/* ------------------------------------------------------------------
   Tighter layout (her note: too much space between cards and sections)
   ------------------------------------------------------------------ */
html body .content-section,html body .spread,html body #library,html body #how-it-works,html body #tutorials,html body #about,html body #shop{padding:30px 5% 34px!important;border-bottom:0!important}
html body .content-heading{margin-bottom:18px!important;gap:24px!important;align-items:end}
html body .content-heading h2,html body .sectionhead h2,html body h2{font-size:clamp(32px,4.2vw,54px)!important;line-height:1.02!important}
html body .sectionhead{margin-bottom:16px!important}
html body .content-heading>p{margin:0!important}
.fl-flow{height:40px!important;margin:0 5%!important}
.fl-ticker{margin:0!important;padding:6px 0!important}
html body .welcome{padding:30px 5% 22px!important;gap:28px!important}
html body .welcome h2{font-size:clamp(36px,4.8vw,62px)!important}
html body .welcome .welcome-description{margin-top:12px!important}

/* Guide cards: one even grid, no stretched or empty cards */
html body #library .fix-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:14px!important;align-items:start}
html body #library .fix-row{grid-column:auto!important;grid-row:auto!important;min-height:0!important;padding:16px 18px 18px!important;gap:8px!important;border-radius:20px!important}
html body #library .fix-row h3{font-size:clamp(21px,1.7vw,25px)!important;margin:0 0 4px!important;line-height:1.1!important}
html body #library .fix-row p{font-size:15px!important;line-height:1.5!important}
html body #library .fix-row .row-method{margin-bottom:6px!important}
html body #library .fix-actions{padding-top:8px!important;gap:6px 16px!important;margin-top:auto;flex-wrap:wrap}
html body #library .fix-actions .button{min-height:42px!important;padding:9px 14px!important;font-size:14px!important}
html body #library .fix-row{height:100%}
.fl-pic{height:92px!important;margin:-4px -6px 10px!important}
.fl-pic img{width:62px!important;top:10px!important;right:14px!important}

/* The planner card runs the full width, words on the left, checklist on the right */
html body #library .fix-row:first-child{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"text play" "acts play";gap:6px 28px!important;padding:22px 24px!important;align-items:start}
html body #library .fix-row:first-child>div:first-of-type{grid-area:text;display:contents}
html body #library .fix-row:first-child h3{font-size:clamp(26px,2.6vw,36px)!important}
html body #library .fix-row:first-child .fl-play{grid-row:1/span 3;grid-column:2;margin:0!important;align-self:center;max-width:none}
html body #library .fix-row:first-child .fix-actions{grid-column:1;padding-top:6px!important}

/* How it works */
html body #how-it-works .anatomy-grid{gap:12px!important}
html body #how-it-works .anatomy-grid article{padding:18px 20px!important;gap:6px!important}
html body #how-it-works .anatomy-grid h3{font-size:22px!important;margin:6px 0 2px!important}

/* Start with one thing / shop / about */
html body .feature{padding:14px!important;gap:20px!important}
html body #tutorials .feature-image{height:100%!important;min-height:0!important;max-height:340px}
html body #tutorials .feature h3{font-size:clamp(24px,2.4vw,32px)!important}
html body .side{gap:12px!important}
html body .side>div{padding:16px!important}
html body #tutorials .side-item{padding:6px 12px 6px 6px!important;margin:0 0 6px!important;min-height:0!important}
html body .under-note{margin-top:10px!important;padding:10px 14px!important}
html body .rail{gap:18px!important}
html body #shop .glass-thread{min-height:300px!important}
html body .catalog-product{padding:18px!important}
html body .shop-catalog{gap:12px!important;margin-top:14px!important}
html body #send-mess,html body #substack{margin:10px 5%!important;gap:12px!important;padding:0!important}
html body :is(#send-mess,#substack)>div{padding:24px!important;min-height:0!important}
html body #about .about-copy{padding:22px 24px!important}
html body #about .about-copy .opening{font-size:clamp(22px,2.2vw,30px)!important;margin-bottom:12px!important}
html body #adaptations{margin:14px 5% 18px!important;gap:12px!important}
html body #adaptations>div{padding:22px 24px!important}

/* ------------------------------------------------------------------
   Footer: the same glowing glass as the welcome, with the soft giant word
   ------------------------------------------------------------------ */
html body footer{position:relative;isolation:isolate;margin:10px 5% 24px!important;padding:24px 26px 18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.5))!important;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:26px!important;color:var(--fl-text)!important;
  box-shadow:0 1px 2px rgba(20,24,31,.05),0 30px 60px -34px rgba(47,143,134,.45),inset 0 1px 0 #fff!important;overflow:hidden}
html body footer:before{content:"";position:absolute;inset:-40% -10% -40% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 55% at 78% 60%,rgba(174,214,210,.75),transparent 70%),radial-gradient(35% 50% at 20% 90%,rgba(247,232,210,.8),transparent 70%),radial-gradient(30% 45% at 55% 10%,rgba(207,231,220,.7),transparent 70%),radial-gradient(25% 40% at 95% 10%,rgba(53,87,214,.16),transparent 70%);filter:blur(18px)}
.fl-moving body footer:before{animation:fl-glow 18s ease-in-out infinite alternate}
@keyframes fl-glow{to{transform:translate3d(-4%,3%,0) scale(1.06)}}
html body footer .brand{color:var(--fl-ink)!important}
html body footer nav a{background:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.95)!important;color:var(--fl-ink)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 12px -6px rgba(20,24,31,.18)}
html body footer .large-word{background:linear-gradient(100deg,rgba(47,143,134,.32),rgba(53,87,214,.22));-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  font-size:clamp(56px,11vw,170px)!important;line-height:.95!important;margin:14px 0 6px!important;padding-bottom:6px;border-color:rgba(20,24,31,.08)!important}
html body footer .bottom{color:var(--fl-muted)!important;border-color:rgba(20,24,31,.08)!important;padding-top:6px!important}
html body footer .bottom a{color:var(--fl-ink)!important}

/* ------------------------------------------------------------------
   Every screen size
   ------------------------------------------------------------------ */
@media (max-width:1100px){
  html body #tutorials,html body #about,html body #shop{grid-template-columns:22px minmax(0,1fr) 200px!important;gap:18px!important}
}
@media (max-width:900px){
  html body #tutorials,html body #about,html body #shop{grid-template-columns:minmax(0,1fr)!important}
  html body .side{grid-column:1!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  html body #library .fix-row:first-child{grid-template-columns:1fr;grid-template-areas:none}
  html body #library .fix-row:first-child .fl-play{grid-row:auto;grid-column:1;margin:6px 0 2px!important}
  html body .content-heading{grid-template-columns:1fr!important;gap:8px!important}
  html body #send-mess,html body #substack,html body #adaptations{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  html body .content-section,html body .spread,html body #library,html body #how-it-works,html body #tutorials,html body #about,html body #shop{padding:22px 4.5% 24px!important}
  html body .content-heading h2,html body .sectionhead h2,html body h2{font-size:clamp(28px,8.4vw,36px)!important}
  html body .welcome{padding:22px 4.5% 16px!important}
  html body .welcome h2{font-size:clamp(32px,9.4vw,40px)!important}
  html body .welcome .welcome-description{font-size:17px!important}
  html body .welcome>.actions{min-width:0!important;margin-top:16px!important;gap:10px!important}
  html body #library .fix-list{grid-template-columns:1fr!important;gap:10px!important}
  html body #library .fix-row{padding:14px 16px 16px!important}
  html body #library .fix-row:first-child{padding:18px!important}
  html body #library .fix-row h3{font-size:22px!important}
  html body .side{grid-template-columns:1fr!important}
  html body .feature{padding:10px!important;gap:12px!important}
  html body #tutorials .feature-image{height:200px!important;max-height:none}
  html body :is(#send-mess,#substack)>div,html body #adaptations>div,html body #about .about-copy{padding:18px!important}
  html body #send-mess,html body #substack,html body #adaptations{margin:8px 4.5%!important}
  html body footer{margin:8px 4.5% 16px!important;padding:18px 18px 14px!important}
  html body footer nav{flex-direction:row!important;flex-wrap:wrap;gap:6px!important}
  .fl-flow{height:30px!important;margin:0 4.5%!important}
  .fl-pic{height:84px!important}
  html body .rail{margin-bottom:10px!important}
}
@media (max-width:360px){
  html body .welcome h2{font-size:30px!important}
  html body #library .fix-actions .button{width:100%}
}
@media (min-width:641px){
  html body #library .row-method{white-space:nowrap;font-size:10.5px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  html body .shop-catalog{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important}
}
html body .catalog-product{min-height:0!important}