/* ML OnDemand: Join the waitlist landing page, 23 September 2026.
   A product sub-brand page on the Maguire Legal system: own header and footer (templates/partials/ondemand-*.html),
   an illustrative product preview, a positioning strip, scroll-linked steps, the spectrum and the waitlist form.
   Colours, type, buttons, rules and motion timings come from the shared tokens; new geometry is local to this file. */
body[data-page=ondemand]{--page-top:78px}
body[data-page=ondemand]:not(.page-motion){background:var(--ml-color-ink)}
.od-mini-label{margin:0;font:400 11px/16px var(--ml-font-body);letter-spacing:.88px;text-transform:uppercase;opacity:.7}

/* ---- Product header -------------------------------------------------------------------------- */
.od-header{position:fixed;inset:0 0 auto;z-index:100;color:#fff;border-bottom:.5px solid transparent;transition:background-color .35s,border-color .35s}
.od-header.is-scrolled{background:#060e15d9;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom-color:#ffffff1f}
.od-header-inner{display:flex;align-items:center;gap:60px;height:78px}
/* Client logo (29 Sep 2026): assets/icons/ml-on-demand-logo-white.svg, the reversed cut of ml-on-demand-logo.svg for the Ink header and footer.
   1 Oct 2026: the ™ versions (*-tm.svg, 1468 x 603) are used now that the logo is trademarked; the sign sits top right, after "Maguire Legal". */
.od-wordmark{display:inline-flex;align-items:center;color:inherit;text-decoration:none;flex-shrink:0}
.od-logo{display:block;width:auto;height:48px;aspect-ratio:1468/603}
.od-tile{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--ml-color-blue);color:var(--ml-color-ink);font:500 11px/1 var(--ml-font-body);letter-spacing:.06em}
.od-tile-sm{width:22px;height:22px;border-radius:5px;font-size:9px}
.od-nav{display:flex;gap:25px;margin-right:auto;font-size:14px;line-height:17px;letter-spacing:.42px}
.od-nav a{color:#ffffffb8;transition:color .3s}
.od-nav a:hover,.od-nav a:focus-visible{color:#fff}
.od-header-actions{display:flex;align-items:center;gap:30px}
.od-header .od-backed{padding-right:30px;border-right:.5px solid #ffffff33;transition:opacity .45s,visibility .45s,color .3s}
.od-header:not(.shows-backed) .od-backed{opacity:0;visibility:hidden}
.od-backed{display:inline-flex;align-items:center;gap:12px;color:#ffffffb8;text-decoration:none;transition:color .3s}
.od-backed-label{font:400 11px/16px var(--ml-font-body);letter-spacing:.88px;text-transform:uppercase}
.od-backed .logo{width:112px;height:23.5px}
.od-backed:hover,.od-backed:focus-visible{color:#fff}
.od-header .od-join{color:var(--ml-color-ink)}

/* ---- Hero: centred product statement over a quiet grid, with the preview rising below ---------- */
.od-hero{position:relative;overflow:hidden;padding:calc(var(--page-top) + 95px) 0 0;text-align:center}
.od-hero-field{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff0d .5px,transparent .5px),linear-gradient(90deg,#ffffff0d .5px,transparent .5px);background-size:60px 60px;background-position:center top;mask-image:radial-gradient(ellipse 60% 55% at 50% 42%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 42%,#000 25%,transparent 80%)}
.od-glow{position:absolute;left:50%;top:48%;width:980px;height:620px;margin:-310px 0 0 -490px;border-radius:50%;background:radial-gradient(closest-side,#79a9d02e,transparent);animation:od-drift 16s ease-in-out infinite alternate}
@keyframes od-drift{to{transform:translate3d(40px,-30px,0) scale(1.08)}}
.od-hero-copy{position:relative;display:flex;flex-direction:column;align-items:center}
.od-status{display:inline-flex;align-items:center;gap:12px;margin:0 0 35px;padding:7px 16px 7px 12px;border:.5px solid #ffffff40;border-radius:999px;font:400 12px/18px var(--ml-font-body);letter-spacing:.96px;text-transform:uppercase;color:#fff;background:#ffffff0a}
.od-status-rule{width:.5px;height:12px;background:#ffffff66}
.od-pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ml-color-blue)}
.od-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ml-color-blue);animation:od-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes od-pulse{from{transform:scale(.4);opacity:.9}to{transform:scale(1.8);opacity:0}}
.od-title{margin:0}
.od-title .line>span{white-space:nowrap}
.od-deck{max-width:560px;margin:30px 0 0}
.od-actions{justify-content:center;margin-top:40px}
.od-actions .ml-button-solid{color:var(--ml-color-ink)}
/* The page's one primary CTA runs a step above the shared 42px button (29 Sep 2026). Header and form buttons keep the shared sizes. */
.od-actions .ml-button{min-height:50px;padding:15px 28px;font-size:16px;line-height:19px}
.od-hero-backed{margin-top:30px}

/* Illustrative product preview. Alpha whites on Ink, a Paper document page; tilts flat as it scrolls in. */
.od-product-stage{position:relative;margin-top:80px;perspective:1600px}
.od-product{--od-tilt:0;transform:rotateX(calc(var(--od-tilt) * 16deg)) scale(calc(1 - var(--od-tilt) * .05)) translateY(calc(var(--od-tilt) * 20px));transform-origin:50% 0;will-change:transform}
.od-window{position:relative;max-width:1040px;margin:0 auto;border:.5px solid #ffffff33;border-bottom:0;border-radius:12px 12px 0 0;background:linear-gradient(#ffffff12,#ffffff05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -30px 120px #79a9d014,0 40px 120px #0009;text-align:left;overflow:hidden}
.od-window-bar{display:flex;align-items:center;gap:14px;height:50px;padding:0 20px;border-bottom:.5px solid #ffffff1f;font-size:13px;line-height:16px;color:#ffffffb8}
.od-crumbs{display:flex;align-items:center;gap:10px}
.od-crumbs i{width:4px;height:4px;border-radius:50%;background:#ffffff66}
.od-crumbs b{font-weight:400;color:#fff}
.od-window-state{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px}
.od-window-state i{width:6px;height:6px;border-radius:50%;background:var(--ml-color-blue)}
.od-window-body{display:grid;grid-template-columns:220px minmax(0,1fr) 250px;min-height:380px}
.od-rail,.od-side{padding:25px 20px;color:#ffffffb8}
.od-rail{border-right:.5px solid #ffffff1f}
.od-side{border-left:.5px solid #ffffff1f;display:flex;flex-direction:column;gap:18px}
.od-rail ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.od-rail li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-size:13px;line-height:16px}
.od-rail li i{width:14px;height:14px;border-radius:50%;border:.5px solid #ffffff66;flex-shrink:0;position:relative}
.od-rail li.is-done i{background:#ffffff33;border-color:transparent}
.od-rail li.is-done i::after,.od-check::after{content:"";position:absolute;left:4px;top:3.5px;width:5px;height:3px;border:1px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.od-rail li.is-current{background:#ffffff0f;color:#fff}
.od-rail li.is-current i{border-color:var(--ml-color-blue);box-shadow:inset 0 0 0 3px var(--ml-color-ink),inset 0 0 0 7px var(--ml-color-blue)}
.od-doc{padding:28px 32px 0;background:#ffffff05}
.od-page{height:100%;padding:30px 34px;border-radius:6px 6px 0 0;background:var(--ml-color-paper);color:var(--ml-color-ink)}
.od-page-kicker{margin:0;font-size:10px;line-height:14px;letter-spacing:.8px;text-transform:uppercase;color:var(--ml-color-meta)}
.od-page-title{margin:8px 0 22px;font:100 28px/1.1 var(--ml-font-display);letter-spacing:-.56px}
.od-page-lines,.od-v-lines{display:flex;flex-direction:column;gap:10px}
.od-page-lines i,.od-page-clause i,.od-v-lines i{display:block;height:6px;border-radius:3px;background:#060e1526;transform-origin:left;width:100%}
.od-page-lines i:nth-child(3n+2){width:86%}.od-page-lines i:nth-child(4n){width:64%}.od-page-lines i:nth-child(8){width:40%}
.od-page-clause{margin-top:22px;padding:14px 16px;border-radius:6px;background:#79a9d02b;box-shadow:inset 2px 0 var(--ml-color-blue);display:flex;flex-direction:column;gap:8px}
.od-page-clause span{font-size:10px;line-height:14px;letter-spacing:.8px;text-transform:uppercase}
.od-page-clause i:last-child{width:70%}
.od-answers{margin:0;display:flex;flex-direction:column}
.od-answers div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:.5px solid #ffffff1f;font-size:13px;line-height:16px}
.od-answers dt{color:#ffffff80}.od-answers dd{margin:0;color:#fff}
.od-review{position:relative;margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border:.5px solid #79a9d080;border-radius:8px;background:#79a9d01a}
.od-review p{margin:0;display:flex;flex-direction:column;font-size:12px;line-height:16px}
.od-review b{font-weight:500;color:#fff}
.od-check{position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;background:var(--ml-color-blue);flex-shrink:0}
.od-check::after{left:5px;top:5.5px;border-color:var(--ml-color-ink)}
.od-avatars{display:inline-flex}
.od-avatars img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1.5px solid var(--ml-color-ink)}
.od-avatars img+img{margin-left:-9px}
.od-preview-note{position:absolute;top:-28px;right:max(0px,calc((100% - 1040px) / 2));margin:0;font-size:11px;line-height:16px;letter-spacing:.88px;text-transform:uppercase;color:#ffffff66}
/* Preview loop (motion on only): the draft writes itself, the clause is flagged, then the lawyer review arrives. */
.page-motion .od-page-lines i{animation:od-write 9s cubic-bezier(.22,1,.36,1) infinite both}
.page-motion .od-page-lines i:nth-child(1){animation-delay:.1s}.page-motion .od-page-lines i:nth-child(2){animation-delay:.25s}.page-motion .od-page-lines i:nth-child(3){animation-delay:.4s}.page-motion .od-page-lines i:nth-child(4){animation-delay:.55s}.page-motion .od-page-lines i:nth-child(5){animation-delay:.7s}.page-motion .od-page-lines i:nth-child(6){animation-delay:.85s}.page-motion .od-page-lines i:nth-child(7){animation-delay:1s}.page-motion .od-page-lines i:nth-child(8){animation-delay:1.15s}
@keyframes od-write{0%{transform:scaleX(0);opacity:.4}14%{transform:scaleX(1);opacity:1}88%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.page-motion .od-page-clause{animation:od-flag 9s cubic-bezier(.22,1,.36,1) infinite both}
@keyframes od-flag{0%,24%{opacity:0;transform:translateY(8px)}32%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.page-motion .od-review{animation:od-arrive 9s cubic-bezier(.22,1,.36,1) infinite both}
@keyframes od-arrive{0%,40%{opacity:.25;transform:translateY(10px);border-color:#ffffff1f;background:#ffffff08}50%,90%{opacity:1;transform:none;border-color:#79a9d080;background:#79a9d01a}100%{opacity:.25}}
.page-motion .od-rail li:last-child{animation:od-next 9s ease infinite both}
@keyframes od-next{0%,44%{color:#ffffffb8;background:transparent}52%,90%{color:#fff;background:#ffffff0f}100%{color:#ffffffb8;background:transparent}}

/* ---- Positioning strip ------------------------------------------------------------------------- */
.od-strip{padding-block:70px 60px}
.od-strip .title-marquee>span{opacity:.5}
.od-strip .title-marquee i{border-color:var(--ml-color-blue);opacity:1}

/* ---- How it works: four steps on a scroll-linked track ----------------------------------------- */
.od-how-heading{max-width:760px;margin-bottom:70px}
.od-how-heading h2,.od-waitlist-intro h2,.od-statement,.od-title{text-wrap:balance}
.od-how-heading .ml-eyebrow{margin-bottom:20px}
.od-steps{--od-progress:0;position:relative}
.od-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.od-track{position:absolute;left:6px;top:5.5px;width:calc(75% + 15px);height:.5px;background:var(--ml-rule,#060e1533)}
.od-track-fill{position:absolute;inset:-.75px 0;background:var(--ml-color-ink);transform-origin:left;transform:scaleX(var(--od-progress))}
.page-motion .scroll-canvas .od-track-fill{background:var(--page-ink)}
.od-step{position:relative;display:flex;flex-direction:column;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.page-motion .od-step:not(.is-active){opacity:.38}
.od-step-dot{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;border:.5px solid currentColor;background:var(--ml-color-paper);transition:background-color .4s,border-color .4s}
.page-motion .scroll-canvas .od-step-dot{background:var(--page-bg)}
.od-step.is-active .od-step-dot,.page-motion .scroll-canvas .od-step.is-active .od-step-dot{background:var(--ml-color-blue);border-color:var(--ml-color-blue)}
.od-v{position:relative;height:210px;margin-top:30px;padding:20px;border-radius:10px;background:#fff;color:var(--ml-color-ink);box-shadow:0 0 0 .5px #060e151a,0 12px 40px #060e150a;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.od-step-copy{margin-top:30px}
.od-step-copy .row-index{display:block;margin-bottom:18px}
.od-step-copy h3{margin:0;font:400 20px/24px var(--ml-font-body);letter-spacing:-.2px}
.od-step-copy p{margin:12px 0 0;font-size:14px;line-height:21px;color:var(--ml-text-secondary);max-width:30ch}
/* Vignettes */
.od-v ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.od-v-choose li{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:6px;box-shadow:inset 0 0 0 .5px #060e1533;font-size:13px;line-height:16px;transition:background-color .5s,box-shadow .5s}
.od-v-choose li::after{content:"";width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px #060e1566}
.od-step.is-active .od-v-choose li.is-picked{background:#79a9d02b;box-shadow:inset 0 0 0 1px var(--ml-color-blue)}
.od-step.is-active .od-v-choose li.is-picked::after{background:var(--ml-color-ink);box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--ml-color-ink)}
.od-question{margin:0;font-size:15px;line-height:20px}
.od-pills{display:flex;gap:8px;flex-wrap:wrap}
.od-pills span{padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 .5px #060e1566;font-size:13px;line-height:16px;transition:background-color .5s,color .5s}
.od-step.is-active .od-pills .is-picked{background:var(--ml-color-ink);color:#fff}
.od-progress{margin-top:auto;height:3px;border-radius:2px;background:#060e151a;overflow:hidden}
.od-progress span{display:block;height:100%;width:38%;background:var(--ml-color-blue);transform-origin:left;transition:transform 1.2s cubic-bezier(.22,1,.36,1) .2s}
.page-motion .od-step:not(.is-active) .od-progress span{transform:scaleX(.55)}
.od-v-draft .od-v-lines{margin-top:6px}
.od-v-lines i:nth-child(2){width:88%}.od-v-lines i:nth-child(4){width:72%}.od-v-lines i:nth-child(5){width:46%}
.page-motion .od-step.is-active .od-v-lines i{animation:od-write-once 1.1s cubic-bezier(.22,1,.36,1) both}
.page-motion .od-step.is-active .od-v-lines i:nth-child(2){animation-delay:.12s}.page-motion .od-step.is-active .od-v-lines i:nth-child(3){animation-delay:.24s}.page-motion .od-step.is-active .od-v-lines i:nth-child(4){animation-delay:.36s}.page-motion .od-step.is-active .od-v-lines i:nth-child(5){animation-delay:.48s}
@keyframes od-write-once{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.od-v-draft::after{content:"";position:absolute;inset:auto 20px 20px;height:34px;border-radius:6px;background:linear-gradient(90deg,#79a9d000,#79a9d040,#79a9d000) 0 0/50% 100% no-repeat,#79a9d014}
.page-motion .od-step.is-active .od-v-draft::after{animation:od-sheen 2.4s linear infinite}
@keyframes od-sheen{from{background-position:-100% 0,0 0}to{background-position:200% 0,0 0}}
.od-v-lawyer .od-avatars img{width:40px;height:40px;border-color:#fff}
.od-v-lawyer .od-avatars img+img{margin-left:-12px}
.od-v-note{margin:0;font-size:13px;line-height:18px}
.od-chip{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#79a9d02b;box-shadow:inset 0 0 0 .5px var(--ml-color-blue);font-size:12px;line-height:16px;transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.od-chip i{width:6px;height:6px;border-radius:50%;background:var(--ml-color-ink)}
.page-motion .od-step:not(.is-active) .od-chip{opacity:0;transform:translateY(8px)}

/* ---- Key message: the statement and the spectrum ------------------------------------------------ */
.od-approach .ml-eyebrow{margin-bottom:30px}
.od-statement{margin:0;max-width:1100px;font:100 80px/1.02 var(--ml-font-display);letter-spacing:-1.6px}
.od-approach-grid{display:grid;grid-template-columns:386.67fr 713.33fr;gap:100px;margin-top:90px;align-items:start}
.od-approach-copy{margin:0;font-size:18px;line-height:1.5;font-weight:300;color:var(--ml-text-secondary);max-width:32ch}
.od-spectrum{--od-spot:0;margin:0}
.od-spectrum.is-placed{--od-spot:.5}
.od-spectrum-line{position:relative;height:13px;margin:22px 0 28px}
.od-spectrum-line::before{content:"";position:absolute;left:0;right:0;top:6px;height:.5px;background:var(--ml-rule)}
.od-spectrum-line i{position:absolute;top:2px;width:.5px;height:9px;background:currentColor;opacity:.5}
.od-spectrum-line i:nth-child(1){left:0}.od-spectrum-line i:nth-child(2){left:50%}.od-spectrum-line i:nth-child(3){right:0}
.od-spectrum-marker{position:absolute;top:0;left:calc(var(--od-spot) * 100%);width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--ml-color-blue);box-shadow:0 0 0 6px #79a9d02b,0 0 24px #79a9d0;transition:left 1.6s cubic-bezier(.22,1,.36,1) .2s}
.od-spectrum ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.od-spectrum li:nth-child(2){text-align:center}.od-spectrum li:nth-child(3){text-align:right}
.od-spectrum h3{margin:0;font:400 16px/19px var(--ml-font-body);color:var(--ml-text-secondary)}
.od-spectrum p{margin:10px 0 0;font-size:14px;line-height:21px;color:var(--ml-text-secondary);opacity:.8}
.od-spectrum .is-ours h3{color:var(--ml-label,var(--ml-color-blue))}
.od-spectrum .is-ours p{color:var(--ml-text);opacity:1}
/* 28 Sep 2026: this section is now light. Blue text fails contrast on Paper (about 2:1), so the ML OnDemand label
   takes the label colour (Ink on light); the blue stays on the marker. */
.page-motion .scroll-canvas .od-spectrum .is-ours h3{color:var(--ml-label)}

/* ---- Final CTA and waitlist form ---------------------------------------------------------------- */
.od-waitlist-layout{display:grid;grid-template-columns:386.67fr 713.33fr;gap:100px;align-items:start}
.od-waitlist-intro{position:sticky;top:calc(var(--page-top) + 60px)}
.od-waitlist-intro .ml-eyebrow{margin-bottom:20px}
.od-waitlist-intro .section-deck{margin-top:25px;max-width:30ch}
.od-form .form-heading h3{font:100 40px/1.1 var(--ml-font-display);letter-spacing:-.8px}
.od-form .ml-button-solid{background:var(--ml-color-ink);color:#fff;border-color:var(--ml-color-ink)}
.od-form .ml-button-solid:hover:not(:disabled),.od-form .ml-button-solid:focus-visible{color:var(--ml-color-ink)}
.od-interests{margin:0;padding:0;border:0;min-width:0}
.od-interests legend{padding:0;margin-bottom:14px;font-size:14px;line-height:21px;font-weight:500}
.od-interests legend span{font-weight:400;color:var(--form-meta)}
.od-chips{display:flex;flex-wrap:wrap;gap:10px}
.od-chips label{position:relative;cursor:pointer}
.od-chips input{position:absolute;opacity:0;width:1px;height:1px}
.od-chips span{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 15px;border-radius:999px;box-shadow:inset 0 0 0 .5px #060e1566;font-size:14px;line-height:18px;transition:background-color .3s,color .3s,box-shadow .3s}
.od-chips span::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 .5px currentColor;transition:background-color .3s}
.od-chips label:hover span{box-shadow:inset 0 0 0 1px var(--ml-color-ink)}
.od-chips input:checked+span{background:var(--ml-color-ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ml-color-ink)}
.od-chips input:checked+span::before{background:var(--ml-color-blue);box-shadow:none}
.od-chips input:focus-visible+span{outline:2px solid var(--ml-color-ink);outline-offset:3px}
/* 28 Sep 2026: the waitlist section is now dark. The form already sits on its Paper card (editorial.css), so the
   confirmation that replaces it takes the same card, with its tokens pinned to light so its label stays Ink. */
.od-joined{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:42px;border:.5px solid #060e151a;border-radius:var(--ml-radius-media);background:var(--ml-color-paper);color:var(--ml-color-ink);--ml-text:var(--ml-color-ink);--ml-text-secondary:var(--ml-color-meta);--ml-label:var(--ml-color-ink);--ml-rule:#060e1533;--ml-button-border:#060e1533;--ml-focus:var(--ml-color-ink)}
.od-joined:focus{outline:0}
.od-joined[hidden]{display:none}
.od-joined-mark{position:relative;width:44px;height:44px;border-radius:50%;background:var(--ml-color-blue);margin-bottom:30px}
.od-joined-mark::after{content:"";position:absolute;left:14px;top:14px;width:15px;height:8px;border:1.5px solid var(--ml-color-ink);border-top:0;border-right:0;transform:rotate(-45deg)}
.od-joined .ml-eyebrow{margin-bottom:15px}
.od-joined h3{margin:0;font:100 50px/1.1 var(--ml-font-display);letter-spacing:-1px}
.od-joined p:not(.ml-eyebrow){margin:20px 0 35px;font-size:16px;line-height:24px;max-width:44ch}
.od-joined strong{font-weight:500}

/* ---- Slim product footer ------------------------------------------------------------------------ */
.od-footer{padding:90px 0 60px;color:#fff;background:var(--ml-color-ink)}
.page-motion .od-footer{background:transparent}
.od-footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:50px;border-bottom:.5px solid #ffffff33}
.od-footer-brand p{margin:18px 0 0;font:100 26px/1.2 var(--ml-font-display);letter-spacing:-.4px;color:#ffffffb8}
.od-footer-base{display:flex;justify-content:space-between;gap:30px;padding-top:30px;font-size:12px;line-height:18px;color:#ffffffb8}
.od-footer-base p{margin:0;max-width:60ch}
.od-footer-base nav{display:flex;flex-wrap:wrap;gap:22px}
.od-footer-base a{color:#ffffffb8;transition:color .3s}
.od-footer-base a:hover,.od-footer-base a:focus-visible{color:#fff}
.od-footer-note{margin:18px 0 0;font-size:12px;line-height:18px;color:#ffffff80}
.od-footer .od-logo{height:80px}

/* Focus on dark surfaces */
.od-header a:focus-visible,.od-footer a:focus-visible,.od-hero a:focus-visible{outline:2px solid var(--ml-color-blue);outline-offset:6px}

/* ---- Responsive ---------------------------------------------------------------------------------- */
@media(min-width:1700px){.od-statement{font-size:96px}}
@media(max-width:1199px){
.od-window-body{grid-template-columns:190px minmax(0,1fr) 220px}
.od-statement{font-size:68px;letter-spacing:-1.3px}
.od-approach-grid,.od-waitlist-layout{grid-template-columns:1fr 1.5fr;gap:60px}
.od-v{height:220px}
.od-joined{padding:32px}
}
@media(max-width:959px){
body[data-page=ondemand]{--page-top:72px}
.od-header-inner{height:72px;gap:30px}
.od-logo{height:44px}
.od-nav,.od-header .od-backed{display:none}
.od-header-inner{justify-content:space-between}
.od-hero{padding-top:calc(var(--page-top) + 70px)}
.od-product-stage{margin-top:65px}
.od-window-body{grid-template-columns:minmax(0,1fr) 220px}
.od-rail{display:none}
.od-steps ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 20px}
.od-track{display:none}
.od-statement{font-size:54px;letter-spacing:-1px}
.od-approach-grid{grid-template-columns:1fr;gap:50px;margin-top:60px}
.od-waitlist-layout{grid-template-columns:1fr;gap:50px}
.od-waitlist-intro{position:static}
.od-joined{padding:40px}
.od-footer-top,.od-footer-base{flex-direction:column;align-items:flex-start}
}
@media(max-width:639px){
body[data-page=ondemand]{--page-top:64px}
.od-header-inner{height:64px;gap:16px;justify-content:space-between}
.od-header .od-join{min-height:36px;padding:8px 14px;font-size:13px}
.od-logo{height:38px}
.od-footer .od-logo{height:64px}
.od-tile{width:26px;height:26px}
.od-hero{padding-top:calc(var(--page-top) + 50px)}
.od-status{margin-bottom:28px;font-size:10px;letter-spacing:.8px;padding:6px 13px 6px 10px}
.od-title .line>span{white-space:normal}
.od-deck{font-size:16px;margin-top:25px}
.od-actions{margin-top:35px}
.od-product-stage{margin-top:60px}
.od-window-bar{padding:0 14px;height:44px}
.od-crumbs>span,.od-crumbs>i{display:none}
.od-window-state{display:none}
.od-window-body{grid-template-columns:1fr;min-height:300px}
.od-side{display:none}
.od-doc{padding:18px 16px 0}
.od-page{padding:22px 20px}
.od-page-title{font-size:24px}
.od-preview-note{top:-24px;font-size:10px}
.od-strip{padding-block:45px 40px}
.od-how-heading{margin-bottom:45px}
.od-how-heading br{display:none}
.od-steps ol{grid-template-columns:1fr;gap:45px;padding-left:34px}
.od-track{display:block;left:6px;top:6px;bottom:6px;width:.5px;height:auto}
.od-track-fill{inset:0 -.75px;transform-origin:top;transform:scaleY(var(--od-progress))}
.od-step-dot{position:absolute;left:-34px;top:0}
.od-v{margin-top:0;height:200px}
.od-step-copy{margin-top:22px}
.od-statement{font-size:40px;line-height:1.08;letter-spacing:-.8px}
.od-approach-copy{font-size:16px}
.od-spectrum{--od-spot:0}
.od-spectrum-line{position:absolute;left:0;top:0;bottom:0;width:13px;height:auto;margin:0}
.od-spectrum-line::before{left:6px;right:auto;top:0;bottom:0;width:.5px;height:auto}
.od-spectrum-line i{left:2px!important;right:auto!important;width:9px;height:.5px}
.od-spectrum-line i:nth-child(1){top:8px}.od-spectrum-line i:nth-child(2){top:50%}.od-spectrum-line i:nth-child(3){top:auto;bottom:8px}
.od-spectrum-marker{left:0;margin:-6.5px 0 0;top:calc(8px + var(--od-spot) * (100% - 16px));transition-property:top}
.od-spectrum{position:relative;padding-left:40px}
.od-spectrum figcaption{margin-bottom:24px}
.od-spectrum ol{grid-template-columns:1fr;gap:28px}
.od-spectrum li:nth-child(n){text-align:left}
.od-joined h3{font-size:40px}
.od-joined{padding:30px 24px;margin-inline:-8px}
.od-footer{padding:65px 0 50px}
.od-footer-brand p{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.od-glow,.od-pulse::after{animation:none}.od-product{transform:none}.od-spectrum-marker{transition:none}.od-step,.od-chip,.od-progress span{transition:none}}
body.motion-paused .od-glow,body.motion-paused .od-pulse::after{animation:none}
body.motion-paused .od-product{transform:none}
body.motion-paused .od-spectrum-marker{transition:none}
.od-form[hidden]{display:none}