/* ============================================================
   TECHGARDEN theme
   ============================================================
   Palette, masthead and logo taken from the live tech.garden
   WordPress site, so this deployment carries the TechGarden
   brand rather than VOOOM's.

   Sources (read from the live site's own stylesheets):
     accent      #E1073C  buttons, focus rings, active links
     accent hi   #FF2C54  hover, rules, tag chips
     ink         #231F20  masthead bar, body text
     greys       #707070 #858585 #D3D7DA neutral, not VOOOM's warm cream
     typography  Heebo — same as VOOOM, so it is left alone

   Loaded after public.css. Tokens first; the masthead block below
   is a deliberate exception — .mast hardcodes #fff in public.css,
   and TechGarden's logo is white, so the bar has to go dark or the
   logo disappears.
   ============================================================ */

:root {
  /* Brand accent — TechGarden crimson, replacing VOOOM red.
     The variable names stay so no rule in public.css needs editing. */
  --voom-red: #E1073C;
  --voom-red-deep: #B00530;
  --voom-red-soft: #FF2C54;
  --voom-red-wash: #FDEBEF;

  /* Text — near-black from the live masthead, then a neutral ramp */
  --ink: #231F20;
  --ink-2: #3A3637;
  --ink-3: #565253;
  --ink-4: #707070;
  --mute: #858585;
  --hair: #D3D7DA;
  --hair-soft: #E6E9EB;

  /* Surfaces — cool neutral. VOOOM's warm cream is what made the two
     sites read as the same brand, so it is the key thing to drop. */
  --paper: #F9F9F9;
  --paper-soft: #FFFFFF;
  --cream: #F0F1F2;
  --cream-2: #E2E5E7;
}

/* ── Masthead ────────────────────────────────────────────────
   tech.garden runs a dark bar (#231F20) with a white wordmark.
   public.css hardcodes `background:#fff` on .mast and .mast-nav,
   so those two are overridden here along with everything that
   assumed dark-on-light inside the bar. */

.mast {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .14);
}

.mast-issue {
  color: rgba(255, 255, 255, .72);
}

/* Nav sits inside the dark bar: white links, accent on hover and
   for the current section (the underline already uses --voom-red). */
.mast-nav-inner a,
.mast-nav-inner a.active {
  color: #fff;
}

.mast-nav-inner a:hover {
  color: var(--voom-red-soft);
}

/* The search field is drawn on the bar itself, so its own surface
   has to lift off the dark background rather than sink into it. */
.mast-search-form {
  background: rgba(255, 255, 255, .10);
}

.mast-search-form input {
  color: #fff;
}

.mast-search-form input::placeholder {
  color: rgba(255, 255, 255, .55);
}

/* ── Masthead layout ─────────────────────────────────────────
   tech.garden's header is a single centred wordmark on the dark
   bar — no nav, no search, no icons. VOOOM's masthead carries all
   three, so they are hidden here and the logo is centred.

   This holds at every width. The burger used to survive below
   900px so a phone had some route off the homepage, but there is
   no navigation for it to open — the site keeps no categories, so
   the panel came up empty. A centred wordmark on the bar is the
   header on a phone as much as on a desktop. */

.mast-row {
  justify-content: center;
  height: 65px;
}

.mast .mast-nav-inner,
.mast .mast-search-wrap,
.mast .mast-actions {
  display: none;
}

/* The wordmark is 977×79 — a 12:1 ribbon, unlike VOOOM's compact
   mark. public.css sizes masthead logos at height:50px, which would
   render this one ~618px wide. */

.mast .mast-logo img {
  height: 40px;
  width: auto;
  max-width: min(560px, 70vw);
}

@media (max-width: 900px) {
  .mast .mast-logo img { height: 26px; }
}

/* ── Home page grid ──────────────────────────────────────────
   tech.garden's home page is a flat mosaic of article cards: the
   image is the card, the headline sits on a gradient across its
   foot, and there are no category headings, decks or dates.

   Ten cards in a three-column grid. The second card spans two
   columns, which produces the live site's rhythm — a narrow and a
   wide card on the first row, then rows of three, then a pair.
   Markup: sites/techgarden/views/public/home/index.tpl */

