/* Modern light-blue canvas for the whole page.
   Layers, back to front: sky gradient (body) > aurora light pools >
   flowing ribbons > fine grain. Content surfaces below are frosted glass on top of it.
   Every ribbon tile has a seamless 1200 px period. */
:root{
  --muted:#566679;
  --line:#d3e6f1;
  --sky-50:#f3fbff;
  --sky-100:#e6f6fe;
  --sky-200:#cdeefb;
  --cyan:#43d2ff;
  --glass-edge:rgba(255,255,255,.95);
  --glass-shadow:0 1px 0 #fff inset,0 40px 80px -50px rgba(6,124,174,.4),0 3px 14px rgba(6,124,174,.05);
}
body{position:relative;isolation:isolate;background:#e9f8ff linear-gradient(180deg,#d6f2ff 0,#e6f8ff 620px,#eef9ff 1500px,#e8f6fe 3200px,#def1fb 5000px,#d1eaf8 100%)}

/* Light layer: sized to the whole page, never intercepts clicks */
.ambient-light{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient-light::after{content:"";position:absolute;inset:0;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .36 0 0 0 0 .52 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Aurora light pools */
.ambient-orb{--s:min(1000px,120vw);position:absolute;width:var(--s);height:var(--s);border-radius:50%}
.orb-a{--s:min(1200px,130vw);left:-24vw;top:-460px;background:radial-gradient(closest-side,#43d2ff73,#43d2ff2b 52%,#43d2ff00)}
.orb-b{--s:min(980px,120vw);right:-26vw;top:-40px;background:radial-gradient(closest-side,#9aa8ff47,#9aa8ff14 58%,#9aa8ff00)}
.orb-c{left:-30vw;top:27%;background:radial-gradient(closest-side,#43d2ff4a,#43d2ff00)}
.orb-d{right:-32vw;top:47%;background:radial-gradient(closest-side,#a9a8ee4d,#a9a8ee00)}
.orb-e{left:-26vw;top:68%;background:radial-gradient(closest-side,#43d2ff47,#43d2ff00)}
.orb-f{right:-30vw;top:86%;background:radial-gradient(closest-side,#5bbcff4d,#5bbcff00)}

/* Flowing ribbons: the teamfamily.pl ribbons (same curves, positions and drift) with a little more light:
   a wider aura, fine side strands, a glassy highlight and a slow float.
   assets/ribbon-silk-*.svg are built from assets/ribbon-a.svg and ribbon-b.svg; every tile has a seamless period. */
.ambient-ribbon{--period:1200px;position:absolute;left:0;width:calc(100% + var(--period));height:420px;background:url("assets/ribbon-silk-a.svg") repeat-x 0 0/var(--period) 100%;opacity:.85;transform:translate3d(0,0,0)}
.ambient-ribbon-hero{top:400px}
.ambient-ribbon-second{top:33%;background-image:url("assets/ribbon-silk-b.svg");opacity:.75}
.ambient-ribbon-third{top:58%}
.ambient-ribbon-fourth{top:83%;background-image:url("assets/ribbon-silk-b.svg");opacity:.75}
@media(max-width:600px){.ambient-ribbon{--period:914px;height:320px}}
@media(prefers-reduced-motion:no-preference){
  .ambient-ribbon{animation:ambient-ribbon-drift 70s linear infinite,ambient-ribbon-float 13s ease-in-out infinite alternate}
  .ambient-ribbon-hero{animation-delay:-14s,-3s}
  .ambient-ribbon-second{animation-duration:84s,16s;animation-direction:reverse,alternate;animation-delay:-28s,-9s}
  .ambient-ribbon-third{animation-delay:-38s,-6s}
  .ambient-ribbon-fourth{animation-duration:84s,15s;animation-direction:reverse,alternate;animation-delay:-52s,-11s}
}
@media(min-width:851px) and (prefers-reduced-motion:no-preference){
  .ambient-orb{will-change:transform;animation:ambient-orb-float 30s ease-in-out infinite alternate}
  .orb-b{animation-duration:38s;animation-delay:-11s}
  .orb-c{animation-duration:34s;animation-delay:-20s;animation-direction:alternate-reverse}
  .orb-d{animation-duration:42s;animation-delay:-7s}
  .orb-e{animation-duration:36s;animation-delay:-16s;animation-direction:alternate-reverse}
  .orb-f{animation-duration:40s;animation-delay:-25s}
}
@keyframes ambient-ribbon-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--period) * -1),0,0)}
}
@keyframes ambient-ribbon-float{from{translate:0 -9px}to{translate:0 9px}}
@keyframes ambient-orb-float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(56px,40px,0) scale(1.07)}
}
@media(prefers-reduced-motion:reduce){.ambient-light *,.ambient-light *::after{animation:none!important}}
@media(forced-colors:active),print{.ambient-light{display:none!important}}

/* Frosted-glass surfaces on the new canvas */
/* Header: no bar of its own. Over the sky gradient at the top it is invisible; after the first scroll a soft
   frosted veil fades out towards its lower edge, so there is never a hard line against the gradient. */
.site-header{background:none;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header::before{content:"";position:absolute;z-index:-1;inset:0 0 -36px;pointer-events:none;background:linear-gradient(180deg,rgba(229,246,255,.88) 0,rgba(229,246,255,.66) 58%,rgba(229,246,255,0));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent);mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent);transition:opacity .45s ease}
html.js .site-header.is-top::before{opacity:0}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--bright);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.hero .eyebrow{width:fit-content;padding:8px 16px 8px 13px;border:1px solid rgba(6,124,174,.2);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 8px 22px -14px rgba(6,124,174,.55)}
h1>span{background:linear-gradient(180deg,#0093c1,#00789f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-showcase{position:relative;isolation:isolate}
.hero-showcase::before{content:"";position:absolute;z-index:-1;inset:4% -12% -6%;background:radial-gradient(closest-side,#43d2ff4d,#43d2ff1a 62%,#43d2ff00);pointer-events:none}
/* That glow reaches 12% past the showcase, further than the page gutter below ~1350 px (phones included), and would
   widen the page. It is clipped at the viewport edge, where the gradient is already transparent. */
main{overflow-x:clip}
@supports not (overflow:clip){main{overflow-x:hidden}}
.showcase-tabs{background:rgba(255,255,255,.6);border-color:var(--glass-edge);box-shadow:0 14px 34px -22px rgba(6,124,174,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.showcase-stage{background:linear-gradient(160deg,#ffffffd6 0%,#def3fda8 100%);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
.benefit-strip{border:1px solid var(--glass-edge);border-radius:22px;background:rgba(255,255,255,.62);box-shadow:0 18px 50px -32px rgba(6,124,174,.4)}
.benefit-strip p+p{border-left-color:rgba(6,124,174,.14)}
.recipes-spotlight{background:linear-gradient(135deg,#f7fdffe6 0%,#d8f1fcd9 100%);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
.calendar-spotlight{background:linear-gradient(225deg,#f8fbffe6 0%,#dfeafffa 100%);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
.recipes-spotlight .feature-number,.recipes-spotlight .text-link{color:var(--blue)}
.recipe-flow li{color:#0d5f83}
.recipe-flow li:before{background:#c9e9f7}
.supporting-features .feature-card{background:linear-gradient(160deg,#ffffffd1,#e3f4fdb3);border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
.supporting-features .money-card .text-link{color:var(--blue)}
.life-section{background:linear-gradient(135deg,#d9f0fb,#e9f6fd);box-shadow:var(--glass-shadow)}
.step-number{background:#fff;border-color:rgba(6,124,174,.22);box-shadow:0 8px 18px -10px rgba(6,124,174,.5)}
.steps>li{padding:26px 26px 28px;border:1px solid var(--glass-edge);border-radius:22px;background:linear-gradient(160deg,#ffffffcf,#e6f5fdb3);box-shadow:var(--glass-shadow)}
.faq-list details{border-bottom-color:rgba(6,124,174,.14)}
.faq-list details:first-child{border-top-color:rgba(6,124,174,.14)}
.download-section{background:radial-gradient(ellipse 60% 70% at 50% -12%,#43d2ff47,#43d2ff00 72%),radial-gradient(ellipse 46% 56% at 100% 100%,#8a96ff38,#8a96ff00 72%),linear-gradient(150deg,#153457 0%,#12406a 55%,#0f4d78 100%);box-shadow:0 50px 90px -50px rgba(8,78,128,.7)}
.download-top .eyebrow{color:#c3e2f2}
.download-notes{color:#d3e4f0}
.site-footer>small{border-top-color:rgba(6,124,174,.14)}

@media(max-width:850px){
  .hero .eyebrow{margin-inline:auto}
  .steps>li{padding:22px 20px 24px}
}

/* Interactive tiles: they grow a little on hover and a soft light follows the cursor (motion.js sets --mx / --my) */
.steps>li,.supporting-features .feature-card{position:relative;isolation:isolate}
.steps>li::before,.supporting-features .feature-card::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),#ffffffe6,#ffffff00 66%);transition:opacity .4s ease}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .steps>li,.supporting-features .feature-card{transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .45s ease}
  .steps>li:hover,.supporting-features .feature-card:hover{z-index:3;transform:translateY(-6px) scale(1.035);box-shadow:0 1px 0 #fff inset,0 60px 100px -46px rgba(6,124,174,.6),0 14px 34px -14px rgba(6,124,174,.28)}
  .steps>li:hover::before,.supporting-features .feature-card:hover::before{opacity:1}
  .benefit-strip p{transition:transform .35s cubic-bezier(.2,.75,.25,1),color .25s ease}
  .benefit-strip p:hover{transform:scale(1.07);color:var(--blue)}
  .recipe-flow li{transition:transform .3s cubic-bezier(.2,.75,.25,1)}
  .recipe-flow li:hover{transform:translateY(-2px) scale(1.06)}
  .life-image{overflow:hidden}
  .life-image img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .life-section:hover .life-image img{transform:scale(1.05)}
}
@media(hover:none){
  .steps>li,.supporting-features .feature-card{transition:transform .2s ease}
  .steps>li:active,.supporting-features .feature-card:active{transform:scale(.985)}
}
.faq-list summary{transition:color .2s ease}
.faq-list summary:hover{color:var(--blue)}
.button-blue,.button-dark{position:relative;overflow:hidden}
.button-blue::after,.button-dark::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);transform:translateX(-130%);transition:transform .75s ease}
.button-blue:hover::after,.button-dark:hover::after{transform:translateX(130%)}

/* Scroll reveal (classes are added by motion.js only to things below the fold, and removed again afterwards) */
.reveal{transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .95s cubic-bezier(.2,.7,.2,1) var(--d,0s)!important}
.reveal:not(.is-in){opacity:0;translate:0 32px}