:root {
  --cream:#fffaf2;
  --forest:#173f37;
  --coral:#dc6658;
  --ink:#233c35;
  --muted:#67756e;
  --line:#e3e5db;
  --sage:#e6ede3;
  --peach:#f4e4d6;
  --container:1200px
}

* {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased
}

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

h1,h2,h3 {
  font-weight:700;
  line-height:1.35
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button {
  cursor:pointer
}

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

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #a24637;
  outline-offset:5px
}

button:disabled {
  cursor:not-allowed
}

button {
  color:inherit
}

fieldset {
  min-width:0
}

img {
  max-width:100%
}

section {
  scroll-margin-top:20px
}

.container {
  width:min(calc(100% - 96px),var(--container));
  margin-inline:auto
}

.section {
  padding:110px 0
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:#63736b;
  margin-bottom:24px
}

.live-dot {
  height:7px;
  width:7px;
  background:var(--coral);
  border-radius:50%;
  box-shadow:0 0 0 5px #dc665811
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:52px;
  padding:13px 23px;
  border:1px solid var(--forest);
  border-radius:8px;
  background:var(--forest);
  color:white;
  font-size:14px;
  font-weight:700;
  transition:background .2s,transform .2s
}

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

.button span {
  font-size:20px;
  font-weight:400;
  line-height:1
}

.button.small {
  min-height:43px;
  font-size:12px;
  padding:10px 15px;
  gap:18px
}

.button.outline {
  background:transparent;
  color:var(--forest)
}

.button.outline:hover {
  background:#e9eee5
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid #b4c0b4;
  padding-block:10px
}

.text-link:hover {
  color:#a3473a
}

.accent {
  color:var(--coral)
}

.muted {
  color:var(--muted)
}

.coral-text {
  color:#ac4538!important
}

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

.skip-link {
  position:fixed;
  top:8px;
  left:15px;
  transform:translateY(-160%);
  z-index:100;
  background:white;
  padding:10px 20px;
  border:2px solid var(--forest)
}

.skip-link:focus {
  transform:translateY(0)
}

/* Text-led brand and navigation. */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:#fffaf2f2;
  border-bottom:1px solid #233c3510;
  backdrop-filter:blur(14px)
}

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

.wordmark {
  display:inline-flex;
  flex-direction:column;
  flex-shrink:0;
  font-size:24px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.25
}

.wordmark span {
  font-family:Georgia,serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  margin-top:4px
}

.navigation {
  display:flex;
  align-items:center;
  gap:28px
}

.navigation>a:not(.button) {
  font-size:13px;
  font-weight:600
}

.navigation>a:not(.button):hover {
  color:#a24637
}

.menu-toggle {
  display:none;
  border:1px solid var(--line);
  border-radius:7px;
  background:transparent;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px
}

.menu-toggle span {
  width:18px;
  height:1px;
  background:var(--forest);
  transition:transform .2s
}

/* Hero: one coherent product scene, built entirely with HTML. */
.hero {
  padding:75px 0 0;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 38%,#e9ede180,transparent 55%)
}

.hero-grid {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:48px;
  align-items:center
}

.hero-copy h1 {
  font-size:clamp(38px,3.8vw,56px);
  line-height:1.35;
  letter-spacing:-.055em
}

.hero-lead {
  font-size:15px;
  color:var(--muted);
  line-height:1.95;
  margin-top:27px
}

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

.hero-footnote {
  font-size:11px;
  color:var(--muted);
  margin-top:21px
}

.hero-stage {
  position:relative;
  padding:48px 0 30px;
  min-width:0
}

.stage-orbit {
  position:absolute;
  inset:-25px -100px 20px 25px;
  border:1px solid #c6d0bf;
  border-radius:50%;
  transform:rotate(-17deg);
  pointer-events:none
}

.stage-orbit:after {
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--coral);
  top:20%;
  right:8%
}

.product-window {
  position:relative;
  border:1px solid #d4dbcf;
  border-radius:14px;
  background:#fff;
  box-shadow:0 25px 65px #173f3713;
  transform:rotate(-2deg);
  overflow:hidden
}

.window-bar {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid #e7ebe3;
  background:#f6f7f2;
  color:var(--muted);
  font-size:10px
}

.window-dots {
  display:flex;
  gap:4px
}

.window-dots i {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bec6b6
}

.window-dots i:first-child {
  background:#d79883
}

.demo-label {
  display:inline-block;
  font-size:9px;
  color:#6d756c;
  border:1px solid #d8ded3;
  border-radius:4px;
  padding:1px 6px;
  white-space:nowrap
}

.window-bar .demo-label {
  margin-left:auto
}

.window-body {
  padding:25px
}

.micro {
  font-size:9px;
  letter-spacing:.12em;
  color:var(--muted)
}

.dashboard-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.dashboard-heading h2 {
  font-size:23px;
  margin-top:4px;
  letter-spacing:-.04em
}

.date-pill {
  font-size:10px;
  background:#f2f3eb;
  border-radius:6px;
  padding:5px 9px;
  white-space:nowrap
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:24px 0
}

.stat-grid>div {
  padding:12px 13px;
  background:#f5f6f0;
  border-radius:8px
}

.stat-grid>div:nth-child(3) {
  background:#faf0e9
}

