:root{--ink:#211e1a;--muted:#746d63;--paper:#fffdf8;--line:rgba(78,68,54,.16);--green:#27a66d;--gold:#efbd37;--blue:#5d90e8;--shadow:rgba(54,42,28,.15)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(115deg,#fff6dd,#f6fbff 58%,#f5fbef);color:var(--ink);font-family:Optima,Candara,"Segoe UI",system-ui,sans-serif}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;width:min(1240px,calc(100% - 32px));margin:auto;padding:18px 0;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,253,248,.78);box-shadow:0 12px 34px rgba(54,42,28,.08);font-weight:900}.brand span{width:12px;height:42px;border-radius:99px;background:linear-gradient(var(--blue),var(--gold),var(--green))}.brand strong{font-family:Georgia,serif;font-size:1.28rem;font-weight:500;line-height:1;color:var(--ink)}.nav nav{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(255,253,248,.72)}.nav nav a{padding:10px 14px;border-radius:999px;color:var(--muted);font-weight:900;font-size:.86rem}.nav nav a:hover{background:white;color:var(--ink)}main{width:min(1240px,calc(100% - 32px));margin:auto}.hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:54px;align-items:center;min-height:calc(100vh - 82px);padding:46px 0 80px}.eyebrow{margin:0;color:var(--muted);font-size:.76rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}h1,h2,h3{font-family:Georgia,serif;font-weight:500;letter-spacing:0;margin:0}.forget-me-not{position:absolute;top:-24px;right:18px;width:78px;height:78px;opacity:.62;filter:drop-shadow(0 14px 22px rgba(87,57,130,.16));pointer-events:none}.forget-me-not span{position:absolute;left:50%;top:50%;width:31px;height:31px;margin:-15px;border-radius:58% 42% 58% 42%;background:linear-gradient(135deg,rgba(160,122,220,.72),rgba(103,77,166,.5));transform-origin:15px 38px}.forget-me-not span:nth-child(1){transform:translate(-50%,-78%) rotate(0deg)}.forget-me-not span:nth-child(2){transform:translate(-18%,-45%) rotate(72deg)}.forget-me-not span:nth-child(3){transform:translate(-30%,2%) rotate(144deg)}.forget-me-not span:nth-child(4){transform:translate(-70%,2%) rotate(216deg)}.forget-me-not span:nth-child(5){transform:translate(-82%,-45%) rotate(288deg)}.forget-me-not i{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#f6d65a 0 45%,#d6a629 46% 100%);transform:translate(-50%,-50%)}h1{margin-top:14px;font-size:clamp(4rem,8vw,7.7rem);line-height:.86}h2{margin-top:10px;font-size:clamp(2.4rem,5vw,4.8rem);line-height:.92}h3{font-size:1.55rem}.lede,.section p{color:#4c453d;line-height:1.55}.lede{font-family:Georgia,serif;font-size:1.45rem;max-width:660px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.actions a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-weight:900;background:white}.actions a:first-child{background:var(--green);border-color:var(--green);color:white}.hero-stack{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}.phone-shot,.wide-shot,.panel-shot,.proof-strip,.feature-grid article,.profile-callout,.sources,.sample-profile{border:1px solid var(--line);border-radius:10px;background:rgba(255,253,248,.82);box-shadow:0 24px 70px var(--shadow);overflow:hidden}.phone-shot{height:520px;margin:0}.phone-shot img{width:100%;height:100%;object-fit:cover;object-position:top}.top-shot{transform:translateY(-42px)}.wide-shot{grid-column:1/-1;margin:0}.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:90px;overflow:hidden}.proof-strip article{padding:26px;background:rgba(255,255,255,.55)}.proof-strip strong{display:block;font-family:Georgia,serif;font-size:1.55rem;font-weight:500}.proof-strip span{display:block;margin-top:10px;color:var(--muted);line-height:1.45}.section{padding:90px 0}.split{display:grid;grid-template-columns:.72fr 1.28fr;gap:50px;align-items:center}.panel-shot{margin:0}.section-heading{max-width:840px;margin-bottom:28px}.feature-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.feature-grid article{padding:24px}.feature-grid p{color:var(--muted)}.guide-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.guide-gallery img{height:520px;width:100%;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:10px;background:white}.profile-callout{display:grid;grid-template-columns:1fr 420px;gap:34px;padding:44px;background:linear-gradient(135deg,rgba(39,166,109,.13),rgba(255,255,255,.78))}.folder-card{display:grid;gap:10px}.folder-card code{display:block;padding:16px;border:1px solid var(--line);border-radius:8px;background:white;color:#176b49;font-weight:900}.family-sample{display:grid;grid-template-columns:.72fr 1.28fr;gap:38px;align-items:start}.family-copy{position:sticky;top:102px}.sample-profile{padding:24px;background:linear-gradient(135deg,rgba(33,30,26,.94),rgba(33,30,26,.86)),linear-gradient(120deg,#fff6dd,#f6fbff);color:#fffdf8}.sample-profile .eyebrow,.sample-profile p{color:#cfc5b4}.sample-profile-header{display:flex;justify-content:space-between;align-items:start;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,253,248,.18)}.sample-profile-header h3{margin-top:8px;font-size:clamp(2.4rem,5vw,4.9rem);line-height:.88}.sample-profile-header>span{padding:9px 12px;border:1px solid rgba(255,253,248,.22);border-radius:999px;color:#dff7df;font-weight:900}.sample-profile-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;margin-top:18px}.sample-photo{margin:0;overflow:hidden;border:1px solid rgba(255,253,248,.2);border-radius:8px;background:#fffdf8}.sample-photo img{height:360px;width:100%;object-fit:cover;object-position:center}.sample-photo figcaption{padding:12px;color:#211e1a;font-weight:900}.sample-clock-card{display:grid;align-content:start;gap:18px;padding:22px;border:1px solid rgba(255,253,248,.2);border-radius:8px;background:rgba(255,253,248,.06)}.clock-digits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.clock-digits div,.clock-total-grid div{min-width:0;padding:16px;border:1px solid rgba(255,253,248,.2);border-radius:8px;background:rgba(0,0,0,.18)}.clock-digits strong{display:block;font-family:Georgia,serif;font-size:clamp(3.5rem,7vw,6rem);line-height:.8;font-weight:500;color:#fffdf8}.clock-digits span,.clock-total-grid span{display:block;margin-top:10px;color:#cfc5b4;font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.clock-subline{margin:0;font-size:1.08rem}.clock-subline span{color:#fffdf8;font-weight:900}.clock-total-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.clock-total-grid strong{display:block;font-family:Georgia,serif;font-size:2rem;font-weight:500}.sample-profile-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.sample-profile-footer article{padding:16px;border:1px solid rgba(255,253,248,.2);border-radius:8px;background:rgba(255,253,248,.06)}.sample-profile-footer span{color:#cfc5b4;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.sample-profile-footer strong{display:block;margin-top:8px;font-family:Georgia,serif;font-size:1.55rem;font-weight:500}.sample-profile-footer p{margin-bottom:0}.sources{text-align:center;padding:48px}.source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.source-grid a{padding:18px;border:1px solid var(--line);border-radius:8px;background:white;font-weight:900;color:#1d6c4a}@media(max-width:980px){.nav{align-items:flex-start;flex-direction:column}.nav nav{overflow:auto;width:100%}.hero,.split,.profile-callout,.family-sample,.sample-profile-grid{grid-template-columns:1fr}.family-copy{position:static}.proof-strip,.feature-grid,.guide-gallery,.source-grid,.sample-profile-footer{grid-template-columns:1fr}.phone-shot{height:420px}.top-shot{transform:none}}

.essentials-demo {
  padding-top: 30px;
}

.demo-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), transparent 42%), rgba(255, 253, 248, 0.9);
  box-shadow: 0 24px 70px var(--shadow);
  padding: clamp(22px, 4vw, 42px);
}

