/* TeliportMe marketing — the ink / paper / coral system.
   Loaded after tokens.css; overrides the Webflow export (base.css) and custom.css.
   Rules: two surfaces (paper, ink); type inherits its surface; buttons are never coloured;
   coral is a highlight with four jobs; see docs/MARKETING_BRAND_SYSTEM_PLAN.md §0. */

/* ---------- surfaces ---------- */
html { background: var(--paper); }
body { background-color: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.on-ink { color: var(--paper); }
header.hero-band { background-color: var(--ink); }
.footer--full { background-color: var(--ink); }
.footer--full.divider-top { border-top: 1px solid var(--hair-on-ink); }
section.wrapper--s.py-7a.on-ink { background-color: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }

/* ---------- type ---------- */
h1, .heading--xl { font-size: var(--fs-display-m); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: 700; }
h2, .heading--l { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); font-weight: 700; }
h3, .heading--m { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
.heading--s { font-size: 1.125rem; line-height: 1.25; font-weight: 600; }
.tag--m, .tag--s { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); font-weight: 600; }
.tag--m { color: var(--text-on-paper-3); }
.on-ink .tag--m { color: var(--text-on-ink-3); }
.text--l { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-paper-2); }
.on-ink .text--l { color: var(--text-on-ink-2); }
.hero_sub { font-size: var(--fs-lead); color: var(--text-on-ink-2); }
.text--xxs.is--hero-check { color: inherit; }
@media screen and (min-width: 768px) {
  h1, .heading--xl { font-size: var(--fs-display); }
}

/* text that base.css painted white for the old navy page */
.logos_link.is--wordmark, .proof_num { color: var(--ink); }
.proof_label { color: var(--text-on-paper-2); }
.tag--s.is--tab-num, .tag--s.is--tab-text, .testimonial_tab { color: var(--text-on-paper-2); }
.w--current .tag--s.is--tab-text, .testimonial_tab.w--current { color: var(--ink); }
.logos_img { filter: brightness(0) opacity(0.72); }
.on-ink .logos_img { filter: none; }
.proof_item + .proof_item { border-left-color: var(--hair-on-paper); }

/* ---------- buttons: never coloured ---------- */
.btn_primary { height: auto; padding: 0.9rem 1.5rem; border: 0; border-radius: var(--r-button); background-color: var(--ink); transition: background-color var(--dur) var(--ease); }
.btn_primary:hover { background-color: var(--navy); }
.btn_primary .btn_text { color: var(--paper); font-weight: 600; }
.on-ink .btn_primary { background-color: var(--paper); }
.on-ink .btn_primary:hover { background-color: #e6e2e2; }
.on-ink .btn_primary .btn_text { color: var(--ink); }
/* nav "Sign in" is a text link */
.btn_primary.is--nav { margin-left: 1.5rem; padding: 0.875rem 0; background-color: transparent; }
.btn_primary.is--nav:hover { background-color: transparent; }
.btn_primary.is--nav .btn_text { color: var(--paper); }
.btn_primary.is--nav:hover .btn_text { color: var(--hl-on-ink); }
/* secondary is a text link with a hairline */
.btn_secondary { height: auto; padding: 0.9rem 0; border: 0; border-radius: 0; background-color: transparent; }
.btn_secondary .btn_text { padding-bottom: 3px; border-bottom: 1px solid var(--hair-on-paper); color: var(--ink); font-weight: 600; transition: border-color var(--dur) var(--ease); }
.btn_secondary:hover .btn_text { border-bottom-color: var(--ink); }
.on-ink .btn_secondary .btn_text { color: var(--paper); border-bottom-color: rgba(249, 247, 247, 0.35); }
.on-ink .btn_secondary:hover .btn_text { border-bottom-color: var(--paper); }
.cta-pair { gap: 0.75rem 1.75rem; }

/* ---------- the highlight: four jobs ---------- */
.testimonial_tab.w--current, .w-tab-link.w--current { border-bottom-color: var(--hl); }
.hero_check-link { text-decoration-color: var(--hl); }
.hero_video-link { color: var(--hl-on-ink); }
.proof_label a { color: var(--hl-on-paper); }
.proof_num small { color: var(--hl); }
.footer_link:hover { color: var(--hl-on-ink); }
.tag--s.is--new { background-color: var(--coral-100); color: var(--coral-800); border-radius: var(--r-pill); }

/* ---------- shape: one radius per role, hairlines, no shadows ---------- */
.testimonial, .suite-processes_card, .suite-processes_card1, .card_role, .exp-engage_panel, .app_panel, .card_pricing, .card_link, .content-card, .card_feature, .n-card_feature { border: 1px solid var(--hair-on-paper); border-radius: var(--r-card); box-shadow: none; }
.card_role { background-color: var(--white); }
.hero_media { border-radius: var(--r-card); }
.tab-prev, .tab-next, .controls_btn { border: 1px solid var(--hair-on-paper); }

/* ---------- footer ---------- */
.footer--full .footer_link { color: var(--text-on-ink-2); }
.footer--full .footer_link.is--parent { color: var(--paper); }
.social_btn { background-color: rgba(249, 247, 247, 0.12); border-radius: var(--r-card); }
.social_btn:hover { background-color: rgba(249, 247, 247, 0.22); box-shadow: none; }
.social_icon { filter: brightness(0) invert(1); opacity: 0.85; }

/* ---------- pricing cards: no coloured fills; the featured plan gets an ink border ---------- */
.card_pricing.is--cca, .card_pricing.is--ccc { background-color: var(--white); }
.card_pricing.is--ccb { background-color: var(--white); border: 1px solid var(--ink); }
.card_pricing.is--dd, .pricing_line--dd { background-color: var(--white); }

/* ---------- homepage hero (from the hero study) ---------- */
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
.on-ink .eyebrow { color: var(--text-on-ink-3); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--hl); vertical-align: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 22%, transparent); }
header.hero-band { position: relative; overflow: hidden; isolation: isolate; }
header.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 70% at 88% 70%, rgba(22, 33, 62, 0.95) 0%, rgba(22, 33, 62, 0) 65%),
  radial-gradient(60% 50% at 0% 0%, rgba(15, 52, 96, 0.28) 0%, rgba(15, 52, 96, 0) 60%); }
