/* Clarient marketing site — design system. * Ported from the design handoff (design_handoff_marketing_site/site.css) with * every selector scoped under .clarient-site. The scope keeps these rules above * the bundled CSS modules, which load later in the document, and keeps generic * names like .btn and .container out of the rest of the app. Class names are * otherwise exactly as designed, so markup can be diffed against the reference. * * Loaded via from MarketingShell, the same pattern the dashboard uses for * /ir-dashboard.css. Bump MARKETING_CSS_VERSION there on every edit here. */ /* Kicker pill only. Brand terracotta on peach is 4.47:1 at 13px bold, just * under WCAG AA. One step darker per channel gives 4.54:1 — imperceptible, and * every other use of --terra (on white, 5.13:1) is untouched. */ :root{ --bg:#FFFFFF;--tint:#F8F5F1;--tint-2:#F3EEE8;--peach:#FBEDE5; --ink:#241F1A;--body:#5C544B;--soft:#7A736A; --line:#EAE4DC;--line-2:#E0D8CD; --terra:#B05231;--terra-kicker:#AF5130;--terra-dark:#8E3F26;--terra-tint:#F6E3D8; --sans:var(--font-clarient-manrope),Manrope,Helvetica Neue,Arial,sans-serif; --r:16px; --shadow-sm:0 1px 3px rgba(36,31,26,.06),0 1px 2px rgba(36,31,26,.04); --shadow-md:0 4px 14px rgba(36,31,26,.07),0 2px 5px rgba(36,31,26,.05); --shadow-lg:0 24px 60px -12px rgba(36,31,26,.16),0 8px 20px rgba(36,31,26,.06); }:where(.clarient-site *,.clarient-site *::before,.clarient-site *::after){box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#FCF7F1;overflow-x:hidden} /* BACKGROUNDS.md rule 0: the page is a flat, opaque #FCF7F1 on and nothing * else paints it. The marketing shell module puts its own --mkt-paper (white) on * this wrapper, which made every band gradient fade to white instead of * dissolving into the page colour — the hard seams under the hero and between * bands. Transparent here lets the body colour through, as the spec requires. * Doubled class beats the module rule, which is a single class loaded later. */ .clarient-site.clarient-site{background:transparent} .clarient-site.clarient-site{--sans:var(--font-clarient-manrope),Manrope,'Helvetica Neue',Arial,sans-serif;font-family:var(--sans);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.clarient-site a{text-decoration:none}.clarient-site ::selection{background:var(--terra-tint);color:var(--terra-dark)}.clarient-site .container{max-width:1140px;margin:0 auto;padding:0 24px}.clarient-site .center{text-align:center}.clarient-site .kicker{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--terra-kicker);background:var(--peach);border-radius:999px;padding:7px 16px;letter-spacing:.02em}.clarient-site h1{font-size:clamp(38px,5vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}.clarient-site h2.sec{font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.026em;text-wrap:balance}.clarient-site .sub{font-size:18px;color:var(--body);line-height:1.65;text-wrap:pretty}.clarient-site .hi{color:var(--terra)}.clarient-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:15.5px;font-weight:700;padding:14px 26px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:all .2s ease;white-space:nowrap;letter-spacing:-.005em}.clarient-site .btn .ar{transition:transform .2s}.clarient-site .btn:hover .ar{transform:translateX(3px)}.clarient-site .btn-primary{background:var(--terra);color:#fff}.clarient-site .btn-primary:hover{background:var(--terra-dark);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(176,83,50,.3)}.clarient-site .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-2)}.clarient-site .btn-secondary:hover{color:var(--ink);border-color:#C9BEB0;box-shadow:var(--shadow-md);transform:translateY(-1px)}.clarient-site .btn-white{background:#fff;color:var(--terra-dark)}.clarient-site .btn-white:hover{color:var(--terra-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.18)}.clarient-site .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.clarient-site .btn-outline-light:hover{color:#fff;border-color:#fff;transform:translateY(-1px)}.clarient-site .btn-sm{padding:10px 20px;font-size:14.5px;border-radius:10px}.clarient-site .nav-wrap{position:fixed;inset:14px 0 auto;z-index:100;background:transparent;padding:0 20px}.clarient-site .nav{max-width:1120px;margin:0 auto;height:60px;display:flex;align-items:center;gap:8px;padding:0 12px 0 22px;position:relative;background:transparent;border:1px solid transparent;border-radius:16px;transition:background .3s,box-shadow .3s,border-color .3s,backdrop-filter .3s}.clarient-site .nav-wrap.scrolled .nav{background:rgba(253,249,244,.62);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:rgba(255,255,255,.55);box-shadow:0 8px 30px rgba(36,31,26,.08),inset 0 1px 0 rgba(255,255,255,.6)}.clarient-site .nav-links{display:flex;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}.clarient-site .nav{position:relative}.clarient-site .nav-links a{font-size:15px;font-weight:600;color:var(--body);padding:9px 15px;border-radius:9px;transition:color .15s,background .15s}.clarient-site .nav-links a:hover{color:var(--ink);background:var(--tint)}.clarient-site .nav-links a.active{color:var(--ink)}.clarient-site .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}.clarient-site .nav-login{white-space:nowrap;font-size:15px;font-weight:700;color:var(--ink);padding:9px 6px}.clarient-site .nav-login:hover{color:var(--terra)}.clarient-site .hero{position:relative;padding:150px 0 0;overflow:visible}.clarient-site .hero-bg{position:absolute;inset:0;pointer-events:none;background: radial-gradient(92% 460px at 50% -90px,rgba(176,82,49,.10),rgba(176,82,49,0) 72%), linear-gradient(180deg,#F4E7DB 0px,#F8EFE6 340px,rgba(252,247,241,0) 760px)}.clarient-site .hero-inner{position:relative;max-width:820px;margin:0 auto;padding:0 24px;text-align:center}.clarient-site .hero h1{margin:22px 0 20px}.clarient-site .hero .sub{max-width:600px;margin:0 auto 34px}.clarient-site .hero-cta{display:flex;gap:14px;justify-content:center}.clarient-site .hero-note{margin-top:18px;font-size:13.5px;color:var(--soft)}.clarient-site .fx{opacity:1;transform:none}@keyframes fadeUp{to{opacity:1;transform:none}}.clarient-site .collage{position:relative;max-width:1040px;margin:70px auto 0;padding:0 24px 150px}.clarient-site .collage-main{position:relative;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;background:var(--tint);aspect-ratio:16/8.4;z-index:1}.clarient-site .collage-main image-slot{position:absolute;inset:0;width:100%;height:100%}.clarient-site .collage-side{position:absolute;z-index:2;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;background:#fff}.clarient-site .collage-side image-slot{position:absolute;inset:0;width:100%;height:100%}.clarient-site .collage-a{width:min(640px,62%);aspect-ratio:640/416;left:-34px;bottom:34px;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 40px 80px -18px rgba(36,31,26,.35)}.clarient-site .collage-float{position:absolute;z-index:3;right:-6px;top:-26px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px 20px;display:flex;align-items:center;gap:14px;animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.clarient-site .collage-float .ring{width:44px;height:44px;border-radius:50%;flex:none;background:conic-gradient(var(--terra) 0 68%,var(--terra-tint) 68% 100%);display:grid;place-items:center}.clarient-site .collage-float .ring i{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:var(--terra)}.clarient-site .collage-float .fl1{font-size:13.5px;font-weight:800;letter-spacing:-.01em}.clarient-site .collage-float .fl2{font-size:12px;color:var(--soft);font-weight:600}.clarient-site section.sec-pad{padding:96px 0}.clarient-site .sec-head{max-width:640px;margin:0 auto 56px;text-align:center}.clarient-site .sec-head h2{margin:18px 0 14px}.clarient-site .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.16,.8,.3,1),transform .75s cubic-bezier(.16,.8,.3,1)}.clarient-site .reveal.in{opacity:1;transform:none}.clarient-site .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.clarient-site .vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease}.clarient-site .vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.clarient-site .vcard .vic{width:46px;height:46px;border-radius:12px;background:var(--peach);color:var(--terra);display:grid;place-items:center;margin-bottom:20px}.clarient-site .vcard h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:9px}.clarient-site .vcard p{font-size:15px;color:var(--body);line-height:1.6;text-wrap:pretty}.clarient-site .steps-band{background:linear-gradient(180deg,rgba(247,237,227,0) 0,#F7EDE3 240px,#F7EDE3 calc(100% - 240px),rgba(247,237,227,0) 100%)} .clarient-site .steps-band:has(+ .assist-band){background:linear-gradient(180deg,rgba(247,237,227,0) 0,#F7EDE3 240px,#F7EDE3 100%)}.clarient-site .step-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:52px 0}.clarient-site .step-row.flip .step-media{order:-1}.clarient-site .step-num{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;color:var(--terra);margin-bottom:16px;letter-spacing:.06em}.clarient-site .step-num i{font-style:normal;width:30px;height:30px;border-radius:999px;background:var(--terra);color:#fff;display:grid;place-items:center;font-size:13px}.clarient-site .step-row h3{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.022em;line-height:1.15;margin-bottom:13px;text-wrap:balance}.clarient-site .step-row .sp{font-size:16px;color:var(--body);margin-bottom:22px;text-wrap:pretty}.clarient-site .checks{list-style:none;display:flex;flex-direction:column;gap:11px}.clarient-site .checks li{display:flex;gap:12px;font-size:15px;color:var(--body);line-height:1.5}.clarient-site .checks li b{color:var(--ink)}.clarient-site .checks .ck{width:21px;height:21px;flex:none;border-radius:50%;background:var(--terra-tint);color:var(--terra-dark);display:grid;place-items:center;margin-top:2px}.clarient-site .step-media{position:relative}.clarient-site .sm-main image-slot{position:absolute;inset:0;width:100%;height:100%}.clarient-site .step-media:hover .sm-chip{transform:translateY(-6px)}.clarient-site .step-media .blob{display:none}.clarient-site .step-row.flip .step-media .blob{inset:auto auto -34px -30px}.clarient-site .plat-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:42px}.clarient-site .plat-tabs button{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--body);background:none;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;cursor:pointer;transition:all .18s}.clarient-site .plat-tabs button:hover{border-color:var(--line-2);color:var(--ink);background:var(--tint)}.clarient-site .plat-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}.clarient-site .plat-panel{display:none;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);padding:44px 48px}.clarient-site .plat-panel.on{display:grid;animation:fadeUp .5s cubic-bezier(.16,.8,.3,1)}.clarient-site .plat-panel h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:11px}.clarient-site .plat-panel p{font-size:15.5px;color:var(--body);margin-bottom:20px;text-wrap:pretty}.clarient-site .plat-visual{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--tint);aspect-ratio:16/9.4}.clarient-site .plat-visual image-slot{position:absolute;inset:0;width:100%;height:100%}.clarient-site .mini-tags{display:flex;flex-wrap:wrap;gap:8px}.clarient-site .mini-tags span{font-size:12.5px;font-weight:700;color:var(--body);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:6px 13px}.clarient-site .bene-band{background:transparent;color:var(--ink);position:relative}.clarient-site .bene-band .container{position:relative}.clarient-site .bene-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.clarient-site .bcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 38px 30px;box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s}.clarient-site .bcard:hover{box-shadow:var(--shadow-md);border-color:var(--line-2)}.clarient-site .bcard .bh{display:flex;align-items:center;gap:14px;margin-bottom:24px}.clarient-site .bcard .bh .bic{width:44px;height:44px;border-radius:12px;background:var(--peach);color:var(--terra);display:grid;place-items:center;flex:none}.clarient-site .bcard .bh h3{font-size:20px;font-weight:800;letter-spacing:-.015em}.clarient-site .bcard ul{list-style:none;display:flex;flex-direction:column}.clarient-site .bcard li{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--body)}.clarient-site .bcard li b{color:var(--ink);display:block;font-size:15px;margin-bottom:2px}.clarient-site .bcard .ck{width:21px;height:21px;flex:none;border-radius:50%;background:var(--terra-tint);color:var(--terra);display:grid;place-items:center;margin-top:2px}.clarient-site .cta-sec{padding:96px 0 110px}.clarient-site .cta-card{position:relative;overflow:hidden;background:linear-gradient(120deg,#C0603C,#B05231 48%,#8E3F26);border-radius:24px;padding:78px 40px;text-align:center;box-shadow:0 32px 80px -20px rgba(142,63,38,.45)}.clarient-site .cta-card::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:50%;top:-380px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%)}.clarient-site .cta-card>*{position:relative}.clarient-site .cta-card h2{color:#fff;font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.026em;line-height:1.1;max-width:19ch;margin:0 auto 16px;text-wrap:balance}.clarient-site .cta-card p{color:rgba(255,255,255,.86);font-size:17px;max-width:46ch;margin:0 auto 34px;text-wrap:pretty}.clarient-site .cta-actions{display:flex;gap:14px;justify-content:center}.clarient-site footer{border-top:1px solid var(--line);padding:64px 0 36px;background:linear-gradient(180deg,rgba(247,237,227,0),#F7EDE3 70%)}.clarient-site .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}.clarient-site .foot-tag{margin-top:16px;font-size:14.5px;color:var(--body);max-width:30ch;line-height:1.6}.clarient-site .foot-col h5{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin-bottom:15px}.clarient-site .foot-col a{display:block;font-size:14.5px;font-weight:600;color:var(--body);padding:5px 0}.clarient-site .foot-col a:hover{color:var(--terra)}.clarient-site .foot-base{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--line-2);font-size:13px;color:var(--soft);flex-wrap:wrap} @media (max-width:980px){.clarient-site .trio{grid-template-columns:1fr}.clarient-site .step-row{grid-template-columns:1fr;gap:48px}.clarient-site .step-row.flip .step-media{order:0}.clarient-site .plat-panel{grid-template-columns:1fr;gap:30px;padding:30px}.clarient-site .bene-cards{grid-template-columns:1fr}.clarient-site .collage-a{left:8px}.clarient-site .collage-float{right:8px} } @media (max-width:720px){.clarient-site .nav-links{display:none}.clarient-site .hero{padding-top:120px}.clarient-site .hero-cta,.clarient-site .cta-actions{flex-direction:column;align-items:center}.clarient-site section.sec-pad{padding:70px 0}.clarient-site .foot-grid{grid-template-columns:1fr 1fr}.clarient-site .collage-a,.clarient-site .collage-float,.clarient-site .collage-ai{display:none} } @media (prefers-reduced-motion:reduce){.clarient-site *,.clarient-site *::before,.clarient-site *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}html{scroll-behavior:auto}.clarient-site .fx,.clarient-site .reveal{opacity:1;transform:none} } .clarient-site .snbar{flex:none;position:relative;display:flex;align-items:center;justify-content:center;height:30px;background:var(--cr2);border-bottom:1px solid var(--ln)}.clarient-site .sndots{position:absolute;left:14px;display:flex;gap:6px}.clarient-site .sndots i{width:9px;height:9px;border-radius:50%;background:#DBCFB8}.clarient-site .snurl{display:inline-flex;align-items:center;gap:6px;background:#FFFDF7;border:1px solid var(--ln);border-radius:999px;font:500 9.5px var(--mo);color:var(--i3);padding:3.5px 14px;white-space:nowrap}.clarient-site .snurl svg{width:9px;height:9px}.clarient-site .snhead{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px 9px}.clarient-site .snkick{display:block;font:700 8.5px var(--mo);letter-spacing:.15em;color:var(--i4);text-transform:uppercase;margin-bottom:3px;white-space:nowrap}.clarient-site .snh{font:600 18px/1.1 var(--sf);letter-spacing:-.01em;white-space:nowrap}.clarient-site .snc{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font:600 9.5px var(--mo);white-space:nowrap}.clarient-site .snc.g{background:var(--sgs);color:#42583E}.clarient-site .snc.y{background:var(--gds);color:#7A5C1B}.clarient-site .snc.r{background:var(--trs);color:var(--trd)}.clarient-site .snc.n{background:var(--cr2);color:var(--i3)}.clarient-site .snbanner{flex:none;display:flex;align-items:center;gap:8px;margin:0 16px 9px;background:#EEF3E6;border:1px solid #D5E0C6;border-radius:9px;padding:5.5px 11px;font-size:10px;color:#42583E;white-space:nowrap;overflow:hidden}.clarient-site .snbanner b{color:#32452F}.clarient-site .snbanner>span:last-child{overflow:hidden;text-overflow:ellipsis}.clarient-site .snbanner .bk{width:15px;height:15px;border-radius:50%;background:#FFFDF7;color:var(--sg);display:grid;place-items:center;flex:none;font-size:8.5px;border:1px solid #D5E0C6}.clarient-site .snt{width:100%;border-collapse:collapse}.clarient-site .snt th{font:700 8px var(--mo);letter-spacing:.1em;text-transform:uppercase;color:var(--i4);text-align:left;padding:5.5px 16px;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:#FBF7EE;white-space:nowrap}.clarient-site .snt td{padding:6px 16px;border-bottom:1px solid var(--lns);font-size:11.5px;vertical-align:middle;white-space:nowrap}.clarient-site .snt .num{font:500 10.5px var(--mo);text-align:right;white-space:nowrap}.clarient-site .snt th.num{text-align:right}.clarient-site .snhold{display:flex;align-items:center;gap:9px}.clarient-site .sna{width:24px;height:24px;border-radius:7px;display:block;line-height:24px;text-align:center;font:700 9px/24px 'Inter',sans-serif;flex:none}.clarient-site .snhold b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.clarient-site .snhold span{display:block;font-size:9.5px;color:var(--i4);white-space:nowrap}.clarient-site .sng{color:var(--sg)}.clarient-site .snr2{color:var(--tr)}.clarient-site .sned{flex:1;display:flex;min-height:0}.clarient-site .sndoc{flex:1.45;padding:14px 18px;min-width:0}.clarient-site .snmeta{display:flex;align-items:center;gap:6px;margin-bottom:10px}.clarient-site .snmeta small{margin-left:auto;font:500 9px var(--mo);color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.clarient-site .sndoc h4{font:600 17.5px/1.25 var(--sf);letter-spacing:-.01em;margin-bottom:9px}.clarient-site .sndoc p{font-size:10.5px;line-height:1.6;color:var(--i2);margin-bottom:8px;text-wrap:pretty}.clarient-site .snhl{background:var(--gds);border-bottom:1.5px dashed var(--gd);padding:0 2px}.clarient-site .snrail{flex:1;border-left:1px solid var(--ln);background:#FBF7EE;padding:13px 15px;display:flex;flex-direction:column;gap:8px;min-width:0}.clarient-site .snrail .snkick{margin:4px 0 1px}.clarient-site .snck{display:flex;gap:8px;align-items:flex-start;font-size:10px;line-height:1.45;color:var(--i2)}.clarient-site .snck b{font-weight:600;color:var(--i1)}.clarient-site .snck .ic{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:8.5px;font-weight:800;margin-top:1px}.clarient-site .snck .ic.g{background:var(--sgs);color:#42583E}.clarient-site .snck .ic.y{background:var(--gds);color:#7A5C1B}.clarient-site .sntgl{margin-left:auto;flex:none;width:26px;height:15px;border-radius:999px;background:var(--sg);position:relative}.clarient-site .sntgl::after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#fff}.clarient-site .sntgl.off{background:#D9CCB0}.clarient-site .sntgl.off::after{right:auto;left:2px}.clarient-site .snchan{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;white-space:nowrap}.clarient-site .snchan>span:first-child{overflow:hidden;text-overflow:ellipsis}.clarient-site .snchan small{font:500 9px var(--mo);color:var(--i4);flex:none}.clarient-site .snfrow{display:flex;align-items:center;gap:7px;margin:0 16px 6px;background:#FBF7EE;border:1px solid var(--lns);border-radius:9px;padding:6px 11px;font-size:10.5px;color:var(--i2);white-space:nowrap;overflow:hidden}.clarient-site .snfrow b{font:600 10px var(--mo);color:var(--i1)}.clarient-site .snand{margin-left:auto;font:700 8px var(--mo);letter-spacing:.1em;color:var(--i4)}.clarient-site .snmatch{margin:2px 16px 0;border-top:1px solid var(--ln);padding-top:8px}.clarient-site .snmbar{display:flex;height:11px;border-radius:6px;overflow:hidden;gap:2px;margin:7px 0 6px}.clarient-site .snmbar i{border-radius:3px}.clarient-site .snmleg{display:flex;gap:14px;font-size:9.5px;color:var(--i3);font-weight:600;white-space:nowrap}.clarient-site .snmleg i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:-1px}.clarient-site .snsched{display:flex;align-items:center;gap:8px;margin:8px 16px 0;padding:8px 0 0;border-top:1px solid var(--lns);font-size:10px;color:var(--i2);white-space:nowrap;overflow:hidden}.clarient-site .snbtn{display:inline-flex;align-items:center;gap:6px;background:var(--tr);color:#FFF6EE;font:600 10.5px 'Inter',sans-serif;border-radius:8px;padding:6px 12px;white-space:nowrap;margin-left:auto;flex:none}.clarient-site .snkpis{flex:none;display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}.clarient-site .snkpi{padding:8px 16px 9px;border-right:1px solid var(--lns)}.clarient-site .snkpi:last-child{border-right:none}.clarient-site .snkpi label{display:block;font:700 8px var(--mo);letter-spacing:.12em;color:var(--i4);text-transform:uppercase;margin-bottom:4px;white-space:nowrap}.clarient-site .snkpi b{font:600 19px/1 var(--sf);letter-spacing:-.01em}.clarient-site .snkpi b small{font:600 12px var(--sf);color:var(--i3)}.clarient-site .snkpi span{display:block;font-size:9px;color:var(--i4);margin-top:3px;white-space:nowrap}.clarient-site .snkpi .up{color:var(--sg);font-weight:700}.clarient-site .snbody{flex:1;display:flex;min-height:0}.clarient-site .snchart{flex:1.4;padding:10px 4px 8px 16px;display:flex;flex-direction:column;min-width:0}.clarient-site .snchart svg{flex:1;width:100%;min-height:0}.clarient-site .snx{display:flex;justify-content:space-between;font:500 8px var(--mo);color:var(--i4);padding-right:14px;margin-top:4px}.clarient-site .sntiers{flex:1;border-left:1px solid var(--ln);background:#FBF7EE;padding:10px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}.clarient-site .sntier label{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--i2);margin-bottom:3px;white-space:nowrap}.clarient-site .sntier label b{font:600 10px var(--mo)}.clarient-site .sntier .tb{height:9px;border-radius:5px;background:var(--cr2);position:relative;overflow:hidden}.clarient-site .orsug{display:flex;align-items:center;gap:7px;margin:0 16px 8px;background:#F2DECE;border-radius:9px;padding:6px 10px;font-size:9.5px;color:#8A3F22;white-space:nowrap;overflow:hidden}.clarient-site .orsug em{font-style:normal;overflow:hidden;text-overflow:ellipsis}.clarient-site .orsug .ub{margin-left:auto;flex:none;background:#B05332;color:#FFF6EE;border-radius:7px;font:600 8.5px 'Inter',sans-serif;padding:4px 9px}.clarient-site .orgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 16px}.clarient-site .orseg{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1.5px solid var(--ln);border-radius:10px;background:#FFFDF7;min-width:0}.clarient-site .orseg.on{border-color:#B05332;background:#F8E9DC}.clarient-site .orseg .rad{width:12px;height:12px;border-radius:50%;border:2px solid #CFC5B0;flex:none}.clarient-site .orseg.on .rad{border-color:#B05332;background:#B05332;box-shadow:inset 0 0 0 2px #F8E9DC}.clarient-site .orseg>div{flex:1;min-width:0}.clarient-site .orseg b{display:block;font-size:9.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .orseg small{display:block;font-size:8px;color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .orseg .cnt{flex:none;text-align:right}.clarient-site .orseg .cnt b{font:500 13px var(--sf);letter-spacing:-.01em}.clarient-site .orseg .cnt small{font-size:7px;white-space:nowrap;overflow:visible;text-overflow:clip}.clarient-site .orcustom{display:flex;align-items:center;gap:8px;margin:8px 16px 0;padding:6.5px 10px;border:1.5px dashed #D9CCB0;border-radius:10px;min-width:0}.clarient-site .orcustom .pic{width:22px;height:22px;border-radius:7px;background:#F2DECE;color:#B05332;display:flex;align-items:center;justify-content:center;flex:none}.clarient-site .orcustom .pic svg{width:11px;height:11px}.clarient-site .orcustom b{display:block;font-size:9.5px;font-weight:600}.clarient-site .orcustom small{display:block;font-size:8px;color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .orcustom .ar{margin-left:auto;flex:none;color:var(--i4);font-size:11px}.clarient-site .inskpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:0 16px 8px}.clarient-site .inskpi{background:#FFFDF7;border:1px solid var(--ln);border-radius:10px;padding:7px 9px 8px;box-shadow:0 1px 2px rgba(70,55,35,.04);min-width:0}.clarient-site .inskpi .ik{display:flex;align-items:center;gap:5px;margin-bottom:5px;white-space:nowrap;overflow:hidden}.clarient-site .inskpi .ik i{width:15px;height:15px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex:none}.clarient-site .inskpi .ik i svg{width:8.5px;height:8.5px}.clarient-site .inskpi .ik label{font:700 6.5px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--i4)}.clarient-site .inskpi b{font:500 16px var(--sf);letter-spacing:-.02em}.clarient-site .inskpi span{display:block;font-size:7.5px;color:var(--i4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .instbl{margin:0 16px;border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:#FFFDF7}.clarient-site .instbl .ith{display:flex;align-items:center;gap:8px;padding:4.5px 10px;background:#FBF7EE;border-bottom:1px solid var(--ln);font:700 6.5px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--i4)}.clarient-site .instbl .itr{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--lns)}.clarient-site .instbl .itr:first-of-type{border-top:none}.clarient-site .itc1{flex:1.35;min-width:0}.clarient-site .itc1 b{display:block;font-size:9px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .itc1 small{display:block;font-size:7.5px;color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .itcb{flex:1;display:flex;align-items:center;gap:5px;min-width:0}.clarient-site .itcb .cb{flex:1;height:5px;background:var(--cr2);border-radius:3px;overflow:hidden}.clarient-site .itcb .cb i{display:block;height:100%;background:#B05332;border-radius:3px}.clarient-site .itcb em{font:600 8.5px var(--mo);font-style:normal;width:24px;text-align:right;flex:none}.clarient-site .itn{width:38px;text-align:right;font:600 8.5px var(--mo);flex:none}.clarient-site .itn.sg{color:#5F7A5A;width:38px}.clarient-site .itn.pl{color:#7A4F6B;width:34px}.clarient-site .instbl .ith .itn,.clarient-site .instbl .ith .itc1,.clarient-site .instbl .ith .itcb{white-space:nowrap;overflow:visible}.clarient-site .sntier .tb i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--tr);opacity:.92}.clarient-site .sntier .tb i.gd{background:var(--gd)}.clarient-site .sntier .tb i.mu{background:#CFC5B0} .clarient-site .icx{--pp:#FAF6EF;--sf1:#FFFFFF;--sf2:#F4EEE3;--wl:#F7F1E7;--k1:#221C15;--k2:#574E41;--k3:#8A8071;--k4:#B6AB98;--l1:#ECE3D4;--l2:#F2EBDD;--l3:#DDD1BD;--br:#B0512F;--brd:#8C3F22;--brs:#F2DDD0;--brt:#FBEEE3;--up2:#4C6E3E;--ups:#E7EEDC;--se:'Manrope','Helvetica Neue',Arial,sans-serif;--dm:'Inter',system-ui,sans-serif;background:var(--pp);color:var(--k1);font-family:var(--dm)}.clarient-site .ictop{flex:none;display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--l1);background:rgba(250,246,239,.95)}.clarient-site .icmark{width:26px;height:26px;border-radius:7px;background:var(--k1);color:var(--pp);display:grid;place-items:center;flex:none}.clarient-site .icmark svg{width:15px;height:15px}.clarient-site .icbrand b{display:block;font-size:11.5px;font-weight:700;letter-spacing:-.01em;line-height:1.05;white-space:nowrap}.clarient-site .icbrand span{display:block;font-size:8px;letter-spacing:.12em;color:var(--k3);font-weight:600;margin-top:1px}.clarient-site .ictabs{display:flex;gap:2px;margin:0 auto}.clarient-site .ictab{padding:4px 8px;border-radius:7px;font-size:9px;font-weight:600;color:var(--k3);white-space:nowrap}.clarient-site .ictab.on{color:var(--brd);background:var(--brt)}.clarient-site .ictab i{font-style:normal;font-size:8px;font-weight:700;color:var(--k4);background:var(--sf2);padding:0 5px;border-radius:99px;margin-left:4px}.clarient-site .ictab.on i{background:#fff;color:var(--brd)}.clarient-site .icbtn{display:inline-flex;align-items:center;background:var(--br);color:#fff;font-size:9px;font-weight:600;border-radius:99px;padding:4.5px 10px;white-space:nowrap;flex:none}.clarient-site .icbtn.soft{background:var(--sf2);color:var(--k1);border:1px solid var(--l1)}.clarient-site .icmast{flex:1;min-height:0;display:grid;grid-template-columns:1fr 182px;gap:16px;align-items:center;padding:12px 18px}.clarient-site .iceye{display:inline-flex;align-items:center;gap:6px;font-size:8px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--k3);white-space:nowrap}.clarient-site .iceye::before{content:"";width:5px;height:5px;border-radius:2px;background:var(--br)}.clarient-site .ich1{font-family:var(--se);font-weight:400;font-size:21px;line-height:1.12;letter-spacing:-.015em;margin:7px 0 6px}.clarient-site .icsub{font-size:10px;line-height:1.45;color:var(--k2);max-width:46ch}.clarient-site .iccta{display:flex;gap:6px;margin-top:8px}.clarient-site .icpx{background:var(--sf1);border:1px solid var(--l1);border-radius:12px;padding:9px 11px;box-shadow:0 1px 2px rgba(60,46,32,.05)}.clarient-site .icpxid{font-size:8px;font-weight:600;letter-spacing:.08em;color:var(--k3);text-transform:uppercase;white-space:nowrap}.clarient-site .icpxid .ex{color:var(--k4)}.clarient-site .icpxnow{display:flex;align-items:baseline;gap:7px;margin:4px 0 1px}.clarient-site .icpxbig{font-family:var(--se);font-size:26px;line-height:.95;letter-spacing:-.02em}.clarient-site .icdelta{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--up2);white-space:nowrap}.clarient-site .icdelta svg{width:9px;height:9px}.clarient-site .icnews{flex:1;min-height:0;margin:0 16px;border-top:1px solid var(--l1);padding-top:6px;display:flex;flex-direction:column;overflow:hidden}.clarient-site .icnh{flex:none;display:flex;align-items:center;justify-content:space-between;font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--k3);margin-bottom:1px;white-space:nowrap}.clarient-site .icnh a{color:var(--brd);font-weight:700}.clarient-site .icnr{display:flex;align-items:center;gap:9px;padding:5px 0;border-top:1px solid var(--l2)}.clarient-site .icnr:first-of-type{border-top:none}.clarient-site .icdate{width:30px;height:32px;border-radius:8px;background:var(--wl);border:1px solid var(--l1);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}.clarient-site .icnr.ps .icdate{background:var(--brt);border-color:var(--brs)}.clarient-site .icdate .d{font-family:var(--se);font-size:14px;line-height:.8;color:var(--k1)}.clarient-site .icdate .m{font-size:6.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--k4);font-weight:700;margin-top:2px}.clarient-site .icnr .tt{flex:1;min-width:0}.clarient-site .icnr .tt b{display:block;font-size:10px;font-weight:600;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icnr .tt span{display:block;font-size:8.5px;color:var(--k4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icbadge{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:7.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2.5px 7px;border-radius:99px;border:1px solid transparent;white-space:nowrap}.clarient-site .icbadge.ps{background:var(--brt);color:var(--brd);border-color:var(--brs)}.clarient-site .icbadge.up{background:var(--ups);color:var(--up2)}.clarient-site .icbadge.nn{background:var(--sf2);color:var(--k3);border-color:var(--l1)}.clarient-site .icsubbar{flex:none;display:flex;align-items:center;gap:8px;margin:0 16px;padding:7px 0 10px;border-top:1px solid var(--l1)}.clarient-site .icsubbar .tx{flex:1;min-width:0}.clarient-site .icsubbar .tx b{display:block;font-size:10px;font-weight:700;white-space:nowrap}.clarient-site .icsubbar .tx span{display:block;font-size:8.5px;color:var(--k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icfld{display:flex;align-items:center;background:var(--sf1);border:1px solid var(--l3);border-radius:99px;padding:0 4px 0 11px;height:25px;gap:6px;flex:none}.clarient-site .icrng{display:flex;gap:2px;flex:none}.clarient-site .icrng i{font-style:normal;font-size:7.5px;font-weight:700;color:var(--k4);padding:2.5px 6px;border-radius:6px}.clarient-site .icrng i.on{background:var(--brt);color:var(--brd)}.clarient-site .icqmeta{font-size:7.5px;color:var(--k4);font-weight:600;margin-top:2px;white-space:nowrap}.clarient-site .icxlab{display:flex;justify-content:space-between;font-size:6.5px;color:var(--k4);font-weight:600;margin-top:2px}.clarient-site .icproof{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 18px 42px;padding:10px 0 0;border-top:1px solid var(--l1)}.clarient-site .icpf{display:flex;align-items:center;gap:7px;min-width:0}.clarient-site .icpf .pic{width:22px;height:22px;border-radius:7px;background:var(--wl);border:1px solid var(--l1);color:var(--brd);display:grid;place-items:center;flex:none}.clarient-site .icpf .pic svg{width:11px;height:11px}.clarient-site .icpf b{display:block;font-size:8.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icpf span span{display:block;font-size:7.5px;color:var(--k3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icpf>span{min-width:0}.clarient-site .icbot{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin:0 16px 12px}.clarient-site .icnext{background:var(--k1);color:var(--pp);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden}.clarient-site .icnext .k{display:flex;align-items:center;gap:5px;font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#D9A88F;white-space:nowrap}.clarient-site .icnext .k .dot{width:5px;height:5px;border-radius:2px;background:var(--br);flex:none}.clarient-site .icnext .h{font-family:var(--se);font-size:14px;letter-spacing:-.01em;margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icnext .m{font-size:8px;line-height:1.35;color:rgba(250,246,239,.66);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.clarient-site .icfollow{background:var(--sf1);border:1px solid var(--l1);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}.clarient-site .icfollow b{font-size:9.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .icfollow span{font-size:7.5px;color:var(--k3);margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd{position:absolute;inset:0;display:flex;flex-direction:column;background:#FBFAF7;color:#26221C;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;--sb:#F4F1EA;--pp:#FFFFFF;--ln:#E9E4DA;--lns:#F0ECE3;--i1:#26221C;--i2:#4D4538;--i3:#7A6F5E;--i4:#A89E8B;--tr:#B0512F;--trs:#F2DECE;--trd:#8A3F22;--sg:#5F7A5A;--gd:#B88A2B;--sf:'Manrope','Helvetica Neue',Arial,sans-serif;--mo:'Inter',system-ui,sans-serif}.clarient-site .hd svg{display:block}.clarient-site .hd-top{flex:none;height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--ln);background:#FFFEFC}.clarient-site .hd-lg{display:flex;align-items:center;gap:7px;margin-right:8px}.clarient-site .hd-lg i{width:25px;height:25px;border-radius:8px;background:var(--tr);color:#fff;display:grid;place-items:center;font:700 13px 'Manrope',sans-serif;font-style:normal}.clarient-site .hd-lg b{font:800 13.5px 'Manrope',sans-serif;letter-spacing:-.015em}.clarient-site .hd-search{display:flex;align-items:center;gap:7px;width:215px;height:29px;background:var(--sb);border:1px solid var(--lns);border-radius:9px;padding:0 9px;color:var(--i4);font-size:10px}.clarient-site .hd-search svg{width:11px;height:11px;flex:none}.clarient-site .hd-search span{flex:1;white-space:nowrap;overflow:hidden}.clarient-site .hd-search kbd{font:500 8px var(--mo);border:1px solid var(--ln);border-radius:4px;padding:1px 4px;background:#fff;color:var(--i4)}.clarient-site .hd-pill{margin-left:auto;display:flex;align-items:center;gap:8px;height:31px;border:1px solid var(--ln);border-radius:10px;padding:0 11px;background:var(--pp)}.clarient-site .hd-pill .st{display:flex;align-items:center;gap:5px;font:600 8px 'Inter',sans-serif;letter-spacing:.06em;color:var(--i3);text-transform:uppercase;white-space:nowrap}.clarient-site .hd-pill .st i{width:6px;height:6px;border-radius:50%;background:var(--sg)}.clarient-site .hd-pill b{font:700 9.5px var(--mo);letter-spacing:.03em}.clarient-site .hd-pill .v{font-size:10.5px}.clarient-site .hd-pill em{font:600 9px var(--mo);font-style:normal;color:var(--sg);white-space:nowrap}.clarient-site .hd-tic{position:relative;color:var(--i3);display:inline-flex;margin-left:3px}.clarient-site .hd-tic svg{width:14px;height:14px}.clarient-site .hd-tic em{position:absolute;top:-5px;right:-5px;min-width:12px;height:12px;border-radius:99px;background:var(--gd);color:#fff;font:700 7px 'Inter',sans-serif;font-style:normal;display:grid;place-items:center;padding:0 3px}.clarient-site .hd-av{display:flex;align-items:center;gap:6px;font:700 10px 'Inter',sans-serif;margin-left:4px;white-space:nowrap}.clarient-site .hd-av i{width:24px;height:24px;border-radius:50%;background:var(--trs);color:var(--trd);display:grid;place-items:center;font:700 8.5px 'Inter',sans-serif;font-style:normal}.clarient-site .hd-av svg{width:9px;height:9px;color:var(--i4)}.clarient-site .hd-wrap{flex:1;display:flex;min-height:0}.clarient-site .hd-side{width:170px;flex:none;background:var(--sb);border-right:1px solid var(--ln);padding:8px 9px;display:flex;flex-direction:column}.clarient-site .hd-sg{font:700 7.5px 'Inter',sans-serif;letter-spacing:.13em;color:var(--i4);text-transform:uppercase;padding:9px 8px 4px}.clarient-site .hd-si{display:flex;align-items:center;gap:8px;padding:5.5px 8px;border-radius:8px;font-size:10.5px;font-weight:600;color:var(--i2);white-space:nowrap}.clarient-site .hd-si svg{width:12.5px;height:12.5px;color:var(--i3);flex:none}.clarient-site .hd-si span{flex:1;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-si.on{background:#fff;color:var(--i1);font-weight:700;box-shadow:0 1px 2px rgba(70,55,35,.08)}.clarient-site .hd-si.on svg{color:var(--tr)}.clarient-site .hd-si em{margin-left:auto;font:600 8.5px var(--mo);font-style:normal;color:var(--i3);background:#ECE6DA;border-radius:99px;min-width:16px;height:15px;display:grid;place-items:center;padding:0 4px}.clarient-site .hd-si em.t{background:var(--tr);color:#FFF6EE}.clarient-site .hd-co{margin-top:auto;display:flex;align-items:center;gap:7px;padding:9px 8px 4px;border-top:1px solid var(--ln)}.clarient-site .hd-co i{width:24px;height:24px;border-radius:7px;background:var(--i1);color:#fff;display:grid;place-items:center;font:700 8.5px 'Inter',sans-serif;font-style:normal;flex:none}.clarient-site .hd-co div{min-width:0}.clarient-site .hd-co b{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-co span{display:block;font:600 7px var(--mo);letter-spacing:.08em;color:var(--i4)}.clarient-site .hd-body{flex:1;display:flex;flex-direction:column;padding:13px 16px 0 54px;min-width:0;overflow:hidden}.clarient-site .hd-kick{font:600 8px var(--mo);letter-spacing:.14em;color:var(--i4)}.clarient-site .hd-hero{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px}.clarient-site .hd-hero>div:first-child{flex:1;min-width:0}.clarient-site .hd-h1{font:600 24px/1.1 var(--sf);letter-spacing:-.01em;margin:5px 0 4px}.clarient-site .hd-brief{font-size:9.5px;line-height:1.45;color:var(--i3);max-width:60ch}.clarient-site .hd-brief b{color:var(--i2)}.clarient-site .hd-brief .up{color:var(--sg);font-weight:700}.clarient-site .hd-act{display:flex;gap:6px;flex:none;padding-bottom:3px}.clarient-site .hd-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--ln);background:var(--pp);font:600 9.5px 'Inter',sans-serif;color:var(--i2);white-space:nowrap;box-shadow:0 1px 2px rgba(70,55,35,.04)}.clarient-site .hd-btn.t{background:var(--tr);border-color:var(--tr);color:#FFF6EE}.clarient-site .hd-nudges{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:8px}.clarient-site .hd-nudge{display:flex;align-items:center;gap:9px;background:var(--pp);border:1px solid var(--ln);border-left:3px solid var(--tr);border-radius:10px;padding:7px 11px;box-shadow:0 1px 2px rgba(70,55,35,.04);min-width:0}.clarient-site .hd-nudge.y{border-left-color:var(--gd)}.clarient-site .hd-nudge .nq{width:21px;height:21px;border-radius:7px;background:var(--trs);color:var(--trd);display:grid;place-items:center;flex:none;font:600 10px var(--sf)}.clarient-site .hd-nudge.y .nq{background:#F2E6C7;color:#7A5C1B}.clarient-site .hd-nudge>div{min-width:0}.clarient-site .hd-nudge b{display:block;font-size:10px;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-nudge span{display:block;font-size:8.5px;color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-nudge .go{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;border:1px solid var(--ln);background:var(--pp);font:600 8.5px 'Inter',sans-serif;color:var(--i2);white-space:nowrap}.clarient-site .hd-nudge .x{color:var(--i4);flex:none;font-size:10px;font-weight:600}.clarient-site .hd-sglbl{display:flex;align-items:baseline;gap:6px;font:700 8px 'Inter',sans-serif;letter-spacing:.12em;color:var(--i3);text-transform:uppercase;margin-bottom:6px}.clarient-site .hd-sglbl .mr{margin-left:auto;color:var(--i4);letter-spacing:.02em;text-transform:none;font-weight:600;white-space:nowrap}.clarient-site .hd-sigs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:9px}.clarient-site .hd-sig{position:relative;background:var(--pp);border:1px solid var(--ln);border-radius:11px;padding:9px 10px 8px;min-width:0;box-shadow:0 1px 2px rgba(70,55,35,.05)}.clarient-site .hd-sig.hot{border-top:2.5px solid var(--gd);background:linear-gradient(180deg,#FCF7EA,#FFFFFF 62%)}.clarient-site .hd-sig label{display:block;font:700 7px 'Inter',sans-serif;letter-spacing:.1em;color:var(--i3);text-transform:uppercase;margin:0 13px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-sig b{font:600 18px/1 var(--sf);letter-spacing:-.01em}.clarient-site .hd-sig>span{display:block;font-size:8px;color:var(--i4);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-sig .g{color:var(--sg);font-weight:700}.clarient-site .hd-sig .r{color:var(--trd);font-weight:700}.clarient-site .hd-sig .tick{position:absolute;top:6px;right:6px;width:13px;height:13px;border-radius:50%;border:1px solid var(--lns);color:#C9C0AE;display:grid;place-items:center}.clarient-site .hd-sig .tick svg{width:7px;height:7px}.clarient-site .hd-sig svg.sp{position:absolute;right:7px;bottom:7px;width:44px;height:15px}.clarient-site .hd-row{flex:1;min-height:0;display:grid;grid-template-columns:1.55fr 1fr;gap:9px}.clarient-site .hd-spx,.clarient-site .hd-qq{background:var(--pp);border:1px solid var(--ln);border-radius:11px 11px 0 0;border-bottom:none;padding:8px 13px 0;min-width:0;overflow:hidden}.clarient-site .hd-spx{display:flex;flex-direction:column}.clarient-site .hd-spx .top{display:flex;align-items:flex-start;gap:8px}.clarient-site .hd-spx .big{font:600 25px/1 var(--sf);letter-spacing:-.01em}.clarient-site .hd-spx .chg{font:600 9px var(--mo);color:var(--sg);margin-top:4px;white-space:nowrap}.clarient-site .hd-ranges{display:flex;gap:2px;background:var(--sb);border:1px solid var(--lns);border-radius:7px;padding:2px;margin-left:auto;flex:none}.clarient-site .hd-ranges i{font:600 8px var(--mo);font-style:normal;color:var(--i3);padding:2.5px 7px;border-radius:5px}.clarient-site .hd-ranges i.on{background:var(--pp);color:var(--i1);box-shadow:0 1px 2px rgba(70,55,35,.08)}.clarient-site .hd-chips{display:flex;gap:5px;align-items:center;margin-top:9px}.clarient-site .hd-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border:1px solid var(--ln);border-radius:99px;font:600 8px 'Inter',sans-serif;color:var(--i2);background:var(--pp);white-space:nowrap}.clarient-site .hd-chip i{font-style:normal;color:var(--i4);font-weight:600}.clarient-site .hd-chip em{font-style:normal;background:var(--tr);color:#fff;border-radius:99px;min-width:12px;height:12px;display:grid;place-items:center;font:700 7px 'Inter',sans-serif}.clarient-site .hd-chips small{margin-left:auto;font:600 7.5px 'Inter',sans-serif;color:var(--i4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-spx svg.ch{width:100%;flex:1;min-height:0;height:auto;margin-top:9px}.clarient-site .hd-read{display:flex;gap:9px;margin-top:6px;border-top:1px solid var(--lns);padding-top:7px;align-items:flex-start}.clarient-site .hd-read .ri{width:20px;height:20px;border-radius:7px;background:var(--trs);color:var(--trd);display:grid;place-items:center;font-size:10px;flex:none}.clarient-site .hd-read b{display:block;font:700 8.5px 'Inter',sans-serif;letter-spacing:.02em}.clarient-site .hd-read p{font-size:8.5px;line-height:1.5;color:var(--i3);margin-top:2px;text-wrap:pretty}.clarient-site .hd-sxf{display:flex;margin-top:8px;border-top:1px solid var(--lns);padding-top:7px}.clarient-site .hd-sxf div{flex:1;padding:0 12px;border-left:1px solid var(--lns);min-width:0}.clarient-site .hd-sxf div:first-child{border-left:none;padding-left:2px}.clarient-site .hd-sxf label{display:block;font:700 6.5px 'Inter',sans-serif;letter-spacing:.1em;color:var(--i4);text-transform:uppercase;margin-bottom:3px;white-space:nowrap}.clarient-site .hd-sxf b{font:500 9.5px var(--mo);white-space:nowrap}.clarient-site .hd-qq .qh{display:flex;align-items:baseline;gap:7px;margin-bottom:1px}.clarient-site .hd-qq .qt{font:600 13px var(--sf);white-space:nowrap}.clarient-site .hd-qq a{margin-left:auto;font:700 8.5px 'Inter',sans-serif;color:var(--tr);white-space:nowrap}.clarient-site .hd-qq .qs{font-size:8px;color:var(--i4);margin-bottom:2px}.clarient-site .hd-qr{display:flex;gap:7px;padding:4.5px 0;border-top:1px solid var(--lns);align-items:flex-start}.clarient-site .hd-qr .qd{width:5px;height:5px;border-radius:50%;background:var(--tr);margin-top:4px;flex:none}.clarient-site .hd-qr>div{flex:1;min-width:0}.clarient-site .hd-qr p{font-size:9px;font-weight:600;line-height:1.35}.clarient-site .hd-qr .dt{display:block;font-size:7.5px;color:var(--i4);font-weight:500;margin-top:1px}.clarient-site .hd-qr .uv{margin-left:auto;flex:none;font:600 8px var(--mo);color:var(--i3);background:var(--sb);border:1px solid var(--lns);border-radius:99px;padding:1.5px 6px}.clarient-site .hd-pr{display:flex;gap:8px;padding:4.5px 0;border-top:1px solid var(--lns);align-items:center}.clarient-site .hd-pr .pi{width:21px;height:21px;border-radius:7px;background:var(--trs);color:var(--trd);display:grid;place-items:center;font:600 10.5px var(--sf);flex:none}.clarient-site .hd-pr .pi.g{background:#DCE5CF;color:#42583E}.clarient-site .hd-pr>div{flex:1;min-width:0}.clarient-site .hd-pr p{font-size:9px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-pr .dt{display:block;font-size:7.5px;color:var(--i4);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .hd-pr .chp{margin-left:auto;flex:none;font:700 7.5px 'Inter',sans-serif;color:var(--trd);background:var(--trs);border-radius:99px;padding:3px 9px}.clarient-site .collage-ai{position:absolute;z-index:3;right:-8px;bottom:76px;width:232px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;font-family:'Inter',system-ui,sans-serif;color:#26221C}.clarient-site .collage-ai .aih{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #F0ECE3}.clarient-site .collage-ai .aih i{width:19px;height:19px;border-radius:6px;background:#B0512F;color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px}.clarient-site .collage-ai .aih b{font-size:10px;letter-spacing:-.01em}.clarient-site .collage-ai .aih em{margin-left:auto;display:flex;align-items:center;gap:4px;font:600 7.5px 'Inter',sans-serif;font-style:normal;color:#5F7A5A}.clarient-site .collage-ai .aih em::before{content:"";width:5px;height:5px;border-radius:50%;background:#5F7A5A}.clarient-site .collage-ai .aib{padding:9px 10px;display:flex;flex-direction:column;gap:6px}.clarient-site .collage-ai .msg{max-width:92%;border-radius:11px;padding:6px 9px;font-size:8.5px;line-height:1.45;white-space:normal;overflow:visible;height:auto}.clarient-site .collage-ai .msg.u{align-self:flex-end;background:#26221C;color:#FFFDF7;border-bottom-right-radius:3px}.clarient-site .collage-ai .msg.a{align-self:flex-start;background:#F4F1EA;border:1px solid #F0ECE3;border-bottom-left-radius:3px;color:#4D4538}.clarient-site .collage-ai .msg.a b{color:#26221C}.clarient-site .collage-ai .aif{display:flex;align-items:center;gap:6px;margin:0 10px 10px;height:27px;border:1px solid #E9E4DA;border-radius:99px;padding:0 5px 0 10px;color:#7A736A;font-size:8.5px}.clarient-site .collage-ai .aif span{flex:1;white-space:nowrap;overflow:hidden}.clarient-site .collage-ai .aif i{width:19px;height:19px;border-radius:50%;background:#B0512F;color:#fff;display:grid;place-items:center;font-style:normal;flex:none}.clarient-site .collage-ai .aif i svg{width:9px;height:9px;display:block}.clarient-site .phn-mast{flex:none;padding:8px 14px;border-bottom:1px solid var(--l1)}.clarient-site .phn .ich1{font-size:16.5px;line-height:1.13;margin:4px 0 3px}.clarient-site .phn .icsub{font-size:9px;line-height:1.4}.clarient-site .phn .iccta{margin-top:7px}.clarient-site .phn .icpx{margin:7px 14px 0;padding:8px 10px;box-shadow:0 1px 3px rgba(60,46,32,.06)}.clarient-site .phn .icnext{margin:7px 14px 0;border-radius:12px;padding:8px 12px;flex:none}.clarient-site .phn{position:absolute;inset:0;background:#1A1510;border-radius:42px;padding:9px;display:flex;box-shadow:inset 0 0 0 2px #2E2620}.clarient-site .phn-scr{flex:1;border-radius:33px;overflow:hidden;display:flex;flex-direction:column;position:relative;min-width:0}.clarient-site .phn-isl{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:72px;height:19px;border-radius:11px;background:#17120E;z-index:5}.clarient-site .phn-status{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 20px 0;font:700 10px 'Inter',sans-serif;color:var(--k1)}.clarient-site .phn-status svg{width:38px;height:10px}.clarient-site .phn-top{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--l1)}.clarient-site .phn-top .icbrand b{font-size:11px}.clarient-site .phn-price{flex:none;padding:10px 13px 8px}.clarient-site .phn-big{font-family:var(--se);font-size:25px;line-height:.95;letter-spacing:-.02em}.clarient-site .phn-tabs{flex:none;display:flex;gap:4px;padding:0 14px 5px}.clarient-site .phn-lbl{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 13px 4px;font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--k3);border-top:1px solid var(--l1)}.clarient-site .phn-lbl a{color:var(--brd)}.clarient-site .phn .icnr{margin:0 13px}.clarient-site .phn-sub{margin-top:auto;flex:none;display:flex;align-items:center;gap:6px;padding:6px 13px 3px;border-top:1px solid var(--l1);background:var(--sf2)}.clarient-site .phn-sub .icfld{flex:1;justify-content:space-between}.clarient-site .phn-home{flex:none;display:flex;justify-content:center;padding:4px 0 6px;background:var(--sf2)}.clarient-site .pad{position:absolute;inset:0;background:#1A1510;border-radius:30px;padding:11px;box-shadow:inset 0 0 0 2px #2E2620;display:flex}.clarient-site .pad-scr{flex:1;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;position:relative;min-width:0}.clarient-site .pad-status{flex:none;display:flex;justify-content:space-between;align-items:center;padding:5px 15px 0;font:700 8.5px 'Inter',sans-serif;color:var(--k1)}.clarient-site .pad-status svg{width:30px;height:8px}.clarient-site .pad-top{flex:none;display:flex;align-items:center;gap:8px;padding:7px 13px;border-bottom:1px solid var(--l1)}.clarient-site .pad-top .icbrand b{font-size:11px}.clarient-site .pad-tabs{flex:none;display:flex;gap:3px;padding:6px 13px;border-bottom:1px solid var(--l2)}.clarient-site .pad-hero{flex:none;padding:8px 14px 9px}.clarient-site .pad-px{flex:none;margin:0 14px;background:var(--sf1);border:1px solid var(--l1);border-radius:12px;padding:8px 11px;box-shadow:0 1px 3px rgba(60,46,32,.06)}.clarient-site .pad-pxfoot{display:flex;justify-content:space-between;align-items:center;font:700 6.5px 'Inter',sans-serif;letter-spacing:.1em;color:var(--k3);text-transform:uppercase;margin-top:5px;white-space:nowrap;gap:8px}.clarient-site .pad-pxfoot a{color:var(--brd)}.clarient-site .wov-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.14fr;gap:20px;padding:13px 18px 0;align-items:stretch}.clarient-site .wov-left{display:flex;flex-direction:column;justify-content:flex-start}.clarient-site .wov-grid .pad-px{margin:0;border:none;box-shadow:none;background:transparent;padding:0}.clarient-site .wov-proof{flex:none;display:grid;grid-template-columns:repeat(3,1fr);margin:8px 18px 12px;padding-top:9px;border-top:1px solid var(--l1)}.clarient-site .wov-proof .pad-pf{border-bottom:none;border-right:1px solid var(--l2);padding:2px 12px}.clarient-site .wov-proof .pad-pf:first-child{padding-left:0}.clarient-site .wov-proof .pad-pf:last-child{border-right:none;padding-right:0}.clarient-site .pad-proof{flex:none;margin:7px 14px 0;border-top:1px solid var(--l1)}.clarient-site .pad-pf{display:flex;align-items:center;gap:9px;padding:5.5px 0;border-bottom:1px solid var(--l2)}.clarient-site .pad-pf .pic{width:24px;height:24px;border-radius:8px;background:var(--wl);border:1px solid var(--l1);color:var(--brd);display:grid;place-items:center;flex:none}.clarient-site .pad-pf .pic svg{width:12px;height:12px}.clarient-site .pad-pf>span{min-width:0}.clarient-site .pad-pf b{display:block;font-size:9.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .pad-pf i{display:block;font-style:normal;font-size:8px;color:var(--k3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .phn-home i{width:86px;height:4px;border-radius:99px;background:#221C15;opacity:.85}.clarient-site .icfld span{font-size:9.5px;color:var(--k4)}.clarient-site .icfld .icbtn{padding:4px 10px}.clarient-site .sol-hero{position:relative;padding:150px 0 90px;overflow:hidden}.clarient-site .sol-hero .hero-bg{position:absolute;inset:0;pointer-events:none;background: radial-gradient(92% 460px at 50% -90px,rgba(176,82,49,.10),rgba(176,82,49,0) 72%), linear-gradient(180deg,#F4E7DB 0px,#F8EFE6 340px,rgba(252,247,241,0) 760px)}.clarient-site .sol-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:70px;align-items:center;max-width:1140px;margin:0 auto;padding:0 24px}.clarient-site .sol-grid h1{margin:22px 0 20px}.clarient-site .sol-grid .sub{max-width:520px;margin-bottom:34px}.clarient-site .sol-hero .hero-cta{justify-content:flex-start}.clarient-site .sol-hero .hero-note{margin-top:18px;font-size:13.5px;color:var(--soft)}.clarient-site .brief{position:relative}.clarient-site .brief-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:24px 24px 58px;z-index:1}.clarient-site .brief-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}.clarient-site .brief-h .bi{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#C86A44,#8E3F26);color:#fff;display:grid;place-items:center;flex:none}.clarient-site .brief-h b{font-size:15.5px;letter-spacing:-.014em}.clarient-site .brief-h span{display:block;font-size:12px;color:var(--soft);font-weight:600}.clarient-site .brow{display:flex;align-items:center;gap:13px;padding:14px 2px;border-top:1px solid var(--line)}.clarient-site .brow:first-of-type{border-top:none}.clarient-site .brow .bic{width:32px;height:32px;flex:none;border-radius:9px;background:var(--tint);color:var(--soft);display:grid;place-items:center}.clarient-site .brow .bt{min-width:0;flex:1}.clarient-site .brow .bt b{display:block;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clarient-site .brow .bt span{font-size:12px;color:var(--soft);font-weight:600}.clarient-site .brow .bact{flex:none;font-size:12px;font-weight:800;padding:7px 14px;border-radius:999px;background:var(--terra);color:#fff;cursor:default}.clarient-site .brow .bdone{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#3F6B46;background:#EAF1E8;padding:7px 12px;border-radius:999px}.clarient-site .brief-float{position:absolute;z-index:2;right:-18px;bottom:-24px;background:var(--ink);color:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:15px 19px;animation:float 6s ease-in-out infinite}.clarient-site .brief-float .f1{font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}.clarient-site .brief-float .f2{font-size:19px;font-weight:800;letter-spacing:-.02em}.clarient-site .brief-float .f2 i{font-style:normal;color:#EDAF8F}.clarient-site .brief .blob{display:none}.clarient-site .an-band{background:linear-gradient(180deg,rgba(247,237,227,0) 0,#F7EDE3 240px,#F7EDE3 calc(100% - 240px),rgba(247,237,227,0) 100%);position:relative}.clarient-site .an-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E0D8CD 1.1px,transparent 1.1px);background-size:26px 26px;opacity:.32;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}.clarient-site .an-band .container{position:relative}.clarient-site .cy{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);grid-template-rows:1fr 60px auto 60px 1fr;max-width:1080px;margin:0 auto}.clarient-site .oic{width:38px;height:38px;border-radius:12px;background:var(--peach);color:var(--terra);display:grid;place-items:center;flex:none}.clarient-site .bigcard{position:relative;z-index:1;background:#fff;border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;overflow:hidden;transition:transform .22s,box-shadow .22s}.clarient-site .bigcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.clarient-site .bc-body{padding:25px 27px 19px;display:flex;flex-direction:column;flex:1}.clarient-site .bigcard .ado{min-height:150px;display:flex;flex-direction:column;justify-content:center}.clarient-site .mh{display:flex;align-items:center;gap:12px;margin-bottom:13px}.clarient-site .mh div span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:3px}.clarient-site .mh b{font-size:20px;font-weight:800;letter-spacing:-.018em;color:var(--ink);line-height:1.15}.clarient-site .mp{font-size:13.5px;color:var(--body);line-height:1.55;margin-bottom:14px;text-wrap:pretty}.clarient-site .cy .checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}.clarient-site .cy .checks li{display:flex;gap:10px;font-size:13.5px;color:var(--body);line-height:1.5}.clarient-site .cy .checks b{color:var(--ink)}.clarient-site .cy .ck{width:19px;height:19px;flex:none;border-radius:50%;background:var(--terra-tint);color:var(--terra-dark);display:grid;place-items:center;margin-top:1px}.clarient-site .asp-row{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:26px;max-width:880px;margin:26px auto 0;flex-wrap:wrap}.clarient-site .asp{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1;min-width:280px}.clarient-site .asp-g .asp-ic{background:linear-gradient(160deg,#3E362E,#241F1A);box-shadow:0 10px 24px rgba(36,31,26,.3)}.clarient-site .asp-g .asp-l{color:var(--ink)}.clarient-site .asp-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#C86A44,#8E3F26);display:grid;place-items:center;box-shadow:0 10px 24px rgba(142,63,38,.32)}.clarient-site .asp-l{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--terra)}.clarient-site .asp-s{font-size:13px;color:var(--body);font-weight:600;max-width:54ch;line-height:1.55}.clarient-site .cy{position:relative}.clarient-site .ado{position:relative;overflow:hidden;margin:auto -27px -19px;padding:14px 27px 16px;background:linear-gradient(90deg,#FDF3EC,#FBEDE5);border-top:1.5px solid var(--terra-tint)}.clarient-site .ado::after{content:"";position:absolute;top:0;bottom:0;width:80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:ashimmer 3.2s ease-in-out infinite;pointer-events:none}@keyframes ashimmer{0%{left:-90px}55%{left:115%}100%{left:115%}}.clarient-site .ado-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-dark);margin-bottom:9px}.clarient-site .ado-h .aic{width:20px;height:20px;border-radius:6px;background:var(--terra);color:#fff;display:grid;place-items:center;flex:none}.clarient-site .ado ul{list-style:none;display:flex;flex-direction:column;gap:6px}.clarient-site .ado li{display:flex;gap:9px;font-size:13px;color:var(--body);line-height:1.5;font-weight:600}.clarient-site .ado li b{color:var(--terra-dark)}.clarient-site .reg .ado li b{color:#F0C4AB}.clarient-site .ado li svg{flex:none;margin-top:4px;color:var(--terra)}.clarient-site .reg .ado::after{display:none}.clarient-site .reg .ado-h{color:#EDAF8F}.clarient-site .reg .ado li{color:rgba(255,255,255,.72)}.clarient-site .reg .ado li svg{color:#EDAF8F}.clarient-site .reg{grid-column:1/4;grid-row:3;position:relative;background:linear-gradient(160deg,#2E2822,#241F1A);border-radius:22px;padding:44px 48px 38px;color:#fff;box-shadow:0 30px 70px -18px rgba(36,31,26,.5);text-align:center}.clarient-site .reg .sweep{position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none}.clarient-site .reg .sweep::before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(200,106,68,.15) 86%,transparent 100%);animation:regspin 10s linear infinite}@keyframes regspin{to{transform:rotate(1turn)}}.clarient-site .reg>div{position:relative}.clarient-site .reg .rtag{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);background:#fff;border:1px solid var(--terra-tint);border-radius:999px;padding:6px 15px;white-space:nowrap;z-index:2;box-shadow:var(--shadow-md)}.clarient-site .rtag-t{top:-13px}.clarient-site .rtag-b{bottom:-13px}.clarient-site .reg .mh div span{color:#EDAF8F}.clarient-site .reg .mh b{color:#fff;font-size:21px}.clarient-site .reg .oic{background:linear-gradient(135deg,#C86A44,#8E3F26);color:#fff}.clarient-site .reg .checks b{color:#fff}.clarient-site .reg .ck{background:rgba(200,106,68,.28);color:#EDAF8F}.clarient-site .wc{display:grid;place-items:center;width:10px;height:10px;color:var(--terra)}.clarient-site .hduct{display:flex;flex-direction:column;justify-content:center;gap:14px}.clarient-site .hlane{position:relative;width:100%;height:12px}.clarient-site .hlane .wc{position:absolute;top:50%;left:50%;margin:-5px 0 0 -5px}.clarient-site .hlane .wc:nth-child(2){animation-delay:-.5s!important}.clarient-site .hlane .wc:nth-child(3){animation-delay:-1s!important}.clarient-site .hl-r .wc{animation:wfr 1.5s linear infinite}.clarient-site .hl-l .wc{animation:wfl 1.5s linear infinite}.clarient-site .hl-l .wc svg{transform:rotate(180deg)}@keyframes wfr{0%{transform:translateX(-24px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(24px);opacity:0}}@keyframes wfl{0%{transform:translateX(24px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(-24px);opacity:0}}.clarient-site .vd{display:flex;justify-content:center;gap:14px}.clarient-site .lane{position:relative;width:12px;height:100%}.clarient-site .vd{padding:6px 0}.clarient-site .lane .wc{position:absolute;left:50%;top:50%;margin:-5px 0 0 -5px}.clarient-site .lane .wc:nth-child(2){animation-delay:-.5s!important}.clarient-site .lane .wc:nth-child(3){animation-delay:-1s!important}.clarient-site .lane-d .wc{animation:wfd 1.5s linear infinite}.clarient-site .lane-d .wc svg{transform:rotate(90deg)}.clarient-site .lane-u .wc{animation:wfu 1.5s linear infinite}.clarient-site .lane-u .wc svg{transform:rotate(-90deg)}@keyframes wfd{0%{transform:translateY(-24px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(24px);opacity:0}}@keyframes wfu{0%{transform:translateY(24px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(-24px);opacity:0}}.clarient-site .sig-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:start;max-width:1060px;margin:0 auto}.clarient-site .sig-list{display:flex;flex-direction:column;gap:12px}.clarient-site .sig{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:15px 18px;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s;text-align:left;font-family:var(--sans);overflow:hidden}.clarient-site .sig:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}.clarient-site .sig.on{border-color:var(--terra);box-shadow:0 14px 36px -10px rgba(176,83,50,.28);transform:translateX(6px)}.clarient-site .sig .sg-ic{width:36px;height:36px;flex:none;border-radius:11px;background:var(--tint);color:var(--soft);display:grid;place-items:center;transition:background .25s,color .25s}.clarient-site .sig.on .sg-ic{background:var(--peach);color:var(--terra)}.clarient-site .sig .sg-tx{min-width:0}.clarient-site .sig .sg-src{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:3px;transition:color .25s}.clarient-site .sig.on .sg-src{color:var(--terra)}.clarient-site .sig .sg-t{display:block;font-size:15px;font-weight:800;letter-spacing:-.014em;line-height:1.35;color:var(--ink)}.clarient-site .sig .sg-ar{margin-left:auto;flex:none;color:var(--terra);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}.clarient-site .sig.on .sg-ar{opacity:1;transform:none}.clarient-site .sig .sg-prog{position:absolute;left:0;right:0;bottom:0;height:2.5px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#C86A44,var(--terra));opacity:0}.clarient-site .sig.on .sg-prog{opacity:1}.clarient-site .sig-grid.live .sig.on .sg-prog{animation:sigp 4.6s linear forwards}.clarient-site .sig-grid.paused .sg-prog{animation-play-state:paused}@keyframes sigp{to{transform:scaleX(1)}}@keyframes sigin{from{opacity:0;transform:translateY(14px)}}.clarient-site .reveal:not(.in) .sig{opacity:0}.clarient-site .reveal.in .sig{animation:sigin .7s cubic-bezier(.16,.8,.3,1) backwards}.clarient-site .reveal.in .sig:nth-child(2){animation-delay:.08s}.clarient-site .reveal.in .sig:nth-child(3){animation-delay:.16s}.clarient-site .reveal.in .sig:nth-child(4){animation-delay:.24s}.clarient-site .reveal.in .sig:nth-child(5){animation-delay:.32s}.clarient-site .sig-out{position:sticky;top:96px}.clarient-site .sig-out .so-lab{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--terra);margin-bottom:14px}.clarient-site .sig-out .so-lab .aic{width:26px;height:26px;border-radius:8px;background:var(--terra);color:#fff;display:grid;place-items:center}.clarient-site .sig-out .so-lab i{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--soft)}.clarient-site .so-wrap{position:relative}.clarient-site .so-wrap::before,.clarient-site .so-wrap::after{content:"";position:absolute;background:#fff;border:1.5px solid var(--line);border-radius:20px}.clarient-site .so-wrap::before{inset:16px -9px -9px 9px;transform:rotate(1.1deg);opacity:.5}.clarient-site .so-wrap::after{inset:8px -4px -4px 4px;transform:rotate(.45deg);opacity:.75}.clarient-site .so-card{position:relative;z-index:1;overflow:hidden;background:#fff;border:1.5px solid var(--terra-tint);border-radius:20px;box-shadow:var(--shadow-lg);padding:30px;transition:opacity .25s,transform .25s}.clarient-site .so-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--terra),#EDAF8F)}.clarient-site .so-card.swap{opacity:0;transform:translateY(10px) scale(.985)}.clarient-site .so-card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.22;margin-bottom:10px}.clarient-site .so-card>p{font-size:14.5px;color:var(--body);line-height:1.62;margin-bottom:18px;text-wrap:pretty}.clarient-site .so-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.clarient-site .so-chips span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--body);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:6px 13px}.clarient-site .so-chips span.ok{color:#3F6B46;background:#EAF1E8;border-color:#D8E5D6}.clarient-site .so-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:20px}.clarient-site .so-foot .fv-note{font-size:12.5px;color:var(--soft);font-weight:700;text-align:right}.clarient-site .fv-btn{display:inline-flex;align-items:center;gap:9px;background:var(--terra);color:#fff;font-size:14px;font-weight:800;padding:12px 22px;border-radius:12px;box-shadow:0 8px 20px rgba(176,83,50,.28);cursor:default;white-space:nowrap;letter-spacing:-.005em}.clarient-site .fv-btn svg{flex:none}.clarient-site .lab-band{background:linear-gradient(180deg,rgba(247,237,227,0) 0,#F7EDE3 240px,#F7EDE3 calc(100% - 240px),rgba(247,237,227,0) 100%);position:relative}.clarient-site .lab-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E0D8CD 1.1px,transparent 1.1px);background-size:24px 24px;opacity:.4;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}.clarient-site .lab-band .container{position:relative}.clarient-site .lab-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:22px;max-width:1000px;margin:0 auto}.clarient-site .lab-link{position:absolute;z-index:2;left:calc((100% - 22px)*.575 + 11px);top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-md);display:grid;place-items:center;color:var(--terra)}.clarient-site .lab-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 36px;box-shadow:var(--shadow-sm)}.clarient-site .lab-card .lh{display:flex;align-items:center;gap:12px;margin-bottom:22px}.clarient-site .lab-card .lh .lic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--peach);color:var(--terra);display:grid;place-items:center}.clarient-site .lab-card .lh h3{font-size:19px;font-weight:800;letter-spacing:-.016em;white-space:nowrap}.clarient-site .lab-card .lh .lb{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--terra);background:var(--peach);padding:5px 11px;border-radius:999px;white-space:nowrap}.clarient-site .lab-you .lh .lb{background:rgba(200,106,68,.25);color:#EDAF8F}.clarient-site .lab-card ul{list-style:none;display:flex;flex-direction:column}.clarient-site .lab-card li{display:flex;align-items:center;gap:13px;padding:9px 0;font-size:14.5px;color:var(--body);line-height:1.45;border-top:1px solid var(--line)}.clarient-site .lab-card li:first-child{border-top:none}.clarient-site .lab-card .lci{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tint);color:var(--terra);display:grid;place-items:center}.clarient-site .lab-card li .lck{margin-left:auto;flex:none;width:18px;height:18px;border-radius:50%;background:var(--terra-tint);color:var(--terra-dark);display:grid;place-items:center}.clarient-site .lab-you{position:relative;overflow:hidden;background:linear-gradient(160deg,#2E2822,#241F1A);color:#fff;border:none;box-shadow:0 30px 70px -18px rgba(36,31,26,.45);display:flex;flex-direction:column}.clarient-site .lab-you::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-130px;top:-170px;background:radial-gradient(circle,rgba(200,106,68,.28),transparent 65%);pointer-events:none}.clarient-site .lab-you .lh .lic{background:rgba(200,106,68,.25);color:#EDAF8F}.clarient-site .lab-you .lh h3{color:#fff}.clarient-site .lab-you .yy{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 0 22px}.clarient-site .lab-you .yy span{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.25}.clarient-site .lab-you .yy span i{font-style:normal;color:#EDAF8F}.clarient-site .lab-you .yn{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:600;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;line-height:1.55}.clarient-site .reveal:not(.in) .lab-card li,.clarient-site .reveal:not(.in) .yy span{opacity:0}.clarient-site .reveal.in .lab-card li{animation:sigin .55s cubic-bezier(.16,.8,.3,1) backwards}.clarient-site .reveal.in .lab-card li:nth-child(2){animation-delay:.07s}.clarient-site .reveal.in .lab-card li:nth-child(3){animation-delay:.14s}.clarient-site .reveal.in .lab-card li:nth-child(4){animation-delay:.21s}.clarient-site .reveal.in .lab-card li:nth-child(5){animation-delay:.28s}.clarient-site .reveal.in .lab-card li:nth-child(6){animation-delay:.35s}.clarient-site .reveal.in .lab-card li:nth-child(7){animation-delay:.42s}.clarient-site .reveal.in .yy span{animation:sigin .6s cubic-bezier(.16,.8,.3,1) backwards}.clarient-site .reveal.in .yy span:nth-child(1){animation-delay:.45s}.clarient-site .reveal.in .yy span:nth-child(2){animation-delay:.62s}.clarient-site .reveal.in .yy span:nth-child(3){animation-delay:.79s}.clarient-site .lab-you .yy i{position:relative;padding:0 2px}.clarient-site .lab-you .yy i::after{content:"";position:absolute;left:2px;right:4px;bottom:4px;height:6px;border-radius:999px;background:rgba(200,106,68,.4);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1) 1.35s}.clarient-site .reveal.in .yy i::after{transform:scaleX(1)}.clarient-site .time-wrap{max-width:860px;margin:64px auto 0}.clarient-site .ts{display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,64px)}.clarient-site .ts-a,.clarient-site .ts-b{text-align:center}.clarient-site .tsv{position:relative;display:inline-block;font-size:clamp(38px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}.clarient-site .tsv i{font-style:normal;font-size:.5em}.clarient-site .ts-a .tsv{color:#B9AD9D}.clarient-site .tsv u{text-decoration:none;position:absolute;left:-5%;right:-5%;top:50%;height:5px;margin-top:-2.5px;border-radius:999px;background:var(--terra);transform:scaleX(0) rotate(-3.5deg);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1) .55s}.clarient-site .in .tsv u{transform:scaleX(1) rotate(-3.5deg)}.clarient-site .ts-b .tsv{color:var(--terra)}.clarient-site .ts-b .tsv,.clarient-site .ts-b .tsl{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.34,1.56,.64,1) 1.05s,transform .6s cubic-bezier(.34,1.56,.64,1) 1.05s}.clarient-site .in .ts-b .tsv,.clarient-site .in .ts-b .tsl{opacity:1;transform:none}.clarient-site .tsl{display:block;margin-top:11px;font-size:13px;font-weight:700;color:var(--soft)}.clarient-site .ts-mid{display:flex;flex-direction:column;align-items:center;gap:12px}.clarient-site .ts-badge{font-size:12.5px;font-weight:800;color:var(--terra-dark);background:var(--terra-tint);border-radius:999px;padding:7px 15px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s ease 1.55s,transform .5s ease 1.55s}.clarient-site .in .ts-badge{opacity:1;transform:none}.clarient-site .ts-arrow{color:var(--line-2);opacity:0;transform:translateX(-8px);transition:opacity .6s ease .85s,transform .6s ease .85s}.clarient-site .in .ts-arrow{opacity:1;transform:none}.clarient-site .time-note{text-align:center;margin-top:30px;font-size:14px;color:var(--soft);font-weight:600;text-wrap:pretty}.clarient-site .rules-band{background:transparent;color:var(--ink);position:relative}.clarient-site .rules-band .container{position:relative}.clarient-site .rules-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}.clarient-site .rl{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;border-radius:18px;padding:30px 28px;box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s,transform .25s}.clarient-site .rl:hover{box-shadow:var(--shadow-md);border-color:var(--line-2);transform:translateY(-5px)}.clarient-site .rl::before{content:attr(data-n);position:absolute;right:22px;top:12px;font-size:70px;font-weight:800;letter-spacing:-.05em;line-height:1;color:rgba(36,31,26,.05);transition:color .3s;pointer-events:none}.clarient-site .rl:hover::before{color:rgba(176,82,49,.14)}.clarient-site .rl::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,#C86A44,#EDAF8F);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}.clarient-site .rl:hover::after{transform:scaleX(1)}.clarient-site .rl .ric{width:42px;height:42px;border-radius:12px;background:var(--peach);color:var(--terra);display:grid;place-items:center;margin-bottom:20px}.clarient-site .rl .rn{font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--terra);margin-bottom:10px;text-transform:uppercase}.clarient-site .rl b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px;letter-spacing:-.014em}.clarient-site .rl p{font-size:13.5px;color:var(--body);line-height:1.65}.clarient-site .reveal:not(.in) .rl{opacity:0}.clarient-site .reveal.in .rl{animation:sigin .65s cubic-bezier(.16,.8,.3,1) backwards}.clarient-site .reveal.in .rl:nth-child(2){animation-delay:.12s}.clarient-site .reveal.in .rl:nth-child(3){animation-delay:.24s} @media (max-width:980px){.clarient-site .sol-grid{grid-template-columns:1fr;gap:56px}.clarient-site .sol-grid .sub{max-width:none}.clarient-site .cy{display:flex;flex-direction:column;gap:20px}.clarient-site .bigcard .ado{min-height:0}.clarient-site .hduct,.clarient-site .vd,.clarient-site .rtag-b{display:none}.clarient-site .o1{order:1}.clarient-site .o2{order:2}.clarient-site .reg{order:3}.clarient-site .o4{order:4}.clarient-site .o5{order:5}.clarient-site .reg{grid-template-columns:1fr;gap:18px;padding:24px}.clarient-site .sig-grid{grid-template-columns:1fr;gap:34px}.clarient-site .sig-out{position:static}.clarient-site .lab-grid{grid-template-columns:1fr}.clarient-site .lab-link{display:none}.clarient-site .rules-strip{grid-template-columns:1fr}.clarient-site .ts{flex-direction:column;gap:20px}.clarient-site .ts-arrow{display:none} } @media (max-width:720px){.clarient-site .sol-hero{padding-top:120px}.clarient-site .brief-float{right:6px;bottom:-18px}.clarient-site .so-foot{flex-direction:column;align-items:flex-start} } /* Brand lockup component, ported from brand/clarient-logo.css. Without it the * wordmark falls back to inherited 16px/400 instead of the specified * calc(mark * .66) at 700, which is what made the nav and footer brand look * undersized next to the design. The @import for Manrope is dropped: the family * already comes from next/font. */ .clarient-site 700&display=swap'); :root{ --clarient-terracotta:#B05231; --clarient-terracotta-deep:#8E3F26; --clarient-terracotta-light:#C86A44; --clarient-cream:#FBF7F0; --clarient-ink:#1C1814; }.clarient-site .clarient-lockup{display:inline-flex;align-items:center;gap:var(--clarient-gap,16px);text-decoration:none}.clarient-site .clarient-lockup__mark{width:var(--clarient-mark,48px);height:var(--clarient-mark,48px);flex:none;display:block}.clarient-site .clarient-lockup__word{ font-family:var(--font-clarient-brand),'Archivo','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:calc(var(--clarient-mark,48px) * .66); letter-spacing:-.025em; line-height:1; color:var(--ink); white-space:nowrap; }.clarient-site .clarient-lockup__word .dot{color:var(--terra)}.clarient-site .clarient-lockup--reversed .clarient-lockup__word{color:#FBF7F0}.clarient-site .clarient-lockup--reversed .clarient-lockup__word .dot{color:#D0714A}.clarient-site .clarient-lockup--stacked{flex-direction:column;gap:calc(var(--clarient-mark,48px) * .3)} /* ── RESPONSIVE ──────────────────────────────────────────────────────────── * Appended after the ported sheets so these win on equal specificity. * * EVERY rule below sits inside an explicit @media block. A previous pass put a * `max-width:100%` safety net at top level; with no breakpoint around it, it * overrode .collage's 1040px cap at every width and blew the hero collage out * across the whole desktop viewport. Nothing here may apply unconditionally. * * The hero collage is the deliberate exception: below 720px it preserves the * exact desktop composition and scales the complete stage as one piece. The * mobile art is illustrative rather than intended as readable product UI. */ /* ── Nav ── * The shell's three-line menu button appears at 980px, but the design only * hides the centre links at 720px. Between those widths both showed, and since * the centre links are absolutely centred they collided with the account * cluster. Hide them where the button appears so exactly one mode is ever up. */ @media (max-width: 980px) { .clarient-site .nav-links { display: none; } } @media (max-width: 720px) { .clarient-site .nav { padding: 0 10px 0 14px; gap: 6px; } .clarient-site .nav-login { display: none; } /* it lives in the menu instead */ .clarient-site .nav-right { gap: 8px; } .clarient-site .btn-sm { padding: 9px 14px; font-size: 13.5px; } } @media (max-width: 380px) { /* At the very bottom end the wordmark gives way, not the primary action. */ .clarient-site .clarient-lockup__word { display: none; } } /* ── Hero collage ── */ @media (max-width: 980px) { .clarient-site .collage { padding-bottom: 110px; } } @media (max-width: 720px) { .clarient-site .collage { margin-top: 40px; padding: 0 16px 40px; } } @media (max-width: 480px) { .clarient-site .collage { padding-bottom: 28px; } } /* ── Home sections ── * The design already goes single-column for the trio, steps and benefit cards * at 980px. These only tighten what it leaves. */ @media (max-width: 720px) { .clarient-site .sec-head { margin-bottom: 40px; } .clarient-site .step-row { padding: 34px 0; gap: 34px; } .clarient-site .vcard { padding: 26px 22px; } .clarient-site .bcard { padding: 28px 24px 22px; } .clarient-site .cta-sec { padding: 70px 0 80px; } .clarient-site .cta-card { padding: 52px 24px; border-radius: 20px; } .clarient-site .foot-grid { gap: 28px; } } @media (max-width: 480px) { .clarient-site .foot-grid { grid-template-columns: 1fr; } .clarient-site .foot-base { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ── Product page ── * The anatomy diagram already becomes a flex column with the ducts hidden at * 980px. Below that the hero grid keeps a two-column intrinsic width and pushes * itself wider than the viewport, dragging the briefing card with it, so it is * pinned to one shrinkable column. */ @media (max-width: 720px) { .clarient-site .sol-hero { padding: 120px 0 60px; } .clarient-site .sol-grid { grid-template-columns: minmax(0, 1fr); max-width: 100%; padding: 0 16px; } .clarient-site .brief, .clarient-site .brief-card { max-width: 100%; min-width: 0; } .clarient-site .brief-float { right: 4px; bottom: -14px; } .clarient-site .bigcard .bc-body { padding: 20px 20px 16px; } .clarient-site .reg { padding: 24px 20px; border-radius: 18px; } .clarient-site .sig-out { position: static; } /* must not float over the list */ .clarient-site .so-card { padding: 24px 20px; } .clarient-site .lab-card { padding: 26px 22px; } .clarient-site .rl { padding: 24px 22px; } } /* Hero collage, device-framed variant. * * The dashboard and investor centre now arrive inside a desktop computer and a * tablet, each with its own bezel, stand and shadow baked into a transparent * PNG. The collage slots were built for flat screenshots, so they carry a card * border, a radius, a fill and a shadow — all of which read as a second frame * drawn around the first. `is-device` takes that chrome off and lets the art * stand on the hero wash, sized to its own proportions. */ /* The computer is not centred inside its own PNG: the render leaves 900px of empty canvas on the left and 585px on the right, so a box centred on the page draws the device 3.3% right of centre. The nudge below centres what is actually visible, not the transparent canvas around it. */ .clarient-site .collage-stage{display:contents} .clarient-site .collage-main.is-device{margin:0 auto;transform:translateX(-3.3%);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;aspect-ratio:4783/2938;filter:drop-shadow(0 34px 60px rgba(36,31,26,.24))} .clarient-site .collage-side.is-device{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 26px 46px rgba(36,31,26,.26))} /* The tablet stands in front of the computer and slightly nearer the camera: its base sits below the computer's, which is what separates the two planes. Bottom-aligning them read as one flat picture. It sits low, at the foot of the computer rather than across its screen. */ .clarient-site .collage-a.is-device{width:min(455px,45%);aspect-ratio:2582/1865;left:10px;bottom:56px} .clarient-site .collage:has(.is-device){max-width:1180px;padding-bottom:96px} /* It keeps the same low, overlapping placement down the sizes. */ @media (max-width:980px){ .clarient-site .collage-a.is-device{width:40%;left:2%;bottom:10%} } /* Assist remains part of the product story at every viewport. */ .clarient-site .collage-ai--rich{width:340px;bottom:56px;right:-14px;border-radius:18px} .clarient-site .collage-ai--rich .aih{gap:9px;padding:13px 15px;border-bottom:1px solid #F2EEE6} .clarient-site .collage-ai--rich .aih b{font-size:13px;letter-spacing:0} .clarient-site .collage-ai--rich .aih em{font-size:9.5px;font-weight:600;color:#6C7A66;letter-spacing:0} .clarient-site .collage-ai--rich .ai-mark{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,#9A503C 0%,#8B4E4A 48%,#7A4B5F 100%); box-shadow:0 1px 2px rgba(122,75,95,.35),inset 0 1px 0 rgba(255,255,255,.2)} .clarient-site .collage-ai--rich .ai-mark svg{width:14px;height:14px;display:block} .clarient-site .collage-ai--rich .aib{padding:14px 14px 4px;gap:9px} .clarient-site .collage-ai--rich .msg{font-size:11px;line-height:1.5;border-radius:14px;padding:9px 12px;max-width:92%} .clarient-site .collage-ai--rich .msg.a b{font-size:14px;font-weight:800;letter-spacing:0;color:#26221C} .clarient-site .collage-ai--rich .ai-prep{display:flex;flex-direction:column;gap:7px;margin:9px 0} .clarient-site .collage-ai--rich .ai-prep>span{display:grid;grid-template-columns:auto 1fr;column-gap:8px; align-items:center;background:#FFFDF9;border:1px solid #EFE9DE;border-radius:10px;padding:7px 10px; font-size:10.5px;font-weight:600;color:#26221C} .clarient-site .collage-ai--rich .ai-prep i{align-self:center;font-style:normal;font-size:8px;color:#A95329} .clarient-site .collage-ai--rich .ai-acts{display:flex;gap:8px;padding:2px 0 4px} .clarient-site .collage-ai--rich .ai-acts span{font-size:10.5px;font-weight:700;letter-spacing:0;color:#4D4538; border:1px solid #EDE7DC;border-radius:999px;padding:6px 12px;background:#fff} .clarient-site .collage-ai--rich .ai-acts .go{background:#B0512F;border-color:#B0512F;color:#fff} .clarient-site .collage-ai--rich .aif{height:36px;margin:10px 14px 14px;font-size:10.5px;padding:0 6px 0 13px;border-color:#EDE7DC} .clarient-site .collage-ai--rich .aif i{width:25px;height:25px} .clarient-site .collage-ai--rich .aif i svg{width:11px;height:11px} @media (min-width:721px) and (max-width:980px){ .clarient-site .collage-ai--rich{right:0;transform:scale(.82);transform-origin:100% 100%} .clarient-site .collage-float{right:8px;animation:none;transform:scale(.88);transform-origin:100% 0} } /* Mobile shows the exact desktop collage at a smaller uniform scale. The stage keeps the desktop canvas, spacing and overlaps; only the stage itself scales. */ @media (max-width:720px){ /* The scaled stage deliberately carries shadows and a review card beyond its layout box. The page shell already clips horizontal page overflow, so keep this viewport vertically open instead of shaving those details off. */ .clarient-site .collage:has(.is-device){max-width:none;height:459px;padding:0;overflow:visible} .clarient-site .collage-stage{ display:block;position:absolute;top:0;left:50%;width:1180px;box-sizing:border-box; padding:0 24px 96px;transform:translateX(-50%) scale(.58);transform-origin:top center } .clarient-site .collage-main.is-device{display:block} .clarient-site .collage-a.is-device{display:block;width:min(455px,45%);left:10px;bottom:56px} .clarient-site .collage-ai--rich{display:block;right:-14px;bottom:56px;transform:none} .clarient-site .collage-float{display:flex;right:-6px;top:-26px;animation:none;transform:none} } @media (max-width:660px){ .clarient-site .collage:has(.is-device){height:419px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.53)} } @media (max-width:590px){ .clarient-site .collage:has(.is-device){height:372px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.47)} } @media (max-width:520px){ .clarient-site .collage:has(.is-device){height:324px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.41)} } @media (max-width:460px){ .clarient-site .collage:has(.is-device){height:285px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.36)} } @media (max-width:400px){ .clarient-site .collage:has(.is-device){height:245px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.31)} } @media (max-width:360px){ .clarient-site .collage:has(.is-device){height:221px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.28)} } @media (max-width:330px){ .clarient-site .collage:has(.is-device){height:198px} .clarient-site .collage-stage{transform:translateX(-50%) scale(.25)} } /* Assist band, from the design handoff (IR Platform 19). Scoped under .clarient-site like the rest of the ported stylesheet; otherwise verbatim. Two things the handoff calls out and that must not be "tidied": the connector gradient stays userSpaceOnUse because the centre strand is a zero-width vertical path, and preserveAspectRatio stays none so the strands keep meeting their columns as the container resizes. */ .clarient-site .assist-band{position:relative;padding:128px 0;background:linear-gradient(180deg,rgba(247,237,227,0) 0,#F7EDE3 240px,#F7EDE3 calc(100% - 240px),rgba(247,237,227,0) 100%);overflow:hidden} .clarient-site .steps-band + .assist-band{background:linear-gradient(180deg,#F7EDE3 0,#F7EDE3 calc(100% - 260px),rgba(247,237,227,0) 100%)} .clarient-site .assist-band .container{position:relative} .clarient-site .assist-band .sec-head{max-width:660px} .clarient-site .b-wire{position:relative;max-width:1092px;margin:0 auto} .clarient-site .b-wire::before{content:"";position:absolute;left:50%;top:-40px;width:900px;height:460px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 32%,rgba(200,106,68,.12),transparent 70%);pointer-events:none} .clarient-site .b-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center} .clarient-site .b-hub{position:relative;width:106px;height:106px;margin-bottom:18px} .clarient-site .b-hub::before{content:"";position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(circle,rgba(200,106,68,.3),transparent 68%);animation:bheartglow 2.6s ease-in-out infinite}@keyframes bheart{0%,44%,100%{transform:scale(1)}7%{transform:scale(1.16)}17%{transform:scale(1.02)}25%{transform:scale(1.09)}36%{transform:scale(1)}}@keyframes bheartglow{0%,44%,100%{opacity:.55;transform:scale(.94)}7%{opacity:1;transform:scale(1.16)}17%{opacity:.7;transform:scale(1)}25%{opacity:.9;transform:scale(1.1)}36%{opacity:.6;transform:scale(.96)}} .clarient-site .b-hub img{position:relative;width:106px;height:106px;border-radius:35px;display:block;box-shadow:0 0 0 12px rgba(200,106,68,.09),0 26px 54px -12px rgba(142,63,38,.55);animation:bheart 2.6s ease-in-out infinite;transform-origin:50% 50%;will-change:transform} .clarient-site .b-core b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .clarient-site .b-svg{position:relative;z-index:0;display:block;width:100%;height:170px;margin:4px 0 14px} .clarient-site .b-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr)} .clarient-site .b-node{position:relative;padding:6px 24px 0;text-align:center} .clarient-site .b-node .bi{width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,#FDF4EC);border:1.5px solid #E8CBB6;color:var(--terra);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 12px 26px -6px rgba(176,82,49,.3)} .clarient-site .b-node .bi svg{width:23px;height:23px} .clarient-site .b-node h3{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:7px} .clarient-site .b-node p{font-size:14px;line-height:1.55;color:var(--body);text-wrap:pretty;max-width:210px;margin:0 auto} @media (max-width:980px){ .clarient-site .b-svg{display:none} .clarient-site .b-core{margin-bottom:30px} .clarient-site .b-row{grid-template-columns:repeat(2,1fr);gap:26px 0} .clarient-site .b-node:last-child{grid-column:1/-1} } @media (max-width:720px){ .clarient-site .b-row{grid-template-columns:1fr} } /* The handoff notes that SMIL animateMotion is not covered by the global reduced-motion block, so the travelling pulses are gated here. */ @media (prefers-reduced-motion: reduce){ .clarient-site .b-svg g{display:none} .clarient-site .b-hub::before, .clarient-site .b-hub img{animation:none} } /* ── Contrast ─────────────────────────────────────────────── * * Two rules above were changed rather than added to, so this note records what * was measured. Both were computed against the colour actually painted behind * the text, which for .ado is a gradient and therefore not what * getComputedStyle reports as the background. * * .ado-h #B05231 on #FBEDE5 = 4.48:1 at 10.5px → now --terra-dark, 6.35:1 * .asp-s #7A736A on #FCF7F1 = 4.39:1 at 13px → now --body, 6.49:1 * * Both sat just under the 4.5:1 that AA asks for at these sizes, and .ado runs * a white shimmer across itself on a loop, which lifts the background further * for part of every cycle. The body copy inside the same panels already passed. * * Left alone deliberately: the 01/02/03 numerals behind the resource cards. * They are rgba(36,31,26,.05) at 70px, which is decoration rather than content, * and WCAG does not hold decoration to a contrast ratio. They are drawn with * content:attr(data-n) though, so a screen reader may still read them out - the * fix for that is markup, not colour, and it is noted rather than done here. */ /* ── Step sheets (how-it-works handoff) ───────────────────── * * The four step visuals are paper sheets rather than screenshots: a register * report, an investor centre page, an addressed envelope and a campaign report. * Nothing here is a real product surface, which is the point of the handoff: * suggest the artefact without publishing a copyable interface. * * Every class is namespaced sh-*. The handoff's own names (.brow, .bbar, .blab) * already exist in this stylesheet for other components, and reusing them put a * bordered row treatment through the middle of the register sheet. * * Sizes, rotations and colours are the handoff's own. The serif comes from * next/font in the marketing layout, so there is no third-party font request. */ .clarient-site .sh-wrap{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center;color:#241F1A} .clarient-site .sh-lab{font:600 10.5px var(--font-clarient-sans),'Inter',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#8A8178;white-space:nowrap} .clarient-site .sh-lab.ink{color:#241F1A} .clarient-site .sh-sheet{position:relative;z-index:1;width:380px;background:#fff;border:1px solid #EAE4DC;border-radius:10px;box-shadow:0 1px 2px rgba(60,50,38,.05),0 28px 56px rgba(78,62,44,.15);padding:30px 34px} .clarient-site .sh-back{position:absolute;z-index:0;background:#F3EEE8;border:1px solid #EAE4DC;border-radius:10px;box-shadow:0 14px 32px rgba(78,62,44,.09)} .clarient-site .sh-title{font-family:var(--font-clarient-serif),Georgia,serif;font-size:31px;font-weight:600;line-height:1.14;letter-spacing:-.015em;color:#241F1A;margin:8px 0 6px} .clarient-site .sh-hr{border-top:1px solid #EAE4DC;margin:16px 0} .clarient-site .sh-row{display:flex;align-items:center;gap:11px;margin:12px 0} .clarient-site .sh-av{width:18px;height:18px;border-radius:50%;flex:none;background:#EAE3D8} .clarient-site .sh-av.lead{background:#ECC3A8} .clarient-site .sh-bar{height:8px;border-radius:99px;background:#F1ECE4;flex:none;display:inline-block} .clarient-site .sh-bar.terra{background:#C4693F} .clarient-site .sh-bar.dim{background:#EAE4DC} .clarient-site .sh-bar.wide{display:block;margin:12px 0} .clarient-site .sh-num{font-family:var(--font-clarient-serif),Georgia,serif;font-size:17px;font-weight:600;color:#241F1A} .clarient-site .sh-pos{font:600 12px var(--font-clarient-sans),'Inter',sans-serif;color:#3D795C} .clarient-site .sh-dot{width:8px;height:8px;border-radius:50%;background:#3D795C;flex:none} .clarient-site .sh-dot.terra{background:#B05231;width:10px;height:10px} .clarient-site .sh-head{display:flex;align-items:center;gap:9px;margin-bottom:10px} .clarient-site .sh-foot{display:flex;align-items:center;gap:9px} .clarient-site .sh-price{display:flex;align-items:baseline;gap:10px} .clarient-site .sh-cta{display:inline-flex;align-items:center;height:34px;padding:0 20px;margin-top:20px;border-radius:99px;background:#B05231;color:#fff;font:600 12px var(--font-clarient-sans),'Inter',sans-serif;letter-spacing:.02em} .clarient-site .sh-stamp{position:absolute;top:22px;right:22px;width:66px;height:66px;border-radius:50%;border:2px solid #B05231;color:#B05231;display:grid;place-items:center;font:700 11px var(--font-clarient-sans),'Inter',sans-serif;letter-spacing:.12em;transform:rotate(9deg);text-align:center;line-height:1.3} .clarient-site .sh-stamp.square{width:58px;height:58px;border-radius:10px;transform:rotate(-8deg);font-size:10px} .clarient-site .sh-env{position:relative;z-index:1;width:390px;height:250px;background:#fff;border:1px solid #EAE4DC;border-radius:10px;box-shadow:0 1px 2px rgba(60,50,38,.05),0 28px 56px rgba(78,62,44,.15)} .clarient-site .sh-flap{position:absolute;left:0;top:0;width:0;height:0;border-left:194px solid transparent;border-right:194px solid transparent;border-top:126px solid #F3EEE8;filter:drop-shadow(0 2px 3px rgba(78,62,44,.08))} .clarient-site .sh-wax{position:absolute;left:50%;top:110px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:#B05231;box-shadow:0 4px 10px rgba(142,63,38,.35);z-index:2} .clarient-site .sh-post{position:absolute;top:16px;right:16px;width:44px;height:52px;border:1.5px dashed #C0987F;border-radius:4px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center} .clarient-site .sh-post i{width:22px;height:5px;border-radius:99px;background:#C07146;display:block} .clarient-site .sh-addr{position:absolute;left:0;right:0;bottom:32px;display:flex;flex-direction:column;gap:8px;align-items:center;z-index:2} .clarient-site .sh-addr .sh-lab.ink{font-size:12px} .clarient-site .sh-legend{display:flex;gap:16px;margin-bottom:10px;justify-content:flex-end} .clarient-site .sh-legend .sh-lab{display:inline-flex;align-items:center;gap:6px} .clarient-site .sh-legend i{width:10px;height:10px;border-radius:3px;background:#EBE4D6;display:block} .clarient-site .sh-legend i.terra{background:#C4693F} .clarient-site .sh-chart{display:flex;align-items:flex-end;gap:12px;height:110px;border-bottom:2px solid #EAE4DC;padding:0 4px} .clarient-site .sh-chart i{width:30px;border-radius:6px 6px 0 0;background:#EBE4D6} .clarient-site .sh-chart i.terra{background:#C4693F} .clarient-site .sh-chart i.pair{margin-right:12px} .clarient-site .sh-axis{display:flex;margin-top:10px;padding:0 4px} .clarient-site .sh-axis .sh-lab{width:72px;text-align:center} .clarient-site .sh-axis .sh-lab+.sh-lab{margin-left:12px} @media (max-width:560px){ .clarient-site .sh-wrap{min-height:420px} .clarient-site .sh-sheet{width:320px;padding:24px 26px} .clarient-site .sh-title{font-size:28px} .clarient-site .sh-env{width:320px} .clarient-site .sh-flap{border-left-width:159px;border-right-width:159px;border-top-width:104px} .clarient-site .sh-wax{top:88px} } .clarient-site .reg-head{max-width:560px;margin:0 auto} .clarient-site .reg-head .oic{display:inline-grid;place-items:center;margin-bottom:14px} .clarient-site .reg-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--terra-2,#C4693F)} .clarient-site .reg-title{font-size:27px;font-weight:800;letter-spacing:-.022em;margin:7px 0 10px;color:#fff} .clarient-site .reg-sub{font-size:15px;line-height:1.6;color:rgba(255,255,255,.68);text-wrap:pretty} .clarient-site .reg-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:34px 0 30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);text-align:left} .clarient-site .reg-col{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:5px;align-items:start} .clarient-site .reg-ck{grid-row:1/3;width:21px;height:21px;border-radius:50%;background:rgba(200,106,68,.24);color:#E7A882;display:grid;place-items:center;margin-top:2px} .clarient-site .reg-col b{font-size:14.5px;font-weight:800;letter-spacing:-.012em;color:#fff} .clarient-site .reg-col>span{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);text-wrap:pretty} .clarient-site .reg-assist{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;text-align:left;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);text-wrap:pretty} .clarient-site .reg-assist b{color:rgba(255,255,255,.9);font-weight:800} .clarient-site .reg-spark{width:20px;height:20px;flex:none;border-radius:6px;background:rgba(200,106,68,.22);color:#E7A882;display:grid;place-items:center} @media (max-width:860px){ .clarient-site .reg-cols{grid-template-columns:1fr;gap:20px;margin:26px 0 24px;padding-top:24px} .clarient-site .reg-assist{align-items:start} .clarient-site .reg-spark{margin-top:1px} } /* ── About page ────────────────────────────────────────────────────────── * * From the About design handoff (About Page.dc.html). Layout classes only: * the hero, the four team cards, the "why" split and the three principle * cards. Everything the design shares with the rest of the site — h1, h2.sec, * .sub, .container, .trio, .vcard, .cta-card — is left to the rules above, * so a change to the system moves this page with it. * * One deliberate departure from the mock: its cards are drawn at radius 20px * and the site's card token (--r) is 16px. The token wins; four pixels of * corner are not worth a second card shape on the same site. */ .clarient-site .ab-hero{position:relative;padding:150px 0 60px} .clarient-site .ab-hero .hero-bg{position:absolute;inset:0;pointer-events:none;background: radial-gradient(92% 460px at 50% -90px,rgba(176,82,49,.10),rgba(176,82,49,0) 72%), linear-gradient(180deg,#F4E7DB 0%,#F8EFE6 48%,rgba(252,247,241,0) 100%)} .clarient-site .ab-hero .container{position:relative;max-width:908px;text-align:center} .clarient-site .ab-hero .sub{max-width:660px;margin:20px auto 34px} .clarient-site .ab-hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .clarient-site .ab-team{padding:88px 0 96px} .clarient-site .ab-team .sec-head{max-width:720px;margin-bottom:64px} .clarient-site .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .clarient-site .team-grid+.team-grid{margin-top:24px} .clarient-site .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease} .clarient-site .tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .clarient-site .tc-head{display:flex;align-items:center;gap:16px} .clarient-site .tc-head img{width:76px;height:76px;flex:none;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:var(--tint-2)} .clarient-site .tc-head h3{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:2px} .clarient-site .tc-role{font-size:13.5px;font-weight:800;color:var(--terra-dark)} .clarient-site .tc-bio{margin:20px 0 16px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--body);line-height:1.65} .clarient-site .tc-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--terra-dark)} .clarient-site .tc-link:hover{color:var(--terra)} .clarient-site .tc-link svg{transition:transform .2s} .clarient-site .tc-link:hover svg{transform:translate(2px,-2px)} .clarient-site .ab-why{padding:96px 0} .clarient-site .why-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:start} .clarient-site .why-grid h2{margin:0} .clarient-site .why-grid p{font-size:18px;color:var(--body);line-height:1.7;text-wrap:pretty} .clarient-site .why-grid p+p{margin-top:20px} .clarient-site .ab-why .trio{margin-top:72px} /* ── Security page ─────────────────────────────────────────────────────── * * From the Security design handoff (Security Page.dc.html). The approval * record in the middle band is a schematic, not a screenshot: it is drawn * here because no captured product view shows the whole chain from prepared * draft to authorised send, and a composite of real screens would claim more * than one exists. It is aria-hidden and carries no text a reader needs. */ .clarient-site .sy-hero{position:relative;padding:150px 0 0} /* Percentage stops, not the reference's 0/340/760px. This hero is 633px tall - * it has no collage under it - so fixed stops leave the wash at 30% opacity at * the section's bottom edge, where the flat page colour takes over and draws a * hard seam. Percentages make the fade finish exactly at the boundary whatever * the height, which is what BACKGROUNDS.md rule 0 asks for and what .ab-hero * already does. */ .clarient-site .sy-hero .hero-bg{position:absolute;inset:0;pointer-events:none;background: radial-gradient(92% 460px at 50% -90px,rgba(176,82,49,.10),rgba(176,82,49,0) 72%), linear-gradient(180deg,#F4E7DB 0%,#F8EFE6 48%,rgba(252,247,241,0) 100%)} .clarient-site .sy-hero .container{position:relative;max-width:868px;text-align:center} .clarient-site .sy-hero .sub{max-width:640px;margin:20px auto 34px} .clarient-site .sy-hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .clarient-site .sy-hero .hero-note{margin-top:18px;font-size:13.5px;color:var(--soft)} .clarient-site .sy-promises{padding:88px 0 96px} .clarient-site .sy-list{list-style:none;display:flex;flex-direction:column;margin-top:20px} .clarient-site .sy-list li{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:14px;color:var(--body);line-height:1.5} .clarient-site .sy-list .ck{width:20px;height:20px;flex:none;border-radius:50%;background:var(--terra-tint);color:var(--terra-dark);display:grid;place-items:center;margin-top:1px} .clarient-site .sy-control{padding:96px 0} .clarient-site .sy-split{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center} .clarient-site .sy-split h2{margin-bottom:14px} .clarient-site .sy-split .sub{margin-bottom:26px} .clarient-site .sy-rules{list-style:none} .clarient-site .sy-rules li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line-2)} .clarient-site .sy-rules li:last-child{border-bottom:1px solid var(--line-2)} .clarient-site .sy-rules svg{margin-top:2px;color:var(--terra)} .clarient-site .sy-rules b{display:block;font-size:15px;color:var(--ink)} .clarient-site .sy-rules span span{font-size:14px;color:var(--body);line-height:1.55} /* Approval-record schematic. */ .clarient-site .sy-media{position:relative} /* The mock sizes to its own content rather than to the reference's 16/10.6 * frame. At the 520px the two-column split gives it, that ratio is 345px tall * and the content needs 475px, so the fixed frame clipped the last two steps of * the approval record — the publish and send rows the whole illustration exists * to show. A frame that hides the argument is not the frame. */ .clarient-site .sy-mock{position:relative;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;background:#fff;font-size:12px} .clarient-site .sy-mock .mk{display:flex;flex-direction:column;background:#FBF8F4} .clarient-site .sy-mock .mk-top{height:42px;flex:none;padding:0 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #EFE9E1;background:#fff} .clarient-site .sy-mock .mk-crumb{font-size:11.5px;color:#A79E93;font-weight:600} .clarient-site .sy-mock .mk-title{font-size:12px;color:var(--ink);font-weight:800} .clarient-site .sy-mock .mk-priv{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--peach);color:var(--terra-dark);font-size:10.5px;font-weight:800} .clarient-site .sy-mock .mk-body{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} .clarient-site .sy-mock .mk-doc{min-width:0;padding:16px;border-right:1px solid #EFE9E1;display:flex;flex-direction:column} .clarient-site .sy-mock .mk-h{font-size:15px;font-weight:800;letter-spacing:-.018em;line-height:1.25} .clarient-site .sy-mock .mk-src{margin-top:7px;display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--soft);font-weight:600} .clarient-site .sy-mock .mk-src svg{color:var(--terra)} .clarient-site .sy-mock .mk-lines{margin-top:13px;display:flex;flex-direction:column;gap:7px} .clarient-site .sy-mock .mk-lines i{height:7px;border-radius:4px;background:#EDE6DD} .clarient-site .sy-mock .mk-lines i:nth-child(3){width:78%} .clarient-site .sy-mock .mk-lines i:nth-child(4){width:90%;background:#F1EBE3} .clarient-site .sy-mock .mk-lines i:nth-child(5){width:64%;background:#F1EBE3} .clarient-site .sy-mock .mk-note{margin-top:14px;padding:11px 12px;border:1px solid #EFE9E1;border-radius:10px;background:#fff;flex:none} .clarient-site .sy-mock .mk-note b{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;color:var(--ink)} .clarient-site .sy-mock .mk-note b svg{color:var(--terra)} .clarient-site .sy-mock .mk-note span{margin-top:5px;display:block;font-size:10px;color:var(--soft);line-height:1.45} .clarient-site .sy-mock .mk-acts{margin-top:14px;display:flex;gap:8px;flex:none} .clarient-site .sy-mock .mk-acts span{padding:8px 13px;border-radius:8px;font-size:11px;font-weight:800;background:#fff;border:1px solid var(--line-2);color:var(--ink)} .clarient-site .sy-mock .mk-acts span:first-child{background:var(--terra);border-color:var(--terra);color:#fff} .clarient-site .sy-mock .mk-rec{min-width:0;padding:16px 16px 0} .clarient-site .sy-mock .mk-rec>b{font-size:10.5px;font-weight:800;color:var(--ink)} .clarient-site .sy-mock .mk-steps{margin-top:12px;display:flex;flex-direction:column;gap:12px} /* :not(.mk-foot) matters: the closing note is a sibling of the steps, and * without it the note inherits the icon/label grid and wraps inside the 20px * icon column. */ .clarient-site .sy-mock .mk-steps>div:not(.mk-foot){display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px} .clarient-site .sy-mock .mk-steps i{width:20px;height:20px;border-radius:50%;background:var(--terra-tint);color:var(--terra-dark);display:grid;place-items:center} .clarient-site .sy-mock .mk-steps .now i{background:var(--terra);color:#fff} .clarient-site .sy-mock .mk-steps .todo{opacity:.5} .clarient-site .sy-mock .mk-steps .todo i{background:none;border:1px dashed #CFC6BA;color:#A79E93} .clarient-site .sy-mock .mk-steps b{display:block;font-size:10.5px;color:var(--ink)} .clarient-site .sy-mock .mk-steps em{font-style:normal;font-size:9.5px;color:#A79E93;font-weight:600} .clarient-site .sy-mock .mk-foot{margin-top:4px;padding:10px 11px;border:1px solid #EFE9E1;border-radius:9px;background:#fff;font-size:9.5px;color:var(--soft);line-height:1.5} .clarient-site .sy-float{position:absolute;z-index:2;right:-14px;bottom:-20px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);padding:14px 18px;max-width:250px} .clarient-site .sy-float b{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;margin-bottom:5px} .clarient-site .sy-float b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--terra);flex:none} .clarient-site .sy-float span{font-size:12px;color:var(--soft);font-weight:600;line-height:1.45} .clarient-site .sy-fund{padding:96px 0} .clarient-site .sy-fund .sec-head{margin-bottom:48px} .clarient-site .sy-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line-2)} .clarient-site .sy-facts div{display:flex;align-items:flex-start;gap:13px;padding:20px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink);font-weight:700;line-height:1.45} .clarient-site .sy-facts svg{flex:none;margin-top:2px;color:var(--terra)} .clarient-site .sy-hosting{padding:96px 0} .clarient-site .sy-hosting .sec-head{max-width:680px;margin-bottom:48px} .clarient-site .sy-hosting .vcard a{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--terra-dark)} .clarient-site .sy-hosting .vcard a:hover{color:var(--terra)} .clarient-site .sy-brief{margin-top:44px;padding-top:44px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start} .clarient-site .sy-brief h3{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.022em;line-height:1.2;margin-bottom:12px;text-wrap:balance} .clarient-site .sy-brief p{font-size:16px;color:var(--body);line-height:1.65;margin-bottom:18px;text-wrap:pretty} .clarient-site .sy-brief p+p{font-size:15px;margin-bottom:24px} .clarient-site .sy-brief .cta-actions{justify-content:flex-start;flex-wrap:wrap} .clarient-site .sy-covers{display:grid;grid-template-columns:1fr 1fr;gap:0 40px} .clarient-site .sy-covers span{display:flex;align-items:center;gap:11px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:700;color:var(--ink)} .clarient-site .sy-covers svg{flex:none;color:var(--terra)} .clarient-site .sy-note{margin-top:18px;font-size:13.5px;color:var(--soft);line-height:1.55} .clarient-site .sy-cta{padding-top:32px} @media (max-width:980px){ .clarient-site .team-grid, .clarient-site .why-grid, .clarient-site .sy-split, .clarient-site .sy-brief{grid-template-columns:1fr;gap:40px} .clarient-site .why-grid{gap:32px} .clarient-site .sy-media{order:-1} .clarient-site .sy-facts, .clarient-site .sy-covers{grid-template-columns:1fr} .clarient-site .ab-why .trio{margin-top:48px} .clarient-site .sy-float{right:0;bottom:-16px} } @media (max-width:720px){ .clarient-site .ab-hero{padding:120px 0 40px} .clarient-site .sy-hero{padding-top:120px} .clarient-site .ab-team, .clarient-site .ab-why, .clarient-site .sy-promises, .clarient-site .sy-control, .clarient-site .sy-fund, .clarient-site .sy-hosting{padding:64px 0} .clarient-site .ab-team .sec-head{margin-bottom:40px} .clarient-site .tcard{padding:26px 22px} .clarient-site .tc-head img{width:64px;height:64px} .clarient-site .ab-hero .hero-cta, .clarient-site .sy-hero .hero-cta, .clarient-site .sy-brief .cta-actions{flex-direction:column;align-items:stretch} .clarient-site .sy-float{position:static;margin-top:14px;max-width:none} }