/* ALIGN. A wellness brand for a float squeeze.
   Cream paper, ink, one lemon. Fraunces for display, Inter for body,
   JetBrains Mono for every number, because the numbers are the product. */
:root{
  --paper:#F3EFE6; --paper-2:#EAE4D6; --ink:#141311; --ink-2:#4A4740; --ink-3:#66625A;
  --hair:rgba(20,19,17,.14); --lemon:#F2D64B; --lemon-deep:#C9AE1F; --sage:#9BB59A;
  --w:1180px; --ease:cubic-bezier(.165,.84,.44,1);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);
  font-feature-settings:"ss01","cv11"}
a{color:inherit}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:-.01em}
.wrap{width:min(var(--w),92vw);margin:0 auto}

/* top */
.top{width:min(var(--w),92vw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 0 10px;flex-wrap:wrap}
.mark{font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 60;font-weight:600;font-size:22px;
  letter-spacing:.12em;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.dot{width:14px;height:14px;border-radius:50%;background:var(--lemon);box-shadow:inset 0 -3px 0 rgba(20,19,17,.18)}
.top nav{display:flex;gap:26px;flex-wrap:wrap}
.top nav a{font-size:14px;letter-spacing:.02em;text-decoration:none;color:var(--ink-2);padding:8px 0;min-height:28px;display:inline-block;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

/* type */
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;
  display:flex;align-items:center;gap:14px}
.eyebrow .num{font-family:var(--mono);color:var(--ink);background:var(--lemon);padding:2px 8px;border-radius:999px;letter-spacing:0}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hair)}
.display{font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 40;font-weight:300;
  font-size:clamp(76px,17vw,244px);line-height:.9;letter-spacing:-.03em;margin:0 0 26px}
.display.sm{font-size:clamp(46px,8vw,112px);line-height:1;letter-spacing:-.025em}
.display .mono{font-weight:400;letter-spacing:-.04em;font-family:var(--mono)}
.lede{font-family:var(--serif);font-variation-settings:"opsz" 72,"SOFT" 40;font-weight:300;
  font-size:clamp(22px,2.8vw,34px);line-height:1.25;margin:0 0 40px;max-width:26ch;color:var(--ink)}
.big{font-family:var(--serif);font-variation-settings:"opsz" 96,"SOFT" 40;font-weight:300;
  font-size:clamp(26px,3.6vw,46px);line-height:1.18;letter-spacing:-.015em;margin:0 0 26px;max-width:26ch}
.big .mono{font-size:.92em;font-weight:500}
.body-text{max-width:62ch;color:var(--ink-2);margin:0 0 18px}
.body-text.note{font-size:15px;color:var(--ink-3);border-left:2px solid var(--lemon);padding-left:16px}
.h{font-family:var(--serif);font-variation-settings:"opsz" 48,"SOFT" 40;font-weight:500;font-size:24px;margin:0 0 10px}

/* layout */
.hero{padding:60px 0 20px}
.hero.small{padding:48px 0 10px}
.chapter{padding:64px 0 28px;border-top:1px solid var(--hair);margin-top:30px}
.chapter.band{background:var(--paper-2);border-top:0;margin:56px calc(50% - 50vw) 0;padding:64px calc(50vw - 50%) 56px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px 48px}

/* live strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:#D9D3C5;position:relative;z-index:1;
  border:1px solid var(--hair);margin:0 0 10px}
.stat{background:var(--paper);padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px}
.stat .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em}
.stat .u{font-size:13px;color:var(--ink-3)}
.asof{font-size:12.5px;color:var(--ink-3);margin:0 0 34px;font-family:var(--mono);font-weight:400}
.asof.live{color:#7A6A10}

/* contract block */
.ca{display:grid;grid-template-columns:auto 1fr auto;gap:10px 22px;align-items:center;border:1px solid var(--ink);
  padding:18px 22px;margin:26px 0 10px;background:var(--paper)}
