/* ==========================================================
   Tomorrow Intended — shared styles for the inner pages
   (Solutions, About, Contact) and the site-wide header links.
   Loaded after styles.css on every page.
   ========================================================== */

/* ---------- Header links (all pages) ---------- */
.bar__right { gap: clamp(14px, 2.4vw, 28px); }
.bar__right a { border-bottom-color: transparent; transition: border-color .3s; }
.bar__right a:hover, .bar__right a[aria-current="page"] { border-bottom-color: currentColor; }
.bar__right a.bar__cta { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); transition: background .3s, color .3s; }
.bar__right a.bar__cta:hover { background: var(--green); color: var(--ink); }
.bar.on-dark a.bar__cta { background: var(--paper); color: var(--ink); }
.bar__cta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.bar__right a.bar__cta:hover::before { background: var(--ink); }

.gdot { display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--green); margin-left: .04em; }

/* ---------- Page arrival: the content simply fades in, nothing blocks it ---------- */
body.inner > main { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Page hero ---------- */
.page-hero { padding: calc(150px + env(safe-area-inset-top, 0px)) var(--pad) 0; }
.page-hero h1 { font-size: clamp(44px, 8vw, 132px); line-height: .95; font-weight: 400; letter-spacing: -.06em; max-width: 15ch; text-wrap: balance; }
.page-hero .sub { margin-top: 28px; max-width: 580px; font-size: clamp(17px, 1.5vw, 20px); color: #4A4A46; }
.index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(36px, 5vw, 56px); }
.index a { padding: 9px 14px; border: 1px solid var(--hair); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.index a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Solutions: one block per industry ---------- */
.note { color: var(--grey); text-transform: none; letter-spacing: 0; margin-top: 18px; max-width: 70ch; line-height: 1.6; }
.sectors { display: flex; flex-direction: column; gap: clamp(100px, 13vw, 170px); padding: clamp(100px, 13vw, 170px) var(--pad) 0; }
.sector { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; scroll-margin-top: 90px; }
.sector:nth-child(even) .scene { order: 2; }
.sector > div { min-width: 0; }
.scene { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--black); border-radius: 18px; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__tag, .scene__name { position: absolute; left: 20px; z-index: 1; }
.scene__tag { top: 18px; color: #6E6E6A; }
.scene__name { bottom: 18px; color: var(--paper); display: flex; align-items: center; gap: 10px; }
.scene__name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sector__n { color: var(--grey); }
.sector h2 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1; letter-spacing: -.05em; font-weight: 400; margin: 14px 0 18px; text-wrap: balance; }
.sector__problem { color: #4A4A46; font-size: 18px; max-width: 46ch; }
.sector h3 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); margin: 30px 0 6px; }
.sector h3 b { color: var(--ink); font-weight: 400; }
.does li { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 17px; }
.does li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--green); }
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.impact div { border-top: 1px solid var(--ink); padding-top: 12px; min-width: 0; }
.impact b { display: block; font-weight: 400; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.045em; }
.impact span { display: block; margin-top: 6px; color: var(--grey); font-size: 14px; line-height: 1.35; }

/* ---------- About ---------- */
.big-text { font-size: clamp(26px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -.035em; max-width: 1300px; }
.big-text .grey { color: var(--grey); }

/* ---------- Contact: the free AI audit ---------- */
.audit { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 100px); padding: clamp(60px, 8vw, 100px) var(--pad) 0; align-items: start; }
.audit > div { min-width: 0; }
.gets li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--hair); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -.02em; }
.gets li:last-child { border-bottom: 1px solid var(--hair); }
.gets li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: .4em; border-radius: 50%; background: var(--green); }
.direct { margin-top: 30px; color: var(--grey); text-transform: none; letter-spacing: 0; line-height: 1.7; }
.direct span { color: var(--ink); user-select: all; border-bottom: 1px solid var(--ink); }
.form { display: grid; gap: 26px; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form label .mono { color: var(--grey); }
.form input, .form select, .form textarea {
  font: inherit; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -.02em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; outline: none; resize: vertical; width: 100%;
}
.form select { appearance: none; -webkit-appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) no-repeat calc(100% - 12px) 55% / 6px 6px, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) no-repeat calc(100% - 6px) 55% / 6px 6px; padding-right: 28px; cursor: pointer; }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-width: 2px; padding-bottom: 9px; }
.form ::placeholder { color: #A5A59F; }
.send { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font: inherit; font-size: 17px; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 16px 26px; cursor: pointer; transition: background .3s, color .3s; }
.send::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); transition: background .3s; }
.send:hover, .send:focus-visible { background: var(--green); color: var(--ink); }
.send:hover::before, .send:focus-visible::before { background: var(--ink); }
.form__hint { color: var(--grey); text-transform: none; letter-spacing: 0; line-height: 1.6; }
.faq details { border-top: 1px solid var(--hair); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--grey); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: #4A4A46; max-width: 62ch; }

