@charset "UTF-8";
:root { --paper: #faf8f2; --card: #fffefa; --ink: #203b30; --muted: #657168; --green: #3d6554; --line: #dedfd4; --serif: "Iowan Old Style", "Palatino Linotype", "Songti SC", "STSong", Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #b37b35; outline-offset: 5px; border-radius: 4px; }
img, svg { vertical-align: middle; flex-shrink: 0; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.035em; }
ul, ol { padding-left: 1.4em; }
[hidden] { display: none !important; }
.container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: white; }
.skip-link:focus { top: 15px; }
.preview-notice { padding: 8px 20px; background: #f2e4ca; color: #654d29; text-align: center; font-size: 12px; }
.site-header { position: sticky; top: 0; z-index: 30; background: #faf8f2f5; border-bottom: 1px solid #dedfd480; backdrop-filter: blur(12px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 650; letter-spacing: -.05em; white-space: nowrap; }
.brand img { border-radius: 11px; }
.desktop-nav, .header-actions { display: flex; align-items: center; gap: 26px; }
.desktop-nav a, .language-switch { font-size: 13px; font-weight: 550; }
.desktop-nav a:hover, .language-switch:hover { color: #8a6335; }
.header-web { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 600; }
.header-web:hover { border-color: var(--green); background: #e9eee5; }
.mobile-menu { display: none; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; font-weight: 650; letter-spacing: .07em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #3d655412; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 75px; padding-block: 83px 75px; }
.hero h1 { margin-top: 24px; font-family: var(--serif); font-size: clamp(46px, 5.2vw, 72px); font-weight: 550; line-height: 1.18; letter-spacing: -.045em; }
.hero h1 em { display: block; color: var(--green); font-style: normal; }
.hero-description { max-width: 485px; color: var(--muted); font-size: 16px; line-height: 1.95; margin-top: 27px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 49px; padding: 12px 23px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; }
.button.primary { color: #fffef5; background: var(--green); }
.button.primary:hover { background: #284c3c; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; margin-top: 18px; }
.hero-platforms > span { margin: 0 4px; }
.scroll-hint { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; margin-top: 56px; }
.hero-visual { position: relative; padding-bottom: 48px; min-width: 0; }
.schedule-preview { padding: 22px 24px 0; border: 1px solid #dce1d7; border-radius: 21px; background: var(--card); box-shadow: 0 27px 65px -25px #324c3435, 0 4px 12px #324c3406; transform: rotate(-2deg); }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.mini-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.mini-brand img { border-radius: 8px; }
.three-dots { letter-spacing: 2px; color: #90998c; }
.preview-month { display: flex; justify-content: space-between; align-items: center; }
.preview-month strong { font-size: 26px; letter-spacing: -.04em; }
.preview-month small { font-size: 15px; font-weight: 450; color: var(--muted); }
.preview-month svg { color: var(--green); }
.preview-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 20px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.preview-week > div { display: grid; justify-items: center; gap: 7px; padding: 9px 0; border-radius: 11px; }
.preview-week small { font-size: 10px; color: var(--muted); }
.preview-week b { font-size: 16px; }
.preview-week .selected { background: var(--green); color: white; }
.preview-week .selected small { color: #f0f3e6; }
.preview-filter { display: flex; align-items: center; gap: 14px; font-size: 11px; padding: 15px 0; color: var(--muted); }
.preview-filter .active { color: var(--ink); font-weight: 650; }
.preview-filter svg { margin-left: auto; }
.preview-events { display: grid; gap: 9px; }
.preview-event { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 66px; padding: 11px; border-radius: 10px; background: #f0f1e9; border-left: 3px solid #8caa8a; }
.preview-event.focus { background: #f1eef7; border-color: #a79cbe; }
.preview-event.pickup { background: #f9f0e4; border-color: #d6af78; }
.preview-event.optional { background: #f5f1eb; border-color: #c8b59b; }
.preview-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.preview-event strong { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-event small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.event-status { display: grid; justify-items: center; }
.preview-bottom { display: flex; justify-content: space-around; align-items: center; position: relative; margin-top: 21px; padding: 13px 0 14px; border-top: 1px solid var(--line); font-size: 10px; }
.preview-bottom span { display: flex; align-items: center; gap: 6px; color: var(--green); }
.preview-bottom span:nth-child(2) { color: var(--muted); }
.preview-bottom b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--green); color: white; font-size: 22px; font-weight: 400; }
.proposal-note { position: absolute; left: -27px; bottom: 38px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid #e5dfd0; border-radius: 13px; background: #f8edda; box-shadow: 0 12px 24px #57482e12; transform: rotate(2deg); }
.note-icon { display: grid; place-items: center; width: 35px; height: 35px; background: #f0dfbd; border-radius: 50%; color: #89642c; }
.proposal-note strong { font-size: 12px; font-weight: 650; }
.proposal-note p { font-size: 10px; margin-top: 4px; color: #75654c; }
.illustration-caption { text-align: right; font-size: 9px; margin-top: 22px; color: var(--muted); }
.role-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; border-block: 1px solid var(--line); padding-block: 30px; }
.role-band > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; }
.role-band svg { grid-row: span 2; color: var(--green); }
.role-band strong { font-size: 13px; }
.role-band span { grid-column: 2; font-size: 11px; color: var(--muted); }
.section { padding-top: 95px; scroll-margin-top: 100px; }
.section-heading { max-width: 740px; margin-bottom: 35px; }
.section-heading h2, .faq-section h2 { font-family: var(--serif); font-weight: 550; font-size: clamp(30px, 3.2vw, 43px); margin-top: 14px; }
.section-heading > p:last-child { color: var(--muted); margin-top: 17px; }
.feature-panels { display: grid; grid-template-columns: 1.12fr 1fr; gap: 25px; }
.feature-panel { padding: 35px 33px 28px; border: 1px solid #dfe3d7; border-radius: 16px; }
.calendar-panel { background: #eaf0e5; }
.conversation-panel { background: #f2ede3; border-color: #e8e0d1; }
.feature-icon { display: block; color: var(--green); margin-bottom: 21px; }
.feature-panel h3, .growth-panel h3 { font-family: var(--serif); font-size: 29px; font-weight: 550; }
.feature-panel > p { margin-top: 17px; color: #5c685c; font-size: 14px; line-height: 1.9; max-width: 470px; }
.feature-panel > .text-link { margin-top: 24px; }
.shared-plan { display: flex; align-items: center; gap: 13px; padding: 18px 0 3px; }
.shared-plan > div { display: flex; padding-left: 5px; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: -5px; border-radius: 50%; border: 2px solid #eaf0e5; font-size: 10px; }
.avatar.peach { background: #f1dbbd; color: #7e5b2e; }
.avatar.sage { background: #c8d7bf; color: #3f633f; }
.avatar.lilac { background: #ded5e8; color: #665376; }
.shared-plan > span { font-size: 11px; color: var(--muted); }
.shared-plan > svg { margin-left: auto; color: #5e7a59; }
.conversation { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
.conversation > span { border-radius: 11px 11px 11px 2px; background: #fffaf0; padding: 8px 14px; font-size: 11px; }
.conversation > span + span { align-self: flex-end; border-radius: 11px 11px 2px 11px; background: #dce5d5; display: flex; align-items: center; gap: 8px; }
.growth-panel { display: grid; grid-template-columns: 1.4fr 1fr; gap: 55px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 38px 42px; margin-top: 25px; }
.growth-panel h3 { margin: 15px 0; }
.growth-panel p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.growth-panel .text-link { margin-top: 19px; }
.focus-illustration { display: flex; flex-direction: column; align-items: center; background: #f1efe5; border-radius: 50% 50% 16px 16px; padding: 30px 20px; color: var(--green); }
.focus-illustration > strong { font-size: 43px; line-height: 1.5; font-weight: 450; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.focus-illustration > span { font-size: 11px; color: var(--muted); }
.focus-illustration > div { display: flex; gap: 20px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #dadbce; }
.focus-illustration > div > span { display: flex; gap: 5px; align-items: center; font-size: 11px; }
.native-section { background: #264b3a; color: #f8f5e9; margin-top: 96px; padding-block: 73px; scroll-margin-top: 80px; }
.native-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 100px; }
.native-section .eyebrow { color: #d0dbc3; }
.native-section h2 { font-family: var(--serif); font-size: clamp(34px, 3.9vw, 49px); font-weight: 500; margin-top: 18px; white-space: pre-line; }
.native-section p:not(.eyebrow) { margin-top: 23px; color: #d8dfd2; max-width: 480px; font-size: 14px; }
.native-section .native-note { font-size: 11px !important; color: #c0cfbc !important; }
.availability { border: 1px solid #60775e; border-radius: 8px; font-size: 12px; padding: 11px 16px; }
.button.light { background: #f7f4e8; color: var(--ink); }
.native-section .text-link { color: #f7f4e8; font-size: 12px; }
.widget-stack { min-width: 0; padding: 20px 0; }
.widget-card { width: 82%; margin-left: auto; border-radius: 23px; padding: 24px; background: #eff0df; color: var(--ink); transform: rotate(3deg); box-shadow: 0 20px 50px #0a211e35; }
.widget-card > div { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.widget-card img { border-radius: 9px; }
.widget-card > strong { display: block; font-size: 48px; font-weight: 400; line-height: 1.5; margin-top: 28px; letter-spacing: -.05em; }
.widget-card h3 { font-size: 17px; font-weight: 600; }
.widget-card p { color: #61705e !important; font-size: 12px !important; margin-top: 7px !important; }
.live-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 21px; border: 1px solid #dae0d5; border-radius: 18px; background: #fbf9f0; color: var(--ink); margin: 20px 20px 0 0; transform: rotate(-2deg); box-shadow: 0 18px 35px #0b251d20; }
.timer-orb { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #e6ebdd; }
.live-card strong { font-size: 12px; }
.live-card p { margin-top: 3px !important; color: #61705e !important; font-size: 10px !important; }
.live-card b { margin-left: auto; color: var(--green); font-size: 24px; letter-spacing: -.05em; font-weight: 500; }
.widget-stack > small { display: block; text-align: right; margin-top: 24px; font-size: 9px; color: #b9cdb4; }
.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; }
.guide-card { display: block; position: relative; padding: 26px 24px 27px; border-top: 1px solid var(--green); background: #f4f1e8; border-radius: 0 0 11px 11px; }
.guide-card > span { color: #87937e; font-size: 12px; }
.guide-card h3 { font-size: 19px; margin-top: 23px; }
.guide-card p { color: var(--muted); font-size: 13px; margin-top: 14px; max-width: 260px; }
.guide-card > svg { margin-top: 27px; color: var(--green); }
.guide-card:hover { background: #eaf0e5; }
.all-guides { margin-top: 26px; }
.faq-section { display: grid; grid-template-columns: .9fr 1fr; gap: 100px; }
.faq-section h2 { font-size: 35px; margin-bottom: 25px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-size: 14px; font-weight: 600; padding: 21px 0; list-style: none; }
summary::-webkit-details-marker { display: none; }
.faq-list summary > span { font-size: 23px; color: #798c74; font-weight: 400; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list p { color: var(--muted); font-size: 13px; padding: 0 27px 21px 0; }
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid var(--line); margin-top: 95px; padding-block: 65px 78px; }
.closing img { border-radius: 17px; margin-bottom: 22px; }
.closing h2 { font-family: var(--serif); font-size: clamp(32px, 3.7vw, 47px); font-weight: 500; white-space: pre-line; }
.closing .actions { justify-content: center; }
.site-footer { padding-top: 43px; background: #f0eee5; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 35px; }
.site-footer .brand { font-size: 20px; }
.site-footer .brand img { width: 30px; height: 30px; }
.site-footer p { font-size: 12px; color: var(--muted); margin-top: 15px; }
.site-footer small { display: block; margin-top: 25px; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.site-footer h2 { font-size: 12px; font-weight: 650; margin: 7px 0 16px; letter-spacing: 0; }
.footer-grid > div:not(:first-child) > a { display: block; font-size: 12px; color: var(--muted); margin-top: 10px; }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-note { margin-top: 33px; border-top: 1px solid #dcded0; padding-block: 16px; font-size: 10px; color: var(--muted); }
.docs-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 155px; gap: 45px; padding-block: 40px 90px; align-items: start; }
.docs-sidebar, .article-toc { position: sticky; top: 112px; min-width: 0; }
.docs-sidebar summary { font-size: 14px; font-weight: 650; cursor: pointer; margin-bottom: 17px; }
.topic-search { display: grid; gap: 7px; color: var(--muted); font-size: 11px; margin-bottom: 19px; }
.topic-search input { width: 100%; min-width: 0; padding: 10px; background: #fffdf6; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; color: var(--ink); }
.docs-sidebar nav { display: grid; gap: 3px; }
.docs-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 12px; color: var(--muted); }
.docs-sidebar nav a > span { color: #8b9786; font-size: 10px; }
.docs-sidebar nav a:hover, .docs-sidebar nav a[aria-current] { background: #e7eddf; color: var(--ink); }
.docs-sidebar nav a[aria-current] { font-weight: 650; }
.sidebar-support { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 24px; color: var(--green); }
.no-topics { font-size: 12px; color: var(--muted); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; margin-bottom: 25px; }
.article-header { border-bottom: 1px solid var(--line); padding-bottom: 29px; margin-bottom: 32px; }
.article-header h1 { font-family: var(--serif); font-size: clamp(34px, 3.5vw, 44px); font-weight: 550; margin: 13px 0 18px; }
.article-header > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.article-header > small { display: block; font-size: 11px; color: var(--muted); margin-top: 18px; }
.article-section { margin-bottom: 34px; scroll-margin-top: 110px; }
.article-section h2 { font-size: 21px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; margin-bottom: 17px; }
.article-section h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.article-section p, .article-section li { color: #48584c; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.article-section p + p { margin-top: 15px; }
.article-section li + li { margin-top: 10px; }
.article-section ol li { padding-left: 6px; }
.article-section ol li::marker { color: var(--green); font-weight: 650; }
.article-links { display: flex; flex-wrap: wrap; gap: 11px 20px; margin-top: 20px; }
.article-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.article-toc > strong { display: block; font-size: 11px; margin-bottom: 16px; }
.article-toc nav { display: grid; gap: 13px; border-left: 1px solid var(--line); padding-left: 13px; }
.article-toc a { color: var(--muted); font-size: 11px; line-height: 1.6; }
.article-toc a:hover { color: var(--green); text-decoration: underline; }
.article-pagination { display: flex; gap: 20px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 45px; }
.article-pagination a { font-size: 13px; max-width: 48%; }
.article-pagination a:last-child { text-align: right; }
.article-pagination small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.article-pagination svg { margin-left: 5px; }
.policy-layout { display: grid; grid-template-columns: minmax(0, 760px) 180px; gap: 70px; max-width: 1050px; padding-block: 50px 85px; align-items: start; }
.contact-box { margin-top: 45px; padding: 27px; border: 1px solid #d8dfce; border-radius: 12px; background: #eaf0e2; overflow-wrap: anywhere; }
.contact-box strong { font-size: 17px; }
.contact-box p { font-size: 13px; margin-top: 9px; color: #4d604c; }
.contact-box > a { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; margin-top: 12px; text-decoration: underline; }
.contact-box small { display: block; font-size: 11px; color: var(--muted); margin-top: 17px; }
@media (min-width: 901px) { .docs-sidebar summary { list-style: none; } }
@media (max-width: 1100px) { .container { width: calc(100% - 56px); } .hero { gap: 42px; } .hero h1 { font-size: 57px; } .header-actions, .desktop-nav { gap: 19px; } .native-grid { gap: 55px; } .docs-layout { gap: 30px; grid-template-columns: 190px minmax(0, 1fr); } .docs-layout .article-toc { display: none; } }
@media (max-width: 900px) { .desktop-nav, .header-web { display: none; } .header-inner { min-height: 70px; } .mobile-menu { display: block; } .mobile-menu summary { font-size: 12px; cursor: pointer; } .mobile-menu nav { position: absolute; right: 24px; top: 65px; min-width: 180px; display: grid; padding: 14px 18px; gap: 15px; font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px #203b3015; } .hero { gap: 30px; padding-top: 55px; } .hero h1 { font-size: 48px; } .hero-description { font-size: 14px; } .hero .actions { gap: 16px; } .hero .button { padding-inline: 17px; font-size: 12px; } .hero .text-link { font-size: 12px; } .proposal-note { left: -15px; padding: 12px; } .event-status small { display: none; } .schedule-preview { padding-inline: 17px; } .preview-event { padding-inline: 7px; gap: 4px; grid-template-columns: 35px minmax(0, 1fr) 19px; } .role-band { gap: 18px; } .feature-panel { padding: 27px 24px; } .feature-panel h3, .growth-panel h3 { font-size: 27px; } .growth-panel { padding: 30px; gap: 25px; } .native-grid { gap: 35px; } .live-card { margin-right: 0; padding: 15px; gap: 8px; } .live-card b { font-size: 21px; } .faq-section { gap: 50px; } .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 25px; } .footer-grid > div:first-child { grid-column: 1 / -1; } .footer-grid > div:first-child p { display: inline; margin-left: 18px; } .footer-grid > div:first-child small { margin-top: 14px; } .docs-layout { display: block; padding-top: 25px; } .docs-sidebar { position: static; margin-bottom: 32px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 10px; } .docs-sidebar summary { margin-bottom: 0; } .docs-sidebar details[open] summary { margin-bottom: 15px; } .sidebar-support { margin-top: 15px; } .policy-layout { grid-template-columns: minmax(0, 1fr); padding-top: 30px; } .policy-layout .article-toc { display: none; } }
@media (max-width: 640px) { .container { width: calc(100% - 40px); } .brand { font-size: 20px; gap: 8px; } .brand img { width: 29px; height: 29px; border-radius: 9px; } .header-actions { gap: 20px; } .hero { grid-template-columns: minmax(0, 1fr); gap: 45px; padding-top: 44px; padding-bottom: 35px; } .hero h1 { font-size: clamp(42px, 10.7vw, 58px); margin-top: 20px; } .hero-description { font-size: 15px; margin-top: 20px; } .hero-platforms { font-size: 10px; gap: 6px; } .hero-platforms > span { margin-inline: 2px; } .hero .actions { gap: 22px; } .hero .button { font-size: 13px; padding-inline: 20px; } .scroll-hint { margin-top: 30px; } .hero-visual { margin-inline: auto; width: calc(100% - 12px); max-width: 425px; } .schedule-preview { transform: rotate(-1.5deg); padding: 18px 17px 0; } .preview-heading { margin-bottom: 18px; } .preview-week { margin-top: 14px; gap: 3px; } .preview-event { padding: 10px; min-height: 62px; grid-template-columns: 36px minmax(0, 1fr) 19px; } .proposal-note { left: -5px; right: 3px; bottom: 35px; gap: 9px; } .proposal-note strong { font-size: 11px; } .proposal-note p { font-size: 9px; } .note-icon { width: 30px; height: 30px; } .illustration-caption { font-size: 8px; } .role-band { grid-template-columns: 1fr; gap: 20px; padding-block: 27px; } .role-band > div { grid-template-columns: 30px 1fr; } .role-band span { font-size: 12px; } .section { padding-top: 62px; } .section-heading { margin-bottom: 26px; } .section-heading h2 { font-size: 33px; } .section-heading > p:last-child { font-size: 14px; } .feature-panels { grid-template-columns: minmax(0, 1fr); gap: 18px; } .feature-panel { padding: 26px 24px; } .feature-icon { margin-bottom: 17px; } .feature-panel h3 { font-size: 28px; } .shared-plan { gap: 9px; } .shared-plan > span { font-size: 10px; } .growth-panel { grid-template-columns: minmax(0, 1fr); padding: 27px 24px; gap: 25px; margin-top: 18px; } .focus-illustration { max-width: 270px; width: 100%; margin-inline: auto; } .native-section { margin-top: 63px; padding-block: 48px; } .native-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .native-section h2 { font-size: 39px; } .native-section p:not(.eyebrow) { font-size: 14px; } .native-section .actions { gap: 18px; } .widget-stack { max-width: 370px; width: 100%; margin-inline: auto; } .widget-card { width: 82%; padding: 22px; } .widget-card > strong { font-size: 43px; margin-top: 20px; } .live-card { margin-right: 8px; } .live-card b { font-size: 23px; } .guide-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; } .guide-card { padding: 24px; } .guide-card h3 { margin-top: 14px; font-size: 21px; } .guide-card p { max-width: 100%; } .guide-card > svg { margin-top: 17px; } .faq-section { grid-template-columns: minmax(0, 1fr); gap: 25px; } .faq-section h2 { font-size: 32px; margin-bottom: 20px; } .faq-list summary { font-size: 14px; } .closing { margin-top: 60px; padding-block: 46px 53px; } .closing h2 { font-size: 33px; } .closing .actions { gap: 19px; } .footer-grid { gap: 21px 12px; } .footer-grid > div:first-child p { display: block; margin-left: 0; margin-top: 10px; } .footer-grid > div:not(:first-child) > a { font-size: 11px; } .site-footer h2 { font-size: 11px; } .site-footer small { font-size: 9px; } .docs-sidebar { padding: 13px; } .article-header h1 { font-size: 34px; } .article-header > p:not(.eyebrow) { font-size: 15px; } .article-header .eyebrow { font-size: 10px; } .article-section h2 { font-size: 21px; } .article-section p, .article-section li { font-size: 14px; } .contact-box { padding: 22px; } .policy-layout { padding-bottom: 55px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }