@font-face {
  font-family:"DM Sans";
  src:url("/assets/dm-sans-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 1000;
  font-display:swap
}

:root {
  color-scheme:light;
  --canvas:#f7f5ef;
  --surface:#fff;
  --ink:#243b34;
  --muted:#59665d;
  --green:#285c4d;
  --dark:#1e483c;
  --soft:#e6eee7;
  --line:#d9dfd7;
  --sun:#f1c66d;
  font-family:"DM Sans",sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0
}

a {
  color:inherit
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--green);
  outline-offset:5px
}

img {
  display:block;
  max-width:100%
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.045em
}

p {
  line-height:1.65
}

a {
  text-underline-offset:4px
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  z-index:10;
  left:20px;
  top:-100px;
  padding:14px 20px;
  background:var(--green);
  color:white;
  border-radius:8px
}

.skip-link:focus {
  top:16px
}

.brand {
  display:inline-flex;
  align-items:center;
  min-height:48px
}

.brand img {
  height:auto
}

.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-block:26px;
  border-bottom:1px solid var(--line)
}

nav {
  display:flex;
  align-items:center;
  gap:36px
}

nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  text-decoration:none
}

nav a:hover {
  text-decoration:underline
}

.nav-contact {
  gap:24px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:8px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  line-height:1.5;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--green)
}

.status-dot {
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:currentColor
}

.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:50px;
  align-items:center;
  padding-block:82px 86px
}

.hero h1 {
  font-size:clamp(60px,6.3vw,86px);
  line-height:1.03;
  margin-block:25px 28px
}

.sun-underline {
  position:relative;
  z-index:0;
  white-space:nowrap
}

.sun-underline::after {
  content:"";
  position:absolute;
  z-index:-1;
  height:9px;
  background:var(--sun);
  border-radius:50%;
  bottom:6px;
  left:2px;
  right:0;
  transform:rotate(-2deg)
}

.lead {
  font-size:17px;
  color:var(--muted);
  max-width:430px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:17px 23px;
  min-height:56px;
  border-radius:10px;
  background:var(--green);
  color:var(--surface);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  margin-top:30px;
  transition:background .18s
}

.button:hover {
  background:var(--dark)
}

.button span {
  font-size:20px;
  line-height:1
}

.hero-note {
  font-size:12px;
  color:var(--muted);
  margin-top:14px
}

.product-figure {
  min-width:0
}

.preview-stage {
  position:relative;
  isolation:isolate;
  padding:62px 24px 56px 30px
}

.day-arch {
  position:absolute;
  inset:0 8px 0 26px;
  border-radius:240px 240px 12px 12px;
  background:var(--soft);
  z-index:-1;
  overflow:hidden
}

.day-arch::before,.day-arch::after {
  content:"";
  position:absolute;
  border:1px solid #cbd8ce;
  border-radius:50%;
  width:620px;
  height:620px;
  left:-130px;
  top:170px
}

.day-arch::after {
  width:710px;
  height:710px;
  left:-175px;
  top:125px
}

.day-arch>span {
  position:absolute;
  width:100px;
  height:100px;
  right:31px;
  top:33px;
  background:var(--sun);
  border-radius:50%
}

.day-preview {
  position:relative;
  background:var(--surface);
  border:1px solid #d8e0d8;
  border-radius:21px;
  padding:23px;
  box-shadow:0 22px 45px #243b3410;
  transform:rotate(-3deg)
}

.preview-heading {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  border-bottom:1px solid #e8ebe5;
  padding-bottom:17px
}

.preview-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-block:22px
}

.small-label {
  display:block;
  font-size:10px;
  letter-spacing:.045em;
  color:var(--muted)
}

.preview-title h2 {
  font-size:32px;
  line-height:1.2;
  margin-top:4px
}

.date-tile {
  display:grid;
  text-align:center;
  font-size:9px;
  line-height:1.2;
  border:1px solid var(--line);
  padding:7px 11px;
  border-radius:9px;
  color:var(--green)
}

.date-tile strong {
  font-size:22px;
  font-weight:500;
  margin-top:2px
}

.child-line {
  display:flex;
  align-items:center;
  gap:10px
}

.avatar {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:37px;
  height:37px;
  background:var(--soft);
  font-size:13px;
  color:var(--green);
  flex-shrink:0
}

