@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(font-8f704806dbed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(font-360cba2701b9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --gx{syntax:"<percentage>";inherits:true;initial-value:32%}
@property --gy{syntax:"<percentage>";inherits:true;initial-value:24%}
:root{
  --black:#000;
  --white:#fff;
  --red:#D40A14;        /* sampled from the SC mark */
  --red-deep:#A8070F;
  --smoke:#A6A6A6;      /* secondary text on black */
  --ash:#555;           /* secondary text on white */
  --rule-dark:#2B2B2B;
  --rule-light:#D9D9D9;
  --disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1240px;
  --gut:clamp(20px,4vw,40px);
  interpolate-size:allow-keywords;
  /* Texture for the "Made for the people on the call" section only: film grain and paint splotches from an SVG noise filter */
  --grain-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .26 0 0 0 -.085'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --splat-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .007' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 34 0 0 0 -18.87' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 -1.3'/%3E%3CfeComposite in='b' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.1'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.on-red :focus-visible,.form :focus-visible{outline-color:var(--black)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--black);padding:10px 16px;z-index:20}
.skip:focus{left:0}

/* Display type: one voice, heavy and condensed */
.disp{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
h2.disp{font-size:clamp(2.5rem,5.4vw,4.25rem)}

/* Buttons: a solid block that fills from the left on hover */
.btn{--bg:var(--red);--sweep:var(--white);--sweep-ink:var(--red);
  display:inline-block;font:900 1.375rem/1 var(--disp);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;text-align:center;padding:17px 28px;border:0;border-radius:0;cursor:pointer;color:var(--white);
  background:linear-gradient(var(--sweep),var(--sweep)) left/0% 100% no-repeat var(--bg);
  transition:background-size .3s var(--ease),color .2s,transform .1s}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:var(--sweep-ink)}
.btn:active{transform:translateY(2px)}
.btn-sm{font-size:1.125rem;padding:11px 18px}
.btn-black{--bg:var(--black);--sweep-ink:var(--black)}
.form .btn{--sweep:var(--black);--sweep-ink:var(--white)}

/* Nav, with a red line that tracks how far down the page you are */
.nav{position:sticky;top:0;z-index:10;background:var(--black);border-bottom:1px solid var(--rule-dark)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.brand{display:block;flex:none}
.brand img{display:block;height:40px;width:auto}
.nav-links{display:flex;gap:28px;font-size:.9375rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--smoke);padding:4px 0;background:linear-gradient(var(--red),var(--red)) left bottom/0% 2px no-repeat;transition:background-size .25s var(--ease),color .15s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--white);background-size:100% 2px}

/* Hero: the step-and-repeat backdrop sits dimmed behind the content, quieter behind the headline */
.hero{position:relative;isolation:isolate;overflow:clip}
.hero::before{content:"";position:absolute;inset:-5%;z-index:-1;background:url("pattern.webp") center/cover;opacity:.22;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 30%,#000 75%);mask-image:linear-gradient(100deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.28) 30%,#000 75%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(40px,7vw,88px)}
.hero h1{font-size:clamp(3.1rem,7.3vw,6.25rem)}
.hero h1 span{display:block}
.lead{margin-top:26px;font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:500;color:#E6E6E6}
.badges{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,172px));gap:clamp(10px,2vw,26px);align-items:center}
.badges img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));transition:transform .25s var(--ease)}
.badges li:hover img{transform:translateY(-4px)}

/* Quote form */
.form{background:var(--white);color:var(--black);border-top:8px solid var(--red);padding:clamp(22px,3vw,34px);scroll-margin-top:84px}
.form h2{font-size:2.25rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.9063rem}
.field label small{font-weight:400;color:var(--ash);font-size:inherit}
.field input,.field select,.field textarea{width:100%;font:400 1rem/1.3 var(--body);color:var(--black);background:var(--white);border:2px solid var(--black);border-radius:0;padding:11px 12px;appearance:none;transition:border-color .15s,box-shadow .15s}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red)}
.field .err{display:none;color:var(--red-deep);font-size:.875rem;font-weight:600}
.field.bad .err{display:block}
.field.bad input,.field.bad select{border-color:var(--red)}
.form .btn{width:100%;margin-top:18px}
.form .fine{margin-top:12px;font-size:.875rem;color:var(--ash)}

/* Sections */
.sec{padding-block:clamp(56px,9vw,112px)}
.light{background:var(--white);color:var(--black)}
#who{background:var(--grain-w),linear-gradient(105deg,#000 22%,rgba(0,0,0,0) 80%),var(--splat-w) right top/cover no-repeat,#000}
.sec-head{max-width:30ch}

/* What a quote includes, beside the coin */
.incl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:center}
.coin-stage{width:100%;max-width:470px;margin-inline:auto;perspective:1000px}
.coin-tilt{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.coin-stage.tilting .coin-tilt{transition-duration:.1s}
.coin-tilt img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 24px rgba(0,0,0,.34))}
.coin-glare{position:absolute;inset:1%;border-radius:50%;pointer-events:none;mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.75),rgba(255,255,255,0) 48%)}
.incl-list{margin-top:28px;border-top:3px solid var(--black)}
.incl-list div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--rule-light)}
.incl-list dt{font-weight:700}
.incl-list dd{color:var(--ash)}

