/* Shared web treatments, using the app's Mono dark roles in tokens.css.
   Content is matte; only navigation and dialogs use translucent glass. */
:root{color-scheme:dark}
body{font-family:var(--sans);font-weight:400}
/* form controls do not inherit the page font by default and fell back to Arial (founder 2026-10-11:
   Arial is never used) */
button,input,select,textarea,optgroup{font-family:inherit}
h2,h3{font-family:var(--sans);font-weight:600}
h2{letter-spacing:-.025em}
/* tora-decision(captain 2026-09-26): Orbitron for section headers, DM Sans for card copy. */
#process>h2,.why-title,.journal-head h2,#faq>h2{font-family:var(--display);font-weight:500;letter-spacing:-.015em}
p,.lede{font-weight:400}
.lede{color:var(--body)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
:where(section[id]){scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.btn-pill,.btn-outline,.wl-trigger,.wl-submit,.submit-btn{min-height:var(--hit-min);border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.btn-pill.with-icon{min-height:var(--hit-min);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4)}
.hero-center .wl-cta .btn-pill.with-icon{min-height:var(--hit-prominent);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-8);gap:var(--space-8)}
.btn-pill.with-icon .icon,.hero-center .wl-cta .btn-pill.with-icon .icon{width:var(--space-8);height:var(--space-8)}

/* Quiet floating navigation; the page behind it supplies the frost. */
.landing main{overflow-x:clip}
.landing header{padding:var(--space-2) var(--gutter-wide);background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Neutral black frost, with no white rim or blue fill. */
.header-inner{position:relative;isolation:isolate;max-width:var(--container);margin:auto;padding:var(--space-1) var(--space-6);border-radius:var(--radius-pill);background:rgb(22 25 29 / .62);border:1px solid transparent;box-shadow:0 1.5rem 3.75rem rgb(0 0 0 / .32);backdrop-filter:blur(32px) saturate(1.6) brightness(.6);-webkit-backdrop-filter:blur(32px) saturate(1.6) brightness(.6);
  transition:max-width .5s var(--rev-ease),padding .5s var(--rev-ease),background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}
/* At the top of a page the bar is open and clear; once the page moves it gathers into the
   floating glass pill (tools-nav.js sets html.nav-scrolled). No border at any point. */
html:not(.nav-scrolled) .header-inner{max-width:var(--container-wide);background-color:rgb(40 46 52 / 0);border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-links{gap:var(--space-6)}
.nav-links a{min-height:var(--hit-min);display:inline-flex;align-items:center}
.logo{min-height:var(--hit-min)}
/* A quieter wordmark, preserving the link target and balanced nav insets. */
.header-inner .logo img{transform:scale(.74);transform-origin:left center}
.hero-center h1{font-weight:700;line-height:1.16}
.hero-badge{min-height:var(--hit-min);background:var(--surface);border:0;padding:var(--space-2) var(--space-4);gap:var(--space-3)}
.hero-badge-chip{background:var(--surface-raised);color:var(--ink);font-family:var(--sans)}
.hero-badge-arrow{color:var(--body)}

/* The same filled surface family used by app widgets. Artwork stays intact. */
.steps,.journal,.faq-grid{gap:var(--space-3)}
.step,.j-card{border:0}
.j-card h4{font-family:var(--sans);font-size:var(--text-lg);font-weight:600;max-width:22ch}
.tools,.faq-item,.feature-card{background:var(--surface);border:0}
.tools-tabs{background:transparent;border-color:var(--hairline)}
.tools-tab{border-radius:var(--radius-pill)}
.tools-tab[aria-selected="true"]{background:var(--surface-raised)}
.tools-tab span,.tool-note{color:var(--body)}
.tool-f input,.tool-f select,.seg,.wl-field input{background:var(--bg);border-color:var(--hairline);border-radius:var(--radius-control);font-size:var(--text-body);min-height:var(--hit-min)}
.seg{position:relative;padding:var(--space-1)}
.seg input{min-height:0;width:1px;height:1px;padding:0;border:0}
.seg label{min-height:var(--hit-min);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius-control) - var(--space-1))}
.seg input:checked+label{background:var(--lavender);color:var(--on-accent)}
.tool-out .big{font-weight:700;font-size:var(--text-h1)}
.faq-item.is-open{background:var(--surface-raised)}
.faq-item summary{min-height:var(--hit-prominent);font-size:var(--text-body)}
.faq-item summary .plus::before,.faq-item summary .plus::after{background:var(--body)}
.why-point.is-open{background:var(--surface);border-color:transparent;box-shadow:none}
.why-q{font-size:var(--text-body)}
.cta-card{border:0}
.cta-hero h2{max-width:23ch}

/* A frosted sheet above the page; fields remain matte inset wells. */
.wl-modal:not(.is-done){background:var(--chrome-fill);border:1px solid var(--hairline);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6) var(--space-6);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:0 var(--space-4) var(--glass-shadow-radius) rgb(var(--c-black) / var(--glass-shadow-opacity)),inset 0 1px rgb(var(--c-white) / var(--glass-sheen-opacity))}
.wl-modal::before,.wl-modal::after{display:none}
.wl-modal h3{font-family:var(--sans);font-size:var(--text-2xl);font-weight:700;padding-right:var(--space-6)}
.wl-close{width:var(--hit-min);height:var(--hit-min)}
.wl-field input:focus{background:var(--bg)}
.wl-field label{color:var(--body)}
.wl-submit{min-height:var(--hit-prominent)}

