/*
 * Caninedoc.se — the product site.
 *
 * The same palette and typefaces as the app on app.caninedoc.se. Whoever
 * clicks "Kom igång" should recognise where they landed, not think they have
 * ended up somewhere else.
 *
 * Plain CSS without a build step: the site is a handful of files that
 * DigitalOcean serves as they are. A build step would have meant one more
 * thing that can break between the text changing and the text showing.
 */

:root {
  --ink: #0f172a;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --hairline: #f1f5f9;
  --surface: #ffffff;
  --canvas: #f8fafc;

  --accent-50: #e6f7f4;
  --accent-100: #c5ece7;
  --accent-400: #26b6a6;
  --accent-600: #0d9082;
  --accent-700: #0b7568;
  --accent-900: #084b45;

  --radius: 14px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }

/* --------------------------------------------------------------- top bar -- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-600);
  color: #fff;
}

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

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

nav a:hover { color: var(--ink); }

.top-actions { display: flex; align-items: center; gap: 12px; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary { background: var(--accent-600); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-700); }

.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent-400); }

.btn-plain { color: var(--muted); padding-inline: 6px; }
.btn-plain:hover { color: var(--ink); }

.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }

/* --------------------------------------------------------------- hero -- */

.hero {
  padding: 88px 0 72px;
  background:
    radial-gradient(900px 420px at 78% -10%, var(--accent-50), transparent 70%),
    var(--surface);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-100);
  background: var(--accent-50);
  color: var(--accent-700);
  font-size: 13px;
  font-weight: 600;
}

.hero h1 {
  margin-top: 22px;
  font-size: clamp(34px, 5.2vw, 56px);
  max-width: 17ch;
}

.hero .lede {
  margin-top: 20px;
  max-width: 56ch;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-note { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* --------------------------------------------------------------- section -- */

section { padding: 76px 0; }

.section-head { max-width: 62ch; }

.section-head h2 { font-size: clamp(26px, 3.4vw, 34px); }

.section-head p { margin-top: 14px; color: var(--muted); }

.tone-canvas { background: var(--canvas); border-block: 1px solid var(--line); }

/* ----------------------------------------------------------------- cards -- */

.grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-100);
  box-shadow: var(--shadow);
}

.card h3 { font-size: 18px; }

.card p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

.icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-700);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------ alternating -- */

.split {
  display: grid;
  gap: 48px;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.split + .split { margin-top: 76px; }

.split h3 { font-size: clamp(22px, 2.6vw, 27px); }

.split p { margin-top: 14px; color: var(--muted); }

.ticks { margin: 22px 0 0; padding: 0; list-style: none; }

.ticks li {
  position: relative;
  padding-left: 30px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 15.5px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--accent-50);
  box-shadow: inset 0 0 0 1px var(--accent-100);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  width: 6px;
  height: 3px;
  border-left: 1.7px solid var(--accent-700);
  border-bottom: 1.7px solid var(--accent-700);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------ screenshot -- */

.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}

.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line); }

.shot-body { padding: 20px; font-size: 14px; }

.shot-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--hairline);
}

.shot-row:last-child { border-bottom: 0; }

.shot-row b { font-weight: 600; }

.shot-row span { color: var(--faint); white-space: nowrap; }

.shot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

.shot-section + .shot-section { margin-top: 16px; }

.shot-section p { color: var(--ink); font-size: 14px; }

/* --------------------------------------------------------------- pricing -- */

.price-grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 760px;
}

.price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.price.featured { border-color: var(--accent-400); box-shadow: var(--shadow); }

.price .amount { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }

.price .per { color: var(--muted); font-size: 15px; }

.badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.price .btn { margin-top: 22px; width: 100%; }

.included { margin-top: 40px; }

