/* awwwards.css - the experimental home page's delta over the production
   stylesheet (which is inline in envelope-world.html and inherited whole).
   Loaded ONLY by awwwards.html. Tokens, type, radii, shadows and easing are
   the production ones; nothing here defines a colour the control does not.

   Sections
     1. pacing      three vertical modes instead of one padding everywhere
     2. hero        the arrivals
     3. convergence the signature sequence (static / live / stacked)
     4. chapters    the sticky index over the feature deck
     5. epilogue    the divider before pricing
     6. reduced motion */

/* ---------- 0. typography ----------
   The three candidate font pairings (Reckless+Soehne / Signifier+Diatype /
   Fraunces+Neue Montreal) are PARKED in assets/awwwards-typography.css,
   unlinked - the page ships the control's own faces for now. Flip
   TYPOGRAPHY_PAIRS in tools/build-awwwards.py to bring them back. */

/* ---------- 0b. nav band + tap targets (jury audit batch 1) ----------
   Between 721 and 960px the control keeps the full desktop row and "Sign in"
   wraps to two lines (seen at 768). The sheet JS is width-agnostic - only
   CSS gates the burger - so the challenger simply extends the control's own
   720px rules up to 960 and lets the (excellent) sheet take over. */
@media(max-width:960px) and (min-width:721px){
  .nav-links a:not(.nav-cta),.nav-trigger,.nav-sep{display:none}
  .nav-drop{display:none}
  .nav-cta{margin-left:0}
  #nav.has-sheet .nav-burger{display:inline-flex}
}
/* 961-1120: the full row fits only from ~1130 up; in this band it stays but
   compresses - and never wraps mid-link ("Sign in" measured 38px tall at
   1024 = two lines) */
/* the Demo link + restored language switcher outgrew the row by 20px at
   1440 - 3px less side padding per item buys it back invisibly */
@media(min-width:961px){
  .nav-links a:not(.nav-cta),.nav-trigger{padding:8px 12px}
}
@media(max-width:1340px) and (min-width:961px){
  .nav-links a,.nav-trigger{white-space:nowrap}
  .nav-links a:not(.nav-cta),.nav-trigger{font-size:13px}
  .nav-in{padding:0 10px 0 14px}
  .brand{font-size:21px;padding-right:4px}
  .nav-sep{margin:0 3px}
  /* the switcher keeps its globe, sheds its label */
  .lang-pick summary span{display:none}
}
@media(max-width:960px){
  /* the two pills measured ~36px tall - 44px touch floor */
  .brand{min-height:44px}
  .nav-cta{display:inline-flex;align-items:center;min-height:42px}
}
/* ---------- 0c. the bottom dock (noplag pattern, 2026-08-31) ----------
   Past the hero the full island gives way to a minimal dark pill rising
   from the bottom: brand + Pricing / Demo / Sign in / Start free. Hidden
   state matches noplag's recipe (translate + fade + inert); the island
   slides up and out in the same beat and returns near the top. */
#nav{transition:transform .25s var(--ease-out),opacity .2s var(--ease-out)}
#nav.nav-away{transform:translateX(-50%) translateY(-130%);opacity:0;pointer-events:none}
.bottomnav{position:fixed;left:50%;bottom:22px;z-index:70;display:flex;align-items:center;
  gap:2px;padding:6px 6px 6px 15px;background:var(--dark);color:var(--dark-ink);
  border-radius:999px;box-shadow:0 12px 44px -12px rgba(12,11,9,.55);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:transform .25s var(--ease-out),opacity .2s var(--ease-out);
  max-width:calc(100vw - 24px)}
.bottomnav.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.bn-brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:19px;
  font-weight:600;letter-spacing:.012em;color:var(--dark-ink);margin-right:12px}
.bn-brand .logo-mark{width:22px;height:22px}
.bottomnav a:not(.bn-cta):not(.bn-brand){font-size:13.5px;padding:9px 12px;border-radius:999px;
  color:var(--dark-ink-3);transition:color .15s,background .15s;white-space:nowrap}
