/* Signups, "Backstage" design.
   The design's own stylesheet, kept as is so the pages match it to the pixel. No Tailwind directives:
   its preflight would restyle the design's elements (headings, lists, buttons, images).
   Beige (canvas #fcfbf8) is the page. Green (#0e3b31) is kept for emphasis only: the hero and the final
   call to action, both as inset panels, plus primary buttons.
   Type: Big Shoulders, Funnel Sans and Azeret Mono (self-hosted, see shared/_fonts). */

:root{
  --forest:#0e3b31;
  --ink:#0f2a24;
  --canvas:#fcfbf8;
  --paper:#ffffff;
  --quiet:#f2f0e9;
  --body:#4c5c56;
  --text-d:#a3b3ac;
  --leaf:#e4efea;
  --rose:#a8447a;
  --rose-d:#e58bb8;
  --blush:#f6d7e4;
  --lavender:#edeefc;
  --indigo:#5b60c0;
  --aqua:#e3f2ef;
  --warm:#fbf1e0;
  --gold:#e0a325;
  --tick:#27a488;
  --hair:rgba(15,42,36,.2);
  --line-d:rgba(228,239,234,.22);
  --sh:.375rem .375rem 0 var(--ink);
  --display:"Big Shoulders","Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --sans:"Funnel Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* The Signups dashboard (dance-school repo, config/tailwind.config.js) */
  --a-bg:#fcfbf7;
  --a-ink:#24211c;
  --a-mut:#ad9c8d;
  --a-line:#efe9e4;
  --a-pri:#f0b756;
  --a-sec:#e68a5a;
}

*,*::before,*::after{
  box-sizing:border-box
}

[hidden]{
  display:none!important
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip
}

svg{
  display:block
}

a{
  color:inherit;
  text-decoration:none
}

p{
  margin:0
}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  text-wrap:balance
}

h2{
  font-family:var(--sans);
  font-size:2.75rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.08
}

:focus-visible{
  outline:.1875rem solid var(--tick);
  outline-offset:.1875rem;
  border-radius:.5rem
}

.panel :focus-visible{
  outline-color:var(--gold)
}

.wrap{
  width:100%;
  max-width:75rem;
  margin:0 auto;
  padding:0 1.5rem
}

.skip{
  position:absolute;
  left:-624.9375rem;
  top:.625rem;
  z-index:99;
  background:var(--forest);
  color:#fff;
  padding:.625rem 1rem;
  border-radius:.625rem
}

.skip:focus{
  left:.625rem
}

.nw{
  white-space:nowrap
}

.sr{
  position:absolute;
  width:.0625rem;
  height:.0625rem;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:3.375rem;
  padding:0 1.625rem;
  border-radius:.875rem;
  border:.125rem solid var(--ink);
  background:var(--forest);
  color:#fff;
  font-weight:700;
  font-size:1.03125rem;
  box-shadow:.25rem .25rem 0 var(--gold);
  transition:transform .12s,box-shadow .12s
}

.btn:hover{
  transform:translate(.125rem,.125rem);
  box-shadow:.125rem .125rem 0 var(--gold)
}

.btn:active{
  transform:translate(.25rem,.25rem);
  box-shadow:0 0 0 var(--gold)
}

.btn-gold{
  background:var(--gold);
  color:var(--ink);
  box-shadow:.25rem .25rem 0 var(--rose-d)
}

.btn-gold:hover{
  box-shadow:.125rem .125rem 0 var(--rose-d)
}

.btn-gold:active{
  box-shadow:0 0 0 var(--rose-d)
}

.btn-line{
  background:transparent;
  color:var(--leaf);
  border-color:var(--leaf);
  box-shadow:.25rem .25rem 0 rgba(0,0,0,.35)
}

.btn-line:hover{
  background:rgba(228,239,234,.08);
  box-shadow:.125rem .125rem 0 rgba(0,0,0,.35)
}

.btn-sm{
  height:2.75rem;
  padding:0 1.125rem;
  font-size:.9375rem;
  border-radius:.75rem;
  box-shadow:.1875rem .1875rem 0 var(--gold)
}

.btn-sm:hover{
  transform:translate(.0625rem,.0625rem);
  box-shadow:.125rem .125rem 0 var(--gold)
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.875rem;
  margin-top:2.125rem
}

/* Nav */

.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:5.25rem
}

.brand{
  display:flex;
  align-items:center;
  gap:.625rem;
  font-family:var(--display);
  font-weight:850;
  font-size:1.5rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em
}

.brand svg{
  width:2.125rem;
  height:2.125rem
}

.menu{
  display:flex;
  gap:1.875rem;
  font-weight:600;
  font-size:.96875rem
}

.menu a{
  padding:.25rem .125rem;
  border-bottom:.125rem solid transparent
}

.menu a:hover{
  border-color:var(--ink)
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:1.125rem
}

.lang{
  font-weight:600;
  font-size:.9375rem
}

.lang:hover{
  text-decoration:underline;
  text-underline-offset:.25rem;
  text-decoration-thickness:.125rem
}

/* Green panels (hero and final call to action) */

.panel{
  position:relative;
  overflow:hidden;
  max-width:88rem;
  margin:0 auto;
  border-radius:2rem;
  background:var(--forest);
  color:var(--canvas)
}

.hero{
  padding:0 1rem
}

.hero .panel{
  padding:3.75rem 0 6.25rem
}

.hero .panel::before{
  content:"";
  position:absolute;
  right:-8%;
  top:-22%;
  width:48.75rem;
  height:48.75rem;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,163,37,.16),rgba(224,163,37,0));
  pointer-events:none
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:2.5rem;
  align-items:center
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  padding:.375rem 1rem .375rem .375rem;
  border-radius:62.4375rem;
  border:.09375rem solid var(--line-d);
  font-weight:600;
  font-size:.9375rem;
  color:var(--leaf)
}

.pill b{
  padding:.125rem .625rem;
  border-radius:62.4375rem;
  background:var(--rose);
  color:#fff;
  font-size:.8125rem;
  font-weight:700
}

.pill:hover{
  border-color:var(--gold)
}

.hero h1{
  margin-top:1.75rem;
  font-size:clamp(3.5rem,6.7vw,6.25rem);
  font-weight:900;
  line-height:.84;
  text-transform:uppercase
}

.hero h1 .ln{
  display:block
}

.hero h1 .gold{
  color:var(--gold)
}

.lede{
  margin-top:1.75rem;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  color:var(--text-d);
  max-width:30em;
  line-height:1.55
}

.hero-note{
  margin-top:1.75rem;
  font-size:.9375rem;
  color:var(--text-d)
}

.hero-note b{
  color:var(--canvas);
  font-weight:700
}

.hero-stripe{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1.125rem;
  padding-top:1.125rem;
  border-top:.0625rem solid var(--line-d);
  max-width:34em;
  font-size:.9375rem;
  color:var(--text-d)
}

.hero-stripe img{
  flex:none;
  width:4.1875rem;
  height:auto
}

/* Lanyard and pass */

.stage{
  position:relative;
  height:41.25rem
}

.hang{
  position:absolute;
  left:50%;
  top:-3.75rem;
  width:23.75rem;
  margin-left:-11.875rem;
  transform-origin:50% 0;
  animation:sway 7s ease-in-out infinite
}

@keyframes sway{
  0%,100%{
    transform:rotate(-2.2deg)
  }

  50%{
    transform:rotate(2.2deg)
  }
}

.strap{
  display:block;
  width:23.75rem;
  height:15.625rem;
  overflow:visible
}

.obj{
  background:var(--canvas);
  color:var(--ink);
  border:.125rem solid var(--ink);
  border-radius:1.25rem;
  box-shadow:.375rem .375rem 0 rgba(0,0,0,.35)
}

.laminate{
  position:relative;
  width:21.25rem;
  margin:-.625rem auto 0;
  padding:2.125rem 0 1.125rem;
  border-radius:1.375rem;
  overflow:hidden
}

