/* IXXO Med marketing site. One stylesheet, tokens first.
   To try another blue, change --blue / --blue-deep / --blue-tint below (the brand page lists the options). */

/* Fonts, self hosted (no request to Google, GDPR). SIL Open Font License, see assets/fonts/OFL-*.txt.
   Variable files: Commissioner wght 100 to 900 with FLAR and VOLM axes; JetBrains Mono wght 400 to 800.
   The browser downloads only the subsets a page actually uses (unicode-range). */
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/commissioner-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/commissioner-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/commissioner-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jetbrains-mono-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--ink: #1b2c46;          /* IXXO navy: all text */
	--ink-2: #4b5b73;        /* secondary text */
	--ink-3: #5f6e84;        /* captions */
	--black: #1a1a1a;        /* IXXO black (logo) */
	--orange: #f6921e;       /* IXXO orange: the dot, never body text */
	--orange-deep: #a8520b;  /* orange for small text on light grounds (AA, 4.9:1 even on orange tint) */
	--orange-tint: #fff3e5;
	--blue: #2563c9;         /* proposed medical blue */
	--blue-deep: #1c4fa6;
	--blue-tint: #ebf2fd;
	--green: #27774f;         /* AA on green tint */
	--green-tint: #e8f5ee;
	--paper: #fdfdfd;
	--surface: #ffffff;
	--mist: #f3f6fa;
	/* Border colour: ONE token for every border, divider and rule (owner, 4 Oct 2026: no grey lines).
	   Two variants for the owner to choose; each has a line colour and a stronger tint of the same hue for form fields.
	   LB light blue (tint of Med Blue #2563c9): line 1.5:1 on white, field 3.7:1.
	   PO pastel of #F09400: line 1.6:1 on white, field 3.7:1. Dark mode values are set further down. */
	--edge-lb: #bcd3f3; --edge-lb-field: #5f86c8;
	--edge-po: #f4c886; --edge-po-field: #b5770f;
	--line: var(--edge-lb); --field: var(--edge-lb-field);   /* THE SWITCH: lb = light blue, po = pastel orange */
	--line-2: var(--line);    /* same colour everywhere; kept as a name for older rules */
	--shadow: 0 1px 2px rgba(27, 44, 70, .06), 0 12px 32px -12px rgba(27, 44, 70, .18);
	--radius: 14px;
	--radius-sm: 10px;
	--wrap: 1180px;
	--gutter: 24px;
	--font: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	color-scheme: light;
}