.hero-v2 { --gutter: 20px; width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.hero-v2_grid { display: grid; gap: 56px; padding: 36px 0 72px; }
.hero-v2 .hero_heading { margin-top: 22px; max-width: none; text-wrap: balance; }
.hero-v2 .hero_sub { margin-top: 24px; max-width: 44ch; }
.hero-v2_cta { margin-top: 36px; gap: 22px; }
.hero-v2_cta .btn_primary { width: 100%; text-align: center; }
.hero-v2_micro { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: var(--fs-micro); color: var(--text-on-ink-3); }
.hero-v2_micro span { white-space: nowrap; }
.hero-v2_micro span + span::before { content: "\00b7"; margin: 0 12px; color: rgba(249, 247, 247, 0.3); }
.hero-v2_micro a { color: var(--hl-on-ink); text-decoration: none; font-weight: 600; }
.hero-v2_tour { position: relative; } /* stays inside the gutters on phones: a bleed crops the tour's title, scene strip and buttons */
.hero-v2_frame { position: relative; } /* the blue plate sits behind the picture, offset from its top */
.hero-v2_plate { position: absolute; left: 24px; right: calc(-1 * var(--gutter)); top: 24px; bottom: -24px; z-index: -1; border-radius: var(--r-card); background: var(--blue); }
.hero-v2 .hero_media { aspect-ratio: 16 / 10; background: #0b1326 url("../img/hero-pano-poster.jpg") center / cover no-repeat; border-radius: var(--r-card); box-shadow: var(--shadow-plate); }
/* hero-pano.js: the demo room drawn on a canvas and turned by scrolling; "Step inside" loads the live tour */
.hero_pano { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease); cursor: grab; touch-action: pan-y; }
.hero_pano:active { cursor: grabbing; }
.is-drawn .hero_pano { opacity: 1; }
.hero_enter { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-button); background: var(--paper); color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; box-shadow: 0 6px 20px rgba(26, 26, 46, 0.28); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero_enter:hover { background: var(--white); transform: translateY(-1px); }
@media screen and (min-width: 768px) { .hero_enter { left: 20px; bottom: 20px; min-height: 46px; padding: 0 20px; font-size: 15px; } }
@media screen and (min-width: 768px) { .hero-v2 { --gutter: 32px; } }
@media screen and (min-width: 992px) {
  .hero-v2_grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); align-items: center; gap: 64px; padding: 72px 0 112px; }
  .hero-v2_cta { flex-direction: row; align-items: center; gap: 28px; }
  .hero-v2_cta .btn_primary { width: auto; }
  .hero-v2_tour { margin-right: calc((100vw - min(100vw - 2 * var(--gutter), 1280px)) / -2 - 3vw); }
  .hero-v2_plate { left: 32px; right: -32px; top: 32px; bottom: -32px; }
}

/* ---------- homepage reviews block ---------- */
.reviews_head { margin-bottom: 2.5rem; }
.reviews_head .eyebrow { margin-bottom: 0.75rem; }
.reviews_featured { margin-bottom: 2rem; }
.hero-v2_cta .btn_secondary { width: auto; align-self: flex-start; }
.hero-v2 .hero_sub { margin-top: 36px; }
h2.heading--m { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); font-weight: 700; }

/* ---------- SEO sweep: visual headings that are not outline headings ---------- */
.h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- homepage "Built for" link row ---------- */
.builtfor { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--hair-on-paper); text-align: center; }
.builtfor .eyebrow { margin-bottom: 1rem; }
.builtfor_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.builtfor_list a { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair-on-paper); padding-bottom: 2px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.builtfor_list a:hover { color: var(--hl-on-paper); border-bottom-color: var(--hl-on-paper); }
/* The same industry links inside the home hero, on ink: one door per audience in the first screen */
.builtfor.is--hero { margin-top: 28px; padding-top: 20px; border-top-color: var(--hair-on-ink); text-align: left; }
.builtfor.is--hero .eyebrow { margin-bottom: 12px; color: var(--text-on-ink-3); }
.builtfor.is--hero .builtfor_list { justify-content: flex-start; gap: 10px 20px; }
.builtfor.is--hero .builtfor_list a { color: var(--paper); font-size: 14px; border-bottom-color: var(--hair-on-ink); }
.builtfor.is--hero .builtfor_list a:hover { color: var(--hl-on-ink); border-bottom-color: var(--hl-on-ink); }

