/* Academiq v4 - homepage compositions (section by section) */

/* ---------- 0. hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:center}
.hero-copy{grid-column:1/8;grid-row:1;position:relative;z-index:2;min-width:0}
.hero h1>span:first-child{display:block}
.rotator-line{display:flex;flex-wrap:wrap;align-items:baseline;min-height:1.15em;margin-top:.1em;font-size:clamp(1.9rem,1.2rem + 3vw,3.5rem);line-height:1.1;overflow-wrap:anywhere}
.rotator{display:inline-block;color:var(--mint);font-style:oblique 12deg;font-weight:600;font-variation-settings:"CRSV" 1;overflow-wrap:anywhere;transition:opacity var(--t2)}
.rotator-line .cursor{flex:none}
.hero-copy>p{color:var(--ink-2);max-width:46ch;margin:var(--sp5) 0 var(--sp6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp4)}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp5) var(--sp8);margin-top:var(--sp8)}
.hero-stats .stat b{display:block;font:600 2.5rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.hero-stats .stat span{display:block;margin-top:var(--sp2);font:500 .875rem/1.4 var(--f-body);color:var(--ink-2)}
.stat[data-bits]::after{content:attr(data-bits);display:block;margin-top:var(--sp2);font:400 .75rem/1 var(--f-data);letter-spacing:.14em;color:var(--ink-3)}

.ca-frame{grid-column:7/-1;grid-row:1;align-self:stretch;position:relative;min-height:380px;border:1px solid var(--rule);background:var(--s1)}
.ca-frame::after{
  content:"";position:absolute;inset:-4px;pointer-events:none;z-index:3;
  background:var(--xh-mint) left top no-repeat,var(--xh-mint) right top no-repeat,var(--xh-mint) left bottom no-repeat,var(--xh-mint) right bottom no-repeat;
}
.ca-frame canvas{position:absolute;inset:0;width:100%;height:100%}

/* state register: light plate, not a terminal */
.term{grid-column:8/-1;grid-row:1;z-index:2;position:relative;margin-inline:var(--sp5);background:var(--p0);color:var(--p-ink);border-radius:var(--r1);box-shadow:var(--seat);font:400 .8125rem/1.9 var(--f-data)}
.term::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--xh-plate) right 6px bottom 6px no-repeat}
.term-bar{display:flex;height:24px;border-bottom:1px solid var(--p-rule)}
.term-bar i{flex:1;display:flex;align-items:center;padding-left:8px;border-right:1px solid var(--p-rule);font:400 .625rem/1 var(--f-data);color:var(--p-ink-2);letter-spacing:.08em}
.term-bar i:last-child{border-right:0}
.term-bar i:nth-child(1)::after{content:"q0"}.term-bar i:nth-child(2)::after{content:"q1"}.term-bar i:nth-child(3)::after{content:"q2"}
.term-bar i:nth-child(4)::after{content:"q3"}.term-bar i:nth-child(5)::after{content:"q4"}
.term-body{padding:20px 20px 24px}
.term-body>div{overflow-wrap:anywhere}
.term-body .p{color:var(--violet)}
.term-body .k{color:var(--blue-ink)}
.term-body .ok{color:var(--mint-ink)}
.term-body #termCourse{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
.term .cursor{color:var(--mint-ink)}

.hero-tape{grid-column:1/-1;grid-row:2;position:relative;height:40px}
[data-instrument="tape"]{width:100%;height:40px}

@media (max-width:1023px){
  .hero-grid{row-gap:var(--sp6)}
  .hero-copy,.term,.ca-frame,.hero-tape{grid-column:1/-1;grid-row:auto}
  .term{margin-inline:0}
  .ca-frame{min-height:0;height:140px}
  .hero-stats{margin-top:var(--sp7)}
}

/* ---------- 1. courses ---------- */
.sorter{position:relative;width:100%;height:72px;margin-bottom:var(--sp6);border:1px solid var(--rule);background:var(--s2)}
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1023px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.courses{grid-template-columns:1fr}.course{min-height:280px}}

