/* /accountin/ on chivvy.co.uk, in Accountin's own look (colours, type and buttons from
   accountin-site/site.css). Loaded on this page only; everything is scoped under .acc. */
.acc{--navy:#011b46;--navy2:#22345c;--ink2:#3a4560;--muted:#667085;--line:#e4e7ee;--alt:#f5f7fa;
  --green:#03684e;--green-dk:#024d3a;--green-lt:#e6f2ec;--amber:#a15c07;--amber-lt:#fdf1dc;
  background:#fff;color:var(--navy);font:400 17px/1.65 'Inter',system-ui,sans-serif;overflow:hidden}
.acc h1,.acc h2,.acc h3{font-family:'Nunito','Inter',sans-serif;font-weight:900;letter-spacing:-.015em;
  color:var(--navy);line-height:1.1;margin:0 0 .5em}
.acc h1{font-size:clamp(2.4rem,4.6vw,3.8rem)}
.acc h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.acc h3{font-size:1.25rem;font-weight:800;letter-spacing:0}
.acc p{margin:0 0 1em;color:var(--ink2)}
.acc img{max-width:100%;height:auto;display:block}
.acc .w{max-width:1200px;margin:0 auto;padding:0 24px}
.acc .hl{background:linear-gradient(transparent 64%,rgba(3,104,78,.22) 64%,rgba(3,104,78,.22) 92%,transparent 92%)}
.acc .pill{display:inline-flex;align-items:center;background:var(--green);color:#fff;text-decoration:none;
  padding:.85em 1.45em;border-radius:999px;border:2px solid var(--green);font:700 1rem/1.2 'Inter',sans-serif;
  transition:background .15s,transform .15s}
.acc .pill:hover{background:var(--green-dk);border-color:var(--green-dk);transform:translateY(-1px)}
.acc .pill.ghost{background:#fff;color:var(--navy);border-color:var(--navy)}
.acc .pill.ghost:hover{background:#eef2f9}
.acc .badge{display:inline-block;font:700 13px/1 'Inter',sans-serif;padding:7px 12px;border-radius:999px;
  background:var(--green-lt);color:var(--green);white-space:nowrap}
.acc .badge.amber{background:var(--amber-lt);color:var(--amber)}
.acc .badge.grey{background:#eef0f4;color:var(--muted)}
.acc .screen{border-radius:14px;border:1px solid var(--line);background:#fff;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(1,27,70,.28)}
.acc .screen img{width:100%;height:auto;display:block}
.acc .tk{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;color:var(--ink2)}
.acc .tk svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--green)}

/* opening: copy beside the product, the dashboard running off the right edge */
.acc .open{background:linear-gradient(180deg,var(--alt),#fff 85%);padding:64px 0 110px}
.acc .open .w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.acc .made{display:flex;align-items:center;gap:12px;margin-bottom:28px;font:600 13px/1.2 'Inter';color:var(--muted)}
.acc .made img{height:30px;width:auto}
.acc .open .lede{font-size:1.15rem;max-width:34rem}
.acc .acts{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.acc .open .small{font-size:.9rem;color:var(--muted)}
.acc .stage{position:relative;margin-right:-180px}
.acc .stage .phone{position:absolute;left:-56px;bottom:-70px;width:31%;border-radius:22px;
  border:6px solid var(--navy);box-shadow:0 30px 60px -18px rgba(1,27,70,.45)}
.acc .stage .chip{position:absolute;top:-22px;right:220px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;box-shadow:0 14px 30px -12px rgba(1,27,70,.25);font:600 14px/1.35 'Inter'}
.acc .stage .chip b{display:block;color:var(--green)}

/* the books: wide screen left, narrow copy right */
.acc .books{padding:110px 0}
.acc .books .w{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:64px;align-items:center}
.acc .books .screen{margin-left:-120px}

/* what it files: a filing list in the product's own table style */
.acc .files{background:var(--alt);padding:100px 0}
.acc .files .head{max-width:640px;margin-bottom:40px}
.acc .ftable{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.acc .frow{display:grid;grid-template-columns:2.2fr 3fr 1.6fr;gap:24px;align-items:center;
  padding:22px 28px;border-top:1px solid var(--line)}
.acc .frow:first-child{border-top:0}
.acc .frow.th{font:700 12px/1 'Inter';letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-top:18px;padding-bottom:18px}
.acc .frow b{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.1rem;display:block}
.acc .frow span.s{font-size:.9rem;color:var(--muted)}
.acc .frow p{margin:0;font-size:.98rem}

/* accounts: real output as paper on the navy ground, the checks beside it */
.acc .checks{background:var(--navy);padding:110px 0 120px}
.acc .checks .w{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.acc .checks h2,.acc .checks h3{color:#fff}
.acc .checks p{color:#c5cde0}
.acc .paper{position:relative;height:560px}
.acc .paper img{position:absolute;width:58%;border-radius:4px;box-shadow:0 30px 60px -10px rgba(0,0,0,.55)}
.acc .paper img:first-child{left:0;top:30px;transform:rotate(-4deg)}
.acc .paper img:last-child{right:0;top:0;transform:rotate(3deg)}
.acc .panel{background:#fff;border-radius:14px;padding:26px 28px;margin-top:30px}
.acc .panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.acc .panel .ph b{font-family:'Nunito',sans-serif;font-weight:900;color:var(--navy);font-size:1.15rem}
.acc .panel .tk{margin:0;padding:12px 0;border-top:1px solid var(--line);font-size:.97rem}

/* moving across: from each desktop package */
.acc .move{padding:110px 0}
.acc .move .head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:end;margin-bottom:44px}
.acc .move .head p{margin:0}
.acc .from{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.acc .fcard{border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column}
.acc .fcard .was{font:700 12px/1 'Inter';letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.acc .fcard h3{margin-bottom:14px}
.acc .fcard p{font-size:.97rem}
.acc .fcard .to{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);font:700 14px/1.3 'Inter';color:var(--green)}

/* price: the plan and the upgrade */
.acc .price{background:linear-gradient(180deg,#fff,var(--green-lt));padding:100px 0 120px}
.acc .price .w{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:28px;align-items:stretch}
.acc .price .intro{align-self:center}
.acc .plan{background:#fff;border:2px solid var(--green);border-radius:16px;padding:34px;display:flex;flex-direction:column}
.acc .plan.soon{border:2px dashed #b7c0d1;background:rgba(255,255,255,.7)}
.acc .plan .amt{font-family:'Nunito',sans-serif;font-weight:900;font-size:3.4rem;line-height:1;color:var(--navy);margin:14px 0 6px}
.acc .plan .per{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.acc .plan .tk{font-size:.97rem;margin-bottom:10px}
.acc .plan .pill{margin-top:auto;align-self:flex-start}
.acc .plan .badge{align-self:flex-start}

@media (max-width:980px){
  .acc .open .w,.acc .books .w,.acc .checks .w,.acc .move .head,.acc .price .w{grid-template-columns:1fr}
  .acc .stage{margin:30px 0 40px}
  .acc .stage .phone{left:auto;right:-6px;bottom:-40px;width:34%}
  .acc .stage .chip{right:auto;left:10px}
  .acc .books .screen{margin-left:0}
  .acc .books .screen{order:2}
  .acc .from{grid-template-columns:1fr}
  .acc .paper{height:420px}
  .acc .frow{grid-template-columns:1fr;gap:8px}
  .acc .frow.th{display:none}
  .acc .open,.acc .books,.acc .files,.acc .checks,.acc .move,.acc .price{padding:64px 0}
}