/* ---------- ink hero bands on the non-home pages (Phase 3) ---------- */
.hero-band { position: relative; isolation: isolate; background-color: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 70% at 88% 70%, rgba(22, 33, 62, 0.95) 0%, rgba(22, 33, 62, 0) 65%),
  radial-gradient(60% 50% at 0% 0%, rgba(15, 52, 96, 0.28) 0%, rgba(15, 52, 96, 0) 60%); }
header.hero-band { box-shadow: none; clip-path: none; }
.hero-band.wrapper--xl, .hero-band.suite_wrapper--xl { padding-bottom: 3rem; }
.hero-band.wrapper--xl .py-7a { padding-top: 3rem; padding-bottom: 2rem; }
.hero-band--title { padding: 3.5rem 20px 3rem; text-align: center; }
.hero-band--title h1 { margin: 0 auto; max-width: 20ch; text-wrap: balance; }
.on-ink .is--text-green100, .on-ink .text-green100, .on-ink .heading--xl { color: var(--paper); }
.on-ink .text--m, .on-ink .text--s { color: var(--text-on-ink-2); }
.hero-band .social_btn img { filter: none; }
.hero-band .social_btn { background-color: var(--paper); }
/* body-copy links follow the highlight roles */
main p a:not([class]), .text--m a:not([class]), .text--s a:not([class]) { color: var(--hl-on-paper); text-decoration: none; border-bottom: 1px solid currentColor; }
.on-ink p a:not([class]) { color: var(--hl-on-ink); }
@media screen and (min-width: 768px) { .hero-band--title { padding: 5rem 32px 4rem; } }
/* short page title on paper, in place of the ink title band (pricing) */
.page-title { padding: 1.75rem 20px 0; text-align: center; }
.page-title h1, .showcase_title h1 { margin: 0; font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); }
/* showcase: the title sits in the same box as the industry headings, so it lines up with them (left) */
.processes_controls.showcase_title { padding-top: 1.75rem; }
.showcase_title ~ .wrapper-full .processes_controls h2 { font-size: 26px; }
.page-title + .py-7a { padding-top: 2.25rem; }
@media screen and (min-width: 992px) { .processes_controls.showcase_title { padding-top: 3rem; } .showcase_title h1 { font-size: 48px; } .showcase_title ~ .wrapper-full .processes_controls h2 { font-size: 34px; } }
@media screen and (min-width: 992px) { .page-title { padding-top: 3rem; } .page-title h1 { font-size: 48px; } .page-title + .py-7a { padding-top: 2.75rem; } }
/* pricing: Monthly / Annual switch (two-part pill; the selected half fills ink) */
.bill-toggle { display: flex; width: 100%; max-width: 320px; margin: 0 auto 36px; padding: 4px; border: 1px solid var(--hair-on-paper); border-radius: var(--r-pill); background: var(--white); }
.bill-toggle_opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-on-paper-2); font: 600 15px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.bill-toggle_opt:hover { color: var(--ink); }
.bill-toggle_opt.is-on { background: var(--ink); color: var(--paper); }
.bill-toggle_opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bill-toggle_save { color: var(--hl-on-paper); font-size: 13px; font-weight: 600; line-height: 1; }
.bill-toggle_opt.is-on .bill-toggle_save { color: var(--hl-on-ink); }
.hero-band.suite_wrapper--xl { padding: 2.5rem 20px 3rem; }
.hero-band h1 { overflow-wrap: anywhere; }
@media screen and (max-width: 991px) { .hero-band .col_container.is--reversed { flex-direction: column; } }
@media screen and (min-width: 768px) { .hero-band.suite_wrapper--xl { padding: 4rem 32px 3.5rem; } }
h1.text--super { font-size: var(--fs-display-m); line-height: var(--lh-display); letter-spacing: var(--track-display); }
@media screen and (min-width: 768px) { h1.text--super { font-size: var(--fs-display); } }

/* ---------- Phase 4: product imagery ---------- */
.product-visual { display: block; width: 100%; height: auto; max-width: 640px; margin-inline: auto; }
.tour-card { position: relative; isolation: isolate; margin: 0; width: 100%; max-width: 640px; margin-inline: auto; }
.tour-card .eyebrow { margin-bottom: 14px; }
.tour-card_plate { position: absolute; left: 24px; right: -24px; top: calc(24px + 32px); bottom: -24px; z-index: -1; border-radius: var(--r-card); background: var(--blue); }
.tour-card_frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-card); background: #0b1326; box-shadow: var(--shadow-plate); }
.tour-card_frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-band .tour-card { margin-right: 0; }
@media screen and (min-width: 992px) { .hero-band .tour-card { margin-right: 0; } }

