:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17202a;
  background: #f3f6f8;
  --color-brand: #0f766e;
  --color-brand-dark: #075e58;
  --color-muted: #65737c;
  --color-border: #e2e8ec;
  --color-line: #e8edef;
  --surface: #fff;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
a { color: var(--color-brand); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem max(1rem, calc((100vw - 1100px) / 2));
  background: var(--surface);
  border-bottom: 1px solid #dfe6e9;
}
.brand { color: var(--color-brand); font-size: 1.2rem; font-weight: 750; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
nav a { font-weight: 600; text-decoration: none; }
nav a:hover, table a:hover { text-decoration: underline; }
.container { width: min(1100px, 100%); margin: 1.25rem auto; padding: 0 1rem 2rem; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { margin: .25rem 0; font-size: 1.9rem; line-height: 1.2; }
h2 { margin: 0 0 .75rem; font-size: 1.2rem; }
h3 { margin: 1.25rem 0 .6rem; font-size: 1.05rem; }
.page-heading p, .panel > p { color: #5c6770; }
.panel, .auth-card {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  box-shadow: 0 2px 8px #16324f0b;
}
.panel label, .stack label, .form-grid label { display: grid; gap: .4rem; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .7rem;
  border: 1px solid #cbd5db;
  border-radius: .35rem;
  background: var(--surface);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid #99ded6; outline-offset: 1px; }
.primary, .secondary {
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border: 0;
  border-radius: .35rem;
  font-weight: 700;
}
.primary { color: #fff; background: var(--color-brand); }
.primary:hover { background: var(--color-brand-dark); }
.secondary { color: var(--color-brand-dark); background: #d9f2ee; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.notice { padding: .75rem 1rem; border-radius: .35rem; }
.notice.warning { color: #694d00; background: #fff4ce; }
.notice.error { color: #8b1e25; background: #fde8e8; }
.notice.success { color: #155b39; background: #def5e8; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .8rem; margin: 1rem 0; }
.metric { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: .45rem; background: var(--surface); }
.metric span, .metric small, .product-button small { color: var(--color-muted); }
.metric strong { color: var(--color-brand); font-size: 1.35rem; overflow-wrap: anywhere; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .65rem; margin-top: .8rem; }
.product-button { display: grid; gap: .2rem; min-height: 5rem; padding: .75rem; border: 1px solid #dce5e9; border-radius: .4rem; background: var(--surface); text-align: left; }
.product-button:hover { border-color: var(--color-brand); }
.cart-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #eef1f3; }
.text-button { color: #9b2525; border: 0; background: transparent; }
.checkout-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.total-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.15rem; }
#checkout { width: 100%; }
.queue-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #eef1f3; }
.queue-item p { margin: .25rem 0; color: var(--color-muted); }
.queue-item.conflict { color: #802222; }
.queue-item.synced { color: #155b39; }
.error-text { color: #9b2525 !important; }
.conflict-form { display: grid; gap: .65rem; min-width: min(100%, 320px); margin-top: .65rem; }
.conflict-form label { display: grid; gap: .35rem; font-weight: 600; }
.conflict-form input { min-height: 2.4rem; }
details summary { cursor: pointer; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.full-width { grid-column: 1 / -1; }
.purchase-form { margin-top: 1rem; }
.purchase-line { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(110px, 1fr)) auto; align-items: end; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid #eef1f3; }
.purchase-line strong { align-self: center; }
.nested-panel { box-shadow: none; }
.form-grid button { align-self: end; }
.table-wrap { overflow-x: auto; border-radius: .3rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
th { color: #4e5c64; background: #f7f9fa; font-size: .85rem; font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: #f8fbfb; }
td { overflow-wrap: anywhere; }
.supplier-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.5rem; margin: 1rem 0; }
.supplier-details p { display: grid; gap: .25rem; margin: .4rem 0; }
.supplier-details strong { color: #4e5c64; font-size: .85rem; }
.report-filter { align-items: end; }
.print-button { display: block; margin: .75rem 0 .75rem auto; }
.auth-card { width: min(420px, calc(100% - 2rem)); margin: 8vh auto; padding: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.demo-login { display: grid; gap: .35rem; margin-top: 1.25rem; padding: .8rem; border-radius: .4rem; background: #fff4ce; font-size: .9rem; overflow-wrap: anywhere; }
.demo-login small { color: #694d00; }
.subscription-banner { padding: .75rem max(1rem, calc((100vw - 1100px) / 2)); color: #694d00; background: #fff4ce; font-size: .92rem; }
.subscription-banner.read-only { color: #81252a; background: #fde8e8; }
.subscription-banner a { margin-left: .35rem; font-weight: 700; }
.subscription-current { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.3rem 1.5rem; }
.subscription-current h2 { margin: .4rem 0; color: #214438; font-size: 1.45rem; }
.subscription-current p { margin: 0; color: #687871; }
.subscription-label { color: #71837a; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.subscription-status { padding: .55rem .8rem; border-radius: 2rem; font-size: .82rem; font-weight: 750; white-space: nowrap; }
.subscription-status.active { color: #196346; background: #e1f5e9; }
.subscription-status.inactive { color: #872a30; background: #fde8e8; }
.subscription-pricing { padding: 2.5rem 0; }
.subscription-pricing .section-intro { margin-bottom: 1.75rem; }
.subscription-periods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.subscription-period { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: .65rem; background: #fff; }
.subscription-period.recommended { border-color: #63ad8c; box-shadow: 0 4px 18px #187c5314; }
.period-recommended { position: absolute; top: -.65rem; left: .75rem; padding: .25rem .45rem; border-radius: 1rem; color: #fff; background: #16816e; font-size: .55rem; font-weight: 800; letter-spacing: .04em; }
.subscription-period h3 { margin: .15rem 0 .55rem; color: #29483c; }
.period-discount { min-height: 1.4rem; color: #267653; font-size: .72rem; font-weight: 750; }
.period-discount.no-discount { color: #697971; }
.period-monthly { margin: 1rem 0 .3rem; color: #234638; font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; }
.period-monthly small { color: #78867f; font-size: .66rem; font-weight: 500; }
.period-total { min-height: 2.5rem; margin: 0; color: #53665d; font-size: .72rem; font-weight: 700; }
.period-total span { display: block; margin-top: .15rem; color: #88948e; font-size: .62rem; font-weight: 400; }
.period-action { width: 100%; margin-top: auto; justify-content: center; font-size: .75rem; }
.subscription-owner-note { display: block; padding: .65rem .2rem; color: #718078; font-size: .68rem; text-align: center; }
.subscription-footnote { margin: 1rem 0 0; color: #74817a; font-size: .78rem; line-height: 1.6; text-align: center; }
.subscription-help { padding: 1.25rem 1.5rem; }
.subscription-help p { color: #687871; }
.subscription-payment { padding: 1.3rem 1.5rem; }
.subscription-payment .stack { margin-top: 1.2rem; }
.subscription-payment > p { color: #687871; line-height: 1.6; }
.bank-transfer { display: grid; justify-items: start; gap: .35rem; margin: 1rem 0; padding: 1rem 1.15rem; border: 1px solid #dcece3; border-radius: .6rem; background: #f3faf5; }
.bank-transfer span:first-child { color: #60766a; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.bank-transfer strong { color: #1c4c38; font-size: 1.6rem; letter-spacing: .07em; }
.bank-transfer span:last-child { color: #576c60; font-size: .85rem; }
.auth-home { display: inline-block; margin-bottom: 1rem; font-size: .9rem; text-decoration: none; }
.auth-switch { margin: 1.2rem 0 0; text-align: center; }
.landing { --ink: #142521; --subtle: #63746f; --mint: #e5f5ef; --line: #e5ece8; color: var(--ink); background: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.landing a { color: inherit; }
.landing-nav { width: min(1160px, calc(100% - 48px)); min-height: 80px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.landing-brand { display: inline-flex; align-items: center; gap: .45rem; color: #16372e !important; font-size: 1.3rem; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-mark { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: #fff; background: #16816e; font-size: 1.2rem; line-height: 1; }
.brand-dot { color: #16816e; }
.landing-nav nav { align-items: center; gap: 1.8rem; }
.landing-nav nav a { color: #50645d; font-size: .9rem; font-weight: 600; text-decoration: none; }
.landing-nav nav .landing-login { color: #18382f; }
.landing-cta { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .75rem 1.2rem; border: 1px solid #147663; border-radius: 9px; color: #fff !important; background: #147663; box-shadow: 0 5px 14px #14766325; font-size: .92rem; font-weight: 700; text-decoration: none; transition: background .15s, transform .15s; }
.landing-cta:hover { background: #0e6252; transform: translateY(-1px); }
.landing-nav nav .landing-cta { color: #fff; font-size: .85rem; }
.landing-hero { position: relative; display: grid; width: min(1160px, calc(100% - 48px)); min-height: 555px; margin: auto; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 2rem; padding: 62px 0 78px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: #16816e; font-size: .72rem; font-weight: 800; letter-spacing: .105em; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #38a885; box-shadow: 0 0 0 4px #e3f5ee; }
.landing-hero h1 { margin: 1.1rem 0 1rem; color: #17352e; font-size: clamp(3.2rem, 5.1vw, 4.65rem); font-weight: 760; letter-spacing: -.07em; line-height: 1.05; }
.landing-hero h1 span { color: #17816d; }
.hero-description { max-width: 510px; margin: 0; color: #64736e; font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.8rem; }
.text-link { color: #305a4f !important; font-size: .92rem; font-weight: 700; text-decoration: none; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.8rem; color: #677871; font-size: .76rem; }
.proof-check { color: #16816e; font-weight: 900; }
.proof-separator { margin: 0 .15rem; color: #b6c4bd; }
.hero-visual { position: relative; min-width: 0; padding: 20px 8px 24px 20px; }
.visual-glow { position: absolute; inset: 8% -9% 0 4%; border-radius: 48%; background: radial-gradient(ellipse, #dff3e9 0, #edf8f2 46%, #fff 74%); }
.dashboard-preview { position: relative; z-index: 1; overflow: hidden; padding: 19px; border: 1px solid #e2ebe5; border-radius: 17px; background: #fff; box-shadow: 0 24px 60px #1f47351a, 0 3px 9px #173b2910; transform: rotate(1deg); }
.preview-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #eff2ef; }
.preview-logo { display: flex; align-items: center; gap: .5rem; color: #36544a; font-size: .7rem; font-weight: 750; }
.preview-logo .brand-mark { width: 22px; height: 22px; border-radius: 7px; font-size: 1rem; }
.preview-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #467566; background: #e4f2ec; font-size: .58rem; font-weight: 800; }
.preview-welcome { display: grid; gap: 5px; padding: 17px 0 14px; }
.preview-welcome small { color: #87938d; font-size: .52rem; font-weight: 800; letter-spacing: .12em; }
.preview-welcome strong { color: #203b32; font-size: 1.05rem; letter-spacing: -.03em; }
.preview-welcome span { color: #8a9690; font-size: .65rem; }
.preview-metrics { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.preview-metrics > div { display: grid; gap: 6px; padding: 12px; border: 1px solid #ebf0ec; border-radius: 9px; }
.preview-metrics span, .preview-metrics small { color: #87938d; font-size: .56rem; }
.preview-metrics strong { color: #27483c; font-size: 1.03rem; }
.preview-metrics .positive { color: #138264; }
.preview-chart { margin-top: 11px; padding: 13px 13px 10px; border: 1px solid #ebf0ec; border-radius: 9px; }
.chart-heading { display: flex; justify-content: space-between; align-items: center; }
.chart-heading strong { color: #38544a; font-size: .66rem; }
.chart-heading span { color: #929c97; font-size: .54rem; }
.chart-bars { display: flex; height: 83px; align-items: end; justify-content: space-around; gap: 8px; padding: 11px 7px 0; border-bottom: 1px solid #edf1ee; background: repeating-linear-gradient(to bottom, transparent 0 19px, #f0f3f0 20px); }
.chart-bars i { width: 8%; border-radius: 4px 4px 0 0; background: linear-gradient(#64c4a0, #16816e); }
.chart-bars i:nth-child(even) { background: linear-gradient(#9bdcc4, #51ae8b); }
.chart-days { display: flex; justify-content: space-around; padding-top: 6px; color: #a0aaa4; font-size: .5rem; }
.preview-stock { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px; border-radius: 9px; background: #f1f8f4; }
.stock-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #16816e; background: #dff1e7; font-size: .9rem; }
.preview-stock > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.preview-stock strong { color: #34554a; font-size: .62rem; }
.preview-stock small { color: #81918a; font-size: .53rem; }
.stock-arrow { color: #508474; }
.floating-pill { position: absolute; z-index: 2; right: -6px; bottom: 3px; display: flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid #e6eee9; border-radius: 11px; color: #405e51; background: #fff; box-shadow: 0 8px 25px #163e2d18; font-size: .72rem; font-weight: 700; }
.floating-pill span { color: #16816e; }
.trust-strip { padding: 24px 20px 28px; border-top: 1px solid #f0f3f0; border-bottom: 1px solid #f0f3f0; text-align: center; }
.trust-strip > span { color: #92a098; font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.trust-strip div { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 12px; color: #577067; font-size: .87rem; }
.trust-strip i { color: #b8c7be; font-style: normal; }
.feature-section, .pricing-section { width: min(1060px, calc(100% - 48px)); margin: auto; padding: 100px 0; }
.section-intro { max-width: 570px; margin: 0 auto 42px; text-align: center; }
.section-intro .eyebrow { font-size: .68rem; }
.section-intro h2, .trial-section h2 { margin: 12px 0; color: #193a30; font-size: clamp(2rem, 3.5vw, 2.7rem); letter-spacing: -.055em; line-height: 1.12; }
.section-intro p, .trial-section p { margin: 0; color: #687871; font-size: .96rem; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.feature-card { min-height: 216px; padding: 23px 19px; border: 1px solid #e8efeb; border-radius: 13px; background: #fff; }
.feature-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; font-size: 1.15rem; font-weight: 800; }
.feature-icon.teal { color: #16816e; background: #e3f5ed; }
.feature-icon.blue { color: #4484a9; background: #e7f3f9; }
.feature-icon.peach { color: #ba7851; background: #fff0e4; }
.feature-icon.violet { color: #8371b2; background: #f0ebfa; }
.feature-card h3 { margin: 20px 0 8px; color: #26443a; font-size: .98rem; line-height: 1.4; }
.feature-card p { margin: 0; color: #75827c; font-size: .81rem; line-height: 1.65; }
.pricing-section { width: min(1080px, calc(100% - 48px)); padding-top: 35px; padding-bottom: 100px; }
.pricing-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: 19px; }
.pricing-card, .discount-card { border: 1px solid #e2ebe5; border-radius: 15px; background: #fff; box-shadow: 0 10px 36px #183a2a09; }
.pricing-card { padding: 27px; }
.plan-tag, .discount-header > span { color: #16816e; font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.pricing-card h3 { margin: 11px 0 4px; color: #203e33; font-size: 1.4rem; }
.plan-intro { margin: 0; color: #74827b; font-size: .82rem; }
.price-line { display: flex; align-items: baseline; gap: 7px; margin: 24px 0 17px; }
.price-line strong { color: #193e32; font-size: 2.08rem; letter-spacing: -.055em; }
.price-line span { color: #7b8982; font-size: .8rem; }
.trial-callout { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #d9eee3; border-radius: 10px; background: #f3faf5; }
.trial-callout > span { color: #16816e; font-size: 1.7rem; font-weight: 800; }
.trial-callout p { margin: 0; color: #64766d; font-size: .72rem; line-height: 1.55; }
.trial-callout strong { color: #285341; }
.pricing-button { width: 100%; margin-top: 15px; }
.cancel-note { display: block; margin-top: 11px; color: #828e88; font-size: .67rem; line-height: 1.55; text-align: center; }
.plan-includes { display: grid; gap: 10px; margin-top: 21px; padding-top: 19px; border-top: 1px solid #edf1ee; color: #607169; font-size: .76rem; }
.plan-includes strong { margin-bottom: 2px; color: #29463b; }
.plan-includes span::first-letter { color: #16816e; }
.discount-card { overflow: hidden; }
.discount-header { padding: 23px 22px 15px; }
.discount-header strong { display: block; margin-top: 7px; color: #29483c; font-size: 1.05rem; }
.discount-header p { margin: 4px 0 0; color: #78867f; font-size: .75rem; }
.discount-row { display: grid; min-height: 67px; grid-template-columns: .75fr .85fr 1.2fr 1.1fr; align-items: center; gap: 7px; padding: 10px 19px; border-top: 1px solid #eff3f0; }
.discount-row.featured { background: #f3faf5; }
.discount-duration { color: #304c41; font-size: .79rem; font-weight: 750; }
.discount-badge { justify-self: start; padding: 5px 7px; border-radius: 20px; color: #267653; background: #e8f5ed; font-size: .59rem; font-weight: 800; white-space: nowrap; }
.best-badge { color: #805d13; background: #fcf1d6; }
.discount-price { color: #29483c; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.discount-price small { display: block; margin-top: 2px; color: #89958f; font-size: .57rem; font-weight: 500; }
.discount-row > strong { color: #66766e; font-size: .65rem; text-align: right; white-space: nowrap; }
.discount-footnote { margin: 0; padding: 13px 20px 16px; color: #84918a; font-size: .65rem; line-height: 1.55; }
.trial-section { display: flex; width: min(1080px, calc(100% - 48px)); align-items: center; justify-content: space-between; gap: 2rem; margin: 0 auto 75px; padding: 34px 39px; border-radius: 16px; background: #eff8f2; }
.trial-section h2 { margin: 8px 0 5px; font-size: 1.75rem; }
.trial-section p { font-size: .83rem; }
.landing-footer { display: flex; width: min(1160px, calc(100% - 48px)); min-height: 88px; align-items: center; gap: 18px; margin: auto; border-top: 1px solid #edf1ee; color: #89958f; font-size: .72rem; }
.landing-footer .landing-brand { font-size: 1.08rem; }
.landing-footer .brand-mark { width: 23px; height: 23px; font-size: 1rem; }
.landing-footer > div { display: flex; gap: 17px; margin-left: auto; }
.landing-footer > div a { color: #5e7167; font-weight: 650; text-decoration: none; }

@media (max-width: 700px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  nav { gap: .6rem 1rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .checkout-row, .form-grid, .purchase-line, .supplier-details { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .panel { padding: .85rem; }
  .queue-item { align-items: flex-start; flex-direction: column; }
  th, td { padding: .6rem .5rem; }
  .landing-nav { width: calc(100% - 32px); min-height: 68px; }
  .landing-nav nav { gap: .9rem; }
  .landing-nav nav a:not(.landing-cta) { display: none; }
  .landing-nav nav .landing-cta { min-height: 40px; padding: .55rem .8rem; font-size: .75rem; }
  .landing-hero { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 1rem; padding: 50px 0 55px; }
  .landing-hero h1 { font-size: clamp(3rem, 13vw, 4rem); }
  .hero-description { font-size: .96rem; }
  .hero-proof { gap: .38rem; font-size: .66rem; }
  .hero-visual { max-width: 520px; margin: auto; padding: 15px 6px 20px; }
  .dashboard-preview { padding: 14px; }
  .floating-pill { right: -3px; }
  .trust-strip { padding-inline: 13px; }
  .trust-strip div { gap: .65rem; font-size: .72rem; }
  .feature-section, .pricing-section { width: calc(100% - 36px); padding: 72px 0; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature-card { min-height: 210px; padding: 17px 14px; }
  .feature-card h3 { margin-top: 14px; font-size: .88rem; }
  .feature-card p { font-size: .74rem; }
  .pricing-layout { grid-template-columns: 1fr; }
  .pricing-card { padding: 22px; }
  .discount-row { grid-template-columns: .7fr .8fr 1fr; padding-inline: 13px; }
  .discount-row > strong { grid-column: 3; text-align: left; }
  .discount-price { grid-column: 3; grid-row: 1; }
  .discount-badge { grid-column: 2; grid-row: 1; }
  .discount-duration { grid-row: 1; }
  .trial-section { width: calc(100% - 36px); align-items: flex-start; flex-direction: column; margin-bottom: 55px; padding: 25px 21px; }
  .trial-section h2 { font-size: 1.55rem; }
  .landing-footer { width: calc(100% - 36px); flex-wrap: wrap; gap: 9px 14px; padding: 19px 0; }
  .landing-footer > span { order: 3; width: 100%; }
  .subscription-current { align-items: flex-start; flex-direction: column; padding: 1rem; }
  .subscription-pricing { padding: 1.5rem 0; }
  .subscription-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .subscription-period { padding: .9rem; }
  .subscription-period:last-child { grid-column: 1 / -1; }
  .period-monthly { font-size: .95rem; }
}

@media (min-width: 701px) and (max-width: 940px) {
  .landing-hero { min-height: 500px; gap: .8rem; }
  .landing-hero h1 { font-size: 3.5rem; }
  .hero-proof { font-size: .68rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discount-row { grid-template-columns: .7fr .8fr 1fr; }
  .discount-row > strong { grid-column: 3; text-align: left; }
  .discount-price { grid-column: 3; grid-row: 1; }
  .discount-badge { grid-column: 2; grid-row: 1; }
  .discount-duration { grid-row: 1; }
  .subscription-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
}