/* ══════════════════════════════════════════════════════════════════════════
   Job Deck · three pages
   Ashraf Builds design system. Tokens verbatim from css/shared.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f5f2ee;
  --ink:#111;
  --text:#1a1a1a;
  --mid:#555;
  --muted:#999;
  --orange:#E87420;
  --orange-dark:#d4681a;
  --orange-burnt:#c25510;
  --brown:#8B3A0F;
  --blue:#2C4685;

  --r-pill:50px;
  --r-card:24px;
  --r-tile:18px;
  --r-small:12px;

  /* One typeface for everything that is read. --wordmark stays because it is
     the logo lockup, and it has to match the one on ashrafbuilds.com. */
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wordmark:'Podkova',Georgia,serif;

  --pad:clamp(20px,5vw,80px);
  --pad-v:clamp(64px,10vw,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
     font-family:var(--sans);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
::selection{background:rgba(232,116,32,.22)}

.wrap{max-width:1100px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:760px}

/* ── Logo ─────────────────────────────────────────────────────────────────────
   The shipped mark-only.svg sets viewBox "0 0 80 78" around art that actually
   runs to y=79.9, so the bar's bottom tip is clipped by about 2px. The viewBox
   below is measured off the painted art with even padding, nothing else changed.
   ─────────────────────────────────────────────────────────────────────────── */
.mark{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;color:var(--text)}
.mark svg{width:27px;height:30px;flex:0 0 auto}
.mark .wm{font-family:var(--wordmark);font-weight:700;font-size:19px;letter-spacing:-.5px;line-height:1}
.mark .wm i{color:var(--orange);font-style:normal}
.mark.lg{gap:12px}
.mark.lg svg{width:37px;height:41px}
.mark.lg .wm{font-size:26px;letter-spacing:-.8px}
.dark .mark{color:#fff}

/* ── Nav pill ─────────────────────────────────────────────────────────────────
   Ported verbatim from the live site (css/shared.css and css/rtl.css) so the
   bar is identical on ashrafbuilds.com and here. Only the tokens are renamed
   to the ones this stylesheet already declares. Job Deck is the one addition.
   ─────────────────────────────────────────────────────────────────────────── */
.nav-pill{position:fixed;top:24px;left:50%;z-index:50;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;padding:10px 18px 10px 20px;border-radius:var(--r-pill);
  font-size:15px;font-weight:500;letter-spacing:.02em;opacity:0;
  transform:translateX(-50%) translateY(-10px);
  transition:opacity .7s ease,transform .7s ease;pointer-events:auto}
.nav-pill.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.nav-pill-name{text-decoration:none;color:#fff;font-weight:500}
a.nav-pill-name{cursor:pointer}
.nav-pill-links{display:flex;align-items:center;gap:6px;margin-left:8px}
.nav-link{color:rgba(255,255,255,.55);text-decoration:none;font-size:13px;font-weight:400;
  padding:4px 10px;border-radius:20px;transition:color .2s ease,background .2s ease;
  line-height:1;height:24px;display:inline-flex;align-items:center}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-pill-menu{display:none;flex-direction:column;gap:3px;cursor:pointer;padding:2px;background:none;border:none}
.nav-pill-menu span{display:block;width:16px;height:1.5px;background:#fff;border-radius:1px}

.nav-mobile-menu{display:none;position:fixed;top:72px;left:50%;transform:translateX(-50%);
  background:var(--ink);border-radius:20px;padding:20px 16px;z-index:49;min-width:260px;
  flex-direction:column;gap:6px;opacity:0;transition:opacity .3s ease;pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.25)}
.nav-mobile-menu.open{display:flex;opacity:1;pointer-events:auto}
.nav-mobile-menu .nav-link{font-size:15px;padding:14px 24px;display:block;border-radius:12px;letter-spacing:.01em}

.nav-lessons-wrap{position:relative;display:flex;align-items:center}
.nav-lessons-wrap > .nav-link{display:flex;align-items:center}
.nav-lessons-dropdown{display:none;position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%);background:var(--ink);border-radius:16px;padding:12px 8px;
  min-width:240px;flex-direction:column;gap:2px;z-index:60;opacity:0;
  transition:opacity .2s ease;pointer-events:none}
.nav-lessons-dropdown.open{display:flex;opacity:1;pointer-events:auto}
.nav-lessons-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 14px;
  color:rgba(255,255,255,.6);text-decoration:none;font-size:13px;font-weight:400;
  border-radius:10px;transition:color .2s ease,background .2s ease}
.nav-lessons-dropdown a:hover,.nav-lessons-dropdown a.active{color:#fff;background:rgba(255,255,255,.08)}
.nav-lessons-dropdown .dropdown-num{font-size:11px;font-weight:600;color:var(--orange);min-width:18px}

.nav-mobile-lessons-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;cursor:pointer;font-family:var(--sans)}
.nav-mobile-lessons-toggle svg{width:12px;height:12px;stroke:rgba(255,255,255,.4);transition:transform .2s ease}
.nav-mobile-lessons-toggle.expanded svg{transform:rotate(180deg)}
.nav-mobile-lessons{display:none;flex-direction:column;padding:4px 8px 6px;gap:4px}
.nav-mobile-lessons.open{display:flex}
.nav-mobile-lessons a{display:flex;align-items:center;gap:10px;padding:10px 20px;
  color:rgba(255,255,255,.5);text-decoration:none;font-size:14px;border-radius:10px;
  transition:color .2s ease,background .2s ease}
.nav-mobile-lessons a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-mobile-lessons .dropdown-num{font-size:11px;font-weight:600;color:var(--orange);min-width:18px}

.lang-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;
  font-size:12px;font-weight:500;color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .2s ease,background .2s ease;line-height:1;height:24px;
  border:1px solid rgba(255,255,255,.15);margin-left:4px}