.slot{
  position:absolute;
  left:50%;
  top:.875rem;
  width:4.375rem;
  height:.75rem;
  margin-left:-2.1875rem;
  border-radius:6.1875rem;
  background:var(--forest);
  box-shadow:inset 0 .125rem .1875rem rgba(0,0,0,.5)
}

.acc{
  margin:.625rem -.125rem 0;
  padding:.625rem 0 .5rem;
  background:var(--rose);
  color:#fff;
  text-align:center;
  font-family:var(--display);
  font-weight:900;
  font-size:3.125rem;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.02em;
  border-block:.125rem solid var(--ink)
}

.l-body{
  padding:1rem 1.375rem 0
}

.l-event{
  font-family:var(--display);
  font-weight:850;
  font-size:1.625rem;
  line-height:1;
  text-transform:uppercase
}

.l-sub{
  margin-top:.25rem;
  font-size:.875rem;
  color:var(--body)
}

.l-role{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.625rem;
  margin-top:.875rem;
  padding-top:.75rem;
  border-top:.125rem solid var(--ink)
}

.l-role span{
  font-size:.875rem;
  color:var(--body);
  font-weight:600
}

.l-role strong{
  font-family:var(--display);
  font-weight:900;
  font-size:2.5rem;
  line-height:.9;
  text-transform:uppercase
}

.l-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:.75rem;
  border-top:.09375rem dashed rgba(15,42,36,.3)
}

.l-stats div{
  padding:.625rem 0 .5rem
}

.l-stats div:nth-child(odd){
  padding-right:.625rem;
  border-right:.09375rem dashed rgba(15,42,36,.3)
}

.l-stats div:nth-child(even){
  padding-left:.75rem
}

.l-stats div:nth-child(n+3){
  border-top:.09375rem dashed rgba(15,42,36,.3)
}

.l-stats b{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:1.875rem;
  line-height:1;
  font-variant-numeric:tabular-nums
}

.l-stats span{
  display:block;
  font-size:.8125rem;
  line-height:1.3;
  color:var(--body);
  font-weight:600
}

.l-foot{
  display:flex;
  align-items:center;
  gap:.875rem;
  margin:.875rem 1.375rem 0
}

.qr{
  flex:none;
  width:3.625rem;
  height:3.625rem
}

.l-foot span{
  font-size:.8125rem;
  font-weight:700;
  line-height:1.25
}

/* Sections */

section[id]{
  scroll-margin-top:1rem
}

.sec{
  padding-top:8.5rem
}

.sec-h h2{
  max-width:20em
}

.sec-h p{
  margin-top:1.125rem;
  font-size:1.1875rem;
  color:var(--body);
  max-width:34em
}

.sec-h.long p{
  max-width:40em
}

.sec-h.long p+p{
  margin-top:.75rem
}

/* Proof */

.proof{
  padding-top:4.5rem
}

.proof-in{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3.5rem;
  align-items:center
}

.stat strong{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(3.5rem,6vw,5.5rem);
  line-height:.85;
  color:var(--forest)
}

.stat span{
  display:block;
  margin-top:.5rem;
  font-weight:600;
  max-width:15em;
  line-height:1.4
}

.logos-wrap p{
  font-weight:650;
  margin-bottom:1rem
}

.logos{
  flex:none;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:center
}

.logos li{
  flex:none;
  display:flex;
  align-items:center;
  height:5rem;
  padding:0 1.875rem
}

.logos img{
  display:block;
  width:var(--w);
  height:auto;
  max-width:none
}

/* Tickets (formats) */

.tickets{
  margin-top:3.25rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.75rem
}

.ticket{
  --stub:6rem;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--stub);
  background:var(--c);
  color:var(--tc,var(--ink));
  border:.125rem solid var(--ink);
  border-radius:1.125rem;
  box-shadow:var(--sh)
}

.ticket::before,.ticket::after{
  content:"";
  position:absolute;
  right:calc(var(--stub) - .9375rem);
  width:1.75rem;
  height:1.75rem;
  border-radius:50%;
  background:var(--canvas);
  border:.125rem solid var(--ink)
}

.ticket::before{
  top:-.9375rem;
  clip-path:inset(calc(50% - .0625rem) 0 0 0)
}

.ticket::after{
  bottom:-.9375rem;
  clip-path:inset(0 0 calc(50% - .0625rem) 0)
}

.t-main{
  padding:1.5rem 1.625rem 1.625rem
}

.t-kind{
  font-family:var(--display);
  font-weight:900;
  font-size:2.5rem;
  text-transform:uppercase;
  line-height:.9
}

.t-main p{
  margin-top:.75rem;
  font-size:1.03125rem;
  max-width:30em
}

.t-adm{
  margin-top:1rem;
  font-weight:700;
  font-size:.9375rem
}

.t-stub{
  border-left:.125rem dashed currentColor;
  display:grid;
  place-items:center;
  padding:.875rem .375rem
}

.t-stub span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--display);
  font-weight:850;
  font-size:1.375rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap
}

/* Run of show */

.run{
  list-style:none;
  margin:3.5rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  position:relative
}

.run::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:.9375rem;
  height:.125rem;
  background:var(--hair)
}

.run li{
  position:relative;
  padding:2.875rem 1.375rem 0 0
}

.run li::before{
  content:"";
  position:absolute;
  left:0;
  top:.25rem;
  width:1.5rem;
  height:1.5rem;
  border-radius:50%;
  background:var(--canvas);
  border:.15625rem solid var(--ink)
}

.run li.auto::before{
  background:var(--gold)
}

.when{
  font-family:var(--display);
  font-weight:850;
  font-size:1.375rem;
  line-height:1;
  text-transform:uppercase;
  color:var(--rose)
}

.run h3{
  margin-top:.625rem;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.1875rem;
  line-height:1.3
}

.run p{
  margin-top:.5rem;
  font-size:1rem;
  color:var(--body);
  line-height:1.5
}

.run-key{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1.375rem;
  font-size:.9375rem;
  color:var(--body)
}

.run-key span{
  display:inline-flex;
  align-items:center;
  gap:.5rem
}

.run-key i{
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:.15625rem solid var(--ink);
  background:var(--canvas)
}

.run-key i.f{
  background:var(--gold)
}

/* Feature deep dives */

.dive{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:4rem;
  align-items:center
}

.dive.rev{
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)
}

.dive.rev .d-copy{
  order:2
}

.d-copy .lead{
  margin-top:1.25rem;
  font-size:1.15625rem;
  color:var(--body);
  max-width:30em
}

.ticks{
  list-style:none;
  margin:1.625rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem
}

.ticks li{
  position:relative;
  padding-left:2.25rem;
  font-size:1.03125rem;
  font-weight:600;
  line-height:1.4
}

.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:-.0625rem;
  width:1.5rem;
  height:1.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327a488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.6 4.6L19.5 6.8'/%3E%3C/svg%3E") center/contain no-repeat
}

.vis{
  position:relative
}

.vis.stack{
  display:flex;
  flex-direction:column
}

/* "Try it" line above each live screen */

.try{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem .625rem;
  margin:0 0 1.625rem;
  font-size:.9375rem;
  line-height:1.4;
  color:var(--body)
}

.try>i{
  flex:none;
  font-style:normal;
  padding:.0625rem .625rem;
  border:.09375rem solid var(--ink);
  border-radius:62.4375rem;
  background:var(--gold);
  color:var(--ink);
  font-weight:700;
  font-size:.84375rem
}

.try b{
  color:var(--ink);
  font-weight:700
}

.try-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height:2.25rem;
  padding:0 .875rem;
  border:.125rem solid var(--ink);
  border-radius:.625rem;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-weight:700;
  font-size:.90625rem;
  box-shadow:.1875rem .1875rem 0 var(--ink);
  cursor:pointer;
  transition:transform .12s,box-shadow .12s
}

.try-btn:hover{
  transform:translate(.0625rem,.0625rem);
  box-shadow:.125rem .125rem 0 var(--ink)
}