/* Measured off the live grid at 1470px viewport: a 1120px container with 9px
   gutters, and ten cards in four rows.

     row 1   555px   743 (first, rightmost) + 367
     row 2   273px   367 367 367
     row 3   225px   367 367 367
     row 4   320px   602 + 508

   Twenty-four columns, because the live widths are not multiples of one
   coarse track. At 24 tracks with a 9px gutter the arithmetic closes exactly:
   24c + 23*9 = 1120, so c = 38.04, and a span of n measures 47.04n - 9 —
   which gives 367 at span 8, 743 at 16, 602 at 13 and 508 at 11, every one
   of them the live width to the pixel.

   Placement is explicit rather than left to auto-flow. The live grid runs a
   justified-gallery plugin that reflows the cards in JS, so the order they
   appear in the markup is NOT the order they appear on screen — read off the
   rendered page, the slots are:

     row 1  555px   [perry-levi 367] [sms-marketing 743]
     row 2  273px   [infinix 367] [vinia 367] [jonathan 367]
     row 3  225px   [silence 367] [gaming 367] [vui_designer 367]
     row 4  320px   [note50pro 508] [gt30pro 602]

   against a markup order of sms-marketing, gt30pro, jonathan, silence, gaming,
   infinix, perry-levi, note50pro, vinia, vui_designer (live grid as of
   2026-10-05, after the SMS post went up). Each nth-child below is
   pinned to the row and column its article occupies on the live page. In RTL
   column 1 is the rightmost track, so a card at column 1 sits on the right.

   The order is fixed by the home_slugs setting; change one without the other
   and the cards land in the wrong slots. */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 555px 273px 225px 320px;
  gap: 9px;
  padding: 0;
  max-width: 1120px;
  margin-inline: auto;
}

.tg-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  height: 100%;
}

.tg-card:nth-child(1)  { grid-row: 1; grid-column: 1 / span 16; }   /* sms-marketing */
.tg-card:nth-child(2)  { grid-row: 4; grid-column: 1 / span 13; }   /* gt30pro    */
.tg-card:nth-child(3)  { grid-row: 2; grid-column: 1 / span 8; }    /* jonathan   */
.tg-card:nth-child(4)  { grid-row: 3; grid-column: 17 / span 8; }   /* silence    */
.tg-card:nth-child(5)  { grid-row: 3; grid-column: 9 / span 8; }    /* gaming     */
.tg-card:nth-child(6)  { grid-row: 2; grid-column: 17 / span 8; }   /* infinix    */
.tg-card:nth-child(7)  { grid-row: 1; grid-column: 17 / span 8; }   /* perry-levi */
.tg-card:nth-child(8)  { grid-row: 4; grid-column: 14 / span 11; }  /* note50pro  */
.tg-card:nth-child(9)  { grid-row: 2; grid-column: 9 / span 8; }    /* vinia      */
.tg-card:nth-child(10) { grid-row: 3; grid-column: 1 / span 8; }    /* vui        */

/* Anything past the tenth would land on an implicit row the live site does
   not have; HomeController asks for ten, this is the backstop. */
.tg-card:nth-child(n+11) { display: none; }

.tg-card-img {
  position: absolute;
  inset: 0;
}

.tg-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.tg-card:hover .tg-card-img img {
  transform: scale(1.04);
}

/* Headline over the picture, drawn the way VOOOM's home cards draw it
   (.head-card in public.css): no strip, a dark gradient rising from the
   foot of the image, white 700 display type at 1.25. The big lead card
   takes VOOOM's hero size, the rest its small-card size. */
.tg-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.06) 100%);
}

.tg-card-band {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s-4) var(--s-5) var(--s-5);
  text-align: right;
}

.tg-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.25;
  color: #fff;
}

