@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/dm-sans-reference-latin.woff2') format('woff2')
}

:root {
  --ink:#111;
  --muted:#555a64;
  --yellow:#ffd233;
  --marker:#ffe680;
  --grey:#f4f5f7;
  --line:#e4e6ea
}

* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-optical-sizing:auto;
  font-size:17px;
  line-height:1.6
}

button,input {
  font:inherit
}

a {
  color:inherit;
  text-underline-offset:3px
}

a:hover {
  text-decoration-thickness:2px
}

button {
  color:inherit;
  cursor:pointer
}

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

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #6237c8;
  outline-offset:5px
}

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

.wrap {
  width:100%;
  max-width:680px;
  padding-inline:20px;
  margin-inline:auto
}

.brand-header {
  padding-top:46px;
  padding-bottom:32px;
  text-align:center
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.025em;
  text-decoration:none
}

.wordmark img {
  flex:none
}

h1,h2,h3,p,figure,ol,ul,dl,dd {
  margin:0
}

h1,h2,h3 {
  font-weight:700
}

h1 {
  font-size:46px;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:13px 0 17px
}

h2 {
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.02em;
  text-align:center;
  margin-bottom:18px
}

h3 {
  font-size:17px;
  line-height:1.4
}

p {
  margin-block:0 16px
}

p:last-child {
  margin-bottom:0
}

mark {
  color:inherit;
  background:linear-gradient(transparent 58%,var(--marker) 58%);
  padding:0 2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.eyebrow {
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px
}

.hero {
  text-align:center
}

.hero-copy {
  font-size:18px;
  color:var(--muted);
  line-height:1.55;
  max-width:540px;
  margin:0 auto
}

.hero-figure {
  margin-top:26px
}

.hero-mockup {
  width:100%;
  height:auto;
  aspect-ratio:1672/941;
  object-fit:cover;
  border-radius:12px
}

button.preview-button {
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:0;
  width:100%;
  overflow:hidden;
  text-align:left
}

.preview-heading {
  height:36px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  background:var(--grey);
  border-bottom:1px solid var(--line)
}

.sheet-symbol {
  font-size:19px;
  line-height:1
}

.preview-label {
  margin-left:auto;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted)
}

.hero-image-frame {
  display:block;
  aspect-ratio:16/9;
  overflow:hidden
}

.hero-image-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 57%
}

.enlarge-caption {
  display:flex;
  justify-content:space-between;
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  border-top:1px solid var(--line)
}

figcaption {
  font-size:12px;
  color:var(--muted);
  margin-top:9px;
  line-height:1.5
}

.hero-offer {
  margin-top:21px
}

.price {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
  line-height:1.2
}

.price strong {
  font-size:52px;
  font-weight:700;
  letter-spacing:-.03em
}

.price>span {
  font-size:15px;
  color:var(--muted)
}

.price .reference-price {
  color:#8b919c;
  font-size:22px;
  font-weight:600;
  text-decoration-thickness:1.5px
}

.price-context {
  margin:-7px 0 18px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}

.offer-checks {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:22px;
  row-gap:5px;
  list-style:none;
  padding:0;
  margin:19px 0 9px;
  color:var(--muted);
  font-size:13px
}

.offer-checks li::before {
  content:'✓';
  margin-right:7px;
  color:#07834d;
  font-weight:700
}

.primary-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  max-width:440px;
  margin-inline:auto;
  padding:19px 26px;
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
  background:var(--yellow);
  font-size:19px;
  line-height:1.35;
  font-weight:700;
  text-decoration:none
}

.primary-cta:hover {
  background:#ffdc5a
}

.primary-cta:active {
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink)
}

.offer-meta {
  font-size:13px;
  margin:16px 0 5px;
  color:var(--muted)
}

.small {
  font-size:13px;
  line-height:1.65;
  color:var(--muted)
}

.draft-note {
  font-size:11px;
  color:#616570;
  line-height:1.5;
  margin-top:9px
}