.try-btn:active{
  transform:translate(.1875rem,.1875rem);
  box-shadow:0 0 0 var(--ink)
}

.try-btn[disabled]{
  opacity:.5;
  cursor:default;
  transform:none;
  box-shadow:.1875rem .1875rem 0 var(--ink)
}

/* App screens, drawn with the Signups dashboard's own look:
   Funnel Sans, Azeret Mono badges, white tables with a thin ink border, mustard and coral buttons. */

.app{
  position:relative;
  background:var(--a-bg);
  color:var(--a-ink);
  border:.125rem solid var(--ink);
  border-radius:1rem;
  box-shadow:var(--sh);
  overflow:hidden;
  font-size:.90625rem;
  line-height:1.45
}

.app button{
  margin:0;
  border:0;
  font:inherit;
  cursor:pointer
}

.app button[disabled]{
  cursor:default
}

/* The dashboard chrome: top bar with search and account, icon rail on the left */

.a-top{
  display:flex;
  align-items:center;
  gap:1rem;
  height:3.625rem;
  padding:0 1.125rem;
  background:#fff;
  border-bottom:.0625rem solid var(--a-line)
}

.a-logo{
  flex:none;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--display);
  font-weight:850;
  font-size:1.1875rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em
}

.a-logo svg{
  width:1.5rem;
  height:1.5rem
}

.a-search{
  flex:1;
  min-width:0;
  max-width:20.625rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  height:2.25rem;
  padding:0 .5rem 0 .625rem;
  border:.0625rem solid #e7e5e4;
  border-radius:.25rem;
  background:var(--a-bg);
  color:var(--a-mut);
  font-size:.84375rem
}

.a-search svg{
  flex:none;
  width:.9375rem;
  height:.9375rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round
}

.a-search span{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.a-search kbd{
  flex:none;
  padding:0 .375rem;
  border:.0625rem solid #e7e5e4;
  border-radius:.1875rem;
  background:#fff;
  color:var(--a-ink);
  font-family:var(--mono);
  font-size:.71875rem;
  line-height:1.6
}

.a-acct{
  flex:none;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.625rem;
  font-size:.84375rem;
  line-height:1.25
}

.a-acct b{
  display:block;
  font-weight:600
}

.a-acct small{
  display:block;
  font-size:.78125rem;
  color:var(--a-mut)
}

.a-acct .a-av{
  background:var(--a-pri);
  color:var(--a-ink)
}

.a-body{
  display:grid;
  grid-template-columns:3.875rem minmax(0,1fr)
}

.a-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:1.25rem 0;
  background:#fff;
  border-right:.0625rem solid var(--a-line)
}

.a-rail span{
  display:grid;
  place-items:center;
  width:2.375rem;
  height:2.375rem;
  border-radius:.375rem;
  color:#a8a29e
}

.a-rail span.on{
  background:var(--a-ink);
  color:#fff
}

.a-rail svg,.a-ic{
  width:1.25rem;
  height:1.25rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.a-main{
  min-width:0;
  padding-bottom:.25rem
}

.a-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem 1rem;
  flex-wrap:wrap;
  padding:1.625rem 1.75rem 1.25rem
}

.a-crumb{
  font-size:.84375rem;
  color:var(--a-mut)
}

.a-crumb i{
  font-style:normal;
  margin:0 .375rem
}

.a-title{
  margin-top:.375rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  font-size:1.1875rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.25
}

.a-sub{
  margin-top:.25rem;
  font-size:.875rem
}

.a-sub.m{
  display:flex;
  align-items:center;
  gap:.375rem;
  color:var(--a-mut)
}

.a-sub.m svg{
  flex:none;
  width:.75rem;
  height:.875rem
}

.a-btns{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}

.a-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.375rem;
  height:2.375rem;
  padding:0 1rem;
  border-radius:.1875rem;
  font-size:.875rem;
  font-weight:500;
  color:#fff;
  background:var(--a-ink);
  white-space:nowrap;
  transition:filter .15s,background-color .2s,color .2s
}

.app button.a-btn:not([disabled]):not(.line):not(.ok):hover{
  background:#3f3a32
}

.app button.a-btn.line:not([disabled]):not([aria-pressed="true"]):hover{
  background:#f5f5f4
}

.a-btn[disabled]{
  opacity:.55
}

.a-btn.pri{
  background:var(--a-ink);
  color:#fff
}

.a-btn.ink{
  background:var(--a-ink)
}

.a-btn.line{
  background:#fff;
  color:var(--a-ink);
  box-shadow:inset 0 0 0 .0625rem var(--a-ink)
}

.a-btn.sm{
  height:1.875rem;
  padding:0 .6875rem;
  font-size:.84375rem
}

.a-btn.ok{
  background:#f0fdf4;
  color:#15803d;
  box-shadow:inset 0 0 0 .0625rem #86efac;
  opacity:1
}

/* A soft ring that says "press me", removed after the first press */

.pulse::after{
  content:"";
  position:absolute;
  inset:-.3125rem;
  border:.125rem solid var(--a-ink);
  border-radius:.4375rem;
  animation:ring 1.8s ease-out infinite;
  pointer-events:none
}

@keyframes ring{
  0%{
    opacity:.9;
    transform:scale(.97)
  }

  80%,100%{
    opacity:0;
    transform:scale(1.14)
  }
}

.a-lnk{
  text-decoration:underline;
  text-underline-offset:.25rem;
  text-decoration-thickness:.0625rem;
  white-space:nowrap
}

button.a-lnk{
  position:relative;
  padding:0;
  background:none;
  color:inherit
}

.a-filters{
  display:flex;
  gap:.625rem;
  flex-wrap:wrap;
  padding:0 1.75rem 1.125rem
}

.a-sel{
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  height:2.375rem;
  padding:0 2.25rem 0 .75rem;
  min-width:10.625rem;
  border:.0625rem solid #d6d3d1;
  border-radius:.1875rem;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2324211c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.8 6 6.2l4.5-4.4'/%3E%3C/svg%3E") no-repeat right .75rem center/.6875rem;
  color:var(--a-ink);
  font:inherit;
  font-size:.875rem;
  cursor:pointer
}

.a-sel:hover{
  border-color:var(--a-ink)
}

.a-table{
  margin:0 1.75rem 1.5rem;
  background:#fff;
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem;
  overflow:hidden
}

.a-row{
  display:grid;
  grid-template-columns:var(--cols);
  gap:.875rem;
  align-items:center;
  padding:.8125rem 1.125rem;
  border-top:.0625rem solid var(--a-line)
}

.a-row.h{
  border-top:0;
  background:#fafaf9;
  font-weight:600;
  font-size:.84375rem;
  padding-top:.6875rem;
  padding-bottom:.6875rem
}

.a-row:first-child{
  border-top:0
}

.a-row.sec{
  background:#fafaf9;
  font-weight:600;
  font-size:.84375rem;
  padding-top:.625rem;
  padding-bottom:.625rem
}

.a-row[hidden]{
  display:none
}

.a-row.gone{
  animation:gone .45s ease forwards
}

@keyframes gone{
  to{
    opacity:0;
    transform:translateX(1.5rem)
  }
}

.a-row.fresh{
  animation:fresh 1.2s ease
}

@keyframes fresh{
  0%{
    background:#fefce8
  }

  100%{
    background:transparent
  }
}

.a-empty{
  padding:1.375rem 1.125rem;
  text-align:center;
  color:var(--a-mut)
}

.a-empty button{
  margin-top:.625rem
}

.a-row .r{
  text-align:right
}

.a-who{
  display:flex;
  align-items:center;
  gap:.625rem;
  min-width:0
}

.a-av{
  flex:none;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:#fcd9bd;
  color:#fff;
  font-weight:600;
  font-size:.8125rem
}

.a-who b{
  display:block;
  font-weight:500;
  line-height:1.3
}

