:root{
  --bg:#05070A;
  --bg2:#090D12;
  --page-edge:#020304;
  --text:#F5F7FA;
  --text-soft:#C7CFD9;
  --muted:#98A2AE;
  --gold:#C9A24A;
  --gold-soft:#E2C67A;
  --purple:#A855F7;
  --scarlet:#8B1E2D;
  --scarlet-bright:#FF3B30;
  --panel:rgba(255,255,255,0.035);
  --border:rgba(255,255,255,0.11);
  --max:1180px;
  --identity-red:#C93A43;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

html,
body{
  margin:0;
  min-height:100vh;
  background:#020304 !important;
  background-image:none !important;
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
  position:relative;
}

body::before,
body::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}

.site{
  min-height:100vh;
  position:relative;
  z-index:2;
  padding:18px 0 72px;
  background:#020304 !important;
  background-image:none !important;
}

.container{
  width:min(calc(100% - 44px), var(--max));
  margin:0 auto;
  background:#020304 !important;
  background-image:none !important;
}
.phase-ecg{
    display:block;
    width:180px;
    margin:18px auto 0;

    opacity:.78;

    filter:
        brightness(.88)
        drop-shadow(0 0 6px rgba(255,255,255,.08));

    transition:
        opacity .35s ease,
        filter .35s ease;

    animation:ecgGlow 5s ease-in-out infinite;
}

@keyframes ecgGlow{

    0%,100%{
        opacity:.74;
        filter:
            brightness(.86)
            drop-shadow(0 0 5px rgba(255,255,255,.06));
    }

    50%{
        opacity:.86;
        filter:
            brightness(.98)
            drop-shadow(0 0 12px rgba(255,255,255,.10));
    }
}

.phase-ecg:hover{
    opacity:.95;
    filter:
        brightness(1.05)
        drop-shadow(0 0 14px rgba(255,255,255,.12));
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px;
  background:#020304 !important;
  background-image:none !important;
}
.phase-five-lead .scarlet{
  color: var(--identity-red) !important;
}
.brand,
#logo,
#logo a{
  font-family:Georgia, "Times New Roman", serif;
  color:var(--gold-soft);
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-size:0.95rem;
  text-shadow:0 0 18px rgba(201,162,74,0.12);
}


.cover-frame {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.cover-frame::before {
  content: "";
  position: absolute;
  inset: -34px -42px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.14), transparent 32%),
    radial-gradient(circle at 50% 45%, rgba(201,162,74,0.13), transparent 38%);
  filter: blur(8px);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}

.phase-five-triad{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.45rem;

    font-family:"Cinzel",serif;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.04em;

    margin:.85rem 0 1.3rem;
    white-space:nowrap;
   opacity:1 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
}
.phase-five-triad span{
    display:inline-block;
    margin:0 .18rem;
   opacity:1 !important;
    filter:none !important;
}
.phase-five-triad .triad-power {
  color: #d8b45a !important;
  text-shadow: 0 0 8px rgba(216, 180, 90, 0.45);
}

.phase-five-triad .triad-identity {
  color: #b71f2b !important;
  text-shadow: 0 0 8px rgba(183, 31, 43, 0.45);
}

.phase-five-triad .triad-survival {
  color: #f4efe6 !important;
  text-shadow: 0 0 8px rgba(244, 239, 230, 0.35);
}