.foot-brand p,.foot-col a,.foot-brand .foot-credits{color:var(--body)}
.foot-col a{min-height:var(--hit-min);display:flex;align-items:center}

/* Contact and legal pages share the landing palette and house typography. */
.support .wrap{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter)}
.support header{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.support h1{font-family:var(--sans);font-size:var(--text-h1);font-weight:600;letter-spacing:-.025em}
.support .lede,.support .updated{font-family:var(--sans);font-style:normal}
.support .kicker,.support .sec-tag{font-family:var(--sans);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--body)}
.support .c-hero,.support .l-hero{padding-top:var(--space-20);padding-bottom:var(--space-3)}
.support .c-form-wrap{padding-top:var(--space-10);padding-bottom:var(--space-20)}
.c-card{background:var(--surface);border:0;border-radius:var(--radius-2xl);padding:var(--space-8)}
.field-row{gap:var(--space-4)}
.field-row>.field{margin-top:0}
.field{margin-top:var(--space-5)}
.field label{font-family:var(--sans);font-size:var(--text-sm);letter-spacing:0;text-transform:none;color:var(--body)}
.field label b{color:var(--body)}
.field input,.field select,.field textarea{background-color:var(--bg);border-radius:var(--radius-control);font-size:var(--text-base);border-color:var(--hairline)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan)}
.field input::placeholder,.field textarea::placeholder,.field select:invalid{color:var(--body)}
.field option{background:var(--surface)}
.submit-btn{min-height:var(--hit-prominent)}
.consent,.support footer,.support footer a{color:var(--body)}
.c-note{color:var(--rust)}
.c-sent h2{font-family:var(--sans);font-size:var(--text-2xl);font-weight:700}
.support article{font-size:var(--text-base);padding:0 var(--gutter)}
.support article h2{font-family:var(--sans);font-size:var(--text-xl);font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
.support footer a{display:inline-flex;align-items:center;min-height:var(--hit-min)}
.support .ambient{mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent);display:block;inset:12% -10% -10%;height:auto;opacity:.7;background:radial-gradient(ellipse at 20% 55%,rgb(var(--c-teal) / .24),transparent 45%),radial-gradient(ellipse at 82% 72%,rgb(var(--c-cyan) / .16),transparent 45%);animation:ambientDrift 18s ease-in-out infinite alternate}
.support .c-card{position:relative;background:color-mix(in srgb,var(--surface) 92%,transparent)}
@media(max-width:820px){
  .landing header{padding-left:var(--gutter-wide-sm);padding-right:var(--gutter-wide-sm)}
  .header-inner{grid-template-columns:1fr auto;padding:var(--space-1) var(--space-5);gap:var(--space-2)}
  .header-inner nav.primary{display:none}
  .header-inner>.btn-pill{font-size:var(--text-xs);padding-left:var(--space-3)}
  .header-inner>.btn-pill .icon{width:var(--space-6);height:var(--space-6)}
  .hero-center{padding-left:var(--gutter);padding-right:var(--gutter)}
  .tool{padding:var(--space-5)}
  .tools-tabs{padding:var(--space-3)}
  .tools-tab{padding:var(--space-3)}
  .support .c-hero,.support .l-hero{padding-top:var(--space-12)}
  .c-card{padding:var(--space-6)}
}
.support nav.primary .btn-pill{color:var(--on-accent)}
.support{--gold:var(--cyan)}
@media(max-width:560px){.field-row .field + .field{margin-top:0}}