.demo-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.demo-heading h2 {
  text-align: right;
}

.demo-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-form input,
.demo-form textarea,
.demo-form select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 14px;
}

.demo-form textarea {
  min-height: 92px;
  resize: vertical;
}

.demo-date-grid,
.demo-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 28px 0 18px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.demo-tabs button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.demo-tabs button.is-active {
  border-color: rgba(39, 166, 109, 0.35);
  background: linear-gradient(135deg, var(--gold), var(--green));
  color: #fffdf8;
  box-shadow: inset 0 0 0 2px rgba(93, 144, 232, 0.78);
}

.demo-tab-panels,
.demo-tab-panel {
  display: grid;
  gap: 16px;
}

.demo-tab-panel[hidden] {
  display: none;
}

.demo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.demo-actions button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  padding: 0 18px;
  cursor: pointer;
}

.demo-actions button:first-child {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--gold), var(--green));
  color: #fffdf8;
}

.demo-actions p {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
}

@media (max-width: 760px) {
  .demo-heading,
  .demo-date-grid,
  .demo-mini-grid,
  .demo-tabs {
    grid-template-columns: 1fr;
  }

  .demo-heading h2 {
    text-align: left;
  }
}

.demo-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -6px 0 22px;
}

.demo-guide-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.demo-guide-actions button:first-child {
  border-color: rgba(39, 166, 109, 0.32);
  background: rgba(39, 166, 109, 0.1);
}

