/* The layer over the canvas pages: motion, the phone menu, the sticky Play bar and the
   playable working-out. Loaded after each page's own styles. */

/* Nothing pushes the page sideways on a phone. */
html,body{overflow-x:clip}

/* Nav sticks, full-bleed, and tightens once the page has scrolled. */
header.nav{position:sticky;top:0;z-index:40;transition:padding .25s ease;border-image:linear-gradient(rgba(252,250,255,.9) 0 0) fill 0//0 100vmax}
header.nav.stuck{padding:12px 0;box-shadow:0 1px 0 var(--line)}
@supports (backdrop-filter:blur(1px)){header.nav{border-image:linear-gradient(rgba(252,250,255,.78) 0 0) fill 0//0 100vmax;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}

/* Phone menu. */
.menubtn{display:none;width:48px;height:48px;border-radius:24px;border:0;background:var(--lilac2);color:var(--indigo);align-items:center;justify-content:center;cursor:pointer}
.menubtn[aria-expanded="true"] svg{animation:spin .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes spin{from{transform:rotate(-90deg) scale(.6)}}
.sheet{position:fixed;inset:0;z-index:39;background:rgba(23,20,47,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet.open{opacity:1;pointer-events:auto}
.sheet nav{position:absolute;left:12px;right:12px;top:84px;background:#fff;border-radius:32px;padding:14px;display:grid;gap:4px;box-shadow:0 30px 60px -30px rgba(46,37,128,.5);transform:translateY(-12px) scale(.97);transform-origin:top right;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.sheet.open nav{transform:none}
.sheet nav a:not(.playbadge){display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;border-radius:20px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:650}
.sheet nav a:not(.playbadge):hover,.sheet nav a:not(.playbadge):focus-visible{background:var(--lilac2)}
.sheet nav a:not(.playbadge)::after{content:"›";color:var(--mute);font-size:24px}
.sheet .playbadge{justify-self:center;margin-top:10px}

/* Sticky Play bar on phones. */
.playbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:none;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:rgba(21,18,58,.94);color:#fff;border-radius:28px;box-shadow:0 20px 40px -16px rgba(21,18,58,.6);transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.9,.3,1.1)}
.playbar.show{transform:none}
.playbar img.ic{width:40px;height:40px;border-radius:50%}
.playbar p{flex:1;font-size:14px;line-height:1.25;color:#D6D1FF;text-wrap:balance}
.playbar p b{display:block;color:#fff;font-size:15px}
.playbar .playbadge img{height:56px;margin:-9px -6px -9px -9px}
@media (max-width:420px){.playbar{gap:10px;padding-left:12px}.playbar p{font-size:13px}.playbar p b{font-size:14px}.playbar .playbadge img{height:48px;margin:-8px -5px -8px -8px}}
@media (max-width:360px){.playbar p{display:none}.playbar{justify-content:space-between}}

@media (max-width:900px){
  header.nav .links .playbadge{display:none}
  .menubtn{display:inline-flex}
  .playbar{display:flex}
}
@media (min-width:901px){.sheet{display:none}}

/* Playable working-out. */
.part{grid-template-columns:96px 1fr auto}
.step{display:flex;gap:6px}
.step button{width:44px;height:44px;border-radius:22px;border:0;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:22px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s,transform .15s}
.step button:hover{background:rgba(255,255,255,.2)}
.step button:active{transform:scale(.9)}
.part b,.reason .big .n{display:inline-block}
.bump{animation:bump .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bump{0%{transform:translateY(0)}30%{transform:translateY(-8%) scale(1.06)}100%{transform:none}}
.reason .reset{margin-top:14px;background:none;border:0;padding:8px 0;color:#FFB062;font:inherit;font-size:15px;font-weight:650;cursor:pointer;visibility:hidden}
.reason .reset.on{visibility:visible}
@media (max-width:900px){.part{grid-template-columns:64px 1fr auto;gap:12px}.step button{width:40px;height:40px}}

/* Morning cards lift. */
.mo{transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s}
.mo svg.deco{transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.mo:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 30px 50px -30px rgba(46,37,128,.45)}
.mo:hover svg.deco{transform:rotate(40deg) scale(1.12)}
.mo:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}

.playbadge{transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.playbadge:hover{transform:translateY(-2px) scale(1.03)}

@media (prefers-reduced-motion:no-preference){
  /* Rise in as they arrive. */
  .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
  .rv.in{opacity:1;transform:none}

  /* Hero headline, word by word. */
  .hero .display .w{display:inline-block;opacity:0;transform:translateY(.35em) rotate(2deg);animation:word .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
  @keyframes word{to{opacity:1;transform:none}}

  /* Hero phone floats; the shapes behind it turn slowly. */
  .stage .phone{animation:float 6s ease-in-out infinite}
  .stage .tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes float{50%{translate:0 -12px}}
  .stage .shape{animation:turn 60s linear infinite}
  .stage .shape2{animation:turn 24s linear infinite reverse}
  .stage .shape3{animation:turn 30s linear infinite}
  @keyframes turn{to{rotate:360deg}}

  /* The week's bars grow from their bedtime. */
  .weekc.rv .sl{transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
  .weekc.rv.in .sl{transform:none}
  .weekc.rv.in .col:nth-child(2) .sl{transition-delay:.06s}
  .weekc.rv.in .col:nth-child(3) .sl{transition-delay:.12s}
  .weekc.rv.in .col:nth-child(4) .sl{transition-delay:.18s}
  .weekc.rv.in .col:nth-child(5) .sl{transition-delay:.24s}
  .weekc.rv.in .col:nth-child(6) .sl{transition-delay:.30s}
  .weekc.rv.in .col:nth-child(7) .sl{transition-delay:.36s}

  /* The new calendar entry arrives. */
  .calband.in .ev.new{animation:arrive .7s .5s cubic-bezier(.2,.9,.3,1.3) backwards}
  @keyframes arrive{from{opacity:0;transform:translateX(24px) scale(.96)}}
  .calband.in .result{animation:arrive .7s 1.1s cubic-bezier(.2,.9,.3,1.3) backwards}
}

/* Wake-up time tiles: the time, and the bedtime it gives. */
@font-face{font-family:"GSF Rond";src:url(/fonts/gsflex-rond-nums.woff2) format("woff2");font-weight:300 900;font-display:swap}
.times.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:28px}
.times.tiles a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:24px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),border-color .2s,box-shadow .2s}
.times.tiles a:hover{transform:translateY(-3px);border-color:#C9C1F5;box-shadow:0 16px 30px -20px rgba(46,37,128,.45)}
.times.tiles .up{font-family:"GSF Rond","GSF",sans-serif;font-variation-settings:"ROND" 100;font-weight:760;font-size:28px;line-height:1.05;color:var(--indigo)}
.times.tiles .bed{font-size:14px;color:var(--soft)}
.times.tiles .bed b{font-family:"GSF Rond","GSF",sans-serif;font-variation-settings:"ROND" 100;font-weight:700;color:var(--ink);font-size:15px}
.times.tiles a.on{background:var(--indigo);border-color:var(--indigo)}
.times.tiles a.on .up,.times.tiles a.on .bed,.times.tiles a.on .bed b{color:#fff}
@media (max-width:900px){.times.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.times.tiles .up{font-size:24px}}

/* The bedtime admin, crossed off as it scrolls past. */
.handled{padding-top:40px}
.hd-band{background:var(--night);color:#fff;border-radius:56px;padding:80px 72px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;position:relative;overflow:hidden;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 30% 70%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 52% 12%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 78% 30%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90% 82%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 8% 88%,#fff5 50%,transparent 51%)}
.hd-kick{font-size:15px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#FFB062}
.hd-copy .h2{color:#fff;margin-top:14px}
.hd-copy .lede{color:#C9C3F2;margin-top:24px}
.hd-note{margin:36px 0 0;max-width:420px}
.hd-note img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 30px 60px -30px #000}
.hd-note figcaption{margin-top:12px;font-size:15px;color:#9E97D6}
.chores{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.chores li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.04)}
.chores .tm{position:relative;display:grid;place-items:start;font-family:"GSF Rond","GSF",sans-serif;font-variation-settings:"ROND" 100;font-weight:700;font-size:17px;color:#A49ED6}
.chores .tm > *{grid-area:1/1;transition:opacity .3s,scale .45s cubic-bezier(.2,.9,.3,1.6)}
.chores .ck{display:grid;place-items:center;width:30px;height:30px;margin-top:-4px;border-radius:50%;background:#FFB062;color:#15123A;opacity:0;scale:.3}
.chores li.done .t{opacity:0}
.chores li.done .ck{opacity:1;scale:1}
.chores .tx{font-size:20px;font-weight:550;color:#F2EFFF}
.chores li{transition:background .4s}
.chores li.done{background:rgba(255,176,98,.08)}
.chores .pro{display:inline-block;vertical-align:2px;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:8px;background:#3F3888;color:#E2DFFF}
.hd-end{margin-top:26px;font-size:30px;font-weight:600;letter-spacing:-.01em;color:#C9C3F2;opacity:.6;transition:opacity .6s}
.hd-end b{color:#FFB062;font-weight:760}
.hd-list.all .hd-end{opacity:1}
.hd-fine{margin-top:14px;font-size:14px;color:#9E97D6;max-width:34em}
@media (max-width:900px){
  .hd-band{grid-template-columns:1fr;padding:48px 22px;border-radius:36px;gap:36px}
  .chores li{grid-template-columns:50px 1fr;gap:10px;padding:12px 14px}
  .chores .tm{font-size:15px}.chores .tx{font-size:17px}
  .hd-end{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.chores .t{opacity:0}.chores .ck{opacity:1;scale:1}.hd-end{opacity:1}}

/* Wide tables scroll on a phone with the first column pinned, so each row keeps its name. */
@media (max-width:700px){
  .tblwrap table{overflow:clip} /* hidden would make the table the scroller and break the pin */
  .tblwrap :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#FCFAFF;box-shadow:1px 0 0 #E4E0F4}
  .tblwrap thead th:first-child,.tblwrap tr.us td:first-child{background:#F3F0FF}
}

/* What testers say: three things they said, as plain cards. */
.tq{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.tq figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:36px;padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px}
.tq blockquote{margin:0}
.tq p{margin:0;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.tq figcaption{font-size:15px;color:var(--mute)}
@media (max-width:900px){.tq{grid-template-columns:1fr;gap:14px;margin-top:36px}.tq figure{min-height:0;padding:26px 24px;border-radius:28px}.tq p{font-size:22px}}