/* Tetri’s Smile · house ads (v41)
   Our own promotion on our own site: a photograph, a panel laid over its edge, a hairline ring behind the panel and four
   registration crosses at the corners of the plate (Arthur's boards: the navy panel over a photograph, the thin orbit
   lines, the corner marks). Clinic units carry a night panel; pediatric units a daylight one. Each skin speaks its own
   language: Signature navy with a rim of light and pill buttons, Quiet white paper with a grayscale photograph that takes
   its colour under the pointer, Frost slate and ice with mono labels and a cool duotone, Lumen black and white with light
   falling through the dark.
   Markup (written at build time, never by script): see v41/v41src/fixtures/ads/ads_render.py and the round contract.
     <aside class="tsad tsad--article-mid|page-end|home" data-ad data-audience="adult|family|all" data-side="start|end">
       .tsad__plate > .tsad__media > img.tsad__img   +   .tsad__body > p.tsad__kicker (svg.tsad__mark + span) / p.tsad__title /
       p.tsad__text / p.tsad__actions (a.tsad__cta, a.tsad__tel) / p.tsad__statement (+ .tsad__statement--tr on RU pages)
   Budget: nothing moves at rest (hover only, and never with reduced motion); no backdrop-filter, no blend modes, no blur;
   one static filter on the photograph in Quiet, Frost and Lumen. Every size follows --ts; layouts follow the unit's own
   width (container queries in em, so larger text and the T panel's zoom switch to the stacked layout earlier).
   Selectors start .tsad .tsad__body … so the article's own p and a rules (and the skins' .article p) never reach inside. */

/* ------------------------------------------------------------------ tokens (Signature, the base) */
.tsad{
  --a-bg:linear-gradient(158deg,#16233d 0%,#0b1324 58%,#070d1a 100%);
  --a-solid:#0b1324;
  --a-rim:radial-gradient(120% 85% at 100% 0%,rgba(96,140,214,.34) 0%,rgba(96,140,214,0) 58%);
  --a-fg:#fff;--a-fg2:rgba(228,236,248,.86);--a-fg3:#9fb6d8;--a-ln:rgba(255,255,255,.18);
  --a-btn:#fff;--a-btn-fg:#0b1324;--a-btn-ln:#fff;
  --a-ring:rgba(255,255,255,.55);--a-cross:rgba(11,19,36,.42);
  --a-wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108'%3E%3Cg fill='%23ffffff' fill-opacity='.055'%3E%3Cpath d='M0 0h100v20H60v34H40V20H0z'/%3E%3Cpath d='M0 58a50 50 0 0 0 100 0H80a30 30 0 0 1-60 0z'/%3E%3C/g%3E%3C/svg%3E");
  --a-scrim-c:rgba(11,19,36,.36);--a-orbit-c:rgba(255,255,255,.2);
  --a-shadow:0 26px 60px -18px rgba(7,13,26,.45);
  --a-radius:6px;--a-panel-radius:4px;
  --a-pad:clamp(22px,4.6cqi,46px);
  --a-wm-s:clamp(130px,24cqi,230px);
  --a-t:clamp(25px,3.2cqi + 10px,38px);
  --a-tw:500;--a-tls:-.028em;
  --a-ease:cubic-bezier(.2,.7,.2,1);
  container:tsad / inline-size;
  position:relative;display:block;box-sizing:border-box;
  font-size:calc(16px * var(--ts, 1));               /* the em of the container queries below */
  line-height:1.5;color:var(--a-fg);text-align:left;
}
.tsad[data-audience="family"]{
  --a-bg:linear-gradient(158deg,#ffffff 0%,#f1f6fc 55%,#e2ebf6 100%);
  --a-solid:#fff;
  --a-rim:radial-gradient(110% 80% at 100% 0%,rgba(150,186,232,.38) 0%,rgba(150,186,232,0) 60%);
  --a-fg:#0b1324;--a-fg2:#2f3b52;--a-fg3:#4b6a92;--a-ln:rgba(11,19,36,.14);
  --a-btn:#0b1324;--a-btn-fg:#fff;--a-btn-ln:#0b1324;
  --a-wm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108'%3E%3Cg fill='%230b1324' fill-opacity='.045'%3E%3Cpath d='M0 0h100v20H60v34H40V20H0z'/%3E%3Cpath d='M0 58a50 50 0 0 0 100 0H80a30 30 0 0 1-60 0z'/%3E%3C/g%3E%3C/svg%3E");
  --a-scrim-c:rgba(226,235,246,.26);--a-orbit-c:rgba(11,19,36,.14);
  --a-shadow:0 26px 60px -22px rgba(10,26,74,.28);
}
.tsad--page-end{--a-t:clamp(28px,2.4cqi + 14px,52px)}
.tsad--home{--a-t:clamp(30px,3.2cqi + 12px,64px)}
html.dark .tsad--home{--a-cross:rgba(255,255,255,.5)}

/* ------------------------------------------------------------------ placement spacing */
.tsad--article-mid{margin:36px 0 34px}
.tsad--page-end,.tsad--home{width:min(1320px,100%);margin-inline:auto;padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))}
.tsad--page-end{margin-block:clamp(56px,8vw,112px) clamp(56px,8vw,104px)}
.tsad--home{padding-block:clamp(64px,10vh,140px)}
@media (max-width:640px){.tsad--page-end,.tsad--home{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}}

