/* Truly: dusk indigo from its icon, amber from the lion's mane for the detection frame, cyan from its eyes used
   sparingly. Headlines in Apple's New York serif (the press and fact-checking voice), body in the system sans. */
.truly{--ink:#17142f;--panel:#221f47;--line:#ffffff1f;--text:#f2effa;--muted:#b3aed0;--amber:#f2a54a;--iris:#86e3f4;
  background:var(--ink);color:var(--text);font-family:-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif}
.truly h1,.truly h2,.truly h3{font-family:ui-serif,"New York",Georgia,serif;font-weight:500}
.truly nav{color:var(--muted)}
.truly a:focus-visible,.truly button:focus-visible{outline:3px solid var(--iris);outline-offset:5px}

/* Hero: the question inside a detection frame that closes in once on load. */
.t-hero{max-width:1000px;padding:56px 0 90px}
.t-app{display:flex;align-items:center;gap:16px;margin:0 0 44px;color:var(--muted);font-size:17px;line-height:1.35}
.t-app img{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 30px #00000066}
.t-app strong{display:block;color:var(--text);font-size:20px;font-weight:600}
.t-hero h1{position:relative;display:inline-block;font-size:clamp(46px,7.4vw,104px);line-height:1.04;letter-spacing:-.035em;margin:0 0 40px -.3em;padding:.22em .3em .26em}
.t-hero h1::before{content:"";position:absolute;inset:0;pointer-events:none;--l:clamp(20px,2.6vw,38px);--w:3px;
  background:
    linear-gradient(var(--amber) 0 0) left top/var(--l) var(--w),linear-gradient(var(--amber) 0 0) left top/var(--w) var(--l),
    linear-gradient(var(--amber) 0 0) right top/var(--l) var(--w),linear-gradient(var(--amber) 0 0) right top/var(--w) var(--l),
    linear-gradient(var(--amber) 0 0) left bottom/var(--l) var(--w),linear-gradient(var(--amber) 0 0) left bottom/var(--w) var(--l),
    linear-gradient(var(--amber) 0 0) right bottom/var(--l) var(--w),linear-gradient(var(--amber) 0 0) right bottom/var(--w) var(--l);
  background-repeat:no-repeat}
@media (prefers-reduced-motion:no-preference){.t-hero h1::before{animation:t-lock 1s cubic-bezier(.2,.75,.25,1) .25s both}}
@keyframes t-lock{from{inset:-34px -46px;opacity:0}45%{opacity:1}to{inset:0;opacity:1}}
.t-lede{max-width:600px;font-size:21px;line-height:1.55;color:var(--muted);margin-bottom:34px}
.t-get{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.t-get .app-store{margin:0}
.t-get p{margin:0;max-width:330px;font-size:15px;line-height:1.5;color:var(--muted)}
.t-search{display:none}
.store-blocked .t-search{display:inline}
.truly .escape{background:var(--panel);border-color:var(--line)}
.truly .escape ol{color:var(--text)}
.truly .escape h2{font-family:inherit;font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.35;margin-bottom:12px}

/* What Truly checks: real screens, each with its caption. */
.t-checks{padding:20px 0 110px}
.truly h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1.1;margin-bottom:40px}
.t-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.t-shots figure{margin:0}
.t-shots img{border:0;border-radius:24px;background:#f6f6f8;box-shadow:0 26px 60px #0000004d}
.t-shots figcaption{padding:20px 2px 0;color:var(--muted);font-size:16px;line-height:1.5}
.t-shots figcaption strong{display:block;color:var(--text);font-size:18px;margin-bottom:4px}

/* A real sequence, so it is numbered. */
.t-how{padding:0 0 110px}
.t-how ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 48px}
.t-how li{counter-increment:step;border-top:1px solid var(--line);padding-top:22px}
.t-how li::before{content:counter(step);display:block;font-family:ui-serif,"New York",Georgia,serif;font-size:44px;line-height:1;color:var(--amber);margin-bottom:16px}
.t-how h3{font-size:24px;margin-bottom:8px}
.t-how p{color:var(--muted);margin:0;max-width:330px}

.t-honest{display:grid;grid-template-columns:1fr 1.25fr;gap:24px 80px;background:var(--panel);border-radius:28px;padding:60px 56px;margin-bottom:110px}
.t-honest h2{margin:0}
.t-honest p{color:var(--muted);font-size:18px;line-height:1.6;max-width:560px}
.t-honest p:last-child{margin-bottom:0}
.t-honest a{color:var(--iris)}

.t-close{padding:0 0 110px;max-width:720px}
.t-close h2{margin-bottom:14px}
.t-close>p{color:var(--muted);font-size:19px}
.t-button{display:inline-flex;align-items:center;background:var(--amber);color:#24180a;font-weight:650;text-decoration:none;padding:14px 26px;border-radius:100px;margin:12px 0 26px}
.t-button:hover{background:#f6b768}
.store-blocked .store-link{display:none}
.t-close .small{color:var(--muted)}
.t-close .small a{color:var(--text)}
.truly footer{border-color:var(--line);color:var(--muted)}

@media (max-width:900px){
  .t-shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;margin:0 -24px;padding-left:24px;padding-right:24px;scroll-padding:24px}
  .t-shots figure{scroll-snap-align:start}
  .t-how ol{grid-template-columns:1fr}
  .t-honest{grid-template-columns:1fr;padding:40px 28px}
}
@media (max-width:600px){
  .t-hero{padding:32px 0 70px}
  .t-app{margin-bottom:30px}
  .t-hero h1{margin-left:-.2em;padding:.2em .2em .24em}
  .t-lede{font-size:19px}
  .t-checks,.t-how,.t-close{padding-bottom:80px}
  .t-honest{margin-bottom:80px}
}

/* Support and privacy pages */
.t-article .note{background:var(--panel);border-left-color:var(--amber);color:var(--text)}
.t-article a{color:var(--iris)}
.t-article h3{font-size:22px;margin-top:34px}
.t-article .t-button{color:#24180a;margin:6px 0 10px}
.t-article details{border-color:var(--line)}