/* ---------- 2. why us ---------- */
.why-layout,.faq-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp6);align-items:start}
.why-side,.faq-side{grid-column:1/5;position:sticky;top:calc(var(--header-h) + 32px)}
.why-side .sec-title,.faq-side .sec-title{max-width:none;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
.why-side .sec-sub,.faq-side .sec-sub{max-width:none;margin-bottom:var(--sp6)}
.why-layout>.features{grid-column:5/-1}
.life{width:100%;max-width:280px;aspect-ratio:1;border:1px solid var(--rule);background:var(--s2)}
.life canvas,canvas.life{width:100%;height:100%}
@media (max-width:1023px){
  .why-side,.faq-side{grid-column:1/-1;position:static}
  .why-layout>.features{grid-column:1/-1}
}
@media (max-width:639px){.life{max-width:none;aspect-ratio:auto;height:120px}}

/* ---------- 3. mentors ---------- */
.mentors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp7) var(--gutter)}
.mentor{--dial:min(210px,100%);display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;text-align:center}
.mentor>[data-instrument="rotor"]{grid-area:1/1;width:var(--dial);aspect-ratio:1;align-self:center}
.mentor>.avatar{grid-area:1/1;align-self:center;width:calc(var(--dial)*.7143);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--s2);box-shadow:0 0 0 1px var(--rule)}
.mentor .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mentor h4{margin-top:var(--sp4);color:var(--ink)}
.mentor p{margin-top:var(--sp1);font:500 .875rem/1.5 var(--f-body);color:var(--ink-2)}
@media (max-width:1023px){.mentors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.mentors{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp6)}.mentor{--dial:min(160px,100%)}}

/* ---------- 4. swedish method ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:start}
.split>:first-child{grid-column:1/8}
.split>:last-child{grid-column:8/-1}
.split--cert>:first-child{grid-column:1/7}
.split--cert>:last-child{grid-column:7/-1}
.sweden-lead{font-size:1.1875rem;line-height:1.7;color:var(--ink);max-width:54ch}
.sweden-card{padding:32px}
.sweden-card .mono,.diploma-card .mono{display:block;margin-bottom:var(--sp4);color:var(--mint-ink)}
.sweden-card h3,.diploma-card h3{margin-bottom:var(--sp3)}
.sweden-card p,.diploma-card p{color:var(--p-ink-2)}
.sweden-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--sp6);border:1px solid var(--p-rule)}
.sweden-stats .stat{padding:16px 12px;border-right:1px solid var(--p-rule);transition:background-color var(--t2),color var(--t2)}
.sweden-stats .stat:last-child{border-right:0}
.sweden-stats .stat b{display:block;font:500 1.5rem/1 var(--f-data);letter-spacing:.04em}
.sweden-stats .stat span{display:block;margin-top:var(--sp2);font:500 .875rem/1.3 var(--f-body);color:var(--p-ink-2)}
.sweden-stats .stat.is-on,.sweden-stats .stat.on,.sweden-stats .stat[aria-current="true"]{background:var(--violet);color:var(--p0)}
.sweden-stats .stat.is-on span,.sweden-stats .stat.on span,.sweden-stats .stat[aria-current="true"] span{color:var(--p0)}
.sweden-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:var(--sp8);padding-top:72px}
.sweden-steps>[data-instrument="method"]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sweden-step{padding:24px;min-height:176px}
.sweden-step .n{display:block;margin-bottom:var(--sp3);font:400 .75rem/1 var(--f-data);letter-spacing:.06em;color:var(--blue-ink)}
.sweden-step h4{margin-bottom:var(--sp2)}
.sweden-step p{font:400 .9375rem/1.55 var(--f-body);color:var(--p-ink-2)}
.sweden-step.is-visited,.sweden-step.visited{box-shadow:var(--seat),inset 0 3px 0 var(--mint)}
.sweden-cta{display:flex;justify-content:center;margin-top:var(--sp7);text-align:center}
@media (max-width:1023px){
  .split>:first-child,.split>:last-child,.split--cert>:first-child,.split--cert>:last-child{grid-column:1/-1}
  .sweden-steps{grid-template-columns:1fr;padding:0 0 0 56px;margin-top:var(--sp7)}
}
@media (max-width:480px){.sweden-card{padding:24px 20px}.sweden-stats .stat{padding:12px 8px}}

/* ---------- 5. reviews: punched-tape plates ---------- */
.features--2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);background:none;border:0;border-radius:0}
.features--2col .feature{flex-direction:column;gap:0;padding:0;border-radius:var(--r1);box-shadow:var(--seat)}
.features--2col .feature:hover{background:var(--p0)}
.features--2col [data-instrument="ita2"]{width:100%;height:28px;flex:none;border-bottom:1px solid var(--p-rule);background:var(--p1)}
.features--2col .ic{width:auto;height:auto;margin:20px 24px 0;padding:0;border:0;background:none;font:600 3rem/.8 var(--f-display);color:var(--violet)}
.features--2col .ic+div{padding:12px 24px 28px}
.features--2col h4{margin-bottom:var(--sp3)}
.features--2col p{font-size:1.0625rem;line-height:1.6}
@media (max-width:767px){.features--2col{grid-template-columns:1fr}}

