@font-face{
  font-family:Manrope;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap}
:root{
  --paper:#f6f7f9;
  --ink:#101b35;
  --blue:#174fc8;
  --muted:#53617a;
  --line:#a6afbd;
  --cyan:#83f3ff;
  font-family:Manrope,system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:32px}
body{
  margin:0}
a{
  color:inherit;
  text-underline-offset:4px}
a:hover{
  color:var(--blue)}
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:5px}
.shell{
  max-width:1440px;
  margin:auto;
  padding:0 62px}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:34px 0}
.wordmark{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  font-size:34px;
  font-weight:750;
  letter-spacing:-1.5px}
.wordmark img{
  border-radius:23%}
nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:17px}
nav a{
  text-decoration:none}
.accent{
  color:var(--blue)}
.status{
  border-left:1px solid var(--line);
  padding-left:34px;
  color:var(--muted)}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 365px;
  gap:50px;
  padding:88px 0 50px;
  align-items:start}
.intro h1{
  font-size:clamp(46px,6.3vw,88px);
  line-height:1.1;
  letter-spacing:-.065em;
  font-weight:750;
  margin:0 0 34px;
  white-space:nowrap}
.intro h1 span{
  color:var(--blue)}
.description{
  font-size:29px;
  line-height:1.38;
  letter-spacing:-.035em;
  max-width:740px;
  margin:0 0 36px}
.hero-mark{
  margin:9px 0 0;
  text-align:center}
.hero-mark img{
  display:block;
  width:100%;
  height:auto;
  border-radius:23%;
  margin:0 auto 20px}
.hero-mark figcaption{
  font-size:16px;
  color:var(--muted);
  white-space:nowrap}
form{
  max-width:714px;
  scroll-margin-top:30px}
.email-label{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-bottom:8px}
.form-row{
  display:flex;
  gap:14px}
.form-row input{
  min-width:0;
  flex:1;
  border:1px solid #a6afbd;
  border-radius:6px;
  background:white;
  padding:15px 22px;
  font:inherit;
  font-size:18px;
  color:var(--ink)}
input::placeholder{
  color:#64718a}
button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--blue);
  color:white;
  border:0;
  border-radius:6px;
  padding:16px 25px;
  font:600 18px Manrope,system-ui;
  cursor:pointer;
  min-height:56px}
button:hover{
  background:#103fa7}
button:disabled{
  opacity:.7;
  cursor:wait}
button svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round}
.consent{
  display:flex;
  align-items:center;
  gap:12px;
  margin:17px 0 9px;
  font-size:16px;
  color:var(--muted);
  min-height:26px;
  cursor:pointer}
.consent input{
  width:21px;
  height:21px;
  margin:0;
  accent-color:var(--blue)}
.small{
  font-size:14px;
  color:var(--muted);
  margin:0}
.small a{
  text-decoration:none}
.small a:hover{
  text-decoration:underline}
.trap{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden}
#form-status{
  font-size:16px;
  line-height:1.5;
  border-left:3px solid var(--blue);
  padding:10px 14px;
  margin:18px 0 0}
#form-status.error{
  border-color:#a22222;
  color:#862020}
.idea{
  border-top:1px solid var(--line);
  padding:52px 0;
  display:grid;
  grid-template-columns:39% 1fr;
  gap:40px}
.idea h2{
  font-size:54px;
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0;
  font-weight:750}
.idea p{
  font-size:24px;
  line-height:1.4;
  letter-spacing:-.025em;
  margin:0 0 20px}
.idea p:last-child{
  margin-bottom:0}
.idea .muted{
  font-size:20px;
  color:var(--muted)}
footer{
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0 34px;
  color:var(--muted);
  font-size:14px}
footer nav{
  font-size:14px;
  gap:26px}
.skip{
  position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:10}
.skip:focus{
  top:8px}
.document{
  max-width:840px;
  padding:70px 0 90px}
.document h1{
  font-size:64px;
  letter-spacing:-.05em;
  line-height:1.05;
  margin:0 0 30px}
