/* ============================================================
   EasyMyTask — landing page
   Self-contained: this page is the first thing a visitor sees and
   must not depend on the application's stylesheet, which is built
   for a signed-in admin screen and carries far more than a public
   page needs.
   ============================================================ */

:root{
  --ink:#141527;
  --ink-2:#454863;
  --muted:#6e7189;
  --line:#e5e6f0;
  --line-2:#eff0f6;
  --violet:#4f3fd1;
  --violet-dark:#3f31ad;
  --violet-soft:#f0eeff;
  --navy:#171a35;
  --navy-2:#1f2246;
  --gold:#c9a227;
  --surface:#ffffff;
  --surface-2:#f8f8fc;
  --ok:#1b8f5a;
  --radius:13px;
  --shadow:0 1px 2px rgba(18,16,44,.05), 0 6px 20px rgba(18,16,44,.07);
  --shadow-lg:0 16px 44px rgba(18,16,44,.14);
  /* One knob for the whole page's vertical rhythm. Kept tight: the
     bands are distinguished by their background, so they do not also
     need a deep margin of air to be read apart. */
  --gap-section:clamp(26px,3.1vw,42px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--surface);line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
/* The measure grows with the screen instead of sitting as a narrow
   column in the middle of a large monitor — but only so far, because
   a line of text past roughly 90 characters stops being readable. */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:22px}
@media (min-width:1500px){ .wrap{max-width:1300px;padding-inline:28px} }
@media (min-width:1800px){ .wrap{max-width:1420px;padding-inline:32px} }
@media (min-width:2300px){ .wrap{max-width:1560px} }

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0 0 .45em;line-height:1.19;font-weight:700;letter-spacing:-.5px}
h1{font-size:clamp(28px,4.3vw,45px)}
h2{font-size:clamp(23px,3vw,32px)}
h3{font-size:17px;letter-spacing:-.2px}
p{margin:0 0 .85em}
.lead{font-size:clamp(14.5px,1.6vw,16.5px);color:var(--ink-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  padding:5px 13px 5px 9px;border-radius:30px;
  background:var(--violet-soft);color:var(--violet-dark);
  font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.section-head{max-width:720px;margin:0 auto 24px;text-align:center}
/* A notch darker than --muted: at 14.5px on the tinted band the muted
   grey sits at about 4.2:1, which was true of the old tint too. This
   clears 5:1 on every band the line appears on. */
.section-head p{color:#5c6079;margin-bottom:0;font-size:14.5px}
.section-head .eyebrow{margin-inline:auto}
section{padding-block:var(--gap-section)}
.section-alt{background:var(--surface-2);border-block:1px solid var(--line)}

/* ---------- the alternating bands ----------
   Content sections run white, tinted, white, tinted — one after the
   other all the way down, so the page has a steady rhythm rather than
   a patchwork. Only the hero, the figures strip and the closing call
   sit outside the rotation; each of those is a deliberate break. */
/* The tinted band is the hero's own wash brought down to a whisper —
   the same violet, the same diagonal, a fraction of the strength. It
   ties the page to the band at the top without ever getting dark
   enough to trouble the ink sitting on it. */
.section-tint{
  position:relative;
  background:
    radial-gradient(760px 420px at 4% 98%, rgba(160,140,255,.11), transparent 62%),
    radial-gradient(640px 360px at 74% 2%, rgba(255,255,255,.55), transparent 60%),
    /* The pale end stops short of white: run it all the way up and the
       muted section text falls to about 4.4:1, and the band stops
       reading as a tint at all. */
    linear-gradient(to right top, #eceafb, #efedfc, #f2f0fd, #f5f4fe, #f9f8ff);
  border-block:1px solid #e4e0f6;
}
.section-plain{background:var(--surface)}
/* "Who it's for" is white now, so it takes .section-plain like the
   other light bands. The two blues it was given stay — they live on
   the cards inside it instead of on the ground. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:1.5px solid transparent;border-radius:9px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 6px 16px rgba(79,63,209,.3)}
.btn-primary:hover{background:var(--violet-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-lg{padding:13px 26px;font-size:15px}
/* A full-width button has the room to wrap; forcing one line on it was
   what pushed the pricing card past the edge of a 320px screen. */
.btn-block{width:100%;white-space:normal}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ============================================================
   Header — one bar. The utility strip that used to sit above it is
   gone; the contact line lives in the footer.
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-head.stuck{box-shadow:0 4px 20px rgba(18,16,44,.09)}
.site-head .wrap{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;color:var(--ink);flex:none}
.brand:hover{text-decoration:none}
.brand .mark{
  width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--violet),#7d6def);color:#fff;
  display:grid;place-items:center;font-size:19px;
  box-shadow:0 5px 14px rgba(79,63,209,.32);
}
.brand small{
  display:block;font-size:8px;font-weight:700;color:var(--muted);
  letter-spacing:1.9px;margin-top:1px;
}
@media (max-width:330px){.brand small{display:none}.brand{font-size:17px}}
/* On the narrowest phones the brand and the Sign in button together
   are wider than the header, whatever pushes them apart — 160px of
   brand plus a 116px button will not sit in 261px. Both give a
   little so the button stays on the screen. */
@media (max-width:380px){
  .site-head .wrap{gap:8px;padding-inline:16px}
  .brand{font-size:16px;gap:8px}
  .head-cta .btn{padding-inline:13px;font-size:13.5px}
}

.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{
  position:relative;padding:9px 14px;border-radius:8px;
  color:var(--ink-2);font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  transition:color .16s ease,background-color .16s ease;
}
.site-nav a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--violet);transform:scaleX(0);transform-origin:center;transition:transform .2s ease;
}
.site-nav a:hover{color:var(--violet);text-decoration:none;background:var(--violet-soft)}
.site-nav a:hover::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:9px;flex:none}

/* ============================================================
   Hero
   ============================================================ */

/* ---------- one surface for the hero and the strip ----------
   The gradient and everything drawn over it belong to the wrapper, so
   the two sections are two parts of a single band rather than two
   bands that happen to match. There is no seam to match across. */
.hero-band{
  position:relative;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(to right top, #3a2ca4, #5342c4, #7f6fdc, #b3a9ec, #e6e2fa);
}

/* ---------- soft shapes, not a ruled grid ----------
   Large blurred orbs and one long diagonal sheen: the way light falls
   across a surface rather than the way graph paper is printed on it.
   No straight repeats and no right angles, so nothing dates it. */
.hero-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 10% 96%, rgba(126,102,255,.55), transparent 70%),
    radial-gradient(30% 40% at 30% 12%, rgba(88,196,232,.26), transparent 72%),
    radial-gradient(34% 44% at 66% 88%, rgba(178,120,255,.30), transparent 70%),
    radial-gradient(42% 52% at 88% 6%,  rgba(255,255,255,.55), transparent 68%),
    radial-gradient(26% 34% at 52% 48%, rgba(255,255,255,.14), transparent 70%);
  filter:blur(6px);
}
/* One long sheen across the band, the way light catches a curved
   surface — soft-edged, so it reads as light and not as a stripe. */
.hero-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 28%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.06) 57%, transparent 72%);
}
/* Both sections sit over the shapes. */
.hero-band > *{position:relative;z-index:1}

.hero{
  position:relative;
  /* More above than below: the headline wants air over it, and the
     strip underneath closes the section off anyway. A clamp only works
     when the maximum is above the minimum — clamp(34px,4.4vw,10px)
     would have resolved to 34px at every width and shrunk nothing, so
     it is written the other way round. */
  padding-top:clamp(26px,3.2vw,48px);
  padding-bottom:clamp(22px,2.6vw,38px);
  background:transparent;
}

/* ---------- the same wash, held back on a narrow screen ----------
   Once the band stacks it is tall and thin, and a diagonal across a
   box that shape runs the whole way to the pale end — which put the
   headline on near-white at about 1.8:1. The stops are weighted to the
   deep half here so the white type keeps its contrast; the pale corner
   is only there to seat the form, and on a phone the form has moved
   below the words anyway. */