/* ---------- Phase 5 details ---------- */
/* third-party widgets (chat launcher) must not widen the page */
html, body { overflow-x: clip; }
/* merged Trusted-by / Featured-in row: items carry the width (the logo SVGs have no intrinsic size) */
.logos_list--merged { flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem; }
.logos_list--merged .logos_item { flex: 0 0 auto; width: 120px; margin: 0; padding: 0; }
.logos_list--merged .logos_item .logos_img { width: 100%; height: 28px; object-fit: contain; display: block; }
.logos_list--merged .logos_img[alt="ArchDaily"] { height: 34px; }
.logos_list--merged .is--wordmark { width: auto; }
@media screen and (max-width: 479px) { .logos_list--merged { gap: 1rem 1.5rem; } .logos_list--merged .logos_item { width: 96px; } .logos_list--merged .logos_item .logos_img { height: 22px; } .logos_list--merged .is--wordmark { font-size: 1.125rem; } }
.logos_list--merged .logos_item { height: 40px; display: flex; align-items: center; justify-content: center; }
@media screen and (max-width: 479px) { .logos_list--merged { gap: 0.25rem 1.25rem; } .logos_list--merged .logos_item { height: 44px; } }

/* ---------- featured testimonial: compact card ---------- */
.testimonial { padding: 1.75rem; }
.testimonial .col_container { align-items: center; gap: 1.5rem; }
.testimonial .col_50.is--testimonial { flex: 0 0 auto; width: auto; display: flex; justify-content: center; }
.testimonial .testimonial_grid-wrapper, .testimonial .testimonial_grid { width: auto; height: auto; margin: 0; }
.testimonial .testimonial_grid-property { padding: 0; }
.testimonial .testimonial_img-property { width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center; }
.testimonial .text--m { font-size: 1.0625rem; line-height: 1.55; }
.testimonial .s-4a > * + * { margin-top: 1.25rem; }
.testimonial .text--s { font-size: 0.875rem; }
@media screen and (min-width: 768px) {
  .testimonial { padding: 2.5rem 3rem; }
  .testimonial .col_container { gap: 3rem; flex-wrap: nowrap; }
  .testimonial .col_50.is--testimonial { width: 200px; }
  .testimonial .testimonial_img-property { width: 160px; height: 160px; }
  .testimonial .col_50.is--aligned-center { flex: 1 1 auto; width: auto; }
}
.testimonial .testimonial_grid-wrapper { padding-bottom: 0; }
/* reviews: tabs and card share one measure; room between quote and author */
.reviews .w-tabs { max-width: 1040px; margin-inline: auto; }
.testimonial .s-4a > * + * { margin-top: 1.75rem; }
.testimonial .stack.s-1a .text--s:not(.is--bold) { color: var(--text-on-paper-2); }

/* ---------- G2 reviewer cards in the testimonial tabs ---------- */
.testimonial.is--g2 .testimonial_img-property { border: 0; }
.g2-rating { color: var(--text-on-paper-2); }
.g2-stars { color: var(--hl); letter-spacing: 0.08em; }
.g2-rating a { color: var(--hl-on-paper); font-weight: 600; text-decoration: none; }
.testimonial_tabs { flex-wrap: wrap; row-gap: 0.5rem; }