.child-line>div {
  min-width:0
}

.child-line strong {
  display:block;
  font-weight:600;
  font-size:15px
}

.child-line div>span {
  font-size:10px;
  color:var(--muted)
}

.confirmed {
  margin-left:auto;
  color:var(--green);
  background:var(--soft);
  font-size:9px;
  border-radius:5px;
  padding:5px 7px
}

.time-row {
  display:flex;
  align-items:center;
  gap:23px;
  padding-block:23px
}

.time-row>div {
  display:grid;
  gap:5px
}

.time-row>div>span {
  color:var(--muted);
  font-size:10px
}

.time-row strong {
  font-size:29px;
  font-weight:500;
  letter-spacing:-.05em;
  color:var(--green)
}

.time-line {
  flex:1;
  height:1px;
  background:var(--line);
  position:relative
}

.time-line::before,.time-line::after {
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--line)
}

.time-line::after {
  left:auto;
  right:0
}

.day-update {
  display:flex;
  gap:12px;
  background:#f0f3ed;
  border-radius:11px;
  padding:15px
}

.update-icon {
  color:var(--green);
  font-size:23px
}

.day-update strong {
  font-size:14px;
  font-weight:500;
  display:block;
  margin-top:4px
}

.day-update p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}

.preview-bottom {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:10px;
  color:var(--muted);
  padding-top:19px
}

.message-dot {
  width:8px;
  height:6px;
  border:1px solid var(--green);
  border-radius:2px;
  position:relative
}

.message-dot::after {
  content:"";
  position:absolute;
  width:2px;
  height:2px;
  border-left:1px solid var(--green);
  left:0;
  bottom:-3px
}

.floating-note {
  position:absolute;
  bottom:30px;
  right:0;
  background:var(--green);
  color:white;
  padding:15px 20px;
  border-radius:11px;
  font-size:12px;
  box-shadow:0 10px 25px #243b3410;
  transform:rotate(3deg)
}

.floating-note>span {
  color:var(--sun);
  margin-right:12px
}

figcaption {
  font-size:12px;
  margin-top:24px;
  text-align:center;
  color:var(--green)
}

figcaption>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}

.idea-section {
  padding-block:90px 54px;
  background:var(--surface)
}

.section-intro {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  column-gap:80px
}

.section-intro>.eyebrow {
  grid-column:1/-1;
  margin-bottom:22px
}

h2 {
  font-size:clamp(33px,3.3vw,46px);
  line-height:1.15
}

.section-intro>p:last-child {
  align-self:end;
  color:var(--muted);
  font-size:16px;
  max-width:390px
}

.day-story {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:64px
}

.day-story article {
  border-top:1px solid var(--line);
  padding-top:22px;
  min-width:0
}

.story-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.story-number {
  color:var(--green);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em
}

.sun-icon {
  font-size:28px;
  line-height:28px;
  color:var(--green)
}

h3 {
  font-size:27px;
  line-height:1.2
}

.day-story h3 {
  margin-top:28px
}

.day-story article>p {
  color:var(--muted);
  font-size:14px;
  margin-top:17px;
  min-height:70px
}

.story-example {
  margin-top:26px;
  background:var(--canvas);
  padding:17px 18px;
  border-radius:9px
}

.tiny-label {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted)
}

.story-example>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:7px;
  font-size:12px
}

.story-example strong {
  font-weight:500
}

.story-example>div>span {
  font-size:11px;
  color:var(--muted)
}

.examples-note {
  font-size:10px;
  color:var(--muted);
  margin-top:24px;
  text-align:right
}

.audience-section {
  padding-block:92px
}

.audience-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px 80px
}

.audience-heading>.eyebrow {
  grid-column:1/-1
}

.audience-heading>p:last-child {
  align-self:end;
  font-size:16px;
  color:var(--muted);
  max-width:390px
}

.audiences {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--soft);
  border-radius:18px;
  margin-top:45px;
  padding:37px 42px
}

.audiences article {
  padding-right:45px
}

.audiences article+article {
  padding-right:0;
  padding-left:45px;
  border-left:1px solid #c6d3c9
}

.role-label {
  color:var(--green);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em
}

.audiences h3 {
  margin-top:20px;
  font-size:30px
}

