/* Long reads: /learn, /help, /legal, /glossary, /blog, /press, /about, /how-it-works, /changelog, /trust, /works-with,
   /link, /contact, /what-trilly-does, and the /licence check ("On this page", the trust page's checks, the contact list, the licence card).
   Loaded after site.css, in the head, only on its own routes (Operations/AreaStyles.cs), so pages that
   don't use these rules never download them. Same tokens as site.css; no inline styles (CSP). Rules here were moved
   from site.css by page usage: a rule belongs here only when every page that uses it loads this file. */
.contact-address{font-style:normal}
small.fresh{display:block;margin-top:6px;font-size:var(--fs-small)}
.fresh-end{display:none;margin-top:24px}
/* On this page (long articles: legal, help, learn). Wide screens: a sticky list beside the text. Phones and tablets: a
   swipeable row of sections near the top, and a small "Contents" button that stays in the corner while you read the article
   (sticky inside it, so it never sits on the footer) and brings you back to the list. */
.toc-title{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);margin-bottom:8px}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc-list a{display:block;padding:6px 10px;border-radius:10px;color:var(--soft);text-decoration:none;font-size:var(--fs-small);line-height:1.35}
.toc-list a:hover{background:var(--mist);color:var(--navy)}
.toc-jump{display:none}
/* Hidden by js/site.js while "On this page" is on screen or below it (layout review pattern Q, G3-23, G4-02). */
.toc-jump.is-off{visibility:hidden}
@media (min-width:1100px){
  .article.has-toc{max-width:1090px;display:grid;grid-template-columns:minmax(0,760px) 250px;column-gap:56px;align-items:start}
  .article.has-toc>*{grid-column:1}
  .article.has-toc>.toc{grid-column:2;grid-row:1 / span 20;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding-left:14px;border-left:1px solid var(--line);margin-top:clamp(36px,5vw,64px)}
}
@media (max-width:1099px){
  .toc{margin-top:22px}
  .toc-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:2px clamp(16px,4vw,32px) 6px}
  .toc-list::-webkit-scrollbar{display:none}
  .toc-list li{flex:none}
  .toc-list a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--navy);white-space:nowrap}
  .toc-jump{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;width:max-content;margin:24px 0 0 auto;min-height:44px;padding:0 18px;border-radius:999px;background:var(--navy);color:var(--white);font-weight:500;font-size:var(--fs-small);text-decoration:none;box-shadow:var(--shadow)}
}
.guide-facts{background:var(--mist);border-radius:var(--r-sm);padding:14px 18px;max-width:var(--measure)}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){
  .check-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .check-grid{grid-template-columns:1fr}
}
/* One look for every check: equal items, so no rotating tints that mean nothing (layout review G6-15, pattern R). */
.check-grid .check{display:block;border:1px solid var(--line);border-radius:20px;padding:18px 20px;background:var(--white)}
.check-grid .check b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700}
.check-grid .check p{margin-top:6px;font-size:var(--fs-body)}
.badge-list,.number-list{margin:0;display:grid;gap:12px;max-width:var(--measure)}
.badge-list div,.number-list div{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line)}
@media (max-width:600px){
  .badge-list div,.number-list div{grid-template-columns:1fr;gap:4px}
}
.number-list dt{font-family:var(--display);font-weight:700;color:var(--navy)}
.badge-list dd,.number-list dd{margin:0}
.maths summary{cursor:pointer;color:var(--navy);font-weight:500}
.maths pre{font-family:var(--body);background:var(--mist);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;font-size:var(--fs-small);margin-top:10px}
/* What Trilly does (#109): one plain line per capability, grouped by who it's for, each with the page that explains it. */
.cap-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cap-jump .pill{border:1px solid var(--line);min-height:44px;display:inline-flex;align-items:center}
/* Each group ends where its rows end: one rule, not a dashed line and then a longer solid one (G6-31). */
.cap-group{padding-block:26px;border-top:1px solid var(--line);scroll-margin-top:90px;max-width:880px}
.cap-head{display:flex;gap:14px;align-items:center}
.cap-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px}
.cap-icon svg{width:36px;height:36px}
.cap-head p{margin-top:4px;max-width:64ch}
.cap-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;max-width:880px}
.cap-list li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cap-list li span{flex:1 1 420px;min-width:0}
.cap-list li:last-child{border-bottom:0;padding-bottom:0}
.cap-list li a{font-size:var(--fs-small);font-weight:500}
.cap-soon li span{color:var(--soft)}
/* /how-it-works "You choose": the five things a skill can do, with their icons (SkillAbilities). */
.ability-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.ability-list li{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-radius:var(--r-sm);padding:14px 16px}
.ability-list svg{flex:none;width:36px;height:36px}
.ability-list p{margin-top:4px;font-size:var(--fs-body)}
/* One reading width, and dated entries apart from each other (layout review G1-08, G1-09). */
.changelog{gap:32px;max-width:var(--measure)}
.changelog h2{font-size:var(--h3)}
.changelog ul{padding-left:20px;display:grid;gap:4px;list-style:disc}
/* ---- Link your AI: /link and /link/{app} (#136, audit A-02, A-08). Trilly's address is a _CopyBox (site.css). ---- */
/* The help centre (the calm-site review, help fix 12): plain lists of links, the topics in columns, the app guides by name. */
ul.help-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.help-links a{font-weight:500;color:var(--navy)}
.help-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:24px 32px}
ul.help-apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px}
.help-apps a{font-weight:500;color:var(--navy)}
@media (max-width:600px){ul.help-apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* .link-apps lives in site.css: onboarding's last step uses it too. */
/* /link's apps as a list (the calm-site review, link fix 13): one row each, its name and line, then "See the steps". */
ul.link-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.link-list .guide-card{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 18px;border-width:1px}
.link-list .guide-card .guide-go{margin-left:auto;margin-top:0;padding-top:0}
.trouble-list{margin:0;display:grid;gap:4px;max-width:var(--measure)}
.trouble-list dt{font-weight:600;color:var(--navy)}
.trouble-list dt:not(:first-child){margin-top:12px}
.trouble-list dd{margin:0}

/* ========== Anti-sharing (requirement #62): /licence, check a licence. The seal is in site.css. ========== */
.licence-page .page-head .lead{max-width:56ch}
.licence-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,4vw,28px);background:var(--white)}
.licence-card.is-valid{border-color:var(--good)}
.licence-card.is-paused{border-color:var(--bad);background:var(--apricot)}
.licence-card.is-unknown{border-style:dashed}
.licence-body{flex:1;min-width:0}
.licence-status{display:inline-flex;align-items:center;border-radius:999px;padding:3px 12px;font-size:var(--fs-small);font-weight:600;background:var(--mist);color:var(--navy)}
.is-valid .licence-status{background:var(--mint);color:var(--good)}
.is-paused .licence-status{background:var(--white);color:var(--bad)}
.licence-number{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:var(--h3);font-weight:700;letter-spacing:.02em;margin-top:8px;overflow-wrap:anywhere}
.licence-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 20px;margin:16px 0 0}
.licence-facts div{min-width:0}
.licence-facts dt{font-size:var(--fs-small);color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
.licence-facts dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.licence-facts a{color:var(--navy)}
.licence-form{display:grid;gap:8px}
.licence-form label{font-weight:500;color:var(--navy)}
.licence-form-row{display:flex;gap:10px;flex-wrap:wrap}
.licence-form input{flex:1 1 220px;min-width:0;min-height:48px;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:var(--fs-body);color:var(--ink);background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);padding:10px 14px}
.licence-form input:focus{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.licence-form .btn{min-height:48px}
.licence-form .hint{font-size:var(--fs-body);color:var(--soft)}
.licence-more ul{margin-inline:0;margin-bottom:0;padding-left:20px;display:grid;gap:6px}   /* keeps its mt-2 gap under the heading */
@media (max-width:520px){.licence-card{flex-direction:column;gap:12px}}
/* ========== end anti-sharing ========== */
/* ========== #173: the trust pages show before they explain (the site audit's items #7 and #8) ========== */
/* /trust/how-we-test: the skills that passed, their total in one line over the table. */
.proof-results{max-width:var(--measure)}
.proof-total{font-weight:500;color:var(--navy);max-width:var(--measure)}
/* /trust/how-stats-work: the stat block as a labelled example first, then the rules, each folded under its heading. */
.stats-example{margin:0;max-width:var(--measure)}
.stats-example figcaption{margin-top:0}
.stats-rules{max-width:var(--measure);border-top:1px solid var(--line)}
.stats-rule{border-bottom:1px solid var(--line);padding:12px 0}
.stats-rule>summary h2{font-size:var(--h3)}
.stats-rule[open]>summary{margin-bottom:8px}
/* /how-it-works: the download guides, folded under their heading. */
.guides-fold>summary{min-height:44px}
/* ========== end #173 ========== */

/* ===== Calm batch G (#176, #190): a link guide (/link/{app}), shown not told. The steps first, step 1's one press on the first
   screen; beside them on a wide screen, a picture of the same steps and what this plan needs; troubles as folds. ===== */
.lk-page{padding-bottom:96px}
.lk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:64px;align-items:start;margin-top:24px}
.lk-head h1{font-size:var(--h1-hero);letter-spacing:-.03em}
.lk-lead{margin-top:16px;font-size:var(--h3);line-height:1.45;color:var(--soft);max-width:34em}
/* Who can use a guide, and what Trilly has done with the app, under the h1 and on /link's rows at every width (the lead's ruling
   on the design review, /link items 1 and 2). */
