/* =====================================================================
   site-refresh.css — design upgrade, EN page only, for owner review.

   Loaded AFTER site.css by landing/index.html alone (with site-refresh.js),
   so ES and PT are untouched until approved; on approval both fold into
   site.css and the page script. Appearance only: no text or link changes.

   Text stays at its original size. The column is wider so a large screen
   gets more content per view rather than bigger letters; the motion and
   the diagrams are the visible upgrade.
   ===================================================================== */

:root{--wrap:1360px;--ease-out:cubic-bezier(.2,.7,.2,1)}
.wrap{padding:0 clamp(1.25rem,3vw,2.25rem)}

/* --- Header: turns to frosted glass once the page scrolls ------------- */
header.site{transition:background .25s,box-shadow .25s}
header.site.is-scrolled{background:rgba(22,70,112,.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(8,25,45,.55)}
/* On a phone the nav wraps to three rows; pinned, it hid a fifth of every
   screen. It scrolls away there; desktop keeps the sticky bar. */
@media (max-width:640px){
  header.site{position:relative}
  header.site .wrap{min-height:0;padding-top:.6rem;padding-bottom:.7rem;row-gap:.55rem}
}

/* =====================================================================
   HERO
   ===================================================================== */
/* The two glows now drift slowly — the page is visibly alive on arrival. */
.hero::before{width:620px;height:620px;top:-220px;right:-140px;
  background:radial-gradient(circle,rgba(232,147,12,.26),transparent 68%)}
.hero::after{width:560px;height:560px;bottom:-260px;left:-160px;
  background:radial-gradient(circle,rgba(47,166,160,.30),transparent 68%)}
/* a fine dot field behind the product shot */
.hero .wrap::before{content:"";position:absolute;inset:-4rem -30vw -4rem 45%;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 60% 45%,#000,transparent 75%);
          mask-image:radial-gradient(70% 60% at 60% 45%,#000,transparent 75%)}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}

/* Screenshot as a product shot: browser chrome, a slight 3D turn that
   straightens on hover, the scenario card floating in front of it. */
.shot-stack{perspective:1800px;padding-bottom:7.5rem}
.shot-frame{position:relative;transform:rotateY(-10deg) rotateX(4deg) rotateZ(.4deg);transform-origin:40% 50%;
  transition:transform .8s var(--ease-out);
  padding-top:30px;background:#E9EEF3;border:1px solid rgba(255,255,255,.35);
  box-shadow:-30px 40px 80px -24px rgba(4,16,30,.65),0 0 0 1px rgba(8,25,45,.08)}
.shot-frame::before{content:"";position:absolute;left:14px;top:11px;width:9px;height:9px;border-radius:50%;
  background:#F26D5F;box-shadow:15px 0 0 #F2B84B,30px 0 0 #53C27A}
.shot-frame::after{content:"";position:absolute;left:62px;right:22%;top:8px;height:15px;border-radius:5px;
  background:rgba(30,91,148,.10)}
.shot:hover .shot-frame{transform:rotateY(-3deg) rotateX(1deg)}
.shot-inset{width:62%;left:-2.25rem;
  box-shadow:0 10px 20px rgba(8,25,45,.25),0 34px 70px -14px rgba(4,16,30,.7)}

/* =====================================================================
   PROOF STRIP — icons get a proper badge, each fact responds to hover
   ===================================================================== */
.proofstrip .pf{transition:background .2s}
.proofstrip .pf:hover{background:rgba(255,255,255,.05)}
.proofstrip svg{width:36px;height:36px;padding:8px;margin-top:0;border-radius:10px;
  background:rgba(232,147,12,.14);box-shadow:inset 0 0 0 1px rgba(232,147,12,.3)}
@media (max-width:520px){
  .proofstrip .pf{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .proofstrip .pf:first-child{border-top:0}
}

/* =====================================================================
   Section headings: the accent bar draws itself in
   ===================================================================== */
.section-head{max-width:50rem}
.section-head p{max-width:64ch}
.section-head.centred p{margin-left:auto;margin-right:auto}
.section-title::after{width:3.5rem;transform-origin:left;transition:transform .8s var(--ease-out) .25s}
.section-head.centred .section-title::after{left:calc(50% - 1.75rem);transform:none;transform-origin:center}
.has-reveal .section-head:not(.is-in) .section-title::after{transform:scaleX(0)}

/* =====================================================================
   Cards — kept, with a livelier response
   ===================================================================== */
.card{transition:box-shadow .25s,transform .25s var(--ease-out),border-color .25s}
.card:hover{transform:translateY(-4px);border-color:rgba(30,91,148,.22);
  box-shadow:0 2px 4px rgba(20,62,99,.05),0 18px 40px -14px rgba(20,62,99,.28)}
.card .icon{transition:transform .35s var(--ease-out),background .25s}
.card:hover .icon{transform:rotate(-6deg) scale(1.08);background:linear-gradient(150deg,rgba(232,147,12,.2),rgba(47,166,160,.14))}

/* The quoted clause gets a highlighter pass when it scrolls in. */
.why-quote strong{background:linear-gradient(transparent 58%,rgba(232,147,12,.38) 58%) no-repeat 0 0/100% 100%;
  transition:background-size 1.1s var(--ease-out) .5s}
.has-reveal .why-lead:not(.is-in) .why-quote strong{background-size:0 100%}

/* =====================================================================
   CATALOGUE
   ===================================================================== */
.catgroup{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;margin:0 0 2.5rem}
.catgroup-head{background:none;padding:0 0 .8rem;border-bottom:2px solid var(--cat)}
.catgroup-head .icon{border:0}
.courses{padding:1.4rem 0 0;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.courses > .ccard{max-width:none}

.ccard{transition:box-shadow .25s,transform .25s var(--ease-out),border-color .25s}
.ccard::before{height:4px;opacity:1;transform-origin:left;transition:transform .9s var(--ease-out) .2s}
.has-reveal .ccard:not(.is-in)::before{transform:scaleX(0)}
.ccard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cat) 45%,#fff);
  box-shadow:0 2px 4px rgba(20,62,99,.05),0 22px 44px -16px color-mix(in srgb,var(--cat) 45%,transparent)}

/* A one-course category used to leave half a row empty. The lone card now
   spans the row and lays itself out in two columns. */
@media (min-width:900px){
  .ccard:only-child{display:grid;grid-template-columns:1.05fr 1fr;column-gap:2.5rem;
    grid-template-rows:min-content min-content auto auto auto;align-content:start}
  .ccard:only-child > h4{grid-column:1;grid-row:1}
  .ccard:only-child > .cc-meta{grid-column:1;grid-row:2}
  .ccard:only-child > .cc-out{grid-column:1;grid-row:3 / 6}
  .ccard:only-child > ul{grid-column:2;grid-row:1 / 4;margin-top:.2rem}
  .ccard:only-child > .cc-src{grid-column:2;grid-row:4}
  .ccard:only-child > .cc-foot{grid-column:2;grid-row:5}
}

/* The two labels, quieter; the button to the right where the eye ends up */
.pill{background:none!important;padding:0;border-radius:0;text-transform:none;letter-spacing:0;
  font-size:.8rem;font-weight:600;color:var(--cua-muted)}
.pill.free{color:var(--success);display:inline-flex;align-items:center;gap:.35rem}
.pill.free::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(46,125,91,.15)}
.pill.free + .pill::before{content:"·";margin-right:.5rem;color:var(--cua-muted)}
.ccard .cc-foot .btn{margin-left:auto}

/* =====================================================================
   PIC/S SERIES — nine boxes become a route map: one track, nine stations,
   drawn left to right as it scrolls in. Down the page on a phone.
   ===================================================================== */
section.deep#pics{clip-path:polygon(0 0,100% 3.5vw,100% 100%,0 100%);padding-top:calc(4.25rem + 3.5vw)}
.series-list{grid-template-columns:repeat(9,minmax(0,1fr));gap:0;position:relative;margin:.5rem 0 0}
.series-list::before,.series-list::after{content:"";position:absolute;left:5.55%;right:5.55%;top:23px;height:3px;border-radius:2px}
.series-list::before{background:rgba(255,255,255,.14)}
.series-list::after{background:linear-gradient(90deg,var(--cua-accent),var(--cua-cta));
  transform-origin:left;transition:transform 1.6s var(--ease-out) .2s}
.has-reveal .series-list:not(.is-in)::after{transform:scaleX(0)}
.series-list li{position:relative;z-index:1;transition:opacity .5s ease,transform .5s var(--ease-out)}
.has-reveal .series-list:not(.is-in) li{opacity:0;transform:translateY(14px)}
.series-list li:nth-child(2){transition-delay:.15s}.series-list li:nth-child(3){transition-delay:.3s}
.series-list li:nth-child(4){transition-delay:.45s}.series-list li:nth-child(5){transition-delay:.6s}
.series-list li:nth-child(6){transition-delay:.75s}.series-list li:nth-child(7){transition-delay:.9s}
.series-list li:nth-child(8){transition-delay:1.05s}.series-list li:nth-child(9){transition-delay:1.2s}
.series-list a{flex-direction:column;align-items:center;text-align:center;gap:.8rem;
  padding:0 .35rem .5rem;border:0;background:none;border-radius:12px}
.series-list a:hover{background:none;transform:none}
.series-list .n{width:48px;height:48px;border-radius:50%;font-size:1rem;
  background:#123A5E;border:2px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 6px var(--cua-primary-dark);
  transition:transform .35s var(--ease-out),background .25s,border-color .25s,box-shadow .25s}
.series-list a:hover .n{transform:scale(1.14);background:var(--cua-cta);border-color:var(--cua-cta);color:#3A2503;
  box-shadow:0 0 0 6px var(--cua-primary-dark),0 0 0 12px rgba(232,147,12,.25)}
.series-list .t{font-size:.86rem;line-height:1.3;color:rgba(255,255,255,.9);transition:color .2s}
.series-list a:hover .t{color:#fff;text-decoration:underline;text-underline-offset:3px}
.series-foot{margin-top:2.25rem}
@media (max-width:1000px){
  .series-list{grid-template-columns:1fr;gap:.35rem}
  .series-list::before,.series-list::after{left:23px;right:auto;top:24px;bottom:24px;width:3px;height:auto}
  .series-list::after{background:linear-gradient(180deg,var(--cua-accent),var(--cua-cta));transform-origin:top}
  .series-list a{flex-direction:row;text-align:left;gap:1rem;padding:.3rem 0}
  .series-list .t{font-size:.95rem}
}

/* Pricing: the saving shown, not only stated — a bar of what the bundle
   costs against the A$320 struck through beside it (169 / 320 = 53%). */
.series-opt{transition:transform .25s var(--ease-out),border-color .25s}
.series-opt:hover{transform:translateY(-3px)}
.series-opt.is-best::after{content:"";display:block;height:8px;border-radius:4px;margin:.85rem 0 0;
  background:linear-gradient(90deg,var(--cua-cta),#F4B650) no-repeat 0 0/52.8% 100%,rgba(255,255,255,.14);
  transition:background-size 1.2s var(--ease-out) .35s}
.has-reveal .series-opt.is-best:not(.is-in)::after{background-size:0 100%,auto}

/* =====================================================================
   HOW IT WORKS — stations pop in order, connectors fill between them
   ===================================================================== */
.step{transition:transform .25s var(--ease-out),box-shadow .25s}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.step::after{border-top:0;height:2px;background:var(--cua-cta);transform-origin:left;transition:transform .45s ease}
.has-reveal .steps:not(.is-in) .step::after{transform:scaleX(0)}
.step:nth-child(1)::after{transition-delay:.5s}.step:nth-child(2)::after{transition-delay:.9s}
.step:nth-child(3)::after{transition-delay:1.3s}
.step::before{transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .3s}
.has-reveal .steps:not(.is-in) .step::before{transform:scale(0)}
.step:nth-child(2)::before{transition-delay:.35s}.step:nth-child(3)::before{transition-delay:.75s}
.step:nth-child(4)::before{transition-delay:1.15s}
.step:hover::before{background:var(--cua-cta);color:#3A2503}

/* =====================================================================
   CERTIFICATE — drops onto the page, then gets stamped "Verified"
   ===================================================================== */
.certcard{transition:transform 1s var(--ease-out),box-shadow 1s var(--ease-out),opacity .8s ease}
.has-reveal .cert-stage:not(.is-in) .certcard{transform:rotate(-7deg) translateY(40px) scale(.94);opacity:0}
.certcard:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow-xl)}
.certcard .ribbon{transition:transform .45s cubic-bezier(.3,1.6,.5,1) 1.1s,opacity .3s ease 1.1s;z-index:2}
.has-reveal .cert-stage:not(.is-in) .ribbon{transform:rotate(12deg) scale(2.2);opacity:0}
.certcard .cert-seal{transition:opacity .6s ease .8s,transform .6s var(--ease-out) .8s}
.has-reveal .cert-stage:not(.is-in) .cert-seal{opacity:0;transform:scale(.7)}

.pricebox{transition:transform .25s var(--ease-out),box-shadow .25s}
.pricebox:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pricebox .pb-amt{background:linear-gradient(135deg,var(--cua-primary-dark),var(--cua-primary) 60%,var(--cua-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pricebox .pb-amt small{-webkit-text-fill-color:var(--cua-muted);color:var(--cua-muted)}

/* =====================================================================
   FAQ — opens with motion instead of a jump
   ===================================================================== */
details.faq:hover{border-color:rgba(30,91,148,.25)}
details.faq summary::after{transition:transform .3s var(--ease-out),background .2s}
details.faq[open] summary::after{transform:rotate(180deg)}
details.faq[open] > p{animation:cua-drop .35s var(--ease-out)}
@keyframes cua-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =====================================================================
   Buttons — the amber CTA gets a light sweep on hover
   ===================================================================== */
.btn-cta{position:relative;overflow:hidden}
.btn-cta::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.btn-cta:hover::after{left:130%;transition:left .7s ease}
.btn .ic{transition:transform .25s var(--ease-out)}
.btn:hover .ic{transform:translateX(3px)}

/* Final CTA: an angled edge, so the page ends on a shape, not a stripe */
section.deep.final{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);padding-top:calc(5rem + 3vw);margin-top:-3vw}

/* =====================================================================
   MOTION — scroll reveal and hero entrance. site-refresh.js adds
   .has-reveal and .reveal only when motion is allowed and the observer
   exists, so with no script, or reduced motion, everything is simply there.
   ===================================================================== */
.has-reveal .reveal{opacity:0;transform:translateY(26px)}
.has-reveal .reveal.is-in{opacity:1;transform:none;
  transition:opacity .75s ease var(--d,0ms),transform .85s var(--ease-out) var(--d,0ms)}

@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:cua-drift-a 16s ease-in-out infinite alternate}
  .hero::after{animation:cua-drift-b 19s ease-in-out infinite alternate}
  @keyframes cua-drift-a{to{transform:translate(-120px,90px) scale(1.15)}}
  @keyframes cua-drift-b{to{transform:translate(140px,-70px) scale(1.1)}}

  .hero .wrap > div:first-child > *{animation:cua-rise .8s var(--ease-out) both}
  .hero .wrap > div:first-child > :nth-child(2){animation-delay:.08s}
  .hero .wrap > div:first-child > :nth-child(3){animation-delay:.16s}
  .hero .wrap > div:first-child > :nth-child(4){animation-delay:.24s}
  .hero .wrap > div:first-child > :nth-child(5){animation-delay:.32s}
  .shot-stack{animation:cua-shot-in 1.1s var(--ease-out) .15s both}
  .shot-inset{animation:cua-float 7s ease-in-out 1.6s infinite}
  .shot-cap{animation:cua-rise .8s var(--ease-out) .8s both}
  @keyframes cua-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes cua-shot-in{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
  @keyframes cua-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .step::after{display:none}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .wrap::before{display:none}
  .shot-frame,.shot:hover .shot-frame{transform:none}
  .shot-stack{padding-bottom:6rem}
  .shot-inset{left:-.5rem;width:66%}
  section.deep#pics,section.deep.final{clip-path:none;padding-top:3.5rem;margin-top:0}
}
@media (max-width:520px){
  .courses{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .shot-frame,.shot:hover .shot-frame{transform:none}
  .card:hover,.ccard:hover,.step:hover,.series-opt:hover,.pricebox:hover,.certcard:hover{transform:none}
}
/* narrow certificate: the verify line wraps to two rows, so the QR mark
   shrinks and the line keeps clear of it */
@media (max-width:520px){
  .certcard .cert-seal{width:52px;height:52px;right:1.4rem;bottom:4.2rem}
  .certcard .code{padding-right:0}
  .certcard .meta{padding-right:4rem}
}