/* Daylight Studio — page layout.
   EVERY class here is dl- prefixed. The embedded app UI uses .nav .btn .side
   .row .main .hd .tabs and 29 other generic names; an unprefixed page rule
   restyles the real product and breaks its layout. Do not add bare classes. */

.dl-skip{position:absolute;left:-9999px}
.dl-skip:focus{left:16px;top:16px;z-index:99;background:var(--surface);padding:12px 16px;
  border-radius:var(--r-pill);box-shadow:var(--sh-2)}
.dl-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.dl-container--art{max-width:var(--container-art)}
.dl-section{padding-block:var(--section-pad)}
.dl-section--band{background:var(--band)}

.dl-eyebrow{font-size:var(--f-h6);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.2;margin:0 0 var(--s-4)}
.dl-display{font-size:var(--f-display);line-height:1;letter-spacing:-.035em;font-weight:500;margin:0;text-wrap:balance}
.dl-lead{font-size:var(--f-lead);line-height:1.5;letter-spacing:-.005em;color:var(--ink-2);max-width:60ch;margin:0}
.dl-small{font-size:var(--f-small);line-height:1.5;color:var(--muted)}
.dl-caption{font-size:var(--f-caption);line-height:1.4;letter-spacing:.01em;color:var(--muted);font-weight:500}

.dl-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5);align-items:end;margin-bottom:var(--s-8)}
.dl-head__t{grid-column:1/8}
.dl-head .dl-lead{grid-column:9/13}
@media (max-width:860px){.dl-head{grid-template-columns:1fr;gap:var(--s-4)}
  .dl-head__t,.dl-head .dl-lead{grid-column:1/-1}}

/* buttons — one pill system */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font:600 var(--f-button)/1 Karla,sans-serif;border-radius:var(--r-pill);border:0;cursor:pointer;
  text-decoration:none;min-height:44px;min-width:44px;padding:0 22px;
  transition:background var(--d-1) var(--ease-out),transform var(--d-1) var(--ease-out)}
