/* ==========================================================================
   Enter the Arena — avinashanandsingh.com/eta.html
   Restyled 20 Sep 2026 to follow the programme deck's own design.

   The deck's signatures, and where each one lives here:

     • Gold gradient title slide, white Cinzel caps, a ghosted star.  .eta-hero
     • Near-black brown ground with a soft brown vignette.            .eta
     • BOLD SANS headings on content slides — Cinzel is reserved for
       the opening and closing titles only.                           .eta h2
     • A full-width gold bar closing most slides, carrying one line
       in dark brown.                                                 .eta-bar
     • Cream/tan filled boxes with dark text for the certification
       and structure slides.                                          .cream
     • Dashed-ring circles for the philosophy slide.                  .eta-rings
     • Tan pill shapes for the money, tier names in the deck's green. .eta-offer
     • Green + peach alternating lines on the closing slide.          .eta-close

   Mobile-first; every multi-column block is single-column until there is room.
   ========================================================================== */

.eta {
   --ink: #150d06;
   --ink-2: #1d1309;
   --card: #271a0d;
   --line: rgba(232, 200, 125, 0.22);
   --gold: #e8c87d;
   --gold-2: #c9a227;
   --gold-soft: rgba(232, 200, 125, 0.1);
   --cream: #ffd98a;
   --cream-ink: #3a2a08;
   --text: #f4efe4;
   --muted: #bda98a;
   --green: #7cc86f;
   --peach: #f5c99a;
   --serif: "Cinzel", Georgia, serif;
   --sans: "Montserrat", system-ui, sans-serif;

   position: relative;
   background: var(--ink);
   color: var(--text);
   font-family: var(--sans);
   overflow-x: hidden;
}

/* The deck's soft brown curves down both edges of every content slide. */
.eta::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
      radial-gradient(60% 55% at -8% 18%, rgba(120, 82, 30, 0.42), transparent 70%),
      radial-gradient(60% 55% at 108% 82%, rgba(120, 82, 30, 0.38), transparent 70%);
}

.eta > * {
   position: relative;
   z-index: 1;
}

.eta section {
   padding: clamp(46px, 7vw, 92px) 0 0;
}

.eta .wrap {
   width: min(100% - 32px, 1180px);
   margin-inline: auto;
   padding-bottom: clamp(40px, 6vw, 76px);
}

.eta .band {
   background: rgba(0, 0, 0, 0.28);
}

/* ------------------------------------------------------------- headings -- */

.eta .eyebrow {
   display: inline-block;
   margin: 0 0 14px;
   padding: 6px 15px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--gold-soft);
   color: var(--gold);
   font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.73rem);
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

/* Bold sans, centred — the deck's content slides, not a serif. */
.eta h2 {
   margin: 0 0 16px;
   font-family: var(--sans);
   font-weight: 800;
   font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
   line-height: 1.18;
   letter-spacing: -0.01em;
   color: #fff;
   text-wrap: balance;
}

.eta .lede {
   max-width: 68ch;
   margin: 0;
   font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem);
   line-height: 1.68;
   color: #e2d8c6;
}

/* The deck italicises the programme name in gold every time it appears. */
.eta .lede b,
.eta .lede strong,
.eta .name {
   color: var(--gold);
   font-weight: 700;
   font-style: italic;
}

.eta .centered {
   text-align: center;
}

.eta .centered .lede {
   margin-inline: auto;
}

/* --------------------------------------------------------- the gold bar -- */
/*
   Almost every slide in the deck ends on a full-width gold gradient band with
   a single line of dark brown text. It is the deck's strongest recurring
   device, so it is a real full-bleed band here rather than a quoted block.
*/
.eta-bar {
   margin: 0;
   padding: clamp(16px, 2.6vw, 26px) clamp(16px, 5vw, 48px);
   background: linear-gradient(90deg, #6b5320 0%, #d9b96b 35%, #e7cd8c 55%, #6b5320 100%);
   color: #22180a;
   font-size: clamp(0.98rem, 0.9rem + 0.55vw, 1.35rem);
   font-weight: 600;
   line-height: 1.45;
   text-align: center;
   text-wrap: balance;
}

.eta-bar b {
   font-weight: 800;
}

/* ----------------------------------------------------------------- hero -- */

.eta-hero {
   position: relative;
   isolation: isolate;
   padding: clamp(50px, 9vw, 104px) 0 0;
   background: linear-gradient(
      180deg,
      #c8960c 0%,
      #b0820d 14%,
      #7d5c12 42%,
      #33230d 78%,
      var(--ink) 100%
   );
}

/* The ghosted star from the title slide. */
.eta-hero::after {
   content: "";
   position: absolute;
   top: 4%;
   right: -6%;
   width: min(62vw, 620px);
   aspect-ratio: 1;
   z-index: -1;
   background: rgba(255, 255, 255, 0.07);
   clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
      50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
   );
}

.eta-hero .wrap {
   padding-bottom: clamp(34px, 5vw, 60px);
}

.eta-hero h1 {
   margin: 0 0 clamp(18px, 3vw, 28px);
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(2.4rem, 1.3rem + 5.4vw, 6rem);
   line-height: 0.98;
   letter-spacing: 0.01em;
   color: #fff;
   text-transform: uppercase;
   text-shadow: 0 6px 26px rgba(0, 0, 0, 0.3);
}

.eta-hero h1 span {
   display: block;
}

/* The thin rule with a dot, from the title slide. */
.eta-rule {
   position: relative;
   width: min(420px, 78%);
   height: 1px;
   margin: 0 0 clamp(22px, 3.4vw, 32px);
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1));
}

.eta-rule::after {
   content: "";
   position: absolute;
   left: 26%;
   top: 50%;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #f0e2bf;
   translate: -50% -50%;
}

.eta-hero .tag {
   max-width: 34ch;
   margin: 0 0 clamp(22px, 3.5vw, 32px);
   font-size: clamp(1.02rem, 0.94rem + 0.75vw, 1.55rem);
   line-height: 1.38;
   color: #fff;
}

.eta-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0 0 clamp(24px, 4vw, 34px);
   padding: 0;
   list-style: none;
}

.eta-chips li {
   padding: 8px 15px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.18);
   font-size: 0.82rem;
   color: #fff;
}

.eta-chips li b {
   font-weight: 800;
}

/* ------------------------------------------------------------- buttons --- */

.eta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.eta-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 54px;
   padding: 0 clamp(24px, 3.4vw, 38px);
   border: 0;
   border-radius: 999px;
   background: linear-gradient(180deg, #ffe6a8, #d9ad42);
   color: #24170a;
   font-family: inherit;
   font-weight: 700;
   font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
   text-decoration: none;
   white-space: nowrap;
   touch-action: manipulation;
   box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
   transition: transform 0.18s ease, filter 0.18s ease;
}

.eta-btn:hover {
   transform: translateY(-2px);
   filter: brightness(1.06);
   color: #24170a;
}

.eta-btn:active { transform: translateY(0) scale(0.99); }

.eta-btn--ghost {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.4);
   color: #fff;
   box-shadow: none;
}

.eta-btn--ghost:hover {
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
}

.eta-btn:focus-visible {
   outline: 3px solid var(--cream);
   outline-offset: 3px;
}

/* ---------------------------------------------------------------- grids -- */

.eta-grid {
   display: grid;
   gap: 16px;
   margin-top: clamp(26px, 4vw, 42px);
}

@media (min-width: 640px) {
   .eta-grid.two { grid-template-columns: repeat(2, 1fr); }
   .eta-grid.three,
   .eta-grid.four { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
   .eta-grid.three { grid-template-columns: repeat(3, 1fr); }
   .eta-grid.four { grid-template-columns: repeat(4, 1fr); }
}

/* Dark column, the deck's default. Headings in gold, body in cream-grey. */
.eta-card {
   padding: clamp(20px, 3vw, 28px);
   border: 1px solid var(--line);
   border-radius: 14px;
   background: linear-gradient(180deg, var(--card), rgba(0, 0, 0, 0.25));
   text-align: left;
}

.eta-card h3 {
   margin: 0 0 10px;
   font-weight: 800;
   font-size: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);
   line-height: 1.3;
   color: var(--gold);
}

.eta-card p {
   margin: 0;
   font-size: 0.92rem;
   line-height: 1.62;
   color: #d9cdb8;
}

.eta-card ul {
   margin: 12px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 8px;
}

.eta-card li {
   display: flex;
   gap: 10px;
   font-size: 0.89rem;
   line-height: 1.5;
   color: var(--text);
}

.eta-card li::before {
   content: "";
   flex: none;
   width: 6px;
   height: 6px;
   margin-top: 8px;
   rotate: 45deg;
   background: var(--gold-2);
}