.phase-five-triad .triad-power { color: #f0c96a !important; }
.triad-identity{    color:#C93A43;}
.phase-five-triad .triad-survival { color: #ffffff !important; }

.nav-links ul{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text-soft);
  font-size:0.9rem;
}

.nav-links li{margin:0;padding:0;}
.nav-links a{opacity:0.9;transition:color .18s ease, opacity .18s ease;}
.nav-links a:hover,
.nav-links li#active a{color:var(--gold-soft);opacity:1;}

.nav-links li:last-child a{
  padding:9px 16px;
  border:1px solid rgba(201,162,74,0.42);
  border-radius:999px;
  color:var(--gold-soft);
  background:rgba(201,162,74,0.035);
}

.content-shell{
  min-height:calc(100vh - 170px);
  padding:24px 0 44px;
  background:#020304 !important;
  background-image:none !important;
}

/* Weebly editor content defaults */
.wsite-elements,
.wsite-content,
.content-shell{
  color:var(--text-soft);
  font-size:1rem;
  line-height:1.65;
}

.content-shell h1,
.wsite-elements h1,
.wsite-content h1{
  margin:0 0 18px;
  max-width:900px;
  font-family:Georgia, "Times New Roman", serif;
  color:var(--gold-soft);
  font-size:clamp(2.0rem, 4.1vw, 4.00rem);
  line-height:1.04;
  letter-spacing:0.018em;
  text-transform:uppercase;
  text-wrap:balance;
}

.content-shell h2,
.wsite-elements h2,
.wsite-content h2{
  margin:28px 0 14px;
  font-family:Georgia, "Times New Roman", serif;
  color:#F6EFE2;
  font-size:clamp(1.45rem, 2.3vw, 2.4rem);
  line-height:1.12;
}

.content-shell h3,
.wsite-elements h3,
.wsite-content h3{
  margin:24px 0 12px;
  font-family:Georgia, "Times New Roman", serif;
  color:var(--gold-soft);
  font-size:1.25rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.content-shell p,
.wsite-elements p,
.wsite-content p{
  max-width:760px;
  margin:0 0 18px;
  color:#D8D1C3;
  font-size:clamp(1rem, 1.25vw, 1.16rem);
  line-height:1.6;
}

.content-shell strong{color:#F6EFE2;}
.content-shell blockquote{
  margin:24px 0;
  padding:20px 24px;
  max-width:820px;
  border-left:3px solid var(--scarlet-bright);
  border-radius:0 18px 18px 0;
  background:linear-gradient(90deg, rgba(255,59,48,0.12), rgba(255,255,255,0.025));
  color:#E8EDF4;
  font-family:Georgia, "Times New Roman", serif;
}
.home-cover-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.ereader-frame{
  width:min(100%, 455px);
  padding:14px;
  border-radius:28px;
  background:linear-gradient(145deg,#2a2d31,#090a0c 45%,#191b1f);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 32px 70px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.07);
}

.ereader-screen{
  padding:10px;
  border-radius:20px;
  background:#010203;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.9);
}

.ereader-screen img{
  width:100%;
  border-radius:10px;
  box-shadow:0 0 18px rgba(255,255,255,.08);
}
/* Reusable Tabitha design classes for custom HTML blocks */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:7px 13px;
  border:1px solid rgba(201,162,74,0.36);
  border-left-color:rgba(255,59,48,0.66);
  border-radius:999px;
  color:var(--gold-soft);
  font-size:0.74rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  background:linear-gradient(90deg, rgba(139,30,45,0.12), rgba(201,162,74,0.035), rgba(168,85,247,0.045));
}

.hero{
  min-height:calc(100vh - 170px);
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(280px, 0.78fr);
  align-items:center;
  gap:42px;
}

.lead{
  max-width:700px;
  margin:18px 0 0;
  color:#D8D1C3;
  font-size:clamp(1rem, 1.25vw, 1.16rem);
  line-height:1.55;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:28px;
  max-width:760px;
}

.card{
  min-height:168px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(255,59,48,0.18) 0%, rgba(255,59,48,0.055) 2px, transparent 22px),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  box-shadow:inset 10px 0 22px rgba(255,59,48,0.20), 0 22px 52px rgba(0,0,0,0.35);
  backdrop-filter:blur(5px);
}

.card h2{
  margin:0 0 14px;
  color:#F6EFE2;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.08rem;
  letter-spacing:0.01em;
}

.card p{
  margin:0;
  color:#D0D6DE;
  font-size:0.91rem;
  line-height:1.62;
}

.btn,
.wsite-button .wsite-button-inner,
a.wsite-button .wsite-button-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  border:1px solid rgba(168,85,247,0.56);
  background:linear-gradient(90deg, rgba(255,59,48,0.50), rgba(139,30,45,0.30), rgba(168,85,247,0.23));
  color:white !important;
  box-shadow:0 0 0 1px rgba(255,59,48,0.12), 0 0 30px rgba(168,85,247,0.20);
  transition:transform .18s ease, box-shadow .18s ease;
}

.btn:hover,
.wsite-button .wsite-button-inner:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,0.38);
}