/* Light from the steel artwork gathers along the glass edges. */
.wl-modal:not(.is-done)::after{content:"";display:block;position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(140deg,rgb(var(--c-white) / .3),transparent 25%,rgb(var(--c-cyan) / .7) 60%,rgb(var(--c-mint) / .4) 78%,transparent);background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:glassLight 14s ease-in-out infinite alternate}
.wl-modal:not(.is-done){background:radial-gradient(ellipse at 0% 100%,rgb(var(--c-teal) / .16),transparent 35%),radial-gradient(ellipse at 100% 72%,rgb(var(--c-cyan) / .12),transparent 32%),var(--chrome-fill);box-shadow:inset 0 -12px 24px -20px rgb(var(--c-cyan) / .7),0 var(--space-4) var(--glass-shadow-radius) rgb(var(--c-black) / var(--glass-shadow-opacity))}
.wl-brand{display:block;width:var(--space-10);height:auto;margin:0 auto var(--space-5);color:var(--ink);fill:currentColor}
.mc-card{--radius-xl:1rem;border-radius:var(--radius-xl)}
.mc-tilt{--radius-xl:1rem}
@keyframes ambientDrift{from{transform:translate3d(-5%,3%,0) scale(1);filter:hue-rotate(0deg)}to{transform:translate3d(6%,-5%,0) scale(1.12);filter:hue-rotate(18deg)}}
@keyframes glassLight{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(max-width:820px){
  .steps .step{height:17.5rem}
  .step p{color:var(--ink)}
}

/* One glass surface. The membership action has no separate capsule or rim. */
/* the nav's Become a member is a real button (captain, look 17): a compact light pill with the
   arrow in its own dark disc, lit from above, lifting a little on hover */
.header-inner>.btn-pill.with-icon{text-decoration:none;min-height:0;height:2.125rem;padding:0 .1875rem 0 .9375rem;gap:.5rem;border:0;border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#f7fafc,#dfe7ed);color:#0d1013;font:600 var(--text-sm)/1 var(--sans);letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(0 0 0 / .12),0 .5rem 1.25rem -.5rem rgb(0 0 0 / .7),0 0 0 1px rgb(255 255 255 / .06);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease}
.header-inner>.btn-pill.with-icon:hover{background:linear-gradient(180deg,#fff,#e8eff4);color:#0d1013;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0 / .1),0 .75rem 1.5rem -.5rem rgb(143 179 203 / .45),0 0 0 1px rgb(255 255 255 / .1)}
.header-inner>.btn-pill.with-icon .icon{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:#15191d;color:#eef3f6;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12)}
.header-inner>.btn-pill.with-icon .icon svg{width:.75rem;height:.75rem;transition:transform .3s cubic-bezier(.22,1,.36,1)}
/* look 22: no nudge on hover. The disc turns the arrow to point right (index.html), and a nudge
   applied inside the turned disc pushed the arrow off centre. */
@media(max-width:820px){.header-inner>.btn-pill.with-icon{height:2rem;padding-left:.8125rem;gap:.4375rem;font-size:var(--text-xs)}.header-inner>.btn-pill.with-icon .icon{width:1.625rem;height:1.625rem}}

/* Keep native scrolling and keyboard navigation without a visible scrollbar. */
html{scrollbar-width:none}
::-webkit-scrollbar{display:none}

/* The one header, on every page (index, tools, research, and the support pages whose own
   older inline styles would otherwise restyle a bare header). */
#siteHeader{position:sticky;top:0;z-index:100;display:block;padding:var(--space-2) var(--gutter-wide);border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#siteHeader .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1.5rem}
#siteHeader .logo{display:inline-flex;align-items:center;text-decoration:none;justify-self:start}
#siteHeader .logo img{height:clamp(.8125rem,1.6vw,1.125rem);width:auto;display:block;filter:invert(1)}
/* phones: the wordmark keeps its desktop size beside the 44px Get early access button (founder 2026-10-11) */
@media(max-width:820px){#siteHeader .logo img{height:1.125rem}}
#siteHeader nav.primary{display:flex;align-items:center;justify-content:center;justify-self:center}
#siteHeader .nav-links{display:flex}
#siteHeader .nav-links a{color:var(--body);text-decoration:none;font-family:var(--label);font-size:var(--text-sm);letter-spacing:.01em;transition:color .2s}
#siteHeader .nav-links a:hover{color:var(--ink)}
#siteHeader .header-inner>.btn-pill{justify-self:end}
@media(max-width:820px){#siteHeader{padding-left:var(--gutter-wide-sm);padding-right:var(--gutter-wide-sm)}#siteHeader .header-inner{grid-template-columns:1fr auto}#siteHeader nav.primary{display:none}}

/* The bar must read as frosted everywhere. Where backdrop blur is unavailable (older engines,
   some GPU-less setups) or the visitor asks for less transparency, it becomes solid. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.nav-scrolled .header-inner{background:rgb(20 23 27 / .96)}
}
@media (prefers-reduced-transparency:reduce){
  html.nav-scrolled .header-inner{background:rgb(20 23 27 / .96);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Link jumps (tools-nav.js): a quick veil in the page colour while the page moves; the
   section underneath is already in place when it clears. */
.jump-veil{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--bg,#141414);opacity:0;transition:opacity .16s ease}
.jump-veil.on{opacity:1;transition-duration:.13s}

/* "tora PRO": the lowercase tora wordmark (its own drawing, always a lowercase t) followed by
   PRO in Orbitron at the same height, slightly stretched the way Apple sets "Pro". Sized in em, so it sits in a
   line of body text or fills a headline. .tpro-p alone is the bare "PRO" in running text. */
.tpro{display:inline-flex;align-items:flex-end;gap:.2em;white-space:nowrap;vertical-align:-.04em;line-height:1;margin-left:.12em}
.tpro-t{display:inline-block;height:.84em;aspect-ratio:392/142;background:currentColor;
  -webkit-mask:url(brand/tora-wordmark-mask.svg) center/contain no-repeat;mask:url(brand/tora-wordmark-mask.svg) center/contain no-repeat}
.tpro-p{display:inline-block;font:600 .74em/.74 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;transform:scaleX(1.16);transform-origin:0 100%;margin-right:.44em}
/* in the lockup PRO's caps stand exactly as tall as the o-r-a letters (75.5% of the wordmark,
   .634em; Orbitron's caps are .72 of its size) and run 1.16 wide, matching the app (captain) */
.tpro .tpro-p{font-size:.881em;line-height:.72;transform:scaleX(1.16);margin-right:.5em;margin-bottom:0}
/* PRO in its own colour: the palette's steel-blue (captain, look 11), finished like the metal
   of a Pro phone: a soft brushed fall of light down the letters, all within the steel-blue. */
.tpro-p{color:#8fb3cb}
.tpro .tpro-p{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,transparent 40%,rgb(255 255 255 / .75) 50%,transparent 60%),
    linear-gradient(180deg,#b3cfe0 0%,#8fb3cb 42%,#6f97b3 58%,#9cbdd3 100%);
  background-size:250% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat}
/* the big lockups: a slow light sweeps across PRO now and then, like a phone turned in the hand */
.pro-title .tpro-p{animation:proSweep 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}
@keyframes proSweep{0%,62%{background-position:130% 0,0 0}100%{background-position:-30% 0,0 0}}

/* Look 24 (captain: "the nav bar doesn't actually have a blur on it anymore ... sometimes it loads
   the blur, sometimes it doesn't"). The pill used to switch backdrop-filter between none and a
   blur, with a transition on backdrop-filter itself. Chrome does not interpolate from none, and
   whether the switch lands depends on what is composited behind the bar at that moment, so the
   frost could come and go. The frost now lives on its own layer that always carries the blur;
   only its opacity changes, which every engine animates reliably. */
.header-inner,html:not(.nav-scrolled) .header-inner{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgb(22 25 29 / .62);-webkit-backdrop-filter:blur(32px) saturate(1.6) brightness(.6);backdrop-filter:blur(32px) saturate(1.6) brightness(.6);
  opacity:0;transition:opacity .35s ease}
html.nav-scrolled .header-inner::before{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header-inner::before{background:rgb(20 23 27 / .96)}}
@media (prefers-reduced-transparency:reduce){.header-inner::before{background:rgb(20 23 27 / .96);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* "Made with care, for people who care." with the animated mark: the last thing on every page,
   bottom right of the footer (beside the photo credits on the home page) */
.foot-made{display:flex;align-items:center;justify-content:flex-end;gap:.625rem;margin:0;font:400 .8125rem/1 var(--sans);color:rgb(238 243 246 / .5);white-space:nowrap}
.foot-made img{width:1.75rem;height:auto;display:block}
.foot-made-end{flex-basis:100%;width:100%;grid-column:1 / -1;margin-top:1.25rem;padding-bottom:.25rem}
.foot-base{max-width:var(--container-wide);margin:var(--space-5) auto 0;padding:0 var(--gutter-wide) var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.foot-base .foot-credits{margin:0;padding:0;max-width:none}
.foot-base .foot-made-end{flex-basis:auto;width:auto;margin:0}
@media(max-width:640px){.foot-base{flex-direction:column;align-items:flex-start}}
/* the early-access button in the nav, in a smaller pill, on every page */
.btn-pill.nav-join{font-size:.8125rem;height:2rem;padding:0 .1875rem 0 .875rem;gap:.5rem}
.btn-pill.nav-join .icon{width:1.625rem;height:1.625rem}
/* Join on phones is a 44pt control (founder 2026-10-11, review F04); on desktop it keeps its drawn size and
   only its hit area grows to 44px. The other small controls get the same invisible 44px hit area. */
.btn-pill.nav-join{position:relative}
.btn-pill.nav-join::after,.how-go::after,.fp-term::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100%,2.75rem);height:2.75rem}
.how-step .how-go,.fp-term{position:relative}
.co-foot a{display:inline-flex;align-items:center;min-height:2.75rem}
@media(max-width:820px){
  #siteHeader .header-inner>.btn-pill.nav-join{height:2.75rem;padding:0 .25rem 0 1.125rem;font-size:.9375rem;gap:.625rem}
  #siteHeader .header-inner>.btn-pill.nav-join .icon{width:2.25rem;height:2.25rem}
}
/* the site shader as a page background (assets/apply26.js, html[data-shader]) */
.pg-shader{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;-webkit-mask:linear-gradient(#000 0,#000 55%,rgb(0 0 0 / .25));mask:linear-gradient(#000 0,#000 55%,rgb(0 0 0 / .25))}
.pg-shader canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html[data-shader] body>header,html[data-shader] body>main,html[data-shader] body>section,html[data-shader] body>footer,html[data-shader] .company{position:relative;z-index:1}
/* Round 18 (captain: "some sections literally don't blur"). The pill was isolation:isolate with its
   frost on a ::before. On GPU-composited Chrome the isolated pill becomes its own render surface,
   so the frost blurred only what was inside the pill (nothing) and the page showed through sharp.
   Without the isolation the frost blurs the page; the header's own stacking context still keeps
   the frost under the links. The header also sits above every section (the Meet Tora phones were
   z-index 100, level with it, and painted over it). Taller and a stronger frost, like Quo's bar. */
.header-inner{isolation:auto!important}
#siteHeader{z-index:1000!important}
#siteHeader .header-inner{min-height:3.875rem;padding-top:.5rem!important;padding-bottom:.5rem!important}
.header-inner::before{background:rgb(20 23 27 / .5)!important;-webkit-backdrop-filter:blur(40px) saturate(1.8) brightness(.55)!important;backdrop-filter:blur(40px) saturate(1.8) brightness(.55)!important}
/* The real cause (round 18, found in GPU Chrome): <main> had z-index:1, so the header was a layer
   inside main's stacking context, and on the GPU path the frost then skipped whatever main paints
   itself (every plain heading and text block), blurring only content with its own z-index. main no
   longer forms a stacking context, so the frost blurs everything under it. The fast-scroll veil,
   which sat above main, is lifted to stay above the sections and below the header. */
main,.company main{z-index:auto!important}
.jump-veil{z-index:950!important}
/* Round 18: every plus on the site is the app's plus (ToraIcons tora.plus: two thin arms across
   71% of the box, square ends, 1.75/24 stroke). It turns into a minus on open. */
.faq-item summary .plus{width:1.125rem!important;height:1.125rem!important}
.faq-item summary .plus::before,.faq-item summary .plus::after{border-radius:0!important;background:#eef3f6!important}
.faq-item summary .plus::before{width:.8rem!important;height:1.5px!important}
.faq-item summary .plus::after{width:1.5px!important;height:.8rem!important}
/* Round 19: every plus is the app's plus glyph itself (ToraIcons tora.plus: two equal arms from 3.5
   to 20.5 on a 24 grid, 1.75 stroke, square ends), drawn as SVG so both arms are always exactly the
   same length and weight at any size. Opening folds the vertical arm away into a minus. */
.t-plus{display:block;width:100%;height:100%;overflow:visible}
.t-plus path{fill:none;stroke:#eef3f6;stroke-width:1.75;stroke-linecap:butt;vector-effect:none}
.t-plus .v{transform-origin:12px 12px;transform-box:view-box;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.faq-item summary .plus{width:1.125rem!important;height:1.125rem!important}
.faq-item summary .plus::before,.faq-item summary .plus::after{display:none!important}
.faq-item.is-open .t-plus .v{transform:rotate(90deg) scaleY(0);opacity:0}
/* the plus is drawn on a 20 px grid with a 2 px stroke centred on whole pixels, so both arms land
   crisp at 1x and 2x (arms 70% of the box, as the app's glyph) */
.t-plus path{stroke-width:2!important}
.t-plus .v{transform-origin:10px 10px!important}
.faq-item summary .plus,.co-ctl .t-plus{width:20px!important;height:20px!important}
/* Round 21: no borders on containers anywhere (the founder's rule). The careers and About heroes lose
   their frame and its corner crosshairs; the contact, apply and Tools cards keep only their lit top. */
.co-frame{border:0!important}
.co-hero .xh{display:none!important}


/* Page to page (founder 2026-10-06: the fade was "anxiety-inducing", worst when switching pages fast).
   Every page opts into cross-document view transitions. The nav bar has its own name, so it holds
   still while the page under it changes; the old page drops away in 0.12s and the new one arrives
   just after it (from 0.1s) on a long ease-out with a small rise, so the two never sit on top of each
   other as a double exposure. A new click mid-transition simply starts the next page.
   The nav takes its name only while a transition runs: a named element is a backdrop root, so at rest
   the name stopped the frost from seeing the page, which then showed through the pill sharp. */
@view-transition{navigation:auto}
html:active-view-transition #siteHeader{view-transition-name:site-nav}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav){display:none}
::view-transition-new(site-nav){animation:none}
::view-transition-old(root){animation:tora-page-out .12s cubic-bezier(.2,.8,.4,1) both}
::view-transition-new(root){animation:tora-page-in .34s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes tora-page-out{to{opacity:0}}
@keyframes tora-page-in{from{opacity:0;transform:translate3d(0,6px,0)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* in-page jumps: a calmer veil (out on an ease-in, back on a long ease-out) */
.jump-veil{transition:opacity .3s cubic-bezier(.16,1,.3,1)!important}
.jump-veil.on{transition:opacity .12s cubic-bezier(.4,0,1,1)!important}
/* Press feedback (founder 2026-10-11, review F09): the primary buttons settle in quickly on pointer-down,
   like iOS buttons, and ease back on their own transform transition when released. */
:is(.btn-pill,.wl-trigger,.pro-cta,.wl-submit,.submit-btn,.co-apply-btn,.hero-badge):active{transform:scale(.97)!important;filter:brightness(.94);transition-duration:.1s!important}

/* The footer's "Made with care" line sits on the line with © 2026 Tora, the two together at its end, and the fixed
   bottom frost fades away as the page reaches its end, so the last line is never under a blur (captain 2026-10-30:
   "why not align it with the 2026 Tora ... it shouldn't blurred"). Browsers without scroll-driven animations keep the
   frost as before. */
:is(.co-foot,.article-footer):has(.foot-made-end){justify-content:flex-start}
:is(.co-foot,.article-footer):has(.foot-made-end)>span{margin-left:auto}
:is(.co-foot,.article-footer) .foot-made-end{flex-basis:auto;width:auto;margin:0;padding:0;grid-column:auto}
@supports (animation-timeline:scroll()){
  .bottom-blur{animation:bottom-blur-end linear both;animation-timeline:scroll(root block);animation-range:calc(100% - 10rem) calc(100% - 2rem)}
  @keyframes bottom-blur-end{to{opacity:0}}
}

/* Adaptive quality (assets/quality.js): a machine that cannot hold the frame rate keeps the frost's dark fade only */
html.lite .bottom-blur i{display:none}