:root {
  --paper:#f4f2e9;
  --ink:#193c34;
  --muted:#53655c;
  --line:#c9d1c2;
  --lime:#d4e88a;
  --white:#fffef8;
  --orange:#ae482b;
  --serif:Georgia,'YuMincho','Hiragino Mincho ProN',serif;
  --sans:'Avenir Next','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-underline-offset:5px
}

button {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px
}

img {
  display:block;
  max-width:100%;
  height:auto
}

figure {
  margin:0
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  line-height:1.35
}

h1,h2 {
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.055em
}

p+p {
  margin-top:16px
}

::selection {
  background:var(--lime);
  color:var(--ink)
}

.wrap {
  width:min(1280px,calc(100% - 96px));
  margin:auto
}

.skip {
  position:fixed;
  top:-90px;
  left:20px;
  z-index:99;
  padding:10px 20px;
  background:var(--lime)
}

.skip:focus {
  top:12px
}

.site-header {
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:10
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:24px
}

.brand {
  text-decoration:none;
  display:flex;
  gap:13px;
  align-items:center;
  line-height:1.3
}

.nav {
  display:flex;
  align-items:center;
  gap:32px
}

.nav a {
  font-size:12px;
  text-decoration:none
}

.nav a:hover {
  text-decoration:underline
}

.lang {
  border-left:1px solid var(--line);
  padding-left:24px
}

.menu-toggle {
  display:none
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:.17em;
  font-weight:600;
  text-transform:uppercase
}

.eyebrow:before {
  content:'';
  height:6px;
  width:6px;
  border-radius:50%;
  background:currentColor
}

.home-hero {
  position:relative;
  overflow:hidden;
  padding:65px 0 76px
}

.hero-topline {
  display:flex;
  justify-content:space-between;
  margin-bottom:50px
}

.edition {
  font-family:var(--serif);
  font-style:italic;
  font-size:13px
}

.hero-grid {
  display:grid;
  grid-template-columns:.95fr 1.12fr;
  gap:55px;
  align-items:center
}

.hero-copy h1 {
  font-size:clamp(48px,5.1vw,78px);
  line-height:1.34
}

.hero-copy h1 em {
  font-style:normal;
  color:#577447
}

.hero-copy .lead {
  max-width:440px;
  margin-top:28px;
  font-size:14px;
  line-height:2.1
}

.actions {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:13px 22px;
  min-height:50px;
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  text-decoration:none;
  font-size:12px;
  transition:background .2s,transform .2s
}

.button:hover {
  background:#315a49;
  transform:translateY(-2px)
}

.button:after {
  content:'↗';
  font-size:19px;
  line-height:1
}

.button.secondary {
  background:transparent;
  color:var(--ink)
}

.text-link {
  font-size:12px;
  display:inline-block
}

.hero-art {
  position:relative;
  padding:32px 0 60px 20px;
  min-width:0
}

.route-lines {
  position:absolute;
  inset:-25px -80px -15px -50px;
  width:calc(100% + 130px);
  height:100%;
  color:#aaba9e;
  pointer-events:none
}

.hero-desktop {
  position:relative;
  z-index:1;
  transform:rotate(-3deg);
  box-shadow:0 25px 45px #193c3423;
  border-radius:8px;
  width:100%
}

.hero-phone {
  position:absolute;
  width:22%;
  bottom:0;
  right:4%;
  z-index:2;
  transform:rotate(5deg);
  border-radius:19px;
  box-shadow:0 18px 30px #102c3440;
  border:4px solid #263e37
}

.art-note {
  position:absolute;
  left:6%;
  bottom:6px;
  font-size:10px;
  letter-spacing:.12em;
  line-height:1.8
}

.art-note span {
  display:block;
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:0;
  font-style:italic
}

.hero-foot {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:23px;
  margin-top:60px;
  font-size:11px
}

.hero-foot span:last-child {
  font-family:var(--serif);
  font-style:italic
}

.section {
  padding:92px 0
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:45px
}

.section-heading h2 {
  font-size:clamp(32px,3.4vw,48px);
  margin-top:17px
}

.section-heading>p {
  max-width:400px;
  font-size:13px
}

.dark {
  background:var(--ink);
  color:var(--paper)
}

.dark .eyebrow {
  color:var(--lime)
}

.dark .text-link {
  color:var(--lime)
}

.experience-tabs {
  display:none;
  gap:0;
  border-bottom:1px solid #ffffff35;
  margin-bottom:38px
}

.enhanced .experience-tabs {
  display:flex
}

.experience-tabs button {
  flex:1;
  min-height:60px;
  text-align:left;
  border:0;
  border-bottom:3px solid transparent;
  background:none;
  color:#c3cfc5;
  cursor:pointer;
  font-size:13px;
  padding:12px 20px
}

