/* CYT-47 material redesign. Loaded last on every active page. */
@font-face{
  font-family:Roboto;
  src:url("../fonts/roboto-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --tt-material-deep:#032f3d;
  --tt-material-teal:#075b70;
  --tt-material-cyan:#1db4da;
  --tt-material-cyan-soft:#72def5;
  --tt-material-orange:#f47a3d;
  --tt-material-ink:#082f3a;
  --tt-material-muted:#4e6971;
  --tt-material-line:#cfe0e4;
  --tt-material-wash:#f3f8f9;
  --tt-material-shadow:0 22px 55px rgba(3,63,80,.12);
  --tt-shell-max:1280px;
  --tt-shell-outer:1328px;
  --tt-shell-gutter:24px;
  --tt-shell-gutter-mobile:18px;
  --tt-header-height:78px;
  --tt-header-height-compact:68px;
  --tt-header-height-mobile:62px;
  --tt-hero-space:54px;
  --tt-hero-space-mobile:42px;
  --tt-display-size:clamp(44px,5.6vw,74px);
  --tt-display-product-size:clamp(38px,4.25vw,58px);
  --tt-display-mobile-size:clamp(34px,10vw,44px);
  --tt-card-radius:18px;
}

.tt-page{color:var(--tt-material-ink);background:var(--tt-material-wash);}
.tt-page h1,.tt-page h2,.tt-page h3{letter-spacing:-.035em;text-wrap:balance;word-break:normal;overflow-wrap:normal;}
.tt-page h1{font-weight:800;}
.tt-page h2{font-weight:800;}
.tt-page h3{font-weight:700;}

/* Header */
.tt-page .tt-header,.tt-home .tt-header{
  position:sticky;top:0;left:auto;right:auto;
  z-index:200;background:rgba(3,47,61,.97);
  border-bottom:1px solid rgba(114,222,245,.16);
  box-shadow:0 10px 30px rgba(0,28,37,.12);
  backdrop-filter:blur(14px);
}
.tt-page .tt-header-inner{
  width:min(100%,var(--tt-shell-outer));height:var(--tt-header-height);margin:0 auto;padding:0 var(--tt-shell-gutter);gap:26px;
}
.tt-page .tt-logo img{width:168px;height:auto;display:block;}
.tt-page .tt-logo{display:flex;align-items:center;}
.tt-page .tt-bc{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;}
.tt-page .tt-bc a{display:inline-flex;align-items:center;min-height:44px;}
.tt-page .tt-nav{margin-left:auto;}
.tt-page .tt-nav ul{gap:3px;}
.tt-page .tt-nav li+li{border-left:0;}
.tt-page .tt-nav a{
  min-height:46px;padding:8px 11px;border-radius:8px;
  color:rgba(255,255,255,.78);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;
}
.tt-page .tt-nav a:hover,.tt-page .tt-nav a[aria-current=page]{
  color:#fff;background:rgba(255,255,255,.08);
}
.tt-page .tt-head-tools{margin-left:2px;}
.tt-page .tt-header-shop{
  min-width:74px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 17px;border-radius:999px;color:#082f3a;background:var(--tt-material-orange);
  font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(244,122,61,.2);
}
.tt-page .tt-header-shop:hover,.tt-page .tt-header-shop:focus-visible{
  color:#082f3a;background:#ff8a4f;text-decoration:none;
}
.tt-page .tt-header-shop:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* Homepage hero */
.tt-home .tt-v2-hero{
  min-height:650px;padding:38px 24px 34px;
  background:radial-gradient(circle at 76% 18%,rgba(29,180,218,.28),transparent 30%),
    linear-gradient(145deg,#022c39 0%,#064d61 58%,#087c9d 100%);
}
.tt-home .tt-v2-hero-inner{
  width:min(100%,1280px);grid-template-columns:minmax(0,.92fr) minmax(430px,.88fr);
  gap:36px 64px;align-items:center;
}
.tt-home .tt-v2-hero-copy{max-width:650px;}
.tt-home .tt-v2-kicker{margin-bottom:12px;}
.tt-home .tt-v2-hero h1{font-size:clamp(42px,3.8vw,59px);}
.tt-home .tt-v2-claim-support{margin-top:14px;padding:10px 13px;}
.tt-home .tt-v2-hero-lead{max-width:580px;}
.tt-home .tt-v2-hero-lead{margin-top:14px;font-size:18px;line-height:1.45;}
.tt-home .tt-v2-hero-actions{margin-top:20px;}
.tt-home .tt-v2-badges{margin-top:10px;}
.tt-home .tt-v2-mobile-showcase{display:none!important;}
.tt-home .tt-material-hero-visual{width:min(100%,390px);}
.tt-material-scene{
  display:block;overflow:hidden;aspect-ratio:1;border:1px solid rgba(255,255,255,.24);
  border-radius:26px;background:#0b4050;box-shadow:0 32px 80px rgba(0,27,36,.38);
}
.tt-material-scene img{width:100%;height:100%;display:block;object-fit:cover;}
.tt-material-card-inset{
  position:absolute;right:-18px;bottom:58px;width:154px;overflow:hidden;
  border:7px solid #fff;border-radius:18px;background:#fff;
  box-shadow:0 20px 42px rgba(0,27,36,.34);transform:rotate(3deg);
}
.tt-material-card-inset img{width:100%;height:auto;display:block;}
.tt-material-hero-products{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  padding-top:8px;
}
.tt-material-hero-products a{
  min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;align-items:center;
  min-height:76px;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  color:#fff;background:rgba(1,34,44,.42);text-decoration:none;
}
.tt-material-hero-products a:hover{border-color:rgba(114,222,245,.7);background:rgba(1,34,44,.7);}
.tt-material-hero-products img{width:58px;height:58px;border-radius:9px;object-fit:cover;background:#fff;}
.tt-material-hero-products span{min-width:0;}
.tt-material-hero-products strong,.tt-material-hero-products small{display:block;}
.tt-material-hero-products strong{font-size:14px;line-height:1.2;}
.tt-material-hero-products small{margin-top:4px;color:rgba(255,255,255,.68);font-size:12px;}

/* Shared section language */
.tt-material-section-head{
  width:min(100%,1280px);display:grid;grid-template-columns:1.05fr .95fr;gap:46px;
  align-items:end;margin:0 auto 24px;padding-bottom:18px;border-bottom:1px solid var(--tt-material-line);
}
.tt-material-section-head h2{max-width:760px;margin:0;color:#063f50;font-size:clamp(36px,4.2vw,58px);line-height:1;}
.tt-material-section-head>p{max-width:620px;margin:0;color:var(--tt-material-muted);font-size:18px;line-height:1.58;}
.tt-material-kicker{margin:0 0 10px;color:#077b9b;font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;}

.tt-home .tt-v2-flow{padding:34px 24px 38px;}
.tt-home .tt-v2-flow-inner,.tt-home .tt-v2-future-inner{width:min(100%,1280px);}
.tt-home .tt-v2-flow-header{padding-bottom:20px;}
.tt-home .tt-v2-flow h2{font-size:clamp(38px,4.2vw,56px);}
.tt-home .tt-v2-flow-intro p{margin-bottom:10px;font-size:16px;}
.tt-home .tt-v2-flow-steps{margin-top:24px;align-items:stretch;}
.tt-home .tt-v2-flow-step{min-height:0;padding:14px;}
.tt-home .tt-v2-flow-step:not(:last-child)::after{top:96px;}
.tt-home .tt-v2-tap-stage,.tt-home .tt-v2-phone,.tt-home .tt-v2-posted-state{flex:1 1 auto;}
.tt-home .tt-v2-tap-stage,.tt-home .tt-v2-posted-state{min-height:180px;}
.tt-home .tt-v2-phone{display:flex;flex-direction:column;justify-content:center;}
.tt-home .tt-v2-tap-stage img{max-height:175px;width:auto;}
.tt-home .tt-v2-step-heading>span{flex-basis:34px;}
.tt-home .tt-v2-step-heading h3{font-size:19px;}
.tt-home .tt-v2-step-heading p{font-size:12px;}
.tt-home .tt-v2-phone{margin-top:8px;padding:6px;border-width:5px;border-radius:24px;}
.tt-home .tt-v2-phone-screen{min-height:0;padding:8px;}
.tt-home .tt-v2-example-review{margin-top:6px;padding:7px;}
.tt-home .tt-v2-screen-notice{margin-bottom:5px;padding-bottom:5px;}
.tt-home .tt-v2-phone-screen blockquote{margin:6px 0;padding:7px;}
.tt-home .tt-v2-suggestion-label{margin-bottom:4px;}
.tt-home .tt-v2-suggestions li{padding:5px 7px;}
.tt-home .tt-v2-suggestions li:nth-child(n+2){display:none;}
.tt-home .tt-v2-post-control{min-height:34px;margin-top:6px;}
/* Last centred body copy on the site. tt-v2.css centres this caption inside an
   850px block whose section is left-aligned, so it floated ~75px right of the
   eyebrow, heading, intro and cards above it. */
.tt-home .tt-v2-flow-note{margin:16px 0 0;max-width:850px;text-align:left;}
.tt-home .tt-v2-future{padding:40px 24px 44px;}
.tt-home .tt-v2-future-header{padding-bottom:22px;}
.tt-home .tt-v2-future h2{font-size:clamp(42px,4.6vw,60px);}
.tt-home .tt-v2-future-header>p{font-size:16px;}
.tt-home .tt-v2-future-grid{margin-top:24px;}
.tt-home .tt-v2-future-card{padding:22px;}
.tt-home .tt-v2-future-card h3{font-size:clamp(23px,2.3vw,31px);}
.tt-home .tt-v2-future-card>p:not(.tt-v2-card-label){font-size:14px;}
.tt-home .tt-v2-decision-path{margin-top:18px;}
.tt-home .tt-v2-decision-path li{padding:10px;}
.tt-home .tt-v2-decision-path li>span,.tt-home .tt-v2-decision-path svg{margin-bottom:7px;}
.tt-home .tt-v2-time-savers{margin-top:16px;}
.tt-home .tt-v2-time-savers li{grid-template-columns:32px 1fr;padding:6px 8px;}
.tt-home .tt-v2-time-savers svg{width:32px;height:32px;padding:7px;}
.tt-home .tt-v2-always-ready{margin-top:10px;padding:6px 8px;}

/* One product grid */
.tt-home .tt-material-products{padding:32px 24px 36px;background:#fff;}
.tt-home .tt-material-products>.tt-prod-grid{width:min(100%,1280px);margin:0 auto;padding:0;}
.tt-page .tt-prod-grid{gap:24px;}
.tt-page .tt-prod{
  overflow:hidden;border:1px solid #d8e7ea;border-radius:20px;background:#fff;
  box-shadow:0 16px 38px rgba(3,63,80,.08);transition:transform .2s,box-shadow .2s;
}
.tt-page .tt-prod:hover{transform:translateY(-4px);box-shadow:var(--tt-material-shadow);}
.tt-page .tt-prod-media{aspect-ratio:2/1;padding:14px;background:linear-gradient(145deg,#f8fbfc,#edf5f7);}
.tt-page .tt-prod-media a{height:100%;display:block;}
.tt-page .tt-prod-media img{width:100%;height:100%;object-fit:contain;border-radius:12px;}
.tt-page .tt-prod-body{gap:6px;padding:13px 17px 15px;}
.tt-page .tt-prod-title-row{gap:12px;}
.tt-page .tt-prod h3,.tt-page .tt-shop-grid .tt-prod h2{font-size:20px;font-weight:700;line-height:1.28;}
.tt-page .tt-prod-rating{font-size:13px;font-weight:700;}
.tt-page :is(.tt-prod-rating,.tt-stars,.tt-rev-stars,.tt-side-stars,.tt-summary-score .tt-stars) svg,
.tt-page :is(.tt-prod-rating,.tt-stars,.tt-rev-stars,.tt-side-stars,.tt-summary-score .tt-stars){color:var(--tt-material-orange);fill:var(--tt-material-orange);}
.tt-page .tt-price{font-size:23px;font-weight:800;}
.tt-page .tt-amazon-cta.tt-amazon-cta--unavailable{
  min-height:46px;margin-top:10px;border:1px solid #c7d5d9;border-radius:10px;
  color:#53676e;background:#eef3f4;font-size:12px;letter-spacing:.02em;
}

/* FAQ, video and proof consolidation */
/* Every band on this page shares ONE container and ONE left edge: min(100%,1280px)
   inside a 24px gutter. The FAQ head, video band and trust row each used to set
   their own width and centre their text, which is why the page read as four
   different layouts stacked together. */
.tt-home .tt-faq-head{padding:38px 24px 14px;background:#f3f8f9;text-align:left;}
.tt-home .tt-faq-head .tt-eyebrow{
  width:min(100%,1280px);margin:0 auto 10px;color:#077b9b;
  font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
}
.tt-home .tt-faq-head h2{
  width:min(100%,1280px);max-width:none;margin:0 auto;color:#063f50;
  font-size:clamp(34px,4vw,54px);font-weight:800;line-height:1.04;text-wrap:balance;
}
.tt-home .tt-faq{
  width:100%;max-width:none;grid-template-columns:1fr;padding:22px 24px 34px;background:#f3f8f9;
}
.tt-home .tt-faq-list{
  width:min(100%,1280px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:0 auto;
}
.tt-home .tt-acc{border:1px solid #d8e7ea;border-radius:12px;background:#fff;}
.tt-home .tt-acc-q{min-height:44px;padding:7px 14px;font-size:15px;}
.tt-home .tt-acc-a{padding:0 16px 18px;color:#49636c;line-height:1.55;}
.tt-home .tt-action{margin-top:-1px;padding:52px 24px 56px;background:#082f3a;box-shadow:0 -1px 0 #082f3a;text-align:left;}
.tt-home .tt-action-inner{
  width:min(100%,1280px);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  grid-template-rows:auto auto;column-gap:64px;
  align-content:center;align-items:start;text-align:left;
}
/* The video spans both text rows; without this it stretches them and the lead
   and headline drift apart by the height of the thumbnail. */
.tt-home .tt-action-inner > .tt-videos.tt-videos--action{align-self:center;}
/* This one carries a full sentence, not a short label, so it is styled as lead
   copy - the uppercase eyebrow treatment used elsewhere would shout a sentence. */
.tt-home .tt-action-inner > .tt-eyebrow{
  grid-column:1;grid-row:1;margin:0 0 14px;max-width:44ch;color:var(--tt-material-cyan-soft);
  font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;
  text-align:left;text-wrap:pretty;
}
.tt-home .tt-action-inner > h2{
  grid-column:1;grid-row:2;margin:0;color:#fff;text-align:left;
  font-size:clamp(36px,4.4vw,58px);font-weight:800;line-height:1.04;text-wrap:balance;
}
.tt-home .tt-action-inner > .tt-videos.tt-videos--action{
  grid-column:2;grid-row:1 / span 2;width:100%;margin:0;
  grid-template-columns:minmax(0,1fr);grid-auto-flow:row;overflow:visible;
}

.tt-home .tt-video-shell{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#041e26;}

.tt-home .tt-material-proof{padding:24px;background:#fff;text-align:left;}
.tt-home .tt-material-proof .tt-material-section-head{
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px;
  margin-bottom:12px;padding-bottom:0;border-bottom:0;
}
/* home-live.css centres .tt-reviews h2 and its eyebrow. Inside this band the
   eyebrow and body copy are left-aligned, so a centred headline between them
   left the section with three different alignments. */
.tt-home .tt-material-proof .tt-eyebrow,
.tt-home .tt-material-proof .tt-material-section-head h2{text-align:left;}
.tt-home .tt-material-proof .tt-material-section-head h2{font-size:clamp(30px,3.2vw,46px);line-height:1.02;max-width:22ch;text-wrap:balance;}
.tt-home .tt-material-proof .tt-material-section-head>p{font-size:16px;line-height:1.35;text-wrap:pretty;}
/* This row used to sit on the section's own 24px padding while everything above
   it sat on the 1280 container, so its first character started 56px to the left
   of the headline. */
.tt-home .tt-material-proof .tt-review-empty{
  width:min(100%,1280px);margin:0 auto;
  display:flex;align-items:center;gap:18px;background:transparent;border:0;border-left:0;
  border-radius:0;padding:0;font-size:14px;line-height:1.4;
}
.tt-home .tt-material-proof .tt-review-empty p{flex:1;margin:0;font-size:14px;line-height:1.4;}
.tt-home .tt-material-proof-link{flex:0 0 auto;margin-top:0;}
.tt-home .tt-material-proof>.tt-quotes{
  width:min(100%,1280px);grid-template-columns:repeat(4,1fr);gap:12px;margin:0 auto 22px;padding:0;
}
.tt-home .tt-material-proof .tt-quote{border:1px solid #d9e7ea;border-radius:16px;background:#f7fbfc;}
.tt-home .tt-material-proof .tt-quote blockquote{height:100%;margin:0;padding:11px;}
.tt-home .tt-material-proof .tt-quote .tt-qmark{margin-bottom:5px;font-size:44px;}
.tt-home .tt-material-proof .tt-quote p{font-size:12px;line-height:1.34;}
.tt-home .tt-material-proof .tt-quote cite{color:#075b70;font-weight:800;}
.tt-home .tt-material-proof>.tt-reviews-grid{
  width:min(100%,1040px);grid-template-columns:1fr;margin:0 auto;padding:0;
}
.tt-home .tt-material-proof .tt-summary{border:1px solid #d9e7ea;border-radius:16px;background:#f7fbfc;}
.tt-home .tt-material-proof-link{margin-top:14px;}
.tt-home .tt-material-proof .tt-rev{border-color:#d9e7ea;}
.tt-home .tt-material-close{
  width:100%;max-width:none;margin-inline:0;
  grid-template-columns:1fr 1fr 1.25fr;align-items:stretch;gap:44px;
  padding:34px max(24px,calc((100% - 1232px)/2)) 40px;background:#eef6f8;text-align:left;
}
/* Body copy reads left-aligned. Centring these two blocks was what produced the
   ragged edges and the "link is configured." orphan on the last line. */
.tt-home .tt-material-close>.tt-anim{text-align:left;}
.tt-home .tt-material-close svg{margin:0 0 14px;}
.tt-home .tt-material-close h3{margin:0 0 8px;font-size:17px;font-weight:700;}
.tt-home .tt-material-close p{max-width:34ch;font-size:16px;line-height:1.55;text-wrap:pretty;}
.tt-home .tt-material-close-cta{
  grid-column:auto;display:grid;align-content:center;justify-items:start;gap:18px;
  padding:28px;border-radius:16px;color:#fff;background:#075b70;text-align:left;
}
.tt-home .tt-material-close-cta p{max-width:34ch;margin:0;font-size:17px;font-weight:700;line-height:1.35;text-wrap:pretty;}
/* One button shape sitewide. The canonical CTA is .tt-v2-button-primary:
   54px tall, 16px, weight 800, 8px radius, sentence case. This one was a 999px
   pill at 18px, and the review-policy link below was a grey 14px/weight-500 box
   with square corners in caps - three different button languages on one page. */
.tt-home .tt-material-close-cta a{
  min-height:54px;display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;
  border-radius:8px;color:#082f3a;background:var(--tt-material-orange);
  font-size:16px;font-weight:800;text-transform:none;text-decoration:none;
}
.tt-page :is(.tt-rev-more,.tt-material-proof-link){
  min-height:44px;padding:10px 18px;border:1px solid var(--tt-material-line);border-radius:8px;
  background:#fff;color:#0b5063;font:700 15px/1.2 Roboto,system-ui,sans-serif;
  text-transform:none;letter-spacing:0;
}
.tt-page :is(.tt-rev-more,.tt-material-proof-link):hover{background:var(--tt-material-wash);color:#083c4b;}
.tt-contact-page .tt-form button[type=submit]{text-transform:none;}

/* Unified inner-page and compact product hero */
.tt-inner .tt-phero,.tt-blog-index-page .tt-phero,.tt-policy-page .tt-phero{
  min-height:360px;display:flex;align-items:center;
  background:radial-gradient(circle at 82% 25%,rgba(114,222,245,.22) 0 12%,transparent 12.5%),
    linear-gradient(125deg,#032f3d 0%,#075b70 62%,#087c9d 100%);
}
.tt-inner .tt-phero::before,.tt-blog-index-page .tt-phero::before,.tt-policy-page .tt-phero::before{
  background:linear-gradient(135deg,transparent 0 64%,rgba(255,255,255,.055) 64% 70%,transparent 70%);opacity:1;
}
.tt-inner .tt-phero-in,.tt-blog-index-page .tt-phero-in,.tt-policy-page .tt-phero-in{
  width:min(100%,var(--tt-shell-max));margin:0 auto;padding:var(--tt-hero-space) var(--tt-shell-gutter);
}
.tt-page .tt-phero-kicker{margin:0 0 12px;color:var(--tt-material-cyan-soft);font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;}
.tt-inner .tt-phero h1,.tt-blog-index-page .tt-phero h1,.tt-policy-page .tt-phero h1{
  max-width:980px;margin:0;color:#fff;font-size:var(--tt-display-size);font-weight:800;line-height:1;letter-spacing:-.045em;text-transform:none;
}
.tt-page .tt-phero-lead{max-width:760px;margin:18px 0 0;color:#e1f4f7;font-size:20px;line-height:1.5;}
.tt-page .tt-phero .tt-inner-kicker{color:var(--tt-material-cyan-soft);}
.tt-page .tt-phero+.tt-bc,.tt-page .tt-phero+.tt-pbc .tt-bc{
  width:100%;margin:0;padding:13px max(24px,calc((100% - 1280px)/2 + 24px)) 0;color:#294f5b;background:var(--tt-material-wash);
}
.tt-page .tt-phero+.tt-bc a,.tt-page .tt-phero+.tt-pbc .tt-bc a{color:#075b70;}
.tt-product-page .tt-phero--product{min-height:270px;}
.tt-product-page .tt-phero--product h1{max-width:1040px;font-size:var(--tt-display-product-size);}
.tt-product-page .tt-phero--product .tt-phero-in{padding-top:42px;padding-bottom:42px;}
.tt-product-page .tt-psum h2{margin:0;color:#063f50;font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.1;}

/* Shop and content cards */
.tt-shop-page .tt-shop-intro{padding:54px 24px 38px;color:#fff;background:linear-gradient(125deg,#032f3d,#075b70);}
.tt-shop-page .tt-shop-intro-grid{width:min(100%,1280px);margin:0 auto;padding:0;}
.tt-shop-page .tt-shop-h1{color:#fff;font-size:clamp(40px,4.8vw,64px);font-weight:800;line-height:1;}
.tt-shop-page .tt-shop-lead,.tt-shop-page .tt-shop-intro p,.tt-shop-page .tt-shop-intro li{color:#e1f4f7;}
.tt-shop-page .tt-shop-benefits{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);}
.tt-shop-page .tt-shop-grid{width:min(100%,1280px);margin:0 auto;padding:54px 24px 82px;}
/* CYT-254 gutter default: the shared 1280px shell leaves an 80px outer gutter at 1440px. */
.tt-page :is(.tt-two,.tt-contact,.tt-doc,.tt-blog-grid,.tt-prodpage,.tt-tabs,.tt-revpage){max-width:1280px;margin-left:auto;margin-right:auto;}
.tt-page .tt-revpage{padding-left:24px;padding-right:24px;}

/* FAQ and editorial library */
.tt-page .tt-faq-library,.tt-page .tt-blog-library{width:min(100%,1280px);margin:0 auto;padding:72px 24px 96px;}
.tt-page .tt-section-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);gap:10px 72px;align-items:end;margin-bottom:38px;padding-bottom:26px;border-bottom:1px solid #c7dce1;}
.tt-page .tt-section-head .tt-inner-kicker{grid-column:1/-1;margin:0;color:#0d7188;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.tt-page .tt-section-head h2{margin:0;color:#063f50;font-size:clamp(38px,4vw,58px);font-weight:800;line-height:1.02;letter-spacing:-.035em;}
.tt-page .tt-section-head>p:last-child{margin:0;color:#48646c;font-size:18px;line-height:1.65;}
.tt-page .tt-faq-library .tt-acc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;}
.tt-page .tt-faq-library .tt-acc2-item{align-self:start;border:1px solid #c7dce1;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(4,59,75,.06);overflow:hidden;}
.tt-page .tt-faq-library .tt-acc2-q{min-height:64px;padding:18px 52px 18px 20px;color:#063f50;font-size:17px;font-weight:750;line-height:1.35;text-transform:none;}
.tt-page .tt-faq-library .tt-acc2-a{padding:0 20px 20px;color:#466169;line-height:1.65;}
.tt-page .tt-faq-library .tt-acc2-a p{margin:0;}
.tt-page .tt-blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.tt-page .tt-blog-card{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1fr);min-height:276px;border:1px solid #c7dce1;border-radius:20px;background:#fff;box-shadow:0 14px 38px rgba(4,59,75,.08);overflow:hidden;}
.tt-page .tt-blog-media,.tt-page .tt-blog-media picture{display:block;height:100%;}
.tt-page .tt-blog-media img{width:100%;height:100%;object-fit:contain;background:#f3f8f9;}
.tt-page .tt-blog-card-body{display:flex;flex-direction:column;padding:24px;}
.tt-page .tt-blog-date{margin:0 0 10px;color:#0d7188;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.tt-page .tt-blog-card h2{margin:0 0 12px;font-size:24px;line-height:1.15;letter-spacing:-.02em;text-transform:none;}
.tt-page .tt-blog-card h2 a{color:#063f50;text-decoration:none;}
.tt-page .tt-blog-card-body>p:not(.tt-blog-date){margin:0;color:#526970;line-height:1.55;}
.tt-page .tt-blog-read{margin-top:auto;padding-top:18px;color:#0d7188;font-weight:800;text-decoration:none;}
.tt-page .tt-post{width:min(100% - 36px,900px);margin:0 auto;padding:54px 0 96px;}
.tt-page .tt-post-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px;color:#60757b;font-size:14px;font-weight:700;}
.tt-page .tt-post-image{display:block;width:min(100%,420px);margin:0 auto 48px;border-radius:24px;box-shadow:0 20px 52px rgba(4,59,75,.12);overflow:hidden;}
.tt-page .tt-post-image img{display:block;width:100%;height:auto;aspect-ratio:19/9;object-fit:contain;background:#f3f8f9;}
.tt-page .tt-post-body{width:min(100%,760px);margin:0 auto;color:#304e56;font-size:18px;line-height:1.75;}
.tt-page .tt-post-body section+section{margin-top:44px;padding-top:38px;border-top:1px solid #d2e2e5;}
.tt-page .tt-post-body h2{margin:0 0 18px;color:#063f50;font-size:clamp(30px,4vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.025em;text-transform:none;}
.tt-page .tt-post-body p{margin:0 0 18px;}
.tt-page .tt-post-body a{color:#0b7087;font-weight:700;}
.tt-page .tt-post-note{margin-top:48px;padding:24px 26px;border-left:5px solid #1da8c2;border-radius:0 14px 14px 0;color:#28515c;background:#eaf8fa;}

/* The Tap Journal */
.tt-journal-page{background:#f7f5ef;}
.tt-journal-page main{overflow:hidden;}
.tt-journal-hero{position:relative;color:#fff;background:#073b49;}
.tt-journal-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 44%),repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.025) 80px);pointer-events:none;}
.tt-journal-hero-grid{position:relative;width:min(100%,1440px);min-height:660px;display:grid;grid-template-columns:minmax(0,.96fr) minmax(480px,1.04fr);margin:0 auto;}
.tt-journal-feature-copy{align-self:center;padding:72px 64px 74px max(36px,calc((100vw - 1280px)/2 + 24px));}
/* This is the blog index's own name, and it is now the page's h1 - the featured
   post's title was carrying that role, which made the index compete with the
   article it links to. `.tt-blog-index-page .tt-phero h1` styles inner-page hero
   titles at 74px and outranks a bare class, so this is scoped to match it. */
.tt-journal-name,
.tt-inner .tt-phero .tt-journal-name,
.tt-blog-index-page .tt-phero .tt-journal-name{
  max-width:none;margin:0;color:#73e2f1;font-family:inherit;font-size:15px;font-weight:900;
  line-height:1.3;letter-spacing:.19em;text-transform:uppercase;
}
.tt-journal-deck{max-width:520px;margin:10px 0 48px;color:#c5dfe4;font-family:Georgia,"Times New Roman",serif;font-size:21px;font-style:italic;line-height:1.45;}
.tt-feature-label{display:flex;align-items:center;gap:12px;margin:28px 0 13px;color:#ffb17c;font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;}
.tt-feature-label::before{content:"";width:36px;height:2px;background:#ff7e3e;}
.tt-journal-feature-copy #tt-journal-feature-title{max-width:720px;margin:0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,5vw,76px);font-weight:500;line-height:.99;letter-spacing:-.045em;text-wrap:balance;}
.tt-feature-excerpt{max-width:650px;margin:24px 0 0;color:#d5e8eb;font-size:19px;line-height:1.6;}
.tt-feature-byline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);color:#b9d4d9;font-size:14px;font-weight:700;}
.tt-feature-byline a{min-height:48px;display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:900;text-decoration:none;}
.tt-feature-byline a span{color:#ff9b61;font-size:22px;transition:transform .2s ease;}
.tt-feature-byline a:hover span{transform:translateX(4px);}
.tt-journal-feature-image{position:relative;display:grid;place-items:center;min-height:660px;padding:72px;background:linear-gradient(145deg,#f4a65f 0%,#ff7e3e 58%,#dc5e2d 100%);overflow:hidden;}
.tt-journal-feature-image::before{content:"";position:absolute;width:580px;height:580px;border:1px solid rgba(255,255,255,.38);border-radius:50%;box-shadow:0 0 0 64px rgba(255,255,255,.07),0 0 0 128px rgba(255,255,255,.045);}
.tt-journal-feature-image picture{position:relative;width:min(100%,480px);aspect-ratio:1;display:block;filter:drop-shadow(0 32px 28px rgba(94,28,6,.24));transform:rotate(-3deg);transition:transform .35s ease;}
.tt-journal-feature-image:hover picture{transform:rotate(-1deg) translateY(-5px);}
.tt-journal-feature-image img{width:100%;height:100%;display:block;object-fit:contain;}
.tt-feature-issue{position:absolute;right:28px;top:22px;color:rgba(255,255,255,.68);font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:1;}
.tt-story-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;color:#4e6971;font-size:12px;font-weight:900;letter-spacing:.075em;text-transform:uppercase;}
.tt-story-meta>*+*{position:relative;}
.tt-story-meta>*+*::before{content:"";position:absolute;left:-10px;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateY(-50%);opacity:.55;}
.tt-story-meta--light{color:#b9d4d9;}
.tt-story-meta--light span:first-child{color:#75e0ef;}
/* The rail wraps at every width. `flex-wrap:wrap` was scoped to <=767px only, so
   between ~600px and ~1180px the row stayed on one line inside `overflow-x:auto`
   and silently hid up to 388px of chips - at 768 the last topic sat at x=1132,
   reachable only by a horizontal drag most people never try. Wrapping costs one
   extra line on a tablet and keeps every topic visible; above ~1180 the row fits
   on one line anyway, so nothing changes on desktop. */
.tt-journal-topics{min-height:74px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px max(24px,calc((100% - 1280px)/2));border-bottom:1px solid #d4ddd9;color:#34545c;background:#fff;overflow-x:visible;}
.tt-journal-topics span{flex:0 0 auto;padding:9px 13px;border:1px solid #d8e1de;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;}
.tt-journal-topics .tt-journal-topics-label{padding-left:0;border:0;color:#0c7187;letter-spacing:.12em;text-transform:uppercase;}
.tt-journal-library{width:min(100%,1280px);margin:0 auto;padding:88px 24px 112px;}
.tt-journal-library-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.58fr);align-items:end;gap:28px 80px;margin-bottom:52px;padding-bottom:28px;border-bottom:2px solid #0a3f4d;}
.tt-journal-library-head .tt-inner-kicker{margin:0 0 12px;color:#0a788e;font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;}
.tt-journal-library-head h2{margin:0;color:#073b49;font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,5vw,68px);font-weight:500;line-height:1;letter-spacing:-.04em;}
.tt-journal-library-head>p{margin:0;color:#526a6f;font-size:17px;line-height:1.6;}
.tt-story-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:34px 30px;align-items:start;}
.tt-story-card{grid-column:span 4;display:flex;flex-direction:column;min-width:0;border-top:1px solid #afbfbc;background:transparent;overflow:hidden;}
.tt-story-media{display:block;aspect-ratio:16/9;background:linear-gradient(145deg,#edf3f2,#fff7ef);overflow:hidden;}
.tt-story-media picture{display:block;width:100%;height:100%;}
.tt-story-media img{display:block;width:calc(100% - 40px);height:100%;margin-inline:auto;padding:14px;object-fit:contain;transition:transform .45s ease,filter .45s ease;}
.tt-story-media:hover img{transform:scale(1.025);filter:saturate(1.08);}
.tt-story-card-body{display:flex;flex:1;flex-direction:column;padding:22px 4px 0;}
.tt-story-card h3{margin:14px 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:500;line-height:1.08;letter-spacing:-.026em;text-wrap:balance;}
.tt-story-card h3 a{display:inline-block;min-height:44px;color:#073b49;text-decoration:none;}
.tt-story-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.tt-story-card-body>p{margin:0;color:#586d72;font-size:15px;line-height:1.6;}
.tt-story-card footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;color:#647376;font-size:12px;font-weight:800;}
.tt-story-read{width:46px;height:46px;display:grid;place-items:center;border:1px solid #9eb3b5;border-radius:50%;color:#073b49;font-size:22px;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease;}
.tt-story-read:hover{color:#fff;background:#073b49;border-color:#073b49;}

/* Journal article */
.tt-article-page{background:#fbfaf6;}
.tt-article-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);min-height:620px;color:#fff;background:#073b49;}
.tt-article-hero-copy{align-self:center;padding:70px 64px 74px max(36px,calc((100vw - 1280px)/2 + 24px));background:rgba(2,38,49,.94);}
.tt-article-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:48px;color:#9ec3ca;font-size:13px;font-weight:800;}
.tt-article-breadcrumb a{min-height:44px;display:inline-flex;align-items:center;color:#d8edf0;text-decoration:none;}
.tt-article-hero h1{max-width:720px;margin:22px 0 0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.045em;text-wrap:balance;}
.tt-article-deck{max-width:670px;margin:24px 0 0;color:#d2e6e9;font-size:19px;line-height:1.6;}
.tt-article-byline{margin:34px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.17);color:#f2f7f8;font-size:14px;font-weight:850;}
.tt-article-byline span{margin-right:5px;color:#9ec3ca;font-weight:650;}
.tt-article-hero-image{display:block;min-height:620px;background:linear-gradient(145deg,#edf3f2,#fff7ef);overflow:hidden;}
.tt-article-hero-image img{display:block;width:calc(100% + 16px);height:100%;min-height:620px;margin-left:-8px;padding:28px;object-fit:contain;}
@media (min-width:901px){
  .tt-article-hero-image img[src*="/acrylic-tag-"]{max-width:none;}
}
.tt-article-shell{width:min(100% - 48px,1120px);display:grid;grid-template-columns:250px minmax(0,760px);gap:86px;margin:0 auto;padding:86px 0 104px;align-items:start;}
.tt-article-rail{position:sticky;top:96px;padding-top:7px;}
.tt-article-rail-label{margin:0 0 18px;color:#0b7186;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.tt-article-rail ol{margin:0;padding:0;list-style:none;counter-reset:journal-section;}
.tt-article-rail li{counter-increment:journal-section;border-top:1px solid #d1dbd8;}
.tt-article-rail li:last-child{border-bottom:1px solid #d1dbd8;}
.tt-article-rail a{min-height:54px;display:grid;grid-template-columns:26px 1fr;align-items:center;color:#36565e;font-size:13px;font-weight:750;line-height:1.35;text-decoration:none;}
.tt-article-rail a::before{content:"0" counter(journal-section);color:#ec6e36;font-family:Georgia,"Times New Roman",serif;font-weight:700;}
.tt-article-rail a:hover{color:#073b49;}
.tt-article-rail-note{margin-top:30px;padding:20px;border-left:3px solid #ff7e3e;color:#34545c;background:#eef5f3;}
.tt-article-rail-note strong{color:#073b49;font-size:13px;}
.tt-article-rail-note p{margin:7px 0 0;font-size:12px;line-height:1.55;}
.tt-page .tt-article-shell .tt-post-body{width:100%;margin:0;color:#314f56;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.82;}
.tt-article-standfirst{margin:0 0 48px!important;padding-bottom:38px;border-bottom:1px solid #c9d5d2;color:#073b49;font-size:26px;line-height:1.5;}
.tt-page .tt-article-shell .tt-post-body section{scroll-margin-top:100px;}
.tt-page .tt-article-shell .tt-post-body section+section{margin-top:58px;padding-top:52px;border-top:1px solid #d4dedb;}
.tt-page .tt-article-shell .tt-post-body h2{margin:0 0 22px;color:#073b49;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,48px);font-weight:500;line-height:1.08;letter-spacing:-.03em;}
.tt-page .tt-article-shell .tt-post-body p{margin:0 0 22px;}
.tt-page .tt-article-shell .tt-post-body a{color:#08728a;text-decoration-thickness:1px;text-underline-offset:3px;}
.tt-page .tt-article-shell .tt-post-note{margin-top:58px;padding:28px 30px;border-left:5px solid #ff7e3e;border-radius:0;color:#274d56;background:#edf6f4;font-family:Arial,sans-serif;font-size:16px;line-height:1.65;}
.tt-article-footer{width:min(100% - 48px,1280px);display:flex;align-items:end;justify-content:space-between;gap:32px;margin:0 auto;padding:64px 0 28px;border-top:2px solid #073b49;}
.tt-article-footer .tt-inner-kicker{margin:0 0 10px;color:#0a788e;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.tt-article-footer h2{margin:0;color:#073b49;font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4vw,52px);font-weight:500;line-height:1;}
.tt-article-footer>a{min-height:48px;display:inline-flex;align-items:center;gap:10px;color:#073b49;font-weight:900;text-decoration:none;}
.tt-related-grid{width:min(100% - 48px,1280px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:0 auto;padding:0 0 108px;}
.tt-related-card{border-top:1px solid #aebfbc;}
.tt-related-media{display:block;aspect-ratio:16/8;background:linear-gradient(145deg,#edf3f2,#fff7ef);overflow:hidden;}
.tt-related-media picture{display:block;width:100%;height:100%;}
.tt-related-media img{display:block;width:57%;height:100%;margin-inline:auto;padding:12px;object-fit:contain;transition:transform .35s ease;}
.tt-related-media:hover img{transform:scale(1.025);}
.tt-related-card>div{padding:18px 2px 0;}
.tt-related-card p{margin:0;color:#63777b;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;}
.tt-related-card h3{margin:11px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:25px;font-weight:500;line-height:1.12;}
.tt-related-card h3 a{color:#073b49;text-decoration:none;}

/* Contact page: the info cards.
   `.tt-info` was `align-items:start`, so the 30px icon pinned to the top of a
   forced 120px box while its text ran 54-88px - the icon read as detached and
   every card carried dead space under it. And `.tt-info a` inherited a 44px
   min-height meant for phone tap targets, which inflated the line boxes inside
   the Phone/Email paragraph on desktop. */
/* WCAG AA: #087c9d on the #f3f8f9 wash measures 4.48 against a 4.5 requirement.
   pages-live.css sets it on this link; one step darker clears the bar and the
   change is imperceptible. */
.tt-page .tt-faq-more a{color:#077b9b;}

.tt-contact-page .tt-info{min-height:0;align-items:center;padding:16px 18px;}
.tt-contact-page .tt-info p{line-height:1.55;}
.tt-contact-page .tt-info img,.tt-contact-page .tt-info svg{opacity:.72;}
.tt-contact-page .tt-info a{min-height:0;min-width:0;}
.tt-contact-page .tt-contact{padding-top:44px;padding-bottom:64px;}
/* The submit is the only conversion action on this page, but it was rendering in
   a teal at weight 500 while every other primary action on the site is the orange
   #f47a3d at weight 800 (verified against .tt-v2-button-primary). */
.tt-contact-page .tt-form button[type=submit]{
  min-height:54px;padding:13px 26px;border:0;border-radius:8px;
  background:var(--tt-material-orange);color:#092f3a;
  font-size:16px;font-weight:800;letter-spacing:.01em;cursor:pointer;
  transition:filter .18s ease,transform .18s ease;
}
.tt-contact-page .tt-form button[type=submit]:hover{filter:brightness(1.05);}
.tt-contact-page .tt-form button[type=submit]:active{transform:translateY(1px);}
.tt-contact-page .tt-form button[type=submit]:focus-visible{outline:3px solid #72def5;outline-offset:2px;}
/* Native validation is back on, so give its invalid state a visible style. */
.tt-contact-page .tt-form :is(input,textarea):user-invalid{border-color:#c2413a;}
/* The two cards carry very different amounts of content, so the right one used
   to stop well short of the form and leave a ragged empty corner. Stretch it and
   anchor the closing note to its base so the column reads as designed. */
@media (min-width:1025px){
  .tt-contact-page .tt-contact-r{align-self:stretch;}
  .tt-contact-page .tt-contact-note{margin-top:auto;}
}
.tt-contact-page .tt-contact-note{margin-top:20px;padding-top:20px;}
@media (max-width:767px){
  /* tap targets come back where a finger is the pointer */
  .tt-contact-page .tt-info a{min-height:44px;display:inline-flex;align-items:center;}
  .tt-contact-page .tt-contact{padding-top:30px;padding-bottom:44px;}
}

/* Product card imagery: one size, one fit.
   Each card's image carried its own per-product modifier, so three siblings sized
   themselves 420/443/443px inside a 409px media box and used contain/cover/contain.
   `overflow:hidden` then amputated 11-34px off every one - the product was being
   cut by its own frame rather than sitting inside it. `contain` is right for a
   packshot: it shows the whole product instead of cropping to fill. */
.tt-page .tt-prod-media{overflow:hidden;}
.tt-page .tt-prod-media picture{display:block;width:100%;height:100%;}
/* The tag card carried `transform:scale(1.14)` paired with a clip-path that a
   later rule cancelled (`clip-path:none`) while leaving the zoom behind - so the
   image was blown up 14% and then cropped by the frame with nothing controlling
   what got cut. :is() raises specificity above those per-product rules. */
.tt-page .tt-prod-media .tt-product-card-image,
.tt-page [class*="tt-prod--"] .tt-prod-media .tt-product-card-image{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center center;
  transform:none;clip-path:none;
}

/* ONE left edge, sitewide.
   Every page's heading sits at x=104 at 1440 (a 1280 container plus the
   section's own 24px gutter). Home's mid sections were running their inner
   wrapper at the full 1280 INSIDE that same 24px gutter, which lands their copy
   at x=80 - so the homepage jogged 24px against its own hero, trust row, footer
   and disclaimer, and against every other page. 1232 + 24 = the same 104. */
.tt-home :is(.tt-v2-flow-inner,.tt-v2-future-inner,.tt-material-section-head,
             .tt-faq-list,.tt-action-inner,.tt-material-proof .tt-review-empty),
.tt-home .tt-faq-head :is(.tt-eyebrow,h2){
  width:min(100%,1232px);
}

/* Trust row - appears on EVERY page, not just home. home-live.css centres it and
   caps it at 1110px, so on the inner pages its copy was centred (ragged on both
   edges, orphan last lines) and started 85px right of every other section. */
/* Equal 1fr columns on a 1232px row gave each block 594px while its copy is
   capped near 460px, so a ~230px dead gutter opened between the two. Let the
   columns hug their content and sit together on the left instead. */
.tt-page .tt-trust:not(.tt-material-close){
  width:min(100%,1280px);max-width:none;margin:40px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,420px));
  justify-content:start;gap:30px 64px;
  padding:34px 24px 40px;text-align:left;
}
.tt-page .tt-trust:not(.tt-material-close)>*{text-align:left;}
.tt-page .tt-trust:not(.tt-material-close) svg{margin:0 0 14px;}
.tt-page .tt-trust:not(.tt-material-close) h3{margin:0 0 8px;}
.tt-page .tt-trust:not(.tt-material-close) p{max-width:46ch;text-wrap:pretty;}
@media (max-width:767px){
  .tt-page .tt-trust:not(.tt-material-close){grid-template-columns:1fr;gap:30px;padding:28px 20px 34px;}
  .tt-page .tt-trust:not(.tt-material-close) p{max-width:none;}
}

/* Footer */
.tt-page .tt-footer{color:#d7edf1;background:#043b4b;border-top:1px solid rgba(114,222,245,.18);}
/* max-width:1110px from home-live.css was beating the width below (max-width
   wins over width), so the footer sat on its own left edge - 189px against the
   104px every page heading uses. Same container as the rest of the site now. */
.tt-page .tt-footer-grid{
  width:min(100%,1280px);max-width:none;margin:0 auto;padding:48px 24px 40px;
  grid-template-columns:minmax(250px,1.15fr) minmax(190px,.9fr) minmax(280px,1.3fr);
  column-gap:56px;row-gap:36px;align-items:start;
}
.tt-page .tt-footer p,.tt-page .tt-footer li,.tt-page .tt-footer a{color:#c8e2e7;}
.tt-page .tt-footer h2,.tt-page .tt-footer h3{
  margin:0 0 18px;color:#fff;font-size:13px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.3;
}
.tt-page .tt-footer p{margin:0 0 18px;font-size:15px;line-height:1.6;text-wrap:pretty;}
.tt-page .tt-footer li,.tt-page .tt-footer a{font-size:15px;line-height:1.5;}
/* Links sit in a deliberate stack. The 44px tap target is a MOBILE need and is
   restored in the <=767px block below - on desktop it was inflating every short
   link into a 44px slab, which is what made the columns read as random spacing. */
/* Removing the blanket 44px tap target (which was inflating every desktop link
   into a slab) took these down to 23px tall - one pixel BELOW the 24px floor in
   WCAG 2.2 SC 2.5.8. 30px keeps the compact look and clears the requirement at
   every width; the full 44px touch target still returns under 767px below. */
.tt-page .tt-footer a{
  min-height:30px;min-width:0;display:inline-flex;align-items:center;text-decoration:none;
}
.tt-page .tt-footer a:hover,.tt-page .tt-footer a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* Six legal links in one tall column left the other two columns looking empty
   beside it. Two short columns match the brand and support blocks instead. */
.tt-page .tt-footer-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:13px 28px;margin:0;padding:0;list-style:none;justify-content:start;}
.tt-page .tt-footer-links li{margin:0;}
.tt-page .tt-footer-logo{margin:0 0 20px;}
.tt-page .tt-news p{max-width:38ch;}
.tt-page .tt-footer-support p{max-width:34ch;}
.tt-page .tt-footer-support ul{display:grid;gap:13px;margin:0;padding:0;list-style:none;}
.tt-page .tt-footer-cta{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;
}
.tt-page .tt-footer-cta::after{content:"\2192";transition:transform .18s ease;}
.tt-page .tt-footer-cta:hover::after{transform:translateX(3px);}
.tt-page .tt-disclaimer{color:#a9c9d0;background:#032f3d;border-top:1px solid rgba(255,255,255,.1);}
.tt-page .tt-disclaimer .tt-wrap-narrow{width:min(100%,1280px);margin:0 auto;max-width:none;padding:26px 24px 30px;}
.tt-page .tt-disclaimer h2{margin:0 0 8px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;}
/* balance, not pretty: this paragraph was setting two full lines and then a
   4-word third line. balance evens the lines instead of only guarding the last. */
.tt-page .tt-disclaimer p{margin:0 0 10px;max-width:96ch;font-size:13px;line-height:1.6;text-wrap:balance;}
.tt-page .tt-disclaimer .tt-copy{margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);color:#8fb3bc;}

@media (max-width:1080px){
  .tt-page .tt-nav a{padding-inline:8px;font-size:14px;}
  .tt-home .tt-v2-hero-inner{grid-template-columns:minmax(0,1fr) minmax(370px,.78fr);gap:42px;}
  .tt-home .tt-material-proof>.tt-quotes{grid-template-columns:repeat(2,1fr);}
  .tt-journal-hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);}
  .tt-journal-feature-copy,.tt-article-hero-copy{padding-left:36px;padding-right:42px;}
  .tt-journal-feature-image{padding:46px;}
  .tt-article-hero{grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);}
  .tt-article-shell{gap:54px;}
}

@media (max-width:900px){
  /* Two columns squeezed the copy to 236px at 768 while the video kept its full
     420px. Stack from here down instead. */
  .tt-home .tt-action-inner{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:0;}
  .tt-home .tt-action-inner > .tt-eyebrow{grid-column:1;grid-row:1;}
  .tt-home .tt-action-inner > h2{grid-column:1;grid-row:2;}
  .tt-home .tt-action-inner > .tt-videos.tt-videos--action{
    grid-column:1;grid-row:3;width:100%;max-width:420px;margin:22px 0 0;justify-self:start;
  }
  .tt-page .tt-footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:40px;row-gap:38px;padding:48px 20px 40px;}
  .tt-page .tt-header-inner{height:var(--tt-header-height-compact);}
  .tt-page .tt-nav{display:none;}
  .tt-page .tt-burger{display:inline-flex;order:-1;}
  .tt-page .tt-logo{position:absolute;left:50%;transform:translateX(-50%);}
  .tt-home .tt-v2-hero{padding:40px 24px 42px;}
  .tt-home .tt-v2-hero-inner{grid-template-columns:1fr;gap:26px;}
  .tt-home .tt-v2-hero-copy{max-width:760px;}
  .tt-home .tt-v2-hero-visual{width:min(100%,390px);display:block;justify-self:center;}
  .tt-material-hero-products{grid-template-columns:1fr;}
  .tt-material-section-head{grid-template-columns:1fr;gap:16px;align-items:start;}
  .tt-home .tt-faq-list{grid-template-columns:1fr;}
  .tt-home .tt-videos{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tt-journal-hero-grid{grid-template-columns:1fr;}
  .tt-journal-feature-copy{padding:64px 36px 56px;}
  .tt-journal-feature-image{min-height:440px;}
  .tt-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tt-story-card,.tt-story-card--1,.tt-story-card--2,.tt-story-card--3{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;gap:0;}
  .tt-story-card--2 .tt-story-media,.tt-story-card--3 .tt-story-media{height:auto;aspect-ratio:16/9;}
  .tt-story-card--2 .tt-story-media img,.tt-story-card--3 .tt-story-media img{width:calc(100% - 40px);}
  .tt-story-card--2 .tt-story-card-body,.tt-story-card--3 .tt-story-card-body{padding:22px 4px 0;}
  .tt-story-card--2 h3,.tt-story-card--3 h3{font-size:28px;}
  .tt-story-card--2 .tt-story-card-body>p,.tt-story-card--3 .tt-story-card-body>p{display:block;}
  .tt-story-card--1 .tt-story-media{aspect-ratio:16/9;}
  .tt-story-card--1 h3{font-size:32px;}
  .tt-article-hero{grid-template-columns:1fr;min-height:0;}
  .tt-article-hero-copy{padding:58px 36px 54px;}
  .tt-article-hero-image,.tt-article-hero-image img{min-height:360px;max-height:430px;}
  .tt-article-shell{grid-template-columns:1fr;width:min(100% - 48px,760px);gap:54px;padding-top:62px;}
  .tt-article-rail{position:static;}
  .tt-article-rail ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;}
  .tt-article-rail li:last-child{border-bottom:0;}
  .tt-article-rail-note{display:none;}
}

@media (max-width:767px){
  :root{--tt-shell-gutter:var(--tt-shell-gutter-mobile);}
  /* Footer: single column, and the 44px tap target comes back - on a phone the
     link IS the touch surface, so padding here is function, not decoration. */
  .tt-page .tt-footer-grid{grid-template-columns:1fr;row-gap:34px;padding:40px 20px 34px;}
  .tt-page .tt-footer h2,.tt-page .tt-footer h3{margin-bottom:14px;}
  .tt-page .tt-news p,.tt-page .tt-footer-support p{max-width:none;}
  .tt-page .tt-footer-links ul,.tt-page .tt-footer-support ul{grid-template-columns:1fr;gap:2px;}
  /* `.tt-page .tt-footer a` above carries an element selector (0,2,1), which
     outranks a bare `.tt-footer-cta` (0,2,0) - so this one is scoped through the
     same `a` to win rather than silently losing at 30px. */
  .tt-page .tt-footer-links a,.tt-page .tt-footer-support a,.tt-page .tt-footer a.tt-footer-cta{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .tt-page .tt-disclaimer .tt-wrap-narrow{padding:24px 20px 28px;}
  .tt-page .tt-header-inner{height:var(--tt-header-height-mobile);padding:0 12px;}
  .tt-page .tt-logo img{width:132px;height:auto;}
  .tt-page .tt-logo{min-height:44px;}
  .tt-page .tt-burger{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;font-size:0;justify-content:center;}
  .tt-page .tt-header-shop{min-width:62px;min-height:44px;padding:8px 13px;font-size:14px;}
  .tt-home .tt-v2-hero{padding:32px 18px 38px;}
  .tt-home .tt-v2-hero-copy{display:flex;flex-direction:column;}
  .tt-home .tt-v2-kicker{order:1;}
  .tt-home .tt-v2-hero h1{order:2;font-size:clamp(34px,10vw,43px);}
  .tt-home .tt-v2-hero-actions{order:3;}
  .tt-home .tt-v2-mobile-trust{order:4;}
  .tt-home .tt-v2-claim-support{order:5;display:grid;}
  .tt-home .tt-v2-hero-lead{order:6;display:block;}
  .tt-home .tt-v2-badges{order:7;display:grid;}
  .tt-home .tt-v2-hero-visual{order:2;width:100%;display:block;}
  .tt-material-scene{border-radius:20px;}
  .tt-material-card-inset{right:10px;bottom:48px;width:112px;border-width:5px;}
  .tt-home .tt-v2-hero-visual figcaption{padding-top:11px;}
  .tt-material-hero-products{order:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  .tt-material-hero-products a{grid-template-columns:1fr;min-height:0;padding:8px;text-align:center;}
  .tt-material-hero-products img{width:100%;height:auto;aspect-ratio:1;}
  .tt-material-hero-products small{display:none;}
  .tt-home .tt-v2-flow{padding:40px 16px 44px;}
  .tt-home .tt-v2-flow-step{min-height:0;}
  .tt-home .tt-v2-future{padding:44px 16px 48px;}
  .tt-home .tt-material-products{padding:44px 16px 48px;}
  .tt-home .tt-material-proof{padding:20px 16px 18px;}
  .tt-material-section-head{margin-bottom:26px;padding-bottom:20px;}
  .tt-material-section-head h2{font-size:38px;}
  .tt-material-section-head>p{font-size:16px;}
  .tt-home .tt-material-proof .tt-material-section-head{display:block;margin-bottom:8px;padding-bottom:0;}
  .tt-home .tt-material-proof .tt-material-section-head h2{font-size:28px;line-height:1.02;}
  .tt-home .tt-material-proof .tt-material-section-head>p{margin-top:8px;font-size:14px;line-height:1.25;}
  .tt-home .tt-material-proof .tt-review-empty{display:block;font-size:13px;line-height:1.3;}
  .tt-home .tt-material-proof .tt-review-empty p{font-size:13px;line-height:1.3;margin:0 0 8px;}
  .tt-home .tt-material-proof-link{display:inline-flex;min-height:44px;padding:8px 12px;font-size:12px;}
  .tt-page .tt-prod-grid{grid-template-columns:1fr;gap:18px;}
  .tt-home .tt-prod{scroll-snap-align:start;}
  .tt-page .tt-prod-media{aspect-ratio:5/4;padding:18px;}
  .tt-home .tt-faq-head{padding:54px 18px 20px;}
  .tt-home .tt-faq{padding:0 16px 58px;}
  .tt-home .tt-action{padding:44px 16px 48px;}
  .tt-home .tt-material-proof>.tt-quotes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,320px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;}
  .tt-home .tt-material-proof .tt-quote{scroll-snap-align:start;}
  .tt-home .tt-material-close{grid-template-columns:1fr;padding:48px 18px;}
  .tt-home .tt-material-close-cta{display:grid;padding:22px;}
  .tt-home .tt-material-close-cta a{width:100%;}
  .tt-inner .tt-phero,.tt-blog-index-page .tt-phero,.tt-policy-page .tt-phero{min-height:290px;}
  .tt-blog-index .tt-phero--journal,.tt-blog-post-page .tt-phero--article{height:500px!important;min-height:500px!important;max-height:500px!important;overflow:hidden;}
  .tt-inner .tt-phero-in,.tt-blog-index-page .tt-phero-in,.tt-policy-page .tt-phero-in{padding:var(--tt-hero-space-mobile) var(--tt-shell-gutter);}
  .tt-inner .tt-phero h1,.tt-blog-index-page .tt-phero h1,.tt-policy-page .tt-phero h1{font-size:var(--tt-display-mobile-size);}
  .tt-page .tt-phero-lead{font-size:17px;}
  .tt-product-page .tt-phero--product{min-height:250px;}
  .tt-product-page .tt-phero--product h1{font-size:var(--tt-display-mobile-size);}
  .tt-shop-page .tt-shop-intro{padding:42px 18px 30px;}
  .tt-shop-page .tt-shop-intro{display:block!important;}
  .tt-shop-page .tt-shop-intro-grid{display:grid!important;gap:24px;}
  .tt-shop-page .tt-shop-intro-grid>div:first-child{order:0;padding:0;background:transparent;}
  .tt-shop-page .tt-shop-benefits{order:0;padding:20px;border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#e1f4f7;background:rgba(255,255,255,.08);}
  .tt-shop-page .tt-shop-benefits ul{grid-template-columns:1fr;}
  .tt-shop-page .tt-shop-grid{padding:42px 18px 62px;}
  .tt-page .tt-faq-library,.tt-page .tt-blog-library{padding:52px 16px 68px;}
  .tt-page .tt-section-head{grid-template-columns:1fr;gap:14px;margin-bottom:28px;}
  .tt-page .tt-section-head h2{font-size:38px;}
  .tt-page .tt-faq-library .tt-acc2,.tt-page .tt-blog-grid{grid-template-columns:1fr;}
  .tt-page .tt-blog-card{grid-template-columns:1fr;min-height:0;}
  .tt-page .tt-blog-media,.tt-page .tt-blog-media picture{height:210px;}
  .tt-page .tt-blog-card-body{min-height:280px;}
  .tt-page .tt-post{padding:38px 0 68px;}
  .tt-page .tt-post-image{margin-bottom:34px;border-radius:18px;}
  .tt-page .tt-post-body{font-size:17px;line-height:1.7;}
  .tt-journal-feature-copy{padding:44px 18px 42px;}
  .tt-journal-deck{margin-bottom:34px;font-size:18px;}
  .tt-journal-feature-copy #tt-journal-feature-title{font-size:clamp(40px,12vw,54px);}
  .tt-feature-excerpt{font-size:17px;}
  .tt-feature-byline{align-items:flex-start;flex-direction:column;gap:6px;}
  .tt-journal-feature-image{min-height:300px;padding:28px 44px;}
  .tt-journal-feature-image::before{width:250px;height:250px;box-shadow:0 0 0 36px rgba(255,255,255,.07),0 0 0 72px rgba(255,255,255,.045);}
  .tt-feature-issue{right:16px;top:14px;font-size:42px;}
  .tt-journal-topics{flex-wrap:wrap;min-height:auto;overflow-x:visible;padding-inline:16px;scrollbar-width:none;}
  .tt-journal-topics::-webkit-scrollbar{display:none;}
  .tt-journal-library{padding:58px 16px 74px;}
  .tt-journal-library-head{grid-template-columns:1fr;gap:18px;margin-bottom:36px;}
  .tt-journal-library-head h2{font-size:44px;}
  .tt-story-grid{grid-template-columns:1fr;gap:42px;}
  .tt-story-card--1 h3,.tt-story-card h3{font-size:31px;}
  .tt-story-card-body>p,.tt-story-card--1 .tt-story-card-body>p{font-size:16px;}
  .tt-story-card footer{padding-top:18px;}
  .tt-article-hero-copy{padding:36px 18px 42px;}
  .tt-article-breadcrumb{margin-bottom:28px;}
  .tt-article-hero h1{font-size:clamp(40px,12vw,54px);}
  .tt-article-deck{font-size:17px;}
  .tt-article-hero-image,.tt-article-hero-image img{min-height:240px;max-height:280px;}
  .tt-article-hero-image img{width:calc(100% - 48px);margin-inline:auto;}
  .tt-article-shell{width:calc(100% - 32px);gap:42px;padding:50px 0 72px;}
  .tt-article-rail ol{grid-template-columns:1fr;}
  .tt-article-rail li:last-child{border-bottom:1px solid #d1dbd8;}
  .tt-page .tt-article-shell .tt-post-body{font-size:17px;line-height:1.72;}
  .tt-article-standfirst{font-size:22px;line-height:1.45;}
  .tt-page .tt-article-shell .tt-post-body section+section{margin-top:44px;padding-top:40px;}
  .tt-page .tt-article-shell .tt-post-body h2{font-size:34px;}
  .tt-article-footer{width:calc(100% - 32px);align-items:flex-start;flex-direction:column;padding-top:48px;}
  .tt-article-footer h2{font-size:40px;}
  .tt-related-grid{width:calc(100% - 32px);grid-template-columns:1fr;gap:36px;padding-bottom:74px;}
  .tt-related-media img{width:50%;}
}

/* CYT-130: a shared product media treatment. The source photographs remain
   untouched; this well removes the old shallow-card presentation, blends
   neutral white photo grounds into the brand field, and masks only the
   verified acrylic-tag product boundary where its photo includes wood. */
.tt-page .tt-prod-media{
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  padding:18px;
  background:#e8f4f6;
  border-bottom:1px solid #d5e8eb;
  overflow:hidden;
}
.tt-page .tt-prod-media a{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.tt-page .tt-prod-media .tt-product-card-picture{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.tt-page .tt-prod-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
}
.tt-page .tt-prod--tag .tt-prod-media img{
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  clip-path:none;
}
.tt-page .tt-prod-media .tt-badge{z-index:2;}

.tt-product-page .tt-gallery-main{
  display:grid;
  place-items:center;
  padding:18px;
  background:#e8f4f6;
  border:1px solid #d5e8eb;
  overflow:visible;
}
.tt-product-page .tt-gallery-main picture{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:visible;
}
.tt-product-page .tt-gallery-main img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.tt-product-tag .tt-gallery-main img{
  width:100%;
  height:100%;
  max-width:100%;
  margin:0;
  mix-blend-mode:normal;
  object-fit:contain;
  clip-path:none;
}
.tt-product-page .tt-gallery-thumbs img{
  background:#e8f4f6;
  border-color:#c5dfe4;
  object-fit:contain;
  object-position:center;
}

@media (max-width:767px){
  .tt-page .tt-prod-media{aspect-ratio:1/1;padding:18px;}
  .tt-page .tt-prod--nfc .tt-prod-media img,
  .tt-page .tt-prod--stand .tt-prod-media img{transform:scale(1.16);}
  .tt-product-page .tt-gallery-main{padding:14px;}
  .tt-product-tag .tt-gallery-main picture{width:100%;}
  .tt-product-tag .tt-gallery-main img{
    width:100%;
    height:100%;
    margin:0;
    object-fit:contain;
    clip-path:none;
  }
  .tt-product-stand .tt-gallery-main img{max-width:none;}
}

@media (max-width:767px){
  .tt-home .tt-action{padding:44px 16px 48px;}
  .tt-home .tt-action-inner{
    width:100%;grid-template-columns:1fr;grid-template-rows:auto auto auto;
    row-gap:0;
  }
  .tt-home .tt-action-inner > .tt-eyebrow{grid-column:1;grid-row:1;}
  .tt-home .tt-action-inner > h2{grid-column:1;grid-row:2;}
  /* Was width:min(100%,89px) - an 89px video on a phone, with the 58px play
     button larger than the shell containing it. Full width, capped, and aligned
     to the same left edge as the heading rather than centred. */
  .tt-home .tt-action-inner > .tt-videos.tt-videos--action{
    grid-column:1;grid-row:3;width:100%;max-width:420px;margin:22px 0 0;
    grid-template-columns:minmax(0,1fr);grid-auto-flow:row;overflow:visible;
    padding-bottom:0;
  }
  .tt-home .tt-videos.tt-videos--action .tt-video-shell{scroll-snap-align:none;}
}

.tt-home .tt-video-shell.is-playing .tt-video-play {
  display: block;
}
.tt-home .tt-video-shell.is-playing .tt-video-play::before {
  width: 4px;
  height: 18px;
  border: 0;
  background: #fff;
  box-shadow: 8px 0 0 #fff;
  transform: translate(-6px, -50%);
}

/* CYT-132: make the product itself the focal point in one shared pale well.
   The catalog stays on the verified source photographs; the well and crop
   rules remove the old mixed-background presentation at every breakpoint. */
.tt-page .tt-prod-media{padding:10px;background:#e8f4f6;}
.tt-page .tt-prod--nfc .tt-product-card-image{transform:scale(1.08);}
.tt-page .tt-prod--stand .tt-product-card-image{transform:scale(1.14);}
.tt-page .tt-prod--tag .tt-product-card-picture{
  width:100%;height:100%;overflow:hidden;
}
.tt-page .tt-prod--tag .tt-product-card-image{
  width:100%;height:100%;object-fit:cover;transform:scale(1.14);clip-path:polygon(25% 23%,75% 23%,75% 77%,25% 77%) !important;
}
/* Shared wide editorial hero shell */
.tt-inner .tt-phero.tt-phero--media{
  position:relative;min-height:500px;display:flex;align-items:center;isolation:isolate;background:#063744;overflow:hidden;
}
.tt-phero--media .tt-phero-media{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;}
.tt-phero--media .tt-phero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% center;}
.tt-inner .tt-phero.tt-phero--media::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:1;
  background:none;
}
.tt-inner .tt-phero.tt-phero--media .tt-phero-in{position:relative;z-index:2;width:min(100%,1280px);margin:0 auto;padding:44px 24px;}
.tt-inner .tt-phero--journal .tt-journal-feature-copy{padding-top:38px;padding-bottom:38px;}
.tt-phero--journal .tt-journal-deck{margin:7px 0 20px;}
.tt-phero--journal .tt-journal-feature-copy{background:rgba(2,38,49,.94);}

.tt-phero--journal .tt-feature-label{margin:18px 0 10px;}
.tt-phero--journal .tt-journal-feature-copy #tt-journal-feature-title{max-width:760px;font-size:clamp(44px,4.7vw,68px);}
.tt-phero--journal .tt-feature-excerpt{max-width:680px;margin-top:16px;font-size:17px;line-height:1.5;}
.tt-phero--journal .tt-feature-byline{max-width:700px;margin-top:18px;padding-top:14px;}
.tt-phero--article .tt-article-hero-copy{padding-top:40px;padding-bottom:40px;}
.tt-phero--article .tt-article-breadcrumb{margin-bottom:16px;}
.tt-phero--article h1{max-width:820px;margin:14px 0 0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,4.7vw,68px);font-weight:500;line-height:1;letter-spacing:-.045em;text-wrap:balance;}
.tt-phero--article .tt-article-deck{max-width:720px;margin-top:18px;font-size:17px;line-height:1.5;}
.tt-phero--article .tt-article-byline{max-width:700px;margin-top:18px;padding-top:14px;}
.tt-story-media img,.tt-story-card--2 .tt-story-media img,.tt-story-card--3 .tt-story-media img{
  width:100%;height:100%;margin:0;padding:0;object-fit:cover;
}
.tt-related-media img{width:100%;height:100%;margin:0;padding:0;object-fit:cover;}

/* CYT-149: canonical non-blog hero. Keep the editorial blog hero above on its
   own markup while every requested marketing page shares this photo-right,
   fade-left treatment. Images stay on verified product photography. */
:is(.tt-home,.tt-inner) .tt-shared-hero{
  position:relative;min-height:430px;display:flex;align-items:center;isolation:isolate;
  overflow:hidden;background:#063744;
}
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media{
  position:absolute;top:0;right:0;bottom:0;left:36%;z-index:0;display:block;width:64%;height:100%;
}
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center center;
}
/* TWO veils stack over every hero: this one over the photo panel, and the
   hero-wide ::before below. The second still carried .50 opacity at 58% and only
   reached clear at 100%, so it was dimming the photograph across its whole
   width on top of the first - the reason the heroes read as washed out. Both now
   clear well before the right edge; their job is to protect the copy on the
   left, not to tint the picture. */
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,38,49,1) 0%,rgba(2,38,49,.90) 12%,rgba(2,38,49,.38) 36%,rgba(2,38,49,.02) 62%,transparent 76%);
}
:is(.tt-home,.tt-inner) .tt-shared-hero::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,38,49,.98) 0%,rgba(2,38,49,.92) 28%,rgba(3,53,66,.52) 45%,rgba(3,53,66,.12) 60%,transparent 72%);
}
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-in{
  position:relative;z-index:2;width:min(100%,1280px);margin:0 auto;padding:54px 24px;
}
:is(.tt-home,.tt-inner) .tt-shared-hero-copy{max-width:720px;}
:is(.tt-home,.tt-inner) .tt-shared-hero h1{
  max-width:720px;margin:0;color:#fff;font-size:clamp(46px,5.2vw,76px);font-weight:800;
  line-height:.98;letter-spacing:-.045em;text-wrap:balance;
}
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-kicker{
  margin:0 0 13px;color:var(--tt-material-cyan-soft);font-size:13px;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;
}
:is(.tt-home,.tt-inner) .tt-shared-hero-meta{
  margin:16px 0 0;color:#b9edf4;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
:is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-lead{
  max-width:680px;margin:18px 0 0;color:#e1f4f7;font-size:19px;line-height:1.5;
}
:is(.tt-home,.tt-inner) .tt-shared-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
:is(.tt-home,.tt-inner) .tt-shared-hero--about .tt-phero-media img{object-position:64% center;}
:is(.tt-home,.tt-inner) .tt-shared-hero--shop .tt-phero-media img{object-position:66% center;}
:is(.tt-home,.tt-inner) .tt-shared-hero--faq .tt-phero-media img{object-position:66% center;}
:is(.tt-home,.tt-inner) .tt-shared-hero--reviews .tt-phero-media img{object-position:68% center;}
:is(.tt-home,.tt-inner) .tt-shared-hero--contact .tt-phero-media img{object-position:70% center;}

/* CYT-149 r8: the source scenes already carry their own dark teal left field.
   Let the full verified photograph span the hero so the right-side image reads
   continuously like the canonical blog hero. The shared veil keeps copy safe. */
@media (min-width:768px){
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq,.tt-inner .tt-shared-hero--reviews) .tt-phero-media{
    left:0;width:100%;
  }
  /* These two compositions have a stronger source-color step near the center.
     Extend the teal veil farther into the image so that step reads as a fade,
     while keeping the full right-side photograph visible. */
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop) .tt-phero-media::after{
    background:linear-gradient(90deg,rgba(2,38,49,1) 0%,rgba(2,38,49,.98) 34%,rgba(2,38,49,.84) 48%,rgba(2,38,49,.52) 62%,rgba(2,38,49,.18) 78%,transparent 94%);
  }
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop)::before{
    background:linear-gradient(90deg,rgba(2,38,49,.99) 0%,rgba(2,38,49,.98) 40%,rgba(2,38,49,.86) 56%,rgba(2,38,49,.58) 70%,rgba(2,38,49,.20) 88%,rgba(2,38,49,.02) 100%);
  }
}

@media (max-width:767px){
  :is(.tt-home,.tt-inner) .tt-shared-hero{min-height:520px;align-items:flex-end;}
  :is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media img{object-position:68% center;}
  /* Full-bleed photo + veil is the treatment for EVERY shared hero on mobile.
     It used to be an opt-in list of four, which left home and contact rendering
     their photo in a 70%-inset strip - at 390px that is a ~226px slice, too
     narrow to show a product, so the hero read as an unidentifiable fragment. */
  :is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media{left:0;width:100%;}
  :is(.tt-home,.tt-inner) .tt-shared-hero::before{
    background:linear-gradient(90deg,rgba(2,38,49,.99) 0%,rgba(2,38,49,.96) 48%,rgba(2,38,49,.72) 72%,rgba(2,38,49,.22) 92%,transparent 100%);
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-media::after{
    background:linear-gradient(90deg,rgba(2,38,49,.92) 0%,rgba(2,38,49,.78) 52%,rgba(2,38,49,.34) 80%,transparent 100%);
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-in{padding:38px 18px 34px;}
  :is(.tt-home,.tt-inner) .tt-shared-hero-copy{max-width:82%;}
  :is(.tt-home,.tt-inner) .tt-shared-hero h1{font-size:clamp(38px,11vw,52px);}
  :is(.tt-home,.tt-inner) .tt-shared-hero .tt-phero-lead{font-size:17px;}
  :is(.tt-home,.tt-inner) .tt-shared-hero-actions{margin-top:20px;}
}

@media (max-width:767px){
  .tt-inner .tt-phero.tt-phero--media:not(.tt-shared-hero){min-height:590px;align-items:flex-end;}
  .tt-phero--media:not(.tt-shared-hero) .tt-phero-media img{object-position:64% center;}
  .tt-inner .tt-phero.tt-phero--media:not(.tt-shared-hero)::before{background:none;}
  .tt-inner .tt-phero.tt-phero--media:not(.tt-shared-hero) .tt-phero-in{padding:38px 18px 34px;}
  .tt-phero--journal .tt-journal-deck{margin-bottom:18px;}
  .tt-phero--journal .tt-journal-feature-copy #tt-journal-feature-title,.tt-phero--article h1{font-size:clamp(38px,11vw,50px);}
  .tt-phero--journal .tt-feature-byline{align-items:flex-start;flex-direction:column;gap:5px;}
  .tt-phero--article .tt-article-breadcrumb{margin-bottom:12px;}
}

@media (prefers-reduced-motion:reduce){
  .tt-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* CYT-47 consistency gate: shared product shell, wrapping and responsive controls. */
.tt-product-page .tt-pbc,
.tt-product-page .tt-prodpage,
.tt-product-page .tt-product-demo,
.tt-product-page .tt-tabs{
  width:min(100%,var(--tt-shell-max));
}
.tt-product-page .tt-product-demo{
  max-width:var(--tt-shell-max);
}
.tt-product-page :is(.tt-phero h1,.tt-psum h1,.tt-psum h2,.tt-package-count,.tt-package-total,.tt-package-unit,.tt-package-saving,.tt-tablist button,.tt-amazon-cta){
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.tt-product-page .tt-buybox{
  border-radius:var(--tt-card-radius);
}
.tt-product-page .tt-variants>*{min-width:0;}
.tt-product-page .tt-amazon-cta{
  min-width:0;
  height:auto;
  padding:10px 20px;
  line-height:1.3;
  text-align:center;
  text-wrap:balance;
  white-space:normal;
}
.tt-product-page .tt-tabs{
  padding:36px var(--tt-shell-gutter) 72px;
}
.tt-product-page .tt-tablist{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.tt-product-page .tt-tablist li,
.tt-product-page .tt-tablist button{
  min-width:0;
  width:100%;
}
.tt-product-page .tt-tablist button{
  min-height:54px;
  padding:9px 12px;
  line-height:1.2;
  text-wrap:balance;
}
.tt-product-page .tt-tabpanel{
  margin-top:20px;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--tt-material-line);
  border-radius:var(--tt-card-radius);
  background:var(--tt-material-wash);
}
.tt-product-page .tt-tabpanel[hidden]{display:none;}
.tt-product-page .tt-pdesc-body{max-width:none;}
.tt-product-page .tt-tabpanel>h2:first-child,
.tt-product-page .tt-tabpanel>p:first-child{margin-top:0;}
.tt-product-page .tt-tabpanel>*:last-child{margin-bottom:0;}

@media (max-width:767px){
  .tt-product-page .tt-tabs{padding:30px var(--tt-shell-gutter) 50px;}
  .tt-product-page .tt-tablist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .tt-product-page .tt-tablist button{min-height:48px;padding:8px 10px;}
  .tt-product-page .tt-tabpanel{margin-top:16px;padding:20px 18px;}
}

/* CYT-130: keep any related/recommendation cards on the same media system. */
/* These are editorial photographs, not product cutouts. They were being given the
   cutout treatment - `contain` inside 18px of padding on a tinted panel, plus
   `mix-blend-mode:multiply` - so each photo rendered as a small letterboxed island
   (371x207 inside a 407x305 box) and multiply darkened it against the pale blue
   ground until the scenes read as murky. Multiply exists to knock a white
   background out of a packshot; on a photo it just muddies it. */
.tt-page .tt-related-media{
  aspect-ratio:4/3;
  display:block;
  padding:0;
  background:#e8f4f6;
  border-bottom:1px solid #d5e8eb;
  overflow:hidden;
}
.tt-page .tt-related-media picture,
.tt-page .tt-related-media a{
  display:block;
  width:100%;
  height:100%;
}
.tt-page .tt-related-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  mix-blend-mode:normal;
}
@media (max-width:767px){
  .tt-page .tt-related-media{aspect-ratio:1/1;padding:18px;}
  .tt-home .tt-material-products>.tt-prod-grid{grid-auto-columns:100%;}
}

@media (max-width:767px){
  /* The three catalog products are a readable stack on phones, never a
     clipped horizontal carousel. */
  .tt-home .tt-prod-grid{
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    overflow:visible;
    overscroll-behavior-inline:auto;
    scroll-snap-type:none;
  }
  .tt-home .tt-prod{scroll-snap-align:none;}
}

/* CYT-163: soften the bright source-photo edge where the mobile hero meets
   the persistent dark header; keep the shared fade and page-specific media. */
@media (max-width:767px){
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media::before{
    content:"";position:absolute;inset:0 0 auto;height:18%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(2,38,49,.72) 0%,rgba(2,38,49,.22) 55%,transparent 100%);
  }
}

/* CYT-163 r2: verified square hero photography stays right-anchored.
   Keep the copy clear while preserving the shared teal field and fade at both
   desktop and mobile widths. */
@media (min-width:768px){
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media{
    left:44%;width:56%;
  }
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media img{
    object-position:center center;
  }
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq)::before{
    background:linear-gradient(90deg,rgba(2,38,49,.98) 0%,rgba(2,38,49,.94) 30%,rgba(3,53,66,.50) 58%,rgba(3,53,66,.04) 100%);
  }
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media::after{
    background:linear-gradient(90deg,rgba(2,38,49,.92) 0%,rgba(2,38,49,.68) 22%,rgba(2,38,49,.18) 58%,transparent 100%);
  }
}
@media (max-width:767px){
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media{
    left:30%;width:70%;
  }
  :is(.tt-inner .tt-shared-hero--about,.tt-inner .tt-shared-hero--shop,.tt-inner .tt-shared-hero--faq) .tt-phero-media img{
    object-position:center center;
  }
}

/* CYT-149 FAQ mobile correction: the FAQ source photo places its bright
   Google-logo band inside the shared copy crop. Shift only this page's
   mobile crop right so the H1 remains readable while the photo stays visible. */
@media (max-width:767px){
  .tt-inner .tt-shared-hero--faq .tt-phero-media{
    left:0;width:100%;
  }
  .tt-inner .tt-shared-hero--faq .tt-phero-media img{
    object-position:100% center;
  }
  .tt-inner .tt-shared-hero--faq::before{
    background:linear-gradient(90deg,rgba(2,38,49,.98) 0%,rgba(2,38,49,.72) 32%,rgba(2,38,49,.38) 54%,rgba(2,38,49,.12) 72%,transparent 100%) !important;
  }
  .tt-inner .tt-shared-hero--faq .tt-phero-media::after{
    background:linear-gradient(90deg,rgba(2,38,49,.62) 0%,rgba(2,38,49,.22) 42%,rgba(2,38,49,.04) 72%,transparent 100%);
  }
  .tt-inner .tt-shared-hero--faq .tt-phero-media::before{
    content:"";
    position:absolute;
    top:22%;right:auto;bottom:auto;left:0;
    width:82%;height:54%;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(2,38,49,.98) 0%,rgba(2,38,49,.94) 55%,rgba(2,38,49,.55) 84%,transparent 100%) !important;
  }
}

/* CYT-149 r7: page-specific mobile hero crops for Home and Shop.
   Keep the source photo on the right, but keep bright card artwork out of the
   copy column at 390px. FAQ is intentionally left unchanged after its pass. */
@media (max-width:767px){
  /* Home was inset to 58% back when its hero was a SQUARE product packshot, to
     keep the bright card artwork out of the copy column. The hero is now a wide
     in-context scene that carries its own dark left field, so the inset just
     cropped it into an unreadable fragment (~226px of a close-up). Full bleed. */
  .tt-home .tt-shared-hero--home .tt-phero-media{
    left:0;width:100%;
  }
  .tt-home .tt-shared-hero--home .tt-phero-media img{
    object-position:58% 78%;
  }
  /* Veil is vertical here, not horizontal: the copy runs the full width of a
     390px hero, so darkening the left would hide the tag rather than protect
     text. Weighting it to the top keeps the counter and tag readable underneath
     the buttons while the headline still sits on a solid field. */
  .tt-home .tt-shared-hero--home::before{
    background:linear-gradient(180deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 42%,rgba(2,38,49,.80) 62%,rgba(2,38,49,.55) 80%,rgba(2,38,49,.40) 100%);
  }
  .tt-home .tt-shared-hero--home .tt-phero-media::after{
    background:linear-gradient(180deg,rgba(2,38,49,.72) 0%,rgba(2,38,49,.60) 45%,rgba(2,38,49,.34) 72%,rgba(2,38,49,.18) 100%);
  }
  .tt-inner .tt-shared-hero--shop .tt-phero-media{
    left:44%;width:56%;
  }
  .tt-inner .tt-shared-hero--shop .tt-phero-media img{
    object-position:100% center;
  }
  .tt-inner .tt-shared-hero--shop::before{
    background:linear-gradient(90deg,rgba(2,38,49,.99) 0%,rgba(2,38,49,.98) 52%,rgba(2,38,49,.88) 68%,rgba(2,38,49,.48) 84%,rgba(2,38,49,.16) 97%,transparent 100%);
  }
  .tt-inner .tt-shared-hero--shop .tt-phero-media::after{
    background:linear-gradient(90deg,rgba(2,38,49,.96) 0%,rgba(2,38,49,.86) 34%,rgba(2,38,49,.62) 58%,rgba(2,38,49,.24) 84%,rgba(2,38,49,.06) 100%);
  }
}
.tt-related-media img{object-fit:cover!important;}
@media (max-width:767px){.tt-related-media{aspect-ratio:16/8!important;}}

/* CYT-hero-refresh 2026-09-11: real-scene hero photo swap on the 6 shared-hero
   pages (home/shop/about/contact/faq/reviews). Every one of these photos was
   composed full-bleed for a wide banner, so force the photo panel to 100% width
   at every breakpoint - overriding the older photo-right insets (CYT-163 r2,
   CYT-149 r7) that were tuned for square product packshots and would otherwise
   crop these new wide scenes into an unreadable strip. object-position values
   below match the phone+card position baked into each new photograph (subject
   x from the shoot brief). The mobile source is a separate pre-cropped portrait
   image (already centered on the subject), so mobile object-position is just
   center. Desktop veil stays the site's existing left-to-right navy fade, only
   with its clear point moved so it clears BEFORE the product on every photo
   (never tints the phone/card); the secondary .tt-phero-media::after veil is
   turned off to avoid double-darkening now that the panel is full width. */
:is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media,
.tt-inner .tt-shared-hero--shop .tt-phero-media,
.tt-inner .tt-shared-hero--about .tt-phero-media,
.tt-inner .tt-shared-hero--contact .tt-phero-media,
.tt-inner .tt-shared-hero--faq .tt-phero-media,
.tt-inner .tt-shared-hero--reviews .tt-phero-media{
  left:0 !important;width:100% !important;
}
:is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media::after,
.tt-inner .tt-shared-hero--shop .tt-phero-media::after,
.tt-inner .tt-shared-hero--about .tt-phero-media::after,
.tt-inner .tt-shared-hero--contact .tt-phero-media::after,
.tt-inner .tt-shared-hero--faq .tt-phero-media::after,
.tt-inner .tt-shared-hero--reviews .tt-phero-media::after{
  background:none !important;
}
.tt-inner .tt-shared-hero--faq .tt-phero-media::before{
  background:none !important;
}
:is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media img{object-position:67% center !important;}
.tt-inner .tt-shared-hero--shop .tt-phero-media img{object-position:63% center !important;}
.tt-inner .tt-shared-hero--about .tt-phero-media img{object-position:61% center !important;}
.tt-inner .tt-shared-hero--contact .tt-phero-media img{object-position:70% center !important;}
.tt-inner .tt-shared-hero--faq .tt-phero-media img{object-position:61% center !important;}
.tt-inner .tt-shared-hero--reviews .tt-phero-media img{object-position:70% center !important;}
:is(.tt-home,.tt-inner) .tt-shared-hero--home::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 38%,rgba(2,38,49,.30) 48%,transparent 56%) !important;
}
.tt-inner .tt-shared-hero--shop::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 39%,rgba(2,38,49,.30) 49%,transparent 57%) !important;
}
.tt-inner .tt-shared-hero--about::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 42%,rgba(2,38,49,.30) 48%,transparent 55%) !important;
}
.tt-inner .tt-shared-hero--contact::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 42%,rgba(2,38,49,.30) 57%,transparent 64%) !important;
}
.tt-inner .tt-shared-hero--faq::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 42%,rgba(2,38,49,.30) 48%,transparent 55%) !important;
}
.tt-inner .tt-shared-hero--reviews::before{
  background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.94) 42%,rgba(2,38,49,.30) 57%,transparent 64%) !important;
}
@media (max-width:767px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media,
  .tt-inner .tt-shared-hero--shop .tt-phero-media,
  .tt-inner .tt-shared-hero--about .tt-phero-media,
  .tt-inner .tt-shared-hero--contact .tt-phero-media,
  .tt-inner .tt-shared-hero--faq .tt-phero-media,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media{
    left:0 !important;width:100% !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media img,
  .tt-inner .tt-shared-hero--shop .tt-phero-media img,
  .tt-inner .tt-shared-hero--about .tt-phero-media img,
  .tt-inner .tt-shared-hero--contact .tt-phero-media img,
  .tt-inner .tt-shared-hero--faq .tt-phero-media img,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media img{
    object-position:center center !important;
  }
  /* Text sits pinned to the BOTTOM of the hero on mobile for every one of these
     pages (shared align-items:flex-end rule above), spanning most of the 390px
     width - so the veil that protects it must run vertically (dark at the
     bottom where the copy sits, clear at the top where the product shows),
     never the desktop's horizontal left-to-right version. */
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before,
  .tt-inner .tt-shared-hero--shop::before,
  .tt-inner .tt-shared-hero--about::before,
  .tt-inner .tt-shared-hero--contact::before,
  .tt-inner .tt-shared-hero--faq::before,
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}

/* CYT-hero-refresh r2 2026-09-11: stack photo above copy on mobile for all 6
   shared-hero pages instead of overlaying text on the photo. The overlay
   approach (kept from the site's pre-existing pattern) put the bold white
   headline directly on top of the phone/card in every new real-scene photo,
   so neither read cleanly - this was flagged in QA screenshots. Photo becomes
   a plain image band at the top (no veil needed - nothing sits on top of it
   any more); copy becomes a normal block below it on the hero's own solid
   navy background. */
@media (max-width:767px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home,
  .tt-inner .tt-shared-hero--shop,
  .tt-inner .tt-shared-hero--about,
  .tt-inner .tt-shared-hero--contact,
  .tt-inner .tt-shared-hero--faq,
  .tt-inner .tt-shared-hero--reviews{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    min-height:0 !important;height:auto !important;background:#063744 !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media,
  .tt-inner .tt-shared-hero--shop .tt-phero-media,
  .tt-inner .tt-shared-hero--about .tt-phero-media,
  .tt-inner .tt-shared-hero--contact .tt-phero-media,
  .tt-inner .tt-shared-hero--faq .tt-phero-media,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media{
    position:relative !important;inset:auto !important;
    left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;
    width:100% !important;height:auto !important;aspect-ratio:1/1 !important;
    order:1;overflow:hidden;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media img,
  .tt-inner .tt-shared-hero--shop .tt-phero-media img,
  .tt-inner .tt-shared-hero--about .tt-phero-media img,
  .tt-inner .tt-shared-hero--contact .tt-phero-media img,
  .tt-inner .tt-shared-hero--faq .tt-phero-media img,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media img{
    object-position:center center !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before,
  .tt-inner .tt-shared-hero--shop::before,
  .tt-inner .tt-shared-hero--about::before,
  .tt-inner .tt-shared-hero--contact::before,
  .tt-inner .tt-shared-hero--faq::before,
  .tt-inner .tt-shared-hero--reviews::before,
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media::after,
  .tt-inner .tt-shared-hero--shop .tt-phero-media::after,
  .tt-inner .tt-shared-hero--about .tt-phero-media::after,
  .tt-inner .tt-shared-hero--contact .tt-phero-media::after,
  .tt-inner .tt-shared-hero--faq .tt-phero-media::after,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media::after,
  .tt-inner .tt-shared-hero--faq .tt-phero-media::before{
    background:none !important;display:none !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-in,
  .tt-inner .tt-shared-hero--shop .tt-phero-in,
  .tt-inner .tt-shared-hero--about .tt-phero-in,
  .tt-inner .tt-shared-hero--contact .tt-phero-in,
  .tt-inner .tt-shared-hero--faq .tt-phero-in,
  .tt-inner .tt-shared-hero--reviews .tt-phero-in{
    position:static !important;order:2;width:100% !important;
    padding:26px 18px 32px !important;background:#063744 !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--shop .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--about .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--contact .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--faq .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--reviews .tt-shared-hero-copy{
    max-width:100% !important;
  }
}

/* CYT-hero-refresh2 r4 2026-09-11: retuned above for the new home/shop subject x. */

/* CYT-hero-refresh2 r5 2026-09-11: narrower home copy column so the lead
   paragraph wraps clear of the cashier photo's product (subject x ~0.62). */
@media (min-width:768px){
  .tt-home .tt-shared-hero--home .tt-shared-hero-copy{max-width:430px !important;}
  .tt-home .tt-shared-hero--home .tt-phero-lead{max-width:480px !important;}
  .tt-home .tt-shared-hero--home .tt-shared-hero-meta{max-width:480px !important;}
}

/* CYT QA hero fixes 2026-09-11 - item 1: at 1280px+ the hero slot was a fixed
   ~500px (or home's own fixed value), which for a 2.36:1 photo crops a visible
   chunk off top/bottom (phones and faces got cut at 1920). Scale the slot with
   viewport width instead of a fixed number, clamped so it never goes below a
   readable 500px or above 800px. Scoped from 1200px up, right where the
   768-1199 stacked band below ends. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero{
    min-height:clamp(500px,42.4vw,820px) !important;
  }
}



/* CYT shop-final h1-size fix 2026-09-11: even after narrowing the lead
   paragraph's column, the H1's real rightmost glyph (x~897 at 1920,
   unaffected by the lead-only fix above) still landed only 32-47px from the
   phone's real polygon edge - under the 48px clearance floor. Scaling the
   cap down (same technique already used on home's H1 for the same class of
   issue) pulls the same two-line wrap in proportionally, no new line break,
   no risk of a lone last word. */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--shop h1{font-size:clamp(46px,5.2vw,52px) !important;}
}

/* CYT shop-final lead-width fix 2026-09-11: the corrected hotel-desk photo
   (thumb-held card, ~0.6 phone height) sits further left/up than the prior
   composition, and the lead paragraph's one long line ran to real glyph
   x~876-897px at 1920 - directly over the phone's bright screen, where the
   veil is nearly clear and a light lead colour reads at ~1.7:1. Narrowed the
   column, same fix pattern as home/about/faq above (text width, not veil
   darkness, was the real collision). */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--shop .tt-phero-lead{max-width:380px !important;}
}

/* item 2: About and FAQ's copy column ran wide enough at 1200px+ that the lead
   paragraph's line wrap landed on top of the product. Narrow the column instead
   of retuning the veil (the veil is fine on these two - the collision is text
   width, not darkness). */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--about .tt-shared-hero-copy{max-width:520px !important;}
  .tt-inner .tt-shared-hero--faq .tt-phero-lead{max-width:520px !important;}
}

/* item 3: home/contact/reviews' veils stayed dark well past their subject's
   left edge (56%/64%/64% before this fix), tinting a large share of the phone.
   Clear fully by 44% on all three - the same treatment already proven on
   about/shop/faq, just carried further left since these veils lagged behind.
   Scoped to 1200px+ only: below that the hero is either the 768-1199 stacked
   band (no veil at all, see the block further down) or the mobile stack
   (its own vertical veil, set separately) - this horizontal fade only makes
   sense in the side-by-side desktop layout. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 30.0%,rgba(6,38,49,0.85) 35.2%,rgba(6,38,49,0.62) 39.9%,rgba(6,38,49,0.36) 44.5%,rgba(6,38,49,0.16) 48.4%,rgba(6,38,49,0.05) 51.7%,rgba(6,38,49,0) 55.0%) !important;
  }
  .tt-inner .tt-shared-hero--contact::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 50.1%,rgba(6,38,49,0.85) 51.9%,rgba(6,38,49,0.62) 53.5%,rgba(6,38,49,0.36) 55.0%,rgba(6,38,49,0.16) 56.4%,rgba(6,38,49,0.05) 57.5%,rgba(6,38,49,0) 58.6%) !important;
  }
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}

/* item 4: 768-1199px was the one band left on the OLD side-by-side desktop
   treatment, so the copy sat directly over the phone/card at every page there
   (shop's "review" text landed white-on-white on the phone screen, 1.01
   contrast). Give this band the same photo-band-then-copy stack already
   proven correct at 767px and below, just with a shorter image band (21:9
   instead of the phone's 1:1) since there is more width to work with. */
@media (min-width:768px) and (max-width:1199px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home,
  .tt-inner .tt-shared-hero--shop,
  .tt-inner .tt-shared-hero--about,
  .tt-inner .tt-shared-hero--contact,
  .tt-inner .tt-shared-hero--faq,
  .tt-inner .tt-shared-hero--reviews{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    min-height:0 !important;height:auto !important;background:#063744 !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media,
  .tt-inner .tt-shared-hero--shop .tt-phero-media,
  .tt-inner .tt-shared-hero--about .tt-phero-media,
  .tt-inner .tt-shared-hero--contact .tt-phero-media,
  .tt-inner .tt-shared-hero--faq .tt-phero-media,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media{
    position:relative !important;inset:auto !important;
    left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;
    width:100% !important;height:auto !important;aspect-ratio:21/9 !important;
    order:1;overflow:hidden;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media img,
  .tt-inner .tt-shared-hero--shop .tt-phero-media img,
  .tt-inner .tt-shared-hero--about .tt-phero-media img,
  .tt-inner .tt-shared-hero--contact .tt-phero-media img,
  .tt-inner .tt-shared-hero--faq .tt-phero-media img,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media img{
    object-position:center center !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before,
  .tt-inner .tt-shared-hero--shop::before,
  .tt-inner .tt-shared-hero--about::before,
  .tt-inner .tt-shared-hero--contact::before,
  .tt-inner .tt-shared-hero--faq::before,
  .tt-inner .tt-shared-hero--reviews::before,
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media::after,
  .tt-inner .tt-shared-hero--shop .tt-phero-media::after,
  .tt-inner .tt-shared-hero--about .tt-phero-media::after,
  .tt-inner .tt-shared-hero--contact .tt-phero-media::after,
  .tt-inner .tt-shared-hero--faq .tt-phero-media::after,
  .tt-inner .tt-shared-hero--reviews .tt-phero-media::after,
  .tt-inner .tt-shared-hero--faq .tt-phero-media::before{
    background:none !important;display:none !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-in,
  .tt-inner .tt-shared-hero--shop .tt-phero-in,
  .tt-inner .tt-shared-hero--about .tt-phero-in,
  .tt-inner .tt-shared-hero--contact .tt-phero-in,
  .tt-inner .tt-shared-hero--faq .tt-phero-in,
  .tt-inner .tt-shared-hero--reviews .tt-phero-in{
    position:static !important;order:2;width:100% !important;
    padding:32px 40px 40px !important;background:#063744 !important;
  }
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--shop .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--about .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--contact .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--faq .tt-shared-hero-copy,
  .tt-inner .tt-shared-hero--reviews .tt-shared-hero-copy{
    max-width:640px !important;
  }
}

/* item 6: widows/orphans on short hero lines at narrow widths (kicker, meta,
   lead). text-wrap is a progressive enhancement - unsupported browsers just
   keep the current wrap, so this is safe to apply unconditionally. */
.tt-page .tt-phero-kicker{text-wrap:balance;}
:is(.tt-home,.tt-inner) .tt-shared-hero-meta{text-wrap:balance;}
.tt-page .tt-phero-lead{text-wrap:pretty;}

/* CYT QA hero fixes 2026-09-11 r2: home/contact veil clear points moved from 44% to 51%/55% - measured contrast at the real tail of each headline's last line was 2.35-3.90:1 at 44%, now checked again after this change. */

/* CYT QA hero fixes 2026-09-11 r3: Contact's real headline tail ('Contact Tapping Tags' on one line) sat only ~98px from the product at 1920, too tight for any gradient to both fully protect the text and fully clear the product. Narrow the copy column so the headline wraps to two shorter lines (same treatment as About in the previous round), then the veil's clear point can sit at a normal, safe 50% again. */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--contact .tt-shared-hero-copy{max-width:560px !important;}
}

/* CYT QA hero fixes 2026-09-11 r4: bias vertical framing toward the top at
   >=1200px desktop so heads near the top of the source photo are not pressed
   against the hero edge. Horizontal object-position is unchanged (still per
   page, matching each photo's subject x); only the vertical value moves from
   the implicit 50% (center) to 20%. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home .tt-phero-media img{object-position:67% 0% !important;}
  .tt-inner .tt-shared-hero--shop .tt-phero-media img{object-position:63% 0% !important;}
  .tt-inner .tt-shared-hero--about .tt-phero-media img{object-position:61% 0% !important;}
  .tt-inner .tt-shared-hero--contact .tt-phero-media img{object-position:70% 0% !important;}
  .tt-inner .tt-shared-hero--faq .tt-phero-media img{object-position:61% 0% !important;}
  .tt-inner .tt-shared-hero--reviews .tt-phero-media img{object-position:70% 0% !important;}
}

/* CYT QA3 fixes 2026-09-11 - Shop and About's veils were still on their
   first-round clear points (57%/55%), which QA's real-polygon measurement
   showed darkened 23%/17.5% of the tilted phone (its lower-left corner sits
   further into the fade than a bounding-box guess suggested). Clear earlier,
   right where hero_qa3.js's own product outline says the phone starts. */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--shop::before{
    background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.93) 46%,transparent 50%) !important;
  }
  .tt-inner .tt-shared-hero--about::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 44.5%,rgba(6,38,49,0.85) 46.0%,rgba(6,38,49,0.62) 47.3%,rgba(6,38,49,0.36) 48.6%,rgba(6,38,49,0.16) 49.7%,rgba(6,38,49,0.05) 50.6%,rgba(6,38,49,0) 51.5%) !important;
  }
  .tt-inner .tt-shared-hero--faq::before{
    background:linear-gradient(90deg,rgba(2,38,49,.97) 0%,rgba(2,38,49,.93) 45%,transparent 49%) !important;
  }
  /* item 5: Reviews' meta line ("Product feedback published at the point of
     purchase") sat well past the old 44% clear point (fully unveiled, on a
     bright part of the photo - 2.68:1 contrast). Narrowing it, same
     treatment already used for other pages' meta/lead lines. */
  .tt-inner .tt-shared-hero--reviews .tt-shared-hero-meta{max-width:380px !important;}
}

/* item 3 (CSS half): lighten Shop's mobile top shading (CYT-163's shared
   18%-tall/.72-opacity band darkened the receptionist's eyes in the new
   crop). Shop only - About keeps the original, FAQ already has it off. */
@media (max-width:767px){
  .tt-inner .tt-shared-hero--shop .tt-phero-media::before{
    background:linear-gradient(180deg,rgba(2,38,49,.14) 0%,rgba(2,38,49,.03) 55%,transparent 100%) !important;
  }
}

/* CYT v4 home-photo fix 2026-09-11: the new side-view cashier photo puts the
   product much closer to the copy column than any earlier composition, so the
   column had to narrow (480px). At the ORIGINAL font-size that narrower
   column wrapped the long headline to extra lines, growing the hero's content
   height well past its image-matched min-height and reintroducing the
   box/image aspect mismatch (and, through that, extra product darkening) -
   not a text-clearance problem any more, a box-height one. Scaling the H1
   font down to match the narrower column keeps the same 4-line wrap the
   600px column had, so the box stays at its natural height. */
.tt-home .tt-shared-hero--home h1{font-size:clamp(32px,3.7vw,53px) !important;}

/* CYT veil-blend fix 2026-09-11: Adir - "we're missing... a filter on top of the
   photo that played in from the left to the right, now it's cut in the center...
   change the filter... so it's gonna blend it in better." The last several
   rounds' hold-then-clear veils (tuned tightly to keep the veil off the product)
   produced exactly that hard edge. Replaced with ONE smooth eased gradient,
   many stops, no second layer, on all 6 pages, >=1200px only (the stacked
   <=1199px band is untouched - it has no photo-veil at all, text sits below the
   photo there). Product tint is explicitly allowed now (~12% average, was
   capped at 5%) - this is a deliberate design change, not a regression. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before,
  .tt-inner .tt-shared-hero--shop::before,
  .tt-inner .tt-shared-hero--about::before,
  .tt-inner .tt-shared-hero--contact::before,
  .tt-inner .tt-shared-hero--faq::before,
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}

/* CYT veil-blend fix r2 2026-09-11: same eased 8-stop shape as the shared
   template, rescaled per page so the fade finishes just before that page's
   real product position instead of at a fixed % that only fit one or two
   of the six photos. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 30.0%,rgba(6,38,49,0.85) 35.2%,rgba(6,38,49,0.62) 39.9%,rgba(6,38,49,0.36) 44.5%,rgba(6,38,49,0.16) 48.4%,rgba(6,38,49,0.05) 51.7%,rgba(6,38,49,0) 55.0%) !important;
  }
  .tt-inner .tt-shared-hero--shop::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 20.8%,rgba(6,38,49,0.85) 26.3%,rgba(6,38,49,0.62) 31.2%,rgba(6,38,49,0.36) 36.0%,rgba(6,38,49,0.16) 40.2%,rgba(6,38,49,0.05) 43.6%,rgba(6,38,49,0) 47.1%) !important;
  }
  .tt-inner .tt-shared-hero--about::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 44.5%,rgba(6,38,49,0.85) 46.0%,rgba(6,38,49,0.62) 47.3%,rgba(6,38,49,0.36) 48.6%,rgba(6,38,49,0.16) 49.7%,rgba(6,38,49,0.05) 50.6%,rgba(6,38,49,0) 51.5%) !important;
  }
  .tt-inner .tt-shared-hero--contact::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 50.1%,rgba(6,38,49,0.85) 51.9%,rgba(6,38,49,0.62) 53.5%,rgba(6,38,49,0.36) 55.0%,rgba(6,38,49,0.16) 56.4%,rgba(6,38,49,0.05) 57.5%,rgba(6,38,49,0) 58.6%) !important;
  }
  .tt-inner .tt-shared-hero--faq::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 20.3%,rgba(6,38,49,0.85) 25.7%,rgba(6,38,49,0.62) 30.5%,rgba(6,38,49,0.36) 35.2%,rgba(6,38,49,0.16) 39.2%,rgba(6,38,49,0.05) 42.6%,rgba(6,38,49,0) 46.0%) !important;
  }
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}

/* CYT veil-blend fix r3 2026-09-11: fixed 0-30% text-protecting hold
   (same as the shared template), steep fade rescaled into the room before
   each page's real product edge (plus a small allowance since tint is now
   authorized). Wins over r2 by source order. */
@media (min-width:1200px){
  :is(.tt-home,.tt-inner) .tt-shared-hero--home::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 30.0%,rgba(6,38,49,0.85) 35.2%,rgba(6,38,49,0.62) 39.9%,rgba(6,38,49,0.36) 44.5%,rgba(6,38,49,0.16) 48.4%,rgba(6,38,49,0.05) 51.7%,rgba(6,38,49,0) 55.0%) !important;
  }
  .tt-inner .tt-shared-hero--shop::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 30.0%,rgba(6,38,49,0.85) 34.2%,rgba(6,38,49,0.62) 37.3%,rgba(6,38,49,0.36) 40.6%,rgba(6,38,49,0.16) 43.3%,rgba(6,38,49,0.05) 45.6%,rgba(6,38,49,0) 48.5%) !important;
  }
  .tt-inner .tt-shared-hero--about::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 44.5%,rgba(6,38,49,0.85) 46.0%,rgba(6,38,49,0.62) 47.3%,rgba(6,38,49,0.36) 48.6%,rgba(6,38,49,0.16) 49.7%,rgba(6,38,49,0.05) 50.6%,rgba(6,38,49,0) 51.5%) !important;
  }
  .tt-inner .tt-shared-hero--contact::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 50.1%,rgba(6,38,49,0.85) 51.9%,rgba(6,38,49,0.62) 53.5%,rgba(6,38,49,0.36) 55.0%,rgba(6,38,49,0.16) 56.4%,rgba(6,38,49,0.05) 57.5%,rgba(6,38,49,0) 58.6%) !important;
  }
  .tt-inner .tt-shared-hero--faq::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 30.0%,rgba(6,38,49,0.85) 35.0%,rgba(6,38,49,0.62) 39.5%,rgba(6,38,49,0.36) 43.9%,rgba(6,38,49,0.16) 47.7%,rgba(6,38,49,0.05) 50.8%,rgba(6,38,49,0) 54.0%) !important;
  }
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}

/* CYT veil-blend fix r4 2026-09-11: About/Contact/Reviews leads needed a
   later hold than the 30% shared by the other three pages - their real
   glyph position (Range API) sits on a brighter patch of the photo at that
   veil position than Home/Shop/FAQ's leads do. Wins over r3 by source order
   for these three selectors only. */
@media (min-width:1200px){
  .tt-inner .tt-shared-hero--about::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 44.5%,rgba(6,38,49,0.85) 46.0%,rgba(6,38,49,0.62) 47.3%,rgba(6,38,49,0.36) 48.6%,rgba(6,38,49,0.16) 49.7%,rgba(6,38,49,0.05) 50.6%,rgba(6,38,49,0) 51.5%) !important;
  }
  .tt-inner .tt-shared-hero--contact::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 50.1%,rgba(6,38,49,0.85) 51.9%,rgba(6,38,49,0.62) 53.5%,rgba(6,38,49,0.36) 55.0%,rgba(6,38,49,0.16) 56.4%,rgba(6,38,49,0.05) 57.5%,rgba(6,38,49,0) 58.6%) !important;
  }
  .tt-inner .tt-shared-hero--reviews::before{
    background:linear-gradient(90deg,rgba(6,38,49,0.97) 0.0%,rgba(6,38,49,0.95) 42.9%,rgba(6,38,49,0.85) 44.4%,rgba(6,38,49,0.62) 45.7%,rgba(6,38,49,0.36) 47.0%,rgba(6,38,49,0.16) 48.1%,rgba(6,38,49,0.05) 49.0%,rgba(6,38,49,0) 49.9%) !important;
  }
}


/* CYT overlay-audit fix 2026-09-11: the blog journal/article copy panel was a
   flat 1280px-wide centered box (from the shared .tt-phero-in rule), so on
   wide screens it carried its own solid dark background hundreds of pixels
   past the actual text (GPT-5.6 read flagged ~530px of bare panel colour to
   the right of the widest line on the blog index, and similar on the blog
   post). Left edge stays exactly where it already renders (so kicker/h1
   position does not move); the box now hugs its own content on the right
   instead of stretching to the full 1280 grid. Desktop/tablet only - the
   mobile panel is already close to full width by necessity of the stacked
   layout and was not the flagged issue. */
@media (min-width:768px){
  .tt-inner .tt-phero.tt-phero--journal .tt-journal-feature-copy,
  .tt-inner .tt-phero.tt-phero--article .tt-article-hero-copy{
    width:fit-content;
    max-width:min(calc(100% - 64px),860px);
    margin-left:max(24px,calc((100vw - 1280px)/2));
    margin-right:0;
  }
}