/* BerryFlowStyle (6 Nov 2026): the Flow preview style (lib/flow-style.js). Loaded only on a page sent with ?style=flow, so the classic pages and
   their page-weight budgets are untouched. A layout and feel layer: every colour comes from the page's own look (Light, Warm or Dark tokens in
   style.css) or from the few landscape tints below, which tests/flow-style.cjs checks against the text that sits on them.
   Motion: reveal, parallax and page changes run only without prefers-reduced-motion and without the site's "Reduce motion" (data-motion). */

/*FLOW-TINTS*/
html[data-style="flow"]{--fs-a1:rgb(84 62 112 / .34);--fs-a2:rgb(28 70 112 / .34);--fs-a3:rgb(112 86 48 / .26);
--fs-dawn:#34306e;--fs-peach:#8c4a63;--fs-day:#1b4f78;--fs-noon:#3a6c9c;--fs-gold:#b8743a;--fs-dusk:#221d4f;--fs-rose:#7a3f60;
--fs-k:62%;--fs-blue:#1d5a8a;--fs-far:#3a4a66;--fs-mid:#1e2c36;--fs-water:#1f4f7a;--fs-sun:#ffd9a0;--fs-r:22px;--fs-glass:color-mix(in srgb,var(--surface) 90%,transparent)}
html[data-style="flow"][data-theme="light"]{--fs-dawn:#c7b8e6;--fs-peach:#f2b99a;--fs-day:#a3c0e6;--fs-noon:#dce6f5;--fs-gold:#f0c27a;--fs-dusk:#5b4a8a;--fs-rose:#e39a9a;--fs-blue:#7fb6e0;--fs-far:#5f7488;--fs-mid:#3f4f60;--fs-water:#2f5f86;--fs-a1:rgb(246 200 180 / .40);--fs-a2:rgb(180 200 232 / .42);--fs-a3:rgb(238 222 192 / .46);--fs-k:82%}
html[data-style="flow"][data-theme="warm"]{--fs-dawn:#c7b8e6;--fs-peach:#f2b99a;--fs-day:#a3c0e6;--fs-noon:#dce6f5;--fs-gold:#f0c27a;--fs-dusk:#5b4a8a;--fs-rose:#e39a9a;--fs-blue:#7fb6e0;--fs-far:#5f7488;--fs-mid:#3f4f60;--fs-water:#2f5f86;--fs-a1:rgb(242 190 160 / .36);--fs-a2:rgb(176 194 222 / .34);--fs-a3:rgb(232 206 160 / .44);--fs-k:76%}
/*END FLOW-TINTS*/

/* ---- the page: soft colour that drifts behind everything (one fixed layer, moved by the compositor only) */
html[data-style="flow"] body{background:var(--bg)}
html[data-style="flow"] body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 22%,var(--fs-a1),transparent 72%),radial-gradient(42% 36% at 84% 34%,var(--fs-a2),transparent 72%),radial-gradient(48% 38% at 46% 88%,var(--fs-a3),transparent 72%);
  animation:fs-drift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes fs-drift{from{transform:translate3d(-4%,-3%,0) rotate(0deg)}to{transform:translate3d(4%,3%,0) rotate(7deg)}}
html[data-style="flow"][data-contrast="high"] body::before{display:none}
html[data-style="flow"] .hero-photo{background:transparent}

/* ---- softer shapes and feedback */
html[data-style="flow"]{--r:18px}
html[data-style="flow"] .btn,html[data-style="flow"] .btn-ghost{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
html[data-style="flow"] .btn{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--green) 70%,transparent)}
html[data-style="flow"] .btn:hover,html[data-style="flow"] .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--gold) 60%,transparent)}
html[data-style="flow"] .btn:active,html[data-style="flow"] .btn-ghost:active{transform:translateY(0) scale(.97);transition-duration:.08s}
html[data-style="flow"] .card{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
html[data-style="flow"] .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.45)}
html[data-style="flow"] .chip{transition:transform .2s ease,background-color .2s ease}html[data-style="flow"] .chip:hover{transform:translateY(-1px)}
html[data-style="flow"] h1{letter-spacing:-.01em}
html[data-style="flow"] .hdr{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ---- waves instead of hard edges: a section's own top and bottom edges are cut into a gentle wave (a mask, so the colour is the section's own) */
html[data-style="flow"]{
--fs-wt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V22C240 0 480 0 720 18S1200 50 1440 20V48Z'/%3E%3C/svg%3E");
--fs-wb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0V26C240 48 480 48 720 30S1200 -2 1440 28V0Z'/%3E%3C/svg%3E");
--fs-sq:linear-gradient(#000,#000)}
html[data-style="flow"] .fs-band,html[data-style="flow"] main .band{position:relative;padding-block:72px;border:0;
  background:linear-gradient(115deg,color-mix(in srgb,var(--fs-peach) 18%,var(--bg2)),color-mix(in srgb,var(--fs-day) 22%,var(--bg2)) 55%,color-mix(in srgb,var(--fs-gold) 16%,var(--bg2)));
  -webkit-mask:var(--fs-wt) top/100% 48px no-repeat,var(--fs-sq) center/100% calc(100% - 94px) no-repeat,var(--fs-wb) bottom/100% 48px no-repeat;
  mask:var(--fs-wt) top/100% 48px no-repeat,var(--fs-sq) center/100% calc(100% - 94px) no-repeat,var(--fs-wb) bottom/100% 48px no-repeat}
html[data-style="flow"][data-theme="dark"] .fs-band,html[data-style="flow"][data-theme="dark"] main .band{
  background:linear-gradient(115deg,color-mix(in srgb,var(--fs-dusk) 30%,var(--bg2)),color-mix(in srgb,var(--fs-water) 28%,var(--bg2)) 55%,color-mix(in srgb,var(--fs-gold) 10%,var(--bg2)))}
html[data-style="flow"] .fs-band .jr-home{padding-block:0}
html[data-style="flow"] .foot{border-top:0;padding-top:calc(var(--s6) + 40px);
  -webkit-mask:var(--fs-wt) top/100% 48px no-repeat,var(--fs-sq) 0 47px/100% calc(100% - 47px) no-repeat;mask:var(--fs-wt) top/100% 48px no-repeat,var(--fs-sq) 0 47px/100% calc(100% - 47px) no-repeat}
html[data-style="flow"] .jr-card{border-radius:var(--fs-r);background:var(--fs-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
html[data-style="flow"] .jr-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(0,0,0,.5)}
html[data-style="flow"] .jr-go{align-self:flex-start}

/* ---- the landscapes (BerryFlowPhotos, 6 Nov 2026): Berry's own photos, one per step, layered and faded into each other and into the page.
   Each scene is the photo, a wash of its time of day over it (t1 dawn ... t5 evening, the old sky colours, soft-light) and, in Dark, a dim
   so it never glares. Its edges fade out (a mask), so on the home page one photo dissolves into the next where the panels overlap, and a
   step page's photo dissolves into the page above its words. Decorative only (aria-hidden); no text sits on a photo except inside a solid card. */
.fs-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;--sky1:var(--fs-dawn);--sky2:var(--fs-peach);background:var(--bg)}
.fs-scene.fs-t2{--sky1:var(--fs-day);--sky2:var(--fs-noon)}
.fs-scene.fs-t3{--sky1:var(--fs-blue);--sky2:var(--fs-noon)}
.fs-scene.fs-t4{--sky1:var(--fs-peach);--sky2:var(--fs-gold)}
.fs-scene.fs-t5{--sky1:var(--fs-dusk);--sky2:var(--fs-rose)}
.fs-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--sky1),var(--sky2));mix-blend-mode:soft-light;opacity:.55}
html[data-style="flow"][data-theme="dark"] .fs-scene::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 34%,transparent),color-mix(in srgb,var(--bg) 18%,transparent) 50%,color-mix(in srgb,var(--bg) 40%,transparent))}
html[data-style="flow"][data-contrast="high"] .fs-scene::after{display:none}
.fs-photo{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:50% 50%;transform:translateY(var(--fs-par,0px))}
.fs-ph1{object-position:50% 62%}.fs-ph2{object-position:50% 55%}.fs-ph3{object-position:50% 40%}.fs-ph4{object-position:50% 45%}.fs-ph5{object-position:50% 55%}
/* the fade: long soft edges, so the photos read as layers, not boxes */
.fs-scene{-webkit-mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.fs-head .fs-scene{-webkit-mask:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);mask:linear-gradient(180deg,#000 0,#000 52%,transparent 100%)}
.fs-credit{margin:var(--s3) 0 0;width:100%;text-align:center;font-size:var(--t-1);color:var(--muted)}
.fs-head .fs-credit-head{position:absolute;right:var(--s3);bottom:0;width:auto;margin:0;padding:2px 10px;border-radius:999px;background:var(--bg)}

/* ---- home: the buying path, one screen at a time */
.fs-story{margin-top:var(--s6)}
.fs-story-head{text-align:center;padding-block:var(--s5)}
.fs-story-head .lead{margin-inline:auto}
.fs-kicker{margin:0 0 var(--s2);font:700 var(--t-1)/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.fs-panel{position:relative;min-height:min(92vh,820px);display:flex;align-items:center;isolation:isolate;pointer-events:none}
.fs-panel+.fs-panel{margin-top:-22vh} /* the layers: each photo starts while the last is fading out */
.fs-card,.fs-panel a{pointer-events:auto}
.fs-panel .fs-scene{z-index:-1}
.fs-panel-in{width:100%;padding-block:24vh 24vh}
.fs-card{max-width:30rem;padding:var(--s5);border-radius:var(--fs-r);background:var(--fs-glass);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px -30px rgba(0,0,0,.45)}
.fs-card h3{font-size:var(--t3);margin:0 0 var(--s2)}
.fs-card p{margin:0 0 var(--s3)}.fs-card .fs-card-go{margin:0}
.fs-p2 .fs-card,.fs-p4 .fs-card{margin-left:auto}
.fs-story-end{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;padding-block:var(--s5) var(--s4)}

/* ---- /buying and /selling: the step's landscape above its words */
.fs-head{position:relative;height:clamp(190px,30vw,400px)}
.fs-jr{position:relative}
.fs-jr .jr-strip ol{gap:10px}
.fs-jr .jr-strip li a{border-top:0;padding-top:0}
.fs-jr .jr-strip li a::before{content:"";display:block;height:6px;border-radius:999px;background:var(--line);margin-bottom:var(--s2)}
.fs-jr .jr-strip li.jr-done a::before{background:linear-gradient(90deg,color-mix(in srgb,var(--fs-water) 70%,var(--bg)),var(--green-hi))}
.fs-jr .jr-strip li[aria-current] a::before{background:linear-gradient(90deg,var(--green-hi),var(--gold));box-shadow:0 0 14px -2px var(--gold)}
.fs-jr .jr-strip li[aria-current] .jr-n{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 22%,transparent)}
.fs-jr .lead{font-size:var(--t1)}
.fs-jr .jr-points{list-style:none;padding:0;display:grid;gap:var(--s3)}
.fs-jr .jr-points li{position:relative;margin:0;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 18px);border-radius:var(--fs-r);background:var(--fs-glass);border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.fs-jr .jr-points li::before{content:"";position:absolute;left:var(--s4);top:calc(var(--s3) + .55em);width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--green-hi))}
.fs-jr .jr-pager{border-top:0;padding-top:var(--s4);position:relative}
.fs-jr .jr-pager::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.fs-jr .jr-overview{position:relative;gap:var(--s3)}
.fs-jr .jr-overview::before{content:"";position:absolute;left:31px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--fs-water),var(--gold),var(--fs-dusk));opacity:.7}
.fs-jr .jr-overview a{position:relative;border-radius:var(--fs-r);background:var(--fs-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.fs-jr .jr-overview a:hover{transform:translateX(4px)}
.fs-jr .jr-overview .jr-n{background:var(--bg);width:32px;height:32px}

/* ---- reveal: hidden only once flow-style.js has run (html.fs-motion) and only for sections below the first screen */
html.fs-motion .fs-hide{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--fs-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--fs-delay,0ms)}
html.fs-motion .fs-hide.fs-in{opacity:1;transform:none}
/* hero parallax: the photo and its shade move together, a little slower than the page */
html[data-style="flow"] .hero-photo .hero-img,html[data-style="flow"] .hero-photo::before{transform:translateY(var(--fs-par,0px))}

/* ---- page changes: a soft cross-fade between Flow pages (Chrome and Safari; others just change page) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fs-out .22s ease both}
::view-transition-new(root){animation:fs-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes fs-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes fs-in{from{opacity:0;transform:translateY(10px)}}

/* ---- still: the system setting or the site's own "Reduce motion" - nothing moves, nothing is hidden */
@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
html[data-style="flow"] body::before{animation:none}
.fs-hide{opacity:1!important;transform:none!important}
.fs-scene *,.fs-photo,html[data-style="flow"] .hero-photo .hero-img,html[data-style="flow"] .hero-photo::before{transform:none!important}
html[data-style="flow"] .btn:hover,html[data-style="flow"] .btn-ghost:hover,html[data-style="flow"] .card:hover,html[data-style="flow"] .jr-card:hover{transform:none}
}
html[data-motion="reduce"] body::before{animation:none!important}
html[data-motion="reduce"] .fs-hide{opacity:1!important;transform:none!important}
html[data-motion="reduce"] .fs-scene *,html[data-motion="reduce"] .fs-photo,html[data-motion="reduce"] .hero-photo .hero-img,html[data-motion="reduce"] .hero-photo::before{transform:none!important}
html[data-motion="reduce"]::view-transition-old(root),html[data-motion="reduce"]::view-transition-new(root){animation:none!important}
@media print{.fs-hide{opacity:1!important;transform:none!important}body::before,.fs-scene,.fs-head,.fs-credit{display:none!important}}

/* ---- phone */
@media (max-width:700px){
.fs-panel{min-height:86svh;align-items:flex-end}
.fs-panel+.fs-panel{margin-top:-18svh}
.fs-panel-in{padding-block:30svh 16svh}
.fs-card{padding:var(--s4)}
.fs-card h3{font-size:var(--t2)}
.fs-head{height:200px}
.fs-jr .jr-points li{padding:var(--s3) var(--s3) var(--s3) calc(var(--s3) + 18px)}.fs-jr .jr-points li::before{left:var(--s3)}
html[data-style="flow"] .fs-band,html[data-style="flow"] main .band{padding-block:60px}
.fs-story-end .btn,.fs-story-end .btn-ghost{width:100%}
}