.lang-toggle:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}

@media (max-width:768px){
  .nav-pill{font-size:13px;padding:8px 14px 8px 16px;gap:10px}
  .nav-pill-links{display:none}
  .nav-pill-menu{display:flex}
}

/* ── Dark band ────────────────────────────────────────────────────────────── */
.dark{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.dark > .wrap{position:relative;z-index:1}
.blob{position:absolute!important;border-radius:9999px;filter:blur(120px);opacity:.45;pointer-events:none}
.b1{width:50vw;height:50vh;top:-15%;left:-10%;background:radial-gradient(circle,var(--blue) 0%,transparent 70%)}
.b2{width:60vw;height:60vh;top:20%;right:-15%;background:radial-gradient(circle,var(--orange) 0%,transparent 70%)}
.b3{width:45vw;height:45vh;bottom:-10%;left:25%;background:radial-gradient(circle,var(--brown) 0%,transparent 70%)}
.grain{position:absolute!important;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-repeat:repeat;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* ── Type ─────────────────────────────────────────────────────────────────── */
.h1{font-size:clamp(34px,5.6vw,64px);line-height:1.06;letter-spacing:-.035em}
.h2{font-size:clamp(27px,3.4vw,44px);line-height:1.14;letter-spacing:-.03em}
/* The one set-apart word in a headline. It used to change face; now it changes
   weight and colour, which sets it apart just as clearly inside a single
   family. font-style is reset explicitly: DM Sans is loaded without an italic
   axis, so leaving it italic would have the browser slant the upright. */
em{font-style:normal;font-weight:300;color:var(--mid)}
.dark em{color:rgba(255,255,255,.62)}
.sub{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--mid);max-width:46ch}
.dark .sub{color:rgba(255,255,255,.58)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dark .eyebrow{color:rgba(255,255,255,.45)}
.small{font-size:14px;line-height:1.6;color:var(--mid)}
.tiny{font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);
     font-size:15px;font-weight:500;letter-spacing:-.01em;padding:15px 28px;min-height:50px;
     transition:background .3s ease,color .2s ease,border-color .2s ease}
.btn svg{width:14px;height:14px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:#000}
.btn-white{background:#fff;color:var(--text)}
.btn-white:hover{background:#efece8}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);font-weight:400}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.btn-line{border:1.5px solid var(--text);color:var(--text)}
.btn-line:hover{background:var(--text);color:#fff}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* The sequence ------------------------------------------------------------
   Four steps, and they really are a sequence, so a line carries them rather
   than four boxes of equal weight. The numeral sits ON the rule, which is the
   same device the connect page uses vertically. No borders: the rule is doing
   the work they were doing badly. */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
      column-gap:clamp(20px,2.4vw,34px);row-gap:44px}
/* Tops align on the rule and the copy hangs from it. Subgrid was tried so the
   four bodies would share a baseline too, and it was worse: at a 214px column
   the longest heading needs three lines at any readable size, so the row grew
   to fit it and the one-line headings sat in a hole. Ragged bottoms in a rail
   read as normal; ragged tops would not. */
.flow > li{list-style:none;position:relative;padding-top:46px}

/* One rule per step, spanning its own circle to the next one. The last step has
   nothing after it, so it draws none. */
.flow > li::before{content:'';position:absolute;left:0;right:calc(-1 * clamp(20px,2.4vw,34px));
                   top:15px;height:1px;background:rgba(0,0,0,.13)}
.flow > li:last-child::before{display:none}

.flow .n{position:absolute;top:0;left:0;width:31px;height:31px;border-radius:999px;
         background:var(--paper);border:1px solid rgba(0,0,0,.16);
         display:flex;align-items:center;justify-content:center;
         font-size:12px;font-weight:500;color:var(--mid);
         font-variant-numeric:tabular-nums}
/* Step one is where you actually start, so it is the one that is filled. */
.flow > li:first-child .n{background:var(--text);border-color:var(--text);color:#fff}

/* No max-width: the column already sets the measure, and capping it narrower
   pushed the longest heading onto a third line, which then set the row height
   for all four and left the short ones sitting in a hole. */
.flow h3{font-size:clamp(16.5px,1.4vw,18.5px);font-weight:500;letter-spacing:-.02em;
         line-height:1.32;margin:0 0 8px}
.flow p{font-size:14px;line-height:1.62;color:var(--mid);margin:0}

@media (max-width:1080px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two per row, so the rule stops at the end of each row rather than running
     out into the gutter. */
  .flow > li:nth-child(2n)::before{display:none}
}
@media (max-width:620px){
  .flow{grid-template-columns:1fr;row-gap:0}
  .flow > li{padding:0 0 30px 48px}
  .flow > li:last-child{padding-bottom:0}
  /* vertical rail, exactly like the connect page */
  .flow > li::before{left:15px;right:auto;top:34px;bottom:0;width:1px;height:auto}
  .flow > li:last-child::before{display:none}
  .flow h3,.flow p{max-width:none}
}

/* The walkthrough ---------------------------------------------------------
   The same four steps, happening. It sits under the list rather than beside
   it because at this width a 16:9 frame next to the copy would be too small
   to read the interface in, which is the only reason it is here. */
.demo{margin:clamp(42px,5vw,64px) 0 0}
.demo .frame{position:relative;border-radius:var(--r-card);overflow:hidden;
             border:1px solid rgba(0,0,0,.09);background:var(--paper);
             box-shadow:0 20px 48px rgba(0,0,0,.08)}
/* aspect-ratio holds the space before metadata loads, so the section does not
   jump when the poster arrives. */
.demo video{display:block;width:100%;height:auto;aspect-ratio:16/9;
            background:var(--paper)}

@media (max-width:620px){
  .demo{margin-top:34px}
  /* The card radius is tuned for a wide frame; at phone width it eats the
     corners of the interface inside. */
  .demo .frame{border-radius:var(--r-tile);box-shadow:0 12px 28px rgba(0,0,0,.07)}
}

/* Connecting your AI ------------------------------------------------------
   Prose on the left, and on the right the tile from the home page of
   ashrafbuilds.com: soft ground, hairline, a line-art mark, and a dark device
   panel inside it. The two ways in live on that panel as gradient tiles, which
   is the same component the lessons card uses. Reused rather than reinvented,
   so the two sites read as one hand. */
.conn{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,38vw,470px);
      gap:clamp(32px,4.4vw,68px);align-items:center}

.tile{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);
      border-radius:var(--r-card);padding:clamp(26px,2.8vw,36px);
      display:flex;flex-direction:column;gap:22px;position:relative}
.tile .kicker{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);
              font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--muted)}
.tile .ico{width:38px;height:38px;color:var(--muted)}
.tile h3{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.tile .cap{font-size:clamp(13.5px,1vw,15px);line-height:1.6;color:var(--mid)}

.panel{background:var(--ink);border-radius:16px;overflow:hidden;
       display:flex;flex-direction:column}
.panel .bar{display:flex;align-items:center;justify-content:space-between;
            padding:13px 17px;border-bottom:1px solid rgba(255,255,255,.07)}
.panel .bar b{font-size:13.5px;font-weight:500;color:#fff}
.panel .bar span{font-size:10.5px;font-weight:500;letter-spacing:.06em;
                 text-transform:uppercase;color:rgba(255,255,255,.38)}
.panel .grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:15px 17px 17px}

.opt{border-radius:var(--r-small);padding:13px;min-height:118px;position:relative;
     display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
     color:#fff;transition:transform .2s ease,filter .2s ease}
/* Only the ones that are actually links move. A hover state on a div that goes
   nowhere reads as a broken button. */
a.opt:hover{transform:scale(1.03);filter:brightness(1.08)}

/* On the closing band the two options are the subject rather than an
   illustration inside a card, so they get room and a bigger name. */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px;
      max-width:520px;margin:clamp(30px,4vw,42px) auto 0}
/* Each holds one word, so the name is centred rather than dropped to the floor
   of a tall box. Bottom-aligning a single line left the top two thirds empty
   and the pair read as unfinished. */
.opt.lg{min-height:104px;padding:18px;border-radius:var(--r-tile);
        justify-content:center;align-items:center;text-align:center}
.opt.lg .name{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.02em;font-weight:600}
/* Centred over centred content. Still absolute, so the tile without a badge
   keeps its name on the same baseline as the one with. */
.opt.lg .badge{top:14px;left:50%;right:auto;transform:translateX(-50%);
               font-size:9.5px;padding:3px 9px;white-space:nowrap}
/* These tiles are links, and nothing on them said so: two gradient boxes read
   as decoration, and people did not click. A small line under the name says
   what is behind the click. Both tiles get the same top padding so the one
   with a badge and the one without keep their names level. */
.opt.lg{padding-top:40px}
/* Measured on a phone: at top:14px the badge's bottom edge sat a pixel below
   the top of the name. */
.opt.lg .badge{top:10px}
.opt .more{display:inline-flex;align-items:center;gap:5px;margin-top:7px;
           font-size:11.5px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.8)}
.opt .more svg{width:10px;height:10px;flex:none;transition:transform .2s ease}
a.opt:hover .more svg{transform:translateX(3px)}
@media (max-width:520px){
  .ways{grid-template-columns:1fr;gap:11px}
  .opt.lg{min-height:100px}
}
.opt.a{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-burnt) 100%)}
.opt.b{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)}
.opt .badge{position:absolute;top:10px;right:10px;font-size:9px;font-weight:500;
            padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.85)}