.demo-records {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.demo-records-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
}

.demo-records-heading strong {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
}

.demo-record-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.demo-record-list article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.demo-record-list span,
.demo-guide-hero span,
.demo-guide-hero small,
.demo-guide-stats span,
.demo-milestone-list article span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-record-list strong {
  display: block;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.demo-record-list p {
  margin-bottom: 0;
}

.demo-guide-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(33, 30, 26, 0.28);
  backdrop-filter: blur(2px);
}

.demo-guide-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(470px, calc(100vw - 18px));
  height: 100vh;
  border-left: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), transparent 36%), #fffdf8;
  box-shadow: -28px 0 70px rgba(72, 55, 35, 0.18);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.demo-guide-panel.is-open {
  transform: translateX(0);
}

.demo-guide-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.demo-guide-header h2 {
  margin-top: 6px;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
}

.demo-guide-header button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.demo-guide-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.demo-guide-hero,
.demo-scale-card,
.demo-guide-stats div,
.demo-milestone-list,
.demo-info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(72, 55, 35, 0.08);
}

.demo-guide-hero {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(39, 166, 109, 0.14), rgba(255, 255, 255, 0.78) 54%), #fffdf8;
}

.demo-guide-hero strong {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: clamp(3.4rem, 9vw, 5rem);
  font-weight: 500;
  line-height: 0.84;
}

.demo-guide-hero p {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.32rem;
  line-height: 1.12;
}

.demo-scale-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(39, 166, 109, 0.1)), #fffdf8;
}

.demo-baby-shape::before,
.demo-baby-shape::after {
  position: absolute;
  left: 50%;
  border: 1px solid var(--line);
  content: "";
  transform: translateX(-50%);
}

.demo-baby-shape::before {
  top: 64px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #daf6dc;
}

.demo-baby-shape::after {
  top: 136px;
  width: 118px;
  height: 88px;
  border-radius: 58px 58px 30px 30px;
  background: #fff3cf;
}

.demo-baby-shape span::before,
.demo-baby-shape span::after {
  position: absolute;
  z-index: 2;
  top: 98px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.demo-baby-shape span::before { left: calc(50% - 18px); }
.demo-baby-shape span::after { left: calc(50% + 8px); }

.demo-scale-line {
  position: absolute;
  left: 26px;
  right: 26px;
  height: 2px;
}

.demo-scale-line.baby { bottom: 104px; background: var(--green); }
.demo-scale-line.avg { bottom: 82px; background: var(--blue); }

.demo-scale-line span {
  position: absolute;
  top: -15px;
  left: 12px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  font-size: 0.72rem;
  font-weight: 900;
}

.demo-scale-line.avg span {
  left: 140px;
}

.demo-guide-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.demo-guide-stats.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-guide-stats div {
  padding: 16px;
}

.demo-guide-stats strong {
  display: block;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 0.95;
}

.milestone-hero {
  background: linear-gradient(135deg, rgba(239, 189, 55, 0.22), rgba(255, 255, 255, 0.78) 54%), #fffdf8;
}

.demo-milestone-list,
.demo-info-card {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.demo-milestone-list article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.demo-milestone-list article strong {
  font-family: Georgia, serif;
  font-size: 1.22rem;
  font-weight: 500;
}

.demo-milestone-list article p,
.demo-info-card p,
.demo-info-card ul {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.demo-milestone-list button {
  justify-self: start;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  color: #fffdf8;
  font: inherit;
  font-weight: 900;
}

.development-hero strong {
  font-size: clamp(2.8rem, 8vw, 4.5rem);
}

.demo-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(82, 70, 54, 0.14);
}

.demo-progress i {
  display: block;
  width: 8.5%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--green));
}

@media (max-width: 760px) {
  .demo-record-list,
  .demo-guide-stats {
    grid-template-columns: 1fr;
  }
}