.audiences p {
  font-size:14px;
  color:var(--muted);
  margin-top:17px;
  max-width:340px
}

.coming-section {
  background:var(--green);
  color:var(--canvas);
  overflow:hidden
}

.coming-layout {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
  align-items:center;
  padding-block:70px
}

.coming-section .eyebrow {
  color:var(--canvas)
}

.coming-section .status-dot {
  background:var(--sun)
}

.coming-section h2 {
  font-size:clamp(42px,5vw,64px);
  margin-top:23px
}

.coming-section p:not(.eyebrow) {
  font-size:16px;
  margin-top:23px;
  color:#e6eee7;
  max-width:465px
}

.coming-tag {
  display:inline-block;
  font-size:12px;
  padding-top:23px;
  margin-top:30px;
  border-top:1px solid #739889
}

.coming-mark {
  background:var(--canvas);
  display:grid;
  place-items:center;
  width:250px;
  height:290px;
  border-radius:150px 150px 0 0;
  justify-self:center;
  transform:rotate(8deg);
  position:relative
}

.coming-mark::after {
  content:"";
  position:absolute;
  inset:-18px;
  border:1px solid #739889;
  border-radius:170px 170px 0 0
}

.coming-mark img {
  width:140px;
  height:140px
}

.questions {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  padding-block:85px
}

.questions h2 {
  margin-top:20px
}

.question-list {
  border-top:1px solid var(--line)
}

details {
  border-bottom:1px solid var(--line)
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  list-style:none;
  padding-block:23px;
  min-height:68px;
  font-size:15px;
  cursor:pointer
}

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

summary>span {
  font-size:23px;
  line-height:1;
  font-weight:400;
  color:var(--green);
  transition:transform .2s
}

details[open] summary>span {
  transform:rotate(45deg)
}

details p {
  padding:0 35px 23px 0;
  color:var(--muted);
  font-size:14px;
  max-width:520px
}

.site-footer {
  border-top:1px solid var(--line);
  padding-block:33px 25px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:26px
}

.site-footer p {
  font-size:11px;
  color:var(--muted);
  margin-top:8px
}

.footer-links {
  align-self:center;
  font-size:13px
}

.footer-links>a {
  display:inline-flex;
  align-items:center;
  gap:35px;
  min-height:44px;
  text-decoration:none
}

.footer-links>a:hover {
  text-decoration:underline
}

.site-footer .footer-status {
  grid-column:1/-1;
  font-size:10px;
  margin-top:0
}

@media(min-width:1500px) {
  .hero {
    padding-block:100px
  }
  .hero h1 {
    font-size:86px
  }
}