.lk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lk-tag{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:999px;background:var(--mist);color:var(--navy);font-size:var(--fs-small);font-weight:500;line-height:1.3}
.lk-tag-tried{background:var(--mint)}
.lk-tag-untried{background:var(--cream)}
.lk-note{margin-top:12px;color:var(--soft);max-width:var(--measure)}
.lk-address{margin-top:32px}
.lk-steps-sec{margin-top:40px}
.lk-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lk-steps > li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:24px;border-radius:var(--r-lg);background:var(--mist)}
.lk-steps > li:first-child{background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -32px rgba(13,44,84,.3)}
.lk-n{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--navy);color:var(--marigold);font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1}
.lk-main{min-width:0}
.lk-step-body{display:grid;gap:8px;min-width:0}
.lk-step-t{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy);line-height:1.25}
.lk-see{color:var(--soft)}
.lk-pic-step{display:none}
/* The box a step opens, beside the steps or in one, and a help article's picture: a field's name stays whole, and a long value
   wraps under it. */
.lk-pic-step .pic-fld,.lk-pic .pic-fld,.hp-article-pic .pic-fld{flex-wrap:wrap}
.lk-pic-step .pic-text,.lk-pic .pic-text,.hp-article-pic .pic-fld .pic-text{flex:none}
.lk-pic-step .pic-value,.lk-pic .pic-value,.hp-article-pic .pic-fld .pic-value{min-width:0;margin-left:auto;white-space:normal;overflow-wrap:anywhere;text-align:right}
.lk-then{margin-top:20px;max-width:var(--measure)}
.lk-steps-sec .lk-note{margin-top:16px}
.lk-fold{margin-top:24px;border-bottom:1px solid var(--line)}
.lk-trouble{margin-top:56px}
.lk-trouble h2{margin-bottom:12px}
.lk-folds{display:grid;margin-bottom:16px}
.lk-folds > .sk-fold:last-child{border-bottom:1px solid var(--line)}
.lk-others{margin-top:40px}
.lk-others-h{font-weight:600;color:var(--navy)}
.lk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lk-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;color:var(--navy);text-decoration:none;font-weight:500}
.lk-chip:hover{border-color:var(--navy)}
.lk-side{position:sticky;top:96px;display:grid;gap:24px}
.lk-pic{padding:32px 28px}
/* Trilly's link screen, drawn in the step where it opens, at every width (the design review, /link item 6). */
.lk-pic-consent{margin-top:12px;padding:28px 24px;border-radius:var(--r-lg)}
.lk-needs{margin-top:40px;padding:24px;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line)}
.lk-needs ul{margin:10px 0 12px;padding-left:20px;display:grid;gap:6px}
@media (max-width:940px){
  .lk-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .lk-side{display:none}
  .lk-pic-step{display:block;margin-top:8px;padding:28px 20px;border-radius:var(--r-lg)}
}
@media (max-width:760px){
  .lk-head h1{font-size:var(--h1)}
  .lk-lead{display:none}
  /* A phone's step card: the number beside the title only, and the step's words, boxes and pictures the card's full width (the
     design review, /link item 5: Claude's step 1 took 8 lines in the column beside the number). */
  .lk-steps > li{grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding:18px 16px;border-radius:22px}
  .lk-steps .lk-step-body{display:contents}
  .lk-steps .lk-step-body > *{grid-column:1 / -1}
  .lk-steps .lk-step-body > .lk-step-t{grid-column:2;grid-row:1;align-self:center}
  .lk-n{width:32px;height:32px;border-radius:10px;font-size:var(--fs-body);align-self:center}
  .lk-pic-consent{padding:20px 14px;border-radius:22px}
  .lk-pic-step{padding:20px 14px;border-radius:22px}
  /* On /link, each row is its link: the arrow says where it goes; the words stay for screen readers (the phone's word budget). */
  .lk-pick .guide-go-words{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* A phone's rows are the app and Trilly's tried tag; who can use it is each guide's first line, under its h1 (round seven's
     pre-check: a fifth row's line took /link to 87 words at 375 and 390). */
  .lk-pick .lk-who{display:none}
}

/* /link: the apps first, under the h1, beside linking at work; then the shared steps and what linking does as three tiles (calm
   batch G; the lead's ruling). */
.lk-index-head{margin-top:24px}
.lk-index-top{margin-top:0}
.lk-iya{margin-top:72px}
.lk-why,.lk-pick{margin-top:64px}
.lk-why h2,.lk-pick h2{margin-bottom:20px}
/* A linked person's apps, folded under "Link another app" (the g10-rest-3 re-check, L5): close under the note, not 64 px down. */
.lk-pick-folded{margin-top:24px}
/* What linking does as a film (#235, film 3): the film at the page's width (its words never under 12 px: 1088 px wide at 1160, and
   888 at 1024, where they are 12.0 px: AfterFilmTests works it out from .wrap, .film-card and .film-mat), its five chapters in a row
   under it from 1024 px, where the wide cut starts and the row is as wide as the film; under 1024 a list as wide as the 536 px card
   above it (the link-film review, M2: from 761 the row of five ran 168 px past the card), then the privacy line the film never shows. */
.lk-film{display:grid;gap:16px}
@media (min-width:1024px){.lk-film .film-ch{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:561px) and (max-width:1023px){.lk-film .film-ch{max-width:536px}}
/* 561 to 1023 px: the film's 536 px card from the text's left edge, never centred under it (as /enterprise's hero). A phone (to 560 px):
   the card is its column's width with no padding inside, so the 4:5 frame lines up with the text at the full 16 px gutter and its
   smallest words stay 12 px and up (343 px at 375, 328 at 360, 310 at 342); only under 342 px it's pinned at 310 px and centred on
   the column (11 px into each gutter at 320, under 1 at 341), as the learn guide's tall film. The column's 100%, never 100vw. */
@media (min-width:561px) and (max-width:1023px){.lk-film .film-card{margin-inline:0}}
@media (max-width:560px){
  .lk-film .film-card{padding:0;border-radius:16px}
  .lk-film .film-mat{padding:0}
}
@media (max-width:341px){.lk-film .film-card{width:310px;max-width:none;margin-inline:calc((100% - 310px)/2) 0}}
.lk-private{display:flex;gap:14px;align-items:flex-start;max-width:44rem;margin:28px 0 0;line-height:1.5}
.lk-private svg{width:30px;height:30px;flex:none}
.lk-private b{font-weight:500;color:var(--navy)}
.lk-pick .link-list{max-width:760px}
.lk-pick .link-list .guide-card,.prose .hp-app-rows .guide-card{display:flex;align-items:center;min-height:72px;padding:16px 24px;border-radius:20px}
.lk-pick .link-list .guide-card .guide-go::after,.prose .hp-app-rows .guide-go::after{content:" \2192"}
/* A help article's "Pick your app": /link's app rows (the design review, help item 6). */
.prose .hp-app-rows{list-style:none;padding:0;gap:8px;max-width:760px}
/* Motion, as the skill page's (the design review, across the family): each long section rises as it comes into view, in CSS only
   (site.css's rise), at rest where scroll timelines aren't supported or motion is reduced; never step 1 or the way in. Under the
   pointer an app row, which is a link, darkens its edge and casts a soft shadow, as the skill card does (nothing lifts on hover,
   CALM-6); a topic tile isn't a link, so it stays still. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lk-why,.lk-trouble,.lk-page .lk-needs,.hp-sec,.article-help .article-body > :is(h2,.hp-app-rows,.help-app-folds){animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@media (hover:hover){
  .lk-pick .link-list .guide-card:hover,.prose .hp-app-rows .guide-card:hover{border-color:var(--navy);box-shadow:0 12px 24px -16px rgba(13,44,84,.35)}
}
.lk-index-top .lk-pick{margin-top:32px}
.lk-pick .guide-card .lk-tag{min-height:26px;padding:2px 10px}

/* ===== Calm batch G (#176, #190): the help centre and a help article in the v2 look. ===== */
.hp-page{padding-bottom:96px}
.hp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:24px}
.hp-top h1{font-size:var(--h1-hero);letter-spacing:-.03em}
.hp-lead{margin:16px 0 8px;font-size:var(--h3);line-height:1.45;color:var(--soft)}
.hp-top-copy{min-width:0}
.hp-scene,.hp-article-scene{margin:0}
.hp-scene img,.hp-article-scene img{display:block;width:100%;height:auto}
.hp-sec{margin-top:72px}
.hp-sec > h2{margin-bottom:20px}
.hp-iya{max-width:var(--measure)}
.hp-more{margin-top:12px}
/* ul.hp-rows, so the 56 px column gap beats ul.help-links' 6 px (the design review: the arrow touched the next column). */
ul.hp-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.hp-rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.hp-rows a .ui-ico{width:16px;height:16px;flex:none;color:var(--soft)}
.hp-rows a:hover span{text-decoration:underline}
/* The topics as one grid of equal tiles, each with its icon and a title at h3 size (the design review, help item 4; monday's and
   Stripe's help): four a row on a wide screen, two from 600 px, one on a phone, every tile in a row as tall as the tallest (the design
   sweep, group E: the flex row stretched its last tiles wider than the rest, and "More answers" held one makers' article). */
.hp-sec.hp-topics-sec{margin-top:48px}
.hp-topics{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
@media (min-width:600px){.hp-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hp-topics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hp-topic{min-width:0;padding:24px;border-radius:var(--r-lg);background:var(--mist)}
.hp-topic-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--white);margin-bottom:12px}
.hp-topic-ic svg{width:30px;height:30px}
.hp-topic h3{font-size:var(--h3)}
.hp-topic .help-links{margin-top:10px;display:grid;gap:8px}
.hp-topic .help-links a{font-weight:500;text-decoration:none}
.hp-topic .help-links a:hover{text-decoration:underline}
.hp-page .help-apps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hp-page .help-apps a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.hp-page .help-apps a:hover{border-color:var(--navy)}
.hp-tech{margin-top:16px;max-width:var(--measure);border-bottom:1px solid var(--line)}
.hp-close{margin-top:80px;display:grid;justify-items:start;gap:12px;padding:48px;border-radius:40px}
.article-help .article-head h1{letter-spacing:-.03em}
.article-help .hp-article-scene{margin:24px 0;max-width:440px}
/* A help article's picture: the screen its answer is about (HelpPictures), as the link guides draw theirs. */
.hp-article-pic{margin:24px 0 28px;max-width:440px;padding:32px 28px}
/* A help article's per-app checks, one fold each (HelpFolds), as the link guides' troubles. */
.help-app-folds{display:grid;margin-top:12px}
.help-app-folds > .sk-fold:last-child{border-bottom:1px solid var(--line)}
.help-app-fold{scroll-margin-top:96px}   /* a link to an app's checks lands below the sticky header */
.hp-article-pic .pic-stack{max-width:360px}
/* A help article's code (trilly.json, a folder path) wraps, so it never needs a sideways scroll a keyboard can't reach (axe). */
.article-help .prose pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
.article-help .prose pre code{overflow-wrap:anywhere}
.article-help .answer-box,.hp-page .answer-box{background:none;border-left:4px solid var(--marigold);border-radius:0;padding:4px 0 4px 20px;font-size:var(--h3);line-height:1.45}
.article-help .panel{border:0;border-radius:var(--r-lg);background:var(--cream);padding:28px;margin-bottom:48px}
@media (max-width:760px){
  .hp-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .hp-top h1{font-size:var(--h1)}
  .hp-lead{font-size:var(--fs-body)}
  .hp-scene{order:-1;max-width:320px}
  ul.hp-rows{grid-template-columns:minmax(0,1fr)}
  .hp-close{padding:28px 20px;border-radius:var(--r-lg)}
  .article-help .answer-box,.hp-page .answer-box{font-size:var(--fs-body)}
  .article-help .answer-box.answer-lead{font-size:var(--h3);line-height:1.4}
  .article-help .fresh-head{display:none}
  .article-help .fresh-end{display:block}
  .hp-article-pic{margin:20px 0;padding:20px 16px 22px;border-radius:24px}
}
/* A help article's table on a phone, each row a card: its first cell in v2's weight (700), not the cards' usual 800. */
@media (max-width:640px){
  .article-help .stack-table tr>:first-child{font-family:var(--display);font-weight:700}
}

/* v2's type on the link guides and the help centre (batch G, #190; BRAND.md rule 6): h1 700, h2 and h3 600 at -.02em, and nothing
   else in the heading font over 700 (the design pre-check). */
.lk-page h1,.hp-page h1,.article-help h1{font-weight:700;letter-spacing:-.02em}
.lk-page h2,.lk-page h3,.hp-page h2,.hp-page h3,.article-help h2,.article-help h3{font-weight:600;letter-spacing:-.02em}
.lk-page .h3,.hp-page .h3,.article-help .h3,.lk-page .lk-step-t,.lk-page fieldset.group legend,.hp-page .h-sm,.article-help .toc-title,.article-help .link-mesh h2,.article-help .link-mesh h3{font-family:var(--display);font-weight:600}
.hp-page .idp-guide > summary{font-family:var(--display);font-weight:600}
.lk-page .lk-n,.lk-page .guide-card b,.lk-page .iya-word,.hp-page .iya-word,.lk-page .avatar,.hp-page .avatar{font-family:var(--display);font-weight:700}
.lk-page .iya-steps>li::before,.hp-page .iya-steps>li::before,.article-help ol.steps>li::before{font-family:var(--display);font-weight:700}
/* A help article's numbered steps as cards, each number big (batch G: like the link guides' steps), so the steps read as steps */
.article-help .article-body > ol{list-style:none;padding:0;counter-reset:hp-step;gap:12px;margin-top:16px}
.article-help .article-body > ol > li{counter-increment:hp-step;position:relative;min-height:76px;padding:18px 22px 18px 76px;border-radius:20px;background:var(--mist)}
.article-help .article-body > ol > li::before{content:counter(hp-step);position:absolute;left:18px;top:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--navy);color:var(--marigold);font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1}
@media (max-width:760px){
  .article-help .article-body > ol > li{padding:16px 16px 16px 64px;border-radius:18px}
  .article-help .article-body > ol > li::before{left:14px;top:16px;width:36px;height:36px;border-radius:12px}
}
/* A guide's one button inside its words (the move guides' converter, the gpt-to-skill review, L12): .prose a would make its words navy. */
.prose a.btn-go{color:var(--white)}

/* The press kit (/press; REMAINING 3.34, package 9): the press contact under the paragraph to quote, the logo as the head's picture
   with its files, the two brand colours as swatches, Trilly's drawings in a grid, and the newest changes as dated lines. */
.press-ask{margin-top:16px;max-width:var(--measure)}
.press-logo .tc-pic-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.press-logo img{display:block;width:120px;height:120px}
.press-files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.press-files a,.press-drawings a,.press-news a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.press-colours{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 32px}
.press-colours li{display:flex;align-items:center;gap:12px}
.press-colours b{font-weight:500;color:var(--navy)}
.press-swatch{display:block;width:44px;height:44px;border-radius:14px;border:1px solid var(--line)}
.press-navy{background:var(--navy)}
.press-marigold{background:var(--marigold)}
.press-drawings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:24px}
.press-drawings img{display:block;width:100%;height:auto;border-radius:18px;background:var(--ice)}
.press-drawings p{margin-top:10px}
.press-news{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:var(--measure)}
.press-news time{display:block;color:var(--soft);font-size:var(--fs-small)}