.opt .lab{font-size:9.5px;line-height:1.35;color:rgba(255,255,255,.68);margin-bottom:3px}
.opt .name{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}

@media (max-width:900px){
  .conn{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){ .opt:hover{transform:none} }

/* ── Routes ───────────────────────────────────────────────────────────────── */
/* Callout, used on the home page and on connect ------------------------ */
.note{display:flex;gap:12px;align-items:flex-start;background:rgba(232,116,32,.05);
  border-left:3px solid var(--orange);border-radius:0 var(--r-small) var(--r-small) 0;
  padding:18px 20px;max-width:62ch}
.note svg{width:18px;height:18px;color:var(--orange);flex:0 0 auto;margin-top:2px}
.note p{font-size:14.5px;line-height:1.6}

.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.route{background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:var(--r-card);
       padding:28px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.route.pick{border-color:var(--text)}
.route .geo{position:absolute;top:-18px;right:-18px;width:96px;height:96px;
            color:rgba(0,0,0,.045);pointer-events:none}
.route > *{position:relative}
.route .top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.route h3{font-size:21px;font-weight:500;letter-spacing:-.025em}
.route p{font-size:14px;line-height:1.6;color:var(--mid);margin-top:8px}
.route .go{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.pill{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
      padding:5px 11px;border-radius:var(--r-pill);background:rgba(0,0,0,.06);color:var(--mid)}
.pill.on{background:rgba(232,116,32,.13);color:var(--orange-burnt)}
.mins{margin-left:auto;font-size:12.5px;color:var(--muted)}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.qa{border-top:1px solid rgba(0,0,0,.1)}
.qa details{border-bottom:1px solid rgba(0,0,0,.1)}
.qa summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
            padding:22px 0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s ease}
.qa details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.qa summary:hover{color:var(--orange-burnt)}
.qa .a{padding:0 0 24px;max-width:62ch}
.qa .a p{font-size:15.5px;line-height:1.65;color:var(--mid)}
.qa .a p + p{margin-top:12px}
.qa .n{font-size:12px;font-weight:500;color:var(--muted);flex:0 0 26px;
       font-variant-numeric:tabular-nums}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid rgba(0,0,0,.1);padding:48px 0 56px}
.foot-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot h4{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.09em;
         text-transform:uppercase;color:rgba(0,0,0,.35)}
.foot a:not(.mark){display:block;font-size:14px;color:rgba(0,0,0,.55);padding:11px 0}
.foot a:not(.mark):hover{color:var(--orange-burnt)}
.foot .line{font-size:14px;color:rgba(0,0,0,.45);max-width:30ch;margin-top:14px;line-height:1.6}
.foot .c{font-size:12.5px;color:rgba(0,0,0,.3);margin-top:36px}

/* ── Page furniture ───────────────────────────────────────────────────────── */
.head{padding:calc(var(--pad-v) * .7) 0 0}
.head .h1{margin-top:14px}
.head .sub{margin-top:18px}
section{padding-block:var(--pad-v)}
section.tight{padding-block:calc(var(--pad-v) * .62)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ── Rotating source pill ─────────────────────────────────────────────────────
   Spec taken from the live site: 22ms character stagger, 0.45s expo-out in,
   0.3s out, gradient pill at a 0.3em radius so it tracks the type size.
   The wrapper animates its own width so the sentence never jumps.
   ─────────────────────────────────────────────────────────────────────────── */
.rot{display:inline-block;position:relative;vertical-align:bottom;
     color:#fff;font-weight:500;white-space:nowrap;line-height:1.32;
     /* Padding pushes the clip edge clear of the glyphs, and the matching
        negative margin keeps it out of the layout. Without the pill behind it,
        a character sliced by the mask reads as broken text, not as a reveal.
        The mask still earns its place: it stops the longer names spilling over
        the words after them while the width is still catching up. */
     padding:.4em 0;margin:-.4em 0;overflow:hidden;
     transition:width .5s cubic-bezier(.22,1,.36,1)}
.rot-in{display:inline-flex;white-space:nowrap}
.rot-m{position:absolute;top:0;left:0;display:inline-flex;white-space:nowrap;
       visibility:hidden;pointer-events:none}
.rot-c{display:inline-block;font-weight:500;color:#fff;will-change:transform,opacity}
.rot-c.in{animation:rotUp .45s cubic-bezier(.22,1,.36,1) both}
.rot-c.out{animation:rotDown .3s cubic-bezier(.55,0,1,.45) both}
@keyframes rotUp{0%{transform:translateY(.34em);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rotDown{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-.34em);opacity:0}}

/* Under reduced motion the sources still cycle, they just swap rather than
   slide, and the pill stops resizing. */
@media (prefers-reduced-motion:reduce){
  .rot{transition:none}
  .rot-c.in,.rot-c.out{animation:none}
  .rot-c.out{opacity:0}
}