/* Homepage experiment only. No shared styles or subpages are changed. */
/* Trial: a warmer tint of the yellow accent replaces beige; cream stays original. */
body.live-site{--sand:var(--accent-yellow)}
.homepage-linework{transform:translateY(-2cm)}
.live-site .offer-list{gap:16px}
.live-site .offer{
 display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;align-content:start;gap:8px 14px;
 border:0;padding:18px 22px;background:var(--blue);border-radius:var(--radius-panel)
}
.live-site .offer h3{grid-column:1/-1;min-height:0;margin:0;max-width:none}
.live-site .offer .offer-symbol{grid-row:1;grid-column:1;width:58px;height:auto;margin:0}
.live-site .offer .offer-arrow{
 grid-row:1;grid-column:2;width:40px;height:40px;margin:0;border:0;background:#fff;color:var(--ink)
}
.live-site .offer:hover .offer-arrow,.live-site .offer:focus-visible .offer-arrow{background:var(--ink);color:var(--cream)}
.live-site .offer:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.live-site .offer-section{padding-bottom:34px}
.lesson-fit+.home-testimonials{padding-bottom:12px}
.lesson-fit-compact{padding:clamp(20px,3vw,32px)}
.live-site .lesson-fit-compact h2{font-size:var(--type-section);line-height:1.2;letter-spacing:-.025em}
.lesson-fit-compact .lesson-fit-intro{margin-bottom:16px}
.lesson-fit-disclosure summary{width:fit-content;max-width:100%;min-height:48px;gap:12px;padding:10px 16px;cursor:pointer}
.lesson-fit-disclosure summary:hover{background:var(--accent-yellow);border-color:var(--accent-yellow);color:var(--ink)}
.lesson-fit-disclosure summary::-webkit-details-marker{display:none}
.lesson-fit-disclosure summary svg{width:18px;flex-shrink:0;transform:rotate(90deg)}
.lesson-fit-disclosure summary:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.lesson-fit-disclosure:not([open]) .lesson-fit-close,.lesson-fit-disclosure[open] .lesson-fit-open{display:none}
.lesson-fit-disclosure[open] summary svg{transform:rotate(-90deg)}
.lesson-fit-disclosure .lesson-fit-panel{margin-top:18px}
.home-blog-preview{background:var(--blue);padding:clamp(18px,2.5vw,28px);border-radius:var(--radius-panel)}
.home-blog-preview p{margin-top:6px}
.home-blog-article-link{display:inline-flex;align-items:center;gap:12px;text-underline-offset:.18em}
.home-blog-article-link svg{width:20px;flex-shrink:0}
@media(max-width:1000px){
 .live-site .offer{padding-inline:16px}
}
@media(max-width:700px){
 .live-site .offer-list{display:grid;grid-template-columns:1fr;gap:10px}
 .live-site .offer{grid-template-columns:44px minmax(0,1fr) 36px;gap:10px;padding:11px 13px}
 .live-site .offer h3{grid-row:1;grid-column:2}
 .live-site .offer .offer-symbol{width:44px}
 .live-site .offer .offer-arrow{grid-column:3;width:36px;height:36px}
 .live-site .offer-section{padding-bottom:24px}
 .lesson-fit+.home-testimonials{padding-bottom:4px}
 .lesson-fit-compact .lesson-fit-art{display:none}
}

/* Symmetry applies only to the homepage; the accepted teaching diagram stays intact. */
.live-site .hero-zone{border-radius:32px}
.live-site .portrait-a img{border-radius:32px}
.lesson-flow{border-radius:24px}
.consult-section{border-radius:28px}
@media(max-width:700px){.live-site .hero-zone,.live-site .portrait-a img,.lesson-flow,.consult-section{border-radius:24px}}

/* A small, off-centre accent occupies the open corner instead of encircling the portrait. */
.portrait-accent{position:absolute;z-index:-1;width:150px;height:130px;right:-35px;top:-32px;pointer-events:none}
@media(max-width:700px){.portrait-accent{width:110px;height:96px;right:-22px;top:-23px}}

