/* The friend dialog on our own site: E, His Pane with the banner (moodz-v-e.html, Luke's lock 27 Oct 2026), live. Built by shared/friend2.js into a fixed overlay on the page.
   Three layouts on the root, picked from the viewport:
   .fr-d     900px wide or more: E's two-pane dialog, his paper pane on the left (tinted per step), the question on white. Laid out at E's 1024x608 and scaled down (--fr-k) to fit shorter or narrower windows, so nothing ever passes the box.
   .fr-p     under 900px: the page sheet, his pane becomes a tinted banner with him on the right behind the white sheet, no words in it (Luke, round 2), the step's title centred on the white. Under 700px it rises from the bottom (top --fr-top), 560 wide at most.
   .fr-card  with .fr-p, 700 to 899px (iPad portrait): the sheet as a centred card (--fr-cw x --fr-ch, 680x820 at most), like an iPad form sheet. The banner on top,
             E's desktop layouts under it (three plan cards in a row, fields in two columns, the summary beside the button).
   .fr-short with .fr-p: a sheet under 740px tall (a phone with its toolbars showing). The banner shrinks, the start review goes, the body scrolls if it must.
   Every class fr- prefixed, state classes too. No section, footer, header, nav or h1 to h3 tags: the page styles those. */
.fr{--paper:#f4f1ea;--paper2:#ebe7dd;--bub:#fffdf7;--ink:#1f1d1a;--i7:rgba(31,29,26,.7);--i5:rgba(31,29,26,.52);--i3:rgba(31,29,26,.3);--ln:#e3ded2;--ln2:#cbc4b3;
  --ac:#d9572c;--acb:#c94d24;--acb2:#b5431d;--ok:#4caf6e;
  --butter:#f6ecc4;--sky:#d9e7f3;--mint:#d8ecd9;--blush:#f5dde3;--tag:#f6d9a6;--butter-i:#6b5a12;--sky-i:#1f5f86;--mint-i:#2f6b3a;--blush-i:#8a3a56;--tag-i:#6b3a12;
  --ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.45,.64,1);--safe:env(safe-area-inset-bottom,0px);
  position:fixed;inset:0;z-index:3000;overflow:hidden;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;font-weight:400;font-style:normal;line-height:1.4;letter-spacing:normal;
  text-transform:none;text-align:left;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.fr *{box-sizing:border-box}