.ca-k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ca-v{font-family:var(--mono);font-size:15px;word-break:break-all}
.ca.pending .ca-v{font-family:var(--serif);font-variation-settings:"opsz" 48,"SOFT" 40;font-size:22px;font-weight:500}
.ca-n{grid-column:1/-1;font-size:14px;color:var(--ink-2);max-width:70ch}
.ca-a{display:flex;gap:8px;flex-wrap:wrap}
.ca.compact{margin-top:6px}
.btn{font:500 13px/1 var(--sans);letter-spacing:.02em;padding:11px 18px;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .18s var(--ease),color .18s var(--ease)}
.btn:hover{background:var(--lemon);color:var(--ink);border-color:var(--lemon)}
.btn.done{background:var(--sage);border-color:var(--sage);color:var(--ink)}

/* poses */
.poses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pose{background:var(--paper);padding:30px 26px 28px;display:flex;flex-direction:column}
.pose h3{font-family:var(--serif);font-variation-settings:"opsz" 48,"SOFT" 40;font-weight:500;font-size:26px;margin:0 0 14px}
.pose p{color:var(--ink-2);margin:0 0 16px;font-size:16px}
.more{margin-top:auto;font-size:14px;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--ink);align-self:flex-start;padding:6px 0;min-height:24px}

/* ledger */
.ledger{border-top:1px solid var(--hair);margin:0 0 22px}
.ledger .row{display:grid;grid-template-columns:minmax(160px,1.1fr) 3fr 90px 60px;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hair)}
.ledger .who{font-size:15px}
.ledger .bar{height:14px;background:var(--paper-2);border:1px solid var(--hair);position:relative}
.ledger .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.ledger .bar i.free{background:var(--lemon)}
.ledger .amt{text-align:right}
.ledger .pct{text-align:right;color:var(--ink-3)}

/* path */
.path{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--hair)}
.path li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--hair)}
.path .step{width:44px;height:44px;border-radius:50%;background:var(--lemon);display:grid;place-items:center;font-size:16px}
.path h3{font-family:var(--serif);font-variation-settings:"opsz" 48,"SOFT" 40;font-weight:500;font-size:22px;margin:6px 0 8px}
.path p{margin:0;color:var(--ink-2);max-width:60ch}
.quote{margin:8px 0 0;padding:26px 30px;background:var(--paper-2);font-family:var(--serif);font-variation-settings:"opsz" 48,"SOFT" 40;
  font-weight:300;font-size:22px;line-height:1.35;max-width:70ch}
.quote cite{display:block;margin-top:14px;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-style:normal}

/* wire */
.wire{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:1px solid var(--ink);padding:18px 22px;margin:0 0 18px;background:var(--paper)}
.wire code{font-size:clamp(15px,2.2vw,22px)}

/* board */
.tablewrap{overflow-x:auto;border:1px solid var(--hair);margin:0 0 18px}
.board{border-collapse:collapse;width:100%;min-width:860px;font-size:14px}
.board th,.board td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hair);white-space:nowrap;vertical-align:top}
.board th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--paper-2);
  position:sticky;top:0}
.board th[data-sort]{cursor:pointer;user-select:none}
.board th[data-sort]:hover,.board th.sorted{color:var(--ink)}
.board th.sorted::after{content:" \2193";color:var(--lemon-deep)}
.board th.sorted.asc::after{content:" \2191"}
.board td .nm{display:block;font:400 12px/1.3 var(--sans);color:var(--ink-3);white-space:normal;max-width:180px}
.board tr.hl td{background:rgba(242,214,75,.28)}
.board .dim{color:var(--ink-3)}
.board .yes{color:var(--ink);border-bottom:2px solid var(--lemon)}
.board td a,.body-text a,.lede a{display:inline-block;padding:2px 0}
.board .no{color:var(--ink-3)}

