:root {
  --p36-red: #ba1014;
  --p36-red-dark: #980b0f;
  --p36-gold: #d59522;
  --p36-green: #3d7f42;
  --p36-blue: #1e6298;
  --p36-cream: #fbf5e9;
  --p36-line: #e7dfd3;
}

.p36-page { background: #fdfcf9; }
.p36-main { min-width: 0; }
.p36-container {
  width: min(calc(100% - 64px), 1320px);
  margin-inline: auto;
}
.p36-card {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--p36-line);
  border-radius: 13px;
  box-shadow: 0 5px 19px rgba(74,50,24,.07);
}
.p36-section { margin-top: 22px; }
.p36-section-title { margin: 0 0 17px; font-size: clamp(1.55rem, 2vw, 2.05rem); }
.p36-section-title--red { color: #ad0d11; }
.p36-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 23px;
  color: #55524d;
  font-size: 12px;
}
.p36-breadcrumbs a { color: var(--p36-red); }
.p36-breadcrumbs span::before { content: "/"; margin-right: 10px; color: #9a958d; }
.p36-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: var(--p36-gold);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 19px;
  font-style: normal;
}
.p36-icon--red { color: var(--p36-red); }
.p36-icon--green { color: var(--p36-green); }
.p36-icon--blue { color: var(--p36-blue); }
.p36-icon > .icon {
  display: block;
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}
.p36-note {
  padding: 15px 17px;
  color: #555049;
  background: linear-gradient(100deg,#fff8ec,#fffdf8);
  border: 1px solid #ecdfca;
  border-radius: 8px;
  font-size: 12px;
}
.p36-field label { display: block; margin-bottom: 7px; color: #26231f; font-size: 12px; font-weight: 650; }
.p36-field input, .p36-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: #393632;
  background: #fff;
  border: 1px solid #ddd5ca;
  border-radius: 8px;
}
.p36-pill {
  display: inline-flex;
  padding: 5px 10px;
  align-items: center;
  border: 1px solid #ece5db;
  border-radius: 999px;
  color: #5e5b55;
  background: #fff;
  font-size: 10px;
}
.p36-list li { position: relative; margin: 8px 0; padding-left: 16px; color: #595650; font-size: 12px; }
.p36-list li::before { content: "●"; position: absolute; left: 0; color: var(--p36-green); font-size: 8px; top: .35em; }
.p36-list--orange li::before { color: #d87916; }
.p36-list--blue li::before { color: #2f78b0; }
.p36-faq .accordion-item { border-color: var(--p36-line); }
.p36-faq .accordion-item button { min-height: 44px; padding-inline: 2px; font-size: 13px; }
.p36-faq .accordion-item button span { color: #555; }
.p36-mobile-only { display: none; }
.p36-mobile-chrome { display: none; }

/* Page 3 — Birthday calculator */
.calc-intro { position: relative; min-height: 275px; overflow: hidden; }
.calc-intro__copy { position: relative; z-index: 2; max-width: 710px; padding: 10px 0 30px 20px; }
.calc-intro h1 { margin-bottom: 14px; font-size: clamp(3.25rem, 4.8vw, 4.7rem); line-height: 1.03; letter-spacing: -.035em; }
.calc-intro p { max-width: 680px; font-size: 16px; line-height: 1.7; }
.calc-intro__art { position: absolute; right: -15px; bottom: 0; width: 520px; mix-blend-mode: multiply; }
.calc-top-grid { display: grid; grid-template-columns: .43fr .57fr; gap: 22px; align-items: start; }
.calculator-entry { padding: 26px 27px; }
.calc-step-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.calc-step-heading b { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--p36-red); border-radius: 50%; font-family: var(--font-display); }
.calc-step-heading h2 { margin: 0; font-size: 20px; }
.calc-date-grid { display: grid; grid-template-columns: 1fr .72fr 1fr; gap: 16px; margin-bottom: 34px; }
.calc-time-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 27px; }
.calc-time-options button { min-height: 72px; padding: 8px 6px; color: #55514b; background: #fff; border: 1px solid #e6dfd5; border-radius: 8px; font-size: 10px; }
.calc-time-options button.is-selected { color: #2b2925; border-color: var(--p36-red); box-shadow: inset 0 0 0 1px rgba(186,16,20,.15); }
.calc-privacy { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 8px 0 27px; padding: 17px; border: 1px solid #e6dfd5; border-radius: 8px; }
.calc-privacy p { margin: 0; font-size: 11px; }
.calculator-entry .button { width: 100%; min-height: 62px; font-family: var(--font-display); font-size: 21px; }
.calc-success { display: flex; min-height: 96px; margin-top: 35px; padding: 22px; align-items: center; gap: 15px; color: #376643; background: #f3f9ef; border: 1px solid #b9d1b4; border-radius: 11px; font-size: 12px; }
.calc-success .p36-icon { color: #2e7440; }
.calculator-result { overflow: hidden; }
.calc-result__hero { position: relative; min-height: 420px; padding: 28px 30px; overflow: hidden; }
.calc-result__heading { position: relative; z-index: 2; max-width: 280px; padding-top: 25px; }
.calc-result__status { display: flex; align-items: center; gap: 10px; color: #3b7645; font-family: var(--font-display); }
.calc-result__status i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.calc-result__heading h2 { margin: 48px 0 0; font-size: 29px; }
.calc-result__animal { margin: 0; color: var(--p36-red); font-family: var(--font-display); font-size: 73px; line-height: .98; }
.calc-result__heading p:last-child { margin-top: 15px; color: #3f3b35; font-family: var(--font-display); font-size: 20px; }
.calc-result__hero img { position: absolute; right: -3px; bottom: -5px; width: 64%; height: 92%; object-fit: contain; }
.calc-facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--p36-line); }
.calc-mobile-result-copy { display: none; }
.calc-fact { min-height: 78px; padding: 12px 18px; display: grid; grid-template-columns: auto minmax(105px,1fr) minmax(0,1fr); align-items: center; gap: 10px; border-right: 1px solid var(--p36-line); border-bottom: 1px solid var(--p36-line); }
.calc-fact:nth-child(2n) { border-right: 0; }
.calc-fact dt { font-family: var(--font-display); font-size: 15px; }
.calc-fact dd { min-width:0; color: #47443f; font-size: 12px; line-height:1.4; overflow-wrap:anywhere; text-align: right; }
.calc-color-dots { display: flex; flex-wrap:wrap; justify-content:flex-end; gap: 7px; }
.calc-color-dots i { width: 19px; height: 19px; border: 1px solid #aaa; border-radius: 50%; }
.calc-color-dots i:nth-child(1) { background:#397c4a; border-color:#397c4a; }
.calc-color-dots i:nth-child(2) { background:#e4a31f; border-color:#e4a31f; }
.calc-color-dots i:nth-child(3) { background:#9f5838; border-color:#9f5838; }
.calc-color-dots i:nth-child(4) { background:#fff; }
.calc-mobile-stepper { display: none; }
.calc-below-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(275px, .8fr); gap: 22px; align-items: start; margin-top: 28px; }
.calc-personality { padding: 29px; }
.calc-personality__title { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.calc-personality__title img { width: 50px; height: 50px; padding: 3px; object-fit: contain; background: #fffaf1; border-radius: 50%; }
.calc-personality__title h2 { margin: 0; font-size: 29px; }
.calc-personality > p { margin-bottom: 24px; color: #45413b; font-family: var(--font-display); font-size: 16px; }
.trait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.trait { display: grid; grid-template-columns: 42px 1fr; gap: 13px; }
.trait h3 { margin-bottom: 6px; font-size: 16px; }
.trait p { margin: 0; font-size: 12px; }
.trait__symbol { color: var(--p36-gold); font-family: var(--font-display); font-size: 32px; text-align: center; }
.calc-personality .p36-note { margin-top: 25px; }
.calc-timeline-card, .calc-how-card { padding: 27px; }
.calc-timeline-head { display: flex; align-items: center; gap: 13px; }
.calc-timeline-head h2 { margin: 0; font-size: 25px; }
.calc-year-line { position: relative; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 28px; padding: 0; list-style: none; }
.calc-year-line::before { content:""; position:absolute; left:7%; right:7%; top:11px; height:2px; background:linear-gradient(90deg,#d39828 15%,#bb1518 40%,#d39828 65%); }
.calc-year-line li { position: relative; z-index: 1; text-align: center; }
.calc-year-line i { display:block; width:20px; height:20px; margin:0 auto 8px; background:#fff; border:2px solid #d39828; border-radius:50%; }
.calc-year-line .is-current i { width:28px; height:28px; margin-top:-4px; margin-bottom:4px; border:5px solid var(--p36-red); }
.calc-year-line strong { display:block; font-family:var(--font-display); font-size:15px; font-weight:500; }
.calc-year-line .is-current strong, .calc-year-line .is-current small { color: var(--p36-red); }
.calc-year-line small { color:#555; font-size:10px; }
.calc-timeline-card > p { margin: 20px 25px 0; color:#3e3a35; font-family:var(--font-display); font-size:14px; }
.calc-how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px; padding:0; list-style:none; }
.calc-how-grid li { position:relative; text-align:center; }
.calc-how-grid li:not(:last-child)::after { content:"→"; position:absolute; right:-14px; top:33px; color:var(--p36-red); }
.calc-how-grid b { display:grid; place-items:center; width:27px; height:27px; margin:0 auto 6px; color:#fff; background:var(--p36-red); border-radius:50%; }
.calc-how-grid i { display:block; color:var(--p36-gold); font-family:var(--font-display); font-size:41px; font-style:normal; }
.calc-how-grid strong { display:block; margin:6px 0; font-family:var(--font-display); font-size:13px; }
.calc-how-grid small { color:#666; font-size:10px; line-height:1.4; }
.calc-guide-cta { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:5px 32px; align-items:center; min-height:0; padding:28px 30px; overflow:hidden; background:linear-gradient(135deg,#fff 0%,#fffaf2 100%); }
.calc-guide-cta::after { content:""; position:absolute; right:-42px; top:-58px; width:180px; height:180px; border:1px solid rgba(190,31,34,.12); border-radius:50%; pointer-events:none; }
.calc-guide-cta h2 { position:relative; z-index:1; grid-column:1; grid-row:1; margin:0; font-size:25px; }
.calc-guide-cta p { position:relative; z-index:1; grid-column:1; grid-row:2; max-width:620px; margin:0; font-size:13px; line-height:1.6; }
.calc-guide-cta .button { position:relative; z-index:1; grid-column:2; grid-row:1 / span 2; min-width:230px; margin:0; }
.calc-sidebar { display:grid; gap:17px; }
.calc-side-card { padding:22px 23px; }
.calc-side-card h2 { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:20px; }
.calc-side-card p, .calc-side-card li { font-size:12px; }
.calc-side-card hr { margin:17px 0; border:0; border-top:1px solid var(--p36-line); }
.calc-reading a { display:grid; grid-template-columns:58px 1fr auto; min-height:62px; align-items:center; gap:12px; border-bottom:1px solid var(--p36-line); }
.calc-reading a:last-child { border-bottom:0; }
.calc-reading img { width:58px; height:52px; object-fit:cover; border-radius:6px; }
.calc-reading span { color:var(--p36-red); font-family:var(--font-display); font-size:14px; }
.calc-tools a { display:flex; min-height:30px; padding:0 8px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--p36-line); font-size:11px; }
.calc-tools a:first-of-type { color:var(--p36-red); border:1px solid var(--p36-red); border-radius:5px; }

/* Page 4 — Compatibility */
.compat-band { color:#fff; background:linear-gradient(100deg,#a60006,#cf161b); }
.compat-band .p36-breadcrumbs { color:#fff; }
.compat-band .p36-breadcrumbs a { color:#fff; }
.compat-intro { padding:36px 0 25px; text-align:center; }
.compat-intro h1 { margin-bottom:6px; color:#a80d11; font-size:clamp(2.2rem,3.2vw,3.3rem); }
.compat-intro p { margin:0; }
.compat-input-card { padding:31px 43px 26px; }
.compat-profiles { display:grid; grid-template-columns:1fr 78px 1fr; align-items:center; }
.compat-profile { padding:0 8px; }
.compat-profile:first-child { border-right:1px solid var(--p36-line); }
.compat-profile:last-child { border-left:1px solid var(--p36-line); }
.compat-profile h2 { color:#a80d11; font-size:22px; }
.compat-profile__row { display:flex; align-items:center; gap:16px; margin-top:17px; }
.compat-profile__row img { width:126px; height:126px; object-fit:contain; }
.compat-profile__row h3 { margin:0 0 4px; font-size:22px; }
.compat-profile__row p { margin:0 0 7px; color:#393632; font-family:var(--font-display); }
.compat-link-mark { display:grid; place-items:center; width:50px; height:50px; margin:auto; color:#a0671d; background:#f7e9d0; border-radius:50%; font-size:23px; }
.compat-submit { display:flex; width:380px; margin:17px auto 0; }
.compat-disclaimer { margin:10px 0 0; color:#777; font-size:11px; text-align:center; }
.compat-summary { min-height:430px; padding:25px 35px; display:grid; grid-template-columns:.44fr .56fr; gap:35px; align-items:center; }
.compat-summary__art { text-align:center; }
.compat-summary__art > img { width:min(100%,410px); margin:auto; }
.compat-summary__animals { display:grid; grid-template-columns:1fr 42px 1fr; align-items:center; gap:12px; }
.compat-summary__animals img { width:100%; height:220px; object-fit:contain; }
.compat-summary__animals span { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--p36-red); border-radius:50%; font-size:19px; }
.compat-pair-label { display:flex; justify-content:center; gap:90px; margin-top:-8px; font-family:var(--font-display); font-size:16px; }
.compat-summary__copy h2 { margin-bottom:10px; color:#a80d11; font-size:27px; }
.compat-summary__copy > p { margin-bottom:16px; font-size:13px; line-height:1.7; }
.compat-score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.compat-score { padding:15px 8px; text-align:center; border:1px solid var(--p36-line); border-radius:8px; }
.compat-score strong { display:block; font-family:var(--font-display); font-weight:500; }
.compat-score i { display:grid; place-items:center; width:52px; height:52px; margin:10px auto; background:#fdeeee; border-radius:50%; font-size:26px; font-style:normal; }
.compat-score:nth-child(2) i { background:#eaf3fb; }.compat-score:nth-child(3) i { background:#fbf1de; }.compat-score:nth-child(4) i { background:#edf6ea; }
.compat-score b { display:grid; place-items:center; width:66px; height:66px; margin:auto; border:5px solid #4e9b56; border-top-color:#dcded8; border-radius:50%; font-family:var(--font-display); font-size:17px; }
.compat-score small { display:block; margin-top:8px; }
.compat-legend { display:flex; flex-wrap:wrap; gap:22px; margin-top:20px; color:#6d6962; font-size:10px; }
.compat-legend i { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:#3d8e42; }
.compat-legend span:nth-child(2) i { background:#2d70a9; }.compat-legend span:nth-child(3) i { background:#dc861a; }.compat-legend span:nth-child(4) i { background:#c8272c; }
.compat-insights { display:grid; grid-template-columns:repeat(3,1fr); gap:27px; }
.compat-insight { padding:24px 27px; border:1px solid #cfdfcb; border-radius:10px; }
.compat-insight:nth-child(2) { border-color:#efd5ae; }.compat-insight:nth-child(3) { border-color:#c9dcee; }
.compat-insight h2 { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:#2d7436; font-size:20px; }
.compat-insight:nth-child(2) h2 { color:#ae5c10; }.compat-insight:nth-child(3) h2 { color:#28679f; }
.compat-matrix-card { padding:25px; display:grid; grid-template-columns:250px 1fr; gap:22px; }
.compat-matrix-card h2 { color:#a80d11; font-size:21px; }
.compat-matrix-card p { font-size:12px; }
.compat-matrix-legend { margin-top:16px; font-size:11px; }
.compat-matrix-legend li { margin:5px 0; }
.compat-matrix { overflow-x:auto; }
.compat-matrix table { width:100%; min-width:650px; border-collapse:collapse; font-size:10px; text-align:center; }
.compat-matrix th, .compat-matrix td { height:57px; padding:5px; border:1px solid var(--p36-line); }
.compat-matrix th { color:#a80d11; font-family:var(--font-display); font-weight:500; }
.compat-matrix .is-best { background:#eff8ec; outline:1px solid #80b870; }
.compat-how { padding:26px 30px; display:grid; grid-template-columns:1fr 1.5fr .7fr; gap:28px; }
.compat-how h2 { grid-column:1/-1; margin-bottom:0; color:#a80d11; font-size:24px; }
.compat-how__diagram { display:grid; place-items:center; width:220px; height:220px; margin:auto; color:#b47729; border:1px solid #d9a65f; border-radius:50%; font-family:var(--font-display); font-size:50px; }
.compat-principles li { display:grid; grid-template-columns:38px 1fr; gap:10px; margin:13px 0; }
.compat-principles strong { display:block; font-family:var(--font-display); font-size:13px; }
.compat-principles small { color:#666; font-size:10px; }
.compat-quote { padding:24px; display:flex; flex-direction:column; justify-content:center; background:#fff8eb; border:1px solid #eddfc8; border-radius:10px; }
.compat-quote blockquote { margin:0; color:#4c4034; font-family:var(--font-display); font-size:18px; font-style:italic; line-height:1.55; }
.compat-articles { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.compat-article { display:grid; grid-template-columns:44% 56%; overflow:hidden; }
.compat-article img { width:100%; height:150px; object-fit:cover; }
.compat-article div { padding:15px 12px; }
.compat-article h3 { min-height:52px; margin-bottom:7px; font-size:14px; }
.compat-article p, .compat-article a { font-size:9px; }
.compat-article a { color:var(--p36-red); font-weight:700; }
.compat-faq-card { padding:0 25px; }
.compat-faq-card h2 { padding-top:19px; color:#a80d11; text-align:center; }
.compat-newsletter { min-height:150px; margin-top:28px; padding:25px 40px; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:#f7f0e3; }
.compat-newsletter form { display:grid; grid-template-columns:1fr auto; }
.compat-newsletter input { min-width:0; padding:0 15px; border:1px solid #ddd0bd; border-radius:8px 0 0 8px; }
.compat-newsletter button { border-radius:0 8px 8px 0; }
.compat-mobile-quick { display:none; }

/* Page 5 — Zodiac years */
.years-hero { min-height:390px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; }
.years-hero__copy { padding-left:16px; }
.years-hero h1 { margin-bottom:13px; font-size:clamp(3.6rem,5.4vw,5.35rem); line-height:1; }
.years-hero p { max-width:630px; font-size:17px; }
.years-hero img { width:min(100%,610px); justify-self:end; mix-blend-mode:multiply; }
.years-slider { padding:31px 37px 24px; }
.years-slider__labels { display:flex; justify-content:space-between; font-family:var(--font-display); }
.years-slider input { width:100%; margin-top:16px; accent-color:var(--p36-red); cursor:pointer; }
.years-slider input:focus-visible { outline:3px solid rgba(193,20,25,.22); outline-offset:7px; }
.years-slider__result { width:max-content; min-width:280px; min-height:116px; margin:18px auto 0; padding:10px 26px 10px 14px; display:grid; grid-template-columns:112px auto; align-items:center; gap:16px; border:1px solid #ecdac0; border-radius:14px; background:#fffcf7; box-shadow:0 8px 22px rgba(78,48,13,.07); }
.years-slider__result img { width:112px; height:96px; object-fit:contain; mix-blend-mode:multiply; }
.years-slider__result-copy { display:flex; flex-direction:column; align-items:flex-start; }
.years-slider output { color:var(--p36-red); font-family:var(--font-display); font-size:27px; font-weight:700; line-height:1.15; }
.years-slider__result strong { margin-top:5px; color:#23201d; font-family:var(--font-display); font-size:20px; font-weight:500; }
.years-slider__result strong b { margin-left:5px; color:var(--p36-red); font-size:23px; font-weight:500; }
.years-slider__result span { margin-top:4px; color:#736c64; font-size:13px; }
.years-feature { min-height:360px; padding:15px 55px; display:grid; grid-template-columns:.4fr .6fr; gap:36px; align-items:center; border-color:#e3c38e; }
.years-feature img { width:min(100%,370px); justify-self:center; }
.years-feature h2 { margin-bottom:17px; font-size:clamp(2.3rem,3.5vw,4rem); }
.years-feature h2 span { color:var(--p36-red); }
.years-feature__facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:17px; }
.years-feature__fact { min-height:70px; padding:11px; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; border:1px solid var(--p36-line); border-radius:8px; }
.years-feature__fact strong { display:block; font-family:var(--font-display); font-weight:500; }
.years-feature__fact small { color:#555; }
.years-feature p { max-width:650px; font-size:14px; }
.year-card-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
.year-card { min-height:230px; padding:21px 12px; text-align:center; }
.year-card h2 { margin-bottom:2px; color:#222; font-size:28px; }
.year-card.is-current h2 { color:var(--p36-red); }
.year-card p { margin:0; color:#333; font-family:var(--font-display); }
.year-card b { display:block; margin:6px 0; font-family:var(--font-display); font-size:43px; font-weight:500; }
.year-element { display:inline-block; padding:5px 14px; border-radius:5px; background:#e5efe2; color:#36713b; font-size:11px; }
.year-element--fire { color:#b31519; background:#f9dddd; }.year-element--water { color:#165c91; background:#daeafa; }.year-element--metal { color:#555; background:#ececea; }.year-element--earth { color:#8a5d18; background:#f2e2bf; }
.year-card small { display:block; margin-top:12px; color:#555; }
.years-pagination { display:flex; justify-content:center; gap:10px; margin:24px 0; }
.years-pagination a { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--p36-line); border-radius:7px; }
.years-pagination .is-current { color:#fff; background:var(--p36-red); }
.years-info-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:22px; }
.years-info-card { padding:26px 30px; }
.years-info-card h2 { font-size:26px; }
.years-info-card p { font-size:12px; }
.stems-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 22px; }
.stems-row span { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--p36-line); border-radius:6px; font-family:var(--font-display); }
.recent-years { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--p36-line); border-radius:9px; font-size:11px; }
.recent-years th, .recent-years td { padding:11px 14px; border-bottom:1px solid var(--p36-line); text-align:center; }
.recent-years tr:last-child td { border-bottom:0; }
.recent-years tbody tr:first-child { color:var(--p36-red); background:#fce9e7; }
.recent-years td:nth-child(3) { font-family:var(--font-display); font-size:23px; }
.years-bottom-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:22px; }
.years-bottom-card { padding:24px 30px; }
.years-related a { display:grid; grid-template-columns:44px 1fr auto; min-height:67px; align-items:center; gap:12px; padding:0 10px; border:1px solid var(--p36-line); border-radius:9px; }
.years-related a + a { margin-top:9px; }
.years-related strong { font-family:var(--font-display); font-weight:500; }
.years-related small { display:block; color:#666; }
.years-newsletter { min-height:116px; margin-top:26px; padding:20px 42px; display:grid; grid-template-columns:auto 1fr 1fr; align-items:center; gap:25px; border-color:#d7ae64; background:#fffaf0; }
.years-newsletter h2 { margin-bottom:3px; }
.years-newsletter p { margin:0; font-size:11px; }
.years-newsletter form { display:grid; grid-template-columns:1fr auto; }
.years-newsletter input { min-width:0; padding:0 14px; border:1px solid #ddd0bd; border-radius:8px 0 0 8px; }
.years-newsletter button { border-radius:0 8px 8px 0; }
.years-mobile-view { display:none; }

/* Page 6 — Five Elements */
.elements-hero { min-height:485px; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:40px; }
.elements-hero h1 { margin-bottom:18px; font-size:clamp(3.5rem,5.1vw,5.25rem); }
.elements-hero__rule { width:140px; height:2px; margin-bottom:28px; background:#d4a04e; }
.elements-hero p { max-width:670px; font-size:14px; }
.elements-values { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:27px; }
.elements-value { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; }
.elements-value strong { display:block; font-family:var(--font-display); font-size:12px; }
.elements-value small { color:#666; font-size:9px; }
.elements-hero__art img { width:min(100%,500px); margin:auto; mix-blend-mode:multiply; }
.elements-cycle-key { display:flex; justify-content:center; gap:54px; margin-top:-22px; color:#333; font-size:11px; }
.elements-cycle-key i { display:inline-block; width:30px; margin-right:8px; border-top:2px solid #347a42; vertical-align:middle; }
.elements-cycle-key span:last-child i { border-color:#d62228; border-top-style:dashed; }
.element-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:27px; margin-top:28px; }
.element-summary { min-height:370px; padding:24px 22px; }
.element-summary h2 { display:flex; align-items:center; gap:12px; margin-bottom:17px; font-size:29px; }
.element-summary h2 i { display:grid; place-items:center; width:58px; height:58px; border:2px solid currentColor; border-radius:50%; font-style:normal; }
.element-summary--wood h2 { color:#3c7a42; }.element-summary--fire h2 { color:#d42025; }.element-summary--earth h2 { color:#bf7d0f; }.element-summary--metal h2 { color:#666; }.element-summary--water h2 { color:#1f6097; }
.element-summary dt { margin-top:11px; font-weight:700; font-size:11px; }
.element-summary dd { margin:0; color:#444; font-family:var(--font-display); font-size:13px; line-height:1.45; }
.elements-work { margin-top:41px; }
.elements-work > h2, .elements-explore > h2 { margin-bottom:16px; text-align:center; }
.elements-tabs { display:flex; justify-content:center; }
.elements-tabs button { width:330px; min-height:52px; color:#333; background:#fff; border:1px solid var(--p36-line); font-family:var(--font-display); }
.elements-tabs button[aria-selected="true"] { color:#fff; background:var(--p36-red); border-color:var(--p36-red); }
.elements-panel { padding:25px 28px; }
.elements-panel > p { font-size:12px; }
.generation-flow { display:grid; grid-template-columns:repeat(5,1fr); margin-top:25px; }
.generation-flow li { position:relative; text-align:center; }
.generation-flow li:not(:last-child)::after { content:"→"; position:absolute; top:29px; right:-10px; color:#2f7a3e; font-size:24px; }
.generation-flow i { display:grid; place-items:center; width:62px; height:62px; margin:auto; border:2px solid currentColor; border-radius:50%; font-family:var(--font-display); font-size:25px; font-style:normal; }
.generation-flow strong { display:block; margin-top:7px; font-family:var(--font-display); font-weight:500; }
.generation-flow small { color:#666; }
.generation-flow li:nth-child(1){color:#3c7a42}.generation-flow li:nth-child(2){color:#d42025}.generation-flow li:nth-child(3){color:#bf7d0f}.generation-flow li:nth-child(4){color:#666}.generation-flow li:nth-child(5){color:#1f6097}
.elements-compare-row { display:grid; grid-template-columns:2fr .9fr; gap:28px; margin-top:24px; }
.elements-table { width:100%; border-collapse:collapse; text-align:center; font-size:10px; }
.elements-table caption { margin-bottom:9px; color:#222; font-family:var(--font-display); font-size:19px; text-align:left; }
.elements-table th, .elements-table td { padding:9px 7px; border:1px solid var(--p36-line); }
.element-finder { padding:23px 28px; }
.element-finder h2 { margin-bottom:5px; }
.element-finder p { font-size:11px; }
.element-finder__fields { display:grid; grid-template-columns:1fr .72fr 1fr; gap:10px; }
.element-finder button { width:100%; margin-top:12px; }
.element-finder__result { margin:10px 0 0; color:var(--p36-green); font-size:11px; }
.elements-explore { margin-top:25px; }
.element-story-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:17px; }
.element-story { overflow:hidden; padding-bottom:18px; }
.element-story img { width:100%; height:185px; object-fit:cover; }
.element-story h3, .element-story p, .element-story a { margin-inline:18px; }
.element-story h3 { margin-top:12px; margin-bottom:7px; font-size:21px; }
.element-story p { min-height:70px; font-size:10px; }
.element-story a { font-size:10px; font-weight:700; }
.element-story:nth-child(1) h3,.element-story:nth-child(1) a{color:#3c7a42}.element-story:nth-child(2) h3,.element-story:nth-child(2) a{color:#d42025}.element-story:nth-child(3) h3,.element-story:nth-child(3) a{color:#bf7d0f}.element-story:nth-child(5) h3,.element-story:nth-child(5) a{color:#1f6097}
.elements-context-grid { display:grid; grid-template-columns:1fr .95fr; gap:25px; margin-top:30px; }
.elements-context-card { padding:22px 28px; }
.element-compat-table { width:100%; border-collapse:collapse; text-align:center; font-size:10px; }
.element-compat-table th,.element-compat-table td { padding:9px; border:1px solid var(--p36-line); }
.element-culture-list li { display:grid; grid-template-columns:35px 1fr; gap:10px; margin:12px 0; }
.element-culture-list strong { display:block; font-family:var(--font-display); font-weight:500; }
.element-culture-list small { color:#666; font-size:10px; }
.elements-bottom { display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:20px; margin-top:26px; }
.elements-bottom-card { padding:20px; }
.elements-bottom-card h2 { font-size:20px; }
.elements-guides a { display:grid; grid-template-columns:40px 1fr auto; min-height:39px; align-items:center; gap:9px; border-bottom:1px solid var(--p36-line); font-size:10px; }
.elements-connect form { display:grid; grid-template-columns:1fr auto; }
.elements-connect input { min-width:0; padding:0 12px; border:1px solid var(--p36-line); border-radius:7px 0 0 7px; }
.elements-connect button { border-radius:0 7px 7px 0; }

/* Live Five Elements hub additions. */
.csi-elements-hub { padding-bottom:70px; }
.csi-elements-kicker { margin:0 0 12px; color:var(--p36-red); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.csi-element-card-link { display:inline-flex; margin-top:20px; color:var(--p36-red); font-size:11px; font-weight:700; }
.element-summary { display:flex; flex-direction:column; }
.element-summary .csi-element-card-link { margin-top:auto; padding-top:18px; }
.element-finder__fields { grid-template-columns:1fr; }
.csi-elements-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.csi-elements-section-heading h2 { margin:0; text-align:left; }
.csi-elements-section-heading > a { color:var(--p36-red); font-size:12px; font-weight:700; white-space:nowrap; }
.csi-elements-guides { margin-top:52px; }
.csi-elements-guides .csi-archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.csi-elements-empty { padding:28px; border:1px solid var(--p36-line); border-radius:10px; text-align:center; }
.csi-elements-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:45px; padding:30px 36px; border:1px solid #e6c984; border-radius:12px; background:#fff9ed; }
.csi-elements-cta h2 { margin-bottom:6px; font-size:30px; }
.csi-elements-cta p:not(.csi-elements-kicker) { margin:0; max-width:700px; font-size:12px; }
.csi-elements-cta .button { white-space:nowrap; }

@media (max-width: 1050px) {
  .calc-top-grid { grid-template-columns:1fr; }
  .calc-below-grid { grid-template-columns:1fr; }
  .calc-sidebar { grid-template-columns:repeat(2,1fr); }
  .calc-side-card:first-child { grid-column:1/-1; }
  .compat-articles { grid-template-columns:repeat(2,1fr); }
  .year-card-grid { grid-template-columns:repeat(4,1fr); }
  .element-summary-grid { gap:12px; }
  .element-summary { padding:20px 15px; }
  .element-summary h2 { font-size:23px; }
  .element-summary h2 i { width:46px; height:46px; }
}

@media (max-width: 820px) {
  .element-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .p36-container { width:calc(100% - 36px); }
  .compat-profiles { grid-template-columns:1fr; gap:20px; }
  .compat-profile:first-child,.compat-profile:last-child { border:0; }
  .compat-link-mark { transform:rotate(90deg); }
  .compat-summary { grid-template-columns:1fr; }
  .compat-insights,.compat-how { grid-template-columns:1fr; }
  .compat-how h2 { grid-column:auto; }
  .compat-matrix-card { grid-template-columns:1fr; }
  .years-hero { grid-template-columns:1fr; text-align:center; }
  .years-hero__copy { padding-left:0; }
  .years-hero p { margin-inline:auto; }
  .years-hero img { justify-self:center; }
  .years-feature { grid-template-columns:1fr; text-align:center; }
  .year-card-grid { grid-template-columns:repeat(3,1fr); }
  .years-info-grid,.years-bottom-grid { grid-template-columns:1fr; }
  .elements-hero { grid-template-columns:1fr; }
  .element-summary-grid { grid-template-columns:repeat(2,1fr); }
  .elements-compare-row,.elements-context-grid,.elements-bottom { grid-template-columns:1fr; }
  .element-story-grid { grid-template-columns:repeat(2,1fr); }
	.csi-elements-guides .csi-archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .p36-page .site-header { position:relative; }
  .p36-mobile-chrome {
    position:sticky;
    top:0;
    z-index:110;
    min-height:52px;
    padding:0 14px;
    display:grid;
    grid-template-columns:34px 1fr 34px;
    align-items:center;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--p36-line);
  }
  .p36-mobile-chrome a { font-size:21px; }
  .p36-mobile-chrome strong { font-family:var(--font-display); font-size:13px; text-align:center; }
  .p36-mobile-chrome button { padding:7px; background:transparent; border:0; font-size:17px; }
  .p36-container { width:calc(100% - 24px); }
  .p36-breadcrumbs { display:none; }
  .p36-card { border-radius:9px; box-shadow:0 3px 12px rgba(74,50,24,.06); }
  .p36-mobile-only { display:block; }

  /* Calculator result follows the dedicated approved mobile composition. */
  .calc-intro,.calc-sidebar { display:none; }
  .calc-top-grid,.calc-below-grid { display:block; }
  .calc-top-grid { width:100%; }
  .calculator-entry { display:block; margin:12px; padding:18px; }
  .calc-date-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
  .calc-date-grid .p36-field:last-child { grid-column:1/-1; }
  .calc-time-options { grid-template-columns:repeat(2,1fr); }
  .calc-time-options button:last-child { grid-column:1/-1; }
  .calc-success { min-height:0; margin:12px; }
  .calculator-result { border:0; box-shadow:none; }
  .calc-mobile-stepper { display:flex; position:relative; margin:12px 10px 18px; justify-content:space-between; }
  .calc-mobile-stepper::before { content:""; position:absolute; left:16px; right:16px; top:11px; height:2px; background:var(--p36-red); }
  .calc-mobile-stepper li { position:relative; z-index:1; display:grid; justify-items:center; gap:4px; font-size:9px; }
  .calc-mobile-stepper b { display:grid; place-items:center; width:22px; height:22px; color:#fff; background:var(--p36-red); border-radius:50%; font-size:10px; }
  .calc-result__hero { min-height:390px; padding:10px 12px; text-align:center; }
  .calc-result__status { display:none; }
  .calc-result__heading { max-width:none; padding-top:0; }
  .calc-result__heading h2 { margin:0; font-size:18px; }
  .calc-result__animal { font-size:35px; }
  .calc-result__heading p:last-child { display:none; }
  .calc-result__hero img { position:static; width:92%; height:285px; margin:4px auto 0; object-fit:contain; }
  .calc-result__hero::after { content:"1978, 1990, 2002, 2014, 2026"; display:block; color:#3d3933; font-size:12px; }
  .calc-facts { display:none; }
  .calc-mobile-result-copy { display:block; padding:0 12px 22px; }
  .calc-mobile-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
  .calc-mobile-result-copy p { margin:16px 0; color:#3f3b35; font-size:12px; line-height:1.6; }
  .calc-mobile-result-copy .button { width:100%; margin-top:8px; }
  .calc-below-grid { margin-top:12px; }
  .calc-personality,.calc-timeline-card,.calc-how-card,.calc-guide-cta { margin-top:12px; padding:18px; }
  .calc-personality__title h2 { font-size:24px; }
  .trait-grid { grid-template-columns:1fr; gap:18px; }
  .calc-year-line { grid-template-columns:repeat(5,90px); overflow-x:auto; }
  .calc-how-grid { grid-template-columns:1fr 1fr; }
  .calc-how-grid li::after { display:none; }
  .calc-guide-cta { display:block; padding:22px 18px; }
  .calc-guide-cta h2 { font-size:23px; }
  .calc-guide-cta p { margin:7px 0 17px; }
  .calc-guide-cta .button { min-width:0; width:100%; }

  /* Keep the real date-based compatibility calculator functional on mobile. */
  .compat-band,.compat-page .compat-matrix-card,.compat-page .compat-how { display:none; }
  .compat-intro { display:block; padding:28px 12px 20px; }
  .compat-intro h1 { font-size:2.25rem; line-height:1.08; }
  .compat-intro p { font-size:12px; line-height:1.65; }
  .compat-input-card { display:block; padding:20px 14px; }
  .compat-profile { padding:0; }
  .compat-profile h2 { font-size:20px; }
  .compat-profile__row { align-items:flex-start; gap:10px; }
  .compat-profile__row img { width:96px; height:96px; }
  .compat-profile__row h3 { font-size:20px; }
  .compat-submit { width:100%; min-height:52px; font-size:15px; }
  .compat-summary { display:grid; min-height:0; padding:20px 14px; gap:18px; }
  .compat-summary__animals img { height:135px; }
  .compat-pair-label { gap:70px; margin-top:4px; }
  .compat-score-grid { grid-template-columns:repeat(2,1fr); }
  .compat-page .compat-insights { display:grid; }
  .compat-insight { padding:18px; }
  .compat-mobile-quick { display:none; }
  .compat-mobile-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:12px; border:1px solid var(--p36-line); border-radius:5px; }
  .compat-mobile-tabs button { min-height:36px; color:#333; background:#fff; border:0; font-size:10px; }
  .compat-mobile-tabs button[aria-selected="true"] { color:var(--p36-red); border-bottom:2px solid var(--p36-red); }
  .compat-mobile-pair { display:grid; grid-template-columns:1fr 34px 1fr; align-items:start; gap:5px; }
  .compat-mobile-animal { text-align:center; }
  .compat-mobile-animal img { width:100px; height:100px; margin:auto; object-fit:contain; }
  .compat-mobile-animal select { width:92px; min-height:30px; border:1px solid var(--p36-line); border-radius:6px; background:#fff; font-size:11px; }
  .compat-mobile-heart { margin-top:37px; color:var(--p36-red); font-size:22px; text-align:center; }
  .compat-mobile-rating { margin:15px 0 8px; text-align:center; }
  .compat-mobile-rating strong { margin-right:10px; font-family:var(--font-display); }
  .compat-mobile-rating span { color:var(--p36-red); letter-spacing:2px; }
  .compat-mobile-quick p { color:#3f3b35; font-size:11px; text-align:center; }
  .compat-mobile-aspects { display:flex; justify-content:center; gap:7px; margin-top:16px; }
  .compat-articles { grid-template-columns:1fr; gap:10px; }
  .compat-article { grid-template-columns:110px 1fr; }
  .compat-article img { height:125px; }
  .compat-faq-card { margin-top:18px; padding:0 16px 12px; }
  .compat-newsletter { min-height:0; padding:20px; grid-template-columns:1fr; gap:12px; text-align:center; }
  .compat-newsletter form { grid-template-columns:1fr; gap:8px; }
  .compat-newsletter input,.compat-newsletter button { min-height:43px; border-radius:8px; }

  /* Years becomes a vertical editorial timeline on mobile. */
  .years-hero,.years-slider,.years-feature,.year-card-grid,.years-pagination { display:none; }
  .years-mobile-view { display:block; }
  .years-mobile-tabs { display:flex; gap:6px; padding:12px 3px; overflow-x:auto; }
  .years-mobile-tabs button { min-width:43px; height:31px; padding:0 12px; background:#fff; border:0; border-radius:6px; font-size:10px; }
  .years-mobile-tabs button.is-current { color:#fff; background:var(--p36-red); }
  .years-mobile-timeline { position:relative; padding:2px 0 8px 25px; }
  .years-mobile-timeline::before { content:""; position:absolute; left:9px; top:23px; bottom:22px; width:1px; background:#d7a24e; }
  .years-mobile-item { position:relative; min-height:96px; margin:10px 0; padding:12px; display:grid; grid-template-columns:83px 1fr; align-items:center; gap:12px; }
  .years-mobile-item::before { content:""; position:absolute; left:-22px; top:42px; width:9px; height:9px; background:#fff; border:2px solid #d7a24e; border-radius:50%; }
  .years-mobile-item.is-current::before { background:var(--p36-red); border-color:var(--p36-red); }
  .years-mobile-item img { width:82px; height:72px; object-fit:contain; }
  .years-mobile-item h2 { margin:0; font-size:17px; }
  .years-mobile-item p { margin:2px 0; color:#333; font-size:11px; }
  .years-mobile-item small { color:#777; font-size:9px; }
  .years-info-grid,.years-bottom-grid { display:block; }
  .years-info-card,.years-bottom-card { margin-top:12px; padding:18px; }
  .years-newsletter { grid-template-columns:1fr; padding:20px; text-align:center; }
  .years-newsletter form { grid-template-columns:1fr; gap:8px; }
  .years-newsletter input,.years-newsletter button { min-height:43px; border-radius:8px; }

  .elements-hero { min-height:auto; padding:32px 0 20px; text-align:center; }
  .elements-hero h1 { font-size:3rem; }
  .elements-hero__rule { margin-inline:auto; }
  .elements-values { grid-template-columns:1fr; text-align:left; }
  .elements-cycle-key { margin:0; flex-direction:column; align-items:center; gap:8px; }
  .element-summary-grid { grid-template-columns:1fr; }
  .element-summary { min-height:0; }
  .elements-tabs button { width:50%; }
  .generation-flow { grid-template-columns:repeat(5,95px); overflow-x:auto; padding-bottom:10px; }
  .elements-compare-row { display:block; }
  .elements-table-wrap { overflow-x:auto; }
  .elements-table { min-width:650px; }
  .element-finder { margin-top:12px; }
  .element-finder__fields { grid-template-columns:1fr; }
  .element-story-grid { grid-template-columns:1fr; }
  .element-story { display:grid; grid-template-columns:130px 1fr; padding:0; }
  .element-story img { height:100%; min-height:145px; }
  .element-story div { padding:12px 0; }
  .element-story p { min-height:0; }
  .elements-context-grid,.elements-bottom { display:block; }
  .elements-context-card,.elements-bottom-card { margin-top:12px; }
  .elements-connect form { grid-template-columns:1fr; gap:8px; }
  .elements-connect input,.elements-connect button { min-height:43px; border-radius:7px; }
  .csi-elements-section-heading,.csi-elements-cta { display:block; }
  .csi-elements-section-heading > a { display:inline-block; margin-top:10px; }
  .csi-elements-guides .csi-archive-grid { grid-template-columns:1fr; }
  .csi-elements-cta { padding:25px 22px; }
  .csi-elements-cta .button { margin-top:18px; }
}