/* The Toolbox, drawn for the marketing hero: the light desktop home on a monitor and the
   dark phone home on a handset. Each screen is laid out at a fixed Toolbox size and scaled
   with its container (one --u is one Toolbox pixel), so it shrinks like a screenshot instead
   of reflowing. Phones are the main audience: below 560px the handset leads, centred in
   front of the monitor. DM Sans is already loaded by the page, so the hero adds no fonts. */
.device-pair,[data-toolbox-theme]{
  --dp-font:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --dp-display:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --dp-bg:#F4EFE6;
  --dp-side:#EFE7D9;
  --dp-panel:#fff;
  --dp-panel-2:#F8F4ED;
  --dp-ink:#17243A;
  --dp-muted:#5B667A;
  --dp-line:#E4DACA;
  --dp-green:#47D994;
  --dp-green-d:#17734D;
  --dp-green-soft:#E4F7EE;
  --dp-positive:#146443;
  --dp-danger:#B42318;
  --dp-coral:#EE7457;
  --dp-coral-soft:#FDEBE5;
  --dp-sun:#F5B83D;
  --dp-sun-soft:#FDF3DC;
  --dp-lilac-soft:#EFEAFB;
  --dp-shadow:0 1px 0 rgba(23,36,58,.04),0 8px 24px -16px rgba(23,36,58,.35);
  --dp-m-bg:#0B0F17;
  --dp-m-app:#10151F;
  --dp-m-card:#1B2333;
  --dp-m-card2:#222D40;
  --dp-m-line:#2A3448;
  --dp-m-tx:#EDF0F5;
  --dp-m-tx2:#9BA6B9;
  --dp-m-brand:#5BE3A3;
  --dp-m-brand-soft:#153828;
  --dp-m-danger:#FF8A7C;
  --dp-accent:#E8883F;
  --dp-radius:12px;
}
.device-pair{position:relative;container-type:inline-size;container-name:dp;margin:0;min-width:0;width:100%;font:400 14px/1.4 var(--dp-font);color:var(--dp-ink)}
.device-pair *{box-sizing:border-box}
.device-pair p{font-family:var(--dp-font)}
.device-pair img{max-width:100%;height:auto}
.dp-caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.device-pair .dp-motion{position:absolute;left:0;bottom:3%;z-index:5}

/* Composition: phone-first, the handset centred over the lower half of the monitor. */
.dp-scene{position:relative;width:100%;aspect-ratio:1000/1515;isolation:isolate;margin:4px 0 8px}
.dp-monitor{position:absolute;left:0;top:0;width:100%;container-type:inline-size}
.dp-phone{position:absolute;left:21%;bottom:0;width:58%;z-index:2;container-type:inline-size}
/* Stacked tablet hero: the monitor leads and the phone stands at its right. */
@container dp (min-width:560px){
  .dp-scene{aspect-ratio:1000/744}
  .dp-monitor{width:86%}
  .dp-phone{left:auto;right:0;width:28%}
}
/* Two-column desktop hero (a narrow column): monitor across, phone bottom right. */
@media (min-width:901px){
  .dp-scene{aspect-ratio:1000/1278}
  .dp-phone{left:auto;right:0;width:44%}
}