.a-who>span:last-child>span{
  display:block;
  font-size:.84375rem;
  color:var(--a-mut);
  line-height:1.3
}

.mono{
  font-family:var(--mono);
  font-size:.78125rem;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.a-in{
  display:inline-flex;
  align-items:center;
  gap:.3125rem
}

.a-in svg{
  width:.875rem;
  height:.875rem;
  flex:none
}

.a-mut{
  color:var(--a-mut)
}

.bdg{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:.3125rem;
  padding:.0625rem .4375rem;
  border:.0625rem solid #cbd5e1;
  border-radius:.25rem;
  background:#f8fafc;
  color:#475569;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:-.03em;
  line-height:1.55;
  white-space:nowrap
}

.bdg.g{
  border-color:#86efac;
  background:#f0fdf4;
  color:#15803d
}

.bdg.r{
  border-color:#fca5a5;
  background:#fef2f2;
  color:#b91c1c
}

.bdg.b{
  border-color:#93c5fd;
  background:#eff6ff;
  color:#1d4ed8
}

.bdg.y{
  border-color:#fde047;
  background:#fefce8;
  color:#a16207
}

.bdg.dot::before{
  content:"";
  width:.375rem;
  height:.375rem;
  border-radius:50%;
  background:currentColor
}

.bdg.flash{
  animation:flash .55s ease
}

@keyframes flash{
  0%{
    transform:scale(1)
  }

  35%{
    transform:scale(1.12)
  }

  100%{
    transform:scale(1)
  }
}

.a-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem 1rem;
  flex-wrap:wrap;
  padding:0 1.75rem 1.5rem;
  font-size:.84375rem;
  color:var(--a-mut)
}

.a-foot .a-lnk{
  color:var(--a-ink)
}

.a-foot b{
  color:var(--a-ink);
  font-weight:600
}

.a-bar{
  height:.5rem;
  border-radius:.125rem;
  background:#e5e7eb;
  overflow:hidden
}

.a-bar i{
  display:block;
  height:100%;
  width:calc(var(--v) * 100%);
  background:var(--c,#fca5a5);
  transition:width .5s cubic-bezier(.2,.8,.2,1),background-color .3s
}

.a-cap{
  display:grid;
  grid-template-columns:4.75rem minmax(0,1fr) 3.625rem;
  gap:.75rem;
  align-items:center
}

.a-cap .mono{
  text-align:right
}

/* Notifications and side cards that float on the screens */

.app-wrap{
  position:relative
}

.a-note{
  --rot:1.5deg;
  position:absolute;
  right:-1.375rem;
  top:-1.25rem;
  z-index:3;
  display:flex;
  align-items:center;
  gap:.625rem;
  max-width:23.75rem;
  padding:.625rem .875rem;
  background:#fff;
  color:var(--a-ink);
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem;
  box-shadow:.25rem .25rem 0 var(--ink);
  transform:rotate(var(--rot));
  font-size:.875rem;
  line-height:1.35
}

.a-note.pop{
  animation:pop .45s cubic-bezier(.2,.9,.3,1.3)
}

@keyframes pop{
  0%{
    opacity:.3;
    transform:rotate(var(--rot)) translateY(.5rem) scale(.94)
  }

  100%{
    opacity:1;
    transform:rotate(var(--rot)) translateY(0) scale(1)
  }
}

.a-note b{
  font-weight:600
}

.a-card{
  position:relative;
  z-index:2;
  align-self:flex-end;
  margin:-.875rem 1.75rem 0 0;
  width:17rem;
  padding:1rem 1.125rem;
  background:#fff;
  color:var(--a-ink);
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem;
  box-shadow:.25rem .25rem 0 var(--ink);
  transform:rotate(-2deg);
  font-size:.875rem
}

.a-card .t{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.625rem;
  font-weight:600;
  font-size:1rem
}

.a-card .p{
  margin-top:.5rem;
  font-weight:600;
  font-size:1.125rem
}

.a-card .p small{
  font-size:.875rem;
  font-weight:500;
  color:var(--a-mut)
}

.a-card .s{
  margin-top:.125rem;
  color:var(--a-mut)
}

/* Financials: the dashboard's statistic boxes and a course table with the app's chart blue */

.a-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.875rem;
  padding:0 1.75rem 1.125rem
}

.a-stat{
  padding:1rem 1rem .875rem;
  background:#fff;
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem
}

.a-stat b{
  display:block;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  font-variant-numeric:tabular-nums
}

.a-stat span{
  display:block;
  margin-top:.125rem;
  font-size:.84375rem
}

.a-stat em{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.25rem .375rem;
  margin-top:.5rem;
  font-style:normal;
  font-size:.8125rem;
  color:var(--a-mut)
}

.a-up{
  color:#15803d
}

.a-pbar{
  display:flex;
  align-items:center;
  gap:.625rem
}

.a-pbar .tr{
  flex:1;
  min-width:0
}

.a-pbar .tr i{
  display:block;
  height:.875rem;
  width:calc(var(--v) * 100%);
  min-width:.1875rem;
  background:rgba(59,99,212,.42);
  border:.0625rem solid #3b63d4;
  border-radius:.125rem;
  transition:width .6s cubic-bezier(.2,.8,.2,1)
}

.a-pbar .mono{
  min-width:4.6em;
  text-align:right
}

.a-fin .a-row>span,.a-stat b,.a-stat em{
  transition:opacity .2s
}

.a-fin.swap .a-row>span:not(.a-pbar),.a-stats.swap .a-stat b{
  opacity:.25
}

/* Sent emails */

.a-row.bounced{
  background:#fef2f2
}

.a-row.on{
  background:#fffbeb;
  box-shadow:inset .1875rem 0 0 var(--a-pri)
}

.a-open{
  display:flex;
  align-items:center;
  min-width:0;
  padding:0;
  background:none;
  color:inherit;
  text-align:left
}

.a-open b{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:.1875rem;
  transition:text-decoration-color .15s
}

.a-open:hover b{
  text-decoration-color:currentColor
}

.a-fix{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:.625rem;
  flex-wrap:wrap;
  font-size:.84375rem
}

.a-fix .msg{
  color:#b91c1c
}

.a-fix .done{
  color:#15803d
}

.a-addr mark{
  background:#dcfce7;
  color:#15803d;
  border-radius:.125rem;
  padding:0 .0625rem
}

.shake{
  animation:shake .4s
}

@keyframes shake{
  0%,100%{
    transform:translateX(0)
  }

  25%{
    transform:translateX(-.25rem)
  }

  75%{
    transform:translateX(.25rem)
  }
}

.a-prev{
  margin:0 1.75rem 1.5rem;
  background:#fff;
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem
}

.a-prev-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem .875rem;
  flex-wrap:wrap;
  padding:.75rem 1rem;
  border-bottom:.0625rem solid var(--a-line);
  background:#fafaf9;
  font-size:.84375rem
}

.a-langs{
  display:flex;
  align-items:center;
  gap:.375rem;
  flex-wrap:wrap;
  color:var(--a-mut)
}

.a-langs .a-btn{
  color:var(--a-ink)
}

.a-langs .a-btn[aria-pressed="true"]{
  background:var(--a-ink);
  color:#fff;
  box-shadow:none
}

.a-mail{
  padding:1.125rem 1.25rem 1.25rem
}

.a-mail .from{
  font-size:.84375rem;
  color:var(--a-mut)
}

.a-mail .subj{
  margin-top:.25rem;
  font-size:1.03125rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3
}

.a-mail .txt{
  margin-top:.625rem;
  max-width:34em
}

.a-mail .a-btn{
  margin-top:.875rem
}

.a-mail.swap{
  animation:fade .35s ease
}

@keyframes fade{
  0%{
    opacity:.2
  }

  100%{
    opacity:1
  }
}

/* Stay legal: the warning panel */

.risk{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--paper);
  border:.125rem solid var(--ink);
  border-radius:1.5rem;
  box-shadow:var(--sh);
  overflow:hidden
}

