/* Clamshell v2 dithered type. Loaded after home.css.

   One shared treatment with the app (spec: docs/features/v2-design-language.md,
   "Shared dither spec"; app: ClamshellDesign/Dither/SheenProfile.swift):

   - Display text, 30px and up only (h1, section titles, price): the glyph
     stays real, selectable DOM text, filled through background-clip:text
     with a small ordered dither tile at 3px cells. It reads as solid white;
     at most a quarter of the cells along the lowest 0.16em of the glyphs
     turn light, and blue appears only below the baseline. Tiles are cut for
     exact font sizes and line heights (assets/v2/type/, made by
     scripts/gen-dither-type.py), so both are pinned per breakpoint. Geist
     metrics; the first-visit fallback font (Geist is font-display:optional)
     sits the sheen about a cell higher.
   - All text below 30px is a solid tone: no mid sheen, no flat inks, and no
     dither behind any label. Dither sits on floors and edges, kept a cell
     clear of the text.

   background-color under each tile is the plain text color, so text never
   flashes invisible while a tile loads. */

@supports ((-webkit-background-clip:text) or (background-clip:text)){

/* ---------- ink base ---------- */
.hero h1 .h1-ink,.section-title,#licensePriceText{
  -webkit-text-fill-color:transparent;
  background:var(--ink-c,#f4f5f6) var(--ink) 0 0/var(--ink-w,8px) var(--ink-h,8px) repeat;
  background-origin:content-box;
  -webkit-background-clip:text;background-clip:text;
  image-rendering:pixelated;
}
::selection{-webkit-text-fill-color:#fff}

/* Line boxes the former 2px sheen tiles pinned; kept so layout is unchanged. */
.brand>span,.tile-title{line-height:24px}
.faq summary{line-height:30px}
@media (max-width:640px){
  .faq summary{line-height:28px}
}

/* ---------- display sheen (3px cells) ---------- */
/* Inline inks (.h1-ink spans two lines, the price is one span) paint from
   each line fragment's content-area top: one unrepeated tile per fragment. */
.hero h1 .h1-ink,#licensePriceText{
  background-repeat:repeat-x;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* Unitless line-height: the line pitch always follows the font size, so the
   lines can never collide, whatever size wins. The ink tiles paint from each
   line fragment's own top, so they don't depend on it. */
.hero h1{font-size:84px;line-height:1}
/* The h1 is always three lines; where "Keep your agents running" would fit
   on one line, a generated break keeps the highlight on its own line. */
.hero h1 .h1-ink::after{content:"\A";white-space:pre}
.hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-84-5479a5de9e.png);--ink-w:24px;--ink-h:114px}
.section-title{--ink:url(/assets/v2/type/sheen-title-46-2f759943bd.png);--ink-w:24px;--ink-h:48px;font-size:46px;line-height:48px}
#licensePriceText{--ink:url(/assets/v2/type/sheen-price-60-07d787a03a.png);--ink-w:24px;--ink-h:81px}

/* h1 steps follow the two-column hero. Above 900px the text column is
   about 0.38 x (viewport - 160px), and the widest line ("agents running",
   the rotated highlight) is up to 6.75em in WebKit (6.3em in Chromium), so
   each step starts where size x 6.75 fits the column. Stacked below 900px. */
@media (max-width:1679px){
  .hero h1{font-size:72px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-72-c726b266dd.png);--ink-h:96px}
}
@media (max-width:1439px){
  .hero h1{font-size:64px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-64-8d24d5008b.png);--ink-h:87px}
}
@media (min-width:901px) and (max-width:1299px){
  .hero h1{font-size:56px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-56-66ee08b371.png);--ink-h:75px}
}
@media (min-width:901px) and (max-width:1159px){
  .hero h1{font-size:48px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-48-04c3339817.png);--ink-h:66px}
}
@media (min-width:901px) and (max-width:1019px){
  .hero h1{font-size:40px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-40-880408c7f7.png);--ink-h:54px}
}
@media (max-width:999px){
  .section-title{--ink:url(/assets/v2/type/sheen-title-38-becf4afe9a.png);--ink-h:42px;font-size:38px;line-height:42px}
}
@media (max-width:639px){
  .hero h1{font-size:44px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-44-08f2f40ec9.png);--ink-h:60px}
  .section-title{--ink:url(/assets/v2/type/sheen-title-30-7a08d66b5f.png);--ink-h:33px;font-size:30px;line-height:33px}
}
@media (max-width:359px){
  .hero h1{font-size:40px;line-height:1}
  .hero h1 .h1-ink{--ink:url(/assets/v2/type/sheen-h1-40-880408c7f7.png);--ink-h:54px}
}

}