/* ---------- reviews: quote-card grid (replaces the tabs + third-party carousel) ---------- */
.quotes { display: grid; gap: 1rem; }
.quote { margin: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--hair-on-paper); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 1.25rem; }
.quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.quote_avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; background: var(--paper); }
.quote_avatar.is--logo { border-radius: 8px; object-fit: contain; background: var(--white); border: 1px solid var(--hair-on-paper); }
.quote_who { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.quote_name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.quote_role { font-size: 0.8125rem; color: var(--text-on-paper-2); }
.quote_src { margin-left: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-paper-3); white-space: nowrap; text-decoration: none; }
a.quote_src { color: var(--hl-on-paper); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.quote_stars { color: var(--hl); letter-spacing: 0.06em; }
.reviews_more { margin-top: 2rem; text-align: center; }
.reviews_more a { color: var(--hl-on-paper); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media screen and (min-width: 768px) { .quotes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .quote { padding: 1.75rem; } }
@media screen and (min-width: 992px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote blockquote { padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: 400; }
.quote_logo { margin-left: auto; height: 22px; width: auto; max-width: 110px; flex: 0 0 auto; filter: brightness(0) opacity(0.72); }
.quote_logo.is--word { height: auto; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--text-on-paper-2); filter: none; }

/* ---- Tour examples: chips + mosaic + see-all tile (homepage) ---- */
.tours { --gutter: 1.5rem; }
.tours_head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.tours_head .eyebrow { margin-bottom: 0.75rem; }
.tours_sub { font-size: 17px; line-height: 1.5; color: var(--text-on-paper-2); max-width: 48ch; margin: 12px 0 0; }
.tours_all { color: var(--hl-on-paper); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; white-space: nowrap; }
.tours_all:hover { color: var(--coral-800); }
.tours_chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 8px calc(-1 * var(--gutter)) 20px; padding: 0 var(--gutter) 4px; }
.tours_chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; font: 600 14px var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--hair-on-paper); border-radius: var(--r-pill); padding: 9px 14px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip:hover { border-color: var(--ink); }
.chip.is--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tours_grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
.tours_grid::-webkit-scrollbar { display: none; }
.tile { position: relative; flex: 0 0 78vw; max-width: 360px; scroll-snap-align: start; display: flex; flex-direction: column; background: #0b1326; border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--paper); }
.tile.is--hidden { display: none; }
.tile_media { display: block; aspect-ratio: 16 / 11; height: 100%; overflow: hidden; }
.tile_media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.tile:hover .tile_media img { transform: scale(1.03); }
.tile_meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 48px 16px 14px; background: linear-gradient(180deg, rgba(26, 26, 46, 0) 0%, rgba(26, 26, 46, 0.78) 100%); }
.tile .eyebrow { color: rgba(249, 247, 247, 0.7); margin: 0; }
.tile_title { font-weight: 600; font-size: 15px; }
.tile.is--feature .tile_meta { padding: 72px 20px 18px; }
.tile.is--all { background: var(--ink); color: var(--paper); justify-content: center; align-items: flex-start; padding: 22px; gap: 10px; min-height: 220px; }
.tile.is--all .eyebrow { color: var(--text-on-ink-3); }
.tile.is--all .tile_big { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tile.is--all .tile_go { margin-top: auto; font-weight: 600; color: var(--hl-on-ink); }
@media screen and (min-width: 480px) { .tours { --gutter: 2rem; } }
@media screen and (min-width: 768px) {
  .tours_head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .tours_head .tours_all { align-self: flex-end; }
  .tours_chips { margin: 12px 0 24px; padding: 0; overflow: visible; flex-wrap: wrap; }
  .tours_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .tile { max-width: none; }
  .tile_media { aspect-ratio: auto; min-height: 220px; }
  .tile.is--feature { grid-column: span 2; grid-row: span 2; }
  .tile.is--feature .tile_media { flex: 1; min-height: 0; }
  .tile.is--feature .tile_title { font-size: 20px; }
  .tile.is--all { min-height: 0; }
}

/* ---- One room (homepage): the demo tour's living room pinned full screen while scrolling turns it
   through four steps (room-scene.js adds .is-live). Without it, four stills with captions, stacked. ---- */
.room { background: var(--ink); color: var(--paper); padding: 72px 0 8px; }
.room p::before, .room p::after { content: none; display: none; }
.room_view, .room_dots { display: none; }
.room_label { color: var(--paper); margin: 0 0 32px; max-width: 18ch; }
.room_steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.room_still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; background: #0b1326; }
.room_step:last-child .room_still { object-fit: contain; background: none; }
.room_plan { display: inline-block; margin: 16px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--paper); background: rgba(249, 247, 247, 0.14); border-radius: var(--r-pill); padding: 4px 10px; }
.room_cap { margin: 10px 0 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--paper); }
@media screen and (min-width: 768px) { .room_steps { grid-template-columns: 1fr 1fr; gap: 48px 24px; } }

.room.is-live { padding: 0; height: 360vh; }
.is-live .room_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-live .room_view { display: block; position: absolute; inset: 0; }
/* Ink at the top and bottom so the label and captions read over any part of the room. */
.is-live .room_view::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 26, 46, 0.9) 0%, rgba(26, 26, 46, 0.5) 26%, rgba(26, 26, 46, 0) 48%),
              linear-gradient(to bottom, rgba(26, 26, 46, 0.6) 0%, rgba(26, 26, 46, 0) 16%); }
.room_canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease); }
.is-drawn .room_canvas { opacity: 1; }
/* Hotspots drawn like the tour's own: a white dot with a pulsing ring and a dark label; the product one
   opens into a card. room-scene.js moves each to its spot in the room. */