@media (max-width:999px){
  .hero-band{
    background-image:linear-gradient(to right top, #35289a 0%, #4130ae 45%, #5342c4 76%, #7466d8 100%);
  }
  .hero-band::before{
    background:
      radial-gradient(44% 30% at 8% 96%,  rgba(126,102,255,.5), transparent 70%),
      radial-gradient(40% 26% at 84% 10%, rgba(255,255,255,.22), transparent 70%),
      radial-gradient(38% 24% at 30% 54%, rgba(88,196,232,.16), transparent 72%);
  }
}

/* ---------- light type, because the ground went dark ----------
   Everything in the left column is now reading against violet rather
   than white. The ink, the eyebrow chip and the ghost button are all
   turned over; the enquiry card keeps its own white and is untouched. */
.hero h1,
.hero .lead{color:#fff}
.hero .eyebrow{background:rgba(255,255,255,.17);color:#fff}
/* The two hero calls sit on the violet, so they are turned over. The
   scope is the CTA row and not the whole hero: the enquiry form is
   inside the hero too, and its button is on a white card where a
   white button would be invisible. */
.hero-cta .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);
}
.hero-cta .btn-ghost:hover{
  color:var(--violet);background:#fff;border-color:#fff;
}
.hero-cta .btn-primary{
  background:#fff;color:var(--violet-dark);box-shadow:0 6px 18px rgba(24,16,72,.28);
}
.hero-cta .btn-primary:hover{background:#f3f1ff;color:var(--violet-dark)}

/* ---------- the enquiry form's button ----------
   Blue rather than the page violet: it is the one control inside the
   hero that belongs to the white card, and the blue sets it apart
   from the violet ground around it while still suiting it. */
.enq .btn-primary{
  background:linear-gradient(135deg,#1f5fd8,#2f7ef0);
  color:#fff;border-color:transparent;
  border-radius:11px;padding:13px 20px;font-size:14.5px;font-weight:600;
  box-shadow:0 8px 20px rgba(31,95,216,.3);
  transition:background .2s ease,box-shadow .2s ease,transform .15s ease;
}
/* The arrow leans the way it is taking you. */
.enq .btn-primary i{transition:transform .2s ease}
.enq .btn-primary:hover{
  background:linear-gradient(135deg,#1a52bd,#2670dd);color:#fff;
  box-shadow:0 11px 26px rgba(31,95,216,.4);
}
.enq .btn-primary:hover i{transform:translateX(3px)}
.enq .btn-primary:active{transform:translateY(1px)}
.enq .btn-primary:disabled{background:#9db9e8;box-shadow:none;transform:none}
.enq .btn-primary:disabled i{transform:none}
/* ---------- the hero fills one screen and no more ----------
   From tablet up the headline, the sentence, the buttons and the
   form all sit inside the first view without a scroll, centred in
   whatever height is left over. Below that a phone cannot hold it
   all, so the rule is dropped and the section flows at its natural
   height. */
@media (min-width:1000px){
  .hero{
    /* 71px is the sticky header with its border. Capped, so on a tall
       monitor the hero does not stretch into an empty field — the
       figures strip shows below it instead. */
    min-height:min(calc(100svh - 71px), 495px);
    display:flex;flex-direction:column;justify-content:center;
  }
}
/* No hairline between the hero and the strip any more — they are one
   surface, and a rule across the middle of it would only announce the
   seam that was removed. */

/* A wide channel between the pitch and the form — on a white ground
   there is no tint separating them, so the space has to do it. */
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,5.4vw,92px);align-items:center;
}
.hero .eyebrow{margin-bottom:11px}
/* Balanced so the heading does not end on a short orphan line. */
.hero h1{margin-bottom:14px;text-wrap:balance;font-size:clamp(28px,3.8vw,36px)}
/* No band behind the highlighted words any more — the phrase carries
   itself on the violet ground; only the no-wrap is still wanted so
   "CA, CS & CMA" never breaks across two lines. */
.hero h1 .hl{white-space:nowrap}
/* Justified, as asked, but not hyphenated: broken words in a column
   this narrow are what made the paragraph hard to read. */
.hero .lead{
  margin-top:51px;
  margin-bottom:30px;
  max-width:40em;
  line-height:1.38;
  font-size:15px;
  text-align:justify;
  text-justify:inter-word;
  hyphens:manual;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:0}
.hero-cta .btn-lg{padding:12px 24px;font-size:15px}

/* ---------- enquiry form, one field at a time ---------- */
.enq{
  position:relative;
  background:var(--surface);
  border:1px solid #e6e4f2;
  border-radius:18px;
  padding:0 0 18px;
  box-shadow:0 1px 2px rgba(18,16,44,.05),0 18px 50px rgba(30,20,90,.18);
  overflow:hidden;
}
/* A brand edge along the very top of the card — the one line of
   colour that tells you whose form this is before you read it. */
.enq::before{
  content:'';position:absolute;inset:0 0 auto;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--violet),#7d6be0 45%,#2f7ef0);
}

.enq-top{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,#262552 55%,#302c68 100%);
  color:#fff;padding:17px 22px 16px;display:flex;align-items:center;gap:12px;
}
/* Flat navy read as a dead bar; the glow gives it a light source. */
.enq-top::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 150% at 88% 0%,rgba(122,104,240,.45),transparent 70%);
}
.enq-top > *{position:relative;z-index:1}
.enq-top .ico{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#5b49d8,#8674e8);color:#fff;font-size:17px;
  box-shadow:0 4px 12px rgba(52,34,160,.5),inset 0 1px 0 rgba(255,255,255,.28);
}
.enq-top h2{font-size:16.5px;margin:0 0 2px;color:#fff;letter-spacing:.1px}
.enq-top .sub{font-size:12px;color:rgba(255,255,255,.75);line-height:1.4}

.enq-body{padding:15px 22px 0}

/* Six segments rather than one continuous rail: a fraction tells you
   how far along you are, segments tell you how many are left. The
   mask cuts the gaps out of track and fill together, so the script
   can go on setting one width and know nothing about this. */
.enq-prog{margin-bottom:13px}
.enq-bar{
  --seg:calc((100% - 5 * 4px) / 6);
  position:relative;height:5px;background:#e9e8f3;border-radius:3px;
  overflow:hidden;margin-bottom:7px;
}
/* The gaps are painted over the rail rather than cut out of it with a
   mask: a mask takes the fill with it — the rail rendered as six empty
   segments however wide the fill was set. An overlay leaves the fill
   to paint normally and just lays the card colour across the joins. */
.enq-bar::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(90deg,
    transparent 0 var(--seg),
    var(--surface) var(--seg) calc(var(--seg) + 4px));
}
.enq-bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--violet),#8878f0);
  transition:width .38s cubic-bezier(.4,0,.2,1);
}
.enq-count{
  font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--violet-dark);text-align:right;margin:0;
}

.enq-step{display:none}
.enq-step.on{display:block;animation:stepIn .34s cubic-bezier(.4,0,.2,1)}
@keyframes stepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

.enq label{
  display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;
  color:var(--ink);letter-spacing:.1px;
}
.enq label .opt{font-weight:500;color:var(--muted);font-size:11.5px}

