.tc-page { --tc-accent: var(--accent-color, #FF9999); --tc-accent-light: var(--accent-light-color, #FFDDDD); --tc-primary: var(--primary-color, #0F7C95); --tc-secondary: var(--secondary-color, #B9E1EA); --tc-light: var(--light-color, #E2F3F7); --tc-heading: var(--heading-color, #0A4D5C); --tc-dark: var(--dark-color, #0f323a); --tc-alt: var(--alternate-color, #A3BBBF); --tc-text: var(--text-color, #4b5f63); --tc-font-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --tc-font-display: 'Lora', Georgia, serif; --tc-w-prose: 46rem; --tc-w-wide: 70rem; font-family: var(--tc-font-head); color: var(--tc-text); background: #ffffff; line-height: 1.7; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; } .tc-page *, .tc-page *::before, .tc-page *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .tc-container { max-width: var(--tc-w-prose); margin: 0 auto; padding: 0 1.5rem; } .tc-container--wide { max-width: var(--tc-w-wide); } .tc-section { padding: 5rem 0; } .tc-section--tint { background: var(--tc-light); } .tc-section--dark { background: var(--tc-dark); color: var(--tc-secondary); } .tc-page h1, .tc-page h2, .tc-page h3, .tc-page h4 { font-family: var(--tc-font-head); color: var(--tc-heading); line-height: 1.2; margin: 0 0 1.25rem; letter-spacing: -0.01em; } .tc-page h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; } .tc-page h3 { font-size: 1.25rem; font-weight: 700; } .tc-page p { margin: 0 0 1.25rem; } .tc-page p:last-child { margin-bottom: 0; } .tc-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-primary); margin-bottom: 1.25rem; } .tc-eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--tc-accent); border-radius: 2px; } .tc-display { font-family: var(--tc-font-display); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.45; color: var(--tc-heading); margin: 0 0 1.75rem; } .tc-section--dark .tc-display { color: var(--tc-light); } .tc-callout { background: var(--tc-light); border-left: 4px solid var(--tc-accent); border-radius: 0 12px 12px 0; padding: 1.5rem 1.75rem; margin: 2.25rem 0 0; } .tc-callout strong { color: var(--tc-heading); } .tc-section--tint .tc-callout { background: #ffffff; } .tc-btn { display: inline-block; font-family: var(--tc-font-head); font-weight: 800; font-size: 1.05rem; color: var(--tc-dark); background: var(--tc-accent); padding: 1rem 2.4rem; border-radius: 999px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 14px rgba(15, 50, 58, 0.18); } .tc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 50, 58, 0.24); } .tc-btn:focus-visible, .tc-page a:focus-visible, .tc-page summary:focus-visible { outline: 3px solid var(--tc-primary); outline-offset: 3px; } .tc-btn--ghost { background: transparent; color: var(--tc-primary); box-shadow: inset 0 0 0 2px var(--tc-primary); } .tc-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--tc-primary), 0 6px 16px rgba(15, 50, 58, 0.12); } .tc-btn-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--tc-text); } .tc-bar { background: var(--tc-accent-light); color: var(--tc-dark); text-align: center; font-size: 0.9rem; font-weight: 700; padding: 0.65rem 1.25rem; } .tc-hero { position: relative; background: var(--tc-dark); color: var(--tc-light); padding: 6rem 0 6.5rem; overflow: hidden; } .tc-hero__keyhole { position: absolute; right: -4rem; top: 50%; transform: translateY(-50%); width: clamp(16rem, 34vw, 26rem); opacity: 0.1; pointer-events: none; } .tc-hero__inner { position: relative; max-width: 50rem; } .tc-hero .tc-eyebrow { color: var(--tc-accent); } .tc-hero h1 { color: #ffffff; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; } .tc-hero__subhead { font-family: var(--tc-font-display); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.55rem); color: var(--tc-secondary); margin-bottom: 1.25rem; } .tc-hero__desc { font-size: 1.1rem; color: var(--tc-secondary); max-width: 40rem; margin-bottom: 2.25rem; } .tc-hero .tc-btn-note { color: var(--tc-secondary); } .tc-video__intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2rem;
}
.tc-video__intro .tc-eyebrow::before {
  display: none;
}
.tc-video__title {
  margin: 0;
}
.tc-video__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 2rem;
} .tc-question { font-family: var(--tc-font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.6rem); color: var(--tc-primary); text-align: center; margin: 2.5rem 0 1.5rem; } .tc-answer { text-align: center; font-weight: 800; color: var(--tc-heading); font-size: 1.15rem; } .tc-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; margin-bottom: 2.5rem; } .tc-layer { background: #ffffff; border: 1px solid var(--tc-secondary); border-radius: 16px; padding: 1.75rem; } .tc-layer__tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-accent); display: block; margin-bottom: 0.6rem; } .tc-layer h3 { margin-bottom: 0.75rem; } .tc-layer p { font-size: 0.98rem; } .tc-section--tint .tc-layer { border-color: #ffffff; box-shadow: 0 2px 12px rgba(15, 50, 58, 0.06); } /* ---------- EMA upgrade highlight ---------- */ .tc-ema-highlight { text-align: center; } .tc-ema-icon { width: 5rem; height: 5rem; border-radius: 50%; background: var(--tc-accent); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--tc-dark); } .tc-ema-icon svg { width: 2.3rem; height: 2.3rem; } .tc-ema-highlight .tc-display { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 0.75rem; color: #ffffff; } .tc-ema-sub { color: var(--tc-accent); font-weight: 800; font-size: 1.1rem; margin: 0; } .tc-ema-detail { text-align: left; max-width: 42rem; margin: 2.75rem auto 0; } .tc-months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .tc-month { background: #ffffff; border: 1px solid var(--tc-secondary); border-radius: 16px; padding: 1.75rem; box-shadow: 0 2px 12px rgba(15, 50, 58, 0.05); } .tc-month__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-primary); display: block; margin-bottom: 0.4rem; } .tc-month h3 { font-size: 1.35rem; margin-bottom: 0.35rem; } .tc-month__tag { font-family: var(--tc-font-display); font-style: italic; color: var(--tc-primary); margin-bottom: 0.75rem; font-size: 1.02rem; } .tc-month p { font-size: 0.98rem; } .tc-month__note { font-size: 0.85rem; color: var(--tc-alt); margin-top: 0.6rem; } .tc-jvideo {
  margin: 0 0 1rem;
}
.tc-jvideo__title {
  margin: 0 0 0.5rem;
}
.tc-jvideo__sub {
  font-size: 0.98rem;
  color: var(--tc-text);
  margin: 0;
}
.tc-descent { list-style: none; margin: 2.5rem 0; padding: 0; border-left: 2px solid rgba(185, 225, 234, 0.35); } .tc-descent li { position: relative; padding: 0.55rem 0 0.55rem 1.5rem; color: var(--tc-light); font-weight: 600; } .tc-descent li::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--tc-accent); } .tc-descent li span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--tc-secondary); } .tc-descent li:nth-child(2) { margin-left: 1.5rem; } .tc-descent li:nth-child(3) { margin-left: 3rem; } .tc-descent li:nth-child(4) { margin-left: 4.5rem; } .tc-descent li:nth-child(5) { margin-left: 6rem; } .tc-descent li:nth-child(6) { margin-left: 7.5rem; } .tc-departs { background: rgba(185, 225, 234, 0.12); border-left: 4px solid var(--tc-accent); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; color: var(--tc-light); } .tc-timeline { margin-top: 2.5rem; } .tc-stop { position: relative; padding: 0 0 2.25rem 2.25rem; border-left: 2px solid var(--tc-secondary); } .tc-stop:last-child { padding-bottom: 0; border-left-color: transparent; } .tc-stop::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--tc-accent); border: 3px solid #ffffff; box-shadow: 0 0 0 2px var(--tc-secondary); } .tc-section--tint .tc-stop::before { border-color: var(--tc-light); } .tc-stop__month { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-primary); display: block; margin-bottom: 0.3rem; } .tc-stop h3 { margin-bottom: 0.5rem; } .tc-stop p { font-size: 0.98rem; } .tc-includes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; margin-top: 2.5rem; align-items: start; } .tc-inc-card { background: #ffffff; border: 1px solid var(--tc-secondary); border-radius: 16px; padding: 2rem; } .tc-inc-card--premium { background: var(--tc-dark); border-color: var(--tc-dark); color: var(--tc-secondary); } .tc-inc-card--premium h3 { color: #ffffff; } .tc-inc-list { list-style: none; margin: 1.25rem 0 0; padding: 0; } .tc-inc-list li { position: relative; padding: 0.45rem 0 0.45rem 2rem; font-size: 0.98rem; } .tc-inc-list li::before { content: ""; position: absolute; left: 0; top: 0.72rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tc-light) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="%230F7C95" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 0.7rem no-repeat; } .tc-inc-card--premium .tc-inc-list li::before { background-color: rgba(255, 153, 153, 0.18); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="%23FF9999" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); } .tc-inc-card--premium .tc-inc-tag { color: var(--tc-accent); } .tc-inc-tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-primary); display: block; margin-bottom: 0.5rem; } .tc-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .tc-quote { background: #ffffff; border: 1px solid var(--tc-secondary); border-radius: 16px; padding: 1.9rem 2rem; margin: 0; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(15, 50, 58, 0.05); } .tc-quote::before {
  content: "\201C";
  font-family: var(--tc-font-display);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--tc-accent);
  display: block;
  margin-bottom: 0.9rem;
} .tc-quote blockquote { margin: 0 0 1.4rem; font-size: 0.96rem; flex-grow: 1; } .tc-quote blockquote p { margin-bottom: 0.9rem; } .tc-quote blockquote p:last-child { margin-bottom: 0; } .tc-quote blockquote strong { color: var(--tc-heading); font-weight: 700; } .tc-quote figcaption strong { display: block; color: var(--tc-heading); font-size: 0.98rem; } .tc-quote figcaption span { font-size: 0.85rem; color: var(--tc-alt); } .tc-steps {
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--tc-secondary);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  counter-reset: none;
}
.tc-step {
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
}
/* connector line between steps */
.tc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: calc(50% + 1.6rem);
  width: calc(100% - 3.2rem);
  height: 2px;
  background: var(--tc-secondary);
}
.tc-step__num {
  position: relative;
  z-index: 1;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--tc-accent);
  color: var(--tc-dark);
  font-family: var(--tc-font-head);
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.tc-step__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-heading);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.tc-step__sub {
  font-size: 0.88rem;
  color: var(--tc-text);
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .tc-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .tc-step:not(:last-child)::after { display: none; }
} .tc-pricing-switch { position: relative; } .tc-pricing-switch &gt; input { position: absolute; opacity: 0; pointer-events: none; } .tc-toggle { display: flex; justify-content: center; background: var(--tc-light); border-radius: 999px; padding: 0.3rem; width: max-content; max-width: 100%; margin: 2.5rem auto 0; } .tc-toggle label { cursor: pointer; padding: 0.55rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--tc-text); text-align: center; } #tc-bill-annual:checked ~ .tc-toggle label[for="tc-bill-annual"], #tc-bill-flex:checked ~ .tc-toggle label[for="tc-bill-flex"] { background: var(--tc-dark); color: #ffffff; } #tc-bill-annual:focus-visible ~ .tc-toggle label[for="tc-bill-annual"], #tc-bill-flex:focus-visible ~ .tc-toggle label[for="tc-bill-flex"] { outline: 3px solid var(--tc-primary); outline-offset: 2px; } #tc-bill-annual:checked ~ .tc-cards .tc-when-flex, #tc-bill-annual:checked ~ .tc-pay-monthly.tc-when-flex { display: none; } #tc-bill-flex:checked ~ .tc-cards .tc-when-annual { display: none; } .tc-cards.tc-cards--two { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-left: auto; margin-right: auto; margin-top: 1.75rem; } .tc-cards--two .tc-card { padding: 2rem 1.9rem 1.9rem; } .tc-cards--two .tc-card__meaning { flex-grow: 0; margin-bottom: 1.25rem; } .tc-card.tc-card--premium { background: var(--tc-dark); border-color: var(--tc-dark); box-shadow: 0 10px 30px rgba(15, 50, 58, 0.2); color: var(--tc-secondary); } .tc-card--premium .tc-card__plan { color: var(--tc-accent); } .tc-card--premium .tc-card__term, .tc-card--premium .tc-card__price { color: #ffffff; } .tc-card--premium .tc-card__price span, .tc-card--premium .tc-card__meaning, .tc-card--premium .tc-card__free { color: var(--tc-secondary); } .tc-card--premium .tc-card__plus { color: #ffffff; border-top-color: rgba(185, 225, 234, 0.25); } .tc-card--premium .tc-card__list { border-top-color: rgba(185, 225, 234, 0.25); } .tc-card--premium .tc-card__list strong { color: #ffffff; } .tc-card--premium .tc-card__list li::before { background-color: rgba(255, 153, 153, 0.18); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="%23FF9999" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); } .tc-card__plus { font-size: 0.9rem; font-weight: 800; color: var(--tc-heading); border-top: 1px solid var(--tc-light); padding-top: 1.25rem; margin: 0 0 0.2rem; text-align: left; } .tc-card__list { list-style: none; margin: 0 0 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--tc-light); text-align: left; flex-grow: 1; } .tc-card__list--flush { border-top: none; padding-top: 0.2rem; } .tc-card__list li { position: relative; padding: 0.32rem 0 0.32rem 1.7rem; font-size: 0.9rem; } .tc-card__list li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--tc-light) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="%230F7C95" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 0.62rem no-repeat; } /* ---------- how it works (pricing) ---------- */ .tc-howitworks { background: var(--tc-light); border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 2rem; } .tc-howitworks h3 { margin-bottom: 0.9rem; } .tc-howitworks p { font-size: 0.98rem; } .tc-hiw-note { border-top: 1px solid var(--tc-secondary); margin-top: 1.25rem; padding-top: 1.25rem; font-size: 0.92rem; } @media (max-width: 760px) { .tc-quotes { grid-template-columns: 1fr; } .tc-cards.tc-cards--two { grid-template-columns: 1fr; max-width: 30rem; } } .tc-std-table { width: 100%; border-collapse: collapse; margin: 1.75rem 0 0; font-size: 0.98rem; } .tc-std-table th, .tc-std-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--tc-secondary); } .tc-std-table th { font-weight: 800; color: var(--tc-heading); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .tc-std-table td:first-child { font-weight: 700; color: var(--tc-heading); } .tc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; } .tc-card { position: relative; background: #ffffff; border: 1px solid var(--tc-secondary); border-radius: 18px; padding: 2rem 1.5rem 1.75rem; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(15, 50, 58, 0.05); } .tc-card--featured { border: 2px solid var(--tc-accent); box-shadow: 0 10px 30px rgba(15, 50, 58, 0.12); } .tc-card__badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--tc-accent); color: var(--tc-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.9rem; border-radius: 999px; white-space: nowrap; } .tc-card__plan { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-primary); margin-bottom: 0.15rem; } .tc-card__term { font-weight: 700; color: var(--tc-heading); font-size: 1.1rem; margin-bottom: 1rem; } .tc-card__price { font-size: 2.15rem; font-weight: 800; color: var(--tc-heading); line-height: 1; } .tc-card__price span { font-size: 0.95rem; font-weight: 600; color: var(--tc-text); } .tc-card__meaning { font-size: 0.92rem; margin: 0.9rem 0 1.5rem; flex-grow: 1; } .tc-card .tc-btn { width: 100%; text-align: center; padding: 0.85rem 1rem; font-size: 0.98rem; } .tc-card__free { font-size: 0.82rem; text-align: center; margin-top: 0.7rem; color: var(--tc-text); } .tc-monthly-strip { margin-top: 1.75rem; background: var(--tc-light); border-radius: 14px; padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; font-size: 0.95rem; } .tc-monthly-strip p { margin: 0; } .tc-faq { margin-top: 2rem; } .tc-faq details { border-bottom: 1px solid var(--tc-secondary); } .tc-faq summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--tc-heading); padding: 1.15rem 2.25rem 1.15rem 0; position: relative; } .tc-faq summary::-webkit-details-marker { display: none; } .tc-faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--tc-accent); transition: transform 0.2s ease; } .tc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .tc-faq details &gt; div { padding: 0 0 1.25rem; font-size: 0.98rem; } .tc-closing { text-align: center; } .tc-closing .tc-display { font-size: clamp(1.5rem, 3vw, 2rem); } .tc-closing p { max-width: 40rem; margin-left: auto; margin-right: auto; color: var(--tc-secondary); } .tc-closing__sign { font-family: var(--tc-font-display); font-style: italic; font-size: 1.2rem; color: var(--tc-light); margin: 2rem 0 2.5rem; } .tc-footer { background: var(--tc-light); padding: 2.5rem 0; font-size: 0.85rem; text-align: center; color: var(--tc-text); } .tc-footer a { color: var(--tc-primary); } .tc-page [id] { scroll-margin-top: 2rem; } @media (max-width: 900px) { .tc-cards { grid-template-columns: repeat(2, 1fr); } .tc-layers { grid-template-columns: 1fr; } .tc-includes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .tc-section { padding: 3.5rem 0; } .tc-hero { padding: 4rem 0 4.5rem; } .tc-months { grid-template-columns: 1fr; } .tc-cards { grid-template-columns: 1fr; } .tc-descent li:nth-child(n) { margin-left: 0; } .tc-descent li { padding-left: 1.25rem; } } .tc-pricing-switch input { display: none;}