.room_spots { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.room_hs { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 300ms var(--ease); }
.room_hs.is-shown { opacity: 1; }
.room_hs::before, .room_hs::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; }
.room_hs::before { background: var(--paper); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); transform: scale(0.3); transition: transform 360ms var(--ease); }
.room_hs.is-shown::before { transform: scale(1); }
.room_hs::after { border: 2px solid rgba(249, 247, 247, 0.9); animation: room-pulse 1.8s ease-out infinite; }
@keyframes room-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.room_hs_tip { position: absolute; left: 0; bottom: 18px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--paper); background: rgba(26, 26, 46, 0.72); border-radius: 6px; padding: 5px 10px; transition: opacity 200ms var(--ease); }
.room_hs.is-open .room_hs_tip { opacity: 0; }
.room_hs_card { position: absolute; left: 0; bottom: 22px; width: 210px; padding: 12px 14px; border-radius: 12px; background: var(--paper); color: var(--text-on-paper-2); font-size: 13px; line-height: 1.4; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.85); transform-origin: 50% 100%; transition: opacity 260ms var(--ease), transform 340ms var(--ease); }
.room_hs_card strong { display: block; margin-bottom: 2px; font-size: 15px; color: var(--ink); }
.room_hs.is-open .room_hs_card { opacity: 1; transform: translateX(-50%) scale(1); }
.room_doll { position: absolute; left: 50%; top: 42%; width: min(94%, 1000px, 100svh); height: auto; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.is-live .room_over { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 24px; padding-bottom: 36px; pointer-events: none; }
.is-live .room_label { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0.02em; color: var(--text-on-ink-2); max-width: none; }
.is-live .room_steps { display: grid; margin-top: auto; gap: 0; padding-right: 64px; } /* clear of the chat bubble */
/* The old caption leaves quickly; the new one arrives just after, so two never overlap. */
.is-live .room_step { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(14px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.is-live .room_step.is-on { opacity: 1; transform: none; transition: opacity 420ms var(--ease) 160ms, transform 420ms var(--ease) 160ms; }
.is-live .room_still { display: none; }
.is-live .room_cap { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.02em; max-width: 15ch; text-wrap: balance; }
.is-live .room_dots { display: flex; gap: 6px; margin-top: 20px; }
.room_dot { width: 28px; height: 3px; border-radius: 2px; background: rgba(249, 247, 247, 0.25); transition: background-color var(--dur) var(--ease); }
.room_dot.is-on { background: var(--paper); }
@media screen and (min-width: 768px) {
  .room { padding-top: 112px; }
  .room.is-live { height: 400vh; }
  .is-live .room_over { padding-top: 32px; padding-bottom: 56px; }
  .is-live .room_steps { padding-right: 0; }
}

/* ---- Differentiators (homepage): a dark band in the Apple-style recipe. Label, short headline,
   one grey line with the keystones in white, then tall cards in a row you swipe sideways.
   The row runs off the right edge of the screen so it reads as "there's more". ---- */
.feats { background: var(--ink); color: var(--paper); padding: 72px 0 80px; overflow-x: clip; }
.feat_head { margin-bottom: 32px; max-width: 46rem; }
.feat_head .eyebrow { margin-bottom: 0.75rem; color: var(--text-on-ink-3); }
.feat_head h2 { color: var(--paper); max-width: 18ch; }
.feat_sub { font-size: 17px; line-height: 1.5; color: var(--text-on-ink-2); max-width: 50ch; margin: 16px 0 0; }
.feat_sub strong { color: var(--paper); font-weight: 600; }
.feat_link { display: inline-block; margin-top: 18px; color: var(--hl-on-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.feat_link:hover { color: var(--paper); }
.feat_row {
  display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none;
  margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%);
  /* Firm snapping only for touch; a trackpad scrolls freely and settles near a card, so scrolling the
     page down past the row never jerks it sideways. No back-swipe when the row hits its start. */
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  outline: none;
}
@media (pointer: coarse) { .feat_row { scroll-snap-type: x mandatory; } }
.feat_row::-webkit-scrollbar { display: none; }
.feat_row:focus-visible { outline: 2px solid var(--hl-on-ink); outline-offset: 6px; }
.feat { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; }
.feat:last-child { scroll-snap-align: end; } /* the row can't scroll far enough to start-align the last cards */
.feat_media { position: relative; display: block; aspect-ratio: 4 / 5; background: #0b1326; border-radius: 18px; overflow: hidden; }
.feat_media img, .feat_media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a hairline edge: the Customize-panel picture is drawn on ink, the same ink as this band, so without it the card has no edge */
.feat_media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hair-on-ink); pointer-events: none; }
.feat_media.is--left img { object-position: 0 50%; }
.feat_media.is--right img { object-position: 85% 50%; }
.feat_tag { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--paper); background: rgba(26, 26, 46, 0.72); border-radius: var(--r-pill); padding: 4px 10px; }
.feat_tag.is--all { background: var(--ink); }
.feat_cap { margin: 16px 4px 0; font-size: 15px; line-height: 1.45; font-weight: 400; letter-spacing: 0; color: var(--text-on-ink-2); }
.feat_cap strong { color: var(--paper); font-weight: 600; }
.feat_cap a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--text-on-ink-3); }
.feat_cap a:hover { color: var(--paper); border-bottom-color: currentColor; }
.feats .feat_more { margin: 10px 4px 0; display: flex; gap: 16px; flex-wrap: wrap; }
.feats .feat_more::before, .feats .feat_more::after { content: none; display: none; }
.feats .feat_more a { color: var(--hl-on-ink); font-weight: 600; font-size: 15px; text-decoration: none; border: 0; padding: 0; }
.feats .feat_more a:hover { text-decoration: underline; }
.feat_poster { display: none; }
@media (prefers-reduced-motion: reduce) { .feat_media video { display: none; } .feat_media .feat_poster { display: block; } }
.feat_nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.feat_nav[hidden] { display: none; }
.feat_arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0 0 3px;
  background: rgba(249, 247, 247, 0.14); color: var(--paper); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.feat_arrow:hover:not(:disabled) { background: rgba(249, 247, 247, 0.24); }
.feat_arrow:disabled { opacity: 0.35; cursor: default; }
@media screen and (min-width: 768px) {
  .feats { padding: 112px 0 120px; }
  .feat_head { margin-bottom: 44px; }
  .feat_sub { font-size: 19px; }
  .feat { flex-basis: 340px; }
  .feat_row { gap: 20px; }
}

/* ---- Reviews: one swipe row on phones instead of six stacked cards ---- */
@media screen and (max-width: 767px) {
  .reviews { --gutter: 1.5rem; }
  .quotes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 84vw; max-width: 360px; scroll-snap-align: start; }
}
@media screen and (min-width: 480px) and (max-width: 767px) { .reviews { --gutter: 2rem; } }
/* Hero micro line: no dot separators once it wraps on small screens */
@media screen and (max-width: 767px) { .hero-v2_micro { gap: 8px 18px; } .hero-v2_micro span + span::before { content: none; } }
.hero-v2_micro::before, .hero-v2_micro::after { content: none; display: none; }

