/* public.css - the public pages' own rules, from the public prototype. Scoped under html.tsa like
   the core sheets; loaded only by the pages that extend _public_base.html (tsa_css block). */
/* --------------------------------------------------- public pages ---- */
/* From public.template.html, for the six routes: about, training, support,
   feedback, privacy, terms. Three modes, not one design: About persuades;
   Training, Support and the two policies are read; Feedback is a task.
   The words are the live templates' own (the prototype's were extracted
   from them verbatim) - only emoji used as icons became drawn icons.
   Changes from the prototype, each for a reason:
   - names core.css already uses are renamed: .hero is .phero (core's is a
     flex row of figures), .lead is .plead, a plan's .tag is .ptag; the form
     fields are scoped to .pform
   - no entrance: the prototype's hero pieces rose and faded in, staggered,
     over ~1s, and on every page load that read as styling arriving late
     (staging, 2026-10-02) - the hero is simply there
   - the policies' warning boxes are kept, as .callout: the prototype's
     extraction dropped the box and kept the words
   - buttons are core's .btn at the shared control height; .btn-lg is new
   - a video is a link to YouTube until the script swaps in the player, so
     with no script it still plays */
/* 68ch in Montserrat measured ~94 characters a line (impeccable detect,
   line-length); 56ch is ~77 */
:root{--read:56ch;}
.tsa main.pubmain{flex:1 0 auto; min-width:0;}
.tsa .shell{width:min(var(--shell,1180px),100% - 3rem); margin-inline:auto;}
@media(max-width:640px){
  .tsa .shell{width:min(var(--shell,1180px),100% - 2rem);}
  /* the visitor's bar lines its logo up with this gutter (shell.css) */
  html.tsa{--tsa-gutter:1rem;}
}
.tsa .pubflash{padding-top:22px;}
.tsa .pubflash .alerts{margin-bottom:0;}
.tsa .btn-lg{height:52px; padding:0 30px; font-size:.95rem;}
.tsa .btn-wide{width:100%;}
/* ---- bands ---- */
.tsa .band{padding:clamp(50px,6.5vw,96px) 0;}
.tsa .band-alt{background:var(--surface); border-block:1px solid var(--line);}
.tsa .band > .shell > header{max-width:760px; margin-inline:auto; text-align:center;
                        margin-bottom:clamp(30px,3.6vw,46px);}
.tsa .band header h2{font-size:clamp(1.5rem,3vw,2.05rem); letter-spacing:-.03em; line-height:1.15; text-wrap:balance;}
.tsa .band header p{color:var(--muted); margin:12px auto 0; font-size:1rem; max-width:62ch;}
/* a ruled list, not a grid of same-size cards */
.tsa .list{display:grid; column-gap:clamp(30px,4.5vw,68px); grid-template-columns:repeat(2,minmax(0,1fr));}
.tsa .item{padding:clamp(20px,2.4vw,28px) 0; border-top:1px solid var(--line);}
@media(min-width:901px){
  .tsa .list > .item:nth-child(-n+2){border-top:0; padding-top:0;}
}
@media(max-width:900px){
  .tsa .list{grid-template-columns:minmax(0,1fr);}
  .tsa .list > .item:first-child{border-top:0; padding-top:0;}
}
/* inside the min-width query: declared after the max-width rule at equal
   specificity, .list-3 kept three 76px columns on a 320px phone */
@media(min-width:901px){
  .tsa .list-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tsa .list-3 > .item:nth-child(-n+3){border-top:0; padding-top:0;}
}
/* the heading text needs its own box: a bare text node in a flex row cannot
   shrink, and "More Coming Soon" ran past a 320px phone */
/* h2 in a page's first list (nothing above it but the h1), h3 under a band's
   own h2 - one look either way, so the outline has no skipped level */
.tsa .item :is(h2,h3){display:flex; align-items:flex-start; gap:12px; font-size:1.04rem; text-wrap:pretty;
                 letter-spacing:-.02em; line-height:1.3;}