/* ---------- 6. faq: native disclosure ---------- */
.faq-grid{grid-column:5/-1;display:block;border-top:1px solid var(--rule)}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp4);min-height:64px;padding:12px 0;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover h4{color:var(--mint)}
.faq summary:focus-visible{outline-offset:-2px}
.faq .ic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--rule);background:var(--s2);font:500 .8125rem/1 var(--f-data);color:var(--mint)}
.faq h4{color:var(--ink);transition:color var(--t1)}
.faq .fsm{width:40px;height:20px;flex:none}
.faq>p{margin:0 0 24px 44px;padding-left:16px;border-left:2px solid var(--rule);color:var(--ink-2)}
@media (max-width:1023px){.faq-grid{grid-column:1/-1}}
@media (max-width:480px){.faq>p{margin-left:0}}

/* ---------- 7. certificate ---------- */
.diploma-card{isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:460px;padding:68px clamp(48px,9%,64px) 52px}
.diploma-card::before{
  background:var(--xh-plate) left 6px top 6px no-repeat,var(--xh-plate) right 6px top 6px no-repeat,var(--xh-plate) left 6px bottom 6px no-repeat,var(--xh-plate) right 6px bottom 6px no-repeat
}
.diploma-card::after{
  content:"";position:absolute;inset:18px;pointer-events:none;z-index:0;
  border:1px solid var(--blue-ink);
  box-shadow:inset 0 0 0 4px var(--p0),inset 0 0 0 5px var(--p-rule);
}
.diploma-card>.guilloche{z-index:-1}
.diploma-card .mono{margin-bottom:var(--sp6);font-size:.75rem;letter-spacing:.14em;text-shadow:0 0 2px var(--p0),0 0 3px var(--p0),0 0 5px var(--p0)}
.diploma-card h3{font-size:clamp(1.75rem,3.2vw,2.25rem);line-height:1.12;margin-bottom:var(--sp4);max-width:14ch;text-wrap:balance}
.diploma-card p:not(.grade){max-width:38ch;line-height:1.6}
.diploma-card .grade{align-self:stretch;margin:auto 128px 0 0;padding:var(--sp6) 0 var(--sp2);text-align:left;font:400 .8125rem/1.4 var(--f-data);color:var(--mint-ink);border-bottom:1px solid var(--p-rule);text-shadow:0 0 2px var(--p0),0 0 3px var(--p0),0 0 5px var(--p0)}
.diploma-card>.seal{position:absolute;right:4px;bottom:4px;width:108px;height:108px;z-index:2;border-radius:50%}
@media (max-width:480px){
  .diploma-card{min-height:0;padding:56px 32px 128px}
  .diploma-card .grade{margin-right:0;padding-top:var(--sp5)}
  .diploma-card>.seal{width:96px;height:96px}
}

/* ---------- 8. blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1023px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.blog-grid{grid-template-columns:1fr}}

/* ---------- 9. signup ---------- */
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:start}
.form-grid>div{grid-column:1/6}
.form-grid .sec-title,.form-grid .sec-sub{max-width:none}
.form-grid .sec-sub{color:var(--ink-2)}
.form-grid .sec-sub a{text-decoration:underline;text-underline-offset:3px}
.form-grid form{grid-column:6/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);padding:32px}
.form-grid form>#fName,.form-grid form>.bits,.form-grid form>.btn,.form-grid form>.form-msg{grid-column:1/-1}
.bits{height:64px;background:var(--p1);border:1px solid var(--p-rule);border-radius:var(--r1);overflow:hidden}
.form-grid form>.btn{width:100%;min-height:52px}
@media (max-width:1023px){.form-grid>div,.form-grid form{grid-column:1/-1}}
@media (max-width:639px){.form-grid form{grid-template-columns:1fr;padding:20px}}
.hero h1{font-size:clamp(2.1rem,1.3rem + 3.1vw,4.25rem)}