/* Scylla Monolith layer — generated from the LandingMonolith design by build.py; loaded after responsive.css */
  /* ==== variant: monolith ==== */
  /* editorial: very large type, thin rules, lots of air */
  .sc-page{--radius-lg:4px;--radius-md:2px;counter-reset:sec}
  .sc-sheen{background:radial-gradient(55% 50% at 85% 5%,var(--brand-deep),transparent 70%)}
  section{padding-bottom:128px}
  .word{letter-spacing:.2em}
  .links{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

  .hero{grid-template-columns:minmax(0,1fr);padding:var(--space-16) 0 var(--space-12)}
  .hero>div:last-child{display:none}
  .hero>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--space-12)}
  .hero>div:first-child>.live{grid-column:1/-1;justify-self:start}
  h1{grid-column:1/-1;margin:var(--space-8) 0;font-size:132px;line-height:120px;letter-spacing:-.035em}
  h1 em{color:var(--brand)}
  .hero .lead{font-size:20px;line-height:30px;max-width:560px}
  .hero .ctas{margin-top:0}
  .hero .trust{grid-column:1/-1;margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--line)}

  /* the key figures as a ruled row of big numbers */
  .figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--space-16);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
  .figures>div{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-8) var(--space-6) var(--space-8) 0}
  .figures>div+div{padding-left:var(--space-6);border-left:1px solid var(--line)}
  .figures .sc-micro{color:var(--brand-ink)}
  .figures b{font:500 56px/60px var(--font-mono);letter-spacing:-.03em}
  .figures small{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
  .app{box-shadow:var(--shadow-card)}

  /* section heads: index, huge heading, intro on the right */
  .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:end;gap:var(--space-12);margin-bottom:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--line-strong)}
  .eyebrow{margin-bottom:var(--space-6);color:var(--brand-ink)}
  .sec-head .eyebrow::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " — "}
  h2{font-size:72px;line-height:72px;letter-spacing:-.025em}
  .sec-head p{font-size:17px;line-height:27px}

  /* steps: big red numerals under a red rule, no boxes */
  .how{gap:var(--space-8)}
  .how .sc-card{padding:var(--space-6) 0 0;border:0;border-top:2px solid var(--brand);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .how .num{font:700 72px/1 var(--font-display);color:var(--brand)}
  .how-line{display:none}

  /* member messages as pull quotes */
  .quotes{gap:var(--space-8)}
  .quotes .sc-card{flex-direction:column-reverse;justify-content:flex-end;padding:0 0 0 var(--space-6);border:0;border-left:1px solid var(--line-strong);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .bubble{padding:0;background:none;font-size:18px;line-height:28px}
  .bubble::before{content:"“";display:block;margin-bottom:var(--space-2);font:700 64px/.7 var(--font-display);color:var(--brand)}

  /* plans as ruled columns */
  .plans{gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
  .plans .sc-card{padding:var(--space-8) var(--space-6);border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .plans .sc-card+.sc-card{border-left:1px solid var(--line)}
  .plans .sc-card--hover:hover{transform:none}
  .plans .sc-card--featured{box-shadow:inset 0 3px 0 var(--brand);background:linear-gradient(180deg,color-mix(in srgb,var(--brand-deep) 85%,transparent),transparent 75%)}
  .plans .sc-card--featured .sc-price-amount{color:var(--brand-ink)}
  .sc-price-amount{font-size:52px;line-height:56px;letter-spacing:-.02em}

  /* closing call to action: the reference card, heading at the reference size */
  .final{--radius-lg:12px}
  .final h2{font-size:42px;line-height:46px;letter-spacing:0}

  /* motion: the headline wipes up, rules draw in, columns arrive one after another */
  @media (prefers-reduced-motion:no-preference){
    /* the wipe starts once the headline is in view, so the clip never hides it from the observer */
    .sc-js h1.sc-reveal{transform:translateY(56px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
    .sc-js h1.sc-reveal.is-in{animation:mono-wipe 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both}
    @keyframes mono-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-10% -10% -20% -10%)}}
    .sc-js .sec-head.sc-reveal{border-top-color:transparent;background:linear-gradient(var(--line-strong),var(--line-strong)) 0 0/0 1px no-repeat border-box;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),background-size 1.2s cubic-bezier(.2,.7,.2,1)}
    .sc-js .sec-head.sc-reveal.is-in{background-size:100% 1px}
    .sc-js .sec-head.sc-reveal h2{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) .15s,transform .8s cubic-bezier(.2,.7,.2,1) .15s}
    .sc-js .sec-head.sc-reveal.is-in h2{opacity:1;transform:none}
    .sc-js .figures.sc-reveal>div,.sc-js .plans.sc-reveal>.sc-card,.sc-js .quotes.sc-reveal>.sc-card{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .2s,background-size .3s}
    .sc-js .figures.sc-reveal.is-in>div,.sc-js .plans.sc-reveal.is-in>.sc-card,.sc-js .quotes.sc-reveal.is-in>.sc-card{opacity:1;transform:none}
    .sc-js .how.sc-reveal .sc-card{border-top-color:transparent;background:linear-gradient(var(--brand),var(--brand)) 0 0/0 2px no-repeat border-box;transition:background-size 1s cubic-bezier(.2,.7,.2,1)}
    .sc-js .how.sc-reveal.is-in .sc-card{background-size:100% 2px}
    .sc-js .how.sc-reveal .num{display:inline-block;opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
    .sc-js .how.sc-reveal.is-in .num{opacity:1;transform:none}
    .figures>div:nth-child(2),.plans>.sc-card:nth-child(2),.quotes>.sc-card:nth-child(2){transition-delay:.1s}
    .figures>div:nth-child(3),.plans>.sc-card:nth-child(3),.quotes>.sc-card:nth-child(3){transition-delay:.2s}
    .figures>div:nth-child(4),.plans>.sc-card:nth-child(4){transition-delay:.3s}
    .how .sc-card:nth-child(2),.how .sc-card:nth-child(2) .num{transition-delay:.15s}
    .how .sc-card:nth-child(3),.how .sc-card:nth-child(3) .num{transition-delay:.3s}
    /* a red rule runs across the top of a plan on hover */
    .plans .sc-card:not(.sc-card--featured){background:linear-gradient(var(--brand),var(--brand)) 0 0/0 2px no-repeat}
    .plans .sc-card:not(.sc-card--featured):hover{background-size:100% 2px;transition-delay:0s}
  }

  /* moving between the home and payment pages: the page slides, the nav and the dragon stay put */
  @view-transition{navigation:auto}
  nav{view-transition-name:site-nav}
  .sc-backdrop{view-transition-name:backdrop}
  ::view-transition-old(root){animation:vt-out .25s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.7,.2,1) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-16px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(32px)}}
  @media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

  @media (max-width:1024px){
    h1{font-size:96px;line-height:90px}
    h2{font-size:56px;line-height:58px}
    .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
    .figures>div:nth-child(3){padding-left:0;border-left:0}
    .figures>div:nth-child(n+3){border-top:1px solid var(--line)}
    .sec-head{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  }
  @media (max-width:720px){
    section{padding-bottom:var(--space-16)}
    h1{margin:var(--space-6) 0;font-size:54px;line-height:52px}
    h2{font-size:38px;line-height:40px}
    .hero>div:first-child{grid-template-columns:minmax(0,1fr)}
    .hero .ctas{margin-top:var(--space-6)}
    .hero .trust{margin-top:var(--space-8)}
    .figures{margin-bottom:var(--space-12)}
    .figures>div{padding:var(--space-4) var(--space-4) var(--space-4) 0}
    .figures>div+div{padding-left:var(--space-4)}
    .figures>div:nth-child(3){padding-left:0}
    .figures b{font-size:32px;line-height:36px}
    .quotes .sc-card{padding-left:var(--space-4)}
    .plans{border:0}
    .plans .sc-card,.plans .sc-card+.sc-card{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 80%,transparent)}
    .final h2{font-size:30px;line-height:34px}
  }
