@charset "UTF-8";
:root {
  --paper:#f4f2eb;
  --ink:#232820;
  --muted:#62695c;
  --line:#d4d6ca;
  --green:#3a5944;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:30px }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}
button,a { -webkit-tap-highlight-color:transparent }
a { color:inherit; text-decoration:none }
button { font:inherit }
img { max-width:100%; display:block }
h1,h2,h3,p,figure,dl,dd { margin:0 }
button,a,summary { touch-action:manipulation }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #ad6a3f;
  outline-offset:6px;
}
::selection { background:#d6dfca; color:#17231d }
[hidden] { display:none!important }
.wrap { width:calc(100% - 112px); max-width:1328px; margin-inline:auto }
.eyebrow {
  text-transform:uppercase;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.5;
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  transform:translateY(-160%);
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:20;
}
.skip-link:focus { transform:none }
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:106px;
  border-bottom:1px solid var(--line);
  gap:24px;
}
.wordmark { font-size:27px; letter-spacing:-1.3px; font-weight:700; line-height:1; white-space:nowrap }
.brand-dot { color:#687b4a }
.site-header nav { display:flex; gap:38px; align-items:center; font-size:13px }
.site-header nav a { position:relative; padding-block:12px; white-space:nowrap }
.site-header nav a:after {
  content:'';
  position:absolute;
  bottom:8px;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after { transform:scaleX(1) }
.hero {
  display:grid;
  grid-template-columns:1.22fr 1fr;
  gap:70px;
  padding-top:64px;
  padding-bottom:68px;
  align-items:center;
}
.hero-copy { padding-bottom:6px; min-width:0 }
.hero .eyebrow { color:#5c6354; font-size:10px }
.hero h1 {
  font-size:clamp(64px,6.4vw,96px);
  font-weight:500;
  letter-spacing:-.07em;
  line-height:1.03;
  margin-top:30px;
  white-space:nowrap;
}
.hero em { font-family:var(--serif); font-weight:400; letter-spacing:-.075em; color:#56644e }
.hero-description { font-size:18px; line-height:1.7; max-width:390px; color:var(--muted); margin-top:28px }
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  min-height:55px;
  padding:14px 21px;
  border-radius:5px;
  font-size:13px;
  font-weight:600;
  transition:background .2s,transform .25s var(--ease),box-shadow .25s;
}
.button:hover { transform:translateY(-2px) }
.button span { font-size:22px; line-height:1; font-weight:400; transition:transform .25s var(--ease) }
.button-dark { background:var(--ink); color:#f8f7f0; margin-top:31px; box-shadow:0 2px 0 #131d12 }
.button-dark:hover { background:#3a4d38; box-shadow:0 4px 10px #2337211a }
.button-dark:hover span { transform:translateY(2px) }
.hero-art {
  position:relative;
  background:radial-gradient(ellipse at 50% 37%,#f0f2e8 0%,#e8ebdd 73%);
  border:1px solid #dce0d0;
  border-radius:10px;
  min-width:0;
  display:block;
  overflow:hidden;
  transition:border-color .35s;
}
.hero-art:hover { border-color:#c1c9b3 }
.art-topline { display:flex; justify-content:space-between; padding:22px 26px; font-size:11px; color:#5e6853; letter-spacing:.025em }
.art-topline>span:last-child { color:#70785f }
.device-scene { height:440px; position:relative; display:grid; place-items:center; isolation:isolate }
.portrait-phone {
  width:192px;
  border:7px solid #262c26;
  border-radius:29px;
  background:#101c15;
  box-shadow:1px 1px 0 2px #72776a,18px 28px 35px -10px #4c58474d;
  overflow:hidden;
  transform:rotate(9deg);
  transition:transform .65s var(--ease);
  position:relative;
  z-index:2;
}
.portrait-phone img { width:100%; height:auto }
.hero-art:hover .portrait-phone,.hero-art:focus-visible .portrait-phone { transform:rotate(5deg) translateY(-5px) }
.orbit { position:absolute; width:350px; height:350px; border:1px solid #cfd4c3; border-radius:50%; z-index:-1 }
.art-caption { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #cfd5c2; margin:0 26px; padding:20px 0 }
.art-caption strong { font-size:19px; letter-spacing:-.035em; font-weight:600 }
.art-caption small { display:block; font-size:12px; color:#5e6853; margin-top:2px }
.circle-arrow { width:36px; height:36px; flex-shrink:0; border:1px solid #bbc3ac; border-radius:50%; display:grid; place-items:center; color:#47523d; font-size:20px; transition:background .3s }
.hero-art:hover .circle-arrow { background:#dae1cf }
.project-section { padding-top:28px }
.project { background:#17271f; color:#f4f2e7; border-radius:10px; overflow:hidden; padding:48px 48px 0 }
.project-heading { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-bottom:36px; border-bottom:1px solid #ffffff20; margin-bottom:28px }
.project-identity { display:flex; align-items:center; gap:23px }
.app-icon { width:72px; height:72px; border-radius:19px }
.project-heading .eyebrow { color:#b1c0af; font-size:10px }
.project-heading h2 { font-size:64px; letter-spacing:-.06em; font-weight:400; line-height:1.1; margin-top:8px }
.project-intro { font-size:15px; color:#c3cebe; line-height:1.8 }
.project-demo { --mode-accent:#d0e1bd; --mode-soft:#334b3b; }
.project-demo[data-mode=intervals] { --mode-accent:#e7c2b6; --mode-soft:#503a33 }
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:24px }
.mode-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  width:304px;
  max-width:100%;
  padding:4px;
  border:1px solid #ffffff20;
  border-radius:8px;
  position:relative;
  isolation:isolate;
  background:#101e17;
  flex-shrink:0;
}
.mode-tabs:before {
  content:'';
  position:absolute;
  left:4px;
  top:4px;
  bottom:4px;
  width:calc((100% - 12px)/2);
  background:var(--mode-soft);
  border-radius:5px;
  box-shadow:inset 0 -2px 0 var(--mode-accent),0 2px 6px #0002;
  transition:transform .35s var(--ease),background .35s,box-shadow .35s;
  z-index:-1;
}
.mode-tabs[data-mode=intervals]:before { transform:translateX(calc(100% + 4px)) }
.mode-tabs button { border:0; background:transparent; color:#a4b4a4; padding:10px 18px; cursor:pointer; font-size:14px; font-weight:500; min-height:46px; min-width:0; transition:color .2s }
.mode-tabs button[aria-selected=true] { color:#f7f6ed }
.mode-tabs button:hover { color:#fff }
.demo-note { font-size:12px; color:#adbdab }
/* Both panels reserve their height, keeping the page still when modes change. */
.demo-panels { display:grid; margin-top:8px }
.demo-panel { grid-area:1/1; min-width:0 }
.demo-panel[hidden] { display:block!important; visibility:hidden; pointer-events:none }
.demo-panel:not([hidden]) { animation:mode-enter .3s var(--ease) both }
@keyframes mode-enter { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.mode-description { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:34px 0; }
.mode-description h3 { font-size:clamp(32px,3.2vw,44px); letter-spacing:-.045em; font-weight:400; line-height:1.12 }
.mode-description h3 em { font-family:var(--serif); font-weight:400; color:var(--mode-accent) }
.mode-description p { font-size:15px; line-height:1.75; color:#bdcbb9; max-width:440px; justify-self:end }
.landscape-phone { border:7px solid #252d27; box-shadow:0 0 0 1px #66705f,0 20px 36px #0004; border-radius:30px; overflow:hidden; max-width:980px; margin:auto; background:#0c1c13; aspect-ratio:2354/1094 }
.landscape-phone img { width:100%; height:100%; object-fit:contain }
.screen-figure figcaption { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#a3b69f; padding:24px 0 27px; line-height:1.5 }
.project-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:29px 0 37px; border-top:1px solid #ffffff20 }
.project-details>div+div { border-left:1px solid #ffffff20; padding-left:32px }
.project-details h3 { font-size:16px; letter-spacing:-.02em; margin:0 0 10px; font-weight:500; line-height:1.4 }
.project-details p { font-size:14px; color:#b2c2ad; max-width:280px; line-height:1.75 }
.launch-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff20; gap:24px; padding:26px 0; font-size:12px }
.platform-status { display:flex; gap:40px }
.platform-status dt { font-size:13px; font-weight:600; color:#e3e9da }
.platform-status dd { color:#a8bba2; font-size:12px; margin-top:3px }
.launch-row a { color:#d9e7cc; display:flex; align-items:center; gap:23px }
.launch-row a:hover { text-decoration:underline; text-underline-offset:5px }
.launch-row a span { font-size:18px }
.about-section { display:grid; grid-template-columns:1fr 1.65fr; gap:100px; padding-top:104px; padding-bottom:100px }
.about-heading .eyebrow { color:#626c59 }
.about-heading h2 { font-size:clamp(39px,4.2vw,57px); font-weight:400; line-height:1.12; letter-spacing:-.055em; margin-top:18px }
.about-heading h2 em { font-family:var(--serif); font-weight:400; color:#627158 }
.about-copy p { font-size:16px; line-height:1.85; color:var(--muted); max-width:620px; margin-top:20px }
.about-copy p:first-child { margin-top:0 }
.about-copy p.lead { font-size:21px; line-height:1.6; color:#354330; max-width:570px }
.support-section { border-top:1px solid var(--line); padding-top:62px; padding-bottom:98px; display:grid; grid-template-columns:1fr 1.65fr; gap:100px }
.support-heading h2 { font-size:34px; line-height:1.3; font-weight:400; letter-spacing:-.045em }
.questions details { border-bottom:1px solid var(--line) }
.questions details:first-child { border-top:1px solid var(--line) }
.questions summary { cursor:pointer; list-style:none; font-size:15px; font-weight:500; display:flex; justify-content:space-between; gap:24px; padding:21px 0; align-items:center }
.questions summary::-webkit-details-marker { display:none }
.questions summary span { font-size:23px; font-weight:400; line-height:1; transition:transform .25s var(--ease); color:#637653 }
.questions details[open] summary span { transform:rotate(45deg) }
.questions details p { font-size:14px; line-height:1.8; color:#626e58; padding-bottom:24px; max-width:94% }
.questions details a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere }
.contact-section { background:#dfe5d4 }
.contact-inner { display:grid; grid-template-columns:1fr auto; column-gap:48px; row-gap:22px; align-items:center; padding:62px 0 }
.contact-heading p { color:#56634c; font-size:16px; line-height:1.8; margin-top:21px }
.contact-inner .button { justify-self:end }
.contact-inner h2 { font-size:clamp(43px,4.8vw,64px); font-weight:400; letter-spacing:-.06em; line-height:1.1 }
.button-light { background:#f7f7ee; color:#35482d; min-width:200px; border:1px solid #bdc8ac; box-shadow:0 2px 0 #c2ceb4 }
.button-light:hover { background:white; box-shadow:0 5px 14px #344a3012 }
.button-light:hover span { transform:translate(2px,-2px) }
.email-link { grid-column:1; justify-self:start; display:inline-block; font-size:13px; border-bottom:1px solid #98a587; color:#4e6140; overflow-wrap:anywhere }
.site-footer { padding-top:38px; padding-bottom:38px; display:flex; justify-content:space-between; align-items:center; gap:30px }
.site-footer>.wordmark { font-size:22px }
.site-footer>span { font-size:12px; color:#62695a }
.site-footer>div { text-align:right; display:flex; flex-direction:column; gap:4px; font-size:12px; color:#626e56 }
.site-footer a:hover { text-decoration:underline; text-underline-offset:4px }
.site-footer small { font-size:11px; color:#62695a }
@media(min-width:1500px) {
  .hero { gap:100px }
  .hero-art { max-width:500px; justify-self:end; width:100% }
  .device-scene { height:460px }
  .portrait-phone { width:200px }
}
@media(max-width:1100px) {
  .wrap { width:calc(100% - 72px) }
  .hero { gap:35px; grid-template-columns:1.3fr 1fr }
  .hero h1 { font-size:clamp(56px,6.4vw,76px) }
  .hero-description { font-size:17px }
  .device-scene { height:385px }
  .portrait-phone { width:160px }
  .orbit { width:280px; height:280px }
  .art-topline { padding-inline:20px }
  .art-caption { margin-inline:20px }
  .project { padding:36px 32px 0 }
  .project-heading { gap:30px }
  .project-heading h2 { font-size:50px }
  .app-icon { width:62px; height:62px; border-radius:16px }
  .project-intro { font-size:14px }
  .mode-description { gap:35px }
  .mode-description p { font-size:14px }
  .project-details { gap:22px }
  .project-details>div+div { padding-left:22px }
  .project-details h3 { font-size:15px }
  .about-section,.support-section { gap:65px; grid-template-columns:.85fr 1.65fr }
  .about-copy p.lead { font-size:20px }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 44px) }
  .site-header { height:86px; gap:18px }
  .wordmark { font-size:24px }
  .site-header nav { gap:18px; font-size:12px }
  .hero { grid-template-columns:1fr; gap:42px; padding-top:47px; padding-bottom:39px }
  .hero h1 { font-size:clamp(52px,10.5vw,76px); margin-top:24px; letter-spacing:-.065em }
  .hero-description { font-size:17px; max-width:420px; margin-top:22px }
  .hero .eyebrow { font-size:10px; letter-spacing:.12em }
  .hero .button { margin-top:25px }
  .hero-art { width:100%; max-width:520px; justify-self:center }
  .art-topline { font-size:11px; padding:20px 22px }
  .device-scene { height:380px }
  .portrait-phone { width:176px }
  .orbit { width:310px; height:310px }
  .art-caption { margin-inline:22px; padding-block:18px }
  .project-section { padding-top:20px }
  .project { padding:28px 22px 0; border-radius:8px }
  .project-heading { display:block; margin-bottom:22px; padding-bottom:26px }
  .project-identity { gap:17px }
  .app-icon { width:56px; height:56px; border-radius:14px }
  .project-heading h2 { font-size:45px }
  .project-heading .eyebrow { font-size:10px; letter-spacing:.1em }
  .project-intro { font-size:14px; margin-top:21px }
  .project-intro br { display:none }
  .demo-toolbar { display:block }
  .demo-note { display:none }
  .mode-tabs { width:100% }
  .mode-tabs button { font-size:14px; padding-inline:12px }
  .mode-description { display:block; padding:27px 0 25px }
  .mode-description h3 { font-size:36px }
  .mode-description p { margin-top:17px; font-size:15px; max-width:100%; line-height:1.7 }
  .landscape-phone { border-width:5px; border-radius:14px }
  .screen-figure figcaption { font-size:11px; padding:19px 0 24px; gap:12px }
  .screen-figure figcaption span:last-child { display:none }
  .project-details { grid-template-columns:1fr; padding:26px 0 30px; gap:22px }
  .project-details>div+div { padding-left:0; border-left:0 }
  .project-details h3 { font-size:16px; margin-bottom:6px }
  .project-details p { max-width:100%; font-size:14px }
  .launch-row { align-items:flex-start; flex-direction:column; padding-block:24px; gap:22px }
  .platform-status { gap:38px }
  .launch-row a { font-size:12px }
  .about-section { grid-template-columns:1fr; gap:30px; padding-top:74px; padding-bottom:70px }
  .about-heading h2 { font-size:45px }
  .about-copy p.lead { font-size:20px }
  .about-copy p { font-size:16px }
  .support-section { grid-template-columns:1fr; gap:30px; padding-top:42px; padding-bottom:65px }
  .support-heading h2 { font-size:33px }
  .questions summary { font-size:15px; min-height:64px }
  .questions details p { font-size:14px; max-width:100% }
  .contact-inner { grid-template-columns:1fr; row-gap:25px; padding-block:46px }
  .contact-inner .button { justify-self:start }
  .contact-heading p { font-size:15px; margin-top:18px }
  .contact-heading p br { display:none }
  .contact-inner h2 { font-size:48px }
  .button-light { min-width:190px }
  .email-link { font-size:13px }
  .site-footer { display:grid; grid-template-columns:1fr auto; padding-block:30px; column-gap:16px; row-gap:12px }
  .site-footer>span { grid-column:1; grid-row:2; font-size:11px }
  .site-footer>div { grid-column:2; grid-row:1/3; font-size:11px }
  .site-footer small { font-size:10px }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px) }
  .hero h1 { font-size:44px }
  .site-header { gap:12px }
  .site-header nav { gap:12px; font-size:11px }
  .wordmark { font-size:22px }
  .project { padding-inline:16px }
  .project-heading h2 { font-size:38px }
  .app-icon { width:49px; height:49px }
  .mode-description h3 { font-size:32px }
  .contact-inner h2 { font-size:42px }
  .about-heading h2 { font-size:42px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { transition:none!important; animation:none!important }
  .hero-art:hover .portrait-phone,.hero-art:focus-visible .portrait-phone { transform:rotate(9deg) }
  .button:hover,.button:hover span { transform:none }
}
@media print {
  .site-header nav,.button,.hero-art,.contact-section,.questions { display:none }
  .wrap { width:100% }
  body { background:white }
  .hero,.about-section,.support-section { padding-block:25px }
  .demo-panels { display:block }
  .demo-panel[hidden] { display:none!important }
}