/* Hero phone apps (v4, 08/10). Five example apps in an iOS 26 style plus the real Forky home screen.
   Everything inside the screen is sized in em from the screen width (container units), so the phone
   looks the same at every size. Markup: templates/appdemo.html. Photos: assets/img/demo/CREDITS.txt. */
/* Safari does not always clip composited children to a rounded overflow box: clip the screen explicitly */
.iph__s{container-type:inline-size}
.x-stage .iph{border-radius:calc(var(--pw) * .165)}
.x-stage .iph__f{border-radius:calc(var(--pw) * .155);padding:calc(var(--pw) * .025)}
.x-stage .iph__s{border-radius:calc(var(--pw) * .13);clip-path:inset(0 round calc(var(--pw) * .13))}
.iph__isl{top:3.1cqw;width:31cqw;height:9.2cqw;margin-left:-15.5cqw;border-radius:5cqw}
.iph__s .sb{top:4.3cqw;left:10cqw;right:8cqw;font-size:4.5cqw;font-weight:600}
.sb--w{color:#fff}.sb--k{color:#0B2A28}
.sb__i svg{width:1.3em;height:1em;margin-left:.25em;fill:currentColor}
.iph__home{position:absolute;left:50%;bottom:2.3cqw;width:36cqw;height:1.5cqw;margin-left:-18cqw;border-radius:1cqw;background:#fff;mix-blend-mode:difference;opacity:.85;z-index:26}

/* the real Forky home screen */
.bz--forky{background:#0B0F14;padding:0;clip-path:circle(0% at 50% 3%)}
.bz--forky.is-on,.bz--forky.is-prev{clip-path:circle(150% at 50% 3%)}
.bz--forky img{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block}

/* shared app chrome */
.ap{padding:0;gap:0;font-size:4.3cqw;line-height:1.3;letter-spacing:-.01em;font-family:var(--x-font)}
.ap b{font-weight:700}
.ap__hero{position:absolute;left:0;right:0;top:0;height:22em;overflow:hidden;z-index:-1}
.ap__hero img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 4s var(--x-out)}
.bz.is-on .ap__hero img{transform:scale(1)}
.bz.is-prev .ap__hero img{transform:scale(1);transition:none}
.ap__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 46%,var(--bgc) 100%)}
.sheet{flex:1;display:flex;flex-direction:column;gap:.85em;border-radius:1.75em 1.75em 0 0;padding:1.25em 1.15em 0;background:var(--bgc);box-shadow:0 -1.2em 2.4em -1.6em rgba(0,0,0,.45)}

/* Liquid Glass tab bar */
.lg{position:absolute;left:1.05em;right:1.05em;bottom:1.05em;height:4.3em;border-radius:2.15em;padding:.32em;display:grid;grid-template-columns:repeat(4,1fr);z-index:20;
  background:rgba(250,250,252,.94);
  box-shadow:inset 0 .06em 0 rgba(255,255,255,.95),inset 0 0 0 .06em rgba(255,255,255,.5),0 .7em 1.8em -.8em rgba(0,0,0,.32);color:rgba(20,20,24,.55)}