.tg-card:nth-child(1) h3 { font-size: clamp(26px, 2.4vw, 38px); }

/* Below the desktop width the fixed row heights stop making sense: the
   tracks become uniform and the cards pair up, then stack. */
@media (max-width: 900px) {
  .tg-grid { grid-template-rows: none; grid-auto-rows: 200px; }
  /* The explicit row/column pins above are for the desktop slots only. Below
     this width every card returns to auto-flow, so they are all released at
     once rather than one selector per card. */
  .tg-card:nth-child(n) { grid-row: auto; grid-column: span 12; }
  .tg-card:nth-child(1) { grid-column: span 24; }
  .tg-card-band { padding: var(--s-4); }
  .tg-card h3 { font-size: clamp(17px, 4.6vw, 21px); }
  .tg-card:nth-child(1) h3 { font-size: clamp(20px, 5.4vw, 26px); }
}

@media (max-width: 560px) {
  .tg-grid { grid-auto-rows: 220px; }
  .tg-card:nth-child(n) { grid-row: auto; grid-column: span 24; }
}

/* ── Article typography ──────────────────────────────────────
   Font sizes, weights and spacing come from the shared public.css /
   article.scss, so an article here reads exactly like one on VOOOM.
   The old tech.garden measurements (Heebo 19px, a 740px column, grey
   24px byline, Rubik on the comparison pages) are gone on purpose.

   One gap is restated. VOOOM's editor separates paragraphs with a
   blank line (p.blank-line, 18px in article.scss) and article.scss
   zeroes every paragraph margin. The WordPress imports carry no blank
   lines, so their paragraphs would butt together — each one that is
   not already followed by a blank line gets the same 18px. */
#article_page .article-content > p:not(.deck):not(.social-text):not(.blank-line):not(:has(+ p.blank-line)) {
  margin-bottom: 18px;
}

/* Breathing room under the fixed masthead. On VOOOM the breadcrumb sits
   between the header and the title (~44px); show_breadcrumb is off here,
   so without this the title starts 4px under the masthead. */
#article_page .article-head {
  padding-top: 40px;
}

@media (max-width: 768px) {
  #article_page .article-head { padding-top: 24px; }
}


/* ── Contact page ────────────────────────────────────────────
   Markup: sites/techgarden/views/public/contact.tpl. Form beside the
   contact details; the form spans the page when no detail is set. */
.tg-contact .archive-head { padding-top: 40px; }

.tg-contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-10);
  align-items: start;
  padding-bottom: var(--s-12);
}
.tg-contact-grid--solo { grid-template-columns: minmax(0, 720px); justify-content: center; }

.tg-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  background: #f4f4f4;
}
.tg-contact-info .meta-cap { margin: 0 0 4px; }
.tg-contact-info a,
.tg-contact-info p:not(.meta-cap) {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink);
}
.tg-contact-info a { text-decoration: underline; text-underline-offset: 4px; }