.risk::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1rem;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 1rem,var(--ink) 1rem 2rem);
  border-bottom:.125rem solid var(--ink)
}

.risk-copy{
  padding:4rem 3rem 3rem
}

.warn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.1875rem .75rem .1875rem .5rem;
  border:.09375rem solid #fca5a5;
  border-radius:62.4375rem;
  background:#fef2f2;
  color:#b91c1c;
  font-weight:700;
  font-size:.90625rem
}

.warn svg{
  width:1.125rem;
  height:1.125rem
}

.risk h2{
  margin-top:1.25rem;
  max-width:16em
}

.risk .lead{
  margin-top:1.25rem;
  font-size:1.15625rem;
  color:var(--body);
  max-width:32em
}

.risk-note{
  margin-top:1.375rem;
  padding-top:1.125rem;
  border-top:.09375rem dashed var(--hair);
  font-weight:600;
  max-width:32em
}

.risk .check{
  padding:4rem 3rem 2.75rem;
  border-left:.125rem dashed var(--hair)
}

.legal-dive{
  margin-top:5rem
}

.fixes h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:2.75rem;
  letter-spacing:-.01em;
  line-height:1.08
}

/* The self-check */

.check h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-.01em;
  line-height:1.2
}

.check>p{
  margin-top:.5rem;
  color:var(--body)
}

.risks{
  list-style:none;
  margin:1.375rem 0 0;
  padding:0;
  border-bottom:.09375rem dashed var(--hair)
}

.risks li{
  border-top:.09375rem dashed var(--hair)
}

.risks label{
  display:flex;
  align-items:flex-start;
  gap:.875rem;
  padding:.875rem .25rem;
  font-weight:600;
  font-size:1.03125rem;
  line-height:1.4;
  cursor:pointer
}

.risks input{
  position:absolute;
  opacity:0;
  width:.0625rem;
  height:.0625rem
}

.box{
  flex:none;
  position:relative;
  width:1.5rem;
  height:1.5rem;
  margin-top:-.0625rem;
  border:.125rem solid var(--ink);
  border-radius:.375rem;
  background:var(--paper);
  transition:background-color .15s,border-color .15s
}

.box::after{
  content:"";
  position:absolute;
  inset:.125rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;
  transform:scale(.4);
  transition:opacity .15s,transform .2s cubic-bezier(.2,.9,.3,1.4)
}

.risks input:checked+.box{
  background:#dc2626;
  border-color:#b91c1c
}

.risks input:checked+.box::after{
  opacity:1;
  transform:scale(1)
}

.risks input:focus-visible+.box{
  outline:.1875rem solid var(--tick);
  outline-offset:.1875rem
}

.risks label:hover .box{
  border-color:#b91c1c
}

.meter{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.375rem
}

.meter i{
  height:.625rem;
  border-radius:.1875rem;
  background:var(--quiet);
  border:.09375rem solid var(--ink);
  transition:background-color .2s
}

.meter i.on{
  background:#dc2626
}

.verdict{
  margin-top:.875rem;
  min-height:3em;
  font-size:1.03125rem;
  line-height:1.45
}

.verdict b{
  font-weight:800
}

.verdict.bad b{
  color:#b91c1c
}

.verdict .fix{
  display:block;
  margin-top:.375rem;
  padding-left:2rem;
  position:relative;
  font-weight:700
}

.verdict .fix::before{
  content:"";
  position:absolute;
  left:0;
  top:-.0625rem;
  width:1.375rem;
  height:1.375rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327a488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.6 4.6L19.5 6.8'/%3E%3C/svg%3E") center/contain no-repeat
}

/* The legal settings screen */

.a-alert{
  display:flex;
  align-items:flex-start;
  gap:.625rem;
  margin:0 1.75rem 1.125rem;
  padding:.75rem .875rem;
  border:.0625rem solid #fca5a5;
  border-radius:.25rem;
  background:#fef2f2;
  color:#991b1b;
  font-size:.875rem;
  line-height:1.45
}

.a-alert svg{
  flex:none;
  width:1.125rem;
  height:1.125rem;
  margin-top:.0625rem
}

.a-alert.ok{
  border-color:#86efac;
  background:#f0fdf4;
  color:#166534
}

.a-form{
  margin:0 1.75rem 1.125rem;
  padding:1rem 1.125rem 1.125rem;
  background:#fff;
  border:.0625rem solid var(--a-ink);
  border-radius:.25rem
}

.a-form label{
  display:block;
  font-weight:600
}

.a-form .hint{
  margin-top:.125rem;
  font-size:.84375rem;
  color:var(--a-mut)
}

.a-form-row{
  display:flex;
  gap:.625rem;
  margin-top:.625rem
}

.a-input{
  flex:1;
  min-width:0;
  height:2.375rem;
  padding:0 .75rem;
  border:.0625rem solid #d6d3d1;
  border-radius:.1875rem;
  background:#fff;
  color:var(--a-ink);
  font:inherit;
  font-size:.90625rem
}

.a-input:focus{
  outline:.125rem solid var(--a-pri);
  outline-offset:0;
  border-color:var(--a-ink)
}

.a-input.bad{
  border-color:#dc2626
}

.a-form .err{
  margin-top:.375rem;
  font-size:.84375rem;
  color:#b91c1c
}

.sel-wrap{
  position:relative;
  display:inline-flex
}

/* Roles: how open spots get filled */

.a-fill{
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.a-seg-l{
  margin-bottom:.375rem;
  font-size:.84375rem;
  color:var(--a-mut)
}

.a-seg{
  display:inline-flex;
  padding:.1875rem;
  border:.0625rem solid #d6d3d1;
  border-radius:.25rem;
  background:#fff
}

.a-seg button{
  height:1.875rem;
  padding:0 .6875rem;
  border-radius:.125rem;
  background:none;
  color:#57534e;
  font-size:.84375rem;
  font-weight:500;
  transition:background-color .15s,color .15s
}

.a-seg button[aria-pressed="true"]{
  background:var(--a-ink);
  color:#fff
}

.a-grp>.a-row:first-child{
  border-top:.0625rem solid var(--a-line)
}

.a-row.a-empty:not([hidden]){
  display:block
}

/* Made for dancers, by dancers */

.crew{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5rem;
  align-items:center
}

.crew .lead{
  margin-top:1.25rem;
  font-size:1.15625rem;
  color:var(--body);
  max-width:30em
}

.crew .lead+.lead{
  margin-top:.875rem
}

.sign{
  margin-top:1.75rem;
  display:flex;
  align-items:center;
  gap:.875rem;
  font-size:.96875rem;
  line-height:1.4;
  color:var(--body)
}

.sign b{
  display:block;
  color:var(--ink);
  font-size:1.03125rem
}

.mono-av{
  flex:none;
  display:grid;
  place-items:center;
  width:3.25rem;
  height:3.25rem;
  border-radius:50%;
  border:.125rem solid var(--ink);
  background:var(--gold);
  color:var(--ink);
  font-family:var(--display);
  font-weight:900;
  font-size:1.625rem
}

.door-wrap{
  position:relative;
  padding:1.875rem 1rem 1.75rem .5rem
}

.door{
  position:relative;
  padding:2.75rem 2.5rem 2.125rem;
  background:var(--paper);
  border:.125rem solid var(--ink);
  border-radius:.375rem;
  box-shadow:var(--sh);
  transform:rotate(-1.6deg)
}

.door::before{
  content:"";
  position:absolute;
  left:50%;
  top:-1.0625rem;
  width:8.5rem;
  height:2rem;
  margin-left:-4.25rem;
  background:rgba(224,163,37,.62);
  border:.0625rem solid rgba(15,42,36,.18);
  transform:rotate(2.5deg)
}

.door-k{
  font-weight:700;
  font-size:.9375rem;
  color:var(--body)
}

.door h3{
  margin-top:.375rem;
  font-weight:900;
  font-size:2.75rem;
  text-transform:uppercase;
  line-height:.9
}

.door ul{
  list-style:none;
  margin:1.375rem 0 0;
  padding:0
}

.door li{
  padding:.75rem 0;
  border-top:.09375rem dashed var(--hair);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.35;
  color:var(--body)
}

.door li span{
  text-decoration:line-through;
  text-decoration-thickness:.1875rem;
  text-decoration-color:var(--forest)
}

/* Customer logos, one line that keeps moving */

.marquee{
  position:relative;
  overflow-x:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)
}

