/* ============================================================
   ThoughtsbyIB — source/styles.css ported onto tbi-* classes.
   Every value is EXACT from the approved reference stylesheet.
   Layout properties carry !important only to beat Elementor's
   own .e-con flex rules; typography does not need it once the
   per-widget globals are off.
   ============================================================ */
:root{
  --paper:#F7F4EC; --ink:#151515; --saffron:#F2B705; --blue:#2845D6;
  --coral:#ED6A4A; --white:#fff; --muted:#696761; --line:#D9D4C8;
  --sans:'Instrument Sans',Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body,.elementor-widget-text-editor,.elementor-widget-heading{line-height:1.55}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
img{display:block;max-width:100%}
.e-con,.e-con-inner{--gap:0px}
/* The reference keeps default 1em paragraph margins — they ARE the vertical
   rhythm. Elementor strips them, so put them back at the exact computed values. */
.elementor-widget-text-editor p{margin:1em 0}
.elementor-widget:not(:last-child){margin-bottom:0}
.tbi-lede-l p{margin:21px 0}      /* 1em at 21px */
.tbi-lede-m p{margin:20px 0}      /* 1em at 20px */
.tbi-lede-s p{margin:19px 0}      /* 1em at 19px */
.tbi-feature-card p,.tbi-card p,.tbi-sidecard p{margin:17px 0}
.tbi-moment p,.tbi-stat p,.tbi-copyright p{margin:0}
/* In the reference these sit in block boxes, so the LAST child's bottom margin
   collapses out of its parent. Elementor containers are flex, which never
   margin-collapses, so drop those bottom margins explicitly. */
/* Hero copy -> buttons gap.
   styles.css declares .hero-copy as a <p>, so it carries the default 1em
   (21px) bottom margin. Keeping it gives the visible gap above the buttons
   that the reference shows. Note: this makes .tbi-hero-main 685px instead of
   the 664px measured on the reference, because Elementor's flex containers
   never margin-collapse the way the reference's block boxes do. Set this back
   to `margin-bottom:0` if the 664px height matters more than the gap. */
.tbi-hero-main .tbi-lede-l p{margin-bottom:21px}
.tbi-sidecard .elementor-widget-text-editor:last-child p{margin-bottom:0}

/* Elementor button reset — the widget inherits the Accent global
   (13px/.14em) unless we neutralise it. */
.tbi-btn .elementor-button,.tbi-read .elementor-button,
.tbi-btn .elementor-button-text,.tbi-read .elementor-button-text,
.tbi-btn .elementor-button-content-wrapper,.tbi-read .elementor-button-content-wrapper{
  border-radius:0;letter-spacing:normal;line-height:1.55;text-transform:none;
  font-family:var(--sans);font-size:17px;font-weight:700}

/* ---------- header ---------- */
.tbi-header{border-bottom:1px solid var(--line)}
.tbi-header-inner{min-height:87px;display:flex!important;flex-direction:row!important;
  justify-content:space-between!important;align-items:center!important;flex-wrap:nowrap!important}
.elementor-widget-heading.tbi-brand .elementor-heading-title{font-size:23px;font-weight:700;letter-spacing:-.05em;
  font-family:var(--sans);color:var(--ink)}
.tbi-brand i{font-family:var(--serif);font-weight:400;font-style:italic}
.tbi-brand b{color:var(--blue);font-weight:700}

.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu{
  display:flex;gap:27px;align-items:center}
.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item{
  padding:0!important;font-size:15px;font-weight:600;font-family:var(--sans);
  color:var(--ink);fill:var(--ink);letter-spacing:normal;line-height:1.55}
/* nav a:hover, nav a[aria-current=page] { color: var(--blue) }
   Both states must beat the ink rule directly above, which is (0,4,4) — so
   they are written on its own shape with one extra class. The dropdown gets
   them too: the reference rule is not inside the 900px block. */
.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item:hover,
.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active,
.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu > li.current-menu-item > a.elementor-item,
.tbi-nav nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a.elementor-item:hover,
.tbi-nav nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active,
.tbi-nav nav.elementor-nav-menu--dropdown ul.elementor-nav-menu > li.current-menu-item > a.elementor-item{
  color:var(--blue)}
.tbi-nav nav.elementor-nav-menu--main ul.elementor-nav-menu > li.tbi-navcta-item > a.elementor-item{
  border-bottom:3px solid var(--saffron);padding:8px 0!important}
.tbi-nav .elementor-menu-toggle{border:1px solid var(--ink);border-radius:0;
  padding:8px 12px;background:transparent;color:var(--ink);font-weight:700}
/* The dropdown is max-height:0 when closed, so padding on the container
   still occupies header height. Put it on the inner list instead. */
.tbi-nav .elementor-nav-menu--dropdown{background:var(--paper)!important;
  border-bottom:1px solid var(--ink);padding:0!important}
.tbi-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu{
  display:block;padding:24px;gap:0}
.tbi-nav .elementor-nav-menu--dropdown a.elementor-item{
  padding:10px 0!important;font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.55;border-bottom:0}
.tbi-nav .elementor-nav-menu--dropdown li.tbi-navcta-item > a.elementor-item{
  border-bottom:3px solid var(--saffron)!important;display:inline-block}
@media(max-width:900px){ .tbi-header-inner{min-height:75px} }

/* ---------- display type ---------- */
.elementor-widget-heading.tbi-h1 .elementor-heading-title{font-family:var(--sans);
  font-size:clamp(64px,9vw,132px);line-height:.84;letter-spacing:-.075em;
  font-weight:680;margin:24px 0 35px}
.elementor-widget-heading.tbi-h2 .elementor-heading-title,.elementor-widget-heading.tbi-display .elementor-heading-title{
  font-family:var(--sans);font-size:clamp(50px,7vw,98px);line-height:.9;
  letter-spacing:-.065em;font-weight:700;margin:0}
.tbi-serif{font-family:var(--serif);font-weight:300;font-style:italic;
  color:var(--blue);line-height:inherit}
.tbi-serif-saffron{color:var(--saffron)}
.tbi-serif-safe{color:var(--saffron)}

/* ---------- labels ---------- */
.elementor-widget-heading.tbi-eyebrow .elementor-heading-title,.elementor-widget-heading.tbi-label .elementor-heading-title{
  font-family:var(--sans);font-size:13px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:720;color:var(--blue)}
.tbi-eyebrow .elementor-heading-title:before{content:'';display:inline-block;
  width:24px;height:3px;background:var(--saffron);margin-right:10px;vertical-align:middle}
.tbi-label-light .elementor-heading-title{color:var(--saffron)}
.elementor-widget-heading.tbi-meta .elementor-heading-title{display:inline;font-family:var(--sans);font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:700}
.tbi-meta-light .elementor-heading-title{color:var(--saffron)}
.elementor-widget-heading.tbi-status .elementor-heading-title{font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--blue);font-weight:750}

/* ---------- body copy ---------- */
.tbi-lede-l p{font-size:21px;max-width:44ch}
.tbi-lede-m p{font-size:20px;max-width:59ch;color:var(--muted)}
.tbi-lede-s p{font-size:19px;max-width:48ch;color:var(--muted)}
.tbi-fine p{font-size:14px}
/* Muted is used ONLY where the reference sets it: .section-head p, .essay-card p,
   .moment p, figcaption, .pricing-note, .faq-list details p. Card and feature
   paragraphs inherit Living Ink. */
.tbi-body-muted p{color:var(--muted)}
.tbi-body-blue p{color:#D9DEFF}

/* ---------- buttons ---------- */
.tbi-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:14px 20px;border:1px solid var(--ink)}
.tbi-btn .elementor-button-content-wrapper,.tbi-read .elementor-button-content-wrapper{gap:0}

/* The approved reference defines NO button hover state, so neither do we: the
   colours below apply in every state. Setting only .elementor-button on hover
   left the inner .elementor-button-text at its base colour, which is what made
   "Enter Office Hours" go black-on-black. */
.tbi-btn-primary .elementor-button,.tbi-btn-primary .elementor-button:hover,
.tbi-btn-primary .elementor-button:focus,.tbi-btn-primary .elementor-button:active{
  background:var(--ink);border-color:var(--ink)}
