:root{
    --navy:#0A2540;
    --ocean:#1479C9;
    --ocean-dark:#0E5A99;
    --aqua-tint:#EFF7FC;
    --coral:#FF5A36;
    --slate:#4A5568;
    --line:#DCE7EF;
    --white:#FFFFFF;
  }

  .wrap{
    max-width:920px;
    margin:0 auto;
    padding:0 28px;
  }

  .section-inner {
    max-width: 70%;
    margin: 0px auto;
}
  section.tint{ background:var(--off-white); }


  .content-placeholder{ padding-bottom: 60px;
    margin-top: 30px; }
    .tint .content-placeholder{ padding-bottom: 60px;
    padding-top: 30px; }
  .kicker{
    display:inline-block;
    color:var(--ocean-dark);
    font-weight:600;
    font-size:0.82em;
    margin-bottom:6px;
  }

  .lede{
    font-size:1.12em;
    text-align: start;
  }

  .intro-box{
    border-left:4px solid var(--coral);
    background:var(--aqua-tint);
    padding:18px 24px;
    border-radius:2px;
    max-width:70ch;
  }

  .stepper{
    display:flex;
    flex-wrap:wrap;
    gap:28px 30px;
    margin-top:34px;
    position:relative;
  }
  .stepper::before{
    content:"";
    position:absolute;
    top:19px;
    left:5%;
    right:5%;
    height:2px;
    background:var(--line);
    z-index:0;
  }
  .step{
    position:relative;
    z-index:1;
    flex:1 1 190px;

  }
  .step .num{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--ocean);
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    font-size:1.2em;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    border:4px solid var(--white);
  }
  section.tint .step .num{ border-color:var(--aqua-tint); }
  .step p{ font-size:0.97em; margin:0; color:var(--slate); }
  .step strong{ color:var(--navy); }

  .formula-card{
    background:var(--navy);
    color:#fff;
    border-radius:6px;
    margin-top:28px;
  }

    .formula-inner {
    background: linear-gradient(rgba(0, 141, 208, 0.9), rgba(0, 141, 208, 0.4));
    color: #fff;
    padding: 32px 34px;
    border-radius: 6px;
  }

  .formula-card .formula-inner .formula{
    font-family:'Barlow Condensed', sans-serif;
    font-size:1.1em;
    font-weight:600;
    color:#fff;
  }
  .formula-card .formula-inner .formula .op{ color:#7FC2F0; margin:0 6px; }
  .formula-card .formula-inner .example{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.18);
    color:#CFE7F8;
    font-size:0.98em;
  }
  .formula-card .formula-inner .example b{ color:#fff; }

  .maths-note{
    margin-top:20px;
    font-size:0.98em;
  }

  .cheatsheet{
    margin-top:26px;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .cheat-row{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 20px;
    border-bottom:1px solid var(--line);
    background:#fff;
  }
  .cheat-row:last-child{ border-bottom:none; }
  .cheat-row.head{
    background:var(--cyan-medium-dark);
    color:#fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 20px;
  }
  .cheat-row .gap{ font-weight:600; color:var(--navy); flex:0 0 130px; }
  .cheat-row .bar-track{
    flex:1 1 auto;
    height:10px;
    background:var(--aqua-tint);
    border-radius:5px;
    overflow:hidden;
  }

  .cheat-row .bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--ocean-dark), var(--ocean));
  border-radius:5px;
  transition:width 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}
  .cheat-row.win .bar-fill{ background:var(--ctc-gold); }
  .cheat-row .pts{ flex:0 0 70px; text-align:right; font-weight:700; color:var(--navy); }
  .cheat-row.head .pts{ color:#fff; }
  .cheat-row.head .inner { background:linear-gradient(rgba(0, 141, 208, 0.9), rgba(0, 141, 208, 0.4)); padding: 10px 20px;}

  .note-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px 22px;
    margin-top:20px;
    max-width:70ch;
  }
  .note-card .dot{
    flex:0 0 auto;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--coral);
    margin-top:8px;
  }

  .conditions{
    list-style:none;
    margin:26px 0 0;
    padding:0;
    display:grid;
    gap:14px;
  }
  .conditions li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:16px 18px;
  }
  .conditions li .check{
    flex:0 0 auto;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--ocean);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:0.8em;
    font-weight:700;
  }
  .conditions li p{ margin:0; font-size:0.98em; }
  .conditions li b{ color:var(--navy); }

  .event-name a{
  display:block;
}
.event-name .badge{
  margin-left:0;
  margin-top:4px;
}

  .cal-intro{ margin-top:8px; }

  .cal-table{
    width:100%;
    border-collapse:collapse;
    margin-top:26px;
    font-size:0.94em;
  }
  .cal-table th{
    text-align:left;
    padding:10px 14px;
    border-bottom:2px solid var(--navy);
        background:var(--cyan-medium-dark);
    color:#fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cal-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  .cal-table tr:hover td{ background:rgba(255, 255, 255, 0.1); }
  .cal-table .race-no{ color: var(--cyan-medium-dark); font-size: 13px; font-weight:600; white-space:nowrap; }
  .cal-table .date{ white-space:nowrap; color:var(--slate); }
  .cal-table .dist{ text-align:right; color:var(--slate); white-space:nowrap; }
  .cal-table .event-name{ color:var(--navy); font-weight:500; }
  .cal-table .event-name a{ color:var(--navy); text-decoration:none; }
  .cal-table .event-name a:hover{ text-decoration:underline; }

  .badge{
    display:inline-block;
    font-size:0.72em;
    font-weight:600;
    color:#fff;
    background:#ff69b4;
    padding:4px 10px;
    border-radius:5px;
    letter-spacing:0.3px;
    vertical-align:middle;
    text-transform:uppercase;
    margin-left:8px;
  }

  .cal-table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .month-row td{
    padding:22px 14px 8px;
    border-bottom:none;
    font-size:1.15em;
    font-weight:600;
    color: var(--cyan-medium-dark);

  }
  .month-row:first-of-type td{ padding-top:6px; }

  @media (max-width:768px){
    .section-inner{ max-width:100%; padding: 0 20px;}
    .step .num {   margin-left:auto;
  margin-right:auto;}
    .stepper{ gap:22px; }
    .step{ flex:1 1 100%; }
    .stepper::before{ display:none; }
    .cheat-row{ padding:12px 14px; }
    .cheat-row .gap{ flex-basis:90px; }
    .cheat-row .pts{ flex-basis:60px; }

    /* Race calendar: stacked cards instead of a cramped table */
    .cal-table thead{
      position:absolute;
      width:1px; height:1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
    }
    .cal-table, .cal-table tbody, .cal-table tr{
      display:block;
      width:100%;
    }
    .cal-table td{
      display:block;
      padding:8px 4px;
      border-bottom:none;
      text-align:left;
      white-space:normal;
      word-break:break-word;
    }
    .cal-table td[data-label]::before{
      content:attr(data-label);
      display:block;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.06em;
      color:var(--slate);
      margin-bottom:2px;
    }
    .cal-table td.dist{ text-align:left; }
    .cal-table td.date{ white-space:normal; }
    .cal-table tr:not(.month-row){
      background:#fff;
      border:1px solid var(--line);
      border-radius:6px;
      padding:6px 12px;
      margin-bottom:10px;
    }
    .cal-table tr.month-row{
      margin-top:6px;
    }
    .cal-table .month-row td{
      display:block;
      text-align:left;
      padding:18px 4px 6px;
    }
    .cal-table .dist{ display:block; }
    .badge{ margin-left:0; margin-top:4px; }
  }