/* Coffee & Catchup: the original cup, paper insert and Alex signoff,
   carried into Tech It Easy's red identity. Shared by the two Tech pages. */
.brand-tech .te-letter {
  --letter-red:#b32c34; --letter-cream:#f6edde; --letter-ink:#242322;
  color:var(--letter-cream); background:var(--letter-red); position:relative;
  border-top:1px solid #94252c; isolation:isolate;
}
.brand-tech .te-letter::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent 49.9%,#fff5de0c 50%,transparent 50.1%);
}
.brand-tech .te-letter-inner {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,8vw,120px); align-items:center; padding-block:80px 88px;
}
.brand-tech .te-letter-title { min-width:0; }
.brand-tech .te-letter-title > .eyebrow { color:#f6d7cd; margin-bottom:23px; font-size:10px; }
.brand-tech .te-letter-title :is(h1,h2) {
  font:650 clamp(45px,5.5vw,78px)/1.08 var(--sans); letter-spacing:-.06em; margin:0;
}
.brand-tech .te-letter-title :is(h1,h2) > span {
  display:inline-block; font:400 .89em/1.65 var(--pixel); letter-spacing:-.025em; color:#f7d6a4;
}
.brand-tech .te-letter-invitation { font-size:17px; line-height:1.65; color:#f9dfd3; margin:15px 0 0; }
.brand-tech .te-letter-insert {
  position:relative; max-width:405px; padding:22px 25px 24px; margin:30px 7px 0 3px;
  background:var(--letter-cream); color:var(--letter-ink); transform:rotate(-1.5deg);
  border:1px solid #f9e9cf; box-shadow:7px 8px 0 #6b161d4a;
}
.brand-tech .te-letter-insert::before {
  content:''; position:absolute; inset:-5px -7px 5px 7px; border:1px solid #ffe8ce63;
  transform:rotate(3deg); z-index:-1; pointer-events:none;
}
.brand-tech .te-letter-insert-top {
  display:flex; justify-content:space-between; gap:15px; padding-bottom:14px;
  border-bottom:1px solid #c8bca9; font:8px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:#796451;
}
.brand-tech .te-letter-insert-body { display:flex; align-items:center; gap:24px; padding-top:19px; }
.brand-tech .te-coffee-cup { width:65px; height:65px; flex:none; fill:none; stroke:#a83730; stroke-width:2; }
.brand-tech .te-coffee-cup .te-cup-steam { stroke:#a8373090; }
.brand-tech .te-coffee-cup .te-cup-coffee { fill:#d9ad79; stroke:none; }
.brand-tech .te-letter-insert ol { display:grid; gap:9px; padding:0; margin:0; list-style:none; counter-reset:letter-topics; }
.brand-tech .te-letter-insert li { display:flex; align-items:baseline; gap:11px; font-size:13px; line-height:1.45; counter-increment:letter-topics; }
.brand-tech .te-letter-insert li::before { content:'0' counter(letter-topics); color:#95634d; font:8px var(--mono); }
.brand-tech .te-letter-signoff { display:flex; align-items:center; gap:15px; color:#f9e3d4; font-size:12px; margin:25px 0 0; }
.brand-tech .te-letter-signoff img { width:106px; height:auto; flex:none; transform:rotate(-4deg); }
.brand-tech .te-letter-paper {
  position:relative; padding:34px 36px 31px; background:#faf4e8; color:var(--letter-ink);
  border:1px solid #ffe6c9; box-shadow:11px 13px 0 #6b161d45; min-width:0;
}
.brand-tech .te-letter-postmark {
  display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #d0c2ad;
  padding-bottom:18px; margin-bottom:27px; color:#856e57; font:9px/1.7 var(--mono); letter-spacing:.07em; text-transform:uppercase;
}
.brand-tech .te-letter-postmark svg { width:112px; height:50px; flex:none; fill:none; stroke:#ae9677; stroke-width:1; }
.brand-tech .te-letter-paper > .eyebrow { font-size:9px; color:#a12931; margin-bottom:14px; }
.brand-tech .te-letter-paper :is(h2,h3) { font-size:clamp(28px,2.7vw,39px); font-weight:600; line-height:1.12; letter-spacing:-.045em; margin:0 0 19px; }
.brand-tech .te-letter-copy { font-size:14px; line-height:1.8; color:#62574c; max-width:470px; }
.brand-tech .te-letter-paper .newsletter-form { margin-top:27px; max-width:none; }
.brand-tech .te-letter-paper .newsletter-form label { font-size:12px; margin-bottom:10px; color:#302a25; }
.brand-tech .te-letter-paper .email-row { flex-direction:column; gap:10px; }
.brand-tech .te-letter-paper input[type=email] {
  width:100%; min-width:0; min-height:54px; font-size:16px; color:#272422; background:#fffaf2;
  border:1px solid #a79885; padding:14px 16px; border-radius:0;
}
.brand-tech .te-letter-paper input[type=email]::placeholder { color:#857969; opacity:1; }
.brand-tech .te-letter-paper .button {
  width:100%; min-height:54px; background:#232325; border-color:#232325; color:#faf2e4;
  border-radius:0; padding:14px 18px; font-size:13px; justify-content:space-between;
}
.brand-tech .te-letter-paper .button:hover { background:#a1262f; border-color:#a1262f; transform:none; filter:none; }
.brand-tech .te-letter-paper .fine { color:#756858; font-size:10px; line-height:1.8; margin-top:15px; }
.brand-tech .te-letter-paper .form-status { font-size:13px; line-height:1.7; }
.brand-tech .te-letter-paper .form-status[data-state=error] { color:#a1262f; }
.brand-tech .te-letter-paper .form-status[data-state=success] { color:#35552f; }
.brand-tech .te-letter-paper .preview-notice { color:#675949; background:#efe5d3; border-color:#b32c34; font-size:11px; margin-bottom:21px; }
.brand-tech .te-letter-paper :focus-visible { outline-color:#a1262f; }
.brand-tech .te-letter-shared { border-top:1px solid #d8cdbb; padding-top:18px; margin-top:22px; font-size:11px; line-height:1.8; color:#756858; }
.brand-tech .te-letter-paper > .text-link { font-size:11px; gap:16px; margin-top:14px; }
.brand-tech .te-newsletter-page { background:#fbf8f1; color:#242322; }
.brand-tech .te-letter-back { padding-block:22px; }
.brand-tech .te-letter-back .text-link { font-size:12px; border:0; }
.brand-tech .te-letter-page .te-letter-inner { padding-block:72px 84px; }
.brand-tech .te-letter-about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,8vw,120px); padding-block:65px 75px; }
.brand-tech .te-letter-about .eyebrow { font-size:9px; color:#8c4a3d; max-width:330px; line-height:1.8; }
.brand-tech .te-letter-about h2 { font-size:clamp(37px,4vw,58px); line-height:1.06; }
.brand-tech .te-letter-about > div > p:not(.eyebrow) { font-size:15px; line-height:1.8; color:#625c52; }
.brand-tech .te-letter-next { display:flex; flex-direction:column; align-items:start; gap:12px; margin-top:22px; }
.brand-tech .te-letter-next .text-link { font-size:12px; }
@media (max-width:1050px) and (min-width:761px) {
  .brand-tech .te-letter-inner { gap:35px; padding-block:65px; }
  .brand-tech .te-letter-title :is(h1,h2) { font-size:52px; }
  .brand-tech .te-letter-paper { padding:27px 24px; }
  .brand-tech .te-letter-insert { padding:19px 17px; }
  .brand-tech .te-letter-insert-body { gap:15px; }
  .brand-tech .te-letter-insert li { font-size:12px; }
  .brand-tech .te-coffee-cup { width:50px; height:50px; }
  .brand-tech .te-letter-postmark { gap:14px; font-size:8px; }
  .brand-tech .te-letter-postmark svg { width:91px; }
}
@media (max-width:760px) {
  .brand-tech .te-letter::before { background:none; }
  .brand-tech .te-letter-inner,.brand-tech .te-letter-page .te-letter-inner { grid-template-columns:1fr; gap:35px; padding-block:46px 54px; }
  .brand-tech .te-letter-title > .eyebrow { margin-bottom:20px; font-size:9px; }
  .brand-tech .te-letter-title :is(h1,h2) { font-size:clamp(46px,10.5vw,68px); }
  .brand-tech .te-letter-invitation { font-size:15px; margin-top:12px; }
  .brand-tech .te-letter-insert { max-width:400px; margin-top:25px; padding:20px 22px; }
  .brand-tech .te-letter-signoff { margin-top:20px; font-size:12px; }
  .brand-tech .te-letter-paper { padding:27px 25px; box-shadow:7px 8px 0 #6b161d45; }
  .brand-tech .te-letter-postmark { margin-bottom:23px; padding-bottom:16px; }
  .brand-tech .te-letter-paper :is(h2,h3) { font-size:32px; }
  .brand-tech .te-letter-paper > .text-link { font-size:11px; }
  .brand-tech .te-letter-about { grid-template-columns:1fr; gap:27px; padding-block:42px 48px; }
  .brand-tech .te-letter-about h2 { font-size:40px; }
  .brand-tech .te-letter-about > div > p:not(.eyebrow) { font-size:14px; }
}
@media (max-width:380px) {
  .brand-tech .te-letter-title :is(h1,h2) { font-size:43px; }
  .brand-tech .te-letter-insert { padding:17px 15px; }
  .brand-tech .te-letter-insert-top { font-size:7px; gap:10px; }
  .brand-tech .te-letter-insert-body { gap:13px; }
  .brand-tech .te-letter-insert li { font-size:11px; gap:8px; }
  .brand-tech .te-coffee-cup { width:47px; height:47px; }
  .brand-tech .te-letter-paper { padding:24px 19px; }
  .brand-tech .te-letter-postmark { font-size:8px; gap:13px; }
  .brand-tech .te-letter-postmark svg { width:88px; }
  .brand-tech .te-letter-paper :is(h2,h3) { font-size:29px; }
}