/* Landing: a scroll story. Bricolage Grotesque for display, Instrument Serif italic for the accent words, Inter for body. Loaded after app.css so the real app components render inside the page. */
:root { --green: #2FB35A; --green-dark: #27994C; --green-soft: #E6F7E9; --ink: #111214; --ink-2: #4B4E55; --grey: #787878; --line: #ECECEE; --paper: #FFFFFF; --paper-2: #F7FAF7; --nav: #1B1C1F; --vol: #1B6FD1; --vol-soft: #EAF2FF; --display: "Bricolage Grotesque", Inter, system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; }
body.landing { background: var(--paper); color: var(--ink); font-family: Inter, -apple-system, system-ui, sans-serif; padding: 0; overflow-x: hidden; }
body.landing #nav { display: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; }
.wrap.narrow { max-width: 820px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(36px, 5.2vw, 64px); margin-bottom: 20px; }
h2 em, h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--green-dark); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 14px; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 600px; }
.tiny { font-size: 13px; color: var(--grey); margin-top: 14px; }
section { padding: 110px 0; position: relative; }

/* reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; } .d5 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

/* nav */
/* The nav is sticky and floats over the page, so anchor jumps must stop short of it.
   Tapping a category card jumps to #browse; without this the heading it lands on sits
   underneath the bar and reads as cut off. */
html { scroll-padding-top: 96px; }
.nav-wrap { position: sticky; top: 14px; z-index: 50; padding: 0 16px; }
.nav { max-width: 1100px; margin: 0 auto; height: 62px; background: rgba(27,28,31,.92); backdrop-filter: blur(14px); border-radius: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.16); transition: transform .3s ease; }
.nav-wrap.scrolled .nav { transform: scale(.985); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: inherit; }
.brand .wm-mark { height: 24px; width: auto; display: block; }
/* The mark stands where the "o" used to sit in the drawn wordmark; the name
   beside it is real text, so it can be read, selected and translated. */