/* Poster vocabulary: the same three geometric accents frame meaningful symbols. */
.offer-symbol{display:block;width:100px;height:90px;margin-bottom:22px;flex-shrink:0}
.offer-symbol>svg{display:block;width:100%;height:100%}
.live-site .offer-heading h2{font-size:40px}
.how-short>div:first-child{position:relative;isolation:isolate}
.how-short>div:first-child::before{content:'';position:absolute;z-index:-1;left:-17px;top:-9px;width:65px;height:58px;border-radius:16px;background:var(--yellow);opacity:.35;transform:rotate(-12deg);pointer-events:none}
.lesson-flow{padding-block:35px}
.lesson-flow svg{width:56px;height:56px;stroke-width:1.7}
.home-blog .section-heading h2{position:relative;isolation:isolate;width:fit-content}
.home-blog .section-heading h2::after{content:'';position:absolute;z-index:-1;width:35px;height:28px;border-radius:8px;background:var(--yellow);opacity:.45;right:-14px;top:-5px;transform:rotate(12deg)}
@media(max-width:1000px){
 .offer-symbol{width:88px;height:79px;margin-bottom:20px}
 .lesson-flow svg{width:42px;height:42px}
}
@media(max-width:700px){
 .offer-symbol{grid-column:1/-1;grid-row:1;width:82px;height:74px;margin-bottom:12px}
 .live-site .offer-heading h2{font-size:31px}
 .how-short{padding-top:44px}
 .how-short>div:first-child::before{left:-9px;top:-8px;width:53px;height:46px;border-radius:13px}
 .lesson-flow{padding-block:28px}.lesson-flow svg{width:44px;height:44px}
}