:where(.fr) button,:where(.fr) input,:where(.fr) textarea{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
:where(.fr) input,:where(.fr) textarea{cursor:text}
.fr a{color:inherit;text-decoration:none}
.fr .fr-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fr [hidden]{display:none!important}
.fr button:focus-visible,.fr a:focus-visible,.fr input:focus-visible,.fr textarea:focus-visible,.fr [tabindex]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fr .fr-q:focus,.fr .fr-q:focus-visible{outline:0}

/* the scrim: the page dims (and blurs a touch on desktop), a tap on it closes */
.fr-scrim{position:absolute;inset:0;background:rgba(31,29,26,.5);touch-action:none;transition:opacity .25s}
.fr-d .fr-scrim{-webkit-backdrop-filter:blur(3px) saturate(1.05);backdrop-filter:blur(3px) saturate(1.05)}
.fr-opening .fr-scrim{animation:fr-fade .35s ease backwards}
.fr-closing .fr-scrim{opacity:0}
@keyframes fr-fade{from{opacity:0}}

/* ---------- desktop: E's two-pane dialog at 1024x608, scaled to the window ---------- */
.fr-d,.fr-card{display:flex;align-items:center;justify-content:center}
.fr-d .fr-dlg{position:relative;flex:none;width:1024px;height:608px;display:grid;grid-template-columns:264px minmax(0,1fr);border-radius:26px;overflow:hidden;background:#fff;transform:scale(var(--fr-k,1));
  box-shadow:0 0 0 1px rgba(31,29,26,.12),0 2px 4px rgba(31,29,26,.1),0 24px 50px -18px rgba(31,29,26,.5),0 70px 120px -40px rgba(31,29,26,.6);transition:grid-template-columns .5s var(--ease)}
.fr-d .fr-dlg.fr-big{grid-template-columns:384px minmax(0,1fr)}
.fr-d.fr-opening .fr-dlg,.fr-card.fr-opening .fr-dlg{animation:fr-pop .6s var(--ease) backwards}
@keyframes fr-pop{from{opacity:0;translate:0 18px;scale:.965}}
.fr-d.fr-closing .fr-dlg,.fr-card.fr-closing .fr-dlg{opacity:0;scale:.97;transition:opacity .2s,scale .25s var(--ease)}

/* his pane: warm paper with a little grain, the wordmark, his line, him, a review */
.fr-pane{position:relative;display:flex;flex-direction:column;min-height:0;padding:24px 22px 22px;isolation:isolate;background-color:var(--t,var(--paper));
  background-image:radial-gradient(85% 55% at 50% 66%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%);transition:background-color .45s var(--ease)}
.fr-pane::before,.fr-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.fr-t-butter{--t:var(--butter);--ti:var(--butter-i)}.fr-t-tag{--t:var(--tag);--ti:var(--tag-i)}.fr-t-sky{--t:var(--sky);--ti:var(--sky-i)}.fr-t-mint{--t:var(--mint);--ti:var(--mint-i)}
.fr-wm{position:relative;z-index:1;display:flex;align-items:center;gap:9px;flex:none;font-family:Rokkitt,Georgia,serif;font-weight:400;font-size:21px;line-height:1;letter-spacing:-.01em}
.fr-paw{width:18px;height:18px;flex:none;fill:currentColor}
/* his line: the hello card from the friend pill, paper white, an ink line, an offset ink shadow, a tail to his head */
.fr-say{position:relative;z-index:1;flex:none;margin-top:20px;padding:13px 14px 15px 15px;border:1.5px solid var(--ink);border-radius:18px;background:var(--bub);
  font-family:Rokkitt,Georgia,serif;font-weight:300;font-size:23px;line-height:1.16;letter-spacing:-.005em;text-wrap:balance;filter:drop-shadow(3px 4px 0 var(--ink));transform-origin:50% 120%}
.fr-say::after{content:"";position:absolute;left:calc(50% - 8px);bottom:-9px;width:15px;height:15px;background:var(--bub);border:solid var(--ink);border-width:0 1.5px 1.5px 0;border-bottom-right-radius:3px;transform:rotate(45deg)}
.fr-hl{padding:0 .14em;margin:0 -.04em;border-radius:3px;background:linear-gradient(var(--hl,var(--butter)),var(--hl,var(--butter))) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fr-hl.fr-nw{white-space:nowrap}
.fr-pr{display:block;text-wrap:balance}
.fr-opening .fr-say{animation:fr-say .55s .38s var(--pop) backwards}
.fr-opening .fr-say .fr-hl{animation:fr-swipe .7s .75s var(--ease) backwards}
@keyframes fr-say{from{opacity:0;scale:.7}}
@keyframes fr-swipe{from{background-size:0% 100%}}
.fr-say.fr-swap{animation:fr-swapin .32s var(--ease)}
.fr-say.fr-swap .fr-hl{animation:fr-swipe .45s .08s var(--ease) backwards}
@keyframes fr-swapin{from{opacity:.35;translate:0 3px}}
/* him: flex fills what is left, standing on a soft shadow. Each pose is sized in the moodz() call and stands bottom centre */
.fr-fig{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-top:14px}
.fr-figin{position:relative;width:var(--fw);height:calc(var(--fw) * 1.3273)}
.fr-figin::before{content:"";position:absolute;left:14%;right:14%;bottom:-5px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,29,26,.2),rgba(31,29,26,0))}
.fr-opening .fr-figin{animation:fr-hop .7s .16s var(--pop) backwards}
@keyframes fr-hop{from{opacity:0;translate:0 28px}}
.fr-pose{position:absolute;left:50%;bottom:0;translate:-50% 0;transition:opacity .28s,transform .4s var(--pop)}
.fr-pose:not(.fr-on){opacity:0;transform:translateY(8px) scale(.97)}
/* on the phone (call): it rings, he answers, nods along and talks. The wrapper turns, the pose inside never animates */
.fr-phn{position:relative;display:block;transform-origin:50% 92%}
.fr-rg{position:absolute;left:-3%;top:9%;width:20%;aspect-ratio:1;opacity:0}
.fr-rg svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.fr-sp{position:absolute;left:66%;top:-1%;display:flex;gap:3px;align-items:center;padding:6px 8px;border:1.5px solid var(--ink);border-radius:12px 12px 12px 3px;background:var(--bub);box-shadow:2px 2px 0 var(--ink);opacity:0}
.fr-sp b{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.fr-anim .fr-phn{animation:fr-ring .9s .7s ease-in-out backwards,fr-nod 2.8s 1.9s ease-in-out infinite}
.fr-anim .fr-rg{animation:fr-rgo .9s .7s ease-out}
.fr-anim .fr-sp{animation:fr-spin .45s 1.7s var(--pop) forwards}
.fr-anim .fr-sp b{animation:fr-blip 1.1s 2s ease-in-out infinite}
.fr-anim .fr-sp b:nth-child(2){animation-delay:2.18s}.fr-anim .fr-sp b:nth-child(3){animation-delay:2.36s}
@keyframes fr-ring{0%,100%{rotate:0deg}10%,30%,50%,70%{rotate:-2.4deg}20%,40%,60%,80%{rotate:2.4deg}}
@keyframes fr-rgo{0%,100%{opacity:0;scale:.8}15%,80%{opacity:1;scale:1}}
@keyframes fr-nod{0%,100%{rotate:0deg}30%{rotate:-1.6deg}55%{rotate:1deg}75%{rotate:-.6deg}}
@keyframes fr-spin{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes fr-blip{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -2px}}
/* a review, low and quiet */
.fr-rev{position:relative;z-index:1;flex:none;margin-top:18px;padding-top:14px;border-top:1px dashed rgba(31,29,26,.24);font-size:14px;line-height:1.42;color:var(--ink)}
.fr-stars{display:block;margin-bottom:5px;color:#a86a12;font-size:12.5px;letter-spacing:2.5px;line-height:1}
.fr-rev small{display:block;margin-top:5px;font-size:12.5px;color:var(--i7)}
.fr-big .fr-pane>.fr-rev{display:none}
/* welcome: the pane widens, he gets bigger, the confetti is drawn once */
.fr-bits{position:absolute;inset:0;z-index:0;pointer-events:none}
.fr-bit{position:absolute;display:block;width:var(--s);height:var(--s);rotate:var(--r)}
.fr-bit svg{display:block;width:100%;height:100%;overflow:visible}
.fr .fr-bit{animation:fr-bit .6s var(--pop) backwards;animation-delay:calc(.55s + var(--n) * .07s)}
@keyframes fr-bit{from{opacity:0;scale:.2;translate:var(--dx,0) 18px}}

/* ---------- the question side ---------- */
.fr-main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:22px 26px 24px 32px}
.fr-top{display:flex;align-items:center;gap:12px;height:38px;flex:none}
.fr-steps{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--i3)}
.fr-steps span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.fr-steps i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px currentColor}
.fr-steps i .fr-i{width:10px;height:10px;stroke-width:3.2}
.fr-steps em{width:16px;height:1.5px;border-radius:1px;background:var(--ln)}
.fr-steps .fr-done{color:var(--i5)}
.fr-steps .fr-done i{background:var(--ink);color:#fff;box-shadow:none}
.fr-steps .fr-now{color:var(--ink);font-weight:600}
.fr-steps .fr-now i{box-shadow:inset 0 0 0 1.5px var(--ac)}
.fr-steps .fr-now i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac)}
.fr-wt{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.fr-wt .fr-ic{width:32px;height:32px;border-radius:10px}
.fr-wt .fr-ic svg{width:28px;height:28px}
.fr .fr-x{width:38px;height:38px;flex:none;margin-left:auto;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--i7);transition:background .2s,color .2s,transform .2s}
.fr-x .fr-i{width:18px;height:18px}
.fr .fr-x:hover{background:var(--paper2);color:var(--ink);transform:rotate(90deg)}
.fr-qrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex:none;margin-top:18px}
.fr .fr-q{flex:none;font-family:Rokkitt,Georgia,serif;font-weight:300;font-size:38px;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.fr-qrow .fr-q{margin:0}
.fr-main>.fr-q{margin-top:18px}
.fr-sub{flex:none;margin-top:7px;font-size:15px;color:var(--i7)}
.fr-body{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:22px}
.fr-foot{display:flex;align-items:center;gap:14px;flex:none;padding-top:18px}
.fr-sum{margin-left:auto;font-size:14px;color:var(--i7);white-space:nowrap}
.fr-sum b{font-weight:600;color:var(--ink)}
.fr-sum+.fr-go{margin-left:4px}
.fr .fr-back{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 14px 0 8px;margin-left:-8px;border-radius:999px;font-weight:500;color:var(--i7);transition:background .2s,color .2s}
.fr-back .fr-i{width:18px;height:18px;transition:transform .2s var(--ease)}
.fr .fr-back:hover{background:var(--paper);color:var(--ink)}
.fr-back:hover .fr-i{transform:translateX(-2px)}
/* a new step: the question rises, the body follows */
.fr .fr-q,.fr .fr-sub,.fr .fr-qrow .fr-bill{animation:fr-rise .5s .04s var(--ease) backwards}
.fr .fr-sub{animation-delay:.09s}
.fr .fr-body,.fr .fr-foot{animation:fr-in .45s .12s ease backwards}
@keyframes fr-in{from{opacity:0}}
/* the one button: our accent, a shade deeper so white type reads */
.fr .fr-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px 0 26px;margin-left:auto;border-radius:999px;background:var(--acb);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(31,29,26,.18),0 12px 22px -12px rgba(201,77,36,.9);transition:background .2s,box-shadow .2s,color .2s,transform .15s}
.fr-go .fr-i{width:18px;height:18px;transition:transform .25s var(--ease)}
.fr .fr-go:hover{background:var(--acb2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(31,29,26,.2),0 16px 26px -12px rgba(181,67,29,.95)}
.fr-go:hover .fr-i.fr-fwd{transform:translateX(3px)}
.fr .fr-go:active{transform:scale(.98)}
.fr .fr-go.fr-sent{background:var(--mint-i);box-shadow:none}
/* not ready yet: paper, the label says what is missing (like flow2) */
.fr .fr-go[aria-disabled="true"]{background:var(--paper);color:var(--i5);box-shadow:inset 0 0 0 1px var(--ln);cursor:default}
.fr-go[aria-disabled="true"] .fr-i{display:none}
.fr .fr-go.fr-nudge{animation:fr-nudge .36s ease}
@keyframes fr-nudge{0%,100%{translate:0}25%{translate:-5px}50%{translate:4px}75%{translate:-2px}}
.fr-note{font-size:13.5px;color:var(--i5)}
.fr-note a{font-weight:500;color:var(--i7)}
.fr-note a:hover{color:var(--ink);text-decoration:underline}

/* drawn objects for the four ways: white paper things in ink on a pastel tile */
.fr-ic{width:64px;height:64px;flex:none;border-radius:19px;background:var(--t);display:grid;place-items:center;transition:transform .45s var(--pop)}
.fr-ic svg{width:54px;height:54px;overflow:visible}
.fr-ic .fr-o{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fr [data-k=plan]{--t:var(--tag);--ti:var(--tag-i)}.fr [data-k=demo]{--t:var(--mint);--ti:var(--mint-i)}.fr [data-k=call]{--t:var(--sky);--ti:var(--sky-i)}.fr [data-k=enquiry]{--t:var(--butter);--ti:var(--butter-i)}

/* start: four big ways in */
.fr-ways{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
.fr .fr-way{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;padding:22px 22px 21px;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px var(--ln),0 1px 2px rgba(31,29,26,.04);transition:box-shadow .25s,transform .3s var(--ease),background .25s}
.fr-way>.fr-ic{position:absolute;top:20px;left:20px;width:84px;height:84px;border-radius:24px}
.fr-way>.fr-ic svg{width:72px;height:72px}
.fr-way b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.fr-way small{display:block;margin-top:3px;font-size:14.5px;color:var(--i7);text-wrap:pretty}
.fr-chip{position:absolute;top:22px;right:20px;padding:5px 10px;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:600;color:var(--i7);white-space:nowrap}
.fr-arr{position:absolute;right:18px;bottom:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;opacity:0;transform:translateX(-8px) scale(.9);transition:opacity .2s,transform .35s var(--ease)}
.fr-arr .fr-i{width:18px;height:18px}
.fr-d .fr-way:hover,.fr-d .fr-way:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--ink),0 22px 34px -22px rgba(31,29,26,.55)}
.fr-d .fr-way:hover .fr-arr,.fr-d .fr-way:focus-visible .fr-arr{opacity:1;transform:none}
.fr-d .fr-way:hover>.fr-ic,.fr-d .fr-way:focus-visible>.fr-ic{transform:rotate(-7deg) scale(1.06)}
.fr .fr-way:active{transform:translateY(-1px) scale(.99)}
.fr .fr-way{animation:fr-rise .55s var(--ease) backwards;animation-delay:calc(.2s + var(--n) * .07s)}
@keyframes fr-rise{from{opacity:0;translate:0 16px}}

/* plan: the switch, then three equal cards */
.fr-bill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;flex:none;padding:4px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ln)}
.fr-bill>i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(31,29,26,.14),0 0 0 1px var(--ln);transition:transform .35s var(--ease)}
.fr-bill[data-b=yearly]>i{transform:translateX(100%)}
.fr .fr-bill button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--i7);white-space:nowrap;transition:color .2s}
.fr .fr-bill button.fr-on{color:var(--ink);font-weight:600}
.fr-bill em{font-style:normal;padding:2px 7px;border-radius:999px;background:var(--mint);color:var(--mint-i);font-size:11.5px;font-weight:600}
.fr-plans{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:12px}
.fr-d[data-step=plan] .fr-body{margin-top:20px}
.fr-d[data-step=plan] .fr-qrow{margin-top:16px}
.fr-plan{position:relative;display:flex;flex-direction:column;height:100%;padding:15px 15px 14px;border-radius:20px;background:#fff;cursor:pointer;
  box-shadow:0 0 0 1px var(--ln),0 1px 2px rgba(31,29,26,.04);transition:box-shadow .25s,transform .3s var(--ease)}