/* ------------------------------------------------------------------ the plate (stacked: photograph above, panel overlapping it) */
.tsad .tsad__plate{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--a-radius)}
.tsad .tsad__plate::before{   /* four registration crosses just outside the corners */
  content:"";position:absolute;inset:-6px;pointer-events:none;
  background:
    linear-gradient(var(--a-cross),var(--a-cross)) 0 5px/11px 1px no-repeat,linear-gradient(var(--a-cross),var(--a-cross)) 5px 0/1px 11px no-repeat,
    linear-gradient(var(--a-cross),var(--a-cross)) 100% 5px/11px 1px no-repeat,linear-gradient(var(--a-cross),var(--a-cross)) calc(100% - 5px) 0/1px 11px no-repeat,
    linear-gradient(var(--a-cross),var(--a-cross)) 0 calc(100% - 5px)/11px 1px no-repeat,linear-gradient(var(--a-cross),var(--a-cross)) 5px 100%/1px 11px no-repeat,
    linear-gradient(var(--a-cross),var(--a-cross)) 100% calc(100% - 5px)/11px 1px no-repeat,linear-gradient(var(--a-cross),var(--a-cross)) calc(100% - 5px) 100%/1px 11px no-repeat}
.tsad .tsad__media{position:relative;z-index:0;grid-area:1/1;aspect-ratio:16/10;overflow:hidden;border-radius:var(--a-radius);background:#18233a;isolation:isolate}
.tsad[data-audience="family"] .tsad__media{background:#dfe7f1}
.tsad--home .tsad__media{aspect-ratio:4/3}
.tsad .tsad__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%);transition:transform 1.4s var(--a-ease),filter .9s var(--a-ease)}
.tsad .tsad__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--a-scrim,linear-gradient(var(--a-sdir,180deg),rgba(11,19,36,0) 42%,var(--a-scrim-c) 100%))}
.tsad .tsad__media::after{    /* the hairline ring on the photograph, round the panel's corner (stacked and article-mid) */
  content:"";position:absolute;z-index:2;pointer-events:none;border:1px solid var(--a-ring);border-radius:50%;
  width:var(--a-ring-d,38cqi);aspect-ratio:1;left:var(--a-ring-x,calc(100% - 12px));top:var(--a-ring-y,calc(100% - 46px));transform:translate(-50%,-50%)}