.experience-tabs button:first-child {
  padding-left:0
}

.experience-tabs button[aria-pressed=true] {
  color:var(--lime);
  border-color:var(--lime)
}

.experience-tabs button span {
  font-family:var(--serif);
  font-style:italic;
  margin-right:12px
}

.experience-panel {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:60px;
  align-items:center;
  margin-top:25px
}

.experience-panel[hidden] {
  display:none
}

.experience-panel img {
  border-radius:6px;
  width:100%;
  border:1px solid #ffffff30
}

.experience-panel h3 {
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  margin:18px 0
}

.experience-panel p {
  font-size:13px;
  color:#d3dbd2
}

.experience-panel .text-link {
  margin-top:25px
}

.flow-line {
  font-size:10px;
  letter-spacing:.08em;
  color:var(--lime);
  padding-top:22px;
  border-top:1px solid #ffffff30;
  margin-top:26px
}

.product-row {
  display:grid;
  grid-template-columns:54px 62px 1fr 1.2fr 36px;
  gap:25px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line);
  text-decoration:none
}

.product-row:last-child {
  border-bottom:1px solid var(--line)
}

.product-row:hover .row-arrow {
  transform:translate(4px,-4px)
}

.product-row:hover h3 {
  text-decoration:underline;
  text-underline-offset:6px
}

.product-row .row-number {
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  font-size:23px
}

.product-icon {
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:13px
}

.cut-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--lime);
  font-family:var(--serif);
  font-size:34px
}

.product-row h3 {
  font-weight:500;
  font-size:21px;
  letter-spacing:-.04em
}

.product-row small {
  font-size:10px;
  display:block;
  color:var(--muted);
  margin-top:4px
}

.product-row p {
  font-size:13px
}

.row-arrow {
  font-size:26px;
  transition:transform .2s
}

.section-intro {
  max-width:750px;
  font-family:var(--serif);
  font-size:clamp(26px,3vw,39px);
  line-height:1.65
}

.start-strip {
  background:#e4e8d9;
  padding:62px 0
}

.start-strip .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.start-strip h2 {
  font-size:32px;
  margin-bottom:12px
}

.start-strip p {
  font-size:13px;
  max-width:690px
}

.start-strip .actions {
  margin:0;
  flex-shrink:0
}

.site-footer {
  padding:50px 0 22px
}

.footer-top {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:48px;
  padding-bottom:45px
}

.footer-top h2 {
  font-family:var(--serif);
  font-size:25px;
  font-weight:500;
  margin-bottom:12px
}

.footer-top h3 {
  font-size:11px;
  letter-spacing:.1em;
  margin-bottom:18px
}

.footer-top p {
  font-size:12px;
  color:var(--muted);
  max-width:290px
}

.footer-links {
  display:grid;
  gap:9px;
  font-size:12px
}

.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted)
}

.product-hero {
  padding:55px 0 0
}

.breadcrumb {
  font-size:11px;
  color:var(--muted);
  margin-bottom:45px
}

.breadcrumb a {
  text-decoration:none
}

.product-head {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:80px;
  align-items:end
}

.product-head h1 {
  font-size:clamp(42px,4.5vw,68px);
  margin-top:20px
}

.product-head .lead {
  font-size:14px;
  margin-top:20px;
  line-height:2
}

.product-label {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:15px;
  font-weight:600
}

.product-label .product-icon {
  width:34px;
  height:34px;
  border-radius:8px
}

.requirements {
  font-size:11px;
  color:var(--muted);
  margin-top:15px
}

.product-stage {
  margin:45px 0 0;
  padding:42px 50px;
  background:#dce2cf;
  position:relative;
  overflow:hidden
}

.product-stage>img {
  width:100%;
  max-width:1000px;
  margin:auto;
  border-radius:8px;
  box-shadow:0 17px 35px #193c3426
}

.product-stage figcaption {
  font-size:11px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:25px
}

.product-stage.phone-stage {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:40px 100px;
  gap:65px
}

.phone-pair {
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:center
}

.phone-pair img {
  width:44%;
  max-width:205px;
  border-radius:22px;
  box-shadow:0 15px 30px #193c3426
}

.phone-pair img+img {
  margin-top:45px
}

.stage-note {
  font-family:var(--serif);
  font-size:38px;
  line-height:1.6
}

.stage-note small {
  font-family:var(--sans);
  display:block;
  font-size:11px;
  margin-top:25px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}

.feature {
  border-top:1px solid var(--line);
  padding-top:24px
}

.feature .num {
  font-family:var(--serif);
  font-size:16px;
  font-style:italic;
  color:var(--muted)
}

.feature h3 {
  font-size:19px;
  font-weight:500;
  margin:18px 0 15px
}