.section-gap {
  margin-top:64px
}

.problem {
  padding:36px;
  background:var(--grey);
  border-radius:14px
}

.problem h2 {
  font-size:30px;
  text-align:left;
  margin-bottom:22px
}

.problem p {
  line-height:1.65;
  color:#40444d
}

.problem p strong {
  color:var(--ink)
}

.section-intro {
  max-width:540px;
  margin:0 auto 27px;
  text-align:center;
  color:var(--muted)
}

.journey {
  list-style:none;
  padding:0;
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.journey li {
  display:block;
  position:relative;
  padding:20px;
  border:1px solid var(--line);
  border-radius:12px
}

.journey li:last-child {
  padding-bottom:20px
}

.journey li:not(:last-child)::after {
  content:none
}

.step-number {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 35px;
  width:30px;
  height:30px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
  font-size:14px;
  font-weight:700
}

.journey h3 {
  margin-top:12px
}

.journey p {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin-top:6px
}

.use-cases {
  margin-top:27px;
  padding-top:19px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--muted)
}

.center {
  text-align:center
}

.preview-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.gallery-image {
  display:block;
  height:152px;
  background:#fafafa;
  overflow:hidden
}

.gallery-image img {
  max-width:none;
  width:auto;
  height:100%;
  object-fit:cover;
  object-position:left top
}

.gallery-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  border-top:1px solid var(--line)
}

.preview-grid+.small {
  margin-top:18px
}

.contents-list {
  padding:0;
  list-style:none;
  border:1px solid var(--ink);
  border-radius:12px;
  overflow:hidden
}

.contents-list li {
  display:flex;
  gap:13px;
  padding:18px 20px;
  border-bottom:1px solid var(--line)
}

.check-icon {
  margin-top:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border:1.5px solid var(--ink);
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:700
}

.contents-list h3 {
  font-size:16px
}

.contents-list p {
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
  margin-top:5px;
  overflow-wrap:anywhere
}

.contents-list li.contents-price {
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--marker);
  border-bottom:0;
  font-size:15px
}

.contents-price strong {
  font-size:23px;
  white-space:nowrap
}

.contents-price strong span {
  display:block;
  font-size:11px;
  font-weight:500;
  color:#3d3a2d;
  text-align:right
}

.contents-price>span small {
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.45;
  font-weight:400
}

.contents-price .reference-price {
  color:#666b75;
  font-size:17px;
  font-weight:500;
  margin-right:4px;
  text-decoration-thickness:1px
}

.tab-overview {
  margin-top:26px
}

.tab-overview>h3 {
  margin-bottom:18px
}

.tabs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 26px
}

.tabs-grid dt {
  font-size:14px;
  font-weight:700
}

.tabs-grid dd {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-top:3px
}

.capacity {
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:15px
}

.capacity strong {
  font-weight:500
}

.example-panel {
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
  background:#fafafb
}

.example-totals {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  text-align:center;
  margin-bottom:23px
}

.example-totals dt {
  font-size:12px;
  color:var(--muted)
}

.example-totals dd {
  font-size:34px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.4
}

.example-totals>div:last-child dd {
  display:inline;
  background:var(--marker);
  padding:0 7px
}

.example-panel>p {
  font-size:15px;
  line-height:1.65
}

.example-details {
  border-top:1px solid var(--line);
  margin-top:20px
}

.example-details summary {
  font-size:14px;
  font-weight:700;
  padding:15px 0 0;
  cursor:pointer
}

.example-breakdown {
  padding-top:17px;
  font-size:13px
}

.example-breakdown dl>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:7px 0
}

.example-breakdown dd {
  white-space:nowrap
}

.breakdown-total {
  font-weight:700;
  border-top:1px solid var(--line);
  margin-top:5px
}

.example-breakdown p {
  margin-top:16px;
  color:var(--muted)
}

.example-panel+.small {
  margin-top:14px
}

.requirement-block {
  padding:22px 0;
  border-bottom:1px solid var(--line)
}