.tg-contact-status { margin: 0; padding: 12px 16px; font-weight: 500; }
.tg-contact-status.is-ok    { background: #e8f5ec; color: #17602f; }
.tg-contact-status.is-error { background: #fdecef; color: var(--accent, #E1073C); }

@media (max-width: 768px) {
  .tg-contact .archive-head { padding-top: 24px; }
  .tg-contact-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}


/* ── Sidebar promo ───────────────────────────────────────────
   Booked creative above the first Taboola rail. Content comes
   from the `aside_promo_html` setting, so the styling has to be
   defensive about what markup it is handed. */

.article-promo-block {
  border: 1px solid var(--hair);
  padding: 16px;
  text-align: center;
}

.article-promo-block p { margin: 0 0 10px; }
.article-promo-block p:last-child { margin-bottom: 0; }

.article-promo-block img {
  display: block;
  width: 100%;
  height: auto;
}

.article-promo-block .promo-kicker,
.article-promo-block .promo-sub {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}

.article-promo-block .promo-cta {
  display: block;
  padding: 12px 14px;
  background: var(--voom-red);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
}

.article-promo-block .promo-cta:hover {
  background: var(--voom-red-deep);
  color: #fff;
}

/* ── Footer ──────────────────────────────────────────────────
   Measured off the live footer: a 1120px container split into two
   550px columns with a 20px gutter, on #231F20.

     headings   Heebo 16px / 600, white
     copy       Heebo 16px / 24px, white
     links      16px white, each on its own line behind a chevron
     input      white, 3px radius, 1px #69727D border, 550×40
     button     #FF8C00, white 15px / 600, 550×40, square

   The shared footer's red headings, logo column, category list and
   social row are dropped in
   sites/techgarden/views/layouts/partials/footer.tpl. */

.tg-footer {
  background: #231F20;
}

.tg-footer .wrap {
  max-width: 1120px;
  margin-inline: auto;
}

.tg-footer .tg-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 48px 0 32px;
}

/* The house note sits in the right-hand column, the newsletter in the
   left — which in RTL source order means about first. */
.tg-footer h5 {
  margin: 0 0 14px;
  font-family: Heebo, var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

.tg-footer p {
  margin: 0;
  font-family: Heebo, var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.tg-footer-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .35);
  margin: 22px 0 14px;
}

.tg-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-footer-links li + li {
  margin-top: 6px;
}

.tg-footer-links a {
  font-family: Heebo, var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

/* The live list marks each link with a chevron pointing into the text.
   ::before puts it on the inline-start edge, so it flips with RTL. */
.tg-footer-links a::before {
  content: "\203A";
  margin-inline-end: 8px;
  opacity: .85;
}

.tg-footer-links a:hover {
  text-decoration: underline;
}

/* On a phone these are the footer's only controls and they sat 29px tall.
   The link box grows to a 44px target; the row gap goes with it, since the
   padding now supplies the separation the margin used to. */
@media (max-width: 900px) {
  .tg-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .tg-footer-links li + li {
    margin-top: 0;
  }
}

/* Field above, button below — the live form stacks rather than sitting
   them side by side. */
.tg-footer-newsletter .footer-newsletter {
  display: block;
  margin-top: 16px;
}

.tg-footer-newsletter input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #69727D;
  border-radius: 3px;
  background: #fff;
  font-family: Heebo, var(--sans);
  font-size: 16px;
  color: #231F20;
}

.tg-footer-newsletter input::placeholder {
  color: #7A7A7A;
}

.tg-footer-newsletter button {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  border: 0;
  border-radius: 0;
  background: #FF8C00;
  font-family: Heebo, var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.tg-footer-newsletter button:hover {
  background: #E67E00;
}

/* Closing bar: the wordmark on black, the copyright line beneath it. */
.tg-footer-bot {
  padding: 26px 0 30px;
  text-align: center;
}

.tg-footer-mark {
  display: block;
  height: 26px;
  width: auto;
  margin: 0 auto 10px;
}

.tg-footer-bot span {
  font-family: Heebo, var(--sans);
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 760px) {
  .tg-footer .tg-footer-cols {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 34px 0 24px;
  }
}
#main-content{
  padding-top:90px;
}

/* Taboola's "Below Article Thumbnails" slot, under the share row. The
   TechGarden account serves nothing into it, so all a reader saw was the
   widget's empty rows — a stack of grey rules at the foot of every article.
   The side rails and the feed below the article are left alone. */
#taboola-below-article-thumbnails { display: none; }

/* ── Article chrome ──────────────────────────────────────────
   Measured element by element against the live vui_designer page.
   These are the pieces that read as "a different design" at a
   glance, before any body copy is compared. */

/* The masthead bar is 90px on the live site against dev's 65. The
   title's distance below it and the byline (ruled, share buttons
   beside the author) are VOOOM's, from public.css. */
.mast-row { padding-block: 25px; }

/* Hero and body images are square-cornered on the live site. */
.article-content .article-hero-img,
.article-content .article-hero img,
.article-content figure img { border-radius: 0; }

/* The booked sidebar creative: same crimson, but a larger, heavier
   label with room around it and a 3px corner. */
.article-promo-block .promo-cta {
  font-size: 20px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 3px;
}

/* ── Imported comparison blocks, without their wrapper ───────
   The bodies on the server no longer carry the template's outer <div>
   (.infinix-article-v2 / .gt30-article) or the .section-title / box divs —
   only the table and its cell classes survived. The article's scoped CSS is
   keyed on that wrapper, so it matches nothing and the table renders as bare
   Narkiss 20px on white. These restate the source's table and heading look
   on the classes that are still in the markup, measured off the live
   gt30pro page:

     table      Rubik→Heebo 16px, cell padding 8px, #dee2e6 rules
     thead th   #000 fill, white text, centred (a coloured th keeps its
                inline colour)
     .feature-name  bold, #f9f9f9, start-aligned
     .infinix-col   #f0fff4     .redmagic-col  #fff5f5
     .samsung-col   #f5f8ff     .winner-col    #fff8e1
     h3         the "section-title" bar: #f4f4f4, 5px #000 start rule,
                12px 15px, 40px above / 25px below, 22px 700
     h4         22px 700, 16px below

   An h3 directly before a lead form is that form's title, not a section
   head, and is left out of the bar. */
#article_page .article-content .table-custom {
  display: table;
  width: 100%;
  border-collapse: collapse;
  white-space: normal;
  font-family: Heebo, Assistant, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  border: 1px solid #dee2e6;
}
#article_page .article-content .table-custom :is(th, td) {
  padding: 8px;
  border: 1px solid #dee2e6;
  font-size: 16px;
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
  background: #fff;
  color: #000;
}
#article_page .article-content .table-custom thead th {
  background: #000;
  color: #fff;
  font-weight: 700;
  border-color: #000;
}
#article_page .article-content .table-custom .feature-name {
  font-weight: 700;
  text-align: start;
  background: #f9f9f9;
}
#article_page .article-content .table-custom .infinix-col  { background: #f0fff4; }
#article_page .article-content .table-custom .redmagic-col { background: #fff5f5; }
#article_page .article-content .table-custom .samsung-col  { background: #f5f8ff; }
#article_page .article-content .table-custom .winner-col   { background: #fff8e1; }
#article_page .article-content .table-custom :is(.infinix-header, .samsung-header, .winner-header) {
  color: #fff;
}