.included ul {
  display: grid;
  gap: 10px 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------- faq -- */

.faq { margin-top: 40px; display: grid; gap: 0; max-width: 78ch; }

details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

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

summary::after {
  content: "+";
  color: var(--accent-700);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}

details[open] summary::after { content: "–"; }

details p { margin-top: 12px; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------------- the close -- */

.cta {
  margin: 0 0 76px;
  padding: 56px 40px;
  border-radius: 20px;
  /* The gradient carries the colour and keeps the text legible; the photo only
     has to give the block some depth. Both in one background so a slow image
     never leaves white text on white. */
  background:
    linear-gradient(140deg, rgb(11 117 104 / 0.84), rgb(8 75 69 / 0.9)),
    url("/img/cta.jpg") center / cover no-repeat;
  color: #fff;
  text-align: center;
}

.cta h2 { font-size: clamp(26px, 3.4vw, 34px); }

.cta p { margin: 14px auto 0; max-width: 52ch; color: rgb(255 255 255 / 0.82); }

.cta .btn { margin-top: 28px; background: #fff; color: var(--accent-800, #0a5c53); }

.cta .btn:hover { background: var(--accent-50); }

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 14.5px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
}

.foot nav { gap: 22px; flex-wrap: wrap; }

@media (max-width: 760px) {
  nav.main { display: none; }
  .hero { padding: 60px 0 52px; }
  section { padding: 58px 0; }
  .cta { padding: 44px 24px; }
  .wrap { width: min(1120px, 100% - 32px); }
}

/* Below 420px the brand, "Logga in" and the button do not fit on one line —
   the top bar then pushed the page out sideways. "Logga in" remains in the
   footer. */
@media (max-width: 420px) {
  .top-actions .btn-plain { display: none; }
  .btn { padding: 10px 14px; font-size: 14.5px; }
  .brand { font-size: 16.5px; }
}

/* ------------------------------------------------------------------ hero -- */

.hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.hero-media { position: relative; }

/* height: auto is not decoration. The width and height attributes on the img
   land as presentational hints, and a specified height beats aspect-ratio —
   without this the photo is 900px tall and cover-cropped to a strip of desk. */
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* The card hangs off the photo's lower left corner, low enough to cover the
   desk and not the dog, and far enough down that it reaches into the hero's
   own bottom padding rather than into the section below. */
.hero-shot {
  position: absolute;
  left: -30px;
  bottom: -54px;
  width: min(286px, 72%);
  transform: rotate(0.4deg);
}

/* An amount that wraps looks like two amounts, and a label that wraps makes
   one of the three boxes taller than the others. */
.hero-shot .stat b { display: block; font-size: 17px; white-space: nowrap; }

.hero-shot .stat span { font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }

.hero-shot .stat { padding: 9px 10px; }

.hero-shot .shot-body { padding: 17px; }

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

.stat {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
}

.stat span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat b { font-size: 19px; letter-spacing: -0.02em; }

/* One column: the photo stays and the card goes. Stacked they say the same
   thing twice, and the card is the one that reads worst on a phone. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-shot { display: none; }
}

/* -------------------------------------------------------------- species -- */

.species {
  padding: 26px 0;
  background: var(--canvas);
  border-block: 1px solid var(--line);
}

.species-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.species-lead { font-weight: 600; }

.species-text p + p {
  margin-top: 5px;
  max-width: 48ch;
  color: var(--muted);
  font-size: 15px;
}

.species-list {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.species-list li {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.species-list img {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 8px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent-100);
  transition: transform 0.2s;
}

.species-list li:hover img { transform: scale(1.05); }

/* Four in a row on a phone too. Wrapping put three on one line and one on the
   next, which reads as a fourth species that did not fit rather than as one
   even row. */
@media (max-width: 620px) {
  .species-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
  }

  .species-list img { width: 64px; height: 64px; }

  .species-list li { font-size: 12px; }
}

/* ------------------------------------------------------------ photo band -- */

.band {
  position: relative;
  margin: 76px 0 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.band img {
  display: block;
  width: 100%;
  height: clamp(230px, 32vw, 380px);
  object-fit: cover;
}

/* The gradient starts well above the text so the words never sit on the bright
   part of the photo. */
.band figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 84px 28px 26px;
  background: linear-gradient(
    to top,
    rgb(8 40 38 / 0.9),
    rgb(8 40 38 / 0.45) 55%,
    transparent
  );
  color: #fff;
}

.band figcaption b {
  display: block;
  font-size: clamp(17px, 2.2vw, 20px);
  letter-spacing: -0.015em;
}

.band figcaption span {
  display: block;
  margin-top: 6px;
  max-width: 56ch;
  color: rgb(255 255 255 / 0.85);
  font-size: 15px;
}

/* ------------------------------------------------------- heading + photo -- */

.head-media {
  display: grid;
  gap: 44px;
  align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.head-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

@media (max-width: 860px) {
  .head-media { grid-template-columns: 1fr; gap: 32px; }
}

/* Movement is decoration here — the page says the same thing without it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}