/* Who it's for */
.units{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-dark);border-left:1px solid var(--rule-dark)}
.units li{position:relative;padding:26px 24px 30px;border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
.units li::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.units li:hover::before{transform:scaleX(1)}
.units h3{font:900 1.875rem/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.units p{margin-top:10px;color:var(--smoke);font-size:1rem}

/* Process: a real sequence, so it gets numbers */
.steps{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.steps li{counter-increment:s;padding-top:17px;background:linear-gradient(var(--black),var(--black)) left top/100% 3px no-repeat}
.steps li::before{content:counter(s);display:block;font:900 4.5rem/.9 var(--disp);color:var(--red)}
.steps h3{margin-top:12px;font-size:1.1875rem;font-weight:700;line-height:1.25}
.steps p{margin-top:6px;color:var(--ash);font-size:1rem}

/* Questions */
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,88px);align-items:start}
.faq-list{border-top:1px solid var(--rule-dark)}
.faq details{border-bottom:1px solid var(--rule-dark)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font-weight:600;font-size:1.125rem;list-style:none;transition:color .15s}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--red),var(--red)) center/100% 3px no-repeat,linear-gradient(var(--red),var(--red)) center/3px 100% no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{padding:0 40px 22px 0;color:var(--smoke);max-width:62ch}

/* Closing band */
.on-red{background:var(--red);color:var(--white)}
.on-red .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;padding-block:clamp(44px,6vw,72px)}
.on-red h2{font-size:clamp(2.5rem,6vw,4.75rem);max-width:16ch}

/* Footer */
.foot{border-top:1px solid var(--rule-dark);font-size:.9375rem;color:var(--smoke)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-block:28px}
.foot .brand img{height:34px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a:hover{color:var(--white)}

/* ---------- Motion. All of it is skipped for people who ask for reduced motion. ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Load: headline lands line by line, then the supporting line, badges and form follow */
  .hero h1 span,.lead,.badges li,.js .hero .form{opacity:0;transform:translateY(.35em);animation:land .55s var(--ease) forwards}
  .hero h1 span:nth-child(2){animation-delay:.08s}
  .hero h1 span:nth-child(3){animation-delay:.16s}
  .hero h1 span:nth-child(4){animation-delay:.24s}
  .lead{animation-delay:.38s}
  .badges li:nth-child(1){animation-delay:.48s}
  .badges li:nth-child(2){animation-delay:.56s}
  .badges li:nth-child(3){animation-delay:.64s}
  .js .hero .form{transform:translateY(28px);animation-duration:.7s;animation-delay:.2s}
  @keyframes land{to{opacity:1;transform:none}}

  /* The backdrop drifts slowly along the angle of the logos */
  .hero::before{animation:drift 40s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate3d(-2.5%,2%,0)}to{transform:translate3d(2.5%,-2%,0)}}

  /* Scroll reveals (only when the script is running, so nothing is hidden without it) */
  .js [data-rv="wipe"]>span{display:block;clip-path:inset(-12% 100% -12% -2%);transition:clip-path .8s var(--ease)}
  .js [data-rv="wipe"].in>span{clip-path:inset(-12% -2% -12% -2%)}

  .js [data-rv="rise"]>*{opacity:0;transform:translateY(18px);transition:opacity .5s calc(var(--i,0)*70ms),transform .55s var(--ease) calc(var(--i,0)*70ms)}
  .js [data-rv="rise"].in>*{opacity:1;transform:none}

  .js [data-rv="steps"] li{background-size:0% 3px;transition:background-size .7s var(--ease) calc(var(--i,0)*150ms)}
  .js [data-rv="steps"] li>*,.js [data-rv="steps"] li::before{opacity:0;transform:translateY(16px);transition:opacity .5s calc(var(--i,0)*150ms + .15s),transform .55s var(--ease) calc(var(--i,0)*150ms + .15s)}
  .js [data-rv="steps"].in li{background-size:100% 3px}
  .js [data-rv="steps"].in li>*,.js [data-rv="steps"].in li::before{opacity:1;transform:none}

  /* The coin rolls in from the left and settles */
  .js [data-rv="coin"] .coin-roll{opacity:0;transform:translateX(-60%) rotate(-220deg);transition:transform 1.3s cubic-bezier(.16,.84,.3,1),opacity .35s}
  .js [data-rv="coin"].in .coin-roll{opacity:1;transform:none}

  /* Tied to scroll position where the browser supports it: progress line, light across the coin */
  @supports (animation-timeline:scroll()){
    .nav::after{animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{to{transform:scaleX(1)}}
    .coin-glare{animation:sheen linear both;animation-timeline:view();animation-range:cover 5% cover 95%}
    .tilting .coin-glare{animation:none}
    @keyframes sheen{from{--gx:0%;--gy:8%}to{--gx:100%;--gy:78%}}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

@media (max-width:980px){
  .hero .wrap,.incl,.faq{grid-template-columns:1fr}
  .hero::before{background:url("pattern.webp") top center/820px auto no-repeat;opacity:.16;
    -webkit-mask-image:linear-gradient(#000,transparent 780px);mask-image:linear-gradient(#000,transparent 780px)}
  .nav-links{display:none}
  .units{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .coin-stage{max-width:320px}
}
@media (max-width:600px){
  .hero h1{font-size:min(11.5vw,3.1rem)}
  .brand img{height:34px}
  .fields{grid-template-columns:1fr}
  .units,.steps{grid-template-columns:1fr}
  .incl-list div{grid-template-columns:1fr}
  .faq details p{padding-right:0}
  .on-red .btn{width:100%}
}

/* Keep the content visible even when JavaScript is unavailable. */
fieldset[disabled]{opacity:.7} button:disabled{cursor:not-allowed}