.bottomnav a:not(.bn-cta):not(.bn-brand):hover,.bottomnav a:not(.bn-cta):not(.bn-brand):focus-visible{
  color:var(--dark-ink);background:rgba(242,237,228,.08)}
.bottomnav .bn-demo{background:rgba(242,237,228,.08)}
.bottomnav .bn-demo:hover,.bottomnav .bn-demo:focus-visible{background:var(--clay);color:var(--raise)}
.bn-cta{font-size:13.5px;font-weight:600;background:var(--raise);color:var(--ink);
  padding:10px 16px;border-radius:999px;margin-left:8px;white-space:nowrap;
  transition:transform .18s var(--ease-out)}
.bn-cta:hover{transform:translateY(-1px)}
@media(max-width:480px){
  .bn-brand{margin-right:4px}
  .bn-brand .wm-t{display:none}
  .bottomnav a:not(.bn-cta):not(.bn-brand){padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){
  #nav,.bottomnav,.bn-cta{transition:none}
}

/* ---------- 1. pacing ----------
   tight: testimonial, pricing, FAQ (the epilogue reads quieter)
   normal: everything the control already paces
   cinematic: convergence (pinned), approve (a full viewport for one sentence) */
.testi{padding:72px 0 64px}
.pricing{padding:72px 0 84px}
.faq{padding:72px 0 88px}
@media(min-width:901px){
  .approve{min-height:100svh;display:flex;align-items:center;padding-top:60px}
  .approve > .wrap{width:100%}
  /* the sentence becomes an object: one size up, the two lines protected */
  .approve h2{font-size:clamp(40px,5.6vw,66px);line-height:1.0;letter-spacing:-.02em;text-wrap:nowrap}
}

/* ---------- 1c. jury batch 3: demo affordance, connector, measure ---------- */
/* the sandbox poster reads as a screenshot; it is a door. Whole surface
   clickable (JS), a lift on hover, and one line of microcopy under the pill. */
.dw-demo:not(.is-live){cursor:pointer}
.dw-play{display:inline-flex;align-items:center;gap:8px}
.dw-play svg{width:16px;height:16px;flex:none}
.dw-poster{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
@media(hover:hover){
  .dw-demo:not(.is-live):hover .dw-poster{transform:translateY(-3px) scale(1.006)}
  .dw-demo:not(.is-live):hover .dw-play{box-shadow:0 6px 22px -8px rgba(30,26,22,.45)}
}
.dw-hint{position:absolute;left:50%;top:calc(50% + 42px);transform:translateX(-50%);z-index:2;
  white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--raise);pointer-events:none;
  background:var(--clay);padding:6px 12px;border-radius:999px;
  box-shadow:0 1px 2px rgba(30,26,22,.12)}
.dw-demo.is-live .dw-hint{display:none}
/* the Demo nav link wears the row's hover pill permanently, and answers
   hover in clay - the page's action-chip pairing (the brand terracotta
   #D46A3A is an accent, not a text ground: white on it misses AA at 14px) */
.nav-links a[href="#poke"]{background:rgba(30,26,22,.05)}
.nav-links a[href="#poke"]:hover,.nav-links a[href="#poke"]:focus-visible{background:var(--clay);color:var(--raise)}
/* the demo window's fur case: the control bleeds the host 30px out and its
   ring hole tucks only 4px under the window, so the ragged inner fringe let
   background peek through along the edges and at the corner-radius mismatch.
   Pulling the host in tucks the ring 12px under the frame (the HOLE constant
   is 26px from the host edge); the fringe still reaches well past the host,
   so the visible band stays lush. */
.desk-case{inset:-22px}
/* the approve section picks up the receipt's thread ("2 need you") - the
   away section's chip treatment, legible on the ember ground */
.approve .eyebrow{display:inline-block;background:var(--clay);color:var(--raise);
  padding:6px 13px 5px;border-radius:999px;margin-bottom:16px}
/* body copy in the deck ran ~72 characters per line at 1440 */
.feat-card .fd{max-width:34em}

/* ---------- 2. hero (mobile smoothing only; the arrival notes were removed) ---------- */
@media(max-width:900px){
  /* The control trims the phone's faded tail with the hero's overflow at
     -.42 x device width = 22.3% of its height, i.e. the clip line sits at
     77.7% of the device - where the control's mask still holds ~35% alpha,
     so the phone ends in a hard horizontal cut. Same trim, faster dissolve:
     transparent by 76%, just above the clip, and the section hand-off is a
     wash instead of an edge. The workflow tabs are a sibling of this mask
     and keep their full strength. */
  /* Measured, not assumed: the mask lives in the device's LOCAL space but the
     clip cuts the PROJECTED box (rotateX magnifies the lower half), so a stop
     that looks safe on paper still holds a few percent alpha at the clip row -
     a 4/255 step the eye catches as a line. Transparent by 67% local zeroes it. */
  .hero .device-visual{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.8) 48%,
      rgba(0,0,0,.5) 55%,rgba(0,0,0,.22) 60%,rgba(0,0,0,.06) 64%,transparent 67%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.8) 48%,
      rgba(0,0,0,.5) 55%,rgba(0,0,0,.22) 60%,rgba(0,0,0,.06) 64%,transparent 67%)}
  /* the blurred atmosphere reaches bottom:-20% and gets guillotined by the
     hero's overflow at the same row; it reads as nothing in the stacked
     layout, so it goes rather than gets its own fade */
  .hero .hero-device-atmosphere{display:none}
}