:root[data-blue="aegean"] { --blue: #1f72b8; --blue-deep: #175c96; --blue-tint: #e8f2fa; }
:root[data-blue="harbour"] { --blue: #24508f; --blue-deep: #1b3f72; --blue-tint: #eaf0f8; }

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e7edf6;
		--ink-2: #b4c0d2;
		--ink-3: #93a1b6;
		--orange-deep: #f6a24a;
		--orange-tint: #2e2418;
		--blue: #7eaaf0;
		--blue-deep: #a4c3f6;
		--blue-tint: #1a2a45;
		--green: #6cc79a;
		--green-tint: #16302a;
		--paper: #0e1626;
		--surface: #152036;
		--mist: #111b2e;
		--edge-lb: #2c466f; --edge-lb-field: #5d82bd;   /* muted blue: line 1.7:1 on the dark surface, field 4.2:1 */
		--edge-po: #5a4220; --edge-po-field: #a87632;   /* muted amber: line 1.7:1, field 4.1:1 */
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
		color-scheme: dark;
	}
	:root[data-blue="aegean"] { --blue: #74b2e6; --blue-deep: #9cc9ef; --blue-tint: #15293f; }
	:root[data-blue="harbour"] { --blue: #8fb0e3; --blue-deep: #b0c8ee; --blue-tint: #1a2740; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 350;
	font-size: 17px;
	line-height: 1.6;
	font-variation-settings: "FLAR" 0, "VOLM" 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
strong, b { font-weight: 550; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 300; letter-spacing: -0.018em; line-height: 1.12; }
.display, h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); font-variation-settings: "FLAR" 100, "VOLM" 0; font-weight: 280; letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); font-variation-settings: "FLAR" 100; font-weight: 300; }
h3 { font-size: 1.22rem; font-weight: 450; letter-spacing: -0.008em; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); color: var(--ink-2); line-height: 1.55; max-width: 38em; font-weight: 320; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.mono { font-family: var(--mono); font-size: .85em; letter-spacing: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 500; color: var(--ink-2); letter-spacing: .02em; margin-bottom: 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; display: inline-block; }
.tbc { border-bottom: 1.5px dashed var(--orange); color: var(--orange-deep); font-weight: 450; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.section.mist { background: var(--mist); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack > * + * { margin-top: 16px; }
@media (max-width: 860px) { .grid-2, .grid-2[style] { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 520px) { :root { --gutter: 16px; } body { font-size: 16px; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 28px; width: auto; }
.brand img.brand-mark { height: 34px; width: 34px; display: block; }
.brand img.brand-box { height: 34px; width: auto; display: block; } /* owner, 6 Oct 2026: symbol only, no word */
.heart-lockup { margin: 0 0 26px; }
.heart-lockup img { height: 34px; width: auto; max-width: 100%; }
.heart-lockup.sm { margin-bottom: 18px; }
.heart-lockup.sm img { height: 24px; }
@media (max-width: 520px) { .heart-lockup img { height: 28px; } .heart-lockup.sm img { height: 22px; } }
@media (max-width: 520px) { .app-lockup img { width: 28px; height: 28px; } .app-lockup.sm img { width: 22px; height: 22px; } .app-lockup { font-size: 1.4rem; } .app-lockup.sm { font-size: 1.05rem; } }
.app-head img { width: 20px; height: 20px; border-radius: 5px; }
.brand .brand-word { font-size: 1.42rem; font-weight: 330; letter-spacing: -0.01em; line-height: 1; margin-bottom: -1px; color: var(--ink); font-variation-settings: "FLAR" 100; }
.nav-links { display: flex; align-items: center; gap: 24px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 400; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-tools { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; font-size: .8rem; }
.lang a, .lang span { padding: 3px 9px; border-radius: 999px; text-decoration: none; color: var(--ink-2); line-height: 1.3; }
.lang span[aria-current] { background: var(--ink); color: var(--paper); }
/* Language drop down (option for the owner, 5 Oct 2026; only used when the build sets LANG_SWITCH to dropdown) */
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px 3px 11px; font-size: .8rem; line-height: 1.3; color: var(--ink-2); cursor: pointer; user-select: none; }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary:hover, .lang-dd[open] > summary { color: var(--ink); border-color: var(--blue); }
.lang-chev { transition: transform .15s; }
.lang-dd[open] .lang-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .lang-chev { transition: none; } }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 172px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--blue-tint); }
.lang-menu .lang-code { min-width: 2.1em; font-size: .78rem; color: var(--ink-3); }
.lang-menu a[aria-current] { color: var(--blue); font-weight: 500; }
.lang-menu a[aria-current]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.lang-narrow { display: none; }
.nav-login { font-size: .92rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; align-items: center; min-height: 44px; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 18px; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; }
@media (max-width: 1080px) {
	.menu-btn { display: inline-flex; }
	.nav { gap: 14px; }
	.nav-panel { display: none; position: absolute; left: 0; right: 0; top: 68px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; box-shadow: var(--shadow); }
	.nav-panel.open { display: block; }
	.nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
	.nav-links a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
	.nav-links a[aria-current="page"] { text-decoration: none; color: var(--blue); }
	.nav-tools { margin-top: 18px; flex-wrap: wrap; gap: 12px 16px; }
	.nav-tools .lang { font-size: .95rem; }
	.nav-tools .lang-dd + .lang-narrow { display: inline-flex; }
	.nav-tools .lang-dd:has(+ .lang-narrow) { display: none; }
	.nav-tools .lang-dd > summary { min-height: 40px; font-size: .95rem; padding: 0 14px 0 16px; }
	.nav-tools .lang-menu { left: 0; right: auto; }
	.nav-tools .lang a, .nav-tools .lang span { display: inline-flex; align-items: center; min-height: 40px; min-width: 48px; justify-content: center; }
	.nav-tools .nav-login { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
	.nav-tools .btn-sm { height: 44px; font-size: .98rem; padding: 0 20px; }
	.no-js .nav-panel { display: block; position: static; box-shadow: none; }
}
@media (min-width: 1081px) { .nav-panel { display: flex; align-items: center; gap: 28px; flex: 1; } .nav-panel nav { margin-left: auto; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: .98rem; font-weight: 450; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color .18s, color .18s, border-color .18s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary, .btn-primary:hover { color: #0e1626; } }
.btn-primary:focus-visible { outline-offset: 3px; }
.btn-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: .9rem; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { height: 38px; padding: 0 16px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow-link { font-weight: 450; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.arrow-link::after { content: "\2192"; transition: transform .18s; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { max-width: 14em; font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.35rem); }
.hero .lead { margin: 22px 0 32px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero h1 { max-width: 15em; } }
.page-hero { padding: clamp(44px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.page-hero h1 { max-width: 16em; }
.page-hero .lead { margin-top: 20px; }

/* ---------- vignette base (UI illustrations, not screenshots) ---------- */
.vig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; color: var(--ink); position: relative; }
.vig-label { font-size: .78rem; color: var(--ink-3); margin-top: 12px; }

/* calendar */
.cal-scene { position: relative; padding-bottom: 54px; }
.cal { overflow: hidden; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cal-date { font-weight: 500; font-size: 14px; }
.cal-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 12px; }
.cal-seg span { padding: 4px 10px; color: var(--ink-2); }
.cal-seg span.on { background: var(--blue-tint); color: var(--blue); font-weight: 500; }
.cal-cols { display: grid; grid-template-columns: 46px 1fr 1fr; }
.cal-colhead { padding: 9px 10px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; align-items: center; gap: 7px; }
.cal-colhead i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-body { position: relative; height: 336px; grid-column: 1 / -1; display: grid; grid-template-columns: 46px 1fr 1fr; background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 84px); }
.cal-times { position: relative; }
.cal-times span { position: absolute; left: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); transform: translateY(4px); }
.cal-col { position: relative; border-left: 1px solid var(--line); }
.appt { position: absolute; left: 5px; right: 5px; border-radius: 7px; padding: 5px 8px; background: var(--blue-tint); border-left: 3px solid var(--blue); overflow: hidden; }
.appt b { display: block; font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt small { display: block; color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.t-new { background: var(--green-tint); border-left-color: var(--green); }
.appt.t-gesy { background: var(--orange-tint); border-left-color: var(--orange); }
.appt.t-echo { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); border-left-color: var(--ink-2); }
.appt.t-free { background: transparent; border: 1px dashed var(--line-2); border-left: 1px dashed var(--line-2); color: var(--ink-3); }
.appt .chip { display: inline-block; margin-top: 3px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.now-line { position: absolute; left: 40px; right: 0; height: 0; border-top: 1.5px solid var(--orange); z-index: 2; }
.now-line::before { content: ""; position: absolute; left: -6px; top: -6.75px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
	.now-line::before { animation: nowpulse 2.8s ease-in-out infinite; }
	@keyframes nowpulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--orange) 8%, transparent); } }
}

/* SMS notification card over the calendar */
.sms { position: absolute; left: -18px; bottom: 0; width: min(330px, 78%); padding: 13px 15px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.42; z-index: 3; }
.sms-top { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; margin-bottom: 5px; }
.sms-top b { color: var(--ink); font-weight: 500; }
.sms-reply { margin-top: 9px; display: flex; justify-content: flex-end; }
.sms-reply span { background: var(--blue); color: #fff; border-radius: 12px 12px 4px 12px; padding: 3px 12px; font-weight: 500; }
@media (prefers-color-scheme: dark) { .sms-reply span { color: #0e1626; } }
@media (max-width: 960px) { .sms { left: 12px; } }
@media (max-width: 520px) {
	.cal-cols, .cal-body { grid-template-columns: 38px 1fr 1fr; }
	.cal-times span { left: 4px; font-size: 9.5px; }
	.now-line { left: 34px; }
	.appt { left: 3px; right: 3px; padding: 4px 6px; }
	.appt small { font-size: 10.5px; }
	.cal-seg span { padding: 4px 7px; }
	.sms { width: 88%; left: 6%; }
}

/* ---------- day timeline (home) ---------- */
.day { position: relative; display: grid; gap: 0; max-width: 980px; }
.day-row { display: grid; grid-template-columns: 80px 28px minmax(0, 1.6fr) minmax(0, .7fr); gap: 0 24px; align-items: start; padding: 26px 0; }
.day-row + .day-row { border-top: 1px solid var(--line); }
.day-time { font-family: var(--mono); font-size: .95rem; color: var(--ink-2); padding-top: 3px; }
.day-mark { position: relative; height: 100%; display: flex; justify-content: center; }
.day-mark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); margin-top: 8px; }
.day-row.is-now .day-mark::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 18%, transparent); }
.day-row h3 { margin-bottom: 6px; }
.day-row p { color: var(--ink-2); margin: 0; }
.day-who { font-size: .85rem; color: var(--ink-3); padding-top: 4px; }
.day-who span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin: 0 6px 6px 0; background: var(--surface); }
@media (max-width: 760px) {
	.day-row { grid-template-columns: 64px 18px minmax(0, 1fr); gap: 0 14px; }
	.day-who { grid-column: 3; padding-top: 12px; }
	.day-time { font-size: .85rem; }
}

/* ---------- bento (Cyprus) ---------- */
/* Every row shares the same column line (two equal columns, one row of cells below the other), so the
   dividers line up; inner cards use the full width of their cell with the same padding (layout QA, 4 Oct 2026). */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.cell { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cell h3 { margin: 0; }
.cell p { margin: 0; color: var(--ink-2); }
.cell .vig { margin-top: auto; box-shadow: none; }
.cell > div:has(> .vig, > .cms-pic) { max-width: none !important; margin-top: auto; }   /* the receipt wrapper had an inline 360px cap; a picture an administrator put in its place fills the cell the same way */
.cell .vig.receipt, .cell .vig.search, .cell .vig.smpc { padding: 16px; }
.cell.c-4, .cell.c-2, .cell.c-3 { grid-column: span 3; }
.cell.tint-blue { background: var(--blue-tint); border-color: transparent; }
.cell.tint-orange { background: var(--orange-tint); border-color: transparent; }
.cell.tint-mist { background: var(--mist); border-color: transparent; }
@media (max-width: 980px) { .cell.c-4, .cell.c-2, .cell.c-3 { grid-column: span 6; } }

/* receipt */
.receipt { padding: 16px 18px; font-size: 12.5px; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.receipt-row + .receipt-row { border-top: 1px dashed var(--line); }
.receipt .amount { font-size: 22px; font-weight: 400; font-family: var(--mono); letter-spacing: -0.02em; }
.receipt-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-weight: 500; padding: 4px 12px; font-size: 12px; }

/* search */
.search { padding: 14px; }
.search-input { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--blue); border-radius: 9px; padding: 8px 11px; font-size: 14px; }
.search-input svg { width: 15px; height: 15px; color: var(--ink-3); }
.search-input .caret { display: inline-block; width: 1px; height: 16px; background: var(--ink); margin-left: -6px; }
@media (prefers-reduced-motion: no-preference) { .search-input .caret { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.search-list { margin: 8px 0 0; padding: 0; list-style: none; }
.search-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; border-radius: 7px; }
.search-list li:first-child { background: var(--blue-tint); }
.search-list li span { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.search-list mark { background: color-mix(in srgb, var(--orange) 26%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* SmPC popup */
.smpc { padding: 16px; }
.smpc-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.smpc-head b { font-weight: 500; font-size: 14px; }
.smpc-head span { color: var(--ink-3); font-size: 11.5px; }
.tabs-mini { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; }
.tabs-mini span { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.tabs-mini span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.smpc-text { font-size: 12px; color: var(--ink-2); border-left: 2px solid var(--line-2); padding-left: 10px; }
.smpc-foot { margin-top: 12px; font-size: 11px; color: var(--ink-3); }

/* certificate chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }   /* no list bottom margin: same bottom padding as the other cells */
.chips li { font-size: .86rem; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

/* ---------- role tabs ---------- */
.roles { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.role-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 92px; }
.role-tab { text-align: left; background: none; border: 0; border-left: 2px solid var(--line); padding: 14px 18px; font: inherit; font-size: 1.15rem; font-weight: 320; color: var(--ink-2); cursor: pointer; }
.role-tab[aria-selected="true"] { color: var(--ink); border-left-color: var(--orange); font-weight: 400; }
.role-tab:hover { color: var(--ink); }
.role-panel h3 { font-size: 1.6rem; font-weight: 300; font-variation-settings: "FLAR" 100; margin-bottom: 10px; }
.role-panel > p { color: var(--ink-2); max-width: 40em; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
.ticks li { position: relative; padding-left: 24px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 6px; border-left: 1.6px solid var(--blue); border-bottom: 1.6px solid var(--blue); transform: rotate(-45deg) translateY(-3px); }
.ticks li span { display: block; color: var(--ink-2); font-size: .93rem; }
.js .role-panel[hidden] { display: none; }
.no-js .role-tabs { display: none; }
.no-js .role-panel + .role-panel { margin-top: 48px; }
@media (max-width: 860px) {
	.roles { grid-template-columns: minmax(0, 1fr); }
	.role-tabs { position: static; flex-direction: row; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line); }
	.role-tab { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: 1rem; white-space: nowrap; }
	.role-tab[aria-selected="true"] { border-bottom-color: var(--orange); }
	.ticks { grid-template-columns: 1fr; }
}

/* ---------- phone (Heart app) ---------- */
.phone-scene { position: relative; display: flex; justify-content: center; gap: 20px; align-items: flex-end; }
.phone { width: 288px; border-radius: 40px; padding: 12px; background: var(--black); box-shadow: var(--shadow); flex: none; }
.phone-screen { border-radius: 30px; background: #f6f8fb; overflow: hidden; padding: 38px 14px 16px; color: #1b2c46; font-size: 12px; line-height: 1.35; position: relative; }
.phone-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 82px; height: 22px; margin-left: -41px; border-radius: 999px; background: var(--black); }
.app-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-weight: 500; font-size: 13px; }
.app-head svg { width: 18px; height: 18px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { background: #fff; border-radius: 14px; padding: 10px; min-height: 76px; border: 1px solid #e6ebf2; }
.tile small { display: block; color: #5b6b82; font-size: 10.5px; margin-bottom: 4px; }
.tile b { font-weight: 500; font-size: 13px; display: block; }
.tile.wide { grid-column: span 2; min-height: 0; display: flex; justify-content: space-between; align-items: center; }
.tile .ok { color: #27774f; font-size: 11px; font-weight: 500; }
.sos { margin-top: 10px; border-radius: 12px; background: #fdecec; color: #9a2a2a; padding: 8px 10px; font-size: 11px; display: flex; justify-content: space-between; gap: 8px; }
.sos b { font-weight: 600; }
.watch { width: 132px; flex: none; margin-bottom: 26px; }
.watch-case { border-radius: 34px; background: var(--black); padding: 9px; box-shadow: var(--shadow); }
.watch-screen { border-radius: 26px; background: #0b0f17; color: #fff; padding: 16px 12px; text-align: left; font-size: 11px; line-height: 1.3; min-height: 136px; }
.watch-screen small { color: #9aa6b8; display: block; font-size: 10px; }
.watch-screen b { display: block; font-size: 24px; font-weight: 300; font-family: var(--mono); letter-spacing: -0.04em; margin: 3px 0; }
.watch-screen .w-btn { display: block; margin-top: 8px; background: #23324c; border-radius: 999px; padding: 5px 9px; font-size: 10.5px; text-align: center; }
@media (max-width: 520px) { .phone-scene { gap: 10px; } .phone { width: 226px; padding: 10px; border-radius: 34px; } .phone-screen { border-radius: 26px; padding: 36px 10px 12px; } .watch { width: 100px; } .watch-screen { padding: 12px 9px; } .watch-screen b { font-size: 19px; } }
@media (max-width: 360px) { .phone { width: 196px; } .watch { width: 88px; margin-bottom: 18px; } .watch-case { border-radius: 26px; padding: 7px; } .watch-screen { border-radius: 20px; min-height: 110px; padding: 10px 7px; font-size: 10px; } .watch-screen b { font-size: 16px; } .tile { padding: 8px; } }

/* ---------- editions ---------- */
.editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.edition { padding: 32px clamp(18px, 2.4vw, 36px) 36px; display: flex; flex-direction: column; gap: 12px; }
.edition + .edition { border-left: 1px solid var(--line); }
.edition h3, .edition h2 { font-size: 1.6rem; font-weight: 300; font-variation-settings: "FLAR" 100; }
.edition .for { color: var(--ink-2); min-height: 3.2em; }
.price { font-size: 1rem; color: var(--ink-2); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price b { display: block; font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.price b.amount { font-size: 2rem; font-weight: 400; line-height: 1.15; font-variant-numeric: tabular-nums; }
.price span { display: block; font-size: .9rem; }
.price .yearly { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.price-notes { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 32px; color: var(--ink-2); font-size: .95rem; }
.price-notes p { margin: 0; }
.price-notes b { font-weight: 500; color: var(--ink); }
.app-lockup { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 400; color: var(--ink); line-height: 1; }
.app-lockup img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.app-lockup.sm { font-size: 1.15rem; gap: 9px; }
.app-lockup.sm img { width: 24px; height: 24px; border-radius: 6px; }
.edition .plus { margin: 4px 0 -4px; font-size: .9rem; color: var(--ink-2); }
.edition ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; font-size: .95rem; }
.edition ul li { padding-left: 18px; position: relative; }
.edition ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--blue); }
.edition .btn { margin-top: auto; align-self: flex-start; }
.edition.featured { background: var(--blue-tint); border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 900px) { .edition.featured { border-radius: var(--radius); } .editions { grid-template-columns: 1fr; } .edition + .edition { border-left: 0; border-top: 1px solid var(--line); } .edition .for { min-height: 0; } }

/* comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { padding: 12px 18px; text-align: left; vertical-align: top; }
.compare thead th { font-weight: 500; font-size: .9rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--surface); }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 15%; }
.compare tbody th { font-weight: 400; }
.compare tbody th span { display: block; color: var(--ink-3); font-size: .85rem; font-weight: 350; }
.compare tr.group th { padding-top: 26px; font-weight: 500; font-size: .82rem; color: var(--orange-deep); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.yes { display: inline-block; width: 18px; height: 10px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg) translate(2px, -2px); }
.no { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--ink-3); vertical-align: middle; }
.compare td.val { font-size: .9rem; color: var(--ink); }
@media (max-width: 700px) {
	.compare-wrap { overflow: visible; }
	.compare { min-width: 0; }
	.compare, .compare tbody, .compare tr { display: block; }
	.compare thead { display: none; }
	.compare tr:not(.group) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
	.compare tr.group th { display: block; }
	.compare tbody th { grid-column: 1 / -1; padding-bottom: 6px; }
	.compare td, .compare td:not(:first-child) { display: flex; align-items: center; gap: 10px; width: auto; text-align: left; padding: 4px 18px 8px; }
	.compare td.val { flex-direction: column; align-items: flex-start; gap: 0; }
	.compare td::before { content: attr(data-label); font-size: .74rem; color: var(--ink-3); }
	.compare tr.all { display: block; padding-bottom: 0; }
	.compare tr.all td { display: none; }
	.compare tr.all th { position: relative; padding: 10px 18px 10px 44px; }
	.compare tr.all th::before { content: ""; position: absolute; left: 19px; top: 1.15em; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
}

/* ---------- features page ---------- */
.feat-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); } .feat-layout > div { min-width: 0; } .feat-layout { gap: clamp(32px, 5vw, 72px); align-items: start; }
.feat-index { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; font-size: .93rem; }
.feat-index a { color: var(--ink-2); text-decoration: none; padding: 7px 0 7px 14px; border-left: 2px solid var(--line); }
.feat-index a:hover { color: var(--ink); }
.feat-index a.active { color: var(--ink); border-left-color: var(--orange); }
.feat-group { padding: 0 0 clamp(56px, 7vw, 96px); scroll-margin-top: 96px; }
.feat-group + .feat-group { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.feat-group > h2 { margin-bottom: 14px; }
.feat-group > .lead { margin-bottom: 36px; }
.feat-items { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; }
.feat-item h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 6px; }
.feat-item p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.feat-visual { margin: 0 0 40px; }
.tag-ed { display: inline-block; font-size: .72rem; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
@media (max-width: 960px) {
	.feat-layout { grid-template-columns: minmax(0, 1fr); }
	.feat-index { position: static; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 8px; padding: 0 var(--gutter) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.feat-index::-webkit-scrollbar { display: none; }
	.feat-index a, .feat-index a.active { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap; color: var(--ink); }
}
@media (max-width: 680px) { .feat-items { grid-template-columns: 1fr; } }

/* screenshot placeholder */
.shot { margin: 0; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--line) 45%, transparent) 14px 15px), var(--mist); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 8px; }
.shot b { font-weight: 500; font-size: 1rem; }
.shot span { color: var(--ink-2); font-size: .9rem; max-width: 30em; }
.shot .shot-tag { font-size: .75rem; color: var(--orange-deep); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.shot.tall { aspect-ratio: 4 / 3; }
/* real screenshot (2x retina capture of the staff app; light UI in both themes) */
.shot-img { margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #f7f9fc; box-shadow: var(--shadow); }
.shot-img img { width: 100%; height: auto; }
@media (max-width: 520px) { .shot-img { border-radius: var(--radius-sm); } }

/* specialties */
.spec-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.spec-list li { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .92rem; }
.spec-list li.first { border-color: var(--orange); }

/* wizard rail */
.rail { display: flex; gap: 0; padding: 16px; overflow-x: auto; }
.rail-step { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 14px; min-width: 92px; position: relative; font-size: 12px; color: var(--ink-2); }
.rail-step::before { content: ""; height: 3px; width: 100%; border-radius: 3px; background: var(--line); }
.rail-step.done::before { background: var(--blue); }
.rail-step.cur { color: var(--ink); font-weight: 500; }
.rail-step.cur::before { background: linear-gradient(90deg, var(--blue) 50%, var(--line) 50%); }

/* ---------- facts strip (heart / security) ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.fact { padding: 24px 24px 24px 0; }
.fact h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 6px; }
.fact p { color: var(--ink-2); margin: 0; font-size: .96rem; }

/* steps (pairing) */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-family: var(--mono); font-size: .85rem; color: var(--ink-2); }
.steps h3 { font-size: 1.05rem; font-weight: 500; margin: 4px 0 4px; }
.steps p { margin: 0; color: var(--ink-2); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--blue-tint); border-radius: calc(var(--radius) + 6px); padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center; }
.cta-band h2 { max-width: 18em; }
.cta-band p { color: var(--ink-2); margin: 12px 0 0; max-width: 36em; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .92rem; font-weight: 450; color: var(--ink); }
.field .hint { font-size: .83rem; color: var(--ink-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 11px 13px; min-height: 48px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); border-color: var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field .err { font-size: .85rem; color: #b42318; display: none; }
@media (prefers-color-scheme: dark) { .field .err { color: #ff8f85; } }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b42318; }
@media (prefers-color-scheme: dark) { .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ff8f85; } .check .err { color: #ff8f85; } }
.field.invalid .err { display: block; }
.check label { flex: 1; min-width: 0; }
.check .err { display: none; width: 100%; margin-left: 28px !important; font-size: .85rem; color: #b42318; }
.check.invalid .err { display: block; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b7a90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.check { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.notice { border-radius: var(--radius-sm); padding: 14px 16px; font-size: .93rem; background: var(--orange-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.notice b { font-weight: 550; }
.form-result { display: none; }
.form-result.show { display: block; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.aside-card { border-left: 2px solid var(--orange); padding: 4px 0 4px 22px; }
.aside-card h3, .aside-card h2 { margin-bottom: 10px; font-size: 1.22rem; font-weight: 450; letter-spacing: -0.008em; line-height: 1.3; font-variation-settings: normal; }
.aside-card ul { padding-left: 18px; color: var(--ink-2); margin: 0; }
.aside-card li + li { margin-top: 8px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.contact-grid > div { padding: 26px 26px 26px 0; }
.contact-grid h3, .contact-grid h2 { font-size: 1rem; font-weight: 500; margin-bottom: 8px; letter-spacing: 0; line-height: 1.35; font-variation-settings: normal; }
.contact-grid p { margin: 0; color: var(--ink-2); }
.contact-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) and (min-width: 761px) { .contact-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-grid.four > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .contact-grid > div + div { border-top: 1px solid var(--line); } }

/* legal / prose */
.draft-banner { border: 1.5px dashed var(--orange); background: var(--orange-tint); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 40px; font-size: .95rem; }
.draft-banner b { font-weight: 600; color: var(--orange-deep); }
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.45rem; margin: 44px 0 14px; font-weight: 400; font-variation-settings: "FLAR" 0; letter-spacing: -0.01em; }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }

/* about */
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.principle { padding: 26px 0; border-top: 1px solid var(--line); }
.principle h3 { margin-bottom: 8px; }
.principle p { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 50rem; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 32px 16px 0; font-size: 1.06rem; font-weight: 400; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(4px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq details p { color: var(--ink-2); margin: 0 0 18px; max-width: 42em; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--mist); padding: 56px 0 36px; margin-top: 0; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid .foot-h { font-size: .85rem; color: var(--ink-2); font-weight: 500; margin-bottom: 12px; letter-spacing: 0; line-height: 1.35; font-variation-settings: normal; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--ink); text-decoration: none; }
.foot-grid a:hover { color: var(--blue); text-decoration: underline; }
.foot-note { color: var(--ink-2); max-width: 22em; margin-top: 14px; }
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--ink-3); font-size: .85rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } .foot-grid ul { gap: 0; } .foot-grid ul a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
	.js .reveal.in { opacity: 1; transform: none; }
	.js .hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
}

/* ---------- print ---------- */
@media print { .site-header, .site-footer, .cta-band, .feat-index { display: none; } body { background: #fff; color: #000; } .js .reveal { opacity: 1 !important; transform: none !important; } }

.ck { display: inline-block; vertical-align: -1px; margin-left: 4px; }

/* ---------- website editor blocks (classes used only by blocks added in the editor) ---------- */
.cms-pic { display: block; }
.cms-img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.cb-figure { margin: 0; }
.cb-figure figcaption { margin-top: 12px; color: var(--ink-3); font-size: .9rem; text-align: center; }
.cb-quote { margin: 0 auto; max-width: 46rem; }
.cb-quote blockquote { margin: 0; padding-left: clamp(18px, 3vw, 28px); border-left: 3px solid var(--orange); }
.cb-quote blockquote p { margin: 0; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.cb-quote figcaption { margin-top: 16px; padding-left: clamp(18px, 3vw, 28px); color: var(--ink-2); font-size: .95rem; }

/* demo form: field for robots only (people never see it) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.foot-contact { margin-top: 10px; }
.foot-contact a { color: inherit; }
.legal-note { border-left: 3px solid var(--line-2); padding-left: 14px; font-size: .95rem; }
.legal-note b { font-weight: 550; color: var(--ink); }

/* ============================================================================================================
   Polish v2 (approved by the owner, 4 Oct 2026). Owner's rule: no large white spaces anywhere; text fills the
   width it has. Same colours, fonts and look. Kept as one block at the end so it applies over the rules above
   exactly as in the approved preview. Numbers: A as in design-review/polish/README.md (first polish, kept items),
   B as in design-review/polish-v2/README.md. Rules that match inline styles (B5, B6, B8b, B11) also cover blocks
   an administrator kept from an earlier design in the editor.
   ============================================================================================================ */

/* =================== A. Kept from the first polish =================== */

/* A4. One shadow, quieter */
:root { --shadow: 0 1px 2px rgba(27, 44, 70, .05), 0 8px 22px -12px rgba(27, 44, 70, .16); }
@media (prefers-color-scheme: dark) { :root { --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .55); } }

/* A5. Dark mode: text one small step heavier */
@media (prefers-color-scheme: dark) {
	body { font-weight: 370; }
	.lead { font-weight: 340; }
	.display, h1 { font-weight: 300; }
	h2, .role-panel h3, .edition h3, .edition h2 { font-weight: 320; }
}

/* A6. Text selection and typing caret in Med Blue */
::selection { background: color-mix(in srgb, var(--blue) 24%, transparent); color: inherit; }
.field input, .field textarea { caret-color: var(--blue); }

/* A7. Focus ring keeps the shape of rail items */
.role-tab:focus-visible, .feat-index a:focus-visible { border-radius: 0; }

/* A8. Featured edition: no divider running past its rounded corners (divider only) */
.edition.featured, .edition.featured + .edition { border-left-color: transparent; }
@media (max-width: 900px) { .edition.featured, .edition.featured + .edition { border-top-color: transparent; } }

/* A9. Secondary text on tinted panels takes the panel's tint */
.cell.tint-blue > p, .cell.tint-orange > p, .cell.tint-mist > p,
.edition.featured .for, .edition.featured .price, .edition.featured .plus,
.cta-band p { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* A10. Panels inside a rounded cell use the smaller corner */
.cell .vig { border-radius: var(--radius-sm); }

/* A11. The closing band uses the card corner */
.cta-band { border-radius: var(--radius); }

/* A12. Role tabs rail as one continuous line */
.role-tabs { gap: 0; }

/* A13 and A19. Timeline dots and pairing step circles visible */
.day-mark::before, .steps li::before { border-color: var(--field); }

/* A16. Comparison table: capitals get air, figures even width */
.compare tr.group th, .shot .shot-tag { letter-spacing: .06em; }
.compare td, .price { font-variant-numeric: tabular-nums; }

/* A17. Features index rail continuous; edition tag 12px without negative tracking */
@media (min-width: 961px) { .feat-index { gap: 0; } }
.tag-ed { letter-spacing: .01em; font-size: .75rem; }

/* A18. Same role, same size: feature notes and fact notes */
.feat-item p, .fact p { font-size: .95rem; }

/* A20. Demo form: checkbox on the field edge, error under its label, select arrow follows the theme */
.check input { margin: 1px 0 0; }
.check .err { margin-left: 32px !important; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%234b5b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
	.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b4c0d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
}

/* =================== B. White space removed =================== */

/* B1. Text uses the full width of its column: no caps on intros, headings, role text, answers, notes */
.lead, .section-head, .hero h1, .page-hero h1, .role-panel > p, .faq, .faq details p,
.cta-band h2, .cta-band p, .foot-note, .shot span, .cb-quote { max-width: none; }

/* B2. Privacy and Terms: the text spans the same width as the page title */
.wrap.prose { max-width: var(--wrap); }

/* B3. Home timeline spans the full width like every other section */
.day { max-width: none; }

/* B4. One compact rhythm between sections */
.section, .section.tight { padding: clamp(24px, 2.5vw, 36px) 0; }
.hero { padding: clamp(24px, 2.8vw, 40px) 0; }
.page-hero { padding: clamp(24px, 2.4vw, 36px) 0 clamp(20px, 2vw, 28px); }
.page-hero .lead { margin-top: 14px; }
.section-head { margin-bottom: clamp(18px, 1.7vw, 24px); }
.section-head p { margin-top: 12px; }
.section-head > :last-child, .wrap > :last-child, .stack > :last-child, .grid-2 > div > :last-child, .page-hero .lead { margin-bottom: 0; }
.feat-group { padding-bottom: clamp(22px, 2.8vw, 40px); }
.feat-group + .feat-group { padding-top: clamp(22px, 2.8vw, 40px); }
.feat-group > .lead { margin-bottom: 24px; }
.feat-visual { margin-bottom: 28px; }
.site-footer { padding: 40px 0 28px; }
.foot-bottom { margin-top: 28px; }
.prose h2 { margin-top: 32px; }
.draft-banner { margin-bottom: 28px; }

/* B5. 404: no forced tall empty area under the message */
.page-hero[style*="min-height"] { min-height: 0 !important; }

/* B6. Inline gaps from the page builder kept to the same compact rhythm */
[style*="margin-top:56px"], [style*="margin-top:48px"], [style*="margin-top:40px"],
[style*="margin-top:32px"], [style*="margin-top:28px"] { margin-top: 20px !important; }

/* B7. Privacy: the company address runs in three short columns instead of one tall narrow one */
@media (min-width: 640px) { .prose p:has(> a[href^="tel:"]) { columns: 3; column-gap: 24px; } }

/* B8. A lone last feature fills the row instead of leaving the right half empty */
.feat-items > .feat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* B8b. Features, Billing: the sample receipt uses the full width instead of a 420px card with empty space beside it */
.feat-visual > div[style*="max-width:420px"] { max-width: none !important; }

/* B9. Four facts sit in one row (two by two on tablets) instead of three plus one alone */
@media (min-width: 521px) { .facts:has(> .fact:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .facts:has(> .fact:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* B10. Phone: a little less space between sections */
@media (max-width: 520px) {
	.section, .section.tight { padding: 20px 0; }
	.hero { padding: 20px 0; }
	.page-hero { padding: 20px 0 16px; }
	.site-footer { padding: 24px 0 20px; }
}

/* B11. A heading alone in the left half (About "Η IXXO", Heart "Σύνδεση σε τρία βήματα") sits above its text,
   so the text uses the full width instead of leaving the space under the heading empty */
.grid-2[style*="align-items:start"]:has(> div:first-child > h2) { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(16px, 2vw, 24px); }

/* B12. Phone footer: the third group of links spans both columns (its links in two columns), no empty quarter */
@media (max-width: 760px) {
	.foot-grid > div:nth-child(4):last-child { grid-column: 1 / -1; }
	.foot-grid > div:nth-child(4):last-child ul { grid-template-columns: 1fr 1fr; column-gap: 32px; }
	.foot-grid > div:nth-child(4):last-child li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* a fifth link (app privacy, 6 Oct 2026) takes the full row */
}

/* B13. Editions columns end closer to their last line */
.edition { padding-bottom: 24px; }

/* B14. Heart: the three pairing steps side by side on wide screens, so their short lines fill the row */
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; } }

/* B15. Short page titles (Contact, Privacy, Terms): the intro line sits beside the title instead of under it */
@media (min-width: 1000px) {
	.page-hero .wrap:has(> .lead br), html:has(link[rel="canonical"][href$="contact.html"]) .page-hero .wrap { display: flex; align-items: baseline; gap: 20px 48px; }
	.page-hero .wrap:has(> .lead br) > h1, html:has(link[rel="canonical"][href$="contact.html"]) .page-hero .wrap > h1 { flex: none; }
	.page-hero .wrap:has(> .lead br) > .lead, html:has(link[rel="canonical"][href$="contact.html"]) .page-hero .wrap > .lead { flex: 1; margin: 0; }
}

/* B16. Privacy and Terms: lists of three or more points run in two columns on wide screens */
@media (min-width: 900px) {
	.prose ul:has(> li:nth-child(3)) { columns: 2; column-gap: 48px; }
	.prose ul:has(> li:nth-child(3)) > li { break-inside: avoid; }
}

/* B17. Editions on tablets: name and price on the left, what each edition includes on the right (Editions page),
   and the three short editions on Home side by side as on desktop */
@media (min-width: 600px) and (max-width: 900px) {
	.edition:has(> ul) { display: block; columns: 2; column-gap: 32px; }
	.edition:has(> ul) > * + * { margin-top: 12px; }
	.edition:has(> ul) > .price { break-after: column; }
	.edition:has(> ul) > .plus { margin-top: 0; }
	.edition:has(> ul) > .btn { display: flex; width: max-content; }
	.editions:not(:has(.edition > ul)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.editions:not(:has(.edition > ul)) > .edition + .edition { border-top: 0; border-left: 1px solid var(--line); }
	.editions:not(:has(.edition > ul)) > .edition.featured { border-radius: 0 0 var(--radius) var(--radius); }
	.editions:not(:has(.edition > ul)) > .edition.featured, .editions:not(:has(.edition > ul)) > .edition.featured + .edition { border-left-color: transparent; }
}

/* B17b. Heart picture on tablets and phones: the watch sits at the middle of the phone, not at its foot */
@media (max-width: 860px) { .phone-scene { align-items: center; } .watch { margin-bottom: 0; } }

/* B18. Phone: company and contact details two side by side, the longer one across */
@media (max-width: 760px) {
	.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
	.contact-grid > div { padding: 16px 0; }
	.contact-grid > div + div { border-top: 0; }
	.contact-grid > div:nth-child(3n) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
	.contact-grid.four { grid-template-columns: 1fr; }
	.contact-grid.four > div:nth-child(3n) { grid-column: auto; }
	.contact-grid.four > div + div { border-top: 1px solid var(--line); }
}

/* B19. Features index: links a little taller, so the index and the note under it fill the side column */
@media (min-width: 961px) { .feat-index a { padding-top: 9px; padding-bottom: 9px; } }

/* ---------- Layout for the new content N1 to N3 (approved 4 Oct 2026) ---------- */
/* B20 (N1). Features: index and the note under it travel together */
@media (min-width: 961px) {
	.feat-side { position: sticky; top: 96px; align-self: start; }
	.feat-side > .feat-index { position: static; }
	.feat-aside { margin-top: 24px; padding-left: 16px; font-size: .9rem; color: var(--ink-2); }
	.feat-aside p { margin: 0 0 12px; }
	.feat-aside .tag-ed { margin-left: 0; }
	.feat-aside .btn { margin-top: 4px; }
}
@media (max-width: 960px) { .feat-aside { display: none; } }
/* B21 (N2). Demo: screenshot and the phone line under "What you will see" */
.demo-more { margin-top: 28px; display: grid; gap: 24px; }
/* B22 (N3). Page not found: the six main pages, three per row */
.nf-pages { padding-top: 0 !important; }
@media (min-width: 521px) { .nf-pages .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .nf-pages .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nf-pages .fact h3 a { text-decoration: none; }
@media (max-width: 520px) { .nf-pages .fact { padding: 16px 0; } }

/* App privacy policy (6 Oct 2026): the lawyer's data table as a real table, rows stacked on phones; permission names in code style */
.legal-table-wrap { margin: 18px 0 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal-table th, .legal-table td { padding: 12px 18px; text-align: left; vertical-align: top; color: var(--ink-2); }
.legal-table thead th { font-weight: 500; font-size: .9rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.legal-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.legal-table tbody th { font-weight: 400; width: 34%; }
.legal-table tbody th b { color: var(--ink); font-weight: 550; }
.legal-table em { display: block; margin-top: 4px; font-size: .88rem; color: var(--ink-3); }
.legal-table td em { display: inline; margin: 0; font-size: inherit; }
.prose code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .84em; background: var(--mist); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose ul ul { margin-top: 6px; }
@media (max-width: 700px) {
	.legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
	.legal-table thead { display: none; }
	.legal-table tbody tr { padding: 14px 16px; }
	.legal-table tbody tr + tr { border-top: 1px solid var(--line); }
	.legal-table tbody tr + tr > * { border-top: 0; }
	.legal-table th, .legal-table td { padding: 0; }
	.legal-table td { margin-top: 8px; }
	.legal-table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }
}
/* A long legal title (app privacy policy) may wrap, so the dates beside it keep a readable width */
@media (min-width: 1000px) {
	.page-hero .wrap:has(> .lead br) > h1 { flex: 0 1 auto; }
	.page-hero .wrap:has(> .lead br) > .lead { min-width: 15em; }
}
@media (min-width: 900px) { .prose ul ul:has(> li:nth-child(3)) { columns: auto; } }
/* Legal pages: the company block (registered address and both offices, 6 Oct 2026), one line per detail, in two columns on wide screens */
.prose .legal-contact > span { display: block; break-inside: avoid; }
@media (min-width: 640px) { .prose .legal-contact { columns: 2; column-gap: 32px; } }
@media (max-width: 700px) { .legal-table tbody th { width: auto; } }

/* B78 demo booking (10 Oct 2026): 1 at the practice or online, 2 day and time, 3 details */
.book-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step-legend { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 4px; font-size: 1.08rem; font-weight: 500; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
h2.step-legend { margin: 6px 0 -6px; }
.step-no { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: .82rem; color: var(--ink-2); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .15s, background-color .15s; }
.choice b { font-weight: 500; color: var(--ink); }
.choice small { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.choice:hover > span { border-color: var(--blue); }
.choice input:checked + span { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.choice input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 2px; }
.slot-pick { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 8px; }
.slot-wait { margin: 0; font-size: .93rem; }
.slot-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.slot-days:empty, .slot-times:empty { display: none; }
.day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.day span { font-size: .78rem; color: var(--ink-2); text-transform: capitalize; }
.day b { font-size: .95rem; font-weight: 500; white-space: nowrap; }
.day:hover { border-color: var(--blue); }
.day[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.day:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 2px; }
.slot-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.slot { position: relative; cursor: pointer; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot span { display: block; text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--mono); font-size: .92rem; color: var(--ink); transition: border-color .15s, background-color .15s; }
.slot:hover span { border-color: var(--blue); }
.slot input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.slot input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 2px; }
.book-step.off .slot-pick { opacity: .45; pointer-events: none; }
.book-step .check { margin-top: 2px; }
.field.invalid .choice > span { border-color: #b42318; }
@media (prefers-color-scheme: dark) { .field.invalid .choice > span { border-color: #ff8f85; } .slot input:checked + span { color: #0e1626; } }
@media (max-width: 640px) { .choices { grid-template-columns: 1fr; } }
.need-list { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
@media (max-width: 760px) { .need-list { grid-template-columns: 1fr; } }

/* Promo videos (owner, 11 Oct 2026): a small button beside the feature, the video opens in a player (site.js) */
.vid-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px 7px 11px; border: 1px solid var(--edge-lb); border-radius: 999px; background: var(--blue-tint); color: var(--blue-deep); font: 500 14px/1 var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.vid-btn:hover { border-color: var(--blue); }
.vid-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vid-btn .vid-len { color: var(--ink); opacity: .6; font-weight: 400; }
.page-hero .vid-btn { margin-top: 18px; }
.vid-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(19, 35, 61, .82); padding: 16px; }
.vid-modal.open { display: flex; }
.vid-box { position: relative; height: min(86vh, 860px); aspect-ratio: 9 / 16; max-width: 100%; }
.vid-box video { width: 100%; height: 100%; border-radius: 18px; background: #000; display: block; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.vid-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #1b2c46; font-size: 24px; line-height: 40px; cursor: pointer; box-shadow: var(--shadow); }
.vid-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.vid-title { position: absolute; left: 0; right: 0; bottom: -32px; text-align: center; color: #fff; font: 500 15px var(--font); }
@media (max-width: 600px) { .vid-box { height: auto; width: 100%; } .vid-close { top: 8px; right: 8px; } .vid-title { display: none; } }

/* Videos page (owner, 11 Oct 2026): one card per video with the full picture of the feature */
.vid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vid-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.vid-card h2 { font-size: 1.35rem; margin: 6px 0 10px; }
.vid-card p { margin: 0 0 16px; }
.vid-meta { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-deep); margin: 0 !important; }
.vid-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.vid-actions .vid-btn { margin-top: 0; }
@media (max-width: 760px) { .vid-list { grid-template-columns: 1fr; } .vid-card { padding: 22px; } }

/* Social page links (presence report, 15 Oct 2026): a row above the footer's last line, written by the editor only when
   Administrators, Social pages has an address; with none the footer is exactly as before. */
.foot-social { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.foot-social-h { color: var(--ink-2); font-size: .85rem; font-weight: 500; }
.foot-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-social a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.foot-social a:hover { color: var(--blue); text-decoration: underline; }
.foot-social + .foot-bottom { margin-top: 18px; }
@media (max-width: 760px) { .foot-social a { min-height: 44px; } }

/* App Store badge (B106, 15 Oct 2026): Apple's official black badge, unmodified, 48 px high on pages and 40 px (Apple's
   minimum) in the footer. Apple asks for clear space of a quarter of the badge height on every side: the margins below
   keep at least 12 px (pages) and 10 px (footer) free around it. */
.store-row { display: block; margin: 24px 0 0; line-height: 0; }
.notice .store-row { margin-top: 14px; }
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.store-badge img { display: block; height: 48px; width: auto; max-width: none; }
.store-badge.sm img { height: 40px; }
.store-badge:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.foot-store { margin-top: 18px; line-height: 0; }

/* Ask your doctor (patients, approved mockup 15 Oct 2026: mockups/ask-your-doctor) */
.ayd-phones { display: flex; gap: 20px; justify-content: center; align-items: flex-start; }
.ayd-phone { width: 280px; max-width: 100%; border-radius: 44px; background: #0f1b2d; padding: 10px; box-shadow: 0 30px 60px rgba(15, 27, 45, .25); margin: 0 auto; }
.ayd-phone img { display: block; width: 100%; height: auto; border-radius: 36px; aspect-ratio: 600 / 1091; }
.ayd-phones .ayd-phone:last-child { margin-top: 60px; }
.ayd-android { display: inline-block; margin-left: 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.4; vertical-align: middle; }
.ayd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.ayd-step { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.ayd-step b { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 500; margin-bottom: 6px; }
.ayd-step p { margin: 0; color: var(--ink-2); }
.ayd-no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2563c9; color: #fff; font-weight: 800; flex: none; }
.ayd-search { display: block; width: 100%; max-width: 520px; padding: 14px 16px; border: 1px solid var(--field); border-radius: 12px; font: inherit; color: var(--ink); background: var(--surface); margin-top: 18px; }
.ayd-search:focus { outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); border-color: var(--blue); }
.ayd-empty { margin-top: 14px; padding: 18px; border: 1px dashed var(--field); border-radius: 12px; color: var(--ink-2); max-width: 520px; }
.ayd-clinics { list-style: none; margin: 14px 0 0; padding: 0; max-width: 520px; display: grid; gap: 10px; }
.ayd-clinics li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ayd-clinics b { display: block; font-weight: 500; }
.ayd-clinics span { color: var(--ink-2); font-size: .93rem; }
.ayd-form { grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 720px; margin-top: 24px; }
.ayd-form .full { grid-column: 1 / -1; }
.ayd-keep { margin-top: 10px; }
.ayd-doc { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: #0f1b2d; color: #fff; border-radius: 20px; padding: 28px 32px; }
.ayd-doc h2 { color: #fff; margin: 0 0 6px; }
.ayd-doc p { margin: 0; color: #c9d4e6; }
@media (prefers-color-scheme: dark) { .ayd-doc { border: 1px solid var(--line); } }
@media (max-width: 760px) { .ayd-steps, .ayd-form { grid-template-columns: 1fr; } .ayd-phones .ayd-phone:last-child { display: none; } .ayd-doc { flex-direction: column; align-items: flex-start; padding: 24px; } }