.stat-grid span {
  font-size:10px;
  color:#6a766d;
  display:block
}

.stat-grid strong {
  display:block;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:33px;
  line-height:1.3;
  margin-top:6px
}

.stat-grid small {
  font-family:system-ui,sans-serif;
  font-size:10px;
  margin-left:6px;
  color:var(--muted)
}

.panel-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  padding-bottom:11px;
  border-bottom:1px solid #edf0e9
}

.panel-caption strong {
  font-size:12px
}

.panel-caption>span {
  color:var(--muted)
}

.appointment-row {
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 0;
  border-bottom:1px solid #edf0e9
}

.appointment-row time {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.pet-avatar {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:35px;
  height:35px;
  border-radius:50%;
  font-size:13px;
  font-weight:700
}

.peach {
  background:var(--peach);
  color:#945644
}

.sage {
  background:var(--sage);
  color:#4f6c50
}

.appointment-row>div {
  flex:1
}

.appointment-row strong {
  display:block;
  font-size:12px
}

.appointment-row strong small {
  color:var(--muted);
  font-size:9px;
  font-weight:400;
  margin-left:5px
}

.appointment-row>div>span {
  display:block;
  color:var(--muted);
  font-size:10px
}

.pill {
  display:inline-block;
  flex-shrink:0;
  border-radius:5px;
  font-size:9px;
  padding:3px 7px;
  white-space:nowrap
}

.green {
  background:#e7f0e6;
  color:#466847
}

.amber {
  background:#fbf0d9;
  color:#80622d
}

.room-caption {
  margin-top:21px
}

.room-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:12px
}

.room-strip>div {
  position:relative;
  padding:10px;
  border-radius:7px;
  background:#f5f6f0
}

.room-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  vertical-align:middle
}

.occupied {
  background:#66815e
}

.vacant {
  background:#fff;
  border:1px solid #8d9b80
}

.room-strip strong {
  margin-left:5px;
  font-size:11px
}

.room-strip>div>span:last-child {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:2px
}

.hero-notification {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  box-shadow:0 12px 35px #173f3714;
  border:1px solid #e0e5d9;
  border-radius:12px;
  padding:16px 18px;
  width:90%;
  margin:-4px -16px 0 auto;
  transform:rotate(2deg)
}

.line-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#e7f2e4;
  color:#346537;
  font-size:10px;
  font-weight:800
}

.hero-notification strong {
  display:block;
  font-size:12px
}

.hero-notification div>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}

.notification-check {
  display:flex;
  align-items:center;
  justify-content:center;
  width:23px;
  height:23px;
  border:1px solid #abc19f;
  color:#4e7547;
  border-radius:50%;
  font-size:12px;
  margin-left:auto
}

.stage-tag {
  position:absolute;
  top:17px;
  left:-12px;
  font-size:10px;
  background:#f3e7d7;
  border-radius:30px;
  padding:8px 13px;
  transform:rotate(-5deg)
}

.stage-tag span {
  color:var(--coral);
  margin-right:6px
}

.visual-caption {
  font-size:9px;
  position:relative;
  text-align:center;
  color:var(--muted);
  margin:22px 0 0
}

.chapter-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #d8dece;
  margin-top:72px;
  padding:25px 0
}

.chapter-strip>div {
  display:flex;
  align-items:center;
  gap:17px
}

.chapter-strip>div>span {
  font-family:Georgia,serif;
  font-size:12px;
  color:#a1715e
}

.chapter-strip strong {
  font-size:15px
}

.chapter-strip small {
  font-size:11px;
  color:var(--muted)
}

.chapter-plus {
  font-size:18px;
  color:#9ca993
}

/* LINE: choose a story to inspect its companion phone preview. */
.line-section {
  background:#edf1e8;
  border-top:1px solid #dce3d3
}

.section-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between
}

.version-tag {
  display:inline-block;
  background:#e5ebe0;
  color:#52684d;
  border:1px solid #cdd8c7;
  border-radius:5px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  padding:2px 9px;
  white-space:nowrap
}

.section-top .version-tag {
  background:transparent
}

.section-heading h2,.feature-copy h2,.finance-heading h2,.faq-layout h2,.trial-copy h2 {
  font-size:clamp(30px,3.1vw,43px);
  letter-spacing:-.045em;
  line-height:1.5
}

.section-heading>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:22px;
  line-height:1.95
}

.section-heading.centered {
  text-align:center
}

.centered .eyebrow {
  justify-content:center
}

.line-layout {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:90px;
  margin-top:40px
}

.demo-picker {
  display:grid;
  gap:11px
}

.demo-option {
  display:flex;
  align-items:flex-start;
  gap:18px;
  text-align:left;
  width:100%;
  border:1px solid #d2daca;
  border-radius:12px;
  background:transparent;
  padding:23px 20px;
  transition:background .2s,border-color .2s
}

.demo-option[aria-pressed=true] {
  background:#fffdf7;
  border-color:#9cae91;
  box-shadow:0 5px 15px #173f3705
}

.demo-option:hover {
  border-color:#879e79
}

.option-number {
  font-family:Georgia,serif;
  font-size:13px;
  line-height:1.9;
  color:#6d8265
}

.demo-option strong {
  display:block;
  font-size:16px;
  margin-bottom:5px
}

