/** Shopify CDN: Minification failed

Line 155:2 Unexpected "@keyframes"

**/
/* ===========================================================================
   OUR PUBLISHING PROCESS — design handoff styles.

   SOURCE OF TRUTH: design-system/ui_kits/website/process.html, the SECOND
   <style> block. This file is that block, verbatim, with exactly three classes
   of change — anything else is a bug:

   1. rem -> px (x16). Dawn sets html{font-size:62.5%}, so 1rem is 10px here and
      16px locally; every rem would render at 62.5% of the approved size.
   2. Globals already published by tws-base.css on [data-tws] are dropped so
      there is one owner: the `a` / `a:hover` colours, `button{font-family}`
      (cursor:pointer is kept — base does not set it) and the h1..h4
      colour/line-height reset.
   3. Nothing else. Every selector was ALREADY scoped to .tws-proc in the local
      file, so unlike tws-about.css this sheet needed no rescoping.

   html{overflow-x:clip;scroll-behavior:smooth} is deliberately left global, as
   in tws-about.css: it only loads on pages that render a process section.

   Every section wrapper is <div class="tws-proc" data-tws>, reproducing the
   local file's wrapper, so every selector below matches unchanged.
   =========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   OUR PUBLISHING PROCESS — the handoff's own stylesheet.
   Every selector is scoped to .tws-proc so the locked chrome, the
   authors mosaic, the newsletter and the footer are untouched.
   Two keyframes were renamed (para→procPara, draw→procDraw): the
   homepage sheet defines both with DIFFERENT values and the authors
   mosaic depends on its `para`.
   ══════════════════════════════════════════════════════════════════ */

  html{overflow-x:clip;scroll-behavior:smooth}
  .tws-proc button{cursor:pointer}   /* font-family + letter-spacing come from tws-base.css */

  @keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  @keyframes procPara{from{transform:translateY(-24px)}to{transform:translateY(24px)}}
  @keyframes riseS{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes inL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
  @keyframes inR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
  @keyframes fadeOnly{from{opacity:0}to{opacity:1}}
  @keyframes wordUp{from{transform:translateY(118%) rotate(5deg)}to{transform:none}}
  @keyframes procDraw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
  @keyframes bobS{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
  @keyframes bobI{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(-1.8deg)}}
  @keyframes tickIn{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}

  .tws-proc /* split-word headline reveal — house signature */
  .sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
  .tws-proc .sw > i{display:inline-block;font-style:inherit;will-change:transform;transform:translateY(118%) rotate(5deg)}
  .tws-proc .sw.on > i{animation:wordUp .82s cubic-bezier(.19,1,.22,1) both}

  .tws-proc /* hero contents rail */
  .tk{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid rgba(16,57,72,.16);padding:11px 0;text-align:left;color:#33474e;transition:color 200ms cubic-bezier(.22,.61,.36,1),padding-left 220ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .tk:hover{color:#12262e;padding-left:8px}
  .tws-proc .tk .tkn{font-family:Jost,sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;color:rgba(124,59,52,.62);transition:color 200ms ease}
  .tws-proc .tk:hover .tkn{color:var(--acc,#d9822b)}
  .tws-proc .tk .tka{font-size:14px;opacity:0;transform:translateX(-6px);transition:opacity 200ms ease,transform 200ms ease;color:var(--acc,#d9822b)}
  .tws-proc .tk:hover .tka{opacity:1;transform:none}

  .tws-proc /* eight stages — spine + dots */
  .sg-dot{transition:background 320ms cubic-bezier(.22,.61,.36,1),color 320ms ease,border-color 320ms ease,transform 320ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .sg-row.on .sg-dot{background:#12262e;color:#f6efe1;border-color:#12262e;transform:scale(1.06)}
  .tws-proc .sg-h{transition:color 240ms ease}
  .tws-proc .sg-row:hover .sg-h{color:var(--acc,#d9822b)}
  .tws-proc .sg-row .sg-meta{transition:border-color 260ms ease}
  .tws-proc .sg-row.on .sg-meta{border-color:rgba(16,57,72,.3)}

  .tws-proc /* week ruler */
  .tl-tabs{border-bottom:1px solid rgba(16,57,72,.22)}
  .tws-proc .tl-tabs-in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
  .tws-proc .tl-tabs-in::-webkit-scrollbar{display:none}
  .tws-proc .tl-tab{position:relative;flex:0 0 auto;display:flex;align-items:baseline;gap:9px;background:none;border:0;appearance:none;-webkit-appearance:none;padding:11px clamp(14px,2vw,26px) 14px;cursor:pointer;transition:background 260ms ease}
  .tws-proc .tl-tab + .tl-tab{box-shadow:inset 1px 0 0 rgba(16,57,72,.16)}
  .tws-proc .tl-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#12262e;transform:scaleX(0);transform-origin:left;transition:transform 380ms cubic-bezier(.22,1,.36,1)}
  .tws-proc .tl-tab-n{font-family:Jost,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2em;color:#a8813f;opacity:.5;transition:opacity 240ms ease}
  .tws-proc .tl-tab-t{font-family:'Cormorant Garamond',serif;font-size:clamp(18.4px,1.9vw,24.8px);font-weight:600;letter-spacing:-.012em;line-height:1;color:#6b7c84;transition:color 240ms ease}
  .tws-proc .tl-tab:hover{background:rgba(251,248,241,.66)}
  .tws-proc .tl-tab:hover .tl-tab-t{color:#12262e}
  .tws-proc .tl-tab:hover .tl-tab-n{opacity:.85}
  .tws-proc .tl-tab[aria-selected="true"]{background:#fbf8f1}
  .tws-proc .tl-tab[aria-selected="true"] .tl-tab-t{color:#12262e}
  .tws-proc .tl-tab[aria-selected="true"] .tl-tab-n{opacity:1}
  .tws-proc .tl-tab[aria-selected="true"]::after{transform:scaleX(1)}
  .tws-proc .tl-panel{display:none}
  .tws-proc .tl-panel.on{display:block}
  .tws-proc .tl-cont{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:Jost,sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7c3b34;pointer-events:none}
  .tws-proc .bar-fill{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1)}
  .tws-proc .bar-fill.on{transform:scaleX(1)}
  .tws-proc .bar-row:hover .bar-fill{filter:brightness(1.06)}

  .tws-proc /* author checklist */
  .ck-row .ck-box svg path{stroke-dasharray:26;stroke-dashoffset:26}
  .tws-proc .ck-row.on .ck-box svg path{animation:tickIn .5s cubic-bezier(.22,1,.36,1) both}
  .tws-proc .ck-row .ck-box{transition:background 340ms ease,border-color 340ms ease}
  .tws-proc .ck-row.on .ck-box{background:rgba(212,175,105,.24);border-color:#12262e}
  .tws-proc .ck-row{transition:transform 240ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .ck-row:hover{transform:translateX(5px)}

  .tws-proc /* package cards */
  .pk{position:relative;transition:transform 460ms cubic-bezier(.22,1,.36,1),box-shadow 460ms cubic-bezier(.22,1,.36,1),border-color 340ms ease}
  .tws-proc .pk:hover{transform:translateY(-7px)}
  .tws-proc .pk::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:#d4af69;transform:scaleX(0);transform-origin:left;transition:transform 620ms cubic-bezier(.22,1,.36,1)}
  .tws-proc .pk:hover::before{transform:scaleX(1)}
  .tws-proc .pk-1:hover{box-shadow:0 18px 44px rgba(16,57,72,.13)}
  .tws-proc .pk-2:hover{box-shadow:0 22px 52px rgba(16,57,72,.16)}
  .tws-proc .pk-3:hover{box-shadow:0 30px 70px rgba(16,57,72,.22),0 0 0 5px rgba(212,175,105,.16)}
  .tws-proc .pk-4:hover{box-shadow:0 26px 62px rgba(16,57,72,.2)}
  .tws-proc .pk-3::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(104deg,transparent 40%,rgba(212,175,105,.2) 50%,transparent 60%);background-size:280% 100%;animation:shine 7.5s ease-in-out infinite}
  @keyframes shine{0%{background-position:190% 0}60%,100%{background-position:-90% 0}}

  .tws-proc /* ⓘ popovers — detail without cluttering the card */
  .ipop{position:relative;display:inline-flex;vertical-align:middle}
  .tws-proc .ib{width:15px;height:15px;border-radius:50%;border:1px solid rgba(16,57,72,.38);background:transparent;color:#33474e;font-family:Jost,sans-serif;font-size:9px;font-weight:700;line-height:1;display:grid;place-items:center;padding:0;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 200ms cubic-bezier(.22,1,.36,1)}
  .tws-proc .ipop:hover .ib,.tws-proc .ipop:focus-within .ib{background:#12262e;border-color:#12262e;color:#f6efe1;transform:scale(1.12)}
  .tws-proc .pop{position:absolute;bottom:calc(100% + 11px);left:-10px;width:248px;z-index:40;background:#fdfaf2;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(16,57,72,.2);border-radius:5px;box-shadow:0 22px 50px rgba(16,57,72,.3);padding:13px 15px;font-family:Jost,sans-serif;font-size:12.5px;line-height:1.6;color:#33474e;text-align:left;opacity:0;transform:scale(.93) translateY(5px);transform-origin:bottom left;pointer-events:none;transition:opacity 240ms cubic-bezier(.22,1,.36,1),transform 240ms cubic-bezier(.22,1,.36,1)}
  .tws-proc .pop-r{left:auto;right:-10px;transform-origin:bottom right}
  .tws-proc .pop{max-height:min(58vh,420px);overflow-y:auto;overscroll-behavior:contain}
  .tws-proc .ipop:hover .pop,.tws-proc .ipop:focus-within .pop{opacity:1;transform:none;pointer-events:auto}
  .tws-proc .adr{transition:color 200ms ease,padding-left 220ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .adr:hover{color:#12262e;padding-left:5px}

  .tws-proc /* FAQ */
  .faq summary{list-style:none}
  .tws-proc .faq summary::-webkit-details-marker{display:none}
  .tws-proc .faq summary::marker{content:''}
  .tws-proc .faq summary:hover .faq-q{color:var(--acc,#d9822b)}
  .tws-proc .faq-q{transition:color 220ms ease}
  .tws-proc .faq-m{transition:transform 260ms cubic-bezier(.22,.61,.36,1),color 220ms ease}
  .tws-proc .faq[open] .faq-m{transform:rotate(45deg)}
  .tws-proc .faq[open] .faq-a{animation:riseS .36s cubic-bezier(.22,.7,.25,1) both}

  .tws-proc /* buttons */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border-radius:4px;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border:1.5px solid #12262e;transition:color 240ms ease,background 240ms ease,transform 240ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .btn:hover{transform:translateY(-2px)}
  .tws-proc .btn-fill{background:#12262e;color:#f6efe1}
  .tws-proc .btn-fill:hover{background:#1a4e5f;border-color:#1a4e5f;color:#f6efe1}
  .tws-proc .btn-out{background:transparent;color:#12262e}
  .tws-proc .btn-out:hover{background:#12262e;color:#f6efe1}
  .tws-proc .btn-lin{background:#f6efe1;color:#12262e;border-color:#f6efe1}
  .tws-proc .btn-lin:hover{background:#d4af69;border-color:#d4af69;color:#12262e}
  .tws-proc .btn-ink{background:#1a1a1a;color:#f6efe1;border-color:#1a1a1a}
  .tws-proc .btn-ink:hover{background:#12262e;border-color:#12262e}
  .tws-proc .btn-inkout{background:transparent;color:#1a1a1a;border-color:#1a1a1a}
  .tws-proc .btn-inkout:hover{background:#1a1a1a;color:#f6efe1}
  .tws-proc .lk{display:inline-flex;align-items:center;gap:8px;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:gap 200ms ease}
  .tws-proc .lk:hover{gap:14px}

  .tws-proc /* packages — chaptered columns */
  @keyframes lnUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes drawXr{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes drawYr{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .tws-proc #cost.pk-anim .ln{opacity:0}
  .tws-proc #cost.pk-anim .ln.on{animation:lnUp .68s cubic-bezier(.22,.7,.25,1) both}
  .tws-proc #cost.pk-anim .rl-x{transform:scaleX(0)}
  .tws-proc #cost.pk-anim .rl-x.on{animation:drawXr 1s cubic-bezier(.22,1,.36,1) both}
  .tws-proc #cost.pk-anim .rl-y{transform:scaleY(0)}
  .tws-proc #cost.pk-anim .rl-y.on{animation:drawYr 1s cubic-bezier(.22,1,.36,1) both}
  .tws-proc .cl{transition:background 420ms ease}
  .tws-proc .cl:hover{background:rgba(212,175,105,.09)}
  .tws-proc .cl .cl-ul,.tws-proc .cl .cl-ul2{transition:background 320ms ease}
  .tws-proc .cl:hover .cl-ul{background:#12262e}

  .tws-proc /* authors mosaic */
  #authors > div:nth-child(2){gap:12px}
  @media (max-width:1080px){
  }
  @media (max-width:720px){
  }
  @media (max-width:1080px){
    .tws-proc .hero-grid{grid-template-columns:1fr !important;gap:36px !important}
    .tws-proc .hero-rail{order:2}
    .tws-proc .sg-grid{grid-template-columns:1fr !important;gap:8px !important}
    .tws-proc .sg-aside{display:none !important}
    .tws-proc .chp{grid-template-columns:1fr 1fr !important}
    .tws-proc .pop{width:230px}
    .tws-proc .ck-grid{grid-template-columns:1fr !important;gap:30px !important}
    .tws-proc .voice-grid{grid-template-columns:1fr !important;gap:28px !important}
    .tws-proc .cta-grid{grid-template-columns:1fr !important;gap:30px !important}
  }
  @media (max-width:860px){
    .tws-proc .chp{grid-template-columns:1fr !important}
    .tws-proc .cl{padding-left:0 !important;padding-right:0 !important;border-top:1px solid rgba(16,57,72,.14)}
    .tws-proc .rl-y{display:none}
    .tws-proc .cl-ul,.tws-proc .cl-ul2{transform:none !important}
    .tws-proc .start-grid{grid-template-columns:1fr !important}
    .tws-proc .start-card{border-left:0 !important;padding-left:0 !important;padding-top:26px;border-top:1px solid rgba(16,57,72,.16)}
    .tws-proc .start-card:first-child{padding-top:0;border-top:0 !important}
    .tws-proc .tl-row{grid-template-columns:1fr !important;gap:10px !important}
    .tws-proc .tl-tab{padding-left:14px;padding-right:14px}
    .tws-proc .tl-tab-n{display:none}
    .tws-proc .tl-cont{font-size:8.5px;right:6px}
    .tws-proc .tl-scale{display:none !important}
    .tws-proc .keep-grid{grid-template-columns:1fr 1fr !important}
    .tws-proc .pk-grid{grid-template-columns:1fr !important}
    .tws-proc .addl{grid-template-columns:1fr !important}
    .tws-proc .pop,.tws-proc .pop-r{left:-10px;right:auto;transform-origin:bottom left}
    .tws-proc .sg-meta{grid-template-columns:1fr !important;gap:14px !important}
    .tws-proc .hero-obj{width:38vw !important;right:-4% !important}
    .tws-proc .ft-grid{grid-template-columns:1fr 1fr !important}
    .tws-proc .ft-grid > div:first-child{grid-column:1 / -1}
  }
  @media (max-width:560px){
    .tws-proc .keep-grid{grid-template-columns:1fr !important}
    .tws-proc .hero-obj{display:none !important}
  }
  @media (prefers-reduced-motion:reduce){
    .tws-proc .bar-fill{transform:none !important}
    .tws-proc .sw > i{transform:none !important}
    .tws-proc .bar-fill{transform:scaleX(1) !important}
  }


  /* ══════════════ A REVEAL MUST NEVER BE THE ONLY THING THAT SHOWS CONTENT ══════
     THE PACKAGES SECTION RENDERED BLANK, and this is why. The handoff hides all
     113 package lines with `#cost.pk-anim .ln{opacity:0}` and both hairline
     families with scaleX/scaleY(0), then relies on an ANIMATION to bring them
     back. Its own reduced-motion block then kills every animation
     (`*{animation:none !important}`) and resets only `.bar-fill` and `.sw > i` —
     so with "Reduce motion" switched on, Packages is blank permanently. Verified:
     all 113 lines take the `.on` class correctly and still compute opacity 0.
     Fix: `.on` now carries the END STATE itself and the animation is merely how
     it gets there. The entrance still plays normally, because a running animation
     outranks a normal declaration. Nothing on this page is invisible unless an
     animation runs. */
  .tws-proc #cost.pk-anim .ln.on{opacity:1}
  .tws-proc #cost.pk-anim .rl-x.on{transform:scaleX(1)}
  .tws-proc #cost.pk-anim .rl-y.on{transform:scaleY(1)}
  .tws-proc .sw.on > i{transform:none}

  @media (prefers-reduced-motion:reduce){
    /* belt and braces: JS also skips both mechanisms outright under reduce */
    .tws-proc #cost.pk-anim .ln,.tws-proc #cost.pk-anim .ln.on{opacity:1 !important}
    .tws-proc #cost.pk-anim .rl-x,.tws-proc #cost.pk-anim .rl-x.on{transform:scaleX(1) !important}
    .tws-proc #cost.pk-anim .rl-y,.tws-proc #cost.pk-anim .rl-y.on{transform:scaleY(1) !important}
    .tws-proc [data-rv]{opacity:1 !important}
    /* the tick is drawn by animating stroke-dashoffset 26 → 0; with animations off
       it stays at 26 and every checkbox reads empty */
    .tws-proc .ck-row .ck-box svg path{stroke-dashoffset:0 !important}
  }

  /* styles.css / tokens+base set `h1..h4{color:var(--text-primary);line-height:
     var(--leading-tight)}`. This design has no heading rule of its own, so its
     headings are meant to inherit colour from their section — and #begin sets
     `color:#1a1a1a`, which base.css was overriding to #12262e. Scoped reset:
     (0,1,1) beats (0,0,1), and any heading with an inline value still wins.
     Same fix the homepage (.tws-new) and About (.tws-about) already carry. */

  /* ══════════════ HOVER STATES ══════════════
     style-hover="…" is a Design-Component attribute that does nothing in plain
     HTML. The authors section keeps the homepage's own wrapper (.tws-new), so
     index.html's rules already cover it; nothing else on this page uses one. */

  /* ══════════════ MOBILE OPTIMISATION ══════════════
     The handoff's own 1080 / 860 / 560 rules are left exactly as authored
     above. Everything below refines them down to 320px. */

  /* anchor targets must clear the sticky header */
  .tws-proc section[id]{scroll-margin-top:104px}
  .tws-proc [id^="stage-"]{scroll-margin-top:104px}


  /* ── the `.two` header grids never collapsed ──
     Packages opens with a 2-column band (heading | lede) and Additional
     services repeats it. The handoff wrote no rule for `.two`, so at 320px the
     h2 "Four ways to publish your book in Pakistan." was living in a 140px
     column and "Additional" (105px) overflowed its 101px one. Columns are set
     inline, hence !important. */
  @media (max-width:860px){
    .tws-proc .two{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;align-items:start !important}
  }

  /* ── FAQ intro column ──
     It is `position:sticky` inline so it can ride alongside the question list
     on desktop. Below 1080 the grid is ONE column, so a sticky block simply
     parks itself over the questions you are scrolling to. */
  @media (max-width:1080px){
    .tws-proc #faq > div > div:first-child{position:static !important}
  }

  /* `.faq-q` is a flex item, so min-width defaults to auto and it would refuse
     to shrink below its longest word. No question is long enough to hit that
     today; the guard is here so a longer one added later cannot push the +
     marker out. (The marker's rotated bounding box reads ~6px wider than its
     layout box while open — that is the rotation, not an overflow.) */
  .tws-proc .faq summary > .faq-q{min-width:0}
  @media (max-width:560px){
    .tws-proc .faq summary{gap:12px}
  }

  /* the single CTA button goes full width on a phone rather than sitting as a
     small centred pill (it used to share the row with a samples@ button, whose
     306px min-content width was also blowing the 272px track open at 320) */
  @media (max-width:560px){
    .tws-proc #begin .btn{width:100%;justify-content:center;padding-left:14px;padding-right:14px}
  }

  /* ── ⓘ popovers ──
     Each panel is absolutely positioned against its own trigger at left:-10px
     (or right:-10px for .pop-r). That is safe in a 4-column desktop grid; on a
     342px phone column every trigger past the middle threw the panel off the
     screen — 47 nodes measured outside the viewport at 390. CSS caps the width;
     keeping it inside is initPops(), because a stylesheet cannot know where the
     trigger sits. Do NOT nudge it with `transform` — that property carries the
     open animation. */
  @media (max-width:860px){
    /* the card has to be able to FIT the screen before initPops() can place it
       inside one: 46vh was leaving the longest panels (Marketing · Premium, 12
       rows) scrolling internally. `100svh` is the small viewport — the one that
       stays put when the mobile toolbar is showing. */
    .tws-proc .pop,.tws-proc .pop-r{width:min(268px,calc(100vw - 32px));max-height:calc(100svh - 24px)}

    /* ⚠⚠ CAPPING THE WIDTH WAS NOT ENOUGH, AND initPops() DOES NOT COVER THIS.
       initPops() binds `pointerenter` and `focusin` — it places a panel when it
       OPENS, and on `resize` it CLEARS the placement again. So for every visitor
       who never touches a tooltip, all 17 panels sit at the authored
       `left:-10px` at 268px wide. Any trigger past ~132px on a 390 viewport
       throws its panel over the right edge, nothing up the ancestor chain clips
       (`overflow:visible` throughout), and `opacity:0` still occupies layout —
       so the DOCUMENT grew to 588px against a 390px screen. Measured: 198px of
       phantom sideways scroll into empty space, 121 nodes past the edge.

       Taking the closed panel out of layout is the only fix that does not
       depend on JS having run. The trigger is a real <button>, so
       :focus-within fires on tap and the panel still opens on a phone. */
    .tws-proc .pop{display:none}
    .tws-proc .ipop:hover .pop,
    .tws-proc .ipop:focus-within .pop{display:block}
  }

  /* ══════════════ THE PACKAGE TABS — A REAL SEGMENTED CONTROL ══════════════
     The handoff drew four bare words on a hairline with the active one marked
     only by a lighter fill and a 2px underline: on the sand band that read as
     labels, not as something you press. One ink-bordered control now, hairline
     cells, and the selected cell carries the BRAND OCHRE — the same #D9822B the
     hero eyebrow and the launch bar already use, so the control is the warmest
     thing in a cool section rather than another neutral box. Ink on ochre
     measures 5.95:1, so the label stays properly legible on the fill. */
  .tws-proc .tl-tabs{border-bottom:0}
  .tws-proc .tl-tabs-in{border:1.5px solid #12262e;border-radius:3px;overflow:hidden;
    background:#FBF8F1;box-shadow:0 1px 0 rgba(18,38,46,.05)}
  .tws-proc .tl-tab{flex:1 1 0;min-width:0;justify-content:center;align-items:baseline;
    gap:8px;padding:14px 16px;background:transparent;
    transition:background 240ms cubic-bezier(.22,.61,.36,1)}
  .tws-proc .tl-tab + .tl-tab{box-shadow:inset 1px 0 0 rgba(18,38,46,.2)}
  .tws-proc .tl-tab::after{display:none}                    /* the old underline bar */
  .tws-proc .tl-tab-t{color:#12262e;opacity:.55;white-space:nowrap;
    transition:color 220ms ease,opacity 220ms ease}
  /* .5, not lower: the idle number is meant to be quiet, but anything under
     that trips the page's own "is any text effectively invisible" check */
  .tws-proc .tl-tab-n{color:#8c4a3f;opacity:.5;transition:color 220ms ease,opacity 220ms ease}
  .tws-proc .tl-tab:hover{background:rgba(217,130,43,.13)}
  .tws-proc .tl-tab:hover .tl-tab-t{opacity:.95}
  .tws-proc .tl-tab:hover .tl-tab-n{opacity:.8}
  .tws-proc .tl-tab:focus-visible{outline:2px solid #12262e;outline-offset:-4px}
  .tws-proc .tl-tab[aria-selected="true"]{background:#D9822B}
  .tws-proc .tl-tab[aria-selected="true"] .tl-tab-t{color:#12262e;opacity:1}
  .tws-proc .tl-tab[aria-selected="true"] .tl-tab-n{color:#12262e;opacity:.55}

  /* ── "Before stage one" cards on mobile ──
     The numeral is a block above the title, which on a phone costs a whole line
     and reads as a floating glyph. Inline it onto the title's first line: the
     numeral becomes an inline-block marker and the h3 an inline run, so the
     heading wraps normally beside it. Sized down from clamp(38.4px,3.4vw,48px)
     — at the desktop size it would set the line box and dwarf a 21.6px title. */
  @media (max-width:860px){
    .tws-proc .start-card > span:first-child{display:inline-block !important;
      font-size:26px !important;line-height:1 !important;margin-right:10px;
      vertical-align:baseline}
    .tws-proc .start-card > h3{display:inline;margin:0 !important}
    .tws-proc .start-card > h3 + p{margin-top:12px !important}
  }

  /* ══════════════ ADDITIONAL SERVICES — INLINE RUNS ON MOBILE ══════════════
     Four groups of 6–9 add-ons, each row its own 40px line with a hairline: at
     one column that is 31 rows and roughly 1,240px of scrolling for a list of
     optional extras. On mobile each group becomes a single `·`-separated run of
     text — everything stays visible and scannable under its own heading, but a
     seven-item group collapses from ~280px to ~90px. The ⓘ triggers are inline
     spans already, so they ride along untouched. */
  @media (max-width:860px){
    .tws-proc .addl{gap:26px !important}
    .tws-proc .addl > div > div{display:block !important;font-size:14.5px;
      line-height:1.95;color:#223740;margin-top:10px}
    .tws-proc .addl .adr{display:inline !important;padding:0 !important;
      border-bottom:0 !important;transition:none}
    .tws-proc .addl .adr:hover{padding-left:0 !important;color:#223740}
    /* the separator hangs off the END of each item, glued on with a non-breaking
       space. As a ::before on the NEXT item it became the first thing on every
       wrapped line ("· Proofreading · Translation"), which read like a bullet
       list that had lost its indent. */
    .tws-proc .addl .adr:not(:last-child)::after{content:"\00a0·";margin-right:6px;
      color:rgba(18,38,46,.42)}
  }

  /* ══════════════ TIMELINE — COMPACT *AND* COMPOSED ON MOBILE ══════════════
     Stacking name / duration / full-width track cost ~74px a row across seven
     rows. Name and duration now share one baseline row — but compact on its own
     read as a pile of grey slabs, so: the duration is set in Cormorant italic
     (the page's own voice, the same as the package blurbs) instead of small
     grey Jost, the lanes are pill-shaped and lighter so the teal-to-ochre
     segments carry the colour, and a hairline per row gives the list a rhythm.
     The total gets a heavier rule so it reads as the sum, not another row. */
  @media (max-width:860px){
    .tws-proc #timeline{padding:clamp(40px,5.5vw,68px) 0}
    .tws-proc #timeline h2{font-size:clamp(28px,7.4vw,38.4px)}
    .tws-proc #timeline .tl-panel > div{gap:0 !important}
    .tws-proc #timeline .bar-row{gap:8px !important;padding:11px 0 13px;
      border-top:1px solid rgba(18,38,46,.13)}
    .tws-proc #timeline .bar-row:first-child{border-top:0;padding-top:2px}
    .tws-proc #timeline .bar-row > div:first-child{display:flex;flex-wrap:wrap;
      align-items:baseline;justify-content:space-between;gap:0 14px}
    .tws-proc #timeline .bar-row > div:first-child > span:first-child{font-size:18px}
    .tws-proc #timeline .bar-row > div:first-child > span:last-child{margin-top:0 !important;
      font-family:'Cormorant Garamond',serif !important;font-style:italic;
      font-size:15.5px !important;letter-spacing:0 !important;color:#4a5d65 !important;
      text-align:right}
    /* the lane: pill, lighter, so the coloured segment is what you actually see */
    .tws-proc #timeline .bar-row > div:last-child{height:11px !important;
      background:rgba(18,38,46,.075) !important;border-radius:999px !important}
    .tws-proc #timeline .bar-fill{border-radius:999px !important}
    .tws-proc #timeline .tl-total{margin-top:clamp(18px,2.6vw,24px) !important;
      padding-top:14px;border-top:1.5px solid rgba(18,38,46,.2)}
  }
  /* four Cormorant labels + padding need ~308px; a 320 screen has 272 */
  @media (max-width:430px){
    .tws-proc .tl-tab{padding:12px 6px;gap:5px}
    .tws-proc .tl-tab-t{font-size:14.5px}
    /* at 320 the longest duration ("around 1 week, overlapping printing") wraps
       to its own line, which put the section back above its pre-compaction
       height — a notch smaller on both spans buys that back */
    .tws-proc #timeline .bar-row{padding:9px 0 11px}
    .tws-proc #timeline .bar-row > div:first-child > span:first-child{font-size:17px}
    .tws-proc #timeline .bar-row > div:first-child > span:last-child{font-size:14.5px !important}
  }

/* ═══════════════ DAWN NEUTRALISER — appended, not from the local file ═══════
   Dawn's theme.liquid sets `body{color:rgba(var(--color-foreground),0.75)}` and
   tws-base.css deliberately sets no colour on [data-tws] (it sets `inherit` on
   headings, which inherits the 75% too). Measured on the pushed theme: every
   element that takes its ink by inheritance computed rgba(18,38,46,0.75)
   against the local file's rgb(18,38,46) — the section wrappers, all three h2s,
   the h1, the stage titles. Everything with an explicit colour was already
   correct, which is why only inherited ink drifted.

   Scoped to the wrapper so a dark band's own `color` on its <section> still
   wins, exactly as it does locally.
   =========================================================================== */
.tws-proc{color:#12262e}

/* ── Dawn leak #2, found by the render diff on the timeline ──────────────────
   Dawn's base.css carries
     a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty,
     p:empty, h1:empty … h6:empty { display:none }
   The 32 `.bar-fill` bars ARE empty divs — their whole job is to be a coloured
   rectangle — so every bar in the timeline computed display:none and the
   section rendered as bare grey tracks. Measured: 7/7 bars hidden in the
   visible panel, 32/32 across all four. This is the only empty element the
   process page owns; `.nav-scrim` is the header's and is meant to be hidden. */
.tws-proc .bar-fill{display:block}

/* ── Dawn leak #3 ────────────────────────────────────────────────────────────
   Dawn's base.css has `summary{position:relative}`. No offsets are applied so
   nothing moves, but it makes every FAQ summary a containing block and a
   stacking context, which the local file does not. Measured on the FAQ rows. */
.tws-proc .faq summary{position:static}