/* August content/layout revisions from the approved landing prototype. */
.why-compare .compare-heading{align-items:start}.why-compare .why-title{max-width:650px}.why-compare .compare-board{overflow:hidden}.why-compare .compare-row{grid-template-columns:42px minmax(180px,1fr) 44px minmax(250px,1.35fr)}
.inside-heading{align-items:start}.inside-options{grid-template-columns:1fr 1fr}.inside-card.main{grid-row:span 2}.inside-mock{margin-top:22px}.lesson-section-title{display:flex;align-items:center;gap:12px;margin:20px 0 10px;color:rgba(255,255,255,.82);font-size:10px}.lesson-section-title .line{height:1px;flex:1;background:rgba(255,255,255,.12)}.inside-card.main .lesson-item{grid-template-columns:24px 25px 1fr 16px;gap:8px}.inside-card.main .lesson-num{color:rgba(255,255,255,.38);font-size:10px}.inside-card.main .lesson-name{color:rgba(255,255,255,.78)}.inside-card.main .lesson-item.is-current{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.06)}.inside-card.main .lesson-item.is-current .lesson-check{border:1px solid rgba(255,255,255,.35);background:transparent}.tracker-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.tracker-insights span{display:grid;gap:2px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:13px;color:rgba(255,255,255,.52);font-size:9px}.tracker-insights strong{color:#fff;font-size:13px}.learning-layout{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}.learning-copy{position:sticky;top:118px;align-self:start}.learning-step{min-height:128px}.gift-block .club-copy{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:end}.gift-block .club-copy .actions{grid-column:2}.gift-block .club-copy h2{max-width:650px}.gift-board{grid-template-columns:1.1fr .65fr .85fr}.gift-card.hero{grid-row:span 2}.gift-card.wide{grid-column:2/4}.gift-card.bonus{min-height:180px}
@media(max-width:900px){.why-compare .compare-row{grid-template-columns:34px minmax(0,1fr) 32px minmax(0,1.2fr)}.inside-options,.learning-layout{grid-template-columns:1fr}.inside-card.main{grid-row:auto}.learning-copy{position:static}.gift-block .club-copy{grid-template-columns:1fr}.gift-block .club-copy .actions{grid-column:auto}.gift-board{grid-template-columns:1fr 1fr}.gift-card.hero{grid-row:auto}.gift-card.wide{grid-column:1/-1}}
@media(max-width:620px){.why-compare .compare-columns{display:none}.why-compare .compare-row{grid-template-columns:28px 1fr;gap:7px 10px;padding:18px 4px}.why-compare .compare-old{grid-column:2}.why-compare .compare-arrow{grid-column:1;grid-row:2}.why-compare .compare-new{grid-column:2}.tracker-insights{grid-template-columns:1fr}.gift-board{grid-template-columns:1fr}.gift-card.wide{grid-column:auto}.inside-heading h2{font-size:clamp(34px,11vw,52px)}}

/* Real course screens replace hero placeholders. */
.photo-collage.has-course-shots{display:block;min-height:610px;margin:-26px auto 0}
.has-course-shots .course-shot{position:absolute;z-index:2;overflow:hidden;margin:0;border:1px solid rgba(211,166,70,.34);border-radius:26px;background:#fff;box-shadow:0 28px 80px rgba(72,52,19,.18)}
.has-course-shots .course-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.has-course-shots .course-shot figcaption{display:grid;gap:3px;padding:15px 18px;background:rgba(255,255,255,.97)}
.has-course-shots .course-shot figcaption strong{font-size:15px}
.has-course-shots .course-shot figcaption span{color:rgba(23,20,15,.58);font-size:12px;line-height:1.45}
.has-course-shots .course-shot-dashboard{top:70px;left:3%;width:76%;transform:rotate(-1.2deg)}
.has-course-shots .course-shot-roadmap{right:1%;bottom:8px;width:54%;transform:rotate(1.7deg)}
.has-course-shots .course-shot-note{position:absolute;z-index:3;bottom:48px;left:1%;display:flex;flex-wrap:wrap;gap:7px;width:34%}
.has-course-shots .course-shot-note span{padding:8px 11px;border:1px solid rgba(242,154,22,.2);border-radius:999px;background:rgba(255,254,250,.94);box-shadow:0 8px 22px rgba(72,52,19,.08);color:rgba(23,20,15,.7);font-size:11px;font-weight:700}
.payment-logos{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;padding:26px 0;border-top:1px solid rgba(255,255,255,.1)}
.payment-logos span{color:rgba(255,255,255,.5);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.payment-logos img{display:block;width:100%;max-width:980px;height:auto;opacity:.88}

/* Final feature card spans full row instead of leaving an empty grid column. */
.inside-options>.inside-card:last-child{grid-column:1/-1;grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);grid-template-rows:auto auto auto 1fr;column-gap:34px;align-content:stretch}
.inside-options>.inside-card:last-child>small,.inside-options>.inside-card:last-child>h3,.inside-options>.inside-card:last-child>p,.inside-options>.inside-card:last-child>.inside-mini-grid{grid-column:1}
.inside-options>.inside-card:last-child>.file-library{grid-column:2;grid-row:1/5;min-height:100%;margin-top:0}
.inside-options>.inside-card:last-child>.inside-mini-grid{align-self:end}

/* Certificate and achievement columns finish on same baseline. */
#achievements .achievement-layout{align-items:stretch}
#achievements .certificate-card{height:100%;grid-template-rows:auto 1fr;align-content:stretch}
#achievements .certificate-copy{align-self:center}

/* CTA arrow must remain circular when button copy wraps or narrows. */
.arrow-button::after{flex:0 0 28px;aspect-ratio:1}

/* Spread gift illustration across hero card; keep it clear of copy below. */
.gift-card.hero{min-height:460px;padding-top:250px}
.gift-card.hero .gift-illustration{top:22px;right:auto;left:18px;width:min(300px,calc(100% - 36px))}

@media(max-width:980px){#achievements .certificate-card{height:auto;grid-template-rows:auto auto}#achievements .certificate-copy{align-self:auto}}
@media(max-width:900px){.photo-collage.has-course-shots{display:grid;grid-template-columns:1fr;gap:16px;min-height:0;margin-top:18px}.has-course-shots .course-shot{position:relative;inset:auto;width:100%;transform:none}.has-course-shots .course-shot-note{position:relative;inset:auto;width:100%;justify-content:center}.payment-logos{grid-template-columns:1fr;gap:14px}.payment-logos img{max-width:100%}.inside-options>.inside-card:last-child{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto}.inside-options>.inside-card:last-child>*{grid-column:auto;grid-row:auto}.inside-options>.inside-card:last-child>.file-library{min-height:270px;margin-top:26px}}
@media(max-width:620px){.has-course-shots .course-shot{border-radius:18px}.has-course-shots .course-shot figcaption{padding:13px 14px}.has-course-shots .course-shot-note{display:none}.payment-logos{padding:22px 0}.payment-logos img{width:112%;max-width:none;transform:translateX(-5.5%)}}
@media(max-width:620px){.gift-card.hero{min-height:410px;padding-top:210px}.gift-card.hero .gift-illustration{top:20px;left:14px;width:min(240px,calc(100% - 28px))}}

/* Implemented content fills complete rows; cookie control stays readable in dark footer. */
@media(min-width:981px){.gift-board{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(188px,auto)) minmax(190px,auto)}.gift-card.hero{grid-column:1/6;grid-row:1/3}.gift-card:nth-child(2){grid-column:6/9;grid-row:1}.gift-card:nth-child(3){grid-column:9/13;grid-row:1}.gift-card.wide{grid-column:6/13;grid-row:2}.gift-card.bonus{grid-row:3;min-height:190px}.gift-card.bonus:nth-child(5){grid-column:1/4}.gift-card.bonus:nth-child(6){grid-column:4/7}.gift-card.bonus:nth-child(7){grid-column:7/10}.gift-card.bonus:nth-child(8){grid-column:10/13}}
.final-section .bonus-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer .cookie-settings-button{width:max-content;max-width:100%;min-height:34px;padding:0;color:rgba(255,255,255,.72);font-size:13px;text-align:left;text-decoration-color:rgba(242,154,22,.65);opacity:1}
.site-footer .cookie-settings-button:hover,.site-footer .cookie-settings-button:focus-visible{color:#fff;text-decoration-color:#f29a16}
.cookie-consent-open{display:none}
@media(max-width:980px){.final-section .bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.final-section .bonus-grid{grid-template-columns:1fr}}

/* Keep feature cards compact: no card may stretch across unrelated grid rows. */
@media(min-width:901px){
  .inside-options{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .inside-card.main{grid-column:1;grid-row:1}
  .inside-options>.inside-card:nth-child(2){grid-column:1;grid-row:2}
  .inside-options>.inside-card:nth-child(3){grid-column:2;grid-row:1}
  .inside-options>.inside-card:last-child{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:auto;column-gap:0;align-content:start}
  .inside-options>.inside-card:last-child>*{grid-column:1;grid-row:auto}
  .inside-options>.inside-card:last-child>.file-library{grid-column:1;grid-row:auto;min-height:0;margin-top:26px}
}

/* Reviews heading is already inside a parent grid; do not nest another 1fr/320px split. */
#reviews .section-heading{display:block}
#reviews .section-heading p{max-width:620px;margin-top:22px}

/* Tablet hero uses horizontal art/copy composition, keeping all copy visible at once. */
@media(min-width:621px) and (max-width:980px){
  .gift-card.hero{min-height:340px;padding:62px 34px 34px 44%;align-content:center}
  .gift-card.hero .gift-illustration{top:54px;left:24px;width:36%;max-width:300px}
}

/* Final responsive geometry: balanced feature pairs, quiet gift art, static proof grid. */
@media(min-width:1081px){
  .inside-options{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .inside-options>.inside-card{height:100%}
  .inside-card.main{grid-column:1;grid-row:1}
  .inside-options>.inside-card:nth-child(2){grid-column:1;grid-row:2}
  .inside-options>.inside-card:nth-child(3){grid-column:2;grid-row:1}
  .inside-options>.inside-card:last-child{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:auto;column-gap:0;align-content:start}
  .inside-options>.inside-card:last-child>*{grid-column:1;grid-row:auto}
  .inside-options>.inside-card:last-child>.file-library{grid-column:1;grid-row:auto;min-height:0;margin-top:26px}
}
@media(max-width:1080px){
  .inside-options{grid-template-columns:1fr;align-items:start}
  .inside-card.main,.inside-options>.inside-card{grid-column:auto;grid-row:auto;height:auto}
  .inside-options>.inside-card:last-child{grid-template-columns:1fr;grid-template-rows:auto;column-gap:0}
  .inside-options>.inside-card:last-child>*{grid-column:auto;grid-row:auto}
  .inside-options>.inside-card:last-child>.file-library{grid-column:1;grid-row:auto;min-height:0;margin-top:26px}
}

.gift-card.hero{min-height:430px;padding-top:226px}
.gift-card.hero .gift-illustration{top:26px;left:50%;width:min(238px,calc(100% - 56px));transform:translateX(-50%);filter:drop-shadow(0 18px 24px rgba(0,0,0,.16))}
.cursor-glow{display:none!important}
.collage-spark{animation:none!important;filter:none!important;transform:none!important}

/* Dark feature cards share one border system; rows stay fully contained. */
.inside-card.main,
.inside-options>.inside-card:last-child{
  border-color:rgba(255,255,255,.12);
  background:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
    #191816;
  background-size:36px 36px;
  color:#fff;
}
.inside-card.main::before,
.inside-options>.inside-card:last-child::before{display:none}
.inside-options>.inside-card:last-child small{color:rgba(255,255,255,.85)}
.inside-options>.inside-card:last-child p{color:rgba(255,255,255,.64)}
.inside-card.main .inside-mock,
.inside-options>.inside-card:last-child .file-library{border:1px solid rgba(255,255,255,.12)}
.inside-card.main .lesson-list{padding:1px;overflow:visible}
.inside-card.main .lesson-item{width:100%;min-width:0;overflow:hidden;border-color:rgba(255,255,255,.14)}
.inside-options>.inside-card:last-child .file-library{
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    rgba(255,255,255,.045);
  background-size:34px 34px;
}

@media(min-width:621px) and (max-width:980px){
  .gift-card.hero{min-height:310px;padding:46px 30px 34px 41%;align-content:center}
  .gift-card.hero .gift-illustration{top:54px;left:28px;width:32%;max-width:230px;transform:none}
}
@media(max-width:620px){
  .gift-card.hero{min-height:390px;padding:196px 22px 24px}
  .gift-card.hero .gift-illustration{top:24px;left:50%;width:min(210px,calc(100% - 44px));transform:translateX(-50%)}
}

/* Payment modal copied from hero-variants.html; landing CTAs open it in place. */
#paymentModal{align-items:start;overflow-y:auto;padding:16px 24px;background:#f7f7f5;backdrop-filter:none}
#paymentModal .payment-panel{position:relative;display:grid;width:min(470px,calc(100% - 28px));max-height:none;margin:0;gap:8px;padding:8px 0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
#paymentModal .payment-panel>.modal-close{display:none}
#paymentModal .payment-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
#paymentModal .payment-brand{display:inline-flex;align-items:center;justify-self:end;gap:10px;color:var(--ink);font-size:13px;font-weight:850;text-transform:uppercase;white-space:normal}
#paymentModal .payment-brand img{width:26px;height:26px;border-radius:50%}
#paymentModal .back-link{display:inline-flex;align-items:center;justify-self:start;gap:10px;border:0;background:transparent;color:rgba(23,20,15,.54);font-size:16px;cursor:pointer}
#paymentModal .back-link::before{content:"";width:12px;height:12px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
#paymentModal .payment-content{display:grid;gap:8px}
#paymentModal .payment-content h2{margin:4px 0 0;font-size:clamp(29px,3vw,34px);line-height:1.02;font-weight:520;text-transform:lowercase}
#paymentModal .payment-subtitle{margin:-6px 0 4px;color:rgba(23,20,15,.58);font-size:13px;line-height:1.45}
#paymentModal .order-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;min-height:58px;padding:12px 14px;border:1px solid rgba(23,20,15,.1);border-radius:8px;background:#fff}
#paymentModal .order-card strong{display:block;margin-bottom:6px;font-size:16px;font-weight:650}
#paymentModal .order-card span,#paymentModal .payment-note{color:rgba(23,20,15,.56);font-size:13px;line-height:1.45}
#paymentModal .order-total{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
#paymentModal .order-total strong{margin:0;font-size:25px;line-height:1}
#paymentModal .order-total s{color:rgba(23,20,15,.34);font-size:17px}
#paymentModal .payment-discount{display:none}
#paymentModal .payment-form{display:grid;gap:8px}
#paymentModal .payment-field{display:grid;gap:5px}
#paymentModal .payment-field label{color:rgba(23,20,15,.58);font-size:13px}
#paymentModal .payment-field input,#paymentModal .social-field input{width:100%;height:42px;padding:0 14px;border:1px solid rgba(23,20,15,.12);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:15px;outline:none}
#paymentModal .payment-field input:focus,#paymentModal .social-field input:focus{border-color:rgba(242,154,22,.62);box-shadow:0 0 0 3px rgba(242,154,22,.1)}
#paymentModal .payment-checks{display:grid;gap:7px;padding-top:8px;border-top:1px solid rgba(23,20,15,.08)}
#paymentModal .payment-check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:rgba(23,20,15,.62);font-size:13px;line-height:1.42}
#paymentModal .payment-check input{appearance:none;width:21px;height:21px;margin:0;border:1px solid rgba(23,20,15,.2);border-radius:4px;background:#fff}
#paymentModal .payment-check input:checked{border-color:var(--orange);background:var(--orange) url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.3L5.4 10L13.5 1.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 12px no-repeat}
#paymentModal .payment-check a,#paymentModal .payment-note a{color:var(--ink);border-bottom:1px solid rgba(23,20,15,.25)}
#paymentModal .payment-content .arrow-button{width:100%;min-height:46px;margin-top:5px;padding-left:22px;justify-content:space-between;background:var(--ink);color:#fff;font-size:15px;box-shadow:0 16px 36px rgba(23,20,15,.15)}
#paymentModal .support-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;color:rgba(23,20,15,.52);font-size:13px}
#paymentModal .support-row button{border:0;border-bottom:1px solid rgba(23,20,15,.25);background:transparent;color:var(--ink);cursor:pointer}
#paymentModal .social-field{padding:2px 0}
#paymentModal .social-field summary{width:max-content;list-style:none;color:rgba(23,20,15,.58);font-size:13px;cursor:pointer;border-bottom:1px dashed rgba(23,20,15,.28)}
#paymentModal .social-field summary::-webkit-details-marker{display:none}
#paymentModal .social-field-body{padding-top:7px}
#paymentModal .contact-status:empty{display:none}
#paymentModal .contact-status{margin:0;color:#3f7a43;font-size:13px;font-weight:650}
#paymentModal .contact-status.is-error{color:#b44a32}

@media(max-width:620px){
  #paymentModal{padding:12px 16px}
  #paymentModal .payment-panel{width:100%;padding:6px 0}
  #paymentModal .payment-content{gap:13px}
  #paymentModal .payment-content h2{font-size:clamp(31px,9.4vw,40px)}
  #paymentModal .payment-subtitle{font-size:15px}
  #paymentModal .payment-top{display:flex;justify-content:space-between;align-items:center;padding-right:0}
  #paymentModal .payment-brand{justify-self:auto}
  #paymentModal .order-card{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch}
  #paymentModal .order-total{justify-self:end}
  #paymentModal .payment-field input{height:48px;font-size:16px}
  #paymentModal .social-field input{height:46px;font-size:15px}
}

/* Seller details and official Apple Pay mark. */
.seller-details{padding:28px 0;border-top:1px solid rgba(255,255,255,.1)}
.seller-details h2{margin:0 0 18px;font-size:18px;color:#fff}
.seller-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.seller-details p{margin:0 0 10px;color:rgba(255,255,255,.75);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.seller-details strong{color:#fff;font-weight:600}
.payment-brand-marks{display:flex;flex-wrap:wrap;align-items:center;gap:28px;min-width:0}
.payment-brand-marks>img:first-child{width:100%;max-width:980px;transform:none}
.payment-logos .apple-pay-mark{width:100px;max-width:100%;height:auto;opacity:1;transform:none;margin:16px 25px}
@media(max-width:620px){.seller-details-grid{grid-template-columns:1fr;gap:14px}.payment-brand-marks{gap:12px}}