.demo-option small {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  display:block
}

.option-arrow {
  font-size:20px;
  margin-left:auto;
  line-height:1.4
}

.demo-option[aria-pressed=true] .option-arrow {
  color:var(--coral)
}

.line-details {
  display:grid;
  gap:20px;
  margin-top:29px
}

.line-details>div {
  display:flex;
  align-items:flex-start;
  gap:14px
}

.detail-mark {
  font-size:13px;
  margin-top:1px;
  color:#6e815f
}

.line-details p {
  font-size:12px;
  color:var(--muted)
}

.line-details strong {
  display:block;
  font-size:13px;
  color:var(--ink);
  margin-bottom:4px
}

.phone-surround {
  position:relative;
  display:flex;
  justify-content:center;
  padding:18px 0 0
}

.phone {
  position:relative;
  width:304px;
  flex-shrink:0;
  border:6px solid #23463c;
  border-radius:38px;
  background:#e6ede7;
  box-shadow:20px 25px 0 #dce4d4,0 25px 50px #173f3710;
  overflow:hidden;
  transform:rotate(3deg)
}

.phone-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:35px;
  padding:8px 20px;
  background:#f5f7f1;
  font-size:10px;
  font-weight:700
}

.phone-island {
  width:70px;
  height:13px;
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  border-radius:20px;
  background:#23463c
}

.phone-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  background:#f5f7f1;
  border-bottom:1px solid #d7dfd3
}

.phone-nav strong {
  font-size:12px
}

.phone-nav>span {
  font-size:17px
}

.phone-chat {
  padding:15px 17px 23px;
  min-height:422px
}

.chat-date {
  font-size:8px;
  color:#65766b;
  text-align:center;
  margin:1px 0 20px
}

.chat-outgoing {
  font-size:10px;
  padding:9px 11px;
  margin:0 0 17px auto;
  background:#d1e2c6;
  width:fit-content;
  max-width:95%;
  border-radius:12px 12px 2px 12px
}

.flex-card {
  background:#fffdf8;
  border:1px solid #d4decf;
  border-radius:13px;
  overflow:hidden
}

.flex-card-heading {
  background:#244d3f;
  color:white;
  padding:15px
}

.flex-card-heading>span {
  font-size:9px;
  color:#c0d1ba;
  letter-spacing:.08em
}

.flex-card-heading h3 {
  font-size:15px;
  margin-top:7px
}

.flex-card-body {
  padding:15px
}

.flex-intro {
  font-size:11px;
  color:var(--muted);
  margin-bottom:15px
}

.flex-card dl {
  margin:0
}

.flex-card dl>div {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:8px 0;
  font-size:10px
}

.flex-card dt {
  color:var(--muted);
  flex-shrink:0
}

.flex-card dd {
  margin:0;
  text-align:right
}

.flex-action {
  font-size:10px;
  color:var(--forest);
  font-weight:700;
  margin-top:16px;
  padding:9px 4px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between
}

.chat-note {
  font-size:9px;
  margin-top:17px;
  text-align:center;
  color:#5c7062
}

.phone-side-note {
  position:absolute;
  right:-20px;
  bottom:46px;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.08em;
  color:#4c6b4d;
  writing-mode:vertical-rl
}

.section-note {
  font-size:11px;
  color:#64735f;
  border-top:1px solid #d1dac9;
  padding-top:23px;
  margin-top:64px
}

/* Editorial feature chapters with task-specific previews. */
.feature-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:100px
}

.feature-copy>.eyebrow {
  margin-bottom:17px
}

.feature-copy>.version-tag {
  margin-bottom:16px
}

.section-lead {
  font-size:14px;
  color:var(--muted);
  margin-top:21px
}

.feature-list {
  list-style:none;
  margin:30px 0 0;
  padding:0;
  display:grid;
  gap:22px
}

.feature-list li {
  position:relative;
  padding-left:21px
}

.feature-list li:before {
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--coral)
}

.feature-list strong {
  display:block;
  font-size:14px;
  margin-bottom:4px
}

.feature-list span {
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.9
}

.grooming-visual,.boarding-visual {
  min-width:0
}

.grooming-visual {
  position:relative;
  padding:33px 0 0
}

.grooming-visual:before {
  content:"";
  position:absolute;
  inset:0 -25px 28px 30px;
  background:#f0e7d8;
  border-radius:130px 130px 20px 20px;
  transform:rotate(5deg)
}

.service-sheet {
  position:relative;
  border:1px solid #dddccf;
  background:white;
  border-radius:13px;
  padding:28px;
  box-shadow:0 15px 35px #173f3708;
  transform:rotate(-2deg)
}

.sheet-header {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.pet-profile {
  display:flex;
  align-items:center;
  gap:14px;
  margin:24px 0
}

.pet-avatar.large {
  width:49px;
  height:49px;
  font-size:20px
}

.pet-profile h3 {
  font-size:19px
}

.pet-profile p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}

.pet-profile .pill {
  margin-left:auto
}

.safety-banner {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid #e7d9bd;
  background:#fbf6e9;
  border-radius:8px
}

.safety-banner>span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  flex-shrink:0;
  border:1px solid #b58e52;
  border-radius:50%;
  font-size:12px;
  color:#8c622d
}

.safety-banner p {
  font-size:10px;
  color:#7b663f
}

