/* ==========================================================
   Ecom 21 Days · Subscribe Page
   Version: V55 Light
   Includes landing, learning, account, and policy pages.
   ========================================================== */

:root{
  --bg:#f5ede4;
  --paper:#fffaf3;
  --white:#ffffff;
  --text:#1b1b1b;
  --muted:#666666;
  --green:#145c38;
  --green-dark:#0e472b;
  --line:#d9cbbb;
  --max:820px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

button{cursor:pointer;}

img{display:block;}

.page-shell{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

.section{margin-top:18px;}

.content-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:16px;
}

.full-image{
  width:100%;
  height:auto;
}

/* Header */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

.header-inner{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  font-size:18px;
  font-weight:700;
}

.account-btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
}

/* Banner */
.banner-section{
  background:transparent;
}

/* CTA */
.primary-btn{
  width:100%;
  border:0;
  background:var(--green);
  color:#ffffff;
  padding:15px 16px;
  font-size:16px;
  font-weight:700;
}

.primary-btn:hover{
  background:var(--green-dark);
}

.helper-text{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

.subscribe-cta{
  margin-top:16px;
  text-align:center;
}

/* Text */
.section-label{
  margin-bottom:5px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
}

h1,h2,h3,p{margin:0;}

h1,h2{
  margin-bottom:9px;
  font-size:23px;
  line-height:1.15;
}

.section-desc{
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

/* Profit Table */
.table-wrap{
  overflow-x:auto;
  background:var(--white);
}

.profit-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  font-size:13px;
  text-align:center;
}

.profit-table th,
.profit-table td{
  border:1px solid var(--line);
  padding:11px 5px;
  white-space:nowrap;
}

.profit-table th{
  background:#eee5dc;
  font-size:12px;
  font-weight:700;
}

.profit-table td{
  font-weight:700;
}

.profit-table td:last-child{
  color:var(--green);
}

.legal-note{
  margin-top:11px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* Images */
.image-frame{
  border:1px solid var(--line);
  background:var(--white);
}

/* Order examples carousel */
.order-section{
  overflow:hidden;
}

.order-carousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 12px;
  margin-left:-2px;
  margin-right:-2px;
}

.order-carousel::-webkit-scrollbar{
  height:0;
}

.order-card{
  flex:0 0 42%;
  min-width:42%;
  background:#ffffff;
  border:1px solid var(--line);
  overflow:hidden;
}

.order-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#eee5dc;
}

.order-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.order-badge{
  position:absolute;
  left:7px;
  bottom:7px;
  max-width:calc(100% - 14px);
  padding:6px 7px;
  background:rgba(20,92,56,.92);
  color:#ffffff;
  line-height:1.1;
}

