/* Mockup v2: the live factify.com pages in Rena's language. Extends site.css; tokens only.
   Radius 0, no shadows, no gradients; hairlines and surface changes separate. */

/* Icons: every Material Symbol is drawn filled, at each size it is used. */
.fx-icon{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.fx-icon--20{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 20}
.fx-icon--40{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 40}
.mark__ic .fx-icon{font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 24}
.mark__ok{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 20}

/* Headlines: <em class="hl"> is the highlighted phrase (seal red); .h-quiet is the second voice. */
.h-quiet{color:var(--text-muted)}
[data-theme="red"] .h-quiet{color:inherit;opacity:.78}
.v2-hero .phero__h{max-width:20ch;text-wrap:balance}
.v2-hero .hero__lead{max-width:56ch}
.v2-link{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.v2-link:hover{text-decoration-color:var(--text)}
.v2-link .fx-icon{font-size:18px}
.rail > .v2-link{justify-self:start;margin-top:var(--space-2)}
.v2-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--space-2);border:1px solid var(--gold);color:var(--gold-text);font-size:22px}
.part .v2-link{justify-self:start;margin-top:var(--space-2)}
.v2-sub{font-family:var(--font-display);font-size:26px;line-height:1.3;max-width:34ch;text-wrap:pretty}
.v2-close__h{max-width:20ch}
.v2-trustline{color:inherit;opacity:.78;font-size:14px}

/* Nav: the live site's five tabs. They need more room than the v1 nav, so they tighten a little. */
@media (min-width:1000px){
  .nav__links{gap:var(--space-6)}
}
.mnav__in > .mlink{border-bottom:1px solid var(--line)}