.safety-banner strong {
  display:block;
  color:#6e542b;
  font-size:11px;
  margin-bottom:3px
}

.sheet-section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:700;
  margin:23px 0 2px
}

.sheet-section-label span {
  font-weight:400;
  font-size:10px;
  color:var(--muted)
}

.quote-row,.quote-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}

.quote-row small {
  font-size:9px;
  color:var(--muted);
  margin-left:10px
}

.quote-row strong {
  font-size:13px
}

.quote-total {
  border-bottom:0;
  font-weight:700
}

.quote-total small {
  display:block;
  font-weight:400;
  font-size:10px;
  color:var(--muted);
  margin-top:2px
}

.quote-total strong {
  font-size:23px;
  font-family:Georgia,serif
}

.record-preview {
  display:flex;
  align-items:center;
  gap:12px;
  background:#f1f5ed;
  padding:15px 12px;
  border-radius:8px;
  margin-top:7px
}

.record-icon {
  font-size:23px;
  color:#6d8761
}

.record-preview p {
  font-size:11px
}

.record-preview p span {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:3px
}

.visual-footnote {
  position:relative;
  font-size:11px;
  color:var(--muted);
  margin-top:27px;
  padding-left:12px
}

.visual-footnote>span {
  font-size:17px;
  color:var(--coral);
  margin-right:8px
}

.boarding-section {
  background:#f5f0e6;
  border-block:1px solid #e6e1d5
}

.reversed .feature-copy {
  order:2
}

.reversed .boarding-visual {
  order:1
}

.boarding-board {
  padding:26px;
  background:#fffdf8;
  border:1px solid #dbddcf;
  border-radius:15px;
  box-shadow:0 20px 40px #654a2b08;
  transform:rotate(1.5deg)
}

.board-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.board-top h3 {
  font-size:24px;
  margin-top:6px;
  letter-spacing:-.04em
}

.board-date {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:23px;
  padding-top:15px;
  border-top:1px solid var(--line);
  font-size:11px
}

.board-date>span {
  font-size:9px;
  color:var(--muted)
}

.board-date i {
  margin:0 3px 0 8px
}

.room-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:15px
}

.room-card {
  padding:15px;
  border-radius:8px
}

.is-occupied {
  background:#eaf0e3;
  border:1px solid #d8e1ce
}

.cat-room {
  background:#f2ebdf;
  border-color:#e3d8c7
}

.is-vacant {
  background:#f9faf5;
  border:1px dashed #bac5ad
}

.room-card>span:first-child {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:700
}

.room-card>span:first-child small {
  font-size:9px;
  font-weight:400;
  color:var(--muted)
}

.room-card>strong {
  display:block;
  font-size:19px;
  margin-top:10px
}

.room-card>span:nth-last-child(2) {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}

.room-card>small:last-child {
  display:block;
  font-size:9px;
  color:#527043;
  margin-top:12px
}

.is-vacant>small:last-child {
  color:var(--muted)
}

.care-log {
  margin-top:24px
}

.care-heading {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line)
}

.care-heading span {
  font-size:9px;
  color:var(--muted)
}

.care-log>div:not(.care-heading) {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:10px;
  padding:10px 0;
  border-bottom:1px solid #edf0e6
}

.care-log time {
  font-size:9px;
  color:var(--muted);
  margin-right:3px
}

.care-log .muted,.care-log .coral-text {
  margin-left:auto;
  font-size:9px
}

.care-check {
  color:#5c7b4e
}

.care-pending {
  color:#a85a47
}

/* Checkout and membership. */
.finance-section {
  background:var(--forest);
  color:#fffaf2
}

.finance-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:35px
}

.finance-heading .eyebrow {
  color:#b1c7af
}

.finance-heading>p {
  color:#bdcec1;
  font-size:13px;
  line-height:2
}

.finance-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:50px;
  border-top:1px solid #d0dfcb33
}

.finance-grid article {
  padding:30px 30px 0 0;
  position:relative
}

.finance-grid article+article {
  border-left:1px solid #d0dfcb33;
  padding-left:30px
}

.finance-number {
  font-size:14px;
  font-family:Georgia,serif;
  color:#abc1a6
}

.version-tag.light {
  color:#c7d6bd;
  border-color:#6c8168;
  background:transparent;
  margin-left:12px;
  font-size:9px
}

.finance-grid h3 {
  font-size:23px;
  margin-top:22px;
  line-height:1.6;
  font-weight:500
}

.finance-grid p {
  font-size:12px;
  line-height:1.95;
  color:#bdcec1;
  margin-top:16px
}

.finance-mini {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:27px
}

.finance-mini span {
  font-size:9px;
  border:1px solid #b5c6af4d;
  padding:3px 8px;
  border-radius:4px;
  color:#c4d0be
}

.finance-mini strong {
  width:100%;
  font-size:11px;
  font-weight:400;
  color:#efb8a5;
  margin-top:8px
}

/* Plans. */
.pricing-section {
  background:#fffdf8
}

.billing-toggle {
  display:flex;
  justify-content:center;
  width:fit-content;
  margin:32px auto 42px;
  border:1px solid #d6dece;
  border-radius:9px;
  background:#eef1e7;
  padding:4px;
  gap:3px
}