/*
   CREAM BOXES — the certification and structure slides invert: a solid
   tan panel carrying dark brown text.
*/
.eta-card.cream {
   border-color: transparent;
   background: linear-gradient(180deg, #ffe0a0, var(--cream));
   text-align: center;
}

.eta-card.cream h3 {
   margin: 0;
   color: var(--cream-ink);
   font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
   line-height: 1.34;
}

.eta-card.cream p {
   margin: 6px 0 0;
   color: rgba(58, 42, 8, 0.72);
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

/* ---------------------------------------------------------- numbered Qs -- */

.eta-asks {
   display: grid;
   gap: 12px;
   margin: clamp(26px, 4vw, 40px) 0 0;
   padding: 0;
   list-style: none;
   text-align: left;
}

.eta-asks li {
   display: flex;
   gap: 14px;
   padding: 16px 18px;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.3);
   font-size: clamp(0.92rem, 0.88rem + 0.3vw, 1.04rem);
   line-height: 1.55;
}

/* The deck marks each question with a gold double chevron. */
.eta-asks li::before {
   content: "\00BB";
   flex: none;
   color: var(--gold-2);
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1.1;
}

/* --------------------------------------------------------------- phases -- */

.eta-phase h3 {
   margin: 0 0 4px;
   font-weight: 800;
   font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
   color: #fff;
}

.eta-phase .meta {
   margin: 0 0 18px;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--green);
}

/* Cream stacked blocks, as on the structure slide. */
.eta-steps {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 10px;
}

.eta-steps li {
   padding: 15px 18px;
   border-radius: 6px;
   background: linear-gradient(180deg, #ffe0a0, var(--cream));
   color: var(--cream-ink);
   font-size: 0.94rem;
   font-weight: 600;
   line-height: 1.42;
   text-align: center;
}

.eta-steps li b {
   display: block;
   font-weight: 800;
   font-style: italic;
}

/* ----------------------------------------------------------- outcome kv -- */

.eta-outcomes {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
   gap: 12px;
   margin: clamp(26px, 4vw, 40px) 0 0;
   padding: 0;
   list-style: none;
   text-align: left;
}

.eta-outcomes li {
   display: flex;
   gap: 11px;
   padding: 15px 17px;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.3);
   font-size: 0.9rem;
   font-weight: 600;
   font-style: italic;
   line-height: 1.45;
   color: #fff;
}

.eta-outcomes li::before {
   content: "\2713";
   flex: none;
   color: var(--gold);
   font-style: normal;
   font-weight: 700;
}

/* ---------------------------------------------------- philosophy rings -- */
/*
   The philosophy slide is four brown discs with a dashed gold ring. Circles
   only where they fit: below 560px they relax into rounded blocks so the text
   is never squeezed into a disc too small to hold it.
*/
.eta-rings {
   display: grid;
   gap: 16px;
   margin: clamp(26px, 4vw, 42px) 0 0;
   padding: 0;
   list-style: none;
   justify-items: center;
}

@media (min-width: 560px) {
   .eta-rings { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
   .eta-rings { grid-template-columns: repeat(4, 1fr); }
}

.eta-rings li {
   display: grid;
   place-items: center;
   width: 100%;
   max-width: 230px;
   padding: 22px;
   border: 2px dashed var(--gold);
   border-radius: 18px;
   background: #3a2711;
   color: #fff;
   font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
   font-weight: 600;
   line-height: 1.35;
   text-align: center;
   text-wrap: balance;
}

@media (min-width: 560px) {
   .eta-rings li {
      aspect-ratio: 1;
      border-radius: 50%;
      padding: 26px;
   }
}

/* --------------------------------------------------------------- people -- */

.eta-person {
   display: grid;
   grid-template-columns: 84px 1fr;
   gap: 16px;
   align-items: start;
   padding: clamp(18px, 2.6vw, 26px);
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.3);
   text-align: left;
}

@media (min-width: 560px) {
   .eta-person { grid-template-columns: 112px 1fr; gap: 20px; }
}

.eta-person img {
   width: 100%;
   aspect-ratio: 1;
   border-radius: 10px;
   object-fit: cover;
   object-position: 50% 22%;
   background: var(--card);
}

.eta-person h3 {
   margin: 0;
   font-weight: 800;
   font-size: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);
   color: #fff;
}

.eta-person .role {
   margin: 3px 0 10px;
   font-size: 0.84rem;
   font-style: italic;
   color: var(--gold);
}

.eta-person p {
   margin: 0;
   font-size: 0.89rem;
   line-height: 1.6;
   color: #d3c6b0;
}

/* ---------------------------------------------------------------- story -- */

.eta-story {
   padding: clamp(20px, 3vw, 30px);
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.3);
   text-align: left;
}

.eta-story header {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
   text-align: center;
}

.eta-story img {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   object-fit: cover;
   background: var(--card);
}

.eta-story h3 {
   margin: 0;
   font-weight: 800;
   font-size: 1.02rem;
   color: var(--gold);
}

.eta-story .role {
   margin: 2px 0 0;
   font-size: 0.82rem;
   font-style: italic;
   color: var(--muted);
}

.eta-story p {
   margin: 0 0 10px;
   font-size: 0.9rem;
   line-height: 1.68;
   color: #e7ded0;
}

.eta-story p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ pricing --- */