.fr-d .fr-plan:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--ln2),0 20px 32px -22px rgba(31,29,26,.5)}
.fr-plan.fr-pop{background:linear-gradient(180deg,#fcecd2 0%,#fdf4e6 38%,#fffbf4 100%);box-shadow:0 0 0 1px #e9cf9f,0 26px 44px -28px rgba(107,58,18,.55)}
.fr .fr-plan.fr-on{box-shadow:0 0 0 2px var(--ac),0 26px 44px -26px rgba(201,77,36,.55)}
.fr .fr-plan{animation:fr-rise .55s var(--ease) backwards;animation-delay:calc(.2s + var(--n) * .08s)}
.fr-popt{position:absolute;top:-11px;left:14px;padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.2}
.fr-ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fr-pn{font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.fr-rad{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;color:transparent;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);transition:background .2s,box-shadow .2s,color .2s}
.fr-rad .fr-i{width:14px;height:14px;stroke-width:3}
.fr-on>.fr-ph .fr-rad{background:var(--ac);color:#fff;box-shadow:0 3px 8px -2px rgba(201,77,36,.6)}
.fr-pp{display:flex;align-items:baseline;gap:5px;margin-top:4px;min-height:42px}
.fr-pp b{font-family:Rokkitt,Georgia,serif;font-weight:300;font-size:44px;line-height:42px;letter-spacing:-.02em}
.fr-pp b.fr-talk{font-size:34px}
.fr-pp small{font-size:13px;color:var(--i5)}
.fr-py{margin-top:1px;font-size:12.25px;line-height:1.32;color:var(--i5);text-wrap:balance}
.fr-py b{font-weight:600;color:var(--mint-i)}
.fr-pop .fr-has{margin-bottom:10px}
.fr-has{display:flex;flex-direction:column;gap:4px;margin-top:9px;padding-top:9px;border-top:1px solid var(--ln);font-size:12.75px;line-height:1.26}
.fr-pop .fr-has{border-top-color:#ecd5aa}
.fr-has span{display:flex;gap:7px;text-wrap:pretty}
.fr-has .fr-i{width:14px;height:14px;margin-top:1px;stroke-width:2.6;color:var(--mint-i)}
.fr-has .fr-inc{font-weight:600}
.fr-has .fr-inc .fr-i{color:var(--ink)}
/* the bonus: a small drawn tag, three friends' faces, a free stamp */
.fr-bonus{position:relative;display:flex;align-items:center;gap:9px;flex:none;margin-top:auto;padding:5px 11px 5px 7px;border:1.5px solid var(--ink);border-radius:14px;background:var(--bub);box-shadow:2px 3px 0 var(--ink);rotate:-1.6deg}
.fr-bonus b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.fr-bonus small{display:block;font-size:11.5px;line-height:1.25;color:var(--i7)}
.fr-free{position:absolute;top:-11px;right:-7px;padding:3px 7px 2px;border:1.5px solid var(--ink);border-radius:7px;background:var(--tag);color:var(--tag-i);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;rotate:9deg}
.fr .fr-bonus{animation:fr-stamp .55s .8s var(--pop) backwards}
@keyframes fr-stamp{from{opacity:0;scale:1.35}}
.fr-faces{display:flex;flex:none}
.fr-face{display:inline-block;flex:none;border-radius:50%;contain:paint;background:var(--paper)}
.fr-faces .fr-face{box-shadow:0 0 0 2px var(--bub)}
.fr-faces .fr-face+.fr-face{margin-left:-8px}
.fr-tip{position:absolute;left:-4px;right:-4px;bottom:calc(100% + 10px);padding:10px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.38;opacity:0;translate:0 4px;pointer-events:none;transition:opacity .2s,translate .25s var(--ease)}
.fr-bonus:hover .fr-tip{opacity:1;translate:0 0}

/* details: the plan or demo you picked, then four fields */
.fr-pick{display:flex;align-items:center;gap:14px;flex:none;padding:12px 14px 12px 12px;border-radius:16px;background:var(--paper)}
.fr-pick .fr-ic{width:44px;height:44px;border-radius:13px}
.fr-pick .fr-ic svg{width:38px;height:38px}
.fr-pick b{display:block;font-size:15px;font-weight:600}
.fr-pick small{display:block;font-size:13.5px;color:var(--i7)}
.fr .fr-chg{margin-left:auto;height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);font-size:13.5px;font-weight:600;transition:box-shadow .2s}
.fr .fr-chg:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fr-flds{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;margin-top:20px}
.fr-fld{position:relative;display:block;margin:0}
.fr-fld>span{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--i7)}
.fr .fr-fld input,.fr .fr-fld textarea{display:block;width:100%;height:50px;padding:0 40px 0 15px;border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln2);font-size:16px;font-weight:500;color:var(--ink);-webkit-appearance:none;appearance:none;transition:box-shadow .2s,background .2s}
.fr .fr-fld textarea{height:auto;padding:13px 15px;line-height:1.45;resize:none}
.fr-fld input::placeholder,.fr-fld textarea::placeholder{color:rgba(31,29,26,.38);font-weight:400}
.fr .fr-fld input:hover,.fr .fr-fld textarea:hover{box-shadow:inset 0 0 0 1px var(--i3)}
.fr .fr-fld input:focus,.fr .fr-fld textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ac),0 0 0 4px rgba(217,87,44,.12)}
.fr .fr-fld input[readonly],.fr .fr-fld textarea[readonly]{background:var(--paper);box-shadow:none;cursor:default}
.fr-fld>i{position:absolute;right:13px;bottom:15px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--mint-i);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--pop)}
.fr-fld>i .fr-i{width:12px;height:12px;stroke-width:3.2}
.fr-fld.fr-good>i{opacity:1;transform:none}
.fr-priv{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13.5px;color:var(--i5)}
.fr-priv .fr-i{width:17px;height:17px}