.billing-toggle button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:100px;
  border:0;
  border-radius:5px;
  background:transparent;
  font-size:12px;
  padding:9px 16px;
  color:#5c6c58
}

.billing-toggle button[aria-pressed=true] {
  background:#fffdf8;
  box-shadow:0 2px 7px #173f3710;
  color:var(--forest);
  font-weight:700
}

.billing-toggle button>span {
  font-size:9px;
  background:#e8eddf;
  color:#526648;
  border-radius:3px;
  padding:1px 5px
}

.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:940px;
  margin:auto
}

.price-card {
  position:relative;
  min-width:0;
  padding:35px;
  border:1px solid #d9dfd0;
  border-radius:14px;
  background:#fffdf8
}

.price-card.featured {
  background:#f0f4e8;
  border:1px solid #7d9670
}

.recommended {
  position:absolute;
  top:-14px;
  left:27px;
  border-radius:5px;
  background:var(--forest);
  color:#fffdf8;
  font-size:10px;
  letter-spacing:.03em;
  padding:4px 13px
}

.plan-kicker {
  color:var(--muted);
  font-size:11px
}

.price-card h3 {
  font-size:28px;
  margin-top:9px
}

.plan-audience {
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
  min-height:44px
}

.price {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:25px
}

.price>strong {
  font-size:43px;
  font-weight:500;
  letter-spacing:-.04em;
  font-family:Georgia,"Times New Roman",serif
}

.price>span {
  font-size:12px;
  color:var(--muted)
}

.price-note {
  font-size:11px;
  color:#627558;
  margin-top:0;
  min-height:20px
}

.plan-link {
  width:100%;
  justify-content:space-between;
  margin-top:23px;
  font-size:12px;
  min-height:47px
}

.plan-list {
  list-style:none;
  padding:24px 0 0;
  margin:25px 0 0;
  border-top:1px solid #d9dfd0;
  display:grid;
  gap:10px;
  font-size:12px
}

.plan-list li {
  position:relative;
  padding-left:20px
}

.plan-list li:before {
  content:"✓";
  position:absolute;
  left:0;
  color:#6b825f
}

.pricing-note {
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin:25px 0 0
}

.comparison-details {
  margin:40px auto 0;
  max-width:940px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

summary {
  cursor:pointer;
  list-style:none
}

summary::-webkit-details-marker {
  display:none
}

.comparison-details>summary {
  padding:21px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:700
}

.comparison-details>summary>span {
  font-size:20px;
  color:#718269
}

.comparison-details[open]>summary>span {
  transform:rotate(45deg)
}

.table-scroll {
  overflow:auto;
  padding-bottom:15px
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  min-width:500px
}

td,th {
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  text-align:center
}

th:first-child {
  text-align:left
}

thead th {
  background:#edf1e6;
  font-weight:700
}

tbody th {
  font-weight:400
}

td:last-child {
  color:#40643b;
  background:#f6f8ef
}

td {
  white-space:nowrap
}

/* FAQ and a deliberately non-submitting trial preview. */
.faq-section {
  border-top:1px solid var(--line)
}

.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}

.faq-layout>div:first-child>p:last-child {
  font-size:12px;
  margin-top:20px
}

.faq-list details {
  border-bottom:1px solid #d9dfd0
}

.faq-list details:first-child {
  border-top:1px solid #d9dfd0
}

.faq-list summary {
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
  font-size:14px;
  font-weight:600;
  padding:22px 0
}

.faq-list summary:after {
  content:"＋";
  font-size:18px;
  font-weight:400;
  color:#73816d;
  flex-shrink:0
}

.faq-list details[open] summary:after {
  content:"−"
}

.faq-list details>p {
  font-size:12px;
  color:var(--muted);
  line-height:2;
  padding:0 35px 24px 0
}

.trial-section {
  background:#e9edde
}

.trial-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.trial-copy>p:not(.eyebrow) {
  font-size:14px;
  color:#64745c;
  margin-top:23px;
  line-height:1.95
}

.trial-steps {
  display:grid;
  gap:23px;
  padding:0;
  margin:35px 0 0;
  list-style:none
}

.trial-steps li {
  display:flex;
  gap:18px;
  align-items:flex-start
}

.trial-steps li>span {
  font-size:12px;
  font-family:Georgia,serif;
  color:#748564;
  padding-top:1px
}

.trial-steps strong {
  display:block;
  font-size:13px
}

.trial-steps small {
  display:block;
  color:#64745c;
  font-size:11px;
  margin-top:3px
}

.trial-form-card {
  border:1px solid #d3ddc6;
  background:#fffdf8;
  border-radius:15px;
  padding:32px
}

.preview-badge {
  font-size:10px;
  display:inline-block;
  color:#996339;
  background:#f7ecdb;
  padding:3px 9px;
  border-radius:4px;
  margin-bottom:15px
}

.trial-form-card h3 {
  font-size:24px
}

.trial-form-card>p {
  font-size:11px;
  color:var(--muted);
  margin:11px 0 25px
}

