/* Wireframe 02 refinements */
.hero h1 {
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* Compact vertical rhythm */
.hero { min-height:500px; padding-top:48px; padding-bottom:48px; gap:36px; }
.hero h1 { margin-bottom:20px; }
.hero .lead { margin-top:0; }
.facts { margin-top:24px; margin-bottom:24px; }
.section { padding-top:58px; padding-bottom:58px; }
.section-grid { padding-top:52px; padding-bottom:52px; gap:38px; }
.statement { padding-top:32px; padding-bottom:32px; }
.statement > p { margin-bottom:0; }
.learning-loop { margin-top:18px; }
.section-heading { margin-bottom:24px; }
.persona-notes { margin-top:12px; }
.callout { margin-top:16px; padding-top:18px; padding-bottom:18px; }
.split-story { gap:38px; }
.split-story > .photo { min-height:450px; }
.split-story > div { padding-top:52px; padding-bottom:52px; }
.yes-no { margin-top:26px; }
.yes-no div { padding-top:13px; padding-bottom:13px; }
.timeline li { padding-top:16px; padding-bottom:16px; }
.live-example { margin-top:15px; margin-bottom:15px; padding:13px 15px; }
.check-list li { padding-top:9px; padding-bottom:9px; }
.photo.tall { height:350px; }
.community-copy { margin-top:24px; gap:30px; }
.community-copy aside { padding:22px; }
.price-box,.price-reason { padding-top:46px; padding-bottom:46px; }
.price-reason ul { margin-top:14px; margin-bottom:14px; }
.conditions { margin-top:28px; margin-bottom:28px; padding:32px 38px; }
.host > .photo { height:400px; }
.host blockquote { margin-top:24px; margin-bottom:24px; padding-top:16px; padding-bottom:16px; }
.faq details { margin-top:6px; margin-bottom:6px; }
.faq summary { padding-top:16px; padding-bottom:16px; }
.entry { padding-top:52px; padding-bottom:52px; gap:40px; }
.entry form { gap:12px; }
.privacy { padding-top:32px; padding-bottom:32px; }
footer { padding-top:38px; padding-bottom:38px; }
@media(max-width:800px) {
  .hero,.section,.section-grid,.statement,.entry { padding-top:42px; padding-bottom:42px; }
  .hero { gap:28px; }
  .hero-photo { height:310px; }
  .split-story > .photo { min-height:330px; }
  .split-story > div { padding-top:42px; padding-bottom:42px; }
  .photo.tall { height:310px; }
  .host > .photo { height:330px; }
  .conditions { margin-top:18px; margin-bottom:18px; padding:26px 22px; }
}


.price-box h2 span { font-size:14px; font-weight:700; white-space:nowrap; }
.live-example { margin:22px 0; padding:16px 18px; border:1px solid rgba(255,255,255,.42); border-radius:16px; background:rgba(255,255,255,.1); }
.live-example > span { display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:999px; background:#e8aaa1; color:#402f36; font-size:11px; font-weight:900; letter-spacing:.08em; }
.live-example p { margin:0; font-size:13px; line-height:1.7; }
.brand { display:inline-flex; flex-direction:column; gap:5px; }
.brand > span { font:900 15px/1 sans-serif; letter-spacing:.12em; }
.brand > small { font:700 8px/1.2 sans-serif; letter-spacing:.11em; opacity:.72; }
.price-box h2 strong { font-size:1em; }
.price-reason ul { display:block; margin:22px 0; padding:0 0 0 1.35em; border:0; list-style:disc; }
.price-reason li { padding:5px 0; border:0; }
.conditions { margin-top:42px; margin-bottom:42px; padding:42px 48px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.58); }
.conditions h2 { margin:0 0 10px; font-size:28px; }
.conditions > p { margin:0 0 20px; }
.conditions ul { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.conditions li { position:relative; padding:14px 16px 14px 42px; border-radius:14px; background:rgba(255,255,255,.78); }
.conditions li::before { content:"✓"; position:absolute; left:17px; color:#a16f7b; font-weight:900; }
@media(max-width:800px) { .conditions { margin:24px 20px; padding:32px 24px; } .conditions ul { grid-template-columns:1fr; } }


.section-heading h2,
.split-story h2,
.ai-section h2,
.host h2,
.entry h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.35;
}

.section-heading > span {
  font-size: 28px;
}

.cards h3,
.timeline h3,
.price-reason h3,
.privacy-list h3 {
  font-size: 18px;
}

.statement > p { font-size: clamp(20px, 2vw, 25px); margin-top: 0; }
.learning-loop { margin-top: 26px; gap: 10px; }
.learning-loop span { padding: 5px 13px; font-size: 14px; }
.learning-loop i { font-size: 12px; }

.section { padding-top: 76px; padding-bottom: 76px; }
.section-grid { padding-top: 64px; padding-bottom: 64px; gap: 48px; }
.statement { padding-top: 44px; padding-bottom: 44px; }
.section-heading { margin-bottom: 34px; }
.hero { min-height: 560px; }
.hero-photo { height: 450px; }
.split-story { gap: 48px; }
.split-story > .photo { min-height: 520px; }
.split-story > div { padding-top: 70px; padding-bottom: 70px; }
.photo.tall { height: 400px; }
.host > .photo { height: 460px; }
.price-box,.price-reason { padding-top: 60px; padding-bottom: 60px; }
.entry { padding-top: 72px; padding-bottom: 72px; gap: 54px; }

.host-role {
  margin: 8px 0 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.company-link {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 4px;
  border-bottom: 2px solid #111;
  font-weight: 800;
  text-decoration: none;
}

.company-link:hover,
.company-link:focus-visible {
  background: #111;
  color: #fff;
}

.privacy { border-top: 1px solid #111; padding-top: 42px; padding-bottom: 42px; max-width: 900px; }
.privacy .section-heading { grid-template-columns: 38px 1fr; margin-bottom: 20px; }
.privacy .section-heading > span { font-size: 20px; }
.privacy .section-heading h2 { font-size: 21px; }
.privacy .section-heading p { font-size: 13px; line-height: 1.6; }

.privacy-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #111; }
.privacy-list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid #c9c9c9; }
.privacy-list li::before { content: "—"; position: absolute; left: 0; top: 13px; font-weight: 900; }
.privacy-list h3 { margin: 0 0 4px; font-size: 14px; }
.privacy-list p { margin: 0; font-size: 13px; line-height: 1.65; }

.privacy-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: #f2f2f2;
  font-size: 12px;
  line-height: 1.65;
}

footer a {
  color: inherit;
}

@media (max-width: 800px) {
  .hero h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .section-heading h2,.split-story h2,.ai-section h2,.host h2,.entry h2 { font-size: 24px; }
  .section,.section-grid,.statement,.entry { padding-top: 54px; padding-bottom: 54px; }
  .hero { min-height: auto; }
  .hero-photo { height: 340px; }
  .split-story > .photo { min-height: 360px; }
  .split-story > div { padding-top: 54px; padding-bottom: 54px; }
  .photo.tall { height: 340px; }
  .host > .photo { height: 360px; }
}

/* Color direction: soft pink at approximately 40% opacity */
:root {
  --ink: #35232c;
  --paper: #fffafb;
  --soft: #f6e9ee;
  --mid: #765e69;
  --line: #c9aeb9;
  --rose: #a7476d;
  --rose-dark: #71334d;
}

body {
  background-color: rgba(245, 190, 211, 0.4);
  color: var(--ink);
}

.wirebar,
footer,
.ai-section,
.price-box,
.callout,
.mobile-cta {
  background: var(--ink);
}

.site-header,
.ruled,
.cards,
.cards article,
.facts,
.facts span,
.yes-no div,
.timeline,
.timeline li,
.privacy,
.privacy-list,
.privacy-list li {
  border-color: var(--line);
}

.button {
  background: var(--rose);
  border-color: var(--rose);
}

.button:hover,
.button:focus-visible {
  background: var(--paper);
  color: var(--rose-dark);
  border-color: var(--rose-dark);
}

.button.inverse {
  background: #fff;
  color: var(--rose-dark);
  border-color: #fff;
}

.button.inverse:hover,
.button.inverse:focus-visible {
  background: var(--rose-dark);
  color: #fff;
}

.learning-loop span,
.community-copy aside,
.entry input,
.entry select,
.ux-panel > button,
.ux-panel > div {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--rose-dark);
}

.browser-mock,
.privacy-note {
  background: rgba(255, 255, 255, 0.74);
}

.photo {
  background: #dfcbd3;
}

.photo img {
  filter: grayscale(0.18) saturate(0.82) contrast(0.98);
}

.photo figcaption {
  background: rgba(53, 35, 44, 0.82);
}

.company-link {
  border-color: var(--rose-dark);
  color: var(--rose-dark);
}

.company-link:hover,
.company-link:focus-visible {
  background: var(--rose-dark);
  color: #fff;
}

/* Lighter palette: peach pink accent */
:root {
  --ink: #54434a;
  --paper: #fffdfd;
  --soft: #fbf2f5;
  --mid: #847078;
  --line: #dfcbd2;
  --rose: #e8aaa1;
  --rose-dark: #785861;
}

body { background-color: rgba(251, 222, 232, 0.28); }
.wirebar,footer,.ai-section,.price-box,.callout,.mobile-cta { background: #59464e; }
.button { background: #e8aaa1; border-color: #e8aaa1; color: #402f36; }
.button:hover,.button:focus-visible { background: #fffdfd; color: #65444f; border-color: #9d727d; }
.button.inverse { background: #fff9f8; color: #65444f; border-color: #fff9f8; }
.learning-loop span,.community-copy aside,.entry input,.entry select,.ux-panel > button,.ux-panel > div { background: rgba(255,255,255,.82); border-color: #b9939e; }
.browser-mock,.privacy-note { background: rgba(255,255,255,.84); }
.photo { background: #eee1e5; }
.photo img { filter: grayscale(.08) saturate(.7) brightness(1.03) contrast(.95); }
.photo figcaption { background: rgba(89,70,78,.7); }
.company-link { border-color: #8a6570; color: #76515d; }
.company-link:hover,.company-link:focus-visible { background: #76515d; color: #fff; }

.cards article h3 { margin-top: 0; line-height: 1.55; }
.consent-copy { margin: 0; font-size: 13px; line-height: 1.65; color: var(--mid); }
.consent-copy a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

.persona-art { height: 230px; margin: -34px -34px 24px; overflow: hidden; background: #fff7f9; }
.persona-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: none; }
.cards article blockquote { position: relative; margin: 0 0 20px; padding: 18px 20px; background: rgba(255,255,255,.9); border: 1px solid #d9bfc8; border-radius: 18px; font-weight: 800; font-size: 17px; line-height: 1.65; }
.cards article blockquote::before { content: ""; position: absolute; top: -10px; left: 38px; width: 18px; height: 18px; background: rgba(255,255,255,.9); border-left: 1px solid #d9bfc8; border-top: 1px solid #d9bfc8; transform: rotate(45deg); }
.cards article > p { font-size: 14px; }
.ai-illustration { margin: 0; overflow: hidden; background: #fff8fa; color: #54434a; }
.ai-illustration img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: none; }
.ai-illustration figcaption { padding: 15px 18px; background: rgba(255,255,255,.94); text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .03em; }

@media (max-width:800px) {
  .persona-art { height: 300px; }
  .cards article blockquote { font-size: 16px; }
}

/* Gentle sakura system */
body { background-image: radial-gradient(circle at 8% 18%,rgba(255,255,255,.9) 0 70px,transparent 71px),radial-gradient(circle at 94% 52%,rgba(236,184,202,.18) 0 110px,transparent 111px); }
.hero,.community,.entry { position: relative; isolation: isolate; }
.hero::after,.community::before,.entry::before { content:""; position:absolute; z-index:-1; width:280px; height:190px; background:url("assets/sakura-ornament.png") center/contain no-repeat; opacity:.26; pointer-events:none; }
.hero::after { right:-40px; top:10px; }
.community::before { left:-95px; top:42px; transform:scaleX(-1); }
.entry::before { right:-70px; bottom:15px; }
.button,.facts,.cards,.callout,.learning-loop span,.community-copy aside,.price-section,.price-box,.price-reason,.entry input,.entry select,.privacy-note,.ai-illustration,.photo,.browser-mock { border-radius:18px; }
.photo,.ai-illustration,.price-section,.cards { overflow:hidden; }
.facts span:first-child { border-radius:18px 0 0 18px; }
.facts span:last-child { border-radius:0 18px 18px 0; }
.faq details { margin:10px 0; padding:0 20px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.52); }

.persona-scene { position:relative; margin:0; overflow:hidden; border-radius:28px; box-shadow:0 14px 38px rgba(100,68,80,.1); background:#fff8fa; }
.persona-scene > img { display:block; width:100%; height:auto; filter:none; }
.speech { position:absolute; top:5.5%; width:27%; padding:15px 17px; border:1px solid #d8b8c4; border-radius:20px; background:rgba(255,255,255,.94); font-size:14px; line-height:1.55; font-weight:800; box-shadow:0 7px 18px rgba(100,68,80,.08); }
.speech::after { content:""; position:absolute; bottom:-9px; left:42%; width:16px; height:16px; background:rgba(255,255,255,.94); border-right:1px solid #d8b8c4; border-bottom:1px solid #d8b8c4; transform:rotate(45deg); }
.speech-one { left:4%; }
.speech-two { left:36.5%; }
.speech-three { right:4%; }
.persona-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px; }
.persona-notes p { margin:0; padding:15px 18px; border-radius:14px; background:rgba(255,255,255,.56); font-size:13px; text-align:center; }
.ai-illustration { border-radius:28px; box-shadow:0 16px 38px rgba(40,25,31,.18); }

@media(max-width:800px) {
  .hero::after,.community::before,.entry::before { width:180px; height:120px; opacity:.2; }
  .persona-scene { padding-bottom:14px; }
  .speech { position:relative; top:auto; left:auto; right:auto; width:auto; margin:12px 14px 0; font-size:14px; }
  .speech::after { display:none; }
  .persona-notes { grid-template-columns:1fr; gap:8px; }
  .persona-notes p { text-align:left; }
}
.footer-links { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.footer-links a { text-underline-offset:3px; }
.honey-field { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.entry textarea { width:100%; min-height:120px; padding:12px 14px; border:1px solid #b9939e; border-radius:18px; background:rgba(255,255,255,.82); font:inherit; line-height:1.7; resize:vertical; }
.entry textarea::placeholder { color:#8e7a82; }