.requirement-block:first-of-type {
  padding-top:0
}

.requirement-block p {
  font-size:15px;
  margin-top:9px;
  color:#484d57;
  line-height:1.7
}

.requirement-block p.small {
  font-size:13px;
  color:var(--muted)
}

.final-offer {
  padding:40px;
  border:1px solid var(--ink);
  border-radius:14px;
  text-align:center
}

.final-offer h2 {
  margin:14px 0 20px
}

.final-offer>p:not(.eyebrow):first-of-type {
  font-weight:700
}

.final-copy {
  font-size:16px;
  color:var(--muted);
  max-width:450px;
  margin-inline:auto
}

.final-offer .price {
  margin-top:24px
}

.included-recap {
  margin:20px auto 10px;
  max-width:440px
}

.permission-note {
  font-size:12px;
  line-height:1.65;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:23px;
  color:var(--muted)
}

.faq h2 {
  margin-bottom:27px
}

.faq details {
  border-top:1px solid var(--line)
}

.faq details:last-child {
  border-bottom:1px solid var(--line)
}

.faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  list-style:none;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  padding:18px 4px;
  cursor:pointer
}

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

.faq summary::after {
  content:'+';
  font-size:24px;
  font-weight:400;
  line-height:1;
  flex:none
}

.faq details[open] summary::after {
  content:'−'
}

.faq details p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  padding:0 4px 20px
}

.site-footer {
  text-align:center;
  padding-top:52px;
  padding-bottom:42px
}

.site-footer .wordmark {
  font-size:15px;
  margin-bottom:12px
}

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

.skip-link {
  position:fixed;
  z-index:10;
  top:-100px;
  left:12px;
  padding:10px 18px;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:5px
}

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

dialog {
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  width:calc(100% - 32px);
  max-width:1200px;
  max-height:92dvh;
  color:var(--ink);
  background:#fff;
  box-shadow:0 16px 70px #0003
}

dialog::backdrop {
  background:#111b
}

.dialog-toolbar {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:17px 20px;
  border-bottom:1px solid var(--line)
}

.dialog-toolbar h2 {
  text-align:left;
  font-size:19px;
  margin:0
}

.dialog-toolbar p {
  font-size:12px;
  color:var(--muted);
  margin-top:4px
}

.dialog-toolbar button,.dialog-actions button {
  padding:9px 13px;
  min-height:44px;
  border:1px solid #ccd0d6;
  border-radius:6px;
  background:#fff;
  white-space:nowrap;
  font-size:13px;
  font-weight:600
}

.dialog-actions {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px;
  background:var(--grey)
}

.dialog-actions span {
  font-size:11px;
  color:var(--muted)
}

.preview-scroll {
  overflow:auto;
  max-height:calc(92dvh - 163px);
  background:#eee;
  overscroll-behavior:contain
}

.preview-scroll img {
  width:100%;
  height:auto;
  max-width:none;
  margin:0 auto
}

.preview-scroll img.full-size {
  width:auto;
  min-width:1200px
}