.brand .wm-text { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.links { display: none; gap: 26px; font-weight: 500; font-size: 15px; }
.links a { color: #fff; opacity: .85; } .links a:hover { opacity: 1; }
@media (min-width: 900px) { .links { display: flex; } }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 12px; background: var(--green); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px rgba(76,201,91,.35); transition: transform .15s ease, background .15s ease; }
.cta:hover { background: var(--green-dark); transform: translateY(-1px); }
.cta.big { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.ghost { display: inline-flex; align-items: center; min-height: 54px; padding: 0 22px; border-radius: 14px; border: 1.5px solid #D9D9DE; font-weight: 700; color: var(--ink); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* blobs */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.blobs .b1 { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle at 30% 30%, #C9F1D0, transparent 70%); }
.blobs .b2 { width: 620px; height: 620px; right: -200px; top: 60px; background: radial-gradient(circle at 60% 40%, #D8E8FF, transparent 70%); animation-delay: -6s; }
.blobs .b3 { width: 420px; height: 420px; left: 40%; bottom: -200px; background: radial-gradient(circle, #FFEFC7, transparent 70%); animation-delay: -12s; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } }

/* hero */
.hero { padding: 72px 0 0; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.hero-in { display: grid; gap: 40px; align-items: center; z-index: 1; }
.kicker { font-size: 14px; font-weight: 600; color: var(--grey); margin-bottom: 22px; letter-spacing: .01em; }
.kicker span { color: var(--green-dark); margin: 0 6px; font-weight: 700; }
.hero h1 { font-size: clamp(46px, 7.2vw, 96px); font-weight: 750; margin-bottom: 22px; max-width: 12ch; }
.hero .lead { margin-bottom: 26px; }
@media (min-width: 980px) { .hero-in { grid-template-columns: 1.1fr .9fr; gap: 60px; } .hero { padding-top: 96px; } }

/* orbit */
.orbit-wrap { display: grid; place-items: center; }
.orbit { position: relative; width: min(440px, 88vw); aspect-ratio: 1; container-type: inline-size; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed #CFE9D3; }
.ring.r2 { inset: 17%; border-color: #C3E5C9; } .ring.r1 { inset: 34%; border-color: #B4DFBC; border-style: solid; }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(76,201,91,.4); font-size: 11px; font-weight: 700; }
.center .ic { width: 24px; height: 24px; margin-bottom: -2px; }
.sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a, 0deg)); animation: spin 40s linear infinite; }
.orbit.paused .sat, .orbit.paused .sat > * { animation-play-state: paused; }
.sat > * { position: absolute; left: calc(var(--r) * 1cqw); top: 0; transform: translate(-50%,-50%) rotate(calc(-1 * var(--a, 0deg))); animation: unspin 40s linear infinite; }
.sat .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: hsl(var(--hue) 55% 85%); color: hsl(var(--hue) 45% 28%); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.sat .av.org { background: var(--vol-soft); color: var(--vol); }
.sat .av .ic { width: 20px; height: 20px; }
.sat .satpin { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sat b { white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff; padding: 3px 8px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
/* Six nowrap labels still cannot fit a circle only 88vw across, even stacked: they
   would collide with each other. The avatars and rings carry the idea at that size. */
@media (max-width: 719px) { .sat b { display: none; } }
.s1 { --r: 37; --a: 12deg; } .s2 { --r: 49; --a: 72deg; } .s3 { --r: 42; --a: 144deg; } .s4 { --r: 35; --a: 205deg; } .s5 { --r: 49; --a: 268deg; } .s6 { --r: 45; --a: 324deg; }
@keyframes spin { from { transform: rotate(var(--a, 0deg)); } to { transform: rotate(calc(var(--a, 0deg) + 360deg)); } }
@keyframes unspin { from { transform: translate(-50%,-50%) rotate(calc(-1 * var(--a, 0deg))); } to { transform: translate(-50%,-50%) rotate(calc(-1 * var(--a, 0deg) - 360deg)); } }
.radius { position: absolute; right: 2%; bottom: 8%; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--green-dark); }

/* marquee */
.marquee { margin-top: 64px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; background: var(--paper); z-index: 1; position: relative; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mchip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: var(--green-soft); color: #256E30; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mchip .ic { width: 18px; height: 18px; } .mchip.vol { background: var(--vol-soft); color: var(--vol); }

/* story */
.story { background: var(--paper-2); }
.story-grid { display: grid; gap: 30px; margin-top: 20px; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 240px 1fr; gap: 60px; } }
.rail-sticky { position: sticky; top: 110px; }
.clock { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); min-height: 1.1em; transition: opacity .3s; }
.track { position: relative; height: 4px; background: #DDE7DF; border-radius: 2px; margin: 18px 0 12px; overflow: hidden; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, .16) * 100%); background: var(--green); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.rail-note { font-size: 13px; color: var(--grey); }
@media (max-width: 899px) { .rail-sticky { position: static; display: flex; align-items: baseline; gap: 16px; } .track { flex: 1; margin: 0; } .rail-note { display: none; } .clock { font-size: 32px; } }
.chapters { display: flex; flex-direction: column; gap: 22vh; padding: 10vh 0 20vh; }
.chapter { display: grid; gap: 22px; align-items: center; opacity: .35; transition: opacity .5s ease; }
.chapter.active { opacity: 1; }
@media (min-width: 720px) { .chapter { grid-template-columns: 1fr 1fr; gap: 48px; } .chapter:nth-child(even) .ch-text { order: 2; } }
.ch-time { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--green-dark); margin-bottom: 10px; }
.chapter h3 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.chapter p { color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.ch-visual { display: flex; flex-direction: column; gap: 12px; transform: translateY(18px) scale(.98); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.chapter.active .ch-visual { transform: none; }
.ch-visual .zcard { max-width: 420px; }
.form-rows.mini .frow { grid-template-columns: 30px 70px 1fr; padding: 11px 12px; }
.form-rows.mini .fl { font-size: 14px; }
.pill { display: inline-block; background: #F2F2F5; border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 500; }
.pill.strong { font-weight: 800; }
.notif { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.notif .nbell { width: 40px; height: 40px; border-radius: 12px; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.notif b { display: block; font-size: 14px; } .notif span { font-size: 13px; color: var(--grey); }
.tag-pending { background: #F2F2F5; color: var(--ink-2); }
.guard .btnrow .btn { pointer-events: none; }
.bal { font-family: var(--display); font-size: 30px; font-weight: 750; letter-spacing: -0.02em; }
.hours { flex-direction: row; align-items: center; justify-content: space-between; }

/* feeds */
.feeds { background: var(--paper); }
.feed-demo { margin-top: 28px; }
.demo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.demo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: all .15s ease; }
.demo-chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.zgrid.three { grid-template-columns: 1fr; }
@media (min-width: 640px) { .zgrid.three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .zgrid.three { grid-template-columns: 1fr 1fr 1fr; } }
.zcard { transition: transform .25s ease, box-shadow .25s ease; }
.zcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }

/* numbers */

/* parents */
.parents { background: var(--paper-2); }
.two { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: 72px; } }
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--ink-2); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { color: var(--green-dark); margin-top: 4px; flex: none; }
.panel { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 6px; }
.panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.panel-head b { display: block; } .panel-head span { font-size: 13px; color: var(--grey); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; }
.toggle span { flex: 1; }
.toggle i { width: 46px; height: 28px; border-radius: 14px; background: #D9D9DE; position: relative; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.toggle.on i { background: var(--green); } .toggle.on i::after { transform: translateX(18px); }
.toggle em { font-style: normal; font-size: 12px; font-weight: 700; color: #B3261E; background: #FFECEB; padding: 3px 8px; border-radius: 8px; }
.clockrule { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px; background: var(--paper-2); border-radius: 16px; }
.clockrule b { display: block; font-family: var(--display); font-size: 22px; } .clockrule span { font-size: 13px; color: var(--grey); }
.face { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); position: relative; flex: none; }
.hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; background: var(--ink); border-radius: 2px; }
.hand.h { width: 3px; height: 16px; transform: rotate(240deg); } .hand.m { width: 2px; height: 22px; transform: rotate(0deg); background: var(--green-dark); }

/* orgs */
.org-cloud { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.oc { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; background: var(--vol-soft); color: var(--vol); font-weight: 600; font-size: 15px; animation: float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.oc .ic { width: 20px; height: 20px; }
.oc:nth-child(3n) { background: var(--green-soft); color: #256E30; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* reviews & faq */
.grid3 { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; padding: 28px; background: var(--paper-2); border-radius: 22px; display: flex; flex-direction: column; gap: 18px; }
.quote p { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); }
.quote footer b { display: block; } .quote footer span { color: var(--grey); font-size: 14px; }
.faqs { background: var(--paper-2); }
.faqs details { border-top: 1px solid #E2E2E6; }
.faqs details:last-of-type { border-bottom: 1px solid #E2E2E6; }
.faqs summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--display); }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--grey); font-weight: 400; font-size: 26px; transition: transform .2s; }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details p { color: var(--ink-2); padding: 0 0 20px; max-width: 700px; line-height: 1.55; }
.support { margin-top: 22px; color: var(--grey); } .support a { color: var(--green-dark); font-weight: 600; }

/* final */
.final { overflow: hidden; }
.final-in { display: grid; gap: 40px; align-items: center; z-index: 1; }
@media (min-width: 900px) { .final-in { grid-template-columns: 1.1fr .9fr; } }
.phone { width: 300px; height: 620px; background: #111; border-radius: 44px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.28); position: relative; overflow: hidden; margin: 0 auto; transform: rotate(-4deg); }
.phone .notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; background: #111; border-radius: 14px; z-index: 2; }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 36px; background: #F5F5F7; pointer-events: none; }
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.foot-in { display: flex; flex-direction: column; gap: 10px; color: var(--grey); }
.foot .brand { color: var(--ink); }

.zimg.has-photo{position:relative;overflow:hidden;background:#e8ece9}.zimg.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.zimg.has-photo .zbadge{position:absolute}

/* ---- homepage browse ---- */
.browse { padding: 72px 0 24px; }
.browse h2 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.025em; line-height: 1.02; margin: 0 0 10px; } .browse h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green-dark); }
.zipform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 22px 0 18px; max-width: 760px; }
@media (min-width: 720px) { .zipform { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zipform #place, .zipform #category, .zipform #age { grid-column: span 1; }
@media (max-width: 719px) { .zipform #age { grid-column: span 2; } }
.radius-field { position: relative; display: flex; align-items: center; }
.radius-field input { width: 100%; padding-right: 34px; }
.radius-field span { position: absolute; right: 12px; font-size: 14px; color: var(--grey); pointer-events: none; }
@media (min-width: 720px) { .zipform { grid-template-columns: 150px 1fr 120px auto; } }
.zipform input, .zipform select { font: inherit; font-size: 16px; min-height: 48px; padding: 0 14px; border: 1.5px solid #D9D9DE; border-radius: 12px; background: #fff; color: var(--ink); }
.zipform input:focus, .zipform select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.zipform .cta { min-height: 48px; }
/* A paid role open to someone still at school is the hardest thing to find and
   the easiest to miss, so it is called out rather than left to the age line. */
.zfacts .zunder18 b { background: var(--green-soft, #E6F7E9); color: var(--green-dark, #1B7A3A); padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.zfacts .zcheck b { background: #F3F3F5; color: var(--grey, #6B6B72); padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; font-weight: 600; }
@media (min-width: 720px) { .zipform { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.typecards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 18px; }
@media (min-width: 720px) { .typecards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .typecard { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  .typecard i { position: static; order: -1; margin: 0 0 2px; }
  .typecard b { padding-right: 0; overflow-wrap: anywhere; }
}
.typecard { display: grid; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; position: relative; min-height: 96px; align-content: start; }
.typecard b { font-family: var(--display); font-size: 17px; letter-spacing: -.01em; padding-right: 64px; } .typecard span { font-size: 13px; color: var(--grey); line-height: 1.35; }
.typecard i { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); }
.typecard.on { border-color: var(--ink); background: var(--ink); color: #fff; } .typecard.on span { color: #C9CDCB; }
.browse-sum { font-size: 14px; color: var(--grey); margin: 0 0 12px; }
.zgrid .zcard .zprice.is-shadow, .zgrid .zbadge.is-shadow { color: #6D28D9; } .zgrid .zbadge.is-shadow { background: #EDE9FE; }
.compliance a.inv { color: #fff; }
/* A scraped image is whatever the host site happened to publish: a wide wordmark as
   often as a photograph. Cropping one to fill turns it into an unreadable blowup, and
   nothing about the file reliably says which it is (the wordmark we hit measured
   443x222, an ordinary event photo 400x267). So never crop: fit the whole image, and
   fill the leftover with a blurred copy of itself rather than dead white space. */
.zimg.has-photo img { object-fit: contain; }
.zimg.has-photo .zbg { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(18px) saturate(1.2); transform: scale(1.08); opacity: .6; }
@media (prefers-reduced-transparency: reduce) { .zimg.has-photo .zbg { opacity: .35; } }
.zimg.has-photo.is-logo { background: #fff; }
.zimg.has-photo.is-logo .zbg { display: none; }
.zimg.has-photo.is-logo img { padding: 12%; box-sizing: border-box; }

/* The security band: the checks stated plainly, above the fold on a laptop and
   early on a phone, because for a product that puts minors in touch with adults
   this is the first question and should not be a page someone has to find. */
.trustband { padding: 72px 0; background: var(--ink, #111214); color: #fff; }
.trustband .eyebrow { color: #7FD8A0; }
.trustband h2 { color: #fff; margin: 0 0 32px; }
.trustband h2 em { color: #7FD8A0; font-style: normal; }
.tb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tb { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.tb .ic { width: 22px; height: 22px; color: #7FD8A0; }
.tb b { font-size: 16px; }
.tb span { font-size: 14px; line-height: 1.5; color: #B9BDC4; }
.tb-foot { margin: 26px 0 0; }
.tb-foot a { color: #7FD8A0; font-weight: 600; text-decoration: none; }
.tb-foot a:hover { text-decoration: underline; }
@media (max-width: 900px) { .tb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .trustband { padding: 52px 0; } .tb-grid { grid-template-columns: 1fr; } }