.tsa .item :is(h2,h3) i{color:var(--accent); font-size:1.18rem; flex:none; line-height:1.3;}
.tsa .item :is(h2,h3) > span{min-width:0;}
.tsa .item p{color:var(--muted); font-size:.94rem; margin-top:10px; max-width:54ch;}
.tsa .item .go{display:inline-flex; align-items:center; gap:7px; margin-top:10px;
          min-height:44px; font-size:.86rem; font-weight:700;}
/* ---- hero ---- */
.tsa .phero{padding:clamp(48px,6.5vw,88px) 0 clamp(40px,5vw,64px); text-align:center;
       position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.tsa .phero::before{content:""; position:absolute; left:50%; top:-45%; translate:-50% 0;
               width:min(880px,120vw); aspect-ratio:1; pointer-events:none;
               background:radial-gradient(circle,rgba(0,200,150,.12),transparent 62%);}
.tsa .phero .shell{position:relative;}
.tsa .phero h1{font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.03em; line-height:1.15; text-wrap:balance;}
.tsa .phero .plead{color:#C3CCDA; font-size:clamp(1.02rem,1.5vw,1.14rem); margin:20px auto 0;
              max-width:56ch; text-wrap:pretty;}
.tsa .phero .acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
/* ---- pricing: a comparison, so aligned columns ---- */
.tsa .plans{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch;}
@media(max-width:1000px){
  .tsa .plans{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .tsa .plans{grid-template-columns:minmax(0,1fr);}
}
.tsa .plan{display:grid; grid-template-rows:auto auto auto 1fr auto; border:1px solid var(--line);
      border-radius:16px; padding:clamp(20px,2.2vw,26px); background:var(--surface); position:relative;}
.tsa .plan.on{border-color:rgba(0,200,150,.5); background:rgba(0,200,150,.045);}
.tsa .plan .pn{display:flex; align-items:center; gap:9px; font-size:.95rem; font-weight:800;}
.tsa .plan .pn i{color:var(--accent);}
.tsa .plan .pp{font-size:2rem; font-weight:800; letter-spacing:-.04em; margin-top:12px; line-height:1;}
.tsa .plan .pp span{font-size:.92rem; font-weight:600; color:var(--muted); letter-spacing:0;}
.tsa .plan .pnote{color:var(--muted); font-size:.78rem; margin-top:6px;}
.tsa .plan ul{margin:18px 0 20px; display:grid; gap:9px;}
.tsa .plan li{display:flex; gap:9px; font-size:.86rem; color:#C3CCDA; align-items:flex-start;}
.tsa .plan li i{color:var(--accent); font-size:.9rem; flex:none; margin-top:.22em;}
.tsa .plan li.off{color:var(--muted);}
.tsa .plan li.off i{color:#5A6A82;}
/* what a plan does not include */
.tsa .band header h2 i{color:var(--accent);}
.tsa .plan .ptag{position:absolute; top:-1px; right:14px; transform:translateY(-50%);
            padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:800;
            letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink);}
/* "Start Free - First 2 Months On Us" is 33 characters; .btn does not wrap,
   so four columns pushed the page wider than the window */
.tsa .plan .btn{white-space:normal; text-align:center; line-height:1.34; height:auto;
           min-height:var(--ctl); padding:10px 14px;}
.tsa .addon{margin-top:20px; display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line);
       border-radius:16px; padding:16px 18px; background:var(--surface);}
.tsa .addon i{color:var(--accent); font-size:1.1rem; margin-top:.15em;}
.tsa .addon strong{font-size:.92rem;}
.tsa .addon span{color:var(--muted); font-size:.87rem;}
/* ---- training: a picture of the video until it is asked for ---- */
.tsa .vids{display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));}
.tsa .vid{margin:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface);}
.tsa .vthumb{position:relative; aspect-ratio:16/9; width:100%; display:block; cursor:pointer;
        background:#0B1220 center/cover no-repeat;}
.tsa .vthumb::after{content:""; position:absolute; inset:0; background:rgba(6,10,20,.42); transition:background .15s;}
.tsa .vthumb:hover::after{background:rgba(6,10,20,.24);}
/* The card clips its corners (overflow:hidden), which clipped an outline;
   drawn inside, the picture's dark overlay sat on top of it. The overlay
   draws the ring itself, on top, and lightens. */
.tsa .vthumb:focus-visible{outline:none;}
.tsa .vthumb:focus-visible::after{background:rgba(6,10,20,.2);
  box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--ground);}