/* ---------- 3. convergence ---------- */
/* the control's ground, kept: cream warming into the ember. On the pinned
   section the gradient spans the whole 270vh, so the scrub itself performs
   the warm-up - cream while the field is scattered, terracotta once the
   inbox has landed, meeting .scene's #D46A3A exactly. Grain as on the
   control, masked in over the lower two thirds. */
.cv{position:relative;padding:96px 0 150px;isolation:isolate;
  background:linear-gradient(180deg,#F2EEE6 0%,#F3E0C9 34%,#E9AE84 68%,#D46A3A 100%);
  background:linear-gradient(180deg in oklab,#F2EEE6 0%,#F3E0C9 34%,#E9AE84 68%,#D46A3A 100%)}
.cv::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain) repeat;background-size:256px 256px;
  image-rendering:pixelated;mix-blend-mode:overlay;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 22%,rgba(0,0,0,.55) 55%,#000 88%);
  mask-image:linear-gradient(180deg,transparent 22%,rgba(0,0,0,.55) 55%,#000 88%)}
.cv-head{text-align:center;max-width:44rem;margin:0 auto 30px}
/* the settled frame sits on the ember band, where bare clay type drowns -
   the away section's treatments, reused: chip eyebrow, burnt-amber italic */
.cv-head .eyebrow{display:inline-block;margin-bottom:14px;
  background:var(--clay);color:var(--raise);padding:6px 13px 5px;border-radius:999px}
/* one badge language: every chip on the page is a pill (receipt, dock,
   buttons) - the 4px label chips join it, the ember section's included */
.away .eyebrow,.approve .eyebrow{border-radius:999px;padding:6px 13px 5px}
.cv-head h2{font-family:var(--serif);font-size:clamp(34px,4.6vw,50px);line-height:1.08;letter-spacing:-.012em;margin:0 auto;text-wrap:balance}
.cv-turn{font-weight:400;font-style:italic;color:#3A1607}
.cv-stage{position:relative;max-width:1040px;margin:0 auto}
/* static layout (no JS, or reduced motion): the list, then the card */
.cv-field{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cv-src{display:flex;flex-direction:column;gap:5px;width:max-content;max-width:min(300px,100%);
  padding:11px 14px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-stack)}
.cv-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cv-chip b{font-weight:500;color:var(--ink-2)}
.cv-chip svg{width:15px;height:15px;flex:none;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-q{font-family:var(--serif);font-size:20px;line-height:1.25;color:rgba(30,26,22,.86)}
.cv-env{display:none}
.cv-sum{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0 auto 14px;
  padding:10px 16px 9px;background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cv-sum .cv-sum-ok{color:var(--moss);font-weight:500}
.cv-sum b{color:var(--clay-deep);font-weight:500}
.cv-sum .cv-sum-sep{color:var(--ink-4)}
.cv-cap{margin:18px auto 0;width:max-content;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--raise);background:var(--clay-deep);padding:6px 12px 5px;border-radius:999px}
.cv-rail{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;row-gap:12px;margin:34px auto 0;max-width:640px}
/* settled, this label sits deep in the ember band - the burnt-amber ink
   vanished into it; cream, a point larger and at 500, reads cleanly */
.cv-rail-l{flex:1 0 100%;text-align:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,242,.95);margin-bottom:2px}

/* live: pinned stage, everything absolutely placed and driven by scroll */
/* the control leaves a wide empty band of gradient before the ember scene
   (its channels section ends 130px+ deep in the wash) - the pin gets the
   same exhale: 160px of ground the sticky stage scrolls away over */
.cv.cv-live{height:270vh;padding:0 0 160px}
.cv.cv-live .cv-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;padding-top:84px}
/* everything must FIT inside the one-viewport pin (it clips): the wrap is a
   column with the stage as the one flexible row, so on short windows the
   stage gives way and the rail never slides under the pin's bottom edge */
.cv.cv-live .cv-pin > .wrap{width:100%;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding-top:92px;padding-bottom:26px}
.cv.cv-live .cv-head{margin-bottom:12px}
.cv.cv-live .cv-turn{display:block;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.cv.cv-live.settled .cv-turn{opacity:1;transform:none}
/* width:100% is load-bearing: the base rule's margin:0 auto disables the flex
   cross-axis stretch, and with only absolute children the stage collapses to
   width 0 without it */
.cv.cv-live .cv-stage{flex:1 1 auto;height:auto;min-height:280px;max-height:560px;width:100%}
.cv.cv-live .cv-field{position:absolute;inset:0;display:block;margin:0}
.cv.cv-live .cv-src{position:absolute;left:50%;top:50%;margin:0;box-shadow:var(--shadow);
  transform:translate(-50%,-50%);will-change:transform,opacity;backface-visibility:hidden}
.cv.cv-live .cv-chip{transition:none}
.cv.cv-live .cv-env{display:block;position:absolute;left:50%;top:50%;width:186px;height:130px;margin:-65px 0 0 -93px;z-index:4;
  transform-origin:50% 100%;will-change:transform,opacity}
.cv-env-fur{position:absolute;inset:0}
.cv-env-face{position:absolute;inset:0;overflow:visible;pointer-events:none}
.cv-env-face .flap{fill:none;stroke:var(--raise);stroke-linecap:round;stroke-linejoin:round;stroke-width:5.5}
.cv.cv-live .cv-sum{position:absolute;left:50%;top:50%;margin:0;z-index:5;opacity:0;will-change:transform,opacity}
.cv.cv-live .cv-cap{position:absolute;left:50%;top:calc(50% + var(--cap-y,190px));margin:0;transform:translateX(-50%);z-index:5;
  opacity:0;transition:opacity .5s var(--ease-out)}
.cv.cv-live.settled .cv-cap{opacity:1}
.cv.cv-live .cv-rail{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out) .15s,transform .6s var(--ease-out) .15s;margin-top:22px}
.cv.cv-live.settled .cv-rail{opacity:1;transform:none}
/* the arrivals already say where they come from - the rail names them once the
   card has landed, the way the control's rail sits under its lede */
@media(max-width:900px){
  .cv.cv-live{height:240vh;padding-bottom:120px}
  .cv.cv-live .cv-head h2{font-size:clamp(30px,7.4vw,40px)}
  .cv.cv-live .cv-stage{max-height:480px}
  .cv.cv-live .cv-src{max-width:min(280px,84vw)}
  .cv.cv-live .cv-q{font-size:17px}
  .cv-sum{font-size:10.5px;letter-spacing:.06em;padding:9px 13px 8px;gap:6px}
  .cv.cv-live .cv-rail{display:none}
  .cv.cv-live .cv-pin > .wrap{padding-top:84px;padding-bottom:20px}
  .cv .ch-tile{min-width:44px;height:44px}
}

/* ---------- 4. chapters ---------- */
.chr{margin:0 0 26px}
.chr ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.chr a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--raise);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  text-decoration:none;transition:color .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out)}
.chr a .chr-n{color:var(--clay);font-weight:500}
.chr a:hover,.chr a:focus-visible{color:var(--ink);border-color:var(--line)}
.chr li.on a{color:var(--raise);background:var(--ink);border-color:var(--ink)}
.chr li.on a .chr-n{color:var(--clay-lift)}
@media(min-width:901px){
  .chr{position:sticky;top:100px;z-index:7;margin:0 0 30px}
  .chr ol{justify-content:center}
  /* the deck parks 52px lower so the rail owns the band under the nav island */
  .feat-card:nth-child(1){top:146px}
  .feat-card:nth-child(2){top:160px}
  .feat-card:nth-child(3){top:174px}
  .feat-card:nth-child(4){top:188px}
  .feat-card:nth-child(5){top:202px}
}
@media(max-width:900px){
  .chr{margin:0 -28px 22px;padding:0 28px;overflow-x:auto;scrollbar-width:none}
  .chr::-webkit-scrollbar{display:none}
  .chr ol{flex-wrap:nowrap;width:max-content}
  .chr a{min-height:44px}
}

