:root {
  color-scheme: dark;
  --ink: #171119;
  --paper: #faf2e6;
  --mute: #c4b7c3;
  --gold: #f5c782;
  --rule: #ffffff29;
  --display: Arial, Helvetica, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 16px/1.5 Arial,sans-serif; }
.wrap { width: min(1192px, 89%); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #db89ff; outline-offset: 3px; }
footer { display:flex; align-items:center; justify-content:flex-end; }
footer a { font-size: 14px; }
main {
  background:
    radial-gradient(ellipse 75% 13% at 90% 4%, #48223e95, transparent),
    radial-gradient(ellipse 65% 15% at 0% 21%, #60254270, transparent),
    radial-gradient(ellipse 75% 17% at 90% 47%, #61442644, transparent),
    radial-gradient(ellipse 75% 16% at 9% 66%, #80324a48, transparent),
    radial-gradient(ellipse 90% 16% at 76% 84%, #53376874, transparent),
    var(--ink);
}
.hero { isolation: isolate; position: relative; overflow: hidden; }
.hero-layout { min-height: clamp(490px, 40vw, 630px); display: grid; grid-template-columns: 43% 57%; align-items: center; position: relative; }
.hero-copy { padding-block: 48px 54px; z-index: 1; pointer-events:none; }
.hero-copy a { pointer-events:auto; }
h1,h2,h3,p,figure { margin:0; }
h1,h2 { font-family:var(--display); letter-spacing:-.069em; line-height:.93; }
h1 { font-size:clamp(78px,8vw,120px); margin:25px 0 24px; }
h1 i,h2 i { font-family:var(--serif); font-weight:400; }
h1 i { display:inline-block; color:#fbd39f; font-size:1.18em; line-height:.84; }
.intro { max-width:410px; font-size:clamp(19px,1.5vw,23px); line-height:1.5; color:#e7dbe4; }
.cta { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:13px 19px; border-radius:7px; background:linear-gradient(105deg,#ffd79a 0%,#ffbb9b 58%,#f2a4d0); color:#261324; font-size:15px; font-weight:700; box-shadow:0 5px 25px #791b5b24; transition:transform .18s,filter .18s; }
.cta:hover { transform:translateY(-2px); filter:brightness(1.07); }
.cta span { font-size:20px; line-height:1; }
.hero-cta { margin-top:24px; min-width:180px; min-height:60px; padding:14px 34px; font-size:22px; justify-content:center; }
.hero-art { align-self:stretch; position:relative; min-width:0; }
.hero-art img { position:absolute; width:118%; height:104%; top:-1%; left:-7%; object-fit:cover; object-position:53% 50%; mask-image:linear-gradient(to right, transparent,black 18%,black 87%,transparent),linear-gradient(to bottom, transparent,black 13%,black 88%,transparent); mask-composite:intersect; }
.product { --accent:#f5c782; --glow:#66411f; position:relative; }
.product.love { --accent:#f3acc6; --glow:#722043; }
.product.matrix { --accent:#d2b6ff; --glow:#593677; }
h2 { font-size:clamp(48px,5vw,82px); margin:18px 0 22px; }
.product h2 i { color:var(--accent); }
.purchase { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.order {
  display:grid; grid-template-columns:1fr 1.65fr; align-items:start;
  gap:clamp(32px,5vw,76px); padding-block:clamp(40px,5.5vw,78px);
  border-top:1px solid var(--rule);
}
.order h2 { margin:0; font-size:clamp(38px,4.8vw,76px); line-height:1; }
.order h2 i { display:block; color:var(--gold); }
.faq-sheet {
  --sheet-edge:clamp(20px,2.8vw,42px);
  padding:6px var(--sheet-edge); color:#352735;
  background:linear-gradient(225deg,transparent 14px,#d0b992 14px 15px,transparent 16px) top right / 22px 22px no-repeat,
             linear-gradient(225deg,transparent 14px,#e9dbc6 14px,#f7edde 55%);
}
.faq-sheet details + details { border-top:1px solid #b8a894; }
.order summary {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(17px,1.7vw,24px) 4px; list-style:none;
  font:600 clamp(18px,1.5vw,23px)/1.3 var(--display);
}
.order summary::-webkit-details-marker { display:none; }
.order summary::after {
  content:""; flex:none; width:9px; height:9px; margin-right:3px;
  border:solid #79572e; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.order details[open] summary::after { transform:rotate(225deg); }
.order details[open] summary, .order summary:hover { color:#71492b; }
.order details p {
  margin:0 4px 22px; padding-left:14px; border-left:2px solid #ad8551;
  max-width:62ch; color:#513f48; line-height:1.55;
}
.order summary:focus-visible { outline:2px solid #79572e; outline-offset:-2px; }
summary,button { cursor:pointer; }
footer { min-height:85px; }
dialog { width:min(720px,96vw); max-height:94dvh; padding:8px; border:1px solid #978578; background:#251e26; }
dialog img { display:block; width:100%; }
dialog button { display:block; margin-left:auto; position:sticky; top:0; background:#f9cd92; color:#241824; border:0; border-radius:3px; padding:10px 14px; }
dialog::backdrop { background:#0f0a10df; }
@media(max-width:800px) {
  .wrap { width:90%; }
  
  .hero-art img { height:92%; top:4%; }
  .order { grid-template-columns:minmax(0,1fr); gap:24px; }
  .order h2 i { display:inline; }
}
@media(max-width:620px) {
  .hero-layout { display:flex; flex-direction:column; align-items:stretch; row-gap:24px; }
  .hero-copy { padding:32px 0 0; }
  h1 { font-size:clamp(60px,14.5vw,84px); margin:14px 0; line-height:1; }
  h1 br { display:none; } h1 i { margin-left:.1em; font-size:.99em; }
  .intro { max-width:38ch; font-size:18px; }
  .hero-cta { margin-top:16px; }
  .hero-art { height:clamp(220px,63vw,320px); margin:0 -2% 0; }
  .hero-art img { width:112%; height:109%; top:0; left:-6%; object-position:center 52%; }
}
@media(max-width:360px) { h1 { font-size:16vw; } .purchase { gap:12px; }.cta { font-size:14px; gap:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.cta { transition:none; } }
.opening, .format, .author, .outcomes, .product-layout {
  padding-block: clamp(40px, 5.5vw, 78px);
}
.opening h2, .format h2, .outcomes h2, .author h2, .product-heading h2 {
  margin: 0 0 24px;
  font-size: clamp(38px, 4.8vw, 76px);
  line-height: 1;
}
.opening i, .format i, .outcomes i, .author i { color: var(--gold); }
#start-title { text-align: center; font: 400 clamp(27px,3.6vw,54px)/1.15 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.requests { padding: 0; margin: 34px 0 0; list-style: none; counter-reset: requests; display: grid; gap: 22px; }
.requests li {
  counter-increment: requests; display: grid; align-items: center;
  grid-template-columns: 37% 1fr; gap: 24px; min-height: 153px;
  padding: 24px 5%; border-radius: 12px;
  background: linear-gradient(110deg,#473743bf,#332c36dc); border: 1px solid #f0cddd19;
}
.scene-art { display:flex; justify-content:center; align-items:center; line-height:1; }
.scene-art::after { content:counter(requests,decimal-leading-zero); font: 300 clamp(68px,7vw,108px)/1 var(--display); letter-spacing:-.08em; color: #f8eced; }
.scene-art span { font-size: clamp(44px,4.8vw,76px); margin-right:.18em; transform:translateY(.13em) rotate(-9deg); z-index:1; filter:drop-shadow(0 6px 8px #1d102080); }
.scene-art span { width:1.2em; text-align:center; flex:none; }
.requests b { display:block; text-transform:uppercase; font-size:clamp(19px,1.85vw,28px); line-height:1.14; }
.requests p { margin-top:7px; max-width:55ch; font-size:clamp(16px,1.35vw,20px); line-height:1.42; }
.outcome-grid h3 { font-size: clamp(19px,1.6vw,24px); line-height:1.22; }
.requests p, .outcome-grid p, .format p, .author p { color: #dfd4da; }
.outcome-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.outcome-grid div { border-top: 1px solid #947b75; padding-top: 16px; }
.outcome-grid p { margin-top: 8px; }
.format p { max-width: 60ch; font-size: 19px; margin-bottom: 20px; }
.product-heading { text-align: center; }
.product-heading h2 { margin-bottom: 10px; }
.product-heading p { color: var(--mute); }
.map-layout {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  align-items: start; gap: clamp(16px,2.5vw,38px); margin: 34px 0;
}
.chart { align-self: center; min-width: 0; text-align: center; margin: 0; }
.chart img { display: block; width: 100%; border-radius: 50%; }
.chart > a { display: block; background: #060910; border: 1px solid #a884734d; border-radius: 50%; overflow:hidden; box-shadow: 0 0 52px color-mix(in srgb,var(--glow) 40%, transparent); cursor: zoom-in; }
.contents { list-style:none; margin:0; padding:0; display:grid; align-self:stretch; grid-auto-rows:1fr; gap:8px; }
.contents li { padding:12px 15px; border-radius:8px; border-inline-start:2px solid color-mix(in srgb,var(--accent) 65%,transparent); background:linear-gradient(110deg,#ffffff0c,#ffffff04); }
.contents b, .contents span { display: block; }
.contents b { color:var(--accent); font-size: 17px; line-height: 1.22; }
.contents span { margin: 4px 0 0; color: #d3c7d0; font-size: 15px; line-height: 1.4; }
.closing-topic { margin:0 auto 32px; padding:16px 24px; text-align:center; background:linear-gradient(90deg,transparent,#ffffff0d,transparent); }
.closing-topic b { display:block; color:#fff; font:italic 24px/1.2 var(--serif); }
.closing-topic span { display:block; margin-top:5px; color:var(--mute); }
.reviews { text-align:center; padding-top:24px; border-top:1px solid var(--rule); }
.reviews h3 {
  margin-bottom:18px;
  font:italic clamp(22px,2vw,30px)/1.2 var(--serif);
  text-decoration:underline solid var(--gold) 2px;
  text-underline-offset:.23em;
}
.review-window { display:block; width:min(100%,520px); margin-inline:auto; overflow:hidden; cursor:zoom-in; }
.review-grid { display:flex; align-items:center; transition:transform .5s ease; }
.review-grid img { flex:0 0 100%; min-width:0; width:100%; height:auto; max-height:min(68svh,540px); display:block; object-fit:contain; }
@media(prefers-reduced-motion:reduce) { .review-grid {transition:none;} }
.reviews p { margin-top:8px; font-size:16px; color:var(--mute); }
.purchase { justify-content: center; margin-top: 22px; }
.purchase .cta { font: 800 17px/1.35 "Arial Black", Arial, sans-serif; }
.author {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px,6vw,90px);
  border-top: 1px solid var(--rule);
}
.author-column { display: grid; align-content: start; justify-items: start; gap: clamp(24px,2.5vw,36px); }
.author header p { max-width: 44ch; font-size: clamp(16px,1.35vw,19px); }
.author header strong { color: var(--paper); font-size: clamp(19px,1.7vw,25px); line-height: 1.25; }
.author header p + p { margin-top: 8px; }
.author h3 { color: var(--gold); font: 700 clamp(20px,1.75vw,26px)/1.2 var(--display); }
.author ul { margin: 12px 0 0; padding-inline-start: 1.2em; font-size: clamp(16px,1.3vw,18px); }
.author li + li { margin-top: 6px; }
.author li::marker { color: var(--gold); }
@media(max-width:800px) {
  .map-layout { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .chart { grid-row: 1; grid-column: 1/-1; width: min(100%,350px); justify-self: center; }
  .author { grid-template-columns: 1fr; gap: 24px; }
}
@media(max-width:620px) {
  .requests li { grid-template-columns:1fr; justify-items:start; gap:12px; min-height:0; padding:20px; }
  .scene-art::after { font-size:58px; } .scene-art span { font-size:40px; }
  .contents li { padding:10px; }

  .outcome-grid { grid-template-columns: 1fr; gap: 18px; }
  .map-layout { gap: 20px 14px; }
  .contents b { color:var(--accent); font-size: 16px; }
  .contents span { font-size: 14px; }
}
@media(max-width:355px) {
  .map-layout { grid-template-columns: minmax(0,1fr); }
}


.matrix .chart { width:100%; max-width:390px; justify-self:center; }
.chart > .health-chart { margin:16px auto 0; width:98%; border-radius:10px; }
.health-chart img { border-radius:0; height:auto; }
.closing-topic b { max-width:62ch; margin-inline:auto; text-wrap:balance; }
.stroke {
  color:inherit; font:inherit; padding-bottom:.13em;
  background:linear-gradient(178deg,transparent 22%,#f3bc42 36% 57%,#cb9126 64%,transparent 76%) bottom / 100% .2em no-repeat;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero-orbits { position:absolute; inset:0; }
.hero-orbits span {
  --diameter:clamp(125px,10.5vw,160px);
  position:absolute; width:var(--diameter); aspect-ratio:1; display:grid; place-content:center;
  padding:15px; text-align:center; border-radius:50%; border:1px solid #e5cba476;
  font:700 clamp(12px,1vw,15px)/1.17 var(--display);
  background:radial-gradient(ellipse at 25% 18%,#655264da,#201623f0 72%);
  color:#fff6e8; box-shadow:inset 0 0 15px #e1bd9526,0 4px 22px #160c20a6;
}
.hero-orbits span::before,.hero-orbits span::after {
  content:''; pointer-events:none; position:absolute; inset:-4% 2%; border:1px solid #d9c3b552;
  border-radius:43% 57% 46% 54%; transform:rotate(28deg);
}
.hero-orbits span::after { inset:2% -5%; transform:rotate(-32deg); border-color:#ceb6d544; }
.hero-orbits span:nth-child(1) { top:4%; right:9%; }
.hero-orbits span:nth-child(2) { top:36%; right:-2%; }
.hero-orbits span:nth-child(3) { bottom:3%; right:12%; }
.guide { padding-block:clamp(35px,5vw,72px); }
.guide h2 { text-align:center; margin:0 0 32px; font-size:clamp(36px,4.2vw,62px); }
.guide h2 i { color:var(--gold); }
.reports-title {
  display:grid;
  grid-template-columns:minmax(20px,1fr) auto minmax(20px,1fr);
  align-items:center;
  gap:clamp(12px,2vw,32px);
  margin:0 auto;
  padding-block:clamp(16px,2vw,30px);
  text-align:center;
  color:var(--gold);
  font:600 clamp(17px,1.75vw,26px)/1.45 var(--display);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-wrap:balance;
}
.reports-title::before,.reports-title::after {
  content:"";
  height:1px;
  background:linear-gradient(to right,transparent,#bd9966);
}
.reports-title::after { transform:scaleX(-1); }
.guide-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.2vw,30px); }
.guide-cards article {
  display:flex; flex-direction:column; padding:clamp(18px,2vw,32px); border-radius:14px;
  background:linear-gradient(135deg,#483546aa,#2e2732e8); border:1px solid #e5c3d32a;
}
.guide-icon {
  display:grid; place-items:center; align-self:center; width:clamp(110px,11vw,154px);
  aspect-ratio:1; margin-bottom:18px; font:clamp(62px,5.8vw,86px)/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background:radial-gradient(ellipse,#ae759336,transparent 70%);
}
.guide-cards h3 { font:700 clamp(20px,1.65vw,27px)/1.12 var(--display); text-transform:uppercase; }
.guide-cards p { margin:14px 0 22px; color:#e4d8df; }
@media(max-width:620px) {
  .hero-art { height:clamp(278px,73vw,350px); }
  .hero-orbits span { --diameter:clamp(112px,29vw,144px); font-size:clamp(10px,2.7vw,13px); padding:9px; }
  .hero-orbits span:nth-child(1) { left:0; top:18%; right:auto; }
  .hero-orbits span:nth-child(2) { right:1%; top:5%; }
  .hero-orbits span:nth-child(3) { right:6%; bottom:5%; }
  .guide-cards { grid-template-columns:1fr; }
  .guide-cards article { display:grid; grid-template-columns:74px minmax(0,1fr); gap:9px 15px; align-items:start; }
  .guide-icon { grid-row:1/3; width:100%; margin:0; font-size:48px; }
  .guide-cards p { grid-column:2; margin:0; }
}

.catalog { padding-block:clamp(20px,3vw,44px) clamp(44px,6vw,80px); }
.catalog h2 { margin:0 0 32px; text-align:center; font-size:clamp(36px,4.2vw,62px); }
.catalog h2 i { color:var(--gold); }
.catalog-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.2vw,30px); }
.catalog-cards article {
  display:flex; flex-direction:column; align-items:flex-start; padding:clamp(20px,2.3vw,34px);
  border:1px solid #dfc4a54d; border-radius:12px;
  background:linear-gradient(165deg,#4b364347,#201920);
}
.catalog-cards img { align-self:center; width:min(75%,180px); height:auto; aspect-ratio:1; border-radius:50%; border:1px solid #bd996677; box-shadow:0 5px 18px #120d1877; }
.catalog-cards h3 { margin:18px 0 10px; font:700 clamp(24px,2.2vw,35px)/1.1 var(--serif); }
.catalog-cards p { margin:0 0 22px; color:#e4d8df; }
.catalog-cards a { margin-top:auto; padding:9px 18px; border:1px solid #bd996699; border-radius:7px; font-weight:600; color:var(--gold); }
.catalog-cards a:hover { background:#d9b68c19; }
@media(max-width:700px) {
  .catalog-cards { grid-template-columns:1fr; }
  .catalog-cards article { display:grid; grid-template-columns:minmax(0,1fr) 74px; align-items:center; gap:12px; }
  .catalog-cards img { grid-column:2; grid-row:1/3; width:100%; }
  .catalog-cards h3,.catalog-cards p,.catalog-cards a { grid-column:1; margin:0; }
  .catalog-cards a { justify-self:start; }
}