/* App services and hero devices share the site's dark/day theme variables. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28.8px;align-items:center;padding-top:37.8px}
.hero h1 span{white-space:normal}.hero-copy{min-width:0}.hero-strip{margin-top:18px}
.hero-visual{position:relative;min-width:0;margin:0;isolation:isolate;overflow:clip}
.phone-scene{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:549px;padding:28.8px 21.6px;isolation:isolate}
.app-orbit{position:absolute;z-index:-1;width:min(85%,378px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:radial-gradient(circle,var(--glow),transparent 72%);box-shadow:0 0 0 22.5px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 48.6px color-mix(in srgb,var(--accent) 2%,transparent)}
.app-phone{position:relative;z-index:2;flex:0 0 auto;width:266.4px;max-width:100%;padding:32.4px 18px 0;border:6.3px solid var(--line);border-radius:34.2px;outline:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:var(--panel);color:var(--ink);box-shadow:0 27px 58.5px color-mix(in srgb,var(--ink) 16%,transparent);font-family:var(--font-body);font-style:normal}
.app-phone-camera{position:absolute;width:61.2px;height:11.7px;top:8.1px;left:calc(50% - 30.6px);background:var(--line);border-radius:9px}
.app-phone-brand{display:flex;align-items:center;gap:7.2px;font-size:8.1px;letter-spacing:1px;font-weight:700}
.app-brand-mark{display:grid;place-items:center;width:22.5px;height:22.5px;background:var(--accent);color:#fff;border-radius:7.2px;font-size:14.4px}
.app-avatar{margin-left:auto;border-radius:50%;background:var(--wash);color:var(--ink);width:23.4px;height:23.4px;display:grid;place-items:center;font-size:8.1px;letter-spacing:0}
.app-phone-greeting{font-size:9px;color:var(--muted);margin:22.5px 0 7.2px}
.app-phone-title{font-family:var(--font-heading);font-size:19.8px;line-height:1.25;letter-spacing:-.7px;display:block}
.app-phone-feature{margin:18.9px 0 15.3px;padding:15.3px 12.6px;border-radius:13.5px;background:linear-gradient(125deg,var(--accent),#5145b3);color:#fff;box-shadow:0 9px 14.4px color-mix(in srgb,var(--accent) 15%,transparent)}
.app-phone-feature>span{font-size:7.2px;letter-spacing:1px;color:#eee5ff}.app-phone-feature strong{display:block;font-size:13.5px;margin:9px 0 16.2px}
.app-phone-feature>div{font-size:9px;display:flex;align-items:center;justify-content:space-between}.app-phone-feature b{font-size:16.2px}
.app-phone-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8.1px}
.app-phone-actions>div{display:grid;gap:7.2px;place-items:center;padding:11.7px 0;background:var(--wash);border:1px solid var(--line);border-radius:9.9px}
.app-phone-actions b{font-size:17.1px;color:var(--lime);line-height:1}.app-phone-actions span{font-size:7.2px}
.app-phone-row{display:flex;align-items:center;gap:8.1px;padding:18px 0}.app-status-dot{width:8.1px;height:8.1px;background:var(--lime);border-radius:50%;flex-shrink:0}
.app-phone-row strong{display:block;font-size:9px}.app-phone-row div>span{display:block;font-size:7.2px;color:var(--muted);margin-top:3.6px}.app-phone-row>b{margin-left:auto;color:var(--lime);font-size:12.6px}
.app-phone-nav{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12.6px 3.6px 18px;font-size:8.1px;color:var(--muted)}.app-phone-nav>span:first-child{color:var(--lime);font-weight:700}

/* The services section now contains copy and four cards, without a repeated phone. */
.app-studio{position:relative;background:radial-gradient(ellipse at 90% 5%,var(--glow),transparent 55%),var(--wash);color:var(--ink);border-block:1px solid var(--line);scroll-margin-top:27px}
.app-studio-top{display:block}.app-studio-copy{max-width:810px}
.app-kicker{font-size:9.9px;letter-spacing:2px;color:var(--lime);font-weight:700}
.app-studio h2{font-size:clamp(1.53rem,2.34vw,2.07rem);line-height:1.25;letter-spacing:-.035em;margin:19.8px 0}
.app-studio h2 span{color:var(--lime)}.app-studio-copy>p{font-size:14.4px;line-height:1.8;color:var(--muted);max-width:702px}
.app-tags{display:flex;flex-wrap:wrap;gap:7.2px;margin:23.4px 0}.app-tags span{padding:6.3px 10.8px;font-size:9.9px;border:1px solid var(--line);border-radius:90px;color:var(--muted);background:var(--panel)}
.app-studio .button{display:inline-flex;align-items:center;min-height:43.2px}.app-studio-copy>p.app-scope{font-size:10.8px;line-height:1.7;margin-top:18px;max-width:540px;color:var(--muted)}
.app-offerings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16.2px;margin-top:34.2px}
.app-offerings article{min-width:0;padding:22.5px 19.8px;border:1px solid var(--line);border-radius:14.4px;background:var(--panel)}
.app-card-number{font-size:9px;letter-spacing:1.3px;color:var(--lime)}.app-offerings h3{font-size:15.3px;line-height:1.4;letter-spacing:-.4px;margin:18.9px 0 11.7px;color:var(--ink)}
.app-offerings p{font-size:12.6px;line-height:1.75;color:var(--muted);margin:0}
.app-studio-bottom{display:flex;justify-content:space-between;align-items:center;gap:21.6px;margin-top:27px;padding-top:22.5px;border-top:1px solid var(--line);font-size:11.7px;color:var(--muted)}
.app-studio-bottom a{color:var(--lime);text-underline-offset:4.5px}
/* A second example screen is used only by option B. */
.calendar-heading{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin:25.2px 0 18px}.calendar-heading span{color:var(--muted);font-weight:400}
.mini-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7.2px 3.6px;text-align:center;font-size:9px}.mini-calendar span{color:var(--muted);font-size:7.2px}.mini-calendar b{display:grid;place-items:center;min-height:20.7px;font-weight:500}.mini-calendar .selected{background:var(--accent);color:#fff;border-radius:7.2px}
.booking-slot{display:grid;gap:8.1px;margin-top:21.6px;padding:15.3px 10.8px;background:var(--wash);border:1px solid var(--line);border-radius:10.8px;font-size:9.9px}.booking-slot>span{color:var(--muted);font-size:8.1px}.booking-slot>b{color:var(--lime)}
/* Small cards around option C are example interface screens. */
.floating-ui{position:absolute;z-index:3;max-width:162px;padding:11.7px 12.6px;border:1px solid var(--line);border-radius:12.6px;background:var(--panel);color:var(--ink);box-shadow:0 14.4px 31.5px color-mix(in srgb,var(--ink) 10%,transparent);font-size:9.9px;line-height:1.4}
.floating-ui strong{display:block;font-size:9.9px;font-weight:700}.floating-ui small{display:block;color:var(--muted);font-size:8.1px;margin-top:4.5px}.floating-payment,.floating-booking{display:flex;gap:8.1px;align-items:center}.ui-symbol{display:grid;place-items:center;flex:0 0 21.6px;height:21.6px;border-radius:50%;color:var(--lime);background:var(--wash);font-weight:700}.ui-stars{display:block;color:var(--lime);font-size:11.7px;letter-spacing:2px;margin-bottom:5.4px}
@media(max-width:1050px){.app-offerings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:32.4px}.hero-copy{max-width:585px}.hero h1{font-size:clamp(1.8rem,4.5vw,2.7rem)}.hero-visual{width:100%;max-width:504px;justify-self:center}.hero-strip{margin-top:4.5px}.phone-scene{min-height:540px}}
@media(max-width:600px){.hero h1{font-size:clamp(1.665rem,6.3vw,2.25rem)}.phone-scene{min-height:499.5px;padding:25.2px 9px}.app-phone{width:226.8px;padding-inline:14.4px}.app-phone-title{font-size:18px}.app-phone-feature strong{font-size:11.7px}.app-studio h2{font-size:clamp(1.53rem,5.58vw,1.89rem)}.app-offerings{margin-top:27px}.app-studio-bottom{align-items:flex-start;flex-direction:column;gap:14.4px}.floating-ui{padding:9px;font-size:9px;max-width:139.5px}.floating-ui strong{font-size:9px}.floating-ui small{font-size:7.2px}}
@media(max-width:430px){.app-offerings{grid-template-columns:minmax(0,1fr)}.app-offerings article{padding:20.7px}.app-offerings h3{margin-top:13.5px}}