.panel{
  padding:26px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  box-shadow:0 22px 52px rgba(0,0,0,0.35);
  backdrop-filter:blur(5px);
}

.site-footer{
  position:relative;
  z-index:2;
  width:min(calc(100% - 44px), var(--max));
  margin:0 auto;
  padding:22px 0 34px;
  color:var(--muted);
  font-size:0.85rem;
  background:#020304 !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Forms */
.wsite-form-label{color:var(--gold-soft) !important;}
.wsite-form-input,
.wsite-search-element-input,
textarea,
input[type="text"],
input[type="email"]{
  width:100%;
  color:var(--text) !important;
  background:rgba(255,255,255,0.045) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  padding:12px 14px !important;
}

@media (max-width:980px){
  .site{padding-bottom:120px;}
  .nav{margin-bottom:40px;align-items:flex-start;}
  .hero{grid-template-columns:1fr;gap:44px;}
  .cards{grid-template-columns:1fr;max-width:520px;}
  .card{min-height:auto;}
}

@media (max-width:680px){
  .container,.site-footer{width:min(calc(100% - 32px), var(--max));}
  .nav{flex-direction:column;gap:18px;}
  .nav-links ul{gap:16px;font-size:0.86rem;}
  .content-shell h1,.wsite-content h1,.wsite-elements h1{font-size:clamp(2.25rem, 11vw, 3.35rem);}
  .lead,.content-shell p,.wsite-content p,.wsite-elements p{font-size:1rem;}
}

/* Final Weebly background override: aligns page edges with hero/widget bottom color */
html,
body,
.site,
.container,
.content-shell,
#main-wrap,
#content-wrap,
#wsite-content,
.wsite-elements,
.wsite-section,
.wsite-section-wrap,
.wsite-section-content,
.wsite-section-elements,
.site-footer,
#footer-wrap,
.content_container,
.icontent_container{
  background:#020304 !important;
  background-image:none !important;
}

.site-footer,
#footer-wrap,
footer{
  border:0 !important;
  box-shadow:none !important;
}

.wsite-custom-code{
  background:transparent !important;
  background-image:none !important;
}

.wsite-section:before,
.wsite-section:after,
.wsite-section-wrap:before,
.wsite-section-wrap:after,
.wsite-section-content:before,
.wsite-section-content:after{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
}
 /* ==========================================
   TABITHA EXPERIENCE PAGES
========================================== */

.tu-exp {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #020304;
  color: var(--text);
  padding: 54px 0 64px;
}

.tu-exp::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 12%;
  width: 280px;
  height: 620px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255,255,255,0.22),
    rgba(201,162,74,0.10) 24%,
    rgba(255,255,255,0) 62%
  );
  filter: blur(18px);
  opacity: 0.72;
  pointer-events: none;
}

.tu-exp-inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 64px), 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 0.92fr);
  gap: 72px;
  align-items: center;
}

.tu-phase-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.tu-phase-kicker::before,
.tu-phase-kicker::after {
  content: "";
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,74,0.72), transparent);
}

.tu-exp-title {
  margin: 0 0 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.9rem, 4.7vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #F6EFE2;
  white-space: nowrap;
}

.tu-tagline {
  margin: 0 0 26px;
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.tu-copy {
  max-width: 620px;
  margin: 0 0 28px;
  color: #D8D1C3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.48;
}

.tu-phase-nav {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 34px 0;
}

.tu-phase-dot {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: #D8D1C3;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
}

.tu-phase-dot span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
}

.tu-phase-dot strong {
  font-weight: 400;
  font-size: 1.1rem;
}

.tu-phase-dot.is-active span {
  border-color: rgba(201,162,74,0.85);
  background: radial-gradient(
    circle,
    rgba(255,211,102,0.95),
    rgba(201,162,74,0.38) 42%,
    rgba(255,255,255,0.05) 64%
  );
  box-shadow: 0 0 18px rgba(201,162,74,0.45);
}

