:root{
  --paper:#f4f1ea;
  --ink:#090909;
  --muted:#696969;
  --night:#0e0e0e;
  --light:#f7f5f1;
  --coral:#ee654b;
  --line:rgba(9,9,9,.20);
  --content:1180px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:1000;
  padding:.7rem 1rem;
  background:#fff;
  color:#090909;
  border:2px solid #090909;
  border-radius:4px;
  text-decoration:none;
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0)}
a:focus-visible{
  outline:3px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

.hero{
  position:relative;
  height:770px;
  overflow:hidden;
  /* Exact cream sampled from the left edge of the original hero scene. */
  background:#f5f3ef;
  isolation:isolate;
}
.hero-visual{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
/*
  Desktop uses the original 1024×770 hero scene at native resolution.
  This preserves the irregular, photographic transition in the middle instead
  of approximating it with a straight CSS mask/fade.
*/
.hero-scene{
  position:absolute;
  z-index:2;
  top:0;
  left:50%;
  width:1024px;
  height:770px;
  max-width:none;
  display:block;
  transform:translateX(-50%);
  /* Only feather the far-right wall edge into the extended wall field.
     The organic center transition remains 100% from the original scene. */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 72px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 72px),transparent 100%);
  transform-origin:center center;
  animation:hero-scene-settle 900ms var(--ease-out) both;
}
/*
  Only the wall beyond the ORIGINAL scene is extended. The gradient stops are
  sampled from the scene's far-right edge, where there is no prism anymore.
*/
.hero-right-extension{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:calc(50% + 440px);
  right:0;
  background:linear-gradient(180deg,
    rgb(170 166 162) 0px,
    rgb(165 161 158) 100px,
    rgb(157 154 151) 200px,
    rgb(155 152 148) 300px,
    rgb(154 151 148) 400px,
    rgb(150 148 143) 500px,
    rgb(148 144 140) 600px,
    rgb(146 143 140) 700px,
    rgb(149 145 141) 770px);
}
.hero-mobile-art{display:none}

.brand{
  position:absolute;
  z-index:4;
  top:51px;
  left:max(6.7vw,calc((100vw - var(--content))/2));
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:520;
  text-decoration:none;
}
.hero-copy{
  position:absolute;
  z-index:4;
  left:max(6.7vw,calc((100vw - var(--content))/2));
  top:275px;
  width:min(39vw,520px);
}
.hero h1{
  margin:0;
  font-size:clamp(92px,11.2vw,118px);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:430;
}
.hero-copy p{
  max-width:390px;
  margin:36px 0 0;
  color:var(--muted);
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.32;
  letter-spacing:-.025em;
}
.hero-mobile-art{display:none}


