@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* Sales site visual hierarchy and responsive rhythm. */
:root {
  --ink: #2b2930;
  --muted: #635e64;
  --accent: #b44249;
  --accent-dark: #8d3039;
  --line: #e8ded8;
  --shadow: 0 22px 60px rgba(59, 39, 39, .10);
}
html { scroll-padding-top: 92px; }
body {
  background: #faf7f2;
  color: var(--ink);
}
.site-header {
  background: rgba(255, 253, 248, .96);
  border-bottom: 1px solid #e9dfd9;
  box-shadow: 0 6px 24px rgba(49, 33, 31, .04);
}
.header-nav a { font-weight: 850; }
.button.primary {
  background: #ad3e47;
  box-shadow: 0 12px 27px rgba(154, 45, 54, .22);
}
.button.primary:hover, .button.primary:focus-visible { background: #8f3039; }
.button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #edb65c;
  outline-offset: 3px;
}
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 5vw, 62px);
  border: 1px solid #efe5db;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 2%, rgba(255, 211, 126, .30), transparent 32%),
    linear-gradient(135deg, #fffdf9 0%, #fff9f0 58%, #fbeee7 100%);
  box-shadow: 0 32px 80px rgba(79, 51, 48, .10);
}
.hero-copy { max-width: 900px; }
.hero-badge { margin-bottom: 12px; border: 1px solid #c8ded0; }
.hero .section-kicker {
  color: #7f343a;
  font-size: 16px;
  letter-spacing: .08em;
}
.hero h1 {
  margin: 0;
  font-size: clamp(46px, 6.9vw, 88px);
  line-height: 1.12;
  letter-spacing: -.06em;
  font-weight: 950;
}
.hero h1 em { color: #a93541; }
.hero-subline {
  margin: 14px 0 0;
  color: #504a4a;
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 800;
  line-height: 1.5;
}
.hero-screens {
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 30px;
  align-items: start;
}
.hero-screen { position: relative; }
.hero-screen figcaption {
  display: inline-block;
  margin: 0 0 9px;
  padding: 3px 11px;
  color: #5b4850;
  border: 1px solid #eadbd3;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
}
.hero-screen img {
  border: 2px solid #fff;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(46, 35, 41, .14);
}
.hero-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: center;
  max-width: none;
  margin-top: 27px;
  padding-top: 24px;
  border-top: 1px solid #e8d8cd;
}
.hero-lead { grid-row: 1 / 3; max-width: 630px; margin: 0; font-weight: 680; }
.hero-actions { margin: 0; justify-content: flex-end; }
.hero-mini { grid-column: 2; margin: 8px 0 0; text-align: right; }
.value-strip {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 44px));
  margin: -18px auto 0;
  gap: 14px;
}
.value-strip article {
  min-height: 172px;
  padding: 24px;
  border: 1px solid #e5ded3;
  border-top: 5px solid #ac434b;
  background: #fff;
  box-shadow: 0 12px 32px rgba(65, 42, 39, .08);
}
.value-strip article:nth-child(2) { border-top-color: #426b7c; }
.value-strip article:nth-child(3) { border-top-color: #d99f44; }
.value-strip small {
  display: block;
  margin-bottom: 9px;
  color: #8f4550;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .13em;
}
.value-strip b { font-size: clamp(20px, 2vw, 25px); line-height: 1.35; }
.value-strip span { display: block; margin-top: 7px; color: #675f5f; font-size: 16px; }
.section { padding: clamp(66px, 8vw, 112px) 0; }
.section-heading { align-items: center; margin-bottom: 31px; }
.section-heading h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.25; }
.section-heading > p { max-width: 460px; font-size: 18px; }
.section-kicker { color: #a13e49; font-weight: 950; }
#flow { padding-top: clamp(66px, 8vw, 112px); }
.connected {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(32px, 5vw, 68px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 5% 105%, rgba(112, 155, 169, .28), transparent 38%),
    #263943;
  box-shadow: 0 24px 45px rgba(33, 54, 63, .14);
}
.connected .section-kicker { color: #f5ce85; }
.connected .section-title { font-size: clamp(34px, 4.6vw, 56px); }
.connected p:not(.section-kicker) { max-width: 410px; margin-top: 20px; color: #e4edf0; font-size: 18px; }
.chain { gap: 9px; }
.chain article {
  min-height: 70px;
  grid-template-columns: 48px 1fr auto;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .13);
}
.chain b { width: 39px; height: 39px; color: #263943; background: #f6d487; font-size: 19px; }
.chain span { font-size: 18px; }
.chain i { color: #f8d28e; font-size: 25px; }
#features { padding-top: 14px; }
.feature-grid { gap: 15px; }
.feature-card {
  min-height: 235px;
  padding: 29px;
  border: 1px solid #e8dfd9;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(63, 43, 39, .06);
}
.feature-card.wide {
  background: #fff8ef;
  border-color: #e9d8c8;
}
.feature-card:nth-child(4) { background: #f0f6f5; }
.feature-card:nth-child(6) { background: #f1f4f8; border-color: #dbe4eb; }
.feature-card .icon { font-size: 26px; }
.feature-card h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.4; }
.feature-card p { color: #5e595a; font-size: 17px; line-height: 1.75; }
.feature-tag { color: #70434a; background: #f7e7e2; font-size: 14px; }
.sappo-section {
  background: linear-gradient(115deg, #fff0ca, #fffaf0 48%, #fff);
  border-color: #f0d7a7;
  box-shadow: 0 16px 36px rgba(99, 71, 34, .08);
}
.sappo-big { background: rgba(255,255,255,.65); }
.sappo-copy h2 { font-size: clamp(33px, 4.2vw, 52px); }
.sappo-copy > p { color: #534e4d; font-size: 18px; }
.sappo-points div { font-size: 16px; }
#pricing { padding-top: 70px; }
.price-wrap { gap: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 26px 55px rgba(80, 46, 46, .12); }
.price-card, .trial-card { border-radius: 0; }
.price-card { background: #a93541; box-shadow: none; }
.price-card h3 { font-size: 26px; }
.price-main { font-size: clamp(64px, 8vw, 96px); line-height: 1.15; }
.price-after { font-size: 21px; }
.trial-card { background: #fff; }
.trial-card h3 { font-size: 25px; }
.trial-card li { margin: 7px 0; }
.faq { gap: 12px; }
.faq details {
  padding: 22px 27px;
  border: 1px solid #e8ddd5;
  border-left: 5px solid #c47b69;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(49, 35, 31, .04);
}
.faq details[open] { background: #fffaf4; }
.faq summary { font-size: 21px; }
.faq details p { color: #585254; font-size: 17px; }
.contact-panel {
  padding: clamp(34px, 6vw, 72px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(186, 109, 99, .21), transparent 32%),
    #263943;
}
.contact-panel h2 { font-size: clamp(34px, 4.5vw, 54px); }
.contact-panel > p { color: #e6edf0; }
.contact-form { margin-top: 30px; max-width: 820px; box-shadow: 0 20px 45px rgba(15, 24, 28, .2); }
.contact-form-note a { color: #823443; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.site-footer { align-items: center; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; text-align: right; }
.footer-meta a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.footer-meta span { width: 100%; }
.legal-page { width: min(820px, calc(100% - 32px)); margin: 56px auto 100px; }
.legal-page h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.25; }
.legal-page section { margin-top: 22px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.legal-page h2 { margin: 0 0 10px; font-size: 23px; }
.legal-page p, .legal-page li { margin: 0; color: #5c5656; font-size: 17px; }
.legal-page ul { margin: 0; padding-left: 1.4em; }
@media (max-width: 980px) {
  .hero-details { grid-template-columns: 1fr; }
  .hero-lead { grid-row: auto; }
  .hero-actions { margin-top: 20px; justify-content: flex-start; }
  .hero-mini { grid-column: 1; text-align: left; }
  .connected { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { padding: 30px 20px; }
  .hero h1 { font-size: clamp(42px, 11vw, 60px); }
  .hero-subline { font-size: 19px; }
  .hero-screens { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 23px; }
  .hero-screen-mobile { width: min(100%, 210px); margin: 0 auto; }
  .hero-screen figcaption { font-size: 13px; }
  .hero-details { margin-top: 23px; padding-top: 19px; }
  .hero-lead { font-size: 17px; }
  .value-strip { margin: 18px auto 0; grid-template-columns: 1fr; }
  .value-strip article { min-height: 0; padding: 17px 20px; }
  .value-strip small { margin-bottom: 4px; }
  .value-strip span { margin-top: 4px; }
  #features { padding-top: 20px; }
  .section-heading h2 { font-size: 36px; }
  .feature-card { min-height: 0; padding: 23px; }
  .feature-card.wide { grid-column: auto; }
  .price-wrap { grid-template-columns: 1fr; }
  .footer-meta { justify-content: flex-start; text-align: left; }
  .footer-meta span { width: auto; }
}

/* Editorial feature stories replace the repeated text-card grid. */
.feature-stories { display: grid; gap: clamp(48px, 7vw, 90px); }
.feature-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(25px, 6vw, 82px);
}
.feature-story.reverse .story-visual { order: 2; }
.feature-story.reverse .story-copy { order: 1; }
.story-visual {
  position: relative;
  display: grid;
  min-height: 350px;
  overflow: hidden;
  align-content: center;
  justify-items: center;
  padding: 34px;
  border-radius: 30px;
}
.story-visual::before {
  position: absolute;
  width: 310px;
  height: 310px;
  right: -95px;
  top: -95px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  content: "";
}
.story-caption { position: absolute; top: 24px; left: 28px; font-size: 13px; font-weight: 950; letter-spacing: .16em; }
.story-copy { max-width: 475px; }
.story-number { color: #a23e47; font-size: 16px; font-weight: 950; letter-spacing: .06em; }
.story-copy h3 { margin: 16px 0; font-size: clamp(31px, 3.8vw, 48px); line-height: 1.27; letter-spacing: -.04em; }
.story-copy p { margin: 0; color: #5a5557; font-size: 18px; line-height: 1.85; }
.story-daily { color: #fff; background: linear-gradient(135deg, #2d5465, #223743); }
.story-steps { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.story-steps span { padding: 11px 14px; border-radius: 12px; color: #253d49; background: #fff; font-size: 16px; font-weight: 950; box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.story-steps span:last-child { background: #f3d18a; }
.story-connector { width: 75%; height: 3px; margin-top: 20px; background: #f3d18a; border-radius: 999px; }
.story-deadline { color: #4e4440; background: linear-gradient(135deg, #f9dba5, #f5bfb0); }
.story-calendar { position: relative; width: min(280px, 100%); padding: 22px; border-radius: 17px; background: #fffaf1; box-shadow: 13px 16px 0 rgba(149, 76, 60, .13); transform: rotate(-3deg); }
.story-calendar strong { display: block; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid #ead5c3; font-size: 23px; }
.story-calendar span { display: inline-block; margin: 5px 5px 0 0; padding: 5px 11px; border-radius: 999px; background: #f9e8d9; color: #753a40; font-size: 15px; font-weight: 900; }
.story-money { color: #fff; background: linear-gradient(135deg, #354978, #293652); }
.story-chart { display: flex; align-items: end; gap: 16px; width: min(310px, 100%); height: 165px; border-bottom: 3px solid rgba(255,255,255,.7); }
.story-chart i { flex: 1; height: 40%; border-radius: 9px 9px 0 0; background: #8ebbb7; }
.story-chart i:nth-child(2) { height: 57%; background: #a8d2c7; }
.story-chart i:nth-child(3) { height: 48%; background: #88c2be; }
.story-chart i:nth-child(4) { height: 80%; background: #e8c985; }
.story-chart i:nth-child(5) { height: 97%; background: #f4d890; }
.story-chart-label { margin-top: 18px; font-size: 19px; font-weight: 950; }
.feature-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; padding: 26px 0; border-top: 1px solid #dfd4cc; border-bottom: 1px solid #dfd4cc; }
.feature-extras div { display: grid; grid-template-columns: 36px 1fr; align-content: center; column-gap: 12px; }
.feature-extras div + div { border-left: 1px solid #e3d8d1; padding-left: 20px; }
.feature-extras div > span { grid-row: 1 / 3; color: #ab414b; font-size: 28px; line-height: 1.4; }
.feature-extras strong { font-size: 18px; }
.feature-extras small { color: #6d6767; font-size: 15px; }
.legal-quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.legal-quick-links a { padding: 9px 15px; border: 1px solid #ddc9c7; border-radius: 999px; background: #fff; color: #7c3540; font-size: 15px; font-weight: 900; text-decoration: none; }
.legal-quick-links a[aria-current="page"] { background: #a93541; color: #fff; }
.legal-page .legal-version { color: #777074; font-size: 15px; }
.legal-page .legal-intro { margin: 18px 0 0; font-size: 18px; }
.legal-page section { scroll-margin-top: 95px; }
.legal-page section p + p { margin-top: 13px; }
.legal-page section li + li { margin-top: 7px; }
.legal-page a { color: #8b3440; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .feature-stories { gap: 46px; }
  .feature-story { grid-template-columns: 1fr; gap: 20px; }
  .feature-story.reverse .story-visual, .feature-story.reverse .story-copy { order: initial; }
  .story-visual { min-height: 260px; padding: 24px; }
  .story-steps span { padding: 7px 10px; font-size: 14px; }
  .story-copy h3 { margin: 10px 0; font-size: 33px; }
  .story-copy p { font-size: 17px; }
  .feature-extras { grid-template-columns: 1fr; gap: 12px; margin-top: 45px; padding: 20px 0; }
  .feature-extras div + div { border-left: 0; border-top: 1px solid #e3d8d1; padding: 13px 0 0; }
}

/* The real daily screen and Sappo carry the story through the page. */
.sappo-cameo { display: flex; align-items: center; gap: 12px; }
.sappo-cameo img { width: 82px; height: 82px; flex: 0 0 82px; object-fit: contain; }
.sappo-cameo p {
  position: relative;
  max-width: 550px;
  margin: 0;
  padding: 16px 20px;
  border: 3px solid #4d4237;
  border-radius: 5px;
  background: #fffaf0;
  box-shadow: 0 0 0 3px #d9c9aa, 5px 5px 0 rgba(57,44,35,.28);
  color: #111;
  font-family: 'DotGothic16', 'MS Gothic', 'Hiragino Kaku Gothic ProN', monospace;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
}
.connected .sappo-cameo p { color: #111; }
.sappo-cameo p::before,
.sappo-cameo p::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  transform: rotate(-7deg);
}
.sappo-cameo p::before {
  left: -26px;
  bottom: 19px;
  border-width: 7px 26px 16px 0;
  border-color: transparent #4d4237 transparent transparent;
}
.sappo-cameo p::after {
  left: -19px;
  bottom: 22px;
  border-width: 5px 20px 13px 0;
  border-color: transparent #fffaf0 transparent transparent;
}
.hero-cameo { margin-top: 18px; }
.hero-cameo img { width: 68px; height: 68px; flex-basis: 68px; }
.daily-showcase { padding-top: 100px; }
.daily-real-screen { margin: 0; }
.daily-real-screen img { display: block; width: min(100%, 1228px); height: auto; margin: auto; border: 1px solid #e7dcd4; border-radius: 18px; box-shadow: 0 22px 55px rgba(57, 38, 40, .11); }
.daily-real-screen figcaption { margin-top: 12px; color: #746a6a; font-size: 14px; text-align: right; }
.daily-takeaway { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: center; margin-top: 20px; }
.daily-takeaway > p { margin: 0; padding-left: 23px; border-left: 3px solid #d3ad71; color: #575253; font-size: 17px; line-height: 1.8; }
.daily-takeaway .sappo-cameo img { width: 110px; height: 110px; flex-basis: 110px; }
.daily-takeaway .sappo-cameo p { font-size: 18px; }
.annual-bridge { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.annual-flow { display: grid; justify-items: stretch; align-content: center; gap: 7px; }
.annual-flow div { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: rgba(255,255,255,.1); }
.annual-flow span { min-width: 48px; color: #f6d38c; font-size: 16px; font-weight: 900; }
.annual-flow strong { color: #fff; font-size: 18px; line-height: 1.4; }
.annual-flow i { color: #efcc82; font-size: 23px; font-style: normal; line-height: 1; text-align: center; }
.annual-cameo { margin-top: 25px; }

.sappo-section-art { display: block; width: 150px; height: 150px; margin: 0 auto 12px; object-fit: contain; }
.sappo-inline-points { margin-top: 16px; padding-top: 17px; border-top: 1px solid #e9d5b0; }
.pricing-cameo { margin: -10px 0 20px; }
.contact-cameo { justify-content: center; margin: 14px auto 0; }
.contact-cameo p { text-align: left; }
@media (max-width: 980px) {
  .daily-takeaway { grid-template-columns: 1fr; gap: 14px; }
  .annual-bridge { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sappo-cameo { gap: 12px; }
  .sappo-cameo img { width: 66px; height: 66px; flex-basis: 66px; }
  .sappo-cameo p { padding: 12px 14px; font-size: 16px; line-height: 1.7; }
  .daily-showcase { padding-top: 68px; }
  .daily-real-screen img { border-radius: 12px; }
  .daily-real-screen figcaption { font-size: 13px; text-align: left; }
  .daily-takeaway .sappo-cameo img { width: 78px; height: 78px; flex-basis: 78px; }
  .daily-takeaway .sappo-cameo p { font-size: 16px; }
  .daily-takeaway > p { padding-left: 14px; font-size: 15px; }
  .annual-flow div { min-height: 68px; padding: 10px 13px; }
  .annual-flow strong { font-size: 16px; }
}

.daily-step-list { display: none; }
@media (max-width: 760px) {
  .daily-step-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 20px; margin: 18px 0; padding: 0; list-style: none; counter-reset: daily; }
  .daily-step-list li { display: flex; align-items: center; gap: 6px; color: #4f4546; font-size: 15px; font-weight: 800; counter-increment: daily; }
  .daily-step-list li::before { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #fff; background: #a74149; content: counter(daily); font-size: 13px; }
}

/* Keep the guide introduction close to the daily quest. */
.sappo-intro { padding-top: 24px; padding-bottom: 48px; }
.sappo-intro .sappo-section { gap: 32px; padding: clamp(24px, 3vw, 36px); }
.sappo-intro .sappo-big { min-height: 190px; }
.sappo-intro .sappo-intro-cameo { width: 100%; justify-content: center; }
.sappo-intro .sappo-intro-cameo img { width: 116px; height: 116px; flex-basis: 116px; }
.sappo-intro .sappo-intro-cameo p { font-size: 19px; }
.sappo-intro .sappo-copy h2 { font-size: clamp(27px, 3vw, 38px); }
.sappo-intro .sappo-copy > p:last-child { margin: 0; line-height: 1.7; }
@media (max-width: 760px) {
  .sappo-intro { padding-top: 14px; padding-bottom: 40px; }
  .sappo-intro .sappo-section { gap: 20px; }
  .sappo-intro .sappo-big { min-height: 150px; }
  .sappo-intro .sappo-intro-cameo img { width: 82px; height: 82px; flex-basis: 82px; }
  .sappo-intro .sappo-intro-cameo p { font-size: 16px; }
}