/* ---------- 4b. from the blog (epilogue reading list) ----------
   Placed after the FAQ, before the dark closer: the reader who has consumed
   the whole epilogue gets "what else", without delaying pricing or the CTA.
   The FAQ's hairline-row language continued - no cards, no thumbnails. */
.blogr{padding:20px 0 96px}
.blogr-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.blogr-all{font-size:14px;font-weight:500;color:var(--ink-2)}
.blogr-all:hover,.blogr-all:focus-visible{color:var(--clay-deep)}
.blogr-item{display:grid;grid-template-columns:132px 1fr auto;gap:20px;align-items:baseline;
  padding:19px 4px;border-top:1px solid var(--line);text-decoration:none}
.blogr-item:last-child{border-bottom:1px solid var(--line)}
.blogr-date{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.blogr-title{font-family:var(--serif);font-size:21px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);
  transition:color .15s}
.blogr-item:hover .blogr-title,.blogr-item:focus-visible .blogr-title{color:var(--clay-deep)}
.blogr-meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-4);
  display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.blogr-arrow{font-style:normal;color:var(--clay);display:inline-block;
  transform:translateX(-4px);opacity:0;transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.blogr-item:hover .blogr-arrow,.blogr-item:focus-visible .blogr-arrow{transform:none;opacity:1}
@media(max-width:720px){
  .blogr{padding:8px 0 76px}
  .blogr-item{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 2px}
  .blogr-date{grid-column:1}
  .blogr-title{grid-column:1/-1;grid-row:2;font-size:19px}
  .blogr-meta{grid-column:2;grid-row:1}
  .blogr-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){.blogr-arrow{transition:none;transform:none;opacity:1}}

/* ---------- 5. epilogue ---------- */
.epi{background:var(--raise);padding:26px 0 0}
.epi .wrap{display:flex;align-items:center;gap:18px}
.epi-line{flex:1;height:1px;background:var(--line)}
.epi-t{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.epi-t .logo-mark{width:14px;height:14px}
.epi + .pricing{border-top:0}

/* ---------- 6. reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .cv-turn,.cv-cap,.cv-rail,.chr a{transition:none}
}