:root {
  color-scheme: light;
  --paper: #f7f4ea;
  --paper-deep: #eee9dc;
  --ink: #18271f;
  --ink-soft: #53615a;
  --forest: #254c3e;
  --forest-deep: #19392e;
  --leaf: #b4d383;
  --orange: #f28e4b;
  --gold: #ffc75e;
  --line: rgba(28, 50, 40, .15);
  --white: #fffdf7;
  --shadow: 0 28px 70px rgba(42, 56, 44, .15);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
.skip-link { position: absolute; top: 10px; left: 10px; z-index: 20; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; color: white; background: var(--forest-deep); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 5; border-bottom: 1px solid rgba(28, 50, 40, .08); background: rgba(247, 244, 234, .86); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-size: 18px; font-weight: 760; letter-spacing: -.035em; white-space: nowrap; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 38px; margin-left: auto; }
.main-nav a, .footer-links a { color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 650; transition: color .18s ease; }
.main-nav a:hover, .footer-links a:hover { color: var(--orange); }
.store-status { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--forest); font-size: 11px; font-weight: 760; white-space: nowrap; }
.store-status > span:last-child { color: #8c7055; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(242, 142, 75, .16); }

.hero { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(48px, 7vw, 90px); min-height: 650px; padding-top: 66px; padding-bottom: 86px; }
.hero-copy { padding-block: 20px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 19px; color: #718268; font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.eyebrow-mark { color: var(--orange); font-size: 19px; letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; }
.hero h1 { max-width: 580px; margin-bottom: 22px; font-size: clamp(55px, 6.2vw, 80px); line-height: .99; }
h1 em, h2 em { color: var(--forest); font-weight: 500; }
.hero-description { max-width: 440px; margin-bottom: 31px; color: #59665d; font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 21px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 0 20px; border-radius: 9px; font-size: 13px; font-weight: 750; text-decoration: none; }
.button-primary { color: var(--white); background: var(--forest); box-shadow: 0 8px 18px rgba(37, 76, 62, .15); transition: background .18s ease, transform .18s ease; }
.button-primary:hover { transform: translateY(-2px); background: var(--forest-deep); }
.button-primary span { font-size: 17px; line-height: 1; }
.store-note { color: #887969; font-size: 11px; font-weight: 650; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 35px; color: #718075; font-size: 11px; font-weight: 650; }
.meta-item { display: inline-flex; align-items: center; gap: 7px; }
.meta-item svg { width: 16px; height: 16px; fill: none; stroke: var(--forest); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.meta-divider { width: 3px; height: 3px; border-radius: 50%; background: #c5bda9; }

.hero-visual { position: relative; min-width: 0; padding: 25px 15px 29px 3px; isolation: isolate; }
.visual-sun { position: absolute; z-index: -1; top: 1%; right: 1%; width: min(78%, 450px); aspect-ratio: 1; border-radius: 50%; background: #f6c56b; opacity: .82; }
.leaf-shape { position: absolute; z-index: -1; width: 135px; height: 51px; border-radius: 100% 0 100% 0; transform: rotate(-28deg); background: var(--leaf); opacity: .8; }
.leaf-shape-one { top: 7%; left: 8%; }
.leaf-shape-two { right: -2%; bottom: 17%; width: 95px; height: 37px; transform: rotate(151deg); background: #ed9a69; }
.preview-window { position: relative; overflow: hidden; border: 6px solid #26352f; border-radius: 18px 18px 13px 13px; color: #f7f5ee; background: #13261f; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.preview-topbar { height: 43px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #22352e; }
.preview-topbar > span:first-child, .preview-topbar > span:nth-child(2), .preview-topbar > span:nth-child(3) { width: 7px; height: 7px; border-radius: 50%; background: #75817a; }
.preview-topbar > span:first-child { background: #ec8d72; }
.preview-topbar > span:nth-child(2) { background: #e9c273; }
.preview-topbar > span:nth-child(3) { background: #83bd87; }
.browser-tab { display: inline-flex; align-items: center; gap: 7px; height: 29px; margin-left: 10px; padding: 0 11px; border-radius: 7px 7px 0 0; color: #f3f1e9; background: #31483e; font-size: 10px; }
.browser-tab img { width: 17px; height: 17px; object-fit: contain; }
.tab-plus { margin-left: 1px; color: #c4cbc5; font-size: 18px; }
.preview-body { padding: 24px 25px 17px; }
.preview-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; }
.preview-heading img { width: 43px; height: 43px; padding: 3px; border: 1px solid rgba(192, 223, 163, .18); border-radius: 12px; background: #263d33; object-fit: contain; }
.preview-heading div { display: grid; gap: 2px; }
.preview-kicker { color: #91b28f; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.preview-heading strong { font-size: 17px; font-weight: 680; letter-spacing: -.03em; }
.preview-menu { margin-left: auto; color: #a9b7ad; font-size: 13px; letter-spacing: 2px; }
.preview-workspaces { display: grid; gap: 10px; }
.workspace-row { display: flex; align-items: center; gap: 11px; min-height: 63px; padding: 10px 12px; border: 1px solid #33483e; border-radius: 10px; background: #1c3028; }
.workspace-row-active { border-color: #75b980; background: linear-gradient(100deg, rgba(57, 100, 67, .38), rgba(28, 48, 40, .9)); }
.workspace-color { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; }
.color-green { background: #68cc85; }
.color-orange { background: #ffb04f; }
.color-lilac { background: #ca91da; }
.workspace-content { display: grid; gap: 3px; min-width: 0; }
.workspace-content strong { color: #f2f2eb; font-size: 12px; font-weight: 680; }
.workspace-content span { overflow: hidden; color: #94a399; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.open-chip { margin-left: auto; padding: 5px 9px; border: 1px solid #486351; border-radius: 6px; color: #c4d5c5; font-size: 9px; font-weight: 680; }
.preview-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; color: #8ea294; font-size: 8px; }
.preview-footer span:first-child { display: flex; align-items: center; gap: 6px; }
.preview-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.floating-note { position: absolute; right: -2%; bottom: 11%; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border: 1px solid rgba(35, 61, 49, .1); border-radius: 12px; color: #718075; background: var(--white); box-shadow: 0 14px 34px rgba(42, 56, 44, .13); font-size: 9px; line-height: 1.4; transform: rotate(-3deg); }
.floating-note strong { color: var(--ink); font-size: 10px; }
.floating-note-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--forest); background: #e3efd6; font-size: 18px; }
.visual-caption { display: flex; justify-content: space-between; margin: 18px 4px 0 2px; color: #918875; font-size: 8px; font-weight: 800; letter-spacing: .16em; }

.benefit-strip { border-block: 1px solid var(--line); background: #f1ecdf; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 24px; }
.benefit-item { display: flex; align-items: center; gap: 15px; min-height: 47px; padding-inline: 28px; border-right: 1px solid var(--line); }
.benefit-item:first-child { padding-left: 3px; }
.benefit-item:last-child { border-right: 0; }
.benefit-number { color: #cc8c54; font-family: Georgia, "Times New Roman", serif; font-size: 23px; }
.benefit-item div { display: grid; gap: 1px; }
.benefit-item strong { color: var(--forest); font-size: 12px; }
.benefit-item div span { color: #7b8176; font-size: 10px; }

.section-space { padding-block: 115px 124px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px 60px; margin-bottom: 47px; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 6px; }
.section-index { display: inline-grid; min-width: 28px; height: 24px; place-items: center; border: 1px solid rgba(113, 130, 104, .33); border-radius: 6px; color: #718268; font-size: 9px; letter-spacing: .04em; }
.section-heading h2, .privacy-heading h2 { max-width: 550px; margin: 0; font-size: clamp(42px, 5vw, 60px); line-height: 1.02; }
.section-heading > p:last-child { max-width: 400px; justify-self: end; margin: 0 0 5px; color: #68756c; font-size: 15px; line-height: 1.7; }
.showcase { display: grid; grid-template-columns: .72fr 1.28fr; align-items: stretch; overflow: hidden; border: 1px solid rgba(30, 51, 41, .13); border-radius: 18px; background: var(--white); box-shadow: 0 18px 50px rgba(42, 56, 44, .07); }
.showcase-tabs { display: flex; flex-direction: column; padding: 20px 21px 19px; border-right: 1px solid rgba(30, 51, 41, .1); }
.showcase-tab { display: grid; grid-template-columns: 29px 1fr 16px; align-items: center; gap: 11px; width: 100%; padding: 14px 11px; border: 0; border-bottom: 1px solid rgba(30, 51, 41, .1); color: var(--ink-soft); background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.showcase-tab:hover { background: #f7f4ea; }
.showcase-tab.is-active { border-radius: 9px; color: var(--forest); background: #eff4e8; }
.tab-number { color: #a1a894; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.showcase-tab > span:nth-child(2) { display: grid; gap: 2px; }
.showcase-tab strong { color: inherit; font-size: 12px; font-weight: 720; }
.showcase-tab small { color: #879088; font-size: 9px; }
.tab-arrow { color: #95a28f; font-size: 13px; }
.showcase-copy { margin-top: auto; padding: 32px 10px 5px; }
.showcase-label { margin-bottom: 9px; color: #9b8d74; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.showcase-copy h3 { max-width: 250px; margin-bottom: 10px; color: var(--forest); font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.showcase-copy > p:last-child { max-width: 300px; margin: 0; color: #6a776e; font-size: 11px; line-height: 1.7; }
.showcase-disclosure { margin: 19px 10px 0; padding-top: 14px; border-top: 1px solid rgba(30, 51, 41, .1); color: #827b6e; font-size: 9px; line-height: 1.6; }
.showcase-panel { position: relative; align-self: center; overflow: hidden; min-width: 0; background: #eadfcf; }
.showcase-panel img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.image-count { position: absolute; right: 17px; bottom: 15px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: white; background: rgba(23, 38, 32, .76); font-size: 9px; font-weight: 700; backdrop-filter: blur(8px); }
.image-count i { width: 20px; height: 1px; background: rgba(255,255,255,.7); }

.privacy-section { padding-block: 96px 105px; color: #f6f4ec; background: var(--forest-deep); }
.privacy-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; align-items: center; }
.privacy-heading .eyebrow { color: #b6c49e; }
.privacy-heading .section-index { border-color: rgba(209, 226, 186, .3); color: #c2d1ab; }
.privacy-heading h2 { margin-bottom: 21px; color: #f7f5ec; }
.privacy-heading h2 em { color: var(--leaf); }
.privacy-heading > p:not(.eyebrow) { max-width: 430px; margin-bottom: 24px; color: #c0ccc2; font-size: 14px; line-height: 1.75; }
.text-link { display: inline-flex; align-items: center; gap: 11px; padding-bottom: 4px; border-bottom: 1px solid rgba(190, 215, 167, .5); color: #d9e6c6; text-decoration: none; font-size: 11px; font-weight: 700; }
.text-link:hover { color: white; border-color: white; }
.privacy-points { display: grid; gap: 10px; }
.privacy-point { display: flex; gap: 16px; padding: 19px 20px; border: 1px solid rgba(221, 234, 209, .14); border-radius: 12px; background: rgba(255,255,255,.035); }
.privacy-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #203b2e; background: #d2e3bd; font-size: 18px; }
.privacy-point h3 { margin-bottom: 4px; color: #f5f5ee; font-size: 12px; font-weight: 720; }
.privacy-point p { max-width: 360px; margin: 0; color: #b9c8bb; font-size: 10px; line-height: 1.65; }

.closing-cta { padding-block: 76px 68px; background: var(--paper); }
.closing-card { position: relative; display: flex; align-items: center; gap: 27px; min-height: 185px; padding: 35px 47px; overflow: hidden; border-radius: 18px; background: #f0d993; }
.closing-card::after { position: absolute; right: 90px; bottom: -155px; width: 310px; height: 310px; border: 1px solid rgba(83, 94, 52, .17); border-radius: 50%; content: ""; box-shadow: 0 0 0 25px rgba(83, 94, 52, .035), 0 0 0 51px rgba(83, 94, 52, .03); }
.closing-mascot { z-index: 1; width: 90px; height: 90px; flex: 0 0 auto; object-fit: contain; }
.closing-card > div { z-index: 1; }
.closing-card .eyebrow { margin-bottom: 5px; color: #7c765b; font-size: 9px; }
.closing-card h2 { margin: 0 0 7px; color: var(--forest-deep); font-size: clamp(28px, 3.1vw, 38px); line-height: 1.05; }
.closing-card > div > p:last-child { margin: 0; color: #6d705e; font-size: 12px; }
.button-coming { z-index: 1; margin-left: auto; border: 1px solid rgba(39, 67, 49, .28); color: #54694c; background: rgba(255,255,255,.27); cursor: default; }
.button-coming span { font-size: 16px; }

.site-footer { padding-block: 26px 32px; border-top: 1px solid rgba(28, 50, 40, .1); background: var(--paper); }
.footer-inner { display: flex; align-items: center; gap: 20px; }
.footer-brand { font-size: 14px; }
.footer-brand img { width: 31px; height: 31px; }
.footer-inner > p { margin: 0; color: #859085; font-size: 10px; }
.footer-links { display: flex; gap: 18px; margin-left: auto; }
.footer-links a, .footer-links span { color: #7f887d; font-size: 9px; }
.copyright { color: #92978c; font-size: 9px; }

.privacy-page { padding-block: 72px 100px; }
.back-link { display: inline-block; margin-bottom: 51px; color: var(--forest); text-decoration: none; font-size: 12px; font-weight: 700; }
.back-link:hover { color: var(--orange); }
.privacy-page h1 { margin-bottom: 15px; font-size: clamp(52px, 7vw, 78px); line-height: 1; }
.privacy-lede { max-width: 690px; margin-bottom: 47px; color: #667268; font-size: 16px; line-height: 1.7; }
.policy-content { max-width: 770px; padding-top: 12px; border-top: 1px solid var(--line); }
.policy-content section { padding-block: 25px; border-bottom: 1px solid var(--line); }
.policy-content h2 { margin-bottom: 9px; color: var(--forest); font-family: inherit; font-size: 17px; font-weight: 730; letter-spacing: -.02em; }
.policy-content p { margin-bottom: 10px; color: #647167; font-size: 13px; line-height: 1.8; }
.policy-content p:last-child { margin-bottom: 0; }
.policy-content a { color: var(--forest); text-underline-offset: 3px; }
.policy-content code { padding: 2px 5px; border-radius: 4px; background: #ece8db; font-size: 11px; }

:focus-visible { outline: 3px solid #d68442; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 920px) {
  .container { width: min(100% - 42px, 760px); }
  .hero { grid-template-columns: 1fr .95fr; gap: 30px; min-height: 590px; padding-top: 45px; padding-bottom: 62px; }
  .hero h1 { font-size: clamp(50px, 7vw, 66px); }
  .hero-visual { padding-inline: 0; }
  .preview-body { padding: 19px 16px 14px; }
  .workspace-row { min-height: 57px; }
  .floating-note { right: -3%; }
  .benefit-item { padding-inline: 17px; }
  .showcase { grid-template-columns: .78fr 1.22fr; }
  .showcase-panel img { min-height: 330px; }
  .privacy-layout { gap: 5%; }
}
@media (max-width: 680px) {
  .container { width: min(100% - 36px, 520px); }
  .header-inner { min-height: 72px; flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .brand { font-size: 16px; }
  .brand img { width: 35px; height: 35px; }
  .main-nav { order: 3; width: 100%; justify-content: center; gap: 31px; padding-block: 9px 2px; border-top: 1px solid rgba(28, 50, 40, .08); }
  .main-nav a { font-size: 11px; }
  .store-status { gap: 6px; min-height: 33px; margin-left: auto; padding-inline: 9px; font-size: 9px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 26px; min-height: 0; padding-top: 46px; padding-bottom: 56px; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { font-size: 9px; }
  .hero h1 { max-width: 450px; margin-bottom: 16px; font-size: clamp(49px, 13vw, 67px); }
  .hero-description { max-width: 440px; margin-bottom: 23px; font-size: 15px; }
  .hero-meta { margin-top: 23px; font-size: 9px; }
  .hero-visual { width: min(100%, 490px); align-self: center; }
  .preview-body { padding: 20px 18px 15px; }
  .workspace-row { min-height: 60px; }
  .floating-note { right: -1%; bottom: 10%; }
  .visual-caption { margin-top: 14px; }
  .benefit-grid { grid-template-columns: 1fr; padding-block: 7px; }
  .benefit-item, .benefit-item:first-child { padding: 13px 2px; border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-item:last-child { border-bottom: 0; }
  .benefit-number { width: 31px; font-size: 20px; }
  .benefit-item strong { font-size: 11px; }
  .benefit-item div span { font-size: 9px; }
  .section-space { padding-block: 75px 80px; }
  .section-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .section-heading .eyebrow { grid-column: auto; }
  .section-heading h2, .privacy-heading h2 { font-size: clamp(40px, 11vw, 54px); }
  .section-heading > p:last-child { justify-self: start; max-width: 400px; font-size: 13px; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-tabs { padding: 13px; border-right: 0; }
  .showcase-tab { padding: 12px 9px; }
  .showcase-copy { padding: 24px 8px 0; }
  .showcase-copy h3 { max-width: none; font-size: 24px; }
  .showcase-copy > p:last-child { max-width: 420px; }
  .showcase-disclosure { margin: 15px 8px 5px; }
  .showcase-panel { grid-row: 1; }
  .showcase-panel img { min-height: 0; aspect-ratio: 1.32; }
  .privacy-section { padding-block: 73px 77px; }
  .privacy-layout { grid-template-columns: 1fr; gap: 32px; }
  .privacy-heading > p:not(.eyebrow) { font-size: 13px; }
  .privacy-point { padding: 16px; }
  .closing-cta { padding-block: 46px; }
  .closing-card { align-items: flex-start; flex-wrap: wrap; gap: 17px; padding: 26px 22px; }
  .closing-mascot { width: 62px; height: 62px; }
  .closing-card > div { flex: 1; min-width: 190px; }
  .closing-card h2 { font-size: 28px; }
  .button-coming { margin-left: 78px; min-height: 44px; }
  .closing-card::after { right: -45px; bottom: -210px; }
  .footer-inner { flex-wrap: wrap; gap: 10px 15px; }
  .footer-inner > p { width: calc(100% - 155px); margin-left: auto; text-align: right; }
  .footer-links { width: 100%; justify-content: space-between; margin: 7px 0 0; }
  .copyright { display: none; }
  .privacy-page { padding-block: 47px 72px; }
  .back-link { margin-bottom: 38px; }
  .privacy-lede { font-size: 14px; }
  .policy-content h2 { font-size: 15px; }
  .policy-content p { font-size: 12px; }
}