/* Footer: the live columns (Solutions, Company, Legal, Contact). */
.foot__brand .fx-btn{justify-self:start}
.foot a .fx-icon{font-size:16px;vertical-align:-3px}
.v2-top{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.v2-top .fx-icon{font-size:16px}
@media (min-width:1000px){.v2-foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Landing pages (Banks, Insurance): a slim bar and a one-line footer, as on the live site. */
.lp-bar .nav__in{justify-content:space-between}
.lp-bar__cta{display:inline-flex}
.lp-foot{padding-block:var(--space-6)}
.lp-foot .foot__base{margin-top:0;border-top:0}

/* What gets sealed: source chips, a gold link, the sealed result. */
.v2-two{display:grid;gap:var(--space-6)}
@media (min-width:1000px){.v2-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.v2-seal{padding:var(--space-6);background:var(--surface-section);border:1px solid var(--line)}
.sec--mist .v2-seal{background:var(--surface-page)}
.v2-seal .sheets li{height:32px;font-size:11px}
.v2-stamp{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--gold);font:600 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.v2-prove{display:grid;gap:var(--space-4);align-content:start;padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line)}
.v2-prove__k{color:var(--gold-text)}
.v2-prove__h,.v2-panel__h{font-family:var(--font-display);font-size:28px;line-height:1.12;letter-spacing:-.01em}
.v2-prove ul{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.v2-prove li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.v2-prove li .fx-icon{font-size:20px;color:var(--gold-text)}
.v2-panel{display:grid;gap:var(--space-4);align-content:start}
.v2-panel .v2-seal{padding:var(--space-6)}

/* Questions without disclosure (Banks): question, then answer, between hairlines. */
.v2-faq{border-top:1px solid var(--line)}
.v2-q{display:grid;gap:var(--space-2);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.v2-q h3{font-family:var(--font-display);font-size:24px;line-height:1.2}
.v2-q p{color:var(--text-muted);max-width:60ch}

/* Email forms: one field and its button on a row. */
.rq__field{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.rq__field .fx-input{flex:1 1 240px;min-width:0}
.v2-lpform{max-width:560px}
.rail__body > .fx-btn{justify-self:start}
.v2-lpform .form__note.is-bad,.rq__err{color:var(--seal)}

/* Insurance hero: centred, as on the live page. */
.ins-hero{padding-block:var(--space-16) var(--space-24);border-bottom:1px solid var(--line)}
.ins-hero__in{display:grid;justify-items:center;gap:var(--space-6);text-align:center}
.ins-hero__h{font-family:var(--font-display);font-size:48px;line-height:1.02;letter-spacing:-.015em;max-width:16ch}
@media (min-width:600px){.ins-hero__h{font-size:72px}}
.ins-hero .hero__lead{max-width:44ch}
.ins-hero__proof{display:flex;align-items:center;gap:var(--space-2);font-size:14px;color:var(--text-muted)}
.ins-art{display:grid;gap:var(--space-2);background:var(--surface-raised);border:1px solid var(--line);padding:var(--space-4)}
.ins-art__head{display:flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);margin-bottom:var(--space-1);border-bottom:1px solid var(--gold)}
.ins-art__head b{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--gold-text)}
.ins-art__head small{margin-left:auto;font:600 11px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.ins-art__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-weight:500}
.ins-art__row:has(> span:first-child:not(.fx-icon)){grid-template-columns:minmax(0,1fr) auto}
.ins-art__s{display:block;font-size:13px;font-weight:400;color:var(--text-muted)}
.ins-art__ic{color:var(--text-muted);font-size:20px}
.ins-art__ok{color:var(--gold-text);font-size:20px}
.ins-art__rec{display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-2);font-size:14px;color:var(--gold-text)}
.tag--gold{border-color:var(--gold);color:var(--gold-text)}

/* Security: certification tiles, status line. */
.v2-marks{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.v2-marks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.v2-mark{min-height:0;background:var(--surface-raised)}
.v2-mark .mark__n{font-size:20px}
.v2-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--text-muted)}
.v2-status__dot{width:8px;height:8px;background:var(--gold)}

/* Careers: hero photo, principles, life photos, roles. */
.v2-hero--photo{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:1000px){.v2-hero--photo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-12)}}
.v2-photo{margin:0;display:grid;gap:var(--space-2)}
.v2-photo img,.v2-life img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.v2-photo figcaption{color:var(--text-muted)}
.v2-prins{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.v2-prin{display:grid;gap:var(--space-2);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.v2-prin__h{font-family:var(--font-display);font-size:34px;line-height:1.05}
.v2-prin__d{font-size:18px}
.v2-prin__in{display:grid;gap:var(--space-1);margin-top:var(--space-2);padding:var(--space-4);background:var(--surface-section)}
.v2-prin__in .fx-label-s{color:var(--gold-text)}
.v2-prin__in p:last-child{color:var(--text-muted)}
@media (min-width:1000px){
  .v2-prin{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--space-6);align-items:start}
  .v2-prin .part__k{grid-row:1/3}
  .v2-prin__in{grid-column:3;grid-row:1/3;margin-top:0}
}
.v2-life{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.v2-filters{display:grid;gap:var(--space-4)}
@media (min-width:600px){.v2-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v2-filters .fx-field{max-width:none}
.v2-filters select.fx-input{padding-right:12px}
.v2-role{text-decoration:none;color:inherit;padding-inline:0}
.v2-role,.v2-role:is(*){grid-template-columns:minmax(0,1fr) auto}
.v2-role .row__t,.v2-role .row__l{grid-column:1}
.v2-role__go{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.v2-role:hover{padding-inline:var(--space-2)}
.v2-empty{display:grid;gap:var(--space-2);justify-items:start}
.v2-empty__t{color:var(--text);font-weight:600}

/* Position pages: description beside a facts card; the apply form frame. */
.v2-meta li{border-style:solid}
.v2-pgrid{display:grid;gap:var(--space-12)}
@media (min-width:1000px){.v2-pgrid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.v2-side{position:sticky;top:calc(var(--nav-h) + var(--space-6))}}
.v2-jd{display:grid;gap:var(--space-12)}
.v2-jd__s{display:grid;gap:var(--space-4)}
.v2-rt{display:grid;gap:var(--space-3);max-width:68ch;font-size:17px;line-height:1.65}
.v2-rt ul{margin:0;padding-left:1.2em;display:grid;gap:var(--space-2)}
.v2-rt p:empty,.v2-rt p:has(> br:only-child){display:none}
.v2-sidecard{display:grid;gap:var(--space-6);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line)}
.v2-sidecard dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3) var(--space-4)}
.v2-sidecard dt{font:600 11px/1.6 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.v2-sidecard dd{margin:0;font-weight:500}
.v2-sidecard .fx-btn{justify-self:stretch;justify-content:center}
.v2-formcard{min-height:240px;background:var(--surface-raised);border:1px solid var(--line)}

/* Legal: contents beside the text. Body text is never degraded. */
.v2-legal-sec{padding-top:0}
.v2-legal{display:grid;gap:var(--space-12)}
@media (min-width:1000px){.v2-legal{grid-template-columns:260px minmax(0,1fr);gap:var(--space-16)}.v2-toc nav{position:sticky;top:calc(var(--nav-h) + var(--space-6))}}
.v2-toc nav{display:grid;gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--line)}
.v2-toc .fx-label-s{color:var(--text-muted)}
.v2-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:14px}
.v2-toc a{color:var(--text-muted);text-decoration:none}
.v2-toc a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.v2-legal__body{max-width:72ch;font-size:16px;line-height:1.7;padding-top:var(--space-6);border-top:1px solid var(--line);overflow-wrap:anywhere}
.v2-legal__body > * + *{margin-top:var(--space-4)}
.v2-legal__body h2{margin-top:var(--space-12);font-family:var(--font-display);font-size:28px;line-height:1.15;letter-spacing:-.01em;scroll-margin-top:calc(var(--nav-h) + var(--space-6))}
.v2-legal__body ol,.v2-legal__body ul{padding-left:1.4em;display:grid;gap:var(--space-2)}
.v2-legal__body a{color:var(--text)}

