:root {
  --paper:#f6f3eb;
  --ink:#243e36;
  --muted:#657369;
  --line:#d6dbd0;
  --orange:#b85230;
  --sage:#dce3d7;
  --cream:#ece9df;
  --serif:Georgia,'Times New Roman',serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Jost,Arial,sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.55
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  border:0
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.045em
}
em {
  font-weight:400;
  color:var(--orange)
}
h3 {
  font-weight:500
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}
::selection {
  background:var(--sage)
}
.wrap {
  max-width:1400px;
  margin:auto;
  padding-inline:72px
}
.skip {
  visibility:hidden;
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:10
}
.skip:focus {
  visibility:visible;
  top:10px
}
.header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.wordmark {
  font-size:52px;
  letter-spacing:-.075em;
  line-height:1;
  font-weight:600;
  display:flex;
  align-items:baseline
}
.wordmark span {
  font-size:21px;
  letter-spacing:-.04em;
  margin-left:2px
}
.wordmark i {
  font-style:normal;
  font-size:29px;
  align-self:center;
  margin-left:16px;
  color:var(--orange)
}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:15px
}
.header-wordmark {
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}
.wordmark-line {
  display:flex;
  align-items:baseline
}
.wordmark-subtitle {
  font-family:Jost,Arial,sans-serif;
  font-size:9px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.08em;
  white-space:nowrap;
  color:var(--ink)
}
nav a:hover,.text-link:hover {
  color:var(--orange)
}
.nav-partner {
  border:1px solid var(--line);
  padding:11px 19px;
  border-radius:100px
}
.nav-partner span {
  margin-left:20px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:0;
  align-items:center;
  min-height:660px;
  padding-top:25px;
  padding-bottom:68px
}
.eyebrow {
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.11em;
  line-height:1.6
}
.hero-copy>.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:27px
}
.tiny-star {
  font-family:Arial,sans-serif;
  font-size:21px;
  color:var(--orange)
}
h1 {
  font-size:clamp(62px,5.65vw,82px);
  white-space:nowrap
}
.hero-lead {
  font-size:23px;
  line-height:1.4;
  margin-top:28px
}
.hero-text {
  font-size:16px;
  color:var(--muted);
  margin-top:18px;
  line-height:1.7
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:30px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:17px 25px;
  border-radius:100px;
  font-size:15px;
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.dark {
  background:var(--ink);
  color:var(--paper)
}
.dark:hover {
  background:#36564a
}
.light {
  background:var(--paper);
  color:var(--ink)
}
.text-link {
  font-size:14px;
  display:inline-flex;
  gap:17px;
  align-items:center
}
.hero-art {
  position:relative;
  height:550px;
  min-width:0
}
.art-circle {
  position:absolute;
  width:450px;
  height:450px;
  left:42px;
  top:56px;
  background:#e6dccc;
  border-radius:50%
}
.art-path {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#a09c87
}
.product-card {
  position:absolute;
  padding:10px 10px 0;
  background:#fcfbf6;
  box-shadow:0 18px 45px #213b2d18,0 1px 4px #213b2d15;
  border:1px solid #dcded2;
  border-radius:4px;
  transition:transform .35s,box-shadow .3s;
  text-align:left
}
.product-card:hover {
  box-shadow:0 25px 55px #213b2d26
}
.card-photo {
  display:block;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#efefef
}
.card-photo img {
  object-fit:cover
}
.card-caption {
  height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.01em
}
.card-left {
  width:183px;
  left:1%;
  top:215px;
  transform:rotate(-12deg);
  z-index:1
}
.card-left:hover {
  transform:translateY(-7px) rotate(-10deg)
}
.card-right {
  width:185px;
  right:-3%;
  top:173px;
  transform:rotate(10deg);
  z-index:2
}
.card-right:hover {
  transform:translateY(-7px) rotate(8deg)
}
.card-main {
  width:242px;
  left:28%;
  top:68px;
  transform:rotate(1deg);
  z-index:3
}
.card-main:hover {
  transform:translateY(-5px) rotate(0deg)
}
.flip-icon {
  font-size:21px
}
.card-back {
  display:none;
  min-height:333px;
  padding:25px 16px;
  background:var(--sage);
  flex-direction:column;
  gap:22px;
  justify-content:center
}
.card-back strong {
  font-family:var(--serif);
  font-size:34px;
  font-weight:400;
  line-height:1.1
}
.card-back>span:not(.eyebrow) {
  font-size:14px;
  line-height:1.7
}
.card-back .back-link {
  margin-top:auto;
  font-size:11px!important
}
.card-main.is-flipped {
  padding-bottom:10px
}
.is-flipped .card-front {
  display:none
}
.is-flipped .card-back {
  display:flex
}
.art-note {
  padding:0;
  background:transparent;
  z-index:4;
  min-height:44px;
  position:absolute;
  left:34%;
  bottom:33px;
  display:flex;
  gap:3px;
  align-items:flex-end;
  transform:rotate(-5deg);
  color:var(--orange)
}
.art-note:hover span {
  text-decoration:underline;
  text-underline-offset:4px
}
.art-note svg {
  width:52px;
  height:45px;
  transform:translateY(-16px)
}
.art-note span {
  font-family:var(--serif);
  font-style:italic;
  font-size:21px
}
.art-label {
  position:absolute;
  top:12px;
  right:22px;
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;
  letter-spacing:.11em;
  color:var(--muted)
}
.manifesto {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#ecefe5
}
.manifesto .wrap {
  display:flex;
  align-items:center;
  gap:36px;
  min-height:90px
}
.manifesto span:not(.manifesto-end) {
  font-family:var(--serif);
  font-size:28px;
  letter-spacing:-.025em
}
.manifesto .asterisk {
  color:var(--orange);
  font-family:Arial,sans-serif!important;
  font-size:36px!important
}
.manifesto-end {
  margin-left:auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:.1em
}
.section {
  padding-top:95px;
  padding-bottom:90px;
  scroll-margin-top:25px
}
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px
}
.section-head .eyebrow {
  margin-bottom:18px
}
h2 {
  font-size:57px
}
.section-head>p {
  font-size:17px;
  color:var(--muted);
  padding-bottom:4px
}
.shop-feature {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  overflow:hidden;
  border-radius:5px;
  min-height:460px
}
.shop-editorial {
  background:var(--ink);
  color:var(--paper);
  padding:43px 48px;
  display:flex;
  flex-direction:column;
  position:relative
}
.shop-live {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:.1em
}
.shop-live span {
  height:5px;
  width:5px;
  border-radius:50%;
  background:#c0cdb4
}
.shop-editorial h3 {
  font-size:42px;
  letter-spacing:-.04em;
  margin-top:38px
}
.shop-editorial>p {
  font-family:var(--serif);
  font-size:32px;
  line-height:1.22;
  letter-spacing:-.02em;
  margin-top:9px;
  color:#c9d7c5
}
.shop-cta {
  margin-top:35px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:22px
}
.shop-cta span {
  display:flex;
  border:1px solid #ffffff45;
  border-radius:50%;
  width:37px;
  height:37px;
  align-items:center;
  justify-content:center;
  transition:background .2s
}
.shop-feature:hover .shop-cta span {
  background:#ffffff20
}
.shop-domain {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  margin-top:auto;
  padding-top:30px;
  opacity:.6
}
.shop-images {
  position:relative;
  background:#eee;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  padding-top:30px;
  overflow:hidden
}
.shop-images img {
  height:425px;
  object-fit:cover;
  object-position:center top;
  mix-blend-mode:multiply
}
.shop-image-note {
  position:absolute;
  right:26px;
  bottom:22px;
  font-size:11px;
  padding:8px 14px;
  background:#fcfbf4d9;
  border-radius:100px
}
.shop-under {
  display:flex;
  justify-content:space-between;
  gap:22px;
  margin-top:20px;
  color:var(--muted);
  font-size:13px
}
.how {
  background:#eaece3
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:10px;
  margin-bottom:36px
}
.steps article+article {
  border-left:1px solid #ccd4c7;
  padding-left:36px
}
.step-sketch {
  height:130px;
  margin-bottom:25px;
  position:relative;
  max-width:220px
}
.sketch-wander {
  display:grid;
  grid-template-columns:repeat(3,36px);
  grid-template-rows:repeat(2,44px);
  gap:9px;
  transform:rotate(-6deg);
  margin-left:25px;
  padding-top:20px
}
.sketch-wander span {
  border:1px solid #718879;
  background:#d7dfd0;
  border-radius:3px
}
.sketch-wander span:nth-child(2) {
  background:var(--ink);
  transform:translateY(-10px)
}
.sketch-wander span:nth-child(5) {
  background:#bdcabb
}
.sketch-wander i {
  font-style:normal;
  position:absolute;
  left:134px;
  top:45px;
  font-size:34px;
  color:var(--orange)
}
.sketch-flip>span {
  display:grid;
  place-items:center;
  border:1px solid #859382;
  position:absolute;
  width:60px;
  height:80px;
  top:25px;
  left:15px;
  transform:rotate(-12deg);
  font-size:29px;
  background:var(--paper);
  border-radius:3px
}
.sketch-flip i {
  display:grid;
  place-items:center;
  position:absolute;
  left:95px;
  top:15px;
  width:65px;
  height:85px;
  transform:rotate(9deg);
  background:var(--ink);
  color:var(--paper);
  font-style:normal;
  font-size:27px;
  border-radius:3px
}
.sketch-path svg {
  width:210px;
  height:130px;
  color:var(--orange)
}
.steps .eyebrow {
  color:var(--muted);
  font-size:9px
}
.steps h3 {
  font-size:23px;
  letter-spacing:-.03em;
  margin-top:12px;
  margin-bottom:13px
}
.steps article>p:last-child {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  max-width:320px
}
.partners {
  display:grid;
  align-items:center;
  grid-template-columns:1.05fr .95fr;
  gap:100px;
  padding-top:110px;
  padding-bottom:110px
}
.partner-main .eyebrow {
  margin-bottom:23px
}
.partner-main h2 {
  font-size:58px
}
.partner-lead {
  font-size:22px;
  line-height:1.4;
  margin-top:25px
}
.partner-main>p:not(.eyebrow):not(.partner-lead) {
  max-width:430px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  margin-top:19px
}
.partner-main .button {
  margin-top:29px
}
.partner-preview {
  margin:0;
  min-width:0
}
.partner-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:12px;
  padding:12px 8px 68px
}
.partner-card {
  display:block;
  min-width:0;
  padding:7px 7px 0;
  background:#fffefa;
  border:1px solid #dce0d3;
  border-radius:4px;
  box-shadow:0 8px 22px rgba(41,43,38,.1)
}
.partner-card:first-child {
  transform:translateY(28px) rotate(-5deg)
}
.partner-card:last-child {
  transform:translateY(47px) rotate(5deg)
}
.partner-card-photo {
  aspect-ratio:3/4;
  overflow:hidden
}
.partner-card-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:12px 0;
  font-size:11px
}
.partner-card-caption>span:last-child {
  font-size:16px
}
.partner-preview figcaption {
  color:var(--muted);
  font-size:13px;
  text-align:center;
  max-width:300px;
  margin:auto;
  line-height:1.65
}
.closing {
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:60px 0 67px
}
.closing-star {
  color:#d6b892;
  font-size:45px;
  line-height:1
}
.closing p {
  font-family:var(--serif);
  font-size:58px;
  letter-spacing:-.04em;
  line-height:1.07;
  margin:19px 0 29px
}
footer {
  padding-top:45px!important;
  padding-bottom:22px!important
}
.footer-top {
  display:flex;
  align-items:center;
  gap:36px;
  padding-bottom:35px;
  border-bottom:1px solid var(--line)
}
.footer-top .wordmark {
  font-size:42px
}
.footer-top>p {
  font-size:14px;
  color:var(--muted)
}
.footer-attribution {
  margin-left:auto;
  font-size:12px
}
.footer-top small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-top:24px;
  font-size:11px;
  color:var(--muted)
}
.footer-bottom p {
  max-width:700px
}
.footer-bottom button {
  padding:0;
  background:none;
  font-size:11px;
  white-space:nowrap
}
.preview-note {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  color:var(--muted);
  margin-top:30px;
  opacity:.75
}
dialog {
  max-width:580px;
  width:calc(100% - 32px);
  border:1px solid var(--line);
  border-radius:7px;
  padding:44px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 30px 100px #0003
}
dialog::backdrop {
  background:#172d26a8;
  backdrop-filter:blur(5px)
}
.dialog-close {
  position:absolute;
  right:15px;
  top:13px;
  background:none;
  font-size:28px;
  line-height:1;
  padding:8px
}
dialog h2 {
  font-size:43px;
  margin:18px 0
}
dialog>p:not(.eyebrow) {
  font-size:15px;
  line-height:1.7;
  color:var(--muted)
}
dialog ol {
  list-style:none;
  padding:0;
  margin:25px 0
}
dialog li {
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:15px
}
dialog li span {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px
}
dialog .dialog-note {
  font-size:12px!important;
  padding:14px;
  background:var(--cream);
  border-radius:4px
}
.dialog-done {
  margin-top:24px;
  font-size:13px
}
@media(min-width:1500px) {
  .hero {
    min-height:730px
  }
  .hero-art {
    height:600px
  }
  .card-main {
    width:270px
  }
  .card-left {
    width:210px;
    left:0;
    top:220px
  }
  .card-right {
    width:215px;
    top:220px;
    right:-2%
  }
  .art-circle {
    width:480px;
    height:480px
  }
  .art-note {
    bottom:20px
  }
  .card-back {
    min-height:370px
  }
}
@media(max-width:1150px) {
  .wrap {
    padding-inline:42px
  }
  .header {
    height:100px
  }
  .hero {
    min-height:600px;
    padding-bottom:40px;
    grid-template-columns:1fr 1fr
  }
  h1 {
    font-size:65px
  }
  .hero-art {
    height:490px
  }
  .art-circle {
    width:350px;
    height:350px;
    left:0;
    top:74px
  }
  .card-main {
    width:210px;
    left:23%;
    top:90px
  }
  .card-left {
    width:155px;
    left:0;
    top:210px
  }
  .card-right {
    width:151px;
    right:-3%;
    top:197px
  }
  .art-note {
    left:17%;
    bottom:15px
  }
  .art-label {
    right:0;
    font-size:7px
  }
  .hero-actions {
    gap:19px
  }
  .button {
    padding:15px 21px;
    gap:23px
  }
  .hero-text {
    font-size:15px
  }
  .hero-lead {
    font-size:21px
  }
  .card-back {
    min-height:290px;
    padding:17px 12px;
    gap:16px
  }
  .card-back strong {
    font-size:28px
  }
  .manifesto .wrap {
    gap:25px
  }
  .manifesto span:not(.manifesto-end) {
    font-size:25px
  }
  h2 {
    font-size:49px
  }
  .section {
    padding-top:75px;
    padding-bottom:75px
  }
  .partners {
    gap:65px
  }
  .partner-main h2 {
    font-size:49px
  }
  .shop-editorial {
    padding:36px
  }
  .steps {
    gap:30px
  }
  .steps article+article {
    padding-left:25px
  }
}
@media(max-width:850px) {
  .wrap {
    padding-inline:28px
  }
  nav {
    gap:20px
  }
  .header {
    height:88px
  }
  .wordmark {
    font-size:43px
  }
  .hero {
    grid-template-columns:1fr;
    min-height:0;
    padding-top:30px;
    padding-bottom:35px
  }
  .hero-copy {
    max-width:600px
  }
  h1 {
    font-size:75px
  }
  .hero-art {
    max-width:570px;
    width:100%;
    margin:20px auto 0;
    height:490px
  }
  .art-circle {
    width:410px;
    height:410px;
    left:70px;
    top:30px
  }
  .card-main {
    width:228px;
    left:30%;
    top:25px
  }
  .card-left {
    width:176px;
    left:6%;
    top:165px
  }
  .card-right {
    width:175px;
    right:0;
    top:146px
  }
  .art-note {
    left:34%;
    bottom:15px
  }
  .art-label {
    top:0;
    right:0
  }
  .manifesto-end {
    display:none
  }
  .manifesto .wrap {
    justify-content:center;
    gap:24px
  }
  .manifesto span:not(.manifesto-end) {
    font-size:25px
  }
  .section-head {
    align-items:flex-start;
    gap:25px
  }
  .section-head>p {
    font-size:15px;
    max-width:260px
  }
  .section-head h2 {
    font-size:44px
  }
  .shop-feature {
    grid-template-columns:.9fr 1.1fr;
    min-height:420px
  }
  .shop-editorial {
    padding:28px
  }
  .shop-editorial h3 {
    font-size:32px
  }
  .shop-editorial>p {
    font-size:26px
  }
  .shop-images img {
    height:390px
  }
  .shop-image-note {
    display:none
  }
  .steps {
    gap:22px
  }
  .steps article+article {
    padding-left:19px
  }
  .steps h3 {
    font-size:21px
  }
  .step-sketch {
    transform:scale(.85);
    transform-origin:left center
  }
  .steps article>p:last-child {
    font-size:14px
  }
  .partners {
    gap:40px
  }
  .partner-main h2 {
    font-size:43px
  }
  .partner-main .eyebrow {
    font-size:8px
  }
  .partner-lead {
    font-size:20px
  }
  .partner-main>p:not(.eyebrow):not(.partner-lead) {
    font-size:14px
  }
  .closing p {
    font-size:51px
  }
}
@media(max-width:600px) {
  .wrap {
    padding-inline:23px
  }
  .header {
    height:83px
  }
  .wordmark {
    font-size:42px
  }
  .wordmark span {
    font-size:18px
  }
  .wordmark i {
    font-size:23px;
    margin-left:10px
  }
  nav {
    gap:0;
    font-size:12px
  }
  nav>a:not(.nav-partner) {
    display:none
  }
  .nav-partner {
    padding:10px 12px
  }
  .nav-partner span {
    margin-left:7px
  }
  .hero {
    padding-top:28px
  }
  .hero-copy>.eyebrow {
    font-size:8px;
    gap:9px;
    margin-bottom:22px
  }
  h1 {
    font-size:clamp(47px,12.7vw,74px);
    white-space:normal
  }
  .hero-lead {
    font-size:21px;
    margin-top:24px
  }
  .hero-text {
    font-size:14px;
    margin-top:15px
  }
  .hero-text br {
    display:none
  }
  .hero-actions {
    gap:19px;
    margin-top:24px
  }
  .button {
    font-size:13px;
    padding:15px 19px;
    gap:23px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:9px
  }
  .hero-art {
    margin-top:24px;
    height:380px
  }
  .art-circle {
    width:min(280px,85%);
    height:auto;
    aspect-ratio:1;
    left:7%;
    top:12px
  }
  .card-main {
    width:165px;
    left:28%;
    top:17px;
    padding:7px 7px 0
  }
  .card-left {
    width:128px;
    left:1%;
    top:140px;
    padding:7px 7px 0
  }
  .card-right {
    width:127px;
    right:0;
    top:117px;
    padding:7px 7px 0
  }
  .card-caption {
    height:30px;
    font-size:10px
  }
  .card-back {
    min-height:229px;
    padding:16px 8px;
    gap:12px
  }
  .card-back .eyebrow {
    font-size:7px
  }
  .card-back strong {
    font-size:26px
  }
  .card-back>span:not(.eyebrow) {
    font-size:11px
  }
  .card-back .back-link {
    font-size:9px!important
  }
  .art-label {
    font-size:6px;
    top:0
  }
  .art-note {
    bottom:3px;
    left:28%;
    gap:0
  }
  .art-note span {
    font-size:17px
  }
  .art-note svg {
    width:35px
  }
  .manifesto .wrap {
    min-height:78px;
    gap:15px
  }
  .manifesto span:not(.manifesto-end) {
    font-size:clamp(15px,4.1vw,23px)
  }
  .manifesto .asterisk {
    font-size:26px!important
  }
  .section {
    padding-top:58px;
    padding-bottom:58px
  }
  .section-head {
    display:block;
    margin-bottom:29px
  }
  .section-head h2 {
    font-size:43px
  }
  .section-head .eyebrow {
    font-size:8px;
    margin-bottom:15px
  }
  .section-head>p {
    margin-top:20px;
    font-size:15px;
    max-width:none
  }
  .shop-feature {
    grid-template-columns:1fr
  }
  .shop-editorial {
    padding:28px;
    min-height:350px
  }
  .shop-editorial h3 {
    margin-top:26px;
    font-size:38px
  }
  .shop-editorial>p {
    font-size:29px
  }
  .shop-cta {
    margin-top:24px
  }
  .shop-domain {
    padding-top:23px
  }
  .shop-images {
    height:305px;
    padding-top:10px
  }
  .shop-images img {
    height:305px
  }
  .shop-under {
    display:block;
    font-size:12px
  }
  .shop-under .text-link {
    display:flex;
    margin-top:14px;
    font-size:12px
  }
  .steps {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:10px;
    margin-bottom:30px
  }
  .steps article {
    position:relative;
    padding-left:98px;
    min-height:165px
  }
  .steps article+article {
    border-left:0;
    border-top:1px solid #ccd4c7;
    padding-left:98px;
    padding-top:28px
  }
  .step-sketch {
    position:absolute;
    left:0;
    top:6px;
    width:90px;
    height:90px;
    transform:scale(.45);
    transform-origin:left top;
    margin:0
  }
  .steps article+article .step-sketch {
    top:42px
  }
  .steps h3 {
    font-size:23px;
    margin-top:9px;
    margin-bottom:9px
  }
  .steps article>p:last-child {
    font-size:14px;
    max-width:none
  }
  .partners {
    grid-template-columns:1fr;
    gap:36px
  }
  .partner-main h2 {
    font-size:43px
  }
  .partner-main .eyebrow {
    font-size:8px
  }
  .partner-main>p:not(.eyebrow):not(.partner-lead) {
    font-size:15px
  }
  .closing {
    padding:43px 0 49px
  }
  .closing p {
    font-size:41px
  }
  .closing-star {
    font-size:36px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:16px;
    padding-bottom:24px
  }
  .footer-top .wordmark {
    font-size:38px
  }
  .footer-top>p {
    font-size:13px
  }
  .footer-attribution {
    margin-left:0;
    flex-basis:100%;
    margin-top:6px
  }
  .footer-bottom {
    display:block;
    font-size:10px;
    margin-top:20px
  }
  .footer-bottom button {
    margin-top:17px
  }
  .preview-note {
    font-size:8px;
    line-height:1.7;
    margin-top:20px
  }
  dialog {
    padding:35px 24px;
    max-height:calc(100dvh - 32px)
  }
  dialog h2 {
    font-size:37px
  }
}
@media(max-width:600px) {
  .partner-card { padding:5px 5px 0; }
  .partner-card-caption { font-size:10px; }
  .partner-card-caption>span:last-child { font-size:14px; }
  .partner-preview figcaption { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Maker signature in the destination footer. */
.maker-signature { color:var(--ink); line-height:1.6; text-decoration:none; }
.maker-signature strong { font-weight:600; }
.maker-signature small { display:block; font-size:10px; color:var(--muted); }
.maker-signature:hover strong, .maker-signature:focus-visible strong { text-decoration:underline; text-underline-offset:3px; }
.maker-signature:focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
.card-guide { margin:0 0 32px; padding-top:28px; border-top:1px solid #ccd4c7; }
.card-guide>h3 { margin:0 0 24px; font-size:23px; letter-spacing:-.03em; }
.card-guide-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.card-guide-item { display:flex; align-items:flex-start; gap:18px; }
.card-guide-item h4 { margin:0 0 7px; font-size:16px; font-weight:600; }
.card-guide-item p { margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.card-guide-sample { display:block; flex:0 0 48px; height:68px; padding:4px 4px 12px; border-radius:6px; background:linear-gradient(180deg,#fffefa,#f9f5ef); box-shadow:0 2px 7px rgba(41,43,38,.12); }
.card-guide-sample i { display:block; height:100%; border:1px solid rgba(150,118,80,.4); border-radius:3px; background:#fffefa; }
.card-guide-sample--anchor { background:linear-gradient(180deg,#eaf9fa,#bce7eb 52%,#85d3dc); }
.card-guide-sample--anchor i { border-color:#85d3dc; }
@media (max-width: 899px) {
  .card-guide-items { grid-template-columns:1fr; gap:22px; }
  .card-guide-item { gap:20px; }
}
@media (min-width: 900px) {
  .how .section-head>div { flex-shrink:0; }
  .how .section-head>p { max-width:360px; }
}
/* The second shop shares the existing editorial card grammar. */
.shop-feature + .shop-feature { margin-top:24px; }
.shop-feature--cakes .shop-images img { object-fit:contain; background:#faf8f3; }