/* The control and its icon are one unit, so focus can light both. */
.enq-field{position:relative;display:block}
.enq-field > i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:15px;line-height:1;color:#9a9ab5;pointer-events:none;
  transition:color .18s ease;
}
.enq-field.ta > i{top:25px}
.enq-field:focus-within > i{color:var(--violet)}
.enq input,.enq textarea{
  width:100%;padding:13px 14px 13px 40px;
  border:1.5px solid #e3e2ef;border-radius:11px;
  font-family:inherit;font-size:14.5px;color:var(--ink);
  background:#fbfbfe;resize:vertical;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.enq input::placeholder,.enq textarea::placeholder{color:#a9a9bd}
.enq input:focus,.enq textarea:focus{
  outline:none;border-color:var(--violet);background:#fff;
  box-shadow:0 0 0 3.5px rgba(79,63,209,.13);
}
.enq .hint{display:block;font-size:11.5px;color:var(--muted);margin-top:7px}
.enq-err{font-size:12.5px;color:#b4293a;margin-top:8px;min-height:1px}

.enq-actions{display:flex;gap:9px;align-items:stretch;margin-top:15px}
/* Back was a bare word beside a solid button, which read as a stray
   link. Given an outline it becomes the other half of a pair. */
.enq-back{
  flex:none;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;padding:0 15px;border-radius:11px;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.enq-back:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
/* An author display wins over the browser rule for [hidden], so the
   script hiding Back on the first question had no effect until this.
   The old rule set no display at all, which is why it never showed. */
.enq-back[hidden]{display:none}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enq-foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;
}
.enq-foot i{color:var(--ok);font-size:13px}

/* An answer already given, in brand colour rather than grey — it is
   a thing you did, not a thing switched off. */
.enq-done{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.enq-chip{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:4px 10px;border-radius:20px;
  background:var(--violet-soft);border:1px solid #ddd8fb;
  font-size:11.5px;color:var(--violet-dark);cursor:pointer;font-family:inherit;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.enq-chip:hover{border-color:var(--violet);background:#e7e3ff;transform:translateY(-1px)}
.enq-chip i{font-size:10px;color:var(--ok)}
.enq-chip .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}

.enq-sent{text-align:center;padding:30px 22px 26px}
.enq-sent .tick{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#e2f6ec,#d4f0e2);color:var(--ok);font-size:27px;
  box-shadow:0 6px 18px rgba(27,143,90,.22);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.enq-sent h3{margin-bottom:5px}
.enq-sent p{font-size:13.5px;color:var(--muted);margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .enq-step.on{animation:none}
  .enq-sent .tick{animation:none}
  .enq .btn-primary:hover i{transform:none}
}
/* ---------- the figures strip ----------
   The lower half of the same surface. It brings no ground of its own;
   only a hairline above it, so the figures sit on their own shelf
   without the band breaking in two. */
.strip{
  position:relative;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.16);
}
/* The deep end of the band runs along the bottom, so the figures keep
   their contrast wherever the wash has got to by then. */
.strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(26,18,84,0) 0%, rgba(26,18,84,.34) 100%);
}
.strip .wrap{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;padding-block:24px;
}
.strip .s-item{
  display:flex;align-items:center;gap:12px;
  padding-inline:clamp(10px,2vw,26px);border-right:1px solid rgba(255,255,255,.1);
}
.strip .s-item:last-child{border-right:0}
.strip .s-ico{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  color:#d8d0ff;font-size:16px;
}
.strip .n{
  font-size:clamp(23px,2.9vw,31px);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.6px;
}
.strip .l{font-size:12.5px;color:#cdc6f2;line-height:1.35}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.06s}.rv-2{transition-delay:.12s}.rv-3{transition-delay:.18s}
.rv-4{transition-delay:.24s}.rv-5{transition-delay:.3s}

/* ---------- who it's for ---------- */
/* The eyebrow takes the section's blue rather than the page violet,
   so the heading and the cards below read as one thing. */
#who .eyebrow{background:#e7f0fe;color:#1d56b4}
.who{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* On a white ground the cards carry the colour: a blue-tinted border
   and a faint blue wash, rather than the translucent white panels the
   dark band needed. */
.who-item{
  position:relative;overflow:hidden;
  padding:24px 17px 20px;border:1px solid #d3e2fa;border-radius:var(--radius);
  background:linear-gradient(168deg,#fbfcff,#f2f7ff);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s ease,box-shadow .24s ease;
}
/* A coloured rule across the top that draws itself in on hover —
   the same two blues, deep into bright. */
.who-item::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#2d7df2,#71c6ff);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.who-item::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(260px 120px at 50% -12%, rgba(64,144,248,.13), transparent 70%);
  transition:opacity .3s ease;
}
.who-item:hover{
  transform:translateY(-6px);border-color:#9cc4f5;
  box-shadow:0 16px 32px rgba(29,86,180,.16);
}
.who-item:hover::before{opacity:1}
.who-item:hover::after{transform:scaleX(1)}
.who-item > *{position:relative;z-index:1}
.who-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;
  background:linear-gradient(145deg,#e2eeff,#eef6ff);
  border:1px solid #cfe1fa;color:#2166d8;font-size:20px;
  transition:transform .32s cubic-bezier(.2,1.3,.4,1),background .3s ease,color .3s ease,border-color .3s ease;
}
.who-item:hover .who-ico{
  transform:translateY(-3px) rotate(-6deg) scale(1.04);
  background:linear-gradient(145deg,#2166d8,#4aa8ef);border-color:transparent;color:#fff;
}
.who-item .t{font-weight:700;font-size:15px;margin-bottom:5px;color:var(--ink);line-height:1.3}
.who-item .d{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.who-item .k{
  display:block;margin-top:12px;padding-top:11px;border-top:1px solid #e0eaf8;
  font-size:10.5px;color:#4d6b96;letter-spacing:.3px;
}

/* ---------- why offices move to it ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cbc4f3}
.why-card .tag{
  display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:20px;
  background:var(--violet-soft);color:var(--violet-dark);font-size:10.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
}
.why-card h3{margin-bottom:6px}
.why-card p{font-size:13.5px;color:var(--muted);margin-bottom:0;text-align:justify;text-justify:inter-word}
.why-stage{
  height:126px;margin:-4px -6px 12px;border-radius:11px;
  background:linear-gradient(160deg,#f6f5ff,#edf5f1);
  border:1px solid var(--line);overflow:hidden;position:relative;
}
.m-cal{position:absolute;inset:0;display:grid;place-items:center}
.m-cal .sheet{width:118px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 4px 12px rgba(18,16,44,.09);overflow:hidden}
.m-cal .top{background:var(--violet);height:16px;display:flex;align-items:center;gap:3px;padding-inline:6px}
.m-cal .top i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.75)}
.m-cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:7px 6px}
.m-cal .d{height:9px;border-radius:2px;background:#ebe9f6}
.m-cal .d.mark{background:var(--violet);animation:calMark 4s ease-in-out infinite}
@keyframes calMark{0%,18%{background:#ebe9f6;transform:scale(1)}26%{background:var(--violet);transform:scale(1.35)}34%,100%{background:var(--violet);transform:scale(1)}}
.m-cal .pop{
  position:absolute;right:16px;bottom:18px;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;background:#fff;border:1px solid #cde8d8;
  box-shadow:0 6px 14px rgba(18,16,44,.12);font-size:10.5px;font-weight:600;color:#0f6f43;
  white-space:nowrap;opacity:0;animation:popIn 4s ease-in-out infinite;
}
.m-cal .pop i{color:var(--ok)}
@keyframes popIn{0%,30%{opacity:0;transform:translateY(8px) scale(.94)}42%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.m-bill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px}
.m-bill .job{width:52px;padding:7px 6px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 9px rgba(18,16,44,.07)}
.m-bill .job b{display:block;height:4px;border-radius:2px;background:#dbd7f1;margin-bottom:3px}
.m-bill .job b:nth-child(2){width:72%;background:var(--line)}
.m-bill .job .ok{display:block;width:11px;height:11px;border-radius:50%;margin-top:5px;background:var(--ok);opacity:.15;animation:jobDone 4.5s ease-in-out infinite}
.m-bill .job:nth-child(2) .ok{animation-delay:.35s}
@keyframes jobDone{0%,20%{opacity:.15;transform:scale(1)}30%{opacity:1;transform:scale(1.18)}45%,100%{opacity:1;transform:scale(1)}}
.m-bill .arrow{color:var(--violet);font-size:15px;opacity:.3;animation:arrowGo 4.5s ease-in-out infinite}
@keyframes arrowGo{0%,45%{opacity:.25;transform:translateX(-3px)}58%,100%{opacity:1;transform:translateX(2px)}}
.m-bill .inv{width:60px;padding:8px 7px;border-radius:8px;background:#fff;border:1px solid #cbc4f3;box-shadow:0 5px 14px rgba(79,63,209,.16);opacity:.25;animation:invIn 4.5s ease-in-out infinite}
@keyframes invIn{0%,52%{opacity:.25;transform:translateY(5px) scale(.95)}66%,100%{opacity:1;transform:none}}
.m-bill .inv b{display:block;height:4px;border-radius:2px;background:#dbd7f1;margin-bottom:3px}
.m-bill .inv .amt{height:8px;border-radius:2px;background:var(--violet);width:78%;margin-top:5px}
.m-see{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:7px;padding:22px 16px 26px}
.m-see i{width:15px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#8878f0,var(--violet));animation:barGrow 3.4s ease-in-out infinite;transform-origin:bottom}
.m-see i:nth-child(2){height:34%}
.m-see i:nth-child(3){height:58%;animation-delay:.12s}
.m-see i:nth-child(4){height:42%;animation-delay:.24s}
.m-see i:nth-child(5){height:76%;animation-delay:.36s;background:linear-gradient(180deg,#4fc78d,var(--ok))}
.m-see i:nth-child(6){height:50%;animation-delay:.48s}
@keyframes barGrow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.m-see .line{position:absolute;left:16px;right:16px;bottom:26px;height:1px;background:var(--line)}

/* ---------- feature modules ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Filled with a pale violet rather than white. The hard #4f3fd1 rule
   was drawn to hold a white card apart from a white page; against a
   tinted fill it reads as a heavy outline, so the border comes down
   to a shade that belongs with the fill. */
/* A cool edge at the foot of the fill — violet at the top running to
   a breath of blue — so the card reads fresh rather than flat. The
   border picks up the same cool note. */
.module{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px 15px;border:1px solid #d5daf7;border-radius:10px;
  background:linear-gradient(158deg,#fbfaff 0%,#f4f2ff 46%,#ecf3ff 100%);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.module:hover{
  transform:translateY(-2px);border-color:#a9b8ee;
  background:linear-gradient(158deg,#f6f4ff 0%,#eae6fd 46%,#dfeaff 100%);
  box-shadow:0 8px 22px rgba(79,63,209,.16);
}
.module i{color:var(--violet);font-size:16px;flex:none;margin-top:2px}
.module .t{font-weight:600;font-size:13.5px;line-height:1.3}
.module .d{font-size:12px;color:var(--muted);line-height:1.45}

/* ============================================================
   Pricing — the licence, then what runs alongside it
   ============================================================ */
/* The licence on the left and the three cards on the right finish on
   the same line: the column stretches to the taller of the two, and
   the three share what it gives them. */
.price-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:20px;align-items:stretch;max-width:940px;margin:0 auto}
/* A grid item will not shrink below its content unless it is told it
   may. Without this the no-wrap button inside the card pushed the
   whole column past the edge of a small phone. */
.price-grid > *{min-width:0}
.price{
  position:relative;background:var(--surface);border:2px solid var(--violet);
  border-radius:16px;padding:28px 26px 26px;box-shadow:var(--shadow-lg);
}
.price-tag{
  position:absolute;top:-12px;left:26px;padding:3px 13px;border-radius:30px;
  background:var(--violet);color:#fff;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
}
.price .amount{display:flex;align-items:baseline;gap:5px;margin:4px 0 2px}
.price .rupee{font-size:23px;font-weight:600;color:var(--ink-2)}
.price .num{font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-1.8px;line-height:1}
.price .per{font-size:13.5px;color:var(--muted);font-weight:500}
.price .note{font-size:13px;color:var(--muted);margin-bottom:17px}
.price ul{list-style:none;margin:0 0 20px;padding:0}
.price li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.price li:last-child{border-bottom:0}
.price li i{color:var(--ok);flex:none;margin-top:3px}
/* The button sits at the foot of the card whatever the column does. */
.price > a.btn{margin-top:auto}
.price{display:flex;flex-direction:column}
.price-side{display:flex;flex-direction:column;gap:14px;height:100%}

.addon{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);transition:border-color .2s ease,transform .2s ease;
  /* Share the column evenly and sit the content in the middle of
     whatever height each one ends up with. */
  flex:1 1 0;display:flex;flex-direction:column;justify-content:center;
}
.addon:hover{border-color:#cbc4f3;transform:translateY(-2px)}
.addon .a-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.addon .a-ico{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--violet-soft);color:var(--violet);font-size:15px;
}
.addon h3{margin:0;font-size:15px}
.addon .amount{display:flex;align-items:baseline;gap:5px;margin-bottom:2px}
.addon .num{font-size:27px;font-weight:700;letter-spacing:-1px}
.addon .rupee{font-size:17px;font-weight:600;color:var(--ink-2)}
.addon .per{font-size:12.5px;color:var(--muted)}
.addon p{font-size:13px;color:var(--muted);margin:9px 0 0}
.addon ul{list-style:none;margin:9px 0 0;padding:0}
.addon ul li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);padding:3px 0}
.addon ul i{color:var(--ok);font-size:11px;margin-top:4px;flex:none}
/* The AMC is an ongoing commitment, so it reads a little warmer. */
.addon.amc{border-color:#e7dcae;background:linear-gradient(180deg,#fffdf6,#fff)}
.addon.amc .a-ico{background:#fbf2d7;color:#8a6d12}
.addon.amc:hover{border-color:var(--gold)}

/* ============================================================
   Testimonials — a track that scrolls on its own
   ============================================================ */
.tstm{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* The duration has to follow the number of reviews, or adding some
   speeds the strip up: the track always travels half its own width,
   so twice the cards at the same duration is twice the pace. Six
   reviews (twelve tiles) at 76s reads at about 30px a second. */
.tstm-track{display:flex;gap:16px;width:max-content;animation:marquee 76s linear infinite}
.tstm:hover .tstm-track,.tstm:focus-within .tstm-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.quote{
  position:relative;flex:0 0 auto;width:min(370px,78vw);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px 18px;margin:0;
  transition:border-color .2s ease;
}
.quote:hover{border-color:#cbc4f3}
.quote .mark{font-size:36px;line-height:1;color:#ddd8f7;font-family:Georgia,serif;position:absolute;top:12px;right:16px}
.quote .stars{color:#e0a516;font-size:12px;margin-bottom:9px;letter-spacing:1px}
.quote p{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;position:relative}
.quote .by{padding-top:12px;border-top:1px solid var(--line-2)}
.quote .nm{display:block;font-weight:600;font-size:13px;line-height:1.35;color:var(--ink)}
.quote .loc{display:block;font-size:11.5px;line-height:1.35;color:var(--muted);margin-top:1px}
.tstm-hint{text-align:center;font-size:11.5px;color:var(--muted);margin-top:16px}

/* ---------- FAQ, two columns ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;align-items:start;max-width:1020px;margin:0 auto}
.faq details{
  border:1px solid #e0ddf2;border-radius:11px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(4px);
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.faq details:hover{background:#fff}
.faq details[open]{border-color:#c3baf0;background:#fff;box-shadow:0 6px 20px rgba(79,63,209,.1)}
.faq summary{list-style:none;cursor:pointer;padding:13px 42px 13px 15px;position:relative;font-weight:600;font-size:14px;color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'\f282';font-family:'bootstrap-icons';position:absolute;right:15px;top:14px;color:var(--violet);font-size:12px;font-weight:400;transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{background:rgba(79,63,209,.05)}
.faq .a{padding:0 15px 14px;font-size:13.5px;color:var(--ink-2)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- final call ---------- */
/* ---------- the closing call ----------
   The same ground as the band at the top of the page, so the visitor
   finishes where they started. The orbs come with it; the copy is
   centred here, so they are placed to leave the middle clear. */
.cta{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  background-image:linear-gradient(to right top, #3a2ca4, #5342c4, #7f6fdc, #b3a9ec, #e6e2fa);
}
.cta::before{
  /* inset:0, not a negative bleed — an absolutely positioned child that
     overflows to the right inflates scrollWidth, and the band then
     takes a trackpad swipe sideways even under overflow:hidden. The
     orbs fade to transparent well inside the box, so there is no edge
     for the blur to show. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 10% 96%, rgba(126,102,255,.55), transparent 70%),
    radial-gradient(30% 40% at 30% 12%, rgba(88,196,232,.26), transparent 72%),
    radial-gradient(34% 44% at 66% 88%, rgba(178,120,255,.30), transparent 70%),
    radial-gradient(42% 52% at 88% 6%,  rgba(255,255,255,.55), transparent 68%);
  filter:blur(6px);
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 28%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.06) 57%, transparent 72%);
}
.cta > *{position:relative;z-index:1}
@media (max-width:999px){
  .cta{background-image:linear-gradient(to right top, #35289a 0%, #4130ae 45%, #5342c4 76%, #7466d8 100%)}
}
/* Same reason as the screens band: the centred copy has no panel
   under it any more, so the shadow carries it. */
.cta h2,.cta p{text-shadow:0 1px 3px rgba(20,12,66,.5), 0 2px 16px rgba(20,12,66,.45)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.87);max-width:600px;margin-inline:auto;font-size:14.5px}
.cta .btn-primary{background:#fff;color:var(--violet);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cta .btn-primary:hover{background:#f2f0ff;color:var(--violet-dark)}
.cta .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.cta .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ---------- sign-in modal ---------- */
.modal-back{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,12,36,.58);backdrop-filter:blur(3px)}
.modal-back.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{width:100%;max-width:394px;background:var(--surface);border-radius:16px;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:modalIn .26s cubic-bezier(.2,1.1,.4,1);position:relative}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;border-radius:8px;background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:15px}
.modal-x:hover{background:#ebeaf3;color:var(--ink)}
.modal-card h2{font-size:19px;margin-bottom:3px}
.modal-card .sub{font-size:13px;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff}
.field input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(79,63,209,.13)}
.signin-err{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:14px;border-radius:9px;background:#fdecee;border:1px solid #f5c2c9;color:#992a38;font-size:13px}
.signin-in{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:10px;background:#edfaf3;border:1px solid #c6e9d7;color:#0f6f43;font-size:13.5px;margin-bottom:14px}
.field select{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px;
}
.field select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(79,63,209,.13)}

/* ============================================================
   Purchase window — how to pay on the left, a call-back request
   on the right. Wider than the sign-in card because it carries a
   QR, the bank lines and a form side by side.
   ============================================================ */
/* Taller than the screen on a laptop, so the backdrop scrolls and the
   card sits in the flow rather than being centred and clipped. */
.modal-back{overflow-y:auto}
.modal-wide{max-width:880px;padding:24px 24px 20px;margin-block:auto}
.buy-head{margin-bottom:16px;padding-right:34px}
.buy-head h2{font-size:21px;margin-bottom:4px}
.buy-head .sub{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.buy-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:20px;align-items:start}

.buy-block{
  border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:12px;
  background:var(--surface-2);
}
.buy-block h3{
  display:flex;align-items:center;gap:8px;margin:0 0 11px;
  font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--violet-dark);
}
.buy-block h3 i{font-size:14px}

.qr-row{display:flex;gap:14px;align-items:flex-start}
.qr{flex:none;width:150px;height:150px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.qr img{display:block;width:100%;height:100%;object-fit:contain}
.qr-empty{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:10px;text-align:center;border:1.5px dashed #cdc8ea;border-radius:10px;
  color:var(--muted);font-size:10.5px;line-height:1.45;
}
.qr-empty i{font-size:26px;color:#c4bee8}
.qr-empty code{font-size:10px;word-break:break-all}
.qr-side{flex:1;min-width:0;display:flex;flex-direction:column}
.qr-side .k{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.qr-side .v{font-size:13px;color:var(--ink)}
.upi-open{margin-top:auto;padding:9px 14px;font-size:13px}

/* One tap puts a UPI ID or an account number on the clipboard —
   typing either of them by hand is how money goes to the wrong place. */
.copy{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;
  transition:border-color .15s ease,background-color .15s ease;
}
.copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy i{flex:none;color:var(--muted);font-size:13px}
.copy:hover{border-color:var(--violet);background:var(--violet-soft)}
.copy.done{border-color:#bfe3d0;background:#edfaf3;color:#0f6f43}
.copy.done i{color:#0f6f43}
.copy.mini{width:auto;flex:none;padding:3px 6px;border-color:transparent;background:transparent}
.copy.mini:hover{border-color:var(--line);background:#fff}

.bank{margin:0;font-size:13px}
.bank dt{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.bank dd{
  display:flex;align-items:center;gap:6px;margin:0 0 9px;
  color:var(--ink);font-weight:600;
}
.bank dd:last-child{margin-bottom:0}
.bank dd > span{min-width:0;overflow-wrap:anywhere}
.unset-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.unset-note code{font-size:11px;background:#eeecf8;padding:1px 4px;border-radius:4px;overflow-wrap:anywhere}

.buy-note{
  border:1px solid #ffe0ae;background:#fff8ec;border-radius:12px;padding:13px 15px;margin-bottom:12px;
}
.bn-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#8a5a12;margin-bottom:6px}
.buy-note p{margin:0 0 11px;font-size:12.5px;line-height:1.55;color:#6d4c15}
.bn-actions{display:flex;flex-wrap:wrap;gap:8px}
.bn-actions .btn{flex:1;min-width:132px;padding:9px 12px;font-size:13px;background:#fff;border-color:#ecd6ae;color:#6d4c15}
.bn-actions .btn:hover{border-color:var(--violet);color:var(--violet)}
.bn-actions .wa:hover{border-color:#25d366;color:#128c3f}

.buy-contact{display:flex;flex-wrap:wrap;gap:8px 16px}
.buy-contact a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.buy-contact a:hover{color:var(--violet);text-decoration:none}
.buy-contact i{color:var(--violet);font-size:12px}

.buy-form{
  border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;
  background:var(--surface);box-shadow:var(--shadow);
}
.buy-form h3{
  display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:15px;letter-spacing:-.2px;
}
.buy-form h3 i{color:var(--violet);font-size:14px}
.bf-sub{margin:0 0 14px;font-size:12.5px;color:var(--muted);line-height:1.5}
.buy-form .field{margin-bottom:11px}
.buy-form .enq-foot{margin-top:11px}

@media (max-width:760px){
  .modal-wide{max-width:520px;padding:20px 18px 16px}
  .buy-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:440px){
  /* The QR and its details will not sit beside each other on a phone. */
  .qr-row{flex-direction:column;align-items:stretch}
  .qr{width:100%;height:auto;aspect-ratio:1;max-width:210px;margin-inline:auto}
  .upi-open{margin-top:10px}
  .bn-actions .btn{min-width:0}
}

/* ---------- social rail ---------- */
/* Each icon carries its own brand colour rather than waiting for a
   hover to show it — the rail is meant to catch the eye. */
/* No panel behind the icons: the tiles carry their own brand colour
   and sit straight on the page. The frosted backdrop-filter goes with
   the background — on its own it would blur a rectangle of the page
   for no reason. */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px;
}
.rail a{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:10px 0 0 10px;color:#fff;font-size:17px;
  transition:width .18s ease,filter .18s ease,transform .18s ease;
}
.rail a:hover{width:50px;text-decoration:none;filter:brightness(1.12);transform:translateX(-2px)}
.rail .fb{background:#1877f2}
.rail .ig{background:linear-gradient(45deg,#f09433 8%,#dc2743 48%,#bc1888 92%)}
.rail .gg{background:#ea4335}
.rail .yt{background:#ff0000}
/* An icon whose URL is not filled in yet keeps its colour so the rail
   looks finished, but it does not navigate and says so on hover. */
.rail a.unset{cursor:default}
.rail a.unset:hover{width:40px;filter:none;transform:none}

/* ---------- against a spreadsheet ---------- */
/* Three columns — what it is about, how it goes without a system,
   what this does. Each row lands on its own beat as it comes into
   view, then the old way is struck through and the new way ticks:
   the animation is the argument, so the copy can stay to one line. */
.cmp{
  --cmp-topic:142px;
  max-width:920px;margin-inline:auto;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);
  overflow:hidden;
}
.cmp-head{
  position:relative;
  display:grid;grid-template-columns:var(--cmp-topic) 1fr 1fr;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
}
.cmp-head span{display:flex;align-items:center;gap:7px;padding:11px 16px;min-width:0}
.ch-topic{background:#fafafd}
.ch-old{background:linear-gradient(120deg,#c04138,#ac2f26 42%,#8f2018);color:#fff}
.ch-new{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#4434bb,#6553d2 62%,#7d6be0);color:#fff;
}
/* The badge reaches about 15px past the seam, which left the
   EasyMyTask mark half a pixel from its edge. Two classes so this
   outranks the padding on .cmp-head span. */
.cmp-head .ch-new{padding-left:29px}
/* A slow sheen across the EasyMyTask side — the one lively thing in an
   otherwise still header. */
.ch-new::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.22) 50%,transparent 66%);
  transform:translateX(-130%);
  animation:cmpSheen 6.5s ease-in-out 1.2s infinite;
}
@keyframes cmpSheen{0%{transform:translateX(-130%)}42%,100%{transform:translateX(130%)}}
/* The arrow sits on the seam between the two sides. */
/* Selector carries both classes on purpose: .cmp-head span is more
   specific than .cmp-arrow alone, so the plain class lost and the
   badge stayed a flex box — which centred the arrow vertically and
   left it sitting against the left edge. Two classes outrank it, and
   the !important that was papering over it is no longer needed. */
.cmp-head .cmp-arrow{
  position:absolute;top:50%;
  left:calc(var(--cmp-topic) + (100% - var(--cmp-topic))/2);
  transform:translate(-50%,-50%);
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;padding:0;gap:0;
  background:var(--surface);color:var(--violet);
  border:1px solid var(--line);
  /* It sits on the seam where both bands are darkest, so it needs a
     shadow to read as a badge above them rather than a hole in them. */
  box-shadow:0 2px 10px rgba(20,12,66,.3);
  font-size:13.5px;line-height:1;z-index:2;
}
/* The glyph inherits a 1.58 line box otherwise, which pushes it off
   centre inside a box this small. */
.cmp-head .cmp-arrow i{display:block;line-height:1}

.cmp-row{
  display:grid;grid-template-columns:var(--cmp-topic) 1fr 1fr;
  align-items:center;border-top:1px solid var(--line-2);
  position:relative;
  /* .rv gives the fade; the stagger is this row's own. */
  transition-delay:calc(var(--i,0) * 70ms)!important;
}
/* A violet wash that slides in from the left on hover. */
.cmp-row::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(79,63,209,.05),rgba(79,63,209,.02) 55%,transparent);
  opacity:0;transition:opacity .22s ease;
}
.cmp-row:hover::before{opacity:1}
.cmp-topic{
  padding:11px 16px;font-size:11.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--violet-dark);
  line-height:1.3;
}
.cmp-old,.cmp-new{padding:11px 16px;font-size:13.5px;line-height:1.5;min-width:0}
.cmp-old{color:#a4443d}
.cmp-old > i{display:none}
/* The strike is drawn rather than printed — it reads as the old way
   being crossed off, which is the whole point of the row. */
/* Drawn as a background gradient rather than one absolute bar: an
   absolutely positioned line takes the whole inline box, so a line
   that wrapped got a single stroke through the middle of the pair
   instead of one through each. box-decoration-break gives every line
   fragment its own, and background-size animates the draw. */
.cmp-old .ln{
  display:inline;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(#c0392b,#c0392b);
  background-repeat:no-repeat;
  background-position:0 58%;
  background-size:0 1px;
  opacity:.95;
  transition:background-size .5s cubic-bezier(.4,0,.2,1);
  transition-delay:calc(var(--i,0) * 70ms + 300ms);
}
.cmp-row.in .cmp-old .ln{background-size:100% 1px}
.cmp-new{
  color:var(--ink);display:flex;align-items:flex-start;gap:8px;
  border-left:1px solid var(--line-2);
  transition:transform .22s ease;
}
.cmp-row:hover .cmp-new{transform:translateX(2px)}
.cmp-new i{
  flex:none;margin-top:2px;font-size:14px;color:var(--ok);
  transform:scale(.3);opacity:0;
  transition:transform .42s cubic-bezier(.2,1.5,.4,1),opacity .26s ease;
  transition-delay:calc(var(--i,0) * 70ms + 400ms);
}
.cmp-row.in .cmp-new i{transform:none;opacity:1}

@media (max-width:760px){
  /* No room for three columns: the topic becomes the row's heading
     and the two answers sit under it, each keeping its own mark. */
  .cmp{--cmp-topic:0px}
  /* Kept, not hidden — it is the only thing naming the two sides
     once the rows stack. --cmp-topic is 0 here, so its three
     columns collapse to two equal halves on their own. */
  .cmp-head{font-size:11px;letter-spacing:.2px}
  .cmp-head span{padding:9px 11px;gap:5px}
  .ch-topic{display:none}
  .cmp-row{grid-template-columns:1fr;align-items:stretch;padding-bottom:10px}
  .cmp-topic{padding:11px 15px 3px}
  .cmp-old,.cmp-new{padding:2px 15px;font-size:13px}
  /* Not a flex container: a flex item is blockified, which turned
     the struck span into one block box and put a single rule
     between its two lines instead of one through each. Inline
     keeps the span inline, so every line gets its own strike. */
  .cmp-old{display:block}
  .cmp-old > i{display:inline;font-size:12.5px;opacity:.72;margin-right:5px;vertical-align:baseline}
  .cmp-new{border-left:0}
  .cmp-row:hover .cmp-new{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ch-new::after{animation:none;opacity:0}
  .cmp-old .ln{transition:none;background-size:100% 1px}
  .cmp-new i{transition:none;transform:none;opacity:1}
}
/* ---------- where the data lives ---------- */
/* Dark, and deliberately unlike the rest of the page: this is the
   section a careful reader slows down for. */
.sec-band{
  background:
    radial-gradient(60% 80% at 12% 0%,rgba(96,78,224,.30),transparent 62%),
    radial-gradient(52% 74% at 92% 100%,rgba(66,52,180,.34),transparent 66%),
    linear-gradient(168deg,#141631 0%,#1b1e42 54%,#221f52 100%);
  color:#e9e9f4;
}
.sec-band .section-head h2{color:#fff}
.sec-band .section-head p{color:#b9bad4}
.sec-band .eyebrow{background:rgba(255,255,255,.1);color:#cfcbf6}
.sec-grid{display:flex;flex-wrap:wrap;gap:14px}
.sec-card{flex:1 1 300px;min-width:0}
.sec-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:20px 19px 18px;
}
.sec-ico{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(140deg,#5a48d8,#7e6ce6);
  margin-bottom:12px;
}
.sec-card h3{font-size:15px;margin-bottom:7px;color:#fff;line-height:1.35}
.sec-card p{
  margin:0;font-size:13.5px;line-height:1.6;color:#b8bad2;
  text-align:justify;text-justify:inter-word;
}
.sec-foot{
  margin:20px auto 0;text-align:center;font-size:13.5px;color:#a9abc6;
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
}
.sec-foot a{color:#c6bdff;text-decoration:underline}
.sec-foot a:hover{color:#fff}

/* ---------- how a practice gets started ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  max-width:940px;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:12px;
}
.step{flex:1 1 286px;min-width:0}
.step{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow);
}
.step-n{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-size:14px;font-weight:700;
  background:var(--violet-soft);color:var(--violet-dark);
}
.step-body{min-width:0}
.step-body h3{
  font-size:14.5px;margin-bottom:6px;line-height:1.35;
  display:flex;align-items:center;gap:7px;
}
.step-body h3 i{color:var(--violet);font-size:15px;flex:none}
.step-body p{
  margin:0;font-size:13.5px;color:var(--muted);line-height:1.58;
  text-align:justify;text-justify:inter-word;
}

/* ---------- founder's message ---------- */
/* A tab pinned to the left edge — the opposite edge to the social
   rail, so the two never meet — and a window that opens out of it
   rather than jumping to the middle of the screen. */
.fv-tab{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:15px 9px 17px;border:0;cursor:pointer;
  border-radius:0 13px 13px 0;
  background:linear-gradient(162deg,#171a35 0%,#282d5e 58%,#3f31ad 100%);
  color:#fff;box-shadow:0 10px 28px rgba(15,12,48,.42);
  transition:padding-right .18s ease,box-shadow .18s ease;
}
.fv-tab:hover{padding-right:14px;box-shadow:0 14px 36px rgba(15,12,48,.55)}
.fv-tab:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.fv-tab-play{
  position:relative;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;
  background:#5f4de0;
}
/* A ring that breathes outward, so the tab reads as something to
   press rather than a bookmark stuck to the edge. */
.fv-tab-play::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:fvPulse 2.4s ease-out infinite;
}
@keyframes fvPulse{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.3);opacity:0}
  100%{transform:scale(1.3);opacity:0}
}
.fv-tab-txt{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:12px;font-weight:600;letter-spacing:.35px;line-height:1;
}

/* The window sits against the same edge as the tab. */
.fv-back{justify-content:flex-start;padding-left:clamp(12px,3.4vw,46px)}
.fv-card{max-width:430px;animation:fvIn .28s cubic-bezier(.2,1.1,.4,1)}
@keyframes fvIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* A fixed box so the card does not jump when the video loads, and
   contain rather than cover so a portrait clip is not cropped. */
.fv-frame{
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#0d0b22;margin-bottom:14px;
}
.fv-frame video,.fv-frame iframe{width:100%;height:100%;display:block;border:0;object-fit:contain;background:#0d0b22}
.fv-by{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.45}
.fv-by strong{color:var(--ink);display:block;font-size:14px}
.fv-act{display:flex;gap:9px;flex-wrap:wrap}
.fv-act .btn{flex:1;min-width:0;justify-content:center;font-size:13.5px}

@media (max-width:700px){
  /* The window goes back to the middle where there is no room to hug
     an edge, and the tab keeps only its play button so it does not
     run half the height of a phone. */
  .fv-back{justify-content:center;padding-left:20px}
  .fv-card{max-width:100%}
  .fv-tab{padding:11px 10px;gap:0;border-radius:0 30px 30px 0}
  .fv-tab:hover{padding-right:10px}
  .fv-tab-txt{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fv-tab-play::after{animation:none;opacity:.4}
  .fv-card{animation:none}
}

/* ---------- footer ---------- */
/* Crisp white on the navy — the muted grey read as switched off. */
.site-foot{background:var(--navy);color:#eef0f8;padding-block:42px 0;font-size:13.5px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:30px}
.site-foot h4{color:#fff;font-size:12px;margin-bottom:13px;letter-spacing:1.1px;text-transform:uppercase}
.site-foot a{color:#e3e6f2}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot .brand{color:#fff;margin-bottom:11px}
.site-foot .brand small{color:#a8abc6}
.foot-about{max-width:330px;color:#dcdfee;line-height:1.7;text-align:justify;text-justify:inter-word}

/* The contact block carries the numbers people actually ring, so it is
   set a step larger than the link lists beside it. */
.foot-contact li{display:flex;gap:11px;align-items:flex-start;color:#eef0f8;margin-bottom:12px}
.foot-contact i{color:#9d8dff;margin-top:4px;flex:none;font-size:15px}
.foot-contact a,.foot-contact span{font-size:14.5px;line-height:1.5}
.foot-contact .fc-stack{display:flex;flex-direction:column;gap:3px}
.foot-contact .fc-stack a{font-weight:600;letter-spacing:.2px}

/* ---------- the keyword block ----------
   Each phrase links to the section that answers it. A list of words
   pointing nowhere helps no reader, and a search engine discounts it. */
.foot-seo{margin-top:26px;padding-top:20px;border-top:1px solid #2c2f52}
.foot-seo ul{display:flex;flex-wrap:wrap;gap:7px}
.foot-seo li{margin:0}
.foot-seo a{
  display:inline-block;padding:4px 11px;border-radius:20px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#d5d8e8;font-size:11.5px;line-height:1.5;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.foot-seo a:hover{background:rgba(124,108,236,.18);border-color:rgba(124,108,236,.34);color:#fff;text-decoration:none}
.foot-social{display:flex;gap:8px;margin-top:14px}
.foot-social a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#e8eaf4;font-size:15px;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.foot-social a:hover{transform:translateY(-2px);color:#fff}
.foot-social .fb:hover{background:#1877f2}
.foot-social .ig:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.foot-social .gg:hover{background:#ea4335}
.foot-social .yt:hover{background:#ff0000}
.foot-social a.unset{color:#9396b0;cursor:default}
.foot-social a.unset:hover{transform:none;background:rgba(255,255,255,.1);color:#9396b0}
.foot-price{
  margin-top:26px;padding:15px 20px;border-radius:12px;
  background:rgba(124,108,236,.12);border:1px solid rgba(124,108,236,.28);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
}
.foot-price .p{color:#fff;font-weight:600;font-size:14px}
.foot-price .s{font-size:13px;color:#d3d6e8}
.foot-base{border-top:1px solid #2c2f52;margin-top:22px;padding-block:15px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:12.5px;color:#b9bcd2}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .site-nav a{padding:9px 10px;font-size:12px}
}
/* ---------- large screens ----------
   The wrap widens above; these give the extra room to the grids that
   benefit from it rather than stretching every card. */
@media (min-width:1500px){
  .modules{grid-template-columns:repeat(4,1fr)}
  :root{--gap-section:clamp(34px,2.9vw,50px)}
  .why-stage{height:142px}
  .quote{width:400px}
}
@media (min-width:1800px){
  .price-grid{max-width:1020px}
  .faq{max-width:1160px}
  .section-head{max-width:790px}
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  /* On one column the pitch comes first and the form follows it. */
  .enq{margin-top:4px}
  .who{grid-template-columns:repeat(3,1fr)}
  .modules{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .why-stage{height:112px}
  .price-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  /* A bar across the foot of the screen — the coloured tiles sit edge
     to edge and fill the width. */
  .rail{
    top:auto;bottom:0;left:0;right:0;transform:none;
    flex-direction:row;justify-content:center;gap:0;
  }
  .rail a{flex:1;max-width:none;width:auto;height:46px;border-radius:0}
  .rail a:hover,.rail a.unset:hover{width:auto;transform:none}
  body{padding-bottom:46px}
}
@media (max-width:900px){
  /* Four figures across a tablet leaves each one about 175px, with the
     label wrapping to three lines. Two by two reads properly. */
  .strip .wrap{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .strip .s-item:nth-child(2n){border-right:0}
}
@media (max-width:820px){
  .site-nav{display:none}
  /* The nav is what pushed the buttons to the right edge, via its
     margin-left:auto. With the nav gone that job passes here, or
     the button sits against the brand with the rest of the header
     empty beside it. */
  .head-cta{margin-left:auto}
}
@media (max-width:560px){
  /* The brand and two buttons will not fit a phone header. The hero
     carries the enquiry form a scroll away, so the secondary button
     is the one that goes. */
  .head-cta .btn-ghost{display:none}
  .site-head .wrap{gap:12px}
}
@media (max-width:720px){
  .strip .s-item{padding-inline:12px}
  .modules{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  .faq{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  /* Justified reads well across a wide column; in a 330px one it opens
     rivers of white between the words, so the phone gets ragged right. */
  .hero .lead{text-align:left}
}

/* Somebody who has asked for less movement gets the layout, not the show. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .tstm-track{animation:none}
  .tstm{overflow-x:auto}
  html{scroll-behavior:auto}
}

@media print{
  .site-head,.hero-cta,.enq,.cta,.rail,.fv-tab,.modal-back{display:none}
}

/* ---------- two systems, one sign-in card ----------
   The practice software and the CRM both sign in from this card; the
   switch says which, and only that side's form is in the way. */
.si-switch{display:flex;gap:6px;margin:0 0 14px;padding:4px;border-radius:10px;background:var(--surface-2)}
.si-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 10px;border:0;border-radius:7px;background:transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.si-tab:hover{color:var(--ink)}
.si-tab.on{background:var(--surface);color:var(--violet);box-shadow:0 1px 3px rgba(18,16,44,.12)}
.si-pane.d-none{display:none}

/* ============================================================
   Inside the software — four screens, drawn not photographed

   Built from markup so it never goes stale against a redesign, stays
   sharp on any display and costs no bytes. Set on the same violet as
   the hero: a light interface reads best against a dark ground, and
   the band is a deliberate break in the white/tint rotation, like the
   figures strip and the closing call.
   ============================================================ */
.screens-band{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background-image:linear-gradient(to right top, #3a2ca4, #5342c4, #7f6fdc, #b3a9ec, #e6e2fa);
}
.screens-band::before{
  /* inset:0, not a negative bleed — an absolutely positioned child that
     overflows to the right inflates scrollWidth, and the band then
     takes a trackpad swipe sideways even under overflow:hidden. The
     orbs fade to transparent well inside the box, so there is no edge
     for the blur to show. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 10% 96%, rgba(126,102,255,.55), transparent 70%),
    radial-gradient(30% 40% at 30% 12%, rgba(88,196,232,.26), transparent 72%),
    radial-gradient(34% 44% at 66% 88%, rgba(178,120,255,.30), transparent 70%),
    radial-gradient(42% 52% at 88% 6%,  rgba(255,255,255,.50), transparent 68%);
  filter:blur(6px);
}
.screens-band > *{position:relative;z-index:1}
.screens-band h2{color:#fff}
/* Centred copy on a diagonal wash needs the middle held down. */
/* No panel behind the heading — the words sit straight on the band. */
.screens-band .section-head{position:relative}
/* Without the panel the centred copy sits on the lighter middle of
   the diagonal, where white measures about 2.4:1. A soft shadow is
   not a background and keeps the band clean, but it is what makes
   the words legible there. */
.screens-band .section-head h2,
.screens-band .section-head p,
.screens-band .scr-foot,
.screens-band .scr-hint{
  text-shadow:0 1px 3px rgba(20,12,66,.5), 0 2px 16px rgba(20,12,66,.45);
}
.screens-band .section-head p{color:rgba(255,255,255,.88)}
.screens-band .eyebrow{background:rgba(255,255,255,.17);color:#fff}
@media (max-width:999px){
  .screens-band{background-image:linear-gradient(to right top, #35289a 0%, #4130ae 45%, #5342c4 76%, #7466d8 100%)}
}

.screens{display:grid;grid-template-columns:280px 1fr;gap:clamp(16px,2.2vw,30px);align-items:start}

/* ---------- the switch ---------- */
.scr-tabs{display:flex;flex-direction:column;gap:8px}
.scr-tab{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:12px 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;
  background:rgba(255,255,255,.08);color:#fff;font-family:inherit;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.scr-tab:hover{background:rgba(255,255,255,.15);transform:translateX(2px)}
.scr-tab.on{background:#fff;border-color:#fff;color:var(--violet-dark)}
.scr-tab > i{font-size:16px;margin-top:2px;flex:none}
.scr-tab .t{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.scr-tab .d{display:block;font-size:11.5px;line-height:1.35;opacity:.78;margin-top:2px}
.scr-tab.on .d{opacity:.72}

/* ---------- the window ---------- */
.scr-stage{position:relative;min-width:0}
.scr-win{
  border-radius:14px;overflow:hidden;background:#fff;color:var(--ink);
  box-shadow:0 26px 60px rgba(14,8,52,.42);
  border:1px solid rgba(255,255,255,.5);
}
.scr-bar{
  display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:linear-gradient(180deg,#f7f6fc,#eeecf7);border-bottom:1px solid #e3e0f0;
}
.scr-bar .dot{width:10px;height:10px;border-radius:50%;flex:none}
.scr-bar .r{background:#ff5f57}
.scr-bar .y{background:#febc2e}
.scr-bar .g{background:#28c840}
.scr-url{
  margin-left:8px;padding:3px 12px;border-radius:20px;background:#fff;border:1px solid #e3e0f0;
  font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;
}
.scr-url i{font-size:9px;color:var(--ok)}

/* ---------- the screen itself ----------
   A photograph of the running software. The box keeps the capture's
   own proportions so the page never jumps while the image arrives,
   and each shot is only painted when its tab is chosen. */
/* The window keeps one size across all four tabs, so switching does
   not shunt the page up and down. Three shots are landscape and fill
   it; the printable invoice is a portrait sheet and is sat inside the
   same frame rather than stretched to fit it. */
.scr-shot{position:relative;background:#eceaf6;aspect-ratio:1320/900;overflow:hidden}
.scr-pane{display:none;position:absolute;inset:0;animation:scrIn .34s cubic-bezier(.2,.8,.3,1)}
.scr-pane.on{display:block}
.scr-pane img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* The invoice is a document, so it is shown whole rather than cropped. */
.scr-pane[data-pane="invoice"] img{object-fit:contain;background:#eceaf6}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- the pinned notes ---------- */
.scr-pin{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:30px;background:#fff;color:var(--violet-dark);
  font-size:11.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 26px rgba(14,8,52,.3);
  animation:pinFloat 5.5s ease-in-out infinite;
}
.scr-pin i{font-size:12px;color:var(--violet)}
.scr-pin.a{top:-14px;right:22px}
.scr-pin.b{bottom:-14px;left:26px;animation-delay:-2.6s}
@keyframes pinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.scr-foot{
  grid-column:1/-1;margin:16px 0 0;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.75);
}
/* Only shown on the phone layout, where the shot scrolls sideways. */
.scr-hint{
  display:none;grid-column:1/-1;margin:10px 0 0;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.8);
}
.scr-hint i{margin-right:5px}


/* ---------- narrower ---------- */
@media (max-width:1100px){
  .screens{grid-template-columns:1fr}
  .scr-tabs{flex-direction:row;flex-wrap:wrap}
  .scr-tab{flex:1 1 210px}
  .scr-tab .d{display:none}
  .scr-pin{display:none}
}
@media (max-width:760px){
  .scr-tab{flex:1 1 100%}
}
/* A screenshot of a wide screen is unreadable on a phone whatever is
   done to it, so below this it scrolls sideways at a size that can
   actually be read rather than being squeezed to nothing. */
@media (max-width:560px){
  /* Capped, or tapping the invoice would treble the section height:
     the sheet scrolls inside the box instead of stretching it. */
  .scr-shot{aspect-ratio:auto;max-height:560px;overflow:auto;-webkit-overflow-scrolling:touch}
  .scr-pane{position:static}
  .scr-pane img{width:760px;max-width:none;height:auto;object-fit:fill}
  .scr-pane[data-pane="invoice"] img{width:540px}
  .scr-hint{display:block}
}
@media (prefers-reduced-motion:reduce){
  .scr-pin,.scr-pane{animation:none}
}

/* ---- sign-in: show-password eye and Remember me ---- */
.pw-field{position:relative}
.pw-field input{padding-right:46px}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:34px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);display:grid;place-items:center;font-size:17px;cursor:pointer;transition:background .15s,color .15s}
.pw-eye:hover,.pw-eye:focus-visible{background:#f0eeff;color:var(--violet);outline:none}
.remember{display:inline-flex;align-items:center;gap:8px;margin:-2px 0 14px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.remember input{width:17px;height:17px;margin:0;accent-color:var(--violet);cursor:pointer}