/* THE FEATURE KIND, lifted from the approved example on the board, rebrand/pages/src/feat-evosi.html (a4fdc4d),
   where it sat inside the page. The same on every feature page (feat-offline carries the identical block). */
/* THE FEATURE PAGE KIND. Every feature page carries this same block until the site build moves it into the shared styles.
   1 the opening: crumbs, label, the big words, the lead and the start   2 the feature's own film across the page, chapters under it
   3 the feature's main list as tiles   4 the long reading (the kit's .art with its sticky .toc)   5 the kit's closing band */
.pg-feat [id]{scroll-margin-top:96px}
.pg-feat .feat-hero{padding-bottom:clamp(32px,4vw,60px)}
.feat-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,72px);align-items:end}
.feat-top h1{max-width:17ch}
.feat-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:5px 14px 5px 5px;border-radius:14px;background:rgba(255,255,255,.66);box-shadow:0 0 0 1px rgba(14,14,16,.07);font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink)}
.feat-tag .ti{width:30px;height:30px;border-radius:10px;background:var(--ink);color:var(--sun);display:grid;place-items:center;flex:none}
.feat-tag .orb{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3B8 0%,#FFD21F 45%,#E89A00 100%);box-shadow:0 0 10px rgba(255,210,31,.75)}
.feat-top .si-means{margin:18px 0 0;max-width:24em}
.feat-side .lead{margin:0;max-width:40em}
.feat-go{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:24px}
.feat-go .note{margin:0}
.film-sec{padding:clamp(24px,2.8vw,40px) 0 clamp(44px,5vw,76px)}
.film{margin:0}
.film-frame{position:relative;aspect-ratio:1920/800;border-radius:28px;overflow:hidden;background:#1A1A1E;box-shadow:0 40px 90px -50px rgba(14,14,16,.6)}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-pause{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:12px;border:0;background:rgba(14,14,16,.62);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-pause .i-pl,.film-pause[aria-pressed="true"] .i-pa{display:none}
.film-pause[aria-pressed="true"] .i-pl{display:block}
.film-ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,40px);margin-top:clamp(16px,2vw,26px)}
.film-ch .ch{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0 2px;border:0;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer;opacity:.58;transition:opacity .3s}
.film-ch .ch.on,.film-ch .ch:hover{opacity:1}
.film-ch .ch b{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.35vw,21px);letter-spacing:-0.01em;line-height:1.2}
.film-ch .ch span{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:46ch}
.feat-list{background:var(--panel);padding:clamp(56px,7vw,112px) 0}
.fl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fl-head{grid-column:span 2;display:flex;flex-direction:column;gap:16px;padding:6px clamp(0px,4vw,72px) 18px 0}
.fl-head .caps{font-size:clamp(32px,3.4vw,62px)}
.fl-head p{margin:0;max-width:50ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-2)}
.fl-card{background:#fff;border-radius:22px;padding:clamp(20px,1.9vw,28px);display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:0 0 0 1px #E6E6DF}
.fl-card .ti{width:42px;height:42px;border-radius:13px;background:var(--sun);color:var(--ink);display:grid;place-items:center;flex:none}
.fl-t{display:flex;flex-direction:column;gap:10px;min-width:0}
.fl-card h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(19px,1.45vw,22px);line-height:1.18;letter-spacing:-0.01em}
.fl-card p,.fl-card ul{margin:0;font-size:16px;line-height:1.52;color:var(--ink-2)}
.fl-card ul{padding-left:1.15em}
.fl-card li + li{margin-top:.4em}
.fl-card b{font-family:var(--display);font-weight:800;color:var(--ink)}
.pg-feat .art > h2:first-child{margin-top:0}
@media (max-width:1100px){.fl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fl-head{grid-column:1/-1;padding-right:0}.fl-grid > .fl-card:last-child:nth-child(even){grid-column:1/-1}}
@media (max-width:980px){.feat-top{grid-template-columns:minmax(0,1fr);gap:0}.feat-side{margin-top:clamp(16px,2vw,24px)}}
@media (max-width:640px){
  .film-frame{border-radius:16px}
  .film-pause{right:8px;bottom:8px;width:36px;height:36px;border-radius:10px}
  .film-ch .ch span{font-size:14px}
  .feat-go .btn{width:100%}
  .fl-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .fl-grid > .fl-card:last-child{grid-column:auto}
  .fl-card{flex-direction:row;align-items:flex-start;padding:18px}
  .fl-card .ti{width:38px;height:38px;border-radius:12px}
}


/* THE PAGES WITH NO FILM OF THEIR OWN YET (check-ins, client support, GPS, switching), as built from the kind: the same
   block on all four, lifted here from their pages. */
/* this page has no film of its own yet: a clip from the home page in the film's frame, with a panel over it (under it on a phone) */
.clip-fig{position:relative}
.clip-ui{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:min(360px,calc(100% - 100px))}
.clip-ui .panel{width:100%}
.clip-ui .hd b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-0.01em}
.clip-ui .line{opacity:1;transform:none}
@media (max-width:820px){.clip-ui{position:static;width:auto;margin-top:12px}.clip-ui .panel{box-shadow:0 0 0 1px #E6E6DF}}

/* a table sits in a figure whose caption is a small note above it, as on the answers and the guides */
.pg-feat .art .tbl-fig{margin:1.4em 0 0}
.pg-feat .tbl-fig figcaption{margin:0 0 10px;padding:0 2px;font-size:14px;line-height:1.45;color:var(--muted)}