/* The look of the website's business pages: Home, About, Pricing, Contact,
   Refund and Delivery (15 Oct 2026). The app's maroon and gold, its two rings,
   on the cream of the policy pages. Pricing is drawn by the pricingPage
   function and links this file too. */
:root {
  --ink: #2D2528; --muted: #6B5F64; --rule: #E8DEE2;
  --accent: #6E0F30; --accent-2: #8A1A3F; --gold: #F2B33D;
  --cream: #FFF4E4; --ground: #FFF8F9; --card: #FFFFFF; --tint: #F6EEF1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
    "Nirmala UI", Helvetica, Arial, sans-serif;
  background: var(--ground); color: var(--ink); line-height: 1.65;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent); }

/* Top bar */
.bar { background: var(--accent); color: var(--cream); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cream);
  font-weight: 700; font-size: 18px; text-decoration: none; }
.bar nav { display: flex; gap: 18px; }
.bar nav a { color: #F3E6EA; text-decoration: none; font-size: 15px; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--gold); }

/* The two rings of the app icon */
.rings { position: relative; display: inline-block; width: 34px; height: 22px; flex: none; }
.rings::before, .rings::after { content: ""; position: absolute; top: 0; width: 22px; height: 22px;
  border-radius: 50%; border: 4px solid var(--cream); }
.rings::before { left: 0; }
.rings::after { left: 12px; border-color: var(--gold); }
.rings.big { width: 104px; height: 66px; }
.rings.big::before, .rings.big::after { width: 66px; height: 66px; border-width: 11px; }
.rings.big::after { left: 38px; }

/* Home hero */
.hero { background: var(--accent); color: var(--cream); padding: 44px 0 52px; text-align: center; }
.hero h1 { font-size: 38px; line-height: 1.15; margin-top: 18px; }
.hero .mr { color: var(--gold); font-size: 28px; margin-top: 4px; }
.hero .tag { font-size: 18px; color: #F3E6EA; margin-top: 12px; }
.hero .lead { max-width: 620px; margin: 14px auto 0; color: #E9C9D3; }
.cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn { display: inline-block; padding: 11px 22px; border-radius: 26px; font-weight: 600;
  text-decoration: none; font-size: 15px; }
.btn.solid { background: var(--gold); color: #3A1020; }
.btn.line { border: 1.5px solid var(--cream); color: var(--cream); }
.soon { margin-top: 16px; font-size: 14px; color: #E9C9D3; }

/* Content pages */
.page { padding-top: 32px; padding-bottom: 56px; }
.page h1 { font-size: 30px; line-height: 1.2; margin-bottom: 6px; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
h2 { font-size: 20px; margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
p, li { font-size: 15.5px; margin-bottom: 10px; }
ul, ol { padding-left: 22px; }
.note { background: var(--tint); border-left: 3px solid var(--accent); padding: 14px 16px;
  margin: 22px 0; font-size: 14.5px; }

/* Feature cards on Home */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  margin-top: 8px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; }
.card h3 { font-size: 16.5px; color: var(--accent); margin-bottom: 6px; }
.card p { font-size: 14.5px; margin: 0; color: #4A3F43; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 14px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: var(--cream); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Pricing */
.price-card { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--gold);
  border-radius: 12px; padding: 18px 20px; margin: 4px 0 8px; }
.price { font-size: 32px; font-weight: 700; color: var(--accent); }
.price span { font-size: 16px; font-weight: 500; color: var(--muted); }
.price-card p { margin: 6px 0 0; }
.table-wrap { overflow-x: auto; margin: 6px 0 14px; }
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { background: var(--tint); font-size: 13.5px; color: var(--muted); font-weight: 600; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.contact .card p { font-size: 15px; }
.contact .label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin-bottom: 4px; }

/* Footer */
.foot { border-top: 1px solid var(--rule); background: #FBF2F4; padding: 22px 0 30px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.foot nav a { font-size: 14px; }
.foot p { font-size: 13px; color: var(--muted); margin: 0; }

@media (max-width: 520px) {
  .hero h1 { font-size: 30px; }
  .hero .mr { font-size: 23px; }
  .bar nav { gap: 14px; }
  .page h1 { font-size: 26px; }
  th, td { padding: 9px 7px; font-size: 14px; }
}