@font-face {
  font-family: Manrope;
  src: url('/static/96029c3d4710883f4c7cf389/assets/assets/fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
html,body {
  margin:0;
  padding:0;
  min-height:100%;
  background:#101f1c
}
[hidden] {
  display:none!important
}
.site-home {
  --ink:#193e34;
  --paper:#f8f6ee;
  --gold:#e8c278;
  --muted:#69746b;
  font:16px/1.7 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
  color-scheme:light
}
.site-home * {
  box-sizing:border-box
}
.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}
.site-home a {
  color:inherit;
  text-underline-offset:5px
}
.site-home a:focus-visible {
  outline:3px solid #b27c26;
  outline-offset:6px
}
.skip-link {
  position:absolute;
  top:-100px;
  z-index:5;
  background:var(--paper);
  padding:12px
}
.skip-link:focus {
  top:12px
}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:106px;
  border-bottom:1px solid #193e3420
}
.brand {
  display:inline-flex;
  align-items:center;
  font-size:29px;
  font-weight:800;
  letter-spacing:-1.5px;
  text-decoration:none;
  line-height:1
}
.brand img {
  margin-right:10px;
  border-radius:12px
}
.brand-dot {
  color:#b3883e
}
.site-nav nav {
  display:flex;
  gap:28px;
  font-size:14px
}
.site-nav nav a {
  text-decoration:none
}
.site-nav nav a:hover,.site-footer a:hover {
  color:#a57428
}
.button {
  display:inline-flex;
  gap:30px;
  justify-content:center;
  align-items:center;
  background:var(--ink);
  color:#fff!important;
  padding:15px 25px;
  border-radius:6px;
  text-decoration:none;
  font-weight:650;
  font-size:15px;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#2d5b49;
  transform:translateY(-2px)
}
.button span {
  font-size:20px;
  font-weight:400
}
.button-small {
  padding:9px 20px;
  gap:24px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
  padding-block:64px 68px
}
.eyebrow {
  text-transform:uppercase;
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  line-height:1.7;
  margin:0 0 22px
}
.hero .eyebrow {
  letter-spacing:1.7px;
  font-size:10px
}
.little-star {
  color:#ad8238;
  font-size:20px;
  vertical-align:middle;
  margin-right:8px
}
.site-home h1,.site-home h2,.reward-feature h3 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400
}
.site-home h1 {
  font-size:clamp(52px,5.5vw,78px);
  letter-spacing:-3.6px;
  line-height:1.05;
  margin:0 0 28px
}
.site-home em {
  font-weight:400;
  color:#9c7537
}
.intro {
  max-width:480px;
  font-size:16px;
  line-height:1.85;
  color:#58695e;
  margin-bottom:30px
}
.actions {
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap
}
.text-link {
  font-size:13px;
  font-weight:650;
  text-decoration:none
}
.text-link:hover {
  text-decoration:underline
}
.text-link span {
  margin-left:8px
}
.hero-note {
  font-size:11px;
  color:var(--muted);
  margin:16px 0 0;
  letter-spacing:.3px
}
.hero-art {
  position:relative;
  height:520px;
  border-radius:48% 48% 10px 10px;
  background:radial-gradient(ellipse at 45% 40%,#32654e,#193f34 70%);
  isolation:isolate;
  box-shadow:inset 0 0 50px #092b2530
}
.hero-art:after {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid #dcca9033;
  border-radius:inherit;
  pointer-events:none
}
.table-ring {
  position:absolute;
  inset:50px 35px;
  border:1px solid #dcca9026;
  border-radius:50%
}
.table-caption,.art-footnote {
  position:absolute;
  color:#d9d7b7;
  letter-spacing:2.1px;
  font-size:9px;
  text-align:center;
  left:0;
  right:0
}
.table-caption {
  top:70px
}
.art-footnote {
  bottom:26px
}
.hand {
  position:absolute;
  inset:0
}
.playing-card {
  position:absolute;
  width:32%;
  height:auto;
  top:29%;
  left:34%;
  border-radius:8px;
  box-shadow:3px 13px 20px #051c254d;
  transform-origin:50% 90%
}
.card-one {
  transform:translateX(-49%) rotate(-24deg)
}
.card-two {
  transform:translateX(-20%) rotate(-9deg)
}
.card-three {
  transform:translateX(16%) rotate(10deg)
}
.card-four {
  transform:translateX(46%) rotate(27deg)
}
.table-call {
  position:absolute;
  top:19%;
  right:6%;
  transform:rotate(7deg);
  padding:8px 17px;
  background:#f9f3df;
  color:var(--ink);
  font:italic 24px Georgia,serif;
  border-radius:8px;
  box-shadow:0 5px 15px #0002
}
.table-call span {
  display:block;
  font:9px/1.8 -apple-system,sans-serif;
  font-style:normal
}
.hero-coin {
  position:absolute;
  filter:drop-shadow(0 8px 4px #0004)
}
.coin-one {
  bottom:55px;
  left:40px;
  transform:rotate(-20deg)
}
.coin-two {
  bottom:40px;
  left:102px;
  transform:rotate(15deg)
}
.coin-three {
  right:30px;
  top:45px;
  transform:rotate(-25deg)
}
.facts {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #193e3425;
  border-bottom:1px solid #193e3425;
  padding-block:22px
}
.facts p {
  margin:0;
  font-size:12px;
  color:#647067;
  display:flex;
  align-items:center;
  gap:12px
}
.facts strong {
  font:30px Georgia,serif;
  color:var(--ink)
}
.facts p:last-child span {
  color:#ad8238;
  font-size:24px
}
.section {
  padding-block:90px
}
.site-home h2 {
  font-size:clamp(32px,3.6vw,46px);
  line-height:1.2;
  letter-spacing:-1.4px;
  margin:0
}
.discovery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:center
}
.discovery-copy {
  font-size:14px;
  color:#5a6c60
}
.discovery-copy p:first-child {
  margin-top:0
}
.discovery-copy .text-link {
  display:inline-block;
  color:var(--ink);
  margin-top:8px
}
.section-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:38px
}
.section-top .eyebrow {
  margin-bottom:16px
}
.section-number {
  font-size:9px;
  letter-spacing:1.7px;
  white-space:nowrap;
  color:#6c7d70;
  margin-bottom:6px
}
.modes-section {
  background:#ecefe7
}
.modes-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.mode {
  background:var(--paper);
  border:1px solid #193e3415;
  border-radius:9px;
  padding:30px 27px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.mode-ranked {
  background:var(--ink);
  color:#f5f1df
}
.mode-icon {
  font:48px/1 Georgia,serif;
  color:#a57c37;
  margin-bottom:28px
}
.mode .eyebrow {
  font-size:9px;
  letter-spacing:1.3px;
  margin-bottom:9px
}
.site-home h3 {
  font-size:21px;
  letter-spacing:-.5px;
  line-height:1.4;
  margin:0 0 12px;
  font-weight:600
}
.mode p:not(.eyebrow) {
  font-size:13px;
  color:#617064;
  margin:0 0 25px
}
.mode-ranked p:not(.eyebrow) {
  color:#c7d3c6
}
.mode-ranked .mode-icon {
  color:var(--gold)
}
.mode-tag {
  border-top:1px solid #193e3420;
  padding-top:17px;
  margin-top:auto;
  font-size:9px;
  letter-spacing:.3px;
  width:100%;
  font-weight:600
}
.mode-ranked .mode-tag {
  border-color:#ffffff25;
  color:var(--gold)
}
.feature-showcase {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:22px
}
.reward-feature {
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:10px;
  background:#e9ede2;
  border-radius:9px;
  padding:36px 30px;
  overflow:hidden
}
.reward-feature .eyebrow,.style-feature .eyebrow {
  font-size:9px;
  letter-spacing:1.5px
}
.reward-feature h3 {
  font-size:33px;
  line-height:1.2;
  letter-spacing:-1px;
  margin-bottom:20px
}
.reward-feature p:not(.eyebrow),.style-feature p:not(.eyebrow) {
  font-size:13px;
  color:#5c6b5d
}
.reward-art {
  position:relative;
  align-self:center;
  height:290px
}
.reward-orbit {
  position:absolute;
  width:210px;
  height:210px;
  border:1px solid #b49a5c55;
  border-radius:50%;
  top:5px;
  left:50%;
  transform:translateX(-50%)
}
.reward-coin {
  position:absolute;
  filter:drop-shadow(0 12px 6px #644a2326)
}
.reward-coin-front {
  left:36%;
  top:53px;
  transform:rotate(12deg)
}
.reward-coin-back {
  left:4%;
  top:26px;
  transform:rotate(-16deg)
}
.xp-pill {
  position:absolute;
  top:170px;
  left:10px;
  background:var(--paper);
  padding:7px 15px;
  border-radius:30px;
  font-size:11px;
  font-weight:650;
  transform:rotate(-8deg);
  box-shadow:0 4px 15px #193e3412
}
.progress-path {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  display:flex;
  align-items:center
}
.progress-path span {
  border:1px solid #a9b5a0;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:9px;
  background:#f8f6ee
}
.progress-path i {
  height:1px;
  background:#a9b5a0;
  flex:1
}
.progress-path .level-gold {
  background:var(--gold);
  border-color:#b58f4d
}
.illustration-caption {
  position:absolute;
  bottom:0;
  font-size:9px;
  left:0;
  right:0;
  text-align:center;
  color:#6d7968
}
.style-feature {
  background:#eee8db;
  border-radius:9px;
  padding:30px;
  overflow:hidden
}
.card-back-art {
  height:200px;
  position:relative;
  margin-bottom:18px
}
.card-back-art:before {
  content:"";
  position:absolute;
  inset:10px 20px 5px;
  border:1px solid #aa8f6333;
  border-radius:50%
}
.card-back-art img {
  position:absolute;
  left:50%;
  height:165px;
  width:auto;
  transform:translateX(-50%) rotate(-14deg);
  border-radius:6px;
  box-shadow:8px 12px 15px #193e3425
}
.card-back-art span {
  position:absolute;
  right:-5px;
  bottom:12px;
  font:italic 18px Georgia,serif;
  background:#f8f6ee;
  padding:6px 12px;
  transform:rotate(5deg)
}
.style-feature .eyebrow {
  margin-bottom:10px
}
.details-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:40px
}
.details-grid article {
  border-top:1px solid #193e3420;
  padding-top:22px
}
.detail-symbol {
  font-size:24px;
  color:#9c7537;
  display:block;
  margin-bottom:15px
}
.details-grid h3 {
  font-size:17px
}
.details-grid p {
  font-size:13px;
  color:#617064;
  margin:0
}
.start-section {
  background:var(--ink);
  color:#f8f6ee
}
.start-section .eyebrow,.start-section .section-number {
  color:#d1ba80
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  padding:0;
  list-style:none;
  margin:45px 0 0
}
.step-number {
  font:italic 32px Georgia,serif;
  color:var(--gold);
  display:block;
  border-bottom:1px solid #ffffff25;
  padding-bottom:20px;
  margin-bottom:22px
}
.steps h3 {
  font-size:20px
}
.steps p {
  color:#c3cfc2;
  font-size:13px;
  margin:0
}
.final-cta {
  text-align:center;
  padding-block:80px 60px
}
.final-cta>.little-star {
  display:block;
  font-size:32px;
  margin:0 0 16px
}
.final-cta .eyebrow {
  margin-bottom:15px
}
.final-cta h2 {
  font-size:clamp(36px,5vw,60px)
}
.final-cta>p:not(.eyebrow) {
  font-size:14px;
  color:#617064
}
.final-cta .button {
  margin-top:10px
}
.final-cta .cta-note {
  font-size:10px!important;
  margin-top:20px
}
.account-info {
  border-top:1px solid #193e3420;
  padding-block:28px 30px
}
.account-info h2 {
  font:600 13px/1.5 -apple-system,sans-serif;
  letter-spacing:0;
  margin-bottom:10px
}
.account-info p {
  font-size:11px;
  color:#69746b;
  max-width:970px
}
.site-footer {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  border-top:1px solid #193e3420;
  padding-block:30px
}
.site-footer .brand {
  font-size:24px
}
.site-footer p {
  font-size:11px;
  color:#69746b
}
.site-footer nav {
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:10px
}
.site-footer nav a {
  text-decoration:none
}
@media(min-width:1500px) {
  .hero {
    padding-block:85px
  }
  .hero-art {
    height:550px
  }
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 56px)
  }
  .hero {
    gap:22px
  }
  .site-home h1 {
    font-size:60px
  }
  .hero-art {
    height:460px
  }
  .table-caption {
    top:65px;
    font-size:8px
  }
  .coin-one {
    left:20px
  }
  .coin-two {
    left:75px
  }
  .table-call {
    font-size:20px
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1px
  }
  .hero .actions {
    gap:18px
  }
  .hero .text-link {
    font-size:12px
  }
  .facts {
    gap:15px
  }
  .facts p {
    font-size:10px;
    gap:8px
  }
  .feature-showcase {
    grid-template-columns:1.6fr 1fr
  }
  .reward-feature {
    padding:28px 24px;
    grid-template-columns:1fr
  }
  .reward-art {
    width:230px;
    justify-self:center;
    height:260px
  }
  .reward-coin-front {
    top:25px
  }
  .reward-coin-back {
    top:0
  }
  .xp-pill {
    top:140px
  }
  .style-feature {
    padding:26px
  }
  .card-back-art {
    height:230px
  }
  .card-back-art img {
    top:30px
  }
  .site-nav nav {
    gap:18px;
    font-size:12px
  }
  .details-grid {
    gap:26px
  }
  .section {
    padding-block:70px
  }
  .discovery {
    gap:38px
  }
  .mode {
    padding:25px 22px
  }
  .mode-tag {
    font-size:8px
  }
}
@media(max-width:720px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-nav {
    min-height:82px;
    gap:15px
  }
  .brand {
    font-size:26px
  }
  .brand img {
    width:35px;
    height:35px
  }
  .site-nav nav {
    display:none
  }
  .button-small {
    padding:7px 17px
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:38px 32px;
    gap:35px
  }
  .hero-copy {
    max-width:520px
  }
  .site-home h1 {
    font-size:clamp(49px,11vw,72px);
    letter-spacing:-2.7px
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1px
  }
  .intro {
    font-size:15px;
    max-width:460px
  }
  .hero-art {
    width:100%;
    max-width:480px;
    justify-self:center;
    height:auto;
    aspect-ratio:1.05
  }
  .table-caption {
    top:13%;
    font-size:8px
  }
  .table-call {
    top:19%;
    right:7%;
    font-size:21px
  }
  .table-call span {
    font-size:8px
  }
  .hero-coin.coin-one {
    width:76px;
    height:76px;
    bottom:38px;
    left:25px
  }
  .hero-coin.coin-two {
    width:62px;
    height:62px;
    bottom:29px;
    left:78px
  }
  .hero-coin.coin-three {
    width:52px;
    height:52px;
    top:30px;
    right:22px
  }
  .art-footnote {
    bottom:25px;
    font-size:8px
  }
  .facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    padding-block:22px
  }
  .facts p {
    font-size:10px
  }
  .facts strong {
    font-size:26px
  }
  .facts p:last-child {
    line-height:1.4
  }
  .section {
    padding-block:52px
  }
  .discovery {
    grid-template-columns:1fr;
    gap:24px
  }
  .discovery .eyebrow {
    margin-bottom:16px
  }
  .section-top {
    margin-bottom:28px
  }
  .section-number {
    display:none
  }
  .site-home h2 {
    font-size:34px
  }
  .modes-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .mode {
    padding:25px
  }
  .mode-icon {
    margin-bottom:18px;
    font-size:38px
  }
  .mode p:not(.eyebrow) {
    font-size:14px;
    margin-bottom:20px
  }
  .mode-tag {
    font-size:10px
  }
  .feature-showcase {
    grid-template-columns:1fr
  }
  .reward-feature {
    grid-template-columns:1fr .8fr;
    padding:28px;
    gap:15px
  }
  .reward-art {
    width:190px;
    height:275px
  }
  .reward-orbit {
    width:180px;
    height:180px
  }
  .reward-coin-front {
    width:120px;
    height:120px;
    top:55px;
    left:32%
  }
  .reward-coin-back {
    width:85px;
    height:85px;
    top:25px
  }
  .xp-pill {
    top:160px
  }
  .style-feature {
    padding:28px
  }
  .card-back-art {
    height:190px;
    margin-bottom:22px
  }
  .card-back-art img {
    top:0
  }
  .card-back-art span {
    right:15%
  }
  .details-grid {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:28px
  }
  .detail-symbol {
    float:left;
    margin-right:18px;
    line-height:1.3
  }
  .details-grid p {
    font-size:14px
  }
  .details-grid h3 {
    font-size:18px
  }
  .steps {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:30px
  }
  .step-number {
    font-size:26px;
    padding-bottom:10px;
    margin-bottom:15px
  }
  .steps p {
    font-size:14px
  }
  .final-cta {
    padding-block:48px
  }
  .final-cta h2 {
    font-size:40px
  }
  .site-footer {
    gap:14px;
    padding-block:25px
  }
  .site-footer p {
    margin:0
  }
  .site-footer nav {
    margin-left:0;
    width:100%;
    gap:16px
  }
  .account-info {
    padding-block:24px
  }
  .account-info p {
    font-size:12px
  }
}
@media(max-width:420px) {
  .reward-feature {
    grid-template-columns:1fr
  }
  .reward-art {
    height:250px;
    width:220px
  }
  .reward-feature h3 {
    font-size:31px
  }
  .hero .actions {
    gap:16px
  }
  .hero .button {
    padding:13px 19px;
    gap:20px
  }
  .hero .text-link {
    font-size:11px
  }
  .table-call {
    font-size:18px
  }
  .table-call span {
    font-size:7px
  }
  .facts p {
    font-size:9px
  }
  .site-home h2 {
    font-size:31px
  }
  .card-back-art span {
    right:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .button {
    transition:none
  }
  .button:hover {
    transform:none
  }
}
@media(max-width:360px) {
  .site-home h1 {
    font-size:44px;
    letter-spacing:-2.5px
  }
  .hero .actions {
    gap:12px
  }
  .hero .text-link {
    font-size:10px
  }
  .hero .button {
    padding:12px 15px;
    gap:15px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.6px
  }
  .table-caption {
    font-size:7px;
    letter-spacing:1.3px
  }
  .art-footnote {
    font-size:7px;
    letter-spacing:1.3px
  }
  .facts p {
    font-size:8px
  }
  .facts strong {
    font-size:24px
  }
}
/* Shared club palette: felt, cream and gold across the public site and app. */
.site-home { --navy: #101f1c; --navy-light: #294338; --muted: #40524b; }
.site-nav .brand, .site-nav nav, .site-footer, .facts strong { color: var(--navy); }
.button { background: var(--navy); }
.button:hover { background: var(--navy-light); }
.mode-ranked, .start-section { background: var(--navy); }
.hero-art { background: radial-gradient(ellipse at 45% 40%, #32654e, #193f34 58%, #101f1c); }
.text-link { color: var(--navy); }
.site-home a:focus-visible { outline-color: #b27c26; }

.faq-section {
  background:#ecefe7
}
.faq-list {
  max-width:900px
}
.faq-list details {
  border-bottom:1px solid #193e3430
}
.faq-list details:first-child {
  border-top:1px solid #193e3430
}
.faq-list summary {
  padding:22px 8px;
  font-size:17px;
  font-weight:650;
  cursor:pointer
}
.faq-list summary::marker {
  color:#8a632d
}
.faq-list summary:hover {
  color:#805c29
}
.faq-list summary:focus-visible {
  outline:3px solid #b27c26;
  outline-offset:3px;
  border-radius:3px
}
.faq-list details p {
  max-width:780px;
  margin:0;
  padding:0 8px 24px;
  color:var(--muted);
  font-size:15px;
  line-height:1.85
}
.faq-contact {
  margin:26px 0 0;
  color:var(--muted);
  font-size:14px
}

/* Public resource hub and article reading pages. */
.site-nav a[aria-current="page"] { text-decoration:underline; text-decoration-color:#b3883e; }
.resource-hero { padding-block:34px 65px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); padding-block:28px; }
.breadcrumbs a { text-decoration:none; }
.resource-label { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; padding:7px 14px; background:#e9ecdf; border:1px solid #193e341a; border-radius:30px; margin:16px 0 24px; }
.resources-page h1 { font-size:clamp(40px,5vw,68px); letter-spacing:-2.5px; line-height:1.08; max-width:970px; }
.resource-lead { max-width:760px; font-size:18px; line-height:1.8; color:var(--muted); margin:0 0 28px; }
.resource-jumps { display:flex; flex-wrap:wrap; gap:14px 30px; font-size:13px; font-weight:650; }
.resource-jumps a { text-decoration:none; border-bottom:1px solid #b3883e; padding-block:8px; }
.resource-jumps span { margin-left:12px; }
.resource-library { padding-bottom:56px; scroll-margin-top:30px; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.resource-card { position:relative; min-width:0; background:#fffdf7; border:1px solid #193e3426; border-radius:10px; overflow:hidden; transition:border-color .2s; }
.resource-card:hover { border-color:#b3883e; }
.resource-card-copy { display:flex; flex-direction:column; height:100%; padding:32px; }
.resource-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:#6b674b; margin:0 0 22px; }
.resource-meta span:first-child { color:#805c29; font-weight:750; }
.resource-card h3 { margin:0 0 18px; font:400 29px/1.2 Georgia,"Times New Roman",serif; letter-spacing:-.5px; }
.resource-card h3 a { text-decoration:none; }
.resource-card h3 a::after { content:""; position:absolute; inset:0; }
.resource-card-copy > p:not(.resource-meta) { color:var(--muted); font-size:14px; margin:0 0 24px; }
.resource-card .text-link { align-self:flex-start; margin-top:auto; font-size:13px; position:relative; z-index:1; }
.resource-featured { grid-column:1/-1; display:grid; grid-template-columns:.8fr 1.2fr; }
.resource-featured h3 { font-size:38px; max-width:550px; }
.resource-featured .resource-card-copy { padding:42px; }
.resource-card-art { position:relative; overflow:hidden; background:radial-gradient(ellipse at 45% 40%,#32654e,#193f34 58%,#101f1c); min-height:310px; }
.resource-card-art span { position:absolute; top:27px; left:28px; color:#e8c278; font-size:10px; letter-spacing:2px; }
.resource-card-art img { position:absolute; width:145px; height:auto; left:calc(50% - 120px); top:75px; transform:rotate(-17deg); filter:drop-shadow(0 10px 15px #0005); border-radius:8px; }
.resource-card-art img:last-child { left:calc(50% - 20px); top:80px; transform:rotate(14deg); }
.tutorial-banner { display:flex; align-items:center; gap:26px; padding:32px; background:#e9ecdf; border:1px solid #193e3426; border-radius:10px; margin-bottom:72px; }
.tutorial-symbol { font-size:56px; line-height:1; color:#8a632d; }
.tutorial-banner .eyebrow { margin-bottom:8px; font-size:9px; }
.tutorial-banner h2 { font-size:29px; letter-spacing:-.5px; }
.tutorial-banner p:last-child { margin:10px 0 0; font-size:14px; color:var(--muted); }
.tutorial-banner .button { margin-left:auto; flex-shrink:0; }
.home-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.home-resource-grid .resource-card h3 { font-size:26px; }
.home-resource-grid .resource-card-copy { padding:26px; }
.home-resource-grid .resource-meta { display:block; }
.home-resource-grid .resource-meta span { display:block; margin-bottom:4px; }
.home-faq-link { margin:26px 0 0; color:var(--muted); font-size:14px; }
.article-header { padding-block:0 45px; border-bottom:1px solid #193e3426; }
.article-header .resource-label { margin-top:8px; }
.article-header h1 { max-width:950px; font-size:clamp(38px,4.8vw,64px); }
.article-meta { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,740px); gap:65px; align-items:start; padding-block:56px 72px; }
.article-toc { border-left:2px solid #b3883e; padding-left:22px; }
.article-toc .eyebrow { margin-bottom:20px; }
.article-toc nav { display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.article-toc nav a { font-size:13px; color:var(--muted); text-decoration:none; line-height:1.65; }
.article-toc nav a:hover { text-decoration:underline; }
.article-toc .text-link { font-size:12px; }
.article-body section { margin-bottom:40px; scroll-margin-top:24px; }
.article-body h2 { font-size:32px; letter-spacing:-.6px; margin-bottom:20px; }
.article-body p,.article-body li { color:var(--muted); font-size:16px; line-height:1.95; }
.article-body strong { color:var(--ink); }
.article-body ul { padding-left:22px; }
.article-body li + li { margin-top:12px; }
.article-next { padding:32px; background:#e9ecdf; border-radius:10px; }
.article-next .eyebrow { margin-bottom:16px; }
.article-next p { font-size:14px; }
.related-guides { border-top:1px solid #193e3426; padding-block:46px 65px; }
.related-guides .eyebrow { margin-bottom:12px; }
.related-guides ul { list-style:none; padding:0; margin:28px 0 0; }
.related-guides li { padding-block:15px; border-bottom:1px solid #193e3426; }
.related-guides a { text-decoration:none; font-size:15px; }
@media(max-width:1000px) {
  .resource-featured .resource-card-copy { padding:28px; }
  .resource-featured h3 { font-size:32px; }
  .home-resource-grid { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:200px minmax(0,1fr); gap:32px; }
  .tutorial-symbol { display:none; }
}
@media(max-width:720px) {
  .resources-page .site-nav { flex-wrap:wrap; padding-block:18px; gap:20px; }
  .resources-page .site-nav nav { display:flex; order:3; width:100%; gap:20px; font-size:11px; }
  .resources-page .site-nav > .button { margin-left:auto; }
  .resource-hero { padding-block:8px 42px; }
  .breadcrumbs { font-size:11px; padding-block:24px; gap:10px; }
  .resources-page h1 { font-size:44px; letter-spacing:-1.8px; }
  .resource-label { font-size:9px; margin-block:8px 22px; }
  .resource-lead { font-size:15px; }
  .resource-grid,.resource-featured { grid-template-columns:1fr; }
  .resource-card-art { min-height:260px; }
  .resource-card-art img { top:60px; width:130px; }
  .resource-card-art img:last-child { top:65px; }
  .resource-card-copy,.resource-featured .resource-card-copy { padding:24px; }
  .resource-card h3,.resource-featured h3 { font-size:29px; }
  .resource-meta { font-size:9px; }
  .tutorial-banner { flex-direction:column; align-items:flex-start; padding:24px; margin-bottom:48px; }
  .tutorial-banner h2 { font-size:27px; }
  .tutorial-banner .button { margin-left:0; font-size:13px; }
  .resource-library { padding-bottom:32px; }
  .article-header { padding-bottom:24px; }
  .article-header h1 { font-size:39px; }
  .article-meta { font-size:10px; }
  .article-layout { grid-template-columns:1fr; gap:40px; padding-block:32px 48px; }
  .article-body h2 { font-size:29px; }
  .article-body p,.article-body li { font-size:15px; }
  .article-next { padding:24px; }
  .faq-list summary { padding-block:20px; font-size:15px; }
  .faq-list details p { font-size:14px; }
  .home-resource-grid { gap:18px; }
}
@media(prefers-reduced-motion:reduce) { .resource-card { transition:none; } }

html { scroll-behavior:smooth; }
section[id], main[id] { scroll-margin-top:24px; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* Keep the resource destination prominent beside the editorial introduction. */
#ressources .section-top { flex-wrap:wrap; }
.resources-button { flex-shrink:0; min-height:50px; }
.site-home p, .site-home h1, .site-home h2, .site-home h3 {
  overflow-wrap:break-word;
}
/* Short desktop windows need less decoration around the text. */
@media(min-width:1001px) and (max-height:900px) {
  #fonctionnalites .section-top { margin-bottom:24px; }
  #fonctionnalites .reward-feature { padding:24px; }
  #fonctionnalites .style-feature { padding:24px; }
  #fonctionnalites .card-back-art { height:145px; margin-bottom:12px; }
  #fonctionnalites .card-back-art img { height:125px; }
  #fonctionnalites .reward-feature h3 { margin-bottom:14px; }
  #fonctionnalites .reward-feature .eyebrow { margin-bottom:14px; }
  #fonctionnalites .details-grid { margin-top:24px; gap:28px; }
  #fonctionnalites .details-grid article { padding-top:14px; }
  #fonctionnalites .detail-symbol { margin-bottom:8px; }
}
@media(max-width:720px) {
  #ressources .section-top { align-items:flex-start; gap:22px; }
  .resources-button { width:100%; justify-content:space-between; }
}
@media(min-width:1001px) and (max-height:760px) {
  #fonctionnalites .card-back-art { height:125px; }
  #fonctionnalites .card-back-art img { height:105px; }
  #fonctionnalites .reward-art { height:270px; }
}