.marquee.go{
  overflow:hidden
}

.m-track{
  display:flex;
  width:-moz-max-content;
  width:max-content
}

.marquee.go .m-track{
  animation:marq 36s linear infinite
}

.marquee.go:hover .m-track{
  animation-play-state:paused
}

@keyframes marq{
  to{
    transform:translateX(-50%)
  }
}

/* Every feature, one ticket */

.stubs{
  list-style:none;
  margin:3.25rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.125rem
}

.stub{
  position:relative;
  padding:1.125rem 1.125rem 1.125rem 1.625rem;
  border:.125rem solid var(--ink);
  border-radius:.75rem;
  background:var(--c);
  box-shadow:.25rem .25rem 0 var(--ink)
}

.stub::before{
  content:"";
  position:absolute;
  left:.625rem;
  top:.75rem;
  bottom:.75rem;
  border-left:.125rem dotted var(--ink)
}

.stub:nth-child(4n+1){
  transform:rotate(-.8deg)
}

.stub:nth-child(4n+2){
  transform:rotate(.6deg)
}

.stub:nth-child(4n+3){
  transform:rotate(-.4deg)
}

.stub:nth-child(4n){
  transform:rotate(.9deg)
}

.stub b{
  display:block;
  font-family:var(--display);
  font-weight:850;
  font-size:1.5rem;
  line-height:1;
  text-transform:uppercase
}

.stub span{
  display:block;
  margin-top:.5rem;
  font-size:.9375rem;
  color:var(--body);
  line-height:1.45
}

/* Quotes */

.q-grid{
  margin-top:3.75rem;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:stretch
}

.quote{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0 4rem 0 0
}

.quote+.quote{
  padding:0 0 0 4rem;
  border-left:.09375rem dashed var(--hair)
}

.q-open{
  margin-left:-.42em
}

.quote blockquote{
  margin:0
}

.quote p{
  font-size:1.625rem;
  font-weight:600;
  line-height:1.36;
  letter-spacing:-.025em;
  text-wrap:pretty
}

.quote+.quote p{
  font-size:2rem;
  line-height:1.25;
  letter-spacing:-.03em
}

.quote mark{
  color:inherit;
  background:linear-gradient(transparent 58%,rgba(224,163,37,.5) 58%);
  padding:0 .05em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone
}

.quote figcaption{
  margin-top:auto;
  padding-top:2.125rem;
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:.96875rem;
  line-height:1.4;
  color:var(--body)
}

.quote figcaption b{
  display:block;
  color:var(--ink);
  font-size:1.0625rem
}

.face{
  flex:none;
  width:4rem;
  height:4rem;
  border-radius:50%;
  -o-object-fit:cover;
     object-fit:cover;
  border:.125rem solid var(--ink);
  box-shadow:.1875rem .1875rem 0 var(--gold)
}

/* Questions */

.faq-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem 2.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem
}

.faq-head .aside{
  color:var(--body);
  font-size:1.0625rem
}

.faq-head .aside a{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:.25rem;
  text-decoration-thickness:.125rem;
  text-decoration-color:var(--rose)
}

.faq-list{
  border-top:.125rem solid var(--ink);
  border-bottom:.125rem solid var(--ink)
}

details+details{
  border-top:.09375rem solid var(--hair)
}

summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding:1.5rem 0;
  font-weight:650;
  font-size:1.25rem;
  letter-spacing:-.015em;
  line-height:1.35;
  transition:color .15s
}

summary:hover{
  color:var(--forest)
}

summary::-webkit-details-marker{
  display:none
}

.pm{
  flex:none;
  position:relative;
  width:2.125rem;
  height:2.125rem;
  border-radius:50%;
  border:.125rem solid var(--ink);
  background:transparent;
  transition:background-color .2s
}

summary:hover .pm,details[open] .pm{
  background:var(--gold)
}

.pm::before,.pm::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:.75rem;
  height:.15625rem;
  border-radius:.125rem;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .25s
}

.pm::after{
  transform:translate(-50%,-50%) rotate(90deg)
}

details[open] .pm::after{
  transform:translate(-50%,-50%)
}

details p{
  max-width:52em;
  padding:0 5rem 1.75rem 0;
  font-size:1.09375rem;
  color:var(--body)
}

/* Final call to action */

.final{
  padding:8.5rem 1rem 0
}

.final .panel{
  padding:6.5rem 1.5rem;
  text-align:center
}

.final .panel::before{
  content:"";
  position:absolute;
  left:50%;
  top:-45%;
  width:56.25rem;
  height:56.25rem;
  margin-left:-28.125rem;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,163,37,.16),rgba(224,163,37,0));
  pointer-events:none
}

.final h2{
  position:relative;
  font-family:var(--display);
  font-size:clamp(3.5rem,8vw,7.75rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.86
}

.final p{
  position:relative;
  margin:1.5rem auto 0;
  font-size:1.15625rem;
  color:var(--text-d);
  max-width:32em
}

.final .cta-row{
  position:relative;
  justify-content:center
}

footer{
  padding:4.5rem 0 2.75rem;
  font-size:.9375rem;
  color:var(--body)
}

.f-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:2.5rem;
  padding-top:3rem;
  border-top:.125rem solid var(--ink)
}

.f-grid .brand{
  color:var(--ink)
}

.f-grid .tag-line{
  margin-top:.75rem;
  max-width:22em
}

.f-grid h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:.9375rem;
  margin-bottom:.75rem;
  line-height:1.3;
  color:var(--ink)
}

.f-grid ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5625rem
}

.f-grid a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.1875rem
}

.f-bottom{
  margin-top:2.75rem;
  padding-top:1.25rem;
  border-top:.09375rem dashed var(--hair);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  font-size:.875rem
}

.legal-note{
  margin-top:.75rem;
  font-size:.8125rem;
  max-width:62em
}