.order-badge span{
  display:block;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.order-badge strong{
  display:block;
  margin-top:2px;
  font-size:14px;
  font-weight:800;
}

.order-meta{
  padding:8px 7px 9px;
}

.order-meta strong{
  display:block;
  font-size:12px;
  line-height:1.15;
  color:var(--text);
}

.order-meta span{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
}

.final-cta{
  margin-top:16px;
}

/* Footer */
.site-footer{
  margin-top:20px;
  margin-bottom:18px;
  color:var(--muted);
  text-align:left;
  font-size:12px;
  line-height:1.55;
}

.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.footer-brand{
  color:var(--text);
  font-size:17px;
  line-height:1.15;
  font-weight:800;
}

.footer-subtitle{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.footer-email{
  flex:0 0 auto;
  display:inline-block;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  text-align:right;
}

.footer-divider{
  height:1px;
  margin:14px 0 12px;
  background:var(--line);
}


.footer-company{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(247,248,244,.72);
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.footer-company strong{
  color:var(--text);
  font-size:12px;
}

.footer-links{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px 14px;
  color:var(--text);
  font-weight:700;
}

.footer-note{
  margin-top:12px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.copyright{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
}

@media (max-width:430px){
  .footer-top{
    display:block;
  }

  .footer-email{
    margin-top:8px;
    text-align:left;
  }
}

/* Modals */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  padding:18px;
  background:rgba(0,0,0,.42);
  align-items:center;
  justify-content:center;
}

.modal-backdrop.is-open{
  display:flex;
}

.modal-box{
  width:100%;
  max-width:380px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:14px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.modal-head h3{
  font-size:18px;
  font-weight:700;
}

.close-btn{
  width:30px;
  height:30px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:20px;
  line-height:1;
}

.modal-desc{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

.lead-form{
  margin-top:10px;
}

.lead-form label{
  display:block;
  margin:10px 0 5px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.lead-form input{
  width:100%;
  border:1px solid var(--line);
  background:var(--white);
  padding:11px 9px;
  font-size:15px;
}

.lead-form .primary-btn{
  margin-top:12px;
}

.form-message{
  min-height:18px;
  margin-top:8px;
  color:var(--green);
  font-size:13px;
  line-height:1.4;
}

/* Desktop: only slightly wider */
@media (min-width:700px){
  .page-shell{
    padding-left:20px;
    padding-right:20px;
  }

  .section{
    margin-top:20px;
  }

  .content-card{
    padding:20px;
  }

  h1,h2{
    font-size:26px;
  }

  .section-desc{
    font-size:15px;
  }

  .subscribe-cta .primary-btn{
    max-width:360px;
  }

  .profit-table{
    font-size:14px;
  }
}


/* V15 mobile spacing refinement */
.banner-section{
  margin-top:16px;
}

.content-card + .content-card{
  margin-top:20px;
}

.image-frame{
  margin-top:2px;
}

@media (max-width:699px){
  .site-header{
    margin-bottom:2px;
  }

  .banner-section{
    margin-top:16px;
  }

  .content-card{
    padding:16px;
  }

  .profit-table{
    font-size:13px;
  }

  .subscribe-cta{
    margin-top:18px;
  }

  .site-footer{
    margin-bottom:14px;
  }
}


/* V58 · Compact member first orders on learning page */
.learning-order-section{
  overflow:hidden;
}

.learning-order-section .order-carousel{
  margin-top:12px;
  margin-bottom:-2px;
}


/* V15 desktop order carousel */
@media (min-width:700px){
  .order-carousel{
    gap:14px;
  }

  .order-card{
    flex-basis:30%;
    min-width:30%;
  }

  .order-meta strong{
    font-size:13px;
  }

  .order-meta span{
    font-size:12px;
  }

  .order-badge span{
    font-size:10px;
  }

  .order-badge strong{
    font-size:16px;
  }

  .site-footer{
    margin-bottom:20px;
  }
}


/* V15 desktop drag carousel */
.order-carousel{
  cursor:grab;
  user-select:none;
}

.order-carousel.is-dragging{
  cursor:grabbing;
}

.order-carousel img{
  pointer-events:none;
  user-select:none;
}

.carousel-hint{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  text-align:center;
}

@media (min-width:700px){
  .carousel-hint{
    font-size:12px;
  }
}


/* V15 auto slide carousel */
.order-carousel{
  cursor:grab;
  user-select:none;
  scroll-behavior:auto;
}

.order-carousel.is-dragging{
  cursor:grabbing;
}

.order-carousel img{
  pointer-events:none;
  user-select:none;
}


/* V15 stronger banner */
.banner-section{
  margin-top:14px;
  margin-left:-16px;
  margin-right:-16px;
  overflow:hidden;
}

.banner-section .full-image{
  width:100%;
}

@media (min-width:700px){
  .banner-section{
    margin-left:0;
    margin-right:0;
  }

  .banner-section .full-image{
    width:100%;
  }
}

/* ==========================================================
   V20 · Learning / Account / Policy Pages
   Keep V15 plain mobile look.
   ========================================================== */
.header-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.header-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:7px 10px;
  font-size:13px;
  font-weight:700;
}

.header-nav a[aria-current="page"]{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.page-hero-card h1{
  margin-bottom:8px;
}

.access-strip,
.account-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:11px 12px;
}

.access-strip span,
.account-status span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.access-strip strong,
.account-status strong{
  color:var(--green);
  font-size:13px;
  text-align:right;
}

.video-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  border:1px solid var(--line);
  background:#182319;
  color:#fff;
  text-align:center;
}

.video-placeholder strong{
  display:block;
  font-size:18px;
  line-height:1.2;
}

.video-placeholder span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.lesson-list{
  display:grid;
  gap:10px;
}

.lesson-card{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:12px;
}

.lesson-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#eee5dc;
  color:var(--green);
  font-size:13px;
  font-weight:800;
}

.lesson-card h3{
  margin:0 0 5px;
  font-size:16px;
  line-height:1.2;
}

.lesson-card p{
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}

.tool-grid{
  display:grid;
  gap:10px;
}

.tool-card{
  display:block;
  border:1px solid var(--line);
  background:#ffffff;
  padding:13px;
}

.tool-card strong{
  display:block;
  color:var(--text);
  font-size:15px;
  line-height:1.2;
}

.tool-card span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.link-btn{
  display:block;
  text-align:center;
}

.button-stack{
  display:grid;
  gap:10px;
}

.secondary-btn{
  width:100%;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
  padding:14px 16px;
  font-size:15px;
  font-weight:700;
}

.access-list{
  display:grid;
  gap:10px;
}

.access-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:13px;
}

.access-card strong{
  display:block;
  color:var(--text);
  font-size:15px;
  line-height:1.2;
}

.access-card span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.access-card > a,
.access-card > span:last-child{
  flex:0 0 auto;
  color:var(--green);
  font-size:13px;
  font-weight:800;
}

.access-card.locked{
  opacity:.78;
}

.policy-page .content-card h1{
  margin-bottom:6px;
}

.policy-block{
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:14px;
}

.policy-block h2{
  margin-bottom:7px;
  font-size:17px;
  line-height:1.2;
}

.policy-block p{
  color:var(--muted);
  font-size:14px;
  line-height:1.52;
}

.policy-block a{
  color:var(--green);
  font-weight:700;
}

@media (min-width:700px){
  .video-placeholder{
    min-height:260px;
  }

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

  .lesson-card{
    grid-template-columns:48px 1fr;
  }

  .lesson-num{
    width:48px;
    height:48px;
  }
}

/* ==========================================================
   V32 · Header menu behavior
   ========================================================== */
.subscribe-header-inner{
  justify-content:flex-start;
}

.header-menu{
  position:relative;
  flex:0 0 auto;
}

.menu-btn{
  min-width:72px;
  border:1px solid var(--line);
  background:#fffaf3;
  color:var(--text);
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
}

.menu-btn::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:8px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

.menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:50;
  display:none;
  width:190px;
  border:1px solid var(--line);
  background:#fffaf3;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  padding:6px;
}

.menu-panel.is-open{
  display:grid;
  gap:4px;
}

.menu-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  border:1px solid transparent;
  padding:9px 10px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.menu-panel a:hover,
.menu-panel a[aria-current="page"]{
  border-color:var(--line);
  background:#ffffff;
  color:var(--green);
}


/* ==========================================================
   V52 · Learning page tabs
   ========================================================== */
.learning-tabs-card h2{
  margin-bottom:8px;
}

.learning-tab-nav{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin:14px 0 14px;
}

.learning-tab-btn{
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
  padding:12px 8px;
  font-size:14px;
  font-weight:800;
}

.learning-tab-btn.is-active{
  border-color:var(--green);
  background:var(--green);
  color:#ffffff;
}

.learning-tab-panel{
  margin-top:4px;
}

.learning-tab-panel[hidden]{
  display:none;
}

.support-box{
  border:1px solid var(--line);
  background:#ffffff;
  padding:14px;
}

.support-box h3,
.support-checklist h3{
  margin:0 0 7px;
  font-size:17px;
  line-height:1.2;
}

.support-box p{
  margin-bottom:12px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.support-checklist{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.support-item{
  border:1px solid var(--line);
  background:#ffffff;
  padding:12px;
}

.support-item strong{
  display:block;
  font-size:15px;
  line-height:1.2;
}

.support-item span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

/* ==========================================================
   V32 · Learning page unlock notice and locked links
   ========================================================== */
.unlock-summary{
  margin-top:14px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:13px;
}

.unlock-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.unlock-price-row span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.unlock-price-row strong{
  color:var(--green);
  font-size:28px;
  line-height:1;
  font-weight:900;
}

.unlock-summary p{
  margin:0 0 12px;
  color:var(--text);
  font-size:14px;
  line-height:1.42;
}

.unlock-note{
  margin-top:9px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  text-align:center;
}

.locked-link-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.locked-resource{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  background:#fffaf3;
  padding:10px 11px;
}

.locked-resource span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.25;
}

.locked-resource span::before{
  content:"🔒";
  display:inline-block;
  font-size:13px;
  line-height:1;
}

.locked-resource strong{
  flex:0 0 auto;
  color:var(--green);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.locked-resource-full{
  margin-top:10px;
}

.locked-support-box{
  background:#ffffff;
}

.unlock-modal-list{
  display:grid;
  gap:8px;
  margin:12px 0 12px;
}

.unlock-modal-list div{
  border:1px solid var(--line);
  background:#ffffff;
  padding:10px 11px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
}

.unlock-modal-list div::before{
  content:"✓";
  display:inline-block;
  margin-right:7px;
  color:var(--green);
  font-weight:900;
}

/* V32 · simplified account center */
.account-action-stack{
  margin-top:12px;
}


/* V32 · account center: three clear blocks */
.account-hero-card{
  margin-bottom:2px;
}

.account-panel h2{
  margin-bottom:7px;
}

.account-panel .section-desc{
  margin-bottom:12px;
}

.account-panel .secondary-btn{
  margin-top:2px;
}

.danger-btn{
  border-color:#d8b8a8;
  background:#fff7f2;
  color:#7c2d12;
}

.danger-btn:hover{
  background:#fff0e8;
}

/* ==========================================================
   V32 · Account billing list
   ========================================================== */
.billing-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.billing-row{
  display:grid;
  grid-template-columns:1.7fr .65fr .8fr 1.2fr;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:11px 12px;
}

.billing-head{
  background:#eee5dc;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.billing-order strong{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.2;
}

.billing-order span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

.billing-amount{
  color:var(--text);
  font-size:14px;
  font-weight:900;
}

.billing-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  border:1px solid var(--line);
  padding:5px 8px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.billing-status.pending{
  border-color:#d9cbbb;
  background:#fffaf3;
  color:var(--green);
}

.billing-receipt{
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

@media (max-width:520px){
  .billing-head{
    display:none;
  }

  .billing-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .billing-row > div:not(.billing-order)::before{
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.25px;
  }

  .billing-amount::before{content:"Amount";}
  .billing-row > div:nth-child(3)::before{content:"Status";}
  .billing-receipt::before{content:"Receipt";}
}

/* ==========================================================
   V52 · Operating flow link buttons
   ========================================================== */

.lesson-goal{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.lesson-goal strong{
  color:var(--text);
  font-weight:900;
}

.flow-link-buttons{
  display:grid;
  gap:8px;
  margin-top:11px;
}

.flow-link-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  border:1px solid var(--green);
  background:#fffaf3;
  color:var(--text);
  padding:11px 12px;
}

.flow-link-btn strong{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}

.flow-link-btn strong::before{
  content:"↗";
  display:inline-block;
  font-size:13px;
  line-height:1;
}

.flow-link-btn.is-locked strong::before{
  content:"🔒";
}

.flow-link-btn span{
  flex:0 0 auto;
  background:var(--green);
  color:#ffffff;
  padding:5px 8px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.flow-link-btn:hover{
  background:#ffffff;
}

/* ==========================================================
   V33 · PHP backend integration helpers
   ========================================================== */
.inline-button-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.field-error{
  display:none;
  margin-top:-4px;
  color:#9f1d1d;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

.field-error.is-visible{
  display:block;
}

.lead-form input.is-invalid{
  border-color:#bb3d2f;
  background:#fff8f7;
}

.flash-card{
  padding:12px 14px;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
}

.flash-card.is-error{
  border-color:#e2b4aa;
  background:#fff6f4;
  color:#9f1d1d;
}

.flash-card.is-success{
  border-color:#c8ddc5;
  background:#f5fff3;
  color:#145c38;
}

.access-active-box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin-top:12px;
  border:1px solid #c8ddc5;
  background:#f5fff3;
  color:#145c38;
  font-weight:900;
}

.billing-status.paid{
  border-color:#c8ddc5;
  background:#f5fff3;
  color:#145c38;
}

.billing-status.failed,
.billing-status.cancelled,
.billing-status.refunded{
  border-color:#e2b4aa;
  background:#fff6f4;
  color:#9f1d1d;
}

.e21-shell-body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
}

.e21-shell-page{
  width:min(100%, 520px);
  margin:0 auto;
  padding:16px;
}

.e21-shell-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.e21-shell-logo,
.e21-shell-nav-link{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}

.e21-shell-logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-right:8px;
  background:var(--green);
  color:#fff;
}

.e21-shell-card{
  border:1px solid var(--line);
  background:#fff;
  padding:18px;
}

.e21-shell-badge{
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  color:var(--green);
  text-transform:uppercase;
}

.e21-shell-title{
  margin:10px 0;
  font-size:30px;
  line-height:1.05;
}

.e21-shell-title span{ color:var(--green); }

.e21-shell-copy,
.e21-shell-small{
  color:var(--muted);
  line-height:1.5;
}

.e21-shell-actions{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.e21-shell-button,
.e21-shell-button-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 14px;
  text-decoration:none;
  font-weight:900;
}

.e21-shell-button{
  background:var(--green);
  color:#fff;
}

.e21-shell-button-secondary{
  border:1px solid var(--line);
  color:var(--text);
}


.empty-state {
  padding: 18px 0 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ==========================================================
   V53 · Learning page full optimization
   ========================================================== */
.unlock-hero-card,
.starter-welcome-card,
.learning-tabs-card{
  position:relative;
  overflow:hidden;
}

.unlock-hero-card::before,
.starter-welcome-card::before,
.learning-tabs-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--green);
}

.unlock-hero-card h1,
.starter-welcome-card h1{
  margin-bottom:8px;
  font-size:25px;
  line-height:1.08;
}

.unlock-value-grid{
  display:grid;
  gap:9px;
  margin:12px 0 14px;
}

.unlock-value-grid div{
  border:1px solid var(--line);
  background:#fffaf3;
  padding:11px 12px;
}

.unlock-value-grid strong{
  display:block;
  margin-bottom:4px;
  color:var(--text);
  font-size:14px;
  line-height:1.2;
  font-weight:900;
}

.unlock-value-grid span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}

.start-note-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:14px;
}