/* Only a flattened comparison body — a spec table with no template wrapper
   round it — gets the bar drawn by hand. A rebuilt body has .section-title
   and its own scoped CSS; any other article's h3 is the editor's heading and
   is left alone (infinix_numbers has a purple 25px h3 that is not a bar). */
#article_page .article-layout > .article-content:has(.table-custom):not(:has(.infinix-article-v2, .gt30-article)) > h3:not(:has(+ .lf-wrap)) {
  display: block;
  margin: 40px 0 25px;
  padding: 12px 15px;
  background: #f4f4f4;
  border-inline-start: 5px solid #000;
  font-family: Heebo, Assistant, system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #000;
}
#article_page .article-layout > .article-content:has(.table-custom):not(:has(.infinix-article-v2, .gt30-article)) h4 {
  margin: 0 0 16px;
  font-family: Heebo, Assistant, system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #000;
}

/* ── Phone ───────────────────────────────────────────────────
   Measured element by element against the live site at 390px (Elementor's
   mobile breakpoint is 767px). Everything above is the desktop reading;
   the values here replace it below that width.

   Masthead     white 64px bar, a #231F20 284×44 block at its left edge
                with the 264×21 wordmark inside (the header's left column
                on the live site — not a dark bar, not centred)
   Home grid    one column, 370×220 cards inset 10px, 20px between them;
                headline as on VOOOM's phone home
   Article      VOOOM's phone article, unchanged
   Lead form    placeholders only (the label above each field is dropped
                where the field has a placeholder), 47px square fields
                30px apart, 47px square button, 28px/500 title over a
                #707070 rule
   Aside        the booked promo / affiliation card and the house note
                come back under the body — public.css hides every aside
                block on a phone and the live page shows these two
   Footer       50px top, 10px gutters, 24px link rows, 40px field +
                10px + 40px button, then an 80px #000 bar with the mark */
