/* ==========================================================
   ONE PHARMACY — the public site
   ----------------------------------------------------------
   Drawn the way the application is drawn, and the way the
   OnePOS site is drawn, because they are the same company's
   work: square corners, one pixel rules, flat fill, no
   shadows and no gradients. Cream paper, navy ink, pale blue
   bands to separate one argument from the next.

   The application's own tokens are in assets/css/tally.css.
   The values here are copied from it deliberately, so that
   arriving in the product is not a change of scenery.
   ========================================================== */

:root {
  --blue:       #1C3F94;   /* tp-blue */
  --blue-dark:  #142E6E;
  --blue-mid:   #2D5BA8;
  --blue-soft:  #4A77C4;
  --band:       #C3D2E9;   /* the pale blue band */
  --desktop:    #B9C9E4;   /* tp-desktop */
  --btnbar:     #DDE6F4;
  --amber:      #FFD24A;   /* tp-select */
  --ink:        #10203F;   /* tp-ink */
  --ink-soft:   #4A5A76;
  --ink-mute:   #7B8798;
  --line:       #9EB4D6;   /* tp-line */
  --line-soft:  #D6E0EF;
  --paper:      #FFFFFF;
  --cream:      #FFFBEF;   /* tp-cream */
  --ok:         #0B7A3B;
  --warn:       #B36B00;
  --danger:     #C0272D;
  --wrap:       1140px;
  --font: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;   /* tp-font */
  --mono: 'Consolas', 'Courier New', monospace;        /* tp-mono */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body.site {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.14; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(30px, 4.4vw, 44px); }
h2 { font-size: clamp(22px, 2.8vw, 29px); }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
p  { color: var(--ink-soft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 0; }

/* ── Navigation: the same navy bar the application wears ─── */
.nav { background: var(--blue-dark); position: sticky; top: 0; z-index: 50; }
.nav-in { display: flex; align-items: center; gap: 22px; height: 52px; }
.brand { display: flex; align-items: baseline; gap: 8px; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.brand-name b { font-weight: 800; color: var(--amber); }
.brand-sub { font-size: 11px; color: rgba(255,255,255,.62); }

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-links a {
  padding: 6px 11px; font-size: 13.5px; color: rgba(255,255,255,.84);
  text-decoration: none;
}
.nav-links a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.10); }
.nav-links a.on { color: var(--amber); font-weight: 700; }
.nav-cta, .nav-cta-ghost { margin-left: 8px; }
.nav-cta { background: var(--amber); color: var(--ink) !important; font-weight: 700; padding: 6px 14px !important; }
.nav-cta:hover { background: #fff; }
.nav-cta-ghost { background: var(--cream); color: var(--ink) !important; font-weight: 600; padding: 6px 14px !important; }
.nav-cta-ghost:hover { background: #fff; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.35);
  width: 34px; height: 30px; cursor: pointer; color: #fff;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 52px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blue-dark); padding: 6px 20px 14px; display: none;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 9px 4px; }
  .nav-cta, .nav-cta-ghost { margin-left: 0; text-align: center; margin-top: 6px; }
}

/* ── Bands ──────────────────────────────────────────────── */
section { padding: 52px 0; }
section.tight { padding: 36px 0; }
section.ground { background: var(--band); }
section.paper { background: var(--paper); }

.section-head { margin-bottom: 26px; }
.section-head h2 { margin-bottom: 3px; }
.section-head p { font-size: 14px; color: var(--ink-mute); max-width: 78ch; }
.eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--blue-mid); margin-bottom: 8px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { background: var(--band); padding: 46px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 44px; align-items: center; }
.hero h1 { margin-bottom: 14px; }
.hero p.lead { font-size: 16.5px; color: var(--ink); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-note { margin-top: 13px; font-size: 13px; color: var(--ink-soft); }
.ver-tag {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  border: 1px solid var(--blue); color: var(--blue); padding: 1px 8px; margin-bottom: 12px;
  background: var(--cream);
}
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--blue); cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: var(--cream); color: var(--ink); }
.btn-ghost:hover { background: #fff; }

/* ── The drawings ───────────────────────────────────────── */
svg.gfx { display: block; width: 100%; height: auto; }

/* Charts sitting side by side are rarely the same height, so each one fills
   the row it is in and centres what it draws rather than leaving a gap. */
.chart {
  background: var(--paper); border: 1px solid var(--line); padding: 14px 16px 16px;
  display: flex; flex-direction: column;
}
/* A drawing is capped at 1.3x its own units (see gfx_cap) so labels keep a
   constant size, then centred in whatever space is left over. */
.chart > svg { margin: auto; }
.chart.wide { grid-column: 1 / -1; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-mute); margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 8px;
}

/* Text inside the drawings. Kept here so every chart labels alike. */
.chart .axis   { font: 500 10px var(--font); fill: var(--ink-mute); }
.chart .row-l  { font: 500 11.5px var(--font); fill: var(--ink); }
.chart .row-s  { font: 500 10px var(--mono); fill: var(--ink-soft); }
.chart .row-n  { font: 700 11.5px var(--mono); fill: var(--ink); }
.chart .row-in { font: 700 10px var(--mono); fill: #fff; }
.chart .bar-n  { font: 700 11px var(--mono); fill: var(--ink); }
.chart .ring-n { font: 800 21px var(--mono); fill: var(--ink); }
.chart .ring-l { font: 500 9.5px var(--font); fill: var(--ink-mute); }
.chart .stage-n{ font: 800 20px var(--mono); }
.chart .stage-l{ font: 600 10.5px var(--font); fill: var(--ink-soft); }
.chart .zone   { font: 700 9.5px var(--font); fill: var(--ink-mute); letter-spacing: .1em; }
.chart .tiny   { font: 500 9px var(--font); fill: var(--ink-mute); }
.chart .branch-l { font: 700 12px var(--font); }
.chart .tiny-ok{ font: 700 9.5px var(--font); fill: var(--ok); }

.chart-ring { display: flex; align-items: center; gap: 18px; flex: 1; }
.chart-ring svg { width: 150px; flex-shrink: 0; }
.legend { list-style: none; flex: 1; min-width: 0; }
.legend li {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.legend li:last-child { border-bottom: 0; }
.legend i { width: 10px; height: 10px; flex-shrink: 0; }
.legend span { flex: 1; color: var(--ink-soft); }
.legend b { font-family: var(--mono); font-size: 12px; }

.charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 820px) { .charts { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .chart-ring { flex-direction: column; align-items: stretch; } .chart-ring svg { width: 100%; } }

/* Figures: a number instead of a sentence. */
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); background: var(--paper);
}
.figure { padding: 16px 18px; border-left: 1px solid var(--line-soft); }
.figure:first-child { border-left: 0; }
.figure-n { font-family: var(--mono); font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.figure-l { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
@media (max-width: 720px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(3) { border-left: 0; }
  .figure:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ── Feature lists: an icon, a title, a line ────────────── */
.grid { display: grid; gap: 22px 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* An icon in the first column and everything else in the second, whether the
   text is wrapped in a div of its own or sits as siblings of the icon. */
.card { display: grid; grid-template-columns: 28px 1fr; gap: 3px 12px; align-content: start; }
.card .ico {
  grid-column: 1; grid-row: 1 / -1; align-self: start;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--btnbar); color: var(--blue); font-size: 13px;
}
.card > :not(.ico) { grid-column: 2; }
.card h3 { margin-bottom: 2px; }
.card p { font-size: 13.5px; }

/* Bordered boxes, for things a visitor chooses between. */
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.box { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px 20px; }
.box.lead-box { border: 2px solid var(--blue); }
.box h3 { margin-bottom: 6px; }
.box p { font-size: 13.5px; }
.box .btn { width: 100%; justify-content: center; margin-top: 14px; }
.box .fine { display: block; margin-top: 9px; font-size: 11.5px; color: var(--ink-mute); }
.tagline {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue); background: var(--btnbar);
  padding: 2px 8px; margin-bottom: 8px;
}
@media (max-width: 860px) { .boxes { grid-template-columns: 1fr; } }

/* ── Forms ──────────────────────────────────────────────── */
/* Cream field, square corners, navy rule: the same field the application
   uses, so the first form somebody fills in looks like the ones inside. */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.field label .opt { font-weight: 400; color: var(--ink-mute); }
.field input, .field select {
  width: 100%; background: var(--cream); border: 1px solid var(--line);
  padding: 9px 11px; font-family: var(--font); font-size: 14.5px;
  color: var(--ink); border-radius: 0; outline: none;
}
.field input:focus, .field select:focus {
  background: #fff; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
}
.field input::placeholder { color: #9AA8BF; }
.field .hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; gap: 0; } }

.alert {
  border: 1px solid var(--danger); border-left-width: 4px; background: #FDF3F3;
  padding: 10px 13px; font-size: 13.5px; color: #8A1F23; margin-bottom: 16px;
}
.alert b { display: block; color: var(--danger); }

/* Something the visitor must write down before leaving the page. */
.cred { border: 1px solid var(--line); background: var(--cream); padding: 10px 13px; margin-bottom: 10px; }
.cred small {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
}
.cred .v { font-family: var(--mono); font-size: 15px; font-weight: 700; word-break: break-all; }
.warn {
  border: 1px solid var(--amber); border-left-width: 4px; background: #FFFAEC;
  padding: 10px 13px; font-size: 13px; color: #6B4E00; margin: 14px 0;
}
.ticks { list-style: none; margin-top: 4px; }
.ticks li {
  display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-soft);
  padding: 6px 0; border-bottom: 1px solid var(--line-soft);
}
.ticks li:last-child { border-bottom: 0; }
.ticks i { color: var(--ok); font-size: 11px; margin-top: 4px; }

/* ── Numbered steps, side by side ───────────────────────── */
.walk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.walk-step .n {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-family: var(--mono);
  font-size: 12px; font-weight: 700; margin-bottom: 9px;
}
.walk-step h3 { margin-bottom: 3px; }
.walk-step p { font-size: 13px; }
@media (max-width: 860px) { .walk { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .walk { grid-template-columns: 1fr; } }

/* ── Steps, the accordion on the getting-started page ───── */
.steps { counter-reset: step; display: grid; gap: 8px; }
.step { background: var(--paper); border: 1px solid var(--line); }
.step-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink);
  text-align: left;
}
.step-head:hover { background: var(--cream); }
.step-head .n {
  counter-increment: step; flex-shrink: 0;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.step-head .n::before { content: counter(step); }
.step-head .chev { margin-left: auto; color: var(--ink-mute); font-size: 11px; transition: transform .18s; }
.step.open .step-head .chev { transform: rotate(180deg); }
.step-body { display: none; padding: 0 18px 18px 50px; }
.step.open .step-body { display: block; }
.step-body p { font-size: 14px; margin-bottom: 9px; }
.step-body ul { margin: 0 0 11px 17px; color: var(--ink-soft); font-size: 14px; }
.step-body li { margin-bottom: 5px; }
.step-body .chart { margin-top: 14px; }
.keys {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  background: var(--cream); border: 1px solid var(--line);
  padding: 0 6px; color: var(--ink);
}

/* ── Role switcher ──────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 8px 16px; border: 1px solid transparent; border-bottom: 0;
  background: none; cursor: pointer; font-family: var(--font); font-size: 13.5px;
  color: var(--ink-soft); margin-bottom: -1px;
}
.tab:hover { color: var(--blue); }
.tab.on {
  background: var(--paper); border-color: var(--line);
  color: var(--blue); font-weight: 700;
}
.panel { display: none; }
.panel.on { display: block; }
.panel ul { margin: 12px 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.panel li { margin-bottom: 5px; }

/* ── Releases ───────────────────────────────────────────── */
.rel { display: grid; grid-template-columns: 170px 1fr; gap: 26px; padding: 24px 0; border-top: 1px solid var(--line); }
.rel:first-child { border-top: 0; }
.rel-meta .ver { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.rel-meta .date { font-size: 13px; color: var(--ink-mute); }
.rel-meta .tag {
  display: inline-block; margin-top: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; background: var(--btnbar); color: var(--blue);
}
.rel-meta .tag.current { background: var(--ok); color: #fff; }
.rel h3 { margin-bottom: 5px; font-size: 17px; }
.rel .summary { margin-bottom: 14px; font-size: 14px; }
.rel-group { margin-bottom: 12px; }
.rel-group h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-mute); margin-bottom: 6px;
}
.rel-group ul { margin-left: 17px; color: var(--ink-soft); font-size: 14px; }
.rel-group li { margin-bottom: 4px; }
@media (max-width: 760px) { .rel { grid-template-columns: 1fr; gap: 10px; } }

/* ── Frequently asked ───────────────────────────────────── */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15px; list-style: none;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; font-family: var(--mono); font-size: 16px;
  font-weight: 700; color: var(--blue);
}
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin-top: 8px; font-size: 14px; }
.faq p + p { margin-top: 7px; }

/* ── Call to action ─────────────────────────────────────── */
.cta { background: var(--blue-dark); color: #fff; }
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: rgba(255,255,255,.80); max-width: 60ch; margin-bottom: 20px; font-size: 14.5px; }
.cta .btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.cta .btn-primary:hover { background: #fff; border-color: #fff; }
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.10); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Footer ─────────────────────────────────────────────── */
.foot { background: var(--blue-dark); color: #fff; padding: 40px 0 0; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 30px; }
.foot .brand-name { color: #fff; }
.foot .brand-name b { color: var(--amber); }
.foot-col h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55); margin-bottom: 10px; font-weight: 700;
}
.foot-col a { display: block; color: rgba(255,255,255,.84); font-size: 13.5px; padding: 3px 0; }
.foot-col a:hover { color: var(--amber); }
.foot-note { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 10px; }
.foot-legal {
  border-top: 1px solid rgba(255,255,255,.14); padding: 14px 0;
  font-size: 12.5px; color: rgba(255,255,255,.55);
}
@media (max-width: 860px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-in { grid-template-columns: 1fr; } }