.tu-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 34px;
  border-radius: 6px;
  border: 1px solid rgba(201,162,74,0.58);
  background: linear-gradient(180deg, rgba(226,198,122,0.72), rgba(139,91,26,0.72));
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 16px 38px rgba(0,0,0,0.42), 0 0 24px rgba(201,162,74,0.18);
}

.tu-cta-note {
  max-width: 620px;
  margin: 20px 0 0;
  color: #BFC4C9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.45;
}

.tu-ecg {
  display: block;
  width: min(420px, 100%);
  margin: 32px 0 0;
  opacity: 0.78;
  filter: brightness(0.88) drop-shadow(0 0 6px rgba(255,255,255,0.08));
  animation: tuEcgGlow 5s ease-in-out infinite;
}

@keyframes tuEcgGlow {
  0%, 100% {
    opacity: 0.72;
    filter: brightness(0.84) drop-shadow(0 0 5px rgba(255,255,255,0.06));
  }

  50% {
    opacity: 0.88;
    filter: brightness(0.98) drop-shadow(0 0 13px rgba(255,255,255,0.10));
  }
}

.tu-journal-wrap {
  text-align: center;
}

.tu-journal {
  position: relative;
  margin: 0 auto;
  width: min(100%, 520px);
  padding: 44px 50px 54px;
  background: #D9C9AA;
  color: #17120C;
  border-radius: 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.58), inset 0 0 70px rgba(95,64,28,0.26);
  font-family: Georgia, "Times New Roman", serif;
  transform: rotate(0.25deg);
}

.tu-journal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(139,30,45,0.35) 14.3%, transparent 14.8%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(62,82,100,0.22) 32px);
  opacity: 0.65;
  pointer-events: none;
}

.tu-journal-title {
  position: relative;
  margin: 0 0 26px;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(60,44,24,0.42);
  padding-bottom: 8px;
}

.tu-journal p {
  position: relative;
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.32;
  text-align: left;
}

.tu-journal-mark {
  position: absolute;
  right: 34px;
  bottom: 28px;
  font-size: 2.6rem;
  color: #17120C;
  opacity: 0.85;
}

.tu-exclusive {
  margin: 28px auto 0;
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .tu-exp-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 48px;
  }

  .tu-ecg {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .tu-exp-inner {
    width: min(calc(100% - 32px), 1180px);
  }

  .tu-phase-kicker {
    letter-spacing: 0.22em;
  }

  .tu-phase-kicker::before,
  .tu-phase-kicker::after {
    width: 34px;
  }

  .tu-phase-nav {
    justify-content: space-between;
    gap: 8px;
  }

  .tu-main-cta {
    width: 100%;
    padding: 0 18px;
    font-size: 0.92rem;
  }

  .tu-journal {
    padding: 34px 28px 48px;
  }

  .tu-journal p {
    font-size: 1.03rem;
  }

}


/* ==========================================
   JOURNAL PAPER IMAGE OVERLAY
   Add after the Tabitha Experience section.
   These classes are used by tabitha-hero.html.
========================================== */
.journal-panel {

    position: relative;

    top: 1px;

    width: min(100%, 500px);

    margin: 0 auto;

    z-index: 3;

}

.journal-paper-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 54px rgba(0,0,0,0.58));
}

.journal-overlay {
  position: absolute;
  top: 13%;
  left: 22%;
  right: 11%;
  bottom: 12%;
  color: #24180f;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(0.74rem, 1.25vw, 0.92rem);
  line-height: 1.28;
  overflow: hidden;
}

.journal-overlay p {
  margin: 0 0 0.54em;
}

.journal-overlay p {
  margin: 0 0 0.55em;
}