@media (max-width:65rem){
  .hero-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .stage{
    height:41.875rem;
    margin-top:.5rem;
    overflow:hidden
  }

  .hang{
    top:-5.625rem
  }

  .proof-in{
    grid-template-columns:minmax(0,1fr);
    gap:1.75rem
  }

  .tickets{
    grid-template-columns:minmax(0,1fr);
    max-width:40rem
  }

  .run{
    grid-template-columns:minmax(0,1fr);
    row-gap:1.75rem
  }

  .run::before{
    left:.6875rem;
    right:auto;
    top:0;
    bottom:0;
    width:.125rem;
    height:auto
  }

  .run li{
    padding:0 0 0 2.875rem
  }

  .run li::before{
    top:0
  }

  .dive,.dive.rev{
    grid-template-columns:minmax(0,1fr);
    gap:3rem
  }

  .dive.rev .d-copy{
    order:0
  }

  .vis{
    max-width:45rem
  }

  .q-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .stubs{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .quote{
    padding:0
  }

  .quote+.quote{
    margin-top:2.75rem;
    padding:2.75rem 0 0;
    border-left:0;
    border-top:.09375rem dashed var(--hair)
  }

  .f-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .risk{
    grid-template-columns:minmax(0,1fr)
  }

  .risk .check{
    padding:2.25rem 3rem 2.75rem;
    border-left:0;
    border-top:.125rem dashed var(--hair)
  }

  .legal-dive{
    margin-top:3.5rem
  }

  .crew{
    grid-template-columns:minmax(0,1fr);
    gap:2.5rem
  }

  .door-wrap{
    max-width:35rem
  }
}

@media (max-width:53.75rem){
  .menu,.lang{
    display:none
  }
}

@media (max-width:43.75rem){
  .a-note{
    --rot:-1deg;
    position:relative;
    right:auto;
    top:auto;
    width:-moz-fit-content;
    width:fit-content;
    max-width:100%;
    margin-bottom:1rem
  }

  .try{
    margin-bottom:1.125rem
  }

  .a-card{
    margin:-.75rem .75rem 0 0;
    width:auto;
    max-width:17.5rem
  }

  .a-body{
    grid-template-columns:minmax(0,1fr)
  }

  .a-rail{
    display:none
  }

  .a-acct>span:last-child,.a-search kbd{
    display:none
  }

  .a-row.h{
    display:none
  }

  .a-row.up{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"who amt" "fu act";
    row-gap:.625rem
  }

  .a-row.up .c-who{
    grid-area:who
  }

  .a-row.up .c-amt{
    grid-area:amt
  }

  .a-row.up .c-fu{
    grid-area:fu
  }

  .a-row.up .c-act{
    grid-area:act
  }

  .a-row.m2{
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:.5rem
  }

  .a-row.m2 .w{
    grid-column:1 / -1
  }

  .a-row.m2 .hide{
    display:none
  }

  .a-fin .a-row.m2{
    grid-template-columns:4rem minmax(0,1fr);
    -moz-column-gap:.875rem;
         column-gap:.875rem
  }

  .a-stats{
    grid-template-columns:minmax(0,1fr)
  }

  .a-stat{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    -moz-column-gap:.75rem;
         column-gap:.75rem;
    align-items:baseline
  }

  .a-stat em{
    grid-column:1 / -1
  }
}

@media (max-width:38.75rem){
  body{
    font-size:1rem
  }

  .wrap{
    padding:0 1rem
  }

  .nav-in{
    height:4.75rem
  }

  .hero{
    padding:0 .5rem
  }

  .hero .panel{
    padding:2.25rem 0 4rem;
    border-radius:1.5rem
  }

  .hero h1{
    font-size:clamp(3rem,15vw,4.5rem)
  }

  .stage{
    height:37.5rem
  }

  .hang{
    transform:scale(.88);
    transform-origin:50% 0;
    animation:none;
    top:-4.375rem
  }

  .sec{
    padding-top:6rem
  }

  .proof{
    padding-top:3.5rem
  }

  .logos li{
    height:4rem;
    padding:0 1.375rem
  }

  .logos img{
    width:calc(var(--w) * .8)
  }

  .ticket{
    --stub:4rem
  }

  .t-main{
    padding:1.25rem 1.125rem 1.375rem
  }

  .t-kind{
    font-size:2.125rem
  }

  .t-stub span{
    font-size:1.125rem
  }

  .a-top{
    height:3.375rem;
    padding:0 .75rem;
    gap:.625rem
  }

  .a-logo span{
    display:none
  }

  .a-head{
    padding:1.25rem 1rem 1rem
  }

  .a-filters,.a-foot,.a-stats{
    padding-left:1rem;
    padding-right:1rem
  }

  .a-table,.a-prev,.a-alert,.a-form{
    margin-left:1rem;
    margin-right:1rem
  }

  .a-row{
    padding-left:.75rem;
    padding-right:.75rem
  }

  .a-sel{
    min-width:0;
    flex:1
  }

  .a-mail{
    padding:1rem .875rem 1.125rem
  }

  .a-prev-top{
    padding:.625rem .75rem
  }

  .risk-copy{
    padding:2.75rem 1.375rem 1.875rem
  }

  .risk .check{
    padding:1.875rem 1.375rem 2rem
  }

  .risk .lead{
    font-size:1.0625rem
  }

  .door-wrap{
    padding:1.5rem .5rem 1rem .25rem
  }

  .door{
    padding:2.375rem 1.375rem 1.625rem
  }

  .door h3{
    font-size:2.375rem
  }

  .door li{
    font-size:1.03125rem
  }

  .stubs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem
  }

  .stub{
    padding:.875rem .75rem .875rem 1.375rem;
    box-shadow:.1875rem .1875rem 0 var(--ink)
  }

  .stub::before{
    left:.5rem
  }

  .stub b{
    font-size:1.25rem;
    overflow-wrap:anywhere
  }

  .stub span{
    font-size:.90625rem
  }

  .quote p{
    font-size:1.3rem
  }

  .quote+.quote p{
    font-size:1.55rem
  }

  summary{
    font-size:1.125rem;
    padding:1.25rem 0
  }

  details p{
    padding-right:0;
    font-size:1.03125rem
  }

  .final{
    padding:6rem .5rem 0
  }

  .final .panel{
    padding:4rem 1.125rem;
    border-radius:1.5rem
  }

  .f-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }

  .f-grid>div:first-child{
    grid-column:1/-1
  }
}

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

  html{
    scroll-behavior:auto
  }
}

/* ---------- Inner pages (features, book a demo, contact) ---------- */

.menu a[aria-current="page"]{
  border-color:var(--ink)
}

.hero.sub .panel{
  padding:4rem 0 4.75rem
}

.sub-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:4rem;
  align-items:center
}

.kick{
  font-family:var(--display);
  font-weight:850;
  font-size:1.375rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--gold)
}

.hero.sub h1{
  margin-top:1.125rem;
  font-size:clamp(3.375rem,5.8vw,5.75rem);
  font-weight:900;
  line-height:.86;
  text-transform:uppercase
}

.hero.sub h1 .ln{
  display:block
}

.hero.sub h1 .gold{
  color:var(--gold)
}

.ticks.dark li{
  color:var(--canvas)
}

.ticks.dark li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a325' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.6 4.6L19.5 6.8'/%3E%3C/svg%3E")
}

/* The setlist: a taped paper card that jumps to each part of the features page */

.setlist{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:27.5rem;
  padding:2.625rem 2.125rem 1.625rem;
  background:var(--canvas);
  color:var(--ink);
  border:.125rem solid var(--ink);
  border-radius:.375rem;
  box-shadow:.375rem .375rem 0 rgba(0,0,0,.35);
  transform:rotate(1.4deg)
}

.setlist::before{
  content:"";
  position:absolute;
  left:50%;
  top:-1.0625rem;
  width:8.5rem;
  height:2rem;
  margin-left:-4.25rem;
  background:rgba(224,163,37,.7);
  border:.0625rem solid rgba(15,42,36,.18);
  transform:rotate(-2deg)
}

.setlist .k{
  font-weight:700;
  font-size:.9375rem;
  color:var(--body)
}

.setlist h2{
  margin-top:.25rem;
  font-family:var(--display);
  font-weight:900;
  font-size:2.75rem;
  line-height:.9;
  letter-spacing:0;
  text-transform:uppercase
}

.setlist ol{
  list-style:none;
  margin:1.125rem 0 0;
  padding:0
}

.setlist li{
  border-top:.09375rem dashed var(--hair)
}

.setlist a{
  display:flex;
  align-items:center;
  gap:.875rem;
  padding:.5625rem .125rem;
  font-weight:650;
  font-size:1.0625rem;
  line-height:1.3
}

.setlist a i{
  flex:none;
  min-width:1.6em;
  font-style:normal;
  font-family:var(--display);
  font-weight:850;
  font-size:1.375rem;
  line-height:1;
  color:var(--rose)
}

.setlist a svg{
  flex:none;
  width:1.125rem;
  height:1.125rem;
  margin-left:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .15s
}

.setlist a:hover{
  color:var(--forest)
}

.setlist a:hover svg{
  transform:translateY(.1875rem)
}

/* Feature categories: a coloured stub on the left that stays in view, the features on the right */

.cat-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:4rem;
  align-items:start
}

.cat-card{
  position:sticky;
  top:1.75rem;
  padding:1.875rem 1.875rem 2rem 2.75rem;
  background:var(--c);
  border:.125rem solid var(--ink);
  border-radius:1rem;
  box-shadow:var(--sh)
}