.eta-price {
   display: grid;
   gap: 22px;
   margin-top: clamp(26px, 4vw, 42px);
   text-align: left;
}

@media (min-width: 900px) {
   .eta-price {
      grid-template-columns: 1fr 1px 1fr;
      gap: 34px;
   }
   .eta-divider {
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--gold-2), transparent);
   }
}

.eta-price h3 {
   margin: 0 0 16px;
   font-weight: 800;
   font-size: clamp(1rem, 0.94rem + 0.4vw, 1.16rem);
   line-height: 1.4;
   color: #fff;
}

.eta-rows {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 10px;
}

.eta-rows li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 14px;
   font-size: 0.93rem;
   color: #d9cdb8;
}

/* The deck sets every amount in a tan ellipse. */
.eta-rows li b,
.eta-offer .amt {
   flex: none;
   padding: 9px 20px;
   border-radius: 999px;
   background: linear-gradient(180deg, #e7c489, #c9a15f);
   color: #2b1d08;
   font-size: 0.92rem;
   font-weight: 800;
   white-space: nowrap;
}

.eta-rows li.total {
   margin-top: 4px;
   padding-top: 14px;
   border-top: 1px solid var(--line);
   color: #fff;
   font-weight: 700;
}

.eta-offer {
   display: grid;
   gap: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.eta-offer li {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
}

.eta-offer .who {
   font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
   font-weight: 600;
   color: var(--green);
}

.eta-note {
   margin: 18px 0 0;
   font-size: 0.86rem;
   font-weight: 700;
   line-height: 1.6;
   color: #fff;
}

/* ---------------------------------------------------------------- batch -- */

.eta-batch {
   display: grid;
   gap: clamp(22px, 4vw, 40px);
   align-items: center;
   text-align: left;
}

@media (min-width: 880px) {
   .eta-batch { grid-template-columns: 1.15fr 0.85fr; }
}

.eta-batch figure {
   margin: 0;
   border: 1px solid var(--line);
   border-radius: 12px;
   overflow: hidden;
}

.eta-batch figure img {
   display: block;
   width: 100%;
   height: auto;
}

.eta-batch figcaption {
   padding: 13px 16px;
   background: rgba(0, 0, 0, 0.4);
   color: var(--gold);
   font-size: 0.88rem;
   font-weight: 600;
}

.eta-date .k {
   margin: 0 0 4px;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--muted);
}

.eta-date .v {
   margin: 0 0 22px;
   font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
   font-weight: 800;
   line-height: 1.15;
   color: var(--green);
}

/* -------------------------------------------------------------- gallery -- */

.eta-shots {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   margin-top: clamp(24px, 4vw, 36px);
}

@media (min-width: 720px) {
   .eta-shots { grid-template-columns: repeat(4, 1fr); }
}

.eta-shots img {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: 8px;
}

/* ---------------------------------------------------------------- close -- */

.eta-close {
   text-align: center;
   background:
      radial-gradient(760px 420px at 50% 10%, rgba(120, 82, 30, 0.5), transparent 68%),
      #0d0804;
}

/* The closing slide alternates peach and green, line by line. */
.eta-close .lines {
   margin: 0 0 clamp(22px, 3.4vw, 34px);
   font-size: clamp(1.15rem, 1rem + 1.1vw, 2rem);
   font-weight: 500;
   line-height: 1.55;
   color: var(--peach);
}

.eta-close .lines b {
   font-weight: 500;
   color: var(--green);
}

.eta-close h2 {
   margin: 0 0 clamp(24px, 4vw, 36px);
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(2.1rem, 1.2rem + 4.4vw, 5rem);
   line-height: 1;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   color: var(--green);
}

.eta-close .eta-actions { justify-content: center; }

/* The one action, always reachable on a phone. */
.eta-sticky {
   position: fixed;
   inset-inline: 0;
   bottom: 0;
   z-index: 60;
   display: flex;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
   background: rgba(13, 8, 4, 0.96);
   border-top: 1px solid var(--line);
}

.eta-sticky .eta-btn { flex: 1; min-height: 48px; }

@media (min-width: 760px) {
   .eta-sticky { display: none; }
}

@media (max-width: 759px) {
   .eta-tail .wrap { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
   .eta-btn { transition: none; }
}

/*
   A batch whose date has gone is struck, not deleted. The reader can still see
   the programme has already run once this year, which is evidence; deleting it
   would just leave a gap. <s> carries the meaning ("no longer accurate"), the
   class drops it out of the live green so only the next date reads as current.
*/
.eta-date .v.past {
   color: var(--muted);
}

.eta-date .v.past s {
   text-decoration-thickness: 2px;
   text-decoration-color: rgba(189, 169, 138, 0.75);
}