.tsad .tsad__body{
  grid-area:2/1;z-index:1;min-width:0;overflow:hidden;
  margin:-46px 12px 0;padding:var(--a-pad);
  background:var(--a-orbit,linear-gradient(transparent,transparent)),var(--a-wm) right -26px bottom -34px/var(--a-wm-s) auto no-repeat,var(--a-rim),var(--a-bg);
  background-color:var(--a-solid);
  border-radius:var(--a-panel-radius);box-shadow:var(--a-shadow);color:var(--a-fg)}
.tsad--text .tsad__body{grid-area:1/1;margin:0}

/* ------------------------------------------------------------------ type */
.tsad .tsad__body > p{margin:0;max-width:none;text-shadow:none}
.tsad .tsad__body .tsad__kicker{display:flex;align-items:center;gap:10px;font:500 max(calc(11px * var(--ts, 1)), var(--ts-label-min, 0px))/1.45 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--a-fg3)}
.tsad .tsad__mark{flex:none;width:calc(13px * var(--ts, 1));height:auto;fill:currentColor}
.tsad .tsad__body .tsad__title{margin-top:14px;font:var(--a-tw) min(calc(var(--a-t) + (var(--ts, 1) - 1) * min(var(--a-t), 22px)), 11cqi)/1.07 var(--display);letter-spacing:var(--a-tls);color:var(--a-fg);text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.tsad .tsad__body .tsad__text{margin-top:14px;font:300 calc(16px * var(--ts, 1))/1.62 var(--body);color:var(--a-fg2);max-width:34em;overflow-wrap:break-word}
.tsad--home .tsad__body .tsad__text{font-size:calc(17px * var(--ts, 1))}

/* ------------------------------------------------------------------ actions: one call to action (the whole plate answers to it), an optional phone */
.tsad .tsad__body .tsad__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.tsad .tsad__body .tsad__cta{display:inline-flex;align-items:center;gap:14px;min-height:46px;padding:0 22px 0 24px;border:1px solid var(--a-btn-ln);border-radius:999px;background:var(--a-btn);color:var(--a-btn-fg);font:500 max(calc(11.5px * var(--ts, 1)), var(--ts-label-min, 0px))/1.25 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;max-width:100%}
.tsad .tsad__cta::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--a-radius)}   /* the plate is the link's hit area */
.tsad .tsad__cta i{position:relative;flex:none;width:18px;height:1px;background:currentColor;transition:transform .5s var(--a-ease)}
.tsad .tsad__cta i::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tsad .tsad__cta:focus-visible{outline:2px solid var(--a-fg);outline-offset:4px}
.tsad .tsad__plate:has(.tsad__cta:focus-visible){outline:1px solid var(--a-cross);outline-offset:10px}
.tsad .tsad__body .tsad__tel{position:relative;z-index:4;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2em .5em;max-width:100%;padding:6px 0 5px;border-bottom:1px solid var(--a-ln);color:var(--a-fg);font:400 calc(15px * var(--ts, 1))/1.3 var(--body);text-decoration:none;letter-spacing:.01em}
.tsad .tsad__tel span{font:500 max(calc(10.5px * var(--ts, 1)), var(--ts-label-min, 0px))/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--a-fg3)}
.tsad .tsad__tel:focus-visible{outline:2px solid var(--a-fg);outline-offset:3px}

/* ------------------------------------------------------------------ the statement (offers): always shown, never clamped */
.tsad .tsad__body .tsad__statement{position:relative;z-index:4;display:block;margin-top:22px;padding-top:14px;border-top:1px solid var(--a-ln);font:400 max(calc(11.5px * var(--ts, 1)), 13px)/1.6 var(--body);letter-spacing:.02em;color:var(--a-fg2);text-transform:none;overflow-wrap:break-word;user-select:text}
.tsad .tsad__body .tsad__statement--tr{margin-top:8px;padding-top:0;border-top:0}

/* ------------------------------------------------------------------ hover (pointer devices only; nothing at rest) */
@media (hover:hover){
  .tsad .tsad__plate:hover .tsad__img{transform:scale(1.035)}
  .tsad .tsad__plate:hover .tsad__cta i{transform:translateX(5px)}
  .tsad .tsad__body .tsad__tel:hover{border-bottom-color:currentColor}
}