/* Book a demo: the live request dialog. */
.rq{width:min(640px,calc(100% - 2 * var(--gutter)));max-height:calc(100% - 2 * var(--gutter));padding:0;border:1px solid var(--line-strong);background:var(--surface-page);color:var(--text);overflow:auto}
.rq::backdrop{background:var(--brand-ink);opacity:.72}
.rq__top{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}
.rq__logo img{display:block}
.rq__x{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:var(--text);cursor:pointer}
.rq__stage{padding:var(--space-8) var(--space-6) var(--space-8)}
.rq__q{display:grid;gap:var(--space-4)}
.rq__badge{color:var(--seal)}
.rq__h{font-family:var(--font-display);font-size:40px;line-height:1.04;letter-spacing:-.015em}
.rq__sub{color:var(--text-muted);max-width:52ch}
.rq__form{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.rq__err:empty{display:none}
.rq__fine{font-size:14px;color:var(--text-muted)}
.rq__fine a{color:var(--text)}
.rq__cal{display:none}
.rq__q > .fx-btn{justify-self:start}
html.rq-open{overflow:hidden}

/* Nav: the Solutions button marks the section the current page is in. */
.dd__btn[aria-current="true"]{color:var(--text)}

/* Home, Introducing the Rulebook: the Seal diagram. Documents white with a solid hairline and caps
   labels, the sealed result in a gold border ending in the seal. Motion (the first version's, made
   bolder): the sources fan in on curves, 7px gold grains glide along every line in a steady stream,
   and each box's border lights gold in time with the grains reaching it. */
.sd{display:grid;justify-items:center;margin:var(--space-16) 0 0}
.sd__src{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);width:100%;max-width:360px}
.sd__src li{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);background:var(--surface-raised);border:1px solid var(--line-strong);font:600 11px/1.25 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.sd__src .fx-icon{flex:none;color:var(--text-muted)}
.sd__fan{display:none}
.sd__fan path{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.sd__gr{fill:var(--gold)}
.sd__link{position:relative;display:block;width:2px;height:56px;margin-block:var(--space-2);background:var(--line-strong)}
.sd__link::after{content:"";position:absolute;left:-4px;bottom:-1px;width:10px;height:7px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}
.sd__link--gold{background:var(--gold)}
.sd__link b{position:absolute;left:-2.5px;top:0;width:7px;height:7px;background:var(--gold);opacity:0;animation:sd-y 1.2s linear var(--d,0s) infinite}
.sd__link--gold b{background:var(--gold-text)}
@keyframes sd-y{0%{top:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{top:calc(100% - 7px);opacity:0}}
@keyframes sd-x{0%{left:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
/* Boxes light up as the stream reaches them. */
@keyframes sd-lit{0%,100%{border-color:var(--line-strong)}45%{border-color:var(--gold)}}
.sd__node{display:grid;align-content:start;gap:var(--space-3);width:100%;max-width:360px;padding:var(--space-4) var(--space-6) var(--space-6);background:var(--surface-raised);border:1px solid var(--line-strong);animation:sd-lit 1.2s ease-in-out infinite}
.sd__node--mid{animation-delay:.6s}
.sd__h{font-family:var(--font-display);font-size:24px;line-height:1.15;padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.sd__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.sd__list li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-muted)}
.sd__list li::before{content:"";flex:none;width:8px;height:8px;background:var(--text)}
.sd__list .is-open::before{background:none;border:1px dashed var(--text-muted)}
.sd__list .is-ok::before{background:var(--gold)}
.sd__sealed{display:grid;align-content:center;justify-items:center;gap:var(--space-1);width:100%;max-width:360px;padding:var(--space-4) var(--space-4) var(--space-6);background:var(--surface-raised);border:1px solid var(--gold);text-align:center}
.sd__seal{width:96px;height:96px;margin:0 0 var(--space-2)}
.sd__seal canvas{color:var(--gold)}
.sd__t{font-family:var(--font-display);font-size:26px;line-height:1.1}
.sd__s{color:var(--gold-text);white-space:nowrap}
@media (min-width:1000px){
  .sd{grid-template-columns:minmax(180px,210px) 56px minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(240px,260px);align-items:stretch;justify-items:stretch}
  .sd__src{grid-template-columns:minmax(0,1fr);gap:8px;max-width:none;align-self:center}
  .sd__src li{height:44px;min-height:0}
  .sd__fan{display:block;width:56px;height:200px;align-self:center}
  .sd__link--m{display:none}
  .sd__link{width:auto;height:2px;margin:0;align-self:center}
  .sd__link::after{left:auto;right:-1px;bottom:auto;top:-4px;width:7px;height:10px;clip-path:polygon(0 0,100% 50%,0 100%)}
  .sd__link b{top:-2.5px;left:0;animation-name:sd-x}
  .sd__node,.sd__sealed{max-width:none}
  .sd__node{padding:var(--space-4) var(--space-4) var(--space-6)}
}
@media (min-width:1200px){.sd__node{padding:var(--space-4) var(--space-6) var(--space-6)}}
@media (prefers-reduced-motion:reduce){.sd__gr,.sd__link b{display:none}.sd__node{animation:none}}

/* Security and trust on Home: three marks. */
@media (min-width:600px){.home .trust__marks{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Small screens (QA): fields at 16px so phones do not zoom on focus; long source chips wrap;
   footer links get a full tap height; the Prove record fits a 320px screen. */
@media (max-width:599px){
  .fx-input{font-size:16px}
  .v2-seal .sheets li{height:auto;min-height:32px;padding-block:6px;white-space:normal;line-height:1.3}
  .foot__base a,.foot ul a{display:inline-block;padding-block:11px}
  .foot ul{gap:0}
  .ledger .fx-table td,.ledger .fx-table th{padding:8px 4px;font-size:12px}
}

/* Cookie notice: a raised bar on the paper. Accept is not red: one red primary per view. */
.fyc{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);max-width:640px;margin-inline:auto;padding:var(--space-4);background:var(--surface-raised);border:1px solid var(--line-strong);font-size:14px}
.fyc p{flex:1 1 260px}
.fyc__b{display:flex;gap:var(--space-2)}

@media (prefers-reduced-motion:reduce){.v2-role:hover{padding-inline:0}}

/* Footer on ink, as on the live site: column labels in gold (on ink, gold is the proof). */
.v2-foot{padding-block:var(--space-16) var(--space-8)}
.v2-foot .foot__cols h2{color:var(--gold-text)}
.v2-foot .foot__base{border-top-color:var(--line)}


/* Trust marks with an official logo: the logo's own shape, in one color, like the icons beside it. */
.mark__logo{display:block;width:34px;height:34px;background:var(--gold-text);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Nav: the Company menu is one short column. */
.dd__menu--company{grid-template-columns:max-content}

/* Contact us: the live footer's contact links in the rail, the form beside them. */
.v2-contact{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.v2-contact__form{max-width:720px}
@media (min-width:700px){.v2-contact__form .form__row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phones: the trust marks stack, so each one only takes the room it needs. */
@media (max-width:599px){.trust__marks .mark{min-height:0}.trust__marks .mark .fx-rule__foot{padding-top:var(--space-4)}}

/* Contact us: the form beside the hero copy; three ways in; the office. */
.v2-contact-hero__in{display:grid;gap:var(--space-12);align-items:start}
@media (min-width:1000px){.v2-contact-hero__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-16)}}
.v2-contact-hero .phero__copy{align-content:start}
.v2-contact{list-style:none;margin:var(--space-4) 0 0;padding:var(--space-6) 0 0;display:grid;gap:var(--space-4);border-top:1px solid var(--line)}
.v2-contact li{display:flex;align-items:center;gap:var(--space-3)}
.v2-contact .v2-ic{margin:0}
.v2-contact-hero .v2-contact__form{max-width:none}
.v2-ways{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
@media (min-width:1000px){.v2-ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v2-way{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line)}
.v2-way .part__k{color:var(--seal)}
.v2-way__h{font-family:var(--font-display);font-size:26px;line-height:1.12;letter-spacing:-.01em}
.v2-way p:not(.part__k){color:var(--text-muted)}
.v2-way > :last-child{margin-top:auto;align-self:flex-start}
.v2-way > .fx-btn{margin-top:auto}
.v2-office{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:800px){.v2-office{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12)}}
.v2-office__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.v2-office__copy{display:grid;gap:var(--space-3);align-content:center}
.v2-office__addr{font-size:19px;color:var(--text-muted);max-width:36ch}

/* Home: more room between Introducing the Rulebook and the black How it works below it. */
.home .intro{padding-bottom:var(--space-24)}
@media (min-width:1000px){.home .intro{padding-bottom:var(--space-32)}}

/* Home: the longer line under "Finally, agents that adhere to your policies." keeps a reading measure. */
.home .intro__line{max-width:62ch;line-height:1.5;text-wrap:pretty}