.dl-btn--lg{min-height:52px;padding:0 28px}
.dl-btn--primary{background:var(--ink);color:#0b0b0c}
.dl-btn--primary:hover{background:#ffffff;transform:translateY(-1px)}
[data-theme="day"] .dl-btn--primary{background:#141414;color:#fff}
[data-theme="day"] .dl-btn--primary:hover{background:#2a2a2a}
.dl-btn--secondary{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.dl-btn--secondary:hover{background:var(--band)}

/* nav + mega menu */
.dl-nav{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--canvas) 85%,transparent);backdrop-filter:blur(12px)}
.dl-nav[data-scrolled="true"]{border-bottom:1px solid var(--line)}
.dl-nav .dl-container{display:flex;align-items:center;gap:var(--s-6);width:100%}
.dl-logo{display:block;width:78px;height:17px;text-indent:-9999px;overflow:hidden;background:var(--ink);
  -webkit-mask:url("/brand/wordmark.png") no-repeat left center/contain;
          mask:url("/brand/wordmark.png") no-repeat left center/contain}
.dl-logo:hover{opacity:.72}
.dl-navlinks{display:flex;gap:var(--s-5);margin-inline:auto;list-style:none;padding:0;margin-block:0;position:relative}
.dl-navlinks > li > a,.dl-navlinks > li > button{all:unset;cursor:pointer;font-size:var(--f-label);
  font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.dl-navlinks > li > a:hover,.dl-navlinks > li > button:hover{color:var(--ink)}
.dl-right{display:flex;align-items:center;gap:var(--s-4)}
.dl-login{font-size:var(--f-label);font-weight:600;color:var(--ink-2);text-decoration:none}
.dl-mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(760px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:var(--s-5);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  opacity:0;visibility:hidden;transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out)}
.dl-nav li:hover .dl-mega,.dl-nav li:focus-within .dl-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dl-mega a{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;align-items:flex-start}
.dl-mega a:hover{background:var(--band)}
.dl-mega .dl-mi{font-size:var(--f-label);font-weight:600;color:var(--ink);display:block}
.dl-mega .dl-md{font-size:var(--f-caption);color:var(--muted);display:block;margin-top:2px}
.dl-ico{width:20px;height:20px;flex:none;color:var(--accent);margin-top:1px}
@media (max-width:980px){.dl-navlinks{display:none}}

/* hero */
.dl-hero{padding-top:clamp(40px,6vw,88px);padding-bottom:0}
.dl-hero__head{max-width:900px;margin-inline:auto;text-align:center}
.dl-hero__head .dl-lead{margin-inline:auto;margin-top:var(--s-5)}
.dl-cta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-7)}
.dl-artwrap{margin-top:var(--s-8)}
@media (max-width:860px){.dl-hero{padding-top:var(--s-5)}.dl-artwrap{margin-top:var(--s-6)}}

/* the stage that floats real app UI on art */
.stage{position:absolute;inset:0;z-index:1}
.stage__web{position:absolute;left:5%;bottom:-8%;filter:drop-shadow(0 28px 60px rgb(20 18 14 / .22))}
.stage__web .brw{--k:.72}
.stage__phone{position:absolute;right:6%;bottom:-4%;filter:drop-shadow(0 22px 44px rgb(20 18 14 / .26))}
.stage__phone .iph{--s:.52}
.stage--solo .stage__web{left:6%;bottom:-9%}
.stage--solo .stage__web .brw{--k:.56}
.stage--phone{display:grid;place-items:center}
.stage--phone .stage__phone{position:relative;right:auto;bottom:auto}
.stage--phone .stage__phone .iph{--s:.52}
.stage--trio{display:flex;gap:18px;align-items:flex-end;justify-content:center;padding-top:8%}
.stage--trio .stage__phone{position:relative;right:auto;bottom:auto}
.stage--trio .stage__phone .iph{--s:.34}
.stage--trio .stage__phone:nth-child(2) .iph{--s:.40}
@media (max-width:1100px){.stage__web .brw{--k:.56}.stage--solo .stage__web .brw{--k:.44}.stage__phone .iph{--s:.42}}
@media (max-width:860px){.stage__web{left:5%;bottom:-6%}.stage__web .brw{--k:.30}
  .stage--solo .stage__web .brw{--k:.28}.stage__phone{right:3%}.stage__phone .iph{--s:.24}
  .stage--phone .stage__phone .iph{--s:.42}.stage--trio .stage__phone .iph{--s:.22}}
@media (max-width:520px){.stage__web .brw{--k:.22}.stage--solo .stage__web .brw{--k:.21}.stage__phone .iph{--s:.19}}

/* the app's native dark UI needs no recolouring now; just seat it on the art */
.stage .brw-w{background:#0b0b0c}
.stage .brw-v{background:#000}

/* module index */
.dl-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.dl-mod{display:block;padding:var(--s-5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);text-decoration:none;transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out)}
.dl-mod:hover{transform:translateY(-2px);border-color:var(--line-strong);background:#202024}
.dl-mod h3{font-size:var(--f-h4);margin:var(--s-3) 0 4px}
.dl-mod p{font-size:var(--f-small);color:var(--muted);margin:0}
@media (max-width:1100px){.dl-mods{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.dl-mods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.dl-mods{grid-template-columns:1fr}}

/* tabbed workflow */
.dl-flow{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.dl-tablist{display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.dl-tab{all:unset;display:block;cursor:pointer;padding:var(--s-4) var(--s-5);
  border-left:2px solid var(--line);transition:border-color var(--d-2) var(--ease-out)}
.dl-tab[aria-selected="true"]{border-left-color:var(--accent)}
.dl-tab__n{font-size:var(--f-h4);font-weight:500;color:var(--muted-2);letter-spacing:-.01em;display:block}
.dl-tab[aria-selected="true"] .dl-tab__n{color:var(--ink)}
.dl-tab__d{font-size:var(--f-small);color:var(--muted);margin-top:var(--s-2);display:none;max-width:38ch}
.dl-tab[aria-selected="true"] .dl-tab__d{display:block}
.dl-panels{position:relative}
.dl-panel{--art-ratio:4/3;display:none}
.dl-panel[data-active="true"]{display:block;animation:dlFade 320ms var(--ease-out) both}
@keyframes dlFade{from{opacity:0}to{opacity:1}}
@media (max-width:860px){.dl-flow{grid-template-columns:1fr}.dl-panel{--art-ratio:1/1}}

/* masonry art tiles */
.dl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.dl-tile{position:relative}
.dl-tile .art{--art-ratio:5/4}
.dl-tile--tall .art{--art-ratio:1/1}
.dl-tile h3{font-size:var(--f-h4);margin:var(--s-4) 0 4px}
.dl-tile p{font-size:var(--f-small);color:var(--muted);margin:0;max-width:46ch}
@media (max-width:780px){.dl-tiles{grid-template-columns:1fr}}

/* night chapter */
.dl-night{background:var(--canvas);color:var(--ink)}
.dl-section--band{background:var(--band)}
.dl-night .dl-eyebrow{color:var(--muted-2)}

/* replaces */
.dl-repl{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;max-width:720px;margin:0 auto var(--s-7)}
.dl-chip{font-size:var(--f-label);font-weight:600;padding:10px 18px;border-radius:var(--r-pill);
  background:var(--band);color:var(--muted);border:1px solid var(--line)}
.dl-chip--out{text-decoration:line-through;opacity:.55}
.dl-one{display:grid;place-items:center;gap:var(--s-3);text-align:center}

/* pricing */
.dl-prices{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);align-items:stretch}
.dl-price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.dl-price--feat{background:var(--ink);color:#141414;border-color:var(--ink)}
.dl-price--feat .dl-small,.dl-price--feat .dl-caption{color:#4a4741}
.dl-price--feat h3,.dl-price--feat .dl-num{color:#141414}
.dl-price h3{font-size:var(--f-h5);font-weight:600}

.dl-num{font-size:var(--f-num);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.dl-price .dl-btn{margin-top:auto}
@media (max-width:1100px){.dl-prices{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.dl-prices{grid-template-columns:1fr}}

/* faq */
.dl-faq{max-width:820px;margin-inline:auto}
.dl-faq details{border-bottom:1px solid var(--line)}
.dl-faq summary{cursor:pointer;list-style:none;padding:var(--s-5) 0;font-size:var(--f-h5);
  font-weight:600;display:flex;justify-content:space-between;gap:var(--s-4);min-height:44px;align-items:center}
.dl-faq summary::-webkit-details-marker{display:none}
.dl-faq summary::after{content:"+";color:var(--muted-2);font-weight:400;font-size:22px}
.dl-faq details[open] summary::after{content:"–"}
.dl-faq p{padding:0 0 var(--s-5);color:var(--ink-2);max-width:68ch}

/* footer */
.dl-foot{position:relative;overflow:hidden;background:var(--band);border-top:1px solid var(--line);padding-block:var(--s-9) var(--s-7)}
.dl-foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);position:relative;z-index:1}
.dl-foot h4{font-size:var(--f-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:var(--s-3)}
.dl-foot a{display:block;font-size:var(--f-small);color:var(--ink-2);text-decoration:none;padding:5px 0}
.dl-foot a:hover{color:var(--ink)}
.dl-wordmark{position:relative;z-index:1;margin-top:var(--s-8);height:clamp(56px,11vw,132px);
  background:var(--ink);opacity:.10;
  -webkit-mask:url("/brand/wordmark.png") no-repeat center/contain;
          mask:url("/brand/wordmark.png") no-repeat center/contain}
@media (max-width:780px){.dl-foot__grid{grid-template-columns:repeat(2,1fr)}}

/* reveal + misc */
/* Reveals only hide when JS is confirmed alive (html.dl-js, set inline in
   <head>), and mmSafe-style keyframes un-hide everything after 2.4s even if
   the observer never fires. Content must never depend on JS to be visible. */
@keyframes dlSafe{to{opacity:1;transform:none}}
.dl-rev{opacity:1;transform:none;
  transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out)}
html.dl-js .dl-rev:not(.is-in){opacity:0;transform:translateY(16px);
  animation:dlSafe 0s 2.4s forwards}
html.dl-js .dl-rev.is-in{opacity:1;transform:none;animation:none}
html.dl-nojs .dl-rev{opacity:1!important;transform:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  html.dl-js .dl-rev:not(.is-in){opacity:1;transform:none;animation:none}}
.dl-note{border-top:1px solid var(--line);margin-top:var(--s-9);padding-top:var(--s-5)}
.dl-motion{all:unset;cursor:pointer;font-size:var(--f-caption);font-weight:600;color:var(--muted-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;min-height:44px;
  display:inline-flex;align-items:center}

/* the ported flow animation: centre it and give it room */
/* block, not flex: .fin resolves max-width:560px + cqw against a real width */
.dl-flowfx{display:block;width:100%;padding-block:clamp(16px,3vw,40px)}
.dl-flowfx .flow{width:100%;margin-inline:auto}

/* less dead air: the product fills more of every panel */
.art{--art-ratio:16/10}
.dl-panel{--art-ratio:16/11}
.stage--solo .stage__web .brw{--k:.62}
.stage--solo .stage__web{left:5%;right:5%;bottom:-10%}
.stage--phone .stage__phone .iph{--s:.62}
.stage--trio{gap:26px;padding-top:5%}
.stage--trio .stage__phone .iph{--s:.40}
.stage--trio .stage__phone:nth-child(2) .iph{--s:.47}
@media (max-width:1100px){.stage--solo .stage__web .brw{--k:.48}}
@media (max-width:860px){.stage--solo .stage__web .brw{--k:.30}.dl-panel{--art-ratio:4/3}}

/* "replaces": chips collapse into one MORR tile on scroll.
   Scroll-driven where supported; the static fallback is the struck-through
   row, which is what prefers-reduced-motion keeps. */
.dl-repl{perspective:800px}
.dl-chip{transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out),
  filter var(--d-3) var(--ease-out)}
.dl-repl.is-collapsed .dl-chip{opacity:0;filter:blur(3px);
  transform:translate(var(--dx,0),var(--dy,0)) scale(.72)}
.dl-one__tile{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);
  opacity:0;transform:scale(.94);transition:opacity var(--d-3) var(--ease-out) 160ms,transform var(--d-3) var(--ease-out) 160ms}
.dl-repl.is-collapsed ~ .dl-one__tile{opacity:1;transform:none}
.dl-one__mark{width:62px;height:14px;background:var(--ink);
  -webkit-mask:url("/brand/wordmark.png") no-repeat center/contain;
          mask:url("/brand/wordmark.png") no-repeat center/contain}
.dl-one__tile span{font-size:var(--f-label);font-weight:600;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .dl-repl.is-collapsed .dl-chip{opacity:1;filter:none;transform:none}
  .dl-one__tile{opacity:1;transform:none}
}

/* Panels that carry TEXT must size to their content. A fixed aspect-ratio
   plus overflow:hidden clipped the CTA copy. Text panels get a min-height
   and real padding instead; only product-shot panels keep a ratio. */
.art--text{aspect-ratio:auto!important;min-height:clamp(320px,32vw,460px);
  display:grid;place-items:center;padding:clamp(48px,6vw,88px) var(--s-6)}
.art--text > .dl-ctain{position:static;display:block;text-align:center;max-width:720px}
.art--text h2{max-width:18ch;margin-inline:auto}
.art--text .dl-lead{margin:var(--s-5) auto 0;max-width:46ch}
.art--text .dl-cta{margin-top:var(--s-6)}

/* ---- brand lockup: wordmark + product name ---- */
.dl-brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:var(--s-5)}
.dl-brand .dl-logo{margin:0}
.dl-brand__p{font-size:var(--f-label);font-weight:600;color:var(--muted);letter-spacing:.01em;
  padding-left:10px;border-left:1px solid var(--line);line-height:1}

/* ---- hamburger + mobile menu ---- */
.dl-burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;
  align-items:center;justify-content:center;border-radius:var(--r-sm);margin-left:auto}
.dl-burger:hover{background:var(--band)}
.dl-burger i{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;
  transition:transform var(--d-2) var(--ease-out),opacity var(--d-2) var(--ease-out)}
.dl-burger i::before,.dl-burger i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;
  background:var(--ink);transition:transform var(--d-2) var(--ease-out)}
.dl-burger i::before{top:-6px} .dl-burger i::after{top:6px}
.dl-burger[aria-expanded="true"] i{background:transparent}
.dl-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.dl-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

.dl-mobile{position:fixed;inset:64px 0 0;z-index:39;background:var(--canvas);
  padding:var(--s-6) var(--gutter) var(--s-9);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out),visibility var(--d-2)}
.dl-mobile[data-open="true"]{opacity:1;visibility:visible;transform:none}
.dl-mobile h4{font-size:var(--f-caption);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-2);margin:var(--s-5) 0 var(--s-3)}
.dl-mobile a{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:44px;
  font-size:var(--f-h5);font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.dl-mobile a .dl-ico{color:var(--accent)}
.dl-mobile .dl-mdsc{display:block;font-size:var(--f-caption);color:var(--muted);font-weight:400;margin-top:2px}
.dl-mobile .dl-btn{width:100%;margin-top:var(--s-6)}
html[data-menu="open"]{overflow:hidden}

@media (max-width:980px){
  .dl-burger{display:flex}
  .dl-right .dl-login{display:none}
  .dl-brand__p{display:inline}
}
@media (min-width:981px){ .dl-mobile{display:none} }
@media (max-width:420px){ .dl-right .dl-btn{display:none} }

/* ---- framing: anchor the product at the TOP so its header and chrome always
   show, and let it bleed off the bottom/right edge only. Scale is set per
   panel by page.js (fitStages), so every width frames the same way. */
.stage__web{top:12%;bottom:auto}
.stage--solo .stage__web{top:9%;left:7%;right:auto;bottom:auto}
.stage__phone{top:auto;bottom:-6%}
.stage--phone .stage__phone,.stage--trio .stage__phone{bottom:auto}
.stage--phone{align-items:start;padding-top:7%}
.stage--trio{align-items:flex-start;padding-top:7%}

/* ---- real App Store screenshots ---- */
.dl-store{display:block;width:100%;height:auto;border-radius:22px;
  box-shadow:0 0 0 1px rgb(255 255 255 / .07),0 30px 70px -20px rgb(0 0 0 / .8)}
.stage--store{display:flex;gap:clamp(12px,2vw,26px);align-items:flex-start;justify-content:center;
  padding:6% 6% 0}
.stage--store .dl-store{width:clamp(120px,22%,260px)}
.stage--store .dl-store:nth-child(2){transform:translateY(-4%)}
.dl-shelf{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--gutter) 22px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:none}
.dl-shelf::-webkit-scrollbar{display:none}
.dl-shelf__i{flex:0 0 clamp(200px,22vw,270px);scroll-snap-align:start}

/* the flow is the signature animation; it should own its section, not sit
   at 560px in the middle of a 1200px frame. It is sized in cqw, so widening
   .fin scales every part of it in proportion. */
.dl-flowfx .flow{padding:clamp(28px,4vw,56px) clamp(12px,3vw,40px)}

/* ---- hero entrance (prompt §10): panel settles 0.98 -> 1, the UI rises 24px */
@keyframes dlPanelIn{from{transform:scale(.98);opacity:.0}to{transform:none;opacity:1}}
@keyframes dlUiIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html.dl-js .art--hero{animation:dlPanelIn var(--d-4) var(--ease-out) both}
html.dl-js .art--hero .stage__web{animation:dlUiIn var(--d-4) var(--ease-out) 120ms both}
html.dl-js .art--hero .stage__phone{animation:dlUiIn var(--d-4) var(--ease-out) 260ms both}

/* ---- live planner demo on the real Studio screen ---- */
.dl-livegrid > div{transition:transform 480ms var(--ease-out);will-change:transform}
.dl-ask{position:absolute;z-index:4;left:9%;bottom:12%;display:flex;align-items:center;gap:12px;
  padding:12px 14px 12px 16px;border-radius:999px;background:rgb(20 20 22 / .92);
  border:1px solid rgb(255 255 255 / .10);box-shadow:0 18px 40px -12px rgb(0 0 0 / .7);
  backdrop-filter:blur(10px);color:#f5f4f0;font:500 14px/1.2 Karla,sans-serif;
  opacity:0;transform:translateY(10px);transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
  max-width:min(440px,82%)}
.dl-ask[data-on="true"]{opacity:1;transform:none}
.dl-ask__dot{width:8px;height:8px;border-radius:50%;background:#8d86e0;flex:none;
  box-shadow:0 0 0 4px rgb(141 134 224 / .22)}
.dl-ask__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-ask__undo{all:unset;cursor:pointer;margin-left:4px;font-size:13px;font-weight:600;color:#0b0b0c;
  background:#f5f4f0;border-radius:999px;padding:6px 12px;flex:none}
.dl-ask__undo:hover{background:#fff}
@media (max-width:640px){.dl-ask{left:5%;bottom:8%;font-size:12px;padding:9px 10px 9px 12px}}

/* ---- footer: the one giant Grid-of-Light field (prompt §6) ---- */
.dl-foot::before{content:"";position:absolute;inset:auto 0 0 0;height:min(60vw,520px);pointer-events:none;
  background:
   radial-gradient(60% 70% at 50% 100%, rgb(141 134 224 / .16), transparent 70%),
   linear-gradient(90deg, transparent calc(33.33% - 1px), rgb(255 255 255 / .05) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgb(255 255 255 / .05) 66.66%, transparent calc(66.66% + 1px)),
   linear-gradient(180deg, transparent calc(33.33% - 1px), rgb(255 255 255 / .05) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgb(255 255 255 / .05) 66.66%, transparent calc(66.66% + 1px));
  -webkit-mask:linear-gradient(180deg,transparent,#000 45%);mask:linear-gradient(180deg,transparent,#000 45%)}
.dl-mega__all{grid-column:1/-1;justify-content:flex-end;font-size:var(--f-label);font-weight:600;
  color:var(--accent-ink)!important;border-top:1px solid var(--line);margin-top:6px;padding-top:14px!important}

/* centred heading blocks: every child box is centred, not just its text.
   p{max-width:68ch} otherwise leaves the eyebrow's box hugging the left. */
.dl-hero__head > *{margin-inline:auto}
.dl-hero__head .dl-eyebrow{max-width:none}
.dl-one > *{margin-inline:auto;text-align:center}
.art--text .dl-ctain > *{margin-inline:auto}
.dl-foot__grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.dl-foot__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.dl-foot__grid{grid-template-columns:repeat(2,1fr)}}

/* Hero can never be wider than the screen, in any engine. The size tracks
   the viewport directly, the box is pinned to 100%, and long words may wrap.
   (Safari before 16 ignores overflow-x:clip, so hidden comes first.) */
body{overflow-x:hidden;overflow-x:clip}
.dl-hero__head{max-width:min(900px,100%);width:100%}
.dl-hero__head > *{max-width:100%}
.dl-display{font-size:clamp(36px,8vw,88px);width:100%;overflow-wrap:break-word;text-wrap:wrap}
@supports (text-wrap:balance){.dl-display{text-wrap:balance}}
.dl-hero__head .dl-lead{max-width:min(60ch,100%)}

/* match unum's restraint: display at 64 max, near-normal tracking, calmer lead */
.dl-display{font-size:var(--f-display)!important;line-height:1.08;letter-spacing:-.015em}
.dl-lead{line-height:1.55;letter-spacing:0}
.dl-hero{padding-top:clamp(48px,6vw,96px)}
.dl-head{margin-bottom:clamp(36px,4vw,56px)}
.dl-ts__t{font-size:clamp(17px,1rem + .2vw,20px)}

/* ---- spacing: a hero's buttons never sit on the next section ---- */
.dl-hero{padding-bottom:clamp(64px,7vw,112px)}
.dl-hero:has(.dl-herox){padding-bottom:clamp(56px,6vw,96px)}

/* ---- hero: the real web app with the real phone in front ---- */
.dl-herox{position:relative;max-width:1180px;margin:clamp(44px,6vw,80px) auto 0;padding-right:clamp(48px,9vw,140px)}
.dl-herox::before{content:"";position:absolute;inset:8% 6% -6% 2%;z-index:-1;filter:blur(60px);opacity:.55;
  background:radial-gradient(60% 60% at 30% 40%,rgb(141 134 224 / .35),transparent 70%),radial-gradient(50% 50% at 80% 70%,rgb(214 160 96 / .22),transparent 70%)}
.dl-herox__win{border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgb(255 255 255 / .1),0 50px 120px -40px rgb(0 0 0 / .9)}
.dl-herox__win img,.dl-herox__ph img{display:block;width:100%;height:auto}
.dl-herox__ph{position:absolute;right:0;bottom:-7%;width:clamp(150px,23%,270px);border-radius:clamp(26px,3.4vw,44px);padding:clamp(5px,.6vw,8px);
  background:#050505;box-shadow:0 0 0 1px #2c2c2e,0 40px 90px -20px rgb(0 0 0 / .9)}
.dl-herox__ph img{border-radius:clamp(21px,2.9vw,37px)}
@media (max-width:700px){
  .dl-herox{padding-right:16%;margin-top:36px}
  .dl-herox__win{border-radius:9px}
  .dl-herox__ph{width:38%;bottom:-12%}
  .dl-hero:has(.dl-herox){padding-bottom:88px}
}

/* ---- cine: the motion piece, full bleed, copy over its dark side ---- */
.dl-cine{position:relative;overflow:hidden;background:#000;min-height:clamp(540px,50vw,820px);display:grid;align-items:center}
.dl-cine__media{position:absolute;inset:0}
.dl-cine__media video{width:100%;height:100%;object-fit:cover;object-position:68% center;display:block}
.dl-cine__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgb(0 0 0 / .82) 30%,rgb(0 0 0 / 0) 60%),
             linear-gradient(180deg,var(--canvas) 0%,rgb(0 0 0 / 0) 16%,rgb(0 0 0 / 0) 84%,var(--canvas) 100%)}
.dl-cine__copy{position:relative;z-index:2;padding-block:var(--section-pad)}
.dl-cine__copy h2{font-size:var(--f-h2);line-height:1.04;letter-spacing:-.03em;max-width:12ch;margin-top:var(--s-3)}
.dl-cine__copy .dl-lead{max-width:40ch;margin-top:var(--s-5)}
.dl-cta--start{justify-content:flex-start}
@media (max-width:760px){
  .dl-cine{display:flex;flex-direction:column;min-height:0}
  .dl-cine__copy{order:1;padding-bottom:0;text-align:center}
  .dl-cine__copy h2,.dl-cine__copy .dl-lead{margin-inline:auto}
  .dl-cta--start{justify-content:center}
  .dl-cine__media{position:relative;order:2;inset:auto;margin-top:8px}
  .dl-cine__media video{height:auto;aspect-ratio:4/5;object-position:88% center}
  .dl-cine__media::after{background:linear-gradient(180deg,#000 0%,rgb(0 0 0 / 0) 18%,rgb(0 0 0 / 0) 82%,var(--canvas) 100%)}
}

/* ---- no lonely words ---- */
h1,h2,h3,h4,.dl-display{text-wrap:balance}
p,li,.dl-lead,.dl-ts__d > span,.dl-ts__t,.dl-four__c p,.dl-tcard p,.dl-caption{text-wrap:pretty}
.dl-cine__copy{width:100%;justify-self:stretch;box-sizing:border-box}
.dl-cine__copy .dl-lead{max-width:34ch}
@media (min-width:761px){.dl-cine__media video{object-position:75% center}}

/* ---- Product menu: no flicker crossing the gap, no snap shut ---- */
.dl-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dl-mega{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s;will-change:opacity,transform}
.dl-nav li:hover .dl-mega,.dl-nav li:focus-within .dl-mega{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s}
.dl-navlinks > li{position:static}

/* ---- mobile hero: the phone sits on the window, clear of the buttons ---- */
@media (max-width:700px){
  .dl-herox__ph{width:31%;top:24%;bottom:auto}
  .dl-hero:has(.dl-herox){padding-bottom:104px}
}

/* ---- phones: the whole desk picture, as big as the screen allows ---- */
@media (max-width:700px){
  .dl-ts__panel:has(.dm-win){padding:8px;min-height:0}
  .dm-win{border-radius:8px}
  .dl-split .dm-win,.dl-rev > .dm-shot .dm-win{border-radius:8px}
}

/* ---- cine: no seam, the page black eases into the video black and back ---- */
.dl-cine{background:linear-gradient(180deg,var(--canvas) 0%,#000 20%,#000 80%,var(--canvas) 100%)}
.dl-cine__media::after{
  background:linear-gradient(90deg,#000 0%,rgb(0 0 0 / .82) 30%,rgb(0 0 0 / 0) 60%),
             linear-gradient(180deg,var(--canvas) 0%,rgb(0 0 0 / 0) 22%,rgb(0 0 0 / 0) 78%,var(--canvas) 100%)}
@media (max-width:760px){
  .dl-cine{background:linear-gradient(180deg,var(--canvas) 0%,#000 30%,#000 100%)}
  .dl-cine__media::after{background:linear-gradient(180deg,#000 0%,rgb(0 0 0 / 0) 20%,rgb(0 0 0 / 0) 72%,var(--canvas) 100%)}
}
@media (min-width:761px){
  .dl-cine__media::after{
    background:linear-gradient(180deg,var(--canvas) 0%,rgb(11 11 12 / 0) 24%,rgb(11 11 12 / 0) 76%,var(--canvas) 100%),
               linear-gradient(90deg,#000 0%,rgb(0 0 0 / .82) 30%,rgb(0 0 0 / 0) 60%)}
}

/* ---- mobile menu ---- */
.dl-mobile a.dl-btn{border-bottom:0;justify-content:center;font-size:var(--f-label);font-weight:600;color:#0b0b0c;min-height:52px;padding:0 24px}
.dl-mobile a > span{display:block}
.dl-mobile h4:first-child{margin-top:0}
/* "Instead of": the chips always show, crossed out, above the MORR tile */
.dl-repl .dl-chip{opacity:1!important;transform:none!important}
.dl-repl .dl-chip.dl-chip--out{opacity:.55!important;filter:none!important}
.dl-one__tile{opacity:1!important;transform:none!important}
.dl-repl{justify-content:center}
section[id],[id="main"]{scroll-margin-top:72px}

/* ---- mobile menu: groups that open and close ---- */
.dl-mobile{padding-top:var(--s-4)}
.dl-mobile .dl-mhead{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 0;min-height:56px;cursor:pointer;border-bottom:1px solid var(--line);
  font-size:var(--f-h5);font-weight:500;color:var(--ink);-webkit-tap-highlight-color:transparent}
.dl-mobile .dl-mhead:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.dl-mobile .dl-mhead .dl-ico{color:var(--accent);flex:none}
.dl-mobile .dl-mhead > span{display:block;flex:1;min-width:0}
.dl-chev{flex:none;color:var(--muted);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.dl-mgroup[data-open="true"] .dl-chev{transform:rotate(180deg);color:var(--ink)}
.dl-mbody{display:grid;grid-template-rows:1fr}
.dl-js .dl-mbody{grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.dl-js .dl-mgroup[data-open="true"] .dl-mbody{grid-template-rows:1fr}
.dl-mbody > div{overflow:hidden;min-height:0}
.dl-mbody a{padding-left:32px;font-size:var(--f-body);min-height:52px}
.dl-mbody a .dl-ico{width:18px;height:18px}
.dl-mbody a{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.dl-mgroup[data-open="true"] .dl-mbody a{opacity:1;transform:none}
html:not(.dl-js) .dl-mbody a{opacity:1;transform:none}
/* the rows ease in as the menu opens */
.dl-mobile > *{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.dl-mobile[data-open="true"] > *{opacity:1;transform:none}
.dl-mobile[data-open="true"] > *:nth-child(1){transition-delay:.04s}
.dl-mobile[data-open="true"] > *:nth-child(2){transition-delay:.08s}
.dl-mobile[data-open="true"] > *:nth-child(3){transition-delay:.12s}
.dl-mobile[data-open="true"] > *:nth-child(4){transition-delay:.16s}
.dl-mobile[data-open="true"] > *:nth-child(5){transition-delay:.2s}
.dl-mobile[data-open="true"] > *:nth-child(6){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.dl-mobile > *,.dl-mbody a,.dl-js .dl-mbody{transition:none}}

/* ---- lockup: MORR goes home, Cloud goes to Cloud ---- */
.dl-brand a{text-decoration:none;display:flex;align-items:center}
.dl-brand__p{color:var(--muted)}
.dl-brand__p:hover{color:var(--ink)}
/* one menu everywhere: same close button and button as the main site's */
.dl-burger[aria-expanded="true"]{background:none}
.dl-mobile a.dl-btn{font-size:16px}
.dl-mobile{padding-left:20px;padding-right:20px}

/* ---- How it moves: four real screens, in order ---- */
.dl-steps{list-style:none;margin:var(--s-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);counter-reset:none}
.dl-step{position:relative;display:flex;flex-direction:column;gap:var(--s-4)}
.dl-step__shot{margin:0;border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgb(255 255 255 / .09),0 30px 70px -30px rgb(0 0 0 / .8);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.dl-step__shot img{display:block;width:100%;height:auto}
.dl-step:hover .dl-step__shot{transform:translateY(-4px)}
.dl-step__n{display:block;font-size:var(--f-caption);font-weight:600;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}
.dl-step__t h3{font-size:var(--f-h5);font-weight:500;margin:0}
.dl-step__t p{font-size:var(--f-small);color:var(--muted);margin:6px 0 0;max-width:34ch}
/* a hairline runs from one step to the next */
.dl-step:not(:last-child)::after{content:"";position:absolute;top:calc(37.5% * 1);right:calc(-1 * clamp(16px,1.6vw,24px));width:clamp(16px,1.6vw,24px);height:1px;
  background:linear-gradient(90deg,rgb(255 255 255 / .25),rgb(141 134 224 / .6))}
@media (max-width:1000px){.dl-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-7)} .dl-step::after{display:none}}
@media (max-width:560px){.dl-steps{grid-template-columns:1fr}}

/* ---- full-size view ---- */
.dl-zoomable{position:relative}
.dl-zoomable img{cursor:zoom-in}
.dl-zoom{all:unset;position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:999px;display:none;
  align-items:center;justify-content:center;cursor:pointer;color:#f5f4f0;background:rgb(11 11 12 / .72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgb(255 255 255 / .14)}
.dl-zoom svg{width:15px;height:15px}
.dl-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none),(max-width:900px){.dl-zoom{display:flex}}
.dl-lb{position:fixed;inset:0;z-index:100;background:rgb(5 5 6 / .94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;opacity:0;transition:opacity .25s ease}
.dl-lb[data-open="true"]{opacity:1}
.dl-lb[hidden]{display:none}
.dl-lb__x{all:unset;position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:999px;cursor:pointer;background:rgb(255 255 255 / .08)}
.dl-lb__x span{position:absolute;left:13px;top:21px;width:18px;height:1.6px;background:#f5f4f0}
.dl-lb__x span:first-child{transform:rotate(45deg)} .dl-lb__x span:last-child{transform:rotate(-45deg)}
.dl-lb__scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;place-items:center;padding:64px 24px 24px}
.dl-lb__scroll img{display:block;width:min(1600px,100%);height:auto;border-radius:10px;box-shadow:0 0 0 1px rgb(255 255 255 / .1)}
.dl-lb__hint{display:none;margin:0;padding:10px 0 calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:var(--f-caption);color:var(--muted)}
@media (max-width:700px){
  .dl-lb__scroll{place-items:start;padding:64px 16px 16px}
  .dl-lb__scroll img{width:960px;max-width:none}
  .dl-lb__hint{display:block}
}

/* ---- one bar: the main site's black and blur ---- */
.dl-nav{background:rgb(0 0 0 / .82);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
.dl-mobile .dl-msocial{display:flex;justify-content:center;gap:24px;margin-top:22px}
.dl-mobile .dl-msocial a{all:unset;cursor:pointer;color:rgb(255 255 255 / .5);font-size:13.5px;border:0;min-height:0;padding:0}
.dl-mobile .dl-msocial a:hover{color:#fff}

/* ---- breathing room around every product picture ---- */
.dl-ts__panel:has(.dm-win){padding:clamp(28px,3.6vw,52px)}
@media (max-width:700px){ .dl-ts__panel:has(.dm-win){padding:18px} }
.dl-ts__panel:has(.dm-ph:not(.dm-only-m)){padding:clamp(28px,3.6vw,48px) 18px}
.dl-herox__win .dl-zoom{right:auto;left:10px}