/* The diagram and explanation share the full width of the content. */
.how-short{display:block;padding-block:62px}
.how-short h2{margin-bottom:0}
.how-short .teaching-heading{width:fit-content;margin:0 0 32px;text-align:left}
.how-short .teaching-panel{display:grid;gap:24px}
.how-short .lesson-flow{padding:32px;border-radius:24px;min-width:0}
.how-short .lesson-flow{margin:0;gap:36px;background:var(--blue)}
.how-short .lesson-flow li:not(:last-child)::after{width:24px;right:-30px}
@media(min-width:701px){
 .how-short .lesson-flow{
  grid-template-columns:minmax(0,max-content) minmax(8px,1fr) 24px minmax(8px,1fr) minmax(0,max-content) minmax(8px,1fr) 24px minmax(8px,1fr) minmax(0,max-content);
  gap:0;
 }
 .how-short .lesson-flow li{grid-column:span 4;display:grid;grid-template-columns:subgrid;gap:0}
 .how-short .lesson-flow li:last-child{grid-column:span 1}
 .how-short .lesson-flow li:not(:last-child)::after{grid-column:3;position:static}
}
.how-short .lesson-step{display:flex;align-items:center;gap:17px;min-width:0}
.how-short .teaching-explanation{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.teaching-explanation p{max-width:68ch;margin:0}
.teaching-explanation .text-link{margin-top:0;padding-bottom:0}
@media(max-width:1000px){
 .how-short .lesson-flow{padding:28px}
}
@media(max-width:700px){
 .how-short{padding-block:44px}
 .how-short .teaching-heading{margin-bottom:25px}
 .how-short .teaching-panel{gap:18px}
 .how-short .lesson-flow{padding:26px}
 .how-short .lesson-flow li:not(:last-child)::after{right:auto;left:10px;bottom:-22px}
 .how-short .teaching-explanation{gap:12px}
 .teaching-explanation p{font-size:16px}
}

/* One opaque accent colour stays consistent over both cream and blue surfaces. */
.portrait-accent>rect:first-child,.offer-symbol>svg>rect:first-child{fill:var(--accent-yellow);opacity:1}
.how-short>div:first-child::before,.home-blog .section-heading h2::after{background:var(--accent-yellow);opacity:1}
.how-short>.teaching-heading:first-child::before{left:auto;right:-17px;transform:rotate(12deg)}
@media(max-width:700px){.how-short>.teaching-heading:first-child::before{right:-9px}}


/* Selected elements from B; teaching, blog and lesson cards retain A. */
.live-site .hero-zone{width:calc(100% - 48px);max-width:1440px;border-radius:40px;background:var(--blue);overflow:hidden}
.live-site .hero-a{grid-template-columns:1.1fr 1fr;gap:30px 80px;padding:42px 0 66px;width:min(1130px,calc(100% - 80px))}
.live-site .hero-a>h1{grid-column:1/-1;font-size:clamp(52px,6.2vw,84px);line-height:1.06;letter-spacing:-.04em;text-align:left;max-width:900px;margin:0 0 10px;font-weight:600}
.live-site .hero-a>h1 em{font-style:normal;background:var(--accent-yellow);border-radius:18px;display:inline-block;padding:0 13px 5px;transform:rotate(-3deg)}
.live-site .hero-copy{max-width:550px;align-self:center}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.live-site .hero-copy .hero-label{margin-bottom:8px;font-weight:700;text-align:left}
.live-site .hero-copy .button{margin:0;min-height:60px;padding:9px 16px;gap:10px}
.live-site .hero-copy .hero-actions .button[href="#lekce"]{background:transparent;border-color:var(--ink)}
.hero-consult small{display:block;font-size:13px;font-weight:500}
.live-site .hero-copy .hero-actions .button[href="#lekce"]:hover{background:var(--ink);color:var(--cream)}
@media(min-width:701px){
 .live-site .hero-a{row-gap:16px}
 .live-site .hero-a>h1{margin-bottom:0}
 .live-site .hero-copy{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
 .hero-actions{margin-top:auto}
 .live-site .portrait-a{align-self:end}
}
.live-site .hero-copy .intro{font-size:19px;line-height:1.8}
.live-site .portrait-a{width:86%;max-width:350px;position:relative;margin:8px auto 0}
.live-site .portrait-a img{aspect-ratio:1.08;border-radius:32px;object-position:50% 38%;border:7px solid var(--cream)}
.live-site .portrait-accent{width:190px;height:165px;right:-45px;top:-43px}
.portrait-prompt{position:absolute;z-index:2;background:var(--cream);color:var(--ink);font-size:16px;font-weight:600;padding:17px 21px;border-radius:16px;box-shadow:0 10px 30px #244a5714;white-space:nowrap}
.prompt-one{left:-55px;top:43px;transform:rotate(-7deg)}
.prompt-two{right:-35px;bottom:25px;transform:rotate(5deg);background:var(--accent-yellow)}
.live-site .price{background:var(--accent-yellow);padding:18px 25px;border-radius:20px;text-align:center;transform:rotate(3deg)}
.live-site .price strong{font-size:29px}
.price sup{font-size:.55em;line-height:0}
.price-note{max-width:19ch;margin-inline:auto}
.live-site .consult-section{max-width:1440px;width:calc(100% - 48px);border-radius:40px;padding-block:48px}
.live-site .consult-section::after{width:400px;height:400px;top:-290px;right:-170px;border-width:35px;opacity:.07}
.live-site .consult-section:has(.consult-clock)::after{content:none}
.live-site .consult-grid{grid-template-columns:1.25fr 1fr;gap:70px;width:min(1184px,calc(100% - 80px))}
.live-site .consult-grid h2{font-size:44px;font-weight:600}
.live-site .consult-grid h2 br{display:none}
.live-site .consult-action{text-align:center;position:relative}
.consult-clock{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--accent-yellow);margin-bottom:17px}
.consult-clock strong{font-size:112px;line-height:1;letter-spacing:-.04em;font-weight:500}
.consult-clock span{font-size:22px;max-width:7ch;text-align:left;line-height:1.3}
.live-site .consult-action .button{border-radius:50px;background:var(--yellow);border-color:var(--yellow)}
@media(max-width:1000px){
 .live-site .hero-a{gap:28px 35px}.live-site .hero-copy .intro{font-size:17px}.live-site .portrait-a{width:88%}
 .portrait-prompt{font-size:13px;padding:13px 16px}.prompt-one{left:-30px}.prompt-two{right:-20px}
 .live-site .consult-grid{gap:35px}.live-site .consult-grid h2{font-size:37px}.consult-clock strong{font-size:90px}
}
@media(max-width:700px){
 .live-site .hero-zone,.live-site .consult-section{width:calc(100% - 20px);border-radius:28px}
 .live-site .hero-a{display:flex;width:calc(100% - 40px);padding:27px 0 36px;gap:25px}
 .live-site .hero-a>h1{font-size:44px;max-width:14ch;line-height:1.09;margin:0;align-self:flex-start;order:0}
 .live-site .hero-a>h1 br{display:none}.live-site .hero-a>h1 em{padding-inline:8px;border-radius:12px}
 .live-site .hero-copy{order:1}.live-site .hero-copy .intro{font-size:16px;line-height:1.75}
 .live-site .portrait-a{order:2;max-width:260px;width:82%;margin:5px auto 0}
 .live-site .portrait-a img{aspect-ratio:1.22;border-width:5px;border-radius:25px}
 .live-site .portrait-accent{width:130px;height:115px;right:-27px;top:-28px}
 .portrait-prompt{font-size:12px;padding:12px 14px}.prompt-one{left:-18px;top:18px}.prompt-two{right:-20px;bottom:12px}
 .live-site .offer-heading{display:grid;grid-template-columns:minmax(0,1fr) clamp(108px,30vw,145px);align-items:start;gap:12px}
 .live-site .offer-heading h2{font-size:clamp(23px,6.4vw,31px)}
 .live-site .offer-heading .price{padding:10px 8px;margin:0;border-radius:16px;transform-origin:top left}.live-site .price strong{font-size:21px}.live-site .price strong span{display:block;font-size:13px}.live-site .price>span{font-size:11px}
 .live-site .consult-section{padding-block:32px}.live-site .consult-grid{width:calc(100% - 46px);display:block}.live-site .consult-grid h2{font-size:33px}.live-site .consult-grid p{font-size:16px}
 .live-site .consult-action{margin-top:27px}.consult-clock strong{font-size:90px}.consult-clock span{font-size:20px}.live-site .consult-action p{font-size:13px}
}
@media(max-width:350px){
 .live-site .hero-a>h1{font-size:38px}.live-site .price strong span{display:inline}
 .live-site .consult-grid h2{font-size:30px}
}
@media(min-width:1100px){
 .live-site .hero-a{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;
  gap:16px clamp(48px,5vw,72px);padding-block:48px
 }
 .live-site .hero-a>h1{grid-area:1/1;font-size:clamp(64px,5.8vw,84px)}
 .live-site .hero-copy{grid-area:2/1}
 .live-site .portrait-a{grid-area:1/2/span 2;width:90%;max-width:390px}
 .live-site .offer-heading{align-items:center;margin-bottom:30px}
}

/* Consistent corner scale across the homepage, at every viewport size. */

.live-site .hero-zone,.live-site .portrait-a img,.live-site .consult-section,
.live-site .offer,
.live-site .how-short .lesson-flow,.live-site .how-short .teaching-explanation{border-radius:var(--radius-panel)}
.live-site .button,.live-site .hero-copy .button,.live-site .consult-action .button,
.live-site .offer .offer-arrow,.live-site .price,.live-site .portrait-prompt,
.live-site .hero-a>h1 em{border-radius:var(--radius-control)}

/* One heading scale for the integrated homepage, rather than separate A/B styles. */

.live-site .offer-heading h2,.live-site .teaching-heading h2,
.live-site .consult-grid h2,.live-site .home-blog .section-heading h2{
 font-size:var(--type-section);font-weight:var(--weight-heading);line-height:1.2;letter-spacing:-.025em
}
.live-site .offer h3,.live-site .home-blog-preview h3{
 font-size:var(--type-card);font-weight:var(--weight-heading);line-height:1.3;letter-spacing:-.02em
}
@media(max-width:700px){
 .live-site .offer h3,.live-site .home-blog-preview h3{font-size:clamp(16px,4.6vw,20px)}
}

/* One short tick follows the arrow's direction when a control is in use. */
@keyframes home-arrow-tick{
 50%{translate:var(--home-arrow-x,4px) var(--home-arrow-y,0px)}
}
@keyframes home-arrow-cue{
 0%,12%,50%,100%{translate:0 0}
 30%{translate:var(--home-cue-x,7px) var(--home-cue-y,0px)}
}
.lesson-fit-disclosure summary{--home-arrow-x:0px;--home-arrow-y:4px}
.lesson-fit-disclosure[open] summary{--home-arrow-y:-4px}
.live-site .home-arrow-action.button:active{background:var(--ink);border-color:var(--ink);color:var(--cream)}
@media(prefers-reduced-motion:no-preference){
 .home-arrow-action:focus-visible{--home-arrow-motion:home-arrow-tick}
 .home-arrow-action>svg,.home-arrow-action .offer-arrow>svg{
  animation:var(--home-arrow-motion,none) 260ms cubic-bezier(.16,1,.3,1)
 }
 .lesson-fit-disclosure summary{--home-cue-x:0px;--home-cue-y:7px}
 :root:not(.home-cues-hidden) :is(.hero-consult,.lesson-fit-disclosure:not([open]) summary).home-arrow-in-view:not(:hover,:focus-visible)>svg{
  animation:home-arrow-cue 1.5s ease-in-out infinite
 }
 .home-arrow-action:active{scale:.985}
 @media(hover:hover){
  .home-arrow-action:hover{--home-arrow-motion:home-arrow-tick}
 }
}
@media(prefers-reduced-motion:reduce){
 .home-arrow-action.button:active{transform:none}
}