@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f8f2ea;
  --bg-alt:#fffaf6;
  --surface:#fffdf9;
  --surface-strong:#fff7f0;
  --surface-tint:#f4e8df;
  --text:#2f2430;
  --text-soft:#5f5360;
  --muted:#786c78;
  --muted2:#8f8390;
  --line:rgba(74, 50, 61, 0.12);
  --line-strong:rgba(74, 50, 61, 0.2);
  --accent:#c8654a;
  --accent-deep:#9f4d39;
  --accent-soft:#f5d9cb;
  --sage:#8ca08d;
  --sage-soft:#e7efe8;
  --berry:#9d6d88;
  --purple-light:#9d6d88;
  --highlight:#fff2c9;
  --shadow:0 18px 45px rgba(116, 85, 80, 0.1);
  --shadow-strong:0 26px 70px rgba(116, 85, 80, 0.16);
  --orange:var(--accent);
  --border:var(--line);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:'Manrope',sans-serif;
  background:
    radial-gradient(circle at top left, rgba(245,217,203,0.75), transparent 28%),
    radial-gradient(circle at top right, rgba(231,239,232,0.8), transparent 26%),
    linear-gradient(180deg, #fffaf6 0%, #f8f2ea 48%, #f4ece4 100%);
  color:var(--text);
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:inherit;
  text-decoration-thickness:0.08em;
  text-underline-offset:0.18em;
}

img{
  max-width:100%;
  display:block;
}

nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:1rem clamp(1.25rem,3vw,2rem);
  background:rgba(255,250,246,0.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(74, 50, 61, 0.08);
}

.logo{
  font-family:'Fraunces',serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
  text-decoration:none;
  white-space:nowrap;
}

.logo span{color:var(--accent-deep)}

.nav-links{
  display:flex;
  align-items:center;
  gap:0.85rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a{
  color:var(--text-soft);
  font-size:0.84rem;
  font-weight:700;
  text-decoration:none;
  padding:0.55rem 0.8rem;
  border-radius:999px;
  transition:background-color 0.2s ease,color 0.2s ease,transform 0.2s ease;
}

.nav-links a:hover{
  color:var(--text);
  background:rgba(255,255,255,0.75);
  transform:translateY(-1px);
}

.nav-cta,
.btn-primary,
.btn-purple,
.btn,
.hero-btns a:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  border:none;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
  color:#fff !important;
  border-radius:999px;
  padding:0.95rem 1.4rem;
  font-size:0.9rem !important;
  font-weight:800 !important;
  line-height:1.1;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(159, 77, 57, 0.2);
}

.nav-cta{
  padding:0.7rem 1rem !important;
  font-size:0.78rem !important;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.95rem 1.4rem;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,0.62);
  color:var(--text);
  font-size:0.9rem;
  font-weight:800;
  text-decoration:none;
}

.btn-ghost:hover{
  background:#fff;
}

.hero,
.section,
.article-wrap,
main{
  width:min(1120px, calc(100% - 2.5rem));
  margin:0 auto;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding:clamp(3rem, 8vw, 6.25rem) 0 4rem;
}

.hero-left h1,
.article-wrap h1,
main h1,
.section h2,
.about-content h2,
h1,
h2,
h3,
.card-title,
.system-card h3,
.post-item h3,
.cta-box h3,
.doompile-logo,
.system-doompile-logo,
.quick-facts-title,
.pile-score-title{
  font-family:'Fraunces',serif;
  letter-spacing:-0.04em;
  color:var(--text);
}

