@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/literata-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/literata-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Literata Fallback';src:local('Liberation Serif'),local('Times New Roman'),local('Times');size-adjust:120%;ascent-override:98%;descent-override:25.5%;line-gap-override:0%}@font-face{font-family:'Instrument Sans Fallback';src:local('Liberation Sans'),local('Arial'),local('Helvetica');size-adjust:104%;ascent-override:93%;descent-override:24%;line-gap-override:0%}:root,[data-theme="light"]{--forest: #166534;--forest-deep: #0f4a26;--emerald: #065f46;--gold: #c8912e;--gold-text: #96631a;--gold-bright: #dfa032;--void: #060b18;--ink: #0f1f17;--slate: #1b2a4a;--cream: #faf8f3;--stone: #eae6df;--live-green: #6db87a;--red: #dc2626;--void-success: #14b8a6;--prism-ummahcity: var(--forest);--prism-ummahpass: #1b5fa8;--prism-ummahplaces: #1a7040;--prism-ummahcauses: #b5551e;--prism-ummahjobs: #0b7a6e;--prism-ummaharmy: #c94a4a;--prism-ummahbuzz: #7b50d4;--prism-man: var(--gold);--prism-ummahemail: #c2458f;--prism-muslimreach: var(--slate);--ummah-surface: var(--cream);--ummah-surface-raised: #ffffff;--ummah-surface-sunken: var(--stone);--ummah-overlay: rgba(15,31,23,0.6);--ummah-ink: var(--ink);--ummah-ink-secondary: #4a6356;--ummah-ink-muted: #7d9e8c;--ummah-ink-inverse: var(--cream);--ummah-action: var(--forest);--ummah-action-hover: var(--forest-deep);--on-ummah-action: var(--cream);--ummah-border-subtle: var(--stone);--ummah-border: #d1c8bf;--ummah-border-strong: #b8ad9e;--ummah-focus: var(--forest);--ummah-gold-text: var(--gold-text);--ummah-star: var(--forest);--cube-ground: #eef1e9;--cube-ground-2: #e4e9dd;--cube-surface: #f8f9f4;--cube-pool: #d9e2d2;--cube-ink: #0e1e16;--cube-ink-2: #3a4a40;--cube-ink-3: #5a6a5f;--cube-rule: #cdd6c8;--cube-action: var(--forest);--cube-action-ink: #f8f9f4;--cube-action-hover: var(--forest-deep);--cube-focus: #1b5fa8;--cube-partial: #8a5a12;--cube-coming: #5a6a5f;--cube-porcelain: #fbfaf5;--cube-porcelain-2: #eef0e7;--cube-edge: #bfcabb;--cube-face-ink: #10301f;--cube-face-ink-2: #56695c;--cube-face-accent: var(--forest);--cube-shade: #2a271c;--man-surface: #f4f6fa;--man-surface-raised: #ffffff;--man-surface-sunken: #e8edf5;--man-ink: var(--slate);--man-ink-secondary: #4a5a7a;--man-ink-muted: #56658a;--man-line: #dde3ef;--man-line-strong: #c4cde0;--man-action: var(--slate);--man-action-hover: #111d35;--on-man-action: #f4f6fa;--man-gold: var(--gold);--man-gold-text: #8a5a14;--man-gold-soft: #fbf2df;--man-chart: #2f4c86;--man-focus: #1b5fa8;--man-scrim: rgba(11,18,32,0.45);--man-pill-draft: #4a5a7a;--man-pill-draft-bg: #e8edf5;--man-pill-done: var(--slate);--man-pill-done-bg: #e3e8f1;--man-stamp-paper: #f8f6f1;--man-stamp-ink: #111a2e;--status-live: var(--forest);--status-live-bg: #dcf5e3;--status-partial: #8a5a12;--status-coming: #5a6a5f;--status-info: #1b5fa8;--status-info-bg: #e3edf9;--status-warning: #8a3b0a;--status-warning-bg: #fdefd3;--status-danger: #b42318;--status-danger-bg: #fde8e6;--status-success: var(--prism-ummahjobs);--shadow-xs: 0 1px 2px rgba(15,31,23,0.06);--shadow-sm: 0 2px 6px rgba(15,31,23,0.08),0 1px 2px rgba(15,31,23,0.05);--shadow-md: 0 4px 12px rgba(15,31,23,0.10),0 2px 4px rgba(15,31,23,0.06);--shadow-lg: 0 8px 24px rgba(15,31,23,0.12),0 3px 8px rgba(15,31,23,0.07);--shadow-xl: 0 16px 48px rgba(15,31,23,0.14),0 6px 16px rgba(15,31,23,0.08);--shadow-gold: 0 4px 16px rgba(200,145,46,0.25);--gold-glow: 0 0 2px rgba(223,160,50,0.9),0 0 12px rgba(223,160,50,0.45),0 0 32px rgba(223,160,50,0.18);--man-shadow-sm: 0 1px 2px rgba(27,42,74,0.06),0 2px 8px rgba(27,42,74,0.05);--man-shadow-lg: 0 12px 32px rgba(27,42,74,0.16)}[data-theme="dark"]{--prism-ummahcity: var(--forest);--prism-ummahplaces: #22a362;--prism-ummahjobs: #14b8a6;--prism-ummaharmy: #e06b6b;--prism-man: var(--gold);--prism-muslimreach: var(--slate);--ummah-surface: var(--void);--ummah-surface-raised: #0d1525;--ummah-surface-sunken: var(--void);--ummah-overlay: rgba(0,0,0,0.7);--ummah-ink: var(--cream);--ummah-ink-secondary: rgba(250,248,243,0.7);--ummah-ink-muted: rgba(250,248,243,0.4);--ummah-ink-inverse: var(--ink);--ummah-action: var(--gold-bright);--ummah-action-hover: #eeb034;--on-ummah-action: var(--ink);--ummah-border-subtle: rgba(250,248,243,0.08);--ummah-border: rgba(250,248,243,0.15);--ummah-border-strong: rgba(250,248,243,0.25);--ummah-focus: var(--gold-bright);--ummah-gold-text: var(--gold-bright);--ummah-star: var(--gold-bright);--cube-ground: #08130e;--cube-ground-2: #0d1b14;--cube-surface: #10201a;--cube-pool: #12271c;--cube-ink: #e6ece3;--cube-ink-2: #b9c6b9;--cube-ink-3: #93a495;--cube-rule: #26382d;--cube-action: #7cc694;--cube-action-ink: #06140c;--cube-action-hover: #9bd8ae;--cube-focus: #9ccbff;--cube-partial: #e2b867;--cube-coming: #93a495;--cube-porcelain: #e9eee5;--cube-porcelain-2: #dce3d8;--cube-edge: #a9b8a6;--cube-face-accent: var(--forest);--cube-shade: #1c1a12;--man-surface: #0b1220;--man-surface-raised: #131c2e;--man-surface-sunken: #0f1727;--man-ink: #e8edf5;--man-ink-secondary: #b4c0d6;--man-ink-muted: #9aa8c2;--man-line: #24304a;--man-line-strong: #34425f;--man-action: #e3e9f4;--man-action-hover: #ffffff;--on-man-action: #14213b;--man-gold: var(--gold-bright);--man-gold-text: #edbe63;--man-gold-soft: #2c2311;--man-chart: #8db8f0;--man-focus: #8db8f0;--man-scrim: rgba(0,0,0,0.6);--man-pill-draft: #b4c0d6;--man-pill-draft-bg: #1b2538;--man-pill-done: #dce4f2;--man-pill-done-bg: #1e2a42;--status-live: #7cc694;--status-live-bg: #10301d;--status-partial: #e2b867;--status-coming: #93a495;--status-info: #8db8f0;--status-info-bg: #14294a;--status-warning: #f5c26b;--status-warning-bg: #36280c;--status-danger: #ff9a8f;--status-danger-bg: #3a1714;--status-success: var(--void-success);--man-shadow-sm: 0 1px 2px rgba(0,0,0,0.35);--man-shadow-lg: 0 12px 32px rgba(0,0,0,0.5)}:root{--space-0: 0;--space-1: 0.25rem;--space-2: 0.5rem;--space-3: 0.75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--radius-none: 0;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-pill: 9999px;--duration-fast: 120ms;--duration-base: 200ms;--duration-slow: 300ms;--duration-slower: 500ms;--ease: cubic-bezier(0.4,0.0,0.2,1.0);--ease-out: cubic-bezier(0.0,0.0,0.2,1.0);--ease-in: cubic-bezier(0.4,0.0,1.0,1.0);--ease-spring: cubic-bezier(0.34,1.56,0.64,1.0);--ease-arrive: cubic-bezier(0.16,1,0.3,1);--ease-fly: cubic-bezier(0.45,0,0.2,1);--ease-turn: cubic-bezier(0.65,0,0.35,1);--ease-lift: cubic-bezier(0.33,0,0.2,1);--ease-seat: cubic-bezier(0.5,0,0.12,1);--star-watermark-ummah: 0.25;--star-watermark-man: 0.12;--star-watermark-void: 0.07;--star-tessellation: 0.08;--star-card: 0.06;--disabled: 0.45;--focus-width: 3px;--focus-offset: 2px;--tap-min: 44px;--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-help-mode: 99999;--font-display: 'Literata','Iowan Old Style','Palatino Linotype',Georgia,serif;--font-ui: 'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;--font-arabic: 'Amiri','Times New Roman',serif;--font-mono: 'Courier New','Consolas',monospace}.ummah-display{font-family: var(--font-display);font-size: 5.4rem;line-height: 1.0;font-weight: 500;letter-spacing: -0.028em}.ummah-title{font-family: var(--font-display);font-size: 3rem;line-height: 1.06;font-weight: 500;letter-spacing: -0.02em}.ummah-heading{font-family: var(--font-display);font-size: 1.5rem;line-height: 1.25;font-weight: 500;letter-spacing: -0.012em}.ummah-subheading{font-family: var(--font-display);font-size: 1.125rem;line-height: 1.3;font-weight: 500}.ummah-lede{font-family: var(--font-ui);font-size: 1.125rem;line-height: 1.55;font-weight: 400}.ummah-body{font-family: var(--font-ui);font-size: 1rem;line-height: 1.55;font-weight: 400}.ummah-label{font-family: var(--font-ui);font-size: 1rem;line-height: 1.1;font-weight: 600}.ummah-small{font-family: var(--font-ui);font-size: 0.875rem;line-height: 1.5;font-weight: 400}.ummah-status{font-family: var(--font-ui);font-size: var(--t-xs);line-height: 1.2;font-weight: 600;letter-spacing: 0.05em}@font-face{font-family: 'Literata';src: url('fonts/literata-latin-400-normal.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face{font-family: 'Literata';src: url('fonts/literata-latin-500-normal.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap}@font-face{font-family: 'Literata';src: url('fonts/literata-latin-600-normal.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap}@font-face{font-family: 'Instrument Sans';src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face{font-family: 'Instrument Sans';src: url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap}@font-face{font-family: 'Instrument Sans';src: url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap}:root{--ground: #EEF1E9;--ground-2: #E4E9DD;--surface: #F8F9F4;--pool: #D9E2D2;--pool-rgb: 140,160,132;--ink: #0E1E16;--ink-2: #3A4A40;--ink-3: #5A6A5F;--rule: #CDD6C8;--action: #166534;--action-ink: #F8F9F4;--action-hover: #0F4A26;--focus: #1B5FA8;--partial: #8A5A12;--coming: #5A6A5F;--porcelain: #FBFAF5;--porcelain-2: #EEF0E7;--edge: #BFCABB;--face-ink: #10301F;--face-ink-2: #56695C;--face-accent: #166534;--shade: #2A271C;--shadow: 11,42,26;--font-display: 'Literata','Iowan Old Style','Palatino Linotype',Georgia,serif;--font-ui: 'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;--t-xs: .8125rem;--t-sm: 1rem;--t-base: 1rem;--t-md: 1.125rem;--t-lg: 1.5rem;--t-xl: clamp(1.9rem,5.6vw,3rem);--t-display: clamp(2.2rem,9.4vw,5.4rem);--s: 202px;--cube-y: 52%;--glaze: radial-gradient(130% 100% at 18% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 58%);--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #08130E; --ground-2: #0D1B14; --surface: #10201A; --pool: #050C08; --pool-rgb: 3, 8, 5; --ink: #E6ECE3; --ink-2: #B9C6B9; --ink-3: #93A495; --rule: #26382D; --action: #7CC694; --action-ink: #06140C; --action-hover: #9BD8AE; --focus: #9CCBFF; --partial: #E2B867; --coming: #93A495; --porcelain: #E9EEE5; --porcelain-2: #DCE3D8; --edge: #A9B8A6; --shade: #1C1A12; --shadow: 0, 0, 0; color-scheme: dark; } } :root[data-theme="dark"] { --ground: #08130E; --ground-2: #0D1B14; --surface: #10201A; --pool: #050C08; --pool-rgb: 3, 8, 5; --ink: #E6ECE3; --ink-2: #B9C6B9; --ink-3: #93A495; --rule: #26382D; --action: #7CC694; --action-ink: #06140C; --action-hover: #9BD8AE; --focus: #9CCBFF; --partial: #E2B867; --coming: #93A495; --porcelain: #E9EEE5; --porcelain-2: #DCE3D8; --edge: #A9B8A6; --shade: #1C1A12; --shadow: 0, 0, 0; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-base)/1.55 var(--font-ui); overflow-x: hidden; } h1, h2, h3 { text-wrap: balance; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: var(--action); text-underline-offset: 3px; } .defs { position: absolute; width: 0; height: 0; overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--surface); color: var(--ink); padding: 12px 16px; border-radius: 10px; } .skip:focus { top: 12px; } .top { display: flex; align-items: center; gap: 12px; max-width: 1320px; margin: 0 auto; padding: 10px 16px; min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; min-height: 44px; } .brand-mark { width: 30px; height: 30px; flex: none; } .brand-mark .m-top { fill: var(--porcelain); stroke: #166534; stroke-width: 1.6; stroke-linejoin: round; } .brand-mark .m-left { fill: #2F7A4A; } .brand-mark .m-right { fill: #166534; } .brand-mark .m-star { fill: #166534; } .brand-word { font: 500 var(--t-md)/1 var(--font-display); letter-spacing: -0.015em; } .brand-word b { font-weight: 600; } .brand-by { font-size: var(--t-sm); color: var(--ink-3); display: none; } .demo-pill { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--partial); border: 1px solid currentColor; border-radius: 6px; padding: 3px 7px; } .top-nav { margin-left: auto; display: none; gap: 4px; } .top-nav a { color: var(--ink-2); text-decoration: none; padding: 12px; border-radius: 10px; font-size: var(--t-base); } .top-nav a:hover { color: var(--ink); background: var(--ground-2); } .theme-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rule); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; } .theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } @media (min-width: 768px) { .brand-by { display: inline; } .top-nav { display: flex; } .theme-btn { margin-left: 4px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; font: 600 var(--t-base)/1.1 var(--font-ui); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .btn-primary { background: var(--action); color: var(--action-ink); } .btn-primary:hover { background: var(--action-hover); } .btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-quiet:hover { border-color: var(--ink-3); } .btn:active { transform: translateY(1px); } .hero { max-width: 1320px; margin: 0 auto; padding: 0 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "stage" "free" "cta" "lede"; } .hero-copy { display: contents; } .hero h1 { grid-area: title; position: relative; z-index: 2; } .hero .lede { grid-area: lede; } .hero .cta-row { grid-area: cta; position: relative; z-index: 2; } .hero .free-line { grid-area: free; } .hero-stage-wrap { grid-area: stage; } .hero h1 { font: 500 var(--t-display)/1.0 var(--font-display); letter-spacing: -0.028em; padding-top: 2px; } .lede { margin-top: 16px; color: var(--ink-2); font-size: var(--t-md); max-width: 46ch; } .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .cta-row .btn { flex: 1 1 100%; } .free-line { margin-top: 8px; font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; } .hero-stage-wrap { position: relative; } .stage { position: relative; height: 368px; outline-offset: -3px; border-radius: 22px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; overflow-x: clip; overflow-y: visible; background: radial-gradient(closest-side at 50% var(--cube-y), var(--pool), rgba(0,0,0,0) 100%); } .stage.dragging { cursor: grabbing; } .stage-btn { position: absolute; right: 0; bottom: 0; z-index: 3; width: 44px; height: 44px; border-radius: 12px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule); font: 500 var(--t-sm)/1 var(--font-ui); cursor: pointer; } .stage-btn .lbl { display: none; } @media (max-width: 767px) { .hero .stage-btn { bottom: -46px; } .slots { padding-right: 54px; min-height: 44px; } } .stage-btn svg { width: 14px; height: 14px; fill: currentColor; } .stage-btn .i-play, .t-btn .i-play { display: none; } .stage-btn[aria-pressed="true"] .i-play, .t-btn.paused .i-play { display: inline; } .stage-btn[aria-pressed="true"] .i-pause, .t-btn.paused .i-pause { display: none; } .slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: var(--t-xs); color: var(--ink-2); } .slots li { display: inline-flex; align-items: baseline; gap: 6px; min-height: 22px; } .js:not(.rm) .slots li { opacity: .35; } .st { font-style: normal; font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .st::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; border: 1.5px solid currentColor; } .st.live { color: var(--action); } .st.live::before { background: currentColor; } .st.partial { color: var(--partial); } .st.partial::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .st.coming { color: var(--coming); } .stage-note { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); } @media (max-width: 599px) { .hero { grid-template-areas: "title" "stage" "apply" "free" "intro" "lede"; } .hero .cta-row { display: contents; } .hero .cta-row .btn-primary { grid-area: apply; margin-top: 10px; position: relative; z-index: 2; } .hero .cta-row [data-intro-open] { grid-area: intro; margin-top: 10px; } .hero .free-line { margin-top: 8px; } } @media (min-width: 600px) { .cta-row .btn { flex: 0 1 auto; } } @media (min-width: 768px) { :root { --s: 262px; --cube-y: 52%; } .hero { grid-template-areas: "title" "stage" "cta" "free" "lede"; padding-top: 16px; } .stage { height: 520px; } .free-line { margin-top: 14px; } .cta-row { margin-top: 16px; } .stage-btn { width: auto; padding: 0 14px; right: 8px; bottom: 8px; } .stage-btn .lbl { display: inline; } } @media (max-width: 1099px) { .hero .stage-btn { top: auto; bottom: -52px; right: 0; left: auto; transform: none; z-index: 5; } .hero .slots { padding-right: 56px; min-height: 48px; } } @media (min-width: 768px) and (max-width: 1099px) { .hero .slots { padding-right: 112px; } } @media (max-width: 599px) { .hero .stage { overflow-y: visible; } .hero .scene { overflow: clip; } } @media (min-width: 1100px) { :root { --s: 310px; --cube-y: 50%; } .hero { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); grid-template-areas: "copy stage"; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 64px; min-height: min(840px, calc(100vh - 64px)); } .hero-copy { display: block; grid-area: copy; } .hero h1 { font-size: clamp(3rem, 3.9vw, 4.3rem); } .lede { margin-top: 22px; } .cta-row { margin-top: 26px; } .free-line { margin-top: 20px; } .stage { height: 660px; } .stage-btn { right: auto; left: 50%; bottom: 0; transform: translateX(-50%); } .slots { justify-content: center; flex-wrap: nowrap; gap: 6px 12px; white-space: nowrap; } .stage-note { text-align: center; } } .scene { position: absolute; inset: 0; pointer-events: none; perspective: calc(var(--s) * 5.2); perspective-origin: 50% 40%; } .cube { position: absolute; left: 50%; top: var(--cube-y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(34deg); } .face, .wall { position: absolute; inset: 0; } .wall { transform-style: preserve-3d; } .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--glaze), var(--grain), var(--porcelain); overflow: hidden; box-shadow: inset 0 1px 0 #FFFFFF, inset 0 2px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(var(--shadow), .2), inset 0 0 0 1px var(--edge); } .face .sh { position: absolute; inset: 0; background: var(--shade); opacity: 0; pointer-events: none; } .face .spec { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 220%; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 62%); } .wall > .face::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none; background: linear-gradient(to top, rgba(var(--shadow), .16), rgba(var(--shadow), 0)); } .face.in, .base-in, .lid-in { background: var(--grain), var(--porcelain-2); } .tess { position: absolute; inset: 0; opacity: .5; background: url("../cube/tess.svg") center / 33.333% repeat; } .wall[data-a="0"] { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); } .wall[data-a="90"] { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .wall[data-a="180"] { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .wall[data-a="270"] { transform: rotateY(270deg) translateZ(calc(var(--s) / 2)); } .wall .in { transform: rotateY(180deg) translateZ(.5px); } .lid-out { inset: auto; left: -50%; top: -50%; width: 200%; height: 200%; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)) scale(.5); background: transparent; box-shadow: none; } .lid-in { transform: rotateX(-90deg) translateZ(calc(var(--s) / -2 + .5px)); } .base-in { transform: rotateX(90deg) translateZ(calc(var(--s) / -2 + .5px)); } .base-out { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .lid-ground { position: absolute; inset: 0; background: var(--glaze), var(--grain), var(--porcelain); background-size: auto, 280px 280px, auto; box-shadow: inset 0 0 0 1px var(--edge); } .lid-star, .lid-star-line { position: absolute; inset: 15%; background: url("../cube/star-lid.svg") center / contain no-repeat; } .lid-star-line { background-image: url("../cube/star-line.svg"); } .js:not(.rm) .lid-star { opacity: 0; } .lid-sweep { position: absolute; top: 0; bottom: 0; left: -100%; width: 100%; opacity: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,0) 30%, #FFFFFF 50%, rgba(255,255,255,0) 70%); } .shadow { position: absolute; inset: -34%; transform: rotateX(90deg) translateZ(calc(var(--s) * -0.56)); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--shadow), .46), rgba(var(--shadow), .18) 50%, rgba(var(--shadow), 0) 100%); } .floorlight { position: absolute; inset: -34%; transform: rotateX(90deg) translateZ(calc(var(--s) * -0.565)); pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(var(--pool-rgb), .12), rgba(var(--pool-rgb), .12) 55%, rgba(var(--pool-rgb), 0) 100%); } .wall[data-a="0"] .out .sh { opacity: .05; } .wall[data-a="270"] .out .sh { opacity: .2; } .js:not(.rm) .wall > .face, .js:not(.rm) .base-in, .js:not(.rm) .base-out, .js:not(.rm) .lid-in { opacity: 0; } .ui { position: absolute; inset: 0; padding: 9%; display: flex; flex-direction: column; gap: 6%; font: 500 calc(var(--s) / 15)/1.2 var(--font-ui); color: var(--face-ink); } .ui .bar { display: flex; align-items: center; justify-content: space-between; gap: 6%; } .ui .bar b { font: 600 1.15em/1 var(--font-display); letter-spacing: -0.01em; } .ui .tag { font-size: .75em; font-weight: 600; color: var(--face-accent); border: 1px solid currentColor; border-radius: .35em; padding: .18em .4em; } .ui-page .bar { justify-content: flex-start; background: #E4E9DE; border-radius: .6em; padding: .45em .6em; font-size: .75em; color: var(--face-ink-2); gap: .5em; } .ui-page .dots { width: 2.2em; height: .55em; flex: none; transform: scale(.8); transform-origin: 0 50%; background: radial-gradient(circle at .27em 50%, #B3BFAF .26em, transparent .28em), radial-gradient(circle at 1.1em 50%, #B3BFAF .26em, transparent .28em), radial-gradient(circle at 1.93em 50%, #B3BFAF .26em, transparent .28em); } .ui-page .url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--face-ink); font-weight: 600; } .ui-page .r1 { display: flex; align-items: center; gap: .45em; font: 600 1.15em/1.1 var(--font-display); } .ui-page .star-sm { width: 1.2em; height: 1.2em; flex: none; background: url("../cube/star-lid.svg") center / contain no-repeat; } .ui-page .ev { display: flex; align-items: center; gap: .55em; padding: .5em .6em; border-radius: .55em; background: #EAEEE5; } .ui-page .ev i { width: .5em; height: .5em; border-radius: .12em; background: var(--face-accent); flex: none; } .ui-page .ev span { flex: 1; white-space: nowrap; } .ui-page .ev b { font-weight: 700; white-space: nowrap; } .pill { display: inline-block; background: var(--face-accent); color: #F8F9F4; border-radius: .5em; padding: .45em .8em; font-weight: 600; font-size: .75em; } .ui-meet .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .4em; flex: 1; } .ui-meet .av { position: relative; border-radius: .55em; display: grid; place-items: center; font: 600 1.4em/1 var(--font-display); color: #FFFFFF; } .ui-meet .a1 { background: #1A7040; } .ui-meet .a2 { background: #1B5FA8; } .ui-meet .a3 { background: #0B7A6E; } .ui-meet .a4 { background: #A3B4A2; color: #10301F; font-size: 1.15em; } .ui-meet .talk { position: absolute; inset: -.18em; border-radius: .7em; border: .16em solid #7CC694; } .ui-meet .ctrls { display: flex; justify-content: center; gap: .6em; } .ui-meet .ctrls i { width: 1.7em; height: 1.7em; border-radius: 50%; background: #D3DBCF; } .ui-meet .ctrls i.end { background: #B4483F; width: 2.6em; border-radius: .85em; } .ui-mail .row { display: flex; align-items: center; gap: .55em; padding: .5em .5em; border-radius: .5em; background: #EEF1E9; } .ui-mail .row span { flex: 1; white-space: nowrap; overflow: hidden; } .ui-mail .row em { font-style: normal; font-size: .75em; color: var(--face-ink-2); } .ui-mail .unread { background: #DCEADF; font-weight: 700; } .ui-mail .unread em { color: var(--face-ink); font-weight: 700; } .ui-mail .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--face-accent); flex: none; } .ui-mail .dot.muted { background: transparent; } .ui-mail .addr { margin-top: auto; font-size: .75em; color: var(--face-ink-2); font-weight: 600; } .ui-chat .bub { max-width: 84%; padding: .55em .75em; border-radius: .85em; background: #E1E8DC; transform-origin: 0 100%; } .ui-chat .bub.l { border-bottom-left-radius: .2em; } .ui-chat .bub.r { align-self: flex-end; background: #166534; color: #F8F9F4; border-bottom-right-radius: .2em; transform-origin: 100% 100%; } .ui-places { align-items: center; justify-content: center; text-align: center; gap: .3em; } .ui-places .pin { width: 2.6em; height: 2.6em; fill: none; stroke: var(--face-accent); stroke-width: 1.8; } .ui-places b { font: 600 1.4em/1.1 var(--font-display); } .ui-places i { font-style: normal; color: var(--face-ink-2); } main > section:not(.hero) { max-width: 1180px; margin: 0 auto; padding: 56px 16px; } h2 { font: 500 var(--t-xl)/1.06 var(--font-display); letter-spacing: -0.02em; } .sec-head { display: grid; gap: 14px; max-width: 760px; } .sec-head p { color: var(--ink-2); max-width: 60ch; } .inside { border-top: 1px solid var(--rule); } .ledger { display: grid; gap: 36px; margin-top: 36px; } .col-title { font: 600 var(--t-sm)/1.2 var(--font-ui); color: var(--ink-3); padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); } .ledger dl { margin: 0; } .li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); } .li dt { font: 500 var(--t-md)/1.3 var(--font-display); grid-column: 1; } .li dd { margin: 0; color: var(--ink-2); font-size: var(--t-base); grid-column: 1; } .li .st { grid-column: 2; grid-row: 1; align-self: start; padding-top: 4px; } @media (min-width: 900px) { .ledger { grid-template-columns: 1fr 1fr; gap: 56px; } } .cost { padding-top: 8px !important; } .cost-row { display: grid; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); } .cost-cell { padding: 26px 0; display: grid; gap: 8px; align-content: start; } .cost-cell + .cost-cell { border-top: 1px solid var(--rule); } .who { font-weight: 600; color: var(--ink-2); font-size: var(--t-base); } .price { font: 500 var(--t-xl)/1 var(--font-display); letter-spacing: -0.025em; } .cost-cell + .cost-cell .price { font-size: var(--t-lg); line-height: 1.15; } .terms { color: var(--ink-2); max-width: 44ch; } @media (min-width: 768px) { .cost-row { grid-template-columns: 1fr 1fr; } .cost-cell { padding: 30px 32px 34px 0; } .cost-cell + .cost-cell { border-top: 0; border-left: 1px solid var(--rule); padding-left: 32px; } } .cap { display: grid; gap: 32px; align-items: center; } .cap-copy { display: grid; gap: 16px; } .cap-copy p { color: var(--ink-2); max-width: 56ch; } .cap-copy p:first-of-type { color: var(--ink); font-size: var(--t-md); } .batches { margin: 0; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--rule); } .batch-grid { display: grid; gap: 10px; } .batch { display: grid; grid-template-columns: 4.8em repeat(5, 1fr); gap: 8px; align-items: center; } .b-name { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; } .batch i { aspect-ratio: 1; max-height: 46px; background: var(--ink-3); opacity: .55; -webkit-mask: url("../cube/cell.svg") center / contain no-repeat; mask: url("../cube/cell.svg") center / contain no-repeat; } .batches figcaption { margin-top: 16px; font-size: var(--t-sm); color: var(--ink-2); } .batches figcaption b { color: var(--partial); font-weight: 600; } @media (min-width: 900px) { .cap { grid-template-columns: 1fr 1fr; gap: 64px; } } .join { display: grid; gap: 48px; border-top: 1px solid var(--rule); } .join-form { display: grid; gap: 14px; align-content: start; } .join-why { color: var(--ink); font-size: var(--t-md); max-width: 50ch; } .demo-note { font-size: var(--t-sm); color: var(--partial); font-weight: 500; max-width: 52ch; } form { display: grid; gap: 16px; margin-top: 6px; max-width: 520px; } .fld { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; } .fld > span, .fld legend { font-weight: 600; font-size: var(--t-base); padding: 0; } .fld small { font-weight: 400; font-size: var(--t-sm); color: var(--ink-3); } input[type="text"], input[type="email"] { font: 400 var(--t-base)/1.3 var(--font-ui); color: var(--ink); background: var(--surface); border: 1.5px solid var(--edge); border-radius: 12px; min-height: 50px; padding: 12px 14px; width: 100%; } input[type="text"]:focus-visible, input[type="email"]:focus-visible { border-color: var(--focus); } .kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kinds legend { margin-bottom: 8px; } .kinds label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; font-size: var(--t-sm); border: 1.5px solid var(--edge); border-radius: 12px; background: var(--surface); cursor: pointer; line-height: 1.2; } .kinds label:has(input:checked) { border-color: var(--action); } .kinds input { accent-color: var(--action); width: 18px; height: 18px; margin: 0; flex: none; } form .btn { justify-self: start; } .demo-done { padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--partial); color: var(--ink); background: var(--surface); font-weight: 500; } .refer { display: grid; gap: 18px; align-content: start; } .refer-list { margin: 0; padding: 0; list-style: none; display: grid; } .refer-list li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink-2); } .refer-list li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; border: 1.5px solid var(--action); border-radius: 2px; } .ref-card { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); display: grid; gap: 10px; } .ref-label { font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 8px; } .ref-demo { font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--partial); border: 1px solid currentColor; border-radius: 5px; padding: 2px 6px; } .ref-link { font: 500 var(--t-md)/1.3 var(--font-display); word-break: break-all; } .ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ref-stats div { padding: 12px; border-radius: 12px; background: var(--ground); display: grid; gap: 2px; font-size: var(--t-sm); } .ref-stats span { color: var(--ink-3); } @media (min-width: 900px) { .join { grid-template-columns: 1.1fr 1fr; gap: 72px; } } .faq { border-top: 1px solid var(--rule); } .faq details, .faq h2 { max-width: 780px; } .faq h2 { margin-bottom: 18px; } details { border-bottom: 1px solid var(--rule); } summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 var(--t-md)/1.3 var(--font-display); padding: 10px 0; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font: 400 var(--t-lg)/1 var(--font-ui); color: var(--ink-3); flex: none; } details[open] > summary::after { content: "\2212"; } details p { padding: 0 0 18px; color: var(--ink-2); max-width: 64ch; } .foot { max-width: 1180px; margin: 0 auto; padding: 32px 16px 56px; border-top: 1px solid var(--rule); display: grid; gap: 6px; color: var(--ink-3); font-size: var(--t-sm); } .foot b { color: var(--ink); font-weight: 600; } .foot a { min-height: 44px; display: inline-flex; align-items: center; } .theater { position: fixed; inset: 0; z-index: 40; background: var(--ground); display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); --s: min(52vw, 27vh); --cube-y: 56%; } @media (min-width: 768px) { .theater { --s: min(34vw, 30vh); --cube-y: 63%; } } .theater-stage { position: relative; min-height: 0; } .theater-stage .stage { position: absolute; inset: 0; height: auto; cursor: default; } .theater .stage-btn { display: none !important; } .t-wordmark { position: relative; z-index: 2; text-align: center; font: 500 var(--t-xl)/1 var(--font-display); letter-spacing: -0.02em; opacity: 0; margin: 0 0 4px; } .t-wordmark b { font-weight: 600; } .captions { position: relative; z-index: 2; min-height: calc(3 * 1.25 * var(--t-lg) + 16px); display: grid; place-items: center; text-align: center; padding: 6px 0 10px; } .cap-line { font: 500 var(--t-lg)/1.25 var(--font-display); letter-spacing: -0.012em; max-width: 30ch; text-wrap: balance; } @media (max-width: 480px) { .cap-line { font-size: var(--t-md); max-width: 100%; } } .theater-end { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-bottom: 28px; visibility: hidden; opacity: 0; } .theater-end.on { visibility: visible; } .theater-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 860px; width: 100%; margin: 0 auto; } .t-btn { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; padding: 0 10px; font: 600 var(--t-sm)/1 var(--font-ui); } .t-btn svg { width: 16px; height: 16px; fill: currentColor; } .progress { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; } .progress i { display: block; height: 100%; background: var(--action); transform-origin: 0 50%; transform: scaleX(0); } .t-time { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 6.6em; text-align: right; } @media (max-width: 420px) { .t-time { display: none; } } body.theater-open { overflow: hidden; } .app { --a-bg: #F6F7F3; --a-card: #FFFFFF; --a-line: #E1E7DD; --a-ink: #0E1E16; --a-soft: #56665B; --a-forest: #166534; --a-forest-ink: #FFFFFF; --a-live-bg: #E4F0E7; --a-live: #14562D; --a-part-bg: #FBF0D8; --a-part: #7A4E0E; --a-com-bg: #ECEEE9; --a-com: #46564C; --a-bad: #A63D35; --a-in: #F6F7F3; background: var(--a-bg); color: var(--a-ink); border-radius: 0; overflow: hidden; position: relative; font: 400 var(--t-sm)/1.45 var(--font-ui); text-align: left; } :root[data-theme="dark"] .app { --a-bg: #0D1913; --a-card: #14261C; --a-line: #26382D; --a-ink: #E6ECE3; --a-soft: #A9B8A6; --a-forest: #7CC694; --a-forest-ink: #06140C; --a-live-bg: #17382A; --a-live: #A6DDB6; --a-part-bg: #3A2D12; --a-part: #E9C57D; --a-com-bg: #213128; --a-com: #B3C2B0; --a-bad: #F0A59B; --a-in: #0D1913; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app { --a-bg: #0D1913; --a-card: #14261C; --a-line: #26382D; --a-ink: #E6ECE3; --a-soft: #A9B8A6; --a-forest: #7CC694; --a-forest-ink: #06140C; --a-live-bg: #17382A; --a-live: #A6DDB6; --a-part-bg: #3A2D12; --a-part: #E9C57D; --a-com-bg: #213128; --a-com: #B3C2B0; --a-bad: #F0A59B; --a-in: #0D1913; } } :root { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,10 114.27,65.56 163.64,36.36 134.44,85.73 190,100 134.44,114.27 163.64,163.64 114.27,134.44 100,190 85.73,134.44 36.36,163.64 65.56,114.27 10,100 65.56,85.73 36.36,36.36 85.73,65.56'/%3E%3C/svg%3E"); } .app *, .vp * { box-sizing: border-box; } .app p, .app ul, .app ol, .app dl, .app dd { margin: 0; } .app .bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--a-card); border-bottom: 1px solid var(--a-line); } .app .brand-w { font: 600 var(--t-base)/1 var(--font-display); letter-spacing: -0.01em; } .app .org-sw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-in); font-weight: 600; min-width: 0; } .app .org-sw::after { content: "\25BE"; color: var(--a-soft); } .app .org-sw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app .user { margin-left: auto; color: var(--a-soft); white-space: nowrap; } .app .grid { display: grid; grid-template-columns: minmax(0, 1fr); } .app .side { list-style: none; padding: 8px 10px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--a-line); background: var(--a-card); scrollbar-width: none; } .app .side li { flex: none; white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: var(--a-soft); font-weight: 500; } .app .side li.cur { background: var(--a-live-bg); color: var(--a-live); font-weight: 600; } .app .main { padding: 18px 16px 24px; min-width: 0; } .app .solo .main, .app.solo .main { padding: 18px 16px 24px; } @media (min-width: 760px) { .app .grid { grid-template-columns: 196px minmax(0, 1fr); } .app .side { flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--a-line); padding: 16px 12px; min-height: 100%; } .app .main { padding: 26px 28px 32px; } } .app .body { display: grid; gap: 18px; max-width: 640px; } .app .body.center { justify-items: center; text-align: center; margin: 0 auto; } .app .k { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--a-soft); } .app .h1 { font: 500 var(--t-lg)/1.15 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; } .app .h1.sm { font-size: var(--t-md); font-weight: 600; } .app .small { font-size: var(--t-xs); } .app .muted, .app .sub { color: var(--a-soft); } .app .sub { font-size: var(--t-sm); } .app .mono { font: 500 var(--t-sm)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; } .app .card { position: relative; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 16px; padding: 18px; display: grid; gap: 16px; min-width: 0; } .app .card.narrow { max-width: 420px; text-align: left; } .app .card.off { border-style: dashed; } .app .ct { font-weight: 600; font-size: var(--t-base); } .app .ct.sm { font-size: var(--t-sm); } .app .lbl { font-size: var(--t-sm); font-weight: 600; margin-top: 4px; } .app .grp { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-soft); margin-top: 6px; display: flex; align-items: center; gap: 8px; } .app .rule { border-top: 1px solid var(--a-line); } .app .tl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .app .nm { font-weight: 600; color: var(--a-ink); } .app .lnk { color: var(--a-forest); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .app .lnk.bad { color: var(--a-bad); } .app .lnk.dis, .app .fbtn.dis, .app .obtn.dis { opacity: .6; } .app .fbtn { display: inline-block; justify-self: start; background: var(--a-forest); color: var(--a-forest-ink); border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: var(--t-sm); line-height: 1.2; position: relative; } .app .fbtn.wide { justify-self: stretch; text-align: center; max-width: 340px; width: 100%; } .app .obtn { display: inline-block; justify-self: start; border: 1.5px solid var(--a-forest); color: var(--a-forest); border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: var(--t-sm); } .app .in { display: block; background: var(--a-in); border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; color: var(--a-ink); min-width: 0; overflow-wrap: anywhere; text-align: left; } .app .in.area { min-height: 64px; } .app .sel { display: inline-block; background: var(--a-in); border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; } .app .sel::after { content: "\25BE"; margin-left: 10px; color: var(--a-soft); } .app .chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; letter-spacing: .01em; } .app .chip.live { background: var(--a-live-bg); color: var(--a-live); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .app .chip.partial { background: var(--a-part-bg); color: var(--a-part); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .app .chip.coming { background: var(--a-com-bg); color: var(--a-com); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .app .tag { font-size: var(--t-xs); font-weight: 600; color: var(--a-forest); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; } .app .status { padding: 10px 12px; border-radius: 10px; background: var(--a-in); border: 1px solid var(--a-line); font-size: var(--t-sm); } .app .tools { list-style: none; padding: 0; display: grid; } .app .tools li { padding: 10px 0; border-bottom: 1px solid var(--a-line); display: grid; gap: 3px; position: relative; } .app .tools li:last-child { border-bottom: 0; } .app .tools.flat li:first-child { padding-top: 0; } .app .tools[hidden], .app [hidden] { display: none !important; } .app .people { list-style: none; padding: 0; } .app .people li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--a-line); position: relative; flex-wrap: wrap; } .app .people li:last-child { border-bottom: 0; } .app .people .nm { display: block; } .app .acts { display: flex; gap: 18px; font-size: var(--t-xs); align-items: center; } .app .xfer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .app .invite-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .app .invite-row { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } } .app .pend { list-style: none; padding: 0; display: grid; gap: 8px; } .app .pend li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-sm); } .app .checks { display: grid; gap: 18px; padding: 14px; border-radius: 12px; background: var(--a-in); border: 1px solid var(--a-line); } .app .chk { display: flex; gap: 10px; align-items: flex-start; } .app .chk i { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--a-soft); margin-top: 1px; position: relative; } .app .chk.on i { background: var(--a-forest); border-color: var(--a-forest); } .app .chk.on i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--a-forest-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .app .swrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .app .sw { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--a-com-bg); border: 1.5px solid var(--a-soft); position: relative; transition: background-color .18s ease, border-color .18s ease; } .app .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--a-soft); transition: transform .18s ease, background-color .18s ease; } .app .sw.on { background: var(--a-forest); border-color: var(--a-forest); } .app .sw.on::after { transform: translateX(20px); background: var(--a-forest-ink); } @media (prefers-reduced-motion: reduce) { .app .sw, .app .sw::after { transition: none; } } .app .tile { width: 112px; height: 112px; border-radius: 22px; display: grid; place-items: center; background: var(--a-forest); color: var(--a-forest-ink); font: 600 var(--t-lg)/1 var(--font-display); } .app .mails { list-style: none; padding: 0; display: grid; gap: 6px; } .app .mails li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--a-in); } .app .mails li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app .mails em { font-style: normal; font-size: var(--t-xs); color: var(--a-soft); } .app .mails .unread { background: var(--a-live-bg); font-weight: 700; } .app .mails i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-forest); flex: none; } .app .mails li:not(.unread) i { background: transparent; } .app .events { list-style: none; padding: 0; display: grid; gap: 6px; } .app .events li { display: grid; grid-template-columns: 3em 1fr auto; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--a-in); } .app .events em { font-style: normal; color: var(--a-soft); } .app .mini { padding-left: 1.3em; display: grid; gap: 4px; color: var(--a-soft); } .app .flow { list-style: none; padding: 0; display: grid; gap: 8px; } .app .flow li { display: flex; align-items: center; gap: 10px; color: var(--a-soft); } .app .flow i { width: 14px; height: 14px; flex: none; background: var(--a-soft); opacity: .45; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; } .app .flow .done { color: var(--a-ink); } .app .flow .done i { background: var(--a-forest); opacity: 1; } .app .flow .now { color: var(--a-ink); font-weight: 600; } .app .flow .now i { background: var(--a-forest); opacity: 1; transform: scale(1.3); } .app .steps-list { list-style: none; padding: 0; display: grid; } .app .steps-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--a-line); } .app .steps-list li:last-child { border-bottom: 0; } .app .num { width: 26px; height: 26px; border-radius: 50%; background: var(--a-com-bg); color: var(--a-com); display: grid; place-items: center; font-weight: 600; font-size: var(--t-xs); } .app .bubs { display: grid; gap: 8px; } .app .bub { max-width: 84%; padding: 9px 12px; border-radius: 14px; background: var(--a-com-bg); width: fit-content; } .app .bub.l { border-bottom-left-radius: 4px; } .app .bub.r { justify-self: end; background: var(--a-forest); color: var(--a-forest-ink); border-bottom-right-radius: 4px; } .app .composer { display: flex; gap: 10px; align-items: center; } .app .composer .in { flex: 1; } .app .mailprev { background: var(--a-in); } .app .mailprev .hd b { display: inline-block; min-width: 4.4em; color: var(--a-soft); font-weight: 600; } .app .leave { padding: 6px 2px; position: relative; display: inline-block; justify-self: start; } .app .rv { display: none; padding: 10px 12px; border-radius: 10px; background: var(--a-live-bg); color: var(--a-live); font-size: var(--t-sm); font-weight: 500; } .app .did > .rv, .app .did .rv.on, .app .rv.on { display: block; } .app .rv.bad { background: color-mix(in srgb, var(--a-bad) 14%, transparent); color: var(--a-bad); } .app .pre[hidden], .app .post[hidden] { display: none !important; } .mini-face { position: relative; width: 72px; height: 72px; flex: none; --s: 216px; border-radius: 6px; overflow: hidden; } .mini-face .face { position: absolute; inset: auto; left: 0; top: 0; width: 216px; height: 216px; transform: scale(.3333); transform-origin: 0 0; backface-visibility: visible; -webkit-backface-visibility: visible; opacity: 1 !important; } .mini-face .lid-star { position: absolute; inset: 15%; background: url("../cube/star-lid.svg") center / contain no-repeat; } .thumb { width: 272px; height: 172px; overflow: hidden; border-radius: 14px; border: 1px solid var(--rule); position: relative; pointer-events: none; background: var(--pool); flex: none; } .thumb-in { width: 680px; transform: scale(.4); transform-origin: 0 0; } .thumb .vp { margin: 0; } .vp { --v-ground: var(--surface); --v-ink: var(--ink); --v-soft: var(--ink-2); --v-rule: var(--rule); --v-accent: var(--action); --v-demo: var(--partial); background: var(--v-ground); color: var(--v-ink); padding: 36px 22px 30px; position: relative; font-family: var(--font-ui); line-height: 1.55; } .vp p, .vp dl, .vp dd, .vp dt { margin: 0; } .vp .vbody { max-width: 36rem; margin: 0 auto; } .vp .vk { font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; color: var(--v-accent); } .vp .vh { font: 500 1.9rem/1.15 var(--font-display); letter-spacing: -0.02em; margin: .25rem 0 .75rem; text-wrap: balance; overflow-wrap: anywhere; } .vp .vdemo { font-size: .95rem; color: var(--v-demo); font-weight: 600; } .vp .vs { margin-top: 1.5rem; } .vp .vh2 { font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; color: var(--v-soft); margin-bottom: .4rem; } .vp .vnote { border-left: 3px solid var(--v-accent); padding-left: .9rem; overflow-wrap: anywhere; } .vp .vmeet { margin-top: 1.2rem; font-weight: 600; color: var(--v-accent); text-decoration: underline; text-underline-offset: 3px; } .vp .vmark { margin-top: 1.5rem; font-size: .9rem; color: var(--v-soft); } .vp .vledger { margin-top: 2.5rem; border-top: 1px solid var(--v-rule); } .vp .vledger dt { margin-top: .8rem; font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; color: var(--v-soft); } .vp .vledger dd { font-size: .9rem; } .vp .vfoot { margin-top: 2rem; font-size: .9rem; color: var(--v-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .vp .vnothing { padding: 2rem 0; } .vp .vnothing .vh { font-size: 1.4rem; } .vp .rv { display: none; margin-top: .6rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--v-rule); font-size: .9rem; color: var(--v-ink); } .vp .did > .rv { display: block; } .thumb .app .grid { grid-template-columns: 150px minmax(0, 1fr); } .thumb .app .side { flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--a-line); padding: 16px 12px; min-height: 100%; } .thumb .app .main { padding: 26px 28px 32px; } .mini-face .lid-star { opacity: 1 !important; } .thumb-link { text-decoration: none; color: inherit; } .app .bar .via { font-size: var(--t-xs); color: var(--a-soft); white-space: nowrap; } @media (max-width: 520px) { .app .bar .via { display: none; } } .app .kindsw { display: inline-flex; gap: 0; border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; justify-self: start; } .app .kbtn { appearance: none; border: 0; background: transparent; color: var(--a-soft); font: 600 var(--t-sm)/1 var(--font-ui); min-height: 44px; padding: 0 16px; cursor: pointer; } .app .kbtn + .kbtn { border-left: 1px solid var(--a-line); } .app .kbtn.on { background: var(--a-live-bg); color: var(--a-live); } .app .kbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .app .chk i { flex: none; } .views { border-top: 1px solid var(--rule); } .view-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1.5px solid var(--ink); } .view-list li { display: grid; gap: 14px 28px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: center; } .thumb-link { display: block; justify-self: start; border-radius: 14px; } .view-text { display: grid; gap: 8px; } .view-list h3 { font: 500 var(--t-lg)/1.15 var(--font-display); letter-spacing: -0.015em; } .view-list p { color: var(--ink-2); max-width: 54ch; } .view-go { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; color: var(--action); text-decoration: none; } .view-go span { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); } .view-go::after { content: "\2192"; transition: transform .18s ease; } .view-go:hover::after { transform: translateX(4px); } .view-go:hover { text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 900px) { .view-list li { grid-template-columns: 272px minmax(0, 1fr) auto; } } @media (prefers-reduced-motion: reduce) { .view-go::after { transition: none; } } .rows { list-style: none; margin: 0; padding: 0; } .rows .li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); align-items: start; } .rows .li .t { font: 500 var(--t-md)/1.3 var(--font-display); grid-column: 1; } .rows .li .d { color: var(--ink-2); font-size: var(--t-base); grid-column: 1; } .rows .li .st { grid-column: 2; grid-row: 1; align-self: start; padding-top: 4px; } .rows .li.has-face { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 16px; } .rows .li.has-face .mf { grid-column: 1; grid-row: 1 / span 2; } .rows .li.has-face .t, .rows .li.has-face .d { grid-column: 2; } .rows .li.has-face .st { grid-column: 3; } .mf { display: block; } .mf .mini-face { box-shadow: 0 6px 14px -8px rgba(var(--shadow), .5); } .leave { border-top: 1px solid var(--rule); } .rows.wide { margin-top: 28px; border-top: 1.5px solid var(--ink); max-width: 900px; } .rows.wide .li { grid-template-columns: 11rem minmax(0, 1fr) auto; column-gap: 24px; } .rows.wide .li .t { grid-column: 1; } .rows.wide .li .d { grid-column: 2; } .rows.wide .li .st { grid-column: 3; } @media (max-width: 640px) { .rows.wide .li { grid-template-columns: minmax(0, 1fr) auto; } .rows.wide .li .d { grid-column: 1; } } .cost-row.three { margin-top: 28px; } .cost-row.three .price { font: 500 var(--t-xl)/1.04 var(--font-display); letter-spacing: -0.02em; } .pending-box { border: 1.5px dashed var(--partial); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); max-width: 40ch; } .pending-box b { color: var(--ink); } .pending-tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--partial); } .opts { margin: 0; display: grid; gap: 8px; } .opts dt { font-weight: 600; color: var(--ink); } .opts dd { margin: 0; } @media (min-width: 900px) { .cost-row.three { grid-template-columns: 1fr 1.15fr 1fr; } .cost-row.three .cost-cell { padding: 30px 28px 34px 28px; } .cost-row.three .cost-cell:first-child { padding-left: 0; } .cost-row.three .cost-cell + .cost-cell { border-top: 0; border-left: 1px solid var(--rule); } } .compare { margin-top: 26px; border-top: 1px solid var(--rule); } .compare-body { display: grid; gap: 14px; padding-bottom: 12px; max-width: 900px; } .compare-body > p { color: var(--ink-2); } .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); } .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .compare table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: var(--t-sm); } .compare td a { white-space: nowrap; } .compare th, .compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; } .compare thead th { font-weight: 600; color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); } .compare tbody th { font-weight: 600; color: var(--ink); } .compare td { color: var(--ink-2); } .compare .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .compare tr.ours th, .compare tr.ours td { background: color-mix(in srgb, var(--action) 8%, transparent); } .compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; } .compare .fine { font-size: var(--t-sm); color: var(--ink-3); } .ourselves { padding-top: 6px; border-top: 1px solid var(--rule); color: var(--ink) !important; } .ourselves b { font-weight: 600; } .fld .err { color: #B4483F; font-weight: 600; font-size: var(--t-sm); } :root[data-theme="dark"] .fld .err { color: #F0A59B; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fld .err { color: #F0A59B; } } .fld .hint { font-size: var(--t-sm); color: var(--ink-3); font-weight: 400; } textarea { font: 400 var(--t-base)/1.4 var(--font-ui); color: var(--ink); background: var(--surface); border: 1.5px solid var(--edge); border-radius: 12px; padding: 12px 14px; width: 100%; min-height: 92px; resize: vertical; } textarea:focus-visible { border-color: var(--focus); } .fld.q > span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .factor { font-style: normal; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--action); border: 1px solid currentColor; border-radius: 6px; padding: 2px 7px; } .apply-result { padding: 22px; border-radius: 18px; border: 1.5px solid var(--partial); background: var(--surface); display: grid; gap: 14px; max-width: 560px; margin-top: 6px; } .apply-result:focus-visible { outline: 3px solid var(--focus); } .apply-result h3 { font: 500 var(--t-lg)/1.15 var(--font-display); letter-spacing: -0.015em; } .next-steps { margin: 0; padding: 0 0 0 1.3em; display: grid; gap: 12px; color: var(--ink-2); } .next-steps b { color: var(--ink); font-weight: 600; } .apply-result .btn { justify-self: start; } .factors { display: grid; gap: 16px; align-content: start; } .factors-lede { color: var(--ink-2); max-width: 46ch; } .factor-list { list-style: none; margin: 0; padding: 0; counter-reset: f; border-top: 1.5px solid var(--ink); } .factor-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .factor-list b { font: 500 var(--t-lg)/1.1 var(--font-display); letter-spacing: -0.015em; } .factor-list span { color: var(--ink-2); } .factors-note { font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; } @media (max-width: 420px) { .factor-list li { grid-template-columns: minmax(0, 1fr); } } .doors-title { font: 600 var(--t-sm)/1.2 var(--font-ui); color: var(--ink); letter-spacing: .01em; } .doors { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1.5px solid var(--ink); } .doors li { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: baseline; } .doors li b { color: var(--ink); font-weight: 600; } .foot .doors a { min-height: 0; display: inline; padding: 12px 0; } @media (min-width: 640px) { .doors li { grid-template-columns: 14rem minmax(0, 1fr); } } .factor { border: 0; padding: 0; font: 600 var(--t-base)/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--action); } .fld.q > span { display: block; } .submit-note { font-size: var(--t-sm); color: var(--ink-2); max-width: 46ch; } .js:not(.rm) .slots li { opacity: 1 !important; } .slots li.lit > span { font-weight: 600; color: var(--ink); } .slots li { color: var(--ink); } @media (min-width: 1100px) { .stage-btn { bottom: 10px; } } :root { --action: var(--forest, #166534); --action-hover: var(--forest-deep, #0F4A26); } :root[data-theme="dark"] { --action: #7CC694; --action-hover: #9BD8AE; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --action: #7CC694; --action-hover: #9BD8AE; } } .demo-pill, .ref-demo, .demo-tag, .pending-tag, .compare thead th, .app .k, .app .grp, .vp .vk, .vp .vh2, .vp .vledger dt, .col-title, .ledger .col-title { text-transform: none !important; letter-spacing: .01em; } .compare thead th { letter-spacing: 0; font-size: var(--t-sm); } .app .k, .vp .vk { font-size: var(--t-sm); } .vp .vh2, .vp .vledger dt { font-size: .875rem; } .hero .lede { margin-top: 12px; color: var(--ink-2); max-width: 44ch; } .hero .lede b { display: block; margin-top: 6px; font-weight: 600; color: var(--ink); } @media (max-width: 599px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; grid-template-areas: "title title" "lede lede" "apply demo" "stage stage" "intro intro"; } .hero h1, .hero .lede { grid-column: 1 / -1; } .hero .lede { font-size: var(--t-base); line-height: 1.4; } .hero .cta-row [data-intro-open] { grid-area: intro; } .hero .cta-row .btn-demo { grid-area: demo; margin-top: 10px; position: relative; z-index: 2; } .hero .cta-row .btn { padding-left: 10px; padding-right: 10px; } .hero .stage { height: 352px; } .hero .stage-btn { bottom: -46px; } } @media (min-width: 600px) and (max-width: 1099px) { .hero { grid-template-areas: "title" "lede" "cta" "stage"; } } @media (min-width: 1100px) { .hero .lede { max-width: 38ch; } .hero .lede b { margin-top: 10px; } } .cap { display: block; } .cap-copy { max-width: 62ch; } .batch-note { margin-top: 18px; max-width: 62ch; font-size: var(--t-sm); color: var(--ink-3); } .batch-note b { color: var(--ink-2); } .compare table { min-width: 0; table-layout: auto; } .compare .num { white-space: normal; } .foot a { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; } .compare td a { display: inline; padding: 12px 0; white-space: normal; } .compare th, .compare td { padding: 10px 12px; } .compare .notes { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); max-width: 70ch; } @media (max-width: 599px) { .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; } .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .compare tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; } .compare tbody tr:last-child { border-bottom: 0; } .compare tbody th { grid-column: 1 / -1; padding: 0 0 4px; border: 0; font-size: var(--t-base); } .compare td { padding: 0; border: 0; text-align: left; } .compare td[data-label="What it is"], .compare td[data-label="Price page, date read, term"] { grid-column: 1 / -1; } .compare td[data-label="Price page, date read, term"] { margin-top: 2px; } .compare td.num { text-align: left; font-weight: 600; color: var(--ink); } .compare td::before { content: attr(data-label); display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); } .compare td.num { padding-top: 4px; } .compare tr.ours { background: color-mix(in srgb, var(--action) 8%, transparent); } .compare tr.ours th, .compare tr.ours td { background: transparent; } } .foot a { padding: 0; } .foot .doors a { padding: 0; min-height: 44px; display: inline-flex; align-items: center; } .foot p a { display: inline-flex; } @media (max-width: 599px) { .thumb-link { display: none; } .view-list li { padding: 16px 0; gap: 8px; } .compare th, .compare td { padding: 0; } main > section:not(.hero) { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 1100px) { .hero { min-height: 0; align-items: start; } .hero-copy { align-self: start; padding-top: 112px; } } @media (max-width: 599px) { .compare td[data-label="What it is"]::before, .compare td[data-label="Price page, date read, term"]::before { display: none; } .compare td[data-label="What it is"] { color: var(--ink-2); } .compare tbody tr { padding: 10px 14px 4px; gap: 0 12px; } .compare td.num { padding-top: 6px; } .compare td a { padding: 12px 0; } .compare td[data-label="Price page, date read, term"] { margin-top: 0; } } .compare sup { font-size: inherit; line-height: 0; } .hero .lede { margin-top: 20px; } .slots { position: relative; z-index: 4; } .cta-row .long { display: inline; } @media (max-width: 559px) { .rows .li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t st" "d d"; gap: 6px 12px; } .rows .li .t { grid-area: t; } .rows .li .d { grid-area: d; } .rows .li .st { grid-area: st; } .rows .li.has-face { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "mf t st" "d d d"; align-items: center; } .rows .li.has-face .mf { grid-area: mf; grid-row: auto; } .rows .li.has-face .t { grid-area: t; } .rows .li.has-face .d { grid-area: d; } .rows .li.has-face .st { grid-area: st; } .thumb-link { display: none; } .view-list li:first-child .thumb-link { display: block; width: 100%; } } .cost-free { display: grid; gap: 14px 48px; border-top: 1.5px solid var(--ink); padding: 26px 0; align-items: start; } .cost-free .price { font: 500 var(--t-xl)/1 var(--font-display); letter-spacing: -0.025em; } .cost-why { color: var(--ink-2); max-width: 54ch; } @media (min-width: 900px) { .cost-free { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } } .biz { border-bottom: 1px solid var(--rule); } .biz > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer; font: 500 var(--t-md)/1.3 var(--font-display); list-style: none; padding: 8px 0; } .biz > summary::-webkit-details-marker { display: none; } .biz > summary::after { content: "+"; font: 400 1.5rem/1 var(--font-ui); color: var(--action); } .biz[open] > summary::after { content: "\2212"; } .biz > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; } .biz-body { display: grid; gap: 22px; padding-bottom: 22px; } .cost-row.two { border-top: 1px solid var(--rule); border-bottom: 0; } .cost-row.two .price, .cost-row.two .cost-cell + .cost-cell .price { font: 500 var(--t-lg)/1.15 var(--font-display); letter-spacing: -0.015em; } @media (min-width: 900px) { .cost-row.two { grid-template-columns: 1fr 1fr; } .cost-row.two .cost-cell:first-child { padding-left: 0; } } .cmp-title { font: 500 var(--t-md)/1.3 var(--font-display); margin-bottom: 10px; } .compare { border-top: 0; margin-top: 0; } .compare .case { color: var(--ink); max-width: 30em; } .compare .case b { font-weight: 600; } .cap { display: grid; gap: 28px 56px; align-items: center; } @media (min-width: 900px) { .cap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } } .lattice-fig { margin: 0; display: grid; gap: 14px; justify-items: start; } .lattice { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(100%, 360px); } .lattice i { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--ink-3); position: relative; opacity: .8; } .lattice i svg { position: absolute; inset: 18%; width: 64%; height: 64%; overflow: visible; } .lat-star { fill: none; stroke: var(--ink-3); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 920; stroke-dashoffset: 0; opacity: .75; } .batch-note { margin-top: 0; } .faq { display: grid; gap: 18px 56px; align-items: start; } .faq-head { display: grid; gap: 10px; align-content: start; } .faq-head p { color: var(--ink-2); max-width: 32ch; } .faq-list { min-width: 0; } @media (min-width: 900px) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } .faq-head { position: sticky; top: 24px; } } @media (max-width: 559px) { .view-list li { grid-template-columns: minmax(0, 1fr); } .view-list li:first-child .thumb-link { max-width: 100%; min-width: 0; overflow: hidden; } } @media (min-width: 900px) { .cost-row.two { grid-template-rows: repeat(4, auto); } .cost-row.two .cost-cell { grid-row: span 4; display: grid; grid-template-rows: subgrid; align-content: start; } } .ui-page .bar .url { font-size: .8em; letter-spacing: -.01em; } :root { --font-display: 'Literata', 'Literata Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-ui: 'Instrument Sans', 'Instrument Sans Fallback', 'Segoe UI',system-ui,-apple-system,sans-serif}main > section:not(.hero){content-visibility: visible;contain-intrinsic-size: none}@media (max-width: 599px){.hero{grid-template-areas: "title title" "lede lede" "apply demo" "intro intro" "stage stage"}.hero .cta-row [data-intro-open]{grid-area: intro;margin-top: 10px;width: 100%;justify-content: center}.hero .cta-row .long{display: none}.hero .stage{height: 296px}.slots{padding-right: 0}}.cost .sec-head{margin-bottom: 30px}@keyframes lat-draw{from{stroke-dashoffset: 920}to{stroke-dashoffset: 0}}.js:not(.rm) .lattice:not(.in) .lat-star{stroke-dashoffset: 920}.js:not(.rm) .lattice.in .lat-star{animation: lat-draw .8s cubic-bezier(.3,.6,.2,1) both;animation-delay: calc(var(--i) * 110ms)}@media (prefers-reduced-motion: reduce){.lat-star{animation: none !important;stroke-dashoffset: 0 !important}}.req{font-weight: 500;font-size: var(--t-sm);color: var(--ink-3);margin-left: 6px}.kinds .kind-err{grid-column: 1 / -1}.thumb.crop{width: min(100%,330px);height: 200px;border-radius: 14px;background: var(--pool)}.thumb.crop .thumb-in{width: 330px;transform: none;padding: 12px}.thumb.crop .app{background: transparent}.thumb.crop .card,.thumb.crop .vledger{box-shadow: none}@media (max-width: 559px){.view-list li:first-child .thumb.crop{width: 100%;height: 210px}.view-list li:first-child .thumb.crop .thumb-in{width: 100%;transform: none}}@media (min-width: 900px){.view-list li{grid-template-columns: 340px minmax(0,1fr) auto}}.thumb.crop .vp .vbody{padding-top: 0}@media (max-width: 599px){:root{--s: 212px;--cube-y: 53%}.hero .stage{height: 384px;overflow-y: visible}.hero .scene{overflow: clip}.hero .stage-btn{top: auto;bottom: -50px;right: 0;z-index: 5}.hero .slots{padding-right: 56px;min-height: 48px}}.biz-line{margin-top: 12px;font-size: var(--t-sm);color: var(--ink-2)}.biz-line a{display: inline-flex;align-items: center;min-height: 44px;font-weight: 600}@media (max-width: 599px){.hero{grid-template-areas: "title title" "stage stage" "free free" "apply demo" "intro intro" "biz biz" "lede lede"}.hero .free{grid-area: free;grid-column: 1 / -1;margin-top: 14px}.hero .lede{grid-area: lede;margin-top: 18px}.hero .cta-row .btn-primary{grid-area: apply;margin-top: 10px}.hero .biz-line{grid-area: biz;grid-column: 1 / -1;margin-top: 4px}}@media (min-width: 600px) and (max-width: 1099px){.hero{grid-template-areas: "title" "lede" "free" "cta" "biz" "stage"}.hero .biz-line{grid-area: biz}.hero .free{grid-area: free}}.biz > summary{border: 1.5px solid var(--rule);border-radius: 14px;padding: 8px 16px;margin: 14px 0}.biz > summary:hover{border-color: var(--action)}.biz[open] > summary{margin-bottom: 4px}.top-nav a{white-space: nowrap}.brand-word,.brand-by,.demo-pill{white-space: nowrap}@media (min-width: 768px) and (max-width: 1099px){.brand-by{display: none}.top-nav{gap: 0}.top-nav a{padding: 12px 10px}}.lattice i{opacity: .7}.req-note{font-size: var(--t-sm);color: var(--ink-2);max-width: 52ch}.opt,.req{font-weight: 500;font-size: var(--t-sm);color: var(--ink-3);margin-left: 6px;white-space: nowrap}.fld.q .opt{font-weight: 500}.thumb.crop{height: auto;min-height: 0;display: grid;align-items: center;padding: 14px}.thumb.crop .thumb-in{width: 100%;padding: 0}.thumb.crop .body{padding: 0}.thumb.crop .card{margin: 0}@media (max-width: 559px){.view-list li:first-child .thumb.crop{height: auto}}html .view-list .thumb .vp{--v-ground: var(--surface);--v-ink: var(--ink);--v-soft: var(--ink-2);--v-rule: var(--rule);--v-accent: var(--action);--v-demo: var(--partial);border: 1px solid var(--rule);border-radius: 14px}html .view-list .thumb .vp .vbody{padding: 16px 18px}.thumb.crop{min-height: 200px}.thumb.crop .flow{gap: 2px;margin: 8px 0 0}.thumb.crop .flow li{padding: 5px 0;border: 0;min-height: 0}html .view-list .thumb .vp{font-family: var(--font-ui)}html .view-list .thumb .vp .vh{font: 500 var(--t-lg)/1.15 var(--font-display);letter-spacing: -0.015em;margin: 4px 0 8px}html .view-list .thumb .vp .vk{text-transform: none;letter-spacing: .01em;font-size: var(--t-sm)}html .view-list .thumb .vp .vmeet{margin-top: 8px}.fold > summary{display: flex;align-items: center;justify-content: space-between;gap: 12px;min-height: 56px;cursor: pointer;font: 500 var(--t-md)/1.3 var(--font-display);list-style: none;border: 1.5px solid var(--rule);border-radius: 14px;padding: 8px 16px;margin: 10px 0 0}.fold > summary::-webkit-details-marker{display: none}.fold > summary::after{content: "+";font: 400 1.5rem/1 var(--font-ui);color: var(--action)}.fold[open] > summary::after{content: "\2212"}.fold > summary:hover{border-color: var(--action)}.fold > summary:focus-visible{outline: 3px solid var(--focus);outline-offset: 2px}.hero .free{font-weight: 600;color: var(--ink);margin-top: 12px}:root{--edge: #76857A}.btn-quiet{border-color: var(--ink-3)}@media (max-width: 599px){.hero h1{font-size: clamp(2.1rem,8.8vw,5.4rem)}.hero .stage-note{display: none}.hero .slots{min-height: 44px}.hero .free{font-size: var(--t-sm);margin-top: 6px;line-height: 1.35}.hero .cta-row .btn-primary,.hero .cta-row .btn-demo{margin-top: 8px}}.theme-btn,.stage-btn,.biz > summary,.fold > summary{border-color: var(--ink-3)}main p,.sec-head p,.rows .li .d,.head-long,.fineprint{max-width: 30em}main section p.case,main section p.cost-why,main section.cap p,main section .sec-head p{max-width: 30em}.cost-free .biz-cell .price small{font: 500 var(--t-md)/1 var(--font-ui);letter-spacing: 0;color: var(--ink-2)}.cost-free .biz-cell .terms a{font-weight: 600}.cost-free .cost-cell + .cost-cell{border-top: 1px solid var(--rule)}@media (min-width: 900px){.cost-free{grid-template-columns: minmax(0,1fr) minmax(0,1fr)}.cost-free .cost-cell + .cost-cell{border-top: 0;border-left: 1px solid var(--rule);padding-left: 32px}.cost-free .cost-why{grid-column: 1 / -1;max-width: 30em}}@media (min-width: 1100px){.hero .stage-btn{top: auto;bottom: -52px;right: 0;left: auto;transform: none;z-index: 5}.hero .slots{padding: 0 120px;min-height: 48px}}.join-why b{font-weight: 600}@media (min-width: 900px){.join{grid-template-columns: minmax(0,1fr)}.join-form{max-width: 640px}}@media (min-width: 1100px){.hero .slots{justify-content: flex-start;flex-wrap: wrap;white-space: normal;padding: 0 120px 0 0}}.path{border-bottom: 1px solid var(--rule)}.path > summary{display: flex;align-items: center;justify-content: space-between;gap: 12px;min-height: 56px;cursor: pointer;font: 500 var(--t-md)/1.3 var(--font-display);list-style: none;border: 1.5px solid var(--ink-3);border-radius: 14px;padding: 8px 16px;margin: 14px 0}.path > summary::-webkit-details-marker{display: none}.path > summary::after{content: "+";font: 400 1.5rem/1 var(--font-ui);color: var(--action)}.path[open] > summary::after{content: "\2212"}.path > summary:hover{border-color: var(--action)}.path > summary:focus-visible{outline: 3px solid var(--focus);outline-offset: 2px}.path[open] > summary{margin-bottom: 4px}.path-body{display: grid;gap: 12px;padding: 8px 0 22px}.path-body .price{font: 500 var(--t-xl)/1 var(--font-display);letter-spacing: -0.025em}.cost .sec-head{margin-bottom: 10px}.opt-fold .fld.q{margin-top: 14px}@media (max-width: 599px){.lattice{width: min(100%,260px)}}.path .biz-cell .price small{font: 500 var(--t-md)/1 var(--font-ui);letter-spacing: 0;color: var(--ink-2)}header.top{position: relative;z-index: 20}:root{--ink-3: #4E5C53}:root[data-theme="dark"]{--ink-3: #93A495}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink-3: #93A495}}:root{--t-xs: .875rem}@media (min-width: 600px) and (max-width: 1099px){.hero h1{font-size: clamp(2.6rem,7.3vw,3.5rem)}}.path .biz-cell .price.big{font: 500 var(--t-xl)/1 var(--font-display);letter-spacing: -0.025em}.path .biz-cell .price.big small{font: 500 var(--t-md)/1.2 var(--font-ui);letter-spacing: 0;color: var(--ink-2);display: inline-block}.fold.maths > summary{min-height: 48px;font-size: var(--t-base);margin-top: 4px}.fold.maths .terms{margin-top: 10px}.dedicated{display: grid;gap: 6px;padding: 16px 0 18px;border-top: 1px solid var(--rule);max-width: 34em}.dedicated .price{font: 500 var(--t-lg)/1.15 var(--font-display);letter-spacing: -0.015em}.dedicated .price small{font: 500 var(--t-base)/1.2 var(--font-ui);letter-spacing: 0;color: var(--ink-2)}.dedicated .terms{color: var(--ink-2)}.hero .stage{background: none}.floorlight{display: none !important}.hero-copy{position: relative;z-index: 6}@media (max-width: 599px){:root{--s: 184px;--cube-y: 53%}.hero .stage{height: 336px}.hero .biz-line .biz-link{display: none}.free-biz{display: inline-block;font-weight: 600;color: var(--action);padding: 10px 0;margin: -10px 0}}@media (min-width: 600px){.free-biz{display: none}}.dedicated .who .st{margin-left: 8px;vertical-align: middle}@media (max-width: 599px){:root{--cube-y: 53%}.hero .stage{height: 344px}.free-biz{padding: 13px 0;margin: -13px 0}}.lede-short{display: none}@media (max-width: 599px){:root{--s: 176px}.hero .stage{height: 328px}.hero{grid-template-areas: "title title" "stage stage" "ledeshort ledeshort" "free free" "apply demo" "intro intro" "biz biz" "lede lede"}.lede-short{display: block;grid-area: ledeshort;grid-column: 1 / -1;margin-top: 12px;font-size: var(--t-sm);line-height: 1.35;color: var(--ink-2)}.hero .free{margin-top: 6px}.view-list li:first-child .thumb-link{display: none}}@media (min-width: 1100px){.hero .slots{padding: 0;justify-content: center;flex-wrap: nowrap;white-space: nowrap}.hero .stage-btn{bottom: -100px}.hero .stage-note{padding-right: 120px;min-height: 44px;display: flex;align-items: center;justify-content: center}}@media (min-width: 600px){.thumb.crop{width: 340px;height: 256px;min-height: 0;overflow: hidden;align-items: start}}@media (min-width: 900px){.cost-row.two{grid-template-rows: auto}.cost-row.two .cost-cell{grid-row: auto;display: block}.cost-row.two .dedicated{grid-column: 2;border-top: 1px solid var(--rule);margin-top: 8px}.compare-body{max-width: none}}.cost-row.two .dedicated{padding: 16px 0 18px}@media (min-width: 900px){.join{grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);gap: 56px}.join-form{max-width: 640px}.join-next{position: sticky;top: 24px}}.join-next{display: grid;gap: 14px;align-content: start}.join-next h2{font: 500 var(--t-lg)/1.15 var(--font-display);letter-spacing: -0.015em}.join-next .next-steps{max-width: 30em}.faq-head p a{display: inline-block;padding: 12px 0;margin: -12px 0}.ledger{display: grid;gap: 36px;margin-top: 36px}.net{margin: 0;--cell: calc((100vw - 40px) / 3);--s: var(--cell);justify-self: start}.net-grid{display: grid;grid-template-columns: repeat(3,var(--cell));gap: 4px;grid-template-areas: ". meet ." "lid page floor" ". chat ." ". mail ."}.net .cell{position: relative;width: var(--cell);height: var(--cell)}.net .c-lid{grid-area: lid}.net .c-meet{grid-area: meet}.net .c-page{grid-area: page}.net .c-chat{grid-area: chat}.net .c-mail{grid-area: mail}.net .c-floor{grid-area: floor}.net .face{position: absolute;inset: 0;opacity: 1 !important;transform: none !important;backface-visibility: visible;-webkit-backface-visibility: visible}.net .ui{bottom: 27%;padding: 8% 9% 0;font-size: calc(var(--s) / 17)}.net .c-page .ui{font-size: calc(var(--s) / 19.5);gap: 4%}.net .ui-places{justify-content: center}.net .lid-star{position: absolute;inset: 8% 24% 34% 24%;background: url("../cube/star-lid.svg") center / contain no-repeat;opacity: 1 !important}.net .nm{position: absolute;left: 8%;bottom: 8%;font: 600 var(--t-xs)/1.1 var(--font-ui);color: var(--face-ink,#10301F);letter-spacing: 0}.net .st{position: absolute;left: 8%;bottom: 8%;display: none}.net .st.live{color: #166534}.net .st.partial{color: #8A5A12}@media (min-width: 600px){.net{--cell: 150px}.net-grid{grid-template-columns: repeat(4,var(--cell));grid-template-areas: ". lid . ." "meet page chat mail" ". floor . ."}.net .st{display: inline-flex}.net .ui{bottom: 33%}.net .lid-star{inset: 7% 25% 39% 25%}.net .nm{bottom: calc(8% + 18px)}}@media (min-width: 900px){.ledger{grid-template-columns: auto minmax(0,1fr);gap: 40px;align-items: start}.net{--cell: 104px;position: sticky;top: 24px}}@media (min-width: 1100px){.net{--cell: 132px}.ledger{gap: 64px}}.ledger-list{min-width: 0;display: grid;gap: 0;align-content: start}.ledger-list .rows + .col-title{margin-top: 32px}.lattice{gap: 8px;width: min(100%,340px)}.lattice i{border: 0;border-radius: 0;opacity: .85;background: var(--ink-3);-webkit-mask: url("cube-empty.svg") center / contain no-repeat;mask: url("cube-empty.svg") center / contain no-repeat}@media (max-width: 599px){.lattice{width: min(100%,280px)}}@media (min-width: 900px){.view-list{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0 32px}.view-list li{grid-template-columns: minmax(0,1fr);align-content: start;align-items: start;gap: 14px;padding: 26px 0 10px;border-bottom: 0}.view-list li .thumb-link,.view-list li .thumb.crop{width: 100%}.view-list p{max-width: 36ch}}.path-lead,.path-words{display: grid;gap: 10px;align-content: start}.path-body{gap: 12px 48px}@media (min-width: 900px){#path-masjid .path-body{grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr)}}html .view-list .thumb .vp .vmark{display: none}html .view-list .thumb .vp .vbody{padding: 14px 18px 18px}.net .ui-mail .addr{display: none}@media (max-width: 599px){.net{--cell: calc((100vw - 44px) / 4)}.net-grid{grid-template-columns: repeat(4,var(--cell));grid-template-areas: ". lid . ." "meet page chat mail" ". floor . ."}.net .nm{display: none}.net .ui{bottom: 0;padding: 9%;font-size: calc(var(--s) / 15)}.net .lid-star{inset: 15%}.net .ui-mail .addr{display: block}}.net-key{margin-top: 12px;font-size: var(--t-sm);color: var(--ink-2);max-width: 30em}@media (min-width: 600px){.net-key{display: none}.net{--cell: 170px}}@media (min-width: 900px){.net{--cell: 104px}}@media (min-width: 1100px){.net{--cell: 132px}}@media (min-width: 768px){.cost-row.two .dedicated{grid-column: 1 / -1;margin-top: 0;padding-top: 22px;max-width: none;display: grid;grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);gap: 6px 48px;align-items: start}.cost-row.two .dedicated .who{grid-column: 1}.cost-row.two .dedicated .price{grid-column: 1}.cost-row.two .dedicated .terms{grid-column: 2;grid-row: 1 / span 2}}.path > summary{flex-wrap: wrap;row-gap: 2px}.path > summary .door-t{flex: 1 1 auto}.path > summary .door-s{flex: 1 1 100%;order: 3;font: 400 var(--t-sm)/1.35 var(--font-ui);color: var(--ink-2);padding-bottom: 6px}@media (min-width: 900px){.path > summary .door-s{flex: 0 1 auto;order: 0;margin-left: auto;padding: 0 16px 0 0}}@media (max-width: 599px){.hero .lede{display: none}}@media (min-width: 600px) and (max-width: 899px){.view-list li{grid-template-columns: 340px minmax(0,1fr);gap: 10px 28px}.view-list li .thumb-link{grid-row: 1 / span 2}.view-list li .view-go{grid-column: 2}}.theater .stage{background: none}input,button,textarea,select{font-family: inherit}.foot-cube{margin-bottom: 10px}.foot-cube i{display: block;width: 56px;height: 56px;background: url("cube-closed.svg") center / contain no-repeat}@media (min-width: 768px){.cost-row.two .cost-cell.dedicated{border-left: 0;padding-left: 0}}@media (min-width: 768px){.cost-row.two .dedicated{grid-template-rows: auto auto}.cost-row.two .dedicated .who{grid-row: 1}.cost-row.two .dedicated .price{grid-row: 2}}.compare td a,.fold.maths .terms a{display: inline;padding: 13px 0}.door-pair{display: grid;gap: 14px;margin-top: 18px}.path{border-bottom: 0}.path > summary{display: grid;grid-template-columns: minmax(0,1fr) auto;grid-template-areas: "t plus" "s plus";align-items: start;row-gap: 8px;min-height: 0;padding: 20px 22px 22px;margin: 0;border: 0;border-radius: 0;background: var(--glaze),var(--grain),var(--porcelain);color: var(--face-ink,#10301F);box-shadow: inset 0 1px 0 #FFFFFF,inset 0 -2px 0 rgba(var(--shadow),.14),inset 0 0 0 1px var(--edge)}.path > summary .door-t{grid-area: t;flex: none;font: 500 var(--t-lg)/1.15 var(--font-display);letter-spacing: -0.015em}.path > summary .door-s{grid-area: s;flex: none;order: 0;margin: 0;padding: 0;font: 400 var(--t-base)/1.4 var(--font-ui);color: var(--face-ink-2,#56695C);max-width: 30em}.path > summary::after{grid-area: plus;align-self: start;color: #166534;font-size: 1.75rem}.path > summary:hover{box-shadow: inset 0 1px 0 #FFFFFF,inset 0 -2px 0 rgba(var(--shadow),.14),inset 0 0 0 1.5px #166534}.path > summary:focus-visible{outline: 3px solid var(--focus);outline-offset: 3px}.path[open] > summary{margin-bottom: 10px}@media (min-width: 900px){.door-pair{grid-template-columns: 1fr 1fr;gap: 16px}.path > summary{min-height: 176px;padding: 24px 26px 26px}.path[open]{grid-column: 1 / -1}.path[open] > summary{min-height: 0;grid-template-areas: "t plus" "s plus"}.path > summary .door-s{margin-left: 0;padding: 0;order: 0}}.cost .sec-head{margin-bottom: 0}@media (min-width: 768px){.cost-row.two .dedicated{grid-template-columns: 1fr 1fr;gap: 6px 0}.cost-row.two .dedicated .terms{padding-left: 32px}.cost-row.two .dedicated .who,.cost-row.two .dedicated .price{padding-right: 32px}}@media (max-width: 599px){.net{--cell: calc((100vw - 32px) / 4)}.net .nm{display: block;bottom: 7%}.net .ui{bottom: 27%;padding: 8% 9% 0;font-size: calc(var(--s) / 17)}.net .lid-star{inset: 8% 24% 34% 24%}.net .ui-mail .addr{display: none}.net .nm-l{display: none}}@media (min-width: 600px){.net .nm-s{display: none}}@media (max-width: 599px){.view-list li .thumb-link,.view-list li:first-child .thumb-link{display: block;width: 100%}.thumb.crop{width: 100%;height: auto;min-height: 0}}@media (max-width: 599px){.hero .slots{display: grid;grid-template-columns: 1fr 1fr;gap: 2px 10px;padding-right: 56px}.hero .slots li{min-height: 24px}}.jump{max-width: 1320px;margin: 0 auto;padding: 0 16px 8px;display: flex;flex-wrap: wrap;gap: 6px}.jump a{display: inline-flex;align-items: center;min-height: 44px;padding: 0 14px;border: 1.5px solid var(--ink-3);border-radius: 12px;color: var(--ink);text-decoration: none;font: 600 var(--t-sm)/1 var(--font-ui)}.jump a:hover{border-color: var(--action)}@media (min-width: 768px){.jump{display: none}}@media (max-width: 599px){:root{--t-xl: 1.75rem}}.apply-result p a{font-weight: 600}.path > summary{background: var(--grain),var(--porcelain)}:root{--door-fill: var(--porcelain);--door-hi: rgba(255,255,255,.9);--door-open: var(--porcelain-2);--frame: var(--porcelain)}:root[data-theme="dark"]{--door-fill: var(--porcelain-2);--door-hi: transparent;--door-open: var(--ground-2);--frame: var(--ground-2)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--door-fill: var(--porcelain-2);--door-hi: transparent;--door-open: var(--ground-2);--frame: var(--ground-2)}}.inside,.views,.join,.faq,.foot{border-top: 0}@media (min-width: 900px){main > section:not(.hero){padding-top: 104px;padding-bottom: 104px}:root{--t-xl: 2.5rem}}@media (max-width: 599px){main > section:not(.hero){padding-top: 56px;padding-bottom: 56px}}.views-note{margin-top: 16px;font-size: var(--t-sm);color: var(--ink-3)}.cost .sec-head{margin-bottom: 0}.st,.demo-pill{text-transform: none;letter-spacing: 0}.lattice{gap: 6px;width: 340px;transform: rotateX(54.7356deg) rotateZ(45deg);transform-origin: center;margin: -30px 0;justify-self: center}.lattice i{aspect-ratio: 1;border: 0;border-radius: 0;opacity: 1;background: var(--grain),var(--porcelain-2);outline: 1px dashed var(--edge);outline-offset: -1px;-webkit-mask: none;mask: none}.lattice-fig{justify-items: stretch}.batch-note{justify-self: start}@media (min-width: 600px) and (max-width: 899px){.lattice{width: 300px;margin: -26px 0}}@media (max-width: 599px){.lattice{width: 236px;margin: -20px 0}}.path > summary{background: var(--grain),var(--door-fill);box-shadow: inset 0 0 0 1px var(--edge),inset 0 2px 0 var(--door-hi),inset 0 -2px 0 rgba(var(--shadow),.14)}.path > summary:hover{box-shadow: inset 0 0 0 1.5px #166534,inset 0 2px 0 var(--door-hi),inset 0 -2px 0 rgba(var(--shadow),.14)}@media (min-width: 900px){.path > summary{min-height: 0;padding: 22px 26px 24px}}.path[open]{background: var(--grain),var(--door-open);box-shadow: inset 0 0 0 1px var(--edge)}.path[open] > summary{margin: 0;box-shadow: inset 0 0 0 1px var(--edge),inset 0 -1px 0 var(--edge)}.path[open] > .path-body,.path[open] > .biz-body{padding: 26px}@media (max-width: 599px){.path[open] > .path-body,.path[open] > .biz-body{padding: 18px}}.cost-row.two{border-top: 0}.biz{border-bottom: 0}.door-pair:has(> .path[open]) > .path{grid-column: 1 / -1}.door-pair:has(> .path[open]) > .path:not([open]) > summary{min-height: 0;padding: 16px 26px}@media (min-width: 900px){.view-list li{grid-template-rows: auto 1fr auto}}.view-list .thumb.crop{border-radius: 0;background: var(--grain),var(--frame);box-shadow: inset 0 0 0 1px var(--edge)}.view-go::after{content: none}@media (max-width: 599px){.view-list li .thumb.crop{height: 200px;overflow: hidden;align-items: start}.view-list li .thumb.crop .thumb-in{zoom: .78}}.net .cell{display: block;color: inherit;text-decoration: none}.net .cell:focus-visible{outline: 3px solid var(--focus);outline-offset: 3px}.net .cell:hover .face,.ledger:has(.li[data-face="lid"]:hover,.li[data-face="lid"]:focus-within) .c-lid .face,.ledger:has(.li[data-face="meet"]:hover,.li[data-face="meet"]:focus-within) .c-meet .face,.ledger:has(.li[data-face="mail"]:hover,.li[data-face="mail"]:focus-within) .c-mail .face,.ledger:has(.li[data-face="floor"]:hover,.li[data-face="floor"]:focus-within) .c-floor .face,.ledger:has(.li[data-face="page"]:hover,.li[data-face="page"]:focus-within) .c-page .face,.ledger:has(.li[data-face="chat"]:hover,.li[data-face="chat"]:focus-within) .c-chat .face{box-shadow: inset 0 0 0 2px #166534}.li:target .t{color: var(--action)}.li:target{scroll-margin-top: 24px}.foot-cube{display: flex;align-items: center;gap: 16px;margin-bottom: 20px}.foot-cube i{display: block;width: 72px;height: 72px;background: url("cube-closed.svg") center / contain no-repeat;flex: none}@media (min-width: 900px){.foot-cube i{width: 96px;height: 96px}}.foot-cube span{font: 500 var(--t-lg)/1.1 var(--font-display);color: var(--ink);letter-spacing: -0.015em}.foot-cube span b{font-weight: 600}.foot-cube span small{display: block;font: 400 var(--t-sm)/1.3 var(--font-ui);color: var(--ink-3);margin-top: 4px;letter-spacing: 0}.foot-links{list-style: none;margin: 0;padding: 0;display: flex;flex-wrap: wrap;gap: 0 24px}.lattice i{background: var(--grain),var(--door-fill)}@media (min-width: 600px){.view-list .thumb.crop .thumb-in{zoom: .76}}:root{--door-ink: var(--face-ink,#10301F);--door-ink-2: #3F5146;--tray-fill: var(--porcelain)}:root[data-theme="dark"]{--door-fill: var(--ground-2);--door-ink: var(--ink);--door-ink-2: var(--ink-2);--tray-fill: var(--ground-2)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--door-fill: var(--ground-2);--door-ink: var(--ink);--door-ink-2: var(--ink-2);--tray-fill: var(--ground-2)}}.path > summary{color: var(--door-ink)}.path > summary .door-s{color: var(--door-ink-2)}.path > summary::after{color: var(--action)}.path > summary:hover{box-shadow: inset 0 0 0 1.5px var(--action),inset 0 2px 0 var(--door-hi),inset 0 -2px 0 rgba(var(--shadow),.14)}.lattice i{background: var(--grain),var(--tray-fill)}@media (max-width: 599px){.net{--cell: calc((100vw - 44px) / 4)}}@media (min-width: 600px) and (max-width: 1099px){.hero .stage{height: 460px}}main > section:not(.hero),.foot{max-width: 1320px}.net .cell.lit .face{box-shadow: inset 0 0 0 2px var(--action)}@media (min-width: 900px) and (prefers-reduced-motion: no-preference){.net{perspective: 900px;--k: 0;--a: calc(90deg * var(--k))}.net-grid{transform-style: preserve-3d;transform: rotateX(calc(-22deg * var(--k))) rotateY(calc(34deg * var(--k)))}.net .cell{transform-style: preserve-3d}.net .c-lid{transform-origin: 50% 100%;transform: rotateX(var(--a)) translateY(calc(4px * var(--k)))}.net .c-floor{transform-origin: 50% 0;transform: rotateX(calc(-1 * var(--a))) translateY(calc(-4px * var(--k)))}.net .c-meet{transform-origin: 100% 50%;transform: rotateY(calc(-1 * var(--a))) translateX(calc(4px * var(--k)))}.net .c-chat{transform-origin: 0 50%;transform: rotateY(var(--a)) translateX(calc(-4px * var(--k)))}.net .c-mail{transform-origin: 0 50%;transform: translateX(calc(-1 * var(--cell) - 4px * var(--k))) rotateY(var(--a)) translateX(var(--cell)) rotateY(var(--a)) translateX(calc(-4px * var(--k)))}}@media (min-width: 900px){.ledger{grid-template-columns: auto minmax(0,1fr);align-items: start}.ledger-side{position: sticky;top: 24px;display: grid;gap: 26px;width: calc(4 * var(--cell) + 12px)}.ledger-side .sec-head{max-width: none}.ledger-side .sec-head p{max-width: 30em}.net{position: static}.ledger-list{padding-top: 6px}}@media (min-width: 1100px){.rows .li{grid-template-columns: 11rem minmax(0,1fr) auto;column-gap: 28px;grid-template-areas: "t d st";align-items: start}.rows .li .t{grid-area: t}.rows .li .d{grid-area: d}.rows .li .st{grid-area: st;justify-self: start;padding-top: 4px}}.join{gap: 36px}.lattice-fig{display: grid;gap: 14px;justify-items: center;align-content: center}.batch-note{justify-self: center;max-width: 340px;text-align: center}@media (min-width: 900px){.join{grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);gap: 44px 56px}.join-next{grid-column: 1 / -1;position: static}.join-next .next-steps{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 32px;max-width: none;padding-left: 0;list-style: none;counter-reset: s}.join-next .next-steps li{padding-top: 12px;border-top: 1.5px solid var(--ink);counter-increment: s}.join-next .next-steps li::before{content: counter(s);display: block;font: 500 var(--t-md)/1 var(--font-display);color: var(--ink);margin-bottom: 8px}}.lattice{padding: 10px;gap: 6px;width: 360px;margin: -34px 0;background: var(--grain),var(--tray-fill);box-shadow: inset 0 0 0 1px var(--edge)}.lattice i{outline: 0;background: var(--ground);box-shadow: inset 0 1px 0 rgba(var(--shadow),.18),inset 0 0 0 1px var(--edge)}@media (min-width: 600px) and (max-width: 899px){.lattice{width: 300px;margin: -28px 0}}@media (max-width: 599px){.lattice{width: 250px;margin: -24px 0}}.vface{display: none;position: relative;width: 88px;height: 88px;--s: 88px}.vface .face{position: absolute;inset: 0;opacity: 1 !important;transform: none !important;backface-visibility: visible;-webkit-backface-visibility: visible}.vface .ui{font-size: calc(var(--s) / 15)}.vface .lid-star{position: absolute;inset: 15%;background: url("../cube/star-lid.svg") center / contain no-repeat;opacity: 1 !important}@media (max-width: 599px){.view-list li{grid-template-columns: 88px minmax(0,1fr);grid-template-areas: "face text" "face go";gap: 0 14px;align-items: center;padding: 12px 0}.view-list li .thumb-link,.view-list li:first-child .thumb-link{grid-area: face;display: block;width: 88px}.view-list li .thumb.crop{display: none}.view-list li .vface{display: block}.view-list li .view-text{grid-area: text}.view-list li .view-text p{display: none}.view-list li .view-go{grid-area: go;min-height: 44px}}.cost{padding-top: 56px !important}@media (min-width: 900px){.cost{padding-top: 104px !important}.compare-body{grid-template-columns: 1fr 1fr;column-gap: 48px}.compare-body > p:first-child,.compare-body .table-wrap,.compare-body .notes{grid-column: 1 / -1}}.door-note a{display: inline;padding: 12px 0}@media (min-width: 900px) and (prefers-reduced-motion: no-preference){.net .c-lid .nm,.net .c-lid .st{opacity: calc(1 - var(--k))}}@media (min-width: 900px){main > section:not(.hero){padding-top: 96px;padding-bottom: 96px}.cost{padding-top: 96px !important}}@media (min-width: 900px) and (prefers-reduced-motion: no-preference){.net-grid{transform: rotateX(calc(-22deg * var(--k))) rotateY(calc(34deg * var(--k))) scale(calc(1 + .4 * var(--k)));transform-origin: 50% 40%}.net.closed .cell.lit .face,.net.closed .cell:hover .face{box-shadow: inset 0 1px 0 #FFFFFF,inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(var(--shadow),.2),inset 0 0 0 1px var(--edge)}}.lattice{transform-style: preserve-3d;position: relative}.lattice::after{content: "";position: absolute;inset: 0;background: var(--porcelain-2);box-shadow: inset 0 0 0 1px var(--edge);transform: translateZ(-16px)}:root[data-theme="dark"] .lattice::after{background: var(--ground)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lattice::after{background: var(--ground)}}.hero .cta-row .btn-biz{order: 1}.hero .cta-row .btn-demo{order: 2}.hero .cta-row [data-intro-open]{order: 3}@media (max-width: 599px){.hero{grid-template-areas: "title title" "stage stage" "ledeshort ledeshort" "free free" "apply apply" "applybiz demo" "intro intro" "biz biz" "lede lede"}.hero .cta-row .btn-biz{grid-area: applybiz;margin-top: 10px;position: relative;z-index: 2}}.page-plain{max-width: 640px;margin: 0 auto;padding: 48px 16px 80px;display: grid;gap: 18px}.page-plain h1{font: 500 var(--t-xl)/1.06 var(--font-display);letter-spacing: -0.02em}.page-plain p,.page-plain li{color: var(--ink-2);max-width: 30em}.page-plain ul{margin: 0;padding-left: 1.2em;display: grid;gap: 8px}.page-plain .btn{justify-self: start}.faq details p a{display: inline-block;padding: 12px 0;margin: -12px 0}@media (max-width: 599px){:root{--s: 172px}.hero .stage{height: 320px}}@media (max-width: 599px){:root{--s: 164px}.hero .stage{height: 304px}}@media (min-width: 900px) and (prefers-reduced-motion: no-preference){.net-grid{transform: translateX(calc(var(--cell) * .55 * var(--k))) rotateX(calc(-22deg * var(--k))) rotateY(calc(34deg * var(--k))) scale3d(calc(1 + .3 * var(--k)),calc(1 + .3 * var(--k)),calc(1 + .3 * var(--k)));transform-origin: 50% 40%}.net .cell .nm,.net .cell .st{opacity: calc(1 - var(--k))}}@media (min-width: 900px) and (max-width: 1099px) and (prefers-reduced-motion: no-preference){.net-grid{transform: translateX(calc(var(--cell) * .7 * var(--k))) rotateX(calc(-22deg * var(--k))) rotateY(calc(34deg * var(--k))) scale3d(calc(1 + .15 * var(--k)),calc(1 + .15 * var(--k)),calc(1 + .15 * var(--k)))}}@media (max-width: 360px){.lattice{width: 196px;margin: -18px 0}}.foot-links a{padding: 0 4px;margin: 0 -4px}@media (max-width: 360px){.hero .slots{gap: 2px 6px}.hero .slots li{gap: 4px}}.lattice{background: var(--glaze),var(--grain),var(--porcelain);box-shadow: none}.lattice::before,.lattice::after{content: "";position: absolute;background: var(--porcelain-2);transform: none;inset: auto;box-shadow: none}.lattice::before{left: 0;right: 0;top: 100%;height: 14px;transform-origin: 50% 0;transform: rotateX(-90deg);background: linear-gradient(rgba(var(--shadow),.10),rgba(var(--shadow),.10)),var(--porcelain-2)}.lattice::after{top: 0;bottom: 0;left: 100%;width: 14px;transform-origin: 0 50%;transform: rotateY(90deg);background: linear-gradient(rgba(var(--shadow),.22),rgba(var(--shadow),.22)),var(--porcelain-2)}.lattice i{background: var(--porcelain-2);box-shadow: inset 2px 2px 3px rgba(var(--shadow),.22),inset -1px -1px 0 rgba(255,255,255,.8)}.lattice-fig{position: relative}.lattice-fig::before{content: "";position: absolute;left: 50%;top: 50%;width: min(100%,460px);height: 26%;transform: translate(-50%,10%);border-radius: 50%;background: radial-gradient(closest-side,rgba(var(--shadow),.34),rgba(var(--shadow),.14) 55%,rgba(var(--shadow),0));pointer-events: none}:root[data-theme="dark"] .lattice::after,:root[data-theme="dark"] .lattice::before{background: var(--porcelain-2)}@media (min-width: 1100px){.lattice{width: 420px;margin: -40px 0}}@media (min-width: 900px) and (max-width: 1099px){.lattice{width: 280px;margin: -28px 0}}@media (min-width: 900px) and (prefers-reduced-motion: no-preference){.net .cell .nm,.net .cell .st{opacity: clamp(0,calc(1 - var(--k) * 4),1)}.net.closed .face,.net.closed .cell.lit .face,.net.closed .cell:hover .face{box-shadow: inset 0 1px 0 #FFFFFF,inset 0 -2px 0 rgba(var(--shadow),.2)}.net{position: relative}.net::after{content: "";position: absolute;left: 50%;top: 68%;width: 60%;height: 12%;transform: translate(-30%,0);border-radius: 50%;background: radial-gradient(closest-side,rgba(var(--shadow),.40),rgba(var(--shadow),.16) 55%,rgba(var(--shadow),0));opacity: var(--k);pointer-events: none;z-index: -1}}@media (min-width: 900px){.view-list{grid-template-columns: 7fr 5fr;grid-template-rows: auto auto;gap: 0 40px}.view-list li:first-child{grid-row: 1 / span 2;grid-template-columns: minmax(0,1fr);grid-template-rows: auto auto 1fr auto}.view-list li:first-child .thumb.crop{width: 100%;height: 360px}.view-list li:first-child .thumb.crop .thumb-in{zoom: 1.15}.view-list li:not(:first-child){grid-template-columns: 88px minmax(0,1fr);grid-template-areas: "face text" "face go";gap: 0 16px;align-items: center;padding: 18px 0;border-bottom: 1px solid var(--rule)}.view-list li:not(:first-child) .thumb-link{grid-area: face;width: 88px}.view-list li:not(:first-child) .thumb.crop{display: none}.view-list li:not(:first-child) .vface{display: block}.view-list li:not(:first-child) .view-text{grid-area: text}.view-list li:not(:first-child) .view-text p{display: none}.view-list li:not(:first-child) .view-go{grid-area: go}.view-list li:nth-child(2){align-self: end}.view-list li:nth-child(3){align-self: start}}.door-pair{grid-template-columns: minmax(0,1fr) !important}.path[open],.door-pair:has(> .path[open]) > .path{grid-column: auto}.path > summary{grid-template-columns: minmax(0,1fr) auto 44px;grid-template-areas: "t p plus" "s p plus";column-gap: 20px;align-items: center;min-height: 0;padding: 18px 22px}.path > summary .door-p{grid-area: p;font: 500 var(--t-xl)/1 var(--font-display);letter-spacing: -0.02em;color: var(--door-ink);white-space: nowrap}.path > summary::after{grid-area: plus;justify-self: end;align-self: center}@media (max-width: 599px){.path > summary{grid-template-columns: minmax(0,1fr) 44px;grid-template-areas: "t plus" "s plus" "p plus"}.path > summary .door-p{margin-top: 6px;font-size: var(--t-lg)}}.door-pair:has(> .path[open]) > .path:not([open]) > summary{padding: 18px 22px}.table-wrap{border-radius: 0}@media (min-width: 900px){.inside{padding-bottom: 48px !important}.cost{padding-top: 160px !important;padding-bottom: 40px !important}.join{padding-top: 48px !important}.hero .cta-row [data-intro-open]{border-color: transparent;padding-left: 4px;padding-right: 8px;color: var(--ink-2)}.hero .cta-row [data-intro-open]:hover{color: var(--ink);text-decoration: underline;text-underline-offset: 4px}}.faq-more{margin-top: 10px}.faq-more > summary{border-color: var(--ink-3)}.faq-more[open] > summary{margin-bottom: 0}.faq-more details{margin-left: 0}.foot-cube i{background-image: url("cube-solid.svg");height: 80px}@media (min-width: 900px){.foot-cube i{width: 96px;height: 106px}}.school-list{list-style: none;margin: 28px 0 0;padding: 0;border-top: 1.5px solid var(--ink);max-width: 46em}.school-list li{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 4px 16px;padding: 14px 0;border-bottom: 1px solid var(--rule);color: var(--ink-2)}.school-list li b{color: var(--ink);font-weight: 600;grid-column: 1}.school-list li .d{grid-column: 1}.school-list li .st{grid-column: 2;grid-row: 1 / span 2;align-self: start;padding-top: 4px}.school-note{margin-top: 18px;color: var(--ink-2);max-width: 30em}@media (min-width: 900px){.school{padding-top: 96px !important}.cost{padding-top: 96px !important}}.school-cta{margin-top: 22px}@media (min-width: 900px){.cost{padding-top: 120px !important}.view-list li:not(:first-child) .view-text p{display: block;font-size: var(--t-sm);margin-top: 2px}.view-list li:not(:first-child){grid-template-areas: "face text" "face go";padding: 16px 0}.view-list li:first-child .thumb.crop{height: 330px}}@media (min-width: 600px) and (max-width: 1099px){.hero{grid-template-areas: "title" "stage" "lede" "free" "cta" "biz"}.hero .stage{height: 440px}.hero .lede{margin-top: 56px}}@media (min-width: 900px){.view-list li:not(:first-child){grid-template-columns: 112px minmax(0,1fr);align-self: stretch;align-content: center;padding: 22px 0}.view-list li:not(:first-child) .thumb-link,.view-list li:not(:first-child) .vface{width: 112px;height: 112px;--s: 112px}.view-list li:nth-child(2){border-top: 1.5px solid var(--ink)}}.foot .credit a{font-weight: 600}.foot .credit{white-space: nowrap}@media (max-width: 599px){.foot .credit{white-space: normal}}@media (min-width: 900px){.path[open] > summary{grid-template-areas: "t p plus" "s p plus"}.school{display: grid;grid-template-columns: minmax(0,1fr) 300px;column-gap: 56px;align-items: center}.school > *{grid-column: 1}.school .school-face{display: block;grid-column: 2;grid-row: 1 / span 5;align-self: center;justify-self: center;width: 280px;height: 280px;--s: 280px}.school .school-face .face{box-shadow: 0 18px 30px -18px rgba(var(--shadow),.45),inset 0 0 0 1px var(--edge)}}@media (min-width: 1100px){.lattice{width: 380px;margin: -36px 0}}:root{--door-ink: var(--ink);--door-ink-2: var(--ink-2);--coming: var(--ink-3);--face-ink-2: #4E5C53}.key{margin: 0;display: grid;gap: 6px;max-width: 30em}.key div{display: grid;grid-template-columns: 7.75rem minmax(0,1fr);gap: 0 12px;align-items: baseline;font-size: var(--t-sm);color: var(--ink-2)}.key dt,.key dd{margin: 0}.key .st{white-space: nowrap}.ledger-side{display: grid;gap: 22px}@media (max-width: 899px){.ledger-side .net{margin-top: 10px}}.ledger .col-title{font: 500 var(--t-md)/1.3 var(--font-display);color: var(--ink);letter-spacing: -0.01em;padding-bottom: 10px}@media (min-width: 900px){.view-list{grid-template-rows: 1fr 1fr}.view-list li:not(:first-child){align-self: stretch;align-content: center}}.school-side,.school-main{display: grid;align-content: start;gap: 0;min-width: 0}@media (min-width: 900px){.school{grid-template-columns: 428px minmax(0,1fr);column-gap: 40px;align-items: start}.school > *{grid-column: auto}.school .school-side{grid-column: 1}.school .school-main{grid-column: 2}.school .school-face{grid-column: auto;grid-row: auto;justify-self: start;align-self: start;margin-top: 32px;width: 280px;height: 280px;--s: 280px}.school .school-list{margin-top: 6px}}@media (min-width: 1100px){.school{grid-template-columns: 540px minmax(0,1fr);column-gap: 64px}}.faq-who{color: var(--ink-2);max-width: 30em}.faq-head p{max-width: 30em}@media (min-width: 768px){.theater{--cube-y: 50%}}.foot > p{max-width: 64ch}.compare sup{font-size: var(--t-xs);line-height: 0;vertical-align: super;margin-left: .12em}@media (max-width: 767px){.jump{flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch}.jump::-webkit-scrollbar{display: none}.jump a{flex: none}}@media (min-width: 1100px){.hero .lede{max-width: 46ch}}.try-meet{margin: 22px 0 8px;padding: 18px 20px;border: 1.5px solid var(--rule);border-radius: 16px;background: var(--surface);display: grid;gap: 12px}.try-meet-h{margin: 0;color: var(--ink);max-width: 46ch}.try-meet-note{margin: 0;font-size: var(--t-sm);color: var(--ink-2);max-width: 46ch}.try-meet .btn{justify-self: start}@media (max-width: 599px){.try-meet .btn{justify-self: stretch}}.hero .review-line{display: block;margin: 0 0 8px;color: var(--ink-2);max-width: 44ch}.who{max-width: 1240px;margin: 8px auto 0;padding: 14px 24px}.who p{margin: 0;font-size: var(--t-sm);color: var(--ink-2);max-width: 70ch;border-top: 1px solid var(--rule);padding-top: 14px}.man-zone{max-width: 1240px;margin: 40px auto 0;padding: 0 24px;display: grid;gap: 10px;justify-items: center}.man-label{margin: 0;font-size: var(--t-sm);color: var(--ink-2);text-align: center;max-width: 60ch}.man-slot{min-height: 50px;width: 100%;display: flex;justify-content: center}.man-slot iframe{border: 0;display: block;max-width: 100%}@media (min-width: 760px){.man-slot{min-height: 90px}}.bundle{list-style: none;margin: 16px 0 0;padding: 0;display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 4px 16px;font-size: var(--t-xs);color: var(--ink-2);max-width: 560px}.bundle li{display: grid;grid-template-columns: 18px minmax(0,1fr);column-gap: 7px;align-items: start;min-height: 24px;min-width: 0}.bundle li .mark{margin-top: 3px}.bundle li .bl{line-height: 1.5}.bundle li b{font-weight: 500;color: var(--ink);margin-right: 6px}.bundle .mark{width: 18px;height: 18px;flex: none;margin: 0;border-radius: 0;background: none;vertical-align: 0}.bundle img.mark[src$="ummah-email.svg"]{background: none}.bundle .mark-dot{display: inline-block;box-sizing: border-box;width: 18px;height: 18px;background: radial-gradient(circle,var(--ink-3) 0 3.5px,transparent 4px)}.bundle .st{font-size: var(--t-xs);flex: none}.bundle:focus-visible{outline: 3px solid var(--focus);outline-offset: 4px;border-radius: 6px}.hero .proof{margin-top: 12px;font-size: var(--t-sm);line-height: 1.4;color: var(--ink);font-weight: 600;max-width: 44ch}.hero .meet-wrap{display: grid;gap: 4px;justify-items: start;flex: 0 1 auto;min-width: 0}.hero .meet-note{margin: 0;font-size: var(--t-xs);line-height: 1.3;color: var(--ink-2);padding-left: 2px;width: 0;min-width: 100%}.hero .quiet{margin-top: 6px;font-size: var(--t-sm);display: flex;flex-wrap: wrap;gap: 0 22px;align-items: center;max-width: none}.hero .biz-text,.hero .link-btn{display: inline-flex;align-items: center;gap: 6px;min-height: 44px;padding: 0;margin: 0;border: 0;background: none;font: 600 var(--t-sm)/1.2 var(--font-ui);color: var(--action);text-decoration: underline;text-underline-offset: 3px;cursor: pointer}.hero .biz-text:hover,.hero .link-btn:hover{color: var(--action-hover)}.hero .link-btn svg{width: 12px;height: 12px;fill: currentColor}.hero .link-btn[hidden]{display: none}.hero .places-line{margin-top: 14px;font-size: var(--t-sm);line-height: 1.4;color: var(--ink-2);max-width: 44ch}.hero .free,.hero .biz-line{display: none}@media (max-width: 599px){.hero .lede-short{margin-top: 12px}.hero .bundle{grid-area: bundle;grid-column: 1 / -1;margin-top: 12px;gap: 2px 12px}.hero .cta-row .btn-primary{grid-area: apply;grid-column: 1 / -1;margin-top: 12px}.hero .cta-row .meet-wrap{grid-area: meet;grid-column: 1 / -1;margin-top: 8px;position: relative;z-index: 2;justify-items: stretch}.hero .meet-note{text-align: center}.hero .proof{grid-area: proof;grid-column: 1 / -1;margin-top: 10px}.hero .quiet{grid-area: quiet;grid-column: 1 / -1;margin-top: -2px}.hero .places-line{grid-area: places;grid-column: 1 / -1}.hero-stage-wrap{margin-top: 10px}}@media (min-width: 600px) and (max-width: 1099px){.hero .bundle{grid-area: bundle}.hero .proof{grid-area: proof}.hero .quiet{grid-area: quiet}.hero .places-line{grid-area: places}.hero .cta-row{align-items: flex-start}.hero .cta-row .btn{flex: 0 1 auto}}@media (min-width: 1100px){.hero .lede{margin-top: 18px}.hero .cta-row{margin-top: 18px;align-items: flex-start;max-width: none}.hero .cta-row .btn{flex: 0 1 auto;padding: 0 16px}.hero .pv{margin-top: 16px}.hero .hero-stage-wrap .slots{display: none}}html{overflow-x: clip}.foryou{max-width: 1180px;margin: 0 auto;padding: 40px 16px 8px}.foryou .sec-head{margin-bottom: 14px}.fy-rows{list-style: none;margin: 0 0 20px;padding: 0;max-width: 46rem;border-top: 1px solid var(--rule)}.fy-rows li{display: grid;grid-template-columns: 28px minmax(0,1fr) auto;column-gap: 14px;align-items: start;padding: 14px 0;border-bottom: 1px solid var(--rule)}.fy-rows .mark{width: 28px;height: 28px;margin-top: 2px;background: none;border-radius: 0}.fy-t{display: grid;gap: 2px;min-width: 0}.fy-t b{font: 500 var(--t-md)/1.3 var(--font-display);color: var(--ink)}.fy-t span{font-size: var(--t-sm);line-height: 1.45;color: var(--ink-2);max-width: 36em}.fy-rows .st{padding-top: 6px}@media (max-width: 480px){.fy-rows li{grid-template-columns: 28px minmax(0,1fr)}.fy-rows .st{grid-column: 2;padding-top: 4px}}.sr{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0}@media (max-width: 599px){.path > summary .door-p{white-space: normal}.path > summary .door-p .door-amt{display: block;margin-top: 4px;font-size: var(--t-md)}}.key-inline{margin: 0 0 14px;font-size: var(--t-sm);line-height: 1.5;color: var(--ink-2);max-width: 60ch}.views-lite .sec-head .cta-row{margin-top: 16px}@media (max-width: 599px){main > section:not(.hero),.foot{padding-top: 32px !important;padding-bottom: 32px !important}.jump{display: none}.school-side .vface,.school-side .school-face{display: none}}@media (max-width: 599px){.ledger-side .key{display: none}.lattice{display: none}}.bundle .bundle-key{grid-column: 1 / -1;display: block;min-height: 0;font-size: var(--t-sm);line-height: 1.5;color: var(--ink-2);margin-bottom: 4px}@media (max-width: 599px){.bundle{grid-template-columns: minmax(0,1fr) !important}}.doors .sites{display: flex;flex-wrap: wrap;gap: 0 18px}.st.early{color: var(--partial)}.st.early::before{border-radius: 50%;background: currentColor}.masjid-pointer-on{outline: 2px solid currentColor;outline-offset: 4px;border-radius: 4px}.hero .suite{list-style: none;margin: 18px 0 0;padding: 14px 0 0;border-top: 1.5px solid var(--ink);display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 9px 14px;font-size: var(--t-sm);color: var(--ink);max-width: 46ch}.hero .suite li{display: grid;grid-template-columns: 22px minmax(0,1fr);column-gap: 9px;align-items: center;min-height: 26px;min-width: 0}.hero .suite .mark,.hero .suite svg{width: 20px;height: 20px;display: block;margin: 0;border-radius: 0;background: none}.hero .suite svg{fill: none;stroke: var(--ink);stroke-width: 1.6;stroke-linecap: round;stroke-linejoin: round}.hero .suite .n{display: flex;flex-wrap: wrap;align-items: center;gap: 4px 8px;line-height: 1.3;min-width: 0}.hero .suite .n b{font-weight: 500}.hero .suite .st{font-size: var(--t-xs);flex: none}.hero .suite-more{margin-top: 10px;font-size: var(--t-sm)}.hero .suite-more a{color: var(--action);text-underline-offset: 3px;display: inline-flex;align-items: center;min-height: 44px}.hero .replace{margin-top: 10px;font-size: var(--t-sm);line-height: 1.5;color: var(--ink-2);max-width: 46ch}.hero .replace b{color: var(--ink);font-weight: 600}.hero .meet-note{font-size: var(--t-sm)}.hero .doors{margin-top: 4px;display: flex;flex-wrap: wrap;gap: 0 16px;font-size: var(--t-sm);max-width: 46ch}.hero .doors a{color: var(--action);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1.5px;padding: 10px 0;display: inline-flex;align-items: center;font-weight: 500}.hero .doors a:hover{color: var(--action-hover)}.hero .proof-note{margin-top: 10px;font-size: var(--t-sm);line-height: 1.4;color: var(--ink-2);max-width: 46ch}.hero .proof-note b{color: var(--ink);font-weight: 600}@media (max-width: 599px){.hero .suite{gap: 8px 10px}.hero .suite .st{padding: 3px 7px}}.hero.hero-v3 .hero-copy{display: contents}.hero.hero-v3 h1{grid-area: title}.hero.hero-v3 .lede{grid-area: lede}.hero.hero-v3 .hero-shot{grid-area: stage;margin-bottom: 0}.hero.hero-v3 .hero-stage-wrap{grid-area: cube}.hero.hero-v3 .cta-row{grid-area: cta;display: flex;flex-direction: column;gap: 10px;margin-top: 14px}.hero.hero-v3 .cta-row .btn{width: 100%}.hero.hero-v3 .proof-note{grid-area: note}.hero.hero-v3 .doors{grid-area: doors}.hero.hero-v3 .suite-wrap{grid-area: suite;margin-top: 18px}.hero.hero-v3 .replace{grid-area: replace}.hero.hero-v3 .proof{grid-area: proof}.hero.hero-v3 .pv{display: contents}.hero.hero-v3 .pv-field{grid-area: field}.hero.hero-v3 .pv-kind{grid-area: kind}.hero.hero-v3 .places-line{grid-area: places}.hero.hero-v3 .suite-h{margin: 0;font: 600 var(--t-sm)/1.3 var(--font-ui);color: var(--ink);padding-bottom: 8px;border-bottom: 1.5px solid var(--ink);max-width: 46ch}.hero.hero-v3 .suite{border-top: 0;padding-top: 12px}.hero.hero-v3 .suite small{font-size: var(--t-xs);color: var(--ink-3)}.hero.hero-v3 .lede{max-width: 46ch}@media (max-width: 1099px){.hero.hero-v3{grid-template-columns: minmax(0,1fr);grid-template-areas: "title" "lede" "stage" "cta" "note" "doors" "suite" "replace" "proof" "cube" "field" "kind" "slots" "places"}.hero.hero-v3 .hero-stage-wrap{margin-top: 28px}.hero.hero-v3 .hero-shot{margin-top: 18px}}@media (min-width: 600px) and (max-width: 1099px){.hero.hero-v3 .cta-row{flex-direction: row}.hero.hero-v3 .cta-row .btn{width: auto}}@media (min-width: 1100px){.hero.hero-v3{grid-template-columns: minmax(0,11fr) minmax(0,13fr);grid-template-rows: auto 1fr;grid-template-areas: "copy stage" "copy cube";align-items: start}.hero.hero-v3 .hero-stage-wrap{margin-top: 24px;align-self: start}.hero.hero-v3 .hero-copy{display: block;grid-area: copy}.hero.hero-v3 .cta-row{flex-direction: row;flex-wrap: wrap;margin-top: 22px}.hero.hero-v3 .cta-row .btn{width: auto}}.hero.hero-v3 .cta-row{display: grid;grid-template-columns: minmax(0,1fr);gap: 10px;margin-top: 16px;align-items: stretch;justify-items: stretch;max-width: 46ch}.hero.hero-v3 .cta-row .btn{grid-area: auto;grid-column: auto;grid-row: auto;order: 0;flex: none;width: auto;min-width: 0;height: auto;min-height: 52px;margin: 0;padding: 0 16px;position: static}@media (min-width: 600px){.hero.hero-v3 .cta-row{grid-template-columns: auto auto;justify-content: start;max-width: none}}.hero.hero-v3 h1{line-height: 1.05}.hero.hero-v3 .suite .n{display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: center;column-gap: 8px}.hero.hero-v3 .suite .n small{grid-column: 1 / -1}@media (min-width: 1100px){.hero.hero-v3 .doors{max-width: none;gap: 0 18px}.hero.hero-v3 .suite-h,.hero.hero-v3 .suite,.hero.hero-v3 .replace,.hero.hero-v3 .lede,.hero.hero-v3 .proof-note{max-width: 48ch}}@media (max-width: 599px){.hero.hero-v3 .suite{grid-template-columns: minmax(0,1fr);gap: 6px}.hero.hero-v3 .suite .n small{grid-column: 2;grid-row: 1;justify-self: end}}.hero.hero-v3 .proof-note b{font-weight: 600;color: var(--ink)}.hero.hero-v3 .proof-note,.hero.hero-v3 .doors{border: 0;box-shadow: none}@media (min-width: 1100px){.hero.hero-v3 .suite-h{max-width: 46ch}}.pv{display: grid;gap: 8px;max-width: 520px;margin-top: 18px;position: relative;z-index: 2}.pv-field{display: contents}.pv-kind{order: 1}.pv-hint{order: 2}.pv-label{font-weight: 600;font-size: var(--t-base)}.pv-input,input.pv-input{width: 100%;font-family: var(--font-display)}.pv-kind{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 8px;margin: 0;padding: 0;border: 0;min-width: 0}.pv-kind legend{float: left;padding: 0;margin-right: 4px;font-size: var(--t-sm);color: var(--ink-2);line-height: 44px}.pv-chip{position: relative;display: inline-flex;cursor: pointer}.pv-chip input{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer}.pv-chip span{display: inline-flex;align-items: center;min-height: 44px;padding: 0 14px;border-radius: 12px;border: 1.5px solid var(--ink-3);font: 600 var(--t-sm)/1 var(--font-ui);color: var(--ink);transition: transform 140ms cubic-bezier(.2,.7,.2,1),border-color .18s ease,box-shadow .18s ease}.pv-chip input:checked + span{border-color: var(--ink);box-shadow: inset 0 0 0 1px var(--ink)}.pv-chip input:focus-visible + span{outline: 3px solid var(--focus);outline-offset: 3px}.pv-chip:active span{transform: scale(.97)}.pv-hint{margin: 0;font-size: var(--t-xs);line-height: 1.4;color: var(--ink-2);max-width: 46ch}@media (max-width: 599px){:root{--s: 142px}.hero .stage{height: 264px}.hero{grid-template-areas: "title title" "ledeshort ledeshort" "bundle bundle" "apply apply" "meet meet" "proof proof" "quiet quiet" "stage stage" "field field" "kind kind" "slots slots" "places places" "lede lede"}.pv-field .pv-hint{overflow-wrap: anywhere}.hero .cta-row .btn-biz,.hero .cta-row .btn-demo{margin-top: 10px}.hero[data-kind="business"] .cta-row .btn-primary{margin-top: 10px}.pv{display: contents}.pv-field{display: grid;gap: 5px;grid-area: field;grid-column: 1 / -1;margin-top: 8px}.pv-field .pv-hint{order: 1;line-height: 1.3}.pv-field .pv-input{order: 2;min-height: 44px;padding-top: 9px;padding-bottom: 9px}.pv-kind{grid-area: kind;grid-column: 1 / -1;margin-top: 8px;padding-right: 56px}.pv-kind legend{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}.pv-label{font-size: var(--t-sm)}.hero-stage-wrap{margin-top: 6px}.js .hero-stage-wrap .slots{display: none}.hero > .hero-copy > .slots,.hero > .slots{display: grid;grid-area: slots;grid-column: 1 / -1;margin-top: 14px;padding: 0;min-height: 0}.hero .stage-btn{top: auto;bottom: -52px;right: 0}.hero .lede-short{margin-top: 14px}.hero .free{margin-top: 6px}}@media (min-width: 600px) and (max-width: 1099px){.hero{grid-template-areas: "title" "lede" "bundle" "cta" "proof" "quiet" "stage" "field" "places"}.pv{grid-area: field}.hero .stage{height: min(360px,40vh)}}@media (min-width: 1100px){.pv{margin-top: 24px}.hero-copy{padding-top: 24px}}@media (max-width: 1099px){.hero .ui-page{gap: 2.5%;justify-content: space-between}}@media (min-width: 600px) and (max-width: 1099px){:root{--s: min(204px,22.5vh)}}.hero[data-kind="business"] .cta-row .btn-biz{order: -1;background: var(--action);color: var(--action-ink);border-color: transparent}.hero[data-kind="business"] .cta-row .btn-biz:hover{background: var(--action-hover)}.hero[data-kind="business"] .cta-row .btn-primary{background: transparent;color: var(--ink);border-color: var(--ink-3)}.hero[data-kind="business"] .cta-row .btn-primary:hover{background: transparent;border-color: var(--ink)}@media (max-width: 599px){.hero[data-kind="business"] .cta-row .btn-biz{grid-area: apply;margin-top: 10px}.hero[data-kind="business"] .cta-row .btn-primary{grid-area: applybiz}}.pv-on .ui-page .r1{flex-wrap: nowrap;align-items: flex-start}.pv-on .ui-page .r1 .star-sm{margin-top: .08em}.pv-on .ui-page .r1 b{flex: 1 1 0;min-width: 0;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 1.05}.pv-on .ui-page .url{max-width: 100%;display: flex;min-width: 0}.pv-on .ui-page .url .pv-slug{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.pv-on .ui-page .url .pv-suf{flex: none}@media (max-width: 599px){.pv-on .ui-page .r1 b{font-size: 1.3em}.pv-on .ui-meet .bar b .pv-n{font-size: 1.25em}.pv-on .ui-page .url,.pv-on .ui-mail .addr{font-size: 1.1em}.pv-long .ui-page .r1 b{font-size: 1.1em}.pv-long .ui-meet .bar b .pv-n{font-size: 1em}}.pv-on .ui-meet .bar{display: grid;grid-template-columns: minmax(0,1fr);justify-items: start;row-gap: .3em}.pv-on .ui-meet .bar .tag{order: 1;justify-self: end}.pv-on .ui-meet .bar b{order: 2;display: grid;min-width: 0;width: 100%;gap: .15em}.pv-on .ui-meet .bar b .pv-n{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .9em;line-height: 1.4}.pv-long .ui-page .r1 b{font-size: .86em}.pv-long .ui-meet .bar b .pv-n{font-size: .74em}.pv-on .ui-meet .bar b .pv-k{font: 500 .7em/1.1 var(--font-ui);letter-spacing: 0;color: var(--face-ink-2)}.pv-on .ui-mail .addr{overflow: hidden;overflow-wrap: anywhere;line-height: 1.15}.pv-on .ui-mail .addr{flex: none}@media (max-width: 599px){.pv-on .ui-mail{gap: 2.5%}}.pv-long .ui-mail .addr{font-size: .66em}.pv-new{display: inline-block}.theater-end{flex-wrap: wrap;row-gap: 12px}.pv-endname{flex: 1 1 100%;margin: 0;text-align: center;font-size: var(--t-sm);color: var(--ink-2)}.btn{transition: background-color .18s ease,color .18s ease,border-color .18s ease,transform 140ms cubic-bezier(.2,.7,.2,1)}.btn:active{transform: scale(.985)}.path > summary{transition: border-color .18s ease,transform 140ms cubic-bezier(.2,.7,.2,1)}.path > summary:active{transform: scale(.992)}@media (prefers-reduced-motion: reduce){.btn,.path > summary,.pv-chip span{transition: none}}@media (max-width: 374px){:root{--s: 116px}.hero .stage{height: 216px}.hero h1{font-size: clamp(1.9rem,7.6vw,5.4rem)}.pv-kind{margin-top: 6px}}.ui-page .r4{display: flex;align-items: center;gap: .5em;min-width: 0;white-space: nowrap}.ui-page .r4 .pill{flex: 0 1 auto;min-width: 0;overflow: hidden;text-overflow: ellipsis}.ui-page .r4 .tag-partial{flex: none;font-size: .7em}.pv-w{white-space: nowrap}.hero-shot{grid-area: shot;margin: 0;position: relative;z-index: 2;min-width: 0}.hero-shot .shot-frame{position: relative;border-radius: 16px;overflow: hidden;border: 1.5px solid var(--ink-3);background: #12241b;line-height: 0}.hero-shot picture,.hero-shot .shot-frame > picture > img{display: block;width: 100%;height: auto}.hero-shot .shot-mark{position: absolute;top: 8px;right: 8px;width: 44px;height: 44px;padding: 5px;box-sizing: border-box;border-radius: 10px;background: rgba(251,250,245,.94);box-shadow: 0 0 0 1px rgba(16,48,31,.25)}:root[data-theme="dark"] .hero-shot .shot-mark{background: #12241b;box-shadow: 0 0 0 1px rgba(255,255,255,.28)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-shot .shot-mark{background: #12241b;box-shadow: 0 0 0 1px rgba(255,255,255,.28)}}.hero-shot figcaption{margin-top: 6px;font-size: var(--t-xs);line-height: 1.4;color: var(--ink-2)}@media (max-width: 599px){.hero{grid-template-areas: "title title" "ledeshort ledeshort" "shot shot" "apply apply" "meet meet" "bundle bundle" "wfree wfree" "quiet quiet" "proof proof" "stage stage" "field field" "kind kind" "slots slots" "places places" "lede lede"}.hero-shot{margin-top: 12px}.hero .bundle{margin-top: 6px}.hero .cta-row .btn-primary{margin-top: 10px}}@media (min-width: 600px) and (max-width: 1099px){.hero{grid-template-areas: "title" "lede" "shot" "cta" "wfree" "quiet" "proof" "bundle" "stage" "field" "places"}.hero-shot{margin-top: 16px;max-width: 520px}}@media (min-width: 1100px){.hero{grid-template-areas: "copy shot" "copy stage";grid-template-rows: auto 1fr;align-items: start;min-height: 0}.hero-copy{grid-row: 1 / span 2}.hero-shot{margin-top: 24px}.hero .stage{height: 520px}}.hero .who-free{margin: 10px 0 0;font-size: var(--t-sm);line-height: 1.4;color: var(--ink-2);max-width: 46ch}.hero .quiet{margin-top: 2px}.hero .proof{margin-top: 8px}@media (max-width: 599px){.hero .lede{display: block;grid-area: ledeshort;grid-column: 1 / -1;margin-top: 12px;font-size: var(--t-sm);line-height: 1.35;max-width: none}.hero .who-free{grid-area: wfree;grid-column: 1 / -1;margin-top: 8px}.hero .quiet{margin-top: -4px}}@media (min-width: 600px) and (max-width: 1099px){.hero .who-free{grid-area: wfree}.hero .lede{margin-top: 12px}.hero h1{margin-bottom: 0}}.hero.stage-off .stage-btn{visibility: hidden}html.cv main > section:not(.hero):not(.cvw),html.cv main > .man-zone:not(.cvw),html.cv body > footer.foot:not(.cvw){content-visibility: auto;contain-intrinsic-size: auto 1100px}@media (min-width: 900px){html.cv main > section:not(.hero):not(.cvw),html.cv main > .man-zone:not(.cvw),html.cv body > footer.foot:not(.cvw){contain-intrinsic-size: auto 900px}}html.cvh main > section:not(.hero):not(.cvw),html.cvh main > .man-zone:not(.cvw),html.cvh body > footer.foot:not(.cvw){content-visibility: hidden}.mark{display: inline-block;width: 24px;height: 24px;flex: none;vertical-align: -6px;margin-right: 8px;border-radius: 6px}img.mark[src$="ummah-email.svg"]{background: #FAF8F3;border-radius: 50%}.rows .li .t .mark{margin-right: 10px}.net .nm .mark{width: 20px;height: 20px;vertical-align: -5px;margin-right: 6px;border-radius: 5px}.story{max-width: 1180px;margin: 0 auto;padding: 56px 16px}.story .sec-head{margin-bottom: 20px}.story [data-p="business"]{display: none}.story.p-business [data-p="business"]{display: revert}.story.p-business [data-p="masjid"]{display: none}.sface{display: block;position: relative;overflow: hidden;background: var(--ground-2);box-shadow: inset 0 0 0 1px var(--edge);aspect-ratio: 16 / 9;color: var(--face-ink,#10301F);text-decoration: none}.sface-in,.sface-clip picture,.sface-clip video{position: absolute;inset: 4px;background: var(--grain),var(--porcelain)}.sface-in{display: grid;place-items: center;padding: 18px}.sface-clip img,.sface-clip video{display: block;width: 100%;height: 100%;object-fit: cover}.sface-clip video{inset: 4px;width: calc(100% - 8px);height: calc(100% - 8px)}.sface-clip:focus-visible{outline: 3px solid var(--action);outline-offset: 3px}.bcap h3{margin: 2px 0 8px;font: 500 var(--t-lg,1.35rem)/1.2 var(--font-display);color: var(--ink);text-wrap: balance}.bcap p{margin: 0 0 10px;color: var(--ink-2);max-width: 30em}.bcap .bn{font: 600 var(--t-xs,.8rem)/1 var(--font-ui);color: var(--ink-3);margin-bottom: 6px}.bcap .bst{font-size: var(--t-sm,.92rem)}.bcap .bst .st{margin-right: 4px}.bcap .bst a:not(.btn){padding: 13px 0}.bcap a:not(.btn){color: var(--action);font-weight: 600;text-underline-offset: 3px;padding-block: 13px}.bapply{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 6px}.bapply a.btn{display: flex;align-items: center;justify-content: center;text-align: center}@media (max-width: 599px){.bapply a.btn{width: 100%}}.story .bapply [data-p="business"],.story.p-business .bapply [data-p="masjid"]{display: none}.story.p-business .bapply [data-p="business"]{display: flex}.bcap .nw{white-space: nowrap}.nm-card{width: min(100%,440px)}.nm-k{margin: 0 0 2px;font: 600 .78rem/1.2 var(--font-ui);color: var(--face-ink-2,#56695C)}.nm-name{margin: 0 0 12px;font: 500 clamp(1.15rem,3.2vw,1.6rem)/1.15 var(--font-display);color: var(--face-ink,#10301F);overflow-wrap: anywhere}.nm-rows{list-style: none;margin: 0;padding: 0;display: grid;gap: 8px}.nm-rows li{display: grid;grid-template-columns: 24px minmax(0,1fr);column-gap: 10px;align-items: center;padding: 8px 10px;background: var(--porcelain-2);box-shadow: inset 0 0 0 1px rgba(16,48,31,.14)}.nm-rows .mark{margin: 0;grid-row: span 2}.nm-rows .mark-page{fill: none;stroke: var(--face-ink,#10301F);stroke-width: 1.5;stroke-linejoin: round;stroke-linecap: round}.nm-l{font: 600 .74rem/1.2 var(--font-ui);color: var(--face-ink-2,#56695C)}.nm-rows b{font: 600 .9rem/1.25 var(--font-ui);color: var(--face-ink,#10301F);overflow-wrap: anywhere}.fw{list-style: none;margin: 0;padding: 0;width: min(100%,560px);display: grid;gap: 14px}.fw li{display: grid;grid-template-columns: minmax(0,1fr) minmax(56px,.8fr) minmax(0,1fr);align-items: center;column-gap: 10px;font: 600 .86rem/1.25 var(--font-ui)}.fw-a{color: var(--face-ink,#10301F);overflow-wrap: anywhere}.fw-d{color: var(--face-ink-2,#56695C);font-weight: 400}.fw-t{position: relative;height: 18px;container-type: inline-size;border-bottom: 1.5px dashed rgba(16,48,31,.35)}.env{position: absolute;left: 0;top: 0;width: 24px;height: 17px;background: var(--porcelain);border: 1.5px solid var(--face-ink,#10301F);box-sizing: border-box;transform: translateX(calc(var(--p,1) * (100cqw - 24px)))}.env::after{content: "";position: absolute;left: 3px;right: 3px;top: -3px;height: 9px;border: solid var(--face-ink,#10301F);border-width: 0 1.5px 1.5px 0;transform: rotate(45deg) scale(.7,.7);transform-origin: 50% 50%;width: 9px;margin: 0 auto}.taps{margin: 0;padding: 0;list-style: none;display: grid;gap: 10px;width: min(100%,420px);counter-reset: tap}.taps li{position: relative;padding: 12px 14px 12px 46px;background: var(--porcelain-2);box-shadow: inset 0 0 0 1px rgba(16,48,31,.14);font: 600 .92rem/1.3 var(--font-ui);counter-increment: tap}.taps li::before{content: counter(tap);position: absolute;left: 14px;top: 50%;translate: 0 -50%;font: 600 .8rem/1 var(--font-ui);color: var(--face-ink-2,#56695C)}.tap{position: absolute;right: 14px;top: 50%;width: 22px;height: 22px;margin-top: -11px;border-radius: 50%;background: var(--action-day,#166534)}.costcard{width: min(100%,420px)}.costcard .cc-h{font: 500 1.25rem/1.2 var(--font-display);margin: 0 0 8px}.costcard p{margin: 0;color: var(--face-ink-2,#56695C)}.real{display: grid;gap: 10px;justify-items: center;text-align: center}.real .real-n{margin: 0 0 8px;font-size: .9rem;color: var(--face-ink-2,#56695C)}.real .btn-quiet{color: var(--face-ink,#10301F);border-color: var(--face-ink,#10301F)}.views-real{margin-top: 18px;display: flex;flex-wrap: wrap;align-items: center;gap: 8px 14px}.views-real p{margin: 0;color: var(--ink-2)}.beats{list-style: none;margin: 0;padding: 0;display: grid;gap: 28px}@media (min-width: 900px){.beats{grid-template-columns: 1fr 1fr;gap: 36px 32px}}.beat .bcap{padding-top: 14px}html.js .story-stage{position: relative}html.js .beats{display: grid;grid-template-columns: minmax(0,1fr);gap: 0}html.js .beat{grid-area: 1 / 1;visibility: hidden}html.js .beat.on{visibility: visible}html.js .beat .sface-in,html.js .beat .sface-clip picture,html.js .beat .sface-clip video,html.js .beat .bcap{will-change: auto}@media (min-width: 900px){html.js .beat{display: grid;grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);column-gap: 36px;align-items: center}html.js .beat .bcap{padding-top: 0}}@media (max-width: 599px){.sface{aspect-ratio: 9 / 16;width: min(100%,calc(58svh * 9 / 16));margin-inline: auto}.sface-in{padding: 12px}.fw li{grid-template-columns: minmax(0,1fr);row-gap: 6px}.nm-rows b,.fw li{font-size: var(--t-xs)}html.js .beat .bcap{padding-top: 12px}}.story-ctl{display: flex;align-items: center;gap: 10px;margin-top: 18px}html:not(.js) .story-ctl,html:not(.js) .story-paths{display: none}.story-play{flex: none;width: 44px;height: 44px;display: grid;place-items: center;border: 1.5px solid var(--edge);background: var(--ground);color: var(--ink);cursor: pointer}.story-play svg{width: 18px;height: 18px;fill: currentColor}.story-play .i-play{display: none}.story-play[data-paused="true"] .i-play{display: inline}.story-play[data-paused="true"] .i-pause{display: none}.steps{display: grid;grid-template-columns: repeat(6,minmax(44px,1fr));gap: 6px;flex: 1}.step{position: relative;min-height: 44px;border: 0;background: transparent;color: var(--ink-3);font: 600 .875rem/1 var(--font-ui);cursor: pointer;padding: 0 0 8px;text-align: left}.step span{display: block;padding: 0 2px}.step i{position: absolute;left: 0;right: 0;bottom: 6px;height: 3px;background: var(--edge);opacity: .45}.step i::after{content: "";position: absolute;inset: 0;background: var(--action);transform-origin: 0 50%;transform: scaleX(var(--f,0))}.step.done i::after{--f: 1}.step[aria-current="step"]{color: var(--ink)}.step:focus-visible,.story-play:focus-visible,.story-path:focus-visible{outline: 3px solid var(--action);outline-offset: 2px}.story-paths{display: inline-flex;gap: 0;margin: 0 0 18px;box-shadow: inset 0 0 0 1.5px var(--edge)}.story-path{min-height: 44px;padding: 0 16px;border: 0;background: transparent;color: var(--ink-2);font: 600 var(--t-sm,.92rem)/1.2 var(--font-ui);cursor: pointer}.story-path[aria-pressed="true"]{background: var(--ink);color: var(--ground)}@media (max-width: 599px){.story-paths{display: flex}.story-path{flex: 1;padding: 0 10px}}.scap{position: absolute;left: 6%;right: 6%;bottom: 5%;height: 3.1em;margin: 0;display: flex;align-items: flex-end;justify-content: center;pointer-events: none;font: 600 clamp(.78rem,1.5vw,1rem)/1.45 var(--font-ui);text-align: center;opacity: 0}.scap span:not(:empty){background: #FBFAF5;color: #10301F;box-shadow: 0 0 0 1.5px #76857A;padding: 3px 10px 4px;-webkit-box-decoration-break: clone;box-decoration-break: clone}html.cv .hero-stage-wrap .ui:not(.ui-page):not(.uiw){content-visibility: hidden}html.cv .hero .scene:not(.scw){content-visibility: hidden}.hero .who-free{font-size: var(--t-base);font-weight: 600;line-height: 1.4;color: var(--ink);max-width: 46ch}@media (max-width: 599px){.hero .who-free .wf-biz{display: none}.hero{grid-template-areas: "title title" "ledeshort ledeshort" "shot shot" "apply apply" "wfree wfree" "meet meet" "bundle bundle" "quiet quiet" "proof proof" "stage stage" "field field" "kind kind" "slots slots" "places places" "lede lede"}.hero .who-free{grid-area: wfree;grid-column: 1 / -1;margin-top: 8px}.hero .cta-row .meet-wrap{margin-top: 10px}.status-fold{grid-area: bundle;grid-column: 1 / -1;margin-top: 10px}}.sf-btn{display: none}.bundle .bundle-key b{margin-right: 0}.bundle .bundle-key a{display: inline-flex;align-items: center;min-height: 44px;font-weight: 600;color: var(--action);text-decoration: underline;text-underline-offset: 3px}@media (max-width: 599px){html.js .sf-btn{display: flex;align-items: center;justify-content: space-between;gap: 12px;width: 100%;min-height: 48px;padding: 0 16px;border: 1.5px solid var(--ink-3);border-radius: 12px;background: transparent;color: var(--ink);font: 600 var(--t-sm)/1.2 var(--font-ui);text-align: left;cursor: pointer}html.js .sf-btn::after{content: "";width: 9px;height: 9px;border: solid currentColor;border-width: 0 2px 2px 0;transform: rotate(45deg) translate(-2px,-2px);transition: transform .15s;flex: none}html.js .status-fold.open .sf-btn::after{transform: rotate(225deg) translate(-2px,-2px)}html.js .sf-btn:focus-visible{outline: 3px solid var(--focus);outline-offset: 3px}html.js .status-fold:not(.open) .bundle{display: none}html.js .status-fold.open .bundle{margin-top: 10px}}@media (prefers-reduced-motion: reduce){.sf-btn::after{transition: none !important}}.hero-shot .shot-plate{--a-card: #FFFFFF;--a-ink: #0E1E16;--a-soft: #56665B;position: absolute;top: 10px;left: 10px;z-index: 1;display: flex;align-items: center;gap: 8px;max-width: calc(100% - 20px);padding: 8px 12px 8px 10px;border-radius: 10px;background: var(--a-card);box-shadow: 0 0 0 1px rgba(16,48,31,.25);line-height: 1.2}.hero-shot .shot-plate img{width: 20px;height: 20px;flex: none;display: block}.hero-shot .shot-plate .sp-t{display: grid;gap: 2px;min-width: 0}.hero-shot .shot-plate b{font: 600 14px/1.2 var(--font-ui);color: var(--a-ink)}.hero-shot .shot-plate small{font: 400 12px/1.2 var(--font-ui);color: var(--a-soft)}@media (min-width: 1100px){.hero-shot .shot-plate b{font-size: 16px}.hero-shot .shot-plate small{font-size: 13px}.hero-shot .shot-plate{top: 14px;left: 14px;gap: 10px}.hero-shot .shot-plate img{width: 20px;height: 20px}}.st{padding: 2px 10px;border-radius: 999px;border: 1.5px solid currentColor;line-height: 1.5}.st::before{width: 7px;height: 7px;border-radius: 50%;border: 0;background: currentColor}.st.partial::before{background: linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow: inset 0 0 0 1.5px currentColor}.st.live{color: #0F4A26;background: #E8F2EA}.st.partial{color: #7A5010;background: #F7EBD2}.st.coming{color: #4A4A4A;background: #EFEFEC;border-color: #6B6B6B}:root[data-theme="dark"] .st.live{color: #9FDCAF;background: rgba(22,101,52,.28)}:root[data-theme="dark"] .st.partial{color: #E8C57A;background: rgba(200,145,46,.2)}:root[data-theme="dark"] .st.coming{color: #D8D8D2;background: rgba(255,255,255,.07);border-color: #8A8A80}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .st.live{color: #9FDCAF;background: rgba(22,101,52,.28)}:root:not([data-theme="light"]) .st.partial{color: #E8C57A;background: rgba(200,145,46,.2)}:root:not([data-theme="light"]) .st.coming{color: #D8D8D2;background: rgba(255,255,255,.07);border-color: #8A8A80}}.net .st.live,.story .sface .st.live{color: #0F4A26;background: #E8F2EA}.net .st.partial,.story .sface .st.partial{color: #7A5010;background: #F7EBD2}.ledger-side .key{display: grid !important}.foot-cube i{background-image: url("../cube/mark.svg");width: 72px;height: 72px}@media (min-width: 900px){.foot-cube i{width: 96px;height: 96px}}.nm-l{font-size: var(--t-xs)}.net .face > img.face-img{position: absolute;inset: 0;width: 100%;height: 100%;display: block;object-fit: cover}.net .face > picture{position: absolute;inset: 0;display: block}.net .face > picture > img.face-img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover}.vface .face > img.face-img{position: absolute;inset: 0;width: 100%;height: 100%;display: block;object-fit: cover}.key div{grid-template-columns: 11.5rem minmax(0,1fr)}@media (max-width: 420px){.key div{grid-template-columns: 10.5rem minmax(0,1fr);gap: 0 8px}}.bundle .st{padding: 0 8px;line-height: 1.55}html.js:not(.story-js) .beat[data-beat="1"]{visibility: visible}html.cvh main > section.story:not(.cvw){content-visibility: auto;contain-intrinsic-size: auto 1100px}@media (min-width: 600px){.net .st{left: 6%;bottom: 4%;padding: 0 7px;font-size: var(--t-xs);line-height: 1.4;gap: 4px}.net .st::before{width: 6px;height: 6px}.net .nm{bottom: calc(4% + 24px)}}.net .cell .st.live,.story .sface .st.live{color: #0F4A26;background: #E8F2EA}.net .cell .st.partial,.story .sface .st.partial{color: #7A5010;background: #F7EBD2}.net .cell .st.coming{color: #4A4A4A;background: #EFEFEC;border-color: #6B6B6B}.st.early{color: #1C3A78;background: #E3EDFF}:root[data-theme="dark"] .st.early{color: #BBD0FF;background: rgba(120,160,255,.18)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .st.early{color: #BBD0FF;background: rgba(120,160,255,.18)}}.door-note{color: var(--ink-2);max-width: 30em}.join .cta-row{margin-top: 6px}.inside-cta{margin: 20px 0 34px}.faq-cta{margin-top: 28px}.foot-links a{font-weight: 600}.join-form [hidden],.apply-result[hidden]{display: none !important}.hp-field{position: absolute;left: -9999px;width: 1px;height: 1px;opacity: 0}.chk{display: flex;gap: 10px;align-items: flex-start;min-height: 44px;padding: 8px 0;font-weight: 400}.chk input{width: 22px;height: 22px;margin-top: 2px;flex: none}.apply-fail{color: #B4483F;font-weight: 600}:root[data-theme="dark"] .apply-fail{color: #F0A59B}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .apply-fail{color: #F0A59B}}.join-form input[type="url"],.join-form input[type="number"],.join-form input[type="tel"],.join-form select{font: 400 var(--t-base)/1.3 var(--font-ui);color: var(--ink);background: var(--surface);border: 1.5px solid var(--edge);border-radius: 12px;min-height: 50px;padding: 12px 14px;width: 100%}.join-form input[type="url"]:focus-visible,.join-form input[type="number"]:focus-visible,.join-form input[type="tel"]:focus-visible,.join-form select:focus-visible{border-color: var(--focus)}.join-form form .fld{max-width: 520px}html:not(.js) .join-form form,html:not(.js) .join-form .req-note{display: none}.foot .doors .sites a{min-width: 44px;justify-content: center}.foot .doors li > span > a{min-width: 44px;justify-content: center}.req-note a,.man-label a,main a[href^="mailto:"],main a[href$="ummahmediagroup.com/about"]{display: inline-block;min-width: 44px;padding: 13px 0;margin: -13px 0}.opt-fold .hint{display: block}.nojs-note{max-width: 36em;font-weight: 600}.nojs-note a{text-decoration: underline} /* ------------------------------------------------------------------ Nov 11 2026: first screen and the Also block that follows it. Contrast pairs, WCAG 2.1 relative luminance, computed: ink-2 #3A4A40 on ground #EEF1E9 = 8.24:1 ink-3 #5A6A5F on ground #EEF1E9 = 5.02:1 ink-2 #3A4A40 on surface #FBFAF5 = 9.00:1 ink-3 #5A6A5F on surface #FBFAF5 = 5.49:1 ink-3 #5A6A5F on ground-2 #E4E9DD = 4.64:1 forest #166534 on ground #EEF1E9 = 6.25:1 white #FFFFFF on forest #166534 = 7.13:1 action-ink #F8F9F4 on forest #166534 = 6.74:1 Every pair clears 4.5:1. No grey text sits on a dark green band. ------------------------------------------------------------------ */ .hero .cta-row .btn-primary { background: #166534; color: #FFFFFF; border-color: #166534; } .hero .cta-row .btn-primary:hover { background: #0F4A26; border-color: #0F4A26; } .also, main > section.also { max-width: 1320px; margin: 0 auto; padding: 0 16px 28px; display: grid; gap: 2px; } .also .doors { margin: 0; padding: 0; border: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: var(--t-base); color: var(--ink-2); max-width: 74ch; } .also .doors a, .also .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--action); font: 500 var(--t-base)/1.3 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .also .link-btn { gap: 6px; font-weight: 600; border: 0; background: none; cursor: pointer; } .also .doors a:hover, .also .link-btn:hover { color: var(--action-hover); } .also .link-btn svg { width: 12px; height: 12px; fill: currentColor; flex: none; } .also .link-btn[hidden] { display: none; } .also .lede-labels { margin: 0 0 4px; font-size: var(--t-base); color: var(--ink-2); max-width: 84ch; } @media (max-width: 599px) { .also { padding-bottom: 20px; } .also .doors { flex-direction: column; align-items: flex-start; gap: 0; } } /* r4096 (Tab, Nov 11 2026): phone menu under 768px (same 44px button pattern as ummah.city/organizations), no script. Shorter hero image on short phones so Apply is in the first screen. */ .top-menu{margin-left:auto;position:relative;border-bottom:0} .top-menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--rule);color:var(--ink);background:var(--surface);cursor:pointer} .top-menu>summary::-webkit-details-marker{display:none} .top-menu>summary svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none} .top-menu[open]>summary{background:var(--ground-2)} .top-menu-list{position:absolute;right:0;top:52px;z-index:30;display:flex;flex-direction:column;min-width:220px;padding:8px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)} .top-menu-list a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:var(--t-base)} .top-menu-list a:hover,.top-menu-list a:focus-visible{background:var(--ground-2)} .top-menu>summary{padding:0;margin:0;box-sizing:border-box;min-height:0;gap:0} .top-menu>summary::after,.top-menu[open]>summary::after{content:none;display:none} @media (max-width:767px){.top .theme-btn{margin-left:8px}} @media (min-width:768px){.top-menu{display:none}} @media (max-width:599px) and (max-height:700px){.hero.hero-v3 .hero-shot .shot-frame picture>img{height:200px;width:100%;object-fit:cover;object-position:center top}}