.lg span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;border-radius:1.9em;font-size:.68em;font-weight:600;letter-spacing:0}
.lg em{font-style:normal}
.lg svg{width:2.3em;height:2.3em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg .on{background:rgba(20,20,24,.07);color:var(--acc)}
.lg--d{background:rgba(38,38,42,.94);color:rgba(255,255,255,.62);box-shadow:inset 0 .06em 0 rgba(255,255,255,.2),inset 0 0 0 .06em rgba(255,255,255,.09),0 .7em 1.8em -.8em rgba(0,0,0,.7)}
.lg--d .on{background:rgba(255,255,255,.12)}

/* AI suggestion: a quiet card in the app's own accent colour */
.aic{display:grid;grid-template-columns:auto 1fr;gap:.7em;align-items:center;padding:.72em .85em;border-radius:1.2em;background:var(--aib);box-shadow:inset 0 0 0 .06em var(--ailine);--aib:#fff;--ailine:rgba(0,0,0,.08)}
.aic--d{--aib:#1C1C1E;--ailine:rgba(255,255,255,.1)}
.aic__s{width:2.1em;height:2.1em;border-radius:.7em;display:grid;place-items:center;background:var(--acc)}
.aic__s svg{width:1.2em;height:1.2em;fill:#fff}
.aic p{margin:0;font-size:.86em;line-height:1.32;font-weight:500;color:#1d1d1f}
.aic--d p{color:#ECECEF}

/* FORGE, gym */
.ap--gym{--acc:#FF6A2B;--bgc:#0A0A0B;background:#0A0A0B;color:#F5F5F7;padding:3.7em 1.15em 0}
.ap--gym .ap__hero{height:27em}
.gy-top{display:flex;justify-content:space-between;align-items:center}
.gy-logo{font-size:1.25em;font-weight:900;letter-spacing:.2em}
.gy-av{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9em;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.3)}
.gy-class{margin-top:8.4em}
.gy-chip{display:inline-flex;align-items:center;gap:.45em;padding:.38em .75em;border-radius:2em;font-size:.76em;font-weight:600;background:rgba(0,0,0,.4);}
.gy-chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .22em rgba(255,106,43,.3)}
.gy-class b{display:block;font-size:2.7em;font-weight:800;letter-spacing:-.035em;line-height:1;margin:.28em 0 .14em}
.gy-class p{margin:0;font-size:.9em;color:rgba(255,255,255,.72)}
.gy-row{display:flex;justify-content:space-between;align-items:center;margin-top:.9em}
.gy-row em{font-style:normal;font-size:.8em;font-weight:600;color:#FFB089}
.gy-book{padding:.68em 1.5em;border-radius:2em;background:var(--acc);color:#fff;font-weight:700;font-size:.9em;box-shadow:0 .5em 1.2em -.5em rgba(255,106,43,.8)}
.gy-week{margin-top:1.5em}
.gy-week>p{margin:0 0 .55em;font-size:1em;font-weight:700}
.gy-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.gy-cards figure{position:relative;margin:0;height:8.2em;border-radius:1.1em;overflow:hidden}
.gy-cards img{width:100%;height:100%;object-fit:cover;display:block}
.gy-cards figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8em .7em .55em;font-size:.74em;color:rgba(255,255,255,.75);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.gy-cards figcaption b{display:block;font-size:1.2em;color:#fff}
.ap--gym .aic{margin-top:.85em}

/* Nonna Rosa, restaurant */
.ap--food{--acc:#B3261E;--bgc:#fff;background:#fff;color:#1A1714}
.ap__hero--top{height:16.5em}
.ap--food .sheet{margin-top:13.2em;gap:.75em}
.fd-head{display:flex;flex-direction:column;gap:.2em}
.fd-logo{font-family:"New York",ui-serif,"Iowan Old Style",Georgia,serif;font-size:1.85em;font-weight:700;letter-spacing:-.02em;line-height:1}
.fd-head span{display:flex;align-items:center;gap:.4em;font-size:.8em;color:#6F6A63}
.fd-head span::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#2E9E5B}
.seg{display:grid;grid-template-columns:repeat(3,1fr);padding:.18em;border-radius:.75em;background:#F1EFEB}
.seg span{text-align:center;padding:.42em 0;border-radius:.6em;font-size:.82em;font-weight:600;color:#6F6A63}
.seg .on{background:#fff;color:#1A1714;box-shadow:0 .06em .2em rgba(0,0,0,.14)}
.fd-list{display:flex;flex-direction:column}
.fd-it{display:grid;grid-template-columns:4.2em 1fr auto;gap:.8em;align-items:center;padding:.5em 0;border-bottom:.06em solid #ECE9E4}
.fd-it:last-child{border-bottom:0}
.fd-it img{width:4.2em;height:4.2em;border-radius:.9em;object-fit:cover;display:block}
.fd-it b{display:block;font-size:.95em}
.fd-it small{display:block;margin:.08em 0 .2em;font-size:.74em;color:#8A847A}
.fd-it em{font-style:normal;font-weight:600;font-size:.84em}
.fd-it i{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.1em;background:#F1EFEB;color:#1A1714}
.fd-it:first-child i{background:var(--acc);color:#fff}
.fd-bar{position:absolute;left:1.05em;right:1.05em;bottom:1.05em;height:3.7em;border-radius:1.85em;padding:0 1.35em;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.94em;background:#1A1714;color:#fff;box-shadow:0 1em 2em -1em rgba(0,0,0,.55);z-index:20}

/* Fade & Co., barber */
.ap--barber{--acc:#CFAE68;--bgc:#0E2A20;background:#0E2A20;color:#EFE9DC}
.ap__hero--short{height:15.5em}
.bb-logo{position:absolute;left:.85em;bottom:2.9em;z-index:1;font-family:"New York",ui-serif,"Iowan Old Style",Georgia,serif;font-size:1.65em;font-weight:600;letter-spacing:.14em;color:#fff}
.ap--barber .sheet{margin-top:12.6em;gap:.8em}
.bb-lab{margin:0;font-size:.8em;font-weight:600;color:#93A89C}
.bb-team{display:flex;gap:1.1em}
.bb-team span{display:flex;flex-direction:column;align-items:center;gap:.35em;font-size:.8em;font-weight:600;color:#9FB2A6}
.bb-team img{width:3.5em;height:3.5em;border-radius:50%;object-fit:cover;display:block}
.bb-team .on{color:#fff}
.bb-team .on img{box-shadow:0 0 0 .14em #0E2A20,0 0 0 .3em var(--acc)}
.bb-svc{display:flex;justify-content:space-between;align-items:center;padding:.8em .95em;border-radius:1em;background:#173A2D}
.bb-svc b{display:block;font-size:.95em}.bb-svc small{font-size:.76em;color:#93A89C}
.bb-svc em{font-style:normal;font-weight:700;color:var(--acc)}
.bb-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.42em}
.bb-slots span{text-align:center;padding:.62em 0;border-radius:.8em;background:#173A2D;font-weight:600;font-size:.84em;font-variant-numeric:tabular-nums}
.bb-slots .on{background:var(--acc);color:#0E2A20}
.ap--barber .aic{--aib:#173A2D}.ap--barber .aic__s{color:#0E2A20}.ap--barber .aic__s svg{fill:#0E2A20}
.bb-btn{position:absolute;left:1.05em;right:1.05em;bottom:1.05em;height:3.7em;border-radius:1.85em;display:grid;place-items:center;font-weight:700;font-size:.94em;background:var(--acc);color:#0E2A20;z-index:20}

/* northside, cafe */
.ap--cafe{--acc:#17140F;--bgc:#FBF8F3;background:#FBF8F3;color:#17140F;padding:0 1.1em;gap:.75em}
.ap__hero--cafe{height:15.5em}
.cf-logo{position:absolute;left:.55em;bottom:2.5em;z-index:1;font-size:2.1em;font-weight:800;letter-spacing:-.05em;color:#fff}
.cf-card{margin-top:12.4em;display:flex;flex-direction:column;gap:.75em;padding:1em 1.05em;border-radius:1.35em;background:#F6C945;box-shadow:0 1em 2em -1.3em rgba(120,90,0,.6)}
.cf-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:1em}
.cf-card b{font-size:2.1em;font-weight:800;letter-spacing:-.04em;line-height:1}
.cf-card b span{font-size:.5em;opacity:.5}
.cf-card small{font-size:.76em;font-weight:600;line-height:1.25;text-align:right;max-width:10em}
.cf-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:.32em}
.cf-dots i{aspect-ratio:1;border-radius:50%;background:#17140F;transform:scale(.4);opacity:.25;transition:transform .5s var(--x-out),opacity .3s}
.cf-dots i.off{background:rgba(23,20,15,.16)}
.bz.is-on .cf-dots i,.bz.is-prev .cf-dots i{transform:none;opacity:1}
.cf-dots i:nth-child(2){--d:.05s}.cf-dots i:nth-child(3){--d:.1s}.cf-dots i:nth-child(4){--d:.15s}.cf-dots i:nth-child(5){--d:.2s}.cf-dots i:nth-child(6){--d:.25s}.cf-dots i:nth-child(7){--d:.3s}.cf-dots i:nth-child(n+8){--d:.35s}
.bz.is-on .cf-dots i{transition-delay:calc(.55s + var(--d,0s))}
.cf-usual{display:grid;grid-template-columns:3.6em 1fr auto;gap:.75em;align-items:center;padding:.6em .7em;border-radius:1.2em;background:#fff;box-shadow:0 .1em .3em rgba(23,20,15,.06),0 .8em 1.6em -1.2em rgba(23,20,15,.3)}
.cf-usual img{width:3.6em;height:3.6em;border-radius:.85em;object-fit:cover;display:block}
.cf-usual small{display:block;font-size:.72em;color:#7A7263}
.cf-usual b{display:block;font-size:.92em}
.cf-usual em{font-style:normal;font-size:.8em;color:#7A7263}
.cf-usual>span{padding:.55em .95em;border-radius:2em;background:#17140F;color:#fff;font-weight:700;font-size:.8em}
.cf-pick small{display:block;margin-bottom:.4em;font-size:.76em;font-weight:600;color:#7A7263}
.cf-pick div{display:grid;grid-template-columns:repeat(3,1fr);gap:.42em}
.cf-pick span{text-align:center;padding:.55em 0;border-radius:.8em;background:#fff;box-shadow:inset 0 0 0 .06em #E8E1D5;font-weight:600;font-size:.86em;font-variant-numeric:tabular-nums}
.cf-pick .on{background:#17140F;color:#F6C945;box-shadow:none}

/* motion physio */
.ap--physio{--acc:#0F766E;--bgc:#F2F6F5;background:#F2F6F5;color:#0B2A28;padding:3.7em 1.1em 0;gap:.8em}
.ph-top{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.5em}
.ph-top small{display:block;font-size:.78em;font-weight:600;color:#5E7573}
.ph-top b{display:block;font-size:2.35em;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.ph-av{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#CDE7E2;color:var(--acc)}
.ph-plan{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:1.05em 1.1em;border-radius:1.35em;color:#fff;
  background:linear-gradient(90deg,rgba(13,98,91,.97) 38%,rgba(13,98,91,.5)),url(/assets/img/demo/physio-hero.webp) center/cover}
.ph-plan small{display:block;font-size:.76em;opacity:.8}
.ph-plan b{display:block;font-size:1.15em}
.ph-ring{position:relative;flex:none;width:3.5em;height:3.5em}
.ph-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ph-ring circle{fill:none;stroke:rgba(255,255,255,.25);stroke-width:3.4}
.ph-ring .ph-arc{stroke:#fff;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;transition:stroke-dashoffset 1.2s var(--x-out) .45s}
.bz.is-on .ph-arc,.bz.is-prev .ph-arc{stroke-dashoffset:31.4}
.ph-ring em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.86em}
.ph-list{padding:.2em .9em;border-radius:1.35em;background:#fff;box-shadow:0 .8em 1.6em -1.3em rgba(11,42,40,.3)}
.ph-list>div{display:grid;grid-template-columns:3.2em 1fr auto;gap:.75em;align-items:center;padding:.55em 0;border-bottom:.06em solid #E3EBE9}
.ph-list>div:last-child{border-bottom:0}
.ph-list img{width:3.2em;height:3.2em;border-radius:.75em;object-fit:cover;display:block}
.ph-list b{display:block;font-size:.92em}.ph-list small{font-size:.76em;color:#5E7573}
.ph-list i{position:relative;width:1.55em;height:1.55em;border-radius:50%;box-shadow:inset 0 0 0 .1em #C5D3D0}
.ph-list .ok i{background:var(--acc);box-shadow:none}
.ph-list .ok i::after{content:"";position:absolute;left:.52em;top:.33em;width:.38em;height:.68em;border:solid #fff;border-width:0 .13em .13em 0;transform:rotate(45deg)}
.ph-list .ok b{color:#5E7573}

/* fillers that make each screen read as a full app */
.bb-extra{display:flex;align-items:center;gap:.6em;padding:.75em .95em;border-radius:1em;background:#173A2D;font-size:.92em;font-weight:600}
.bb-extra span{flex:1}.bb-extra em{font-style:normal;color:#93A89C;font-size:.9em}
.bb-extra i{position:relative;width:2.9em;height:1.75em;border-radius:1em;background:#2C5444}
.bb-extra i::after{content:"";position:absolute;top:.15em;left:.15em;width:1.45em;height:1.45em;border-radius:50%;background:#EFE9DC;box-shadow:0 .1em .3em rgba(0,0,0,.3)}
.cf-add{display:grid;grid-template-columns:2.8em 1fr auto;gap:.7em;align-items:center;padding:.5em .6em;border-radius:1.1em;background:#fff;box-shadow:inset 0 0 0 .06em #E8E1D5}
.cf-add img{width:2.8em;height:2.8em;border-radius:.7em;object-fit:cover;display:block}
.cf-add b{display:block;font-size:.88em}.cf-add em{font-style:normal;font-size:.78em;color:#7A7263}
.cf-add span{padding:.45em .85em;border-radius:2em;background:#F6C945;font-weight:700;font-size:.78em}
.ph-next{display:flex;align-items:center;gap:.8em;padding:.8em .95em;border-radius:1.35em;background:#fff;box-shadow:0 .8em 1.6em -1.3em rgba(11,42,40,.3)}
.ph-cal{width:2.5em;height:2.5em;border-radius:.75em;display:grid;place-items:center;background:#E1EFEC;color:var(--acc)}
.ph-cal svg{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ph-next small{display:block;font-size:.74em;color:#5E7573;font-weight:600}.ph-next b{display:block;font-size:.95em}.ph-next em{font-style:normal;font-size:.78em;color:#5E7573}

@media (prefers-reduced-motion:reduce){.ap__hero img{transform:none;transition:none}.cf-dots i{transform:none;opacity:1;transition:none}}
.bz{contain:paint}