.feature p {
  font-size:13px;
  color:var(--muted)
}

.how-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px
}

.how-grid h2 {
  font-size:43px;
  margin:18px 0 25px
}

.how-grid>.intro>p {
  font-size:14px;
  color:#d1dace
}

.steps {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:steps
}

.steps li {
  display:grid;
  grid-template-columns:35px 1fr;
  gap:20px;
  padding:25px 0;
  border-top:1px solid #ffffff32;
  counter-increment:steps
}

.steps li:before {
  content:counter(steps,decimal-leading-zero);
  color:var(--lime);
  font-family:var(--serif);
  font-style:italic
}

.steps h3 {
  font-size:17px;
  font-weight:500;
  margin-bottom:10px
}

.steps p {
  font-size:13px;
  color:#d3dbd2
}

.details-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px
}

.details-grid h2 {
  font-size:34px
}

.faq {
  border-top:1px solid var(--line);
  padding:20px 0
}

.faq summary {
  font-size:15px;
  cursor:pointer;
  font-weight:500
}

.faq p {
  font-size:13px;
  margin-top:15px;
  color:var(--muted)
}

.resource-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  margin-top:30px
}

.download-box {
  border-top:1px solid var(--line);
  padding:60px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}

.download-box h2 {
  font-size:34px;
  margin-bottom:16px
}

.download-box p {
  font-size:13px
}

.code-block {
  background:#102d26;
  color:#e0ebce;
  overflow:auto;
  position:relative;
  padding:28px;
  font-size:12px;
  line-height:2
}

.code-block pre {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.copy-button {
  border:1px solid #91ab86;
  color:var(--lime);
  background:transparent;
  padding:5px 12px;
  cursor:pointer;
  font-size:11px;
  margin-bottom:18px
}

.copy-status {
  font-size:11px;
  color:var(--lime)
}

.workflow-head {
  padding:65px 0
}

.workflow-head h1 {
  font-size:clamp(43px,5vw,68px);
  margin:22px 0
}

.workflow-head p {
  max-width:680px
}

.handoff {
  padding:32px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:70px .85fr 1fr;
  gap:40px
}

.handoff .big-num {
  font-family:var(--serif);
  font-style:italic;
  font-size:40px;
  color:#6c815d
}

.handoff h2 {
  font-size:28px;
  margin-bottom:14px
}

.handoff p {
  font-size:13px
}

.handoff .text-link {
  margin-top:16px
}

.handoff .file-tag {
  display:inline-block;
  font:11px var(--sans);
  background:#e1e7d4;
  padding:5px 10px;
  margin:15px 0
}

.compatibility {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  margin-top:20px
}

.compatibility th,.compatibility td {
  padding:12px 8px;
  text-align:left;
  border-bottom:1px solid var(--line)
}

.compatibility th {
  font-weight:500
}

.anchor-target {
  scroll-margin-top:35px
}

.sample-video {
  aspect-ratio:16/9;
  width:100%;
  border:0;
  margin-top:30px
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(min-width:1000px) {
  .home-hero .hero-copy {
  animation:arrive .7s ease both
}

.hero-art {
  animation:arrive 1s .1s ease both
}


}

@keyframes arrive {
  from {
  opacity:.4;
  transform:translateY(15px)
}

to {
  opacity:1;
  transform:translateY(0)
}


}

@media(max-width:1050px) {
  .wrap {
  width:calc(100% - 64px)
}

.nav {
  gap:22px
}

.hero-grid {
  gap:30px
}

.hero-copy h1 {
  font-size:52px
}

.experience-panel {
  gap:35px
}

.product-head {
  gap:40px
}

.how-grid,.details-grid {
  gap:55px
}

.product-stage.phone-stage {
  padding:40px;
  gap:35px
}

.product-row {
  grid-template-columns:35px 52px 1fr 1fr 25px;
  gap:16px
}

.product-row h3 {
  font-size:18px
}

.stage-note {
  font-size:30px
}


}

@media(max-width:760px) {
  .wrap {
  width:calc(100% - 40px)
}

.header-inner {
  min-height:72px
}

.nav {
  gap:16px
}

.nav a {
  font-size:10px
}

.lang {
  padding-left:14px
}

.nav .desktop-link {
  display:none
}

.home-hero {
  padding:32px 0 40px
}

.hero-topline {
  margin-bottom:33px
}

.edition {
  font-size:11px
}

.hero-grid {
  grid-template-columns:1fr;
  gap:30px
}

.hero-copy h1 {
  font-size:clamp(43px,9vw,66px)
}

.hero-copy .lead {
  font-size:13px;
  max-width:480px;
  margin-top:22px
}

.hero-art {
  max-width:600px;
  padding:25px 10px 60px;
  margin:5px auto 0;
  width:100%
}

.hero-phone {
  right:6%;
  width:21%
}

.art-note {
  font-size:9px;
  left:4%
}

.art-note span {
  font-size:23px
}

.hero-foot {
  margin-top:35px;
  gap:20px;
  font-size:10px
}

.hero-foot span:last-child {
  display:none
}

.section {
  padding:60px 0
}

.section-heading {
  display:block;
  margin-bottom:30px
}

.section-heading h2 {
  font-size:32px
}

.section-heading>p {
  margin-top:22px
}

.experience-tabs button {
  font-size:11px;
  padding:12px 5px;
  line-height:1.6
}

.experience-tabs button span {
  display:block;
  margin:0
}

.experience-panel {
  grid-template-columns:1fr;
  gap:25px
}

.experience-panel h3 {
  font-size:29px
}

.product-row {
  grid-template-columns:28px 44px 1fr 22px;
  gap:13px;
  padding:23px 0
}

.product-icon {
  width:44px;
  height:44px;
  border-radius:10px
}

.product-row p {
  grid-column:3;
  grid-row:2;
  font-size:12px
}

.product-row .row-arrow {
  grid-column:4;
  grid-row:1 / span 2
}

.product-row h3 {
  font-size:17px
}

.product-row small {
  font-size:9px
}

.product-row .row-number {
  font-size:18px
}

.start-strip {
  padding:44px 0
}

.start-strip .wrap {
  display:block
}

.start-strip .actions {
  margin-top:25px
}

.start-strip h2 {
  font-size:27px
}

.footer-top {
  grid-template-columns:1fr 1fr;
  gap:32px
}

.footer-top>div:first-child {
  grid-column:1/-1
}

.footer-bottom {
  gap:16px
}

.product-hero {
  padding-top:30px
}

.breadcrumb {
  margin-bottom:30px
}

.product-head {
  grid-template-columns:1fr;
  gap:20px
}

.product-head h1 {
  font-size:42px
}

.product-head .actions {
  margin-top:0
}

.product-stage {
  padding:20px 12px;
  margin-top:30px
}

.product-stage figcaption {
  font-size:9px;
  display:block;
  margin-top:16px
}

.product-stage figcaption span {
  display:block
}

.product-stage.phone-stage {
  grid-template-columns:1fr;
  padding:25px;
  gap:25px
}

.phone-pair {
  max-width:330px;
  margin:auto
}

.stage-note {
  font-size:26px
}

.stage-note br {
  display:none
}

.stage-note small {
  margin-top:12px
}

.feature-grid {
  grid-template-columns:1fr;
  gap:28px
}

.feature h3 {
  margin:12px 0
}

.feature p {
  max-width:580px
}

.how-grid,.details-grid {
  grid-template-columns:1fr;
  gap:35px
}

.how-grid h2 {
  font-size:34px
}

.steps li {
  gap:10px
}

.download-box {
  grid-template-columns:1fr;
  gap:25px;
  padding:40px 0
}

.download-box h2 {
  font-size:29px
}

.handoff {
  grid-template-columns:37px 1fr;
  gap:20px
}

.handoff>div:last-child {
  grid-column:2
}

.handoff h2 {
  font-size:25px
}

.handoff .big-num {
  font-size:29px
}

.workflow-head {
  padding:40px 0
}

.workflow-head h1 {
  font-size:42px
}


}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*:before,*:after {
  animation:none!important;
  transition:none!important
}


}

/* Keep the artwork caption clear of the desktop and phone previews. */
.hero-art {
  padding-bottom:105px
}

.hero-phone {
  bottom:12px
}

.art-note {
  bottom:9px;
  max-width:70%
}

.hero-topline>.eyebrow {
  white-space:nowrap
}

@media(max-width:760px) {
  .hero-topline {
  gap:20px
}

.hero-topline .edition {
  max-width:160px;
  text-align:right
}

.hero-art {
  padding-bottom:100px
}

.art-note span {
  font-size:22px
}

.hero-copy h1 {
  font-size:clamp(43px,9vw,66px)
}


}

h2,h3 {
  text-wrap:balance
}
.nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-context {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.site-context-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  font-size: 11px;
}
.site-name {
  text-decoration: none;
  letter-spacing: .035em;
}
.site-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-links a, .site-name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.site-links a {
  text-decoration: none;
}
.site-links a:hover, .site-name:hover {
  text-decoration: underline;
}
.brand strong {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.footer-bottom {
  align-items: center;
}
@media (max-width: 760px) {
  .site-context-inner {
    font-size: 10px;
    gap: 12px;
  }
  .site-links {
    gap: 18px;
  }
  .brand strong {
    font-size: 23px;
  }
}