/* Shared OKI Shop styling. Edit colours in :root. */
:root {
  --ink:#203a33;
  --text:#35463f;
  --green:#285c48;
  --paper:#faf9f5;
  --line:#dce3da;
  --soft:#eaf0e5;
  --muted:#5b6b62;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:17px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;
}
a {
  color:var(--green);
  text-underline-offset:4px;
}
a:hover {
  color:#133e2b;
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #c27835;
  outline-offset:5px;
}
.wrap {
  width:min(1150px,calc(100% - 44px));
  margin:auto;
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.brand {
  font-size:27px;
  font-weight:800;
  letter-spacing:-1px;
  text-decoration:none;
  color:var(--ink);
}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  font-size:14px;
}
nav a {
  text-decoration:none;
}
.langs {
  white-space:nowrap;
}
.langs a[aria-current] {
  font-weight:800;
  text-decoration:underline;
}
h1,h2,h3 {
  color:var(--ink);
  line-height:1.15;
  letter-spacing:-.035em;
}
h1 {
  font-size:clamp(40px,5.1vw,65px);
  margin:15px 0 25px;
}
h2 {
  font-size:clamp(29px,3.4vw,41px);
  margin:10px 0 20px;
}
h3 {
  font-size:23px;
  margin:0 0 15px;
}
p {
  margin:0 0 19px;
}
.eyebrow {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:750;
  color:var(--green);
}
.hero {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:65px;
  align-items:center;
  padding:75px 0 65px;
}
.lead {
  font-size:20px;
  line-height:1.6;
}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:25px 0 18px;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 21px;
  border-radius:8px;
  background:var(--green);
  color:white;
  text-decoration:none;
  font-weight:650;
  font-size:15px;
  border:1px solid var(--green);
}
.btn:hover {
  background:#1b4333;
  color:white;
}
.btn.alt {
  background:transparent;
  color:var(--green);
}
.btn.alt:hover {
  background:var(--soft);
}
.small {
  font-size:14px;
  color:var(--muted);
}
.hero-art {
  position:relative;
  padding:27px;
  background:var(--soft);
  border-radius:24px;
  transform:rotate(1deg);
}
.hero-art img {
  width:100%;
  display:block;
  border-radius:10px;
  box-shadow:0 15px 35px #203a3314;
}
.hero-label {
  background:#fff;
  border:1px solid var(--line);
  padding:15px 19px;
  border-radius:12px;
  margin:20px 0 0;
  transform:rotate(-1deg);
  font-size:15px;
}
.hero-label strong {
  display:block;
  font-size:21px;
  color:var(--ink);
}
.band {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:21px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.section {
  padding:76px 0;
  border-bottom:1px solid var(--line);
}
.intro {
  max-width:710px;
}
.two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:30px;
}
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px;
}
.card.soft {
  background:var(--soft);
}
.tag {
  display:inline-block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--green);
  margin-bottom:19px;
}
.demo {
  display:grid;
  grid-template-columns:1.45fr .75fr;
  gap:30px;
  align-items:start;
  margin-top:35px;
}
figure {
  margin:0;
}
figure a {
  display:block;
}
figure img {
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 28px #203a330a;
}
.admin-img {
  max-height:510px;
  object-fit:contain;
  background:#f4f3ee;
}
figcaption {
  font-size:14px;
  margin-top:15px;
}
figcaption strong {
  display:block;
  color:var(--ink);
  font-size:17px;
}
.steps,.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:33px;
}
.step {
  padding-top:22px;
  border-top:2px solid #c4d6c6;
}
.num {
  font-size:14px;
  color:var(--green);
  font-weight:bold;
  margin-bottom:15px;
}
.step h3 {
  font-size:21px;
}
.step p,.feature p {
  font-size:15px;
}
.feature {
  padding:22px 0;
  border-top:1px solid var(--line);
}
.feature h3 {
  font-size:19px;
}
.pricing {
  background:var(--soft);
  border-radius:20px;
  padding:40px;
  margin-top:30px;
}
.prices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.price {
  padding:25px;
  background:white;
  border-radius:12px;
  border:1px solid var(--line);
}
.amount {
  font-size:48px;
  line-height:1.2;
  letter-spacing:-.05em;
  font-weight:750;
  color:var(--ink);
}
.amount span {
  font-size:19px;
  font-weight:400;
  letter-spacing:0;
}
.price p {
  margin:12px 0 0;
}
.included {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 25px;
  padding-left:20px;
  margin:28px 0;
}
.payment-note {
  padding:18px 22px;
  border-left:3px solid var(--green);
  background:#f7faf4;
  margin-top:28px;
}
.payment-note p {
  margin:0;
}
.faq {
  max-width:850px;
  margin-top:30px;
}
details {
  border-top:1px solid var(--line);
  padding:20px 0;
}
details:last-child {
  border-bottom:1px solid var(--line);
}
summary {
  font-weight:650;
  color:var(--ink);
  cursor:pointer;
}
details p {
  margin:14px 0 0;
}
.final {
  padding:55px;
  background:var(--ink);
  color:#eff4ed;
  border-radius:22px;
  margin:65px 0;
}
.final h2 {
  color:white;
}
.final .eyebrow {
  color:#bad2b9;
}
.final .btn {
  background:#e6efde;
  border-color:#e6efde;
  color:var(--ink);
}
.final .btn.alt {
  color:white;
  background:transparent;
}
.guides {
  display:flex;
  gap:15px 28px;
  flex-wrap:wrap;
  font-size:14px;
}
footer {
  padding:15px 0 38px;
  font-size:13px;
}
footer nav {
  font-size:13px;
  gap:15px;
}
footer p {
  margin:17px 0;
}
@media(max-width:800px) {
  header {
    align-items:flex-start;
  }
  nav {
    gap:11px 15px;
    justify-content:flex-end;
  }
  .hero {
    grid-template-columns:1fr;
    gap:30px;
    padding:45px 0;
  }
  .hero-art {
    max-width:480px;
    margin:auto;
    transform:none;
  }
  .steps,.features {
    grid-template-columns:1fr;
  }
  .two {
    grid-template-columns:1fr;
  }
  .demo {
    grid-template-columns:1fr;
  }
  .demo figure:nth-child(2) {
    max-width:390px;
  }
  .prices {
    grid-template-columns:1fr;
  }
  .section {
    padding:48px 0;
  }
  .pricing {
    padding:24px;
  }
  .included {
    grid-template-columns:1fr;
  }
  .final {
    padding:30px;
  }
  .band {
    gap:8px 20px;
  }
  .wrap {
    width:calc(100% - 32px);
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}
.info-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 58px 0;
}
.info-page h1 {
  font-size: clamp(34px, 4.5vw, 49px);
}
.info-page h2 {
  font-size: 25px;
  margin-top: 36px;
}
.info-page h3 {
  font-size: 21px;
  margin-top: 26px;
}
.info-page address {
  font-style: normal;
  line-height: 1.9;
}
.info-page ul, .info-page ol {
  padding-left: 24px;
}
.muted {
  color: var(--muted);
}