/* next strip */
.next{display:grid;grid-template-columns:auto 1fr auto;gap:8px 22px;align-items:baseline;text-decoration:none;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:30px 0;margin:70px 0 0}
.next-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.next-t{font-family:var(--serif);font-variation-settings:"opsz" 96,"SOFT" 40;font-weight:300;font-size:clamp(30px,4.6vw,58px);line-height:1;letter-spacing:-.02em}
.next-l{grid-column:2;color:var(--ink-2);font-size:15px}
.next-a{font-size:38px;grid-row:1/3;align-self:center;transition:transform .3s var(--ease)}
.next:hover .next-a{transform:translateX(10px)}

/* footer */
.foot{margin:90px 0 0;background:var(--ink);color:var(--paper)}
.foot-row{width:min(var(--w),92vw);margin:0 auto;padding:30px 0 34px;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;font-size:13.5px;color:rgba(243,239,230,.8)}
.foot-l{display:inline-flex;align-items:center;gap:12px;letter-spacing:.02em}
.foot-l .dot{width:12px;height:12px}
.social{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border:1px solid var(--lemon);border-radius:999px;
  color:var(--paper);text-decoration:none;font-size:14px;letter-spacing:.02em;line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease),transform .3s var(--ease)}
.social-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink);background:var(--lemon);padding:4px 7px;border-radius:999px}
.social-a{font-size:15px;color:var(--lemon);transition:transform .3s var(--ease)}
.social:hover{background:var(--lemon);color:var(--ink)}
.social:hover .social-a{color:var(--ink);transform:translate(2px,-2px)}
.social:hover .social-k{background:var(--ink);color:var(--lemon)}

@media (max-width:720px){
  .top{padding-top:20px}.top nav{gap:16px}
  .foot-row{justify-content:flex-start}
  .hero{padding-top:34px}
  .ca{grid-template-columns:1fr}.ca-a{margin-top:4px}
  .ledger .row{grid-template-columns:1fr 60px;gap:8px}
  .ledger .bar{grid-column:1/-1;order:3}
  .ledger .pct{display:none}
  .next{grid-template-columns:1fr auto}.next-l{grid-column:1}
  .path li{grid-template-columns:44px 1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =========================================================================
   Motion and texture. Patterns borrowed from 21st.dev (Magic UI's Ripple,
   Marquee, Number Ticker, Blur Fade, Magic Card; Aceternity's Hero Highlight
   and Flip Words), rebuilt in plain CSS and one rAF loop. Everything here is
   decoration: with reduced motion the page is the plain one underneath.
   ========================================================================= */

/* paper grain, one static SVG, no animation */
body{background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.33 0 0 0 0 0.29 0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode:multiply}
.top,.wrap,.foot{position:relative;z-index:1}
.top{z-index:5}

/* scroll progress, a hairline of lemon */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lemon);z-index:50;transform-origin:left}

/* the hero as a breathing space */
.home-hero{position:relative;overflow:visible}
.breath{position:absolute;left:52%;top:34%;width:0;height:0;pointer-events:none;z-index:-1}
.breath i{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  border:1px solid rgba(20,19,17,.18);animation:breathe 8s var(--ease) infinite;will-change:transform,opacity}
.breath i:nth-child(2){animation-delay:-4s;border-color:rgba(201,174,31,.45)}
.breath i:nth-child(3),.breath i:nth-child(4){display:none}
@keyframes breathe{0%{transform:scale(.55);opacity:0}25%{opacity:.9}100%{transform:scale(1.35);opacity:0}}
.disc{position:absolute;right:-6vw;top:-40px;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;background:var(--lemon);
  box-shadow:inset 0 -18px 0 rgba(20,19,17,.10);z-index:-1;animation:disc 8s ease-in-out infinite;will-change:transform}
.disc.small{width:min(30vw,340px);top:-60px;right:-4vw;opacity:.85}
@keyframes disc{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.06) translateY(-10px)}}
.home-hero .display{position:relative}

/* letters that come in misaligned and settle: the word doing what it says */
.display .ltr{display:inline-block;will-change:transform,filter,opacity;
  animation:settle 1.15s var(--ease) both;animation-delay:calc(.08s * var(--i))}
