/* LeapCode leapos.css (release 1.5): the LeapOS structure on the Pricing page and in the diagram.
   Contains: call-to-action buttons (DR-14: red gradient, light sweep on hover), the folding unit and engine list, and the circle diagram. */

/* ---- buttons: same look as every primary button on the site ---- */
.btn-g{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;overflow:hidden;cursor:pointer;text-decoration:none;
  background:#D44040;color:#fff;font:700 .95rem var(--font-body,"Source Sans 3",system-ui,sans-serif);box-shadow:0 8px 18px -10px rgba(200,58,58,.9);transition:transform .2s ease,box-shadow .2s ease}
.btn-g::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn-g:focus-visible{transform:translateY(-1px);box-shadow:0 14px 24px -10px rgba(200,58,58,.95);color:#fff}
.btn-g:focus-visible::after{left:130%}
@media (hover:hover) and (pointer:fine){.btn-g:hover{transform:translateY(-1px);box-shadow:0 14px 24px -10px rgba(200,58,58,.95);color:#fff}.btn-g:hover::after{left:130%}}  /* L-015: no sticky hover on touch */
.btn-g:focus-visible{outline:3px solid var(--focus,#D44040);outline-offset:2px}
.btn-g--sm{min-height:44px;padding:0 16px;font-size:.88rem}
.btn-o{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#A12A2A;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.btn-g,.btn-g::after{transition:none}.btn-g:hover{transform:none}}

/* a button is always white on red, wherever it sits (the page's link colour must never win) */
.btn-g,.btn-g:visited,.pl .btn-g,.pl--cta .pi .btn-g,.policy .btn-g,a.btn-g:hover{color:#fff;text-decoration:none}
/* 4 columns on the Pricing page: free first steps, Rooms, Sprints, units and engines */
@media(min-width:48em){.rd.rd--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:75em){.rd.rd--4{grid-template-columns:repeat(4,1fr)}}
.rd--4 .rd__c .pr{font-size:1.15rem}

/* ---- price rows in the 3 columns (title, price, button) ---- */
.pl.pl--cta{list-style:none;padding:0;margin:10px 0 0}
.pl--cta .pi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;padding:10px 0;border-top:1px solid var(--line,#D9DEDE)}
.pl--cta .pi__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl--cta .pi__t a{color:var(--link,#D44040);font-weight:600}
.pl--cta .pi__t b{font-variant-numeric:tabular-nums}
.pl--cta .pi .btn-g{grid-column:1 / -1;justify-self:start}
@media(min-width:48em){.pl--cta .pi{grid-template-columns:1fr auto auto}.pl--cta .pi .btn-g{grid-column:auto}}

/* ---- folding unit and engine list ---- */
.un-bar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 14px}
.un-bar button{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid #1A1A1A;background:#fff;color:#1A1A1A;font:700 .88rem var(--font-body,"Source Sans 3",system-ui,sans-serif);cursor:pointer}
.un-bar button:hover,.un-bar button:focus-visible{background:#1A1A1A;color:#fff}
.un-list{display:grid;gap:12px}
.un{--c:#D44040;background:#fff;border:1px solid var(--line,#D9DEDE);border-left:6px solid var(--c);border-radius:14px;overflow:hidden}
.un>summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;min-height:64px}
.un>summary::-webkit-details-marker{display:none}
.un>summary:hover{background:#FBF8F5}
.un>summary:focus-visible{outline:3px solid var(--focus,#D44040);outline-offset:-3px}
.un__i{font-size:1.9rem;line-height:1}
.un__n{display:flex;flex-direction:column;gap:2px;font:700 1.08rem var(--font-heading,"Source Sans 3",sans-serif);color:var(--fg-heading,#1A1A1A)}
.un__n small{font:600 .85rem var(--font-body,"Source Sans 3",system-ui,sans-serif);color:var(--c)}
.un__p{font:800 1.1rem var(--font-heading,"Source Sans 3",sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.un__x{width:12px;height:12px;border-right:3px solid #1A1A1A;border-bottom:3px solid #1A1A1A;transform:rotate(45deg);transition:transform .25s ease;margin:0 6px 4px 2px}
.un[open]>summary .un__x{transform:rotate(-135deg);margin-bottom:-4px}
.un__b{padding:4px 16px 16px;border-top:1px solid var(--line,#D9DEDE);background:#FDFBF9}
.eng-list{list-style:none;margin:0;padding:0}
.eng{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--line,#D9DEDE)}
.eng__i{font-size:1.7rem;line-height:1}
.eng__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.eng__t a{font:700 1rem var(--font-heading,"Source Sans 3",sans-serif);color:var(--fg-heading,#1A1A1A);text-decoration:none}
.eng__t a:hover,.eng__t a:focus-visible{color:var(--c-sol-text,#B83434);text-decoration:underline}
.eng__t small{color:var(--fg-muted,#5E6D74);font-size:.88rem;line-height:1.4}
.eng__t .eng__x{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.eng__t .eng__x span{padding:2px 10px;border-radius:999px;background:#EEF2F4;color:#1A1A1A;font-size:.78rem;font-weight:600}
.eng>b{font:800 1.02rem var(--font-heading,"Source Sans 3",sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.eng .btn-g{grid-column:2 / -1;justify-self:start}
@media(min-width:48em){.eng{grid-template-columns:auto 1fr auto auto}.eng .btn-g{grid-column:auto}}
.un__f{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px 0 0}
@media(max-width:520px){.un>summary{grid-template-columns:auto 1fr auto;}.un__p{grid-column:2;grid-row:2}.un__x{grid-row:1;grid-column:3}}
@media(prefers-reduced-motion:reduce){.un__x{transition:none}}

/* ---- the circle diagram (preview) ---- */
.lpd{max-width:1100px;margin:0 auto}
.lpd__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-weight:700}
.lpd__crumb button{min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid #1A1A1A;background:#fff;color:#1A1A1A;font:700 .88rem var(--font-body,"Source Sans 3",system-ui,sans-serif);cursor:pointer}
.lpd__crumb button[aria-current]{background:#1A1A1A;color:#fff}
.lpd__crumb span{color:#98A4AA}
.lpd__grid{display:grid;gap:22px;align-items:start}
@media(min-width:60em){.lpd__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.lpd__stage{position:relative;background:radial-gradient(circle at 50% 45%,#fff 0%,#FBF3F1 100%);border:1px solid var(--line,#D9DEDE);border-radius:24px;padding:10px}
.lpd__svg{display:block;width:100%;height:auto}
.lpd__svg text{font-family:var(--font-heading,"Source Sans 3",system-ui,sans-serif);pointer-events:none}
.lpd__node{cursor:pointer;outline:none}
.lpd__node circle.c{transition:transform .2s ease,filter .2s ease;transform-box:fill-box;transform-origin:center}
.lpd__node:hover circle.c,.lpd__node:focus-visible circle.c{transform:scale(1.04);filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.lpd__node:focus-visible circle.c{stroke:#D44040;stroke-width:5}
.lpd__node.is-leaf{cursor:default}
.lpd__in .lpd__node{animation:lpdPop .45s cubic-bezier(.22,1,.36,1) both}
.lpd__in .lpd__node:nth-child(2){animation-delay:.04s}.lpd__in .lpd__node:nth-child(3){animation-delay:.08s}.lpd__in .lpd__node:nth-child(4){animation-delay:.12s}.lpd__in .lpd__node:nth-child(5){animation-delay:.16s}.lpd__in .lpd__node:nth-child(6){animation-delay:.2s}.lpd__in .lpd__node:nth-child(7){animation-delay:.24s}
@keyframes lpdPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.lpd__node{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.lpd__in .lpd__node{animation:none}.lpd__node circle.c{transition:none}}
.lpd__panel{background:#fff;border:1px solid var(--line,#D9DEDE);border-radius:20px;padding:20px}
.lpd__panel h2{margin:0 0 4px;font-size:1.35rem}
.lpd__lvl{display:inline-block;margin:0 0 8px;padding:2px 10px;border-radius:6px;background:#1A1A1A;color:#fff;font:700 .75rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.06em;text-transform:uppercase}
.lpd__panel p{margin:.4em 0;max-width:none}
.lpd__kids{list-style:none;margin:12px 0 0;padding:0}
.lpd__kids li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line,#D9DEDE)}
.lpd__kids button{all:unset;cursor:pointer;color:#A12A2A;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lpd__kids button:focus-visible{outline:3px solid var(--focus,#D44040);outline-offset:2px}
.lpd__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.lpd__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;font-size:.9rem;color:var(--fg-muted,#5E6D74)}
.lpd__legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.lpd__tree{margin:26px 0 0}
.lpd__tree details{margin:4px 0 4px 18px}
.lpd__tree>details{margin-left:0}
.lpd__tree summary{cursor:pointer;padding:4px 0;font-weight:700;line-height:1.4}
.lpd__tree summary small{margin-left:8px;font-weight:500;color:var(--fg-muted,#5E6D74)}
.lpd__tree ul{list-style:none}
.lpd__tree ul{list-style:none;margin:2px 0 6px 18px;padding:0}
.lpd__tree li{padding:2px 0;margin:0}
.lpd__tree details{margin-top:0;margin-bottom:0}
.lpd__wide{display:none}
@media(min-width:48em){.lpd__wide{display:block}.lpd__tree-note{display:none}}

/* ---- the nested map: LeapOS > Unit > Engine > Sprint > Room, each with its rule and its principle ---- */
.osm-wrap{max-width:960px;margin:0 auto}
.osm{--osm-bg:#FFF4F1;--osm-bd:#EAB4AC;position:relative;background:var(--osm-bg);border:2px solid var(--osm-bd);border-radius:18px;padding:16px 18px 18px;margin:0;color:#1A1A1A}
.osm--os{--osm-bg:#FFF4F1;--osm-bd:#E8A79E;border-radius:40px;padding:22px 22px 24px}
.osm--unit{--osm-bg:#FFE9E4;--osm-bd:#E49C91}
.osm--engine{--osm-bg:#FFDDD6;--osm-bd:#DF8D80}
.osm--sprint{--osm-bg:#FFD0C7;--osm-bd:#DA7E70}
.osm--room{--osm-bg:#FFC2B7;--osm-bd:#D56F60}
.osm .osm{margin-top:14px}
.osm__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.osm__i{font-size:1.6rem;line-height:1}
.osm__n{font:800 1.2rem var(--font-heading,"Source Sans 3",system-ui,sans-serif)}
.osm__r{margin:.35em 0 0;font-size:.98rem;line-height:1.45;max-width:none}
.osm__p{margin:.4em 0 0;font:700 .86rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);color:#A12A2A;max-width:none}
.osm.is-here{border-color:#D44040;box-shadow:0 0 0 4px rgba(200,58,58,.22),0 14px 28px -16px rgba(200,58,58,.6)}
.osm__here{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#D44040;color:#fff;font:800 .82rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){.osm__here{animation:osmNudge 2.4s ease-in-out infinite}@keyframes osmNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}}
.osm-lead{margin:0 0 14px;font:700 1.05rem var(--font-heading,"Source Sans 3",system-ui,sans-serif)}
.osm-note{margin:14px 0 0;font-size:.92rem;color:var(--fg-muted,#5E6D74)}
.osm-tog{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.osm-tog button{min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid #1A1A1A;background:#fff;color:#1A1A1A;font:700 .85rem var(--font-body,"Source Sans 3",system-ui,sans-serif);cursor:pointer}
.osm-tog button[aria-pressed="true"]{background:#1A1A1A;color:#fff}
@media(max-width:600px){.osm{padding:12px 12px 14px}.osm--os{border-radius:28px;padding:16px 12px 18px}.osm .osm{margin-top:10px}.osm__here{margin-left:0}}
/* in the 4-column layout each row stacks: name and price, then the button, so names never squeeze */
.rd--4 .pl--cta .pi{grid-template-columns:1fr}
.rd--4 .pl--cta .pi .btn-g{grid-column:1}
.rd--4 .pl--cta .pi__t{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}