.tsa .vplay{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2; width:58px; height:58px;
       border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink);
       font-size:1.4rem; box-shadow:0 10px 30px rgba(0,0,0,.5);}
.tsa .vid iframe{display:block; width:100%; aspect-ratio:16/9; border:0;}
.tsa .vid .cap{padding:16px 18px;}
.tsa .vid .cap h3{font-size:.98rem;}
.tsa .vid .cap p{color:var(--muted); font-size:.89rem; margin-top:7px;}
.tsa .vgroup + .vgroup{margin-top:clamp(44px,5vw,72px);}
.tsa .vgroup > h2{display:flex; align-items:center; gap:11px; font-size:1.12rem; margin-bottom:24px;}
.tsa .vgroup > h2 i{color:var(--accent);}
/* ---- FAQ: <details>, so it opens with no script and Ctrl-F finds a
   closed answer in Chrome ---- */
.tsa .faq{border-top:1px solid var(--line); max-width:var(--read); margin-inline:auto;}
.tsa .faq details{border-bottom:1px solid var(--line);}
.tsa .faq summary{list-style:none; cursor:pointer; padding:18px 40px 18px 0; font-weight:700;
             font-size:.98rem; position:relative;}
.tsa .faq summary::-webkit-details-marker{display:none;}
/* the plain content first: Safari before 17.4 and Firefox before 128 drop a
   declaration with alt text ("/ """), and kept no chevron at all */
.tsa .faq summary::after{content:"\f282"; content:"\f282" / ""; font-family:"bootstrap-icons"; position:absolute; right:6px; top:50%;
                    translate:0 -50%; color:var(--muted); font-size:.9rem; transition:transform .2s;}