@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:28px;
    padding-block:68px
  }
  .hero h1 {
    font-size:clamp(52px,6.6vw,70px)
  }
  .lead {
    font-size:16px
  }
  .preview-stage {
    padding:56px 10px 48px 14px
  }
  .day-preview {
    padding:19px
  }
  .child-line {
    gap:7px
  }
  .confirmed {
    font-size:8px;
    padding:5px
  }
  .time-row {
    gap:15px
  }
  .time-row strong {
    font-size:26px
  }
  .floating-note {
    right:-6px;
    font-size:11px
  }
  .day-story {
    gap:27px
  }
  .day-story h3 {
    font-size:25px
  }
  .section-intro,.audience-heading {
    column-gap:45px
  }
  .audiences {
    padding:32px
  }
  .audiences article {
    padding-right:28px
  }
  .audiences article+article {
    padding-left:28px
  }
  .coming-mark {
    width:210px;
    height:250px
  }
  .questions {
    gap:50px
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    padding-block:17px;
    gap:16px
  }
  .brand img {
    width:146px
  }
  nav {
    gap:16px
  }
  nav a {
    font-size:12px
  }
  nav a:not(.nav-contact) {
    display:none
  }
  .nav-contact {
    padding-inline:12px;
    gap:12px
  }
  .hero {
    grid-template-columns:1fr;
    gap:38px;
    padding-block:45px 48px
  }
  .hero-copy {
    max-width:570px
  }
  .hero h1 {
    font-size:clamp(52px,11.8vw,74px);
    margin-block:23px
  }
  .lead {
    max-width:480px;
    font-size:16px
  }
  .hero-note {
    font-size:11px
  }
  .hero .button {
    margin-top:25px
  }
  .product-figure {
    width:min(100%,430px);
    justify-self:center
  }
  .preview-stage {
    padding:58px 24px 50px
  }
  .day-arch {
    inset-inline:16px
  }
  .day-preview {
    padding:23px;
    transform:rotate(-2deg)
  }
  .preview-title h2 {
    font-size:32px
  }
  .child-line {
    gap:10px
  }
  .child-line div>span {
    font-size:10px
  }
  .confirmed {
    font-size:9px;
    padding:5px 7px
  }
  .time-row strong {
    font-size:29px
  }
  .floating-note {
    right:4px;
    bottom:25px;
    transform:rotate(2deg)
  }
  figcaption {
    margin-top:20px
  }
  .idea-section {
    padding-block:56px 36px
  }
  .section-intro,.audience-heading {
    grid-template-columns:1fr;
    gap:18px
  }
  .section-intro>.eyebrow {
    margin-bottom:0
  }
  .section-intro>p:last-child,.audience-heading>p:last-child {
    font-size:15px;
    max-width:500px
  }
  h2 {
    font-size:36px
  }
  .day-story {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:40px
  }
  .day-story article {
    padding-top:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:30px
  }
  .story-top {
    grid-column:1/-1
  }
  .day-story h3 {
    margin-top:22px;
    font-size:26px
  }
  .day-story article>p {
    margin-top:22px;
    min-height:0;
    align-self:center
  }
  .story-example {
    grid-column:1/-1;
    margin-top:21px
  }
  .examples-note {
    text-align:left;
    font-size:10px
  }
  .audience-section {
    padding-block:56px
  }
  .audiences {
    margin-top:32px;
    padding:28px;
    grid-template-columns:1fr
  }
  .audiences article {
    padding:0
  }
  .audiences article+article {
    padding:28px 0 0;
    margin-top:28px;
    border-left:0;
    border-top:1px solid #c6d3c9
  }
  .audiences h3 {
    font-size:28px;
    margin-top:15px
  }
  .audiences p {
    max-width:500px;
    margin-top:14px
  }
  .coming-layout {
    grid-template-columns:1fr;
    gap:54px;
    padding-block:52px
  }
  .coming-section h2 {
    font-size:48px
  }
  .coming-section p:not(.eyebrow) {
    font-size:15px
  }
  .coming-tag {
    font-size:11px
  }
  .coming-mark {
    width:160px;
    height:185px;
    justify-self:end;
    margin-right:25px;
    margin-bottom:5px
  }
  .coming-mark img {
    width:105px;
    height:105px
  }
  .coming-mark::after {
    inset:-13px
  }
  .questions {
    grid-template-columns:1fr;
    gap:28px;
    padding-block:54px
  }
  .questions h2 {
    margin-top:17px
  }
  .site-footer {
    grid-template-columns:1fr;
    gap:20px;
    padding-block:28px
  }
  .footer-links>a {
    justify-content:space-between;
    max-width:290px
  }
  .site-footer .footer-status {
    margin-top:5px
  }
}

@media(max-width:390px) {
  .hero h1 {
    font-size:49px
  }
  .eyebrow {
    font-size:10px
  }
  .wrap {
    width:calc(100% - 36px)
  }
  .preview-stage {
    padding-inline:12px
  }
  .day-preview {
    padding:18px
  }
  .day-story article {
    grid-template-columns:1fr;
    gap:0
  }
  .day-story article>p {
    margin-top:14px
  }
  .day-story h3 br {
    display:none
  }
  .day-story h3 {
    max-width:260px
  }
  .floating-note {
    font-size:10px
  }
  .child-line {
    gap:7px
  }
  .child-line div>span {
    font-size:9px
  }
  .confirmed {
    font-size:8px
  }
  .audiences {
    padding:24px
  }
  h2 {
    font-size:33px
  }
}

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

@media(forced-colors:active) {
  .sun-underline::after,.day-arch,.coming-mark::after {
    display:none
  }
  .button,.confirmed,.coming-tag,.story-example,.day-update {
    border:1px solid CanvasText
  }
  .coming-section {
    border-block:1px solid CanvasText
  }
  .status-dot {
    background:CanvasText
  }
}