.start-note-row div{
  display:grid;
  align-content:center;
  gap:5px;
  min-height:74px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:10px 8px;
  text-align:center;
}

.start-note-row strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin:0 auto;
  background:var(--green);
  color:#ffffff;
  font-size:13px;
  line-height:1;
  font-weight:900;
}

.start-note-row span{
  color:var(--text);
  font-size:12px;
  line-height:1.25;
  font-weight:800;
}

.flow-intro-box{
  display:grid;
  gap:5px;
  margin-bottom:12px;
  border:1px solid var(--line);
  background:#ffffff;
  padding:12px;
}

.flow-intro-box strong{
  color:var(--text);
  font-size:14px;
  line-height:1.2;
  font-weight:900;
}

.flow-intro-box span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.lesson-list{
  gap:12px;
}

.lesson-card{
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:13px;
  background:#ffffff;
  border-color:#d4c2af;
}

.lesson-card:first-child{
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(20,92,56,.08) inset;
}

.lesson-num{
  width:46px;
  height:46px;
  background:var(--green);
  color:#ffffff;
  font-size:14px;
  font-weight:900;
}

.lesson-body{
  min-width:0;
}

.lesson-kicker{
  margin-bottom:5px;
  color:var(--green);
  font-size:11px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.lesson-card h3{
  margin-bottom:6px;
  font-size:17px;
  line-height:1.18;
}

.lesson-card p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}