.document h2{
  font-size:27px;
  margin:40px 0 12px}
.document p,.document li{
  font-size:18px;
  line-height:1.7}
.document .lead{
  font-size:25px;
  line-height:1.5}
.brand-logo{
  width:140px;
  border-radius:23%}
.swatches{
  display:flex;
  flex-wrap:wrap;
  gap:18px}
.swatch{
  border-top:45px solid var(--ink);
  padding-top:10px;
  font-size:14px;
  min-width:135px}
.swatch.blue{
  border-color:var(--blue)}
.swatch.cyan{
  border-color:var(--cyan)}
.swatch.paper{
  border-color:#e5e8ed}
@media(min-width:1400px){
  .hero{
  padding-top:96px;
  padding-bottom:51px}
}
@media(max-width:1100px){
  .shell{
  padding:0 36px}
.hero{
  grid-template-columns:minmax(0,1fr) 270px;
  gap:30px;
  padding-top:66px}
.intro h1{
  font-size:5.9vw}
.description{
  font-size:24px}
.hero-mark{
  margin-top:12px}
.hero-mark figcaption{
  font-size:13px}
.idea h2{
  font-size:42px}
.idea p{
  font-size:21px}
}
@media(max-width:760px){
  .shell{
  padding:0 24px}
header{
  padding:24px 0}
.wordmark{
  font-size:27px;
  gap:10px}
.wordmark img{
  width:36px;
  height:36px}
header nav{
  gap:0;
  font-size:14px}
header nav a{
  display:none}
.status{
  border:0;
  padding:0}
.hero{
  grid-template-columns:1fr;
  gap:38px;
  padding:38px 0}
.intro h1{
  font-size:clamp(36px,7.5vw,56px);
  letter-spacing:-.055em;
  margin-bottom:24px}
.description{
  font-size:22px;
  margin-bottom:30px}
.hero-mark{
  margin:0;
  display:flex;
  align-items:center;
  gap:24px;
  text-align:left}
.hero-mark img{
  width:140px;
  margin:0}
.hero-mark figcaption{
  white-space:normal;
  font-size:14px;
  max-width:140px;
  line-height:1.6}
.form-row{
  gap:10px}
.form-row input{
  padding:14px;
  font-size:16px}
button{
  padding:14px 18px;
  font-size:16px}
.consent{
  font-size:14px}
.idea{
  grid-template-columns:1fr;
  gap:24px;
  padding:36px 0}
.idea h2{
  font-size:38px}
.idea h2 br{
  display:none}
.idea p{
  font-size:20px}
.idea .muted{
  font-size:17px}
footer{
  align-items:flex-start;
  gap:24px;
  font-size:12px}
footer nav{
  gap:18px;
  font-size:13px}
.document{
  padding:40px 0}
.document h1{
  font-size:45px}
}
@media(max-width:380px){
  .shell{
  padding:0 18px}
.intro h1{
  font-size:32px}
.form-row{
  flex-direction:column}
.hero-mark img{
  width:120px}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
}

.faq{
  display:grid;
  grid-template-columns:39% 1fr;
  gap:40px;
  border-top:1px solid var(--line);
  padding:48px 0 64px}
.faq h2{
  font-size:36px;
  letter-spacing:-.04em;
  margin:0}
.faq details{
  border-bottom:1px solid #d6dbe3;
  padding:20px 0}
.faq details:first-child{
  padding-top:0}
.faq summary{
  font-size:18px;
  font-weight:650;
  cursor:pointer;
  min-height:28px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px}
.faq summary::-webkit-details-marker{
  display:none}
.faq summary::after{
  content:'+';
  font-weight:400;
  color:var(--blue)}
.faq details[open] summary::after{
  content:'−'}
.faq p{
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  margin:14px 28px 0 0}
.intro h1{
  font-size:clamp(44px,5.9vw,84px)}
.description{
  font-size:26px;
  max-width:695px}
.idea h2{
  font-size:43px}
.hero-mark{
  perspective:1000px}
.hero-mark img{
  transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
button svg{
  transition:transform 180ms ease}
button:hover svg{
  transform:translateX(3px)}
@media(prefers-reduced-motion:no-preference){
  .hero-mark img{
  animation:mark-arrive 1400ms cubic-bezier(.16,1,.3,1) both}
.intro h1{
  animation:type-arrive 650ms cubic-bezier(.16,1,.3,1) both}
.description{
  animation:type-arrive 800ms cubic-bezier(.16,1,.3,1) both}
.reveal-enter{
  animation:type-arrive 700ms cubic-bezier(.16,1,.3,1) both}
.hero-mark:hover img{
  transform:translateY(-5px) rotateY(-5deg) rotateX(3deg)}
@keyframes mark-arrive{
  from{
  transform:translateY(24px) rotateY(-14deg) rotateX(6deg);
  opacity:.4}
to{
  transform:none;
  opacity:1}
}
@keyframes type-arrive{
  from{
  transform:translateY(12px);
  opacity:.4}
to{
  transform:none;
  opacity:1}
}
}

@media(max-width:1100px){
  .intro h1{
  font-size:5.55vw}
.description{
  font-size:23px}
.idea h2{
  font-size:36px}
}
@media(max-width:760px){
  .intro h1{
  font-size:clamp(32px,7.15vw,54px)}
.description{
  font-size:21px}
.faq{
  grid-template-columns:1fr;
  gap:28px;
  padding:36px 0}
.faq h2{
  font-size:32px}
.idea h2{
  font-size:32px}
.idea h2 br{
  display:initial}
}
@media(prefers-reduced-motion:reduce){
  .hero-mark img,button svg{
  transition:none;
  transform:none}
}


/* Feature detail follows the existing open, ruled editorial layout. */
.features,.toolkit{border-top:1px solid var(--line);padding:56px 0}
.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:48px}
.section-heading h2,.toolkit h2,.launch-cta h2{font-size:clamp(32px,3.5vw,46px);line-height:1.15;letter-spacing:-.045em;margin:0;font-weight:750}
.section-heading p{font-size:22px;line-height:1.5;margin:0 0 18px}
.section-heading .feature-note{font-size:15px;line-height:1.6;color:var(--muted)}
.feature-list article{display:grid;grid-template-columns:52px minmax(200px,.85fr) 1.2fr;gap:32px;padding:32px 0;border-top:1px solid #d6dbe3}
.feature-index{color:var(--blue);font-size:14px;font-weight:650;padding-top:6px;font-variant-numeric:tabular-nums}
.feature-list h3{font-size:28px;line-height:1.25;letter-spacing:-.035em;margin:0}
.feature-list p,.toolkit p{font-size:18px;line-height:1.7;margin:0;color:var(--muted)}
.toolkit{display:grid;grid-template-columns:39% 1fr;gap:40px}
.toolkit-list{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.toolkit h3{font-size:19px;line-height:1.4;margin:0 0 12px;letter-spacing:-.025em}
.toolkit p{font-size:17px}
.launch-cta{border-top:1px solid var(--line);padding:48px 0 64px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.launch-cta p{font-size:19px;color:var(--muted);margin:16px 0 0}
.launch-cta>a{color:var(--blue);font-size:18px;font-weight:650;white-space:nowrap;text-underline-offset:7px}
.launch-cta a span{display:inline-block;margin-left:12px}
@media(max-width:760px){
.features,.toolkit{padding:36px 0}
.section-heading,.toolkit{grid-template-columns:1fr;gap:24px}
.section-heading{margin-bottom:28px}
.section-heading p{font-size:20px}
.feature-list article{grid-template-columns:26px 1fr;gap:12px 16px;padding:26px 0}
.feature-list h3{font-size:25px}
.feature-list h3 br{display:none}
.feature-list p{grid-column:2;font-size:17px}
.toolkit-list{grid-template-columns:1fr;gap:26px}
.launch-cta{align-items:flex-start;flex-direction:column;padding:36px 0 44px;gap:24px}
.launch-cta p{font-size:17px}
}