@media(max-width:600px) {
  body {
    font-size:16px
  }

  .brand-header {
    padding-top:30px;
    padding-bottom:27px
  }

  .wordmark {
    font-size:16px
  }

  .eyebrow {
    font-size:11px
  }

  h1 {
    font-size:33px;
    margin-top:12px;
    margin-bottom:16px;
    line-height:1.14
  }

  h2 {
    font-size:28px
  }

  .hero-copy {
    font-size:16px;
    line-height:1.6
  }

  .hero-figure {
    margin-top:23px
  }

  .hero-image-frame {
    aspect-ratio:16/10
  }

  .preview-heading {
    height:31px;
    padding-inline:10px;
    font-size:11px
  }

  .preview-label {
    font-size:9px
  }

  .enlarge-caption {
    font-size:11px;
    padding:8px 10px
  }

  figcaption {
    font-size:10px
  }

  .hero-offer {
    margin-top:18px
  }

  .price strong {
    font-size:38px
  }

  .primary-cta {
    font-size:16px;
    padding:18px 12px;
    gap:6px
  }

  .offer-meta {
    font-size:11px
  }

  .hero-offer .small {
    font-size:12px
  }

  .draft-note {
    font-size:10px
  }

  .section-gap {
    margin-top:49px
  }

  .problem {
    padding:25px 23px
  }

  .problem h2 {
    font-size:27px
  }

  .problem p {
    font-size:15px
  }

  .section-intro {
    font-size:15px;
    margin-bottom:23px
  }

  .journey li {
    gap:13px;
    padding-bottom:25px
  }

  .journey h3 {
    font-size:16px
  }

  .journey p {
    font-size:14px
  }

  .preview-grid {
    gap:12px
  }

  .gallery-image {
    height:117px
  }

  .gallery-caption {
    font-size:12px;
    padding:10px
  }

  .contents-list li {
    padding:17px 15px;
    gap:10px
  }

  .contents-list h3 {
    font-size:15px
  }

  .contents-list p {
    font-size:13px
  }

  .contents-list li.contents-price {
    font-size:13px
  }

  .contents-price strong {
    font-size:22px
  }

  .tab-overview>h3 {
    font-size:16px
  }

  .tabs-grid {
    gap:18px
  }

  .tabs-grid dt,.tabs-grid dd {
    font-size:13px
  }

  .capacity {
    font-size:11px
  }

  .example-panel {
    padding:22px 17px
  }

  .example-totals {
    gap:7px
  }

  .example-totals dt {
    font-size:10px
  }

  .example-totals dd {
    font-size:30px
  }

  .example-panel>p {
    font-size:14px
  }

  .example-breakdown {
    font-size:12px
  }

  .example-panel+.small {
    font-size:11px
  }

  .final-offer {
    padding:29px 19px
  }

  .final-offer h2 {
    font-size:27px
  }

  .final-copy {
    font-size:15px
  }

  .included-recap {
    font-size:12px
  }

  .permission-note {
    font-size:11px
  }

  .faq summary {
    font-size:15px;
    padding:18px 1px;
    gap:14px
  }

  .faq details p {
    font-size:14px
  }

  .site-footer {
    padding-top:40px;
    padding-bottom:32px
  }

  .dialog-toolbar {
    padding:12px
  }

  .dialog-toolbar h2 {
    font-size:15px
  }

  .dialog-toolbar p {
    font-size:10px
  }

  .dialog-actions {
    padding:7px 12px
  }

  .dialog-actions span {
    max-width:110px;
    font-size:10px
  }

  .preview-scroll {
    max-height:calc(92dvh - 170px)
  }

}

.preview-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.preview-grid figure {
  min-width:0
}

.price-check-gallery {
  grid-column:1/-1
}

.price-check-gallery .gallery-image {
  height:225px
}

.price-check-gallery .gallery-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 56%
}

@media(max-width:600px) {
  h1 {
    font-size:31px
  }

  .price strong {
    font-size:46px
  }

  .price .reference-price {
    font-size:20px
  }

  .price-context {
    font-size:11px
  }

  .offer-checks {
    font-size:11px;
    column-gap:12px;
    margin-top:18px
  }

  .hero-figure figcaption {
    font-size:10px
  }

  .primary-cta {
    font-size:17px
  }

  .journey {
    grid-template-columns:minmax(0,1fr);
    gap:12px
  }

  .journey li,.journey li:last-child {
    padding:20px
  }

  .contents-price>span {
    max-width:175px
  }

  .contents-price>span small {
    font-size:10px
  }

  .contents-price .reference-price {
    font-size:15px
  }

  .preview-grid {
    grid-template-columns:minmax(0,1fr);
    gap:21px
  }

  .gallery-image {
    height:152px
  }

  .tabs-grid {
    grid-template-columns:minmax(0,1fr)
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important;
    animation:none!important
  }

}