/* PULSELINK marketing design system.
   One stylesheet for every campaign layout, so all assets share type, colour, spacing and device treatment.
   Brand rules (docs/brand/PULSELINK_BRAND.md, frozen D18):
   - Grounds are navy (#090C12 / #131720) or light; the brand gradient appears only in the logo and app icon.
   - Brand blue #0062FA is the single accent (primary buttons, CTAs). Azure #0EA4FD for links/eyebrows.
   - Green / red / amber are STATUS colours only (IN RANGE / ALERT / PENDING), never decoration.
   - The wordmark is artwork: never typeset "PULSELINK" as a logo. No glows or shadows on the logo.
   Units: canvases use vmin (the render viewport equals the canvas), so one layout scales across sizes.
   Device frames use container-query units so a frame scales from its own width. */

@font-face { font-family: Montserrat; font-weight: 300; src: url("../../01_BRAND/Typography/Montserrat-Light.ttf"); }
@font-face { font-family: Montserrat; font-weight: 400; src: url("../../01_BRAND/Typography/Montserrat-Regular.ttf"); }
@font-face { font-family: Montserrat; font-weight: 500; src: url("../../01_BRAND/Typography/Montserrat-Medium.ttf"); }
@font-face { font-family: Montserrat; font-weight: 600; src: url("../../01_BRAND/Typography/Montserrat-SemiBold.ttf"); }
@font-face { font-family: Montserrat; font-weight: 700; src: url("../../01_BRAND/Typography/Montserrat-Bold.ttf"); }

:root {
  --navy: #090C12; --surface: #131720; --raised: #1C212B; --line: #262B36;
  --text: #FFFFFF; --text2: #A3A3A3; --text3: #858585;
  --blue: #0062FA; --azure: #0EA4FD; --cyan: #2CEAFD;
  --green: #30D159; --red: #FF4D45; --amber: #FF9E0A;
  /* Placeholders/templates use the info colour (azure) with a dashed outline — never a status colour. */
  --ph: #0EA4FD;
  --bg: var(--navy); --card: var(--surface); --ink: var(--text); --ink2: var(--text2); --rule: var(--line);
}
.light { --bg: #F4F6F9; --card: #FFFFFF; --ink: #121820; --ink2: #59616E; --rule: #DDE2EA; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: Montserrat, sans-serif; -webkit-font-smoothing: antialiased; }
body.transparent, html.transparent { background: transparent; }
img { display: block; }

/* ── Canvas ─────────────────────────────────────────────────────────────────────────────────────────── */
.cv { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: var(--bg); }
.cv.depth { background: radial-gradient(120vmax 90vmax at 85% -10%, #12203A 0%, var(--navy) 55%); }
.light.cv.depth { background: radial-gradient(120vmax 90vmax at 85% -10%, #FFFFFF 0%, #EEF1F6 60%); }
.pad { padding: 6vmin; }

/* ── Type ───────────────────────────────────────────────────────────────────────────────────────────── */
.eyebrow { font-weight: 600; font-size: 2.3vmin; letter-spacing: .14em; text-transform: uppercase; color: var(--azure); }
.h1 { font-weight: 700; font-size: 7.4vmin; line-height: 1.06; letter-spacing: -.02em; }
.h2 { font-weight: 700; font-size: 5.2vmin; line-height: 1.1; letter-spacing: -.015em; }
.h3 { font-weight: 600; font-size: 3.4vmin; line-height: 1.2; }
.body { font-weight: 400; font-size: 2.9vmin; line-height: 1.45; color: var(--ink2); }
.small { font-weight: 400; font-size: 1.8vmin; line-height: 1.4; color: var(--ink2); }
.legal { font-weight: 400; font-size: 1.45vmin; line-height: 1.35; color: var(--text3); }
.light .legal { color: #6B7380; }
.tagline { font-weight: 400; font-size: 1.7vmin; letter-spacing: .394em; text-transform: uppercase; color: #CDD2DA; }
.light .tagline { color: #59616E; }
.accent { color: var(--azure); }
.nowrap { white-space: nowrap; }

.cta { display: inline-flex; align-items: center; gap: .6em; background: var(--blue); color: #fff; font-weight: 600;
       font-size: 2.6vmin; padding: .9em 1.5em; border-radius: 999px; white-space: nowrap; }
.cta.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .12em var(--rule); }
.soon { display: inline-flex; align-items: center; gap: .7em; font-weight: 600; font-size: 2.2vmin; color: var(--ink);
        padding: .75em 1.2em; border-radius: 1em; box-shadow: inset 0 0 0 .1em var(--rule); white-space: nowrap; }
.soon img { height: 1.9em; border-radius: 22%; }

.logo { height: 6vmin; width: auto; }
.chip { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; font-size: 1.9vmin; letter-spacing: .06em;
        text-transform: uppercase; padding: .5em .95em; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.chip.green { color: var(--green); background: rgb(48 209 89 / .14); }
.chip.red { color: var(--red); background: rgb(255 77 69 / .15); }
.chip.amber { color: var(--amber); background: rgb(255 158 10 / .15); }
.chip.blue { color: var(--azure); background: rgb(14 164 253 / .14); }
.chip.grey { color: #A3A3A3; background: rgb(255 255 255 / .08); }

.card { background: var(--card); border-radius: 2.4vmin; box-shadow: inset 0 0 0 .12vmin var(--rule); }
.num { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: 700;
       background: var(--blue); color: #fff; flex: none; }
.placeholder { outline: .3vmin dashed var(--ph); outline-offset: -.3vmin; color: var(--ph) !important; }
.ph-label { font-weight: 700; font-size: 1.6vmin; letter-spacing: .1em; text-transform: uppercase; color: var(--ph); }

/* ── Layouts ────────────────────────────────────────────────────────────────────────────────────────── */
.stack { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6vmin; gap: 2.4vmin; }
.stack .head { display: flex; justify-content: space-between; align-items: center; }
.stack .copy { display: flex; flex-direction: column; gap: 2vmin; }
.stack .visual { flex: 1; min-height: 0; }
.stack .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 3vmin; }
/* In flow, not absolutely positioned: Chrome drops absolutely-positioned grids that hold size containers when printing to PDF. */
.split { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 44% 56%; }
.split .copy { display: flex; flex-direction: column; justify-content: center; gap: 2.4vmin; padding: 7vmin 0 7vmin 8vmin; }
.split .visual { position: relative; }
.split .logo-tl { position: absolute; left: 8vmin; top: 6vmin; }
.split .foot { position: absolute; left: 8vmin; bottom: 5vmin; right: 50%; }

/* Visual areas are size containers: compositions place devices in % and size them in cqh/cqw. */
.visual { position: relative; container-type: size; }
.at { position: absolute; transform: translate(-50%, -50%); }

/* ── Devices ────────────────────────────────────────────────────────────────────────────────────────── */
/* iPhone-style frame (generic; not Apple artwork). Screen = real 1320 × 2868 capture. */
.phone { container-type: inline-size; width: var(--w, 30cqh); }
.phone > .b { position: relative; padding: 3.2cqw; border-radius: 16.6cqw; background: linear-gradient(135deg, #A4A7AD, #55585E 45%, #8A8D93);
              box-shadow: 0 4cqw 9cqw rgb(0 0 0 / .45), 0 1cqw 2cqw rgb(0 0 0 / .3); }
.phone > .b::before { content: ""; position: absolute; inset: .9cqw; border-radius: 15.8cqw; background: #050608; }
.phone > .b > img { position: relative; width: 100%; aspect-ratio: 1320 / 2868; object-fit: cover; border-radius: 13.4cqw; }
.phone > .b > i { position: absolute; width: 1.4cqw; border-radius: 1cqw; background: #8A8D93; }
.phone > .b > i.l1 { left: -.9cqw; top: 17%; height: 3.5%; } .phone > .b > i.l2 { left: -.9cqw; top: 23.5%; height: 6.5%; }
.phone > .b > i.l3 { left: -.9cqw; top: 32%; height: 6.5%; } .phone > .b > i.r1 { right: -.9cqw; top: 27%; height: 9.5%; }
.flat .phone > .b, .flat .watch .case { box-shadow: none; }

/* Apple Watch Ultra-style case (49 mm captures, 422 × 514). */
.watch { container-type: inline-size; width: var(--w, 20cqh); }
.watch .wrap { position: relative; padding: 0 0; }
.watch .band { margin: 0 14%; height: 38cqw; background: linear-gradient(90deg, #15171B, #2A2D33 50%, #15171B); }
.watch .band.top { border-radius: 9cqw 9cqw 0 0; margin-bottom: -6cqw; }
.watch .band.bot { border-radius: 0 0 9cqw 9cqw; margin-top: -6cqw; }
.watch.noband .band { display: none; }
.watch .case { position: relative; z-index: 1; padding: 11cqw; border-radius: 27cqw; background: linear-gradient(135deg, #B9BCC2, #5D6066 45%, #94979D);
               box-shadow: 0 5cqw 12cqw rgb(0 0 0 / .5); }
.watch .case::before { content: ""; position: absolute; inset: 4cqw; border-radius: 23cqw; background: #050608; }
.watch .case > img { position: relative; width: 100%; aspect-ratio: 422 / 514; object-fit: cover; border-radius: 17cqw; }
.watch .crown { position: absolute; right: -4.5cqw; top: 27%; width: 6.5cqw; height: 18%; border-radius: 2cqw; background: linear-gradient(90deg, #6E7177, #B5B8BE); }
.watch .side { position: absolute; right: -3cqw; top: 54%; width: 4.5cqw; height: 13%; border-radius: 2cqw; background: #8A8D93; }
.watch .action { position: absolute; left: -3.5cqw; top: 25%; width: 5cqw; height: 16%; border-radius: 2cqw; background: #FF6A13; }

/* Stylised forearm (illustration, not photography) for wrist mockups. */
.arm { position: absolute; height: 34cqh; width: 140cqw; left: -20cqw; border-radius: 17cqh;
       background: linear-gradient(180deg, #2A2F38 0%, #3A414D 45%, #1E232B 100%); }

/* Perspective + float */
.tilt-l { transform: perspective(240cqh) rotateY(24deg) rotateX(6deg) rotateZ(-2deg); }
.tilt-r { transform: perspective(240cqh) rotateY(-24deg) rotateX(6deg) rotateZ(2deg); }
.float { filter: drop-shadow(0 6cqh 6cqh rgb(0 0 0 / .45)); }
.rot-l { transform: rotate(-8deg); } .rot-r { transform: rotate(8deg); }

/* Notification (illustrative banner using the app's real notification copy) */
.notif { container-type: inline-size; width: var(--w, 60cqh); }
.notif .n { display: grid; grid-template-columns: 9cqw 1fr auto; gap: 1.2cqw 3.4cqw; align-items: start; padding: 3.6cqw 4.2cqw;
            border-radius: 6cqw; background: rgb(38 42 50 / .94); box-shadow: 0 3cqw 8cqw rgb(0 0 0 / .45); color: #fff; }
.light .notif .n { background: rgb(255 255 255 / .96); color: #121820; }
.notif .n img { width: 9cqw; height: 9cqw; border-radius: 2.2cqw; grid-row: span 2; }
.notif .t { font-weight: 600; font-size: 3.9cqw; }
.notif .when { font-size: 3.3cqw; opacity: .6; }
.notif .m { grid-column: 2 / 4; font-size: 3.9cqw; line-height: 1.35; }
.notif .act { margin-top: 2cqw; padding: 3cqw; text-align: center; border-radius: 4cqw; background: rgb(38 42 50 / .94); color: #fff;
              font-weight: 600; font-size: 3.9cqw; box-shadow: 0 3cqw 8cqw rgb(0 0 0 / .35); }

/* Map card (stylised illustration; the app shows Apple Maps) */
.mapcard { container-type: inline-size; width: var(--w, 50cqh); }
.mapcard .m { border-radius: 5cqw; overflow: hidden; background: var(--surface); box-shadow: 0 3cqw 8cqw rgb(0 0 0 / .45), inset 0 0 0 .3cqw var(--line); }
.mapcard .m svg { display: block; width: 100%; }
.mapcard .cap { display: flex; justify-content: space-between; align-items: center; padding: 3.2cqw 4cqw; font-size: 3.6cqw; color: var(--text2); }
.mapcard .cap b { color: var(--azure); font-weight: 600; letter-spacing: .06em; font-size: 3.2cqw; }

/* Small UI-styled callout card (used next to devices) */
.callout { container-type: inline-size; width: var(--w, 46cqh); }
.callout .c { display: flex; gap: 4cqw; align-items: center; padding: 4.5cqw 5cqw; border-radius: 6cqw; background: rgb(19 23 32 / .96);
              box-shadow: 0 3cqw 8cqw rgb(0 0 0 / .4), inset 0 0 0 .35cqw var(--line); color: #fff; }
.light .callout .c { background: #fff; color: #121820; box-shadow: 0 3cqw 8cqw rgb(18 24 32 / .12), inset 0 0 0 .35cqw #DDE2EA; }
.callout .ic { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 4.4cqw; flex: none;
               background: #262B36; color: #fff; }
.callout .t1 { font-weight: 600; font-size: 5cqw; }
.callout .t2 { font-size: 4cqw; color: var(--text2); margin-top: .8cqw; }

/* ── Steps / grids ──────────────────────────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: 2.4vmin; }
.step { display: flex; gap: 1.6vmin; align-items: flex-start; }
.step .num { font-size: 2.2vmin; }
.step b { display: block; font-weight: 600; font-size: 2.7vmin; color: var(--ink); }
.step span { display: block; font-size: 2.1vmin; line-height: 1.4; color: var(--ink2); margin-top: .4vmin; }

.qr { display: inline-block; container-type: inline-size; width: var(--w, 20vmin); }
.qr svg { display: block; width: 100%; border-radius: 4cqw; }
.qr .lbl { margin-top: 3cqw; font-weight: 700; font-size: 6.5cqw; letter-spacing: .06em; text-align: center; color: var(--ph); }

/* Slide counter for carousels */
.counter { font-weight: 600; font-size: 1.9vmin; color: var(--ink2); letter-spacing: .1em; }
.swipe { font-weight: 600; font-size: 2vmin; color: var(--azure); }

/* Stage: a fixed-aspect composition box that fits (contain) its .visual container, so a device group keeps its
   arrangement on every canvas. Children are placed in % and sized in cqh (stage height). */
.stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); container-type: size;
         width: min(100cqw, calc(100cqh * var(--ar))); aspect-ratio: var(--ar); }
.stage.bottom { top: auto; bottom: 0; transform: translate(-50%, 0); }
.stack .h1 { font-size: 6.6vmin; }
.template-tag { position: absolute; right: 4vmin; top: 4vmin; font-weight: 700; font-size: 1.7vmin; letter-spacing: .1em; text-transform: uppercase;
                color: var(--ph); padding: .5em .9em; border-radius: .5em; box-shadow: inset 0 0 0 .14em var(--ph); outline: .14em dashed var(--ph); outline-offset: .3em; z-index: 10; }

/* Print: one .page per sheet; the viewport equals the page (trim + 3 mm bleed each side), so vmin scales per sheet. */
.page { position: relative; width: 100vw; height: 100vh; overflow: hidden; break-after: page; background: var(--bg); }
.page.depth { background: radial-gradient(120vmax 90vmax at 85% -10%, #12203A 0%, var(--navy) 55%); }
.light .page.depth, .page.light.depth { background: radial-gradient(120vmax 90vmax at 85% -10%, #FFFFFF 0%, #EEF1F6 60%); }
@page { margin: 0; }
/* Diagrams */
.flow { display: flex; align-items: stretch; gap: 0; }
.node { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2vmin; padding: 2.2vmin 1.6vmin;
        border-radius: 2.2vmin; background: var(--card); box-shadow: inset 0 0 0 .14vmin var(--rule); }
.node .nv { position: relative; container-type: size; width: 100%; height: var(--nvh, 22vmin); }
.node .nt { font-weight: 700; font-size: 2.3vmin; }
.node .ns { font-size: 1.75vmin; line-height: 1.35; color: var(--ink2); }
.node.hl { box-shadow: inset 0 0 0 .3vmin var(--azure); }
.node.muted { opacity: .55; }
.arrow { flex: none; width: 5vmin; display: grid; place-items: center; color: var(--azure); font-weight: 700; font-size: 3.2vmin; }
.glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.glyph div { width: 70cqh; height: 70cqh; border-radius: 22%; display: grid; place-items: center; background: #1C212B; box-shadow: inset 0 0 0 .2vmin #2F3542;
             font-weight: 700; font-size: 11cqh; color: #fff; text-align: center; line-height: 1.15; padding: 4cqh; }
.step span.num { display: inline-grid; place-items: center; color: #fff; font-weight: 700; margin: 0; }