/* ---------- Footer for inner pages ---------- */
.foot { background: var(--black); color: var(--paper); margin-top: clamp(110px, 14vw, 200px); padding: clamp(80px, 12vw, 160px) var(--pad) 28px; overflow: hidden; }
.foot__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.foot__cta h2 { font-size: clamp(40px, 7vw, 110px); line-height: .95; font-weight: 400; letter-spacing: -.06em; max-width: 13ch; }
.foot__btn { display: inline-flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 16px 26px; font-size: 17px; transition: background .3s; }
.foot__btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); transition: background .3s; }
.foot__btn:hover { background: var(--green); }
.foot__btn:hover::before { background: var(--ink); }
.foot__word { color: #FFFFFF; font-size: clamp(30px, 9.2vw, 168px); letter-spacing: -.055em; line-height: 1; text-align: center; white-space: nowrap; margin: clamp(80px, 12vw, 160px) 0; }
.foot__word .gdot { width: .17em; height: .17em; margin-left: .05em; animation: pulse 2.4s ease-in-out infinite; }
.foot__meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #6E6E6A; font-variant-numeric: tabular-nums; }
.foot__meta a { color: var(--paper); }
.foot__meta a:hover { color: var(--green); }
.foot__links { display: flex; gap: 22px; }

/* ---------- Pricing ---------- */
.founding { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 14px; border: 1px solid var(--hair); border-radius: 999px; }
.founding i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2.4s ease-in-out infinite; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: clamp(60px, 8vw, 100px) var(--pad) 0; align-items: stretch; }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px; border: 1px solid var(--hair); border-radius: 18px; background: var(--paper); }
.plan--main { background: var(--black); color: var(--paper); border-color: var(--black); }
.plan__n { color: var(--grey); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan__tag { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.plan__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.plan h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.04em; font-weight: 400; margin: 18px 0 10px; text-wrap: balance; }
.plan__for { color: #4A4A46; font-size: 15px; line-height: 1.45; min-height: 3.2em; }
.plan--main .plan__for { color: #B9B9B3; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.plan__price b { font-weight: 400; font-size: clamp(38px, 3.6vw, 52px); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span, .plan__monthly span { color: var(--grey); font-size: 14px; }
.plan__monthly { margin-top: 6px; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan__cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 6px; padding: 13px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; transition: background .3s, color .3s; }
.plan__cta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: background .3s; }
.plan__cta:hover { background: var(--green); color: var(--ink); }
.plan__cta:hover::before { background: var(--ink); }
.plan--main .plan__cta { background: var(--paper); color: var(--ink); }
.plan--main .plan__cta:hover { background: var(--green); }
.plan__plus { color: var(--grey); margin-top: 20px; }
.plan__list { margin-top: 14px; flex: 1; }
.plan__list li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.4; }
.plan--main .plan__list li { border-top-color: rgba(237, 237, 232, .14); }
.plan__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--green); }
.plan__time { color: var(--grey); margin-top: 18px; }
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.includes li { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; }
.includes b { font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
.includes span { color: #4A4A46; font-size: 16px; max-width: 34ch; }
.includes li { position: relative; background: linear-gradient(var(--hair), var(--hair)) no-repeat left top / 0% 1px; transition: opacity 1s var(--ease), transform 1s var(--ease), background-size 1.4s var(--ease); }
.includes li.in { background-size: 100% 1px; }
.custom__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.custom__row .big-text { max-width: 22ch; }

/* ---------- Work ---------- */
.case { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(70px, 9vw, 120px) var(--pad) 0; }
.case > div { min-width: 0; }
.case__visual { position: relative; aspect-ratio: 16 / 11; max-width: 100%; background: var(--black); border-radius: 18px; overflow: hidden; }
.shot { position: absolute; width: 78%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); transition: transform .9s var(--ease); }
.shot--back { right: 5%; top: 7%; opacity: .75; }
.shot--front { left: 5%; bottom: 7%; }
.case__visual:hover .shot--front { transform: translate(-6px, 6px); }
.case__visual:hover .shot--back { transform: translate(6px, -6px); }
.case__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--hair); border-radius: 999px; }
.pill i { width: 6px; height: 6px; border-radius: 50%; }
.pill--live i { background: var(--green); box-shadow: 0 0 0 3px rgba(59, 255, 107, .25); }
.pill--dev i { border: 1.5px solid var(--ink); }
.case h2 { font-size: clamp(36px, 4.6vw, 68px); line-height: 1; letter-spacing: -.05em; font-weight: 400; margin-top: 22px; }
.case__place { color: var(--grey); margin-top: 10px; }
.case h3 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); margin: 26px 0 8px; }
.case__body > p:not(.mono) { color: #4A4A46; font-size: 17px; max-width: 52ch; }
.case__link { margin-top: 28px; }

.own-one { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.own-one > div { min-width: 0; }
.own-one .scene--wide { margin-bottom: 0; }
.concept__tags { margin-top: 20px; }
.pill--concept i { background: var(--green); }
.own { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.own__item { min-width: 0; }
.scene--wide { aspect-ratio: 16 / 10; margin-bottom: 22px; }
.own__title { font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: -.045em; margin: 16px 0 8px; }
.own__text { color: #4A4A46; max-width: 52ch; }

.concepts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 6vw, 70px); }
.concept { min-width: 0; }
.concept__pkg { display: flex; align-items: center; gap: 4px; color: var(--grey); margin-top: 20px; }
.concept__pkg .gdot { width: 7px; height: 7px; margin: 0 4px 0 0; }
.concept h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.04em; margin: 8px 0 6px; }
.concept > p:last-child { color: #4A4A46; max-width: 48ch; }

/* concept mockups: each one wears its own brand, inside a browser frame */
.mock { aspect-ratio: 16 / 11; max-width: 100%; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(10, 10, 10, .12); transition: transform .8s var(--ease); font-family: var(--f); }
.concept:hover .mock { transform: translateY(-6px); }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.mock__bar span { margin-left: 10px; font-family: var(--f-mono); font-size: 10px; color: rgba(0, 0, 0, .45); }
.mock__body { flex: 1; position: relative; padding: 5% 6%; display: flex; flex-direction: column; gap: 6%; min-height: 0; }
.c-nav { display: flex; align-items: center; gap: 14px; font-size: 11px; }
.c-nav b { font-size: 15px; margin-right: auto; letter-spacing: -.02em; }
.c-nav em { font-style: normal; padding: 5px 10px; border-radius: 999px; }
.c-title { font-size: clamp(20px, 2.6vw, 34px); line-height: 1.02; letter-spacing: -.04em; }

.mock--cafe { background: #F4E9DC; color: #2B1B14; }
.mock--cafe .c-nav b { font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.mock--cafe .c-nav em { background: #E8743B; color: #fff; }
.mock--cafe .c-hero { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 6%; }
.mock--cafe .c-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #E8743B; margin-bottom: 8px; }
.mock--cafe .c-title { font-family: Georgia, "Times New Roman", serif; }
.mock--cafe .c-btn { display: inline-block; margin-top: 12px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #2B1B14; font-size: 11px; }
.c-cup { aspect-ratio: 1; max-width: 100%; border-radius: 50%; background: #2B1B14; display: grid; place-items: center; }
.c-cup i { width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #C98A5E, #8A4E2B 70%); animation: swirl 9s linear infinite; }
@keyframes swirl { to { transform: rotate(360deg); } }

.mock--dental { background: #EAF3F7; color: #0E3B5C; }
.mock--dental .c-nav b span { font-weight: 400; margin-left: 4px; color: #2BB3A3; }
.mock--dental .c-nav em { background: #0E3B5C; color: #fff; }
.c-slots { background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 11px; }
.c-slots p { color: #5B7588; margin-bottom: 8px; }
.c-slots div { display: flex; gap: 6px; flex-wrap: wrap; }
.c-slots span { padding: 5px 9px; border-radius: 8px; border: 1px solid #CFE0E8; }
.c-slots span.on { background: #2BB3A3; color: #fff; border-color: #2BB3A3; }
.c-panel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 11px; padding: 10px 12px; border-radius: 10px; background: #0E3B5C; color: #fff; }
.c-panel b { font-size: 15px; font-weight: 500; }
.c-panel em { font-style: normal; margin-left: auto; color: #7FE0D4; }

.mock--barber { background: #16261D; color: #E9E4D6; }
.mock--barber .mock__bar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
.mock--barber .mock__bar span { color: rgba(255, 255, 255, .4); }
.mock--barber .mock__bar i { background: rgba(255, 255, 255, .18); }
.mock--barber .c-nav em { background: #C9A45C; color: #16261D; }
.c-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; font-size: 11.5px; line-height: 1.35; }
.c-msg { max-width: 72%; padding: 8px 11px; border-radius: 12px; opacity: 0; transform: translateY(6px); }
.concept.in .c-msg { animation: msg .5s var(--ease) forwards; }
.concept.in .c-msg:nth-child(2) { animation-delay: .9s; }
.concept.in .c-msg:nth-child(3) { animation-delay: 1.8s; }
.concept.in .c-msg:nth-child(4) { animation-delay: 2.7s; }
@keyframes msg { to { opacity: 1; transform: none; } }
.c-msg--in { align-self: flex-end; background: #C9A45C; color: #16261D; border-bottom-right-radius: 4px; }
.c-msg--out { align-self: flex-start; background: #24382B; border-bottom-left-radius: 4px; }

.mock--plumb { background: #0F1B2D; color: #E8EDF5; }
.mock--plumb .mock__bar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
.mock--plumb .mock__bar span { color: rgba(255, 255, 255, .4); }
.mock--plumb .mock__bar i { background: rgba(255, 255, 255, .18); }
.c-flow { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 11.5px; }
.c-flow span { align-self: flex-start; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); }
.c-flow span.on { background: #FFC933; color: #0F1B2D; border-color: #FFC933; }
.c-flow i { width: 1px; height: 10px; margin-left: 18px; background: rgba(255, 255, 255, .3); }
.c-stat { position: absolute; right: 6%; bottom: 8%; text-align: right; }
.c-stat b { display: block; font-size: clamp(26px, 3vw, 40px); font-weight: 400; letter-spacing: -.04em; color: #FFC933; }
.c-stat span { font-size: 11px; color: rgba(255, 255, 255, .6); }

.mock .c-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.mock--law { background: #F6F1E9; color: #3B1420; }
.mock--law .c-nav b, .mock--law .c-title { font-family: Georgia, "Times New Roman", serif; }
.mock--law .c-nav em { background: #3B1420; color: #F6F1E9; }
.mock--law .c-kicker { color: #9A6B3E; }
.c-areas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.c-areas span { padding: 5px 10px; border: 1px solid rgba(59, 20, 32, .3); border-radius: 999px; }

.mock--land { background: #EEF2E6; color: #1F3D26; }
.mock--land .c-nav em { background: #1F3D26; color: #EEF2E6; }
.c-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: stretch; font-size: 10.5px; }
.c-form span { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: #fff; border-radius: 8px; color: #6C7E62; }
.c-form b { color: #1F3D26; font-weight: 500; font-size: 12px; }
.c-form em { font-style: normal; display: grid; place-items: center; padding: 0 12px; border-radius: 8px; background: #6BAA3C; color: #fff; }

.mock--fit { background: #111111; color: #F2F2F2; }
.mock--fit .mock__bar, .mock--realty .mock__bar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
.mock--fit .mock__bar span { color: rgba(255, 255, 255, .4); }
.mock--fit .mock__bar i { background: rgba(255, 255, 255, .18); }
.mock--fit .c-nav b { letter-spacing: .08em; }
.mock--fit .c-nav em { background: #FF4D2E; color: #111; }
.c-classes { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; }
.c-classes p { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; padding: 7px 10px; border-radius: 8px; background: #1C1C1C; }
.c-classes b { font-weight: 500; font-variant-numeric: tabular-nums; }
.c-classes em { font-style: normal; color: #FF4D2E; }
.c-classes em.full { color: #6D6D6D; }

.mock--shop { background: #F5ECE8; color: #3A2E2A; }
.mock--shop .c-nav b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 17px; }
.mock--shop .c-nav em { background: #3A2E2A; color: #F5ECE8; }
.c-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11px; }
.c-products p { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: #fff; }
.c-products i { aspect-ratio: 1; max-width: 100%; border-radius: 8px; background: var(--c); }
.c-products b { font-weight: 500; }
.c-alert { align-self: flex-start; font-size: 11px; padding: 6px 10px; border-radius: 8px; background: #3A2E2A; color: #F5ECE8; }

.mock--realty { background: #13203A; color: #EEF1F6; }
.mock--realty .mock__bar span { color: rgba(255, 255, 255, .4); }
.mock--realty .mock__bar i { background: rgba(255, 255, 255, .18); }
.mock--realty .c-nav em { background: #D4B06A; color: #13203A; }
.c-listing { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; align-items: center; background: #1C2B4A; border-radius: 10px; padding: 8px; }
.c-photo { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, #A9C6EA 0 62%, #5E8A4F 62%); }
.c-photo::before { content: ""; position: absolute; left: 24%; bottom: 30%; width: 52%; height: 50%; background: #F2EDE4; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.c-photo::after { content: ""; position: absolute; left: 45%; bottom: 30%; width: 10%; height: 20%; background: #13203A; box-shadow: -2.4em -.9em 0 -.2em #D4B06A, 2.4em -.9em 0 -.2em #D4B06A; font-size: 11px; }
.c-listing p { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #AFBBD0; }
.c-listing b { font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -.02em; }
.c-note { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(212, 176, 106, .4); color: #E8D4A8; }
.c-note i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #D4B06A; }

.mock--ledger { background: #F1F3F7; color: #1E2240; }
.mock--ledger .c-flow span { border-color: rgba(30, 34, 64, .2); background: #fff; }
.mock--ledger .c-flow span.on { background: #3F4BD8; color: #fff; border-color: #3F4BD8; }
.mock--ledger .c-flow i { background: rgba(30, 34, 64, .25); }
.mock--ledger .c-stat b { color: #3F4BD8; }
.mock--ledger .c-stat span { color: #6A6F8E; }

/* ---------- Privacy ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; letter-spacing: -.035em; margin: 40px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: #4A4A46; font-size: 17px; line-height: 1.6; }
.sel-text { color: var(--ink); user-select: all; border-bottom: 1px solid var(--ink); }

/* ---------- Home page links into the inner pages ---------- */
.more { display: inline-block; margin-top: 28px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.outro__audit { margin-top: 26px; }

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .includes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .bar__clock { display: none; }
}
@media (max-width: 900px) {
  .case, .own, .own-one, .concepts { grid-template-columns: 1fr; }
  .sector, .audit { grid-template-columns: 1fr; }
  .sector:nth-child(even) .scene { order: 0; }
}
/* phone menu: a dot button that opens the links full screen */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: none; border: 0; color: inherit; padding: 8px 0; cursor: pointer; position: relative; z-index: 1; }
  .menu-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
  body.menu-open .bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); }
  .bar__right { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 0 var(--pad); background: var(--paper); color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  body.menu-open .bar__right { opacity: 1; visibility: visible; }
  .bar__right a { font-family: var(--f); font-size: 40px; letter-spacing: -.05em; text-transform: none; }
  .bar__right a.bar__cta { font-size: 18px; letter-spacing: -.01em; padding: 14px 22px; margin-top: 10px; }
  .impact { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .impact span { font-size: 12px; }
  .form .pair { grid-template-columns: 1fr; }
  .plans, .includes { grid-template-columns: 1fr; }
  .mock { aspect-ratio: auto; }
  .mock__body { gap: 14px; padding: 16px 18px 18px; min-height: 230px; }
  .c-stat { position: static; align-self: flex-end; }
  .plan__for { min-height: 0; }
  .foot__meta { flex-direction: column; }
  .foot__links { flex-wrap: wrap; gap: 10px 18px; }
}