/* The premium pass on the public site, loaded after site.css so nothing in
   that file is edited. Same type, same layout; the paper-and-lime palette
   becomes white with the logo's blue, glows on the dark sections, deeper
   card shadows, pill buttons in the app's blue. */
:root{
  --paper:#ffffff;--paper-2:#f6f8fd;--paper-3:#eef1f8;
  --text:#101828;--muted:#5b6478;--muted-2:#6f7890;--line:#e3e8f2;--line-soft:#eef1f8;
  --ink:#0b1030;--ink-2:#111a3f;--lime:#1a73e8;
  --blue:#1a73e8;--blue-ink:#1557b0;
  --r:16px;--r-lg:22px;--r-xl:30px;
  --sh:0 14px 44px rgba(16,24,40,.08),0 2px 8px rgba(16,24,40,.04);
  --sh-lg:0 44px 96px rgba(16,24,40,.18),0 8px 24px rgba(16,24,40,.08);
}
body{background:#fff;}
::selection{background:rgba(26,115,232,.18);}

/* header */
header{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
header.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(16,24,40,.06);}
.brand img{width:auto !important;height:30px !important;border-radius:0 !important;}
nav.main a{border-radius:999px;}
nav.main a:hover{background:rgba(26,115,232,.08);color:var(--blue-ink);}

/* buttons */
.btn{border-radius:999px;font-weight:700;letter-spacing:-.005em;}
.btn:hover{border-color:#cfd6e6;box-shadow:0 10px 24px -12px rgba(16,24,40,.25);}
.btn-lime{background:linear-gradient(135deg,#2f84ef 0%,#1a5fd0 100%);border-color:transparent;color:#fff;box-shadow:0 12px 28px -12px rgba(26,99,214,.7);}
.btn-lime:hover{background:linear-gradient(135deg,#2a78dc 0%,#1557b0 100%);border-color:transparent;color:#fff;box-shadow:0 16px 32px -12px rgba(26,99,214,.75);}
.btn-ink{background:var(--ink);border-color:var(--ink);}
.btn-ghost-d{border-color:rgba(255,255,255,.32);}
.btn-ghost-d:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);}

/* type accents */
.eye{color:var(--blue-ink);}
.eye::before,.eye::after{opacity:.65;}
h2 .ser,.show-say h3 .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lede{color:#4b5468;}

/* hero: a soft glow behind the headline, the instrument floating on it */
.hero{
  background:
    radial-gradient(900px 520px at 12% -10%,rgba(64,222,223,.22),transparent 62%),
    radial-gradient(900px 560px at 88% -5%,rgba(88,8,200,.14),transparent 60%),
    radial-gradient(700px 400px at 50% 40%,rgba(26,115,232,.08),transparent 65%),
    linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);
  border-bottom:0;
}
.hero h1{font-weight:800;}
.hero-note{color:var(--muted-2);}
.inst{border-radius:28px;border-color:#dfe5f1;box-shadow:0 50px 110px rgba(26,52,120,.16),0 6px 18px rgba(16,24,40,.05);}
.inst::before{height:4px;}
.egs,.try-note{background:#f6f8fd;}
.egs button{border-radius:999px;background:#fff;border:1px solid var(--line);}
.egs button:hover{border-color:var(--blue);color:var(--blue-ink);}
.idle-line .m{color:#b7c0d3;}

/* the moving strip */
.strip{background:var(--signal);padding:15px 0;}
.track span{color:rgba(255,255,255,.95);font-weight:650;}
.track span b{color:#fff;}
.track span i{background:#fff !important;box-shadow:0 0 0 3px rgba(255,255,255,.3);}

/* dark sections: night navy with the logo's colours glowing in it */
.flow{
  background:
    radial-gradient(900px 560px at 15% 10%,rgba(24,152,216,.28),transparent 60%),
    radial-gradient(800px 560px at 88% 90%,rgba(88,8,200,.34),transparent 60%),
    #0b1030;
}
.fl-canvas{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);box-shadow:0 40px 100px rgba(0,0,0,.45);}
.fl-promises li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);}
.fl-promises li i{color:#6ff0f0;}

/* the three cards */
.agents{background:linear-gradient(180deg,#ffffff 0%,#f4f6fc 100%);}
.ag-card{border-radius:26px;border-color:#e3e8f2;box-shadow:var(--sh);}
.ag-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:#d7dfee;}
.ag-vis{background:radial-gradient(420px 220px at 25% 10%,rgba(64,222,223,.28),transparent 60%),radial-gradient(420px 260px at 90% 100%,rgba(88,8,200,.35),transparent 60%),linear-gradient(135deg,#101a4a 0%,#0b1030 100%);}
.t-bot{background:rgba(26,115,232,.1);color:#1557b0;}
.t-sam{background:rgba(21,128,61,.12);color:#15803d;}
.ag-say h3{letter-spacing:-.02em;}
.mw-row span.ok{color:#15803d;background:rgba(21,128,61,.14);}

/* clients */
.show{border-top-color:var(--line);}
.surface{border-radius:22px;box-shadow:var(--sh-lg);border-color:#e3e8f2;}
.s-top{background:#f6f8fd;}
.s-btns em.go{background:rgba(21,128,61,.12);color:#15803d;}
.chip.bad{background:rgba(192,57,43,.12);color:#c0392b;}

/* pricing */
.alt{background:linear-gradient(180deg,#f6f8fd 0%,#eef2fb 100%);}
.plan{border-radius:26px;background:#fff;border-color:#e3e8f2;box-shadow:var(--sh);transition:transform .35s var(--e),box-shadow .35s var(--e);}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.plan.mid{
  background:
    radial-gradient(520px 320px at 85% -10%,rgba(64,222,223,.38),transparent 60%),
    radial-gradient(520px 320px at 0% 110%,rgba(88,8,200,.5),transparent 60%),
    linear-gradient(160deg,#17257a 0%,#0b1030 100%);
  border-color:transparent;
}
.plan.mid .tag{background:#fff;color:var(--ink);}
.plan.mid .plan-go{background:#fff;border-color:#fff;color:var(--ink);}
.plan.mid .plan-go:hover{background:#eef2fb;}
.plan ul li::before{color:var(--blue);}
.cur{box-shadow:var(--sh-sm);border-color:#e3e8f2;}
.cur button[aria-pressed="true"]{background:var(--ink);color:#fff;}
.price-note b{color:var(--blue-ink);}

/* questions */
summary{font-size:18px;}
summary:hover{color:var(--blue-ink);}
details[open] summary{color:var(--blue-ink);}
details{border-color:var(--line);}

/* footer */
footer{
  background:
    radial-gradient(900px 520px at 8% 0%,rgba(24,152,216,.22),transparent 60%),
    radial-gradient(700px 420px at 95% 100%,rgba(88,8,200,.28),transparent 60%),
    #0b1030;
}
.fcta{border-bottom-color:rgba(255,255,255,.1);}
.fine{color:#8690b3;}
.stripe{height:4px;}

/* contact page */
.contact-hero{background:radial-gradient(800px 480px at 10% -10%,rgba(64,222,223,.2),transparent 60%),radial-gradient(800px 480px at 90% 0%,rgba(88,8,200,.12),transparent 60%),#fff;}
.c-ticks li::before{color:var(--blue);}

@media (prefers-reduced-motion:reduce){.ag-card:hover,.plan:hover{transform:none;}}

/* ==== light below the hero ==== */
.brand img{height:40px !important;}
footer .brand img{height:34px !important;}

/* how it works: four white step cards */
.flow.flow-light{background:linear-gradient(180deg,#ffffff 0%,#f4f7fd 100%);color:var(--text);padding:96px 0 90px;}
.flow.flow-light .head{margin-bottom:46px;}
.flow.flow-light .lede{color:#4b5468;}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:step;}
.steps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 28px;box-shadow:var(--sh);transition:transform .35s var(--e),box-shadow .35s var(--e);}
.steps li:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--signal);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;margin-bottom:18px;box-shadow:0 10px 20px -10px rgba(56,56,200,.6);}
.steps h3{font-size:18px;letter-spacing:-.018em;}
.steps p{margin-top:9px;color:var(--muted);font-size:14.4px;line-height:1.62;}
.flow.flow-light .fl-promises{margin-top:18px;}
.flow.flow-light .fl-promises li{background:#fff;border:1px solid var(--line);color:var(--text);box-shadow:var(--sh-sm);}
.flow.flow-light .fl-promises b{color:var(--text);}
.flow.flow-light .fl-promises i{color:#fff;background:var(--signal);width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;flex:0 0 auto;}
.flow.flow-light .fl-promises span{color:var(--muted);font-size:14px;line-height:1.55;}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.steps{grid-template-columns:1fr;}}

/* the three cards: pictures on a light tint */
.ag-vis{background:radial-gradient(360px 200px at 20% 10%,rgba(64,222,223,.22),transparent 60%),radial-gradient(360px 220px at 90% 100%,rgba(88,8,200,.14),transparent 60%),linear-gradient(135deg,#eef3ff 0%,#f6f2fc 100%);}
.ag-vis::before{display:none;}
.cw{box-shadow:0 22px 48px rgba(26,52,120,.16);}
.bw{box-shadow:0 22px 48px rgba(26,52,120,.16);}
.mw-row{background:#fff;border:1px solid #e3e8f2;box-shadow:0 3px 10px rgba(16,24,40,.05);}
.mw-row code{color:var(--text);}
.mw-row .ok{color:#15803d;background:rgba(21,128,61,.12);}
.mw-row .dim{color:var(--muted);background:#eef1f8;}
.mw-row.mw-hit{border-color:rgba(192,57,43,.45);}
.mw-scan{display:none;}
.cw-ch span{background:#fff;border:1px solid var(--line);color:var(--text);}

/* pricing: both plans white, the featured one with a gradient edge */
.plan.mid{background:linear-gradient(#fff,#fff) padding-box,var(--signal) border-box;border:2px solid transparent;color:var(--text);box-shadow:var(--sh-lg);}
.plan.mid .plan-for,.plan.mid .sub,.plan.mid li{color:var(--muted);}
.plan.mid .price span{opacity:.55;}
.plan.mid .tag{background:var(--signal);color:#fff;}
.plan.mid .plan-go{background:linear-gradient(135deg,#2f84ef 0%,#1a5fd0 100%);border-color:transparent;color:#fff;}
.plan.mid .plan-go:hover{background:linear-gradient(135deg,#2a78dc 0%,#1557b0 100%);}
.plan li::before{color:var(--blue);}
.tag{background:var(--signal);color:#fff;}

/* footer: light, with a gradient call-to-action card */
footer{background:#f4f7fd;color:var(--text);padding:60px 0 28px;}
.fcta{background:radial-gradient(600px 320px at 90% 0%,rgba(64,222,223,.35),transparent 60%),linear-gradient(135deg,#1a73e8 0%,#3838c8 55%,#5808c8 100%);color:#fff;border-radius:30px;padding:60px 56px;border-bottom:0;margin-bottom:54px;box-shadow:0 40px 90px -30px rgba(56,56,200,.55);}
.fcta h2{color:#fff;}
.fcta h2 .ser{background:none;-webkit-text-fill-color:#fff;color:#fff;}
.fcta p{color:rgba(255,255,255,.88);}
.fcta .btn-lime{background:#fff;color:var(--ink);box-shadow:0 12px 28px -12px rgba(0,0,0,.4);}
.fcta .btn-lime:hover{background:#eef2fb;color:var(--ink);}
.fcta .btn-ghost-d{border-color:rgba(255,255,255,.55);color:#fff;}
footer .say{color:var(--muted);}
footer h4{color:var(--text);}
footer .cols a{color:var(--muted);}
footer .cols a:hover{color:var(--blue-ink);}
.fine{color:var(--muted-2);border-top-color:var(--line);}
.fine a{color:var(--muted);}
@media (max-width:760px){.fcta{padding:40px 28px;border-radius:24px;}}

/* the light How-it-works heading was inheriting the dark section's white text */
.flow.flow-light h2{color:var(--text);}
.flow.flow-light .eye{color:var(--blue-ink);}
.flow.flow-light h3{color:var(--text);}

/* ==== flow chart ==== */
.chart{background:#fff;border:1px solid var(--line);border-radius:30px;padding:28px 28px 22px;box-shadow:var(--sh-lg);}
.chart-cols{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);font-weight:800;margin-bottom:16px;}
.chart-cols span:nth-child(2){grid-column:3;} .chart-cols span:nth-child(3){grid-column:5;} .chart-cols span:nth-child(4){grid-column:7;}
.lane{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;align-items:stretch;margin-bottom:16px;}
.lane:last-child{margin-bottom:0;}
.node{background:linear-gradient(180deg,#ffffff 0%,#f6f8fd 100%);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--sh-sm);transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e);}
.node:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:#cfd9ee;}
.node .ic{width:38px;height:38px;border-radius:12px;background:var(--signal);color:#fff;display:grid;place-items:center;margin-bottom:12px;box-shadow:0 10px 20px -10px rgba(56,56,200,.6);}
.node b{display:block;font-size:15px;font-weight:750;letter-spacing:-.015em;line-height:1.3;}
.node p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.5;}
.link{position:relative;align-self:center;height:2px;background:linear-gradient(90deg,#40dedf,#1898d8 40%,#5808c8);border-radius:2px;margin:0 2px;}
.link::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#1a73e8;box-shadow:0 0 0 4px rgba(26,115,232,.18);animation:dh-travel 2.4s linear infinite;}
.lane-2 .link::after{animation-delay:1.2s;}
.lane .link:nth-child(4)::after{animation-delay:.5s;} .lane .link:nth-child(6)::after{animation-delay:1s;}
@keyframes dh-travel{from{left:0;}to{left:calc(100% - 10px);}}
@media (max-width:940px){
  .chart-cols{display:none;}
  .lane{grid-template-columns:1fr;}
  .link{width:2px;height:28px;margin:0 auto;background:linear-gradient(180deg,#40dedf,#5808c8);}
  .link::after{left:-4px;top:0;animation-name:dh-travel-v;}
  @keyframes dh-travel-v{from{top:0;}to{top:calc(100% - 10px);}}
}
@media (prefers-reduced-motion:reduce){.link::after{animation:none;left:calc(50% - 5px);}}

/* ==== intro video ==== */
.intro{background:linear-gradient(180deg,#ffffff 0%,#f6f8fd 100%);padding:90px 0 80px;position:relative;overflow:hidden;}
.intro::before{content:"";position:absolute;right:-10%;top:10%;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(26,115,232,.16),rgba(88,8,200,.08) 45%,transparent 70%);pointer-events:none;}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px 64px;align-items:center;position:relative;}
.intro-say h2{font-size:clamp(30px,4.2vw,50px);}
.intro-say .lede{margin-top:18px;max-width:52ch;}
.intro-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;}
.intro-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#4b5468;line-height:1.5;}
.intro-points i{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12.5px;margin-top:1px;}
.intro-phone{display:flex;justify-content:center;}
.phone{position:relative;width:min(330px,100%);aspect-ratio:9/19.2;background:#0b1030;border-radius:46px;padding:12px;box-shadow:0 50px 110px rgba(26,52,120,.28),0 0 0 2px #1b2559,inset 0 0 0 2px rgba(255,255,255,.06);}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:999px;background:#0b1030;z-index:3;}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:36px;background:#000;}
.phone-play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 20px 44px rgba(16,24,40,.35);transition:transform .25s var(--e),opacity .25s var(--e);z-index:2;}
.phone-play svg{margin-left:4px;}
.phone-play:hover{transform:scale(1.06);}
.phone-play.hide{opacity:0;pointer-events:none;}
@media (max-width:900px){.intro{padding:64px 0 60px;}.intro-grid{grid-template-columns:1fr;}.intro-phone{order:-1;}.phone{width:min(280px,80vw);}}

/* ==== tablet frame for the video ==== */
.phone{width:min(470px,100%);aspect-ratio:3/4;border-radius:30px;padding:14px;background:#0b1030;box-shadow:0 50px 110px rgba(26,52,120,.28),0 0 0 2px #1b2559,inset 0 0 0 2px rgba(255,255,255,.06);overflow:hidden;}
.phone::before{top:auto;bottom:4px;left:50%;width:6px;height:6px;border-radius:50%;background:#2a3570;transform:translateX(-50%);}
.phone::after{content:"";position:absolute;inset:14px;border-radius:18px;background:url(/deskhand-intro-poster.jpg) center/cover;filter:blur(22px) brightness(.55) saturate(1.2);transform:scale(1.15);z-index:0;}
.phone video{position:relative;z-index:1;object-fit:contain;border-radius:18px;background:transparent;}
.intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (max-width:900px){.phone{width:min(420px,92vw);}}

/* ==== back to the phone frame ==== */
.phone{width:min(330px,100%);aspect-ratio:9/19.2;border-radius:46px;padding:12px;}
.phone::before{top:22px;bottom:auto;left:50%;width:96px;height:26px;border-radius:999px;background:#0b1030;transform:translateX(-50%);}
.phone::after{display:none;}
.phone video{object-fit:cover;border-radius:36px;background:#000;}
.intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
@media (max-width:900px){.phone{width:min(280px,80vw);}}