.tbi-btn-primary .elementor-button,.tbi-btn-primary .elementor-button-text,
.tbi-btn-primary .elementor-button:hover,.tbi-btn-primary .elementor-button:hover .elementor-button-text{
  color:#fff}

.tbi-btn-default .elementor-button,.tbi-btn-default .elementor-button:hover,
.tbi-btn-default .elementor-button:focus,.tbi-btn-default .elementor-button:active{
  background:transparent;border-color:var(--ink)}
.tbi-btn-default .elementor-button,.tbi-btn-default .elementor-button-text,
.tbi-btn-default .elementor-button:hover,.tbi-btn-default .elementor-button:hover .elementor-button-text{
  color:var(--ink)}

.tbi-btn-accent .elementor-button,.tbi-btn-accent .elementor-button:hover{
  background:var(--saffron);border-color:var(--ink)}
.tbi-btn-accent .elementor-button,.tbi-btn-accent .elementor-button-text,
.tbi-btn-accent .elementor-button:hover,.tbi-btn-accent .elementor-button:hover .elementor-button-text{
  color:var(--ink)}

.tbi-btn-onblue .elementor-button,.tbi-btn-onblue .elementor-button:hover{
  background:transparent;border-color:#fff}
.tbi-btn-onblue .elementor-button,.tbi-btn-onblue .elementor-button-text,
.tbi-btn-onblue .elementor-button:hover,.tbi-btn-onblue .elementor-button:hover .elementor-button-text{
  color:#fff}

.tbi-read .elementor-button,.tbi-read .elementor-button:hover{background:transparent}
.tbi-read .elementor-button,.tbi-read .elementor-button-text,
.tbi-read .elementor-button:hover,.tbi-read .elementor-button:hover .elementor-button-text{
  color:var(--ink)}
.tbi-read .elementor-button{display:inline-flex;align-items:center;gap:8px;
  border:0;border-bottom:2px solid currentColor;padding:8px 0}
.elementor-widget-heading.tbi-read-static .elementor-heading-title{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid currentColor;padding:8px 0;font-weight:700;
  font-family:var(--sans);font-size:17px;color:var(--ink);letter-spacing:normal}
.tbi-read-light .elementor-button,.tbi-read-light .elementor-button-text,
.tbi-read-light .elementor-button:hover,.tbi-read-light .elementor-button:hover .elementor-button-text{
  color:#fff}

/* inside a column-flex card the reference's .read span stretches full width */
.tbi-stretch,.tbi-stretch .elementor-widget-container{width:100%}
.tbi-stretch .elementor-button{width:100%;justify-content:flex-start}

/* ---------- hero ---------- */
/* .hero is a <section> in the reference, so the global section{padding:110px 0}
   applies to it: the saffron aside sits 110px below the header, not flush. */
.tbi-hero{display:grid!important;grid-template-columns:1.1fr .9fr!important;
  gap:0!important;padding:110px 0!important}
.tbi-hero-main{min-height:650px;padding:110px max(5vw,28px)!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.tbi-hero-aside{background:var(--saffron);padding:70px!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.elementor-widget-heading.tbi-hero-quote .elementor-heading-title{font-family:var(--serif);
  font-size:clamp(36px,4vw,64px);line-height:.98;font-weight:400;font-style:normal;margin:0}
.tbi-stats{display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:1px!important;background:rgba(0,0,0,.25)}
.tbi-stat{background:var(--saffron);padding:20px!important;color:var(--ink)}
.tbi-stat p{margin:0}
.tbi-stat strong{display:block;font-size:30px;font-weight:700}
@media(max-width:900px){
  .tbi-hero{grid-template-columns:1fr!important;padding:80px 0!important}
  .tbi-hero-main{min-height:580px;padding:70px 24px!important}
  .tbi-hero-aside{padding:50px 24px!important}
}

/* ---------- section shell ---------- */
.tbi-section{padding:110px 0!important}
.tbi-wrap{width:min(1200px,calc(100% - 48px))!important;max-width:none!important;
  margin-inline:auto!important;padding:0!important}
@media(max-width:900px){
  .tbi-section{padding:80px 0!important}
  .tbi-wrap{width:min(100% - 34px,720px)!important}
}
.tbi-section-head{display:grid!important;grid-template-columns:1fr 2fr!important;
  gap:40px!important;margin-bottom:65px}
@media(max-width:900px){ .tbi-section-head{grid-template-columns:1fr!important} }
.tbi-blue{background:var(--blue);color:#fff}
.tbi-blue .elementor-heading-title{color:#fff}
.tbi-blue .tbi-label .elementor-heading-title{color:var(--saffron)}
.tbi-blue .tbi-meta .elementor-heading-title{color:var(--blue)}
.tbi-blue .tbi-meta-light .elementor-heading-title{color:var(--saffron)}
.tbi-blue .tbi-listen-art{color:#fff}
.tbi-blue .tbi-listen-art .elementor-heading-title{color:var(--blue)}
.tbi-saffron{background:var(--saffron)}
.tbi-coral{background:var(--coral);text-align:center}
.tbi-page-hero{padding:95px 0 75px!important;border-bottom:1px solid var(--line)}
@media(max-width:900px){
  .tbi-page-hero{padding:70px 0!important}
  .tbi-page-hero .tbi-h1 .elementor-heading-title{font-size:58px}
}

/* ---------- editorial / essay gutter grids ---------- */
.tbi-editorial{display:grid!important;grid-template-columns:1.2fr .8fr!important;
  gap:1px!important;background:var(--line);border:1px solid var(--line)}
.tbi-feature-card{background:var(--paper);min-height:430px;padding:40px!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.elementor-widget-heading.tbi-feature-title .elementor-heading-title{font-family:var(--serif);font-size:50px;
  line-height:1;font-weight:700;letter-spacing:normal;margin:24px 0;color:var(--ink)}
/* .editorial-grid > div - a plain block column with no background of its own.
   The hairlines are each card's border-bottom, and the last card drops it.
   NOT flex with gap + flex:1: that forces the three cards to equal heights,
   where the reference lets each size to its own content. */
.tbi-sidecol{display:block!important}
.tbi-sidecard{background:var(--paper);padding:40px!important;display:block;
  border-bottom:1px solid var(--line)}
.tbi-sidecard:last-child{border-bottom:0}
.elementor-widget-heading.tbi-side-title .elementor-heading-title{font-size:25px;line-height:1.1;margin:10px 0;
  font-weight:700;letter-spacing:normal;color:var(--ink);font-family:var(--sans)}
@media(max-width:900px){
  .tbi-editorial{grid-template-columns:1fr!important}
}

/* ---------- listen ---------- */
.tbi-listen{display:grid!important;grid-template-columns:.8fr 1.2fr!important;
  gap:70px!important;align-items:center!important}
.tbi-listen-art{background:var(--white);padding:18px!important;
  transform:rotate(1deg);box-shadow:18px 18px 0 rgba(0,0,0,.2)}
.tbi-listen-art .tbi-meta{margin:0!important}
.tbi-listen-art .tbi-meta .elementor-heading-title{
  display:block;padding:15px 5px 5px;margin:0}
/* listen.html puts .listen-art on the <img> itself (index.html wraps it in an
   <a>, which is what .tbi-listen-art above is for), so the white mount, the
   1deg tilt and the hard shadow belong to the image element here. */
.tbi-listen-mark img{background:var(--white);padding:18px;
  transform:rotate(1deg);box-shadow:18px 18px 0 rgba(0,0,0,.2);
  display:block;max-width:100%}
.tbi-ratio-4x3 img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tbi-ratio-5x4 img{aspect-ratio:5/4;object-fit:cover;width:100%}
@media(max-width:900px){ .tbi-listen{grid-template-columns:1fr!important} }

/* ---------- timeline ---------- */
.tbi-timeline{border-top:1px solid var(--ink)}
.tbi-moment{display:grid!important;grid-template-columns:110px 1fr 1fr!important;
  gap:30px!important;border-bottom:1px solid var(--ink);padding:31px 0!important}
.elementor-widget-heading.tbi-year .elementor-heading-title{font-family:var(--serif);font-size:24px;
  color:var(--blue);font-weight:400;letter-spacing:normal}
.elementor-widget-heading.tbi-mtitle .elementor-heading-title{font-size:27px;margin:0;font-weight:700;
  letter-spacing:normal;font-family:var(--sans);color:var(--ink)}
.tbi-moment p{margin:0;color:var(--muted)}
@media(max-width:900px){
  .tbi-moment{grid-template-columns:70px 1fr!important}
  .tbi-moment > :nth-child(3){grid-column:2}
}

/* ---------- cards ---------- */
/* The TBI Ecosystem Cards widget renders .tbi-cards-grid. Its columns, gap,
   card min-height and padding are all Elementor controls on the widget, so no
   layout is declared here - only the card look, taken from the reference. */
.tbi-cards-grid{display:grid}
.tbi-cards-grid .tbi-card{display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid var(--ink);
  min-height:300px;padding:30px;color:var(--ink);text-decoration:none}
/* .meta in the reference is a <span>; as a flex child it blockifies, so no
   display is declared here. */
.tbi-cmeta{font-family:var(--sans);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--blue);font-weight:700}
/* .venture h3 sets no line-height in the reference, so it inherits the body
   1.55 (32px -> 49.6px). Declaring one here made the title 33.6px tall. */
.tbi-cards-grid .tbi-ctitle{font-size:32px;letter-spacing:-.04em;margin:20px 0;
  font-weight:700;font-family:var(--sans);color:var(--ink)}
/* .venture p carries the default 1em both sides, and inherits Living Ink. */
.tbi-cards-grid .tbi-card p{margin:17px 0;color:var(--ink)}
.tbi-ccta{font-family:var(--sans);font-size:17px;color:var(--ink)}
/* The reference sets colour on .venture itself, and its .meta keeps the blue
   from the base .meta rule even on the ink card. Selectors here must out-specify
   `.tbi-cards-grid .tbi-card p` above, or the description renders ink-on-ink. */
.tbi-cards-grid .tbi-card-ink{color:#fff}
.tbi-cards-grid .tbi-card-ink .tbi-ctitle,
.tbi-cards-grid .tbi-card-ink p,
.tbi-cards-grid .tbi-card-ink .tbi-ccta{color:#fff}
.tbi-card{border:1px solid var(--ink);padding:30px!important;min-height:300px;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.elementor-widget-heading.tbi-ctitle .elementor-heading-title{font-size:32px;letter-spacing:-.04em;margin:20px 0;
  font-weight:700;font-family:var(--sans);color:var(--ink)}
.tbi-card-ink{background:var(--ink);color:#fff}
.tbi-card-ink .elementor-heading-title,.tbi-card-ink p{color:#fff}
.tbi-card-coral{background:var(--coral)}
.tbi-card-saffron{background:var(--saffron)}


/* ---------- newsletter ---------- */
.tbi-newsgrid{display:grid!important;grid-template-columns:1.2fr .8fr!important;
  gap:60px!important;align-items:end!important}
.elementor-widget-heading.tbi-newshead .elementor-heading-title{font-family:var(--serif);
  font-size:clamp(44px,6vw,76px);font-weight:400;line-height:.98;margin:0;letter-spacing:normal}

/* Real Elementor Pro form styled to the reference .form rule:
   one underlined row holding the email input and the submit, with the consent
   checkbox and fine print stacked beneath it. */
.tbi-form .elementor-form-fields-wrapper{display:flex!important;flex-wrap:wrap;
  margin:0;row-gap:0}
.tbi-form .elementor-field-group{padding:0!important;margin:0}
.tbi-form .elementor-field-type-email,
.tbi-form .elementor-field-type-submit{border-bottom:2px solid var(--ink)}
.tbi-form .elementor-field-type-email{flex:1 1 auto}
.tbi-form .elementor-field-type-submit{flex:0 0 auto;width:auto!important}
.tbi-form input[type=email].elementor-field{
  border:0!important;background:transparent!important;outline:none;
  padding:16px 2px!important;width:100%;font:inherit!important;color:var(--ink);
  border-radius:0!important;box-shadow:none!important}
.tbi-form input[type=email].elementor-field::placeholder{color:var(--muted);opacity:1}
.tbi-form input[type=email].elementor-field:focus{
  outline:3px solid var(--blue);outline-offset:4px}
.tbi-form .elementor-field-type-submit .elementor-button{
  background:transparent!important;border:0!important;border-radius:0!important;
  color:var(--ink)!important;font-family:var(--sans);font-size:17px;font-weight:800;
  padding:16px 0!important;letter-spacing:normal;text-transform:none;white-space:nowrap;
  box-shadow:none!important;width:auto}
.tbi-form .elementor-field-type-submit .elementor-button-text{
  color:var(--ink)!important;font-weight:800}
.tbi-form .elementor-field-type-acceptance{
  flex:1 1 100%;margin-top:16px;display:flex;align-items:flex-start;gap:8px}
.tbi-form .elementor-field-type-acceptance .elementor-field-option{
  display:flex;align-items:flex-start;gap:8px}
.tbi-form .elementor-field-type-acceptance label{font-size:14px;color:var(--ink);
  line-height:1.45;font-weight:400}
.tbi-form .elementor-field-type-acceptance input[type=checkbox]{
  margin:3px 0 0;accent-color:var(--ink)}
.tbi-form .elementor-message{font-size:14px;margin-top:12px;color:var(--ink)}
.tbi-form .elementor-message.elementor-message-danger{color:var(--coral)}
.tbi-form .elementor-field-type-honeypot{display:none!important}
@media(max-width:900px){ .tbi-newsgrid{grid-template-columns:1fr!important} }

/* ---------- footer ---------- */
.tbi-footer{background:var(--ink);color:#fff;padding:65px 0 35px!important}
.tbi-foot{display:grid!important;grid-template-columns:2fr repeat(3,1fr)!important;gap:45px!important}
.tbi-foot-brand-cell{grid-column:auto!important}
.elementor-widget-heading.tbi-foot-brand .elementor-heading-title{font-size:34px;font-weight:700;color:#fff;letter-spacing:normal}
.tbi-foot-brand i{font-family:var(--serif);font-weight:400;font-style:italic}
.elementor-widget-heading.tbi-foot-label .elementor-heading-title{color:var(--saffron);font-size:12px;
  text-transform:uppercase;letter-spacing:.13em;font-weight:400;margin-bottom:16px}
.tbi-footmenu ul.elementor-nav-menu{display:block}
.tbi-footmenu ul.elementor-nav-menu > li > a.elementor-item{
  display:block;color:#BBB7AE;padding:0!important;margin:8px 0 0;font-size:17px;
  font-weight:400;letter-spacing:normal;line-height:1.55}
.tbi-footmenu ul.elementor-nav-menu > li > a.elementor-item:hover{color:#fff}
.tbi-copyright{border-top:1px solid #383838;margin-top:50px;padding-top:22px!important;
  color:#888;font-size:13px;display:flex!important;flex-direction:row!important;
  justify-content:space-between!important}
.tbi-copyright p{margin:0;color:#888;font-size:13px}
@media(max-width:900px){
  .tbi-foot{grid-template-columns:1fr 1fr!important}
  .tbi-foot-brand-cell{grid-column:1/-1!important}
  .tbi-copyright{display:block!important}
  .tbi-copyright > *:last-child{margin-top:8px}
}

/* ---------- a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,.elementor-button:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ============================================================
   Components for the remaining pages, ported from styles.css.
   Thoughts / Essay / Listen / My Story / Resources / Work With Me /
   Affirmation Words. Values are EXACT from the reference.
   ============================================================ */

/* ---------- Thoughts: filters + essay cards ---------- */
/* TBI Thought Filters widget dressed as the reference .filters / .filter.
   Measured on the reference at 1366px: .filter sets no font, and a <button>
   inherits none, so Chrome's UA control font applies - Arial 13.3333px - and
   the idle label is #000, not Living Ink. Both are reproduced exactly.
   The widget's own controls (gap, alignment, chip padding, border width,
   colours, typography) layer on top of this as element CSS. */
.tbi-filters-bar{display:flex;flex-direction:row;flex-wrap:wrap;
  gap:10px;justify-content:flex-start;align-items:flex-start}
.tbi-filters{margin-top:35px}
.tbi-filters-bar button.tbi-filter{border:1px solid var(--ink);
  background:transparent;background-image:none;color:#000;border-radius:0;
  max-width:none;min-height:0;padding:9px 13px;cursor:pointer;
  font:650 13.3333px Arial;line-height:normal;letter-spacing:normal;
  text-transform:none;text-align:center;text-decoration:none;box-shadow:none;
  -webkit-appearance:none;appearance:none;transition:none}
.tbi-filters-bar button.tbi-filter.tbi-filter-active{background:var(--ink);
  border-color:var(--ink);color:#fff}
.tbi-filters-bar button.tbi-filter:hover{background:transparent;
  border-color:var(--ink);color:#000}
.tbi-filters-bar button.tbi-filter.tbi-filter-active:hover{background:var(--ink);
  border-color:var(--ink);color:#fff}
/* The reference chips have no focus or hover state; keep a keyboard ring,
   in Living Ink rather than the project blue, and nothing on a mouse click. */
.tbi-filters-bar button.tbi-filter:focus{outline:0}
.tbi-filters-bar button.tbi-filter:focus-visible{outline:2px solid var(--ink);
  outline-offset:2px}
.tbi-filter-empty{margin:24px 0 0;font-size:17px;color:var(--muted)}
/* `hidden` has to beat the display:flex the grid puts on its loop items. */
.tbi-essay-grid .e-loop-item[hidden],[data-category][hidden]{display:none!important}
.tbi-essay-card{background:var(--paper);padding:32px!important;min-height:300px;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.elementor-widget-heading.tbi-essay-title .elementor-heading-title{font-family:var(--serif);font-size:29px;
  line-height:1.05;margin:20px 0;font-weight:700;letter-spacing:normal;color:var(--ink)}
.tbi-essay-card p{color:var(--muted)}

/* ---------- Essay single ---------- */
.tbi-essay-body{max-width:780px!important;padding-top:85px!important;padding-bottom:100px!important}
.elementor-widget-heading.tbi-essay-h1 .elementor-heading-title{font-size:clamp(52px,8vw,92px);line-height:.93;
  letter-spacing:-.06em;font-weight:700;font-family:var(--sans);margin:.67em 0}
.tbi-essay-body p{font-family:var(--serif);font-size:22px;line-height:1.7}
.tbi-question p,.elementor-widget-heading.tbi-question .elementor-heading-title{font-family:var(--serif);
  font-size:30px;font-style:italic;color:var(--blue)}

/* ---------- Listen: collections + archive pair ---------- */
.tbi-collections{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:16px!important;margin-top:60px}
.tbi-collection{border-top:8px solid var(--saffron);background:#fff;
  padding:28px!important;min-height:220px}
.tbi-collection-alt{border-top-color:var(--coral)}
/* .collection h3 sets only font-size, so it keeps the UA 1em margins (26px). */
.elementor-widget-heading.tbi-collection-title .elementor-heading-title{font-size:26px;font-weight:700;
  letter-spacing:normal;color:var(--ink);font-family:var(--sans);margin:1em 0}
.tbi-archive-pair{display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:24px!important;margin-top:55px}
/* .archive-pair figure is a block box; an Elementor container is flex. */
.tbi-figure{background:#fff;padding:14px!important;display:block!important}
/* The caption is the Image widget's own <figcaption>, so it has to beat
   .elementor-widget-image .widget-image-caption - hence (0,3,0). */
.elementor-widget-image.tbi-figcap .widget-image-caption{font-family:var(--sans);
  font-size:14px;font-weight:400;font-style:normal;line-height:1.55;
  letter-spacing:normal;text-transform:none;text-align:left;color:var(--muted);
  padding:13px 4px 3px;margin:0}
.tbi-figcap figure{margin:0}
.tbi-figcap img{display:block}
/* My Story's archive pair predates the caption control and uses a Text Editor
   for its figcaption, so that shape keeps its own rule. Both shapes render the
   same 14px muted caption with the reference's 13px/4px/3px padding. */
.tbi-figcaption p{padding:13px 4px 3px;color:var(--muted);font-size:14px;margin:0}
@media(max-width:900px){
  .tbi-collections{grid-template-columns:1fr!important}
  .tbi-archive-pair{grid-template-columns:1fr!important}
}

/* ---------- My Story: story + beliefs ---------- */
.tbi-story{max-width:880px!important}
.tbi-story p{font-family:var(--serif);font-size:clamp(23px,3vw,34px);line-height:1.45}
.tbi-beliefs{margin:80px 0}
.elementor-widget-heading.tbi-belief .elementor-heading-title{font-size:clamp(36px,5vw,68px);font-weight:680;
  letter-spacing:-.055em;line-height:1;font-family:var(--sans);color:var(--ink)}
.tbi-belief{border-top:1px solid var(--ink);padding:28px 0!important}

/* ---------- Resources ---------- */
.tbi-resource-feature{display:grid!important;grid-template-columns:.9fr 1.1fr!important;
  gap:65px!important;align-items:center!important}
.tbi-resource-feature img{background:#fff;padding:10px}
.tbi-resource-list{margin-top:60px}
.tbi-resource-row{display:grid!important;grid-template-columns:260px 1fr auto!important;
  gap:30px!important;border-top:1px solid var(--ink);padding:30px 0!important;
  align-items:start!important}
.tbi-resource-row-last{border-bottom:1px solid var(--ink)}
@media(max-width:900px){
  .tbi-resource-feature{grid-template-columns:1fr!important}
  .tbi-resource-row{grid-template-columns:1fr!important}
}

/* ---------- Work With Me: paths + closing ---------- */
.tbi-paths{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important}
.tbi-path{min-height:380px;border:1px solid var(--ink);padding:40px!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.tbi-path-saffron{background:var(--saffron)}
.tbi-path-white{background:#fff}
.elementor-widget-heading.tbi-path-title .elementor-heading-title{font-size:42px;line-height:1;margin:20px 0;
  font-weight:700;letter-spacing:normal;font-family:var(--sans);color:var(--ink)}
.elementor-widget-heading.tbi-closing .elementor-heading-title{font-size:clamp(42px,6vw,76px);line-height:.95}
.tbi-notice{border:1px solid var(--ink);padding:18px!important;margin-top:25px}
.tbi-notice p{font-size:14px;margin:0}
@media(max-width:900px){ .tbi-paths{grid-template-columns:1fr!important} }

/* ---------- Affirmation Words ---------- */
.tbi-affirm-hero{padding:95px 0 105px!important}
.tbi-affirm-hero-grid{display:grid!important;grid-template-columns:1.2fr .8fr!important;
  gap:70px!important;align-items:end!important}
.elementor-widget-heading.tbi-affirm-h1 .elementor-heading-title{font-size:clamp(62px,8vw,116px);line-height:.86;
  letter-spacing:-.072em;margin:24px 0 36px;max-width:10.5ch;
  /* .affirm-hero h1 declares no weight, so it keeps the UA bold */
  font-weight:700}
.tbi-affirm-note{background:var(--saffron);padding:48px!important;min-height:490px;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.elementor-widget-heading.tbi-affirm-quote .elementor-heading-title{font-family:var(--serif);
  font-size:clamp(31px,3vw,48px);line-height:1.08;margin:45px 0;font-weight:400}
.tbi-affirm-plans{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  border:1px solid var(--ink)}
.tbi-affirm-plan{min-height:555px;padding:32px!important;display:flex!important;
  flex-direction:column!important;justify-content:space-between!important;
  border-right:1px solid var(--ink)}
.tbi-affirm-plan-last{border-right:0}
.tbi-affirm-plan-weekly{background:#fff}
.tbi-affirm-plan-monthly{background:var(--coral)}
.elementor-widget-heading.tbi-plan-count .elementor-heading-title{display:block;font-family:var(--serif);
  font-size:72px;line-height:.9;color:var(--blue);font-weight:400}
.elementor-widget-heading.tbi-plan-title .elementor-heading-title{font-size:42px;letter-spacing:-.05em;margin:12px 0}
.tbi-affirm-plan p{color:var(--muted)}
.tbi-affirm-plan-monthly p{color:var(--ink)}
.tbi-plan-price{display:flex!important;flex-direction:row!important;
  align-items:baseline!important;gap:9px!important}
.tbi-plan-price strong{font-size:42px;letter-spacing:-.05em}
.tbi-plan-price span{font-size:14px}
/* The reference declares exactly these five. The rest of this rule only puts
   Elementor's own button styling back to the UA default. Inertness comes from
   the real disabled attribute (tbi-core/affirm.php), not pointer-events. */
.tbi-plan-btn .elementor-button{padding:14px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);font:700 14px var(--sans);opacity:.62;
  border-radius:0;text-transform:none;letter-spacing:normal}
.tbi-pricing-note p{font-size:13px;color:var(--muted);margin-top:16px}
.tbi-affirm-steps{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  border-top:1px solid rgba(255,255,255,.45)}
.tbi-affirm-step{padding:34px 32px 10px 0!important;
  border-right:1px solid rgba(255,255,255,.45);margin-right:32px}
/* An Elementor container is width:100%, so a margin pushes it past its grid
   track instead of shrinking it. The reference article is 368px in a 400px
   track; width:auto restores that. */
.tbi-affirm-step{width:auto!important}
.tbi-affirm-step-last{border-right:0;margin-right:0}
.elementor-widget-heading.tbi-step-num .elementor-heading-title{color:var(--saffron);font-family:var(--serif);
  font-size:25px;font-weight:400}
.elementor-widget-heading.tbi-step-title .elementor-heading-title{font-size:29px;margin:30px 0 12px}
.tbi-affirm-origin{display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:80px!important;align-items:start!important}
.tbi-affirm-origin .tbi-display .elementor-heading-title{font-size:clamp(48px,6vw,82px);
  margin-top:28px}
.tbi-affirm-origin .tbi-story p{font-size:clamp(21px,2.3vw,29px)}
.tbi-affirm-faq{background:#fff}
.tbi-faq-list{border-top:1px solid var(--ink)}
.tbi-faq-list details{border-bottom:1px solid var(--ink)}
.tbi-faq-list summary{cursor:pointer;list-style:none;font-size:23px;font-weight:700;
  padding:25px 52px 25px 0;position:relative}
.tbi-faq-list summary::-webkit-details-marker{display:none}
.tbi-faq-list summary:after{content:'+';position:absolute;right:5px;font-size:30px;
  font-weight:400;top:18px}
.tbi-faq-list details[open] summary:after{content:'\2212'}
.tbi-faq-list details p{max-width:720px;color:var(--muted);padding:0 0 26px;margin:0}


/* ---------- misc from the reference ---------- */
.tbi-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.tbi-skip{position:absolute;left:-9999px}
.tbi-skip:focus{left:12px;top:12px;background:#fff;padding:12px;z-index:99}
.elementor-widget-heading.tbi-status .elementor-heading-title{font-weight:750}


/* ============================================================
   Newsletter field — permanently white, autofill-proof.
   Chrome tints autofilled inputs pale blue; only an inset box-shadow
   overrides it, background-color alone is ignored.
   ============================================================ */
.tbi-form .elementor-form-fields-wrapper{margin:0!important}
.tbi-form .elementor-field-type-email{
  background:#fff;border-bottom:2px solid var(--ink)}
.tbi-form input[type=email].elementor-field{
  background:#fff!important;padding:16px 14px!important;color:var(--ink)}
.tbi-form input[type=email].elementor-field::placeholder{color:var(--muted);opacity:1}
.tbi-form input[type=email]:-webkit-autofill,
.tbi-form input[type=email]:-webkit-autofill:hover,
.tbi-form input[type=email]:-webkit-autofill:focus,
.tbi-form input[type=email]:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
          box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:var(--ink)!important;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s}
.tbi-form .elementor-field-type-submit{background:#fff;border-bottom:2px solid var(--ink)}
.tbi-form .elementor-field-type-submit .elementor-button{padding:16px 14px!important}

/* success / error states */
.tbi-form .elementor-message{
  font-family:var(--sans);font-size:17px;line-height:1.55;margin-top:20px;
  padding:18px 20px;border:1px solid var(--ink);background:#fff;color:var(--ink)}
.tbi-form .elementor-message.elementor-message-success{
  border-left:6px solid var(--ink)}
.tbi-form .elementor-message.elementor-message-danger{
  border-left:6px solid var(--coral)}
.tbi-form .elementor-message:before{display:none}

/* ============================================================
   Overflow fixes found by measuring at 360/390/430
   ============================================================ */
/* the brand wordmark was being squeezed by the mobile toggle */
.tbi-header-inner > .elementor-widget-heading{flex:0 0 auto}
.tbi-header-inner > .e-con{flex:1 1 auto;min-width:0;justify-content:flex-end}
.tbi-brand .elementor-heading-title{white-space:nowrap}




/* ============================================================
   Thoughts archive (Elementor Archive template) + Essay single.
   Loop Grid + Loop Item + Taxonomy Filter + Post Content, so both
   pages stay fully editable. Values measured on the reference at 1366px:
   standalone/thoughts.html and standalone/essay.html?id=domain
   ============================================================ */

/* ---------- page hero: put block margin-collapsing back ---------- */
/* In the reference .page-hero's .wrap is a block box, so the h1's 35px bottom
   margin collapses with the paragraph's 20px top margin (35, not 55) and the
   paragraph's 20px collapses with .filters' 35px top. Elementor containers are
   flex, which never collapses, so this one wrap goes back to block. Without it
   the hero runs 40px tall. */
.tbi-section > .tbi-wrap{display:block!important}
/* the header's wrap is the flex nav row, not a prose column */
.tbi-wrap.tbi-header-inner{display:flex!important}
.tbi-page-hero .tbi-h1 .elementor-heading-title{max-width:13ch}

/* ---------- Loop Grid = .essay-grid ---------- */
/* Columns and gap stay real Elementor controls (Layout > Columns / Gap) above
   the reference's single 900px breakpoint; only the 1px gutter fill and the
   outer hairline are declared here. */
/* no border here: the hairline is each card's own 1px ring, so a filtered
   row shows only as many outlined cards as there are matching essays. */
.tbi-essay-grid{border:0}
.tbi-essay-grid .elementor-loop-container{background:transparent;overflow:hidden;
  padding:1px}
.tbi-essay-grid .tbi-essay-card{box-shadow:0 0 0 1px var(--line)}
.tbi-essay-grid .e-loop-item{display:flex;min-width:0}
.tbi-essay-grid .e-loop-item > .e-con{height:100%;width:100%}
.tbi-essay-grid .e-loop-nothing-found-message{background:var(--paper);padding:32px}
@media(max-width:900px){
  .tbi-essay-grid .elementor-loop-container{grid-template-columns:1fr!important}
}

/* ---------- Loop Item = .essay-card ---------- */
/* .essay-card > div is a flex item, so it establishes an independent
   formatting context and its last paragraph's 17px bottom margin stays inside.
   The Elementor equivalent is the same flex item switched to block, so the
   h3 and p margins collapse the way the reference's do. */
.tbi-essay-card > .tbi-ctop{display:block!important;width:100%}
/* .essay-card p: 17px both sides, muted. Declared on the widget element so it
   holds whether or not the excerpt comes back wrapped in a <p>. */
/* Elementor's own `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
   is (0,3,0) and strips the reference's 17px bottom margin, so this one needs
   to out-specify it rather than rely on source order. */
.tbi-essay-card .tbi-ctop > .elementor-widget.tbi-essay-excerpt{margin:17px 0;
  color:var(--muted);font-family:var(--sans);font-size:17px;line-height:1.55}
.tbi-essay-card .tbi-essay-excerpt p{margin:0;color:var(--muted)}
/* <span>4 min -></span> carries no class in the reference: plain body type. */
.tbi-essay-card .tbi-essay-time .elementor-heading-title{font-family:var(--sans);
  font-size:17px;font-weight:400;line-height:1.55;letter-spacing:normal;
  text-transform:none;color:var(--ink)}

/* ---------- Essay single = .essay-body ---------- */
/* <article class="essay-body wrap">: the .wrap width with a 780px cap, and
   block display so the UA h1/p margins collapse as they do in the reference. */
.tbi-essay-body{width:min(1200px,calc(100% - 48px))!important;
  max-width:780px!important;margin-inline:auto!important;
  display:block!important;padding:85px 0 100px!important}
@media(max-width:900px){
  .tbi-essay-body{width:min(100% - 34px,720px)!important}
}
/* <div class="meta" style="margin-top:60px"> - block, not the inline .meta. */
.tbi-essay-meta{margin-top:60px}
.tbi-essay-meta .elementor-heading-title{display:block}
/* the body copy: .essay-body p is already Newsreader 22/1.7; restore the
   default 1em margins the Post Content widget strips. */
.tbi-essay-body .elementor-widget-theme-post-content p{margin:1em 0}
.tbi-essay-body .elementor-widget-theme-post-content p:first-child{margin-top:1em}
.elementor-widget-heading.tbi-question .elementor-heading-title{font-family:var(--serif);font-size:30px;
  font-style:italic;font-weight:400;color:var(--blue);line-height:1.7;
  letter-spacing:normal;margin:1em 0}
.elementor-widget-heading.tbi-sig .elementor-heading-title{font-family:var(--serif);font-size:22px;
  font-style:normal;font-weight:400;color:var(--ink);line-height:1.7;
  letter-spacing:normal;margin:1em 0}

/* ---------- a button that is a direct grid child of .newsgrid ---------- */
/* essay.html puts the <a class="button primary"> straight into the .8fr
   column, where justify-self stretches it to the full 456px. */
.tbi-btn-stretch,.tbi-btn-stretch > .elementor-widget-container{width:100%}
.tbi-btn-stretch .elementor-button{width:100%}

/* ---------- nav: Thoughts stays current across the whole essay section ----- */
/* WordPress cannot mark a page menu item current on a CPT archive, so
   tbi-core/archive.php adds current-menu-item across the essay section. The
   colour for it lives with the other nav states near the top of this file. */


/* ============================================================
   Essay responses - the TBI Responses widget.
   Net-new for the WordPress build (the reference has no thread), built
   entirely out of existing system values so it reads as part of the page.
   ============================================================ */
.tbi-responses{--tbi-rule:var(--line);--tbi-accent:var(--blue);
  border-top:1px solid var(--tbi-rule);padding-top:70px}
.tbi-responses-eyebrow{font-family:var(--sans);font-size:13px;font-weight:720;
  text-transform:uppercase;letter-spacing:.14em;color:var(--tbi-accent);
  line-height:1.55}
.tbi-responses-eyebrow:before{content:'';display:inline-block;width:24px;height:3px;
  background:var(--saffron);margin-right:10px;vertical-align:middle}
.tbi-responses h2.tbi-responses-title{font-family:var(--sans);font-size:clamp(30px,4vw,44px);
  line-height:1.02;letter-spacing:-.04em;font-weight:700;color:var(--ink);
  margin:16px 0 0}
.tbi-responses-count{font-family:var(--serif);font-weight:400;font-style:italic;
  color:var(--tbi-accent);letter-spacing:normal}
.tbi-responses-empty{font-family:var(--serif);font-size:20px;line-height:1.7;
  color:var(--muted);margin:22px 0 0}
.tbi-responses-closed{font-family:var(--sans);font-size:14px;color:var(--muted);
  margin:22px 0 0}

/* ---------- the thread ---------- */
.tbi-response-list{list-style:none;margin:38px 0 0;padding:0}
.tbi-response-list ol,.tbi-response-list ul{list-style:none;margin:0;
  padding-left:28px;border-left:1px solid var(--tbi-rule)}
.tbi-response{border-top:1px solid var(--tbi-rule);list-style:none}
.tbi-response-list > .tbi-response:first-child{border-top:0}
.tbi-response-card{padding:28px 0}
.tbi-response-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.tbi-response-avatar{display:inline-flex}
.tbi-response-avatar img{width:44px;height:44px;border-radius:0;display:block}
.tbi-response-who{font-family:var(--sans);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tbi-accent);
  line-height:1.55}
.tbi-response-when{font-family:var(--sans);font-size:14px;color:var(--muted);
  line-height:1.55}
.tbi-response-body{font-family:var(--serif);font-size:19px;line-height:1.7;
  color:var(--ink)}
.tbi-response-body p{margin:14px 0 0}
.tbi-response-body p:first-child{margin-top:12px}
.tbi-response-pending{font-family:var(--sans)!important;font-size:13px!important;
  text-transform:uppercase;letter-spacing:.08em;color:var(--coral);font-weight:700}
.tbi-response-reply a{display:inline-flex;align-items:center;font-family:var(--sans);
  font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:2px solid currentColor;padding:8px 0;margin-top:16px}
.tbi-response-pagination{margin-top:30px;font-family:var(--sans);font-size:17px;
  font-weight:700}
.tbi-response-pagination a{color:var(--ink);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px}
.tbi-response-pagination .screen-reader-text{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- the form ---------- */
.tbi-respond{border-top:1px solid var(--tbi-rule);margin-top:48px;padding-top:40px}
.tbi-responses h3.tbi-respond-title{font-family:var(--sans);font-size:26px;line-height:1.15;
  letter-spacing:-.03em;font-weight:700;color:var(--ink);margin:0}
.tbi-responses h3.tbi-respond-title small{display:inline-block;margin-left:12px;font-size:14px;
  font-weight:400;letter-spacing:normal}
.tbi-responses h3.tbi-respond-title small a{color:var(--blue);text-decoration:none;
  border-bottom:1px solid currentColor}
.tbi-respond-note{font-family:var(--sans);font-size:14px;color:var(--muted);
  margin:12px 0 0}
.tbi-respond-form{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
  margin-top:28px}
.tbi-respond-form > *{grid-column:1/-1;min-width:0}
.tbi-respond-form .tbi-field-message{order:-1}
.tbi-respond-form .tbi-field-author{grid-column:1}
.tbi-respond-form .tbi-field-email{grid-column:2}
.tbi-field{margin:0 0 26px}
.tbi-field label{display:block;font-family:var(--sans);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tbi-accent);
  margin-bottom:6px;line-height:1.55}
.tbi-field .tbi-req{border:0;text-decoration:none;color:var(--coral)}
.tbi-field input,.tbi-field textarea{width:100%;max-width:100%;border:0;
  border-bottom:2px solid var(--ink);background:transparent;border-radius:0;
  padding:14px 2px;font:inherit;color:var(--ink);box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none}
.tbi-field textarea{font-family:var(--serif);font-size:19px;line-height:1.7;
  min-height:150px;resize:vertical;display:block}
.tbi-field input:focus-visible,.tbi-field textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:4px}
.tbi-field input:-webkit-autofill,.tbi-field textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset!important;
  -webkit-text-fill-color:var(--ink)!important}
.tbi-respond-form .comment-form-cookies-consent{display:flex;align-items:flex-start;
  gap:10px;margin:0 0 26px;font-family:var(--sans);font-size:14px;color:var(--ink)}
.tbi-respond-form .comment-form-cookies-consent input{width:auto;border:0;
  margin:3px 0 0;accent-color:var(--ink)}
.tbi-respond-form .comment-form-cookies-consent label{text-transform:none;
  letter-spacing:normal;font-size:14px;font-weight:400;color:var(--ink);margin:0}
.tbi-respond-form .form-submit{margin:0}
.tbi-responses .tbi-submit{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;padding:14px 20px;border:1px solid var(--ink);
  border-radius:0;background:var(--ink);color:#fff;font-family:var(--sans);
  font-size:17px;font-weight:700;line-height:1.55;letter-spacing:normal;
  text-transform:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:none;width:auto;min-height:0;transition:none}
.tbi-responses .tbi-submit:hover,.tbi-responses .tbi-submit:focus{
  background:var(--ink);border-color:var(--ink);color:#fff}
.tbi-respond .logged-in-as,.tbi-respond .must-log-in{font-family:var(--sans);
  font-size:14px;color:var(--muted);margin:12px 0 0}
.tbi-respond .logged-in-as a,.tbi-respond .must-log-in a{color:var(--blue);
  text-decoration:none;border-bottom:1px solid currentColor}

@media(max-width:900px){
  .tbi-responses{padding-top:56px}
  .tbi-responses h2.tbi-responses-title{font-size:32px}
  .tbi-respond-form{grid-template-columns:1fr;gap:0}
  .tbi-respond-form .tbi-field-author,
  .tbi-respond-form .tbi-field-email{grid-column:1/-1}
  .tbi-response-list ol,.tbi-response-list ul{padding-left:18px}
  .tbi-responses .tbi-submit{width:100%}
}

.tbi-responses-section{padding:0 0 100px!important}
.tbi-essay-measure{width:min(1200px,calc(100% - 48px))!important;
  max-width:780px!important;margin-inline:auto!important;padding:0!important}
@media(max-width:900px){
  .tbi-essay-measure{width:min(100% - 34px,720px)!important}
  .tbi-responses-section{padding:0 0 80px!important}
}


/* ============================================================
   Work With Me - the pieces of styles.css this page needs that the
   earlier pages did not.
   ============================================================ */
/* .ventures,.card-grid,.paths{grid-template-columns:repeat(3,1fr);gap:16px} */
.tbi-card-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:16px!important}
@media(max-width:900px){
  .tbi-card-grid{grid-template-columns:1fr!important}
}
/* .blue{color:#fff} cascades to .card h3 in the reference; here the ported
   .tbi-ctitle rule is (0,3,0) and sets Living Ink, so name both. */
.tbi-blue .elementor-widget-heading.tbi-ctitle .elementor-heading-title,
.tbi-blue .elementor-widget-heading.tbi-path-title .elementor-heading-title{
  color:#fff}
/* .closing h2 keeps the UA .67em margins - that is the gap above the button. */
/* a UA h2 margin is .83em, not the .67em an h1 gets */
.elementor-widget-heading.tbi-closing .elementor-heading-title{margin:.83em 0}

/* .path .button is a flex item in the column card, so it stretches to the
   full card measure; Elementor's inline-flex <a> shrank to fit. */
.tbi-path .tbi-btn,.tbi-path .tbi-btn > .elementor-widget-container{width:100%}
.tbi-path .tbi-btn .elementor-button{width:100%}
/* In the reference the .card's <span class="meta"> is itself the flex item, so
   its line box is the meta's own 20.15px rather than the card's 17px strut. */
.tbi-card > .elementor-widget.tbi-meta{font-size:13px}
/* Same in .affirm-note: <span class="meta"> is the flex item there too. The
   Heading widget's inline <span> sits in a widget div whose own 17px strut
   would otherwise set the line box to 26.34 instead of the meta's 20.15. */
.tbi-affirm-note > .elementor-widget.tbi-meta{font-size:13px}

/* ---------- responses: load more ---------- */
.tbi-responses .tbi-load-more{display:inline-flex;align-items:center;gap:8px;
  margin-top:26px;padding:8px 0;border:0;border-bottom:2px solid currentColor;
  background:transparent;color:var(--ink);font-family:var(--sans);font-size:17px;
  font-weight:700;line-height:1.55;letter-spacing:normal;text-transform:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;
  border-radius:0;min-height:0;width:auto;transition:none}
.tbi-responses .tbi-load-more:hover,.tbi-responses .tbi-load-more:focus{
  background:transparent;color:var(--ink)}
.tbi-responses .tbi-load-more:focus{outline:0}
.tbi-responses .tbi-load-more:focus-visible{outline:2px solid var(--ink);
  outline-offset:3px}
.tbi-response[hidden]{display:none!important}
.tbi-responses .tbi-load-more[hidden]{display:none!important}
.tbi-response:focus{outline:0}
.tbi-response:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* ---------- responses: phone ---------- */
@media(max-width:600px){
  .tbi-responses{padding-top:48px}
  .tbi-responses h2.tbi-responses-title{font-size:28px;letter-spacing:-.03em}
  .tbi-responses-empty{font-size:18px}
  .tbi-response-card{padding:22px 0}
  .tbi-response-head{gap:4px 10px}
  .tbi-response-body{font-size:17px}
  .tbi-response-list ol,.tbi-response-list ul{padding-left:14px}
  .tbi-respond{margin-top:36px;padding-top:32px}
  .tbi-responses h3.tbi-respond-title{font-size:22px}
  .tbi-field{margin:0 0 22px}
  .tbi-field textarea{font-size:17px;min-height:130px}
  .tbi-responses .tbi-load-more{font-size:16px}
}

/* ============================================================
   Resources — the remaining pieces of styles.css.
   ============================================================ */
/* A column that must margin-collapse like the reference's block div: the
   feature column holds two adjacent paragraphs, and a flex column would add
   both 1em margins instead of collapsing them to one. */
.tbi-blk{display:block!important}
/* <h2 class="display" style="font-size:clamp(48px,6vw,82px)"> — the inline
   override on the feature heading; everything else comes from .display. */
.elementor-widget-heading.tbi-resource-h2 .elementor-heading-title{
  font-size:clamp(48px,6vw,82px)}
/* .resource-row h3 has no rule in styles.css, so it keeps the UA h3: 1.17em
   bold with 1em margins, at the body 1.55 line-height. */
.elementor-widget-heading.tbi-resource-title .elementor-heading-title{
  font-family:var(--sans);font-size:1.17em;font-weight:700;line-height:1.55;
  letter-spacing:normal;text-transform:none;color:var(--ink);margin:1em 0}
/* A bare <span> with no class in the reference — plain body type. Needed
   because Elementor gives every heading widget the Primary global's weight. */
.elementor-widget-heading.tbi-plain .elementor-heading-title{
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.55;
  letter-spacing:normal;text-transform:none;color:var(--ink)}

/* ---------- a wrap that is itself the layout ---------- */
/* styles.css puts a layout class on the .wrap itself in several places
   (wrap resource-feature, wrap newsgrid, wrap story, wrap nav). The
   block rule above is (0,2,0) and would out-specify those, so restore
   them here at (0,3,0). */
.tbi-section > .tbi-wrap.tbi-hero,
.tbi-section > .tbi-wrap.tbi-stats,
.tbi-section > .tbi-wrap.tbi-section-head,
.tbi-section > .tbi-wrap.tbi-editorial,
.tbi-section > .tbi-wrap.tbi-listen,
.tbi-section > .tbi-wrap.tbi-moment,
.tbi-section > .tbi-wrap.tbi-cards-grid,
.tbi-section > .tbi-wrap.tbi-newsgrid,
.tbi-section > .tbi-wrap.tbi-foot,
.tbi-section > .tbi-wrap.tbi-collections,
.tbi-section > .tbi-wrap.tbi-archive-pair,
.tbi-section > .tbi-wrap.tbi-resource-feature,
.tbi-section > .tbi-wrap.tbi-resource-row,
.tbi-section > .tbi-wrap.tbi-paths,
.tbi-section > .tbi-wrap.tbi-card-grid,
.tbi-section > .tbi-wrap.tbi-essay-grid,
.tbi-section > .tbi-wrap.tbi-affirm-hero-grid,
.tbi-section > .tbi-wrap.tbi-affirm-plans,
.tbi-section > .tbi-wrap.tbi-affirm-steps,
.tbi-section > .tbi-wrap.tbi-affirm-origin,
.tbi-section > .tbi-wrap.tbi-respond-form{display:grid!important}
.tbi-section > .tbi-wrap.tbi-hero-main,
.tbi-section > .tbi-wrap.tbi-hero-aside,
.tbi-section > .tbi-wrap.tbi-feature-card,
.tbi-section > .tbi-wrap.tbi-sidecol,
.tbi-section > .tbi-wrap.tbi-card,
.tbi-section > .tbi-wrap.tbi-essay-card,
.tbi-section > .tbi-wrap.tbi-path,
.tbi-section > .tbi-wrap.tbi-affirm-note,
.tbi-section > .tbi-wrap.tbi-affirm-plan,
.tbi-section > .tbi-wrap.tbi-filters-bar,
.tbi-section > .tbi-wrap.tbi-copyright{display:flex!important}

/* ---------- Affirmation Words: Elementor artefacts ---------- */
/* .plan-price holds <strong> and <span> as its own flex children, 9px apart on
   a shared baseline. display:contents dissolves Elementor's widget wrappers so
   those two elements become the flex items. */
.tbi-plan-price > .elementor-widget-text-editor,
.tbi-plan-price > .elementor-widget-text-editor > .elementor-widget-container,
.tbi-plan-price > .elementor-widget-text-editor p{display:contents}
/* The <details> blocks come from one Text Editor, so the global 1em paragraph
   margin has to give way to the reference's own padding. */
.tbi-faq-list .elementor-widget-text-editor details p{max-width:720px;
  color:var(--muted);padding:0 0 26px;margin:0}
.tbi-faq-list .elementor-widget-text-editor details{border-bottom:1px solid var(--ink)}
.tbi-faq-list .elementor-widget-text-editor > .elementor-widget-container{display:contents}

/* .affirm-plan button is a flex item in the column card, so it stretches to
   the full card measure; Elementor's inline-flex <button> shrank to fit. */
.tbi-plan-btn,.tbi-plan-btn > .elementor-widget-container{width:100%}
.tbi-plan-btn .elementor-button{width:100%;display:block}

/* ---------- Affirmation Words: mobile (styles.css line 144) ---------- */
@media(max-width:900px){
  .tbi-affirm-hero{padding:70px 0!important}
  .tbi-affirm-hero-grid,.tbi-affirm-origin{grid-template-columns:1fr!important}
  .tbi-affirm-hero-grid{gap:45px!important}
  .tbi-affirm-origin{gap:45px!important}
  .elementor-widget-heading.tbi-affirm-h1 .elementor-heading-title{font-size:58px}
  .tbi-affirm-note{min-height:360px;padding:34px!important}
  .tbi-affirm-plans,.tbi-affirm-steps{grid-template-columns:1fr!important}
  .tbi-affirm-plan{min-height:430px;border-right:0;
    border-bottom:1px solid var(--ink)}
  /* .affirm-plan:last-child{border:0} out-specifies the media query */
  .tbi-affirm-plan-last{border-right:0;border-bottom:0}
  .tbi-affirm-step{border-right:0;
    border-bottom:1px solid rgba(255,255,255,.45);
    margin:0!important;padding:30px 0!important}
  /* .affirm-steps article:last-child{border:0;margin-right:0} likewise */
  .tbi-affirm-step-last{border-right:0;border-bottom:0;margin-right:0}
}

/* ---------- tbi-featured widget: the reference's own element shapes -------- */
/* Dissolve the widget wrapper so .tbi-feature-card and .tbi-sidecol remain the
   two grid items of .tbi-editorial. */
.tbi-editorial > .elementor-widget-tbi-featured,
.tbi-editorial > .elementor-widget-tbi-featured > .elementor-widget-container{
  display:contents}

/* a.feature-card / a.side-card in the reference — a{color:inherit;
   text-decoration:none} there, and the kit already supplies the colour. */
.tbi-feature-card,.tbi-sidecard{text-decoration:none}
.tbi-sidecard{display:block}

/* The reference wraps the meta, title and excerpt in a plain <div>, so the
   h3's 24px bottom margin collapses with the paragraph's 17px top to 24. */
.tbi-feature-card .tbi-fbody{display:block}

/* .meta — a <span>, so no display is declared: it stays inline and takes its
   line box from the 17px strut of the block it sits in, as in the reference. */
.tbi-fmeta{font-family:var(--sans);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--blue);font-weight:700}

/* .feature-card h3 */
.tbi-feature-card h3.tbi-ftitle,.tbi-feature-card .tbi-ftitle{font-family:var(--serif);
  font-size:50px;line-height:1;font-weight:700;letter-spacing:normal;
  margin:24px 0;color:var(--ink)}

/* .feature-card p — body copy with the UA 1em margins at 17px. */
.tbi-feature-card p{margin:17px 0;font-family:var(--sans);font-size:17px;
  line-height:1.55;color:var(--ink)}

/* .read as a flex item of the card: inline-flex blockifies. */
.tbi-fread{display:flex;border-bottom:2px solid currentColor;padding:8px 0;
  font-weight:700;font-family:var(--sans);font-size:17px;color:var(--ink);
  letter-spacing:normal}

/* .side-card h3 */
.tbi-sidecard h3.tbi-stitle,.tbi-sidecard .tbi-stitle{font-size:25px;line-height:1.1;
  margin:10px 0;font-weight:700;letter-spacing:normal;color:var(--ink);
  font-family:var(--sans)}

.tbi-featured-empty{margin:0;font-size:17px;color:var(--muted)}

/* ---------- tbi-plans widget: the reference's own element shapes ---------- */
/* Dissolve the wrapper so the <article> cards stay the grid items. */
.tbi-affirm-plans > .elementor-widget-tbi-plans,
.tbi-affirm-plans > .elementor-widget-tbi-plans > .elementor-widget-container{
  display:contents}

/* .affirm-plan holds four direct flex children under space-between. The count
   block and the body are plain block boxes, so their margins collapse. */
.tbi-affirm-plan .tbi-pcount,.tbi-affirm-plan .tbi-pbody{display:block}

/* .affirm-plan .plan-count */
.tbi-affirm-plan .tbi-pnum{display:block;font-family:var(--serif);font-size:72px;
  line-height:.9;color:var(--blue);font-weight:400}
/* the .meta line under it */
.tbi-affirm-plan .tbi-pmeta{font-family:var(--sans);font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:700}
/* .affirm-plan h3 */
.tbi-affirm-plan h3.tbi-ptitle{font-family:var(--sans);font-size:42px;
  letter-spacing:-.05em;margin:12px 0;font-weight:700;line-height:1.55;color:var(--ink)}
/* .affirm-plan p */
.tbi-affirm-plan p{margin:17px 0;font-family:var(--sans);font-size:17px;line-height:1.55}
.tbi-affirm-plan .tbi-pfeature{color:var(--muted)}
/* .plan-price - strong and span are its own flex children, 9px apart */
.tbi-affirm-plan .tbi-pprice{display:flex;align-items:baseline;gap:9px}
.tbi-affirm-plan .tbi-pprice strong{font-size:42px;letter-spacing:-.05em}
.tbi-affirm-plan .tbi-pprice span{font-size:14px}
/* .affirm-plan button - the five declarations the reference makes, plus the
   neutralisers Elementor's kit needs. Same shape whether it is a <button> or
   the <a> the live buy path renders. */
.tbi-affirm-plan .tbi-pbtn{display:block;width:100%;padding:14px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:700 14px var(--sans);border-radius:0;text-transform:none;
  letter-spacing:normal;text-align:center;text-decoration:none;
  -webkit-appearance:none;appearance:none;box-shadow:none;min-height:0}
.tbi-affirm-plan button.tbi-pbtn[disabled]{opacity:.62;cursor:default}
.tbi-affirm-plan a.tbi-pbtn:hover{background:var(--ink);color:#fff}
.tbi-affirm-plan a.tbi-pbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tbi-plans-empty{margin:0;font-size:17px;color:var(--muted)}

/* ---------- currency switcher (net-new; built from the chip vocabulary) --- */
/* The switcher is a child of the widget, and the widget wrapper is
   display:contents - so without this it becomes a FOURTH grid item and pushes
   the three cards onto a second row (measured: the grid doubled to 1112px).
   Spanning every column and ordering it first makes it a full-width row above
   the cards instead. It is net-new - the reference has no currency control -
   and it costs the section about 57px, which is the honest price of the
   feature. */
/* NOT a child selector. The widget wrapper is display:contents, so the
   switcher is a grid ITEM of .tbi-affirm-plans while remaining a DOM child of
   the widget div - `>` never matches it. Same trap as the featured widget. */
.tbi-affirm-plans .tbi-cur-switch{grid-column:1/-1;order:-1;
  border-bottom:1px solid var(--ink)}
.tbi-cur-switch{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:0;padding:0 32px 20px}
.tbi-cur-label{font-family:var(--sans);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--muted)}
.tbi-cur-switch a.tbi-cur{border:1px solid var(--ink);background:transparent;
  color:#000;border-radius:0;padding:9px 13px;font:650 13.3333px Arial;
  line-height:normal;letter-spacing:normal;text-transform:none;
  text-decoration:none;text-align:center;box-shadow:none;transition:none}
.tbi-cur-switch a.tbi-cur.tbi-cur-on{background:var(--ink);border-color:var(--ink);color:#fff}
.tbi-cur-switch a.tbi-cur:focus{outline:0}
.tbi-cur-switch a.tbi-cur:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- converted-price note (net-new, honesty not decoration) -------- */
/* Same trap as the switcher: display:contents on the widget wrapper makes this
   a grid ITEM, so it needs to span every column or it becomes a fourth cell.
   No `order`, so it lands after the three cards; the switcher's order:-1 keeps
   that one above them. */
.tbi-affirm-plans .tbi-fx-note{grid-column:1/-1;margin:0;padding:16px 32px;
  border-top:1px solid var(--ink);font-family:var(--sans);font-size:13px;
  line-height:1.5;color:var(--muted)}
@media(max-width:900px){
  /* The last card drops its bottom border on mobile, so the note's top border
     is the only line between them - keep the padding in the card's rhythm. */
  .tbi-affirm-plans .tbi-fx-note{padding:15px 24px}
}

/* ==========================================================================
   SUBSCRIBER DASHBOARD  (WooCommerce My Account, wearing the reference)
   ==========================================================================
   The account area is NOT an Elementor page - it is the Hello Elementor
   content area with Woo's shortcode inside it - so it inherits none of the
   page styling and has to be dressed from scratch. Every value below is taken
   from the reference vocabulary already defined at the top of this file:
   --ink borders, --paper fills, the sans in uppercase for labels, the serif
   for headings, square corners, no shadows, no radius.

   custom.css loads AFTER woocommerce.css, so equal specificity wins. Where a
   Woo rule is stronger (it ships plenty of .woocommerce-page prefixed rules)
   the selector below is prefixed to match it rather than reaching for
   !important.
   ========================================================================== */

.tbi-account .page-content > .woocommerce{max-width:1200px;margin:0 auto;
  padding:70px 24px 90px;font-family:var(--sans);color:var(--ink)}
.tbi-account .page-content > .woocommerce::after{content:"";display:table;clear:both}

/* ---- the two columns --------------------------------------------------- */
.tbi-account .woocommerce-MyAccount-navigation{float:none;width:auto;margin:0 0 40px}
.tbi-account .woocommerce-MyAccount-content{float:none;width:auto}
@media(min-width:901px){
  .tbi-account .page-content > .woocommerce:has(> .woocommerce-MyAccount-navigation){display:grid;
    grid-template-columns:260px 1fr;gap:0;align-items:start;
    border:1px solid var(--ink);padding:0;max-width:1200px;margin:70px auto 90px}
  /* Woo renders THREE children here - the notices wrapper, the navigation and
     the content - so without this the notices take column 1, the navigation
     lands in column 2 and the content drops to the next row in the 260px rail.
     Measured: nav 878px wide, content 260px. Spanning the notices across both
     columns puts the two real columns back where they belong, and works the
     same whether or not a notice is on screen. */
  .tbi-account .page-content > .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}
  .tbi-account .woocommerce-MyAccount-navigation{margin:0;grid-column:1;
    border-right:1px solid var(--ink);background:var(--paper);align-self:stretch}
  .tbi-account .woocommerce-MyAccount-content{grid-column:2;padding:40px;min-width:0}
}

/* ---- the sidebar ------------------------------------------------------- */
.tbi-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.tbi-account .woocommerce-MyAccount-navigation li{margin:0;border-bottom:1px solid var(--line)}
.tbi-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.tbi-account .woocommerce-MyAccount-navigation li a{display:block;padding:16px 24px;
  font:700 13px var(--sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);text-decoration:none}
.tbi-account .woocommerce-MyAccount-navigation li a:hover{background:var(--white);color:var(--blue)}
.tbi-account .woocommerce-MyAccount-navigation li.is-active{background:var(--ink)}
.tbi-account .woocommerce-MyAccount-navigation li.is-active a,
.tbi-account .woocommerce-MyAccount-navigation li.is-active a:hover{color:#fff;background:transparent}
.tbi-account .woocommerce-MyAccount-navigation li a:focus-visible{outline:2px solid var(--blue);
  outline-offset:-2px}

/* ---- the panel -------------------------------------------------------- */
.tbi-dash{margin:0 0 40px}
.tbi-dash-privacy{margin:-8px 0 28px;font-size:14px}
.tbi-dash-privacy a{color:var(--blue)!important;text-decoration:underline;
  text-underline-offset:3px}
.tbi-dash-head{margin:0 0 28px}
.tbi-dash-eyebrow{margin:0 0 8px;font:700 12px var(--sans);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.tbi-dash-title{margin:0 0 10px;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--ink)}
.tbi-dash-lede{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch}
.tbi-dash-lede strong{color:var(--ink);font-weight:700}

.tbi-dash-card{border:1px solid var(--ink);background:var(--white);
  padding:28px;margin:0 0 20px}
.tbi-dash-card-active{background:var(--paper)}
.tbi-dash-card-cancelled,.tbi-dash-card-expired{background:var(--white);border-color:var(--line)}
.tbi-dash-card-empty{background:var(--paper)}

.tbi-dash-card-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:12px;margin:0 0 22px;
  padding:0 0 18px;border-bottom:1px solid var(--line)}
.tbi-dash-plan{margin:0;font-family:var(--serif);font-weight:400;font-size:26px;
  line-height:1.15;color:var(--ink)}
.tbi-dash-status{margin:0;font:700 12px var(--sans);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);padding:6px 10px;background:var(--white)}
.tbi-dash-status-active{color:var(--ink);border-color:var(--ink)}
.tbi-dash-status-on-hold{color:#8a5a00;border-color:var(--saffron);background:#fff9e6}
.tbi-dash-status-cancelled,.tbi-dash-status-expired{color:var(--muted)}

.tbi-dash-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 32px;margin:0 0 26px}
.tbi-dash-facts dt{margin:0 0 4px;font:700 12px var(--sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.tbi-dash-facts dd{margin:0;font-size:17px;line-height:1.4;color:var(--ink)}
.tbi-dash-facts dd .amount{font-weight:700}
.tbi-dash-facts dd del{color:var(--muted);font-weight:400}

.tbi-dash-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.tbi-dash-btn{display:inline-block;padding:13px 22px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font:700 14px var(--sans);text-decoration:none;
  border-radius:0;text-transform:none;letter-spacing:normal}
.tbi-dash-btn:hover{background:transparent;color:var(--ink)}
.tbi-dash-btn-quiet{background:transparent;color:var(--ink)}
.tbi-dash-btn-quiet:hover{background:var(--ink);color:#fff}
.tbi-dash-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media(max-width:600px){
  .tbi-dash-facts{grid-template-columns:1fr}
  .tbi-dash-card{padding:22px}
  .tbi-dash-btn{width:100%;text-align:center}
}

/* ---- Woo's own furniture, in the same language ------------------------- */
.tbi-account .woocommerce-MyAccount-content h2,
.tbi-account .woocommerce-MyAccount-content h3{font-family:var(--serif);font-weight:400;
  color:var(--ink);line-height:1.15;margin:0 0 16px}
.tbi-account .woocommerce-MyAccount-content h2{font-size:26px}
.tbi-account .woocommerce-MyAccount-content h3{font-size:20px}
.tbi-account .woocommerce-MyAccount-content p{font-size:16px;line-height:1.6;color:var(--ink)}
.tbi-account .woocommerce-MyAccount-content a{color:var(--ink);text-decoration:underline}
.tbi-account .woocommerce-MyAccount-content a:hover{color:var(--blue)}

.tbi-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.tbi-account .woocommerce-MyAccount-content table.shop_table,
.tbi-account .woocommerce-MyAccount-content table.order_details{width:100%;
  border:1px solid var(--ink);border-collapse:collapse;border-radius:0;margin:0 0 28px}
.tbi-account .woocommerce-MyAccount-content table.shop_table th,
.tbi-account .woocommerce-MyAccount-content table.order_details th{background:var(--paper);
  border-bottom:1px solid var(--ink);padding:14px 16px;text-align:left;
  font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.tbi-account .woocommerce-MyAccount-content table.shop_table td,
.tbi-account .woocommerce-MyAccount-content table.order_details td{padding:14px 16px;
  border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.tbi-account .woocommerce-MyAccount-content table.shop_table tfoot th{background:var(--white)}

/* buttons Woo renders itself */
.tbi-account .woocommerce-MyAccount-content .button,
.tbi-account .woocommerce-MyAccount-content button.button,
.tbi-account .woocommerce-MyAccount-content input.button,
.tbi-account .woocommerce-MyAccount-content .woocommerce-Button{background:var(--ink);
  color:#fff;border:1px solid var(--ink);border-radius:0;padding:13px 22px;
  font:700 14px var(--sans);text-transform:none;letter-spacing:normal;
  text-decoration:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.tbi-account .woocommerce-MyAccount-content .button:hover,
.tbi-account .woocommerce-MyAccount-content button.button:hover,
.tbi-account .woocommerce-MyAccount-content input.button:hover,
.tbi-account .woocommerce-MyAccount-content .woocommerce-Button:hover{background:transparent;
  color:var(--ink)}

/* forms */
.tbi-account .woocommerce-MyAccount-content label{display:block;margin:0 0 6px;
  font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tbi-account .woocommerce-MyAccount-content input[type=text],
.tbi-account .woocommerce-MyAccount-content input[type=email],
.tbi-account .woocommerce-MyAccount-content input[type=tel],
.tbi-account .woocommerce-MyAccount-content input[type=password],
.tbi-account .woocommerce-MyAccount-content select,
.tbi-account .woocommerce-MyAccount-content textarea{width:100%;padding:13px 14px;
  border:1px solid var(--ink);border-radius:0;background:var(--white);
  font:400 16px var(--sans);color:var(--ink);box-shadow:none}
.tbi-account .woocommerce-MyAccount-content input:focus-visible,
.tbi-account .woocommerce-MyAccount-content select:focus-visible,
.tbi-account .woocommerce-MyAccount-content textarea:focus-visible{outline:2px solid var(--blue);
  outline-offset:1px}

/* notices */
.tbi-account .woocommerce-message,
.tbi-account .woocommerce-info,
.tbi-account .woocommerce-error{border:1px solid var(--ink);border-top-width:1px;
  background:var(--paper);border-radius:0;color:var(--ink);font-family:var(--sans);
  font-size:15px;padding:18px 20px;list-style:none}
.tbi-account .woocommerce-error{background:#fdeeea;border-color:var(--coral)}
.tbi-account .woocommerce-message::before,
.tbi-account .woocommerce-info::before,
.tbi-account .woocommerce-error::before{display:none}
.tbi-account .woocommerce-message .button,
.tbi-account .woocommerce-info .button{margin-left:14px}

/* the sign-in screen a subscriber lands on from the welcome email */
.tbi-account .woocommerce-form-login,
.tbi-account .woocommerce-form-register{border:1px solid var(--ink);background:var(--paper);
  padding:32px;border-radius:0;max-width:560px;margin:0 auto 30px}
.tbi-account .woocommerce-form-login .woocommerce-form-login__rememberme span{font:400 14px var(--sans);
  text-transform:none;letter-spacing:normal;color:var(--ink)}
.tbi-account .woocommerce-form-login label.woocommerce-form__label-for-checkbox{display:inline-flex;
  align-items:center;gap:8px}

/* Logged-out endpoints have no account navigation. Keep their forms out of the
   260px dashboard rail and give the two sign-in panels their own layout. */
.tbi-account .page-content > .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)){
  display:block;border:0;max-width:1120px;padding:0;margin:56px auto 90px}
.tbi-account .woocommerce .u-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;width:100%}
.tbi-account .woocommerce .u-columns::before,
.tbi-account .woocommerce .u-columns::after{display:none}
.tbi-account .woocommerce .u-columns > .u-column1,
.tbi-account .woocommerce .u-columns > .u-column2{float:none;width:100%;min-width:0;margin:0}
.tbi-account .woocommerce .u-columns h2{font-family:var(--serif);font-size:30px;
  font-weight:400;margin:0 0 18px}
.tbi-account .woocommerce .u-columns .woocommerce-form-login,
.tbi-account .woocommerce .u-columns .woocommerce-form-register{width:100%;max-width:none;
  min-height:100%;margin:0}
.tbi-account .woocommerce .u-columns .input-text,
.tbi-account .woocommerce .woocommerce-ResetPassword .input-text{width:100%;min-height:48px;
  padding:12px 14px;background:var(--white);border:1px solid var(--ink);
  border-radius:0;color:var(--ink);font:400 16px var(--sans)}
.tbi-account .woocommerce .u-columns label,
.tbi-account .woocommerce .woocommerce-ResetPassword label{display:block;margin-bottom:8px;
  font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.08em}
.tbi-account .woocommerce .woocommerce-ResetPassword{width:100%;max-width:680px;
  margin:0 auto;padding:36px;border:1px solid var(--ink);background:var(--paper)}
.tbi-account .woocommerce .woocommerce-ResetPassword p:first-child{font-size:17px;
  line-height:1.6;margin:0 0 24px}
.tbi-account .woocommerce .woocommerce-ResetPassword .form-row{float:none;width:100%}
.tbi-account .woocommerce .u-columns .button,
.tbi-account .woocommerce .woocommerce-ResetPassword .button{background:var(--ink);
  color:#fff;border:1px solid var(--ink);border-radius:0;padding:13px 22px;
  font:700 14px var(--sans)}
.tbi-account .woocommerce .u-columns .button:hover,
.tbi-account .woocommerce .woocommerce-ResetPassword .button:hover{background:transparent;
  color:var(--ink)}
@media(max-width:760px){
  .tbi-account .woocommerce .u-columns{grid-template-columns:1fr;gap:32px}
  .tbi-account .woocommerce .woocommerce-ResetPassword{padding:24px}
}

/* ---- the account nav on a phone --------------------------------------- */
/* Stacked, the seven links are 342px of uppercase list standing between the
   subscriber and their own plan. As a scrolling chip row it costs about 55px
   and behaves like the rest of the site's mobile furniture. */
@media(max-width:900px){
  .tbi-account .woocommerce-MyAccount-navigation{margin:0 0 30px;background:transparent;
    border-right:0}
  .tbi-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:nowrap;
    gap:8px;overflow-x:auto;padding:0 0 6px;margin:0;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin}
  .tbi-account .woocommerce-MyAccount-navigation li{flex:0 0 auto;border-bottom:0}
  .tbi-account .woocommerce-MyAccount-navigation li a{border:1px solid var(--ink);
    padding:11px 14px;white-space:nowrap;background:var(--white)}
  .tbi-account .woocommerce-MyAccount-navigation li.is-active{background:transparent}
  .tbi-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:#fff}
  .tbi-account .page-content > .woocommerce{padding:44px 24px 70px}
  .tbi-dash-head{margin:0 0 22px}
}

/* ---- dashboard buttons: the contrast bug ------------------------------- */
/* `.tbi-account .woocommerce-MyAccount-content a{color:var(--ink)}` above is
   (0,3,1); `.tbi-dash-btn` is (0,1,0). So MY OWN link rule was painting ink
   text on the ink button - a solid black box with an invisible label - and
   underlining the quiet one. These restate the buttons at the link rule's own
   weight. Same trap as the nav colours earlier in the build: a broad element
   rule inside a scoped block outranks a single utility class. */
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn,
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn:visited{color:#fff;
  text-decoration:none;background:var(--ink);border:1px solid var(--ink)}
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn:hover{color:var(--ink);
  background:transparent;text-decoration:none}
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn-quiet,
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn-quiet:visited{color:var(--ink);
  background:transparent;text-decoration:none}
.tbi-account .woocommerce-MyAccount-content a.tbi-dash-btn-quiet:hover{color:#fff;
  background:var(--ink)}

/* ---- the sentence that explains the plan ------------------------------- */
.tbi-dash-summary{margin:0 0 14px;font-size:17px;line-height:1.55;color:var(--ink);
  max-width:62ch}
.tbi-dash-summary strong{font-weight:700}
.tbi-dash-note{margin:0 0 18px;padding:14px 16px;background:var(--white);
  border-left:3px solid var(--ink);font-size:15px;line-height:1.5;color:var(--muted);
  max-width:62ch}
.tbi-dash-card-active .tbi-dash-note{background:#fff}
.tbi-dash-note-pending{border-left-color:var(--saffron)}
.tbi-dash-note-on-hold{border-left-color:var(--saffron)}
.tbi-dash-note-cancelled,.tbi-dash-note-expired{border-left-color:var(--line)}
.tbi-dash-note-pending-cancel{border-left-color:var(--coral)}
.tbi-dash-features{margin:0 0 22px;padding:0;list-style:none}
.tbi-dash-features li{position:relative;padding:0 0 0 18px;margin:0 0 6px;
  font-size:15px;line-height:1.5;color:var(--ink)}
.tbi-dash-features li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--ink)}

/* the pending chip should not look like a quiet aside */
.tbi-dash-status-pending{color:#8a5a00;border-color:var(--saffron);background:#fff9e6}
.tbi-dash-status-pending-cancel{color:#9c3a1f;border-color:var(--coral);background:#fdeeea}

/* ---- responsive, in three real steps ---------------------------------- */
/* 1200 and down: the rail narrows before the content has to */
@media(max-width:1199px) and (min-width:901px){
  .tbi-account .page-content > .woocommerce:has(> .woocommerce-MyAccount-navigation){grid-template-columns:225px 1fr;
    margin:56px 24px 80px}
  .tbi-account .woocommerce-MyAccount-navigation li a{padding:15px 18px}
  .tbi-account .woocommerce-MyAccount-content{padding:32px}
}
/* tablet: one column, two fact columns still fit */
@media(max-width:900px) and (min-width:601px){
  .tbi-dash-card{padding:26px}
  .tbi-dash-card-head{margin:0 0 20px}
  .tbi-dash-facts{gap:18px 26px}
}
/* phone: the card head stacks, the chip sits under the plan name */
@media(max-width:600px){
  .tbi-dash-card-head{flex-direction:column;align-items:flex-start;gap:10px;
    padding:0 0 16px}
  .tbi-dash-plan{font-size:22px}
  .tbi-dash-title{font-size:30px}
  .tbi-dash-summary{font-size:16px}
  .tbi-dash-note{padding:12px 14px;font-size:14px}
  .tbi-dash-actions{gap:8px}
  .tbi-account .woocommerce-MyAccount-content table.shop_table th,
  .tbi-account .woocommerce-MyAccount-content table.shop_table td{padding:11px 12px;
    font-size:14px}

  /* Woo Subscriptions uses a wide five-column table. Present each row as a
     labelled card on phones so status and actions never force page overflow. */
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions,
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions tbody,
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions tr,
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions td{
    display:block;width:100%;box-sizing:border-box}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions thead{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions tr{
    border-bottom:1px solid var(--ink);padding:8px 0}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions tr:last-child{
    border-bottom:0}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions td{
    display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:12px;
    align-items:start;border:0;padding:8px 12px;text-align:right;overflow-wrap:anywhere}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions td::before{
    content:attr(data-title);font:700 11px/1.4 var(--sans);letter-spacing:.07em;
    text-transform:uppercase;text-align:left;color:var(--muted)}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions td.subscription-actions{
    display:block;text-align:left;padding-top:12px}
  .tbi-account .woocommerce-MyAccount-content table.my_account_subscriptions td.subscription-actions::before{
    display:none}
}
/* very narrow: keep the facts readable rather than cramming two columns */
@media(max-width:400px){
  .tbi-account .page-content > .woocommerce{padding:36px 16px 60px}
  .tbi-dash-card{padding:18px}
  .tbi-dash-title{font-size:27px}
}

/* ---- affirmation-type filter row -------------------------------------- */

/* Privacy page: native Elementor headings and text widgets in an editorial
   two-column reading layout, using the site's existing type and colours. */
.tbi-privacy{background:var(--paper)}
.tbi-privacy .tbi-privacy-wrap{display:grid!important;
  grid-template-columns:minmax(220px, .38fr) minmax(0, 1fr);
  column-gap:70px;padding-top:90px;padding-bottom:110px}
.tbi-privacy-wrap > .elementor-element{min-width:0;width:auto!important}
.tbi-privacy-wrap > .tbi-privacy-eyebrow,
.tbi-privacy-wrap > .tbi-privacy-h1,
.tbi-privacy-wrap > .tbi-privacy-intro{grid-column:1/-1}
.tbi-privacy-eyebrow .elementor-heading-title{font:700 12px var(--sans);
  letter-spacing:.13em;color:var(--blue);text-transform:uppercase}
.tbi-privacy-h1 .elementor-heading-title{font:700 clamp(64px,10vw,132px)/.98 var(--sans);
  letter-spacing:-.07em;color:var(--ink);margin:20px 0 0}
.tbi-privacy-intro{max-width:780px;margin:22px 0 64px}
.tbi-privacy-intro p{font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--muted);margin:0}
.tbi-privacy-h2,.tbi-privacy-body{border-top:1px solid var(--ink);
  padding-top:28px;padding-bottom:36px}
.tbi-privacy-h2 .elementor-heading-title{font:400 clamp(27px,3vw,38px)/1.12 var(--serif);
  color:var(--ink);letter-spacing:-.025em}
.tbi-privacy-body p,.tbi-privacy-body li{font-size:16px;line-height:1.7;color:var(--ink)}
.tbi-privacy-body p:first-child{margin-top:0}
.tbi-privacy-body p:last-child{margin-bottom:0}
.tbi-privacy-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.tbi-privacy-body a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:767px){
  .tbi-privacy .tbi-privacy-wrap{grid-template-columns:1fr;padding-top:58px;
    padding-bottom:76px}
  .tbi-privacy-h1 .elementor-heading-title{font-size:clamp(50px,16vw,78px)}
  .tbi-privacy-intro{margin-bottom:42px}
  .tbi-privacy-h2{padding-bottom:8px}
  .tbi-privacy-body{border-top:0;padding-top:0;padding-bottom:34px}
}
/* Carries both .tbi-cur-switch (so every chip style already applies) and
   .tbi-type-switch. order:-2 puts it above the currency row, which is -1.
   Only ever one type of plan is on screen at a time, so the grid stays the
   three-card single row the reference approves - the chips swap which three. */
.tbi-affirm-plans .tbi-type-switch{order:-2;padding:22px 32px 18px}
.tbi-type-switch .tbi-cur-label{color:var(--ink)}
@media(max-width:900px){
  .tbi-affirm-plans .tbi-type-switch{padding:20px 24px 16px}
}

/* ==========================================================================
   WOOCOMMERCE SURFACE  (shop, product, cart, checkout, order received)
   ==========================================================================
   Everything Woo prints outside the account area was still wearing Woo's own
   purple buttons and rounded fields, which is what made the Subscribe button
   look wrong. These pages are not in the approved reference package, so the
   rule here is: use the reference's own vocabulary - ink borders, square
   corners, the two type families, no shadows - and nothing invented.

   custom.css loads after woocommerce.css, so equal specificity wins on source
   order. Block components (wc-block-components-*) carry their own classes and
   are restated alongside the classic ones.
   ========================================================================== */

body.woocommerce-page:not(.tbi-account) .page-content > .woocommerce,
body.woocommerce-page .woocommerce-order,
body.woocommerce-page:not(.tbi-account) .wp-block-woocommerce-cart,
body.woocommerce-page:not(.tbi-account) .wp-block-woocommerce-checkout{
  max-width:1200px;margin:0 auto;padding:60px 24px 90px;
  font-family:var(--sans);color:var(--ink)}
body.woocommerce-page .page-content h1,
body.woocommerce-page .page-content h2,
body.woocommerce-page .page-content h3{font-family:var(--serif);font-weight:400;
  color:var(--ink);line-height:1.15}
body.woocommerce-page .page-content h2{font-size:26px}
body.woocommerce-page .page-content h3{font-size:20px}
body.woocommerce-page .page-content p{font-size:16px;line-height:1.6}

/* ---- every button Woo can render, in the brand ------------------------- */
body.woocommerce-page .button,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page button[type=submit],
body.woocommerce-page .woocommerce-Button,
body.woocommerce-page .wc-block-components-button,
body.woocommerce-page .wc-block-cart__submit-button,
body.woocommerce-page .wc-block-components-checkout-place-order-button{
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;
  padding:14px 24px;font:700 14px/1.2 var(--sans);text-transform:none;
  letter-spacing:normal;text-decoration:none;box-shadow:none;
  -webkit-appearance:none;appearance:none;min-height:0}
body.woocommerce-page .button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page button[type=submit]:hover,
body.woocommerce-page .woocommerce-Button:hover,
body.woocommerce-page .wc-block-components-button:hover,
body.woocommerce-page .wc-block-cart__submit-button:hover,
body.woocommerce-page .wc-block-components-checkout-place-order-button:hover{
  background:transparent;color:var(--ink)}
/* the block button paints its label in a nested span */
body.woocommerce-page .wc-block-components-button__text{color:inherit}
/* Woo's "added to cart" secondary link should not shout */
body.woocommerce-page a.added_to_cart{display:inline-block;margin-left:12px;
  font:700 14px var(--sans);color:var(--ink);text-decoration:underline}
body.woocommerce-page .button:focus-visible,
body.woocommerce-page .wc-block-components-button:focus-visible{outline:2px solid var(--blue);
  outline-offset:2px}

/* ---- the Subscribe button on a plan card, when selling is live --------- */
/* The disabled <button> and the live <a> must be identical. An anchor picks up
   any link colour rule in scope, which is what turned a live Subscribe button
   the wrong colour - the same specificity trap as the dashboard buttons, so
   both states are restated here with the element in the selector. */
.tbi-affirm-plan a.tbi-pbtn,
.tbi-affirm-plan a.tbi-pbtn:visited,
body.woocommerce-page .tbi-affirm-plan a.tbi-pbtn{display:block;width:100%;
  padding:14px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:700 14px var(--sans);border-radius:0;text-transform:none;letter-spacing:normal;
  text-align:center;text-decoration:none;box-shadow:none}
.tbi-affirm-plan a.tbi-pbtn:hover,
body.woocommerce-page .tbi-affirm-plan a.tbi-pbtn:hover{background:var(--ink);color:#fff}
/* the coral card: an ink button on coral is the reference's own contrast */
.tbi-affirm-plan-monthly a.tbi-pbtn:hover{background:var(--ink);color:#fff}

/* ---- fields, tables, notices ------------------------------------------ */
body.woocommerce-page input[type=text],
body.woocommerce-page input[type=email],
body.woocommerce-page input[type=tel],
body.woocommerce-page input[type=number],
body.woocommerce-page input[type=password],
body.woocommerce-page select,
body.woocommerce-page textarea,
body.woocommerce-page .wc-block-components-text-input input{padding:13px 14px;
  border:1px solid var(--ink);border-radius:0;background:var(--white);
  font:400 16px var(--sans);color:var(--ink);box-shadow:none}
body.woocommerce-page table.shop_table,
body.woocommerce-page table.cart,
body.woocommerce-page table.woocommerce-table{width:100%;border:1px solid var(--ink);
  border-collapse:collapse;border-radius:0}
body.woocommerce-page table.shop_table th,
body.woocommerce-page table.woocommerce-table th{background:var(--paper);
  border-bottom:1px solid var(--ink);padding:14px 16px;text-align:left;
  font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
body.woocommerce-page table.shop_table td,
body.woocommerce-page table.woocommerce-table td{padding:14px 16px;
  border-top:1px solid var(--line);font-size:15px}
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .wc-block-components-notice-banner{border:1px solid var(--ink);
  background:var(--paper);border-radius:0;color:var(--ink);font-family:var(--sans);
  font-size:15px;padding:18px 20px;list-style:none;box-shadow:none}
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .wc-block-components-notice-banner.is-error{background:#fdeeea;
  border-color:var(--coral)}
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-error::before{display:none}
body.woocommerce-page .price,
body.woocommerce-page .woocommerce-Price-amount{font-family:var(--sans);
  font-weight:700;color:var(--ink)}
body.woocommerce-page .woocommerce-breadcrumb{font:400 13px var(--sans);color:var(--muted)}
body.woocommerce-page .woocommerce-breadcrumb a{color:var(--muted)}

@media(max-width:900px){
  body.woocommerce-page:not(.tbi-account) .page-content > .woocommerce,
  body.woocommerce-page .woocommerce-order,
  body.woocommerce-page:not(.tbi-account) .wp-block-woocommerce-cart,
  body.woocommerce-page:not(.tbi-account) .wp-block-woocommerce-checkout{
    padding:44px 24px 70px}
}
@media(max-width:400px){
  body.woocommerce-page:not(.tbi-account) .page-content > .woocommerce,
  body.woocommerce-page .woocommerce-order{padding:36px 16px 60px}
}

/* ==========================================================================
   THANK YOU  (the next-steps panel above Woo's receipt)
   ==========================================================================
   Same furniture as the dashboard panel - ink rules, paper fill, serif
   headings, numbered steps in the sans - so a new subscriber sees one site
   from the plan card through checkout to their first sign-in.
   ========================================================================== */

.tbi-thanks{border:1px solid var(--ink);background:var(--paper);
  padding:40px;margin:0 0 40px}
.tbi-thanks-head{margin:0 0 30px;padding:0 0 24px;border-bottom:1px solid var(--ink)}
.tbi-thanks-eyebrow{margin:0 0 10px;font:700 12px var(--sans);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.tbi-thanks-title{margin:0 0 12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.4vw,46px);line-height:1.08;color:var(--ink)}
.tbi-thanks-lede{margin:0;font-size:18px;line-height:1.55;color:var(--ink);max-width:58ch}

/* ---- the steps --------------------------------------------------------- */
.tbi-steps{list-style:none;margin:0 0 34px;padding:0;counter-reset:none}
.tbi-step{display:grid;grid-template-columns:44px 1fr;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.tbi-step:first-child{padding-top:0}
.tbi-step:last-child{border-bottom:0;padding-bottom:0}
.tbi-step-num{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--ink);background:var(--white);
  font:700 17px var(--sans);color:var(--ink)}
.tbi-step-title{margin:0 0 6px;font-family:var(--serif);font-weight:400;
  font-size:22px;line-height:1.2;color:var(--ink)}
.tbi-step-body p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:58ch}
.tbi-step-body p strong{color:var(--ink);font-weight:700}

/* ---- the facts strip --------------------------------------------------- */
.tbi-thanks-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:20px 28px;margin:0 0 32px;padding:26px;background:var(--white);
  border:1px solid var(--line)}
.tbi-thanks-facts dt{margin:0 0 5px;font:700 12px var(--sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.tbi-thanks-facts dd{margin:0;font-size:17px;line-height:1.35;color:var(--ink)}
.tbi-thanks-facts dd .amount{font-weight:700}

/* ---- the two buttons --------------------------------------------------- */
.tbi-thanks-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* Restated with the element in the selector, because an anchor inside a
   WooCommerce page picks up whatever link colour is in scope - the trap that
   made the dashboard button ink-on-ink. */
a.tbi-thanks-btn,a.tbi-thanks-btn:visited,
body.woocommerce-page a.tbi-thanks-btn{display:inline-block;padding:14px 24px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  font:700 14px var(--sans);text-decoration:none;border-radius:0;
  text-transform:none;letter-spacing:normal}
a.tbi-thanks-btn:hover,
body.woocommerce-page a.tbi-thanks-btn:hover{background:transparent;color:var(--ink)}
a.tbi-thanks-btn-quiet,a.tbi-thanks-btn-quiet:visited,
body.woocommerce-page a.tbi-thanks-btn-quiet{background:transparent;color:var(--ink)}
a.tbi-thanks-btn-quiet:hover,
body.woocommerce-page a.tbi-thanks-btn-quiet:hover{background:var(--ink);color:#fff}
a.tbi-thanks-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- Woo's own receipt, underneath ------------------------------------- */
.woocommerce-order > .woocommerce-notice,
.woocommerce-order > p.woocommerce-thankyou-order-received{margin:0 0 24px;
  font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink)}
.woocommerce-order ul.order_details{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 26px;
  list-style:none;margin:0 0 36px;padding:24px;border:1px solid var(--line);
  background:var(--white)}
.woocommerce-order ul.order_details li{margin:0;padding:0;border:0;float:none;
  font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted)}
.woocommerce-order ul.order_details li strong{display:block;margin-top:5px;
  font:400 17px var(--sans);text-transform:none;letter-spacing:normal;color:var(--ink)}
.woocommerce-order h2{font-family:var(--serif);font-weight:400;font-size:24px;
  margin:0 0 16px;color:var(--ink)}

@media(max-width:900px){
  .tbi-thanks{padding:32px 26px}
  .tbi-thanks-lede{font-size:17px}
}
@media(max-width:600px){
  .tbi-thanks{padding:26px 20px}
  .tbi-step{grid-template-columns:36px 1fr;gap:14px;padding:18px 0}
  .tbi-step-num{width:36px;height:36px;font-size:15px}
  .tbi-step-title{font-size:19px}
  .tbi-step-body p{font-size:15px}
  .tbi-thanks-facts{padding:20px;gap:16px}
  .tbi-thanks-facts dd{font-size:16px}
  a.tbi-thanks-btn,body.woocommerce-page a.tbi-thanks-btn{width:100%;text-align:center}
}
@media(max-width:400px){
  .tbi-thanks{padding:22px 16px}
  .tbi-thanks-title{font-size:27px}
}

/* ---- the two chip rows share one band -------------------------------- */
/* They used to be two grid items, one above the other, which cost the
   approved section 132px before the cards even started. Side by side in one
   band it is 76px, and on a phone they stack inside it. */
.tbi-affirm-plans .tbi-chiprows{grid-column:1/-1;order:-1;display:flex;
  flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;padding:20px 32px 17px;border-bottom:1px solid var(--ink)}
.tbi-chiprows .tbi-cur-switch,
.tbi-chiprows .tbi-type-switch{padding:0;border-bottom:0;flex:0 1 auto}
@media(max-width:900px){
  .tbi-affirm-plans .tbi-chiprows{padding:18px 24px 15px;gap:12px 20px}
}

/* ---- the chip band on a phone ----------------------------------------- */
/* Inline labels made each group wrap to two lines, so the band stood 206px
   tall before a single card. Giving each group the full width with its label
   as a caption above the chips brings it back to about 150 and reads better
   than a wrapped label mid-row. */
@media(max-width:600px){
  /* flex-wrap MUST go back to nowrap here. With direction:column the base
     rule's wrap makes items break into new COLUMNS, and `flex:1 1 100%` is
     100% of the HEIGHT once the main axis is vertical - so the two groups sat
     side by side, 212px wide inside a 339px band, and pushed the document
     scrollWidth to 463. Measured, not guessed. */
  .tbi-affirm-plans .tbi-chiprows{flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;gap:14px;padding:16px 24px 14px}
  /* Each group is its own full-width row, and its chips SHARE that row
     equally - two chips are 50/50, three are thirds. flex:1 1 0 with
     min-width:0 is what makes them equal rather than text-width: "Motivational"
     is twice the length of "Business" and sized to content they looked
     accidental. */
  .tbi-chiprows .tbi-cur-switch,
  .tbi-chiprows .tbi-type-switch{flex:0 0 auto;width:100%;display:flex;
    flex-wrap:wrap;align-items:center;gap:8px}
  .tbi-chiprows .tbi-cur-label{flex:1 1 100%;display:block;margin:0 0 1px;
    font-size:12px}
  .tbi-chiprows .tbi-cur-switch a.tbi-cur{flex:1 1 0;min-width:0;margin:0;
    padding:11px 8px;text-align:center}
}

/* ---- the panels keep their own type over the Woo layer ----------------- */
/* `body.woocommerce-page .page-content h2{font-size:26px}` above is (0,2,1)
   and both panels' headings are plain classes at (0,1,0), so the generic Woo
   heading sizes were flattening them - the thank-you title measured 26px
   where the design is a clamp up to 46. Restated with the body class so the
   panels win on their own turf. Fourth instance of this trap in the build:
   a broad element rule inside a scoped block outranks a utility class. */
body.woocommerce-page .tbi-thanks .tbi-thanks-title{font-family:var(--serif);
  font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.08;color:var(--ink)}
body.woocommerce-page .tbi-thanks .tbi-step-title{font-family:var(--serif);
  font-weight:400;font-size:22px;line-height:1.2;color:var(--ink)}
body.woocommerce-page .tbi-thanks .tbi-thanks-lede{font-size:18px;line-height:1.55}
body.woocommerce-page .tbi-thanks .tbi-step-body p{font-size:16px;line-height:1.6;
  color:var(--muted)}
body.woocommerce-page .tbi-account .tbi-dash-title,
body.woocommerce-page .tbi-dash .tbi-dash-title{font-family:var(--serif);
  font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--ink)}
body.woocommerce-page .tbi-dash .tbi-dash-plan{font-family:var(--serif);
  font-weight:400;font-size:26px;line-height:1.15;color:var(--ink)}
body.woocommerce-page .tbi-dash .tbi-dash-summary{font-size:17px;line-height:1.55;
  color:var(--ink)}
@media(max-width:600px){
  body.woocommerce-page .tbi-thanks .tbi-step-title{font-size:19px}
  body.woocommerce-page .tbi-thanks .tbi-thanks-lede{font-size:17px}
  body.woocommerce-page .tbi-dash .tbi-dash-plan{font-size:22px}
}

/* ---- the whole plan card is the link ---------------------------------- */
/* The Subscribe anchor grows an invisible overlay across its own card, so a
   tap anywhere on the card goes to that plan's checkout.
   No second <a> around the card: nesting links is invalid, breaks keyboard
   order and gives screen readers two targets for one action. This way there
   is still exactly ONE link per card, the button keeps the focus ring, and
   nothing changes when the button is the inert disabled <button> - a card
   nobody can buy stays unclickable.
   The overlay sits under the text (z-index 1 vs 2) so the card still reads
   and selects normally. */
.tbi-affirm-plan{position:relative}
/* position:static on the anchor is LOAD-BEARING. Give the anchor
   position:relative and its ::after resolves against the anchor, so the
   overlay covers only the button - measured: a click in the middle of the card
   hit the <p>, not the link. Static, and the overlay resolves against the
   card, which is the whole point. */
.tbi-affirm-plan a.tbi-pbtn{position:static}
.tbi-affirm-plan a.tbi-pbtn::after{content:"";position:absolute;inset:0;
  z-index:1;cursor:pointer}
/* hovering anywhere on a buyable card previews the button's own hover, so the
   card reads as one target */
.tbi-affirm-plan:has(a.tbi-pbtn):hover a.tbi-pbtn{background:var(--ink);color:#fff}

/* Quarterly Editions and Thoughts signup — scoped to the new reading flows. */
body.page-id-258 .entry-title,body.page-id-260 .entry-title{display:none}
body.page-id-258 .site-main,body.page-id-260 .site-main{max-width:none;padding:0}
.tbi-quarterly-page{background:#f7f4ec;padding:76px max(22px,calc((100vw - 1220px)/2)) 90px!important;gap:54px}
.tbi-quarterly-panel{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0!important;background:#fff;border:1px solid #151515;box-shadow:12px 12px 0 #f2b705;min-width:0}
.tbi-quarterly-cover,.tbi-quarterly-copy{width:auto!important;min-width:0!important;padding:46px!important}
.tbi-quarterly-cover{background:#e7edff;justify-content:space-between}
.tbi-quarterly-cover .elementor-widget-heading:first-child .elementor-heading-title,.tbi-quarterly-copy .elementor-widget-heading:first-child .elementor-heading-title{font:800 11px/1.4 Arial,sans-serif!important;letter-spacing:.14em;color:#2845d6;text-transform:uppercase}
.tbi-quarterly-cover .elementor-widget-heading:nth-child(2) .elementor-heading-title{font:400 clamp(30px,3.1vw,48px)/1.06 Georgia,serif!important;letter-spacing:-.035em;color:#151515}
.tbi-quarterly-cover .elementor-widget-text-editor p{font-size:16px;line-height:1.5}
.tbi-quarterly-cover .elementor-widget-image img{display:block;width:auto;max-width:100%;height:min(430px,42vw);object-fit:contain;margin:10px auto 0;filter:drop-shadow(12px 14px 14px #17215b33)}
.tbi-quarterly-cover .elementor-widget-heading:last-child .elementor-heading-title{font:800 11px Arial,sans-serif!important;letter-spacing:.14em;color:#151515}
.tbi-quarterly-copy{justify-content:center;gap:13px}
.tbi-quarterly-copy .elementor-widget-heading:nth-child(2) .elementor-heading-title{font:400 clamp(48px,5vw,76px)/.98 Georgia,serif!important;letter-spacing:-.055em;color:#151515}
.tbi-quarterly-copy .elementor-widget-text-editor p{font-size:17px;line-height:1.55;color:#333;margin:0}
.tbi-quarterly-copy .elementor-widget-text-editor:last-child p{font-size:12px;line-height:1.5;color:#666}
.tbi-quarterly-form .elementor-form-fields-wrapper,.tbi-thoughts-form .elementor-form-fields-wrapper{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0!important}
.tbi-quarterly-form .elementor-field-group,.tbi-thoughts-form .elementor-field-group{width:auto!important;max-width:none!important;padding:0!important;margin:0!important;min-width:0}
.tbi-quarterly-form .elementor-field-type-submit,.tbi-thoughts-form .elementor-field-type-submit{grid-column:1/-1}
.tbi-quarterly-form input.elementor-field,.tbi-thoughts-form input.elementor-field{width:100%;min-height:50px;background:#fff!important;border:1px solid #151515!important;border-radius:0!important;color:#151515!important;padding:12px 14px!important}
.tbi-quarterly-form label,.tbi-thoughts-form label{font:700 12px Arial,sans-serif;color:#151515}
.tbi-quarterly-form .elementor-button,.tbi-thoughts-form .elementor-button{width:100%;min-height:50px;background:#151515!important;color:#fff!important;border:1px solid #151515!important;border-radius:0!important;font:700 14px Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important}
.tbi-quarterly-form .elementor-button:hover,.tbi-thoughts-form .elementor-button:hover{background:#2845d6!important;border-color:#2845d6!important}
.tbi-quarterly-after{max-width:640px;text-align:center;align-self:center;gap:10px}
.tbi-quarterly-after .elementor-heading-title{font:400 34px Georgia,serif!important}
.tbi-quarterly-after p{font-size:16px;line-height:1.55}
.tbi-library-page{background:#f7f4ec;padding:70px 0 80px!important;gap:48px;max-width:none!important}
.tbi-library-hero{max-width:1200px;width:calc(100% - 44px);margin:auto;padding:0!important;gap:12px}
.tbi-library-hero .elementor-widget-heading:first-child .elementor-heading-title{font:800 11px Arial,sans-serif!important;letter-spacing:.14em;color:#2845d6}
.tbi-library-hero .elementor-widget-heading:nth-child(2) .elementor-heading-title{font:400 clamp(48px,6vw,92px)/.98 Georgia,serif!important;letter-spacing:-.055em;max-width:850px}
.tbi-library-hero .elementor-element-9190b6e .elementor-heading-title,.tbi-library-hero .elementor-element-bea1012 .elementor-heading-title,.tbi-library-hero .elementor-element-a7c9635 p{text-align:center}
.tbi-library-hero .elementor-widget-text-editor p{font-size:18px;line-height:1.55;max-width:770px;margin:0}
.tbi-library-hero .elementor-widget-text-editor:last-child{background:#fff;border-left:5px solid #f2b705;padding:13px 17px;max-width:900px;margin-top:16px}
.tbi-library-hero .elementor-widget-text-editor:last-child p{font-size:14px}
.tbi-library-end{max-width:1200px;width:calc(100% - 44px);margin:auto;background:#151515;color:#fff;padding:38px!important;gap:10px}
.tbi-library-end .elementor-heading-title,.tbi-library-end p{color:#fff!important}.tbi-library-end .elementor-heading-title{font:400 40px Georgia,serif!important}
.tbi-library-end .elementor-button{background:#f2b705!important;color:#151515!important;border-radius:0!important}
.tbi-form .elementor-field-type-text{flex:1 1 100%;background:#fff;border-bottom:2px solid var(--ink)}
.tbi-form input[type=text].elementor-field{border:0!important;background:#fff!important;outline:none;padding:16px 14px!important;width:100%;font:inherit!important;color:var(--ink);border-radius:0!important;box-shadow:none!important}
.tbi-form input[type=text].elementor-field::placeholder{color:var(--muted);opacity:1}
.tbi-form input[type=text]:-webkit-autofill,
.tbi-form input[type=text]:-webkit-autofill:hover,
.tbi-form input[type=text]:-webkit-autofill:focus,
.tbi-form input[type=text]:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #fff inset!important;box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
.tbi-form input[type=text].elementor-field:focus{outline:3px solid var(--blue);outline-offset:4px}
.tbi-thoughts-form{width:100%;max-width:520px}
.tbi-thoughts-form .elementor-message{font-size:14px}
.elementor-popup-modal:has(.elementor-262) .dialog-widget-content{width:min(880px,calc(100vw - 28px))!important;max-height:min(92vh,750px)!important;overflow-x:hidden!important;overflow-y:auto!important;border:1px solid #151515;box-shadow:14px 14px 0 #f2b705!important}
.elementor-popup-modal:has(.elementor-262) .dialog-message{width:100%!important;max-width:100%!important;overflow:visible!important}
.elementor-262 .tbi-popup-shell{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0!important;min-width:0}
.elementor-262 .tbi-popup-art,.elementor-262 .tbi-popup-content{width:auto!important;min-width:0!important;padding:35px!important}
.elementor-262 .tbi-popup-art{grid-column:1;grid-row:1;background:#e7edff;align-items:center;justify-content:center;gap:9px;text-align:center}
.elementor-262 .tbi-popup-content{grid-column:2;grid-row:1;background:#fff;align-items:stretch!important;justify-content:center;gap:12px}
.elementor-262 .tbi-popup-art .elementor-widget-heading:first-child .elementor-heading-title,.elementor-262 .tbi-popup-content .elementor-widget-heading:first-child .elementor-heading-title{font:800 11px Arial,sans-serif!important;letter-spacing:.13em;color:#2845d6}
.elementor-262 .tbi-popup-art img{max-height:350px;width:auto;object-fit:contain;filter:drop-shadow(10px 10px 10px #17215b33)}
.elementor-262 .tbi-popup-art .elementor-widget-heading:nth-of-type(2) .elementor-heading-title{font:400 24px Georgia,serif!important;color:#151515}
.elementor-262 .tbi-popup-art .elementor-widget-text-editor p{font-size:12px!important;line-height:1.4}
.elementor-262 .tbi-popup-content .elementor-widget-heading:nth-child(2) .elementor-heading-title{font:400 clamp(38px,4vw,58px)/1.02 Georgia,serif!important;letter-spacing:-.04em;color:#151515}
.elementor-262 .tbi-popup-content .elementor-widget-text-editor p{font-size:15px;line-height:1.5;margin:0}
.elementor-262 .tbi-popup-content .elementor-widget-text-editor:last-child p{font-size:11px;color:#666}
.elementor-262 .tbi-quarterly-form .elementor-form-fields-wrapper{grid-template-columns:1fr}
.elementor-262 .tbi-quarterly-form .elementor-field-type-submit{grid-column:auto}
@media(max-width:820px){.tbi-quarterly-page{padding:50px 22px 70px!important}.tbi-quarterly-panel{grid-template-columns:1fr 1fr}.tbi-quarterly-cover,.tbi-quarterly-copy{padding:30px!important}.tbi-quarterly-cover .elementor-widget-image img{height:340px}.tbi-quarterly-form .elementor-form-fields-wrapper,.tbi-thoughts-form .elementor-form-fields-wrapper{grid-template-columns:1fr}.tbi-quarterly-form .elementor-field-type-submit,.tbi-thoughts-form .elementor-field-type-submit{grid-column:auto}}
@media(max-width:650px){.tbi-quarterly-panel{grid-template-columns:1fr}.tbi-quarterly-cover{padding:28px!important}.tbi-quarterly-cover .elementor-widget-image img{height:270px}.tbi-quarterly-copy{padding:32px 28px!important}.tbi-quarterly-copy .elementor-widget-heading:nth-child(2) .elementor-heading-title{font-size:48px!important}.tbi-quarterly-after{padding:0 14px}.tbi-library-page{padding:50px 0 60px!important;gap:30px}.tbi-library-hero .elementor-widget-heading:nth-child(2) .elementor-heading-title{font-size:50px!important}.tbi-library-end{padding:28px!important}.elementor-popup-modal:has(.elementor-262) .dialog-widget-content{max-height:90vh!important}.elementor-262 .tbi-popup-shell{grid-template-columns:1fr}.elementor-262 .tbi-popup-art{grid-column:1;grid-row:1;padding:14px 20px!important;gap:4px}.elementor-262 .tbi-popup-art img{max-height:130px}.elementor-262 .tbi-popup-art .elementor-element-c7c3995,.elementor-262 .tbi-popup-art .elementor-element-196593d,.elementor-262 .tbi-popup-art .elementor-element-0baff1d{display:none!important}.elementor-262 .tbi-popup-content{grid-column:1;grid-row:2;padding:24px!important}.elementor-262 .tbi-popup-content .elementor-widget-heading:nth-child(2) .elementor-heading-title{font-size:39px!important}}