/* ── Homepage FAQ ─────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hair-on-paper); }
.faq_head .eyebrow { margin-bottom: 0.75rem; }
.faq_head h2 { margin: 0; }
.faq .faq_sub { margin-top: 12px; color: var(--text-on-paper-2); font-size: 16px; }
.faq .faq_sub::before, .faq .faq_sub::after, .faq .faq_a::before, .faq .faq_a::after { content: none; display: none; }
.faq .faq_sub a { color: var(--hl-on-paper); font-weight: 600; text-decoration: none; border: 0; padding: 0; }
.faq .faq_sub a:hover { text-decoration: underline; }
.faq_list { margin-top: 2rem; border-top: 1px solid var(--hair-on-paper); }
.faq_item { border-bottom: 1px solid var(--hair-on-paper); }
.faq_item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); transition: color var(--dur) var(--ease); }
.faq_item summary::-webkit-details-marker { display: none; }
.faq_item summary::after { content: ""; flex: 0 0 12px; height: 12px; margin-top: 5px; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; transition: transform var(--dur) var(--ease); }
.faq_item[open] summary::after { transform: rotate(45deg); }
.faq_item summary:hover { color: var(--hl-on-paper); }
.faq_item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq .faq_a { margin: 0 0 20px; padding-right: 28px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--text-on-paper-2); }
.faq .faq_a.is--todo { font-style: italic; color: var(--text-on-paper-3); }
@media screen and (min-width: 992px) {
  .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
  .faq_head { position: sticky; top: 110px; }
  .faq_list { margin-top: 0; }
  .faq_item summary { font-size: 18px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) { .faq_item summary::after { transition: none; } }

/* ── Features: one-line "plus" strip under the card row, on the dark band ── */
.feats .feat_also { margin: 28px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--text-on-ink-2); }
.feats .feat_also::before, .feats .feat_also::after { content: none; display: none; }
.feats .feat_also a { color: var(--hl-on-ink); font-weight: 600; text-decoration: none; border: 0; padding: 0; white-space: nowrap; }
.feats .feat_also a:hover { text-decoration: underline; }
@media screen and (min-width: 1200px) { .feats .feat_also { max-width: none; } }

/* ── Footer on phones: show every column, two across, plus the Contact us block ── */
@media screen and (max-width: 767px) {
  .footer-grid-bottom { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .footer-grid-bottom .stack.footer--explore,
  .footer-grid-bottom .stack.footer--about { display: block; }
  .footer-ctatext { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; padding: 1.5rem 0 0.5rem; }
  .footer-ctatext .cardcta_text { margin: 0; }
}
@media screen and (max-width: 767px) {
  .footer-grid-bottom > .stack { grid-column: auto !important; grid-row: auto !important; }
  .footer-grid-bottom .footer_link { text-align: left; }
  .footer-ctatext { order: -1; padding: 0 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--hair-on-ink, rgba(249,247,247,.14)); }
}
@media screen and (max-width: 767px) {
  .footer-grid-bottom .footer--company, .footer-grid-bottom .footer--industry { width: auto; }
  .footer-ctatext { padding-top: 1.75rem; }
}

/* ── Tours subhead: breathing room under the heading, no one-word last line ── */
.tours_head .tours_sub { margin-top: 16px; max-width: 54ch; text-wrap: balance; }

/* ── Tap targets: grow the tappable area of small text links to ≥24px
   with an invisible box, so nothing moves visually ── */
.hero-v2_micro a, .proof_label a, .builtfor_list a, .tours_all, .feat_link, .feat_more a,
.feat_also a, .quote_src, .reviews_more a, .faq_sub a, .footer-grid-bottom .footer_link {
  position: relative;
}
.hero-v2_micro a::after, .proof_label a::after, .builtfor_list a::after, .tours_all::after, .feat_link::after,
.feat_more a::after, .feat_also a::after, .quote_src::after, .reviews_more a::after, .faq_sub a::after,
.footer-grid-bottom .footer_link::after {
  content: ""; position: absolute; inset: -7px -4px;
}
@media screen and (max-width: 767px) { .builtfor_list { row-gap: 18px; } }

/* ---- Shipped recently: newest posts from updates.teliportme.com (refresh: python3 scratch/shipped.py) ---- */
.shipped_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.shipped_head .eyebrow { margin-bottom: 0.75rem; }
.shipped_all { flex: 0 0 auto; color: var(--hl-on-paper); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.shipped_all:hover { text-decoration: underline; }
.shipped_grid { display: grid; gap: 12px; }
.shipped_card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--hair-on-paper); border-radius: var(--r-card); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease); }
.shipped_card:hover { border-color: var(--ink); color: var(--ink); }
.shipped_date { font-size: 12px; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
.shipped_t { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.shipped_go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--hl-on-paper); }
@media screen and (min-width: 640px) { .shipped_grid { grid-template-columns: repeat(3, 1fr); } }