@media (max-width: 767px) {
  /* The phone header is a white 64px bar with a dark 284×44 block at its
     left edge holding the wordmark — not a dark bar edge to edge. The page
     itself is white on a phone, not the desktop's #F9F9F9. */
  .mast {
    background: #fff;
    border-bottom: 0;
    box-shadow: none;
  }
  .mast .mast-row {
    box-sizing: border-box;
    height: 64px;
    min-height: 0;
    padding: 10px;
    justify-content: flex-end;
  }
  .mast .mast-logo {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 284px;
    height: 44px;
    padding: 10px;
    background: var(--ink);
  }
  .mast .mast-logo img {
    width: 264px;
    height: auto;
    max-width: none;
  }
  body,
  #article_page,
  .home-page { background: #fff; }
  /* general.scss compiles to `#main-content { padding-top: 55px }` at
     900px and loads after this file; the type selector outranks it. The
     bar is 64px and fixed, so anything less puts the first card under it. */
  main#main-content {
    padding-top: 64px;
    margin-bottom: 0;
  }

  /* Home */
  /* One track, not 24 spanned: twenty-four 1fr tracks with a 20px gap need
     460px of gutter alone, and the cards ran 80px off both edges. */
  .tg-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 20px;
    padding: 10px 10px 0;
  }
  .tg-card:nth-child(n) { grid-row: auto; grid-column: 1; }

  /* Article: type, spacing, byline and hero are VOOOM's at this width
     too — nothing restated here. */

  /* Lead form */
  /* Carries the id: article.scss compiles to `#article_page h3` and
     lead-form.css to `.lf-wrap.lf-skin--source .lf-input`, both loading
     after this file. */
  #article_page .article-content h3:has(+ .lf-wrap) {
    margin: 15px 0 16px;
    padding: 16px 0 0;
    border-top: 1px solid #707070;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 500;
  }
  #article_page .article-content .lf-wrap {
    margin: 0;
    padding: 0;
  }
  #article_page .article-content .lf-wrap .lf-fields {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  #article_page .article-content .lf-wrap .lf-field { gap: 5px; }
  #article_page .article-content .lf-wrap .lf-field:has(> input[placeholder]:not([placeholder=""])) .lf-field-label {
    display: none;
  }
  #article_page .article-content .lf-wrap .lf-field-label {
    font-size: 14px;
    line-height: 1;
    color: #7a7a7a;
  }
  #article_page .article-content .lf-wrap .lf-input,
  #article_page .article-content .lf-wrap .lf-textarea,
  #article_page .article-content .lf-wrap .lf-fields select,
  #article_page .article-content .lf-wrap .lf-fields input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    min-height: 47px;
    height: 47px;
    padding: 6px 16px;
    border: 1px solid #69727d;
    border-radius: 0;
    background: #fff;
    font-size: 16px;
    line-height: 1.4;
    color: #1f2124;
  }
  #article_page .article-content .lf-wrap .lf-input::placeholder,
  #article_page .article-content .lf-wrap .lf-fields input::placeholder {
    color: #7a7a7a;
    opacity: 1;
  }
  #article_page .article-content .lf-wrap .lf-input.lf-file-pick {
    min-height: 30px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #article_page .article-content .lf-wrap .lf-actions { padding: 30px 0 0; }
  #article_page .article-content .lf-wrap .lf-btn-submit,
  #article_page .article-content .lf-wrap .lf-btn-next {
    width: 100%;
    min-height: 47px;
    padding: 10px 24px;
    border-radius: 0;
    font-size: 18px;
    font-weight: 500;
  }

  /* Aside: promo / affiliation card and the house note, at the page's
     10px gutter rather than the column's 15px. */
  .article-layout .article-aside {
    gap: 28px;
    margin: 0 -5px;
  }
  .article-layout .article-aside-block.article-promo-block,
  .article-layout .article-aside-block.article-about-block {
    display: flex;
  }
  .article-layout .article-aside-block.affiliation-card {
    display: flex;
    max-width: none;
  }
  .article-promo-block {
    border-color: #989898;
    border-radius: 10px;
    padding: 15px;
  }
  /* A saved affiliation card takes the promo's slot. On the live phone
     page that slot is the plain bordered box above — 16px centred title,
     grey copy, a full-width crimson button — so the card's own dressing
     (marker, size scale, 13px pill button) is set aside here. */
  .article-layout .article-aside-block.affiliation-card {
    --aff-scale: 1;
    --aff-marker: transparent;
    gap: 10px;
    padding: 15px !important;
    border: 1px solid #989898 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .article-layout .affiliation-card .affiliation-card-title {
    margin: 0;
    padding: 0;
    font-family: Heebo, var(--sans);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  .article-layout .affiliation-card :is(.affiliation-card-subtitle, .affiliation-card-text) {
    padding: 0;
    font-family: Heebo, var(--sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  .article-layout .affiliation-card .highlight-scroll,
  .article-layout .affiliation-card .affiliation-card-title--marker > span,
  .article-layout .affiliation-card .affiliation-card-subtitle--marker > span {
    background: none !important;
    padding: 0;
  }
  .article-layout .affiliation-card .affiliation-card-btn {
    display: block;
    width: auto;
    margin: 6px 0 0;
    padding: 12px 24px;
    border-radius: 3px;
    background: var(--voom-red);
    font-family: Heebo, var(--sans);
    font-size: 20px;
    line-height: 32px;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
  }
  .article-layout .affiliation-card .affiliation-card-btn i { display: none; }
  .article-promo-block .promo-kicker { line-height: 1; }
  .article-promo-block .promo-sub {
    line-height: 24px;
    color: #7a7a7a;
  }
  .article-promo-block .promo-cta { line-height: 32px; }
  #article_page .article-aside .article-about-block h4.aside-title {
    margin: 0 0 8px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--ink);
    font-size: 19px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  #article_page .article-about-block p {
    margin: 0;
    font-family: Heebo, var(--sans);
    font-size: 17px;
    line-height: 21px;
    color: #858585;
  }

  /* Footer */
  .site-footer.tg-footer {
    margin-top: 0;
    padding: 60px 0 0;
  }
  .tg-footer .wrap { padding: 0 10px; }
  .tg-footer .tg-footer-cols {
    gap: 20px;
    padding: 0;
  }
  .tg-footer h5 {
    line-height: 16px;
    letter-spacing: 0;
    margin: 0 0 20px;
  }
  .tg-footer p { margin: 0 0 14.4px; }
  .tg-footer-rule { margin: 24px 0 25px; }
  /* public.css lays .site-footer ul out as a 12px-gapped column. */
  .tg-footer .tg-footer-links { gap: 0; }
  .tg-footer-links li { line-height: 24px; }
  .tg-footer-links li + li { margin-top: 0; }
  .tg-footer-links a {
    display: flex;
    align-items: center;
    min-height: 24px;
    line-height: 24px;
  }
  .tg-footer-newsletter .footer-newsletter { margin-top: 20px; }
  .tg-footer-newsletter input {
    padding: 8px 16px;
    font-size: 15px;
    line-height: 21px;
  }
  .tg-footer-newsletter button { margin-top: 10px; }
  /* Copyright line first, mark beneath it — the reverse of the markup. */
  .tg-footer-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 80px;
    margin: 60px -10px 0;
    padding: 10px 0 0;
    background: #000;
  }
  .tg-footer-bot span {
    order: -1;
    font-size: 16px;
    line-height: 16px;
    color: #fff;
  }
  .tg-footer-mark {
    height: 16px;
    margin: 19px 0 0;
  }
}