:root{
  color-scheme:light;
  --green:#245f60;--green-hover:#194d4e;--green-soft:#e8f2ee;--green-line:#cfe2d9;
  --ink:#253642;--muted:#6d7f86;--line:#e1e6e5;--line-2:#d3dcd9;--bg:#f3f5f3;
  --shadow-lg:0 2px 6px #1d333014,0 24px 60px #1d33302b;--top:60px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html{height:100%}
/* En skärm: topprad + hero, ingen skrollning. */
body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:var(--top) minmax(0,1fr);overflow:hidden;background:var(--bg)}
a{color:inherit;text-decoration:none;outline-offset:4px}
:focus-visible{outline:2.5px solid #3c8ba0;outline-offset:3px}
svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
svg use{fill:none;stroke:currentColor}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.brand-gap{stroke:#fff;stroke-width:4}
.page-width{width:min(1280px,calc(100% - 64px));margin-inline:auto}
h1,p,ol{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:#33474c;font-weight:600;font-size:13px;line-height:1.2;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#f2f6f4;border-color:#a9bdb5}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-hover);border-color:var(--green-hover)}
.btn.big{min-height:48px;padding:12px 22px;font-size:14.5px;border-radius:9px}
.btn svg{width:18px;height:18px}
.text-link{font-size:13px;font-weight:600;color:#4f666b;padding:8px 6px}
.text-link:hover{color:var(--ink)}

/* Topprad – samma som i verktyget */
.top{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:2}
.top-inner{height:100%;display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:9px;color:#243e43;font-size:21px;font-weight:750;letter-spacing:-.9px}
.brand svg{width:27px;height:27px;color:var(--green)}
.brand svg use{stroke-width:1.8}
.brand .dot{color:#58908b}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.top .bp-account-trigger{margin-left:0;min-height:38px;padding:8px 13px;font-size:13px}

/* Hero med samma rutnät som ritytan */
.hero{min-height:0;overflow:hidden;background-image:linear-gradient(#e3e9e6 1px,transparent 1px),linear-gradient(90deg,#e3e9e6 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
.hero-inner{height:100%;display:grid;grid-template-columns:minmax(340px,.78fr) minmax(0,1.4fr);align-items:center;gap:clamp(28px,4vw,56px);padding-block:clamp(16px,3.5vh,40px)}
.hero-copy{min-height:0;display:flex;flex-direction:column;align-items:flex-start}
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;margin-bottom:clamp(12px,2.2vh,20px);border:1px solid var(--green-line);border-radius:99px;background:#fff;font-size:12.5px;font-weight:650;color:#2f5f55}
.dot-live{width:7px;height:7px;border-radius:50%;background:#4f9b7c;box-shadow:0 0 0 3px #4f9b7c26}
h1{font-size:clamp(34px,min(4vw,6.2vh),54px);line-height:1.07;letter-spacing:-1.8px;font-weight:700;margin-bottom:clamp(12px,2vh,18px)}
h1 span{color:#4f7e70}
.intro{font-size:clamp(15px,1.9vh,17px);line-height:1.6;color:var(--muted);max-width:440px;margin-bottom:clamp(16px,3vh,26px);text-wrap:pretty}
.steps{list-style:none;padding:0;margin-top:clamp(18px,3.4vh,32px);display:flex;flex-direction:column;gap:clamp(8px,1.5vh,12px);max-width:430px}
.steps li{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.steps strong{display:block;color:var(--ink);font-size:14px}
.step-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--green);flex-shrink:0}
.step-icon svg{width:19px;height:19px}
.note{margin-top:clamp(14px,2.6vh,24px);font-size:12px;color:#859590}
.note a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9c8c3}
.note a:hover{color:var(--ink)}

.hero-shot{margin:0 -120px 0 0;min-width:0;min-height:0;height:100%;display:flex;align-items:center}
.window{width:100%;max-height:100%;aspect-ratio:2880/1990;max-width:calc((100dvh - var(--top) - 2*clamp(16px,3.5vh,40px)) * 2880/1990);border-radius:14px;background:#fff;border:1px solid #d9e1de;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.window-bar{height:30px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);background:#f8faf9}
.window-bar i{width:9px;height:9px;border-radius:50%;background:#dfe5e3}
.window-bar span{margin-left:14px;font-size:11px;color:#93a29f;padding:2px 12px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.window picture{flex:1;min-height:0;display:block}
.window img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

/* Låga skärmar: korta ned texten */
@media (max-height:700px) and (min-width:981px){
  .steps li span:not(.step-icon){font-size:12.5px}
  .steps li span strong{font-size:13px}
  .step-icon{width:30px;height:30px}
  .intro{max-width:400px}
}
@media (max-height:600px) and (min-width:981px){.steps{display:none}}

/* Smalare: text ovanför, bilden fyller resten */
@media (max-width:980px){
  .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,3vh,28px);padding-block:clamp(16px,3.5vh,36px) 0;text-align:center}
  .hero-copy{align-items:center}
  .intro{margin-inline:auto}
  .steps{flex-direction:row;max-width:none;gap:16px;text-align:left;margin-top:clamp(14px,2.4vh,22px)}
  .steps li{flex:1;align-items:flex-start;font-size:12.5px}
  .note{display:none}
  .hero-shot{margin:0;height:100%;align-items:flex-start;justify-content:center}
  .window{max-width:100%;height:100%;aspect-ratio:auto;border-radius:14px 14px 0 0;border-bottom:0}
}
@media (max-width:760px){.steps{display:none}}
@media (max-width:640px){
  :root{--top:56px}
  .page-width{width:calc(100% - 32px)}
  .text-link,.top .btn.primary{display:none}
  h1{font-size:clamp(28px,4.4vh,34px);letter-spacing:-1.1px}
  .intro{font-size:14.5px;max-width:340px}
  .hero-copy .btn.big{align-self:stretch}
  .hero-shot{padding-inline:8%}
  .window-bar{display:none}
  .window{border-radius:26px 26px 0 0;border:6px solid #22343b;border-bottom:0;box-shadow:0 18px 40px #1d333033}
}
@media (max-width:640px) and (max-height:620px){.intro{display:none}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}