.lesson-outcome{
  margin-top:8px;
  border-left:3px solid var(--green);
  background:#fffaf3;
  padding:8px 10px;
}

.lesson-outcome strong{
  color:var(--text);
  font-weight:900;
}

.flow-link-buttons{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

.flow-link-btn{
  min-height:46px;
  justify-content:center;
  gap:6px;
  border-color:var(--green);
  background:#ffffff;
  padding:10px 8px;
  text-align:center;
}

.flow-link-btn strong{
  justify-content:center;
  gap:5px;
  font-size:12.5px;
  font-weight:900;
}

.flow-link-btn span{
  display:none;
}

.flow-link-btn.is-unlocked:hover{
  background:#fffaf3;
}

.flow-link-btn.is-locked{
  border-color:#c9b8a5;
  background:#f4eadf;
  color:#756755;
}

.flow-link-btn.is-locked strong{
  color:#756755;
}

.support-box,
.support-item{
  border-color:#d4c2af;
}

.support-box .flow-link-btn{
  max-width:220px;
}

@media (min-width:560px){
  .unlock-value-grid{
    grid-template-columns:repeat(3, 1fr);
  }

  .lesson-card{
    grid-template-columns:54px 1fr;
    padding:15px;
  }

  .lesson-num{
    width:54px;
    height:54px;
    font-size:15px;
  }

  .flow-link-buttons{
    max-width:360px;
  }
}