@keyframes settle{0%{opacity:0;filter:blur(10px);transform:translateY(calc(var(--dy) * 1em)) rotate(var(--rot))}
  60%{filter:blur(0)}100%{opacity:1;filter:blur(0);transform:none}}
.lede,.strip,.ca{animation:rise .9s var(--ease) both}
.lede{animation-delay:.55s}.strip{animation-delay:.7s}.ca{animation-delay:.85s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* rotating word in the eyebrow */
[data-rotate]{display:inline-block;min-width:5.5em;position:relative}
[data-rotate].swap{animation:swap .5s var(--ease)}
@keyframes swap{0%{opacity:0;transform:translateY(.5em);filter:blur(4px)}100%{opacity:1;transform:none;filter:blur(0)}}

/* highlighter stroke that draws itself */
.hl{position:relative;display:inline;background-image:linear-gradient(transparent 62%,rgba(242,214,75,.85) 62%,rgba(242,214,75,.85) 92%,transparent 92%);
  background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.1s var(--ease) .4s}
.in .hl,.hero .hl{background-size:100% 100%}
.hero .hl{transition-delay:1.2s}

/* tapes */
.tape{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:26px calc(50% - 50vw) 0;
  padding:12px 0;background:var(--paper);white-space:nowrap;contain:content}
.tape-in{display:inline-flex;align-items:center;gap:0;will-change:transform}
.tape span{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:0 26px}
.tape b{font-weight:500;color:var(--lemon-deep)}
.tape i{width:8px;height:8px;border-radius:50%;background:var(--lemon);box-shadow:inset 0 -2px 0 rgba(20,19,17,.2);flex:none}

/* bento with a cursor spotlight, cream-tinted so it stays paper not neon */
.bento .pose{position:relative;overflow:hidden;transition:transform .45s var(--ease)}
.bento .pose::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(242,214,75,.32),transparent 60%)}
.bento .pose:hover::before{opacity:1}
.bento .pose:hover{transform:translateY(-3px)}

/* dot pattern on the bands, a yoga mat */
.band{background-color:var(--paper-2);background-image:radial-gradient(rgba(20,19,17,.13) 1px,transparent 1.2px);background-size:18px 18px}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.bento .pose.reveal:nth-child(2){transition-delay:.12s}.bento .pose.reveal:nth-child(3){transition-delay:.24s}
.path li.reveal:nth-child(2){transition-delay:.1s}.path li.reveal:nth-child(3){transition-delay:.2s}

/* the pending address breathes */
.ca.pending .ca-v::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lemon);
  margin:0 12px 2px 0;box-shadow:0 0 0 0 rgba(242,214,75,.6);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,214,75,.7)}70%{box-shadow:0 0 0 14px rgba(242,214,75,0)}100%{box-shadow:0 0 0 0 rgba(242,214,75,0)}}

/* lemon cursor, fine pointers only */
.cursor{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--lemon);
  mix-blend-mode:multiply;pointer-events:none;z-index:60;opacity:0;transform:translate(-100px,-100px);transition:width .25s,height .25s,margin .25s,opacity .3s;will-change:transform}
.cursor.on{opacity:.95}.cursor.big{width:44px;height:44px;margin:-22px 0 0 -22px}
@media (pointer:coarse){.cursor{display:none}}

@media (max-width:720px){
  .disc{width:58vw;right:-24vw;top:150px}.disc.small{width:44vw;right:-16vw;top:40px}
  .breath i{width:380px;height:380px;margin:-190px 0 0 -190px}
  .tape span{font-size:12px;padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  .breath,.cursor{display:none}
  .disc,.display .ltr,.lede,.strip,.ca,[data-rotate].swap,.ca.pending .ca-v::before{animation:none!important}
  .display .ltr{opacity:1;transform:none;filter:none}
  .reveal{opacity:1;transform:none}
  .hl{background-size:100% 100%}
}