.tsa .faq details[open] summary::after{transform:rotate(180deg);}
.tsa .faq summary:hover{color:var(--accent);}
.tsa .faq .ans{padding:0 0 20px; color:var(--muted); font-size:.94rem; max-width:var(--read);}
.tsa .faq .ans strong{color:#C3CCDA;}
/* ---- forms: one surface per form ---- */
.tsa .pform{max-width:640px; margin-inline:auto; background:var(--surface); border:1px solid var(--line);
       border-radius:16px; padding:clamp(24px,3vw,36px);}
.tsa .pform .who{color:var(--muted); font-size:.88rem;}
.tsa .pform .who b{color:var(--text); overflow-wrap:anywhere;}
.tsa .pform .field{margin-top:18px; gap:8px;}
.tsa .pform .field:first-child, .tsa .pform .row2:first-child{margin-top:0;}
.tsa .pform .field label, .tsa .pform .field .lbl{color:var(--text); font-size:.84rem; font-weight:700;}
.tsa .pform .field .opt{color:var(--muted); font-weight:600;}
.tsa .pform .field .req{color:var(--neg);}
.tsa .pform .field :is(input,textarea){width:100%; font-family:inherit; font-size:.95rem; font-weight:500;
       color:var(--text); background:#0C1421; border:1px solid var(--line-2); border-radius:var(--r-control);
       padding:0 15px; transition:border-color .15s, box-shadow .15s, background .15s;}
.tsa .pform .field input{height:var(--ctl);}
.tsa .pform .field textarea{min-height:150px; padding:13px 15px; resize:vertical; line-height:1.6;}
.tsa .pform .field input[readonly]{color:var(--muted); background:rgba(255,255,255,.02);}
/* core's placeholder colour measured under 4.5:1 on this field */
.tsa .pform .field ::placeholder{color:#7B8799;}
.tsa .pform .field :is(input,textarea):hover{border-color:#3C5170;}
.tsa .pform .field :is(input,textarea):focus{outline:none; border-color:var(--accent); background:#0D1826;
       box-shadow:0 0 0 3px rgba(0,200,150,.16);}
.tsa .pform .help{margin-top:0;}
/* two short fields share one row; both halves share one top margin */
.tsa .row2{display:grid; gap:0 clamp(16px,2vw,22px); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px;}
.tsa .row2 > .field{margin-top:0;}
@media(max-width:620px){
  .tsa .row2{grid-template-columns:minmax(0,1fr);}
  .tsa .row2 > .field + .field{margin-top:18px;}
}
.tsa .formfoot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
          margin-top:28px; padding-top:22px; border-top:1px solid var(--line);}
.tsa .formfoot .note{color:var(--muted); font-size:.83rem; display:flex; align-items:flex-start; gap:8px;
                flex:1 1 260px; max-width:46ch;}
.tsa .formfoot .note i{color:var(--accent); margin-top:.2em;}
/* the categories as choices you can see, each with its own description */
.tsa .cats{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.tsa .pform .cat{display:flex; align-items:flex-start; gap:13px; padding:14px 16px; cursor:pointer;
     border:1px solid var(--line-2); border-radius:var(--r-control); background:#0C1421;
     font-size:.9rem; font-weight:700; color:var(--text); transition:border-color .14s, background .14s;}
.tsa .cat i{color:var(--muted); font-size:1.05rem; line-height:1.35; flex:none;}
/* the radio itself is hidden in its card. More specific than the field rule
   above, which gave it width:100% - absolutely placed, that was the whole
   window, and the page scrolled 747px sideways. The card holds it. */
.tsa .pform .cat{position:relative;}
.tsa .pform .field .cat input{position:absolute; left:0; top:0; opacity:0; width:1px; height:1px;
                         padding:0; border:0; margin:0;}
.tsa .cat .what{display:block; margin-top:3px; font-size:.82rem; font-weight:500; color:var(--muted); line-height:1.45;}
.tsa .pform .cat:hover{border-color:#3C5170;}
/* the choice shown by a tick as well as colour: in Windows High Contrast the
   border and background are overridden, and four identical cards hid which
   one was chosen */
/* its space kept when hidden: shown by display, it took ~30px from the text
   and the chosen card grew a line, moving the others */
.tsa .cat .tick{visibility:hidden; margin-left:auto; color:var(--accent); font-size:1.05rem; flex:none;}
.tsa .cat:has(input:checked) .tick{visibility:visible;}
.tsa .pform .cat:has(input:checked){border-color:rgba(0,200,150,.55); background:rgba(0,200,150,.08);}
.tsa .cat:has(input:checked) i{color:var(--accent);}
.tsa .cat:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
/* the categories are a fieldset, so the group has its name for free */
.tsa .pform fieldset.field{border:0; padding:0; margin-inline:0; min-width:0;}
.tsa .pform legend.lbl{padding:0; margin-bottom:8px;}
/* ---- the policies: read mode, with their shape visible ---- */
/* Title, contents, sections - in that order in the page, so a phone and a
   screen reader get the contents after the title; on a wide screen the
   contents sit in their own column beside the sections. */
.tsa .doc{display:grid; grid-template-columns:minmax(0,1fr) 250px; column-gap:clamp(30px,5vw,64px); align-items:start;}
.tsa .doc .dhead{grid-column:1 / -1; max-width:var(--read);}
.tsa .doc .toc{grid-column:2; grid-row:2; margin-top:clamp(34px,4vw,56px);}
.tsa .doc .dbody{grid-column:1; grid-row:2; min-width:0; max-width:var(--read);}
@media(max-width:940px){
  .tsa .doc{grid-template-columns:minmax(0,1fr);}
  .tsa .doc .toc, .tsa .doc .dbody{grid-column:1; grid-row:auto;}
}
.tsa .doc h1{font-size:clamp(1.8rem,4vw,2.5rem); letter-spacing:-.03em; line-height:1.15;}
.tsa .stamp{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--muted);
       font-size:.84rem; font-weight:600;}
.tsa .stamp i{color:var(--accent);}
/* sections separated by more than the gap inside one */
.tsa .sec{padding-top:clamp(34px,4vw,56px);}
/* a clear step from body to sub-heading to heading: the sub-heading was
   smaller than the text under it */
.tsa .sec h2{font-size:1.3rem;}
.tsa .sec .txt{margin-top:14px;}
.tsa .sec .txt p{color:#BCC6D4; font-size:.96rem; margin-top:11px;}
.tsa .sec .txt > :first-child{margin-top:0;}
.tsa .sec .txt h3{margin:22px 0 0; font-size:1.02rem; font-weight:800; color:var(--text);}
.tsa .sec .txt ul{list-style:disc; margin:11px 0 0; padding-left:20px; color:#BCC6D4; font-size:.96rem;
             display:grid; gap:7px;}
.tsa .sec .txt strong{color:var(--text);}
.tsa .sec .txt code{font-size:.9em; color:#9FB0C6;}
/* the warning boxes the live policies have: kept, as one quiet box */
.tsa .callout{margin-top:14px; padding:16px 18px; border:1px solid rgba(242,181,68,.4); border-radius:var(--r-control);
         background:rgba(242,181,68,.06); color:#E9DCC0; font-size:.95rem;}
.tsa .callout strong{color:var(--text);}
.tsa .callout p + p{margin-top:11px;}
.tsa .callout.plain{border-color:var(--line-2); background:rgba(255,255,255,.025); color:#BCC6D4; font-size:.9rem;}
.tsa .toc{position:sticky; top:calc(var(--tsa-bar,64px) + 20px); border-left:1px solid var(--line); padding-left:14px;}
.tsa .toc h2{padding-inline:6px; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.tsa .toc ol{list-style:none; margin:0; padding:0; display:grid; gap:1px; max-height:min(64vh,620px); overflow-y:auto;}
/* 6px either side, the heading too: a focus ring drawn inside had no room
   and touched the first letter */
.tsa .toc a{display:block; padding:6px; color:var(--muted); font-size:.84rem; font-weight:600; line-height:1.4;}
.tsa .toc a:hover{color:var(--text); text-decoration:none;}
/* the mark is weight as well as colour, so it survives High Contrast */
.tsa .toc a[aria-current="true"]{color:var(--accent); font-weight:800;}
/* rings drawn inside: the list scrolls (overflow) and would clip them */
.tsa .toc a:focus-visible{outline-offset:-2px;}
.tsa .tocd summary{list-style:none; cursor:pointer;}
.tsa .tocd summary::-webkit-details-marker{display:none;}
@media(min-width:941px){
  .tsa .tocd summary{pointer-events:none;}
}
@media(max-width:940px){
  .tsa .tocd summary{display:flex; align-items:center; justify-content:space-between; min-height:44px;}
  /* / "": an icon, not words - without it the glyph joined the name. The
     plain content first, for the browsers that drop the alt-text form */
  .tsa .tocd summary::after{content:"\f282"; content:"\f282" / ""; font-family:"bootstrap-icons"; color:var(--muted); font-size:.9rem;
                       transition:transform .2s;}
  .tsa .tocd[open] summary::after{transform:rotate(180deg);}
  .tsa .tocd summary h2{margin-bottom:0;}
  .tsa .tocd[open] summary{margin-bottom:8px;}
}
@media(max-width:940px){
  .tsa .doc .toc{position:static; border-left:0; padding:0 0 8px; border-bottom:1px solid var(--line); margin-top:28px;}
  .tsa .toc ol{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); max-height:none;}
}
/* ---- the close: one ask at the end ---- */
.tsa .close{text-align:center; background:#070B16; border-top:1px solid var(--line);}
.tsa .close h2{font-size:clamp(1.5rem,3.1vw,2.1rem);}
.tsa .close .btn{margin-top:28px;}
@media(pointer:coarse){
  .tsa .toc a{display:flex; align-items:center; min-height:44px;}
}
@media(max-width:640px){
  .tsa .item p, .tsa .band header p, .tsa .vid .cap p, .tsa .faq .ans, .tsa .sec .txt p, .tsa .sec .txt ul, .tsa .plan li, .tsa .callout, .tsa .formfoot .note{font-size:1rem;}
  .tsa .plan .pn{font-size:1.02rem;}
  .tsa .plan .pnote{font-size:1rem;}
  .tsa .stamp{font-size:1rem;}
  .tsa .pform .help{font-size:1rem;}
  .tsa .sec h2{font-size:1.4rem;}
  .tsa .sec .txt h3{font-size:1.1rem;}
  .tsa .pform .field :is(input,textarea){font-size:1rem;}
}