@font-face { font-family: Bricolage; src: url('assets/fonts/BricolageGrotesque-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Bricolage; src: url('assets/fonts/BricolageGrotesque-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { --ink:#193c34; --pine:#193c34; --mint:#d6edcb; --melon:#ffb38e; --paper:#fafaf5; --white:#fffcf5; --muted:#50665c; --line:#d1d9ce; --accent:#c99077; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { max-width:100%; height:auto; }
::selection { background:var(--melon); color:var(--pine); }
:focus-visible { outline:3px solid currentColor; outline-offset:5px; }
h1,h2,h3,.brand { font-family:Bricolage,sans-serif; font-weight:700; }
h1,h2,h3,p,figure { margin:0; }
p { line-height:1.55; }
h2 { font-size:clamp(42px,5.1vw,76px); line-height:1.02; letter-spacing:-.055em; }
.skip-link { position:absolute; z-index:20; top:-70px; left:20px; padding:14px 20px; background:var(--paper); }
.skip-link:focus { top:12px; }
.section-wrap { width:min(1280px,100%); padding-inline:clamp(24px,5vw,72px); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:92px; padding:20px clamp(24px,5vw,72px); background:var(--mint); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:24px; letter-spacing:-.06em; white-space:nowrap; }
.brand img { border-radius:9px; }
.site-header nav { display:flex; gap:32px; font-size:15px; font-weight:600; }
.site-header nav a { padding-block:10px; }
.site-header nav a:hover { opacity:.65; }
.hero { background:var(--mint); display:grid; grid-template-columns:1fr 1fr; min-height:760px; padding-left:clamp(24px,5vw,72px); border-radius:0 0 50% 5% / 0 0 5% 2%; overflow:hidden; }
.hero-copy { padding:46px 0 110px; z-index:1; }
.hero h1 { font-size:clamp(105px,11.7vw,177px); line-height:.94; letter-spacing:-.075em; }
.hero-lead { margin-top:32px; font-size:clamp(23px,2.3vw,31px); font-weight:600; letter-spacing:-.035em; }
.hero-description { margin-top:12px; max-width:390px; font-size:19px; color:#38564a; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:16px 26px; border-radius:999px; font-size:16px; font-weight:600; }
.button-dark { background:var(--pine); color:var(--white); }
.button-dark:hover { background:#2b5145; }
.hero .button { margin-top:28px; }
.availability { display:block; font-size:13px; margin-top:16px; color:#496252; }
.hero-art { position:relative; min-width:0; }
.hero-orbit { position:absolute; width:750px; height:750px; border-radius:50%; background:var(--melon); top:115px; left:-15px; }
.device { padding:8px; background:#17241e; border:2px solid #6f7c71; border-radius:48px; overflow:hidden; box-shadow:0 32px 65px -25px #173b3459; }
.device img { display:block; width:100%; border-radius:37px; }
.hero-device { position:absolute; width:334px; top:34px; left:calc(50% - 160px); transform:rotate(8deg); }
.hero-pie { position:absolute; width:280px; bottom:24px; left:-95px; transform:rotate(-8deg); filter:drop-shadow(0 16px 16px #173b341c); }
.intro { padding-block:112px 120px; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:80px; }
.intro h2 { font-size:clamp(36px,4vw,55px); }
.intro-copy { max-width:430px; color:var(--muted); font-size:18px; }
.intro-copy p + p { margin-top:18px; }
.comparison { background:var(--pine); color:var(--paper); padding-block:100px 74px; border-radius:52px 52px 0 0; }
.comparison-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:54px; }
.comparison-intro h2 { font-size:clamp(56px,7.2vw,102px); }
.comparison-intro > p { max-width:370px; font-size:18px; color:#d4e4d1; padding-bottom:6px; }
.demo-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:54px; }
.example-tabs { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.example-tab { border:1px solid #5f796b; border-radius:999px; background:none; color:var(--paper); min-height:50px; padding:12px 25px; font-family:Bricolage,sans-serif; font-weight:700; font-size:22px; }
.example-tab.is-active { color:var(--pine); background:var(--mint); border-color:var(--mint); }
.example-tab:hover:not(.is-active) { background:#31554a; }
.example-context { margin-top:26px; font-size:17px; color:#dfebdc; }
.demo-disclosure { margin-top:28px; color:#b3c9b7; font-size:13px; }
.comparison-demo { min-width:0; color:var(--pine); background:var(--white); border-radius:24px; padding:28px; transform:rotate(-1deg); }
.comparison-demo table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:16px; line-height:1.45; }
.comparison-demo caption { text-align:left; font-family:Bricolage,sans-serif; font-weight:700; font-size:34px; letter-spacing:-.04em; margin-bottom:20px; }
.criterion-column { width:20%; }
.comparison-demo th,.comparison-demo td { text-align:left; vertical-align:top; padding:19px 12px; border-bottom:1px solid var(--line); overflow-wrap:break-word; }
.comparison-demo th:first-child { padding-left:0; }
.comparison-demo thead th { font-size:14px; padding-top:0; color:#5a6d61; }
.comparison-demo tbody th { font-size:14px; }
.comparison-demo .result-row td { font-weight:600; }
.next-note { margin-top:22px; padding:24px; border-radius:16px; background:var(--melon); }
.next-note > span { font-size:13px; font-weight:600; }
.next-note p { margin-top:9px; font-family:Bricolage,sans-serif; font-size:25px; line-height:1.18; letter-spacing:-.03em; }
.comparison-details { display:flex; justify-content:space-between; align-items:flex-start; gap:45px; margin-top:38px; font-size:14px; color:#c5dbc5; }
.comparison-details > p { max-width:300px; }
.comparison-details details { max-width:470px; }
summary { cursor:pointer; font-weight:600; min-height:32px; }
.comparison-details details p { margin-top:12px; }
.knowledge { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:95px; padding-block:100px; }
.knowledge-art { height:650px; position:relative; isolation:isolate; overflow:hidden; border-radius:50% 50% 6% 6% / 12% 12% 4% 4%; }
.knowledge-orbit { position:absolute; width:550px; height:550px; background:var(--mint); border-radius:50%; left:-80px; top:90px; z-index:-1; }
.knowledge-device { width:320px; margin:15px auto 0; transform:rotate(-7deg); }
.knowledge-copy p { max-width:460px; color:var(--muted); font-size:18px; margin-top:23px; }
.folder-names { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.folder-names span { font-size:14px; font-weight:600; padding:11px 16px; border-radius:6px 15px 15px 15px; background:#d6e2e7; }
.folder-names span:nth-child(2) { background:#f4cfbc; }
.folder-names span:nth-child(3) { background:#dce7d8; }
.knowledge-copy .quiet { font-size:14px; margin-top:12px; }
.capture { display:grid; grid-template-columns:1fr 1fr; gap:95px; padding-block:20px 118px; align-items:start; }
.capture > div > p { max-width:290px; margin-top:22px; font-size:18px; color:var(--muted); }
.capture-list { list-style:none; padding:0; margin:0; }
.capture-list li { padding:23px 0; border-bottom:1px solid var(--line); }
.capture-list li:first-child { padding-top:0; }
.capture-list strong { display:block; font-family:Bricolage,sans-serif; font-size:25px; letter-spacing:-.035em; }
.capture-list span { display:block; font-size:16px; line-height:1.5; color:var(--muted); margin-top:7px; }
.closing { background:var(--melon); border-radius:50% 50% 0 0 / 12% 12% 0 0; }
.closing-inner { display:grid; grid-template-columns:1.4fr 1fr; gap:80px; padding-block:110px 90px; }
.closing h2 { font-size:clamp(64px,8vw,116px); }
.closing-inner > div > p { margin-top:24px; font-size:20px; }
.closing-detail { max-width:300px; }
.closing-detail img { border-radius:17px; }
.closing-detail p { font-size:18px!important; }
.closing-detail .button { margin-top:26px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px clamp(24px,5vw,72px); background:var(--pine); color:var(--paper); }
.site-footer .brand img { box-shadow:0 0 0 1px #a2bda659; }
.site-footer nav { display:flex; gap:24px; font-size:14px; }
.site-footer > span { font-size:13px; color:#c1d3c1; }
.site-footer a:hover { opacity:.75; }
.document { max-width:860px; margin:auto; padding:70px 28px 100px; font-size:18px; line-height:1.65; }
.document h1 { font-size:clamp(52px,7vw,80px); line-height:1.05; letter-spacing:-.05em; margin:15px 0 30px; }
.document h2 { font-size:28px; margin:38px 0 13px; letter-spacing:-.025em; }
.document p { margin:14px 0; }
.document a { text-decoration:underline; text-underline-offset:3px; }
.document .eyebrow { font-size:14px; color:var(--muted); }
.document ul { padding-left:23px; }
@media (min-width:1600px) { .hero { padding-left:calc((100vw - 1280px)/2 + 72px); padding-right:calc((100vw - 1280px)/2); } }
@media (max-width:1000px) {
  .hero { min-height:740px; }.hero h1 { font-size:117px; }.hero-description { max-width:320px; }
  .hero-device { width:300px; top:80px; left:40px; }.hero-pie { width:225px; left:-35px; }
  .intro,.knowledge,.capture { gap:40px; }.demo-layout { grid-template-columns:180px minmax(0,1fr); gap:28px; }
  .comparison-demo { padding:22px; }.comparison-demo th,.comparison-demo td { padding:16px 8px; }
  .knowledge-art { height:590px; }.knowledge-device { width:280px; }.closing-inner { gap:40px; }
}
@media (max-width:700px) {
  .site-header { min-height:80px; }.brand { font-size:22px; }.site-header nav { gap:18px; font-size:13px; }.site-header nav a:nth-child(2) { display:none; }
  .hero { display:block; padding:0 24px; border-radius:0 0 50% 5% / 0 0 3% 1%; }
  .hero-copy { padding:30px 0 0; }.hero h1 { font-size:clamp(94px,20vw,142px); }.hero-lead { margin-top:26px; font-size:25px; }.hero-description { max-width:390px; font-size:17px; }
  .hero .button { margin-top:24px; }.hero-art { height:590px; margin-top:30px; }
  .hero-orbit { width:600px; height:600px; top:120px; left:-80px; }.hero-device { width:270px; top:25px; left:calc(50% - 120px); }
  .hero-pie { width:205px; left:-46px; bottom:10px; }
  .intro { grid-template-columns:1fr; padding-block:70px; gap:25px; }.intro h2 { font-size:40px; }.intro-copy { font-size:17px; }
  .comparison { padding-block:65px 55px; border-radius:30px 30px 0 0; }.comparison-intro { display:block; margin-bottom:30px; }.comparison-intro h2 { font-size:67px; }.comparison-intro > p { margin-top:23px; font-size:17px; }
  .demo-layout { display:block; }.example-tabs { flex-direction:row; flex-wrap:wrap; gap:8px; }.example-tab { font-size:17px; min-height:45px; padding:10px 18px; }
  .example-context { margin-top:20px; font-size:16px; }.demo-disclosure { font-size:12px; margin:10px 0 28px; }.demo-disclosure br { display:none; }
  .comparison-demo { padding:22px 18px; transform:none; border-radius:20px; }.comparison-demo caption { font-size:30px; }
  .comparison-demo table { font-size:14px; }.criterion-column { width:21%; }.comparison-demo th,.comparison-demo td { padding:16px 7px; }.comparison-demo thead th,.comparison-demo tbody th { font-size:12px; }
  .next-note { padding:18px; }.next-note p { font-size:23px; }.comparison-details { display:block; font-size:13px; }.comparison-details details { margin-top:20px; }
  .knowledge { grid-template-columns:1fr; padding-block:65px; gap:38px; }.knowledge-copy { grid-row:1; }.knowledge-copy h2 { font-size:48px; }.knowledge-copy p { font-size:17px; }
  .knowledge-art { height:570px; max-width:400px; width:100%; margin:auto; }.knowledge-device { width:285px; }.knowledge-orbit { left:-40px; width:450px; height:450px; }
  .capture { grid-template-columns:1fr; gap:30px; padding-block:0 75px; }.capture h2 { font-size:47px; }.capture > div > p { max-width:none; }.capture-list strong { font-size:24px; }
  .closing { border-radius:50% 50% 0 0 / 5% 5% 0 0; }.closing-inner { grid-template-columns:1fr; padding-block:74px 65px; gap:38px; }.closing h2 { font-size:76px; }.closing-detail { max-width:340px; }.closing-detail img { display:none; }.closing-detail p { margin-top:0!important; }
  .site-footer { flex-wrap:wrap; padding-block:28px; }.site-footer > span { width:100%; }.site-footer nav { gap:18px; }
  .document { padding-top:45px; font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }