/* Clinical Case Album website. Light, clinical: clinic white, surgical teal ink,
   scrub teal for actions, mint bands, gingiva pink only for the price and small
   highlights. The one bold element is the hero "proof sheet" (crop marks + CMYK strip). */
:root {
  --paper: #f6f9fa;
  --white: #ffffff;
  --ink: #14323a;
  --muted: #557078;
  --line: #d7e4e6;
  --teal: #0f7b76;
  --teal-dark: #0b5f5b;
  --mint: #e6f3f1;
  --gingiva: #d9566b;
  --c: #00a0e3; --m: #e0007a; --y: #ffd400; --k: #1d1d1b;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 50, 58, .06), 0 12px 32px -12px rgba(20, 50, 58, .18);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
:focus-visible { outline: 3px solid var(--gingiva); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 750; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 720; }
h3 { font-size: 1.25rem; font-weight: 680; line-height: 1.25; }
p { margin: 0 0 1em; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.narrow { max-width: 760px; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 720 1.12rem/1 var(--display); white-space: nowrap; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; }
.brand-mark i { display: block; width: 9px; height: 9px; border-radius: 2px; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; left: 0; right: 0; top: 66px; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; display: grid; }
.menu nav a { padding: 10px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .nav { display: none; } .menu { display: block; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--teal); background: var(--white); color: var(--teal); font: 700 1rem var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--mint); color: var(--teal-dark); }
.btn.primary { background: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dark); color: #fff; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: .95rem; }
.btn:disabled { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: clamp(40px, 7vw, 88px); }
.hero .lede { margin-top: 18px; }
.hero .meta { margin-top: 18px; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 36px; } }

/* the proof sheet: crop marks around the screenshot and a CMYK control strip */
.proof { position: relative; padding: 26px; }
.proof::before, .proof::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 14px / 18px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 14px 0 / 1.5px 18px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 14px / 18px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 14px) 0 / 1.5px 18px no-repeat; }
.proof::after { transform: scaleY(-1); }
.proof img { border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--white); }
.strip { display: flex; align-items: center; gap: 0; margin-top: 14px; height: 14px; }
.strip i { flex: 1; height: 100%; }
.strip .reg { flex: 0 0 22px; height: 22px; margin-left: 12px; border: 1.5px solid var(--ink); border-radius: 50%; position: relative; }
.strip .reg::before, .strip .reg::after { content: ""; position: absolute; background: var(--ink); }
.strip .reg::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; transform: translateX(-50%); }
.strip .reg::after { top: 50%; left: -6px; right: -6px; height: 1.5px; transform: translateY(-50%); }
.proof figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); }

/* sections */
.section { padding-block: clamp(48px, 7vw, 92px); }
.section + .section { border-top: 1px solid var(--line); }
.band { background: var(--mint); border-block: 1px solid var(--line); }
.band + .section { border-top: 0; }
.head { max-width: 760px; margin-bottom: 36px; }
.head p { color: var(--muted); font-size: 1.1rem; margin-top: 12px; }

/* problems list on the home page */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; }
.problems h3 { margin-bottom: 6px; }
.problems p { color: var(--muted); margin: 0; }
.problems > div { border-left: 3px solid var(--gingiva); padding-left: 16px; }

/* steps: a real sequence, so they are numbered */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff; font: 700 1.05rem var(--display); margin-bottom: 14px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* feature index: a picture of each feature with its name and a line */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 36px 32px; }
.feature { text-decoration: none; color: var(--ink); display: grid; gap: 12px; }
.feature img { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: var(--white); }
.feature h3 { color: var(--ink); }
.feature:hover h3 { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.feature p { color: var(--muted); margin: 0; }

/* feature page body: text beside screenshot, alternating */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split + .split { margin-top: clamp(48px, 7vw, 88px); }
.split h2 { margin-bottom: 14px; }
.split ul { padding-left: 20px; margin: 0; }
.split li { margin-bottom: 8px; }
.split li::marker { color: var(--teal); }
.shot { margin: 0; }
.shot img { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--white); }
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 24px; } .split.flip > :first-child { order: 0; } }

/* facts table (PDF output) */
.facts { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.facts th, .facts td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { width: 34%; font-weight: 700; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--display); font-size: 1.05rem; border-bottom: 2px solid var(--ink); }
.compare td:last-child { color: var(--teal-dark); font-weight: 700; }

/* call to action at the end of pages */
.cta { background: var(--ink); color: #e9f3f2; border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: #b9d2d0; margin: 10px 0 0; }
.cta .btn.primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn.primary:hover { background: var(--mint); }
.cta .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.cta .btn:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* pricing */
.price-card { background: var(--white); border: 2px solid var(--teal); border-radius: 18px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.price { font: 760 clamp(3rem, 8vw, 4.6rem)/1 var(--display); color: var(--gingiva); letter-spacing: -.03em; }
.price small { font: 400 1.1rem var(--body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* questions */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font: 680 1.1rem/1.35 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* help page */
.help { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow: auto; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: .95rem; }
.toc h2 { font-size: 1.05rem; margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--teal); text-decoration: underline; }
.topic { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 86px; }
.topic:last-child { border-bottom: 0; }
.topic h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 12px; }
.topic h3 { margin: 26px 0 8px; }
.topic ol, .topic ul { padding-left: 22px; }
.topic li { margin-bottom: 6px; }
.topic .shot { margin: 18px 0 8px; }
.tip { background: var(--mint); border-left: 4px solid var(--teal); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; }
.tip p:last-child { margin: 0; }
kbd { font: 600 .85em var(--body); background: var(--white); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.keys { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.keys th, .keys td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.keys th { width: 42%; font-weight: 400; }
@media (max-width: 900px) { .help { grid-template-columns: 1fr; } .toc { position: static; max-height: none; } }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.info { display: grid; gap: 16px; }
.info-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(20, 50, 58, .04); }
.info-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--teal); }
.info-card .ic.wa { background: #e8f8ee; color: #128c4a; }
.info-card .ic.pin { background: #fdecef; color: var(--gingiva); }
.info-card h2 { font: 700 .95rem var(--body); color: var(--muted); letter-spacing: 0; margin-bottom: 4px; }
.info-card .big { font: 700 1.2rem/1.35 var(--display); color: var(--ink); text-decoration: none; display: block; }
.info-card p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }
.links-card { background: linear-gradient(160deg, #134a4c, var(--ink)); color: #fff; border-radius: 16px; padding: 22px; }
.links-card h2 { font: 700 1rem var(--body); color: #9fe0d7; margin-bottom: 8px; }
.links-card a { display: flex; justify-content: space-between; color: #fff; text-decoration: none; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.links-card a:last-child { border-bottom: 0; }
.links-card a:hover { color: #9fe0d7; }
.form-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 18px; padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow); }
.form-card h2 { font-size: 1.6rem; }
.form-card > p { color: var(--muted); margin: 6px 0 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; border: 0; padding: 0; }
.chips legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: .93rem; }
.chips input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--gingiva); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .95rem; }
.field label .req { color: var(--gingiva); }
.field label .opt { color: var(--muted); font-weight: 400; }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; color: var(--ink); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; background: var(--white); }
.field textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -5000px; }
.form-card .btn.primary { width: 100%; margin-top: 20px; min-height: 52px; font-size: 1.05rem; }
.form-msg { margin: 12px 0 0; font-weight: 700; }
.form-msg.ok { color: var(--teal-dark); } .form-msg.err { color: var(--gingiva); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .form-card { order: -1; } }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* prose pages (privacy, terms) */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin: 34px 0 10px; }
.prose ul { padding-left: 22px; }
.page-head { padding-block: clamp(36px, 6vw, 72px) 28px; }
.page-head p { margin-top: 14px; }
.crumbs { font-size: .92rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

/* account page */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(20, 50, 58, .04); }
.card h2 { font-size: 1.35rem; margin-bottom: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row input[type=email] { flex: 1 1 240px; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; }
.key { font: 700 clamp(1rem, 3.6vw, 1.25rem)/1.3 Consolas, ui-monospace, monospace; letter-spacing: .04em; padding: 14px 16px; background: var(--mint); border-radius: 10px; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.tag.ok { background: var(--mint); color: var(--teal-dark); } .tag.bad { background: #fdecef; color: var(--gingiva); }
.note { color: var(--muted); font-size: .95rem; }
.msg { margin: 12px 0 0; } .msg.err { color: var(--gingiva); font-weight: 700; } .msg.ok { color: var(--teal-dark); font-weight: 700; }

/* footer */
.site-foot { background: var(--white); border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 92px); padding-block: 48px 36px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h2 { font: 700 1rem var(--body); margin-bottom: 10px; color: var(--ink); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.foot-grid a { color: var(--muted); text-decoration: none; }
.foot-grid a:hover { color: var(--teal); text-decoration: underline; }
.foot-grid p { color: var(--muted); }
.foot-base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* complete feature list: grouped, flowing in columns */
.all-features { columns: 3 300px; column-gap: 40px; }
.all-features section { break-inside: avoid; margin-bottom: 30px; }
.all-features h3 { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--teal); }
.all-features ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.all-features li { padding-left: 24px; position: relative; color: var(--ink); }
.all-features li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; list-style: none; padding: 0; margin: 0; }
.highlights li { padding-left: 24px; position: relative; }
.highlights li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--gingiva); border-bottom: 2px solid var(--gingiva); transform: rotate(-45deg); }