/* Hardware. */
.dp-bezel{position:relative;padding:1.3cqw;border-radius:2.2cqw;background:linear-gradient(180deg,#22262E,#0C0E12 22%);box-shadow:inset 0 0 0 .2cqw #3A3F49,0 2.6cqw 5cqw -2.4cqw rgba(13,22,40,.55),0 1cqw 2.2cqw -1cqw rgba(13,22,40,.3)}
.dp-stand{position:relative;display:block;width:24%;height:9cqw;margin:0 auto}
.dp-stand::before{content:"";position:absolute;left:24%;right:24%;top:0;bottom:1.6cqw;background:linear-gradient(90deg,#A3A9B4,#DCE0E6 38%,#F4F5F8 52%,#C4C9D2 70%,#9EA4AF);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.dp-stand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.8cqw;border-radius:.4cqw .4cqw 1cqw 1cqw;background:linear-gradient(180deg,#F1F3F6,#B9BEC7);box-shadow:0 1.2cqw 1.8cqw -.8cqw rgba(13,22,40,.45)}
.dp-handset{position:relative;padding:3.4cqw;border-radius:16cqw;background:#15181E;box-shadow:inset 0 0 0 .7cqw #444A55,inset 0 0 0 1.5cqw #0A0C10,0 6cqw 10cqw -5cqw rgba(13,22,40,.6),0 2.4cqw 5cqw -2.4cqw rgba(13,22,40,.4)}
.dp-handset::before,.dp-handset::after{content:"";position:absolute;width:1.1cqw;border-radius:.6cqw;background:#2B3039}
.dp-handset::before{left:-.8cqw;top:22%;height:21%;background:linear-gradient(#2B3039 0 38%,transparent 38% 52%,#2B3039 52%)}
.dp-handset::after{right:-.8cqw;top:27%;height:13%}
.dp-screen{position:relative;overflow:hidden;container-type:inline-size}
.dp-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%)}
.dp-desktop{aspect-ratio:16/10;border-radius:.7cqw;background:var(--dp-bg)}
.dp-phone-screen{aspect-ratio:330/715;border-radius:12.6cqw;background:var(--dp-m-app)}
.dp-phone-screen::after{background:linear-gradient(118deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%)}

/* Shared screen canvas. */
.dp-canvas{position:absolute;inset:0;--u:calc(100cqw/1120);font-size:calc(var(--u)*14);line-height:1.4;color:var(--dp-ink);font-family:var(--dp-font);text-align:left}
.dp-canvas small{font-size:calc(var(--u)*12)}
.dp-canvas b{font-weight:700}
.dp-canvas svg{display:block}
.dp-primary{display:inline-flex;align-items:center;justify-content:center;padding:calc(var(--u)*9) calc(var(--u)*16);border-radius:calc(var(--u)*10);background:var(--dp-green);color:#062013;font-weight:800;font-size:calc(var(--u)*14);white-space:nowrap;box-shadow:0 calc(var(--u)*6) calc(var(--u)*16) rgba(71,217,148,.24)}
.dp-avatar{display:grid;place-items:center;flex:none;width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:calc(var(--u)*9);background:var(--dp-green);color:#062013;font-weight:800;font-size:calc(var(--u)*15)}
.dp-badge{display:grid;place-items:center;margin-left:auto;min-width:calc(var(--u)*20);height:calc(var(--u)*20);padding:0 calc(var(--u)*6);border-radius:99px;background:#B4412A;color:#fff;font-size:calc(var(--u)*11);font-weight:700;line-height:1}
.dp-ranges{display:flex;flex:none;padding:calc(var(--u)*3);border-radius:calc(var(--u)*9);background:var(--dp-panel);font-size:calc(var(--u)*12);color:var(--dp-muted);white-space:nowrap}
.dp-ranges span{padding:calc(var(--u)*6) calc(var(--u)*10);border-radius:calc(var(--u)*7)}
.dp-ranges .dp-on{background:var(--dp-bg);color:var(--dp-ink);font-weight:600}
.dp-hello{display:block;font-family:var(--dp-display);font-size:calc(var(--u)*30);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.dp-intro{display:block;color:var(--dp-muted)}
.dp-card{display:flex;flex-direction:column;gap:calc(var(--u)*6);min-width:0;padding:calc(var(--u)*14) calc(var(--u)*16);border-radius:calc(var(--u)*12);background:var(--dp-panel);box-shadow:var(--dp-shadow)}
.dp-summary{display:flex;flex-direction:column;gap:calc(var(--u)*2);min-width:0}
.dp-summary b{font-size:calc(var(--u)*14);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-summary small{color:var(--dp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-booking-row{display:grid;grid-template-columns:calc(var(--u)*46) minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*7) 0;border-bottom:1px solid var(--dp-line)}
.dp-booking-row time{font:600 calc(var(--u)*12)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dp-muted)}
.dp-state{padding:calc(var(--u)*4) calc(var(--u)*9);border-radius:99px;font-size:calc(var(--u)*11);font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.dp-state-checkin{padding:calc(var(--u)*7) calc(var(--u)*12);border:1px solid #9FDFC0;border-radius:calc(var(--u)*9);background:var(--dp-green-soft);color:var(--dp-green-d);font-size:calc(var(--u)*13);letter-spacing:0;text-transform:none}
.dp-state-attended{background:var(--dp-green-soft);color:var(--dp-green-d)}
.dp-state-booked{background:var(--dp-panel-2);color:var(--dp-muted)}
.dp-request{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*7) 0;border-bottom:1px solid var(--dp-line)}
.dp-request .dp-summary{flex:1}
.dp-decide{display:flex;flex:none;gap:calc(var(--u)*6)}
.dp-decline,.dp-confirm{padding:calc(var(--u)*7) calc(var(--u)*10);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*12);font-weight:800;white-space:nowrap}
.dp-decline{border:1px solid #F2C4B8;background:var(--dp-coral-soft);color:var(--dp-danger)}
.dp-confirm{background:var(--dp-green);color:#062013}
.dp-plan-title{display:block;font-family:var(--dp-display);font-size:calc(var(--u)*17);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.dp-plan-body{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*13)}

/* Desktop: Toolbox light theme, 1120 x 700. */
.dp-desktop .dp-canvas{display:grid;grid-template-columns:calc(var(--u)*236) minmax(0,1fr);background:var(--dp-bg)}
.dp-sidebar{display:flex;flex-direction:column;gap:calc(var(--u)*14);min-width:0;padding:calc(var(--u)*18) calc(var(--u)*14);background:var(--dp-side);border-right:1px solid var(--dp-line);overflow:hidden}
.dp-brand{display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*6)}
.dp-logo{display:grid;place-items:center;flex:none;width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:calc(var(--u)*10);background:var(--dp-panel);box-shadow:var(--dp-shadow)}
.dp-logo img{width:calc(var(--u)*24);height:auto}
.dp-brand b{display:block;font-size:calc(var(--u)*17);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.dp-brand small{display:block;color:var(--dp-muted)}
.dp-who{display:flex;flex-direction:column;gap:calc(var(--u)*8);padding:calc(var(--u)*12);border-radius:calc(var(--u)*12);background:var(--dp-panel);box-shadow:var(--dp-shadow)}
.dp-overline{font-size:calc(var(--u)*10);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dp-muted)}
.dp-who-row{display:flex;align-items:center;gap:calc(var(--u)*10);min-width:0}
.dp-who-row>span:last-child{min-width:0}
.dp-who-row b{display:block;font-size:calc(var(--u)*14);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-who-row small{display:block;color:var(--dp-muted);white-space:nowrap}
.dp-switch{display:flex;align-items:center;gap:calc(var(--u)*8)}
.dp-switch small{color:var(--dp-ink)}
.dp-select{display:flex;flex:1;align-items:center;justify-content:space-between;gap:calc(var(--u)*4);min-width:0;padding:calc(var(--u)*6) calc(var(--u)*8);border:1px solid var(--dp-line);border-radius:calc(var(--u)*8);background:var(--dp-panel);font-size:calc(var(--u)*12);white-space:nowrap;overflow:hidden}
.dp-select svg{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14)}
.dp-nav{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.dp-nav-group{margin:calc(var(--u)*10) 0 calc(var(--u)*4);padding:0 calc(var(--u)*10);font-size:calc(var(--u)*10);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dp-muted)}
.dp-nav-item{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*7) calc(var(--u)*10);border-radius:calc(var(--u)*9);font-weight:500;white-space:nowrap}
.dp-nav-item.dp-active{background:var(--dp-panel);font-weight:700;box-shadow:var(--dp-shadow)}
.dp-nav-icon{display:grid;flex:none;width:calc(var(--u)*18)}
.dp-nav-icon svg{width:100%;height:auto}
.dp-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dp-workspace{display:flex;flex-direction:column;gap:calc(var(--u)*12);min-width:0;padding:0 calc(var(--u)*26);overflow:hidden}
/* At the smallest preview size, fixed one-pixel borders need a little extra room. */
@container dp (max-width:360px){
  .dp-workspace{gap:calc(var(--u)*8)}
}
.dp-topbar{display:flex;flex:none;align-items:center;justify-content:space-between;margin:0 calc(var(--u)*-26);padding:calc(var(--u)*10) calc(var(--u)*26);border-bottom:1px solid var(--dp-line)}
.dp-langs{display:flex;gap:calc(var(--u)*2);padding:calc(var(--u)*3);border-radius:calc(var(--u)*9);background:var(--dp-panel);font-size:calc(var(--u)*12);font-weight:600;color:var(--dp-muted)}
.dp-langs span{padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*7)}
.dp-langs .dp-on{background:var(--dp-green-soft);color:var(--dp-green-d)}
.dp-heading{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*16)}
.dp-desktop .dp-intro{margin-top:calc(var(--u)*5)}
.dp-desktop .dp-plan{flex-direction:row;align-items:center;gap:calc(var(--u)*14);padding:calc(var(--u)*13) calc(var(--u)*16);border:1px solid #A9E9C9;background-color:var(--dp-green-soft);background-image:linear-gradient(100deg,var(--dp-green-soft),var(--dp-panel) 80%);box-shadow:none}
.dp-plan-mark{display:grid;place-items:center;flex:none;width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:50%;background:var(--dp-green);color:#062013}
.dp-plan-mark svg{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.dp-plan-copy{display:block;min-width:0}
.dp-desktop .dp-plan-body{color:var(--dp-muted)}
.dp-desktop .dp-plan .dp-primary{margin-left:auto;flex:none}
.dp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*14)}
.dp-kpi{display:flex;flex-direction:column;min-width:0;min-height:calc(var(--u)*120);padding:calc(var(--u)*12) calc(var(--u)*16);border-radius:calc(var(--u)*12);background:var(--dp-panel);box-shadow:var(--dp-shadow)}
.dp-kpi-head{display:flex;justify-content:space-between;gap:calc(var(--u)*8);min-height:calc(var(--u)*32);color:var(--dp-muted);font-size:calc(var(--u)*13);font-weight:600;line-height:1.3}
.dp-kpi-head svg{flex:none;width:calc(var(--u)*17);height:calc(var(--u)*17)}
.dp-kpi-label{min-width:0}
.dp-kpi-value{margin-top:calc(var(--u)*6);font-family:var(--dp-display);font-size:calc(var(--u)*29);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.dp-kpi-note{margin-top:calc(var(--u)*3);font-weight:600;color:var(--dp-green-d)}
/* Specific enough to beat the landing page's .pm-page svg sizing. */
.dp-canvas .dp-spark{width:100%;height:calc(var(--u)*26);margin-top:auto;color:#1C8F5E}
.dp-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(var(--u)*14)}
.dp-card-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*8)}
.dp-card-head b,.dp-next>b{font-size:calc(var(--u)*16);font-weight:800;letter-spacing:-.01em}
.dp-ghost{padding:calc(var(--u)*5) calc(var(--u)*9);border:1px solid var(--dp-line);border-radius:calc(var(--u)*8);background:var(--dp-panel-2);font-size:calc(var(--u)*12);font-weight:700}
.dp-secondary{align-self:flex-start;margin-top:auto;padding:calc(var(--u)*7) calc(var(--u)*12);border:1px solid var(--dp-line);border-radius:calc(var(--u)*9);background:var(--dp-panel);font-size:calc(var(--u)*13);font-weight:700}
.dp-next{gap:calc(var(--u)*10)}
.dp-upcoming-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*12)}
.dp-upcoming{display:flex;flex-direction:column;gap:calc(var(--u)*5);min-width:0;padding-right:calc(var(--u)*12);border-right:1px solid var(--dp-line)}
.dp-upcoming:last-child{border:0}
.dp-upcoming b{font-size:calc(var(--u)*14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-upcoming small{color:var(--dp-muted)}
.dp-pill{padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:99px;background:var(--dp-green-soft);color:var(--dp-green-d);font-size:calc(var(--u)*10.5);font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Phone: Toolbox dark theme, 330 x 715. */
.dp-phone-screen .dp-canvas{--u:calc(100cqw/330);display:flex;flex-direction:column;font-size:calc(var(--u)*15);color:var(--dp-m-tx);background:var(--dp-m-app)}
.dp-island{position:absolute;top:calc(var(--u)*11);left:50%;z-index:3;width:calc(var(--u)*98);height:calc(var(--u)*29);margin-left:calc(var(--u)*-49);border-radius:99px;background:#000}
.dp-status{display:flex;flex:none;align-items:center;justify-content:space-between;height:calc(var(--u)*50);padding:calc(var(--u)*4) calc(var(--u)*26) 0 calc(var(--u)*36);font-size:calc(var(--u)*15);font-weight:700}
.dp-canvas .dp-status-icons{width:calc(var(--u)*64);height:auto;fill:currentColor}
.dp-appbar{display:flex;flex:none;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*6) calc(var(--u)*16) calc(var(--u)*12);border-bottom:1px solid var(--dp-m-line)}
.dp-appbar .dp-avatar{width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:calc(var(--u)*10);font-size:calc(var(--u)*16)}
.dp-appbar-id{display:flex;flex:1;flex-direction:column;min-width:0}
.dp-appbar-id small{color:var(--dp-m-tx2)}
.dp-appbar-id b{display:flex;align-items:center;gap:calc(var(--u)*4);font-size:calc(var(--u)*16);font-weight:800;white-space:nowrap;overflow:hidden}
.dp-appbar-id svg{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);color:var(--dp-m-tx2)}
.dp-plus{display:grid;place-items:center;flex:none;width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:calc(var(--u)*11);background:var(--dp-green);color:#062013;box-shadow:0 0 calc(var(--u)*18) rgba(71,217,148,.35)}
.dp-plus svg{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.dp-feed-clip{position:relative;display:block;flex:1;min-height:0;overflow:hidden}
.dp-feed{display:flex;flex-direction:column;gap:calc(var(--u)*12);padding:calc(var(--u)*16) calc(var(--u)*16) calc(var(--u)*24);animation:none}
.dp-phone .dp-hello{font-size:calc(var(--u)*32)}
.dp-phone .dp-intro{margin-top:calc(var(--u)*-4);color:var(--dp-m-tx2)}
.dp-phone .dp-card{gap:calc(var(--u)*8);border:1px solid var(--dp-m-line);border-radius:calc(var(--u)*16);background:var(--dp-m-card);box-shadow:none}
.dp-phone .dp-plan{gap:calc(var(--u)*14);padding:calc(var(--u)*16);background-color:#17302A;background-image:linear-gradient(125deg,var(--dp-m-brand-soft),var(--dp-m-card2));box-shadow:0 calc(var(--u)*10) calc(var(--u)*30) calc(var(--u)*-20) rgba(71,217,148,.4)}
.dp-phone .dp-plan-title{font-size:calc(var(--u)*18)}
.dp-phone .dp-plan-body{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*15)}
.dp-phone .dp-plan .dp-primary{align-self:flex-start;padding:calc(var(--u)*11) calc(var(--u)*20);font-size:calc(var(--u)*15);box-shadow:0 0 calc(var(--u)*18) rgba(71,217,148,.35)}
.dp-attention{margin-top:calc(var(--u)*6);font-family:var(--dp-display);font-size:calc(var(--u)*21);font-weight:800;letter-spacing:-.015em}
.dp-card-title{font-size:calc(var(--u)*15);font-weight:800}
.dp-phone .dp-summary b{font-size:calc(var(--u)*15)}
.dp-phone .dp-summary small{font-size:calc(var(--u)*13);color:var(--dp-m-tx2)}
.dp-phone .dp-request{flex-direction:column;align-items:stretch;gap:calc(var(--u)*10);padding:calc(var(--u)*4) 0 0;border:0}
.dp-phone .dp-decide{gap:calc(var(--u)*8)}
.dp-phone .dp-decline,.dp-phone .dp-confirm{flex:1;padding:calc(var(--u)*10);text-align:center;font-size:calc(var(--u)*14)}
.dp-phone .dp-decline{border-color:rgba(255,138,124,.35);background-color:#33293A;color:var(--dp-m-danger)}
.dp-phone .dp-booking-row{grid-template-columns:calc(var(--u)*44) minmax(0,1fr) auto;border-color:var(--dp-m-line)}
.dp-phone .dp-booking-row time{color:var(--dp-m-tx2)}
.dp-phone .dp-state-checkin{border-color:rgba(91,227,163,.4);background:var(--dp-m-brand-soft);color:var(--dp-m-brand)}
.dp-phone .dp-state-attended{background:var(--dp-m-brand-soft);color:var(--dp-m-brand)}
.dp-phone .dp-state-booked{background:var(--dp-m-card2);color:var(--dp-m-tx2)}
/* As the Toolbox bottom bar: tabs sized to their labels, never truncated. */
.dp-tabs{position:relative;display:grid;flex:none;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*8) calc(var(--u)*6) calc(var(--u)*26);border-top:1px solid var(--dp-m-line);background:var(--dp-m-app)}
.dp-tab{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3);min-width:calc(var(--u)*46);padding:calc(var(--u)*7) calc(var(--u)*3) calc(var(--u)*6);border-radius:calc(var(--u)*12);color:var(--dp-m-tx2);font-size:calc(var(--u)*10.5);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.dp-tab.dp-active{background:var(--dp-m-brand-soft);color:var(--dp-m-brand)}
.dp-tab-icon{position:relative;display:grid;width:calc(var(--u)*24)}
.dp-tab-icon svg{width:100%;height:auto}
.dp-tab-icon .dp-badge{position:absolute;top:calc(var(--u)*-7);right:calc(var(--u)*-13);margin:0;min-width:calc(var(--u)*18);height:calc(var(--u)*18);font-size:calc(var(--u)*10.5)}
.dp-home-indicator{position:absolute;left:50%;bottom:calc(var(--u)*8);width:calc(var(--u)*120);height:calc(var(--u)*5);margin-left:calc(var(--u)*-60);border-radius:99px;background:var(--dp-m-tx)}

/* Motion: the phone feed scrolls to today's bookings and back; still when asked. */
@media(prefers-reduced-motion: no-preference){
  .device-pair.device-motion-ready .dp-feed{animation:dp-feed 12s cubic-bezier(.65,0,.35,1) infinite}
  .device-pair.is-paused .dp-feed{animation-play-state:paused}
}
@media(prefers-reduced-motion: reduce){
  .device-pair .dp-feed{animation:none!important;transform:none!important}
  .device-pair .dp-motion{display:none}
}
@keyframes dp-feed{
  0%,30%,100%{transform:translateY(0)}
  45%,85%{transform:translateY(calc(var(--u)*-150))}
}