.hero-left h1{
  font-size:clamp(3rem, 7vw, 5.6rem);
  line-height:0.95;
  margin-bottom:1.4rem;
  max-width:11ch;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.5rem 0.85rem;
  margin-bottom:1.5rem;
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(74, 50, 61, 0.08);
  color:var(--accent-deep);
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.hero-left h1 em,
.section h2 em,
.article-wrap h1 em,
main h1 em,
h1 em{
  color:var(--accent-deep);
  font-style:normal;
}

.hero-left p,
.system-intro,
.about-content p,
.card-desc,
.post-item p,
.article-wrap p,
main p,
.cta-box p,
.ecosystem-note p,
.score-card p,
.how-it-works,
.quick-fact,
.article-meta,
.img-caption,
.verdict{
  color:var(--text-soft);
  font-size:1rem;
}

.hero-left p{
  max-width:44ch;
  font-size:1.07rem;
  margin-bottom:1.75rem;
}

.hero-btns{
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem;
  margin-bottom:1rem;
}

.hero-right{
  position:relative;
}

.hero-right::before{
  content:"";
  position:absolute;
  inset:-1.2rem -1rem 1.2rem 1rem;
  background:linear-gradient(145deg, rgba(245,217,203,0.82), rgba(231,239,232,0.72));
  border-radius:36px;
  z-index:0;
}

.hero-img,
.about-img{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:30px;
  object-fit:cover;
  object-position:center top;
  box-shadow:var(--shadow-strong);
  border:1px solid rgba(255,255,255,0.7);
}

.hero-badge{
  position:absolute;
  left:1.2rem;
  right:1.2rem;
  bottom:1.2rem;
  z-index:2;
  padding:0.8rem 1rem;
  border-radius:18px;
  background:rgba(255,253,249,0.9);
  border:1px solid rgba(74, 50, 61, 0.09);
  color:var(--text);
  font-size:0.82rem;
  font-weight:700;
  box-shadow:var(--shadow);
}

.hero-note{
  max-width:42ch;
  color:var(--muted);
  font-size:0.94rem;
}

.hero-panel{
  position:relative;
  z-index:1;
  display:grid;
  gap:0.9rem;
  padding:1.35rem;
  border-radius:30px;
  background:rgba(255,253,249,0.82);
  border:1px solid rgba(74, 50, 61, 0.1);
  box-shadow:var(--shadow-strong);
}

.hero-panel-title{
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  line-height:1.05;
  color:var(--text);
}

.hero-panel-copy{
  color:var(--text-soft);
  font-size:0.96rem;
  line-height:1.7;
}

.hero-offers{
  display:grid;
  gap:0.8rem;
}

.hero-offer{
  display:block;
  padding:1rem 1.05rem;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,248,242,0.95) 100%);
  border:1px solid rgba(74, 50, 61, 0.08);
  text-decoration:none;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-offer:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:rgba(159, 77, 57, 0.18);
}

.hero-offer-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:0.45rem;
}