.trial-form-card fieldset {
  border:0;
  padding:0;
  margin:0
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.form-grid label {
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:6px;
  color:#63705b
}

.form-grid input,.form-grid select,.form-grid textarea {
  width:100%;
  min-width:0;
  border:1px solid #d8dece;
  border-radius:6px;
  padding:10px;
  font-size:11px;
  color:#77816f;
  background:#f4f5ee;
  opacity:1;
  -webkit-text-fill-color:#77816f
}

.form-grid input::placeholder,.form-grid textarea::placeholder {
  color:#899281;
  opacity:1
}

.form-grid select {
  padding-inline:6px
}

.full-width {
  grid-column:1/-1
}

.trial-submit {
  margin-top:17px;
  width:100%;
  min-height:46px;
  border-color:#d9dfce;
  background:#e2e7d9;
  color:#6d7a60;
  font-size:12px
}

.trial-submit:hover {
  transform:none;
  background:#e2e7d9
}

.trial-form-card>.form-footnote {
  font-size:10px;
  margin:14px 0 0;
  text-align:center;
  color:#74816a
}

.site-footer {
  padding:48px 0 24px;
  background:#fffaf2
}

.footer-top {
  display:flex;
  align-items:flex-start;
  gap:50px;
  padding-bottom:35px
}

.footer-top>div>p {
  font-size:11px;
  color:var(--muted);
  margin-top:14px
}

.footer-top nav {
  display:flex;
  flex-wrap:wrap;
  gap:17px 30px;
  max-width:420px;
  margin-left:auto;
  padding-top:4px
}

.footer-top nav a {
  font-size:12px;
  color:#52664f
}

.footer-top nav a:hover {
  color:#a24637
}

.back-top {
  border:1px solid #cfd8c5;
  border-radius:50%;
  height:42px;
  width:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}

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

@media(min-width:1500px) {
  .hero-copy h1 {
    font-size:56px
  }
}

@media(max-width:1200px) {
  .container {
    width:calc(100% - 72px)
  }
  .navigation {
    gap:21px
  }
  .hero-grid {
    gap:35px
  }
  .hero-copy h1 {
    font-size:44px
  }
  .hero-stage {
    padding-top:45px
  }
  .window-body {
    padding:20px
  }
  .appointment-row {
    gap:10px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .button {
    font-size:12px;
    padding-inline:16px;
    gap:18px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .feature-split,.trial-layout {
    gap:60px
  }
  .line-layout {
    gap:60px
  }
  .phone-side-note {
    right:-7px
  }
  .chapter-strip>div {
    gap:13px
  }
  .chapter-strip small {
    font-size:10px
  }
  .feature-copy h2 {
    font-size:34px
  }
  .finance-grid h3 {
    font-size:21px
  }
  .finance-heading h2 {
    font-size:37px
  }
}

@media(max-width:1000px) {
  .header-inner {
    min-height:76px
  }
  .menu-toggle {
    display:flex
  }
  .navigation {
    position:absolute;
    top:76px;
    left:0;
    right:0;
    display:grid;
    gap:0;
    padding:15px 36px 22px;
    background:#fffaf2;
    border-bottom:1px solid #dbe1d1;
    box-shadow:0 15px 20px #173f370a
  }
  .js-ready .navigation:not(.is-open) {
    display:none
  }
  .navigation>a:not(.button) {
    padding:12px 2px;
    border-bottom:1px solid #e3e5db
  }
  .navigation .button {
    margin-top:16px;
    width:fit-content
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .hero {
    padding-top:55px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .hero-copy {
    max-width:680px
  }
  .hero-copy h1 {
    font-size:50px;
    line-height:1.3
  }
  .hero-copy h1>br:first-child {
    display:none
  }
  .hero-copy h1 .desktop-break {
    display:none
  }
  .hero-lead {
    font-size:14px;
    margin-top:22px
  }
  .hero-stage {
    width:min(100%,600px);
    margin:15px auto 0;
    padding-top:45px
  }
  .hero-actions .button {
    font-size:14px;
    padding-inline:22px
  }
  .hero-actions .text-link {
    font-size:13px
  }
  .hero-footnote {
    font-size:11px
  }
  .hero-notification {
    margin-right:-14px
  }
  .stage-tag {
    left:-15px;
    top:10px
  }
  .window-body {
    padding:25px
  }
  .hero-stage .visual-caption {
    margin-top:25px
  }
  .chapter-strip {
    margin-top:35px
  }
  .chapter-strip small {
    display:none
  }
  .section {
    padding:85px 0
  }
  .section-heading h2,.feature-copy h2,.finance-heading h2,.faq-layout h2,.trial-copy h2 {
    font-size:35px
  }
  .line-layout {
    gap:35px;
    grid-template-columns:1fr .85fr
  }
  .phone {
    width:280px
  }
  .phone-side-note {
    display:none
  }
  .demo-option {
    gap:12px;
    padding:19px 15px
  }
  .demo-option strong {
    font-size:14px
  }
  .demo-option small {
    font-size:11px
  }
  .feature-split {
    gap:40px
  }
  .service-sheet {
    padding:22px
  }
  .pet-profile {
    gap:10px
  }
  .pet-profile h3 {
    font-size:16px
  }
  .pet-profile .large {
    width:39px;
    height:39px;
    font-size:17px
  }
  .pet-profile p {
    font-size:9px
  }
  .sheet-header {
    gap:10px
  }
  .sheet-header .micro {
    font-size:8px
  }
  .boarding-board {
    padding:19px
  }
  .board-top h3 {
    font-size:20px
  }
  .room-card {
    padding:11px
  }
  .room-card>span:first-child small {
    font-size:8px
  }
  .care-heading span {
    font-size:8px
  }
  .feature-list {
    gap:18px;
    margin-top:24px
  }
  .feature-list strong {
    font-size:13px
  }
  .feature-list span {
    font-size:11px
  }
  .section-lead {
    font-size:13px
  }
  .finance-heading {
    gap:25px
  }
  .finance-heading>p {
    font-size:12px
  }
  .finance-grid h3 {
    font-size:20px
  }
  .finance-grid article {
    padding-right:20px
  }
  .finance-grid article+article {
    padding-left:20px
  }
  .finance-grid p {
    font-size:11px
  }
  .version-tag.light {
    margin-left:8px
  }
  .price-card {
    padding:28px
  }
  .price>strong {
    font-size:38px
  }
  .faq-layout {
    gap:45px
  }
  .faq-list summary {
    font-size:13px
  }
  .trial-layout {
    gap:40px
  }
  .trial-form-card {
    padding:25px
  }
  .form-grid {
    gap:12px
  }
  .footer-top {
    gap:30px
  }
  .footer-top nav {
    max-width:330px;
    gap:15px 24px
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 40px)
  }
  html {
    scroll-padding-top:83px
  }
  .header-inner {
    min-height:70px
  }
  .wordmark {
    font-size:22px
  }
  .wordmark span {
    font-size:9px
  }
  .navigation {
    top:70px;
    padding-inline:20px
  }
  .hero {
    padding-top:42px
  }
  .hero-copy h1 {
    font-size:42px
  }
  .hero-copy h1>br:first-child {
    display:block
  }
  .hero-lead {
    font-size:13px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:22px;
    letter-spacing:.12em
  }
  .hero-footnote {
    font-size:10px
  }
  .hero-stage {
    padding:35px 8px 18px;
    width:100%;
    max-width:530px;
    margin-top:25px
  }
  .stage-orbit {
    inset:0 -20px 30px 0
  }
  .stage-tag {
    left:0;
    top:0;
    font-size:9px
  }
  .hero-notification {
    width:94%;
    margin:1px -3px 0 auto;
    padding:13px
  }
  .visual-caption {
    font-size:8px
  }
  .chapter-strip {
    padding:20px 0;
    margin-top:20px
  }
  .chapter-strip>div {
    gap:7px;
    flex-wrap:wrap
  }
  .chapter-strip>div>span {
    font-size:10px
  }
  .chapter-strip strong {
    font-size:12px
  }
  .chapter-plus {
    font-size:13px
  }
  .section {
    padding:66px 0
  }
  .section-heading h2,.feature-copy h2,.finance-heading h2,.faq-layout h2,.trial-copy h2 {
    font-size:31px
  }
  .section-heading>p:not(.eyebrow) {
    font-size:13px;
    margin-top:18px
  }
  .desktop-break {
    display:none
  }
  .line-layout {
    grid-template-columns:1fr;
    margin-top:27px;
    gap:30px
  }
  .demo-option {
    padding:19px 17px;
    gap:15px
  }
  .demo-option strong {
    font-size:15px
  }
  .demo-option small {
    font-size:12px
  }
  .phone-surround {
    padding:12px 0 20px
  }
  .phone {
    width:300px
  }
  .phone-side-note {
    display:block;
    right:calc(50% - 210px);
    font-size:11px
  }
  .line-details {
    gap:18px;
    margin-top:25px
  }
  .line-details p {
    font-size:12px
  }
  .section-note {
    margin-top:35px;
    font-size:10px
  }
  .feature-split {
    grid-template-columns:1fr;
    gap:35px
  }
  .feature-copy {
    max-width:600px
  }
  .feature-list {
    gap:20px
  }
  .feature-list strong {
    font-size:14px
  }
  .feature-list span {
    font-size:12px
  }
  .section-lead {
    font-size:13px
  }
  .grooming-visual {
    width:min(100%,480px);
    margin:auto;
    padding-top:24px
  }
  .grooming-visual:before {
    right:0;
    left:24px;
    inset-block-end:33px
  }
  .service-sheet {
    padding:25px;
    transform:rotate(-1deg)
  }
  .pet-profile h3 {
    font-size:19px
  }
  .pet-profile p {
    font-size:10px
  }
  .pet-profile .large {
    height:46px;
    width:46px;
    font-size:20px
  }
  .reversed .feature-copy {
    order:0
  }
  .reversed .boarding-visual {
    order:0
  }
  .boarding-visual {
    width:min(100%,480px);
    margin:auto
  }
  .boarding-board {
    padding:23px;
    transform:rotate(1deg)
  }
  .room-card {
    padding:15px
  }
  .room-card>span:first-child small {
    font-size:9px
  }
  .care-heading span {
    font-size:9px
  }
  .finance-heading {
    display:block
  }
  .finance-heading>p {
    margin-top:22px;
    font-size:13px
  }
  .finance-grid {
    grid-template-columns:1fr;
    margin-top:30px
  }
  .finance-grid article {
    padding:26px 0
  }
  .finance-grid article+article {
    border-left:0;
    border-top:1px solid #d0dfcb33;
    padding-left:0
  }
  .finance-grid article:last-child {
    padding-bottom:0
  }
  .finance-grid h3 {
    font-size:23px;
    margin-top:13px
  }
  .finance-grid h3 br {
    display:none
  }
  .finance-grid p {
    font-size:12px;
    max-width:550px
  }
  .finance-mini {
    margin-top:18px;
    align-items:center
  }
  .finance-mini strong {
    width:auto;
    margin:0 0 0 6px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:35px;
    max-width:480px
  }
  .price-card {
    padding:29px
  }
  .price>strong {
    font-size:44px
  }
  .plan-audience {
    min-height:0
  }
  .plan-list {
    font-size:13px
  }
  .pricing-note {
    font-size:10px
  }
  .billing-toggle {
    margin-block:25px 35px
  }
  .comparison-details {
    margin-top:28px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .faq-layout>div:first-child>p:last-child {
    margin-top:16px
  }
  .faq-list summary {
    font-size:13px
  }
  .faq-list details>p {
    font-size:12px;
    padding-right:15px
  }
  .trial-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .trial-form-card {
    width:100%;
    max-width:500px;
    margin:auto;
    padding:26px
  }
  .trial-copy>p:not(.eyebrow) {
    font-size:13px
  }
  .trial-steps {
    gap:20px;
    margin-top:27px
  }
  .trial-steps strong {
    font-size:13px
  }
  .trial-steps small {
    font-size:11px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:25px
  }
  .footer-top nav {
    margin-left:0;
    order:3;
    max-width:100%;
    width:100%;
    gap:14px 22px
  }
  .back-top {
    margin-left:auto
  }
  .footer-bottom {
    flex-direction:column;
    gap:6px;
    font-size:9px
  }
}

@media(max-width:400px) {
  .hero-copy h1 {
    font-size:37px
  }
  .hero-actions {
    gap:15px
  }
  .hero-actions .button {
    font-size:12px;
    gap:15px;
    padding-inline:16px
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:8px
  }
  .hero-stage {
    padding-inline:2px
  }
  .window-bar {
    padding:10px;
    gap:7px;
    font-size:8px
  }
  .window-body {
    padding:17px
  }
  .dashboard-heading h2 {
    font-size:20px
  }
  .dashboard-heading .micro {
    font-size:8px
  }
  .date-pill {
    font-size:8px;
    padding:4px 6px
  }
  .stat-grid {
    gap:7px;
    margin:19px 0
  }
  .stat-grid>div {
    padding:10px
  }
  .stat-grid span {
    font-size:8px
  }
  .stat-grid strong {
    font-size:29px
  }
  .appointment-row {
    gap:8px;
    padding:12px 0
  }
  .appointment-row .pet-avatar {
    height:30px;
    width:30px;
    font-size:11px
  }
  .appointment-row time {
    font-size:9px
  }
  .appointment-row strong {
    font-size:11px
  }
  .appointment-row strong small {
    font-size:8px;
    margin-left:3px
  }
  .appointment-row>div>span {
    font-size:9px
  }
  .pill {
    font-size:8px;
    padding:3px 5px
  }
  .room-strip {
    gap:7px
  }
  .room-strip>div {
    padding:8px
  }
  .room-strip strong {
    font-size:10px
  }
  .room-strip>div>span:last-child {
    font-size:8px
  }
  .hero-notification strong {
    font-size:10px
  }
  .hero-notification div>span {
    font-size:9px
  }
  .hero-notification {
    gap:9px;
    padding:12px
  }
  .line-mark {
    width:31px;
    height:31px;
    font-size:9px
  }
  .notification-check {
    height:20px;
    width:20px;
    font-size:10px
  }
  .chapter-strip strong {
    font-size:11px
  }
  .chapter-strip>div {
    gap:5px
  }
  .chapter-strip>div>span {
    font-size:9px
  }
  .section-heading h2,.feature-copy h2,.finance-heading h2,.faq-layout h2,.trial-copy h2 {
    font-size:28px
  }
  .phone-side-note {
    display:none
  }
  .phone {
    width:280px
  }
  .board-top h3 {
    font-size:21px
  }
  .boarding-board {
    padding:18px
  }
  .room-card {
    padding:12px
  }
  .room-card>span:first-child small {
    font-size:8px
  }
  .service-sheet {
    padding:20px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .trial-form-card {
    padding:22px
  }
  .feature-copy>.version-tag {
    margin-bottom:14px
  }
  .price>strong {
    font-size:40px
  }
}

@media(max-width:900px) {
  .feature-split {
    grid-template-columns:1fr;
    gap:40px;
  }
  .feature-copy {
    max-width:650px;
  }
  .grooming-visual,.boarding-visual {
    width:min(100%,520px);
    margin-inline:auto;
  }
  .reversed .feature-copy,.reversed .boarding-visual {
    order:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

@media print {
  .site-header {
    position:static
  }
  .menu-toggle,.hero-actions,.trial-section {
    display:none
  }
  .section {
    padding:30px 0
  }
  .container {
    width:95%
  }
  .hero {
    padding-top:20px
  }
  .price-card {
    break-inside:avoid
  }
  body {
    font-size:12px
  }
}

@media(max-width:760px) {
  .hero-copy h1 .desktop-break {
    display:block
  }
}


/* Three plans share the existing pricing design. */
.pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr; } }