@media (max-width: 980px) {
  .tu-exp-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), 760px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 46px;
    align-items: start;
  }

  .tu-left {
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 2;
  }

  .journal-panel {
    width: min(100%, 525px);
  }
}
.crossed{
    display:inline-block;
    text-decoration:line-through;
    text-decoration-thickness:2px;
    text-decoration-color:#5b2a22;
}
.stay{
    display:inline-block;
    position:relative;
    margin-top:24px;
    font-size:1.9rem;
    font-family:"Segoe Print","Bradley Hand",cursive;
    color:#24180f;
    transform:rotate(-1deg);
}
.stay::after{
    content:"";
    position:absolute;
    left:-2px;
    width:108%;
    height:12px;
    bottom:-8px;

    border-top:2px solid #24180f;
    border-radius:50%;

    transform:rotate(-2deg);
}
@media (max-width: 640px) {
  .journal-overlay {
    top: 8.4%;
    left: 12%;
    right: 10%;
    font-size: clamp(0.72rem, 3.1vw, 0.96rem);
    line-height: 1.27;
  }

  .journal-overlay h2 {
    font-size: 0.72rem;
    margin-bottom: 0.85rem;
  }

  .journal-overlay p {
    margin-bottom: 0.42em;
  }
}


/* ==========================================
   TABITHA EXPERIENCE — MOBILE CONTENT ORDER
   Keeps each phase's visual near the top on phones.
========================================== */
@media (max-width: 700px) {
  .tu-exp {
    padding: 34px 0 48px;
  }

  .tu-exp-inner,
  .tu-exp.phase-three .tu-exp-inner,
  .tu-exp.phase-four .tu-exp-inner,
  .tu-exp.phase-five .tu-exp-inner {
    display: flex;
    flex-direction: column;
    width: min(calc(100% - 32px), 560px);
    gap: 0;
    align-items: stretch;
  }

  /* Let the left-column children participate in the mobile reading order. */
  .tu-left {
    display: contents;
  }

  .tu-phase-kicker { order: 1; }
  .tu-exp-title { order: 2; }
  .tu-tagline { order: 3; }

  /* Journal, collage, storm art, or cover appears before the longer copy. */
  .tu-phase-visual {
    order: 4;
    width: min(100%, 500px);
    margin: 8px auto 30px;
    min-width: 0;
  }

  /* Supporting copy/lead elements inherit this middle position. */
  .tu-copy,
  .tu-stage-quote,
  .storm-lead,
  .phase-five-lead,
  .phase-five-note {
    order: 5;
    width: 100%;
    max-width: none;
  }

  .tu-phase-nav {
    order: 6;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    margin: 28px 0;
  }

  .tu-main-cta {
    order: 7;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 18px;
    font-size: 0.88rem;
    letter-spacing: 0.10em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .tu-ecg {
    order: 8;
    width: min(100%, 340px);
    margin: 26px auto 0;
  }

  .tu-exp-title {
    white-space: normal;
    overflow-wrap: normal;
    font-size: clamp(2.25rem, 11vw, 3.15rem);
    line-height: 0.98;
    margin-bottom: 20px;
  }

  .tu-tagline {
    font-size: 0.98rem;
    line-height: 1.42;
    letter-spacing: 0.13em;
    margin-bottom: 20px;
  }

  .tu-copy,
  .tu-stage-quote,
  .storm-lead,
  .phase-five-lead {
    font-size: 1.03rem;
    line-height: 1.52;
  }

  .tu-phase-kicker {
    gap: 10px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
  }

  .tu-phase-kicker::before,
  .tu-phase-kicker::after {
    width: 24px;
  }

  .tu-phase-dot span {
    width: 34px;
    height: 34px;
  }

  .tu-phase-dot strong {
    font-size: 1rem;
  }

  .journal-panel,
  .media-collage-panel,
  .storm-art-button,
  .cover-stage {
    max-width: 100%;
  }

  .phase-five-right {
    top: 0;
  }
}

@media (max-width: 390px) {
  .tu-exp-inner,
  .tu-exp.phase-three .tu-exp-inner,
  .tu-exp.phase-four .tu-exp-inner,
  .tu-exp.phase-five .tu-exp-inner {
    width: min(calc(100% - 24px), 560px);
  }

  .tu-phase-dot span {
    width: 31px;
    height: 31px;
  }

  .tu-main-cta {
    font-size: 0.82rem;
    letter-spacing: 0.07em;
    padding-inline: 12px;
  }
}