/* OPTION A: one large phone, a soft ring and a restrained tilt. */
.hero-option-a .app-phone-front{transform:rotate(-4deg)}


/* App-section alternatives: preserve all copy, links and four service cards. */
.app-studio-top{min-width:0}.app-studio-copy{min-width:0}
.process-board{min-width:0;padding:27px;border:1px solid var(--line);border-radius:21.6px;background:radial-gradient(ellipse at top right,var(--glow),transparent 65%),var(--panel);box-shadow:0 19.8px 45px color-mix(in srgb,var(--accent) 7%,transparent)}
.process-eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--lime)}
.process-track{display:grid;grid-template-columns:minmax(0,1fr) 13.5px minmax(0,1fr) 13.5px minmax(0,1fr);gap:7.2px;align-items:start;margin:34.2px 0}
.process-track>div{display:grid;justify-items:center;text-align:center;min-width:0}.process-track b{display:grid;place-items:center;width:54px;height:54px;border-radius:16.2px;background:var(--wash);border:1px solid var(--line);color:var(--lime);font:700 16.2px var(--font-heading)}
.process-track>div:nth-of-type(2) b{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 9px 21.6px color-mix(in srgb,var(--accent) 24%,transparent)}
.process-track strong{font-family:var(--font-heading);font-size:14.4px;margin-top:14.4px}.process-track span{font-size:9px;line-height:1.6;color:var(--muted);margin-top:5.4px}.process-track i{font-style:normal;color:var(--lime);align-self:start;padding-top:15.3px}
.process-result{display:flex;align-items:start;gap:10.8px;padding-top:21.6px;border-top:1px solid var(--line)}.process-result>span{display:grid;place-items:center;width:25.2px;height:25.2px;border-radius:50%;background:var(--wash);color:var(--lime);flex-shrink:0}
.process-result strong{font-size:11.7px}.process-result p{margin:5.4px 0 0;color:var(--muted);font-size:10.8px;line-height:1.8}
.three-apps{margin:0;min-width:0;position:relative;isolation:isolate}.three-apps::before{content:"";position:absolute;inset:8% 3%;background:radial-gradient(ellipse,var(--glow),transparent 70%);z-index:-1}
.three-apps-stage{min-height:369px;display:flex;align-items:center;justify-content:center;gap:11.7px;padding:28.8px 7.2px 43.2px}
.mini-device{width:29%;max-width:133.2px;min-width:0;position:relative;padding:25.2px 9px 10.8px;border:3.6px solid var(--line);border-radius:20.7px;background:var(--panel);color:var(--ink);box-shadow:0 16.2px 25.2px color-mix(in srgb,var(--ink) 12%,transparent);font-family:var(--font-body);font-size:6.3px}
.mini-camera{position:absolute;top:6.3px;left:calc(50% - 18px);width:36px;height:8.1px;border-radius:7.2px;background:var(--line)}.mini-brand{display:flex;align-items:center;gap:4.5px;color:var(--lime);font-size:12.6px;font-weight:800}.mini-brand span{font-size:4.5px;letter-spacing:.3px;color:var(--muted)}
.mini-title{display:block;font-family:var(--font-heading);font-size:11.7px;line-height:1.3;letter-spacing:-.4px;margin:11.7px 0}.mini-booking{transform:translateY(-22.5px) rotate(-4deg)}.mini-payment{transform:translateY(5.4px)}.mini-dashboard{transform:translateY(30.6px) rotate(4deg)}
.mini-photo{display:flex;flex-direction:column;justify-content:flex-end;min-height:72px;padding:8.1px 6.3px;border-radius:8.1px;background:linear-gradient(140deg,#8259bc,#3c72a2);color:white}.mini-photo span{font-size:5.4px}.mini-photo b{font-size:7.2px;margin-top:7.2px}
.mini-date{display:grid;gap:7.2px;margin-top:13.5px;font-size:6.3px}.mini-date span{font-size:4.5px;word-spacing:2px;color:var(--muted)}.mini-date strong{font-size:6.3px;word-spacing:2.7px}.mini-date em{font-style:normal;color:var(--lime)}
.mini-action{padding:7.2px 3.6px;margin-top:14.4px;border-radius:5.4px;background:var(--accent);color:white;text-align:center;font-size:5.4px;font-weight:600}.mini-nav{margin-top:10.8px;text-align:center;font-size:4.5px;color:var(--muted)}
.mini-success{padding:13.5px 2.7px;text-align:center;border-radius:8.1px;background:var(--wash);color:var(--lime);font-size:27px}.mini-success strong{display:block;font-size:7.2px;color:var(--ink);margin-top:5.4px}.mini-success span{display:block;font-size:4.5px;margin-top:4.5px;color:var(--muted)}
.mini-receipt{display:grid;gap:6.3px;margin-top:13.5px;font-size:5.4px;color:var(--muted)}.mini-receipt b{color:var(--ink);font-size:6.3px}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:5.4px}.mini-stats span{display:grid;gap:7.2px;padding:8.1px 3.6px;border-radius:6.3px;background:var(--wash);font-size:4.5px;color:var(--muted)}.mini-stats b{font-size:16.2px;color:var(--ink)}
.mini-chart{height:65.7px;margin-top:13.5px;display:flex;align-items:end;gap:3.6px;padding:7.2px 4.5px;border:1px solid var(--line);border-radius:7.2px}.mini-chart i{flex:1;background:var(--accent);border-radius:2.7px 2.7px 0 0;height:40%}.mini-chart i:nth-child(2){height:60%}.mini-chart i:nth-child(3){height:45%}.mini-chart i:nth-child(4){height:75%}.mini-chart i:nth-child(5){height:65%}.mini-chart i:nth-child(6){height:90%}.mini-chart i:nth-child(7){height:80%}
.mini-task{font-size:4.5px;padding-top:8.1px;color:var(--muted)}
@media(max-width:900px){.app-studio-top{grid-template-columns:minmax(0,1fr)!important}.app-studio-copy{max-width:none!important}.process-board{max-width:558px}.three-apps{max-width:522px;width:100%;justify-self:center}}
@media(max-width:430px){.process-board{padding:19.8px 14.4px}.process-track{gap:3.6px}.process-track b{width:45px;height:45px;border-radius:12.6px}.process-track strong{font-size:11.7px}.process-track span{font-size:8.1px}.three-apps-stage{gap:7.2px;padding-inline:1px;min-height:306px}.mini-device{padding:22.5px 5.4px 9px;border-width:2.7px;border-radius:15.3px}.mini-title{font-size:9px}.mini-photo{min-height:58.5px}.mini-action{font-size:4.5px}.mini-brand span{font-size:3.6px}.mini-success{font-size:20.7px;padding-block:9.9px}.mini-chart{height:52.2px}.mini-stats b{font-size:12.6px}.mini-camera{width:27px;left:calc(50% - 13.5px);height:6.3px}.mini-booking{transform:translateY(-14.4px) rotate(-3deg)}.mini-dashboard{transform:translateY(19.8px) rotate(3deg)}}

.app-studio-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40.5px;align-items:center}.app-studio-copy{max-width:none}.app-studio-copy>p{max-width:none}


/* Illustration microcopy remains readable instead of dropping to 5-7px. */
#app-design .mini-device{font-size:8.1px;line-height:1.55;overflow-wrap:anywhere}
#app-design .mini-brand{flex-wrap:wrap;gap:2.7px 4.5px}
#app-design .mini-brand span,#app-design .mini-photo span,#app-design .mini-date span,#app-design .mini-action,#app-design .mini-nav,#app-design .mini-success span,#app-design .mini-receipt,#app-design .mini-receipt span,#app-design .mini-stats span,#app-design .mini-task{font-size:8.1px;line-height:1.55;letter-spacing:0;word-spacing:normal}
#app-design .mini-photo b,#app-design .mini-date,#app-design .mini-date strong,#app-design .mini-success strong,#app-design .mini-receipt b{font-size:9px;line-height:1.5;word-spacing:normal}
#app-design .mini-nav{padding-top:6.3px;border-top:1px solid var(--line)}
#app-design .mini-stats{grid-template-columns:1fr}
@media(min-width:1100px){#app-design .mini-device{max-width:144px}}

/* Mobile: keep body text at least 15px. */
@media(max-width:599px){.app-studio-copy>p{font-size:15px}}