* {
        box-sizing:border-box
      }
      html {
        scroll-behavior:smooth
      }
      body {
        margin:0;
        background:#eee2cf;
        color:#30261e;
        font:18px/1.65 Arimo,Arial,sans-serif
      }
      .sheet {
        position:relative;
        max-width:1060px;
        margin:52px auto;
        background:#fff4e3;
        border:1px solid #d7bb96;
        padding:60px 64px 38px;
        box-shadow:10px 10px 0 #c5665e,16px 18px 30px #60452c20
      }
      .tape {
        position:absolute;
        top:-18px;
        left:39%;
        width:22%;
        height:38px;
        background:#c5665ee8;
        transform:rotate(-3deg)
      }
      .eyebrow {
        text-transform:uppercase;
        letter-spacing:2px;
        color:#9c6719;
        font-size:13px;
        font-weight:bold;
        margin:0 0 15px
      }
      h1,h2,h3,.closing {
        font-family:Caveat,cursive;
        font-weight:600;
        line-height:1.08
      }
      h1 {
        font-size:clamp(48px,7vw,76px);
        margin:0 0 18px
      }
      h2 {
        font-size:48px;
        color:#b94f49;
        margin:0 0 14px
      }
      h3 {
        font-size:34px;
        margin:15px 0 12px;
        color:#873e36
      }
      p {
        margin:0 0 18px
      }
      .intro {
        font-size:21px;
        max-width:800px
      }
      .rule {
        height:3px;
        background:#d6a04b;
        width:100%;
        margin:28px 0
      }
      nav {
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        margin:28px 0 36px
      }
      nav-center {
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        margin:28px 0 36px;
        justify-content: center;
      }
      a {
        color:#873e36;
        text-underline-offset:4px
      }
      section {
        scroll-margin-top:25px;
        margin-top:46px
      }
      .section-intro {
        color:#685747;
        max-width:780px
      }
      .grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
        margin:25px 0
      }
      .card {
        border:1px solid #decaad;
        background:#fffbf4;
        padding:24px;
        break-inside:avoid
      }
      .card p {
        margin:0;
        font-size:17px
      }
      .topline {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px
      }
      .number {
        font-size:14px;
        color:#987246
      }
      .badge {
        font-size:12px;
        color:#855a20;
        background:#f4e8cc;
        padding:4px 10px;
        border-radius:20px
      }
      .closing {
        font-size:38px;
        color:#9c6719;
        text-align:center;
        margin:45px 0 20px
      }
      footer {
        border-top:1px solid #dbc4a5;
        padding-top:22px;
        margin-top:30px;
        color:#685747;
        font-size:14px
      }
      footer .heart {
        color:#b94f49;
        font-size:29px;
        float:right
      }
      .return {
        text-align:center;
        margin:24px 0 5px;
        font-size:17px
      }
      @media(max-width:720px) {
        body {
          font-size:17px
        }
        .sheet {
          margin:30px 18px;
          padding:45px 24px 28px;
          box-shadow:6px 6px 0 #c5665e
        }
        .grid {
          grid-template-columns:1fr
        }
        h2 {
          font-size:41px
        }
        .intro {
          font-size:19px
        }
        .card {
          padding:20px
        }
      }
      @media print {
        body {
          background:white
        }
        .sheet {
          margin:0;
          max-width:none;
          border:0;
          box-shadow:none;
          padding:10mm
        }
        .tape,nav,.return {
          display:none
        }
        .grid {
          gap:10px
        }
        .card {
          padding:15px
        }
        section {
          margin-top:25px
        }
        h2,h3 {
          break-after:avoid
        }
      }
      .legal-links {
        display:flex;
        flex-wrap:wrap;
        gap:10px 24px;
        margin-top:16px;
        padding-top:14px;
        border-top:1px solid #dbc4a5
      }
      .legal-links a {
        color:#873e36;
        font-size:14px;
        text-decoration:underline;
        text-underline-offset:4px
      }
      .legal-links a:hover {
        color:#b94f49
      }
      .book-benefit {
        position:relative;
        background:#fffbf4;
        border:2px solid #c5665e;
        padding:30px;
        margin:30px 0
      }
      .book-benefit h2 {
        font-size:43px;
        margin:8px 0 18px
      }
      .benefit-label {
        display:inline-block;
        color:#873e36;
        background:#f4e8cc;
        padding:5px 12px;
        font-size:14px;
        font-weight:700
      }
      .discount {
        font-family:Caveat,cursive;
        color:#b94f49;
        font-size:50px;
        line-height:1.15;
        margin:5px 0 14px
      }
      .book-benefit .small {
        font-size:15px;
        color:#685747;
        margin:16px 0 0
      }
      a:focus-visible {
        outline:3px solid #9c6719;
        outline-offset:4px
      }
      .order {
        background:#f1e4cd;
        padding:26px;
        margin-top:30px;
        text-align:center
      }
      .order h2 {
        font-size:40px
      }
      @media(max-width:720px) {
        .book-benefit {
          padding:22px
        }
        .book-benefit h2 {
          font-size:38px
        }
        .discount {
          font-size:56px
        }
        .badge {
          font-size:11px
        }
      }
      .hero {
        display:grid;
        grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
        gap:42px;
        align-items:center;
        margin:10px 0 40px
      }
      .hero h1 {
        font-size:clamp(48px,5.5vw,64px);
        color:#b94f49
      }
      .book-title {
        font-size:22px;
        line-height:1.4;
        font-weight:600;
        margin-bottom:20px
      }
      .hero .intro {
        font-size:20px
      }
      .hero-copy p:last-child {
        margin-bottom:0
      }
      .cover {
        margin:0;
        padding:6px;
        transform:rotate(2deg)
      }
      .cover img {
        display:block;
        width:100%;
        height:auto;
        box-shadow:7px 10px 20px #60452c30;
        border:1px solid #d7bb96
      }
      .cover figcaption {
        font-size:14px;
        line-height:1.5;
        text-align:center;
        color:#685747;
        margin-top:18px
      }
      .hero-links {
        margin-top:22px;
        font-size:16px
      }
      @media(max-width:820px) {
        .hero {
          grid-template-columns:1fr;
          gap:30px
        }
        .cover {
          max-width:300px;
          margin:0 auto
        }
        .hero h1 {
          font-size:54px
        }
        .book-title {
          font-size:21px
        }
      }