.status-feature-card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-hue-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.status-hue-demo span,
.status-hue-demo strong {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.status-hue-demo strong {
  background: #d89217;
  color: #fffdf8;
}

.demo-status-hue {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(39, 166, 109, 0.1), rgba(255, 255, 255, 0.76));
}

.demo-status-hue[data-status="caution"] {
  background: linear-gradient(135deg, rgba(216, 146, 23, 0.18), rgba(255, 255, 255, 0.76));
}

.demo-status-hue[data-status="attention"] {
  background: linear-gradient(135deg, rgba(222, 77, 69, 0.18), rgba(255, 255, 255, 0.76));
}

.demo-status-hue strong {
  display: block;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
}

.demo-status-hue p:not(.eyebrow) {
  margin: 8px 0 0;
}

.manual-status-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.manual-status-toggle button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.manual-status-toggle button.is-active[data-manual-status="good"] {
  background: var(--green);
  color: #fffdf8;
}

.manual-status-toggle button.is-active[data-manual-status="caution"] {
  background: #d89217;
  color: #fffdf8;
}

.manual-status-toggle button.is-active[data-manual-status="attention"] {
  background: #de4d45;
  color: #fffdf8;
}

@media (max-width: 760px) {
  .demo-status-hue {
    grid-template-columns: 1fr;
  }
}

.daily-images-demo {
  display: grid;
  grid-template-columns: 0.66fr 1.34fr;
  gap: 38px;
  align-items: start;
}

.daily-images-copy {
  position: sticky;
  top: 102px;
}

.timelapse-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 24px 70px var(--shadow);
  padding: 18px;
  overflow: hidden;
}

.timelapse-player {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.timelapse-player img {
  width: 100%;
  height: clamp(280px, 42vw, 500px);
  object-fit: cover;
  object-position: left center;
}

.timelapse-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 8px;
  background: rgba(33, 30, 26, 0.78);
  color: #fffdf8;
  backdrop-filter: blur(8px);
}

.timelapse-controls span {
  color: #cfc5b4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timelapse-controls strong {
  grid-column: 1;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

.timelapse-controls button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #fffdf8;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.timelapse-scan {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: linear-gradient(90deg, rgba(255, 253, 248, 0), rgba(255, 253, 248, 0.32), rgba(255, 253, 248, 0));
  opacity: 0;
  pointer-events: none;
}

.timelapse-player.is-playing .timelapse-scan {
  animation: timelapseScan 2600ms ease-in-out;
}

@keyframes timelapseScan {
  0% { opacity: 0; transform: translateX(-100%); }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateX(520%); }
}

.daily-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.daily-image-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.daily-image-grid span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.daily-image-grid strong {
  display: block;
  margin-top: 8px;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.daily-image-grid p {
  margin-bottom: 0;
}

.nursery-moment {
  position: relative;
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 34px;
  align-items: center;
  margin: 18px 0 48px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.68);
  box-shadow: 0 24px 70px rgba(54, 42, 28, 0.12);
}

.section-flower {
  z-index: 0;
  width: 64px;
  height: 64px;
  opacity: 0.42;
}

.section-flower span {
  width: 26px;
  height: 26px;
  margin: -13px;
  transform-origin: 13px 32px;
}

.section-flower i {
  width: 13px;
  height: 13px;
}

.nursery-moment > :not(.section-flower),
.proof-strip > :not(.section-flower),
.feature-board > :not(.section-flower),
.profile-callout > :not(.section-flower) {
  position: relative;
  z-index: 1;
}

.nursery-flower {
  top: 18px;
  right: 18px;
}

.proof-strip {
  position: relative;
}

.proof-flower {
  top: -28px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(12deg);
}

.feature-board {
  position: relative;
}

.guides-flower {
  top: 18px;
  right: 24px;
  transform: rotate(-10deg);
}

.profile-callout {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
  padding: clamp(54px, 7vw, 82px);
}

.profile-callout h2 {
  max-width: 820px;
}

.profile-callout p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 24px;
  font-size: 1.08rem;
}

.profile-flower {
  top: 24px;
  right: 28px;
  transform: rotate(16deg);
}

.folder-card {
  gap: 16px;
}

.folder-card code {
  padding: 22px 24px;
}

.nursery-moment h2 {
  margin-top: 12px;
  font-size: clamp(2.2rem, 4vw, 4.1rem);
}