/* Home: comparison with Matterport and Kuula (rows become stacked blocks on phones) */
.cmp_pick { margin-top: 40px; }
.cmp_pick_h { margin: 0 0 14px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
.cmp_cards { display: grid; gap: 12px; }
.cmp_card { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border: 1px solid var(--hair-on-paper); border-radius: var(--r-card); background: var(--white); }
.cmp_card p { margin: 0; }
.cmp_card_who { font-size: 13px; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
.cmp_card_if { margin-top: 4px !important; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.cmp_card_why { margin-top: 6px !important; font-size: 15px; line-height: 1.5; color: var(--text-on-paper-2); }
.cmp_card.is--us { background: var(--ink); border-color: var(--ink); }
.cmp_card.is--us .cmp_card_who { color: var(--hl-on-ink); }
.cmp_card.is--us .cmp_card_if { color: var(--paper); }
.cmp_card.is--us .cmp_card_why { color: rgba(249, 247, 247, 0.75); }
.cmp_card_go { align-self: flex-start; margin-top: auto; padding-top: 14px; color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; }
.cmp_card_go:hover { text-decoration: underline; }
.cmp_head h2 { max-width: 20ch; }
.cmp_head .eyebrow { margin-bottom: 0.75rem; }
.cmp_sub { margin: 12px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.5; color: var(--text-on-paper-2); }
.cmp_wrap { margin-top: 28px; }
.cmp_t { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: var(--text-on-paper-2); }
.cmp_t thead { display: none; }
.cmp_t tr { display: block; padding: 16px 0; border-top: 1px solid var(--hair-on-paper); }
.cmp_t tbody th { display: block; margin-bottom: 8px; text-align: left; font-size: 16px; font-weight: 700; color: var(--ink); }
.cmp_t td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; }
.cmp_t td::before { content: attr(data-l); font-weight: 600; color: var(--ink); }
.cmp_t td.is--yes { color: var(--ink); }
.cmp_t td.is--us::before { color: var(--hl-on-paper); }
.cmp_v { display: flex; gap: 8px; align-items: flex-start; }
.cmp_v::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; }
.cmp_t td.is--yes .cmp_v::before { background: var(--text-on-paper-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cmp_t td.is--no .cmp_v::before { background: var(--hair-on-paper); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cmp_t td.is--no { color: var(--text-on-paper-3); }
.cmp_t td.is--us.is--yes { font-weight: 600; color: var(--ink); }
.cmp_t td.is--us.is--yes .cmp_v::before { background-color: var(--hl-on-paper); }
.cmp_only { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; vertical-align: 2px; white-space: nowrap; }
@media screen and (min-width: 768px) {
  .cmp_t thead { display: table-header-group; }
  .cmp_t tr { display: table-row; padding: 0; border: 0; }
  .cmp_t th, .cmp_t td { display: table-cell; padding: 14px 16px; border-top: 1px solid var(--hair-on-paper); text-align: left; vertical-align: top; }
  .cmp_t td::before { content: none; }
  .cmp_t tbody th { display: table-cell; width: 26%; margin: 0; font-size: 15px; font-weight: 600; }
  .cmp_t thead th { border-top: 0; padding-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-paper-3); }
  .cmp_t thead th.is--us { background: var(--ink); color: var(--paper); border-radius: 8px 8px 0 0; padding-top: 14px; }
  .cmp_t td.is--us { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); }
  .cmp_t tbody tr:last-child td.is--us { box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink); border-radius: 0 0 8px 8px; }
  .cmp_only { display: block; width: max-content; margin: 6px 0 0; }
  .cmp_t thead td { border-top: 0; }
  .cmp_t td.is--us { background: var(--white); }
  .cmp_cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- doorway page transitions ----------
   Moving between pages feels like stepping through a door into the next room:
   the old page grows and fades as you walk in, the new one settles into place.
   Cross-document view transitions; browsers without them just load the page.
   The header has its own name, so it stays put instead of zooming. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.tn { view-transition-name: tn; }
::view-transition-old(root) { animation: 260ms cubic-bezier(0.5, 0, 0.75, 0) both door-out; }
::view-transition-new(root) { animation: 380ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both door-in; }
@keyframes door-out { to { opacity: 0; transform: scale(1.1); } }
@keyframes door-in { from { opacity: 0; transform: scale(0.96); } }

/* ---- Home: one vertical rhythm ----
   --sec is the space between any two blocks of the home page, and the top and bottom of every ink band.
   Paper sections carry it on top only, so two neighbours never add up to a double gap; a paper section
   that runs into an ink band carries it underneath as well. --head is heading-to-content. */
.home { --sec: 72px; --head: 28px; }
@media screen and (min-width: 768px) { .home { --sec: 96px; --head: 40px; } }
@media screen and (min-width: 1200px) { .home { --sec: 112px; } }
.home > section:not(.on-ink) { padding-top: var(--sec); padding-bottom: 0; }
.home > section.tours, .home > section.pb-4a { padding-bottom: var(--sec); }
.home > .feats { padding-top: var(--sec); padding-bottom: calc(var(--sec) + 8px); }
.home > section.py-7a.on-ink { padding-top: var(--sec); padding-bottom: var(--sec); }
.home .proof { padding-top: 0; }
.home .proof + .stack { margin-top: 56px; }
.home .proof + .stack > * + * { margin-top: 24px; }
.home > .faq { border-top: 0; }
.home .builtfor { margin-top: 0; }
.home .shipped_head, .home .reviews_head, .home .feat_head { margin-bottom: var(--head); }
.home .cmp_wrap, .home .faq_list { margin-top: var(--head); }
@media screen and (min-width: 992px) { .home .faq_list { margin-top: 0; } }