/* ------------------------------------------------------------------ wide layouts
   (a container query styles the unit's descendants, never the container: the layout variables go on .tsad__plate) */
/* article-mid: photograph and panel side by side, the panel stepping 44px over the photograph's edge */
@container tsad (min-width: 36em){
  .tsad--article-mid .tsad__plate{grid-template-columns:minmax(0,44fr) minmax(0,56fr);--a-sdir:90deg;--a-ring-d:max(36cqi,230px);--a-ring-x:100%;--a-ring-y:0%}
  .tsad--article-mid .tsad__media{grid-area:1/1;aspect-ratio:auto;min-height:max(46cqi,300px)}
  .tsad--article-mid .tsad__body{grid-area:1/2;align-self:center;margin:30px 0 30px -44px}
  .tsad--article-mid[data-side="start"] .tsad__plate{--a-sdir:270deg;--a-ring-x:0%}
  .tsad--article-mid[data-side="start"] .tsad__media{grid-area:1/2}
  .tsad--article-mid[data-side="start"] .tsad__body{grid-area:1/1;margin:30px -44px 30px 0}
  .tsad--article-mid.tsad--text .tsad__body{grid-area:1/1/2/3;margin:0}
}
/* page-end and home: the photograph fills the plate; the panel floats on it, away from the subject (data-side), and the ring
   becomes an orbit round the watermark inside the panel, so no line ever crosses a face */
@container tsad (min-width: 44em){
  .tsad--page-end .tsad__plate,.tsad--home .tsad__plate{--a-sdir:90deg;
    --a-orbit:radial-gradient(circle at calc(100% + 26px - var(--a-wm-s) / 2) calc(100% + 34px - var(--a-wm-s) * .54),transparent calc(var(--a-wm-s) * .8 - .7px),var(--a-orbit-c) calc(var(--a-wm-s) * .8),transparent calc(var(--a-wm-s) * .8 + .9px))}
  .tsad--page-end[data-side="start"] .tsad__plate,.tsad--home[data-side="start"] .tsad__plate{--a-sdir:270deg}
  .tsad--page-end .tsad__media,.tsad--home .tsad__media{grid-area:1/1;aspect-ratio:auto;min-height:min(max(42cqi,420px),620px)}
  .tsad--home .tsad__media{min-height:min(max(50cqi,480px),760px)}
  .tsad--page-end .tsad__media::after,.tsad--home .tsad__media::after{display:none}
  .tsad--page-end .tsad__body,.tsad--home .tsad__body{grid-area:1/1;align-self:center;justify-self:end;width:min(48%,34em);margin:clamp(28px,4cqi,56px)}
  .tsad--page-end[data-side="start"] .tsad__body,.tsad--home[data-side="start"] .tsad__body{justify-self:start}
  .tsad--page-end.tsad--text .tsad__body,.tsad--home.tsad--text .tsad__body{justify-self:stretch;width:auto;margin:0;padding:clamp(32px,5cqi,72px)}
}

/* very narrow units (the T panel's largest zoom on a phone): the panel takes the full width */
@container tsad (max-width: 300px){
  .tsad .tsad__body{margin-inline:0;padding:20px 18px}
}

/* ================================================================== Quiet (the default): white paper, navy ink, hairlines */
html[data-skin="quiet"] .tsad{
  --a-bg:rgba(11,19,36,.93);--a-solid:#0b1324;--a-rim:linear-gradient(transparent,transparent);
  --a-fg:#fff;--a-fg2:#d5dce6;--a-fg3:#aab6c8;--a-ln:rgba(255,255,255,.22);
  --a-btn:transparent;--a-btn-fg:#fff;--a-btn-ln:transparent;
  --a-ring:rgba(11,19,36,.34);--a-cross:rgba(11,19,36,.38);--a-scrim:none;--a-shadow:none;
  --a-radius:0px;--a-panel-radius:0px;--a-tw:200;--a-tls:-.03em}