.hero-offer-price{
  display:inline-flex;
  padding:0.35rem 0.65rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.hero-offer-kicker{
  color:var(--muted2);
  font-size:0.77rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.hero-offer h3{
  font-size:1.2rem;
  line-height:1.05;
  margin-bottom:0.45rem;
}

.hero-offer p{
  color:var(--text-soft);
  font-size:0.9rem;
  line-height:1.65;
  margin:0;
}

.hero-offer-arrow{
  display:inline-flex;
  margin-top:0.75rem;
  color:var(--accent-deep);
  font-size:0.88rem;
  font-weight:800;
}

.ticker-wrap{
  display:none;
}

.section{
  padding:clamp(3rem, 7vw, 5.5rem) 0;
}

.section-tag,
.article-tag,
.doompile-tag,
.system-kicker,
.label,
.related h3{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.42rem 0.78rem;
  margin-bottom:1rem;
  border-radius:999px;
  background:rgba(255,255,255,0.68);
  border:1px solid rgba(74, 50, 61, 0.08);
  color:var(--accent-deep);
  font-size:0.74rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.section h2{
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
  margin:0.9rem 0 1.25rem;
  max-width:14ch;
}

.section-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  justify-content:space-between;
  gap:1.25rem;
  margin-bottom:1.15rem;
}

.section-header .section-tag{
  margin-bottom:0.7rem;
}

.section-header h2{
  margin:0;
  max-width:10ch;
}

.see-all,
.system-link,
.card-arrow,
.related-links a,
.ecosystem-links a,
.review-links a,
.hotel-link{
  color:var(--accent-deep);
  font-weight:800;
  text-decoration:none;
}

.see-all:hover,
.system-link:hover,
.card-arrow:hover,
.related-links a:hover,
.ecosystem-links a:hover,
.review-links a:hover,
.hotel-link:hover{
  color:var(--text);
}

.system-grid,
.featured-grid,
.cards-grid,
.score-grid{
  display:grid;
  gap:1.35rem;
}

.system-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.featured-grid{
  grid-template-columns:1.35fr 1fr 1fr;
  margin-bottom:1.35rem;
}

.cards-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.system-card,
.card,
.featured-card,
.post-item,
.score-card,
.how-it-works,
.review-links a,
.quick-facts,
.quick-fact,
.pile-score-card,
.tip-box,
.quote,
.hotel-callout,
.ecosystem-note,
.cta-box,
.doompile-bubble{
  background:rgba(255,253,249,0.9);
  border:1px solid rgba(74, 50, 61, 0.1);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.system-card,
.card,
.featured-card,
.post-item{
  padding:1.5rem;
  text-decoration:none;
  transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.system-card:hover,
.card:hover,
.featured-card:hover,
.post-item:hover{
  transform:translateY(-4px);
  border-color:rgba(159, 77, 57, 0.22);
  box-shadow:var(--shadow-strong);
}

.system-card{
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  min-height:100%;
}

.system-card-featured{
  border-color:rgba(159, 77, 57, 0.18);
  box-shadow:var(--shadow-strong);
}

.system-card-doom{
  background:linear-gradient(180deg, #fff8fb 0%, #fffdf9 100%);
}

.system-card-system{
  background:linear-gradient(180deg, #fff8f2 0%, #fffdf9 100%);
}

.system-card-reset{
  background:linear-gradient(180deg, #f7fbf8 0%, #fffdf9 100%);
}

.system-tier,
.card-tag{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  justify-content:center;
  padding:0.45rem 0.8rem;
  border-radius:999px;
  font-size:0.74rem;
  font-weight:800;
  letter-spacing:0.02em;
}

.system-tier{
  background:var(--surface-tint);
  color:var(--text);
}

.card-tag{
  background:var(--accent-soft);
  color:var(--accent-deep);
}

.system-card h3{
  font-size:1.5rem;
  line-height:1.05;
}

.system-card p,
.card-desc{
  line-height:1.7;
}

.system-doompile-logo,
.doompile-logo{
  font-size:2.1rem;
  line-height:0.92;
}

.system-doompile-logo .doom,
.doompile-logo .doom{
  color:var(--text);
}

.system-doompile-logo .pile,
.doompile-logo .pile{
  color:var(--berry);
}

.featured-card .card-title,
.card-title{
  font-size:1.3rem;
  line-height:1.12;
}

.card-product{
  background:linear-gradient(160deg, #263251 0%, #1a2238 100%) !important;
  border-color:rgba(125, 97, 255, 0.18);
}

.card-product .card-tag{
  background:#8b5cf6;
  color:#fff5ff;
}

.card-product .card-title{
  color:#f8f6ff;
}

.card-product .card-desc{
  color:rgba(241, 238, 255, 0.8);
}

.card-product .card-arrow{
  color:#f2b286;
}

.card-product:hover{
  border-color:rgba(139, 92, 246, 0.32);
}

.divider{
  width:min(1120px, calc(100% - 2.5rem));
  margin:0 auto;
  border:none;
  border-top:1px solid rgba(74, 50, 61, 0.1);
}

.doompile-section{
  padding:4rem 0 5rem;
}

.doompile-inner{
  width:min(1120px, calc(100% - 2.5rem));
  margin:0 auto;
}

.doompile-bubble{
  max-width:680px;
  padding:2rem;
  background:
    radial-gradient(circle at top right, rgba(157,109,136,0.14), transparent 35%),
    linear-gradient(180deg, #fffafa 0%, #fffdf9 100%);
}

.about-grid{
  display:grid;
  grid-template-columns:minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

.about-content h2{
  font-size:clamp(2.2rem, 4vw, 3.5rem);
  line-height:0.98;
  margin:0.8rem 0 1.25rem;
  max-width:12ch;
}

.about-content h3,
.article-wrap h2,
main h2,
h2{
  font-size:1.75rem;
  line-height:1.1;
  margin:2.2rem 0 1rem;
}

.about-content blockquote,
.article-wrap blockquote,
.quote{
  margin:1.75rem 0;
  padding:1.3rem 1.4rem;
  border-radius:22px;
  border:1px solid rgba(157, 109, 136, 0.18);
  background:rgba(255,255,255,0.76);
  color:var(--text);
  font-family:'Fraunces',serif;
  font-size:1.18rem;
  line-height:1.45;
}

.posts-list{
  display:grid;
  gap:1.2rem;
}

.post-item h3{
  font-size:1.45rem;
  margin:0.55rem 0 0.2rem;
}

.article-wrap,
main{
  max-width:760px;
  padding:3.5rem 0 5.5rem;
}

.article-wrap h1,
main h1,
h1{
  font-size:clamp(2.6rem, 5vw, 4.25rem);
  line-height:0.98;
  margin:1rem 0 1.25rem;
}

.article-wrap p,
main p{
  margin-bottom:1.15rem;
  font-size:1.04rem;
}

.article-intro,
.intro{
  font-size:1.16rem !important;
  line-height:1.8 !important;
  color:var(--text) !important;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-bottom:1.35rem;
}

.article-meta span{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.55rem 0.82rem;
  border-radius:999px;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(74, 50, 61, 0.08);
  font-size:0.82rem;
  font-weight:700;
}

.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  margin:1rem 0;
  padding:1.25rem 1.35rem;
  border-radius:22px;
  background:rgba(255,255,255,0.76);
  border:1px solid rgba(74, 50, 61, 0.08);
}

.step-num{
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  font-family:'Fraunces',serif;
  font-size:1.1rem;
  font-weight:700;
}

.step-content h3{
  margin:0 0 0.4rem;
  font-size:1.1rem;
}

.step-content p{
  margin:0;
}

.article-img{
  width:100%;
  margin:1.5rem 0 0.75rem;
  border-radius:28px;
  border:1px solid rgba(74, 50, 61, 0.08);
  box-shadow:var(--shadow);
}

.portrait{
  aspect-ratio:4 / 5;
  object-fit:cover;
}

.img-caption{
  margin-bottom:1.4rem;
  font-size:0.9rem;
}

.pile-score-card,
.quick-facts,
.cta-box,
.ecosystem-note{
  padding:1.5rem;
}

.pile-score-card{
  margin:2rem 0;
  background:
    radial-gradient(circle at top right, rgba(245,217,203,0.52), transparent 32%),
    linear-gradient(180deg, #fffdf9 0%, #fff7f0 100%);
}

.pile-score-title,
.quick-facts-title{
  font-size:1.4rem;
  line-height:1.05;
  margin-bottom:1rem;
}

.score-row{
  display:grid;
  gap:0.45rem;
  padding:1rem 0;
  border-top:1px solid rgba(74, 50, 61, 0.08);
}

.score-row:first-of-type{
  border-top:none;
  padding-top:0;
}

.score-label{
  display:flex;
  align-items:center;
  gap:0.8rem;
  color:var(--text);
  font-weight:800;
}

.score-dots{
  display:flex;
  gap:0.32rem;
}

.dot{
  width:0.72rem;
  height:0.72rem;
  border-radius:999px;
  background:rgba(157, 109, 136, 0.16);
  border:1px solid rgba(157, 109, 136, 0.12);
}

.dot.filled{
  background:var(--berry);
  border-color:var(--berry);
}

.pile-score-total{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-top:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(74, 50, 61, 0.08);
}

.out-of{
  color:var(--muted2);
  font-size:0.84rem;
}

.score{
  font-family:'Fraunces',serif;
  font-size:2.8rem;
  line-height:0.95;
  color:var(--accent-deep);
}

.verdict,
.tip-box,
.hotel-callout,
.how-it-works{
  margin-top:1.15rem;
  padding:1.15rem 1.2rem;
}

.quick-facts{
  display:grid;
  gap:0.75rem;
  margin:1.8rem 0;
}

.quick-fact{
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  padding:0.9rem 1rem;
}

.review-links,
.related-links{
  display:grid;
  gap:0.8rem;
}

.related{
  margin-top:2.6rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(74, 50, 61, 0.1);
}

.review-links a,
.related-links a{
  padding:1rem 1.1rem;
  border-radius:18px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(74, 50, 61, 0.08);
}

.ecosystem-note{
  margin-top:2rem;
  background:
    radial-gradient(circle at top right, rgba(140,160,141,0.22), transparent 32%),
    linear-gradient(180deg, #f8fcf8 0%, #fffdf9 100%);
}

.ecosystem-note h3{
  font-size:1.5rem;
  margin-bottom:0.8rem;
}

.ecosystem-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1rem;
}

.ecosystem-links a{
  display:inline-flex;
  padding:0.65rem 0.95rem;
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(74, 50, 61, 0.08);
}

.cta-box{
  text-align:left;
  margin:2.5rem 0 0;
  background:
    radial-gradient(circle at top right, rgba(245,217,203,0.5), transparent 32%),
    linear-gradient(180deg, #fffaf6 0%, #fff4ea 100%);
}

.cta-box h3{
  font-size:1.9rem;
  line-height:1.02;
  margin-bottom:0.75rem;
  max-width:14ch;
}

footer{
  width:min(1120px, calc(100% - 2.5rem));
  margin:0 auto;
  padding:1.8rem 0 2.4rem;
  border-top:1px solid rgba(74, 50, 61, 0.1);
  color:var(--muted);
  font-size:0.84rem;
  line-height:1.8;
}

footer a{
  color:var(--text-soft);
  text-decoration:none;
  margin:0 0.4rem;
}

footer a:hover{
  color:var(--text);
}

@media (max-width: 980px){
  .hero,
  .about-grid,
  .system-grid,
  .featured-grid,
  .cards-grid{
    grid-template-columns:1fr;
  }

  .hero-right{
    max-width:520px;
    margin:0 auto;
  }

  .section-header{
    grid-template-columns:1fr;
    align-items:start;
  }
}

@media (max-width: 720px){
  nav{
    align-items:flex-start;
    flex-direction:column;
  }

  .nav-links{
    width:100%;
    justify-content:flex-start;
  }

  .hero,
  .section,
  .article-wrap,
  main,
  footer,
  .divider,
  .doompile-inner{
    width:min(100% - 1.5rem, 1120px);
  }

  .hero{
    padding-top:2.4rem;
  }

  .hero-left h1,
  .article-wrap h1,
  main h1,
  h1{
    max-width:none;
  }

  .hero-badge{
    position:static;
    margin-top:0.9rem;
  }

  .hero-right::before{
    inset:-0.8rem -0.5rem 0.8rem 0.5rem;
  }

  .cta-box h3,
  .section h2,
  .about-content h2{
    max-width:none;
  }

  .pile-score-total{
    align-items:flex-start;
    flex-direction:column;
  }

  .quick-fact,
  .nav-links a{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
}