:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #282c27; background: #f3f0e9; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.page { max-width: 1320px; margin: 0 auto; padding: 36px 38px 24px; }
.intro { padding: 0 0 32px; border-bottom: 1px solid #d6d2c8; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; color: #68705f; text-transform: uppercase; font-size: 10px; letter-spacing: 2.6px; font-weight: 600; }
.seal { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #7c856b; border-radius: 50%; font: 19px Georgia, serif; letter-spacing: 0; }
.intro-line { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
h1 { margin: 0; font: 400 clamp(36px, 4.9vw, 66px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -2px; }
h1 em { font-weight: 400; color: #747a5c; }
.lead { margin: 0 0 5px; font-size: 13px; line-height: 1.8; color: #77786d; }
.solutions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; align-items: start; }
.solution { min-width: 0; }
.solution-heading { min-height: 152px; }
.number { display: flex; align-items: center; gap: 11px; color: #79815e; font: 15px Georgia, serif; margin: 0 0 12px; }
.number span { color: #8e9084; font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 1.1px; }
h2 { font: 400 clamp(19px, 2.2vw, 28px)/1.16 Georgia, "Times New Roman", serif; margin: 0 0 9px; letter-spacing: -.35px; }
.description { color: #808175; font-size: 11px; line-height: 1.6; margin: 0 0 12px; }
.open { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 4px; font-size: 10px; text-decoration: none; border-bottom: 1px solid #a0a28f; color: #60664d; }
.open:hover { color: #20281c; border-color: #20281c; }
.open:focus-visible { outline: 2px solid #79815e; outline-offset: 5px; border-radius: 2px; }
.device { padding: 0 7px 8px; border: 1px solid #353b35; border-radius: 27px; background: #2e342e; box-shadow: 0 9px 25px #353b3513; }
.device-top { height: 25px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.device-top span { height: 3px; width: 31px; background: #626960; border-radius: 5px; }
.device-top i { width: 4px; height: 4px; background: #596557; border-radius: 50%; }
.frame-window { width: 100%; aspect-ratio: 390 / 780; position: relative; overflow: hidden; border-radius: 18px; background: white; }
iframe { display: block; width: 390px; height: 780px; border: 0; transform-origin: top left; background: white; }
footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 17px; border-top: 1px solid #d6d2c8; font-size: 9px; line-height: 1.7; color: #96968a; }
@media (max-width: 800px) {
  .page { padding: 24px 20px 18px; }
  .intro-line { gap: 20px; }
  .lead { font-size: 11px; }
  .solutions { gap: 16px; }
  .solution-heading { min-height: 150px; }
  .number { align-items: flex-start; gap: 7px; }
  .number span { font-size: 8px; letter-spacing: .6px; line-height: 1.4; }
}
@media (max-width: 520px) {
  .page { padding: 20px 10px 16px; }
  .eyebrow { margin-bottom: 20px; font-size: 8px; letter-spacing: 1.7px; }
  .intro { padding-bottom: 20px; }
  .intro-line { display: block; }
  h1 { font-size: 39px; letter-spacing: -1.4px; }
  .lead { font-size: 11px; line-height: 1.6; margin: 15px 0 0; }
  .lead br { display: none; }
  .solutions { gap: 8px; margin-top: 20px; }
  .solution-heading { min-height: 149px; }
  .number { flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 9px; }
  .number span { font-size: 7px; letter-spacing: .4px; min-height: 20px; }
  h2 { font-size: 18px; min-height: 43px; margin-bottom: 4px; }
  .description { display: none; }
  .open { gap: 4px; font-size: 8px; line-height: 1.5; }
  .device { border-radius: 13px; padding: 0 3px 4px; }
  .device-top { height: 13px; gap: 4px; }
  .device-top span { width: 19px; height: 2px; }
  .device-top i { height: 3px; width: 3px; }
  .frame-window { border-radius: 9px; }
  footer { font-size: 8px; margin-top: 20px; }
}