/* Simple stylesheet for the swimming landing page */
body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.7; color: #222; background: #fff; }
* { box-sizing: border-box; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
section { padding: 48px 0; }
.alt { background: #eaf6fa; }

h1, h2, h3 { color: #0b3c5d; line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
p { margin: 0 0 16px; }

/* Top banner */
.hero { background: #0b3c5d; color: #fff; padding: 64px 0; }
.hero h1 { color: #fff; }

/* Buttons */
.btn { display: inline-block; padding: 12px 24px; margin: 6px 8px 6px 0; background: #ffc93c; color: #0b3c5d; font-weight: bold; text-decoration: none; border-radius: 30px; border: 2px solid #ffc93c; }
.btn.ghost { background: transparent; color: #fff; border-color: #fff; }

/* Highlight box */
.card { background: #fff; border-left: 5px solid #13a3c4; padding: 14px 18px; }
.card p { margin: 0; }

/* Two columns (stack on mobile) */
.columns { display: flex; gap: 32px; flex-wrap: wrap; }
.columns > div { flex: 1 1 300px; }

/* Tick list */
.tick { list-style: none; padding: 0; margin: 0; }
.tick li { padding-left: 26px; margin-bottom: 10px; position: relative; }
.tick li::before { content: "\2713"; position: absolute; left: 0; color: #13a3c4; font-weight: bold; }

/* Call to action */
.cta { background: #0b3c5d; color: #fff; text-align: center; }
.cta h2 { color: #fff; }

/* FAQ */
details { background: #fff; border: 1px solid #cfe3eb; margin-bottom: 10px; border-radius: 4px; }
summary { cursor: pointer; font-weight: bold; color: #0b3c5d; padding: 14px 18px; }
details p { padding: 0 18px; margin: 0 0 16px; }