.product{
  position:relative;
  min-height:560px;
  background:var(--night);
  color:var(--light);
  overflow:hidden;
}
.product-copy{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:max(6.7vw,calc((100vw - var(--content))/2));
  width:34%;
  max-width:350px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.product-label{
  margin:0 0 18px;
  color:var(--coral);
  font-size:clamp(14px,1.5vw,17px);
  line-height:1.4;
}
.product h2{
  margin:0;
  font-size:clamp(60px,7vw,76px);
  line-height:.96;
  letter-spacing:-.066em;
  font-weight:420;
}
.product-description{
  max-width:360px;
  margin:30px 0 0;
  font-size:clamp(16px,1.75vw,19px);
  line-height:1.55;
  letter-spacing:-.025em;
}
.coming-soon{
  margin:34px 0 0;
  color:var(--coral);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.4;
}
.product-art{
  position:absolute;
  z-index:1;
  top:50%;
  right:max(6.7vw,calc((100vw - var(--content))/2));
  width:min(48vw,620px);
  height:clamp(320px,28vw,380px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.1vw,18px);
  align-items:stretch;
  transform:translateY(-50%);
  pointer-events:none;
  container-type:inline-size;
}
.product-card{
  position:relative;
  inset:auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(14px,3cqw,20px);
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  color:#f7f5f1;
  box-shadow:0 18px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045);
  opacity:0;
  transform:translateY(10px) scale(.985);
  animation:product-card-enter 300ms var(--ease-out) both;
}
.product-card::after{
  position:absolute;
  inset:0;
  z-index:0;
  content:"";
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 38%);
}
.product-card > *{position:relative;z-index:1}
.product-card--classes{
  border-color:rgba(9,9,9,.06);
  background:linear-gradient(145deg,#f8f6f0 0%,#ece9e2 100%);
  color:#1b1b1b;
  box-shadow:0 18px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.85);
  animation-delay:30ms;
}
.product-card--plans{
  background:linear-gradient(145deg,#2b2b2b 0%,#202020 100%);
  animation-delay:70ms;
}
.product-card--materials{
  background:linear-gradient(145deg,#202020 0%,#171717 100%);
  animation-delay:110ms;
}
.product-card--progress{
  background:linear-gradient(145deg,#171717 0%,#101010 100%);
  animation-delay:150ms;
}
.card-label{
  flex:0 0 auto;
  color:rgba(255,255,255,.82);
  font-size:clamp(10px,2cqw,13px);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:500;
}
.product-card--classes .card-label{color:#222}
.card-title{
  margin-top:auto;
  font-size:clamp(13px,3cqw,21px);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:430;
  white-space:normal;
  overflow-wrap:anywhere;
}
.product-card--plans .card-title,
.product-card--materials .card-title{
  font-size:clamp(13px,2.8cqw,19px);
}
.product-card--materials .card-title{
  font-size:clamp(11px,2.2cqw,15px);
  letter-spacing:-.04em;
}
.card-meta{
  display:flex;
  align-items:center;
  gap:.55em;
  margin-top:8px;
  color:rgba(255,255,255,.66);
  font-size:clamp(9px,1.8cqw,12px);
  line-height:1.15;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.product-card--classes .card-meta{color:#666}
.card-dot{
  flex:0 0 auto;
  width:.55em;
  height:.55em;
  border-radius:50%;
  background:var(--coral);
}
.card-check{
  position:relative;
  flex:0 0 auto;
  width:1em;
  height:1em;
  border:1px solid currentColor;
  border-radius:50%;
}
.card-check::after{
  position:absolute;
  top:24%;
  left:29%;
  width:38%;
  height:22%;
  content:"";
  border-bottom:1px solid currentColor;
  border-left:1px solid currentColor;
  transform:rotate(-45deg);
}
.card-file{
  position:relative;
  flex:0 0 auto;
  width:.82em;
  height:1em;
  border:1px solid currentColor;
  border-radius:.12em;
  opacity:.78;
}
.card-file::after{
  position:absolute;
  top:-1px;
  right:-1px;
  width:.34em;
  height:.34em;
  content:"";
  border-bottom:1px solid currentColor;
  border-left:1px solid currentColor;
  background:#202020;
}
.card-value{
  margin-top:auto;
  font-size:clamp(18px,4.2cqw,26px);
  line-height:.95;
  letter-spacing:-.07em;
  font-weight:420;
  font-variant-numeric:tabular-nums;
}
.product-card--progress .card-meta{margin-top:8px}
.progress-track{
  display:block;
  height:2px;
  margin-top:auto;
  background:rgba(255,255,255,.16);
}
.progress-track span{
  display:block;
  width:78%;
  height:100%;
  background:var(--coral);
}
@keyframes product-card-enter{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes hero-scene-settle{
  from{opacity:.94;transform:translate3d(-50%,-6px,0) scale(1.012)}
  to{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
}
@keyframes hero-mobile-art-settle{
  from{opacity:.94;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.closing{
  min-height:318px;
  padding:clamp(64px,7vw,80px) max(6.7vw,calc((100vw - var(--content))/2)) 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:55px;
  background:var(--paper);
}
.closing-statement{
  margin:0;
  font-size:clamp(28px,3.3vw,38px);
  line-height:1.08;
  letter-spacing:-.052em;
}
.site-footer{
  border-top:1px solid var(--line);
  padding-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  font-size:14px;
  line-height:1.4;
}
.copyright{margin:0;min-height:36px;display:flex;align-items:center}
.footer-links{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px 24px;
  flex-wrap:wrap;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  text-decoration:none;
  text-underline-offset:4px;
}
.footer-links a:hover{text-decoration:underline}

/* Legal pages */
.legal-shell{min-height:100vh;padding:0 max(24px,6.7vw)}
.legal-brand{display:inline-flex;align-items:center;min-height:44px;margin-top:36px;text-decoration:none;font-size:clamp(22px,2.4vw,28px);font-weight:520;letter-spacing:-.05em}
.legal-main{max-width:900px;padding:110px 0 120px}
.legal-main h1{margin:0 0 54px;font-size:clamp(60px,9vw,108px);line-height:.9;letter-spacing:-.07em;font-weight:430}
.legal-main h2{margin:44px 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.035em;font-weight:560}
.legal-main p{max-width:760px;margin:0 0 19px;color:#626262;font-size:18px;line-height:1.62;overflow-wrap:anywhere}
.legal-main strong{color:var(--ink);font-weight:570}
.legal-main a{text-underline-offset:3px;text-decoration-thickness:1px}
.legal-footer{border-top:1px solid var(--line);padding:30px 0 40px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;font-size:14px;line-height:1.4}
.legal-footer p{margin:0;min-height:36px;display:flex;align-items:center}
.legal-footer nav{display:flex;gap:8px 24px;flex-wrap:wrap}
.legal-footer a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;text-underline-offset:4px}
.legal-footer a:hover{text-decoration:underline}
.legal-footer a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px}

@media (max-width:760px){
  .hero{
    height:auto;
    min-height:0;
    padding:0 22px;
    overflow:hidden;
  }
  .hero-visual{display:none}
  .brand{
    top:22px;
    left:22px;
    font-size:22px;
  }
  .hero-copy{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    padding-top:156px;
  }
  .hero h1{
    font-size:clamp(70px,20vw,82px);
    line-height:.84;
  }
  .hero-copy p{
    max-width:342px;
    margin-top:28px;
    font-size:18px;
    line-height:1.35;
  }
  .hero-mobile-art{
    position:relative;
    display:block;
    left:auto;
    right:auto;
    bottom:auto;
    width:calc(100% + 44px);
    height:auto;
    aspect-ratio:464 / 433;
    margin:0 0 0 -22px;
    overflow:hidden;
  }
  .hero-mobile-art img{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
    object-position:center;
    transform-origin:center center;
    animation:hero-mobile-art-settle 800ms var(--ease-out) both;
  }

  .product{
    min-height:0;
    padding:0 22px 36px;
  }
  .product-copy{
    width:auto;
    max-width:380px;
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    min-height:0;
    display:block;
    margin:0;
    padding:60px 0 0;
  }
  .product-label{margin-bottom:14px;font-size:15px}
  .product h2{font-size:64px}
  .product-description{margin-top:26px;font-size:18px;line-height:1.5}
  .coming-soon{margin-top:28px;font-size:18px}
  .product-art{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    width:min(100%,604px);
    max-width:none;
    height:clamp(320px,72vw,430px);
    margin:44px auto 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:12px;
    transform:none;
  }

  .closing{
    min-height:430px;
    padding:62px 22px calc(28px + env(safe-area-inset-bottom));
    gap:72px;
  }
  .closing-statement{font-size:30px}
  .site-footer{flex-direction:column;gap:14px;padding-top:24px}
  .footer-links{justify-content:flex-start;gap:4px 12px;margin-left:-4px}
  .footer-links a{min-height:44px;padding:4px}
  .copyright{min-height:32px}

  .legal-shell{padding:0 22px}
  .legal-brand{margin-top:22px}
  .legal-main{padding:82px 0 100px}
  .legal-main h1{margin-bottom:42px;font-size:clamp(54px,16vw,72px)}
  .legal-main p{font-size:17px;line-height:1.62}
  .legal-footer{flex-direction:column;gap:14px;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .legal-footer nav{gap:4px 12px;margin-left:-4px}
  .legal-footer a{min-height:44px;padding:4px}
}

@media (max-width:430px){
  .product-card--plans{padding-left:4.7%;padding-right:2.2%}
  .product-card--materials{padding-left:4.7%;padding-right:1.6%}
}

@media (min-width:500px) and (max-width:760px){
  .product-art{
    width:min(100%,604px);
    height:clamp(360px,72vw,430px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:360px){
  .hero{min-height:0;padding:0 18px}
  .brand{left:18px}
  .hero-copy{padding-top:148px}
  .hero h1{font-size:68px}
  .hero-copy p{font-size:17px}
  .hero-mobile-art{width:calc(100% + 36px);margin-left:-18px}
  .product{min-height:0;padding:0 18px 36px}
  .product h2{font-size:58px}
  .product-description{font-size:17px}
  .closing{padding-left:18px;padding-right:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .hero-scene,.hero-mobile-art img{animation:none}
  .product-card{opacity:1;transform:none;animation:none}
}

@media (forced-colors:active){
  a:focus-visible{outline:2px solid Highlight}
  .product{border-block:1px solid CanvasText}
}
/* Keep enlarged/custom-spaced text inside the reflow viewport. */
.hero h1,.product h2,.legal-main h1{overflow-wrap:anywhere}

/* Keep the desktop composition readable at tablet widths where the product
   artwork would otherwise overlap the copy, and keep the headline together. */
@media (min-width:761px) and (max-width:1199px){
  .hero-copy{width:48vw}
  .hero h1{overflow-wrap:normal}
  .product{min-height:560px}
  .product-copy{width:34%;max-width:320px}
  .product-art{
    right:5%;
    width:52%;
    height:320px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}

/* Large displays: scale the layout, not the raster artwork. */
@media (min-width:2200px){
  :root{--content:1460px}
  .brand{font-size:32px}
  .hero-copy{width:620px}
  .hero h1{font-size:132px}
  .hero-copy p{max-width:430px;font-size:24px}
  .product{min-height:560px}
  .product-copy{width:36%;max-width:390px;padding:0}
  .product h2{font-size:86px}
  .product-description,.coming-soon{font-size:20px}
  .product-art{right:calc((100vw - 1460px)/2);width:620px;height:380px}
  .closing{min-height:340px}
  .closing-statement{font-size:44px}
  .site-footer{font-size:15px}
}