/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,:before,:after,::backdrop {
      --tw-font-weight:initial
    }
    
  }
  
}
@layer theme {
  :root,:host {
    --font-sans:"Manrope",sans-serif;
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing:.25rem;
    --font-weight-extrabold:800;
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
  
}
@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring:where(:not(iframe)) {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
      
    }
    
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
  ::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
  
}
@layer components;
@layer utilities {
  .visible {
    visibility:visible
  }
  .static {
    position:static
  }
  .mx-auto {
    margin-inline:auto
  }
  .flex {
    display:flex
  }
  .grid {
    display:grid
  }
  .hidden {
    display:none
  }
  .inline-flex {
    display:inline-flex
  }
  .w-full {
    width:100%
  }
  .grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .flex-col {
    flex-direction:column
  }
  .items-center {
    align-items:center
  }
  .items-start {
    align-items:flex-start
  }
  .justify-between {
    justify-content:space-between
  }
  .justify-center {
    justify-content:center
  }
  .gap-2 {
    gap:calc(var(--spacing) * 2)
  }
  .gap-3 {
    gap:calc(var(--spacing) * 3)
  }
  .gap-4 {
    gap:calc(var(--spacing) * 4)
  }
  .gap-5 {
    gap:calc(var(--spacing) * 5)
  }
  .overflow-hidden {
    overflow:hidden
  }
  .text-center {
    text-align:center
  }
  .font-extrabold {
    --tw-font-weight:var(--font-weight-extrabold);
    font-weight:var(--font-weight-extrabold)
  }
  
}
:root {
  font-family:var(--font-sans);
  color:#182f38;
  font-synthesis:none;
  scroll-behavior:smooth;
  background:#fff;
  scroll-padding-top:100px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7px;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
  width:21px;
  height:21px
}
[hidden] {
  display:none!important
}
.svg-defs {
  width:0;
  height:0;
  position:absolute;
  overflow:hidden
}
.wrap {
  max-width:1248px;
  margin:auto;
  padding:0 36px
}
.skip-link {
  z-index:100;
  background:#fff;
  padding:12px;
  position:fixed;
  top:-100px;
  left:20px
}
.skip-link:focus {
  top:10px
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline-offset:5px;
  outline:3px solid #77ad52
}
.top-strip {
  color:#d5e7df;
  background:#123737;
  font-size:.75rem
}
.top-strip .wrap {
  justify-content:space-between;
  gap:20px;
  padding-block:9px;
  display:flex
}
.top-strip a {
  align-items:center;
  gap:8px;
  display:flex
}
.top-strip svg {
  width:14px;
  height:14px
}
.site-header {
  z-index:20;
  backdrop-filter:blur(14px);
  background:#ffffffed;
  border-bottom:1px solid #eaf0ed;
  position:sticky;
  top:0
}
.nav-row {
  justify-content:space-between;
  align-items:center;
  gap:32px;
  height:90px;
  display:flex
}
.brand {
  color:#0a2852;
  letter-spacing:-1px;
  flex-shrink:0;
  align-items:center;
  gap:10px;
  font-size:23px;
  font-weight:500;
  line-height:1.2;
  display:flex
}
.brand strong {
  font-weight:800
}
.brand small {
  letter-spacing:1.1px;
  color:#708282;
  margin-top:6px;
  font-size:8px;
  font-weight:700;
  display:block
}
.brand-mark {
  mix-blend-mode:multiply;
  width:44px;
  height:46px;
  display:block;
  position:relative;
  overflow:hidden
}
.brand-mark img {
  width:68px;
  max-width:none;
  height:auto;
  position:absolute;
  top:-3px;
  left:-12px
}
nav {
  align-items:center;
  gap:25px;
  display:flex
}
nav a {
  color:#5c6f72;
  white-space:nowrap;
  font-size:.8125rem;
  font-weight:600
}
nav a:hover {
  color:#2f702d
}
.button {
  color:#fff;
  background:#244d38;
  border:1px solid #244d38;
  border-radius:7px;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:17px 24px;
  font-size:.875rem;
  font-weight:700;
  transition:background .2s,transform .2s;
  display:inline-flex
}
.button:hover {
  background:#153c28;
  transform:translateY(-1px)
}
.button svg {
  width:18px;
  height:18px
}
.button-small {
  gap:10px;
  padding:12px 17px;
  font-size:.8125rem
}
.menu-toggle {
  display:none
}
.hero {
  background:radial-gradient(at 91% 60%,#dfebd948,#0000 55%),#fbfdfb;
  border-bottom:1px solid #e6eee7;
  position:relative;
  overflow:hidden
}
.hero-grid {
  grid-template-columns:.94fr 1.06fr;
  align-items:center;
  gap:35px;
  padding-block:84px 85px;
  display:grid
}
.eyebrow {
  letter-spacing:1.5px;
  color:#527653;
  align-items:center;
  gap:9px;
  font-size:.6875rem;
  font-weight:800;
  display:flex
}
.eyebrow>span {
  background:#66995b;
  border-radius:50%;
  width:7px;
  height:7px
}
h1 {
  letter-spacing:-2.6px;
  margin:23px 0;
  font-size:clamp(38px,4.1vw,57px);
  font-weight:800;
  line-height:1.13
}
em {
  color:#4b8542;
  font-style:normal
}
h1 em {
  font-weight:650
}
.hero-copy>p {
  color:#718079;
  max-width:455px;
  font-size:1rem;
  line-height:1.9
}
.hero-actions {
  align-items:center;
  gap:23px;
  margin:29px 0;
  display:flex
}
.text-link {
  color:#2d5140;
  align-items:center;
  gap:12px;
  font-size:.8125rem;
  font-weight:750;
  display:inline-flex
}
.text-link:hover {
  color:#548638
}
.availability {
  color:#7b8881;
  align-items:center;
  gap:12px;
  margin-top:31px;
  font-size:.75rem;
  display:flex
}
.availability span {
  align-items:center;
  gap:6px;
  display:flex
}
.availability svg {
  width:16px;
  height:16px
}
.availability i {
  background:#a4b1a4;
  border-radius:50%;
  width:3px;
  height:3px
}
.product-scene {
  min-width:0;
  padding:30px 0 60px;
  position:relative
}
.scene-label {
  color:#607566;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-size:11px;
  display:flex
}
.tiny-square {
  background:#8eae65;
  width:7px;
  height:7px;
  transform:rotate(45deg)
}
.dashboard {
  background:#fff;
  border:1px solid #dce6df;
  border-radius:10px;
  width:112%;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 60px #203d2517
}
.dash-top {
  color:#24453c;
  border-bottom:1px solid #edf1ee;
  align-items:center;
  gap:7px;
  height:44px;
  padding:10px 14px;
  font-size:10px;
  display:flex
}
.mini-brand {
  color:#286043;
  letter-spacing:-2px;
  background:#e7f0de;
  border-radius:6px;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  padding-right:2px;
  font-size:10px;
  font-weight:800;
  display:flex
}
.mini-brand span {
  color:#91ab6a
}
.dash-school {
  color:#9ba79f;
  margin-left:auto;
  font-size:8px
}
.avatar {
  color:#5a6c3a;
  background:#e9eecf;
  border-radius:50%;
  place-items:center;
  width:24px;
  height:24px;
  font-size:8px;
  font-weight:800;
  display:grid
}
.dash-layout {
  grid-template-columns:106px 1fr;
  display:grid
}
.dash-sidebar {
  background:#fbfcfa;
  border-right:1px solid #edf1ed;
  padding:18px 8px
}
.dash-sidebar>span {
  color:#8a988e;
  align-items:center;
  gap:8px;
  padding:10px 7px;
  font-size:9px;
  display:flex
}
.dash-sidebar svg {
  width:12px;
  height:12px
}
.dash-sidebar .selected {
  color:#376340;
  background:#eaf2e5;
  border-radius:4px
}
.dash-main {
  padding:21px 16px 22px
}
.dash-title {
  justify-content:space-between;
  align-items:center;
  gap:8px;
  display:flex
}
.dash-title small {
  color:#9aa89d;
  letter-spacing:1px;
  font-size:7px
}
.dash-title h3 {
  letter-spacing:-.4px;
  margin:4px 0 19px;
  font-size:15px;
  font-weight:800
}
.sample-tag {
  color:#8c9989;
  background:#f4f6f0;
  border-radius:4px;
  padding:5px 6px;
  font-size:7px
}
.metric-row {
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  display:grid
}
.metric-row>div {
  background:#f4f7f0;
  border:1px solid #e8eee3;
  border-radius:6px;
  padding:12px
}
.metric-row>div:nth-child(2) {
  background:#f0f6f5;
  border-color:#e2ebeb
}
.metric-row>div:nth-child(3) {
  background:#fcf6ec;
  border-color:#f0e9dc
}
.metric-row span {
  color:#849181;
  font-size:8px;
  display:block
}
.metric-row strong {
  letter-spacing:-1px;
  color:#34523a;
  margin:6px 0;
  font-size:23px;
  font-weight:750;
  display:block
}
.metric-row strong small {
  font-size:13px;
  display:inline
}
.metric-row small {
  color:#899885;
  font-size:7px;
  display:block
}
.dash-panels {
  grid-template-columns:1.07fr 1fr;
  gap:9px;
  margin-top:15px;
  display:grid
}
.chart-panel,.updates-panel {
  border:1px solid #e8eee8;
  border-radius:5px;
  padding:12px
}
.panel-title {
  justify-content:space-between;
  gap:5px;
  font-size:9px;
  font-weight:750;
  display:flex
}
.panel-title>span {
  color:#9ca69a;
  font-size:7px;
  font-weight:500
}
.bar-chart {
  background:repeating-linear-gradient(0deg,#0000 0 29px,#f0f3ee 30px);
  align-items:flex-end;
  gap:15px;
  height:116px;
  padding:18px 7px 0;
  display:flex
}
.bar-chart>div {
  flex-direction:column;
  flex:1;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  height:100%;
  display:flex
}
.bar-chart i {
  height:var(--bar);
  background:#afc797;
  border-radius:3px 3px 0 0;
  width:100%;
  display:block
}
.bar-chart>div:nth-child(4) i {
  background:#537e48
}
.bar-chart span {
  color:#a1ab9b;
  background:#fff;
  font-size:7px
}
.updates-panel>div:not(:first-child) {
  align-items:center;
  gap:6px;
  margin-top:13px;
  display:flex
}
.update-icon {
  color:#6c9352;
  background:#edf5e7;
  border-radius:5px;
  place-items:center;
  width:23px;
  height:23px;
  display:grid
}
.update-icon.blue {
  color:#6f96af;
  background:#edf4f9
}
.update-icon.orange {
  color:#bd9c69;
  background:#fcf3e6
}
.update-icon svg {
  width:11px;
  height:11px
}
.updates-panel p {
  color:#596954;
  margin:0;
  font-size:8px;
  font-weight:650
}
.updates-panel small {
  color:#a5aea2;
  margin-top:4px;
  font-size:6px;
  font-weight:500;
  display:block
}
.phone-preview {
  z-index:2;
  background:#fff;
  border:5px solid #203c37;
  border-radius:26px;
  width:169px;
  padding:25px 11px 12px;
  position:absolute;
  bottom:3px;
  right:-31px;
  transform:rotate(4deg);
  box-shadow:0 15px 30px #102d322b
}
.phone-notch {
  background:#203c37;
  border-radius:0 0 9px 9px;
  width:52px;
  height:10px;
  position:absolute;
  top:0;
  left:calc(50% - 26px)
}
.phone-heading {
  color:#2f543f;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  font-size:9px;
  font-weight:800;
  display:flex
}
.phone-heading .avatar {
  width:19px;
  height:19px;
  font-size:6px
}
.phone-preview>small {
  color:#91a18f;
  letter-spacing:.5px;
  font-size:7px
}
.phone-preview h3 {
  letter-spacing:-.5px;
  margin:6px 0 13px;
  font-size:16px;
  font-weight:750;
  line-height:1.35
}
.phone-homework {
  background:#edf4e6;
  border-radius:9px;
  padding:11px
}
.phone-homework>svg {
  color:#66854c;
  width:16px;
  height:16px;
  margin-bottom:10px
}
.phone-homework small {
  letter-spacing:.5px;
  color:#879a76;
  font-size:6px;
  display:block
}
.phone-homework strong {
  margin:4px 0;
  font-size:11px;
  display:block
}
.phone-homework p {
  color:#8c9b82;
  font-size:7px
}
.phone-homework>span {
  color:#5a7b43;
  justify-content:space-between;
  margin-top:15px;
  font-size:7px;
  font-weight:700;
  display:flex
}
.phone-payment {
  border:1px solid #e7eee3;
  border-radius:6px;
  align-items:center;
  gap:5px;
  margin-top:10px;
  padding:9px 5px;
  font-size:7px;
  display:flex
}
.phone-payment>span {
  color:#6c8d51;
  background:#edf5e6;
  border-radius:50%;
  padding:2px
}
.phone-payment svg {
  width:11px;
  height:11px
}
.phone-payment small {
  color:#99a491;
  margin-top:4px;
  font-size:6px;
  display:block
}
.phone-dock {
  color:#a9b5a4;
  justify-content:space-between;
  margin:15px 7px 1px;
  display:flex
}
.phone-dock svg {
  width:12px;
  height:12px
}
.phone-dock svg:first-child {
  color:#537e48
}
.scene-foot {
  color:#729068;
  flex-direction:column;
  gap:8px;
  font-size:10px;
  display:flex;
  position:absolute;
  bottom:0;
  left:6px
}
.scene-foot span {
  align-items:center;
  gap:6px;
  display:flex
}
.scene-foot svg {
  width:13px;
  height:13px
}
.scene-foot small {
  color:#9aa696;
  padding-left:19px;
  font-size:9px
}
.value-strip {
  background:#fff;
  border-bottom:1px solid #e8eeea
}
.value-strip .wrap {
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding-block:27px;
  display:flex
}
.value-strip p {
  color:#8b9890;
  margin:0;
  font-size:.75rem;
  line-height:1.7
}
.value-strip strong {
  color:#476050;
  font-weight:700
}
.value-strip .wrap>span {
  color:#536c5c;
  align-items:center;
  gap:10px;
  font-size:.8125rem;
  font-weight:650;
  display:flex
}
.value-strip svg {
  color:#88a177;
  width:21px;
  height:21px
}
.section {
  padding:91px 0
}
.section-heading {
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  margin-bottom:43px;
  display:flex
}
h2 {
  letter-spacing:-1.6px;
  margin:17px 0 0;
  font-size:clamp(30px,3.2vw,43px);
  font-weight:750;
  line-height:1.22
}
.section-heading>p {
  color:#7a8980;
  max-width:400px;
  margin:0 0 3px;
  font-size:.9375rem;
  line-height:1.9
}
.feature-grid {
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  display:grid
}
.feature-card {
  background:#fff;
  border:1px solid #e3ebe4;
  border-radius:12px;
  padding:27px 25px;
  transition:box-shadow .2s,border-color .2s
}
.feature-card:hover {
  border-color:#c2d5b8;
  box-shadow:0 12px 28px #244e2910
}
.feature-top {
  justify-content:space-between;
  align-items:center;
  display:flex
}
.feature-top>span:last-child {
  color:#b5c0b2;
  font-size:12px;
  font-weight:600
}
.feature-icon {
  color:#6b8e52;
  background:#eef4e8;
  border-radius:10px;
  place-items:center;
  width:44px;
  height:44px;
  display:grid
}
.feature-card:nth-child(2) .feature-icon,.feature-card:nth-child(5) .feature-icon {
  color:#6192a0;
  background:#eef5f7
}
.feature-card:nth-child(3) .feature-icon,.feature-card:nth-child(6) .feature-icon {
  color:#a58c58;
  background:#f8f3e9
}
.feature-card h3 {
  letter-spacing:-.4px;
  margin:23px 0 12px;
  font-size:1.0625rem;
  font-weight:750
}
.feature-card>p {
  color:#7b8b80;
  margin:0;
  font-size:.875rem;
  line-height:1.85
}
.feature-tags {
  border-top:1px solid #eef2ed;
  flex-wrap:wrap;
  gap:7px;
  margin-top:23px;
  padding-top:18px;
  display:flex
}
.feature-tags span {
  color:#7a8f74;
  background:#f6f8f4;
  border-radius:4px;
  padding:5px 8px;
  font-size:.6875rem
}
.community {
  background:#f5f8f2;
  border-block:1px solid #eaf0e4
}
.center-heading {
  text-align:center
}
.center-heading .eyebrow {
  justify-content:center
}
.center-heading p {
  color:#83907e;
  margin-top:18px;
  font-size:1rem
}
.role-tabs {
  background:#eaf0e4;
  border-radius:8px;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:33px auto 32px;
  padding:6px;
  display:flex
}
.role-tabs button {
  color:#7b8d72;
  border-radius:5px;
  padding:12px 24px;
  font-size:.875rem;
  font-weight:650
}
.role-tabs button[aria-selected=true] {
  color:#375d39;
  background:#fff;
  box-shadow:0 2px 5px #3251220c
}
.role-panel {
  grid-template-columns:1fr 1fr;
  gap:76px;
  max-width:990px;
  margin:auto;
  padding:18px 0;
  display:grid
}
.role-copy h3 {
  letter-spacing:-1px;
  margin:16px 0;
  font-size:30px;
  font-weight:750;
  line-height:1.3
}
.role-copy>p {
  color:#7c8d77;
  margin-bottom:21px;
  font-size:.9375rem;
  line-height:1.85
}
.role-checks {
  align-self:center
}
.role-checks>div {
  border-bottom:1px solid #dfe8d8;
  align-items:center;
  gap:17px;
  padding:23px 0;
  display:flex
}
.role-checks>div>span {
  color:#afbea4;
  font-size:12px
}
.role-checks p {
  color:#809175;
  flex:1;
  margin:0;
  font-size:.8125rem;
  line-height:1.7
}
.role-checks strong {
  color:#445a3d;
  margin-bottom:5px;
  font-size:.9375rem;
  display:block
}
.role-checks svg {
  color:#8aa678;
  width:17px;
  height:17px
}
.platform-grid {
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px;
  display:grid
}
.platform-art {
  background:#eff7fa;
  border-radius:18px;
  padding:24px 20px 74px;
  position:relative
}
.platform-art img {
  mix-blend-mode:multiply;
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(#0000,#000 15% 90%,#0000);
  mask-image:linear-gradient(#0000,#000 15% 90%,#0000)
}
.platform-caption {
  background:#fff;
  border-radius:9px;
  align-items:center;
  gap:12px;
  padding:16px;
  display:flex;
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  box-shadow:0 4px 20px #34544f0c
}
.platform-caption strong {
  font-size:.8125rem;
  font-weight:700;
  display:block
}
.platform-caption div>span {
  color:#8b9b90;
  margin-top:7px;
  font-size:.75rem;
  display:block
}
.platform-copy>p {
  color:#7c8b82;
  margin:22px 0;
  font-size:.9375rem;
  line-height:1.9
}
.platform-items {
  gap:20px;
  margin:27px 0;
  display:grid
}
.platform-items>div {
  gap:15px;
  display:flex
}
.platform-items svg {
  color:#7c9a67;
  margin-top:4px
}
.platform-items p {
  color:#84907d;
  margin:0;
  font-size:.875rem;
  line-height:1.75
}
.platform-items strong {
  color:#415637;
  margin-bottom:5px;
  display:block
}
.journey {
  color:#eaf3e8;
  background:#163d35;
  padding:73px 0
}
.journey .wrap {
  grid-template-columns:1fr 1fr;
  gap:90px;
  display:grid
}
.journey .eyebrow {
  color:#a5c194
}
.journey em {
  color:#b6d89f
}
.journey h2 {
  font-size:39px
}
.journey ol {
  margin:0;
  padding:0;
  list-style:none
}
.journey li {
  border-bottom:1px solid #ffffff17;
  gap:21px;
  padding:18px 0;
  display:flex
}
.journey li:last-child {
  border:0
}
.journey li>span {
  color:#afc998;
  border:1px solid #6c8f72;
  border-radius:50%;
  flex-shrink:0;
  place-items:center;
  width:35px;
  height:35px;
  font-size:11px;
  display:grid
}
.journey h3 {
  margin:2px 0 9px;
  font-size:1rem;
  font-weight:650
}
.journey p {
  color:#a1b8a6;
  max-width:380px;
  margin:0;
  font-size:.875rem;
  line-height:1.8
}
.faq-grid {
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  display:grid
}
.faq-grid>div>p {
  color:#8a9786;
  margin:24px 0;
  font-size:.875rem;
  line-height:2
}
.faq-grid a {
  color:#517541;
  font-weight:650
}
.faq-list details {
  border-bottom:1px solid #e6ece2
}
.faq-list summary {
  cursor:pointer;
  color:#3e5237;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:22px 0;
  font-size:.9375rem;
  font-weight:650;
  line-height:1.6;
  list-style:none;
  display:flex
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary>span {
  color:#809771;
  font-size:22px;
  font-weight:400;
  transition:transform .2s
}
.faq-list details[open] summary>span {
  transform:rotate(45deg)
}
.faq-list details>p {
  color:#82907a;
  margin:0 25px 22px 0;
  font-size:.875rem;
  line-height:1.9
}
.contact {
  background:#f1f6ed;
  border-top:1px solid #e5eddf
}
.contact-grid {
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:80px;
  display:grid
}
.contact-copy h2 {
  font-size:49px
}
.contact-copy>p {
  color:#829078;
  max-width:395px;
  margin:24px 0 31px;
  font-size:1rem;
  line-height:1.85
}
.contact-email {
  color:#355832;
  align-items:center;
  gap:15px;
  font-size:1rem;
  font-weight:650;
  display:flex
}
.contact-email>svg {
  color:#7b9b68;
  width:24px;
  height:24px
}
.contact-email small {
  letter-spacing:1.3px;
  color:#879c77;
  margin-bottom:7px;
  font-size:10px;
  display:block
}
.contact-email>span:last-child {
  color:#7a9468;
  margin-left:5px
}
.contact-availability {
  gap:10px;
  margin-top:32px;
  display:flex
}
.contact-availability span {
  color:#839475;
  border:1px solid #dbe6d3;
  border-radius:5px;
  padding:7px 12px;
  font-size:.6875rem
}
.contact-form-card {
  background:#fff;
  border:1px solid #e4eddf;
  border-radius:14px;
  padding:32px;
  box-shadow:0 15px 40px #3b52250a
}
.contact-form-card h3 {
  letter-spacing:-.7px;
  margin:0 0 9px;
  font-size:23px;
  font-weight:750
}
.contact-form-card>p {
  color:#94a08d;
  margin-bottom:26px;
  font-size:.875rem
}
.form-row {
  grid-template-columns:1fr 1fr;
  gap:17px;
  display:grid
}
.contact-form-card label {
  color:#586c4d;
  margin-bottom:9px;
  font-size:.75rem;
  font-weight:700;
  display:block
}
.contact-form-card label>span {
  color:#9caf8b
}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea {
  color:#3b5331;
  background:#fff;
  border:1px solid #dfe7d9;
  border-radius:6px;
  outline:none;
  width:100%;
  min-width:0;
  margin-bottom:20px;
  padding:12px;
  font-size:.8125rem
}
.contact-form-card textarea {
  resize:vertical;
  min-height:95px
}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus {
  border-color:#85a270;
  box-shadow:0 0 0 3px #8bac6418
}
.contact-form-card input::placeholder,.contact-form-card textarea::placeholder {
  color:#a9b49e
}
.contact-form-card .button {
  width:100%
}
.form-note {
  color:#9aa68f;
  text-align:center;
  margin:14px 5px 0;
  font-size:.6875rem;
  line-height:1.8
}
#enquiry-result {
  color:#3f6031;
  border-top:1px solid #e1e9d9;
  margin-top:25px;
  padding-top:24px;
  font-size:.875rem;
  line-height:1.8
}
#enquiry-result>.button {
  margin:15px 0
}
#enquiry-result details,#enquiry-result textarea {
  margin-top:12px
}
#copy-status {
  font-size:.75rem
}
.site-footer {
  background:#fff
}
.footer-top {
  grid-template-columns:1.6fr .7fr 1fr;
  gap:50px;
  padding-block:55px 40px;
  display:grid
}
.footer-top p {
  color:#94a08e;
  margin:19px 0;
  font-size:.8125rem;
  line-height:1.9
}
.footer-top h3 {
  color:#5d7051;
  margin:4px 0 20px;
  font-size:.8125rem;
  font-weight:750
}
.footer-top>div:not(:first-child) a,.footer-top>div:not(:first-child)>span {
  color:#87977d;
  overflow-wrap:anywhere;
  margin-bottom:14px;
  font-size:.8125rem;
  display:block
}
.footer-top a:hover {
  color:#416b34
}
.footer-bottom {
  color:#a0ac96;
  border-top:1px solid #edf1e9;
  justify-content:space-between;
  gap:20px;
  padding-block:21px;
  font-size:.6875rem;
  display:flex
}
@media (width>=1400px) {
  .hero-grid {
    gap:55px;
    padding-block:105px 100px
  }
  .dashboard {
    width:112%
  }
  .product-scene {
    margin-right:35px
  }
  h1 {
    font-size:59px
  }
  
}
@media (width<=1120px) {
  .wrap {
    padding-inline:28px
  }
  .nav-row {
    gap:20px
  }
  .brand {
    font-size:20px
  }
  nav {
    gap:16px
  }
  .nav-demo {
    padding:12px;
    font-size:12px
  }
  .hero-grid {
    gap:24px
  }
  .hero-actions {
    flex-wrap:wrap;
    gap:17px
  }
  .dashboard {
    width:110%
  }
  .phone-preview {
    width:152px;
    right:-10px
  }
  .hero-copy>p {
    font-size:.9375rem
  }
  .dash-layout {
    grid-template-columns:78px 1fr
  }
  .dash-sidebar>span {
    gap:4px;
    font-size:7px
  }
  .dash-sidebar {
    padding-inline:4px
  }
  .dash-main {
    padding:16px 10px
  }
  .dash-panels {
    grid-template-columns:1fr
  }
  .updates-panel {
    display:none
  }
  .metric-row>div {
    padding:9px
  }
  .metric-row strong {
    font-size:20px
  }
  .platform-grid,.role-panel,.contact-grid,.faq-grid {
    gap:45px
  }
  .feature-card {
    padding:22px
  }
  .value-strip .wrap {
    gap:20px
  }
  .value-strip .wrap>span {
    gap:6px;
    font-size:.75rem
  }
  .contact-email {
    font-size:.875rem
  }
  .contact-copy h2 {
    font-size:43px
  }
  
}
@media (width<=900px) {
  .nav-demo {
    display:none
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    padding-block:65px
  }
  .hero-copy h1 {
    font-size:42px
  }
  .hero-copy .button {
    padding:15px;
    font-size:13px
  }
  .product-scene {
    padding-bottom:90px
  }
  .phone-preview {
    bottom:12px
  }
  .metric-row {
    grid-template-columns:1fr 1fr
  }
  .metric-row>div:last-child {
    display:none
  }
  .dash-title h3 {
    font-size:11px
  }
  .sample-tag {
    display:none
  }
  .dash-layout {
    grid-template-columns:64px 1fr
  }
  .dash-sidebar svg {
    display:none
  }
  .dashboard {
    width:106%
  }
  .scene-foot {
    font-size:9px;
    bottom:-20px
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .value-strip .wrap {
    flex-wrap:wrap;
    justify-content:center
  }
  .value-strip p {
    text-align:center;
    width:100%
  }
  .value-strip p br {
    display:none
  }
  .value-strip p strong {
    margin-left:7px
  }
  .section-heading {
    gap:30px
  }
  .section-heading>p {
    max-width:330px
  }
  .platform-grid {
    gap:30px
  }
  .platform-caption {
    padding:12px;
    left:12px;
    right:12px
  }
  .platform-caption strong {
    font-size:11px
  }
  .platform-caption div>span {
    font-size:10px
  }
  .platform-copy h2 {
    font-size:33px
  }
  .contact-grid {
    grid-template-columns:1fr
  }
  .contact-copy {
    text-align:center;
    max-width:600px;
    margin:auto
  }
  .contact-copy .eyebrow,.contact-email,.contact-availability {
    justify-content:center
  }
  .contact-copy>p {
    max-width:none
  }
  .contact-form-card {
    width:100%;
    max-width:650px;
    margin:auto
  }
  .journey .wrap {
    gap:40px
  }
  .journey h2 {
    font-size:34px
  }
  .faq-grid {
    gap:40px
  }
  .footer-top {
    grid-template-columns:1.3fr .6fr 1fr;
    gap:25px
  }
  
}
@media (width<=700px) {
  .wrap {
    padding-inline:22px
  }
  .top-strip .wrap {
    justify-content:center
  }
  .top-strip .wrap>span {
    display:none
  }
  .nav-row {
    height:78px
  }
  .brand {
    font-size:21px
  }
  .brand small {
    font-size:7px
  }
  .menu-toggle {
    border:1px solid #e3eade;
    border-radius:7px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    padding:10px;
    display:flex
  }
  .menu-toggle span {
    background:#426235;
    width:20px;
    height:2px
  }
  nav {
    background:#fff;
    border-bottom:1px solid #e5ebdf;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:15px 22px 22px;
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    box-shadow:0 10px 20px #183b2b0a
  }
  nav[data-open=true] {
    display:flex
  }
  nav a {
    padding:12px 10px;
    font-size:15px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:26px;
    padding-block:46px 55px
  }
  .hero-copy {
    max-width:540px
  }
  .hero-copy h1 {
    letter-spacing:-1.9px;
    font-size:clamp(38px,9vw,52px)
  }
  .hero-copy>p {
    font-size:1rem
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .button {
    font-size:.875rem
  }
  .availability {
    margin-top:25px
  }
  .product-scene {
    margin:8px 10px 0 0;
    padding:10px 0 65px
  }
  .dashboard {
    width:100%
  }
  .dash-layout {
    grid-template-columns:92px 1fr
  }
  .dash-sidebar svg {
    display:block
  }
  .dash-sidebar>span {
    gap:6px;
    font-size:8px
  }
  .dash-title h3 {
    font-size:14px
  }
  .metric-row {
    grid-template-columns:repeat(3,1fr)
  }
  .metric-row>div:last-child {
    display:block
  }
  .dash-main {
    padding:18px 12px
  }
  .phone-preview {
    width:147px;
    bottom:0;
    right:-13px
  }
  .chart-panel {
    padding-bottom:8px
  }
  .bar-chart {
    max-width:220px;
    height:104px
  }
  .scene-foot {
    max-width:195px;
    font-size:9px;
    bottom:0;
    left:0
  }
  .scene-foot small {
    font-size:8px
  }
  .value-strip .wrap {
    gap:20px 27px;
    padding-block:24px
  }
  .value-strip .wrap>span {
    font-size:11px
  }
  .value-strip svg {
    width:17px;
    height:17px
  }
  .section {
    padding:62px 0
  }
  .section-heading {
    margin-bottom:28px;
    display:block
  }
  h2 {
    letter-spacing:-1.2px;
    font-size:34px
  }
  .section-heading>p {
    max-width:none;
    margin-top:22px
  }
  .feature-grid {
    gap:15px
  }
  .feature-card {
    padding:20px
  }
  .feature-card h3 {
    font-size:1rem
  }
  .feature-card>p {
    font-size:.8125rem
  }
  .feature-tags span {
    font-size:10px
  }
  .role-tabs {
    gap:2px;
    width:100%;
    padding:5px
  }
  .role-tabs button {
    flex:1;
    padding:12px 8px;
    font-size:12px
  }
  .role-panel {
    grid-template-columns:1fr;
    gap:10px
  }
  .role-copy h3 {
    font-size:28px
  }
  .platform-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .platform-art {
    max-width:500px
  }
  .platform-caption strong {
    font-size:.8125rem
  }
  .platform-caption div>span {
    font-size:.75rem
  }
  .platform-copy h2 {
    font-size:34px
  }
  .journey {
    padding:55px 0
  }
  .journey .wrap {
    grid-template-columns:1fr;
    gap:25px
  }
  .journey h2 {
    font-size:34px
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .faq-list summary {
    font-size:.875rem
  }
  .contact-copy h2 {
    font-size:38px
  }
  .contact-copy .eyebrow {
    font-size:9px
  }
  .contact-form-card {
    padding:25px 20px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .contact-form-card input,.contact-form-card select,.contact-form-card textarea {
    font-size:1rem
  }
  .contact-form-card label {
    font-size:.875rem
  }
  .contact-form-card h3 {
    font-size:22px
  }
  .form-note {
    font-size:.75rem
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  .footer-top p {
    margin-bottom:0
  }
  .footer-top>div:last-child {
    min-width:0
  }
  .footer-bottom {
    flex-direction:column;
    gap:9px;
    padding-block:20px
  }
  .footer-top>div:not(:first-child) a {
    font-size:12px
  }
  
}
@media (width<=420px) {
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature-card h3 {
    font-size:1.0625rem
  }
  .feature-card>p {
    font-size:.875rem
  }
  .dash-layout {
    grid-template-columns:68px 1fr
  }
  .dash-sidebar svg {
    display:none
  }
  .dash-sidebar>span {
    font-size:7px
  }
  .dash-title h3 {
    font-size:12px
  }
  .metric-row {
    gap:5px
  }
  .metric-row>div {
    padding:8px 6px
  }
  .metric-row strong {
    font-size:17px
  }
  .phone-preview {
    width:131px
  }
  .phone-homework {
    padding:8px
  }
  .phone-preview h3 {
    font-size:14px
  }
  .phone-payment {
    font-size:6px
  }
  .scene-foot {
    max-width:180px;
    font-size:8px
  }
  .scene-foot small {
    font-size:7px
  }
  .hero-actions {
    gap:19px
  }
  .text-link {
    font-size:12px
  }
  .role-tabs button {
    font-size:11px
  }
  .contact-email {
    font-size:13px
  }
  .platform-caption strong {
    font-size:11px
  }
  .platform-caption div>span,.eyebrow {
    font-size:10px
  }
  
}
@media (prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
  
}
.feature-card>p,.role-copy>p,.platform-copy>p,.platform-items p,.journey p,.faq-list details>p,.section-heading>p {
  font-size:1rem
}
.feature-card>p,.role-copy>p,.platform-copy>p,.platform-items p,.faq-list details>p,.section-heading>p,.hero-copy>p,.contact-copy>p {
  color:#63735f
}
nav a,.text-link,.role-checks p,.contact-form-card label {
  font-size:.875rem
}
.feature-tags span,.eyebrow,.form-note,.footer-bottom,.contact-availability span {
  font-size:.75rem
}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea {
  font-size:1rem
}
@media (width<=700px) {
  .role-tabs button {
    font-size:.75rem
  }
  .contact-copy .eyebrow {
    font-size:.6875rem
  }
  
}
@property --tw-font-weight {
  syntax:"*";
  inherits:false
}