/* demo: one week at a time, six slots */
.fr-wkh{display:flex;align-items:center;justify-content:space-between;flex:none}
.fr-wkh b{font-size:15px;font-weight:600}
.fr-wkh b small{margin-left:8px;font-size:14px;font-weight:400;color:var(--i5)}
.fr-wkn{display:flex;gap:6px}
.fr .fr-ar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--ln);transition:box-shadow .2s,opacity .2s}
.fr-ar .fr-i{width:16px;height:16px;stroke-width:2.4}
.fr .fr-ar:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fr .fr-ar:disabled{opacity:.35;cursor:default}
.fr-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}
.fr .fr-dy{height:66px;min-width:0;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(31,29,26,.28);cursor:default}
.fr-dy small{font-size:12px;font-weight:500}
.fr-dy span{font-size:19px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.fr .fr-dy.fr-open{cursor:pointer;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ln);transition:box-shadow .2s,background .2s,color .2s}
.fr-dy.fr-open small{color:var(--i5)}
.fr .fr-dy.fr-open:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fr-dy.fr-shut{background:repeating-linear-gradient(-45deg,rgba(31,29,26,.035) 0 5px,transparent 5px 10px)}
.fr-dy.fr-full span{text-decoration:line-through}
.fr-dy.fr-past{color:rgba(31,29,26,.2)}
.fr .fr-dy.fr-on{background:var(--ink);color:#fff;box-shadow:0 10px 18px -10px rgba(31,29,26,.7)}
.fr-dy.fr-on small{color:rgba(255,255,255,.75)}
.fr-dl{margin:20px 0 10px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--i5)}
.fr-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fr .fr-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:58px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);transition:box-shadow .2s,background .2s}
.fr-slot b{font-size:15.5px;font-weight:600}
.fr-slot small{font-size:12.5px;color:var(--i5)}
.fr .fr-slot:not(.fr-full):hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fr .fr-slot.fr-on{background:#fff6f1;box-shadow:inset 0 0 0 2px var(--ac)}
.fr-slot.fr-on small{color:var(--acb)}
.fr .fr-slot.fr-full{cursor:default;background:repeating-linear-gradient(-45deg,rgba(31,29,26,.035) 0 5px,#fff 5px 10px)}
.fr-slot.fr-full b{font-weight:500;color:var(--i3);text-decoration:line-through}
.fr-slot.fr-full small{font-weight:600;color:var(--i3)}
.fr-slots.fr-fresh .fr-slot{animation:fr-rise .4s var(--ease) backwards;animation-delay:calc(var(--n) * .03s)}

/* call: the number, big */
.fr-callc{display:flex;align-items:center;gap:20px;padding:24px 24px 24px 22px;border-radius:22px;background:#eef4fa;box-shadow:inset 0 0 0 1px #d6e4f1}
.fr-callc .fr-ic{width:76px;height:76px;border-radius:22px;background:#fff}
.fr-callc .fr-ic svg{width:62px;height:62px}
.fr-num{display:block;font-family:Rokkitt,Georgia,serif;font-weight:300;font-size:56px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.fr-hrs{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14.5px;color:var(--i7)}
.fr-live{position:relative;width:9px;height:9px;flex:none;border-radius:50%;background:var(--ok)}
.fr-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:fr-ping 2.4s ease-out infinite}
@keyframes fr-ping{from{opacity:.6;scale:1}70%,to{opacity:0;scale:2.6}}
.fr-or{margin-top:20px;font-size:14.5px;color:var(--i7)}
.fr-alt{display:flex;gap:10px;margin-top:10px}
.fr .fr-alt button{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 8px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);font-size:14.5px;font-weight:600;transition:box-shadow .2s,transform .25s var(--ease)}
.fr .fr-alt button:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.fr-alt .fr-ic{width:36px;height:36px;border-radius:11px}
.fr-alt .fr-ic svg{width:31px;height:31px}

/* enquiry */
.fr .fr-msg textarea{height:156px}
.fr-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}

/* welcome: a sign-off, not a receipt */
.fr-ref{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:3px 10px;border-radius:999px;background:var(--paper);font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.03em;vertical-align:1px;white-space:nowrap}
.fr-d .fr-big .fr-q{font-size:46px}
.fr-d .fr-eye{margin-top:30px}
.fr-eye{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--i5)}
.fr-next{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.fr-next>div{display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 16px 10px 12px;border-radius:18px;background:var(--paper);font-size:16px;line-height:1.38;text-wrap:pretty}
.fr-p .fr-next>div{min-height:0;padding:0;background:none;font-size:15px}
.fr-p .fr-next{gap:12px}
.fr-next b{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c);font-family:Rokkitt,Georgia,serif;font-weight:400;font-size:20px;line-height:1;color:var(--ci)}
.fr .fr-next>div{animation:fr-rise .5s var(--ease) backwards;animation-delay:calc(.45s + var(--n) * .1s)}
.fr-sign{display:flex;align-items:center;gap:12px;font-family:Rokkitt,Georgia,serif;font-weight:300;font-size:22px;line-height:1.15}
.fr-sign small{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;color:var(--i5)}
.fr-sign small .fr-paw{width:14px;height:14px;color:var(--ink)}

/* ---------- under 900px: a page sheet, his pane becomes a tinted banner on top ---------- */
.fr-p .fr-dlg{position:absolute;left:0;right:0;bottom:0;top:var(--fr-top,54px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:30px 30px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3)}
.fr-p.fr-opening .fr-dlg{animation:fr-up .55s var(--ease) backwards}
@keyframes fr-up{from{translate:0 100%}}
.fr-p.fr-closing .fr-dlg{translate:0 100%;transition:translate .3s cubic-bezier(.4,0,1,1)}
/* 700 to 899: the sheet as a centred card */
.fr-card .fr-dlg{position:relative;inset:auto;flex:none;width:var(--fr-cw);height:var(--fr-ch);border-radius:30px;box-shadow:0 0 0 1px rgba(31,29,26,.12),0 24px 50px -18px rgba(31,29,26,.5),0 70px 120px -40px rgba(31,29,26,.6)}
.fr-card.fr-opening .fr-dlg{animation-name:fr-pop}
.fr-card.fr-closing .fr-dlg{translate:none;opacity:0;scale:.97;transition:opacity .2s,scale .25s var(--ease)}
/* the banner: his colour for the step, Back and Close, the dots, his line on the left, him behind the white sheet on the right */
.fr-band{position:relative;flex:none;height:var(--bh);border-radius:30px 30px 0 0;overflow:clip;isolation:isolate;
  background:radial-gradient(70% 90% at 72% 75%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),var(--t);transition:height .45s var(--ease),background-color .45s var(--ease)}
.fr-grab{position:absolute;z-index:4;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(31,29,26,.22)}
.fr-card .fr-grab{display:none}
.fr-bt{position:absolute;z-index:4;top:17px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between}
.fr .fr-ib{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(31,29,26,.1);color:var(--ink)}
.fr-ib .fr-i{width:20px;height:20px}
.fr-ib.fr-nil{visibility:hidden}
.fr-p .fr-x{width:40px;height:40px;margin:0;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(31,29,26,.1)}
.fr-dots{display:flex;gap:6px}
.fr-dots i{width:7px;height:7px;border-radius:4px;background:rgba(31,29,26,.2)}
.fr-dots i.fr-done{background:rgba(31,29,26,.5)}
.fr-dots i.fr-on{width:22px;background:var(--ink);animation:fr-dot .6s .2s var(--ease) backwards}
@keyframes fr-dot{from{width:7px}}
.fr-dots.fr-one{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ti)}
.fr-bfig{position:absolute;z-index:1;left:calc(100% - var(--fl,104px) - var(--fx,.5) * var(--pw));top:var(--ft);width:var(--pw)}  /* on the right as in E, his face --fl in from the right so his head clears Close */
.fr-bfig.fr-peek{animation:fr-peek .7s .2s var(--pop) backwards}
@keyframes fr-peek{from{opacity:0;translate:0 40px}}
/* the white sheet lies over the banner's foot */
.fr-leaf{position:relative;z-index:3;flex:1;min-height:0;display:flex;flex-direction:column;margin-top:-24px;padding:20px 20px 0;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -6px 16px -10px rgba(31,29,26,.3)}
.fr-p .fr-q{font-size:31px;margin:0;text-align:center}
.fr-p .fr-qrow{margin:0;display:block}
.fr-p .fr-sub{font-size:14.5px;margin-top:5px;text-align:center}
.fr-p .fr-body{margin-top:14px}
.fr-p:not(.fr-card) .fr-dlg{max-width:560px;margin:0 auto}
.fr-p .fr-foot{padding:12px 0 calc(24px + var(--safe))}
.fr-p .fr-go{flex:1;height:54px;margin:0}
/* phone start: four rows */
.fr-p .fr-ways{display:flex;flex-direction:column;gap:10px;flex:none}
.fr-p .fr-way{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;min-height:84px;text-align:left;
  border:1.5px solid var(--ln2);box-shadow:0 1px 2px rgba(31,29,26,.06),0 8px 16px -12px rgba(31,29,26,.35)}  /* a real border, even all round: the 1px ring faded at the corners on Luke's iPhone */
.fr-p .fr-way>.fr-ic{position:static;width:58px;height:58px;border-radius:17px}
.fr-p .fr-way>.fr-ic svg{width:48px;height:48px}
.fr-p .fr-way b{font-size:17px}
.fr-p .fr-way small{font-size:14px;margin-top:2px}
.fr-p .fr-arr{position:static;flex:none;margin-left:auto;width:28px;height:28px;background:none;color:var(--i3);opacity:1;transform:none}
.fr-p .fr-body>.fr-rev{margin:auto 4px 0;padding:14px 0 calc(30px + var(--safe));text-align:center}
/* phone plan: three full-size cards in a swipe row, Premium in the middle first, a pager under */
.fr-p .fr-bill{display:grid;width:100%;margin-top:12px}
.fr-p .fr-bill button{height:40px}
.fr-deck{position:relative;display:flex;align-items:stretch;gap:12px;margin:0 -20px;padding:14px 46px 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.fr-deck::-webkit-scrollbar{display:none}
.fr-deck .fr-plan{flex:0 0 300px;height:auto;scroll-snap-align:center;padding:16px 16px 16px}
.fr-deck .fr-has{font-size:13.5px}
.fr-deck .fr-bonus b{font-size:13.5px}
.fr-deck .fr-pop .fr-has{margin-bottom:18px}
.fr-pager{display:flex;justify-content:center;gap:6px;margin-top:6px}
.fr .fr-pager button{height:30px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:500;color:var(--i5);transition:background .2s,color .2s}
.fr .fr-pager button.fr-on{background:var(--paper);color:var(--ink);font-weight:600}
/* phone details, demo, call, enquiry, welcome */
.fr-p .fr-flds{grid-template-columns:1fr;gap:12px;margin-top:16px}
.fr-p .fr-pick{padding:10px 12px 10px 10px}
.fr-p .fr-wk{gap:5px}
.fr-p .fr-dy{height:62px;border-radius:13px}
.fr-p .fr-dy span{font-size:17px}
.fr-p .fr-slots{grid-template-columns:1fr 1fr}
.fr-p .fr-callc{gap:14px;padding:16px 18px 16px 16px}
.fr-p .fr-callc .fr-ic{width:58px;height:58px;border-radius:17px}
.fr-p .fr-callc .fr-ic svg{width:48px;height:48px}
.fr-p .fr-num{font-size:39px}
.fr-p .fr-hrs{font-size:13.5px;margin-top:6px}
.fr-p .fr-or{margin-top:16px}
.fr-p .fr-alt{flex-direction:column}
.fr-p .fr-two{grid-template-columns:1fr;gap:12px;margin-top:12px}
.fr-p .fr-msg textarea{height:140px}
.fr-p .fr-sign{margin-top:auto;padding:12px 0 4px}
/* the iPad card: the banner stays, the body goes back to E's desktop layouts */
.fr-card .fr-leaf{padding:24px 28px 0}
.fr-card .fr-q{font-size:34px}
.fr-card .fr-bill{width:min(100%,380px);margin:14px auto 0}
.fr-card .fr-bill button{height:38px}
.fr-card[data-step=plan] .fr-body{margin-top:22px}
.fr-card .fr-body>.fr-rev{padding-bottom:28px}
.fr-card .fr-flds{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.fr-card .fr-wk{gap:8px}
.fr-card .fr-dy{height:66px;border-radius:15px}
.fr-card .fr-slots{grid-template-columns:repeat(3,1fr)}
.fr-card .fr-callc{gap:20px;padding:24px 24px 24px 22px}
.fr-card .fr-callc .fr-ic{width:76px;height:76px;border-radius:22px}
.fr-card .fr-callc .fr-ic svg{width:62px;height:62px}
.fr-card .fr-num{font-size:52px}
.fr-card .fr-alt{flex-direction:row}
.fr-card .fr-two{grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.fr-card .fr-next{gap:10px}
.fr-card .fr-next>div{min-height:62px;padding:10px 16px 10px 12px;background:var(--paper);font-size:16px}
.fr-card .fr-foot{padding:16px 0 24px}
.fr-card .fr-go{flex:none;height:52px;margin-left:auto}
.fr-card .fr-sum+.fr-go{margin-left:4px}
.fr-card .fr-sign{margin-top:0;padding-bottom:0}
/* a short phone (Safari with its toolbars showing is about 390x660): a smaller banner (the numbers in friend2.js), no review on start, tighter rows and fields.
   Everything still fits at 390x664; the body scrolls only below that */
.fr-sb{position:absolute;left:0;bottom:0;width:0;height:env(safe-area-inset-bottom,0px);visibility:hidden;pointer-events:none}
.fr-short .fr-leaf{padding-top:16px}
.fr-short .fr-q{font-size:28px}
.fr-short .fr-body{overflow-y:auto;overscroll-behavior:contain}
.fr-short .fr-body>.fr-rev{display:none}
.fr-short .fr-way{min-height:74px;padding-top:8px;padding-bottom:8px}
.fr-short .fr-bill{margin-top:10px}
.fr-short .fr-bill button{height:36px}
.fr-short .fr-pager{display:none}
.fr-short .fr-deck{padding:12px 46px 4px}
.fr-short .fr-deck .fr-plan{padding:13px 14px}
.fr-short .fr-deck .fr-has{gap:3px;font-size:13px}
.fr-short .fr-deck .fr-pop .fr-has{margin-bottom:12px}
.fr-short .fr-pick{padding:8px 10px 8px 8px}
.fr-short .fr-flds{gap:8px;margin-top:10px}
.fr-short .fr-fld>span{margin-bottom:4px}
.fr-short .fr-fld input{height:44px}
.fr-short .fr-fld>i{bottom:12px}
.fr-short .fr-priv{margin-top:8px}
.fr-short .fr-dl{margin:14px 0 8px}
.fr-short .fr-eye{margin-top:14px}
.fr-short .fr-next{gap:8px}
.fr-short .fr-msg textarea{height:112px}
.fr-short .fr-foot{padding-top:10px}

/* nothing moves for people who asked for less motion: no slide, pop, confetti or ring */
.fr-still,.fr-still *,.fr-still *::before,.fr-still *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .fr,.fr *,.fr *::before,.fr *::after{animation:none!important;transition:none!important}
  .fr .fr-sp{opacity:1}
}