html[data-skin="quiet"] .tsad[data-audience="family"]{
  --a-bg:#fff;--a-solid:#fff;--a-fg:#0b1324;--a-fg2:#3a4357;--a-fg3:#646e80;--a-ln:rgba(11,19,36,.16);
  --a-btn-fg:#0b1324;--a-wm:none}
html[data-skin="quiet"] .tsad[data-audience="family"] .tsad__body{box-shadow:inset 0 0 0 1px rgba(11,19,36,.12)}
html[data-skin="quiet"] .tsad .tsad__plate{box-shadow:0 0 0 1px rgba(11,19,36,.1)}
html[data-skin="quiet"] .tsad .tsad__media{background:#eceef2}
html[data-skin="quiet"] .tsad .tsad__media::after{border-color:rgba(255,255,255,.62)}
html[data-skin="quiet"] .tsad .tsad__img{filter:grayscale(1) contrast(1.04)}
html[data-skin="quiet"] .tsad .tsad__body .tsad__kicker{font-weight:400;font-size:max(calc(10.5px * var(--ts, 1)), var(--ts-label-min, 0px));letter-spacing:.32em}
html[data-skin="quiet"] .tsad .tsad__body .tsad__cta{min-height:44px;padding:0;gap:16px;flex-direction:row-reverse;font-weight:400;font-size:max(calc(10.5px * var(--ts, 1)), var(--ts-label-min, 0px));letter-spacing:.32em}
html[data-skin="quiet"] .tsad .tsad__cta i{width:36px;transition:width .5s var(--a-ease)}
html[data-skin="quiet"] .tsad .tsad__cta i::after{display:none}
@media (hover:hover){
  html[data-skin="quiet"] .tsad .tsad__plate:hover .tsad__img{filter:grayscale(0) contrast(1)}
  html[data-skin="quiet"] .tsad .tsad__plate:hover .tsad__cta i{transform:none;width:60px}
}
html[data-skin="quiet"] .tsad .tsad__body .tsad__statement{letter-spacing:.03em}

/* ================================================================== Frost: slate and ice, mono labels, cool duotone, corner marks */
html[data-skin="frost"] .tsad{
  --a-bg:linear-gradient(160deg,#182a3f 0%,#0f1c2b 70%);--a-solid:#0f1c2b;
  --a-rim:radial-gradient(70% 60% at 0% 0%,rgba(91,127,163,.32) 0%,rgba(91,127,163,0) 70%);
  --a-fg:#f4f7fa;--a-fg2:#d7e0ea;--a-fg3:#9fb0c3;--a-ln:rgba(255,255,255,.2);
  --a-btn:#f4f7fa;--a-btn-fg:#0a0e14;--a-btn-ln:#f4f7fa;
  --a-ring:rgba(233,238,243,.7);--a-cross:rgba(10,14,20,.5);
  --a-scrim:linear-gradient(180deg,rgba(47,95,148,.30),rgba(15,28,43,.36));
  --a-shadow:0 18px 40px -20px rgba(10,14,20,.4);--a-radius:2px;--a-panel-radius:2px;--a-tw:600;--a-tls:-.045em}
html[data-skin="frost"] .tsad[data-audience="family"]{
  --a-bg:linear-gradient(160deg,#ffffff,#e9eef3);--a-solid:#fff;
  --a-rim:radial-gradient(70% 60% at 0% 0%,rgba(168,192,220,.5) 0%,rgba(168,192,220,0) 70%);
  --a-fg:#0a0e14;--a-fg2:#2a3340;--a-fg3:#5f6b7a;--a-ln:rgba(10,14,20,.16);
  --a-btn:#0a0e14;--a-btn-fg:#fff;--a-btn-ln:#0a0e14;--a-scrim:linear-gradient(180deg,rgba(168,192,220,.22),rgba(47,95,148,.16))}
html[data-skin="frost"] .tsad .tsad__img{filter:grayscale(1) contrast(1.08) brightness(1.04)}
html[data-skin="frost"] .tsad .tsad__media::after{border-radius:50%/42%}   /* Frost's thin ellipse rings */
html[data-skin="frost"] .tsad .tsad__body{background:var(--a-orbit,linear-gradient(transparent,transparent)),
    linear-gradient(var(--a-fg3),var(--a-fg3)) 12px 12px/9px 1px no-repeat,linear-gradient(var(--a-fg3),var(--a-fg3)) 12px 12px/1px 9px no-repeat,
    linear-gradient(var(--a-fg3),var(--a-fg3)) calc(100% - 12px) calc(100% - 12px)/9px 1px no-repeat,linear-gradient(var(--a-fg3),var(--a-fg3)) calc(100% - 12px) calc(100% - 12px)/1px 9px no-repeat,
    var(--a-rim),var(--a-bg);background-color:var(--a-solid)}
html[data-skin="frost"] .tsad .tsad__body .tsad__kicker{font:400 max(calc(11.5px * var(--ts, 1)), var(--ts-label-min, 0px))/1.5 var(--mono);letter-spacing:.01em;text-transform:none}
html[data-skin="frost"] .tsad .tsad__kicker span::before{content:"/ "}
html[data-skin="frost"] .tsad .tsad__kicker span::after{content:" /"}
html[data-skin="frost"] .tsad .tsad__body .tsad__text{font-weight:400;font-size:calc(15.5px * var(--ts, 1));line-height:1.6}
html[data-skin="frost"] .tsad .tsad__body .tsad__cta{border-radius:2px;min-height:44px;padding:0 18px;font:400 max(calc(12px * var(--ts, 1)), var(--ts-label-min, 0px))/1.25 var(--mono);letter-spacing:0;text-transform:none}
html[data-skin="frost"] .tsad .tsad__tel span{font-family:var(--mono);letter-spacing:.01em;text-transform:none}
html[data-skin="frost"] .tsad .tsad__body .tsad__statement{font-family:var(--body)}
@media (hover:hover){html[data-skin="frost"] .tsad .tsad__plate:hover .tsad__img{filter:grayscale(.35) contrast(1.04)}}

/* ================================================================== Lumen: black and white, light through the dark */
html[data-skin="lumen"] .tsad{
  --a-bg:linear-gradient(165deg,#0d1424 0%,#060a13 62%);--a-solid:#060a13;
  --a-rim:radial-gradient(90% 70% at 100% 0%,rgba(150,180,230,.30) 0%,rgba(150,180,230,0) 62%);
  --a-fg:#fff;--a-fg2:rgba(225,233,246,.84);--a-fg3:#9fb4d4;--a-ln:rgba(150,180,230,.24);
  --a-ring:rgba(150,180,230,.6);--a-cross:rgba(6,10,19,.45);
  --a-scrim:radial-gradient(80% 70% at 18% 8%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(6,10,19,0) 45%,rgba(6,10,19,.42) 100%);
  --a-shadow:0 30px 70px -24px rgba(6,10,19,.55),inset 0 0 0 1px rgba(150,180,230,.16);--a-tw:300;--a-tls:-.03em}
html[data-skin="lumen"] .tsad[data-audience="family"]{
  --a-bg:linear-gradient(165deg,#ffffff 0%,#f2f5fa 70%);--a-solid:#fff;
  --a-rim:radial-gradient(90% 70% at 100% 0%,rgba(190,206,232,.45) 0%,rgba(190,206,232,0) 62%);
  --a-fg:#0b1324;--a-fg2:#2f3b52;--a-fg3:#55709a;--a-ln:rgba(11,19,36,.14);--a-shadow:0 30px 70px -28px rgba(11,19,36,.3),inset 0 0 0 1px rgba(11,19,36,.06);
  --a-scrim:radial-gradient(80% 70% at 18% 8%,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 60%)}
html.dark[data-skin="lumen"] .tsad--home{--a-cross:rgba(150,180,230,.5)}
html[data-skin="lumen"] .tsad .tsad__img{filter:grayscale(1) contrast(1.12) brightness(.92)}
html[data-skin="lumen"] .tsad .tsad__body .tsad__kicker{letter-spacing:.3em}
@media (hover:hover){html[data-skin="lumen"] .tsad .tsad__plate:hover .tsad__img{filter:grayscale(.2) contrast(1.05) brightness(1)}}

/* ------------------------------------------------------------------ accessibility states of the T panel */
html:is([data-ts-size="l"],[data-ts-size="xl"]) .tsad .tsad__body .tsad__title{hyphens:auto}
html.a11y-contrast .tsad{--a-bg:#050a18;--a-solid:#050a18;--a-rim:linear-gradient(transparent,transparent);--a-fg:#fff;--a-fg2:#fff;--a-fg3:#dfe8f5;--a-ln:rgba(255,255,255,.6);--a-wm:none}
html.a11y-contrast .tsad[data-audience="family"]{--a-bg:#fff;--a-solid:#fff;--a-fg:#000;--a-fg2:#000;--a-fg3:#1d2940;--a-ln:rgba(0,0,0,.55)}
html.a11y-contrast .tsad .tsad__media::before{display:none}
html.a11y-darkc .tsad.tsad .tsad__img{filter:invert(1) hue-rotate(180deg)}
html.a11y-darkc[data-skin]:not([data-skin="signature"]) .tsad.tsad .tsad__img{filter:invert(1) hue-rotate(180deg) grayscale(1)}
@media (prefers-reduced-motion:reduce){.tsad .tsad__img,.tsad .tsad__cta i{transition:none!important}.tsad .tsad__plate:hover .tsad__img{transform:none!important}}
html.reduced .tsad .tsad__img,html.reduced .tsad .tsad__cta i{transition:none!important}
html.reduced .tsad .tsad__plate:hover .tsad__img{transform:none!important}
/* ------------------------------------------------------------------ phones (last, so the skins' sizes give way on a phone)
   A house ad stays under about 600px on a 390px phone (the offer unit may run longer: its statement is never clamped). The
   photograph is cropped to 2:1 on the homes and 16:9 elsewhere, the title is about 26px, the panel and the labels tighter;
   the third home unit (the one after the "results" chapter) is not shown on phones, so a home carries two. */
@media (max-width:640px){
  .tsad--home{--a-t:clamp(21px,5.9vw,25px);padding-block:16px}
  .tsad--home .tsad__media{aspect-ratio:2/1}
  .tsad--article-mid{--a-t:clamp(21px,5.9vw,25px);margin:28px 0 26px}
  .tsad--article-mid .tsad__media{aspect-ratio:16/9}
  .tsad--page-end{--a-t:clamp(21px,5.9vw,25px);margin-block:40px 36px}
  .tsad--page-end .tsad__media{aspect-ratio:16/9}
  .tsad--home .tsad__body,.tsad--article-mid .tsad__body,.tsad--page-end .tsad__body{margin:-30px 8px 0;padding:18px 18px 20px}
  .tsad--home .tsad__body{margin-top:-44px}
  .tsad .tsad__body .tsad__title{margin-top:9px;line-height:1.1}
  html:not([data-skin="frost"]) .tsad .tsad__body .tsad__kicker{letter-spacing:.13em}
  .tsad .tsad__body .tsad__text,.tsad--home .tsad__body .tsad__text,html[data-skin] .tsad .tsad__body .tsad__text{margin-top:9px;font-size:calc(14.5px * var(--ts, 1));line-height:1.5}
  .tsad .tsad__body .tsad__actions{margin-top:14px;gap:8px 18px}
  .tsad .tsad__body .tsad__cta{min-height:44px}
  .tsad .tsad__body .tsad__statement{margin-top:14px;padding-top:12px}
  .tsad .tsad__media::after{width:var(--a-ring-d,30cqi);top:var(--a-ring-y,calc(100% - 30px))}
  .ch#results + .tsad--home{display:none}
}

@media print{.tsad{display:none!important}}