.cat-card::before{
  content:"";
  position:absolute;
  left:1.125rem;
  top:1.125rem;
  bottom:1.125rem;
  border-left:.125rem dotted var(--ink)
}

.act{
  font-family:var(--display);
  font-weight:850;
  font-size:1.375rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--rose)
}

.cat-card h2{
  margin-top:.75rem
}

.cat-card p{
  margin-top:.875rem;
  font-size:1.09375rem;
  color:var(--body);
  max-width:28em
}

.cat-card .act{
  margin-top:0;
  font-size:1.375rem;
  color:var(--rose)
}

.feats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.125rem 2.5rem
}

.feat{
  padding-top:1rem;
  border-top:.125rem solid var(--ink)
}

.feat h3{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.375rem .625rem;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.1875rem;
  letter-spacing:-.01em;
  line-height:1.3
}

.feat p{
  margin-top:.5rem;
  font-size:1.03125rem;
  color:var(--body);
  line-height:1.55
}

.tag-new{
  display:inline-block;
  padding:.0625rem .625rem;
  border-radius:62.4375rem;
  background:var(--rose);
  color:#fff;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1.6
}

/* Forms (book a demo, contact) */

.form-card{
  position:relative;
  padding:2.125rem 2.125rem 1.875rem;
  background:var(--canvas);
  color:var(--ink);
  border:.125rem solid var(--ink);
  border-radius:1.375rem;
  box-shadow:.375rem .375rem 0 rgba(0,0,0,.35)
}

.form-card h2{
  font-size:2rem
}

.form-card .sub{
  margin-top:.375rem;
  color:var(--body);
  font-size:1.03125rem;
  line-height:1.5
}

.fgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.125rem 1rem;
  margin-top:1.5rem
}

.field{
  display:flex;
  flex-direction:column;
  gap:.375rem;
  min-width:0
}

.field.full{
  grid-column:1 / -1
}

.field label{
  font-weight:700;
  font-size:.96875rem;
  line-height:1.3
}

.field label small{
  margin-left:.25rem;
  font-weight:500;
  font-size:.9375rem;
  color:var(--body)
}

.input{
  width:100%;
  height:3.25rem;
  padding:0 .875rem;
  border:.125rem solid var(--ink);
  border-radius:.75rem;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-size:1.03125rem;
  line-height:1.4
}

textarea.input{
  height:auto;
  min-height:8rem;
  padding:.75rem .875rem;
  resize:vertical
}

.input::-moz-placeholder{
  color:#7d8a84
}

.input::placeholder{
  color:#7d8a84
}

.input:focus{
  outline:.1875rem solid var(--tick);
  outline-offset:.125rem
}

.input[aria-invalid="true"]{
  border-color:#b91c1c;
  background:#fef2f2
}

.ferr{
  font-size:.9375rem;
  font-weight:600;
  color:#b91c1c
}

.hp{
  position:absolute;
  left:-624.9375rem;
  width:.0625rem;
  height:.0625rem;
  overflow:hidden
}

.form-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem 1.5rem;
  margin-top:1.5rem
}

.form-foot p{
  font-size:.9375rem;
  line-height:1.45;
  color:var(--body)
}

.form-foot p a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.1875rem
}

.form-done{
  outline:none
}

.form-done .ok{
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  border-radius:50%;
  background:var(--leaf);
  border:.125rem solid var(--ink)
}

.form-done .ok svg{
  width:1.875rem;
  height:1.875rem;
  fill:none;
  stroke:var(--forest);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round
}

.form-done h2{
  margin-top:1.25rem
}

.form-done p{
  margin-top:.625rem;
  font-size:1.09375rem;
  color:var(--body)
}

.form-done p b{
  color:var(--ink)
}

/* Contact details on the green panel */

.ways{
  list-style:none;
  margin:2.125rem 0 0;
  padding:0;
  display:grid;
  gap:1rem
}

.ways li{
  display:flex;
  align-items:center;
  gap:.875rem;
  font-size:1rem;
  line-height:1.4;
  color:var(--text-d)
}

.w-ic{
  flex:none;
  display:grid;
  place-items:center;
  width:2.875rem;
  height:2.875rem;
  border:.125rem solid var(--ink);
  border-radius:50%;
  background:var(--gold);
  color:var(--ink)
}

.w-ic svg{
  width:1.25rem;
  height:1.25rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.ways b{
  display:block;
  font-weight:700;
  color:var(--canvas)
}

.ways a{
  color:var(--canvas);
  text-decoration:underline;
  text-underline-offset:.25rem;
  text-decoration-thickness:.125rem;
  text-decoration-color:var(--gold)
}

/* What happens after you ask for a demo */

.run.four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

@media (max-width:65rem){
  .sub-grid{
    grid-template-columns:minmax(0,1fr);
    gap:3rem
  }

  .setlist{
    justify-self:start
  }

  .form-card{
    max-width:40rem
  }

  .cat-grid{
    grid-template-columns:minmax(0,1fr);
    gap:2.5rem
  }

  .cat-card{
    position:relative;
    top:auto;
    max-width:40rem
  }

  .run.four{
    grid-template-columns:minmax(0,1fr)
  }
}

@media (max-width:43.75rem){
  .feats{
    grid-template-columns:minmax(0,1fr);
    gap:1.625rem
  }
}

@media (max-width:38.75rem){
  .hero.sub .panel{
    padding:2.5rem 0 3rem
  }

  .hero.sub h1{
    font-size:clamp(2.875rem,14vw,4.25rem)
  }

  .setlist{
    padding:2.375rem 1.25rem 1.25rem;
    transform:rotate(.8deg)
  }

  .setlist h2{
    font-size:2.375rem
  }

  .cat-card{
    padding:1.5rem 1.25rem 1.625rem 2.25rem
  }

  .cat-card::before{
    left:.875rem
  }

  .form-card{
    padding:1.625rem 1.125rem 1.375rem;
    border-radius:1.125rem
  }

  .fgrid{
    grid-template-columns:minmax(0,1fr)
  }

  .form-foot{
    grid-template-columns:minmax(0,1fr)
  }

  .form-foot .btn{
    width:100%;
    order:-1
  }
}

/* ---------- Additions for the Rails pages (not in the design files) ---------- */

/* Screen-reader-only text from shared helpers (external_link_to's "opens in a new tab"), like the design's .sr */

.sr-only{
  position:absolute;
  width:.0625rem;
  height:.0625rem;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

/* The demo and contact forms sit in a turbo frame, so the server can swap in its answer. */

turbo-frame{
  display:block
}

/* Legal pages: plain documents in the design's type. Their templates are shared with Dancemin
   (DanceminLegalDocument), so they keep their markup: a .wrapper with headings, paragraphs and lists. */

main>.wrapper{
  width:100%;
  max-width:53.75rem;
  margin:0 auto;
  padding:4.5rem 1.5rem 0;
  font-size:1.0625rem;
  color:var(--body)
}

.wrapper h1{
  margin-bottom:2.5rem;
  font-size:clamp(3rem,6vw,5rem);
  font-weight:900;
  line-height:.86;
  text-transform:uppercase;
  color:var(--ink)
}

.wrapper h2{
  margin:3.5rem 0 1rem;
  font-size:2rem;
  color:var(--ink)
}

.wrapper h3{
  margin:2rem 0 .625rem;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.3;
  color:var(--ink)
}

.wrapper p+p,.wrapper p+ul,.wrapper ul+p,.wrapper div+p,.wrapper p+div{
  margin-top:.75rem
}

.wrapper ul{
  margin:0;
  padding-left:1.25em
}

.wrapper li+li{
  margin-top:.375rem
}

.wrapper a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.1875rem;
  overflow-wrap:anywhere
}

.wrapper strong{
  color:var(--ink)
}

@media (max-width:38.75rem){
  main>.wrapper{
    padding:3rem 1rem 0;
    font-size:1rem
  }

  .wrapper h2{
    margin-top:2.75rem;
    font-size:1.6rem
  }
}