.nursery-moment p:last-child {
  margin-bottom: 0;
  color: #4c453d;
  line-height: 1.58;
}

.nursery-moment figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(78, 68, 54, 0.16);
  border-radius: 10px;
  background: #fffdf8;
}

.nursery-moment img {
  width: 100%;
  height: clamp(360px, 42vw, 560px);
  object-fit: cover;
  object-position: center;
}

.family-viewing {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 34px;
  align-items: center;
  margin: 0 0 42px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.78), rgba(246, 251, 255, 0.58));
  box-shadow: 0 24px 70px rgba(54, 42, 28, 0.12);
}

.family-viewing figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(78, 68, 54, 0.16);
  border-radius: 10px;
  background: #fffdf8;
}

.family-viewing img {
  width: 100%;
  height: clamp(340px, 38vw, 520px);
  object-fit: cover;
  object-position: center;
}

.family-viewing h2 {
  margin-top: 12px;
  font-size: clamp(2.2rem, 4vw, 4.1rem);
}

.family-viewing p:last-child {
  margin-bottom: 0;
  color: #4c453d;
  line-height: 1.58;
}

.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  width: min(920px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid rgba(78, 68, 54, 0.18);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 24px 70px rgba(54, 42, 28, 0.2);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent h2 {
  margin-top: 6px;
  font-size: 1.65rem;
}

.cookie-consent p:last-child {
  margin: 8px 0 0;
  color: #4c453d;
  line-height: 1.45;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.cookie-actions button[data-cookie-choice="accepted"] {
  border-color: var(--green);
  background: var(--green);
  color: #fffdf8;
}

@media (max-width: 980px) {
  .daily-images-demo,
  .daily-image-grid {
    grid-template-columns: 1fr;
  }

  .daily-images-copy {
    position: static;
  }

  .nursery-moment {
    grid-template-columns: 1fr;
    margin: 12px 0 34px;
    padding: 18px;
  }

  .nursery-moment img {
    height: auto;
  }

  .family-viewing {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .family-viewing img {
    height: auto;
  }

  .section-flower {
    width: 52px;
    height: 52px;
    opacity: 0.32;
  }

  .profile-callout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 34px 24px;
  }

  .folder-card code {
    padding: 18px;
  }

  .cookie-consent {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions button {
    flex: 1 1 160px;
  }
}

.tulip-motif {
  position: absolute;
  top: -24px;
  right: 18px;
  width: 78px;
  height: 92px;
  opacity: 0.68;
  filter: drop-shadow(0 14px 22px rgba(138, 82, 70, 0.14));
  pointer-events: none;
}

.tulip-motif span {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 28px;
  height: 42px;
  border-radius: 58% 58% 48% 48%;
  background: linear-gradient(145deg, #ffe7dd, #eaa3a1 62%, #c97176);
  transform-origin: 50% 100%;
}

.tulip-motif span:nth-child(1) {
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
}

.tulip-motif span:nth-child(2) {
  top: 31px;
  transform: translateX(-86%) rotate(-24deg);
  background: linear-gradient(145deg, #fff2e8, #efb5aa 64%, #cb7778);
  z-index: 2;
}

.tulip-motif span:nth-child(3) {
  top: 31px;
  transform: translateX(-14%) rotate(24deg);
  background: linear-gradient(145deg, #fff1df, #f0c3a5 64%, #d28c77);
  z-index: 2;
}

.tulip-motif i {
  position: absolute;
  left: 50%;
  top: 62px;
  width: 7px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(#8daf69, #477f58);
  transform: translateX(-50%);
}

.tulip-motif::before,
.tulip-motif::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 70px;
  width: 25px;
  height: 12px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #8fbd74, #4f8c5f);
}

.tulip-motif::before {
  transform: translateX(-95%) rotate(-28deg);
}

.tulip-motif::after {
  transform: translateX(-5%) rotate(208deg);
}

.section-flower.tulip-motif {
  width: 64px;
  height: 78px;
  opacity: 0.46;
}

.section-flower.tulip-motif span {
  width: 23px;
  height: 34px;
  top: 24px;
}

.section-flower.tulip-motif span:nth-child(2),
.section-flower.tulip-motif span:nth-child(3) {
  top: 27px;
}

.section-flower.tulip-motif i {
  top: 51px;
  height: 28px;
}

.section-flower.tulip-motif::before,
.section-flower.tulip-motif::after {
  top: 57px;
}