/* Amigo's public pages. Rounded tiles on white, lowercase headlines, black pills.
   Gray, white and black only: the product shots carry the color. */
:root{
  --paper:#FFFFFF;--mist:#F5F5F4;--putty:#EDECE9;--putty2:#E3E1DD;--line:#DCDAD6;--line-n:rgba(255,255,255,.14);
  --night:#131313;--night2:#1E1E1E;
  --ink:#000;--head:#1A1A1A;--text:#2A2A2A;--mute:#66635E;--mute-n:rgba(255,255,255,.64);
  --gut:clamp(10px,1.4vw,20px);--tr:clamp(22px,2.2vw,32px);--mr:clamp(10px,1.1vw,16px);
  --pad:clamp(26px,4.4vw,72px);
  --ease:cubic-bezier(.65,0,.25,1);--spring:cubic-bezier(.2,.9,.3,1)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.night :focus-visible,.on-night :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:#000;color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{max-width:1720px;margin-inline:auto}

/* Type: lowercase headlines, set tight */
.wordmark{font-weight:700;font-size:27px;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.wordmark b{font-weight:inherit;color:inherit}
.d1,.d2{font-weight:500;color:var(--head);text-wrap:balance}
.d1{font-size:clamp(46px,7.4vw,116px);line-height:.93;letter-spacing:-.055em}
.d2{font-size:clamp(36px,4.9vw,70px);line-height:.98;letter-spacing:-.045em}
.h3{font-size:clamp(21px,1.7vw,26px);line-height:1.2;font-weight:560;letter-spacing:-.022em;color:var(--head)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mute);max-width:33em;text-wrap:pretty}
.d1+.lede,.d2+.lede{margin-top:22px}
.fine{font-size:14px;line-height:1.5;color:var(--mute)}
.night .d1,.night .d2,.night .h3,.on-night .d1,.on-night .d2,.on-night .h3{color:#fff}
.night .lede,.night .fine,.on-night .lede,.on-night .fine{color:var(--mute-n)}

/* Pills: the only buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;border:1px solid #000;background:#000;color:#fff;font-size:12.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.pill:hover{background:#2B2B2B;border-color:#2B2B2B}
.pill:active{transform:scale(.97)}
.pill.line{background:transparent;color:#000}
.pill.line:hover{background:#000;color:#fff}
.pill.lg{height:56px;padding:0 30px;font-size:13px}
.pill.sm{height:38px;padding:0 16px;font-size:11.5px}
.night .pill,.on-night .pill{background:#fff;color:#000;border-color:#fff}
.night .pill:hover,.on-night .pill:hover{background:#E6E6E6;border-color:#E6E6E6}
.night .pill.line,.on-night .pill.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.night .pill.line:hover,.on-night .pill.line:hover{background:#fff;color:#000;border-color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:10px}
.lede+.btnrow,.lede+.fine{margin-top:32px}
.btnrow+.fine{margin-top:16px}

/* Notice bar and the main nav */
.notice{display:flex;align-items:center;justify-content:center;min-height:36px;margin:var(--gut) var(--gut) 0;padding:8px 16px;border-radius:12px;background:var(--putty);color:#4A4844;font-size:11.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;text-align:center;text-decoration:none;transition:background-color .2s}
.notice:hover{background:var(--putty2)}
.notice .long{display:inline}.notice .short{display:none}
.gnav{position:sticky;top:0;z-index:60;height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(var(--gut) + 10px);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .3s}
.gnav.up{box-shadow:0 1px 0 var(--line)}
.has-lnav .gnav{position:relative;background:#fff}
.gnav .links{justify-self:start;display:flex;gap:2px}
.gnav .links a,.gnav .signin{display:inline-flex;align-items:center;height:38px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;text-decoration:none;color:#45423E;transition:background-color .2s,color .2s}
.gnav .links a:hover,.gnav .signin:hover{background:var(--mist);color:#000}
.gnav .links a[aria-current="page"]{color:#000;background:var(--mist)}
.gnav .brand{justify-self:center;text-decoration:none;padding:6px}
.gnav .acts{justify-self:end;display:flex;align-items:center;gap:4px}
.menu{display:none;justify-self:start;width:44px;height:44px;margin-left:-10px;border:0;border-radius:50%;background:transparent;cursor:pointer;place-items:center}
.menu i{display:block;width:20px;height:1.5px;background:#000;border-radius:2px}
.menu i+i{margin-top:6px}

/* Phone menu */
.sheet{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:#fff;padding:0 calc(var(--gut) + 10px) calc(28px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,visibility .3s,transform .45s var(--spring)}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet .top{height:68px;display:flex;align-items:center;justify-content:space-between}
.sheet .x{width:44px;height:44px;margin-right:-10px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
.sheet .x::before,.sheet .x::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:1.5px;background:#000;transform:rotate(45deg)}
.sheet .x::after{transform:rotate(-45deg)}
.sheet nav{margin-top:28px}
.sheet nav a{display:block;padding:6px 0;font-size:46px;font-weight:500;letter-spacing:-.045em;line-height:1.1;color:var(--head);text-decoration:none}
.sheet .btnrow{margin-top:auto;flex-direction:column}
.sheet .btnrow .pill{width:100%}

/* Apple-style page bar: the page name, its sections and Start free */
.lnav{position:sticky;top:0;z-index:55;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .3s}
.lnav.up{box-shadow:0 1px 0 var(--line)}
.lnav .in{height:56px;display:flex;align-items:center;gap:20px;padding:0 calc(var(--gut) + 14px)}
.lnav .ttl{flex:none;font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--head);text-decoration:none}
.lnav .sub{display:flex;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.lnav .sub::-webkit-scrollbar{display:none}
.lnav .sub a{flex:none;padding:7px 12px;border-radius:999px;font-size:14px;color:#5A5752;text-decoration:none;transition:background-color .2s,color .2s}
.lnav .sub a:hover{color:#000}
.lnav .sub a.on{color:#000;background:var(--mist)}
/* One Start button on screen at a time. The page bar's own button stays hidden while the main header (which has one)
   is still in view, and fades in only once the page bar has taken over the top of the screen. Its space is kept, so
   the section links never jump. */
.lnav .pill{flex:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s,transform .25s,visibility .25s}
.lnav.up .pill{opacity:1;visibility:visible;transform:none}
/* The header's and page bar's buttons also step aside while the page's own big Start button is on screen (body.cta-seen,
   set in site.js), so the hero and the header never say the same thing at once. The space is kept, so nothing shifts. */
.gnav .acts .pill{transition:background-color .2s,color .2s,border-color .2s,transform .2s,opacity .25s,visibility .25s}
.cta-seen .gnav .acts .pill,.cta-seen .lnav.up .pill{opacity:0;visibility:hidden}

/* Tiles */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gut);padding:var(--gut)}
.tile{position:relative;border-radius:var(--tr);background:var(--putty);padding:var(--pad);overflow:clip}
.tile.mist{background:var(--mist)}
.tile.white{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.tile.night{background:var(--night);color:#fff}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
.split>.copy{display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad)}
.split>.media{position:relative;display:grid;place-items:center;min-height:clamp(440px,48vw,780px);padding:var(--pad);background:var(--mist)}
.split>.media.night{background:var(--night)}
.split>.media.putty{background:var(--putty2)}
.split.rev>.copy{order:2}
.split>.media>.phone{width:min(58%,300px)}
.split .d1{font-size:clamp(44px,5.8vw,96px)}
.shead{padding:clamp(76px,9vw,148px) clamp(16px,2.8vw,52px) clamp(30px,3.2vw,52px)}
.shead.c{text-align:center}
.shead.c .d2,.shead.c .lede{margin-inline:auto}
.shead.tight{padding-top:clamp(36px,4vw,64px)}
.facts{display:grid;gap:14px;margin-top:36px;max-width:31em}
.facts li{position:relative;padding-left:28px;color:var(--mute)}
.facts li::before{content:"";position:absolute;left:2px;top:.48em;width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);color:var(--head)}
.night .facts li,.on-night .facts li{color:var(--mute-n)}
.night .facts li::before,.on-night .facts li::before{color:#fff}

/* Home hero: dark tile, lowercase headline, the app rising out of the bottom edge */
.hero{display:flex;flex-direction:column;min-height:min(calc(100svh - 128px),1000px);padding-bottom:0}
.hero .top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px clamp(32px,4vw,72px);align-items:end}
.hero .side .btnrow{margin-top:28px}
.hstage{position:relative;flex:1;min-height:clamp(320px,38vw,640px);margin-top:clamp(44px,5vw,84px);transform-origin:50% 100%;will-change:transform}
.rise{transform:translateY(calc((1 - var(--p,1)) * 64px)) scale(calc(.955 + var(--p,1) * .045))}
.hstage .desk{position:absolute;left:0;top:0;width:77%;border-radius:var(--mr) var(--mr) 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 100px rgba(0,0,0,.55)}
.hstage .desk img{width:100%;height:auto;aspect-ratio:1440/900}
.hstage .phone{position:absolute;right:3%;top:7%;width:22.5%}
.notes{position:absolute;z-index:3;left:51%;top:4%;width:min(36%,420px);display:flex;flex-direction:column;text-align:left}
.nw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.nw>div{overflow:hidden;min-height:0;padding:0 14px}
.nw.in{grid-template-rows:1fr}
.nw .note{margin:5px 0 6px}
/* Home hero: the notifications land on the phone, like banners, and leave the big screen clear */
.hstage .notes{left:auto;right:1%;top:11%;width:min(28%,380px)}
/* Whatever stack is showing, the screen behind it frosts over, so only the banners read there */
[data-notes] .phone .viewport::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(236,236,236,.6);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(#000 44%,transparent 60%);mask-image:linear-gradient(#000 44%,transparent 60%);opacity:0;transition:opacity .6s;pointer-events:none}
[data-notes]:has(.nw.in) .phone .viewport::after{opacity:1}

/* A phone notification, as Amigo sends them */
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px 13px;border-radius:22px;background:rgba(246,246,246,.93);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 14px 40px rgba(0,0,0,.28);color:#000;font-size:clamp(11.5px,1vw,14px);line-height:1.35;opacity:0;transform:translateY(-12px) scale(.97);transition:opacity .45s,transform .6s cubic-bezier(.2,.9,.3,1.15)}
.note.in,.nw.in .note{opacity:1;transform:none}
.note img{width:2.7em;height:2.7em;border-radius:.75em;flex:none}
.note .nt{flex:1;min-width:0}
.note .nh{display:flex;justify-content:space-between;color:#6B6B6B;font-size:.86em;margin-bottom:1px}
.note b{display:block;font-weight:600}
.note p{color:#333}

/* Phone frame */
.phone{position:relative;display:flow-root;background:#000;border-radius:13.5%/6.4%;box-shadow:0 34px 80px rgba(0,0,0,.3),inset 0 0 0 1.5px #3A3A3A}
.phone>.viewport{margin:2.8%;border-radius:11.3%/5.2%;aspect-ratio:390/844;background:#fff}
.phone .layer img{object-fit:cover;object-position:top}
.media .phone,.trio .phone,.duo .phone{box-shadow:0 26px 60px rgba(0,0,0,.18),inset 0 0 0 1.5px #3A3A3A}
.night .media .phone,.media.night .phone,.pic .phone{box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1.5px #3A3A3A}

/* Works with */
.works{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:clamp(28px,3vw,44px)}
.works .h3{max-width:20em}
.works ul{display:flex;flex-wrap:wrap;gap:8px}
.works li{display:flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;border:1px solid #BCB9B3;font-size:16px;font-weight:600;color:var(--head)}
.works .fine{flex-basis:100%;max-width:46em}

/* Clips: real frames, a pointer, captions */
.viewport{position:relative;overflow:hidden;border-radius:var(--mr);background:#fff;transform:translateZ(0)}
.desk .viewport,.clipbox.desk{aspect-ratio:1440/900}
.layer{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.15s var(--ease);will-change:transform}
.layer img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease,transform .65s cubic-bezier(.3,0,.2,1)}
.layer img.on{opacity:1}
.snap,.snap *{transition:none!important}
.cursor{position:absolute;left:70%;top:80%;width:0;height:0;z-index:4;opacity:0;pointer-events:none;transition:left .9s cubic-bezier(.55,0,.25,1),top .9s cubic-bezier(.55,0,.25,1),opacity .3s,transform 1.15s var(--ease)}
.cursor.show{opacity:1}
.cursor svg{position:absolute;left:-4px;top:-2px;width:24px;height:24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .15s}
.cursor.press svg{transform:scale(.82)}
.cursor .rip{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.24);opacity:0}
.cursor.tap .rip{animation:rip .65s ease-out}
@keyframes rip{0%{opacity:.9;transform:scale(.25)}100%{opacity:0;transform:scale(1.5)}}
.ring{position:absolute;z-index:3;border-radius:14px;opacity:0;pointer-events:none;box-shadow:0 0 0 3px #000,0 0 0 8px rgba(255,255,255,.92);transition:opacity .4s}
.ring.show{opacity:1;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px #000,0 0 0 13px rgba(255,255,255,.55)}}
.cap{position:absolute;z-index:6;left:50%;bottom:5.5%;max-width:92%;transform:translate(-50%,8px);padding:.6em 1.1em;border-radius:999px;background:rgba(0,0,0,.86);color:#fff;font-size:clamp(12px,1.1vw,16px);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.cap.show{opacity:1;transform:translate(-50%,0)}
.viewport>.note{position:absolute;z-index:7;top:4%;right:2.5%;width:min(46%,380px)}

/* A dark stage with a play bar under it */
.stage{background:var(--night);border-radius:var(--tr);padding:clamp(10px,1.6vw,24px);color:#fff}
.tile.night>.stage,.media.night>.stage{padding:0;border-radius:0;background:none;width:100%}
.smeta{display:flex;align-items:center;gap:14px;margin-top:clamp(10px,1.3vw,18px);padding:0 4px}
.pp{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.pp:hover{background:rgba(255,255,255,.24)}
.pp svg{width:16px;height:16px}
.pp.dark{background:#fff;color:#000;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.pp.dark:hover{background:#EDEDED}
.bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.slabel{font-size:13.5px;color:var(--mute-n);white-space:nowrap;font-variant-numeric:tabular-nums}

/* The day tour: the stage stays pinned while the moments scroll past */
.tour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,96px);padding:0 clamp(16px,2.8vw,52px)}
.tstage{grid-column:2;grid-row:1;align-self:start;position:sticky;top:clamp(88px,calc(50vh - 260px),220px)}
.scenes{position:relative;aspect-ratio:1440/900}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.scene.on{opacity:1;visibility:visible}
.scene>.clipbox.desk{position:absolute;inset:0}
.scene>.clipbox.desk>.viewport{height:100%}
.phonescene{display:grid;place-items:center}
.phonescene .phone{height:100%;width:auto;aspect-ratio:1/2.1;box-shadow:none}
.phonescene>.note{position:absolute;z-index:7;top:9%;left:50%;width:min(62%,360px);transform:translate(-50%,-12px) scale(.97)}
.phonescene>.note.in{transform:translate(-50%,0)}
.steps{grid-column:1;grid-row:1;position:relative;padding-left:30px}
.rail{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.rail i{display:block;width:100%;height:0;background:#000;border-radius:2px}
.step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.26;transition:opacity .45s}
.step:first-child{min-height:56vh;justify-content:flex-start;padding-top:10vh}
.step:last-child{min-height:64vh}
/* Phones get a still of each moment under its words instead of the pinned desktop clip (see the 900px rules) */
.mshot{display:none}
.step.on{opacity:1}
.when{font-size:clamp(64px,7vw,108px);font-weight:300;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;color:var(--head)}
.when small{font-size:.3em;font-weight:500;letter-spacing:-.01em;margin-left:.3em;vertical-align:.25em}
.step .h3{margin-top:22px}
.step p:not(.when){color:var(--mute);margin-top:12px;max-width:26em}

/* What customers see */
.trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px);margin-top:clamp(36px,4vw,64px)}
.trio .phone{width:min(100%,292px);margin-inline:auto}
.trio figcaption{text-align:center;margin-top:28px}
.trio figcaption b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--head)}
.trio figcaption span{display:block;color:var(--mute);font-size:15.5px;margin:6px auto 0;max-width:17em}
.trio .pp{position:absolute;right:0;bottom:0}
.tnote{margin-top:28px;text-align:center}

/* Why owners switch: a statement, three reasons, one picture that follows along */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut)}
.why .say{display:flex;flex-direction:column;min-height:clamp(560px,52vw,820px)}
.why .big{font-size:clamp(27px,2.7vw,40px);line-height:1.16;letter-spacing:-.03em;font-weight:450;color:var(--head);max-width:17em;text-wrap:pretty}
.why .big+.btnrow{margin-top:28px}
.reasons{margin-top:auto;padding-top:48px}
.reasons button{display:block;width:100%;padding:18px 0;border:0;border-top:1px solid #CFCCC7;background:none;text-align:left;cursor:pointer}
.reasons b{display:block;font-size:clamp(22px,2vw,30px);font-weight:560;letter-spacing:-.03em;color:#807C76;transition:color .3s}
.reasons button:hover b{color:#55524D}
.reasons button[aria-expanded="true"] b{color:var(--head)}
.reasons span{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.reasons span>i{overflow:hidden;font-style:normal;color:var(--mute);max-width:30em}
.reasons button[aria-expanded="true"] span{grid-template-rows:1fr}
.reasons button[aria-expanded="true"] span>i{padding-top:8px}
.why .pic{display:grid;place-items:center;background:var(--night);padding:var(--pad)}
.why .pic .phone{width:min(64%,310px)}

/* Assistant page hero: approvals on a phone, notifications dropping in over it */
.ahero{min-height:min(calc(100svh - 190px),900px)}
.ahero>.copy{justify-content:center}
.ahero>.media{background:none}
.pstage{position:relative;width:min(50%,284px)}
.pstage .notes{left:-24%;right:-24%;top:7%;width:auto}
.own{min-height:clamp(380px,34vw,520px)}
.own .said{justify-content:center}
.quote{font-size:clamp(24px,2.4vw,36px);line-height:1.24;letter-spacing:-.025em;font-weight:450;color:var(--head);max-width:17em;text-wrap:pretty}

/* Product cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.card{display:flex;flex-direction:column;border-radius:var(--tr);background:var(--mist);overflow:clip;text-decoration:none;color:inherit}
.card .shot{position:relative;aspect-ratio:1/1.02;overflow:clip;background:var(--putty);display:grid;place-items:center}
.card .shot.night{background:var(--night)}
.card .shot>*{transition:transform .9s var(--ease)}
.card:hover .shot>*{transform:scale(1.035)}
.card .shot .deskcrop{position:absolute;left:9%;top:12%;width:150%;border-radius:var(--mr);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.14);transform-origin:0 0}
.card .shot .phone{width:44%}
.card .shot .num{font-size:clamp(96px,11vw,176px);font-weight:400;letter-spacing:-.07em;line-height:1;color:var(--head);font-variant-numeric:tabular-nums}
.card .shot .num small{font-size:.2em;letter-spacing:-.01em;font-weight:500;color:var(--mute);margin-left:.15em}
.card .meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:22px 26px 26px}
.card .meta b{font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--head)}
.card .meta em{font-style:normal;font-size:14px;font-weight:550;color:var(--mute);align-self:center}
.card .meta span{grid-column:1/-1;color:var(--mute);font-size:15.5px}

/* Feature tiles on the Features page */
.wide-stage{padding:clamp(14px,2.2vw,36px)}
.wide-stage .smeta{padding:0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips li{padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.05);font-size:14.5px;font-weight:550;color:var(--head)}
.night .chips li{background:rgba(255,255,255,.1);color:#fff}
.duo{display:flex;justify-content:center;gap:clamp(16px,2.5vw,36px);width:100%}
.duo .phone{width:min(44%,272px)}
.duo .phone:nth-child(2){margin-top:14%}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.mini{border-radius:var(--tr);background:var(--mist);padding:clamp(26px,3vw,44px);min-height:250px;display:flex;flex-direction:column}
.mini .h3{margin-top:auto}
.mini p{margin-top:10px;color:var(--mute)}
.mini .k{font-size:clamp(44px,4.4vw,64px);font-weight:400;letter-spacing:-.06em;line-height:1;color:var(--head)}

/* Sample app */
.browser{border-radius:var(--tr);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bbar{height:46px;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--mist);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:7px}.dots i{width:11px;height:11px;border-radius:50%;background:#CFCDC9}
.addr{flex:1;max-width:420px;margin:0 auto;height:28px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;color:#555}
.bview{position:relative;height:min(80vh,780px);overflow:hidden}
.bview iframe{position:absolute;left:0;top:0;display:block;border:0;width:100%;height:100%}

/* Assistant page */
.trio3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ai{border-radius:var(--tr);background:var(--mist);padding:clamp(28px,3.2vw,48px);display:flex;flex-direction:column;min-height:320px}
.ai .name{font-size:clamp(40px,4vw,60px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--head);margin-top:0!important;padding-top:0!important}
.ai p{margin-top:auto;padding-top:40px;color:var(--mute)}
.ai b{display:block;color:var(--head);font-weight:600;margin-bottom:6px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;margin-top:36px;padding:5px;border-radius:999px;background:rgba(0,0,0,.06)}
.seg button{border:0;background:transparent;font-size:12px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;padding:13px 18px;border-radius:999px;cursor:pointer;color:#55524D;transition:background-color .25s,color .25s}
.seg button:hover{color:#000}
.seg button[aria-pressed="true"]{background:#000;color:#fff}
.segp{margin-top:22px;font-size:clamp(19px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:var(--head);min-height:2.9em;max-width:22em}
.tgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,64px);margin-top:clamp(36px,4vw,64px)}
.tgroups h3{font-size:15px;font-weight:600;letter-spacing:0;color:var(--mute);padding-bottom:14px}
.tgroups li{padding:18px 0;border-top:1px solid #CFCCC7}
.tgroups li b{display:block;font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--head)}
.tgroups li span{display:block;margin-top:4px;color:var(--mute);font-size:15.5px}
.sees{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut)}
.sees>div{border-radius:var(--tr);padding:clamp(28px,3.4vw,52px);background:var(--mist)}
.sees>div.night{background:var(--night);color:#fff}
.sees h3{font-size:15px;font-weight:600;color:var(--mute);margin-bottom:12px}
.sees .night h3{color:var(--mute-n)}
.sees li{padding:16px 0;border-top:1px solid var(--line);font-size:clamp(19px,1.6vw,22px);letter-spacing:-.015em;color:var(--head)}
.sees .night li{border-top-color:var(--line-n);color:#fff}

/* Pricing */
.price{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,104px)}
.bill{display:inline-flex;padding:5px;border-radius:999px;background:#fff}
.bill button{border:0;background:transparent;font-size:12px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;padding:12px 18px;border-radius:999px;cursor:pointer;color:#55524D;transition:background-color .25s,color .25s}
.bill button.on{background:#000;color:#fff}
.bill button span{opacity:.62;margin-left:6px}
.pamt{display:flex;align-items:baseline;gap:12px;margin-top:34px}
.pamt b{font-size:clamp(88px,10vw,150px);font-weight:400;letter-spacing:-.07em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--head)}
.pamt span{font-size:19px;color:var(--mute)}
.pnote{margin-top:16px;color:var(--mute);font-size:15.5px}
.price .pill{margin-top:34px;width:100%}
.already{margin-top:16px;text-align:center;font-size:15px}
.already a{text-underline-offset:3px}
.incl li{position:relative;padding:16px 0 16px 32px;border-bottom:1px solid #CFCCC7;color:var(--head)}
.incl li:first-child{padding-top:0}
.incl li::before{content:"";position:absolute;left:3px;top:calc(16px + .45em);width:11px;height:6px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}
.incl li:first-child::before{top:.45em}
.ptot{margin-top:24px;color:var(--mute);font-size:15.5px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.three li{border-radius:var(--tr);background:var(--mist);padding:clamp(26px,3vw,44px);min-height:300px;display:flex;flex-direction:column}
.three .n{font-size:clamp(64px,6vw,96px);font-weight:300;letter-spacing:-.06em;line-height:.9;color:var(--head);font-variant-numeric:tabular-nums}
.three .h3{padding-top:clamp(44px,5vw,88px)}
.three p{margin-top:10px;color:var(--mute)}
.faqgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.faqgrid .d2{position:sticky;top:96px}
.faq{border-top:1px solid #CFCCC7}
.faq details{border-bottom:1px solid #CFCCC7}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 52px 24px 0;font-size:clamp(19px,1.55vw,22px);font-weight:560;letter-spacing:-.015em;color:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;background:linear-gradient(#000,#000) center/14px 1.5px no-repeat,linear-gradient(#000,#000) center/1.5px 14px no-repeat;transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 52px 26px 0;color:var(--mute);max-width:38em}

/* Last call and footer */
.final{text-align:center;padding-block:clamp(84px,10vw,168px)}
.final .d2{margin-inline:auto;max-width:11em}
.final .lede{margin-inline:auto}
.final .btnrow{justify-content:center;margin-top:36px}
.foot{margin:0 var(--gut) var(--gut);border-radius:var(--tr);background:var(--putty);padding:clamp(40px,5vw,72px) var(--pad) 26px;overflow:clip}
.fgrid{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));gap:32px 40px}
.fgrid>div>p{margin-top:12px;max-width:21em;color:var(--mute);font-size:15.5px}
.foot h4{margin-bottom:10px;font-size:14px;font-weight:600;color:var(--mute)}
.foot nav a{display:block;width:max-content;padding:5px 0;font-size:15.5px;color:#4E4B46;text-decoration:none}
.foot nav a:hover{color:#000;text-decoration:underline;text-underline-offset:3px}
.bigmark{margin-top:clamp(56px,7vw,112px);font-size:clamp(104px,22vw,360px);font-weight:700;letter-spacing:-.065em;line-height:.8;padding-bottom:.16em;color:var(--head);user-select:none}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:8px;padding-top:20px;border-top:1px solid #CFCCC7;font-size:13px;color:var(--mute)}

/* Phones: a pinned Start button once the hero's buttons are gone */
.dock{position:fixed;z-index:55;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:none;visibility:hidden}
.dock .pill{width:100%;height:56px;box-shadow:0 14px 34px rgba(0,0,0,.28)}

@media (max-width:1080px){
  .hstage .notes{right:0;width:min(42%,360px)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .card:last-child{grid-column:1/-1}
  .cards .card:last-child .shot{aspect-ratio:2/1}
  .tgroups{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .gnav{grid-template-columns:1fr auto 1fr}
  .gnav .links,.gnav .signin{display:none}
  .menu{display:grid}
  .hero .top{grid-template-columns:1fr}
  /* The day tour on phones and tablets: a desktop clip shrunk to phone width can't be read, so each moment shows its
     own phone screen, full width, under its words. Nothing is pinned, so nothing covers the headings. */
  .tour{display:block}
  .tstage{display:none}
  .steps{display:grid;gap:clamp(56px,10vw,88px);padding-left:0}
  .rail{display:none}
  .step,.step:first-child,.step:last-child{min-height:0;justify-content:flex-start;padding-top:0;opacity:1}
  .when{font-size:56px}
  .mshot{display:block;margin-top:26px;width:min(100%,380px);aspect-ratio:390/560;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 44px rgba(0,0,0,.08)}
  .mshot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .mshot.end img{object-position:50% 100%}
  .split,.why,.price,.faqgrid,.sees{grid-template-columns:1fr}
  .split.rev>.copy{order:0}
  .split>.media{min-height:0;padding-block:clamp(40px,8vw,72px)}
  .why .say{min-height:0}
  .why .pic{padding-block:56px}
  .faqgrid .d2{position:static}
  .three,.trio3,.minis{grid-template-columns:1fr}
  .three li,.mini,.ai{min-height:0}
  .three .h3{padding-top:28px}
  .three .h3,.ai p{padding-top:28px}
}
@media (max-width:820px){
  .trio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 64px;scrollbar-width:none}
  .trio::-webkit-scrollbar{display:none}
  .trio figure{flex:0 0 72%;scroll-snap-align:center}
  .trio .pp{right:var(--pad)}
}
@media (max-width:700px){
  body{font-size:16.5px}
  .notice .long{display:none}.notice .short{display:inline}
  /* Phones: the page bar would only repeat the page's own title, so the main header stays pinned instead and keeps
     the one Start button, which hands over to the big bottom button once that slides up (body.docked). */
  .lnav{display:none}
  .has-lnav .gnav{position:sticky}
  .docked .gnav .acts .pill{opacity:0;visibility:hidden}
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:13px 6px;font-size:11px;letter-spacing:.06em}
  .lnav .sub{display:none}
  .lnav .ttl{margin-right:auto}
  .cards{grid-template-columns:1fr}
  .cards .card:last-child .shot{aspect-ratio:1/1.02}
  .tgroups{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero{min-height:0}
  /* Phone hero: the phone sits right under the buttons, whole, with the banners landing on its screen */
  .rise{transform:none!important}
  .hstage{flex:none;height:min(128vw,520px);margin-top:36px}
  .hstage .desk{display:none}
  .hstage .phone{left:50%;right:auto;top:0;width:min(74%,300px);transform:translateX(-50%)}
  .hstage:not([data-notes]){height:min(122vw,500px)}
  .hstage .notes,.notes{left:6%;right:6%;top:7%;width:auto}
  .pstage{width:min(68%,280px)}
  .nw>div{padding:0 2px}
  .note{font-size:12.5px;border-radius:18px;padding:10px 12px}
  .dock{display:block;transform:translateY(160%);transition:transform .45s var(--spring),visibility .45s}
  .dock.show{transform:none;visibility:visible}
  .bview{height:620px}
  .viewport>.note{width:64%}
  .cap{bottom:4%}
  /* Stacked, not wrapped: as a wrapping column the paragraph slid off the tile and left a gap */
  .works{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:20px}
  .works .fine{flex-basis:auto}
  .pamt span{font-size:17px}
  /* Billing switch: both choices on one line each */
  .bill{display:flex;width:100%}
  .bill button{flex:1 1 auto;white-space:nowrap;padding:12px 12px;font-size:11px;letter-spacing:.05em}
  .bill button span{margin-left:4px}
  .duo .phone{width:min(46%,240px)}
}
@media (max-width:420px){
  .gnav{height:62px}
  .gnav .acts .pill{padding:0 13px}
  .wordmark{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .rise{transform:none}
}