/*!
 * X Tables / Times Table Treasure
 * Homepage presentation styles
 *
 * Copyright (c) 2026 ZypherLock LLC. All rights reserved.
 * This file is part of the X Tables educational platform and may not be
 * copied, modified, distributed or reused without written permission.
 */
/* =========================================================
       Section:
       Core colour variables and page-wide settings.
       ========================================================= */
    :root{
      --hero-image:url('/timetable/assets/images/home/index-story-bg.webp');
      --bg1:#73d7ff;
      --bg2:#2d9ed0;
      --bg3:#0f5274;
      --text:#ffffff;
      --muted:#deedf8;
      --gold1:#ffe58f;
      --gold2:#f6c33e;
      --goldText:#3a2600;
      --softBtn:rgba(255,255,255,.11);
      --softBtnBorder:rgba(255,255,255,.12);
      --card:rgba(255,255,255,.07);
      --cardBorder:rgba(255,255,255,.09);
      --success:#9cf0b9;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      min-height:100vh;
      font-family:Arial,Helvetica,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg,var(--bg1) 0%, var(--bg2) 42%, var(--bg3) 100%);
      overflow-x:hidden;
      padding:0 !important; /* Section: Important so Mr Know never pushes content down. */
    }

    /* =========================================================
       Section:
       Full-screen animated background scene.
       ========================================================= */
    .scene{
      position:fixed;
      inset:0;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 18%),
        radial-gradient(circle at 82% 16%, rgba(255,230,120,.14), transparent 20%),
        radial-gradient(circle at 74% 76%, rgba(255,255,255,.06), transparent 16%),
        linear-gradient(180deg,var(--bg1) 0%, var(--bg2) 42%, var(--bg3) 100%);
      z-index:0;
    }

    .scene-bg,
    .scene-bg-zoom,
    .scene-colorwash,
    .scene-vignette,
    #fxCanvas{
      position:absolute;
      inset:-4%;
      width:108%;
      height:108%;
      pointer-events:none;
    }

    .scene-bg,
    .scene-bg-zoom{
      background-image:var(--hero-image);
      background-size:cover;
      background-position:center center;
      transform-origin:center center;
      will-change:transform;
    }

    .scene-bg{
      filter:saturate(1.06) contrast(1.06) brightness(.84);
      opacity:1;
    }

    .scene-bg-zoom{
      opacity:.18;
      mix-blend-mode:screen;
      filter:blur(10px) saturate(1.15);
      animation:bgPulse 14s ease-in-out infinite;
    }

    .scene-colorwash{
      background:
        radial-gradient(circle at 18% 78%, rgba(59,219,255,.12), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,210,84,.16), transparent 28%),
        radial-gradient(circle at 60% 50%, rgba(255,255,255,.06), transparent 20%);
      mix-blend-mode:screen;
    }

    .scene-vignette{
      background:
        radial-gradient(circle at center, transparent 36%, rgba(6,10,18,.18) 68%, rgba(5,8,14,.58) 100%);
    }

    @keyframes bgPulse{
      0%,100%{transform:scale(1.03)}
      50%{transform:scale(1.08)}
    }

    /* =========================================================
       Section:
       Main homepage content panel.
       ========================================================= */
    .page{
      width:min(1280px, calc(100% - 28px));
      min-height:calc(100vh - 24px);
      margin:12px auto;
      position:relative;
      z-index:2;
      display:flex;
    }

    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(13,34,52,.42) 0%, rgba(7,23,37,.50) 100%);
      box-shadow:
        0 30px 80px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(7px);
      -webkit-backdrop-filter:blur(7px);
      padding:28px 28px 20px;
      width:100%;
      min-height:calc(100vh - 24px);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    .hero-shell::before{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:360px;
      height:360px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,227,140,.18) 0%, rgba(255,227,140,.05) 40%, transparent 72%);
      pointer-events:none;
    }

    .hero-shell::after{
      content:"";
      position:absolute;
      left:-80px;
      bottom:-90px;
      width:280px;
      height:280px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(92,220,255,.12) 0%, rgba(92,220,255,.04) 42%, transparent 72%);
      pointer-events:none;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.18fr .9fr;
      gap:18px;
      align-items:stretch;
      position:relative;
      z-index:2;
    }

    .eyebrow{
	  display:inline-flex;
	  align-items:center;
	  gap:50px;
	  padding:10px 15px;
	  border-radius:999px;
	  background:rgba(255,255,255,.08);
	  border:1px solid rgba(255,255,255,.12);
	  color:#fff3bf;
	  font-weight:800;
	  letter-spacing:.04em;
	  margin-bottom:18px;
	}

    .eyebrow .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(180deg,var(--gold1),var(--gold2));
      box-shadow:0 0 14px rgba(245,195,62,.55);
    }

    h1{
      margin:0 0 14px;
	  padding-left:40px;
      font-size:clamp(44px, 6vw, 78px);
      line-height:.95;
      letter-spacing:-.04em;
      color:#fff;
      text-shadow:
        -1px -1px 0 rgba(0,0,0,.95),
         1px -1px 0 rgba(0,0,0,.95),
        -1px  1px 0 rgba(0,0,0,.95),
         1px  1px 0 rgba(0,0,0,.95),
         0 6px 24px rgba(0,0,0,.28);
      max-width:780px;
    }

    .lead{
	  margin:0 0 18px;
	  padding-left:40px;
	  font-size:clamp(20px, 2.1vw, 31px);
	  line-height:1.24;
	  color:#f2fbff;
	  max-width:780px;
	}

    .support{
      margin:0;
      font-size:19px;
      line-height:1.55;
      color:var(--muted);
      max-width:780px;
    }

    .cta-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:10px;
      margin-top:22px;
      align-items:stretch;
    }

    .cta{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:58px;
      border-radius:22px;
      border:2px solid rgba(255,255,255,.18);
      text-decoration:none;
      font-weight:900;
      font-size:16px;
      line-height:1.15;
      padding:12px 15px;
      text-align:center;
      transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg,#0072B2,#00598C);
      color:#fff;
      box-shadow:0 12px 26px rgba(0,114,178,.26), 0 9px 18px rgba(0,0,0,.16);
    }

    .cta:hover,
    .cta:focus{
      transform:translateY(-2px);
      background:linear-gradient(180deg,#D55E00,#A94900);
      border-color:rgba(255,255,255,.38);
      outline:3px solid rgba(255,255,255,.28);
      outline-offset:2px;
    }

    .cta.primary{
      background:linear-gradient(180deg,#FFE135,#F2A900);
      color:#1b1300;
      border-color:rgba(255,225,53,.68);
      box-shadow:
        0 16px 34px rgba(242,169,0,.24),
        0 10px 22px rgba(0,0,0,.16);
    }

    .cta.primary:hover,
    .cta.primary:focus{
      background:linear-gradient(180deg,#D55E00,#A94900);
      border-color:rgba(255,255,255,.42);
    }

    .right-panel{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .info-card{
      border-radius:24px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      padding:20px 20px 18px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }

    .info-card h2{
      margin:0 0 12px;
      font-size:24px;
      line-height:1.08;
    }

    .info-card p{
      margin:0;
      color:var(--muted);
      line-height:1.5;
      font-size:16px;
    }

    .mini-list{
      display:grid;
      gap:10px;
      margin-top:14px;
    }

    .mini-item{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:#eef8ff;
    }

    .mini-icon{
      flex:0 0 34px;
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:linear-gradient(180deg,rgba(255,228,143,.22),rgba(245,195,62,.10));
      border:1px solid rgba(255,228,143,.18);
      font-size:18px;
    }

    .mini-copy strong{
      display:block;
      margin-bottom:4px;
      font-size:16px;
    }

    .mini-copy span{
      display:block;
      color:var(--muted);
      font-size:14px;
      line-height:1.4;
    }

    .trust-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:12px;
      margin-top:14px;
      position:relative;
      z-index:2;
    }

    .trust{
      border-radius:22px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.09);
      padding:18px 18px 16px;
      min-height:142px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    .trust h3{
      margin:0 0 8px;
      font-size:19px;
      line-height:1.1;
    }

    .trust p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.45;
    }

    .bottom-bar{
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:15px;
      position:relative;
      z-index:2;
    }

    .status-chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(110,255,170,.10);
      border:1px solid rgba(110,255,170,.20);
      color:#e4ffed;
      font-weight:800;
      margin-top:14px;
    }

    .status-chip .dot{
		
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 14px rgba(156,240,185,.55);
    }

    /* =========================================================
       Section:
       Mr Know fixed corner guide.
       Edit these values to control size and hover behaviour.
       ========================================================= */
    .mrknow-widget{
      --mrknow-size:clamp(310px, min(24vw, 48vh), 520px);
      --mrknow-hover-scale:1.5;
      --mrknow-image-ratio:.667;
      --mrknow-side-offset:clamp(8px, 1.2vw, 22px);
      position:fixed;
      top:8px;
      left:var(--mrknow-side-offset) !important;
      z-index:99999;
      display:flex;
      align-items:flex-start;
      gap:14px;
      pointer-events:none;
      overflow:visible;
    }

    .mrknow-widget.is-right{
      left:auto !important;
      right:var(--mrknow-side-offset) !important;
    }

    .mrknow-link{
      display:block;
      text-decoration:none;
      line-height:0;
      pointer-events:auto;
      overflow:visible;
    }

    .mrknow-image{
      display:block;
      width:auto;
      height:auto;
      transform-origin:top left;
      transition:
        transform .28s ease,
        filter .28s ease,
        opacity .28s ease;
      filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
      pointer-events:none;
    }

    /* Section:
       First arrival at site.
       Uses viewport-aware sizing so the guides become stronger on larger screens.
    */
    .mrknow-widget.is-large .mrknow-image{
      height:var(--mrknow-size);
      max-width:min(48vw, 460px);
    }

    .mrknow-widget.is-large .mrknow-link{
      width:calc(var(--mrknow-size) * var(--mrknow-image-ratio));
      height:var(--mrknow-size);
    }

    /* Section:
       Normal always-visible top-left icon.
       Change this height to alter the persistent small icon size.
    */
    .mrknow-widget.is-small .mrknow-image{
      height:92px;
      max-width:none;
    }

    .mrknow-widget.is-small .mrknow-link{
      width:92px;
      height:92px;
    }

    /* Section:
       Hover growth size.
       Change --mrknow-hover-scale above if you want more or less enlargement.
    */
    .mrknow-widget.is-small.is-hovered .mrknow-image,
    .mrknow-widget.is-small .mrknow-link:hover .mrknow-image{
      transform:scale(3);
      pointer-events:none;
    }

    .mrknow-widget.is-large.is-hovered .mrknow-image,
    .mrknow-widget.is-large .mrknow-link:hover .mrknow-image{
      transform:scale(var(--mrknow-hover-scale));
      pointer-events:none;
    }

    /* Section:
       Question bubble position.
       Increase margin-top to move it down.
       Increase margin-left to move it right away from his face.
    */
    .mrknow-bubble{
      position:absolute;
      top:calc(var(--mrknow-size) * .45);
      left:calc(var(--mrknow-size) * .52) !important;
      margin:0;
      padding:12px 16px;
      border-radius:18px;
      background:rgba(10,20,34,.94);
      color:#fff;
      font-size:15px;
      font-weight:700;
      line-height:1.2;
      white-space:nowrap;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 10px 24px rgba(0,0,0,.25);
      opacity:0;
      transform:translateY(-6px);
      pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
    }

    .mrknow-widget.is-right .mrknow-bubble{
      left:auto !important;
      right:calc(var(--mrknow-size) * .52) !important;
      text-align:right;
    }

    .mrknow-question-link{
      color:#ffffff;
      text-decoration:none;
      display:inline-block;
      pointer-events:auto;
    }

    .mrknow-question-link:hover{
      color:#ffe58f;
      text-decoration:underline;
    }

    .mrknow-widget.is-hovered .mrknow-bubble,
    .mrknow-widget:has(.mrknow-link:hover) .mrknow-bubble,
    .mrknow-widget:focus-within .mrknow-bubble{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }

    /* Section:
       Keep page content visually below Mr Know and footer.
    */
    main,
    .page,
    .hero-shell,
    .wrap,
    .container,
    .panel,
    .hero,
    .stage-wrap,
    .results-wrap,
    .certificate-wrap{
      position:relative;
      z-index:1;
    }

    /* =========================================================
       Section:
       Legal footer in normal page flow.
       ========================================================= */
    .xt-site-footer.site-footer-fixed{
      position:relative;
      z-index:3;
      min-height:34px;
      margin-top:16px;
      overflow:visible;
      background:rgba(6,10,18,.78);
      border-top:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
    }

    .xt-site-footer.site-footer-fixed .xt-site-footer-inner{
      min-height:34px;
      padding:7px 12px;
      font-size:13px;
      line-height:1.35;
      color:rgba(255,255,255,.82);
      background:rgba(3,10,18,.74);
    }

    .xt-site-footer.site-footer-fixed a{
      color:rgba(190,225,255,.95);
      text-decoration:none;
    }

    .xt-site-footer.site-footer-fixed a:hover{
      text-decoration:underline;
    }

    .xt-site-footer-sep{
      margin:0 3px;
      opacity:.45;
    }

    .xt-site-footer:not(.site-footer-fixed){
      position:relative;
      z-index:3;
      width:min(1280px, calc(100% - 28px));
      margin:0 auto 12px;
      color:rgba(214,234,248,.92);
    }

    .xt-site-footer:not(.site-footer-fixed) .xt-site-footer-inner{
      min-height:34px;
      padding:7px 12px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background:rgba(3,10,18,.62);
      box-shadow:0 12px 34px rgba(0,0,0,.18);
    }

    /* =========================================================
       Section:
       Responsive adjustments.
       ========================================================= */
    @media (max-width: 980px){
      .mrknow-widget{
        --mrknow-size:clamp(220px, 32vw, 330px);
        --mrknow-hover-scale:1.5;
      }

      .hero-grid{grid-template-columns:1fr}
      .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media (max-width: 700px){
      .mrknow-widget{
        --mrknow-size:clamp(150px, 38vw, 220px);
        --mrknow-hover-scale:1.55;
        --mrknow-side-offset:8px;
      }

      .mrknow-widget.is-small .mrknow-image{
        height:68px;
      }

      .mrknow-widget.is-small .mrknow-link{
        width:68px;
        height:68px;
      }

      .mrknow-widget.is-small.is-hovered .mrknow-image,
      .mrknow-widget.is-small .mrknow-link:hover .mrknow-image{
        transform:scale(2.2);
      }

      .mrknow-bubble{
        top:calc(var(--mrknow-size) * .5);
        font-size:13px;
        padding:10px 12px;
        max-width:60vw;
        white-space:normal;
      }
    }

    @media (max-width: 640px){
      .page{
        min-height:calc(100vh - 14px);
        margin:7px auto;
      }

      .hero-shell{
        min-height:calc(100vh - 14px);
        padding:20px 16px 16px;
        border-radius:26px;
      }

      .cta-grid{grid-template-columns:1fr}
      .trust-grid{grid-template-columns:1fr}

      .bottom-bar{
        font-size:14px;
      }

      .cta{
        min-height:56px;
        font-size:16px;
      }
    }
    body.trial-feedback-open{overflow:hidden}

    .trial-exit-feedback[hidden]{display:none}

    .trial-exit-feedback{
      position:fixed;
      inset:0;
      z-index:2147483005;
      display:grid;
      place-items:center;
      padding:18px;
    }

    .trial-exit-feedback-backdrop{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      padding:0;
      border:0;
      background:rgba(3,9,17,.76);
      cursor:pointer;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    .trial-exit-feedback-card{
      position:relative;
      width:min(660px, 100%);
      max-height:calc(100dvh - 36px);
      overflow:auto;
      padding:clamp(22px, 4vw, 34px);
      border:1px solid rgba(255,255,255,.2);
      border-radius:24px;
      background:linear-gradient(155deg,rgba(14,51,76,.98),rgba(5,18,32,.98));
      box-shadow:0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
      text-align:center;
    }

    .trial-exit-feedback-kicker{
      display:inline-flex;
      padding:7px 11px;
      border-radius:999px;
      background:rgba(255,229,143,.13);
      color:var(--gold1);
      font-size:13px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .trial-exit-feedback-card h2{
      margin:14px 0 8px;
      color:#fff;
      font-size:clamp(26px, 5vw, 38px);
      line-height:1.08;
      outline:none;
    }

    .trial-exit-feedback-card > p{
      margin:0 auto 18px;
      color:var(--muted);
      line-height:1.5;
    }

    .trial-exit-feedback-options{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }

    .trial-exit-feedback-options button,
    .trial-exit-feedback-skip{
      min-height:48px;
      border:1px solid rgba(255,255,255,.17);
      border-radius:14px;
      padding:10px 14px;
      background:rgba(255,255,255,.09);
      color:#fff;
      font:800 15px/1.25 Arial,Helvetica,sans-serif;
      cursor:pointer;
    }

    .trial-exit-feedback-options button:hover,
    .trial-exit-feedback-options button:focus-visible{
      border-color:rgba(255,229,143,.76);
      background:rgba(255,229,143,.16);
      outline:2px solid transparent;
    }

    .trial-exit-feedback-options button:disabled{opacity:.56;cursor:default}

    .trial-exit-feedback-card .trial-exit-feedback-status{
      min-height:24px;
      margin:14px 0 0;
      color:var(--success);
      font-weight:800;
    }

    .trial-exit-feedback-skip{
      min-height:38px;
      margin-top:4px;
      border-color:transparent;
      background:transparent;
      color:rgba(222,237,248,.78);
      text-decoration:underline;
    }

    /* =========================================================

    @media (max-width: 700px){
      .trial-exit-feedback-options{grid-template-columns:1fr}
    }