/* ---------- floors, plates and pixel marks ---------- */
/* Fine print: the solid tone lifted from --tx-mute to pass AA. */
.fine,.copyright{color:#868c95}
/* Button floors: the shared ramp (4, 12, 24 of 64 cells) along the bottom
   edge, a cell clear of the label: 3 rows (9px) on 54px and taller buttons,
   the bottom 2 rows (6px) on 42px ones. Plates under labels stay clean. */
.btn-solid:not(.btn-mac){
  background:
    url(/assets/v2/type/btn-floor-7fc894b64e.png) 0 100%/var(--tile) 9px repeat-x,
    var(--blue);
  image-rendering:pixelated;
}
.btn-quiet{
  background:url(/assets/v2/type/btn-floor-7fc894b64e.png) 0 100%/var(--tile) 9px repeat-x,var(--s2);
  image-rendering:pixelated;
}
.btn-quiet:hover{background-color:var(--s3)}
.btn-solid.btn-sm:not(.btn-mac){
  background:
    url(/assets/v2/type/btn-floor-2-cb5e5c3dc9.png) 0 100%/var(--tile) 6px repeat-x,
    var(--blue);
}
.btn-quiet.btn-sm{
  background:url(/assets/v2/type/btn-floor-2-cb5e5c3dc9.png) 0 100%/var(--tile) 6px repeat-x,var(--s2);
}
.btn-quiet.btn-sm:hover{background-color:var(--s3)}
/* Discount badge: plain light text on the clean --deep plate of home.css
   (too short for a floor a cell clear of its label; the app badge matches). */
/* Hero button: white plate with the same floor ramp in light grey. */
.btn.btn-mac{
  background:url(/assets/v2/type/btn-floor-light-b55bf58c7e.png) 0 100%/var(--tile) 9px repeat-x,#fff;
  image-rendering:pixelated;
}
/* Feature icons: the lower part dissolves into the void through a static
   2px Bayer mask (pre-scaled 2x; masks are smoothed, not pixelated). */
.pix{
  -webkit-mask:url(/assets/v2/type/icon-mask-8165275046.png) 0 0/16px 64px;
  mask:url(/assets/v2/type/icon-mask-8165275046.png) 0 0/16px 64px;
}
/* FAQ +/-: two-tone, light core and blue arms. */
.faq summary::after{background-image:url(/assets/v2/type/plus-24c6650fec.png)}
.faq details[open] summary::after{background-image:url(/assets/v2/type/minus-bf84f4793e.png)}
/* Guide arrows: the aria-hidden glyph becomes a 6x5 pixel arrow. */
.guide-links .pm{
  flex:none;align-self:flex-start;width:18px;height:15px;margin-top:5px;font-size:0;
  color:transparent;-webkit-text-fill-color:transparent;
  background:url(/assets/v2/type/arrow-87e7dde10a.png) 0 0/18px 15px no-repeat;
  image-rendering:pixelated;
}
.guide-links a:hover .pm{color:transparent}

/* Setapp badge plate: the dark-theme badge's black pill; the mark is a
   1px-cell PNG drawn by scripts/gen-dither-type.py. */
.setapp-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px 9px 11px;border-radius:11px;background:#000;
}
.setapp-badge:hover{background:var(--s2)}
.setapp-mark{width:28px;height:40px;image-rendering:pixelated}
.setapp-words{display:flex;flex-direction:column;line-height:1}
.setapp-on,.setapp-name{color:var(--tx)}
.setapp-on{font-size:10.5px;font-weight:600;line-height:13px;letter-spacing:0}
.setapp-name{font-size:19px;font-weight:700;line-height:24px;letter-spacing:-.025em}

@media (forced-colors:active){
  *{-webkit-text-fill-color:currentColor !important}
}